/* SPA stylesheet — Phase 2.3.
 *
 * Visual layer of the bundle-driven Overview page. Mirrors the dark
 * Bootswatch palette of the legacy app so the cut-over (Phase 3) is
 * visually continuous. Spec-only — no business logic.
 */

.spa-body {
    background: #1a1d21;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* SPA sidebar — always visible, expands on hover.  Page content
   gets a permanent 220px left padding so the expanded rail never
   overlays data, AND we use a soft drop-shadow on hover so the
   sidebar floats above the page when expanded. */
.spa-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    background: rgba(20, 22, 26, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    z-index: 1000;
    overflow-x: hidden;
    transition: width 0.18s ease, box-shadow 0.18s ease;
}
.spa-sidebar:hover {
    width: 200px;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
}

.spa-side-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size: 0.84rem;
    border-left: 3px solid transparent;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.spa-side-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}
.spa-side-item.active {
    background: rgba(243, 156, 18, 0.10);
    color: #f39c12;
    border-left-color: #f39c12;
}
.spa-side-icon { width: 22px; text-align: center; font-size: 1.05rem; flex-shrink: 0; }
.spa-side-label {
    opacity: 0;
    transition: opacity 0.12s;
}
.spa-sidebar:hover .spa-side-label { opacity: 1; }

#spa-root {
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 16px;
    padding-right: 22px;
    padding-bottom: 80px;
}

/* Permanent 220px left padding on the SPA root so the expanded
   sidebar (200px) never overlaps page content.  Use individual
   padding properties above so this single rule controls left.
   ID + class selector wins over the ID alone. */
#spa-root.spa-with-sidebar { padding-left: 240px; }
@media (max-width: 1100px) {
    /* On narrow screens, fall back to a smaller permanent gap. */
    #spa-root.spa-with-sidebar { padding-left: 80px; }
}

/* Header bar with logo + product switch */
.spa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.spa-logo {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.85);
}

.spa-product-switch {
    display: flex;
    gap: 4px;
}

.spa-product-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.15s, color 0.15s;
}
.spa-product-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
}
.spa-product-btn.active {
    background: rgba(243, 156, 18, 0.25);
    border-color: rgba(243, 156, 18, 0.6);
    color: #f39c12;
}

/* Price bar — top-of-page hero */
.spa-pricebar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #f39c12;
    border-radius: 8px;
    padding: 12px 18px 10px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.spa-pricebar-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.spa-pricebar-symbol {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}
.spa-pricebar-price {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.spa-pricebar-source {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 8px;
}
.spa-pricebar-meta { margin-top: 4px; gap: 6px; }

.spa-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    font-weight: 500;
}
.spa-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.86rem;
}
.spa-sep {
    opacity: 0.18;
    margin: 0 4px;
}

/* Grid layouts */
.spa-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}
.spa-grid-3col { grid-template-columns: repeat(3, 1fr); }
.spa-grid-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) {
    .spa-grid-3col, .spa-grid-2col { grid-template-columns: 1fr; }
}

.spa-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
}
.spa-card-title {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.spa-card-note {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.32);
    margin-left: 8px;
    font-size: 0.7rem;
}
.spa-correlation-section { margin-top: 18px; }

/* Cross-asset correlation strip */
.cross-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.cross-asset-tile {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 10px 12px;
}
.cross-asset-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.cross-asset-pair {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
}
.corr-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}
.corr-pct-high { background: rgba(231, 76, 60, 0.18); color: #e74c3c; }
.corr-pct-low  { background: rgba(0, 188, 140, 0.18); color: #00bc8c; }
.corr-pct-mid  { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.65); }

.cross-asset-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 0 6px;
}
.cross-asset-corr {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.25rem;
}
.cross-asset-dir {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cross-asset-dir[data-dir="tightening"] { color: #f39c12; }
.cross-asset-dir[data-dir="loosening"]  { color: #00bc8c; }

.corr-sparkline {
    display: block;
    margin: 4px 0 2px;
}
.cross-asset-note {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

/* Seasonal correlation table */
.seasonal-corr-window-label {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.seasonal-corr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.seasonal-corr-table th {
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.seasonal-corr-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.seasonal-cell { white-space: nowrap; }
.seasonal-year {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}
.seasonal-row-current {
    background: rgba(243, 156, 18, 0.06);
    color: #f39c12;
}
.seasonal-row-current .seasonal-year { color: #f39c12; }
.seasonal-mean-row td, .seasonal-std-row td {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.corr-z {
    margin-left: 4px;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
}
.corr-z-strong { background: rgba(231, 76, 60, 0.20); color: #e74c3c; font-weight: 600; }
.corr-z-mid    { background: rgba(243, 156, 18, 0.18); color: #f39c12; }
.corr-z-weak   { color: rgba(255, 255, 255, 0.4); }
.spa-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.84rem;
}

/* Charts */
.spa-chart {
    width: 100%;
    min-height: 320px;
}
.spa-chart-empty {
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 80px 0;
    font-size: 0.85rem;
}

/* CFTC section */
.spa-cftc-section .spa-card-title { margin-top: 14px; }
.spa-cftc-section .spa-chart { min-height: 360px; }

/* Signal panel */
.spa-signal-panel {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.spa-signal-row {
    padding: 4px 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}
.spa-signal-sev {
    color: #f39c12;
    font-weight: 700;
    margin-right: 4px;
    font-size: 0.7rem;
}
.spa-signal-row[data-severity="HIGH"]   .spa-signal-sev { color: #e74c3c; }
.spa-signal-row[data-severity="MEDIUM"] .spa-signal-sev { color: #f39c12; }
.spa-signal-row[data-severity="LOW"]    .spa-signal-sev { color: #6c757d; }

/* Trade cards */
.spa-trade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.spa-trade-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
}
.spa-trade-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.spa-trade-card-title {
    font-weight: 700;
    font-size: 0.85rem;
}
.spa-card-score {
    color: #00bc8c;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78rem;
}
.spa-trade-card-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    margin-bottom: 4px;
}
.spa-trade-card-rec {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

.spa-empty-row,
.spa-placeholder.spa-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Freshness states */
[data-freshness="stale"] { opacity: 0.7; }
[data-freshness="cold"]  { color: rgba(255, 255, 255, 0.35); }

/* Seasonal timeline */
.seasonal-timeline {
    display: flex;
    width: 100%;
    gap: 2px;
    border-radius: 6px;
    overflow: hidden;
}
.seasonal-period {
    border: none;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 700;
    padding: 12px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: filter 0.15s, transform 0.1s;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seasonal-period:hover { filter: brightness(1.1); }
.seasonal-period.active { outline: 2px solid #fff; transform: translateY(-1px); }
.seasonal-period-name { font-size: 0.78rem; }
.seasonal-period-bias { font-size: 0.6rem; opacity: 0.7; font-weight: 500; }

/* Support / Resistance ladder */
.sr-ladder {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'JetBrains Mono', monospace;
}
.sr-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.sr-tag {
    text-align: center;
    font-weight: 700;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}
.sr-level {
    font-weight: 600;
}
.sr-dist {
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}
.sr-resistance {
    background: linear-gradient(to right, transparent, rgba(231, 76, 60, 0.08));
    border-left: 2px solid #e74c3c;
}
.sr-resistance .sr-tag, .sr-resistance .sr-level { color: #e74c3c; }
.sr-resistance .sr-dist { color: #e74c3c; opacity: 0.7; }
.sr-support {
    background: linear-gradient(to right, transparent, rgba(0, 188, 140, 0.08));
    border-left: 2px solid #00bc8c;
}
.sr-support .sr-tag, .sr-support .sr-level { color: #00bc8c; }
.sr-support .sr-dist { color: #00bc8c; opacity: 0.7; }
.sr-current {
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid #f39c12;
    margin: 4px 0;
}
.sr-current .sr-tag, .sr-current .sr-level { color: #f39c12; }
.sr-current .sr-dist { color: #f39c12; opacity: 0.7; }

/* Macro driver list */
.macro-driver-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.macro-driver {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.macro-driver-name {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}
.macro-driver-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Macro categories grid */
.macro-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.macro-category {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 10px 12px;
}
.macro-cat-name {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.45);
}
.macro-cat-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 4px 0;
}
.macro-cat-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}
.macro-cat-driver {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}
.macro-cat-driver-score {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.5);
}

/* My Portfolio page */
.portfolio-alert {
    padding: 6px 10px;
    margin: 3px 0;
    border-radius: 4px;
    font-size: 0.84rem;
    border-left: 3px solid #6c757d;
    background: rgba(255, 255, 255, 0.02);
}
.portfolio-alert[data-severity="WARNING"] { border-left-color: #f39c12; background: rgba(243, 156, 18, 0.05); }
.portfolio-alert[data-severity="HIGH"]    { border-left-color: #e67e22; background: rgba(230, 126, 34, 0.07); }
.portfolio-alert[data-severity="CRITICAL"]{ border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.08); }
.portfolio-alert-sev { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.72rem; margin-right: 4px; color: #f39c12; }
.portfolio-alert[data-severity="HIGH"] .portfolio-alert-sev,
.portfolio-alert[data-severity="CRITICAL"] .portfolio-alert-sev { color: #e74c3c; }
.portfolio-alert-id { font-family: 'JetBrains Mono', monospace; font-weight: 600; }

.portfolio-position {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
}
.portfolio-position-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.portfolio-position-title { font-weight: 700; font-size: 0.92rem; }
.portfolio-position-meta { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }
.portfolio-position-thesis { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; font-style: italic; }
.portfolio-position-summary { gap: 10px; margin-bottom: 8px; }
.portfolio-position-summary > div { font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; }

.portfolio-legs { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; margin-top: 8px; }
.portfolio-legs th { padding: 5px 8px; color: rgba(255, 255, 255, 0.5); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; font-size: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.portfolio-legs td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.portfolio-leg[data-side="long"]  td:first-child { color: #00bc8c; }
.portfolio-leg[data-side="short"] td:first-child { color: #e74c3c; }
.pnl-pos { color: #00bc8c; }
.pnl-neg { color: #e74c3c; }

.portfolio-flags { margin: 10px 0 4px 0; padding-left: 16px; }
.portfolio-flag { font-size: 0.78rem; color: #f39c12; padding: 3px 0; }

.portfolio-stress { margin-top: 10px; }
.portfolio-stress summary { cursor: pointer; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; padding: 4px 0; }
.portfolio-stress table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; margin-top: 6px; }
.portfolio-stress th { padding: 4px 8px; font-weight: 700; text-transform: uppercase; font-size: 0.65rem; color: rgba(255, 255, 255, 0.5); text-align: left; }
.portfolio-stress td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }

.portfolio-market-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }
.portfolio-market-table th { padding: 6px 10px; color: rgba(255, 255, 255, 0.5); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; font-size: 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.portfolio-market-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }

.spa-value-large { font-size: 1.4rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* Entry → Mark inline display in the leg table */
.leg-entry-mark { white-space: nowrap; }
.leg-entry { color: rgba(255, 255, 255, 0.55); }
.leg-arrow { color: rgba(255, 255, 255, 0.35); margin: 0 6px; }
.leg-mark  { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.leg-change { margin-left: 6px; font-weight: 600; }
.leg-fees { font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); margin-top: 1px; }

/* Greeks by commodity — top-level card */
.greeks-by-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.greeks-product-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 10px 12px;
}
.greeks-product-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.greeks-product-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 1.05rem;
    color: #f39c12;
}
.greeks-product-px {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
}
.greeks-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    padding: 2px 0;
}
.greeks-row-secondary { opacity: 0.55; font-size: 0.74rem; }
.greeks-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 0;
}
.greeks-pnl-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 4px 0 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}
.greeks-pnl-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}
.greeks-pnl-big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.45rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Δ exposure expressed in metric tonnes — emphasized as primary delta */
.greeks-row-delta-mt {
    background: rgba(52, 152, 219, 0.06);
    border-left: 2px solid rgba(52, 152, 219, 0.45);
    padding-left: 6px;
    font-weight: 600;
    font-size: 0.88rem;
}
.spa-row-emphasis {
    background: rgba(52, 152, 219, 0.06);
    border-left: 2px solid rgba(52, 152, 219, 0.45);
    padding-left: 6px;
    margin-bottom: 4px;
}
.delta-mt-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.delta-mt-suffix {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.leg-delta-mt {
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.25;
}
.leg-delta-mt > span:first-child {
    font-weight: 600;
}
.leg-delta-raw {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-top: 1px;
}

/* Per-position greeks-by-commodity strip (inside each position card) */
.position-greeks-by-product {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(243, 156, 18, 0.5);
    border-radius: 4px;
}
.position-greeks-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.position-greek-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 3px 0;
}
.position-greek-prod {
    font-weight: 800;
    color: #f39c12;
    min-width: 32px;
}

/* Seasonal years table */
.seasonal-years {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}
.seasonal-years th {
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.seasonal-years td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ──────────────────────────────────────────────────────────────────
 * My Portfolio v2 — visual dashboard
 * ────────────────────────────────────────────────────────────────── */

.port-page {
    --pos: #14f195;
    --neg: #f23545;
    --neu: rgba(255, 255, 255, 0.55);
    --warm: #f4b542;
    --hot: #f23545;
    color: rgba(255, 255, 255, 0.92);
}
.port-pos { color: var(--pos); }
.port-neg { color: var(--neg); }
.port-neu { color: var(--neu); }

.port-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.port-header-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.port-meta-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.4px;
}
.port-meta-asof {
    font-size: 0.66rem;
    opacity: 0.7;
}

/* ── Hero strip ─────────────────────────────────────────────── */
.port-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) {
    .port-hero-grid { grid-template-columns: 1fr; }
}
.port-hero-card {
    position: relative;
    background: linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    overflow: hidden;
}
.port-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.03), transparent 60%);
}
.port-hero-label {
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    margin-bottom: 10px;
}
.port-hero-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.port-hero-value {
    font-size: 2.4rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 0 18px rgba(20, 241, 149, 0.0);
    transition: text-shadow 0.4s, color 0.3s;
}
.port-hero-value.port-pos { text-shadow: 0 0 20px rgba(20, 241, 149, 0.35); }
.port-hero-value.port-neg { text-shadow: 0 0 20px rgba(242, 53, 69, 0.30); }
.port-hero-unit {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}
.port-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.port-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-family: 'JetBrains Mono', monospace;
}
.port-sub-key {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
.port-sub-val { color: rgba(255, 255, 255, 0.9); }
.port-sub-val.port-pos { color: var(--pos); }
.port-sub-val.port-neg { color: var(--neg); }
.port-spark-host {
    margin-top: 8px;
    height: 100px;
    width: 100%;
}
.port-line-svg { display: block; width: 100%; }
.port-empty {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    font-size: 0.78rem;
    padding: 10px 0;
}
.port-empty-tiny {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    padding: 6px 0;
}

/* ── Δ Exposure stack ──────────────────────────────────────── */
.port-stack-host { margin-top: 10px; }
.port-stack-bar {
    display: flex;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
}
.port-stack-seg {
    height: 100%;
    transition: width 0.4s;
}
.port-stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.port-stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-family: 'JetBrains Mono', monospace;
}
.port-stack-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.port-stack-prod {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}
.port-stack-mt { font-weight: 700; }

/* ── Greeks thermometer ────────────────────────────────────── */
.port-greeks-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}
.port-greek-row {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}
.port-greek-label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.port-greek-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: visible;
}
.port-greek-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s;
}
.port-greek-warmline {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.45);
}
.port-zone-cool .port-greek-fill { background: var(--pos); }
.port-zone-warm .port-greek-fill { background: var(--warm); }
.port-zone-hot  .port-greek-fill { background: var(--hot); }
.port-greek-value {
    text-align: right;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
}
.port-zone-warm .port-greek-value { color: var(--warm); }
.port-zone-hot  .port-greek-value { color: var(--hot); }

/* ── Live underlying ticker ────────────────────────────────── */
.port-ticker-host {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.port-tick {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 14px;
}
.port-tick-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.port-tick-prod {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
}
.port-tick-contract {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', monospace;
}
.port-tick-flag {
    margin-left: auto;
    font-size: 0.6rem;
    background: rgba(242, 53, 69, 0.18);
    color: #ff8b95;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.8px;
}
.port-tick-price {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.port-tick-change {
    font-size: 0.85rem;
}
.port-tick-spark {
    height: 36px;
    margin: 6px 0 4px;
}
.port-tick-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Section heading ───────────────────────────────────────── */
.port-section { margin-bottom: 22px; }
.port-section-title {
    font-size: 0.72rem;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Per-commodity P&L cards ───────────────────────────────── */
.port-commodity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.port-comm-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.3s, transform 0.3s;
}
.port-comm-card.port-card-port-pos { border-left: 3px solid var(--pos); }
.port-comm-card.port-card-port-neg { border-left: 3px solid var(--neg); }
.port-comm-card:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.18); }
.port-comm-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.port-comm-prod {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
}
.port-comm-px {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}
.port-comm-pnl {
    font-size: 1.7rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin: 6px 0 2px;
    letter-spacing: -0.3px;
}
.port-comm-pnl-sub {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}
.port-comm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.port-comm-key { color: rgba(255, 255, 255, 0.45); }
.port-comm-val { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.port-comm-row-sub {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ── Position lifecycle (Gantt) ────────────────────────────── */
.port-timeline-host {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 18px;
}
.port-tl-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 14px;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    transition: background 0.2s;
}
.port-tl-row:hover { background: rgba(255, 255, 255, 0.03); }
.port-tl-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.port-tl-name {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.port-tl-meta {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.port-tl-track {
    position: relative;
    height: 28px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    overflow: visible;
}
.port-tl-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
}
.port-tl-bar-port-pos { background: linear-gradient(90deg, rgba(20, 241, 149, 0.55), rgba(20, 241, 149, 0.25)); }
.port-tl-bar-port-neg { background: linear-gradient(90deg, rgba(242, 53, 69, 0.55), rgba(242, 53, 69, 0.20)); }
.port-tl-bar-port-neu { background: rgba(255, 255, 255, 0.10); }
.port-tl-bar-pnl { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.port-tl-today {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* ── Position cards w/ payoff ──────────────────────────────── */
.port-positions-host {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.port-pos-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow 0.4s, transform 0.4s, border-color 0.4s;
}
.port-pos-card.port-card-flash {
    border-color: rgba(20, 241, 149, 0.6);
    box-shadow: 0 0 32px rgba(20, 241, 149, 0.25);
}
.port-pos-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 12px;
}
.port-pos-name {
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
}
.port-pos-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}
.port-pos-strategy {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 6px;
    font-style: italic;
}
.port-pos-pnl-block { text-align: right; }
.port-pos-pnl {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}
.port-pos-pnl-sub {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 4px;
}
.port-pos-pnl-daily {
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 4px;
}
.port-pos-realized-row {
    margin: 8px 0 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(255, 215, 64, 0.55);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.port-pos-realized-lbl {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.port-pos-realized-sep {
    color: rgba(255, 255, 255, 0.25);
}
.port-pos-partials {
    margin: 4px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.port-pos-partials-lbl {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.port-realized-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}
.port-pos-greeks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    margin-bottom: 14px;
}
.port-pos-greeks .port-key {
    color: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}
.port-pos-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .port-pos-grid { grid-template-columns: 1fr; }
}
.port-payoff {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 6px 10px 6px;
    min-height: 250px;
}
.port-payoff-title {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0 8px 6px;
    font-family: 'JetBrains Mono', monospace;
}
.port-pay-now {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.port-axis-lbl {
    fill: rgba(255, 255, 255, 0.4);
    font-size: 0.66rem;
    font-family: 'JetBrains Mono', monospace;
}
.port-leg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
}
.port-leg-table th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 700;
    font-size: 0.62rem;
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.port-leg-table td {
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
}
.port-leg-side {
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.66rem;
    letter-spacing: 0.8px;
}
.port-leg-long  { background: rgba(20, 241, 149, 0.16); color: var(--pos); }
.port-leg-short { background: rgba(242, 53, 69, 0.18); color: var(--neg); }
.port-leg-contract { color: rgba(255, 255, 255, 0.65); }
.port-leg-ent { color: rgba(255, 255, 255, 0.55); }
.port-leg-mk  { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
.port-leg-change { margin-left: 4px; font-weight: 700; }
.port-leg-fee {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
}
.port-stress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.port-stress-title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 4px;
}
.port-stress-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
}
.port-stress-name { color: rgba(255, 255, 255, 0.55); }
.port-stress-val { font-weight: 700; }
.port-stress-pill.port-pos .port-stress-val { color: var(--pos); }
.port-stress-pill.port-neg .port-stress-val { color: var(--neg); }