/* ─── Light theme (default) ───────────────────────────────── */
:root {
    --bg-body: #f0f2f7;
    --bg-gradient:
        radial-gradient(ellipse at 15% 10%, rgba(34,197,94,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 85%, rgba(59,130,246,0.06) 0%, transparent 40%),
        linear-gradient(160deg, #eef1f8 0%, #f2f4fb 55%, #edf0f7 100%);

    --text: #0f1623;
    --muted: rgba(15, 22, 35, 0.45);

    --glass: rgba(255, 255, 255, 0.72);
    --glass-hover: rgba(255, 255, 255, 0.85);
    --glass-active: rgba(255, 255, 255, 0.95);

    --border: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.18);
    --border-inset: rgba(255, 255, 255, 0.80);

    --accent: #16a34a;
    --accent-dim: rgba(22, 163, 74, 0.12);
    --accent-glow: rgba(22, 163, 74, 0.18);
    --accent-text: #15803d;

    --danger: #dc2626;
    --danger-dim: rgba(220, 38, 38, 0.08);

    --shadow-card:
        0 0 0 1px rgba(255,255,255,0.9) inset,
        0 1px 0 rgba(255,255,255,1) inset,
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10);

    --input-bg: rgba(255, 255, 255, 0.9);
    --input-bg-focus: #ffffff;
    --table-head-bg: rgba(0, 0, 0, 0.03);
    --table-row-hover: rgba(0, 0, 0, 0.025);
    --metric-bg: rgba(255, 255, 255, 0.7);
    --tabs-bg: rgba(0, 0, 0, 0.05);
    --chain-head-bg: #f8f9fc;
    --chart-bg: rgba(255, 255, 255, 0.6);
    --card-bg: rgba(248, 250, 253, 0.97);

    --radius-card: 20px;
    --radius-control: 10px;
    --radius-pill: 14px;

    --font-ui: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ─── Dark theme ──────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-body: #080c14;
    --bg-gradient:
        radial-gradient(ellipse at 15% 15%, rgba(34,197,94,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 85%, rgba(59,130,246,0.05) 0%, transparent 45%),
        linear-gradient(160deg, #07090f 0%, #090d16 55%, #080b13 100%);

    --text: #eaecf4;
    --muted: rgba(234, 236, 244, 0.42);

    --glass: rgba(255, 255, 255, 0.048);
    --glass-hover: rgba(255, 255, 255, 0.075);
    --glass-active: rgba(255, 255, 255, 0.10);

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-inset: rgba(255, 255, 255, 0.10);

    --accent: #22c55e;
    --accent-dim: rgba(34, 197, 94, 0.15);
    --accent-glow: rgba(34, 197, 94, 0.22);
    --accent-text: #4ade80;

    --danger: #f87171;
    --danger-dim: rgba(248, 113, 113, 0.13);

    --shadow-card:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(255,255,255,0.09) inset,
        0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);

    --input-bg: rgba(0, 0, 0, 0.25);
    --input-bg-focus: rgba(0, 0, 0, 0.30);
    --table-head-bg: rgba(0, 0, 0, 0.15);
    --table-row-hover: rgba(255, 255, 255, 0.025);
    --metric-bg: rgba(0, 0, 0, 0.20);
    --tabs-bg: rgba(0, 0, 0, 0.25);
    --chain-head-bg: #0c1120;
    --chart-bg: rgba(0, 0, 0, 0.20);
    --card-bg: rgba(17, 22, 34, 0.98);
}

* { box-sizing: border-box; }

html, body {
    /* Guard against horizontal document overflow: a single too-wide child
       (nowrap toolbar row, min-width table, etc.) must never shift the whole
       page sideways on a phone. Wide content scrolls inside its own wrapper. */
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text);
    background: var(--bg-gradient);
    min-height: 100vh;
    transition: background 0.25s ease, color 0.25s ease;
}

/* Lock background scroll while the chart is fullscreen. */
body.payoff-fs-lock { overflow: hidden; }

/* ─── Shell ───────────────────────────────────────────────── */

.builder-shell {
    max-width: 1520px;
    margin: 0 auto;
    padding: 36px 24px 56px;
}

.builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.builder-kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
}

.builder-title {
    margin: 0;
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
}

.builder-header-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.builder-badge {
    padding: 6px 12px;
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--glass);
    border-radius: var(--radius-pill);
    color: var(--muted);
}

/* ─── Grid ────────────────────────────────────────────────── */

.builder-root {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

.builder-zone-toolbar        { grid-column: 1 / span 12; }
.builder-zone-chain          { grid-column: 1 / span 8; }
.builder-zone-legs           { grid-column: 1 / span 8; }
.builder-zone-summary        { grid-column: span 4; }
.builder-zone-payoff         { grid-column: 1 / span 12; }
.builder-zone-vol            { grid-column: 1 / span 12; }
.builder-zone-my-strategies  { grid-column: span 6; }
.builder-zone-admin          { grid-column: 1 / span 12; }

/* ─── Glass card ──────────────────────────────────────────── */

.block-card {
    height: 100%;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}


.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
}

.block-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ─── Asset tabs ──────────────────────────────────────────── */

.asset-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--tabs-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.asset-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all 150ms ease;
    min-width: 74px;
}

.asset-tab-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(234,236,244,0.45);
    transition: color 150ms ease;
}

.asset-tab-source {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(234,236,244,0.28);
    transition: color 150ms ease;
}

.asset-tab:hover:not(.active) {
    background: var(--glass-hover);
    border-color: var(--border);
}

.asset-tab:hover:not(.active) .asset-tab-name,
.asset-tab:hover:not(.active) .asset-tab-source {
    color: rgba(234,236,244,0.7);
}

.asset-tab.active {
    background: var(--accent-dim);
    border-color: rgba(34,197,94,0.32);
    box-shadow: 0 0 18px var(--accent-glow), 0 0 0 1px rgba(34,197,94,0.12) inset;
}

.asset-tab.active .asset-tab-name {
    color: var(--accent-text);
}

.asset-tab.active .asset-tab-source {
    color: rgba(74,222,128,0.65);
}

.asset-tab.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Asset single badge (when only one asset) ────────────── */

.asset-single {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid rgba(34,197,94,0.32);
    border-radius: var(--radius-pill);
    background: var(--accent-dim);
    box-shadow: 0 0 18px var(--accent-glow), 0 0 0 1px rgba(34,197,94,0.12) inset;
}

.asset-single-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--accent-text);
}

.asset-single-source {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(74,222,128,0.65);
}

[data-theme="light"] .asset-single-source {
    color: rgba(21,128,61,0.7);
}

/* ─── Asset search (P0.4) ─────────────────────────────────── */

/* Allow the toolbar card to show the dropdown outside its bounds */
.builder-zone-toolbar .block-card {
    overflow: visible;
    padding: 11px 22px;
}

/* Inline meta row: spot / chain / as-of / contracts in the header */
.toolbar-meta {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-left: 4px;
}

.toolbar-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.toolbar-meta-item:first-child {
    border-left: 1px solid var(--border);
}

.toolbar-meta-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

/* C1/C2 — chain staleness / spot-divergence warning chip in the toolbar. */
.toolbar-stale-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    font-size: 10px;
    font-weight: 700;
    background: rgba(245, 158, 11, .15);
    color: #d97706;
    cursor: help;
    white-space: nowrap;
}
.toolbar-meta-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-spot-value {
    font-size: 14px;
}

.toolbar-meta-value.ready   { color: var(--accent-text); }
.toolbar-meta-value.unavail { color: var(--danger); }

.asset-search-wrap {
    position: relative;
    flex-shrink: 0;
}

.toolbar-asset-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.asset-search-input {
    width: 160px;
    height: 36px;
    padding: 0 10px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.asset-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.asset-search-input:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 2px rgba(34,197,94,0.12);
}

.asset-search-dropdown {
    position: fixed;   /* escapes all overflow/stacking contexts */
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 9999;
    display: none;
}

[data-theme="dark"] .asset-search-dropdown {
    background: #111827;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.asset-search-dropdown.is-open {
    display: block;
    animation: fade-in 120ms ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.asset-search-dropdown--portal { z-index: 100000; }

.asset-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}

.asset-search-item:last-child {
    border-bottom: none;
}

.asset-search-item:hover,
.asset-search-item:focus {
    background: var(--glass-hover);
    outline: none;
}

.asset-search-item.is-active {
    background: var(--accent-dim);
}

.asset-search-item-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

.asset-search-item.is-active .asset-search-item-name {
    color: var(--accent-text);
}

.asset-search-item-exchange {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    flex: 1;
}

.asset-search-item.is-active .asset-search-item-exchange {
    color: rgba(74,222,128,0.65);
}

.asset-search-empty {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.asset-search-item-spot {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.asset-search-exchange,
.asset-search-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: #2563eb;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.asset-search-exchange:hover,
.asset-search-exchange:focus,
.asset-search-back:hover,
.asset-search-back:focus {
    background: var(--glass-hover);
    outline: none;
}

.asset-search-count {
    min-width: 24px;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.asset-search-back {
    justify-content: flex-start;
    color: #2563eb;
}

/* ─── Active asset chip (always-visible current selection) ── */

.asset-active-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid rgba(34,197,94,0.32);
    border-radius: var(--radius-pill);
    background: var(--accent-dim);
    box-shadow: 0 0 18px var(--accent-glow), 0 0 0 1px rgba(34,197,94,0.12) inset;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}

.asset-active-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--accent-text);
}

.asset-active-exchange {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(74,222,128,0.65);
}

[data-theme="light"] .asset-active-exchange {
    color: rgba(21,128,61,0.7);
}

/* ─── Toolbar internals ───────────────────────────────────── */

.toolbar-body {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.toolbar-sep {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* ─── Toolbar right-side action group ────────────────────────── */

.toolbar-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.autorefresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.autorefresh-btn:hover { opacity: 1; }

.autorefresh-btn.autorefresh-on {
    opacity: 1;
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--accent-text);
}

.autorefresh-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
    transition: background 0.2s;
}

.autorefresh-btn.autorefresh-on .autorefresh-dot {
    background: var(--accent);
    /* Keep this static: animating inside backdrop-filter cards forces continuous GPU repaint. */
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

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

.field-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
}

.input {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: 9px 11px;
    font: inherit;
    font-size: 13px;
    background: var(--input-bg);
    color: var(--text);
    outline: none;
    transition: border-color 140ms ease, background 140ms ease;
    appearance: none;
    -webkit-appearance: none;
}

.input:focus {
    border-color: var(--accent);
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-small { min-width: 80px; }

/* ─── Metric chips ────────────────────────────────────────── */

.metric-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--metric-bg);
    white-space: nowrap;
}

.metric-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.metric-value.ready   { color: var(--accent-text); }
.metric-value.unavail { color: var(--danger); }

/* ─── Buttons ─────────────────────────────────────────────── */

.button {
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: 9px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
}

.button:hover  { filter: brightness(1.12); transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
    filter: none;
}

.button-primary {
    background: var(--accent);
    color: #071210;
    font-weight: 600;
    box-shadow: 0 0 16px var(--accent-glow);
}

.button-secondary {
    background: var(--glass);
    border-color: var(--border);
    color: var(--text);
}

.button-secondary:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
}

.button-danger {
    background: var(--danger-dim);
    border-color: rgba(248,113,113,0.3);
    color: var(--danger);
}

.button-close {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.35);
    color: #b45309;
}
.button-close:hover {
    background: rgba(245,158,11,0.20);
    border-color: #f59e0b;
}

.button-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    padding: 9px 10px;
}

.button-ghost:hover {
    color: var(--text);
    background: var(--glass-hover);
    border-color: var(--border);
}

/* ─── Presets ─────────────────────────────────────────────── */

.preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

/* Full-width section divider inside the preset grid (e.g. stock combos) */
.preset-group-label {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    font-family: var(--font-mono);
}

.preset-btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--input-bg);
    cursor: pointer;
    text-align: left;
    transition: all 140ms ease;
}

.preset-btn:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
}

.preset-btn.active {
    background: var(--accent-dim);
    border-color: rgba(34,197,94,0.35);
}

.preset-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.preset-desc {
    font-size: 10px;
    color: var(--muted);
}

.preset-btn.active .preset-name { color: var(--accent-text); }
.preset-btn.active .preset-desc { color: rgba(74,222,128,0.65); }

/* ─── Chain table ─────────────────────────────────────────── */

.chain-exp-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--metric-bg);
}

.chain-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--muted);
    font-size: 13px;
}

.chain-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    max-height: 420px;
    overflow-y: auto;
}

.chain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 820px;
}

.chain-table th {
    position: sticky;
    top: 0;
    padding: 9px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--chain-head-bg);
    white-space: nowrap;
    z-index: 2;
}

.chain-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11.5px;
    vertical-align: middle;
    white-space: nowrap;
}

.chain-table tr:last-child td { border-bottom: none; }

.chain-table th.call-side  { text-align: right; color: var(--accent-text); }
.chain-table th.put-side   { text-align: left;  color: var(--danger); }
.chain-table th.strike-col { text-align: center; color: var(--muted); }

.chain-table td.call-side  { text-align: right; }
.chain-table td.put-side   { text-align: left; }
.chain-table td.strike-col { text-align: center; }

.chain-table td.itm { background: var(--table-row-hover); color: var(--text); }
.chain-table td.otm { color: var(--muted); }

.atm-row td { background: rgba(34,197,94,0.04); }
.atm-strike {
    font-weight: 700;
    color: var(--accent-text);
    font-size: 12px;
}

.chain-add-btn {
    position: relative;
}

.chain-add-btn:hover .chain-leg-btn { opacity: 1; }

.chain-leg-btn {
    opacity: 0;
    margin-left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid rgba(34,197,94,0.4);
    background: var(--accent-dim);
    color: var(--accent-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 120ms ease, background 120ms ease;
    vertical-align: middle;
}

.chain-leg-btn:hover {
    background: rgba(34,197,94,0.28);
    opacity: 1;
}

.put-side .chain-leg-btn { margin-left: 0; margin-right: 6px; }

.chain-hint {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--muted);
}

/* ─── Chain: Vol / OI / Prob / Liquidity ─────────────────── */

.chain-vol,
.chain-oi {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

/* OI bar */
.oi-bar-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.oi-bar-wrap-put {
    flex-direction: row-reverse;
}
.oi-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    min-width: 2px;
    flex-shrink: 0;
}
.call-oi-bar { background: rgba(34, 197, 94, 0.40); }
.put-oi-bar  { background: rgba(248, 113, 113, 0.40); }
.oi-val      { font-size: 11px; font-family: var(--font-mono); }

/* Delta + prob ITM in same cell */
.call-delta,
.put-delta {
    white-space: nowrap;
}
.chain-delta {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
}
.chain-prob {
    display: block;
    font-size: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
    margin-top: 1px;
}

/* Illiquid rows / cells */
.illiquid-row { opacity: 0.52; }
.illiquid-cell { opacity: 0.7; }

/* ─── Payoff: crosshair & tooltip ─────────────────────────── */

.chart-crosshair-line {
    stroke: var(--muted);
    stroke-width: 1px;
    stroke-dasharray: 3 3;
    opacity: 0.7;
}

.chart-crosshair-dot {
    fill: var(--text);
    stroke: var(--glass);
    stroke-width: 2.5px;
}
.chart-crosshair-dot.ch-profit { fill: var(--accent); }
.chart-crosshair-dot.ch-loss   { fill: var(--danger); }

.chart-tooltip-bg {
    fill: var(--glass);
    stroke: var(--border-strong);
    stroke-width: 1px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.18));
}
:root .chart-tooltip-bg      { fill: rgba(255,255,255,0.96); }
[data-theme="dark"] .chart-tooltip-bg { fill: rgba(12,17,32,0.96); }

.chart-tooltip-price {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    fill: var(--muted);
}
.chart-tooltip-pnl {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    fill: var(--text);
}
.chart-tooltip-pnl.ch-profit { fill: var(--accent-text); }
.chart-tooltip-pnl.ch-loss   { fill: var(--danger); }

/* ─── Payoff: breakeven markers ───────────────────────────── */

.chart-be-line {
    stroke: #3b82f6;
    stroke-width: 0.8px;
    opacity: 0.6;
}
.chart-be-bg {
    fill: rgba(59,130,246,0.08);
    stroke: rgba(59,130,246,0.22);
    stroke-width: 0.75px;
}
.chart-be-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    fill: #3b82f6;
    opacity: 0.85;
}

/* ─── Legs table ──────────────────────────────────────────── */

.legs-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.legs-count {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.legs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    font-size: 12px;
}

.legs-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--table-head-bg);
    white-space: nowrap;
}

.legs-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-family: var(--font-mono);
    font-size: 12px;
}

.legs-table tr:last-child td { border-bottom: none; }
.legs-table tr:hover td { background: var(--table-row-hover); }

.leg-long  td.leg-type { color: var(--accent-text); }
.leg-short td.leg-type { color: var(--danger); }
.leg-exp, .leg-mark    { color: var(--muted); }
.leg-strike            { font-weight: 600; }

.side-select     { min-width: 74px; }
.contract-select { min-width: 240px; font-size: 11px; }

/* ─── Summary ─────────────────────────────────────────────── */

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--input-bg);
}

.summary-item-wide { grid-column: 1 / span 2; }

.summary-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.summary-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.summary-value.positive { color: var(--accent-text); }
.summary-value.negative { color: var(--danger); }
.summary-value.greek    { font-size: 12px; }

.builder-status-badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--muted);
}

.builder-status-badge.ready    { border-color: rgba(34,197,94,0.35); background: var(--accent-dim); color: var(--accent-text); }
.builder-status-badge.partial  { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.10); color: #fbbf24; }
.builder-status-badge.empty    { color: var(--muted); }

/* Multi-expiry (calendar/diagonal) approximation warning */
.summary-multiexp-warn {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 8px 12px;
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 8px;
    background: rgba(251,191,36,0.08);
}
.summary-multiexp-badge {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.8rem;
    color: #fbbf24;
    white-space: nowrap;
}
.summary-multiexp-text {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
}

/* ─── Payoff chart ────────────────────────────────────────── */

.payoff-chart-wrap {
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--chart-bg);
    position: relative;
}

.payoff-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 280;
    cursor: crosshair;
    touch-action: none;
}

/* ── Fullscreen chart ─────────────────────────────────────── */
.payoff-fs-close { display: none; }

/* Expand-to-fullscreen control overlaid on the chart's top-right corner.
   Transparent by default so it doesn't obscure the plot; subtly visible on
   hover/active. Sits inside the wrap (overflow:hidden) so it never spills out. */
.payoff-fs-open {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 8px;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 120ms, background 120ms;
}
.payoff-fs-open:hover { opacity: 1; background: color-mix(in srgb, var(--text) 10%, transparent); }
/* In fullscreen the round ✕ close button takes over; hide the open control. */
.payoff-chart-wrap.is-fullscreen .payoff-fs-open { display: none; }

.payoff-chart-wrap.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    margin: 0;
    border: none;
    border-radius: 0;
    /* Opaque page background — the chart-bg token is translucent, which let the
       site show through underneath in fullscreen. */
    background: var(--bg-body);
    overflow: hidden;
    /* Column layout: metrics bar on top (in flow), canvas fills the rest. This
       avoids reserving a huge PAD.top for an overlaid bar, which squished the
       chart into the bottom of the screen and cut off the probability curve. */
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}
/* Canvas takes all remaining height below the metrics bar. JS sizes the backing
   store from the measured box, so the whole payoff (incl. the bell curve) fits. */
.payoff-chart-wrap.is-fullscreen .payoff-canvas {
    order: 1;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    /* Kill the inline aspect-ratio the canvas initialiser sets, so flex controls
       the height and the canvas fills the space left under the metrics bar. */
    aspect-ratio: auto;
}

/* Draggable leg-handle row overlaid on the fullscreen chart (moved here from
   its normal in-flow position so strikes stay draggable). Sits just above the
   x-axis; full width so the per-handle left% maps onto the same plot area.
   Ancestor selector raises specificity over the base .payoff-leg-handles-row. */
.payoff-chart-wrap.is-fullscreen .payoff-leg-handles-row--fs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 56px);
    width: auto;
    height: 70px;
    margin: 0;
    z-index: 3;
}
/* Metrics readout bar pinned at the top in fullscreen (moved here from its
   normal in-flow slot, which the fixed overlay would otherwise cover). Opaque
   so the chart doesn't bleed through; right padding leaves room for the ✕. */
.payoff-chart-wrap.is-fullscreen .payoff-metrics-strip--fs {
    order: 0;
    flex: 0 0 auto;
    z-index: 4;
    margin: 0;
    padding: 6px calc(env(safe-area-inset-right) + 52px) 8px calc(env(safe-area-inset-left) + 12px);
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    /* Wrap freely so every metric stays visible (a single horizontal row can't
       fit them all on a phone, and scrolling just hid data). The chart below
       must NOT move as the row count changes — that's handled by reserving a
       fixed height on mobile (see media query) so the plot area is constant. */
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px 14px;
    align-items: flex-start;
}
/* Keep each metric at its natural width so labels never wrap into the value. */
.payoff-chart-wrap.is-fullscreen .payoff-metrics-strip--fs .payoff-metric { flex-shrink: 0; }
/* On phones the metrics wrap to 2–3 rows depending on how wide the numbers are.
   Reserve a constant height for the band so that varying row counts (during
   zoom / leg-drag, or as values grow/shrink) never resize the chart underneath
   — the plot stays put. Tall enough for the worst case (3 rows incl. the decay
   sparkline); scrolls within if it ever needs more. */
@media (max-width: 800px) {
    .payoff-chart-wrap.is-fullscreen .payoff-metrics-strip--fs {
        flex: 0 0 142px;
        height: 142px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
.payoff-chart-wrap.is-fullscreen .payoff-fs-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    right: calc(env(safe-area-inset-right) + 10px);
    z-index: 6;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    background: var(--glass);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    cursor: pointer;
}

/* ── DOM crosshair overlay (replaces canvas redraw on hover) ── */
.payoff-crosshair-overlay { position: absolute; inset: 0; pointer-events: none; }
/* Vertical + horizontal crosshair lines, spanning exactly the plot area (vars set
   per-frame from PAD/SVG so they track zoom / fullscreen). */
.payoff-crosshair-line {
    position: absolute;
    top: var(--plot-top, 15%);
    height: calc(var(--plot-bottom, 86%) - var(--plot-top, 15%));
    left: var(--crosshair-x);
    border-left: 1px dashed color-mix(in srgb, var(--text) 42%, transparent);
    transform: translateX(-0.5px);
}
.payoff-crosshair-line-h {
    position: absolute;
    top: var(--crosshair-y);
    left: var(--plot-left, 8%);
    right: var(--plot-right, 3%);
    border-top: 1px dashed color-mix(in srgb, var(--text) 42%, transparent);
    transform: translateY(-0.5px);
}
.payoff-crosshair-overlay.is-y-offplot .payoff-crosshair-line-h,
.payoff-crosshair-overlay.is-y-offplot .payoff-crosshair-ylabel { display: none; }
/* Price (X) and P&L (Y) chips pinned on the axes at the cursor. */
.payoff-crosshair-axlabel {
    position: absolute;
    padding: 1px 5px;
    border-radius: 4px;
    font: 600 10px var(--font-mono, monospace);
    white-space: nowrap;
    color: #fff;
    background: color-mix(in srgb, var(--text) 78%, transparent);
    z-index: 2;
}
.payoff-crosshair-xlabel { top: var(--plot-bottom, 86%); left: var(--crosshair-x); transform: translate(-50%, 3px); }
.payoff-crosshair-ylabel { top: var(--crosshair-y); left: var(--plot-left, 8%); transform: translate(calc(-100% - 4px), -50%); }
.payoff-crosshair-overlay.is-loss .payoff-crosshair-ylabel { background: var(--danger); }
.payoff-crosshair-dot { position: absolute; left: var(--crosshair-x); top: var(--crosshair-y); width: 9px; height: 9px; border: 2px solid rgba(255,255,255,0.7); border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
.payoff-crosshair-overlay.is-loss .payoff-crosshair-dot { background: var(--danger); }
.payoff-crosshair-tip { position: absolute; top: calc(var(--plot-top, 17%) + 6px); left: calc(var(--crosshair-x) + 10px); min-width: 128px; display: grid; gap: 3px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--input-bg); color: var(--muted); font: 500 11px var(--font-mono); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.payoff-crosshair-tip strong { color: var(--accent-text); font-size: 13px; }
.payoff-crosshair-overlay.is-loss .payoff-crosshair-tip strong { color: var(--danger); }
.payoff-crosshair-priceline { display: flex; align-items: baseline; gap: 6px; }
.payoff-crosshair-dist { font-size: 12px; font-weight: 700; color: var(--muted); }
.payoff-crosshair-dist.is-up   { color: var(--accent-text); }
.payoff-crosshair-dist.is-down { color: var(--danger); }
.payoff-crosshair-overlay.is-left .payoff-crosshair-tip { left: auto; right: calc(100% - var(--crosshair-x) + 10px); }

/* ── Strike markers ─────────────────────────────────────── */
.strike-dot {
    fill: var(--accent-text);
    opacity: 0.35;
    transition: opacity 120ms, r 120ms;
}
.strike-dot:hover {
    opacity: 0.85;
    r: 5;
}

/* ── Strike add popover ─────────────────────────────────── */
.strike-popover {
    position: absolute;
    z-index: 50;
    background: var(--glass);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.strike-popover-price {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--muted);
    text-align: center;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.strike-popover-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.strike-btn {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    background: var(--input-bg);
    color: var(--text);
    transition: background 120ms, border-color 120ms;
    white-space: nowrap;
}
.strike-btn:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
}
.strike-btn-call { color: var(--accent-text); }
.strike-btn-put  { color: var(--danger); }

/* ── Per-leg legend ─────────────────────────────────────── */
.payoff-leg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 8px 12px 4px;
}
.payoff-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}

/* ── Header actions group (right-aligned button cluster) ───── */
.payoff-hdr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Shared style for all three header buttons */
.payoff-hdr-btn {
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 4px 10px;
    height: 28px;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-control);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    border-color: var(--border-strong);
    transition: color 120ms, background 120ms, border-color 120ms;
}
.payoff-hdr-btn:hover {
    color: var(--text);
    background: var(--glass-hover);
}
.payoff-hdr-btn--active {
    color: var(--accent-text);
    border-color: var(--accent-dim);
    background: var(--accent-dim);
}
.payoff-hdr-btn--active:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: var(--accent);
}
.payoff-hdr-btn--danger {
    color: var(--danger);
    border-color: rgba(220,38,38,0.25);
}
.payoff-hdr-btn--danger:hover {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: var(--danger);
}
.payoff-hdr-btn--disabled,
.payoff-hdr-btn--disabled:hover {
    color: color-mix(in srgb, var(--text) 35%, transparent);
    border-color: var(--border);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Expiration segmented toggle */
.exp-seg-wrap {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    flex-shrink: 0;
}
.exp-seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 88px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    cursor: pointer;
    font-family: var(--font-mono);
    color: color-mix(in srgb, var(--text) 45%, transparent);
    transition: background 130ms, color 130ms, border-color 130ms;
    white-space: nowrap;
    line-height: 1;
    position: relative;
}
.exp-seg-btn:first-child {
    border-radius: 7px 0 0 7px;
}
.exp-seg-btn:last-child {
    border-radius: 0 7px 7px 0;
    margin-left: -1px;
}
.exp-seg-btn:hover:not(:disabled):not(.exp-seg-btn--active) {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 10%, transparent);
    z-index: 1;
}
.exp-seg-btn--active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
    cursor: default;
    z-index: 2;
}
.exp-seg-btn:disabled:not(.exp-seg-btn--active) {
    cursor: default;
    color: color-mix(in srgb, var(--text) 28%, transparent);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border-color: var(--border);
}
.exp-seg-label {
    font-size: 10px;
    letter-spacing: 0.01em;
}
.exp-seg-dte {
    font-size: 11px;
    font-weight: 600;
}
/* Approximate-curve warning: multi-exp with no IV source → intrinsic fallback */
.exp-seg-approx {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 0 8px;
    height: 100%;
    border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--border-strong));
    border-radius: 7px;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    color: color-mix(in srgb, #f59e0b 85%, var(--text));
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

/* Expired-leg handle badge */
.leg-handle--expired { opacity: 0.45; filter: grayscale(0.8); }
.leg-handle--hidden { opacity: 0.4; filter: grayscale(1); }
.leg-handle--hidden .leg-handle-label { text-decoration: line-through; }
.leg-handle--settled { outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 4px; }
.leg-handle-settled-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: #f59e0b;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    pointer-events: none;
}
.leg-handle-expired-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #888;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    pointer-events: none;
}

/* Expired note below handles row */
.payoff-expired-note {
    padding: 4px 12px 2px;
    font-size: 11px;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    border-top: 1px dashed var(--border);
}

/* Legend expired tag */
.legend-expired-tag {
    margin-left: 5px;
    font-size: 9px;
    font-weight: 600;
    color: #888;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    vertical-align: middle;
}
.payoff-leg-item--expired { opacity: 0.55; }

.payoff-svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-line {
    stroke: var(--text);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.85;
}

.payoff-svg {
    overflow: visible;
}

.chart-zero-line {
    stroke: color-mix(in srgb, var(--text) 34%, transparent);
    stroke-width: 0.8px;
}

.chart-grid-line {
    stroke: var(--border);
    stroke-width: 1px;
}

.chart-tick-line {
    stroke: var(--border-strong);
    stroke-width: 1px;
}

.chart-spot-line {
    stroke: var(--accent);
    stroke-width: 0.8px;
    opacity: 0.6;
}

.chart-spot-bg {
    fill: var(--accent-dim);
    stroke: rgba(34,197,94,0.4);
    stroke-width: 1px;
}

.chart-spot-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    fill: var(--accent-text);
}

.chart-tick {
    fill: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
}

/* Expected Move band + lines */
.chart-em-band {
    fill: rgba(99,102,241,0.07);
}
.chart-em-line {
    stroke: rgba(99,102,241,0.45);
    stroke-width: 1px;
    stroke-dasharray: 5,4;
}
.chart-em-label {
    fill: rgba(99,102,241,0.7);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
}

.payoff-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--muted);
    font-size: 13px;
    margin-top: 16px;
}

/* ── Draggable leg handles ──────────────────────────────── */
.payoff-leg-handles-row {
    position: relative;
    height: 70px;
    margin: 0 0 6px;
    /* Outside chart-wrap — sits directly below it */
}

.leg-handle {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    cursor: ew-resize;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    user-select: none;
    touch-action: none;
    z-index: 5;
}

.leg-handle-pip {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid var(--leg-color);
    flex-shrink: 0;
}

.leg-handle-label {
    background: var(--input-bg);
    border: 1.5px solid var(--leg-color);
    color: var(--leg-color);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    white-space: nowrap;
    cursor: ew-resize;
    transition: background 120ms, box-shadow 120ms;
    line-height: 1.4;
}

.leg-handle:hover .leg-handle-label,
.leg-handle.is-dragging .leg-handle-label {
    background: color-mix(in srgb, var(--leg-color) 15%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--leg-color) 30%, transparent);
}

.leg-handle--row1 { top: 36px; }

.leg-handle.is-dragging {
    z-index: 10;
}

/* ── Metrics strip ──────────────────────────────────────── */
.payoff-metrics-strip { display:flex; flex-wrap:wrap; gap:6px 18px; padding:8px 2px 4px; }
.payoff-metric { display:flex; flex-direction:column; gap:1px; min-height:36px; }
.payoff-metric-label { font-size:10px; color:color-mix(in srgb, var(--text) 55%, transparent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; height:14px; white-space:nowrap; }
.payoff-metric-value { font-size:13px; font-weight:600; font-family:var(--font-mono); color:var(--text); min-height:18px; }
.payoff-metric-value.pos { color:var(--accent-text); }
.payoff-metric-value.neg { color:var(--danger); }
.payoff-metric-sep { width:1px; background:var(--border); align-self:stretch; margin:2px 0; }

.payoff-greeks-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 5px 2px 6px;
    border-top: 1px solid var(--border);
}
.payoff-greek-label {
    font-size: 12px;
    font-family: var(--font-mono);
    font-style: italic;
    color: color-mix(in srgb, var(--text) 48%, transparent);
    letter-spacing: .02em;
}
.payoff-greek-value {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text);
    min-width: 52px;
}
.payoff-greek-value.pos { color: var(--accent-text); }
.payoff-greek-value.neg { color: var(--danger); }
.payoff-greek-unit {
    font-size: 9px;
    font-weight: 400;
    opacity: .6;
    margin-left: 1px;
}
.payoff-greeks-sep { width:1px; height:14px; background:var(--border); flex-shrink:0; }

/* ── Expiration pills row ───────────────────────────────── */
.payoff-exp-row {
    position: relative;
    padding: 6px 0 4px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}
/* Left-side axis labels — transparent column, no card.
   Uses flex with calibrated padding/gap to land each label in front of its row.
   Group layout (from padding-top:6):
     month-label ≈ 11px  →  gap 5  →  iv-track 22px  →  gap 5
     →  pill ≈ 36px  →  gap 3  →  liq-bar 3px
   IVx centre from column top: 6 + 11 + 5 + 11 = 33px
   Liq centre from column top: 33 + 11 + 5 + 36 + 3 + 1.5 ≈ 89px             */
.payoff-exp-axis-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 6px 5px 0 0;      /* same top-padding as month-group */
    gap: 0;
    /* spacer between IVx and Liq labels matches:
       ½iv-track(11) + gap(5) + iv-track-bottom(11) + gap(5) + pill(36) + gap(3) = 71px
       → IVx label height(~8) + margin-bottom = 71 → margin-bottom ≈ 63px         */
}
.payoff-exp-axis-ivx-label,
.payoff-exp-axis-liq-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    opacity: 0.55;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
/* IVx: "x" lowercase — override transform only for this label */
.payoff-exp-axis-ivx-label { text-transform: none; }
/* bottom edge of "IVx" text aligns with bottom of iv-track:
   padding-top(6) + month-label(11) + gap(5) + track(22) = 44px
   → margin-top = 44 − padding-top(6) − label-height(8) = 30px  */
.payoff-exp-axis-ivx-label { margin-top: 30px; }
/* gap to Liq: iv-track-bottom(44) + gap(5) + pill(36) + day-gap(3) + ½liq(1.5) = 89.5px
   Liq label top = 89.5 − ½label(4) = 85.5px
   margin-bottom = 85.5 − iv-track-bottom(44) = 41px              */
.payoff-exp-axis-ivx-label { margin-bottom: 41px; }
.payoff-exp-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    padding: 2px 20px 6px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
}
.payoff-exp-inner::-webkit-scrollbar { height: 3px; }
.payoff-exp-inner::-webkit-scrollbar-track { background: transparent; }
.payoff-exp-inner::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
/* ── Month-group container ──────────────────────────────── */
.payoff-exp-month-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    background: var(--metric-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 8px 7px;
}
.payoff-exp-month-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-align: center;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.payoff-exp-days {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    flex-wrap: nowrap;
    max-width: 100%;
}
/* Day pill + liq bar wrapper */
.payoff-exp-day-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    flex-shrink: 0;
}
/* Rectangular two-line pill */
.payoff-exp-pill {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px 6px 3px;
    font-family: var(--font-mono);
    cursor: pointer;
    background: var(--input-bg);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    transition: all 120ms;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 32px;
}
.exp-day-num { font-size: 12px; font-weight: 600; line-height: 1.15; }
.exp-day-dte { font-size: 9px; opacity: 0.7; line-height: 1.1; }
.payoff-exp-pill:hover { border-color: var(--accent); color: var(--accent-text); }
.payoff-exp-pill.is-active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
/* Liquidity bar under each day pill */
.payoff-exp-liq-bar {
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.85;
}
/* Week-boundary separator inside month group */
.payoff-exp-week-sep {
    width: 1px;
    min-height: 24px;
    background: var(--border-strong);
    flex-shrink: 0;
    align-self: stretch;
    opacity: 0.55;
    margin: 0 4px;
    border-radius: 1px;
}
/* Series type tag: W (weekly) / M (monthly 3rd Friday) — Fridays only */
.payoff-exp-series-tag {
    font-size: 7px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-align: center;
    color: var(--muted);
    opacity: 0.55;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.payoff-exp-series-tag.is-monthly {
    color: var(--accent-text);
    opacity: 1;
}
/* IVx term structure sparkline track — no inline labels, tooltip on hover */
.payoff-exp-iv-track {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 22px;
    flex-shrink: 0;
}
.payoff-exp-iv-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 32px;
    flex-shrink: 0;
    height: 100%;
}
/* CSS-only tooltip: shown on hover via data-iv attribute */
.payoff-exp-iv-col[data-iv]:hover::after {
    content: attr(data-iv);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-active, #fff);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 9px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.payoff-exp-iv-col.is-anomaly[data-iv]:hover::after {
    color: #f97316;
    border-color: #f97316;
}
.payoff-exp-iv-fill {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    flex-shrink: 0;
    transition: background 120ms;
}
.payoff-exp-iv-col.is-up .payoff-exp-iv-fill {
    background: #22c55e;
    opacity: 0.72;
}
.payoff-exp-iv-col.is-down .payoff-exp-iv-fill,
.payoff-exp-iv-col.is-anomaly .payoff-exp-iv-fill {
    background: #f97316;
    opacity: 0.9;
}
.payoff-exp-iv-col.is-flat .payoff-exp-iv-fill {
    background: #facc15;
    opacity: 0.75;
}
.payoff-add-leg-btn { margin-left:auto; border:1px solid var(--accent); border-radius:6px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; background:var(--accent-dim); color:var(--accent-text); transition:background 120ms, box-shadow 120ms; white-space:nowrap; }
.payoff-add-leg-btn:hover, .payoff-add-leg-btn.is-open { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--accent-glow); }

/* ── Add leg inline form ────────────────────────────────── */
.payoff-add-leg-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:6px 8px; padding:8px 10px; background:var(--glass); border:1px solid var(--border); border-radius:10px; margin-bottom:6px; }
.payoff-form-group { display:flex; flex-direction:column; gap:2px; }
.payoff-form-label { font-size:10px; color:color-mix(in srgb, var(--text) 55%, transparent); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); }
.payoff-form-toggle { display:flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; height:34px; }
.payoff-form-toggle button { border:none; padding:0 10px; font-size:12px; font-weight:500; cursor:pointer; background:var(--input-bg); color:color-mix(in srgb, var(--text) 60%, transparent); transition:background 100ms, color 100ms; height:100%; }
.payoff-form-toggle button.is-active { background:var(--accent-dim); color:var(--accent-text); font-weight:600; }
.payoff-form-select, .payoff-form-qty { border:1px solid var(--border-strong); border-radius:6px; padding:5px 8px; font-size:12px; background:var(--input-bg); color:var(--text); font-family:var(--font-mono); box-sizing:border-box; height:34px; }
.payoff-form-qty { width:52px; text-align:center; }
.payoff-form-add-btn { border:none; border-radius:6px; padding:0 14px; font-size:12px; font-weight:600; cursor:pointer; background:var(--accent); color:#fff; transition:background 120ms; box-sizing:border-box; height:34px; }
.payoff-form-add-btn:hover { background:#15803d; }
.payoff-form-add-btn:disabled { opacity:.45; cursor:not-allowed; }
.payoff-form-delta-input { width:62px; }

/* ── Stock / underlying leg row ──────────────────────────────── */
.payoff-stock-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 10px; margin-bottom:6px; background:var(--glass); border:1px solid var(--border); border-radius:10px; }
.payoff-stock-row-label { font-size:10px; color:color-mix(in srgb, var(--text) 55%, transparent); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); }
.payoff-stock-chips { display:flex; flex-wrap:wrap; gap:6px; }
.payoff-stock-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-strong); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:600; font-family:var(--font-mono); cursor:pointer; background:var(--input-bg); color:var(--text); transition:border-color 120ms, background 120ms; }
.payoff-stock-chip:hover { border-color:var(--leg-color, var(--accent)); }
.payoff-stock-chip-dot { width:8px; height:8px; border-radius:50%; background:var(--leg-color, var(--accent)); flex-shrink:0; }
.payoff-stock-chip.is-short .payoff-stock-chip-dot { box-shadow:inset 0 0 0 2px var(--card-bg); }
.payoff-stock-add { display:flex; align-items:center; gap:6px; margin-left:auto; min-width:0; }
.payoff-stock-qty { width:58px; min-width:0; }
/* min-width:0 lets the inputs shrink so the whole "Long/Short · qty · price ·
   + Акция" group stays on one row inside the block instead of overflowing. */
.payoff-stock-price { border:1px solid var(--border-strong); border-radius:6px; padding:5px 8px; font-size:12px; background:var(--input-bg); color:var(--text); font-family:var(--font-mono); box-sizing:border-box; height:34px; width:96px; min-width:0; }
.payoff-stock-add-btn { white-space:nowrap; }

/* Click-to-edit popover for an existing stock leg */
.payoff-stock-edit { z-index:400; display:flex; flex-direction:column; gap:8px; min-width:200px; padding:12px; background:var(--card-bg); border:1px solid var(--border-strong); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.22); }
.payoff-stock-edit-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:color-mix(in srgb, var(--text) 60%, transparent); font-family:var(--font-mono); }
.payoff-stock-edit-field { display:flex; flex-direction:column; gap:3px; font-size:11px; color:color-mix(in srgb, var(--text) 60%, transparent); font-family:var(--font-mono); }
.payoff-stock-edit-field input { border:1px solid var(--border-strong); border-radius:6px; padding:6px 8px; font-size:13px; background:var(--input-bg); color:var(--text); font-family:var(--font-mono); }
.payoff-stock-edit-actions { display:flex; justify-content:space-between; gap:8px; margin-top:2px; }
.payoff-stock-edit-save { border:none; border-radius:6px; padding:7px 16px; font-size:12px; font-weight:600; cursor:pointer; background:var(--accent); color:#fff; }
.payoff-stock-edit-save:hover { background:#15803d; }
.payoff-stock-edit-delete { border:1px solid var(--danger); border-radius:6px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; background:transparent; color:var(--danger); }
.payoff-form-delta-preview { gap:4px; }
.payoff-form-delta-strike { font-size:12px; font-family:var(--font-mono); font-weight:600; color:var(--text); display:flex; align-items:center; gap:5px; height:34px; }
.payoff-form-delta-val { font-size:10px; font-weight:500; color:var(--accent-text); background:var(--accent-dim); border-radius:4px; padding:1px 5px; }
.payoff-form-close-btn { border:none; padding:5px 8px; border-radius:6px; cursor:pointer; background:transparent; color:var(--muted); font-size:16px; transition:color 100ms; margin-left:auto; }
.payoff-form-close-btn:hover { color:var(--danger); }

/* ── Leg handle context menu ────────────────────────────── */
.leg-ctx-menu {
    position: fixed;
    /* Above the fullscreen chart overlay (z-index 5000) so the menu opened from
       an overlaid leg handle is visible in fullscreen too. */
    z-index: 6000;
    min-width: 360px;
    max-width: 420px;
    background: var(--glass);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: ctx-appear 100ms ease;
}
@keyframes ctx-appear {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.leg-ctx-title {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--muted);
    padding: 2px 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ── Qty stepper + switch buttons in one row ── */
.leg-ctx-ctrl-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    margin-bottom: 2px;
}
.leg-ctx-qty-val {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text);
}
.leg-ctx-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms, border-color 100ms;
    flex-shrink: 0;
}
.leg-ctx-btn:hover:not(:disabled) {
    background: var(--glass-hover);
    border-color: var(--accent);
    color: var(--accent-text);
}
.leg-ctx-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.leg-ctx-ctrl-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 2px;
}
.leg-ctx-switch {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    white-space: nowrap;
    cursor: pointer;
    transition: background 100ms, border-color 100ms, color 100ms;
}
.leg-ctx-switch:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
    color: var(--accent-text);
}
/* ── Expiration strip: single scrollable row, grouped by month ── */
.leg-ctx-exp-strip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 2px 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    /* Must have explicit width to trigger overflow-x scroll */
    width: 0;
    min-width: 100%;
    cursor: grab;
    user-select: none;
}
.leg-ctx-exp-strip.is-dragging { cursor: grabbing; }
.leg-ctx-exp-strip::-webkit-scrollbar { height: 4px; }
.leg-ctx-exp-strip::-webkit-scrollbar-track { background: transparent; }
.leg-ctx-exp-strip::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
}
.leg-ctx-exp-month {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 1px;
    opacity: 0.7;
}
.leg-ctx-exp-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}
.leg-ctx-exp-pill {
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
    background: var(--input-bg);
    color: var(--text);
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms, border-color 100ms;
    white-space: nowrap;
    flex-shrink: 0;
}
.leg-ctx-exp-pill:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
    color: var(--accent-text);
}
.leg-ctx-exp-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* ── Footer row: hide (left) + delete (right) ── */
.leg-ctx-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.leg-ctx-action {
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--glass);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.leg-ctx-action:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
}
.leg-ctx-delete {
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid rgba(248,113,113,0.35);
    border-radius: var(--radius-control);
    background: var(--danger-dim);
    color: var(--danger);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.leg-ctx-delete:hover {
    background: rgba(248,113,113,0.18);
    border-color: rgba(220,38,38,0.55);
}
/* Colored words inside switch buttons */
.leg-ctx-sw-g { color: var(--accent-text); }
.leg-ctx-sw-r { color: var(--danger); }
/* ── Divider ── */
.leg-ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
/* ── Price + greeks: three-column info block ── */
.leg-ctx-info {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 2px 2px 6px;
}
.leg-ctx-mark-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--input-bg);
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 10px;
}
.leg-ctx-mark-val {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
    white-space: nowrap;
}
.leg-ctx-mark-lbl {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
/* Editable entry-price input inside the cost box */
.leg-ctx-entry-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
    -moz-appearance: textfield;
}
.leg-ctx-entry-input::-webkit-outer-spin-button,
.leg-ctx-entry-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.leg-ctx-entry-input:focus { outline: none; }
.leg-ctx-entry-mkt {
    align-self: flex-start;
    font: 600 10px var(--font-mono);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 5px;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.leg-ctx-entry-mkt:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.leg-ctx-theo-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 5px;
    opacity: 0.75;
    cursor: default;
}
.chain-mark-theo {
    color: var(--muted);
    font-style: italic;
}
.leg-ctx-ba-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    margin-right: 16px;
}
.leg-ctx-ba-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text);
}
.leg-ctx-ba-label {
    font-size: 10px;
    color: var(--muted);
    min-width: 22px;
}
.leg-ctx-greeks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    flex: 1;
    align-content: center;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text);
}
.leg-ctx-greek-lbl {
    color: var(--muted);
    margin-right: 3px;
    font-size: 10px;
}

/* Settle-at-price row inside context menu */
.leg-ctx-settle-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
}
.leg-ctx-settle-label {
    font-size: 11px;
    color: var(--text-muted, #888);
    white-space: nowrap;
    flex-shrink: 0;
}
.leg-ctx-settle-input {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
    outline: none;
    transition: border-color 150ms;
}
.leg-ctx-settle-input:focus { border-color: #f59e0b; }
.leg-ctx-settle-input--error { border-color: var(--danger) !important; }
.leg-ctx-settle-btn {
    padding: 3px 8px;
    border: 1px solid #f59e0b;
    border-radius: 5px;
    background: transparent;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms;
}
.leg-ctx-settle-btn:hover { background: rgba(245,158,11,0.12); }
.leg-ctx-settle-clear {
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 11px;
    cursor: pointer;
    transition: color 100ms, border-color 100ms;
}
.leg-ctx-settle-clear:hover { color: var(--danger); border-color: var(--danger); }

/* ─── Messages ────────────────────────────────────────────── */

.helper-text,
.empty-state {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.message { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.message-error { color: var(--danger); }

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    margin-right: 5px;
    vertical-align: middle;
}

.status-dot.ready   { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.status-dot.unavail { background: var(--danger); }

/* ─── Loading spinner ─────────────────────────────────────── */

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

.spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* ─── Summary PoP bar ─────────────────────────────────────── */

.summary-item-pop { gap: 6px; }

.pop-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pop-bar-wrap {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    position: relative;
    overflow: visible;
}

.pop-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.3s ease;
    max-width: 100%;
}

.pop-bar-50 {
    position: absolute;
    left: 50%;
    top: -3px;
    width: 1px;
    height: 12px;
    background: var(--muted);
    opacity: 0.5;
}

/* ─── Summary footer ──────────────────────────────────────── */

.summary-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.save-btn { width: 100%; justify-content: center; }

.save-hint {
    font-size: 11px;
    color: var(--muted);
}

/* ─── Modal ───────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modal-fade-in 180ms ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card {
    background: var(--glass);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-card), 0 32px 80px rgba(0,0,0,0.3);
    animation: modal-slide-in 200ms cubic-bezier(0.34,1.56,0.64,1);
}

/* Light theme: opaque white card */
:root .modal-card {
    background: rgba(255, 255, 255, 0.96);
}
[data-theme="dark"] .modal-card {
    background: rgba(12, 17, 32, 0.96);
}

@keyframes modal-slide-in {
    from { transform: scale(0.94) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

.modal-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.modal-desc {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.modal-input {
    width: 100%;
    font-size: 14px;
    padding: 11px 14px;
    margin-bottom: 16px;
}

.modal-input.input-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-dim);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

.modal-editing-hint {
    margin: 12px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 8px;
}

.modal-error {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--danger);
}

/* ─── Toast ───────────────────────────────────────────────── */

.sb-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 9100;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
    white-space: nowrap;
}

.sb-toast-success {
    background: var(--accent);
    color: #051a0d;
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* Neutral informational toast — longer text may wrap, so relax nowrap.
   Uses hardcoded dark-panel colors so it looks right in both light & dark theme
   (--text would be dark on dark background in light mode). */
.sb-toast-info {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38);
    white-space: normal;
    max-width: min(90vw, 420px);
    text-align: center;
    line-height: 1.35;
}

.sb-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Access control: locked blocks & masked values ───────────
   A premium block wrapped in .sb-locked is dimmed and overlaid with a lock
   for users whose role is below the required tier. The block stays in the DOM
   (so layout is stable and users see what they'd unlock) but is non-interactive.
   Admin-only blocks are NOT rendered in the DOM at all — handled in JS, not CSS. */

.sb-locked {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.sb-locked > :not(.sb-lock-overlay) {
    filter: blur(3px) grayscale(0.4);
    opacity: 0.55;
}

/* Soft frosted variant — used for small per-section locks inside the vol card.
   The content stays sharp-ish; the veil + backdrop blur do the "frosted glass"
   so it reads as a light teaser rather than a heavy black-out. */
.sb-locked--soft {
    border-radius: 12px;
    overflow: hidden;
}
.sb-locked--soft > :not(.sb-lock-overlay) {
    filter: none;
    opacity: 0.9;
}

.sb-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    pointer-events: auto;
    background: color-mix(in srgb, var(--surface, #0f1623) 35%, transparent);
    border-radius: inherit;
    cursor: pointer;
}

/* SVG padlock icon used in lock overlays. */
.sb-lock-svg {
    width: var(--sb-lock-icon-size, 28px);
    height: var(--sb-lock-icon-size, 28px);
    color: var(--accent, #16a34a);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(22, 163, 74, 0.35));
}
.sb-lock-overlay--compact .sb-lock-svg {
    --sb-lock-icon-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(22, 163, 74, 0.3));
}

/* Link-style CTA inside the compact overlay — only this is interactive. */
.sb-lock-cta--link {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent, #16a34a);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 2px;
    pointer-events: auto;
    transition: opacity 0.15s;
}
.sb-lock-cta--link:hover {
    opacity: 0.75;
}

/* Blank placeholder shown under a gated sub-block (no premium data rendered).
   It only reserves height — the frosted glass look lives on the overlay above. */
.sb-lock-skeleton {
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #16a34a) 5%, transparent),
        transparent 60%);
}

/* Frosted-glass overlay with film grain for small sub-blocks. No premium
   content is drawn underneath, so this is purely decorative: a translucent
   matte veil, a backdrop blur that frosts the card surface behind it, a soft
   edge highlight, and a fine SVG-noise grain layered on top for texture. */
.sb-lock-overlay--compact {
    gap: 6px;
    padding: 8px;
    cursor: default;
    color: var(--text, #0f172a);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent);
    background-color: color-mix(in srgb, var(--surface, #ffffff) 62%, transparent);
    /* Two layers: a fine noise grain over a soft diagonal sheen. */
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.22'/%3E%3C/svg%3E"),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.35),
            rgba(255, 255, 255, 0.05) 45%,
            rgba(255, 255, 255, 0.18));
    background-size: 140px 140px, 100% 100%;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sb-lock-overlay--compact .sb-lock-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text, #0f172a);
}

/* Dark theme: shift the glass veil darker and swap the diagonal sheen. */
[data-theme="dark"] .sb-lock-overlay--compact {
    background-color: color-mix(in srgb, var(--surface, #0f172a) 65%, transparent);
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.18'/%3E%3C/svg%3E"),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.01) 45%,
            rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sb-lock-overlay--compact .sb-lock-title {
    color: var(--text, #f1f5f9);
}

.sb-lock-overlay .sb-lock-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #f1f5f9);
}

.sb-lock-overlay .sb-lock-sub {
    font-size: 11px;
    color: var(--muted, #94a3b8);
    max-width: 220px;
    line-height: 1.35;
}

.sb-lock-overlay .sb-lock-cta {
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--accent, #16a34a);
    color: #051a0d;
    font-size: 12px;
    font-weight: 600;
}

/* A small inline masked value (e.g. a locked Greek shows 🔒 instead of a number). */
.sb-masked {
    color: var(--muted, #94a3b8);
    letter-spacing: 1px;
    cursor: help;
}

/* Role badge in the header. The explicit `display` below would otherwise
   override the HTML `hidden` attribute, leaving an empty chip for guests —
   so honor `hidden` explicitly. */
.sb-role-badge[hidden] {
    display: none;
}
.sb-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--muted);
    white-space: nowrap;
}
.sb-role-badge[data-role="admin"] {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
}
.sb-role-badge[data-role="paid"] {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
}

/* Admin-only auto-analysis card. */
.admin-card {
    border: 1px solid #a855f7;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15);
}
.admin-badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid #a855f7;
}
.admin-greeks-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0;
    font-family: var(--mono, monospace);
    font-size: 13px;
    color: var(--text);
}
.admin-notes {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}
.admin-empty {
    font-size: 12px;
    color: var(--muted);
}

/* ─── Auto-analysis UI ────────────────────────────────────── */

/* Mode picker */
.aa-mode-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 14px 0 16px;
}
.aa-picker-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aa-picker-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.aa-picker-pills {
    display: flex;
    gap: 4px;
}
.aa-pill {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}
.aa-pill:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--glass-hover);
}
.aa-pill--active {
    background: rgba(168, 85, 247, 0.18);
    border-color: #a855f7;
    color: #c084fc;
}
[data-theme="dark"] .aa-pill--active {
    background: rgba(168, 85, 247, 0.22);
}

/* Run row (auto + manual buttons side by side) */
.aa-run-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Auto-scan button */
.aa-auto-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid #22c55e;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.aa-auto-btn:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.22);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
.aa-auto-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Run button */
.aa-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid #a855f7;
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.aa-run-btn:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.22);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
.aa-run-btn--loading,
.aa-run-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/* Мульти-активный сканер: кнопка в aa-run-row + таблица результатов */
.aa-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid #0ea5e9;
    background: rgba(14, 165, 233, 0.12);
    color: #38bdf8;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.aa-scan-btn:hover:not(:disabled) {
    background: rgba(14, 165, 233, 0.22);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.aa-scan-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.aa-scan-build-btn {
    padding: 3px 12px;
    font-size: 12px;
    white-space: nowrap;
}
.aa-scan-skipped {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted, #888);
}
.aa-scan-note {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted, #888);
}
.aa-scan-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.aa-scan-sortable:hover {
    color: var(--accent, #38bdf8);
}

/* Spinner */
.aa-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(192, 132, 252, 0.3);
    border-top-color: #c084fc;
    border-radius: 50%;
    animation: aa-spin 0.65s linear infinite;
}
@keyframes aa-spin { to { transform: rotate(360deg); } }

/* Error */
.aa-error {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-control);
    border: 1px solid var(--danger);
    background: var(--danger-dim);
    color: var(--danger);
    font-size: 12px;
}

/* Rationale */
.aa-rationale {
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-control);
    background: var(--glass);
    border: 1px solid var(--border);
}

/* Recommendation card */
.aa-rec {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--glass);
}
.aa-rec--primary {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.06);
}
[data-theme="dark"] .aa-rec--primary {
    background: rgba(168, 85, 247, 0.09);
}

.aa-rec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.aa-rec-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.aa-rec-score {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--glass);
    border: 1px solid var(--border);
}
/* Shadow report (Фаза E): таблицы качества модели по срезам. */
/* Market access controls (admin toggle) */
.aa-market-ctrl {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.aa-market-ctrl-summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    list-style: none;
}
.aa-market-ctrl-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aa-mkt-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.aa-mkt-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.aa-mkt-toggle-label b {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.aa-mkt-toggle-sub {
    font-size: 11px;
    color: var(--muted);
}
.aa-mkt-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    padding: 0;
}
.aa-mkt-toggle--on  { background: var(--accent); }
.aa-mkt-toggle--off { background: var(--border-strong); }
.aa-mkt-toggle-knob {
    position: absolute;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
    display: block;
}
.aa-mkt-toggle--on  .aa-mkt-toggle-knob { left: 21px; }
.aa-mkt-toggle--off .aa-mkt-toggle-knob { left: 3px; }
.aa-mkt-load-btn {
    font-size: 12px;
    color: var(--accent-text);
    background: none;
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
}
.aa-mkt-error { font-size: 11px; color: var(--danger); }

.aa-shadow { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.aa-shadow-summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    list-style: none;
}
.aa-shadow-body { margin-top: 8px; }
.aa-shadow-totals { font-size: 12px; color: var(--text, #e5e7eb); margin-bottom: 10px; }
.aa-shadow-hint { color: var(--muted); font-weight: 400; font-size: 11px; }
.aa-shadow-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    margin: 10px 0 4px;
}
.aa-shadow-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.aa-shadow-table th {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    padding: 3px 6px;
    border-bottom: 1px solid var(--border);
}
.aa-shadow-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.aa-shadow-key { font-family: var(--font-mono); }
.aa-shadow-thin { opacity: 0.5; }
.aa-shadow-ok   { color: #22c55e; }
.aa-shadow-warn { color: #eab308; }
.aa-shadow-bad  { color: #ef4444; }
.aa-shadow-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.aa-shadow-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--accent, #6366f1);
    color: #fff;
    margin-left: 6px;
    vertical-align: middle;
}
.aa-shadow-progress { margin-bottom: 10px; }
.aa-shadow-progress-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
    margin-bottom: 4px;
}
.aa-shadow-progress-fill {
    height: 100%;
    background: var(--accent, #6366f1);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.aa-shadow-progress-fill--done { background: #22c55e; }
.aa-shadow-progress-label { font-size: 11px; color: var(--muted); }
.aa-shadow-load {
    margin-top: 8px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text, #e5e7eb);
    cursor: pointer;
}
.aa-shadow-load:hover { border-color: var(--accent, #6366f1); }

/* Trade thesis banner (Фаза C): глобальная торговая гипотеза анализа. */
.aa-thesis {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-md, 8px);
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--glass);
}
.aa-thesis--high { border-left-color: #22c55e; }
.aa-thesis--mid  { border-left-color: #eab308; }
.aa-thesis--low  { border-left-color: #ef4444; }
.aa-thesis-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.aa-thesis-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.aa-thesis-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #e5e7eb);
}
.aa-thesis-conf {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    margin-left: auto;
}
.aa-thesis-conf--high { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); color: #22c55e; }
.aa-thesis-conf--mid  { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.4); color: #eab308; }
.aa-thesis-conf--low  { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; }
.aa-thesis-reasons {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--muted);
}
.aa-thesis-reasons li { margin: 2px 0; }

/* Decision Engine v2 (этап B#2/F): условия слома тезиса — свёрнуто по умолчанию. */
.aa-thesis-invalidation {
    margin-top: 8px;
    font-size: 12px;
}
.aa-thesis-invalidation summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
}
.aa-thesis-invalidation-list {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--muted);
}
.aa-thesis-invalidation-list li { margin: 2px 0; }

/* Decision Engine v2 (этап D/F): рекомендации показаны, но confidence средняя —
   визуально отличается от обычного aa-thesis (жёлтая, не привязана к тезису). */
.aa-analysis-only {
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-left-width: 3px;
    border-left-color: #eab308;
    border-radius: var(--radius-md, 8px);
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(234, 179, 8, 0.08);
}
.aa-analysis-only-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #e5e7eb);
}
.aa-analysis-only-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

/* Confidence chip (Фаза B): надёжность оценки, отдельно от score. */
.aa-rec-conf {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: help;
}
.aa-rec-conf--high {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}
.aa-rec-conf--mid {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.4);
    color: #eab308;
}
.aa-rec-conf--low {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}
.aa-risk-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.aa-risk-badge--defined {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--accent);
}
.aa-risk-badge--naked {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.4);
    color: #fb923c;
}

/* P2.7 best/safest/cheapest badges */
.aa-rec-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.aa-rec-badge--best     { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); color: #c084fc; }
.aa-rec-badge--safest   { background: rgba(34, 197, 94, 0.12);  border-color: rgba(34, 197, 94, 0.4);  color: var(--accent); }
.aa-rec-badge--cheapest { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.4); color: #38bdf8; }

/* P2.6 profile description */
.aa-rec-profile-desc {
    font-size: 11px;
    color: var(--muted);
    margin: -6px 0 10px;
    line-height: 1.4;
}

/* P2.1 rationale / P2.2 risks collapsible blocks */
.aa-rec-rationale,
.aa-rec-risks {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.aa-rec-rationale > summary,
.aa-rec-risks > summary {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--glass);
}
.aa-rec-rationale > summary::-webkit-details-marker,
.aa-rec-risks > summary::-webkit-details-marker { display: none; }
.aa-rec-rationale > summary::before,
.aa-rec-risks > summary::before { content: '▶ '; font-size: 9px; display: inline-block; transition: transform 140ms; }
details[open].aa-rec-rationale > summary::before,
details[open].aa-rec-risks > summary::before { transform: rotate(90deg); }
.aa-rec-rationale-list,
.aa-rec-risks-list {
    margin: 0;
    padding: 8px 12px 8px 24px;
    font-size: 11px;
    color: var(--text);
    opacity: 0.85;
    line-height: 1.6;
}
.aa-rec-risks-list li { color: #fb923c; opacity: 1; }

/* Phase 4: roll-strategy section (mirrors rationale/risks <details>) */
.aa-rec-roll {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.aa-rec-roll > summary {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--glass);
    display: flex;
    align-items: center;
    gap: 8px;
}
.aa-rec-roll > summary::-webkit-details-marker { display: none; }
.aa-rec-roll > summary::before { content: '▶ '; font-size: 9px; display: inline-block; transition: transform 140ms; }
details[open].aa-rec-roll > summary::before { transform: rotate(90deg); }
.aa-roll-mode {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(125, 211, 252, 0.14);
    color: #7dd3fc;
    text-transform: lowercase;
}
.aa-roll-body { padding: 10px 12px; font-size: 11px; }
.aa-roll-desc { margin: 0 0 8px; color: var(--text); opacity: 0.9; line-height: 1.5; }
.aa-roll-params {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    color: var(--text);
    opacity: 0.85;
    margin-bottom: 8px;
}
.aa-roll-params b { opacity: 1; }
.aa-roll-regime {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--border);
}
.aa-roll-regime--backwardation { color: var(--accent); border-color: rgba(74, 222, 128, 0.4); }
.aa-roll-regime--contango      { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); }
.aa-roll-regime--flat          { color: var(--text); opacity: 0.7; }
.aa-roll-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 0;
}
.aa-roll-metric-label { color: var(--text); opacity: 0.7; }
.aa-roll-metric-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.aa-roll-sim {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.aa-roll-sim-title { font-weight: 600; margin-bottom: 6px; opacity: 0.9; }
.aa-roll-sim-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
}
.aa-roll-pcts { margin-top: 6px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.aa-roll-notes {
    margin: 8px 0 0;
    padding: 0 0 0 18px;
    color: #fbbf24;
    line-height: 1.5;
}
.aa-roll-notes li { margin: 2px 0; }

/* Metrics row */
.aa-metrics-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.aa-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}
.aa-metric-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    opacity: 0.72;
}
.aa-metric-val {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
}
.aa-metric-val--green { color: var(--accent); }
.aa-metric-val--red   { color: var(--danger); }
.aa-metric-val--warn  { color: #f59e0b; }
.aa-metric-val--prob  { font-weight: 700; letter-spacing: 0.01em; }
.aa-ladder-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    vertical-align: middle;
    cursor: help;
}

/* Net greeks row */
.aa-greeks-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    opacity: 0.80;
}
.aa-greeks-row b { color: var(--text); opacity: 1; }

/* Legs table */
.aa-legs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 14px;
}
.aa-legs-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.aa-legs-table th {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.aa-legs-table tr:last-child td { border-bottom: none; }
.aa-legs-num   { color: var(--muted); width: 22px; }
.aa-legs-side  { font-weight: 600; }
.aa-legs-side--long  { color: var(--accent); }
.aa-legs-side--short { color: var(--danger); }
.aa-legs-strike { font-family: var(--font-mono); }
.aa-legs-exp    { color: var(--text); opacity: 0.72; }
.aa-legs-price  { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.aa-legs-spread { font-size: 10px; opacity: 0.6; }

/* Build button */
.aa-build-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}
.aa-build-btn:hover {
    background: rgba(34, 197, 94, 0.20);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.aa-build-btn--alt {
    font-size: 11px;
    padding: 5px 12px;
    opacity: 0.85;
}

/* Alternatives */
.aa-alts {
    margin-bottom: 12px;
}
.aa-alts-summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
    user-select: none;
}
.aa-alts-summary::-webkit-details-marker { display: none; }
.aa-alts-summary::before {
    content: '▶ ';
    font-size: 10px;
    transition: transform 150ms ease;
    display: inline-block;
}
details[open] .aa-alts-summary::before { transform: rotate(90deg); }
.aa-alts-body { margin-top: 8px; }

/* Scenarios section */
.aa-scenarios {
    margin-top: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-radius: var(--radius);
    overflow: hidden;
}
.aa-scenarios-summary {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.07);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.aa-scenarios-summary::-webkit-details-marker { display: none; }
.aa-scenarios-summary::before {
    content: '▶';
    font-size: 9px;
    transition: transform 140ms ease;
    display: inline-block;
}
details[open].aa-scenarios .aa-scenarios-summary::before { transform: rotate(90deg); }
.aa-scenarios-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
}
@media (max-width: 640px) {
    .aa-scenarios-body { grid-template-columns: 1fr; }
}

/* Individual scenario card */
.aa-scenario {
    background: var(--card-bg);
    padding: 12px 14px;
}
.aa-scenario--continuation { border-top: 2px solid #22c55e; }
.aa-scenario--defense      { border-top: 2px solid #f97316; }
.aa-scenario--partial_exit { border-top: 2px solid #38bdf8; }

.aa-scenario-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.aa-scenario-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.aa-scenario-badge--continuation { background: rgba(34,197,94,.15); color: #4ade80; }
.aa-scenario-badge--defense      { background: rgba(249,115,22,.15); color: #fb923c; }
.aa-scenario-badge--partial_exit { background: rgba(56,189,248,.15); color: #38bdf8; }
.aa-scenario--delta_hedge         { border-top: 2px solid #a78bfa; }
.aa-scenario-badge--delta_hedge   { background: rgba(167,139,250,.15); color: #a78bfa; }

/* Дельта-хедж */
.aa-dh-figures {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text);
    opacity: 0.85;
    margin-top: 6px;
}
.aa-dh-figures b { color: var(--text); opacity: 1; }
.aa-dh-hint {
    font-size: 11px;
    color: var(--text-dim, #94a3b8);
    margin-top: 8px;
    line-height: 1.5;
}
.aa-dh-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid #a78bfa;
    background: rgba(167, 139, 250, 0.10);
    color: #a78bfa;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 140ms ease;
}
.aa-dh-add-btn:hover {
    background: rgba(167, 139, 250, 0.20);
}

/* Лесенка к безубытку */
.aa-legs-qty {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    background: rgba(56,189,248,.18);
    color: #38bdf8;
}
.aa-pe-free {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(34,197,94,.15);
    color: #4ade80;
}
/* Частичный возврат себестоимости (cost_recovery) — янтарный, отличается от
   зелёного free-trade, чтобы «отбито 60%» не читалось как «бесплатно». */
.aa-pe-recover {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(245,158,11,.15);
    color: #fbbf24;
}
.aa-pe-figures {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text);
    opacity: 0.80;
    margin-top: 6px;
}
.aa-pe-figures b { color: var(--text); opacity: 1; }

.aa-scenario-trigger {
    font-size: 12px;
    color: var(--text);
}
.aa-scenario-label {
    font-size: 11px;
    color: var(--text);
    opacity: 0.75;
    margin-left: auto;
    font-style: italic;
}
.aa-scenario-narrative {
    font-size: 12px;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.5;
}
.aa-scenario-greeks {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text);
    opacity: 0.80;
    margin-bottom: 6px;
}
.aa-scenario-greeks b { color: var(--text); opacity: 1; }

.aa-scenario-empty {
    font-size: 12px;
    color: var(--text);
    opacity: 0.72;
    font-style: italic;
    margin: 4px 0;
}

.aa-scenario-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(99,102,241,0.5);
    background: rgba(99,102,241,0.10);
    color: #a5b4fc;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}
.aa-scenario-add-btn:hover {
    background: rgba(99,102,241,0.20);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.20);
}
.aa-scenario-build-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin-top: 8px;
    margin-right: 6px;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 140ms ease;
}
.aa-scenario-build-btn--continuation {
    border: 1px solid rgba(34,197,94,0.6);
    background: rgba(34,197,94,0.12);
    color: #4ade80;
}
.aa-scenario-build-btn--continuation:hover {
    background: rgba(34,197,94,0.22);
    box-shadow: 0 0 0 2px rgba(34,197,94,0.20);
}
.aa-scenario-build-btn--defense {
    border: 1px solid rgba(249,115,22,0.6);
    background: rgba(249,115,22,0.12);
    color: #fb923c;
}
.aa-scenario-build-btn--defense:hover {
    background: rgba(249,115,22,0.22);
    box-shadow: 0 0 0 2px rgba(249,115,22,0.20);
}
.aa-scenario-add-btn--secondary {
    opacity: 0.75;
    font-size: 10px;
    padding: 4px 10px;
}
.aa-scenario-trigger-detail {
    font-size: 11px;
    color: var(--text);
    opacity: 0.75;
    margin: 4px 0 6px;
}
.aa-trigger-reasons {
    font-size: 10px;
    opacity: 0.65;
}
.aa-prob-refresh {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    opacity: 0.55;
    padding: 0 2px;
    line-height: 1;
    color: var(--text);
    vertical-align: middle;
}
.aa-prob-refresh:hover { opacity: 1; }
.aa-prob-refresh:disabled { cursor: wait; opacity: 0.3; }
.aa-prob-refreshed { color: #4f46e5; }

/* Multi-option scenario cards */
.aa-scenario-opt {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
}
.aa-scenario-opt--primary {
    border-color: rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.05);
}
.aa-scenario-opt--mechanics {
    opacity: 0.65;
}
.aa-opt-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.aa-opt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.aa-opt-action-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.aa-opt-action-badge--add      { background: rgba(34,197,94,.15);  color: #4ade80; }
.aa-opt-action-badge--none     { background: rgba(148,163,184,.12); color: #94a3b8; }
.aa-opt-action-badge--roll     { background: rgba(234,179,8,.15);   color: #fbbf24; }
.aa-opt-action-badge--convert  { background: rgba(168,85,247,.15);  color: #c084fc; }
.aa-opt-action-badge--close_loser { background: rgba(239,68,68,.15); color: #f87171; }
.aa-opt-action-badge--mechanics { background: rgba(234,179,8,.12);  color: #fbbf24; }
.aa-opt-unprotected {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: rgba(249,115,22,.15);
    color: #fb923c;
}
.aa-opt-mechanics {
    font-size: 10px;
    color: var(--text);
    opacity: 0.55;
    font-style: italic;
}
.aa-opt-metrics {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text);
    opacity: 0.82;
    margin-bottom: 6px;
}
.aa-opt-metrics b { color: var(--text); opacity: 1; }
.aa-metric-val--pos { color: #4ade80; }
.aa-metric-val--neg { color: #f87171; }

/* "More options" collapsible */
.aa-opts-more {
    margin-top: 8px;
}
.aa-opts-more-summary {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.70;
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
    user-select: none;
}
.aa-opts-more-summary::-webkit-details-marker { display: none; }
.aa-opts-more-summary::before {
    content: '▶ ';
    font-size: 9px;
    transition: transform 120ms ease;
    display: inline-block;
}
details[open].aa-opts-more .aa-opts-more-summary::before { transform: rotate(90deg); }
.aa-opts-more-summary:hover { opacity: 1; }
.aa-opts-more-body { padding-top: 2px; }

/* Comparison table */
.aa-comparison { margin-top: 8px; }
.aa-comparison-summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    padding: 4px 0;
}
.aa-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 6px;
}
.aa-cmp-table th {
    text-align: left;
    color: var(--text);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.aa-cmp-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-light, var(--border));
    color: var(--text);
}
.aa-cmp-label { font-weight: 600; font-size: 11px; }
.aa-cmp-label small { font-weight: 400; opacity: 0.7; }
.aa-cmp-val { font-variant-numeric: tabular-nums; }
.aa-cmp-val--red { color: var(--danger, #ef4444); }
.aa-cmp-base td { background: rgba(99,102,241,0.06); }

/* Meta footer */
.aa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 11px;
    color: var(--text);
    opacity: 0.72;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* A3 — Rejected-families "why not?" block */
.aa-rej-families {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.aa-rej-summary {
    cursor: pointer;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    list-style: none;
    user-select: none;
}
.aa-rej-summary::-webkit-details-marker { display: none; }
.aa-rej-summary::before { content: '▶ '; font-size: 9px; opacity: .6; }
details.aa-rej-families[open] .aa-rej-summary::before { content: '▼ '; }
.aa-rej-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.aa-rej-table td {
    padding: 5px 10px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}
.aa-rej-fam {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.aa-rej-reason { color: var(--text-muted); }
.aa-rej-score { text-align: right; white-space: nowrap; }
.aa-rej-score-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border-radius: 3px;
    padding: 1px 5px;
}
.aa-rej-score-none { color: var(--text-muted); opacity: .4; }

/* Per-family candidate diagnostics (admin "why-not-selected") */
.aa-diag { margin-top: 10px; }
.aa-diag-summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    padding: 6px 0;
    user-select: none;
}
.aa-diag-totals {
    font-weight: 400;
    opacity: 0.6;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.aa-diag-body { overflow-x: auto; }
.aa-diag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.aa-diag-table th,
.aa-diag-table td {
    padding: 4px 8px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.aa-diag-table th:first-child,
.aa-diag-table td:first-child { text-align: left; }
.aa-diag-table th {
    font-weight: 600;
    opacity: 0.7;
    border-bottom: 1px solid var(--border);
}
.aa-diag-fam { font-weight: 600; }
.aa-diag-out { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.aa-diag-why td {
    text-align: left;
    font-size: 10px;
    opacity: 0.66;
    padding-top: 2px;
    border-bottom: 1px solid var(--border);
}

/* Result area */
.aa-result { margin-top: 4px; }
.aa-no-result {
    font-size: 12px;
    color: var(--text);
    opacity: 0.72;
    padding: 8px 0;
}

/* 7.1 Position-class badge in rec header */
.aa-pc-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--text);
    opacity: .85;
}
.aa-pc-badge--directional  { background: #dbeafe; color: #1d4ed8; }
.aa-pc-badge--long-vol     { background: #dcfce7; color: #15803d; }
.aa-pc-badge--short-vol    { background: #fee2e2; color: #b91c1c; }
.aa-pc-badge--complex-neutral { background: #f3f4f6; color: #374151; }
.aa-pc-badge--spread-bull  { background: #d1fae5; color: #065f46; }
.aa-pc-badge--spread-bear  { background: #fce7f3; color: #9d174d; }
.aa-pc-badge--custom       { background: #f3f4f6; color: #6b7280; }

/* 7.2 Vol edge pill (between rationale and primary rec) */
.aa-vol-edge-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: default;
}
.aa-vol-edge-pill--expensive { background: #fee2e2; color: #b91c1c; }
.aa-vol-edge-pill--cheap     { background: #dcfce7; color: #15803d; }

/* 7.4 NO_TRADE screen */
.aa-no-trade {
    padding: 20px 0 12px;
    text-align: center;
}
.aa-no-trade-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 8px;
    opacity: .7;
}
.aa-no-trade-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}
.aa-no-trade-reasons-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text);
    opacity: .65;
    margin-bottom: 4px;
}
.aa-no-trade-reasons {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aa-no-trade-reasons li {
    font-size: 12px;
    color: var(--text);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-radius: 6px;
    padding: 5px 10px;
    text-align: left;
}
.aa-no-trade-diag {
    font-size: 11px;
    color: var(--text);
    opacity: .6;
    margin-bottom: 10px;
}
.aa-no-trade-hint {
    font-size: 11px;
    color: var(--text);
    opacity: .5;
    font-style: italic;
    margin-top: 8px;
}
.aa-rationale--dim { opacity: .65; font-style: italic; }

/* Data-quality variant: amber warning tone instead of neutral */
.aa-no-trade--data-quality .aa-no-trade-icon { opacity: 1; }
.aa-no-trade--data-quality .aa-no-trade-title { color: #b45309; }
.aa-no-trade--data-quality .aa-no-trade-reasons li {
    background: color-mix(in srgb, #b45309 8%, transparent);
    border-left: 2px solid color-mix(in srgb, #b45309 40%, transparent);
}
[data-theme="dark"] .aa-no-trade--data-quality .aa-no-trade-title { color: #fbbf24; }
[data-theme="dark"] .aa-no-trade--data-quality .aa-no-trade-reasons li {
    background: color-mix(in srgb, #fbbf24 10%, transparent);
    border-left-color: color-mix(in srgb, #fbbf24 35%, transparent);
}

/* Header right (gear + badge) */
.aa-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aa-gear {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
    transition: all 150ms ease;
}
.aa-gear:hover {
    color: #c084fc;
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
    transform: rotate(45deg);
}

/* ─── Analyzer settings modal (Phase 2.5) ─────────────────── */

.aas-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: aas-fade 140ms ease;
}
@keyframes aas-fade { from { opacity: 0; } to { opacity: 1; } }

.aas-modal {
    width: min(720px, 100%);
    max-height: min(85vh, 820px);
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.aas-loading {
    padding: 48px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.aas-loading--err { color: var(--danger); }

.aas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.aas-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}
.aas-version {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}
.aas-close {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 120ms ease;
}
.aas-close:hover { color: var(--text); background: var(--glass-hover); }

.aas-scroll {
    overflow-y: auto;
    padding: 8px 22px 16px;
    flex: 1;
}

.aas-group { margin: 16px 0; }
.aas-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
}
.aas-group-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgba(168, 85, 247, 0.16);
    color: #c084fc;
    border: 1px solid #a855f7;
}
.aas-group-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}

.aas-field {
    padding: 8px 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
    background: var(--metric-bg);
}
.aas-field--changed {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.06);
}
.aas-field-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.aas-field-label {
    font-size: 12px;
    color: var(--text);
    line-height: 1.3;
}
.aas-field-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 16px;
}
.aas-unit, .aas-range {
    font-size: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
}
.aas-field-reset {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #c084fc;
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 0;
}
.aas-field-reset:hover { text-decoration: underline; }

.aas-num {
    width: 84px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
}
.aas-num:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--input-bg-focus);
}

/* Toggle switch */
.aas-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.aas-switch input { opacity: 0; width: 0; height: 0; }
.aas-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: var(--tabs-bg);
    border: 1px solid var(--border);
    transition: all 150ms ease;
}
.aas-switch-track::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: var(--muted);
    transition: all 150ms ease;
}
.aas-switch input:checked + .aas-switch-track {
    background: var(--accent-dim);
    border-color: var(--accent);
}
.aas-switch input:checked + .aas-switch-track::before {
    transform: translateX(16px);
    background: var(--accent);
}

.aas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--glass);
}
.aas-footer-right { display: flex; gap: 8px; }
.aas-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}
.aas-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aas-btn--ghost { color: var(--muted); }
.aas-btn--ghost:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.aas-btn--primary:not(:disabled) {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
}
.aas-btn--primary:hover:not(:disabled) { background: rgba(168, 85, 247, 0.24); }
.aas-btn--accent:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}
.aas-btn--accent:hover:not(:disabled) { background: rgba(34, 197, 94, 0.20); }
.aas-btn--sm { padding: 5px 11px; font-size: 12px; }

/* Profiles toolbar */
.aas-profiles {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--glass);
}
.aas-profiles-spacer { flex: 1; }
.aas-profile-select {
    padding: 6px 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    min-width: 150px;
}
.aas-profile-select:focus { outline: none; border-color: var(--accent); }

/* Audit log */
.aas-audit { margin: 16px 0 4px; border-top: 1px solid var(--border); padding-top: 12px; }
.aas-audit-summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.aas-audit-summary::-webkit-details-marker { display: none; }
.aas-audit-summary::before {
    content: '▶ ';
    font-size: 10px;
    display: inline-block;
    transition: transform 150ms ease;
}
details[open] .aas-audit-summary::before { transform: rotate(90deg); }
.aas-audit-body { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.aas-audit-hint { font-size: 12px; color: var(--muted); padding: 6px 0; }
.aas-audit-row {
    display: grid;
    grid-template-columns: 86px 1fr auto auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--metric-bg);
    font-size: 11px;
}
.aas-audit-action {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c084fc;
}
.aas-audit-action--reset { color: #fb923c; }
.aas-audit-action--profile_delete { color: var(--danger); }
/* Decision Engine v2 (этап F): decision-audit-log verdict color, same palette
   as .aa-thesis-conf--high/mid/low. */
.aas-audit-action--good { color: #22c55e; }
.aas-audit-action--mid  { color: #eab308; }
.aas-audit-action--risk { color: #ef4444; }
.aas-audit-detail {
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-word;
}
.aas-audit-who { color: var(--muted); }
.aas-audit-when { color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }

@media (max-width: 560px) {
    .aas-group-fields { grid-template-columns: 1fr; }
    .aas-footer { flex-direction: column; align-items: stretch; }
    .aas-footer-right { flex-direction: column; }
    .aas-audit-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── Theme toggle ────────────────────────────────────────── */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--glass);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.theme-toggle:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

/* "Мои стратегии" in the locked / guest state */
.theme-toggle.is-gated {
    border-color: color-mix(in srgb, var(--accent, #16a34a) 40%, var(--border));
    color: var(--accent, #16a34a);
    opacity: 0.72;
    position: relative;
}
.theme-toggle.is-gated:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--accent, #16a34a) 8%, var(--glass));
    border-color: var(--accent, #16a34a);
    color: var(--accent, #16a34a);
}

.theme-toggle-icon {
    font-size: 15px;
    line-height: 1;
}

/* Smooth theme transition */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* But don't slow down interactive elements */
.button, .input, .asset-tab, .preset-btn, .chain-leg-btn {
    transition: all 140ms ease;
}

/* ─── Payoff sliders ──────────────────────────────────────── */

.payoff-sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--metric-bg);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-row-hidden { display: none; }

.slider-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    /* fixed width keeps both slider tracks exactly the same length */
    width: 118px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.payoff-range {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-strong);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.payoff-range:disabled { opacity: 0.35; cursor: not-allowed; }

.payoff-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    cursor: pointer;
    transition: box-shadow 120ms ease;
}
.payoff-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px var(--accent-glow);
}
.payoff-range::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    cursor: pointer;
}

.slider-badge {
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
/* Fixed equal widths keep all slider tracks the same length */
#dte-badge, #iv-badge, #zoom-badge { width: 158px; }

.slider-badge-exp    { color: var(--muted); }
.slider-badge-active { color: var(--accent-text); }

.slider-reset-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    /* always takes space — visibility toggled instead of display */
    flex-shrink: 0;
    transition: color 120ms ease;
}
.slider-reset-btn:hover { color: var(--text); }

/* ─── Theta-decay sparkline in the payoff metrics strip ────── */

.payoff-decay-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.payoff-decay-theta {
    margin-left: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.payoff-decay-theta.pos { color: var(--accent-text); }
.payoff-decay-theta.neg { color: var(--danger); }

.payoff-decay-spark {
    position: relative;
    width: 110px;
    height: 18px;
    cursor: crosshair;
}

.payoff-decay-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.payoff-decay-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--text) 45%, transparent);
    pointer-events: none;
}

.payoff-decay-tip {
    position: absolute;
    bottom: calc(100% + 4px);
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg2, var(--chart-bg));
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    z-index: 5;
}

.payoff-decay-tip.neg { color: var(--danger); }

/* ─── Vol surface table ───────────────────────────────────── */

.vol-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.vol-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 380px;
}

.vol-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--table-head-bg);
    white-space: nowrap;
}

.vol-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.vol-table tr:last-child td { border-bottom: none; }
.vol-table tr:hover td { background: var(--table-row-hover); }

.vol-exp  { font-weight: 600; color: var(--text); }
.vol-dte  { color: var(--muted); }
.vol-skew { color: var(--muted); }
.vol-move { color: var(--muted); }

.vol-iv        { font-weight: 600; }
.iv-low  { color: var(--accent-text); }
.iv-mid  { color: #f59e0b; }
.iv-high { color: var(--danger); }

/* ─── Volatility Smile ───────────────────────────────────── */
.vs-smile-section {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.vs-smile-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 8px;
}
.vs-smile-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.vs-smile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.vs-smile-tabs-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}
.vs-smile-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--card-bg, #fff));
}
[data-theme="dark"] .vs-smile-tabs-wrap::after {
    background: linear-gradient(to right, transparent, #1a2234);
}
.vs-smile-tabs--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}
.vs-smile-tabs--scroll::-webkit-scrollbar { height: 4px; }
.vs-smile-tabs--scroll::-webkit-scrollbar-track { background: transparent; }
.vs-smile-tabs--scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.vs-smile-tab {
    padding: 2px 9px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, color 120ms;
}
.vs-smile-tab:hover { background: var(--table-row-hover); color: var(--text); }
.vs-smile-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Zoom preset chips — pushed to the right of the chart header */
.vs-zoom-chips {
    display: flex;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}
.vs-zoom-chip {
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, color 120ms;
}
.vs-zoom-chip:hover { background: var(--table-row-hover); color: var(--text); }
.vs-zoom-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.vs-term-badge {
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: .02em;
    white-space: nowrap;
}
.vs-term-contango      { background: rgba(34,197,94,0.14);  color: #16a34a; }
.vs-term-backwardation { background: rgba(245,158,11,0.16); color: #d97706; }
.vs-term-flat          { background: rgba(148,163,184,0.16); color: var(--text-muted); }

.vs-smile-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.vs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.vs-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.vs-legend-dash {
    width: 18px;
    height: 0;
    border-top: 2px dashed var(--text-muted);
    opacity: 0.6;
    display: inline-block;
    flex-shrink: 0;
}
.vs-smile-chart-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 8px 4px;
    overflow: hidden;
}
.vs-smile-chart-wrap canvas {
    display: block;
    width: 100%;
}

/* ─── My strategies list ──────────────────────────────────── */

.strategies-tabs {
    display: flex;
    gap: 4px;
    margin-top: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.strategies-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 140ms, border-color 140ms;
}

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

.strategies-tab.is-active {
    color: var(--accent-text);
    border-bottom-color: var(--accent-text);
}

/* Decision Engine v3 (этап F) — portfolio summary panel */
.pf-summary {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(127,127,160,.05);
    overflow: hidden;
}
.pf-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.pf-summary-head::-webkit-details-marker { display: none; }
.pf-summary-head::before {
    content: '▸';
    font-size: 11px;
    color: var(--muted);
    transition: transform 140ms;
}
.pf-summary[open] .pf-summary-head::before { transform: rotate(90deg); }
.pf-summary-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.pf-summary-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tile {
    flex: 1 1 90px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pf-tile-label { font-size: 11px; color: var(--muted); }
.pf-tile-val { font-size: 15px; font-variant-numeric: tabular-nums; }
/* Пункт 10, Stage H — суммарная маржа портфеля */
.pf-margin {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(127,127,160,.05);
}
.pf-margin-label { font-size: 12px; color: var(--muted); }
.pf-margin-val { font-size: 16px; font-variant-numeric: tabular-nums; margin-left: auto; }
.pf-margin-partial {
    font-size: 10px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
}
.pf-directions { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-dir {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--border);
}
.pf-dir--bull { color: var(--accent); }
.pf-dir--bear { color: var(--danger); }
.pf-dir--neutral { color: var(--muted); }
.pf-metrics { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pf-metric strong { color: var(--text); }
.pf-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-flag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}
.pf-flag--warn { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.dark .pf-flag--warn { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.pf-flag--muted { background: rgba(127,127,160,.12); color: var(--muted); border: 1px solid var(--border); }
.pf-assets { display: flex; flex-direction: column; gap: 4px; }
.pf-asset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(127,127,160,.05);
}
.pf-asset-name { font-weight: 600; min-width: 44px; }
.pf-asset-count { color: var(--muted); }
.pf-asset-delta { margin-left: auto; font-variant-numeric: tabular-nums; }
.pf-asset-share { color: var(--muted); min-width: 34px; text-align: right; }

.my-strategies-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.strategy-card-closed {
    opacity: 0.75;
}

.strategy-card-closed .strategy-name {
    color: var(--muted);
}

.strategy-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--input-bg);
    padding: 12px 14px;
    transition: border-color 140ms ease, background 140ms ease;
}

.strategy-card:hover {
    background: var(--glass-hover);
    border-color: var(--border-strong);
}

.strategy-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.strategy-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.strategy-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strategy-meta {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.strategy-pnl {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
}

.pnl-pos { color: var(--accent-text); }
.pnl-neg { color: var(--danger); }

.strategy-spot-save {
    font-size: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
}

.strategy-spot-now {
    color: var(--text);
    opacity: 0.7;
}

.strategy-card-actions {
    display: flex;
    gap: 8px;
}

.btn-load   { flex: 1; justify-content: center; font-size: 12px; padding: 7px 12px; }
.btn-delete { font-size: 12px; padding: 7px 12px; }

/* ── Strategy card: P&L group ─────────────────────────────── */
.strategy-pnl-group {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.strategy-pnl-pct {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.8;
}
.strategy-spot-arrow {
    color: var(--muted);
    margin: 0 2px;
}
.strategy-updated {
    font-size: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
}

/* ── Strategy legs detail toggle ──────────────────────────── */
.strategy-detail-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    padding: 5px 0 4px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: color 120ms;
    margin: 4px 0 0;
}
.strategy-detail-toggle:hover { color: var(--text); }

.strategy-legs-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.strategy-leg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text);
}
.strategy-leg-expired { opacity: 0.45; }
.strategy-leg-label { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strategy-leg-prices { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.strategy-leg-entry { color: var(--muted); }
.strategy-leg-arrow { color: var(--muted); }
.strategy-leg-mark  { font-weight: 600; }
.strategy-leg-pnl   { font-weight: 700; padding-left: 2px; }

.strategy-entry-net { color: var(--muted); }

/* ── Strategy notes ───────────────────────────────────────── */
.strategy-note-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.strategy-note-add-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
    transition: opacity 0.15s;
}
.strategy-note-add-btn:hover { opacity: 1; color: var(--text); }
.strategy-note-display {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.strategy-note-text {
    font-size: 12px;
    color: var(--text);
    opacity: 0.75;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.strategy-note-edit-btn {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.strategy-note-edit-btn:hover { opacity: 1; }
.strategy-note-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 160px;
    resize: vertical;
    background: var(--tabs-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font: 12px/1.5 var(--font-sans);
    color: var(--text);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.strategy-note-textarea:focus { border-color: var(--accent); }
.strategy-note-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* ── Summary: margin / BP effect ──────────────────────────── */
.summary-margin-row { margin-top: 4px; }
.summary-margin-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.summary-margin-badge {
    font-size: 9px;
    font-family: var(--font-mono);
    background: var(--tabs-bg);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--muted);
    white-space: nowrap;
}
.summary-margin-values {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.summary-roi {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
}
.summary-roi strong { color: var(--accent-text); }

/* ─── Strategy selector dropdown ─────────────────────────── */

.strategy-selector {
    position: relative;
}

.strategy-selector-btn {
    gap: 6px;
}

.strategy-selector-chevron {
    font-size: 11px;
    opacity: 0.6;
    transition: transform 200ms ease;
    display: inline-block;
}

.strategy-selector-btn.is-active .strategy-selector-chevron {
    transform: rotate(180deg);
}

.strategy-selector-btn.is-active {
    background: var(--accent-dim);
    border-color: rgba(34,197,94,0.35);
    color: var(--accent-text);
}

.strategy-selector-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 460px;
    background: var(--card-bg);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    padding: 12px;
}

.preset-panel-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.strategy-selector-panel .preset-grid {
    margin-top: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 1280px) {
    .builder-zone-chain,
    .builder-zone-legs,
    .builder-zone-summary,
    .builder-zone-vol,
    .builder-zone-my-strategies {
        grid-column: 1 / span 12;
    }
}

@media (max-width: 800px) {
    .builder-shell {
        padding: 0 0 40px;
    }
    .builder-header {
        padding: 16px 16px 0;
        margin-bottom: 16px;
    }
    .builder-root {
        gap: 0;
    }
    .block-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        margin-bottom: 0;
    }

    .builder-zone-toolbar,
    .builder-zone-chain,
    .builder-zone-payoff,
    .builder-zone-legs,
    .builder-zone-summary,
    .builder-zone-vol,
    .builder-zone-my-strategies {
        grid-column: 1 / span 12;
    }

    .asset-tabs { flex-wrap: wrap; }
    .toolbar-body { gap: 8px; }

    /* Strategy cards: stack info/pnl vertically on small screens */
    .strategy-card-main {
        flex-direction: column;
        gap: 6px;
    }
    .strategy-card-right {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }
    .strategy-meta {
        white-space: normal;
        word-break: break-word;
    }

    /* Header: hide text labels for the toggle buttons so the icons fit. The
       strategy selector and positions buttons also collapse to icon-only on
       phones — with the labels they overflowed off the right edge. */
    #lang-label,
    #theme-label,
    #positions-label {
        display: none;
    }
    /* Let the meta buttons wrap onto a second row instead of running off-screen,
       and let the whole header wrap so the cluster can drop below the title. */
    .builder-header {
        flex-wrap: wrap;
    }
    .builder-header-meta {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
    }

    /* Toolbar block-header: wrap search+chip on first row, meta+actions on second */
    .builder-zone-toolbar .block-header {
        flex-wrap: wrap;
    }
    .asset-search-wrap {
        flex: 1;
        min-width: 100px;
    }
    .toolbar-asset-group {
        width: 100%;
    }
    .asset-active-chip {
        margin-left: 0;
    }
    .toolbar-meta {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
    }
    .toolbar-meta-item:first-child {
        border-left: none;
        padding-left: 0;
    }
    .toolbar-right-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Strategy selector dropdown: JS handles positioning on mobile.
       Drop the desktop min-width so the full-width panel never overflows. */
    .strategy-selector-panel {
        z-index: 300;
        min-width: 0;
    }

    /* Tighter gaps so 3 columns fit comfortably on narrow screens */
    .strategy-selector-panel .preset-grid {
        gap: 6px;
    }

    /* Hide scrollbar on mobile — swipe gesture is enough */
    .payoff-exp-inner {
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .payoff-exp-inner::-webkit-scrollbar { display: none; }

    /* Payoff block: title on first row, scrollable button strip below */
    .builder-zone-payoff .block-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Wrap the action buttons onto as many rows as needed so none get clipped
       off the right edge (previously a hidden horizontal-scroll strip hid them). */
    .payoff-hdr-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
    .payoff-hdr-btn {
        flex-shrink: 0;
        font-size: 11px;
        padding: 5px 12px;
        height: 30px;
    }
    .payoff-hdr-btn--screenshot {
        font-size: 11px;
        padding: 5px 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* Context menu must never be wider/taller than the screen on a phone. */
    .leg-ctx-menu {
        min-width: 0;
        max-width: calc(100vw - 16px);
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }

    /* Larger tap targets for the draggable leg pills on touch screens. */
    .leg-handle-label {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* ── Chart-centric payoff layout (OptionStrat-style) ──────────
       Within the payoff card the chart sits last in source order, buried
       under the expiration picker, add-leg form, metrics and greeks. On
       mobile, flip to a flex column and reorder so the summary metrics +
       chart are the first things visible; demote the controls (expiration
       picker, add-leg form, net greeks) below the fold. */
    .builder-zone-payoff .block-card {
        display: flex;
        flex-direction: column;
    }
    .builder-zone-payoff .block-header           { order: 0; }
    .builder-zone-payoff .payoff-metrics-strip   { order: 1; margin-top: 4px; }
    .builder-zone-payoff .payoff-chart-wrap      { order: 2; margin-top: 10px; }
    .builder-zone-payoff .payoff-leg-legend      { order: 3; }
    .builder-zone-payoff .payoff-leg-handles-row { order: 4; }
    .builder-zone-payoff .payoff-stock-row       { order: 5; }
    .builder-zone-payoff .payoff-expired-note    { order: 6; }
    .builder-zone-payoff .payoff-sliders         { order: 7; }
    .builder-zone-payoff .payoff-exp-row         { order: 8; margin-top: 14px; }
    .builder-zone-payoff .payoff-add-leg-form    { order: 9; }
    .builder-zone-payoff .payoff-greeks-strip    { order: 10; }

    /* Compact header so it doesn't consume the first screenful */
    .builder-header  { margin-bottom: 12px; }
    .builder-title   { font-size: 20px; }
    .builder-kicker  { font-size: 10px; margin-bottom: 2px; }
    #build-version   { font-size: 9px; }
}


.block-error .error-banner {
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* =========================================================
   Strategy Detail Overlay (История стратегии)
   ========================================================= */

/* ── My Positions page (standalone overlay) ───────────────────────── */
.positions-overlay {
    position: fixed;
    inset: 0;
    z-index: 990; /* below the detail page (1000) so its chart opens on top */
    background: var(--bg-body);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.positions-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 48px;
}

.positions-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px 14px;
}

.positions-back {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
}
.positions-back:hover { opacity: .75; }

.positions-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.positions-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.positions-body {
    padding: 20px 20px 0;
}

@media (max-width: 800px) {
    .positions-header { padding: 10px 14px 12px; }
    .positions-body   { padding: 14px 12px 0; }
    .positions-title  { font-size: 19px; }
}

.strategy-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg-body);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* While a full-page overlay (positions list / strategy detail) is open, hide the
   builder behind it. On iOS Safari a builder <canvas> (the vol-surface "smile",
   the payoff chart) can composite ABOVE an opaque fixed overlay and bleed
   through onto the list; hiding the builder subtree stops it. visibility (not
   display) preserves layout so there's no reflow on open/close. */
body.sb-overlay-open .builder-header,
body.sb-overlay-open #strategy-builder-root {
    visibility: hidden;
}

.sd-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 48px;
}

/* Header */
.sd-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px 14px;
}

.sd-back {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
}
.sd-back:hover { opacity: .75; }

.sd-refresh {
    background: none;
    border: 1px solid var(--border, #2a2a35);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 6px;
    margin-left: 8px;
    margin-bottom: 8px;
}
.sd-refresh:hover { background: rgba(127,127,160,.10); }
.sd-refresh:disabled { opacity: .5; cursor: default; }
.sd-refresh.is-busy { opacity: .6; }

/* Decision Engine v4 (этап D/E, F) — recommended-action panel + hedge suggestion */
.sd-action-section {
    border-left: 3px solid var(--border, #2a2a35);
    padding-left: 12px;
}
.sd-action-section--risk { border-left-color: var(--danger, #dc2626); }
.sd-action-section--warn { border-left-color: #eab308; }
.sd-action-section--info { border-left-color: #38bdf8; }
.sd-action-section--good { border-left-color: var(--accent); }
.sd-action-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15px;
}
.sd-action-icon { font-size: 18px; }
.sd-action-confidence {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted, #8a8a99);
}
.sd-action-reasons {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-muted, #8a8a99);
}
.sd-action-reasons li { margin-bottom: 3px; }
.sd-hedge-suggestion {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 8px;
    background: rgba(56,189,248,.06);
}
.sd-hedge-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.sd-hedge-leg { font-size: 14px; font-variant-numeric: tabular-nums; }
.sd-hedge-rationale { font-size: 12px; color: var(--text-muted, #8a8a99); margin-top: 4px; }
.sd-hedge-add-btn { margin-top: 8px; }

/* Live roll plan (recomputed on the current chain) */
.sd-roll-section .sd-roll-type-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(127,127,160,.12);
    border-radius: 5px;
    padding: 2px 8px;
}
.sd-roll-moves {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 10px;
}
.sd-roll-move {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 7px;
}
.sd-roll-move .sd-roll-leg { font-weight: 600; }
.sd-roll-move .sd-roll-arrow {
    font-variant-numeric: tabular-nums;
    color: var(--text, inherit);
}
.sd-roll-move .sd-roll-exp { color: var(--text-muted, #8a8a99); font-size: 13px; }
.sd-roll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.sd-roll-net { font-size: 14px; }
.sd-roll-note { font-size: 12px; color: var(--text-muted, #8a8a99); }

.sd-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.sd-asset {
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.sd-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sd-status-open   { background: rgba(22,163,74,.12);  color: var(--accent); }
.sd-status-closed { background: rgba(107,114,128,.12); color: var(--text-muted); }

.sd-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.sd-meta-sep { margin: 0 6px; opacity: .4; }

/* Body */
.sd-body {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* P&L summary strip */
.sd-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.sd-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-summary-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sd-summary-value {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
}

/* Action buttons row */
.sd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 32px;
}

/* Close-position P&L modal */
.sd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.sd-modal {
    background: var(--card-bg, #1a1f2e);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.sd-modal--wide { max-width: 520px; }

/* Per-leg adjust actions */
.sd-leg-wrap { display: flex; flex-direction: column; }
.sd-leg-actions { display: flex; gap: 6px; padding: 2px 0 8px; }
.sd-leg-act {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
}
.sd-leg-act:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sd-leg-act--danger { color: var(--danger, #dc2626); }
.sd-leg-act--danger:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); }
.sd-leg-closed-tag { font: 600 11px var(--font-mono, monospace); color: var(--text-muted, #8a8a99); padding: 3px 0; }
.sd-add-leg-btn { margin-top: 8px; font-size: 13px; }

/* Add-leg form grid */
.sd-al-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 8px 0 14px; }
.sd-al-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted, #8a8a99); }
.sd-al-grid input, .sd-al-grid select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg, transparent);
    color: var(--text);
    font: 600 13px var(--font-mono, monospace);
}

/* Position history timeline */
.sd-events { display: flex; flex-direction: column; gap: 8px; }
.sd-ev {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sd-ev-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sd-ev-type { font-size: 13px; font-weight: 600; color: var(--text); }
.sd-ev-when { font-size: 11px; color: var(--text-muted, #8a8a99); }
.sd-ev-pnl { margin-left: auto; font: 700 13px var(--font-mono, monospace); }
.sd-ev-delta { font: 600 12px var(--font-mono, monospace); color: var(--text); }
.sd-ev-note { font-size: 12px; color: var(--text-muted, #8a8a99); font-style: italic; }

/* Entry-price & commission editor */
.sd-ec-legs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 14px;
    max-height: 38vh;
    overflow-y: auto;
}
.sd-ec-leg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sd-ec-leg-desc { font-size: 13px; font-weight: 600; color: var(--text); }
.sd-ec-leg-right { display: flex; align-items: center; gap: 10px; }
.sd-ec-mkt {
    font: 600 11px var(--font-mono, monospace);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    white-space: nowrap;
}
.sd-ec-mkt:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sd-ec-mkt--na { color: var(--text-muted, #8a8a99); background: none; border-color: var(--border); cursor: default; }
.sd-ec-leg-input { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #8a8a99); }
.sd-ec-leg-input input {
    width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg, transparent);
    color: var(--text);
    font: 600 13px var(--font-mono, monospace);
}
.sd-ec-comm { display: flex; gap: 12px; flex-wrap: wrap; }
.sd-ec-comm-field { flex: 1; min-width: 140px; }
.sd-ec-scope {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 2px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.sd-ec-scope input { margin-top: 2px; }

.sd-modal-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}
.sd-modal-desc {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}
.sd-modal-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 8px;
}
.sd-modal-input {
    background: var(--input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 16px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.sd-modal-input:focus {
    border-color: var(--accent, #3b82f6);
}
.sd-modal-input--error {
    border-color: var(--danger, #ef4444) !important;
}
.sd-modal-estimate {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    flex-wrap: wrap;
}
.sd-modal-estimate-label {
    color: var(--muted);
    flex-shrink: 0;
}
.sd-modal-estimate-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sd-modal-use-estimate {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.sd-modal-use-estimate:hover {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}
.sd-modal-hint {
    margin: 6px 0 16px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.75;
}
.sd-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Comparison cards */
.sd-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sd-card {
    background: var(--card-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.sd-card-current {
    border-color: var(--accent);
    border-width: 2px;
}

.sd-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 6px;
}

.sd-card-spot {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-mono);
    line-height: 1.2;
}

.sd-card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.sd-card-pnl {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-bottom: 10px;
}

.sd-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}
.sd-card-row:last-child { border-bottom: none; }
.sd-card-row span:last-child {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 500;
}

/* Section */
.sd-section { }

.sd-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin: 0 0 12px;
}

/* Chart */
.sd-chart-wrap {
    background: var(--card-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 8px 4px;
    overflow: hidden;
}

.sd-chart-wrap canvas {
    display: block;
    width: 100%;
}
.sd-payoff-wrap canvas { cursor: crosshair; }

/* Payoff profile legend */
.sd-payoff-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.sd-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sd-legend-dot {
    width: 14px;
    height: 0;
    border-top: 2px dashed currentColor;
    display: inline-block;
}
.sd-legend-entry { color: #6b7280; }
.sd-legend-now   { color: #3b82f6; }
.sd-legend-be    { color: #7c3aed; }

/* Slider */
.sd-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.sd-slider {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}
.sd-slider:disabled { opacity: .4; cursor: default; }

.sd-slider-date {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.sd-snap-count {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 6px;
    font-family: var(--font-mono);
}

/* No history */
.sd-no-history {
    text-align: center;
    padding: 28px 20px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
}
.sd-no-history p { margin: 0 0 6px; }
.sd-no-history-sub { font-size: 12px; }

/* Legs */
.sd-legs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-leg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--card-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}
.sd-leg-expired { opacity: .5; }

.sd-leg-side {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}
.sd-leg-side-long  { background: rgba(22,163,74,.12);  color: var(--accent); }
.sd-leg-side-short { background: rgba(239,68,68,.12);  color: var(--danger); }

.sd-leg-desc {
    flex: 1;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
}

.sd-leg-entry {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── Strategy expiry bar ──────────────────────────────────── */
.sd-expiry-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font-mono);
    background: var(--card-bg);
    border: 1px solid var(--border);
    transition: border-color .2s;
}
.sd-expiry-bar:has(.dte-urgent)  { border-color: rgba(239,68,68,.35); }
.sd-expiry-bar:has(.dte-warning) { border-color: rgba(249,115,22,.3); }
.sd-expiry-label { color: var(--text-muted); }
.sd-expiry-date  { color: var(--text); font-weight: 600; }
.sd-expiry-dte {
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
/* DTE pill colours (shared with per-leg badge) */
.sd-expiry-dte.dte-ok,
.sd-dte-badge.dte-ok      { background: rgba(22,163,74,.13);   color: #16a34a; }
.sd-expiry-dte.dte-near,
.sd-dte-badge.dte-near    { background: rgba(234,179,8,.16);   color: #a16207; }
.sd-expiry-dte.dte-warning,
.sd-dte-badge.dte-warning { background: rgba(249,115,22,.16);  color: #c2410c; }
.sd-expiry-dte.dte-urgent,
.sd-dte-badge.dte-urgent  { background: rgba(239,68,68,.16);   color: #dc2626; }
.sd-expiry-dte.dte-expired,
.sd-dte-badge.dte-expired { background: rgba(107,114,128,.14); color: var(--text-muted); }

/* ── Summary strip items with coloured background pills ─────── */
.sd-summary-pnl,
.sd-summary-debit,
.sd-summary-credit,
.sd-summary-maxp,
.sd-summary-maxl {
    padding: 6px 12px;
    border-radius: 8px;
    transition: background .2s;
}
.sd-summary-pnl:has(.pnl-pos),
.sd-summary-credit,
.sd-summary-maxp    { background: rgba(22,163,74,.10); }
.sd-summary-pnl:has(.pnl-neg),
.sd-summary-debit,
.sd-summary-maxl    { background: rgba(239,68,68,.10); }
.sd-pnl-value { font-size: 20px; }
.sd-pnl-snap-hint {
    display: block;
    font-size: 11px;
    color: var(--muted);
    opacity: 0.7;
    font-weight: 400;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* Explicit display rule above overrides the UA [hidden] default, so restore it. */
.sd-pnl-snap-hint[hidden] {
    display: none;
}

/* ── Per-leg expiration info ──────────────────────────────── */
.sd-leg-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.sd-leg-exp {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.sd-leg-entry { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }

/* DTE badge — shared structure */
.sd-dte-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 600px) {
    .sd-cards { grid-template-columns: 1fr; }
    .sd-card-spot { font-size: 18px; }
    .sd-name { font-size: 17px; }
    .sd-leg-right { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* =========================================================
   Save modal — TP/SL fields
   ========================================================= */

.modal-tpsl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.modal-tpsl-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-tpsl-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.modal-tpsl-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.modal-tpsl-prefix {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--text-muted);
    pointer-events: none;
    font-family: var(--font-mono);
}

.modal-tpsl-input {
    width: 100%;
    padding-left: 22px !important;
    font-family: var(--font-mono);
}

.modal-tpsl-hint {
    font-size: 10px;
    color: var(--accent);
    font-family: var(--font-mono);
}

/* Strategy card — alert badges */
.strategy-alert {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 99px;
    letter-spacing: .05em;
}

.strategy-alert-tp {
    background: rgba(22,163,74,.15);
    color: var(--accent);
    border: 1px solid rgba(22,163,74,.3);
}

.strategy-alert-sl {
    background: rgba(239,68,68,.12);
    color: var(--danger);
    border: 1px solid rgba(239,68,68,.25);
}

.strategy-alert-event {
    background: rgba(245,158,11,.12);
    color: #b45309;
    border: 1px solid rgba(245,158,11,.3);
    cursor: default;
}

.dark .strategy-alert-event { color: #fbbf24; border-color: rgba(251,191,36,.3); }

/* Decision Engine v4 (этап F) — recommended-action badge on the card */
.strategy-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: .02em;
    cursor: default;
}
.strategy-action-badge--close { background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.25); }
.strategy-action-badge--roll { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.dark .strategy-action-badge--roll { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.strategy-action-badge--hedge { background: rgba(56,189,248,.12); color: #0284c7; border: 1px solid rgba(56,189,248,.3); }
.dark .strategy-action-badge--hedge { color: #38bdf8; }
.strategy-action-badge--partial_close { background: rgba(34,197,94,.12); color: var(--accent); border: 1px solid rgba(34,197,94,.3); }

/* Strategy card with active alerts — subtle left-border accent */
.strategy-card-alert {
    border-left: 3px solid rgba(245,158,11,.5) !important;
}

/* Alert panel inside a strategy card */
.strategy-alert-panel {
    margin: 6px 0 2px;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 8px;
    background: rgba(245,158,11,.06);
    overflow: hidden;
}

.strategy-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(245,158,11,.12);
    font-size: 12px;
}

.strategy-alert-row:last-of-type { border-bottom: none; }

.strategy-alert-icon {
    flex-shrink: 0;
    font-size: 13px;
    margin-top: 1px;
}

.strategy-alert-text {
    flex: 1;
    color: var(--text);
    line-height: 1.4;
}

.strategy-alert-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
    opacity: .6;
    transition: opacity .15s;
}
.strategy-alert-dismiss:hover { opacity: 1; }

.strategy-alert-add-legs {
    flex-shrink: 0;
    margin-left: auto;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--primary, #6366f1);
    cursor: pointer;
    transition: background .15s;
}
.strategy-alert-add-legs:hover { background: rgba(99,102,241,0.22); }

/* Scenario execution history */
.strategy-scenario-log {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 4px;
}
.strategy-scenario-log-summary {
    font-size: 11px;
    color: var(--text);
    opacity: 0.65;
    cursor: pointer;
    padding: 2px 0;
}
.strategy-scenario-log-body {
    padding: 4px 0 0;
}
.strategy-scenario-log-loading,
.strategy-scenario-log-empty {
    font-size: 11px;
    color: var(--text);
    opacity: 0.55;
}
.strategy-scenario-log-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    color: var(--text);
    padding: 3px 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}
.strategy-scenario-log-row:last-child { border-bottom: none; }
.ssl-type {
    font-weight: 600;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}
.ssl-type--continuation { background: rgba(34,197,94,0.15); color: #16a34a; }
.ssl-type--defense { background: rgba(239,68,68,0.12); color: #dc2626; }
.ssl-type--event { background: rgba(99,102,241,0.12); color: #4f46e5; }
.ssl-trig { flex: 1; }
.ssl-spot { opacity: 0.7; white-space: nowrap; font-size: 11px; }
.ssl-date { opacity: 0.6; white-space: nowrap; }
.ssl-pnl { font-weight: 600; white-space: nowrap; font-size: 11px; }
.ssl-pnl--pos { color: #16a34a; }
.ssl-pnl--neg { color: #dc2626; }

.strategy-alert-dismiss-all {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background: none;
    border: none;
    border-top: 1px solid rgba(245,158,11,.12);
    cursor: pointer;
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    transition: color .15s;
}
.strategy-alert-dismiss-all:hover { color: var(--text); }

/* Alert count badge in the "My Strategies" header title */
.my-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(245,158,11,.18);
    color: #b45309;
    border: 1px solid rgba(245,158,11,.3);
    margin-left: 6px;
    vertical-align: middle;
}
.dark .my-alert-badge { color: #fbbf24; }

/* Header actions row (refresh + dismiss-all side by side) */
.block-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Alert toast variant — amber, slightly longer display */
.sb-toast-alert {
    background: rgba(245,158,11,.92);
    color: #fff;
    backdrop-filter: blur(8px);
}

/* Detail page — chart section header + toggle */
.sd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sd-section-header .sd-section-title { margin-bottom: 0; }

.sd-chart-toggle {
    display: flex;
    gap: 4px;
}

.sd-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.sd-toggle-btn:hover { background: var(--hover-bg, rgba(0,0,0,.04)); }

.sd-toggle-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Payoff header: groups the view-toggle and zoom controls on the right */
.sd-payoff-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Payoff zoom controls */
.sd-zoom-controls {
    display: flex;
    gap: 4px;
}

.sd-zoom-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.sd-zoom-btn:hover {
    background: var(--hover-bg, rgba(0,0,0,.04));
    color: var(--text);
    border-color: var(--accent);
}

/* TP/SL badges in detail page */
.sd-tpsl-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.sd-tpsl-badge {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 3px 10px;
    border-radius: 99px;
}

.sd-tp-badge {
    background: rgba(22,163,74,.12);
    color: var(--accent);
    border: 1px solid rgba(22,163,74,.25);
}

.sd-sl-badge {
    background: rgba(239,68,68,.10);
    color: var(--danger);
    border: 1px solid rgba(239,68,68,.2);
}

/* ── AI position check (score-position) ─────────────────────────────────── */
.payoff-hdr-btn--score {
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
}
.payoff-hdr-btn--score:hover {
    background: var(--accent-dim);
    color: var(--accent-text);
}

.sc-modal-card {
    max-width: 560px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.sc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border);
}
.sc-modal-header .modal-title { margin: 0; }
.sc-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}
.sc-modal-close:hover { color: var(--text); }
.sc-modal-body {
    padding: 18px 24px 24px;
    overflow-y: auto;
}
.sc-modal-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 24px 0;
    justify-content: center;
}

/* Synthesized position-health verdict plaque (keep / danger / strengthen) */
.sc-health {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.sc-health--keep       { border-color: color-mix(in srgb, #16a34a 45%, transparent); background: color-mix(in srgb, #16a34a 9%, transparent); }
.sc-health--danger     { border-color: color-mix(in srgb, #d97706 50%, transparent); background: color-mix(in srgb, #d97706 11%, transparent); }
.sc-health--strengthen { border-color: color-mix(in srgb, #2563eb 45%, transparent); background: color-mix(in srgb, #2563eb 9%, transparent); }
.sc-health-head { font-size: 15px; font-weight: 700; color: var(--text); }
.sc-health-reasons { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.sc-health-reasons li { font-size: 13px; color: var(--text); }
.sc-health-action { margin-top: 8px; font-size: 13px; color: var(--text); }
.sc-health-action strong { color: var(--accent-text, var(--accent)); }

.sc-modal-verdict-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.sc-modal-verdict {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.sc-modal-verdict--better  { color: var(--accent-text); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sc-modal-verdict--worse   { color: var(--danger); background: var(--danger-dim); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.sc-modal-verdict--similar { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.sc-modal-verdict--na      { color: var(--text-muted); background: color-mix(in srgb, var(--text) 6%, transparent); }

.sc-modal-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-mono);
}
.sc-modal-score-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-modal-score strong { font-size: 18px; }
.sc-modal-score-vs { font-size: 11px; color: var(--text-muted); }

.sc-modal-label {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
}

.sc-modal-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 4px;
}
.sc-modal-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border-radius: var(--radius-control);
}
.sc-modal-metrics span { font-size: 11px; color: var(--text-muted); }
.sc-modal-metrics strong { font-size: 14px; font-family: var(--font-mono); }
.sc-modal-metrics .positive { color: var(--accent-text); }
.sc-modal-metrics .negative { color: var(--danger); }

.sc-modal-list { margin-top: 16px; }
.sc-modal-list-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.sc-modal-list ul { margin: 0; padding-left: 18px; }
.sc-modal-list li { font-size: 13px; line-height: 1.5; margin-bottom: 3px; }
.sc-modal-list--good li { color: var(--accent-text); }
.sc-modal-list--bad li,
.sc-modal-list--risk li { color: var(--danger); }

.sc-modal-scenarios { margin-top: 18px; }
.sc-modal-scenario {
    padding: 10px 12px;
    border-radius: var(--radius-control);
    border-left: 3px solid var(--border-strong);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    margin-bottom: 8px;
}
.sc-modal-scenario--continuation { border-left-color: var(--accent); }
.sc-modal-scenario--defense      { border-left-color: var(--danger); }
.sc-modal-scenario--delta_hedge  { border-left-color: #8b5cf6; }
.sc-modal-scenario-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sc-modal-scenario-type { font-size: 13px; font-weight: 600; }
.sc-modal-scenario-trig { font-size: 12px; font-family: var(--font-mono); color: var(--text-muted); }
.sc-modal-scenario-text { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

/* ─── P&L Scenario Matrix ──────────────────────────────────── */
.pm-section { margin-top: 16px; }
.pm-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pm-dte-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.pm-dte-group { display: flex; gap: 4px; }
.pm-dte-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.pm-dte-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pm-dte-btn.is-active {
    background: var(--accent-dim);
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.pm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
}
.pm-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.pm-table th,
.pm-table td {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.pm-table tbody tr:last-child td { border-bottom: none; }
.pm-corner,
.pm-row-head {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.pm-col-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    font-family: var(--font-mono);
}
.pm-col-base { border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.pm-row-base .pm-row-head { color: var(--text); font-weight: 700; }
.pm-row-base td {
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.pm-row-head-base { font-weight: 700 !important; color: var(--text) !important; }
.pm-cell { font-weight: 500; }
.pm-cell-origin {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -2px;
}
.pm-pnl-pos { color: #15803d; }
.pm-pnl-neg { color: #dc2626; }
[data-theme="dark"] .pm-pnl-pos { color: #4ade80; }
[data-theme="dark"] .pm-pnl-neg { color: #f87171; }
.pm-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}