.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(900px 560px at 12% 6%, rgba(75, 139, 255, 0.12), transparent 64%),
    radial-gradient(760px 520px at 92% 100%, rgba(141, 230, 91, 0.08), transparent 62%),
    var(--bg, #080a09);
}

.auth-shell[hidden] {
  display: none;
}

.auth-card {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid var(--line, #29312d);
  border-radius: 16px;
  background: var(--panel, #111821);
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
}

.auth-brand {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 28px rgba(29, 78, 216, 0.28), inset 0 1px rgba(255, 255, 255, 0.18);
}

.auth-card h1 {
  margin: 8px 0 12px;
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.auth-form[hidden] {
  display: none;
}

.signin-layout {
  position: relative;
  width: min(980px, calc(100vw - 48px));
  max-width: 100%;
  min-width: 0;
  min-height: min(640px, calc(100dvh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  overflow: hidden;
  border: 1px solid rgba(130, 150, 141, 0.24);
  border-radius: 24px;
  background: rgba(14, 17, 16, 0.96);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.46);
}

.signin-layout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

.signin-intro {
  position: relative;
  min-width: 0;
  padding: 46px 52px 44px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(420px 330px at 82% 54%, rgba(59, 130, 246, 0.12), transparent 70%),
    linear-gradient(145deg, rgba(19, 25, 22, 0.98), rgba(9, 13, 11, 0.98));
}

.signin-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(132, 152, 141, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 152, 141, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 4%, #000 44%, transparent 96%);
}

.signin-intro::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: 62px;
  z-index: -1;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(141, 230, 91, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 46px rgba(141, 230, 91, 0.025),
    0 0 0 92px rgba(59, 130, 246, 0.025);
}

.signin-brand,
.signin-mobile-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.signin-brand strong,
.signin-brand span {
  display: block;
}

.signin-brand strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.signin-brand span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.signin-intro-copy {
  margin: auto 0;
  max-width: 430px;
}

.signin-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(141, 230, 91, 0.18);
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  background: rgba(141, 230, 91, 0.06);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.signin-kicker svg,
.signin-assurance svg,
.signin-card-footer svg,
.auth-input-wrap svg,
.auth-back svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signin-kicker svg {
  width: 16px;
  height: 16px;
}

.signin-intro-copy h2 {
  margin: 24px 0 18px;
  max-width: 470px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.signin-intro-copy > p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.signin-assurance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.signin-assurance > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.signin-assurance svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--accent);
}

.signin-assurance strong,
.signin-assurance small {
  display: block;
}

.signin-assurance strong {
  font-size: 0.76rem;
  line-height: 1.25;
}

.signin-assurance small {
  margin-top: 4px;
  color: var(--faint);
  font-size: 0.68rem;
  line-height: 1.4;
}

.auth-card.signin-card {
  width: auto;
  min-width: 0;
  padding: clamp(44px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-radius: 0;
  background: rgba(14, 17, 16, 0.98);
  box-shadow: none;
}

.signin-mobile-brand {
  display: none;
}

.signin-progress {
  margin-bottom: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 600;
}

.signin-progress > div {
  display: flex;
  gap: 6px;
}

.signin-progress i {
  width: 22px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
  transition: background 180ms ease, transform 180ms ease;
}

.signin-progress i.active {
  background: var(--accent);
}

.signin-card .eyebrow {
  color: var(--accent);
}

.signin-card h1 {
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.signin-card .auth-message {
  min-height: 3em;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.signin-card .auth-message.down {
  color: var(--down);
}

.auth-field {
  display: grid;
  gap: 9px;
}

.auth-field label {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
}

.auth-field small {
  color: var(--faint);
  font-size: 0.7rem;
  line-height: 1.45;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap svg {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.signin-card .auth-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #36413b;
  border-radius: 12px;
  outline: 0;
  color: var(--text);
  background: var(--bg);
  caret-color: var(--accent);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.signin-card .auth-input-wrap input {
  padding-left: 46px;
}

.signin-card .auth-form input::placeholder {
  color: #68736d;
}

.signin-card .auth-form input:hover {
  border-color: #536159;
}

.signin-card .auth-form input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg) 86%, var(--accent));
  box-shadow: 0 0 0 3px rgba(141, 230, 91, 0.12);
}

.signin-card .auth-form input:focus-visible {
  outline: none;
}

.signin-card .auth-otp-input {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.62em;
  text-align: center;
  text-indent: 0.62em;
}

.signin-card .auth-submit {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(92, 178, 45, 0.12);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 100ms ease;
}

.signin-card .auth-submit:hover:not(:disabled) {
  box-shadow: 0 10px 30px rgba(92, 178, 45, 0.2);
  transform: translateY(-1px);
}

.signin-card .auth-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

.auth-submit .button-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-submit.is-busy .button-icon {
  display: none;
}

.auth-submit.is-busy::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: authSpin 650ms linear infinite;
}

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

.signin-card .auth-back {
  min-height: 44px;
  margin-top: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-back svg {
  width: 16px;
  height: 16px;
}

.signin-card-footer {
  margin-top: 42px;
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 0.68rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.signin-card-footer svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

@media (max-width: 820px) {
  .signin-shell {
    padding: 20px;
  }

  .signin-layout {
    width: min(480px, calc(100vw - 40px));
    min-height: auto;
    display: block;
    border-radius: 22px;
  }

  .signin-intro {
    display: none;
  }

  .auth-card.signin-card {
    min-height: min(610px, calc(100dvh - 40px));
    padding: clamp(32px, 8vw, 48px);
    border-left: 0;
  }

  .signin-mobile-brand {
    margin-bottom: 44px;
    display: flex;
  }

  .signin-mobile-brand .auth-brand {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 0.78rem;
  }

  .signin-mobile-brand strong {
    font-size: 0.9rem;
  }

  .signin-progress {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .signin-shell {
    place-items: start center;
    padding: 10px;
  }

  .signin-layout {
    width: calc(100vw - 20px);
    min-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .auth-card.signin-card {
    min-height: calc(100dvh - 20px);
    padding: 28px 24px 24px;
  }

  .signin-mobile-brand {
    margin-bottom: 34px;
  }

  .signin-progress {
    margin-bottom: 30px;
  }

  .signin-card-footer {
    margin-top: 32px;
  }
}

@media (max-height: 640px) and (max-width: 820px) {
  .signin-shell {
    place-items: start center;
  }

  .auth-card.signin-card {
    min-height: auto;
  }

  .signin-mobile-brand,
  .signin-progress {
    margin-bottom: 24px;
  }

  .auth-form {
    margin-top: 24px;
  }

  .signin-card-footer {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signin-progress i,
  .signin-card .auth-form input,
  .signin-card .auth-submit {
    transition: none;
  }

  .auth-submit.is-busy::after {
    animation-duration: 1.4s;
  }
}

body.auth-pending > .rail,
body.auth-pending > .shell {
  display: none;
}

body.bridge-gating > .rail,
body.bridge-gating > .shell {
  display: none;
}

.bridge-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(900px 420px at 50% -10%, #1a1a22 0%, transparent 55%),
    color-mix(in srgb, var(--bg) 92%, #000);
}
.bridge-gate[hidden] { display: none; }
.bridge-gate-card {
  width: min(440px, 100%);
  display: grid;
  gap: 0.85rem;
  padding: 1.6rem 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 96%, #101014);
  box-shadow: var(--shadow);
}
.bridge-gate-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bridge-gate-card h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.bridge-gate-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.9rem;
}
.bridge-gate-steps {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.bridge-gate-steps li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.86rem;
}
.bridge-gate-steps li .mark {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent);
  flex: 0 0 auto;
}
.bridge-gate-steps li.active { color: var(--text); }
.bridge-gate-steps li.active .mark {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bridge-gate-steps li.done { color: var(--up); }
.bridge-gate-steps li.done .mark {
  border-color: var(--up);
  background: var(--up);
}
.bridge-gate-steps li.fail { color: var(--down); }
.bridge-gate-steps li.fail .mark {
  border-color: var(--down);
  background: color-mix(in srgb, var(--down) 55%, transparent);
}
.bridge-gate-status {
  margin: 0.25rem 0 0;
  min-height: 1.2em;
  color: var(--text);
  font-size: 0.88rem;
}
.bridge-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}
body {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -14%, #17171c 0%, transparent 60%),
    radial-gradient(700px 320px at 100% 0%, #121218 0%, transparent 50%),
    var(--bg);
}
.skip-link {
  position: fixed; z-index: 100; top: 0.5rem; left: 0.5rem;
  padding: 0.55rem 0.75rem; color: var(--accent-ink); background: var(--accent);
  border-radius: var(--radius); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.rail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100vh;
  min-height: 100vh;
  padding: 0.65rem 0.4rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(10px);
}
.rail-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
  overflow-y: auto;
}
.rail-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line-soft);
}
.rail-brand {
  width: 2.4rem; height: 2.4rem; margin: 0.15rem auto 0.75rem;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-weight: 600; letter-spacing: 0.04em; font-size: 0.72rem;
  background: linear-gradient(145deg, #2b6cb0, #1a365d);
  box-shadow: 0 0 0 1px #3d5a80 inset;
}
.rail button {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  width: 100%; height: 2.55rem; border-radius: var(--radius);
  display: grid; place-items: center; cursor: pointer; position: relative;
  transition: background 160ms ease, color 160ms ease;
}
.rail button:hover { background: var(--panel-hover); color: var(--text); }
.rail button.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.rail button.active::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px;
  border-radius: 2px; background: var(--accent);
}
.rail button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rail button[title] { position: relative; }
.rail button.rail-signout {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
}
.rail button.rail-signout:hover {
  color: #fff;
  background: color-mix(in srgb, var(--down) 34%, var(--panel));
}

.shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-width: 0; min-height: 0;
}
.topbar {
  position: relative;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
}
.topbar h1 {
  margin: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
}
.topbar .sub { color: var(--muted); font-size: 0.75rem; margin-top: 0.1rem; }
.actions { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.status-pills { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* Always-visible, auto-updating health symbol (no button click needed). */
.status-dot {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.6rem 0.22rem 0.5rem; border-radius: var(--radius-pill, 999px);
  background: var(--panel); border: 1px solid var(--line-soft);
  color: var(--muted); font: 500 0.74rem var(--font);
  transition: border-color 140ms ease, background 140ms ease;
}
.status-dot:hover { background: var(--panel-hover); border-color: #334155; }
.status-dot .status-dot-mark { font-size: 0.7rem; line-height: 1; color: #6b6b6b; }
.status-dot .status-dot-text { letter-spacing: 0.01em; }
.status-dot.green .status-dot-mark { color: var(--up); }
.status-dot.amber .status-dot-mark { color: var(--warn); }
.status-dot.red   .status-dot-mark { color: var(--down); }
.status-dot.offline .status-dot-mark { color: #6b6b6b; }
.status-dot.green { border-color: #1f3a28; }
.status-dot.amber { border-color: #3d3420; }
.status-dot.red   { border-color: #4a2024; }
/* Gentle pulse while a subsystem needs attention so it draws the eye. */
.status-dot.red .status-dot-mark,
.status-dot.offline .status-dot-mark { animation: statusPulse 1.6s ease-in-out infinite; }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Per-subsystem checklist inside the Settings health block. */
.health-checks {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
  margin: 0.55rem 1.1rem 0; padding: 0 0.1rem;
}
.health-check {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem;
  color: var(--text);
}
.health-check .mark { font-size: 0.7rem; line-height: 1; }
.health-check.ok .mark { color: var(--up); }
.health-check.bad .mark { color: var(--down); }
.health-check .detail { color: var(--muted); font-size: 0.72rem; }
.pill {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 0.22rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line-soft);
}
.pill.live { color: #fca5a5; background: #2a1518; border-color: #4a2024; }
.pill.paper { color: #93c5fd; background: #152033; border-color: #243044; }
.pill.ok { color: #86efac; background: #14241a; border-color: #1f3a28; }
.pill.warn { color: #fbbf24; background: #2a2416; border-color: #3d3420; }
.pill.bad { color: #fca5a5; background: #2a1518; border-color: #4a2024; }
.pill.version {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  opacity: 0.85;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill.version.active { color: #fbbf24; opacity: 1; }
.pill.pulse { animation: pulseOnce 0.6s ease; }
@keyframes pulseOnce {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.stage {
  position: relative;
  min-height: 0;
  min-width: 0;
  /* clip + contain so inactive absolute views cannot expand scrollWidth */
  overflow-x: clip;
  overflow-y: hidden;
  contain: inline-size;
}
.view {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  /* Clip inactive wide children (e.g. goals calendar / option chains) so they
     cannot expand the stage scrollWidth on every view. */
  overflow: clip;
  contain: inline-size;
}
.view.active {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0);
  /* Page scroll lives on the active view so tall content (Goals & Ledger,
     Settings, Portfolio) is never clipped by absolute positioning. */
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--panel); color: var(--text);
  border-radius: var(--radius); padding: 0.4rem 0.75rem;
  font: 500 0.8rem var(--font); cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--panel-hover); border-color: #334155; }
.btn.primary { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: #3d5a80; }
.btn:disabled { opacity: 0.5; cursor: default; }

.mono { font-family: var(--mono); }
.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }

.ticker-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.ticker-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--panel-hover) 80%, var(--line));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.ticker-logo-sm { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; border-radius: 0.3rem; }
.ticker-logo-md { width: 2rem; height: 2rem; font-size: 0.7rem; }
.ticker-logo-lg { width: 2.5rem; height: 2.5rem; font-size: 0.8rem; }
.ticker-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ticker-logo.is-loaded .ticker-logo-fallback { visibility: hidden; }
.ticker-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pos-list-top .ticker-cell { gap: 0.4rem; }
.pos-list-top .ticker-logo-sm { width: 1.35rem; height: 1.35rem; }

.table-wrap { overflow: auto; flex: 1; min-height: 0; max-width: 100%; min-width: 0; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
table.data th, table.data td {
  padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.data th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; color: var(--muted); font-weight: 500;
  background: var(--bg-elevated); letter-spacing: 0.03em; font-size: 0.7rem;
  text-transform: uppercase;
}
table.data th.num, table.data td.num { text-align: right; }
table.data th.sortable {
  cursor: pointer; user-select: none;
  transition: color 120ms ease, background 120ms ease;
}
table.data th.sortable:hover,
table.data th.sortable:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  outline: none;
}
table.data th.sortable .sort-ind {
  display: inline-block; margin-left: 0.28rem;
  width: 0.55rem; color: var(--faint); font-size: 0.65rem;
  vertical-align: 0.05em;
}
table.data th.sortable .sort-ind::before { content: "↕"; }
table.data th.sortable.sorted { color: var(--text); }
table.data th.sortable.sorted.asc .sort-ind::before { content: "↑"; color: var(--accent); }
table.data th.sortable.sorted.desc .sort-ind::before { content: "↓"; color: var(--accent); }
table.data tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  font-weight: 650; color: var(--text);
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
table.data tfoot .tfoot-label { color: var(--muted); font-weight: 500; }
table.data tbody tr { cursor: pointer; transition: background 120ms ease; }
table.data tbody tr:hover { background: var(--panel-hover); }
table.data tbody tr.flash { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.opportunity-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1rem;
  padding: 0.65rem 0.75rem; color: var(--muted); font-size: 0.78rem;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-1);
}
.opportunity-status strong { color: var(--text); }
.opportunity-lane { margin-bottom: 1rem; }
.opportunity-lane .section-heading { padding: 0.75rem; }
.opportunity-lane .section-heading h3 { margin: 0; font-size: 0.95rem; }
.opportunity-evidence { cursor: default !important; background: var(--surface-1); }
.opportunity-evidence:hover { background: var(--surface-1) !important; }
.opportunity-evidence td { white-space: normal !important; }
.opportunity-evidence details { max-width: 72rem; }
.opportunity-evidence summary { color: var(--muted); cursor: pointer; }
.opportunity-evidence p { margin: 0.45rem 0 0; }
.opportunity-blurb {
  display: block; max-width: 28rem; margin-top: 0.2rem;
  white-space: normal; line-height: 1.35; color: var(--muted);
}
.opportunity-why summary {
  color: var(--text); font-weight: 600; cursor: pointer;
}
.opportunity-headline {
  margin: 0.55rem 0 0.35rem; color: var(--text); font-size: 0.95rem; line-height: 1.4;
}
.opportunity-what {
  margin: 0.25rem 0 0.55rem; color: var(--muted); line-height: 1.45; max-width: 46rem;
}
.opportunity-section { margin: 0.65rem 0 0; }
.opportunity-section h4 {
  margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.opportunity-section ul {
  margin: 0; padding-left: 1.15rem; color: var(--text); line-height: 1.45;
}
.opportunity-section li { margin: 0.2rem 0; }
.opportunity-watch ul { color: var(--warn); }
.opportunity-numbers .mono { margin: 0 0.25rem; color: var(--muted); }
.opportunity-technical {
  margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--line-soft);
}
.opportunity-technical summary { font-size: 0.8rem; font-weight: 500; }
.plan-status, .diagnostic-label {
  display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.35rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  color: var(--muted); font-size: 0.64rem; text-transform: uppercase;
}
.plan-status.ok, .evidence-pass { color: var(--up); }
.diagnostic-label.warn { color: var(--warn); }
.opportunity-diagnostics { margin: 0.75rem; color: var(--muted); font-size: 0.8rem; }
.opportunity-diagnostics summary { cursor: pointer; color: var(--text); }
.opportunity-diagnostics ul { max-height: 18rem; overflow: auto; }

.skeleton td {
  color: transparent !important;
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-hover) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
  border-radius: 2px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty {
  margin: 2.5rem auto; text-align: center; color: var(--muted); max-width: 28rem;
}
.empty p { margin: 0 0 0.85rem; }
.empty.warning-state, .empty.error-state {
  margin: 1.5rem auto; padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--line));
  border-radius: var(--radius-lg); background: var(--warn-soft);
}
.table-wrap > .empty {
  min-height: 12rem; margin: 0; padding: var(--space-3);
  display: grid; place-content: center;
}
.tv-embed-panel {
  min-height: 100%; padding: var(--space-4);
  display: grid; place-content: center; justify-items: center; gap: 0.7rem;
  text-align: center;
}
.tv-embed-panel h2, .tv-embed-panel p { margin: 0; }
.tv-embed-icon {
  width: 72px; height: 72px; display: grid; place-items: center;
  color: var(--muted); background: var(--surface-1);
  border: 1px solid var(--line-soft); border-radius: 50%;
}
.tv-embed-icon svg { stroke: currentColor; fill: none; stroke-width: 1.5; }
.panel-block {
  margin: 0.85rem 1.1rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.panel-block h3 {
  margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.form-grid {
  display: grid; grid-template-columns: minmax(10rem, 12rem) minmax(16rem, 1fr);
  gap: 0.65rem 1.1rem; align-items: center; max-width: 48rem;
}
.form-grid label { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.form-grid label .info-tip-wrap,
.info-tip-wrap {
  display: inline-flex; align-items: center;
  margin-left: 0.3rem; vertical-align: middle;
}
.form-grid label .info-tip,
.info-tip {
  appearance: none; border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); width: 1.25rem; height: 1.25rem; min-height: 0;
  display: inline-grid; place-items: center; flex: 0 0 1.25rem;
  border-radius: 50%; font: 650 0.67rem/1 var(--font);
  padding: 0; cursor: help;
}
.info-tip:hover,
.info-tip[aria-expanded="true"] {
  color: var(--accent-strong); border-color: var(--accent); background: var(--surface-2);
}
.info-tip-popover {
  position: fixed; z-index: 90;
  width: min(24rem, calc(100vw - 2.5rem));
  max-height: min(70vh, 28rem); overflow: auto;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
  color: var(--text); font: 0.8rem/1.45 var(--font);
  white-space: pre-wrap; text-align: left;
}
.readonly-setting {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.65rem;
  min-height: var(--control-h-sm); padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 70%, var(--bg));
  color: var(--text); font-size: 0.86rem;
}
.readonly-setting .sub { color: var(--muted); font-size: 0.78rem; }
.setup-coach {
  margin: 0.85rem 1.1rem 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.setup-coach.soft {
  border-color: var(--line);
  background: var(--panel);
}
.setup-coach strong { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; }
.setup-coach p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.advanced {
  margin-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.55rem;
}
.advanced summary {
  cursor: pointer; color: var(--muted); font-size: 0.78rem; user-select: none;
}
.advanced summary:hover { color: var(--text); }
.form-grid input:not([type="checkbox"]):not([type="radio"]), .form-grid select, .form-grid textarea {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem; font: 400 0.85rem var(--font);
}
.form-grid textarea { min-height: 3.2rem; resize: vertical; font-family: var(--mono); }
.form-grid .check {
  width: fit-content; min-height: var(--control-h-sm);
  display: inline-flex; gap: 0.55rem; align-items: center;
  color: var(--text); font-size: 0.82rem;
}
.form-actions { display: flex; gap: 0.55rem; margin-top: 1rem; flex-wrap: wrap; }
.health-block {
  margin: 0.85rem 1.1rem 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.health-block .dot { font-weight: 600; }
.health-block.green .dot { color: var(--up); }
.health-block.amber .dot { color: var(--warn); }
.health-block.red .dot { color: var(--down); }

/* Chart view */
#view-chart .chart-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
#view-chart .badges { display: flex; gap: 0.4rem; align-items: center; }
.badge {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 0.18rem 0.5rem; border-radius: var(--radius-pill);
  background: #1e293b; color: #93c5fd;
}
.badge-iv { color: #fbbf24; background: #2a2416; }
.badge-iv.hot { color: #fca5a5; background: #2a1518; }
.badge-iv.cold { color: #86efac; background: #14241a; }
.badge-soft { color: #c4b5fd; background: #1f1830; }
.conviction {
  margin: 0; padding: 0.35rem 1rem;
  background: linear-gradient(90deg, #132a1f, #1a2332);
  border-bottom: 1px solid var(--line);
  color: #b7f0d0; font-size: 0.8rem;
}
.tv-action { font-size: 0.7rem; padding: 0.15rem 0.5rem; }

.memory-tabs {
  display: flex; gap: 0.35rem; padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.memory-tabs .btn {
  min-height: var(--control-h-sm); padding: 0.35rem 0.7rem;
  color: var(--muted); background: transparent; border-color: transparent;
}
.memory-tabs button.active {
  color: var(--text); background: var(--surface-2); border-color: var(--line-soft);
}
.memory-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.memory-pane.active { display: flex; }
.pf-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
/* Book / risk are document-style; symbol split-pane keeps constrained height. */
#pf-book.pf-pane.active,
#pf-risk.pf-pane.active {
  flex: 1 1 auto;
  min-height: min-content;
  overflow: visible;
}
#pf-book .book-events-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
}
.pf-pane.active { display: flex; }

/* --- Portfolio: Book ---------------------------------------------------- */
.book-header {
  padding: 0.85rem 1.1rem 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}
.book-scorecards { margin-bottom: 0.35rem; }
.book-scorecards > div.warn strong { color: var(--warn); }
.book-scorecards > div.risk strong { color: var(--down); }
.book-hint { margin: 0.15rem 0 0.45rem; }
.book-workspace {
  flex: 1; min-height: 0; width: 100%; overflow: auto;
  background: color-mix(in srgb, var(--bg) 55%, var(--panel));
}
.book-empty {
  display: grid; place-content: center; gap: 0.25rem; text-align: center;
  min-height: 8rem; padding: 1.5rem; color: var(--muted);
}
.book-empty.compact { min-height: 6rem; padding: 1.25rem; }
.book-empty p { margin: 0; color: var(--text); font-weight: 600; }
.book-empty span { font-size: 0.78rem; color: var(--faint); max-width: 28rem; }
.book-empty-holdings {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; gap: 0.3rem; min-width: 17rem; text-align: left;
}
.book-empty-holdings button {
  appearance: none; width: 100%; cursor: pointer; font: inherit; text-align: left;
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.7rem; align-items: center;
  padding: 0.4rem 0.6rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text);
  transition: border-color 140ms ease, background 140ms ease;
}
.book-empty-holdings button:hover {
  border-color: var(--accent); background: var(--surface-2);
}
.book-empty-holdings button span:not(.mono) { font-size: 0.75rem; color: var(--muted); }
.book-risk-board { min-width: 48rem; }
.book-risk-overview {
  display: flex; gap: 0.55rem; align-items: stretch;
  padding: 0.8rem 1rem 0.65rem;
}
.book-risk-all, .book-risk-segment {
  appearance: none; border: 1px solid var(--line); color: var(--text);
  cursor: pointer; font: inherit; border-radius: var(--radius-sm);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.book-risk-all {
  flex: 0 0 7.5rem; display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.65rem; background: var(--surface-1);
  color: var(--muted); font-size: 0.72rem;
}
.book-risk-all strong { color: var(--text); font: 700 0.9rem var(--mono); }
.book-risk-all:hover, .book-risk-segment:hover { transform: translateY(-1px); }
.book-risk-all.active {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}
.book-risk-distribution {
  flex: 1; min-width: 0; display: flex; gap: 0.35rem;
  padding: 0.25rem; border-radius: var(--radius); background: var(--surface-1);
  border: 1px solid var(--line-soft);
}
.book-risk-segment {
  flex: 1 1 0; min-width: 5.25rem; display: flex;
  justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.55rem; background: transparent;
  color: var(--muted); font-size: 0.7rem;
}
.book-risk-segment strong { color: currentColor; font: 700 0.85rem var(--mono); }
.book-risk-segment.state-at_risk {
  color: var(--down); background: color-mix(in srgb, var(--down-soft) 78%, transparent);
}
.book-risk-segment.state-watch {
  color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 78%, transparent);
}
.book-risk-segment.state-safe {
  color: var(--up); background: color-mix(in srgb, var(--up-soft) 78%, transparent);
}
.book-risk-segment.state-unknown { color: var(--muted); background: var(--surface-2); }
.book-risk-segment.active { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.book-risk-toolbar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  backdrop-filter: blur(12px);
}
.book-risk-search { flex: 1 1 12rem; max-width: 20rem; }
.book-risk-search input, .book-risk-sort select {
  width: 100%; min-height: var(--control-h-sm); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font: 0.75rem var(--font);
}
.book-risk-search input { padding: 0.35rem 0.6rem; }
.book-risk-search input::placeholder { color: var(--faint); }
.book-risk-kind.segmented { min-height: var(--control-h-sm); }
.book-risk-kind.segmented button { min-height: calc(var(--control-h-sm) - 4px); padding: 0.25rem 0.65rem; }
.book-risk-sort {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.68rem;
}
.book-risk-sort select { min-width: 9.5rem; padding: 0.25rem 1.7rem 0.25rem 0.5rem; }
.book-risk-count {
  margin-left: auto; color: var(--faint); font: 0.68rem var(--mono);
  white-space: nowrap;
}
.book-risk-scale {
  position: relative; height: 1.6rem; margin: 0 1rem;
  color: var(--faint); font: 0.62rem var(--mono);
}
.book-risk-scale span { position: absolute; bottom: 0.2rem; white-space: nowrap; }
.book-risk-scale span:nth-child(1) { left: 0; }
.book-risk-scale span:nth-child(2) { left: 25%; transform: translateX(-50%); }
.book-risk-scale span:nth-child(3) { left: 40%; transform: translateX(-50%); }
.book-risk-scale span:nth-child(4) { right: 0; }
.book-risk-list { display: grid; gap: 0.35rem; padding: 0 1rem 1rem; }
.book-risk-row {
  --state-color: var(--faint);
  overflow: clip; border: 1px solid var(--line-soft); border-left: 3px solid var(--state-color);
  border-radius: var(--radius); background: color-mix(in srgb, var(--surface-1) 92%, var(--bg));
}
.book-risk-row.state-at_risk { --state-color: var(--down); }
.book-risk-row.state-watch { --state-color: var(--warn); }
.book-risk-row.state-safe { --state-color: var(--up); }
.book-risk-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.book-risk-primary {
  appearance: none; min-width: 0; display: grid; align-items: center;
  grid-template-columns: minmax(9.5rem, 1.2fr) minmax(6.5rem, 0.7fr) minmax(8.5rem, 0.9fr) minmax(11rem, 1.25fr) 4rem minmax(6rem, 0.7fr) minmax(5rem, 0.6fr);
  gap: 0.8rem; padding: 0.65rem 0.75rem; border: 0;
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
.book-risk-primary:hover { background: var(--panel-hover); }
.book-risk-primary:focus-visible, .book-risk-expand:focus-visible,
.book-risk-all:focus-visible, .book-risk-segment:focus-visible {
  outline: 2px solid var(--focus); outline-offset: -2px;
}
.book-risk-primary > span { min-width: 0; }
.book-risk-primary small, .book-risk-detail > span {
  color: var(--muted); font-size: 0.64rem; line-height: 1.25;
}
.book-risk-primary strong { display: block; font-size: 0.76rem; line-height: 1.25; }
.book-risk-state { display: flex; align-items: center; gap: 0.55rem; }
.book-risk-state > i {
  flex: 0 0 0.65rem; width: 0.65rem; height: 0.65rem;
  border-radius: 50%; background: var(--state-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-color) 14%, transparent);
}
.book-risk-state strong { color: var(--state-color); }
.book-risk-state small, .book-risk-contract small {
  display: block; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-risk-contract > strong { font-size: 0.88rem; }
.book-risk-prices small, .book-risk-dte small, .book-risk-capital small, .book-risk-premium small {
  display: block; margin-bottom: 0.15rem;
}
.book-risk-cushion { display: grid; grid-template-columns: minmax(6.5rem, 1fr) auto; align-items: center; gap: 0.5rem; }
.book-risk-cushion > strong { font: 650 0.68rem var(--mono); white-space: nowrap; }
.assignment-meter {
  position: relative; display: block; height: 0.55rem; min-width: 6.5rem;
  overflow: visible; border-radius: var(--radius-pill); background: var(--line);
}
.assignment-meter-zone { position: absolute; top: 0; bottom: 0; opacity: 0.58; }
.assignment-meter-zone.at-risk { left: 0; width: 25%; background: var(--down); border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.assignment-meter-zone.watch { left: 25%; width: 15%; background: var(--warn); }
.assignment-meter-zone.safe { left: 40%; right: 0; background: var(--up); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.assignment-meter-strike {
  position: absolute; left: 25%; top: -0.2rem; bottom: -0.2rem;
  width: 1px; background: var(--text); opacity: 0.85;
}
.assignment-meter-marker {
  position: absolute; top: 50%; width: 0.75rem; height: 0.75rem;
  border: 2px solid var(--bg); border-radius: 50%; background: var(--faint);
  box-shadow: 0 0 0 1px var(--text); transform: translate(-50%, -50%);
}
.assignment-meter-marker.state-at_risk { background: var(--down); }
.assignment-meter-marker.state-watch { background: var(--warn); }
.assignment-meter-marker.state-safe { background: var(--up); }
.assignment-meter.is-empty { opacity: 0.35; }
.book-risk-premium {
  display: grid; gap: 0.28rem; align-content: start;
}
.book-risk-premium .profit-gauge { margin-top: 0.1rem; }
.profit-gauge {
  display: grid; grid-template-columns: minmax(4.5rem, 1fr) auto;
  align-items: center; gap: 0.4rem; min-width: 0;
}
.profit-gauge-track {
  position: relative; display: block; height: 0.45rem;
  overflow: hidden; border-radius: var(--radius-pill); background: var(--line);
}
.profit-gauge-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent, #5b8def);
  transition: width 400ms ease;
}
.profit-gauge.state-hit .profit-gauge-fill { background: var(--up); }
.profit-gauge.state-under .profit-gauge-fill { background: var(--down); width: 0 !important; }
.profit-gauge.state-empty .profit-gauge-fill { width: 0 !important; opacity: 0; }
.profit-gauge-target {
  position: absolute; top: -0.15rem; bottom: -0.15rem; width: 2px;
  background: var(--text); opacity: 0.72; transform: translateX(-50%);
  border-radius: 1px;
}
.profit-gauge-label {
  font: 650 0.62rem/1.1 var(--mono); color: var(--muted); white-space: nowrap;
}
.profit-gauge.state-hit .profit-gauge-label { color: var(--up); }
.profit-gauge.state-under .profit-gauge-label { color: var(--down); }
.profit-gauge-label span { color: var(--faint); font-weight: 500; }
.profit-progress-text {
  font: 650 0.68rem/1.2 var(--mono); color: var(--muted); white-space: nowrap;
}
.position-strategies .profit-gauge { margin-top: 0.35rem; max-width: 14rem; }
.otm-ok { color: var(--up); }
.otm-near { color: var(--warn); }
.otm-itm { color: var(--down); }
.otm-na { color: var(--faint); }
.book-risk-expand {
  appearance: none; width: 3.2rem; display: grid; place-content: center; gap: 0.25rem;
  border: 0; border-left: 1px solid var(--line-soft);
  background: transparent; color: var(--muted); cursor: pointer;
}
.book-risk-expand:hover { color: var(--text); background: var(--panel-hover); }
.book-risk-expand span { font-size: 0.58rem; }
.book-risk-expand i {
  width: 0.45rem; height: 0.45rem; margin: auto;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform 140ms ease;
}
.book-risk-expand[aria-expanded="true"] i { transform: rotate(225deg); }
.book-risk-detail {
  display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr)); gap: 0.75rem;
  padding: 0.55rem 0.75rem 0.65rem;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 68%, var(--surface-1));
}
.book-risk-detail[hidden] { display: none; }
.book-risk-detail strong { display: block; margin-top: 0.15rem; color: var(--text); font-size: 0.7rem; font-weight: 550; }

/* --- Portfolio: By symbol ----------------------------------------------- */
.pos-layout {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(11.5rem, 14rem) 1fr;
}
.pos-list {
  overflow: auto; border-right: 1px solid var(--line);
  padding: 0.55rem; display: grid; gap: 0.3rem; align-content: start;
}
.pos-list-empty { margin: 0.75rem; }
.pos-list button {
  display: grid; gap: 0.12rem; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent;
  color: var(--text); font: inherit; font-size: 0.8rem;
  padding: 0.55rem 0.6rem; border-radius: var(--radius); cursor: pointer;
}
.pos-list button:hover { background: var(--panel-hover); }
.pos-list button.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.pos-list-top, .pos-list-bot {
  display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline;
}
.pos-list-top .ticker-cell .mono,
.pos-list-top .mono:first-child { font-weight: 700; font-size: 0.86rem; }
.pos-list-mid { color: var(--muted); font-size: 0.72rem; }
.pos-list-bot { color: var(--faint); font: 0.68rem var(--mono); }
.pos-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pos-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.85rem; padding: 0.85rem 1rem 0.35rem; flex-wrap: wrap;
}
.pos-facts {
  flex: 1; min-width: 0; margin: 0;
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
}
.pos-hint { margin: 0; padding: 0 1rem 0.55rem; }
.pos-legs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.pos-legs-table { flex: 1; min-height: 0; }
.dte-hot { color: #fca5a5; }
.dte-warm { color: #fbbf24; }
.dte-cool { color: var(--muted); }

#toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; flex-direction: column; gap: 0.4rem; max-width: 22rem;
}
.toast {
  padding: 0.65rem 0.85rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--text); font-size: 0.8rem;
  animation: toastIn 180ms ease;
}
.toast.error { border-color: #4a2024; color: #fca5a5; }
.toast.warn { border-color: #3f3518; color: #fbbf24; }
.toast.ok { border-color: #1f3a28; color: #86efac; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bridge-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  width: min(640px, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, #3d3420);
  box-shadow: var(--shadow);
}
.bridge-banner[hidden] { display: none; }
.bridge-banner-copy {
  display: grid;
  gap: 0.2rem;
  flex: 1 1 220px;
  min-width: 0;
}
.bridge-banner-copy strong { font-size: 0.92rem; }
.bridge-banner-copy span { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.bridge-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ib-guide-banner {
  bottom: 1.25rem;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}
#bridgeBanner:not([hidden]) ~ #ibGuideBanner:not([hidden]) {
  bottom: 5.5rem;
}
.bridge-help-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: calc(100vw - 2rem);
}
.bridge-help-dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}
.bridge-help-card {
  width: min(420px, 100%);
  margin: 0;
  padding: 1.35rem 1.4rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.bridge-help-card h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.bridge-help-card ol {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.bridge-help-card ol strong { color: var(--text); }
.bridge-help-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.bridge-help-actions a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pill.bind-bridge {
  cursor: pointer;
}

.settings-scroll {
  /* Prefer the active view as the page scroller; keep this as a flex filler
     that grows with content so nested pages do not trap overflow. */
  flex: 1 1 auto;
  min-height: min-content;
  min-width: 0;
  padding-bottom: 1.5rem;
}
.settings-scroll .panel-block { margin: 0.75rem 1.2rem; }
.settings-scroll .panel-block h3 { margin-bottom: 0.8rem; }
.settings-scroll .sub { line-height: 1.5; }
.settings-scroll .form-grid > div .check { margin-bottom: 0.35rem; }
.log-box {
  margin: 0.85rem 1.1rem;
  padding: 0.65rem 0.75rem;
  min-height: 6rem; max-height: 10rem; overflow: auto;
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: var(--radius); font-family: var(--mono); font-size: 0.72rem;
  color: var(--muted); white-space: pre-wrap;
}

/* --- Goals & Ledger view ------------------------------------------------- */
.goal-panel .goal-layout {
  display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap;
}
.goal-ring { width: 128px; height: 128px; flex: 0 0 auto; }
.goal-ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.goal-ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dasharray 400ms ease;
}
.goal-ring-fill.over { stroke: #86efac; }
.goal-ring-num { fill: var(--text); font-size: 1.35rem; font-weight: 600; font-family: var(--mono); }
.goal-ring-sub { fill: var(--muted); font-size: 0.6rem; letter-spacing: 0.06em; }
.goal-stats { flex: 1; min-width: 16rem; }
.goal-chips { display: flex; gap: 0.35rem; margin: 0.55rem 0 0.2rem; }
.goal-chip {
  padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.68rem;
  font-family: var(--mono); color: var(--muted);
  border: 1px solid var(--line-soft); background: var(--bg);
}
.goal-chip.hit {
  color: #86efac; border-color: #1f3a28;
  background: color-mix(in srgb, #14532d 30%, var(--bg));
}
.ledger-summary { padding: 0.5rem 1.1rem 0.2rem; }
.period-panel {
  margin-top: 1rem; padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.period-panel h4 {
  margin: 0.6rem 0 0.35rem; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.period-panel h4:first-child { margin-top: 0; }
.needed-today {
  font-size: 1.05rem; margin: 0.25rem 0 0.65rem;
  font-family: var(--mono);
}
.needed-today strong { font-size: 1.2rem; }
.period-weeks { margin-top: 0.25rem; }
.period-weeks tr.week-current td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- Progress & Forecast charts ------------------------------------------ */
.progress-forecast {
  margin-top: 1rem; padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}
.progress-forecast h4 {
  margin: 0.75rem 0 0.4rem; font-size: 0.85rem; font-weight: 600;
}
.progress-forecast h4:first-child { margin-top: 0; }
.pf-section-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.8rem;
}
.pf-section-heading h4 { margin-bottom: 0.2rem; font-size: 0.95rem; }
.pf-section-heading p { margin: 0; }
.pf-forecast-heading {
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.pf-status {
  flex: 0 0 auto; padding: 0.3rem 0.65rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font: 600 0.72rem var(--mono);
}
.pf-status.ahead {
  color: var(--up); border-color: #1f3a28;
  background: color-mix(in srgb, var(--up) 10%, var(--bg));
}
.pf-status.on-par {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.pf-status.behind {
  color: var(--down); border-color: #4a2024;
  background: color-mix(in srgb, var(--down) 10%, var(--bg));
}
.pf-scorecards {
  display: grid; grid-template-columns: repeat(4, minmax(9rem, 1fr));
  gap: 0.55rem; margin-bottom: 0.9rem;
}
.pf-scorecards > div {
  min-width: 0; padding: 0.65rem 0.75rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 68%, var(--panel));
}
.pf-scorecards span {
  display: block; margin-bottom: 0.25rem;
  color: var(--muted); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-scorecards strong {
  display: block; font: 600 0.9rem var(--mono);
  overflow: hidden; text-overflow: ellipsis;
}
.pf-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1rem;
  align-items: center; margin: 0.35rem 0 0.5rem;
}
.pf-group { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.pf-checks label {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; color: var(--muted); margin-right: 0.45rem;
}
.pf-chip {
  border: 1px solid var(--line-soft); background: var(--bg);
  color: var(--muted); font-size: 0.72rem; font-family: var(--mono);
  padding: 0.18rem 0.55rem; border-radius: 999px; cursor: pointer;
}
.pf-chip.on {
  color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
}
.pf-sliders {
  display: grid; gap: 0.45rem; margin: 0.4rem 0 0.55rem;
  grid-template-columns: 1fr;
}
.pf-sliders label {
  display: grid; gap: 0.2rem; font-size: 0.75rem; color: var(--muted);
}
.pf-sliders input[type="range"] { width: 100%; accent-color: var(--accent); }
.pf-chart-host {
  position: relative; width: 100%; min-width: 0;
  margin-top: 0.35rem; padding: 0.55rem 0.45rem 0.1rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 58%, var(--panel));
}
.pf-chart {
  width: 100%; height: auto; min-height: 260px;
  display: block; margin: 0;
  overflow: visible;
}
.pf-zero { stroke: var(--line-soft); stroke-width: 1; }
.pf-grid { stroke: var(--line-soft); stroke-width: 1; opacity: 0.65; }
.pf-bar { fill: #86efac; opacity: 0.85; cursor: pointer; }
.pf-bar.down { fill: #f87171; }
.pf-bar.selected { opacity: 1; stroke: var(--text); stroke-width: 1; }
.pf-pace { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pf-line {
  fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.pf-line.actual { stroke: #86efac; }
.pf-line.target { stroke: var(--accent); }
.pf-line.pace { stroke: #fbbf24; stroke-dasharray: 5 3; }
.pf-line.custom { stroke: #38bdf8; }
.pf-line.nlv { stroke: #a78bfa; }
.pf-line.expiration-pnl { stroke: var(--accent); stroke-dasharray: 6 3; }
.pf-line.marked-pnl { stroke: var(--buy); }
.pf-line.benchmark { stroke: #c084fc; stroke-dasharray: 7 4; }
.pf-line.drawdown { stroke: var(--down); }
.pf-line.p50 { stroke: #38bdf8; }
.pf-line.total-risk { stroke: var(--accent); }
.pf-line.delta { stroke: #38bdf8; }
.pf-line.gamma { stroke: #c084fc; }
.pf-line.theta { stroke: #f59e0b; }
.pf-line.vega { stroke: #fb7185; }
.pf-area { opacity: 0.09; pointer-events: none; }
.pf-area.actual { fill: #86efac; }
.pf-area.target { fill: var(--accent); }
.pf-area.pace { fill: #fbbf24; }
.pf-area.custom { fill: #38bdf8; }
.pf-area.nlv { fill: #a78bfa; }
.pf-area.drawdown { fill: var(--down); opacity: 0.15; }
.pf-band { pointer-events: none; opacity: 0.14; }
.pf-band.corridor { fill: var(--accent); }
.pf-band.forecast { fill: #38bdf8; opacity: 0.16; }
.pf-axis { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.pf-y-axis { font-size: 10px; }
.pf-empty { fill: var(--muted); font-size: 11px; }
.pf-tip { fill: var(--text); font-size: 10px; font-family: var(--mono); }
.pf-summary { margin-top: 0.55rem; }
.pf-point {
  fill: var(--panel); stroke: var(--text); stroke-width: 2;
  opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke;
}
.pf-point.visible { opacity: 1; }
.pf-crosshair {
  stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke;
}
.pf-crosshair.visible { opacity: 0.8; }
.pf-legend {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem;
  min-height: 1.2rem; padding: 0.2rem 0.55rem 0;
  color: var(--muted); font-size: 0.72rem;
}
.pf-legend span, .pf-tooltip span {
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.pf-legend-line {
  display: inline-block; width: 1.15rem; height: 3px; border-radius: 2px;
  background: var(--muted);
}
.pf-legend-line.actual { background: #86efac; }
.pf-legend-line.target { background: var(--accent); }
.pf-legend-line.pace { background: #fbbf24; }
.pf-legend-line.custom { background: #38bdf8; }
.pf-legend-line.nlv { background: #a78bfa; }
.pf-legend-line.expiration-pnl { background: var(--accent); }
.pf-legend-line.marked-pnl { background: var(--buy); }
.pf-legend-line.benchmark { background: #c084fc; }
.pf-legend-line.drawdown { background: var(--down); }
.pf-legend-line.p50 { background: #38bdf8; }
.pf-legend-line.total-risk { background: var(--accent); }
.pf-legend-line.delta { background: #38bdf8; }
.pf-legend-line.gamma { background: #c084fc; }
.pf-legend-line.theta { background: #f59e0b; }
.pf-legend-line.vega { background: #fb7185; }
.pf-tooltip {
  position: absolute; z-index: 3; display: none; min-width: 14rem;
  padding: 0.55rem 0.65rem; pointer-events: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
  color: var(--text); font: 0.72rem var(--mono);
}
.pf-tooltip.visible { display: block; }
.pf-tooltip header {
  margin-bottom: 0.4rem; color: var(--text); font-weight: 600;
}
.pf-tooltip div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-top: 0.25rem; color: var(--muted);
}
.pf-tooltip strong { color: var(--text); font-weight: 500; }
.pf-tooltip small {
  display: block; max-width: 28rem; margin: 0.18rem 0 0.35rem;
  color: var(--muted); white-space: normal; line-height: 1.35;
}
.pf-chart-host:focus-visible { border-color: var(--focus); }
.pf-chart-host.compact .pf-chart { min-height: 160px; }
.rolling-cards { grid-template-columns: repeat(3, minmax(10rem, 1fr)); }
.rolling-cards small, .forecast-facts small, .risk-facts small {
  display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.68rem; line-height: 1.3;
}
.drawdown-stats, .risk-facts, .analytics-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem; margin: 0.75rem 0 0.45rem;
}
.drawdown-stats > span, .risk-facts > span {
  padding: 0.55rem 0.65rem; color: var(--muted); font-size: 0.68rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg);
}
.drawdown-stats strong, .risk-facts strong {
  display: block; margin-top: 0.2rem; color: var(--text); font: 600 0.82rem var(--mono);
}
.analytics-subsection {
  margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
}
.analytics-warning, .analytics-ok {
  margin: 0.55rem 0; padding: 0.65rem 0.75rem; border-radius: var(--radius);
  font-size: 0.75rem; line-height: 1.45;
}
.analytics-warning { color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.analytics-ok { color: var(--up); background: var(--up-soft); }
.quality-badge {
  padding: 0.24rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--muted); background: var(--bg); font: 600 0.7rem var(--mono); white-space: nowrap;
}
.quality-badge.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.quality-badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.attribution-chart { display: grid; gap: 0.55rem; margin: 0.8rem 0; }
.attr-month { display: grid; grid-template-columns: 6rem 1fr; gap: 0.65rem; align-items: start; }
.attr-month > strong { padding-top: 0.25rem; color: var(--muted); font: 600 0.72rem var(--mono); }
.attr-month > div { display: grid; gap: 0.2rem; min-width: 0; }
.attr-bar {
  display: block; width: var(--size); max-width: 100%; min-width: 0; padding: 0.18rem 0.35rem;
  color: #bff3a3; background: color-mix(in srgb, var(--up) 32%, var(--surface-1));
  border-left: 3px solid var(--up); border-radius: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attr-bar.negative { color: #fecaca; background: var(--down-soft); border-color: var(--down); }
.attr-bar em { font-style: normal; font: 0.65rem var(--mono); white-space: nowrap; }
.analytics-totals { display: flex; flex-wrap: wrap; color: var(--muted); font-size: 0.74rem; }
.analytics-totals span { padding: 0.4rem 0.6rem; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.analytics-totals strong { margin-left: 0.3rem; color: var(--text); font-family: var(--mono); }
.analytics-details { margin-top: 0.7rem; }
.analytics-details > summary { cursor: pointer; color: var(--muted); font-size: 0.75rem; }
.calendar-years { display: flex; gap: 0.25rem; margin-left: auto; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0.5rem 0; color: var(--muted); font-size: 0.68rem; }
.calendar-legend span { display: inline-flex; gap: 0.35rem; align-items: center; }
.cal-key { width: 0.75rem; height: 0.75rem; border-radius: 2px; border: 1px solid var(--line); }
.cal-key.verified { background: var(--up); }
.cal-key.zero { background: var(--surface-2); }
.cal-key.provisional { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 4px); }
.cal-key.missing { background: transparent; border-style: dashed; }
.calendar-heatmap {
  display: grid; grid-template-rows: repeat(7, 18px); grid-auto-columns: 18px;
  grid-auto-flow: column; gap: 3px; max-width: 100%; overflow-x: auto; padding: 0.35rem 0 0.7rem;
}
.calendar-cell {
  min-width: 18px; min-height: 18px; width: 18px; height: 18px; padding: 0;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.calendar-cell:first-child { grid-row-start: calc(var(--offset) + 1); }
.calendar-cell span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.calendar-cell.verified { opacity: max(0.28, var(--intensity)); }
.calendar-cell.verified.gain { background: color-mix(in srgb, var(--up) 78%, var(--surface-1)); }
.calendar-cell.verified.loss { background: color-mix(in srgb, var(--down) 78%, var(--surface-1)); }
.calendar-cell.verified_zero { background: var(--surface-2); border-color: var(--faint); }
.calendar-cell.provisional {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 50%, transparent) 0 3px, transparent 3px 6px);
  border-color: var(--warn);
}
.calendar-cell.missing { background: transparent; border-color: var(--line-soft); border-style: dashed; opacity: 0.55; }
.quality-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem;
}
.quality-grid > span {
  padding: 0.55rem 0.65rem; color: var(--muted); font-size: 0.68rem;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.quality-grid strong { display: block; margin-top: 0.2rem; color: var(--text); font: 0.72rem var(--mono); overflow-wrap: anywhere; }
.quality-warnings { margin: 0.65rem 0 0; padding-left: 1.3rem; color: var(--warn); font-size: 0.75rem; line-height: 1.5; }
.risk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.risk-split h3, .concentration-list + h3 { margin-top: 0; }
.risk-undefined td { color: var(--warn); }
.risk-capital-cards { margin: 0.15rem 0 0.55rem; }
.risk-capital-cards > div.warn strong { color: var(--warn); }
.concentration-list { display: grid; gap: 0.3rem; }
.concentration-list button {
  display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: 0.65rem;
  width: 100%; padding: 0.35rem 0.5rem; color: var(--text); background: transparent;
  border: 0; border-radius: var(--radius); cursor: pointer; text-align: left;
}
.concentration-list button:hover { background: var(--panel-hover); }
.concentration-list i { height: 6px; width: var(--share); min-width: 2px; border-radius: 4px; background: var(--accent); }
.concentration-list strong { font: 0.7rem var(--mono); }
.cash-flow-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.7fr) 6rem minmax(14rem, 1fr);
  gap: 0.65rem;
  margin-top: 0.8rem;
}
.cash-flow-form label {
  display: grid; gap: 0.25rem;
  color: var(--muted); font-size: 0.72rem;
}
.cash-flow-form input, .cash-flow-form select {
  width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  padding: 0.45rem 0.55rem; font: 0.78rem var(--mono);
}
.cash-flow-form .cash-flow-reason { grid-column: 1 / -1; }
.risk-profile-list { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.risk-profile-list details {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg); overflow: clip;
}
.risk-profile-list summary {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 0.75rem; color: var(--text); cursor: pointer;
}
.risk-profile-list summary span:last-child { color: var(--muted); font-size: 0.72rem; }
.risk-profile-list details > :not(summary) { margin-left: 0.75rem; margin-right: 0.75rem; }
.risk-profile-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.45rem; margin-top: 0.65rem;
}
.risk-profile-facts span {
  color: var(--muted); font-size: 0.68rem;
}
.risk-profile-facts strong { display: block; margin-top: 0.15rem; color: var(--text); font: 0.75rem var(--mono); }
.risk-assumptions { margin-top: 0.55rem; padding: 0 0 0.7rem 1rem; color: var(--muted); font-size: 0.7rem; }
.calendar-cell.selected { outline: 2px solid var(--focus); outline-offset: 1px; }
.calendar-detail {
  min-height: 2.2rem; margin-top: 0.55rem; padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg);
}

@media (max-width: 1199px) {
  .book-risk-primary {
    grid-template-columns: minmax(9rem, 1.2fr) minmax(6rem, 0.7fr) minmax(8rem, 0.85fr) minmax(10rem, 1.2fr) 3.5rem minmax(5.5rem, 0.65fr);
  }
  .book-risk-premium { display: none; }
}

@media (max-width: 900px) {
  .pf-scorecards { grid-template-columns: repeat(2, minmax(9rem, 1fr)); }
  .pf-chart { min-height: 220px; }
  .risk-split { grid-template-columns: 1fr; }
  .rolling-cards { grid-template-columns: 1fr; }
  .cash-flow-form { grid-template-columns: 1fr 1fr; }
  .cash-flow-form .cash-flow-reason { grid-column: 1 / -1; }
  .pos-layout { grid-template-columns: 1fr; }
  .pos-list {
    max-height: 11rem; border-right: 0; border-bottom: 1px solid var(--line);
    grid-auto-flow: column; grid-auto-columns: minmax(9rem, 11rem);
    grid-template-columns: none; overflow-x: auto;
  }
  .pos-facts { grid-template-columns: repeat(2, minmax(7rem, 1fr)); }
  .book-risk-board { min-width: 0; }
  .book-risk-overview { align-items: stretch; flex-direction: column; }
  .book-risk-all { flex-basis: auto; }
  .book-risk-distribution { overflow-x: auto; }
  .book-risk-toolbar { align-items: stretch; }
  .book-risk-search { max-width: none; }
  .book-risk-primary {
    grid-template-columns: minmax(8rem, 1fr) minmax(6rem, 0.75fr) minmax(10rem, 1.2fr) 3.5rem;
    grid-template-areas:
      "state contract cushion dte"
      "prices capital premium dte";
    gap: 0.55rem 0.75rem;
  }
  .book-risk-state { grid-area: state; }
  .book-risk-contract { grid-area: contract; }
  .book-risk-prices { grid-area: prices; }
  .book-risk-cushion { grid-area: cushion; }
  .book-risk-dte { grid-area: dte; }
  .book-risk-capital { grid-area: capital; }
  .book-risk-premium { display: block; grid-area: premium; }
  .book-risk-detail { grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
}

/* --- Dashboard -------------------------------------------------------------- */
.dash-summary { padding: 0.85rem 1.1rem 0; }
.dash-cards {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.dash-card {
  display: grid; gap: 0.3rem;
  padding: 0.8rem 0.95rem;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.dash-card-label {
  color: var(--muted); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dash-card-value { font-size: 1.15rem; font-weight: 600; text-align: left; }
.btn-cancel { font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); }

/* --- Options-first application shell -------------------------------------- */
html, body { font-size: 15px; }
body {
  grid-template-columns: var(--rail) minmax(0, 1fr);
  background:
    radial-gradient(900px 460px at 55% -18%, rgba(141, 230, 91, 0.08), transparent 62%),
    var(--bg);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #354039 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #354039; background-clip: padding-box;
  border: 2px solid transparent; border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background-color: #46534c; }
button, input, select, summary { font: inherit; }
button, [role="button"], select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
  min-height: var(--control-h);
}
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0;
  display: inline-grid; place-content: center; flex: 0 0 18px;
  color: var(--accent-ink); background: var(--bg);
  border: 1px solid #46504b; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: "✓"; font: 800 13px/1 var(--font);
  transform: scale(0); transition: transform 100ms ease;
}
input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; transform: scale(0); transition: transform 100ms ease;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }
input[type="range"] { min-height: 0; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rail {
  gap: 0.35rem; padding: 0.8rem;
  background: rgba(14, 17, 16, 0.96);
}
.rail-brand {
  width: auto; height: 44px; margin: 0 0 1rem; padding: 0 0.55rem;
  display: flex; justify-content: flex-start; gap: 0.75rem;
  background: transparent; box-shadow: none; font-size: 0.9rem;
}
.rail-brand > span {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
}
.rail-brand strong { font-size: 1rem; letter-spacing: 0; }
.rail button {
  min-height: 44px; height: auto; padding: 0 0.7rem;
  display: flex; justify-content: flex-start; gap: 0.8rem;
  border-radius: var(--radius); font-weight: 600;
}
.rail button svg { flex: 0 0 auto; width: 20px; height: 20px; }
.rail button.active { color: var(--accent-strong); background: rgba(141, 230, 91, 0.1); }
.rail button.active::before { left: -0.8rem; width: 3px; }
.rail-nav { gap: 0.35rem; }
.rail-footer { padding-top: 0.55rem; }
.topbar {
  min-height: 68px; padding: 0.75rem 1.5rem;
  background: rgba(8, 10, 9, 0.84);
}
.topbar h1 { font-size: 1.15rem; }
.topbar .sub { font-size: 0.82rem; }
.status-dot:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}

/* Compact icon actions in the topbar (refresh, etc.). */
.icon-btn {
  appearance: none;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.icon-btn:hover {
  background: var(--panel-hover);
  border-color: #334155;
  color: var(--text);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}
.icon-btn:active { transform: scale(0.96); }
.icon-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.icon-btn svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn.is-busy svg { animation: iconSpin 0.7s linear infinite; }
@keyframes iconSpin { to { transform: rotate(360deg); } }

.btn {
  min-height: var(--control-h); padding: 0.5rem 0.85rem;
  border-color: var(--line); font-size: 0.86rem;
}
.btn.primary {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  font-weight: 700;
}
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost, .btn.secondary { background: transparent; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { border-color: var(--line); color: var(--text); }
.section-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.section-heading h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.section-heading p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.8rem; }
.eyebrow {
  margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.empty span { display: block; color: var(--faint); font-size: 0.84rem; line-height: 1.5; }
.panel-block { border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.panel-block h3 {
  text-transform: none; font-size: 0.9rem; font-weight: 650;
  letter-spacing: 0; color: var(--text);
}
table.data { font-size: 0.86rem; }
table.data th, table.data td { padding: 0.75rem 0.8rem; }
table.data th { text-transform: none; font-size: 0.76rem; letter-spacing: 0; }
.table-sub { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.72rem; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; white-space: nowrap; }
.row-actions .btn {
  min-height: var(--control-h-sm); padding: 0.35rem 0.6rem; font-size: 0.78rem;
}
.row-actions .btn + .btn { margin-left: 0; }
.status-badge {
  display: inline-flex; padding: 0.2rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted); font-size: 0.74rem;
}
.position-strategies { display: grid; gap: 0.55rem; padding: 0.75rem; }
.position-strategies article {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.75rem; background: var(--surface-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.position-strategies article > div:first-child { display: grid; gap: 0.15rem; }
.position-strategies article > div:first-child > span:last-child { color: var(--muted); font-size: 0.74rem; }
.position-strategies article > div:last-child { display: flex; gap: 0.35rem; }

/* Trade workspace */
.trade-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 360px);
  width: 100%; max-width: 100%; height: 100%; min-height: 0;
  overflow: hidden; background: var(--bg);
}
/* Empty ticket: give the chain the full width until legs exist. */
.trade-workspace.draft-idle {
  grid-template-columns: minmax(0, 1fr);
}
.trade-workspace.draft-idle .draft-panel {
  display: none;
}
.trade-main {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.trade-context {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-1);
  min-height: 64px; padding: 0.7rem var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}
.symbol-search { display: flex; gap: var(--space-1); align-items: center; }
.symbol-suggest { position: relative; flex: 0 0 auto; }
.symbol-search input, .draft-fields input, .advanced-order select, .expiry-more select,
.filter-input {
  color: var(--text); background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.55rem 0.7rem;
}
.symbol-search input {
  width: 170px; text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.025em;
}
.symbol-suggest-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  min-width: 100%; max-height: 240px; overflow: auto; margin: 0; padding: 0.25rem 0;
  list-style: none; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elevated); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.symbol-suggest-list[hidden] { display: none; }
.symbol-suggest-option {
  display: block; width: 100%; margin: 0; padding: 0.45rem 0.7rem;
  border: 0; background: transparent; color: var(--text); text-align: left;
  font: 700 0.9rem var(--mono); letter-spacing: 0.025em; cursor: pointer;
}
.symbol-suggest-option:hover,
.symbol-suggest-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
  color: var(--accent-strong);
}
.symbol-suggest-empty {
  padding: 0.45rem 0.7rem; color: var(--muted); font-size: 0.78rem;
}
.trade-spot { min-width: 0; display: grid; grid-template-columns: auto auto; gap: 0.05rem 0.65rem; align-items: baseline; }
.trade-spot strong { font-size: 1.15rem; }
.trade-spot > span { font: 600 1.05rem var(--mono); }
.trade-spot small { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; }
#tradeChart { margin-left: auto; }
.strategy-picker {
  flex: 0 0 auto; min-width: 0;
  padding: 0.65rem var(--space-2) 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-1) 58%, var(--bg));
}
.strategy-picker .section-heading { min-height: 38px; }
.strategy-heading-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1);
}
.strategy-summary {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent-strong); font-size: 0.78rem; font-weight: 650;
}
.strategy-picker.collapsed .strategy-cards { display: none; }
.strategy-picker.collapsed { padding-block: 0.55rem; }
.strategy-picker.collapsed .section-heading p { display: none; }
.strategy-cards {
  display: flex; gap: var(--space-1); min-width: 0;
  margin-top: 0.55rem; padding: 1px 0 0.3rem;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity;
}
.strategy-card {
  position: relative; flex: 0 0 184px; min-height: 92px; padding: 0.65rem 0.75rem;
  display: flex; scroll-snap-align: start;
  flex-direction: column; align-items: flex-start; gap: 0.22rem; text-align: left;
  color: var(--text); background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.strategy-card:hover:not(:disabled) {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  transform: translateY(-1px);
}
.strategy-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent) inset;
}
.strategy-card:disabled { opacity: 0.48; cursor: not-allowed; }
.strategy-card > span:last-child { color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
.strategy-shape {
  position: absolute; top: 0.45rem; right: 0.65rem;
  color: var(--accent); font: 600 1.2rem var(--mono);
}
.strategy-group { color: var(--faint); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; }
.chain-controls {
  flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: end; gap: 0.7rem var(--space-2);
  padding: 0.65rem var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elevated);
}
.chain-control-group {
  min-width: 0; display: grid; gap: 0.3rem;
}
.chain-control-label {
  color: var(--faint); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.chain-expiry-group {
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
}
.chain-expiry-group > .chain-control-label { grid-column: 1 / -1; }
.chain-action-groups { display: flex; align-items: end; gap: var(--space-1); }
.chip-row {
  display: flex; gap: 0.35rem; min-width: 0; padding-bottom: 1px;
  overflow-x: auto; overscroll-behavior-inline: contain;
}
.chip {
  min-height: var(--control-h-sm); white-space: nowrap; padding: 0.3rem 0.65rem;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.chip span { color: var(--faint); font-size: 0.72rem; }
.chip.active {
  color: var(--accent-strong); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.expiry-more {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.74rem; white-space: nowrap;
}
.expiry-more select {
  min-height: var(--control-h-sm); max-width: 132px; padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm);
}
.segmented {
  display: inline-flex; padding: 3px; background: var(--surface-1);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.segmented button {
  min-height: var(--control-h-sm); padding: 0.25rem 0.6rem; color: var(--muted);
  background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.segmented button:hover { color: var(--text); }
.segmented button.active { color: var(--text); background: var(--surface-2); box-shadow: 0 1px 2px rgb(0 0 0 / 24%); }
.trade-side-control [data-side="BUY"].active {
  color: var(--buy); background: color-mix(in srgb, var(--buy) 12%, var(--surface-1));
}
.trade-side-control [data-side="SELL"].active {
  color: var(--sell); background: color-mix(in srgb, var(--sell) 12%, var(--surface-1));
}
.chain-caption {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem var(--space-2); color: var(--muted); font-size: 0.72rem;
  background: var(--bg);
}
.option-chain {
  flex: 1 1 280px; min-height: 220px;
  overflow: auto; border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 88%, var(--bg-elevated));
  scrollbar-gutter: stable;
}
.dual-chain { min-width: 780px; table-layout: fixed; }
.dual-chain.calls, .dual-chain.puts { min-width: 100%; }
.dual-chain th, .dual-chain td { padding: 0.48rem 0.55rem; text-align: center; }
.dual-chain thead th {
  position: sticky; top: 0; z-index: 4; height: 36px;
  background: var(--bg-elevated); border-bottom-color: var(--line);
}
.dual-chain .chain-group-row th {
  color: var(--faint); font-size: 0.68rem; font-weight: 750;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dual-chain .chain-group-row + tr th { top: 36px; }
.dual-chain .chain-metrics { width: 24%; text-align: left; }
.dual-chain .strike-head, .dual-chain .strike-cell {
  position: sticky; left: calc(50% - 41px); z-index: 5; width: 82px;
  color: var(--text); background: var(--bg-elevated); text-align: center;
  box-shadow: -1px 0 var(--line-soft), 1px 0 var(--line-soft);
}
.dual-chain.calls .strike-head, .dual-chain.calls .strike-cell,
.dual-chain.puts .strike-head, .dual-chain.puts .strike-cell {
  position: static;
}
.dual-chain .strike-cell span {
  display: block; margin-top: 0.15rem; color: var(--accent); font: 600 0.62rem var(--font);
}
.dual-chain tbody tr { transition: background 120ms ease; }
.dual-chain tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
.dual-chain tr.atm { box-shadow: 0 1px 0 var(--accent) inset, 0 -1px 0 var(--accent) inset; }
.dual-chain tr.selected > * { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.dual-chain td.itm { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dual-chain tr.selected td.itm { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); }
.dual-chain .strike-cell .sigma-label {
  display: block; margin-top: 0.12rem;
  color: var(--faint); font: 500 0.58rem var(--font); letter-spacing: 0.02em;
}
.dual-chain tr.chain-row.sigma-below.sigma-bucket-1 > * {
  background: color-mix(in srgb, var(--accent) 2.5%, transparent);
}
.dual-chain tr.chain-row.sigma-below.sigma-bucket-2 > * {
  background: color-mix(in srgb, var(--accent) 4.5%, transparent);
}
.dual-chain tr.chain-row.sigma-below.sigma-bucket-3 > * {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.dual-chain tr.chain-row.sigma-above.sigma-bucket-1 > * {
  background: color-mix(in srgb, var(--warn) 2.5%, transparent);
}
.dual-chain tr.chain-row.sigma-above.sigma-bucket-2 > * {
  background: color-mix(in srgb, var(--warn) 4.5%, transparent);
}
.dual-chain tr.chain-row.sigma-above.sigma-bucket-3 > * {
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.dual-chain tr.chain-row.sigma-atm.sigma-bucket-0 > * {
  background: color-mix(in srgb, var(--accent) 1.5%, transparent);
}
.dual-chain tr.selected.sigma-below > *,
.dual-chain tr.selected.sigma-above > *,
.dual-chain tr.selected.sigma-atm > * {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.dual-chain .chain-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.spot-row td {
  position: relative; padding: 0; border-bottom: 0; text-align: center;
}
.spot-row td::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px dashed var(--line);
}
.spot-row span {
  display: inline-block; position: relative; z-index: 1;
  margin: 0.18rem 0; padding: 0.12rem 0.65rem;
  color: var(--accent-strong); background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-pill); font: 600 0.68rem var(--mono);
}
.chain-edge-row td {
  padding: 0.35rem 0.55rem; text-align: center; border-bottom: 0;
  color: var(--faint); font-size: 0.68rem; letter-spacing: 0.04em;
}
.chain-metrics { position: relative; overflow: visible; }
.chain-metrics span { display: inline-block; margin-right: 0.55rem; color: var(--muted); font: 0.68rem var(--mono); }
.chain-price {
  width: 100%; min-width: 76px; min-height: 42px; padding: 0.3rem 0.45rem;
  display: grid; gap: 0.08rem; color: var(--text); background: var(--surface-1);
  border: 1px solid transparent; border-radius: 9px; cursor: pointer;
}
.chain-price.unavailable { place-content: center; color: var(--faint); cursor: default; }
.chain-price span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; }
.chain-price strong { font: 600 0.82rem var(--mono); }
.chain-price small { color: var(--muted); font: 0.58rem var(--mono); white-space: nowrap; }
.chain-price.buy span { color: var(--buy); }
.chain-price.sell span { color: var(--sell); }
.chain-price.buy:hover { border-color: var(--buy); background: color-mix(in srgb, var(--buy) 9%, var(--surface-1)); }
.chain-price.sell:hover { border-color: var(--sell); background: color-mix(in srgb, var(--sell) 9%, var(--surface-1)); }
.chain-quote-details > summary {
  min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.35rem;
  color: var(--muted); cursor: pointer; list-style: none;
}
.chain-quote-details > summary::-webkit-details-marker { display: none; }
.chain-quote-details > summary::after { content: "···"; margin-left: auto; color: var(--faint); letter-spacing: 0.08em; }
.chain-detail-grid {
  position: absolute; z-index: 15; min-width: 300px; padding: 0.65rem;
  display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 0.35rem 0.75rem;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); text-align: left;
}
.chain-detail-grid span { display: flex; justify-content: space-between; gap: 0.5rem; }
.chain-detail-grid strong { color: var(--text); font-family: var(--mono); }
.dual-chain td:last-child .chain-detail-grid { right: 0.5rem; }
.chain-skeleton { display: grid; gap: 1px; }
.chain-skeleton span {
  display: block; height: 58px;
  background: linear-gradient(90deg, var(--surface-1), var(--surface-2), var(--surface-1));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}

/* Draft and review panel */
.draft-panel {
  min-width: 0; min-height: 0; overflow: auto; padding: var(--space-2);
  background: var(--bg-elevated); border-left: 1px solid var(--line);
  scrollbar-gutter: stable;
}
.draft-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-1);
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-soft);
}
.draft-panel-head h2 { margin: 0.2rem 0 0; font-size: 1.05rem; }
.draft-panel-head > span {
  padding: 0.22rem 0.5rem; color: var(--faint); background: var(--surface-1);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill); font-size: 0.7rem;
}
.draft-empty { margin: clamp(3rem, 18vh, 10rem) auto 0; max-width: 250px; color: var(--muted); text-align: center; }
.draft-empty h2 { margin: 0.5rem 0; color: var(--text); font-size: 1.15rem; }
.draft-empty p:last-child { line-height: 1.5; }
.draft-head, .review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; }
.draft-head h2, .review-head h2 { margin: 0.25rem 0 0; font-size: 1.15rem; }
.icon-button {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  display: inline-grid; place-items: center; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.icon-button:hover { color: var(--text); background: var(--surface-2); }
.leg-list { display: grid; gap: 0.45rem; margin: 1rem 0; }
.leg-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.55rem;
  padding: 0.65rem; background: var(--surface-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.leg-row > div { display: grid; gap: 0.1rem; }
.leg-row > div span { color: var(--muted); font-size: 0.72rem; }
.action-tag {
  padding: 0.18rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.64rem; font-weight: 800;
}
.action-tag.buy { color: var(--buy); background: color-mix(in srgb, var(--buy) 12%, transparent); }
.action-tag.sell { color: var(--sell); background: color-mix(in srgb, var(--sell) 12%, transparent); }
.draft-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.draft-fields label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.74rem; }
.draft-fields input { width: 100%; font-family: var(--mono); }
.qty-stepper {
  position: relative; display: block;
}
.qty-stepper input {
  width: 100%; padding-right: 2rem;
  /* Custom up/down controls replace native spinners for consistent styling. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qty-stepper-controls {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  display: grid; grid-template-rows: 1fr 1fr; width: 1.55rem;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
}
.qty-stepper-controls button {
  /* Override global button min-height so up/down share the input height. */
  display: grid; place-items: center; margin: 0; padding: 0;
  min-height: 0; height: auto; min-width: 0;
  color: var(--muted); background: var(--surface-2);
  border: 0; border-radius: 0; font-size: 0.62rem; line-height: 1; cursor: pointer;
}
.qty-stepper-controls button + button { border-top: 1px solid var(--line); }
.qty-stepper-controls button:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.advanced-order { margin: 0.8rem 0; color: var(--muted); font-size: 0.76rem; }
.advanced-order summary { cursor: pointer; }
.advanced-order label { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
.draft-total {
  display: flex; justify-content: space-between; margin-top: 1rem; padding: 0.85rem 0;
  border-top: 1px solid var(--line); font-size: 0.88rem;
}
.draft-total strong { font: 600 1rem var(--mono); }
.draft-assignment {
  display: grid; gap: 0.3rem; margin: -0.3rem 0 0.85rem; padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.draft-assignment > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.draft-assignment strong { font: 600 0.86rem var(--mono); }
.draft-assignment small { color: var(--muted); line-height: 1.4; }
.draft-actions {
  position: sticky; bottom: -1rem; z-index: 3;
  width: calc(100% + 2rem); margin: 0 -1rem -1rem; padding: 0.8rem 1rem 1rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  background: linear-gradient(180deg, transparent, var(--bg-elevated) 22%);
}
.submit-order { width: 100%; }
.submit-order {
  position: sticky; bottom: -1rem; z-index: 3;
  box-shadow: 0 -12px 24px var(--bg-elevated);
}
.review-verdict {
  display: grid; gap: 0.25rem; margin: 1rem 0; padding: 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.review-verdict span { color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.review-verdict.approved { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); background: var(--up-soft); }
.review-verdict.reduce { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); }
.review-verdict.reject { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); background: var(--down-soft); }
.review-legs { display: grid; gap: 0.35rem; margin: 0.8rem 0; }
.review-legs > div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; }
.review-legs span { color: var(--muted); }
.payoff-chart-host { position: relative; margin: 0.9rem 0; min-width: 0; }
.payoff-chart-host.updating .payoff-chart-card { opacity: 0.68; }
.payoff-chart-host.updating::after {
  content: "Updating…"; position: absolute; top: 0.65rem; right: 0.75rem; z-index: 5;
  padding: 0.2rem 0.45rem; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 0.6rem;
}
.payoff-chart-loading {
  min-height: 156px; padding: 1rem; display: grid; place-content: center; justify-items: center;
  gap: 0.65rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-1); font-size: 0.72rem;
}
.payoff-chart-loading span {
  width: 28px; height: 28px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: iconSpin 700ms linear infinite;
}
.payoff-chart-loading.error { min-height: 90px; color: var(--warn); }
.payoff-chart-loading.error span { display: none; }
.payoff-chart-card {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-1) 90%, var(--bg));
}
.payoff-chart-head {
  min-height: 52px; padding: 0.65rem 0.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}
.payoff-chart-head > div:first-child { min-width: 0; display: grid; gap: 0.08rem; }
.payoff-chart-head span {
  color: var(--faint); font-size: 0.62rem; font-weight: 750;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.payoff-chart-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.payoff-chart-head small { color: var(--muted); font: 0.64rem var(--mono); }
.payoff-chart-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; }
.payoff-range {
  flex: 0 0 auto; display: inline-flex; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
}
.payoff-range button {
  min-height: 26px; padding: 0.2rem 0.55rem; color: var(--muted); background: transparent;
  border: 0; border-radius: var(--radius-pill); font-size: 0.66rem; cursor: pointer;
}
.payoff-range button.active {
  color: var(--accent-ink); background: var(--accent); font-weight: 700;
}
.payoff-range button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.payoff-expand {
  appearance: none; width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.payoff-expand:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.payoff-expand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.payoff-expand svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.payoff-collapse-icon { display: none; }
.payoff-chart-backdrop {
  position: fixed; z-index: 999; inset: 0;
  background: rgb(0 0 0 / 72%); backdrop-filter: blur(3px);
}
.payoff-chart-host.payoff-chart-expanded .payoff-chart-card {
  position: fixed; z-index: 1000; top: 50%; left: 50%;
  width: min(1120px, calc(100vw - 3rem)); max-height: calc(100vh - 3rem);
  overflow: auto; transform: translate(-50%, -50%);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 24px 80px rgb(0 0 0 / 62%);
}
.payoff-chart-host.payoff-chart-expanded .payoff-expand-icon { display: none; }
.payoff-chart-host.payoff-chart-expanded .payoff-collapse-icon { display: block; }
.payoff-chart-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-soft);
}
.payoff-chart-stats > div {
  min-width: 0; padding: 0.55rem 0.6rem; display: grid; gap: 0.18rem;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.payoff-chart-stats > div:nth-child(5n) { border-right: 0; }
.payoff-chart-stats > div:nth-last-child(-n + 5) { border-bottom: 0; }
.payoff-chart-stats span { color: var(--muted); font-size: 0.58rem; }
.payoff-chart-stats strong {
  overflow: hidden; color: var(--text); font: 650 0.68rem var(--mono);
  text-overflow: ellipsis; white-space: nowrap;
}
.payoff-chart-stats .premium.credit strong { color: var(--up); }
.payoff-chart-stats .premium.debit strong { color: var(--buy); }
.payoff-chart-stage { position: relative; min-height: 224px; padding: 0.25rem; touch-action: none; }
.payoff-chart-svg { display: block; width: 100%; height: auto; min-height: 224px; overflow: visible; }
.payoff-chart-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
.payoff-grid line { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.payoff-grid text { fill: var(--faint); font: 10px var(--mono); }
.payoff-profit-area { fill: color-mix(in srgb, var(--up) 14%, transparent); }
.payoff-loss-area { fill: color-mix(in srgb, var(--down) 14%, transparent); }
.payoff-zero-line {
  stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.payoff-pnl-line {
  fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.payoff-strike-line {
  stroke: color-mix(in srgb, var(--iv) 52%, transparent); stroke-width: 1;
  stroke-dasharray: 2 5; vector-effect: non-scaling-stroke;
}
.payoff-strike-label {
  fill: var(--iv); paint-order: stroke; stroke: var(--bg-elevated); stroke-width: 3px;
  stroke-linejoin: round; font: 600 9px var(--mono);
}
.payoff-breakeven-line {
  stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.payoff-breakeven-label {
  fill: var(--accent-strong); paint-order: stroke; stroke: var(--bg-elevated);
  stroke-width: 3px; font: 600 9px var(--mono);
}
.payoff-spot-line {
  stroke: var(--buy); stroke-width: 1.2; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.payoff-spot-dot { fill: var(--buy); stroke: var(--bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.payoff-tail-arrow { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.payoff-tail-arrow.profit { stroke: var(--up); }
.payoff-tail-arrow.loss { stroke: var(--down); }
.payoff-arrow-profit { fill: var(--up); }
.payoff-arrow-loss { fill: var(--down); }
.payoff-crosshair {
  stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.payoff-crosshair-dot {
  fill: var(--text); stroke: var(--bg); stroke-width: 2;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.payoff-chart-tooltip {
  position: absolute; z-index: 4; min-width: 138px; padding: 0.45rem 0.55rem;
  display: grid; gap: 0.12rem; pointer-events: none;
  color: var(--text); background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.payoff-chart-tooltip span { color: var(--muted); font: 0.62rem var(--mono); }
.payoff-chart-tooltip strong { font: 650 0.72rem var(--mono); }
.payoff-chart-tooltip strong.profit { color: var(--up); }
.payoff-chart-tooltip strong.loss { color: var(--down); }
.payoff-chart-note {
  margin: 0; padding: 0.5rem 0.7rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); font-size: 0.66rem; line-height: 1.4;
}
.payoff-chart-unavailable {
  min-height: 126px; padding: 1.2rem; display: grid; place-content: center; gap: 0.35rem;
  color: var(--muted); text-align: center;
}
.payoff-chart-unavailable strong { color: var(--text); font-size: 0.82rem; }
.payoff-chart-unavailable span { max-width: 320px; font-size: 0.72rem; line-height: 1.45; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.review-grid > div { display: grid; gap: 0.18rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.review-grid > div:nth-child(even) { text-align: right; }
.review-grid span { color: var(--muted); font-size: 0.7rem; }
.review-grid strong { font: 600 0.78rem var(--mono); }
.inline-warning { margin: 0.7rem 0; padding: 0.65rem; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius); font-size: 0.75rem; }
.inline-note {
  margin: 0.7rem 0; padding: 0.65rem; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
  border: 1px solid var(--line-soft); border-radius: var(--radius); font-size: 0.75rem;
}
.chain-session-note, .chain-data-warning { margin: 0.55rem 0.65rem; }
.chain-data-warning { margin: 0.75rem; line-height: 1.45; }
.review-confirm {
  display: flex; gap: 0.6rem; align-items: center; margin: 0.9rem 0;
  color: var(--muted); font-size: 0.76rem; line-height: 1.45;
}
.review-confirm input { accent-color: var(--accent); }
.review-expiry { color: var(--faint); font-size: 0.68rem; text-align: center; }
.submission-state { margin: 18vh auto 0; max-width: 280px; display: grid; gap: 0.6rem; text-align: center; }
.submission-state h2, .submission-state p { margin: 0; }
.state-icon {
  width: 54px; height: 54px; margin: 0 auto 0.5rem; display: grid; place-items: center;
  color: var(--accent-ink); background: var(--accent); border-radius: 50%; font-size: 1.5rem;
}
.mobile-draft-bar { display: none; }

/* Discover panes are switched from the rail (Watchlist / Opportunities). */
.discover-pane, .activity-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.discover-pane.active, .activity-pane.active { display: flex; }
#discover-ideas > #btnTvConfluence:not([hidden]) {
  align-self: flex-start; margin: 0.6rem 1.2rem 0;
}
/* Goals & Ledger / journal: stack content and let the active view scroll. */
#activity-orders.activity-pane.active,
#activity-journal.activity-pane.active,
#activity-system.activity-pane.active {
  flex: 1 1 auto;
  min-height: min-content;
  overflow: visible;
}
#activity-orders .table-wrap,
#activity-journal .table-wrap,
#activity-system .table-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
}
.watch-toolbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.55rem;
  padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-1);
}
.watch-add-form { display: flex; align-items: end; gap: 0.45rem; }
.watch-add-form label {
  align-self: center; color: var(--muted); font-size: 0.75rem; font-weight: 650;
}
.watch-add-form input { width: 7.5rem; text-transform: uppercase; }
.watch-freshness { margin-left: auto; align-self: center; color: var(--muted); font-size: 0.74rem; }
.watch-scanner-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem;
  margin: 0.75rem 1.2rem 0; padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-1);
}
.watch-scanner-panel[hidden] { display: none; }
.watch-scanner-panel fieldset {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: 0; padding: 0;
  border: 0;
}
.watch-scanner-panel legend {
  float: left; margin-right: 0.7rem; color: var(--muted); font-size: 0.75rem;
}
.watch-scanner-panel .check { display: inline-flex; align-items: center; gap: 0.4rem; }
.watch-scanner-panel input[type="number"] { width: 4.5rem; }
.source-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.source-badge {
  display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0.12rem 0.42rem;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill); font-size: 0.68rem; white-space: nowrap;
}
.btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, var(--line-soft)); }
.filter-input { margin: 0.7rem 1.2rem; max-width: 240px; }
.dash-card { border-radius: var(--radius-lg); padding: 1rem; }
.dash-card > span { color: var(--muted); font-size: 0.76rem; }
.dash-card > strong { font: 650 1.2rem var(--mono); }

.strategy-editor {
  margin: 1.1rem 0 1.35rem;
}
.strategy-editor .pf-section-heading { align-items: flex-start; margin-bottom: 0.85rem; }
.strategy-editor .pf-section-heading h4 { margin: 0 0 0.2rem; }
.strategy-editor .pf-section-heading .sub { max-width: 680px; margin: 0; line-height: 1.5; }
.strategy-editor-row {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.15rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 78%, transparent), transparent 58%),
    var(--panel);
  box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
  overflow: hidden;
}
.strategy-editor-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--faint);
}
.strategy-editor-row.active::before { background: var(--accent); }
.strategy-editor-row.attention::before { background: var(--warn); }
.strategy-editor-row.paused { opacity: 0.82; }
.strategy-editor-row + .strategy-editor-row { margin-top: 0.85rem; }
.strategy-editor-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.strategy-title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.strategy-mark {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 0.75rem;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  font: 700 0.72rem var(--mono);
  letter-spacing: 0.02em;
}
.strategy-editor-heading h5 {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  line-height: 1.25;
}
.strategy-purpose {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.strategy-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.strategy-status {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}
.strategy-status i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--faint);
}
.strategy-status.active { color: var(--up); }
.strategy-status.active i { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.strategy-status.attention { color: var(--warn); }
.strategy-status.attention i { background: var(--warn); }
.strategy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.58rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.strategy-toggle:has(input:checked) {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
}
.strategy-toggle input { margin: 0; accent-color: var(--accent); }
.strategy-toggle:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.strategy-rule {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line-soft));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-1));
}
.strategy-section-label {
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.strategy-rule p {
  margin: 0.4rem 0 0;
  max-width: 84ch;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.58;
  white-space: pre-wrap;
}
.strategy-checks {
  display: grid;
  grid-template-columns: minmax(170px, 0.38fr) minmax(260px, 1fr);
  gap: 1rem;
  align-items: start;
}
.strategy-checks h6,
.strategy-guidance h6,
.strategy-warning h6 {
  margin: 0;
  font-size: 0.79rem;
}
.strategy-checks > div > p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.45;
}
.strategy-checks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strategy-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--surface-1);
  font-size: 0.72rem;
  line-height: 1.2;
}
.strategy-checks li span {
  color: var(--up);
  font-size: 0.7rem;
  font-weight: 800;
}
.strategy-guidance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
}
.strategy-guidance {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.strategy-guidance p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.strategy-profit-take-field {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem;
}
.strategy-profit-take-field input {
  width: 5.5rem; font-family: var(--mono);
}
.strategy-profit-take-field span { color: var(--muted); font-size: 0.78rem; }
.strategy-warning {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 7%, var(--surface-1));
}
.strategy-warning-mark {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--bg);
  background: var(--warn);
  font-weight: 800;
}
.strategy-warning p { margin: 0.3rem 0; color: var(--muted); font-size: 0.75rem; }
.strategy-warning ul { margin: 0.35rem 0 0; padding-left: 1.15rem; line-height: 1.45; }
.strategy-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  min-height: 2rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--line-soft);
}
.strategy-card-footer > span { color: var(--faint); font-size: 0.7rem; }
.strategy-archive-action {
  padding-inline: 0.4rem;
  border-color: transparent !important;
  font-size: 0.7rem;
}
.strategy-empty { margin: 0.4rem 0; }

@media (max-width: 1199px) {
  :root { --rail: 64px; }
  .rail { padding: 0.7rem 0.45rem; height: 100vh; min-height: 100vh; }
  .rail-brand { width: 44px; margin: 0 auto 1rem; padding: 0; justify-content: center; }
  .rail-brand strong, .rail button > span { display: none; }
  .rail button { justify-content: center; padding: 0; }
  .rail button.active::before { left: -0.45rem; }
  .rail-nav { gap: 0.35rem; }
  .trade-workspace { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
}

@media (min-width: 900px) and (max-width: 1020px) {
  .trade-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .trade-context, .strategy-picker, .chain-controls { padding-inline: 0.8rem; }
  .strategy-card { flex-basis: 170px; }
  .chain-expiry-group { grid-template-columns: minmax(0, 1fr) auto; }
  .chain-expiry-group > .chain-control-label { grid-column: 1 / -1; }
  .chain-action-groups { flex-wrap: wrap; }
  .status-pills { gap: 0.25rem; }
  .status-pills .pill { padding-inline: 0.4rem; font-size: 0.68rem; }
}

@media (max-width: 899px) {
  :root { --rail: 0px; }
  body { display: block; padding-bottom: 66px; overflow: hidden; }
  .rail {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 66px;
    min-height: 0;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    overflow-x: auto; overscroll-behavior-x: contain; padding: 0.35rem;
    border: 1px solid var(--line); border-width: 1px 0 0;
  }
  .rail-brand { display: none; }
  .rail-nav, .rail-footer { display: contents; margin-top: 0; padding-top: 0; border-top: 0; }
  .rail button { margin: 0 !important; min-height: 54px; gap: 0.15rem; flex-direction: column; font-size: 0.62rem; }
  .rail button > span { display: block; }
  .rail button.active::before { left: 24%; right: 24%; top: -0.35rem; bottom: auto; width: auto; height: 2px; }
  .shell { height: calc(100vh - 66px); }
  .topbar { min-height: 58px; padding: 0.55rem 0.8rem; }
  .topbar .sub { display: none; }
  .status-dot-text { display: none; }
  #pillVersion { display: none; }
  .icon-btn { width: 34px; height: 34px; min-height: 34px; }
  #toasts { bottom: calc(66px + 1rem); }
  .settings-scroll .panel-block { margin: 0.65rem 0.75rem; }
  .trade-workspace { display: block; height: 100%; overflow: hidden; }
  .trade-main { height: 100%; min-height: 0; overflow: hidden; padding-bottom: 70px; }
  .trade-context { min-height: 60px; padding: 0.65rem 0.75rem; flex-wrap: wrap; }
  .symbol-search { flex: 1 1 270px; }
  .symbol-suggest { flex: 1 1 auto; min-width: 0; }
  .symbol-search input { min-width: 0; width: 100%; }
  .strategy-picker { padding-inline: 0.75rem; }
  .strategy-card { flex-basis: 168px; }
  .chain-controls { padding: 0.6rem 0.75rem; }
  .chain-expiry-group { grid-template-columns: minmax(0, 1fr) auto; }
  .chain-expiry-group > .chain-control-label { grid-column: 1 / -1; }
  .chain-action-groups { flex-wrap: wrap; }
  .chain-action-groups .chain-control-group { flex: 1 1 120px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .chain-caption { padding-inline: 0.75rem; }
  .option-chain {
    flex: 1 1 240px; min-height: 180px;
    overflow: auto; padding-bottom: 70px;
  }
  .dual-chain { min-width: 720px; }
  .dual-chain.calls, .dual-chain.puts { min-width: 100%; }
  .draft-panel {
    display: none;
    padding: 1rem; border: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .draft-panel.mobile-expanded {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 130px;
    display: block; max-height: min(68vh, calc(100vh - 188px));
    box-shadow: var(--shadow);
  }
  .draft-panel.mobile-expanded::before {
    content: ""; display: block; width: 42px; height: 4px; margin: -0.35rem auto 0.7rem;
    border-radius: 4px; background: var(--faint);
  }
  .mobile-draft-bar:not([hidden]) {
    position: fixed; z-index: 71; left: 0; right: 0; bottom: 66px;
    height: 64px; padding: 0.65rem 0.9rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    color: var(--text); background: color-mix(in srgb, var(--surface-1) 96%, transparent);
    border: 1px solid var(--line); border-width: 1px 0 0;
    box-shadow: 0 -12px 32px rgb(0 0 0 / 34%); cursor: pointer; text-align: left;
  }
  .mobile-draft-bar > span:first-child { min-width: 0; display: grid; gap: 0.12rem; }
  .mobile-draft-bar strong, .mobile-draft-bar small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-draft-bar small { color: var(--muted); font-size: 0.72rem; font-weight: 500; }
  .mobile-draft-action {
    flex: 0 0 auto; padding: 0.35rem 0.65rem;
    color: var(--accent-ink); background: var(--accent);
    border-radius: var(--radius); font-size: 0.78rem; font-weight: 750;
  }
  .draft-empty { margin: 1.5rem auto; }
  .submission-state { margin: 1.5rem auto; }
}

@media (max-width: 640px) {
  body { padding-bottom: 58px; }
  .rail { height: 58px; padding: 0.3rem; }
  .rail button { min-height: 48px; }
  .rail button > span { display: none; }
  .shell { height: calc(100vh - 58px); }
  #toasts { bottom: calc(58px + 1rem); }
  .form-grid { grid-template-columns: 1fr; gap: 0.35rem; }
  .form-grid > label { margin-top: 0.5rem; }
  .form-grid > label:first-child { margin-top: 0; }
  .form-grid .check { min-height: 28px; }
  .cash-flow-form { grid-template-columns: 1fr; }
  .cash-flow-form .cash-flow-reason { grid-column: auto; }
  .strategy-editor-row { padding: 0.9rem 0.9rem 0.75rem; }
  .strategy-editor-heading { align-items: flex-start; flex-direction: column; }
  .strategy-actions { width: 100%; justify-content: space-between; }
  .strategy-checks { grid-template-columns: 1fr; gap: 0.65rem; }
  .strategy-card-footer { align-items: flex-start; flex-direction: column; }
  .trade-spot { order: 3; flex: 1 1 auto; }
  #tradeChart { order: 4; }
  .strategy-picker .section-heading { align-items: flex-start; }
  .strategy-picker .section-heading p { max-width: 215px; }
  .strategy-summary { max-width: 145px; }
  .chain-expiry-group { grid-template-columns: minmax(0, 1fr); }
  .chain-expiry-group > .chain-control-label { grid-column: auto; }
  .expiry-more { width: 100%; }
  .expiry-more select { flex: 1; max-width: none; }
  .chain-action-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #chainFreshness { display: none; }
  .draft-fields, .draft-actions { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid > div:nth-child(even) { text-align: left; }
  .payoff-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payoff-chart-stats > div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .payoff-chart-stats > div:nth-child(5n) { border-right: 1px solid var(--line-soft); }
  .payoff-chart-stats > div:nth-child(2n) { border-right: 0; }
  .payoff-chart-stats > div:nth-last-child(-n + 5) { border-bottom: 1px solid var(--line-soft); }
  .payoff-chart-stats > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .payoff-chart-stage, .payoff-chart-svg { min-height: 205px; }
  .payoff-chart-host.payoff-chart-expanded .payoff-chart-card {
    width: calc(100vw - 1rem); max-height: calc(100vh - 1rem);
  }
  .mobile-draft-bar:not([hidden]) { left: 0.5rem; right: 0.5rem; bottom: 64px; border-radius: var(--radius-lg); border-width: 1px; }
  .draft-panel.mobile-expanded { left: 0.5rem; right: 0.5rem; bottom: 128px; border-radius: var(--radius-lg); }
  .book-header { padding-inline: 0.75rem; }
  .book-risk-overview { padding-inline: 0.65rem; }
  .book-risk-toolbar { padding-inline: 0.65rem; }
  .book-risk-sort { flex: 1; }
  .book-risk-sort select { flex: 1; min-width: 0; }
  .book-risk-count { width: 100%; margin-left: 0; text-align: right; }
  .book-risk-scale { display: none; }
  .book-risk-list { padding: 0.65rem; }
  .book-risk-primary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "state contract"
      "cushion cushion"
      "prices dte"
      "capital premium";
    padding: 0.7rem;
  }
  .book-risk-expand { width: 2.6rem; }
  .book-risk-expand span { display: none; }
  .book-risk-detail { grid-template-columns: 1fr; }
}

/* --- Shared metric strip (BS Option Calculator, VAY screener) -------------- */
.metric-strip {
  display: grid; gap: 0.7rem; margin: 0.85rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.metric-tile {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.8rem 0.9rem; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
}
.metric-tile-label {
  color: var(--muted); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.15rem;
}
.metric-tile-value {
  font-family: var(--mono); font-size: 1.28rem; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric-tile-hint { color: var(--faint); font-size: 0.72rem; }

/* --- BS Option Calculator -------------------------------------------------- */
.calc-scroll { padding-bottom: var(--space-4); }
.calc-intro { margin: 0.9rem 1.1rem 0; max-width: 62rem; }

.calc-columns {
  display: grid; gap: 0; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
.calc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.calc-panel-head h3 { margin: 0; }
.calc-title-with-tip {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.calc-title-with-tip h3 { margin: 0; }
.calc-panel .sub { margin: 0.35rem 0 0.75rem; font-size: 0.78rem; }
.calc-mode { margin-bottom: 0.85rem; }

.calc-field-grid {
  display: grid; gap: 0.7rem 0.9rem;
  /* Wide enough that “Days to Expiration (DTE)” + tip usually stay one line. */
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  align-items: start;
}
.calc-field { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.calc-field label {
  display: flex; align-items: center; gap: 0.28rem;
  /* Same label band on every cell so wrapped tip+text cannot push inputs apart. */
  min-height: 2.5rem;
  color: var(--muted); font-size: 0.76rem; line-height: 1.25;
}
.calc-field label .info-tip-wrap {
  flex: 0 0 auto; margin-left: 0; align-self: center;
}
.calc-field .info-tip {
  width: 1.05rem; height: 1.05rem; flex: 0 0 1.05rem;
  font-size: 0.58rem;
}
.calc-field input, .calc-field select { width: 100%; min-width: 0; }
.calc-field input[type="number"], .calc-field input[type="text"] {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

.calc-live {
  margin-bottom: 0.9rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.calc-symbol-form { display: flex; gap: 0.45rem; margin-bottom: 0.7rem; }
.calc-symbol-form input { flex: 1; min-width: 0; text-transform: uppercase; }
.calc-live-status {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin: 0.6rem 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.4;
}
.calc-data-pill { flex: 0 0 auto; }
.calc-error { margin: 0.7rem 0 0; color: var(--down); font-size: 0.78rem; }
.calc-actions { display: flex; gap: 0.45rem; margin-top: 0.85rem; }
.calc-note { margin: 0.7rem 0 0 !important; color: var(--faint); font-size: 0.73rem; line-height: 1.45; }

.calc-kv-list {
  display: flex; flex-direction: column;
  margin-top: 0.9rem; border-top: 1px solid var(--line-soft);
}
.calc-leverage-summary {
  margin: 0; padding: 0.65rem 0 0.55rem;
  color: var(--text); font-size: 0.78rem; line-height: 1.4;
  border-bottom: 1px solid var(--line-soft);
}
.calc-kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft);
}
.calc-kv span {
  color: var(--muted); font-size: 0.79rem;
  display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap;
}
.calc-kv strong {
  font-family: var(--mono); font-size: 0.9rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.calc-chart-card { display: flex; flex-direction: column; gap: 0.75rem; }
.calc-chart-head {
  display: grid; gap: 0.3rem 1.2rem; align-items: baseline;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
}
.calc-chart-head h3 { margin: 0; }
.calc-chart-head .sub { margin: 0; font-size: 0.78rem; line-height: 1.45; }
.calc-chart-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.6rem 1rem;
}
.calc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.calc-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.6rem; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-pill); color: var(--muted); font-size: 0.76rem;
}
.calc-chip:hover { color: var(--text); }
.calc-chip input { accent-color: var(--series-color, var(--accent)); margin: 0; }
.calc-chip span::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem;
  margin-right: 0.35rem; border-radius: 50%;
  background: var(--series-color, var(--accent));
  vertical-align: baseline;
}
.calc-chip:has(input:checked) { color: var(--text); border-color: var(--series-color, var(--accent)); }

.calc-chart-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
}
.calc-animated-dte {
  font-family: var(--mono); font-size: 0.76rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.calc-speed {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.76rem;
}
.calc-speed input { width: 6.5rem; accent-color: var(--accent); }
.calc-axis { display: inline-flex; gap: 0.7rem; }
.calc-axis label {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--muted); font-size: 0.76rem; cursor: pointer;
}
.calc-axis input { accent-color: var(--accent); margin: 0; }

.calc-chart-stage { position: relative; width: 100%; }
.calc-chart-svg { display: block; width: 100%; height: auto; }
.calc-chart-grid line { stroke: var(--line-soft); stroke-width: 1; }
.calc-chart-grid text {
  fill: var(--faint); font-family: var(--mono); font-size: 9px;
}
.calc-chart-frame { stroke: var(--line); stroke-width: 1; }
.calc-chart-marker {
  stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.75;
}
.calc-chart-line { stroke: var(--series-color, var(--accent)); stroke-width: 1.8; }
.calc-chart-line-dashed { stroke-dasharray: 5 4; }
.calc-chart-line-dotted { stroke-dasharray: 2.5 3.5; }
.calc-chart-area { stroke: none; }
.calc-chart-area-profit { fill: rgba(45, 212, 191, 0.16); }
.calc-chart-area-loss { fill: rgba(244, 114, 182, 0.14); }
.calc-chart-zero { stroke: var(--line); stroke-width: 1; opacity: 0.9; }
.calc-chart-crosshair line {
  stroke: color-mix(in srgb, var(--text) 55%, transparent);
  stroke-width: 1; stroke-dasharray: 2 3;
}
.calc-chart-dot {
  fill: var(--series-color, var(--accent));
  stroke: var(--panel); stroke-width: 1.5;
}
.calc-chart-readout {
  fill: var(--muted); font-family: var(--mono); font-size: 9.5px;
  /* Soft halo so stacked crosshair labels stay legible over series lines. */
  paint-order: stroke fill;
  stroke: var(--panel);
  stroke-width: 3px;
}
[data-crosshair-hit] { cursor: crosshair; outline: none; }
[data-crosshair-hit]:focus-visible { stroke: var(--accent); stroke-width: 1; }
.calc-chart-legend-swatch { stroke: var(--series-color, var(--accent)); stroke-width: 2; }
.calc-chart-legend-text { fill: var(--muted); font-size: 9.5px; }
.calc-chart-caption { fill: var(--faint); font-size: 9.5px; }
.calc-chart-empty { fill: var(--faint); font-size: 12px; }

/* Floating crosshair tip: series rows, scrubbed underlying, left/right finish odds. */
.calc-chart-tooltip {
  position: absolute; z-index: 5; min-width: 152px; max-width: 220px;
  padding: 0.55rem 0.65rem 0.5rem; display: grid; gap: 0.35rem;
  pointer-events: none;
  color: var(--text);
  background: color-mix(in srgb, #0c0f0e 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.calc-chart-tooltip-rows { display: grid; gap: 0.22rem; }
.calc-chart-tooltip-row {
  display: grid; grid-template-columns: 0.55rem 1fr auto;
  gap: 0.4rem; align-items: center;
}
.calc-chart-tooltip-swatch {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--series-color, var(--accent));
}
.calc-chart-tooltip-label {
  color: var(--muted); font: 0.62rem var(--mono); white-space: nowrap;
}
.calc-chart-tooltip-row strong {
  color: var(--text); font: 650 0.68rem var(--mono);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.calc-chart-tooltip-price {
  margin-top: 0.1rem; padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  text-align: center; color: var(--text);
  font: 700 0.82rem var(--mono); font-variant-numeric: tabular-nums;
}
.calc-chart-tooltip-prob {
  display: grid; gap: 0.08rem; justify-items: center;
  padding-top: 0.15rem;
}
.calc-chart-tooltip-prob strong {
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font: 600 0.68rem var(--mono); font-variant-numeric: tabular-nums;
}
.calc-chart-tooltip-prob span {
  color: var(--faint); font-size: 0.58rem; letter-spacing: 0.02em;
}

/* Series colours live here so the chart never needs inline styles. */
.calc-series-delta { --series-color: #ef4444; }
.calc-series-gamma { --series-color: #22c55e; }
.calc-series-theta { --series-color: #d946ef; }
.calc-series-vega { --series-color: #3b82f6; }
.calc-series-rho { --series-color: #f59e0b; }
.calc-series-extrinsic { --series-color: #ef4444; }
.calc-series-leverage { --series-color: #94a3b8; }

/* --- Strategy Lab ----------------------------------------------------------- */
.lab-scroll { padding-bottom: var(--space-4); }
.lab-globals, .lab-chart-card { margin: 0.85rem 1.1rem; }
.lab-symbol-form { margin-bottom: 0.6rem; align-items: center; }
.lab-symbol-form input {
  flex: 0 1 9.5rem;
  width: 9.5rem;
  max-width: 9.5rem;
  min-width: 5.5rem;
}
.lab-chart-tools .calc-speed {
  flex: 0 0 auto;
  white-space: nowrap;
}
.lab-chart-tools .calc-speed input[type="range"] {
  width: 7rem;
  max-width: 7rem;
  flex: 0 0 auto;
}
.lab-global-grid { margin-bottom: 0.6rem; }
.lab-global-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.lab-readout { color: var(--muted); font-size: 0.78rem; min-width: 6ch; }
.lab-parity { color: var(--warn, #f59e0b); }
.lab-vay { text-transform: capitalize; }

.lab-columns {
  display: grid; gap: 0.85rem; margin: 0.85rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.lab-column { display: flex; flex-direction: column; gap: 0.7rem; }
/* An inactive column stays on screen and editable: it is excluded from the
   comparison, not hidden from the trader. */
.lab-column-off { opacity: 0.55; }
.lab-column-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.lab-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none;
  background: var(--series-color, var(--accent));
}
.lab-name {
  flex: 1 1 8rem; min-width: 6rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); padding: 0.25rem 0.45rem; font-size: 0.86rem;
}
.lab-active { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
.lab-strategy { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; }
.lab-strategy select {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); padding: 0.3rem 0.4rem;
}

.lab-legs { width: 100%; font-size: 0.76rem; }
.lab-legs th { white-space: nowrap; }
.lab-legs td { padding: 0.15rem 0.2rem; }
.lab-cell {
  width: 100%; min-width: 3.2rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--mono); font-size: 0.74rem;
  padding: 0.2rem 0.3rem;
}
.lab-cell-empty { color: var(--faint); text-align: center; }
.lab-leg-type, .lab-leg-dir { font-size: 0.72rem; }
/* A short leg that is in the money with almost no extrinsic left can be
   assigned tonight, so it is marked in the grid and not only in the flags. */
.lab-leg-risk td { background: rgba(245, 158, 11, 0.12); }
.lab-leg-remove {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 0.8rem; padding: 0 0.2rem;
}
.lab-leg-remove:hover { color: var(--danger, #ef4444); }
.lab-leg-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.lab-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.lab-section-head h4 { margin: 0; font-size: 0.82rem; }
.lab-kv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.3rem;
}
.lab-kv {
  display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.76rem;
}
.lab-kv span { color: var(--muted); }
/* Per-leg Greeks sit under the leg that produced them, so the row reads as a
   continuation of it rather than as a table of its own. */
.lab-leg-greeks-row td { border-top: 0; padding-top: 0; }
.lab-leg-greeks-label { color: var(--faint); font-size: 0.68rem; }
.lab-leg-greeks-strip {
  display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; font-size: 0.7rem;
}
.lab-leg-greeks-strip span { display: flex; gap: 0.25rem; }
.lab-leg-greeks-strip em { color: var(--muted); font-style: normal; }
.lab-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lab-stats { margin: 0; }
.lab-empty { color: var(--faint); font-size: 0.8rem; margin: 0; }
.lab-chart-empty {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  min-height: 220px;
  padding: 1.4rem 1.2rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.lab-chart-empty p { margin: 0; max-width: 28rem; }
.lab-chart-empty .sub { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

/* One colour per column, reused by the dot, the curve and its dashed twin. */
.lab-series-a { --series-color: #38bdf8; }
.lab-series-b { --series-color: #a78bfa; }
.lab-series-c { --series-color: #fbbf24; }
/* Single-column P&L explorer: Current (blue), Expiration (magenta), Delta (amber). */
.lab-series-now { --series-color: #3b82f6; }
.lab-series-expiry { --series-color: #f472b6; }
.lab-series-delta { --series-color: #f59e0b; }

/* --- VAY screener ----------------------------------------------------------- */
.vay-scroll { padding-bottom: var(--space-4); }
.vay-panel { margin: 0.85rem 1.1rem; }
.vay-empty { margin: 0.6rem 0; color: var(--faint); }

.vay-symbol-form { margin-bottom: 0.6rem; }
.vay-matrix-actions { display: inline-flex; align-items: center; gap: 0.6rem; }

/* Cheap -> rich, read from the premium seller's seat: green is an option
   paying more than the underlying's own movement justifies, red is one paying
   less, yellow is fair. Same green/red as P&L because the judgement is the
   same one - this is worth doing, this is not. */
/* --band-ink carries the same judgement into the number itself: the tint says
   which band, the ink makes it readable at a glance down a column. */
.vay-band-cheap { background: color-mix(in srgb, var(--down) 26%, transparent); --band-ink: var(--down); }
.vay-band-soft { background: color-mix(in srgb, var(--down) 12%, transparent); --band-ink: var(--down); }
.vay-band-fair { background: color-mix(in srgb, var(--warn) 16%, transparent); --band-ink: var(--warn); }
.vay-band-firm { background: color-mix(in srgb, var(--up) 14%, transparent); --band-ink: var(--up); }
.vay-band-rich { background: color-mix(in srgb, var(--up) 30%, transparent); --band-ink: var(--up); }

/* Ends-labelled scale rather than five sentences: with a red-to-green ramp the
   words are only needed on hover, and the row stays one line. */
.vay-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  margin: 0.5rem 0 0.7rem; font-size: 0.74rem; color: var(--muted);
}
.vay-legend-scale { display: inline-flex; align-items: center; gap: 0.25rem; }
.vay-legend-end {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}
.vay-legend-end:first-child { margin-right: 0.15rem; }
.vay-legend-end:last-child { margin-left: 0.15rem; }
.vay-legend-note { margin-left: auto; color: var(--faint); text-align: right; }
.vay-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.vay-legend-chip {
  width: 1.15rem; height: 0.72rem; border-radius: 2px;
  border: 1px solid var(--line-soft);
}

.vay-compare-grid {
  display: grid; gap: 0.7rem; margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.vay-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.75rem 0.85rem; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
}
.vay-card-head { display: flex; align-items: center; gap: 0.5rem; }
.vay-card-title { display: flex; flex-direction: column; min-width: 0; }
.vay-card-title .vay-ticker { max-width: 100%; }
.vay-card-title .vay-ticker-identity strong { font-size: 0.95rem; }
.vay-card-head .icon-btn { margin-left: auto; }
.vay-swatch {
  width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--series-color, var(--accent));
}
.vay-card-lead { display: flex; align-items: baseline; gap: 0.45rem; }
.vay-card-lead-value {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.vay-card-lead-hint { color: var(--faint); font-size: 0.72rem; }
.vay-card-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 0.7rem; margin: 0.25rem 0 0;
}
.vay-card-facts div { display: flex; justify-content: space-between; gap: 0.4rem; }
.vay-card-facts dt { color: var(--muted); font-size: 0.72rem; }
.vay-card-facts dd {
  margin: 0; font-family: var(--mono); font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.vay-tenor-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.vay-tenor {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  padding: 0.35rem 0.2rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.vay-tenor-label {
  display: inline-flex; align-items: baseline; gap: 0.25rem;
  font-size: 0.66rem; color: var(--muted); letter-spacing: 0.03em;
}
/* The real days to expiry. Listed expiries rarely land on a tenor's target, so
   this is disclosure, not decoration: "1M" priced off a 33-day option says so. */
.vay-tenor-dte {
  font-family: var(--mono); font-size: 0.62rem; color: var(--faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.vay-tenor-dte.far {
  color: var(--warn); border-bottom: 1px dotted currentColor;
}
.vay-tenor-far { border-style: dashed; }
.vay-tenor-value {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--band-ink, inherit);
}
.vay-tenor-value.muted { color: var(--faint); font-weight: 500; }
.vay-tenor-sub {
  font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
}

/* Watchlist grid: every name against every tenor without scrolling the page.
   Density is the point, so the rows are tighter than the app's other tables and
   the header stays put while the list moves under it. */
.vay-watch-wrap { margin-top: 0.2rem; max-height: 62vh; }
.vay-watch-grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vay-watch-grid th, .vay-watch-grid td {
  padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
/* Column rules, as on the reference grid: five tenors side by side need a
   vertical edge or the eye loses which shade belongs to which horizon. */
.vay-watch-grid th + th, .vay-watch-grid td + td {
  border-left: 1px solid var(--line-soft);
}
.vay-watch-grid thead th {
  position: sticky; top: 0; z-index: 1;
  vertical-align: bottom; background: var(--bg-elevated);
  color: var(--muted); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.vay-watch-grid th.sortable {
  cursor: pointer; user-select: none;
  transition: color 120ms ease, background 120ms ease;
}
.vay-watch-grid th.sortable:hover,
.vay-watch-grid th.sortable:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  outline: none;
}
.vay-watch-grid th.sortable .sort-ind {
  display: inline-block; margin-left: 0.28rem;
  width: 0.55rem; color: var(--faint); font-size: 0.65rem;
}
.vay-watch-grid th.sortable .sort-ind::before { content: "↕"; }
.vay-watch-grid th.sortable.sorted { color: var(--text); }
.vay-watch-grid th.sortable.sorted.asc .sort-ind::before { content: "↑"; color: var(--accent); }
.vay-watch-grid th.sortable.sorted.desc .sort-ind::before { content: "↓"; color: var(--accent); }
/* Same second-line treatment as the sector matrix: the anchor belongs under
   the tenor, not beside it, or the column widens for no information gain. */
.vay-watch-grid .vay-fair-note {
  display: block; font-weight: 400; font-size: 0.66rem; color: var(--faint);
}

.vay-watch-row { cursor: pointer; }
.vay-watch-row:hover { background: var(--panel-hover, rgba(148, 163, 184, 0.08)); }
.vay-watch-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The name column anchors the row, so it is tinted away from the shaded
   tenors and never competes with them for attention. */
.vay-watch-symbol {
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.vay-watch-symbol .vay-ticker { max-width: 100%; }
.vay-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.vay-ticker-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
  line-height: 1.15;
}
.vay-ticker-identity strong {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vay-watch-company {
  color: var(--faint); font-size: 0.7rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vay-rank-row .vay-ticker { vertical-align: middle; }
.vay-rank-row .quality-badge { margin-left: 0.35rem; vertical-align: middle; }
/* VAY leads in the band's own colour, the fair-value multiple trails it on the
   same line: the cell has to stay one row tall or the grid stops fitting. */
/* Equal tenor columns: the five shades are compared across a row, and ragged
   widths make that comparison harder than it needs to be. */
.vay-watch-cell {
  font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 6.6rem;
}
.vay-watch-cell .vay-tenor-value {
  font-size: 0.88rem; font-weight: 600; color: var(--band-ink, inherit);
}
.vay-watch-cell .vay-tenor-sub { margin-left: 0.3rem; }
.vay-watch-cell.vay-tenor-far { border-bottom-style: dashed; }
/* An unpriced cell names its reason instead of showing a dash. Smaller and in
   the body font so it never reads as a number. */
.vay-watch-gap {
  font-family: inherit; font-size: 0.68rem; color: var(--faint);
}
.vay-watch-pending td { color: var(--faint); font-style: italic; }
.vay-watch-pending .vay-watch-symbol { font-style: normal; }

.vay-coverage { color: var(--muted); }

.vay-chart-wrap { margin-top: 0.9rem; }
.vay-chart { width: 100%; }
.vay-chart-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin-top: 0.4rem; font-size: 0.74rem; color: var(--muted);
}

.vay-matrix-wrap { margin-top: 0.2rem; }
.vay-matrix th { vertical-align: bottom; }
.vay-empty-panel {
  display: grid;
  gap: 0.35rem;
  place-items: center;
  text-align: center;
  min-height: 9rem;
  padding: 1.4rem 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.vay-empty-panel p { margin: 0; max-width: 34rem; }
.vay-empty-panel .sub { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.vay-matrix .vay-fair-note {
  display: block; font-weight: 400; font-size: 0.66rem; color: var(--faint);
}
.vay-sector-name { white-space: nowrap; }
.vay-cell {
  cursor: pointer; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.vay-cell:hover, .vay-cell:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
/* Sector average plus the best name inside it: where to look, and what to
   trade there, without a tooltip round trip. */
.vay-cell-avg, .vay-cell-best {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 0.3rem;
}
.vay-cell-avg { font-weight: 600; color: var(--band-ink, inherit); }
.vay-cell-best { color: var(--muted); font-size: 0.72rem; }
.vay-cell-tag {
  font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); margin-right: auto;
}

.vay-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem;
  margin: 0.6rem 0 0.8rem;
}
.vay-filters .calc-field { min-width: 8rem; }
.vay-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.78rem; cursor: pointer;
}
.vay-check input { accent-color: var(--accent); margin: 0; }

.vay-rank-row { cursor: pointer; }
.vay-rank-row:hover { background: var(--panel-hover, rgba(148, 163, 184, 0.08)); }
.vay-rank-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Compare-series colours, kept out of inline styles like the calculator's. */
.vay-series-a { --series-color: #3b82f6; }
.vay-series-b { --series-color: #22c55e; }
.vay-series-c { --series-color: #f59e0b; }
.vay-series-d { --series-color: #d946ef; }
.vay-series-e { --series-color: #14b8a6; }
.vay-series-f { --series-color: #ef4444; }
.vay-series-fair { --series-color: #94a3b8; }

@media (max-width: 900px) {
  .calc-chart-head { grid-template-columns: 1fr; }
  .vay-tenor-strip { grid-template-columns: repeat(5, 1fr); }
  .vay-filters .calc-field { min-width: 6.5rem; }
  /* Narrow enough that something has to give: keep the five tenors, drop the
     spot/vol context rather than pushing the grid off the side. */
  .vay-watch-context { display: none; }
  .vay-watch-company { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .payoff-profit-area, .payoff-loss-area { fill: transparent; }
  .payoff-pnl-line, .payoff-zero-line, .payoff-spot-line,
  .payoff-breakeven-line, .payoff-strike-line { stroke: CanvasText; }
  .payoff-chart-card, .payoff-chart-tooltip { border-color: CanvasText; }
  .calc-chart-line, .calc-chart-marker, .calc-chart-zero,
  .calc-chart-crosshair line,
  .calc-chart-frame, .calc-chart-legend-swatch { stroke: CanvasText; }
  .calc-chart-legend-text, .calc-chart-caption,
  .calc-chart-readout, .calc-chart-dot { fill: CanvasText; }
  .calc-chart-tooltip {
    background: Canvas; color: CanvasText; border-color: CanvasText;
    box-shadow: none; backdrop-filter: none;
  }
  .calc-chart-tooltip-swatch { background: CanvasText; }
  .calc-chart-tooltip-label, .calc-chart-tooltip-prob span { color: CanvasText; }
  /* Forced colours drop the tint, so the profit/loss halves would read as one
     block. The dashed expiration line still separates them. */
  .calc-chart-area { fill: transparent; }
  /* Band shading carries meaning, so restore a visible border when the
     background colour is dropped by forced colours. */
  .vay-band-cheap, .vay-band-soft, .vay-band-fair,
  .vay-band-firm, .vay-band-rich {
    background: Canvas; border: 1px solid CanvasText; --band-ink: CanvasText;
  }
}