/* ── Variables ──────────────────────────────────────────────── */
    :root {
        --rmz-bg:       #ffffff;
        --rmz-surface:  #ffffff;
        --rmz-border:   #d1d5da;
        --rmz-accent:   #e67e22;
        --rmz-accent-2: #f39c12;
        --rmz-text:     #8b949e;
        --rmz-muted:    #8b949e;
        --rmz-green:    #2ea043;
        --rmz-red:      #da3633;
        --rmz-blue:     #388bfd;
        --font-main:    'Barlow Condensed', 'Barlow', sans-serif;
        --font-mono:    'JetBrains Mono', monospace;
        --radius:       10px;
        --shadow:       0 4px 24px rgba(0,0,0,.45);
    }

    /* ── Dashboard wrapper ──────────────────────────────────────── */
    .rmz-dashboard {
        color: var(--rmz-text);
        font-family: var(--font-main);
        min-height: 60vh;
        padding: 0 0 2rem;
        border-radius: var(--radius);
        margin-top: .75rem;
    }

    /* ── Season + Stage selector bar ───────────────────────────── */
    .dash-controls {
        background: var(--rmz-surface);
        border: 1px solid var(--rmz-border);
        border-radius: var(--radius);
        padding: .85rem 1.1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        align-items: center;
        margin-bottom: 1rem;
    }

    /* Season pills */
    .season-pills {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        align-items: center;
    }
    .season-pill {
        display: inline-block;
        padding: .28rem .8rem;
        border: 1.5px solid var(--rmz-border);
        border-radius: 20px;
        font-size: .78rem;
        font-weight: 700;
        color: var(--rmz-muted);
        cursor: pointer;
        transition: all .15s;
        text-decoration: none;
        white-space: nowrap;
    }
    .season-pill:hover,
    .season-pill.active {
        background: var(--rmz-accent);
        border-color: var(--rmz-accent);
        color: #fff;
    }

    /* Conf/div select */
    .dash-controls select {
        height: 34px;
        border-radius: 6px;
        border: 1px solid var(--rmz-border);

        color: var(--rmz-text);
        font-family: var(--font-main);
        font-size: .88rem;
        padding: 0 .8rem;
    }
    .dash-controls select:focus {
        outline: none;
        border-color: var(--rmz-accent);
        box-shadow: 0 0 0 2px rgba(230,126,34,.2);
    }

    /* Action buttons */
    .btn-rmz {
        height: 34px;
        padding: 0 1rem;
        border-radius: 6px;
        background: var(--rmz-accent);
        color: #fff;
        border: none;
        font-family: var(--font-main);
        font-size: .88rem;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s;
    }
    .btn-rmz:hover { background: var(--rmz-accent-2); }
    .btn-rmz-outline {
        background: transparent;
        border: 1.5px solid var(--rmz-accent);
        color: var(--rmz-accent);
    }
    .btn-rmz-outline:hover { background: var(--rmz-accent); color: #fff; }

    /* ── Summary Cards ──────────────────────────────────────────── */
    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: .75rem;
        margin-bottom: 1rem;
    }
    .s-card {
        background: var(--rmz-surface);
        border: 1px solid var(--rmz-border);
        border-radius: var(--radius);
        padding: .9rem 1rem .85rem;
        position: relative;
        overflow: hidden;
        transition: border-color .2s;
    }
    .s-card:hover { border-color: var(--rmz-accent); }
    .s-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--card-accent, var(--rmz-accent));
    }
    .s-card .s-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rmz-muted); }
    .s-card .s-value { font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: #f5862b; }
    .s-card .s-sub   { font-size: .74rem; color: var(--rmz-muted); margin-top: .1rem; }

    /* ── Main Tabs ──────────────────────────────────────────────── */
    .rmz-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid var(--rmz-border);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .rmz-tabs::-webkit-scrollbar { display: none; }
    .rmz-tab {
        padding: .6rem 1.05rem;
        font-size: .83rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        background: transparent;
        color: var(--rmz-muted);
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color .15s, border-color .15s;
        white-space: nowrap;
    }
    .rmz-tab.active, .rmz-tab:hover {
        color: var(--rmz-accent);
        border-bottom-color: var(--rmz-accent);
    }

    /* ── Stage sub-tabs (within standings panel) ────────────────── */
    .stage-subtabs {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        margin: .85rem 0 .65rem;
    }
    .stage-subtab {
        padding: .28rem .8rem;
        font-size: .76rem;
        font-weight: 700;
        border: 1.5px solid var(--rmz-border);
        border-radius: 20px;
        background: transparent;
        color: var(--rmz-muted);
        cursor: pointer;
        transition: all .15s;
    }
    .stage-subtab.active {
        background: var(--rmz-surface);
        border-color: var(--rmz-accent);
        color: var(--rmz-accent);
    }

    /* ── Tab panels ─────────────────────────────────────────────── */
    .tab-panel { display: none; padding: 1rem 0 0; }
    .tab-panel.active { display: block; }

    /* ── Cards (estilo del proyecto) ────────────────────────────── */
    .card--has-table {
        margin-bottom: 30px;
        background: var(--rmz-surface);
        border: 1px solid var(--rmz-border);
        border-radius: var(--radius);
        overflow: hidden;
    }
    .card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--rmz-border);
    }
    .card__header h4 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--rmz-text);
    }
    .card__content {
        padding: 0;
    }
    /* .team-result-filter {
        display: flex;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
    }
    .team-result-filter__item .form-control {
        height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: 1px solid var(--rmz-border);
        background: #0d1117;
        color: var(--rmz-text);
    } */
    .btn-default.btn-outline {
        background: transparent;
        border: 1px solid var(--rmz-accent);
        color: var(--rmz-accent);
        border-radius: 6px;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s;
    }
    .btn-default.btn-outline:hover {
        background: var(--rmz-accent);
        color: #fff;
    }
    .btn-xs {
        height: 32px;
    }

    /* ── Tables estilo proyecto ─────────────────────────────────── */
    .table-responsive {
        overflow-x: auto;
        max-height: 560px;
        overflow-y: auto;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
        font-family: var(--font-main);
    }
    .table-hover tbody tr {
        border-bottom: 1px solid var(--rmz-border);
        transition: background .1s;
        cursor: pointer;
    }
    .table-hover tbody tr:hover {
        background: rgba(230,126,34,.05);
    }
    .table thead th {
        background: var(--rmz-surface);
        color: var(--rmz-muted);
        font-size: .70rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: .6rem .7rem;
        border-bottom: 2px solid var(--rmz-border);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
        cursor: pointer;
        user-select: none;
    }
    .table thead th:hover { color: var(--rmz-accent); }
    .table thead th.sorted { color: var(--rmz-accent); }
    .table thead th.sorted::after { content: ' ↓'; }
    .table thead th.sorted.asc::after { content: ' ↑'; }
    .table tbody td {
        padding: .55rem .7rem;
        vertical-align: middle;
    }

    /* Team meta (estilo proyecto) */
    .team-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .team-meta__logo {
        width: 40px;
        height: auto;
        margin-right: 5px;
        flex-shrink: 0;
    }
    .team-meta__logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .team-meta__info {
        display: flex;
        flex-direction: column;
    }
    .team-meta__name {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--rmz-text);
    }
    .team-meta__place {
        font-size: 0.7rem;
        color: var(--rmz-muted);
    }

    /* Rank badge */
    .rank-badge {
        width: 26px; height: 26px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: .78rem;
        background: var(--rmz-surface);
        border: 1.5px solid var(--rmz-border);
        flex-shrink: 0;
    }
    .rank-badge.rank-1 { background: var(--rmz-accent);  border-color: var(--rmz-accent);  color: #fff; }
    .rank-badge.rank-2 { background: #8b949e;             border-color: #8b949e;            color: #fff; }
    .rank-badge.rank-3 { background: #cd7f32;             border-color: #cd7f32;            color: #fff; }

    .team-standings__pos { text-align: center; width: 45px; }
    .team-standings__team { min-width: 200px; }

    /* Trend */
    .trend-up   { color: var(--rmz-green); font-weight: 700; }
    .trend-down { color: var(--rmz-red);   font-weight: 700; }
    .trend-flat { color: var(--rmz-muted); }

    /* Form pills */
    .form-pill { display: inline-flex; gap: 2px; font-size: .64rem; font-weight: 800; font-family: var(--font-mono); }
    .form-w { color: var(--rmz-green); }
    .form-l { color: var(--rmz-red); }

    /* Rank color cell */
    .rank-cell { font-weight: 700; color: var(--rmz-text); text-align: center; }

    /* ── Chart cards ────────────────────────────────────────────── */
    .chart-card {
        background: var(--rmz-surface);
        border: 1px solid var(--rmz-border);
        border-radius: var(--radius);
        padding: 1rem;
        display: flex; flex-direction: column;
        min-height: 300px;
    }
    .chart-card .chart-title {
        font-size: .75rem; text-transform: uppercase;
        letter-spacing: .08em; color: var(--rmz-muted);
        margin-bottom: .65rem; flex-shrink: 0;
    }
    .chart-card canvas { flex: 1; width: 100% !important; min-height: 220px; }

    /* ── Loading overlay ────────────────────────────────────────── */
    .loading-overlay {
        display: none; position: absolute; inset: 0;
        background: rgba(13,17,23,.72);
        backdrop-filter: blur(3px);
        border-radius: var(--radius);
        align-items: center; justify-content: center;
        z-index: 10;
    }
    .loading-overlay.active { display: flex; }
    .spinner-rmz {
        width: 34px; height: 34px;
        border: 3px solid var(--rmz-border);
        border-top-color: var(--rmz-accent);
        border-radius: 50%;
        animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Sort/filter buttons ────────────────────────────────────── */
    .sort-btn {
        background: transparent;
        border: 1px solid var(--rmz-border);
        color: var(--rmz-muted);
        border-radius: 5px;
        padding: .28rem .6rem;
        font-size: .76rem;
        cursor: pointer;
        transition: all .15s;
        font-family: var(--font-main);
    }
    .sort-btn.active {
        border-color: var(--rmz-accent);
        color: var(--rmz-accent);
        background: rgba(230,126,34,.1);
    }

    /* ── Toast ──────────────────────────────────────────────────── */
    #toast-container {
        position: fixed; bottom: 1.5rem; right: 1.5rem;
        z-index: 9999; display: flex; flex-direction: column; gap: .45rem;
    }
    .toast-rmz {
        background: var(--rmz-surface);
        border-left: 4px solid var(--rmz-accent);
        border-radius: 8px;
        padding: .75rem 1.1rem;
        min-width: 250px;
        box-shadow: var(--shadow);
        display: flex; align-items: center; gap: .65rem;
        animation: slideIn .22s ease;
        font-size: .85rem;
        color: var(--rmz-text);
    }
    .toast-rmz.toast-success { border-color: var(--rmz-green); }
    .toast-rmz.toast-error   { border-color: var(--rmz-red); }
    @keyframes slideIn  { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes slideOut { to   { transform: translateX(120%); opacity: 0; } }
    .toast-rmz.hide { animation: slideOut .22s ease forwards; }

    /* ── FEDOMBAL H2H matrix ────────────────────────────────────── */
    .team-row-key { display: none; }
    .h2h-table { border-collapse: separate; border-spacing: 0; }
    .h2h-table td, .h2h-table th {
        border-right: 1px solid var(--rmz-border);
        border-bottom: 1px solid var(--rmz-border);
        padding: .45rem .55rem;
        font-size: .8rem;
        text-align: center;
    }
    .h2h-table thead th { background: var(--rmz-surface); color: var(--rmz-muted); }
    .h2h-table .h2h-self { background: rgba(56,139,253,.08); }

    /* ── Prediction bar ─────────────────────────────────────────── */
    .pred-card {
        background: var(--rmz-surface);
        border: 1px solid var(--rmz-border);
        border-radius: var(--radius);
        padding: .85rem;
        position: relative;
        overflow: hidden;
        transition: border-color .2s;
    }
    .pred-card::before {
        content: ''; position: absolute;
        top: 0; left: 0; right: 0; height: 3px;
        background: var(--card-accent, var(--rmz-accent));
    }
    .pred-card:hover { border-color: var(--rmz-accent); }

    /* ── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 768px) {
        .summary-cards { grid-template-columns: repeat(2, 1fr); }
        .rmz-tab { font-size: .75rem; padding: .5rem .75rem; }
        .card__header { flex-direction: column; gap: 10px; align-items: flex-start; }

        /* Frente a Frente / Series Particulares: en móvil el nombre completo
           del equipo en la fila desperdicia demasiado ancho, se usa el
           team_key (abreviatura) en su lugar. */
        .team-row-key { display: inline; }
        .team-row-fullname { display: none; }
    }




/* ── Zebra striping para tablas del dashboard ───────────────── */
.table-standings tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
.table-standings tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
.table-standings tbody tr:hover {
    background-color: rgba(230, 126, 34, 0.05) !important;
}

/* Sin fondo continuo en tbody — elimina cualquier bg heredado */
.table-standings tbody {
    background: transparent;
}

/* Separación visual entre secciones dentro del panel fedombal */
#fedombal-content .card--has-table {
    margin-bottom: 1.25rem;
}

/* H2H: highlight diagonal */
.h2h-table tbody td.h2h-self {
    background: rgba(230, 126, 34, 0.06) !important;
}

/* Zebra para tablas sin clase table-standings (h2h, particular) */
#fedombal-content .table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
#fedombal-content .table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
#fedombal-content .table tbody tr:hover {
    background-color: rgba(230, 126, 34, 0.05) !important;
}

/* Quitar el fondo azulado heredado en th del H2H */
#fedombal-content .h2h-table th {
    background: #ffffff;
}
#fedombal-content .h2h-table thead th {
    background: #f8f9fa;
}




/* ════════════════════════════════════════════════════════════════
   PANEL DE ESCENARIOS — CSS COMPLETO
   El widget se inyecta dinámicamente dentro de #scenarios-content,
   por lo que todo va scoped bajo ese ID para no contaminar el resto.
════════════════════════════════════════════════════════════════ */

/* ── Wrapper general del panel ── */
#scenarios-content .panel {
    padding: 1rem 0;
}

#scenarios-content .section-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rmz-muted);
    margin-bottom: .5rem;
}

/* ── Tabla de standings dentro del panel ── */
#scenarios-content .standings-wrap {
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

#scenarios-content .standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: var(--font-main);
}

#scenarios-content .standings-table thead th {
    padding: .45rem .7rem;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--rmz-muted);
    border-bottom: 2px solid var(--rmz-border);
    background: #f8f9fa;
    white-space: nowrap;
}

#scenarios-content .standings-table thead th:not(:first-child) {
    text-align: center;
}

#scenarios-content .standings-table tbody td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--rmz-border);
    color: #31404b;
    vertical-align: middle;
}

#scenarios-content .standings-table tbody tr:last-child td {
    border-bottom: none;
}

#scenarios-content .standings-table tbody td:not(:first-child):not(:nth-child(2)) {
    text-align: center;
}

#scenarios-content .standings-table tbody tr:hover {
    background: rgba(230,126,34,.04);
}

/* Zebra striping */
#scenarios-content .standings-table tbody tr:nth-child(odd)  { background: #ffffff; }
#scenarios-content .standings-table tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
#scenarios-content .standings-table tbody tr:hover           { background: rgba(230,126,34,.05) !important; }

/* Nombre del equipo */
#scenarios-content .team-name {
    font-weight: 500;
    color: #31404b;
}

/* Rank dot (badges de posición) */
#scenarios-content .rank-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--rmz-border);
    color: var(--rmz-text);
    background: #fff;
}
#scenarios-content .rank-1 { background: #f4b942; border-color: #e0a030; color: #5a3800; }
#scenarios-content .rank-3 { background: #cd7f32; border-color: #cd7f32; color: #fff; }

/* Diffs */
#scenarios-content .diff-pos { color: var(--rmz-green); font-weight: 700; }
#scenarios-content .diff-neg { color: var(--rmz-red);   font-weight: 700; }
#scenarios-content .games-left { font-size: 11px; color: var(--rmz-muted); font-weight: 500; }

/* ── Tabs del widget ── */
#scenarios-content .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rmz-border);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
#scenarios-content .tabs::-webkit-scrollbar { display: none; }

#scenarios-content .tab-btn {
    padding: .45rem 1rem;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--rmz-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .15s;
    white-space: nowrap;
    font-family: var(--font-main);
}
#scenarios-content .tab-btn.active {
    color: var(--rmz-accent);
    border-bottom-color: var(--rmz-accent);
}
#scenarios-content .tab-btn:hover {
    color: var(--rmz-accent);
}

#scenarios-content .tab-content { display: none; }
#scenarios-content .tab-content.active { display: block; }

/* ── Grid H2H ── */
#scenarios-content .h2h-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

#scenarios-content .h2h-card {
    border: 1px solid var(--rmz-border);
    border-radius: 8px;
    padding: .75rem;
    background: #fff;
}

#scenarios-content .h2h-header {
    font-size: 13px;
    font-weight: 500;
    color: #31404b;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--rmz-border);
    padding-bottom: .4rem;
}

#scenarios-content .h2h-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 0;
    font-size: 12px;
    color: var(--rmz-text);
    border-bottom: 1px solid rgba(0,0,0,.04);
}
#scenarios-content .h2h-row:last-child { border-bottom: none; }

#scenarios-content .h2h-badge {
    font-size: 11px;
    font-weight: 500;
    padding: .15rem .5rem;
    border-radius: 10px;
    white-space: nowrap;
}
#scenarios-content .badge-adv {
    background: rgba(46,160,67,.12);
    color: var(--rmz-green);
}
#scenarios-content .badge-dis {
    background: rgba(218,54,51,.1);
    color: var(--rmz-red);
}
#scenarios-content .badge-tie {
    background: rgba(0,0,0,.04);
    color: var(--rmz-muted);
    border: 1px solid var(--rmz-border);
}

/* ── Narrative cards ── */
#scenarios-content .narrative-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

#scenarios-content .narrative-card {
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: 1rem;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
#scenarios-content .narrative-card:hover {
    border-color: var(--rmz-accent);
    box-shadow: 0 2px 12px rgba(230,126,34,.08);
}
#scenarios-content .narrative-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--nc-accent, var(--rmz-border));
}

#scenarios-content .nc-green  { --nc-accent: var(--rmz-green); }
#scenarios-content .nc-amber  { --nc-accent: var(--rmz-accent); }
#scenarios-content .nc-red    { --nc-accent: var(--rmz-red); }
#scenarios-content .nc-gray   { --nc-accent: var(--rmz-muted); }

#scenarios-content .nc-team {
    font-size: 15px;
    font-weight: 500;
    color: #31404b;
    margin-bottom: .3rem;
}

#scenarios-content .nc-record {
    font-size: 12px;
    color: var(--rmz-muted);
    margin-bottom: .6rem;
}

#scenarios-content .nc-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: .15rem .55rem;
    border-radius: 10px;
    margin-bottom: .65rem;
    font-family: var(--font-main);
}

#scenarios-content .status-green {
    background: rgba(46,160,67,.12);
    color: var(--rmz-green);
}
#scenarios-content .status-amber {
    background: rgba(230,126,34,.12);
    color: var(--rmz-accent);
}
#scenarios-content .status-red {
    background: rgba(218,54,51,.1);
    color: var(--rmz-red);
}
#scenarios-content .status-gray {
    background: rgba(0,0,0,.04);
    color: var(--rmz-muted);
    border: 1px solid var(--rmz-border);
}

#scenarios-content .nc-body {
    font-size: 13px;
    color: var(--rmz-text);
    line-height: 1.55;
}
#scenarios-content .nc-body .highlight {
    color: #31404b;
    font-weight: 500;
}

#scenarios-content .nc-footer {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--rmz-border);
    font-size: 11px;
    color: var(--rmz-muted);
}

/* ── Probability bars ── */
#scenarios-content .prob-grid {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

#scenarios-content .prob-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 13px;
    padding: .35rem 0;
}

#scenarios-content .prob-name {
    min-width: 190px;
    font-weight: 500;
    color: #31404b;
    font-family: var(--font-main);
}

#scenarios-content .prob-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--rmz-border);
    border-radius: 4px;
    overflow: hidden;
}

#scenarios-content .prob-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .7s ease;
}

#scenarios-content .bar-green  { background: var(--rmz-green); }
#scenarios-content .bar-amber  { background: var(--rmz-accent); }
#scenarios-content .bar-gray   { background: var(--rmz-muted); }

#scenarios-content .prob-pct {
    min-width: 42px;
    text-align: right;
    color: var(--rmz-muted);
    font-size: 12px;
    font-weight: 500;
}

/* ── Insights panel ── */
#scenarios-content .insights {
    border: 1px solid var(--rmz-border);
    border-radius: var(--radius);
    padding: 1rem;
    background: #fff;
}

#scenarios-content .insight-row {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .45rem 0;
    font-size: 13px;
    color: var(--rmz-text);
    line-height: 1.55;
}
#scenarios-content .insight-row:not(:last-child) {
    border-bottom: 1px solid var(--rmz-border);
}

#scenarios-content .insight-icon {
    flex-shrink: 0;
    color: var(--rmz-muted);
    margin-top: 2px;
    font-size: 15px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #scenarios-content .narrative-grid {
        grid-template-columns: 1fr;
    }
    #scenarios-content .h2h-grid {
        grid-template-columns: 1fr;
    }
    #scenarios-content .prob-name {
        min-width: 130px;
    }
    #scenarios-content .tab-btn {
        font-size: .75rem;
        padding: .4rem .7rem;
    }
}