/* /Components/Analysis/AnalysisHero.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HERO PANEL — Signature Deep Green with Ambient Glow
   ═══════════════════════════════════════════════════════════════ */

.hero-panel[b-7ok5i5kn5w] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.85fr);
    gap: 1.5rem;
    padding: 2.5rem;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #f8fafb;
    border: none;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

/* Ambient glow effects */
.hero-panel[b-7ok5i5kn5w]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 384px;
    height: 384px;
    background: rgba(152, 210, 197, 0.2);
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
}

.hero-panel[b-7ok5i5kn5w]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 256px;
    height: 256px;
    background: rgba(0, 96, 168, 0.15);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
}

.hero-copy-block[b-7ok5i5kn5w] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.85rem;
}

.hero-copy-top[b-7ok5i5kn5w] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.hero-panel .eyebrow[b-7ok5i5kn5w] {
    color: rgba(179, 238, 225, 0.85);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.hero-step[b-7ok5i5kn5w] {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.7rem;
    border: none;
    border-radius: 999px;
    color: rgba(244, 251, 247, 0.88);
    background: rgba(152, 210, 197, 0.2);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel h1[b-7ok5i5kn5w] {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-headline);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #f8fafb;
}

.hero-description[b-7ok5i5kn5w] {
    margin: 0;
    max-width: 58ch;
    color: rgba(179, 238, 225, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
}

.hero-tags[b-7ok5i5kn5w] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.hero-tags .chip.soft[b-7ok5i5kn5w] {
    color: rgba(179, 238, 225, 0.9);
    background: rgba(152, 210, 197, 0.15);
}

.hero-actions[b-7ok5i5kn5w] {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.hero-link[b-7ok5i5kn5w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.72rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.hero-link:hover[b-7ok5i5kn5w] {
    transform: translateY(-1px);
}

.hero-link-primary[b-7ok5i5kn5w] {
    color: var(--primary);
    background: #f8fafb;
    box-shadow: 0 14px 28px rgba(0, 53, 46, 0.3);
}

.hero-link-primary:hover[b-7ok5i5kn5w] {
    box-shadow: 0 18px 36px rgba(0, 53, 46, 0.4);
    opacity: 0.95;
}

.hero-link-secondary[b-7ok5i5kn5w] {
    color: #f8fafb;
    border: none;
    background: rgba(255, 255, 255, 0.08);
}

.hero-link-secondary:hover[b-7ok5i5kn5w] {
    background: rgba(255, 255, 255, 0.14);
}

/* ── Hero Metric Grid ── */
.hero-metric-grid[b-7ok5i5kn5w] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.hero-metric[b-7ok5i5kn5w] {
    min-height: 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #f8fafb;
    box-shadow: none;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-metric .metric-label[b-7ok5i5kn5w],
.hero-metric .metric-note[b-7ok5i5kn5w] {
    color: rgba(179, 238, 225, 0.6);
}

.hero-metric strong[b-7ok5i5kn5w] {
    color: #f8fafb;
}

.hero-metric-highlight[b-7ok5i5kn5w] {
    background: rgba(179, 238, 225, 0.15);
    border-top: 2px solid rgba(179, 238, 225, 0.3);
}

@media (max-width: 1120px) {
    .hero-panel[b-7ok5i5kn5w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .hero-panel[b-7ok5i5kn5w] {
        padding: 1.75rem 1.25rem;
    }

    .hero-copy-top[b-7ok5i5kn5w],
    .hero-metric-grid[b-7ok5i5kn5w] {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hero-actions[b-7ok5i5kn5w] {
        display: grid;
    }
}
/* /Components/Analysis/InvestmentInsightsPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   INVESTMENT INSIGHTS PANEL
   Matches the Precise Lithograph Design System
   ═══════════════════════════════════════════════════════════════ */

.investment-insights-section[b-0csaowdiix] {
    border-top: 3px solid var(--primary);
}

/* ── Tab Strip (must be scoped here due to CSS isolation) ───── */

.tab-strip[b-0csaowdiix] {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: var(--surface-container-low);
    width: fit-content;
    flex-wrap: wrap;
}

.tab-btn[b-0csaowdiix] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.tab-btn svg[b-0csaowdiix] {
    flex-shrink: 0;
}

.tab-btn:hover[b-0csaowdiix] {
    background: var(--primary-fixed);
    color: var(--on-primary-fixed-variant);
}

.tab-btn.active[b-0csaowdiix] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 14px rgba(0, 53, 46, 0.22);
}

/* ── Chart containment (scoped; not in app.css) ───────────── */

.chart-host[b-0csaowdiix] {
    width: 100%;
    min-height: 0;
    flex-grow: 1;
    overflow: hidden;
}

.chart-host-sm[b-0csaowdiix]  { min-height: 150px; max-height: 200px; }
.chart-host-md[b-0csaowdiix]  { min-height: 175px; max-height: 240px; }
.chart-host-lg[b-0csaowdiix]  { min-height: 200px; max-height: 280px; }
.chart-host-xl[b-0csaowdiix]  { min-height: 240px; max-height: 320px; }

/* ── Grid layout spans (scoped) ───────────────────────────── */

.chart-card-primary[b-0csaowdiix] { grid-column: span 7; }
.chart-card-wide[b-0csaowdiix]    { grid-column: span 12; }
.chart-card-side[b-0csaowdiix]    { grid-column: span 5; }

.insights-grid[b-0csaowdiix] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}

/* ── Waterfall Chart ─────────────────────────────────────────── */

.waterfall-container[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 0;
}

.wf-row[b-0csaowdiix] {
    display: grid;
    grid-template-columns: 180px 1fr 60px;
    align-items: center;
    gap: 0.75rem;
}

.wf-label[b-0csaowdiix] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface);
    text-align: right;
}

.wf-bar-track[b-0csaowdiix] {
    height: 32px;
    border-radius: 8px;
    background: var(--surface-container-low);
    overflow: hidden;
}

.wf-bar[b-0csaowdiix] {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    min-width: fit-content;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wf-bar span[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.wf-bar-positive[b-0csaowdiix] {
    background: linear-gradient(90deg, var(--primary), #2d8a7a);
}

.wf-bar-arbitrage[b-0csaowdiix] {
    background: linear-gradient(90deg, var(--secondary), #3a8ad4);
}

.wf-bar-imbalance[b-0csaowdiix] {
    background: linear-gradient(90deg, var(--tertiary), #7a3dd6);
}

.wf-bar-negative[b-0csaowdiix] {
    background: linear-gradient(90deg, #d44e4e, #b83939);
}

.wf-pct[b-0csaowdiix] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--on-surface-variant);
}

.wf-divider[b-0csaowdiix] {
    border-top: 1px dashed rgba(0, 53, 46, 0.15);
    padding: 0.5rem 0 0.25rem;
    margin: 0.25rem 0;
}

.wf-divider-label[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.wf-divider-result[b-0csaowdiix] {
    border-top: 2px solid var(--primary);
    margin-top: 0.5rem;
}

.wf-result-label[b-0csaowdiix] {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

/* ── Revenue Split Visual ────────────────────────────────────── */

.revenue-split-visual[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.rev-segment[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rev-seg-fill[b-0csaowdiix] {
    height: 8px;
    border-radius: 4px;
    background: var(--seg-color);
    width: calc(var(--seg-pct) * 1%);
    min-width: 4px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rev-seg-label[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.rev-segment strong[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--on-surface);
}

/* ── Price Duration Curve ────────────────────────────────────── */

.pdc-legend[b-0csaowdiix] {
    display: flex;
    gap: 1.25rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.pdc-legend span[b-0csaowdiix] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.legend-dot[b-0csaowdiix] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.price-stats-grid[b-0csaowdiix] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.price-stat[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface-container-low);
}

.price-stat span[b-0csaowdiix] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.price-stat strong[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-surface);
}

.price-stat.highlight[b-0csaowdiix] {
    background: rgba(0, 53, 46, 0.06);
    grid-column: span 2;
}

.price-stat.highlight strong[b-0csaowdiix] {
    color: var(--primary);
    font-size: 1.1rem;
}

/* ── Scenario Cards ──────────────────────────────────────────── */

.scenario-cards[b-0csaowdiix] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

.scenario-card[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: var(--surface-container-low);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.scenario-card:hover[b-0csaowdiix] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 53, 46, 0.08);
}

.scenario-card-bull[b-0csaowdiix] {
    background: linear-gradient(135deg, rgba(0, 53, 46, 0.04), rgba(152, 210, 197, 0.12));
    border: 1px solid rgba(152, 210, 197, 0.3);
}

.scenario-card-base[b-0csaowdiix] {
    border: 1px solid rgba(0, 53, 46, 0.1);
}

.scenario-card-bear[b-0csaowdiix] {
    background: linear-gradient(135deg, rgba(212, 78, 78, 0.04), rgba(212, 78, 78, 0.08));
    border: 1px solid rgba(212, 78, 78, 0.2);
}

.scenario-header[b-0csaowdiix] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.scenario-icon[b-0csaowdiix] {
    font-size: 1.5rem;
    line-height: 1;
}

.scenario-header strong[b-0csaowdiix] {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface);
}

.scenario-multiplier[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--on-surface-variant);
}

.scenario-metrics[b-0csaowdiix] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.scenario-metric[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scenario-metric span[b-0csaowdiix] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.scenario-metric strong[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.scenario-metric strong.positive[b-0csaowdiix] {
    color: var(--primary);
}

.scenario-metric strong.negative[b-0csaowdiix] {
    color: #d44e4e;
}

/* ── Carbon / ESG ────────────────────────────────────────────── */

.carbon-hero-grid[b-0csaowdiix] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
}

.carbon-hero-card[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 20px;
    background: var(--surface-container-low);
    text-align: center;
    transition: transform 200ms ease;
}

.carbon-hero-card:hover[b-0csaowdiix] {
    transform: translateY(-2px);
}

.carbon-hero-primary[b-0csaowdiix] {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.carbon-icon[b-0csaowdiix] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 53, 46, 0.08);
    color: var(--primary);
}

.carbon-icon-tree[b-0csaowdiix],
.carbon-icon-car[b-0csaowdiix] {
    font-size: 2rem;
    background: none;
}

.carbon-hero-value[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--primary);
    line-height: 1;
}

.carbon-hero-unit[b-0csaowdiix] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.carbon-hero-desc[b-0csaowdiix] {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    line-height: 1.4;
}

.carbon-detail-row[b-0csaowdiix] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

.carbon-detail[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface-container-low);
}

.carbon-detail span[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.carbon-detail strong[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-surface);
}

.eco-chip[b-0csaowdiix] {
    background: rgba(76, 175, 80, 0.12) !important;
    color: #2e7d32 !important;
}

/* ── Degradation ─────────────────────────────────────────────── */

.row-positive[b-0csaowdiix] {
    background: rgba(152, 210, 197, 0.08);
}

.row-positive td.kpi-col[b-0csaowdiix] {
    color: var(--primary);
    font-weight: 700;
}

.row-warning[b-0csaowdiix] {
    background: rgba(255, 152, 0, 0.08);
}

.row-warning td[b-0csaowdiix] {
    color: #e65100;
}

/* ── Forecast / Price Profile ──────────────────────────────── */

.forecast-op-grid[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem 0;
}

.op-section[b-0csaowdiix] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--surface-container-low);
}

.op-charge[b-0csaowdiix] {
    border-left: 3px solid var(--primary);
}

.op-discharge[b-0csaowdiix] {
    border-left: 3px solid #e83e8c;
}

.op-title[b-0csaowdiix] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.op-row[b-0csaowdiix] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.op-row strong[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface);
}

.op-row span[b-0csaowdiix] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.op-spread-value[b-0csaowdiix] {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
}

.op-note[b-0csaowdiix] {
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    font-style: italic;
}

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

@media (max-width: 900px) {
    .insights-grid[b-0csaowdiix] {
        grid-template-columns: 1fr;
    }

    .chart-card-primary[b-0csaowdiix],
    .chart-card-wide[b-0csaowdiix],
    .chart-card-side[b-0csaowdiix] {
        grid-column: auto;
    }

    .scenario-cards[b-0csaowdiix] {
        grid-template-columns: 1fr;
    }

    .carbon-hero-grid[b-0csaowdiix] {
        grid-template-columns: 1fr;
    }

    .carbon-detail-row[b-0csaowdiix] {
        grid-template-columns: 1fr;
    }

    .wf-row[b-0csaowdiix] {
        grid-template-columns: 120px 1fr 50px;
    }

    .price-stats-grid[b-0csaowdiix] {
        grid-template-columns: 1fr;
    }

    .tab-strip[b-0csaowdiix] {
        width: 100%;
    }
}
/* /Components/Analysis/OptimizationResultsSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   OptimizationResultsSection — Precise Lithograph Design
   Premium Dashboard Experience
   ═══════════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────────── */
.result-section[b-iclekulaie] {
    display: grid;
    gap: 1.25rem;
}

.section-copy[b-iclekulaie] {
    margin: 0.15rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 60ch;
}

/* ═════════════════════════════════════════════════════════
   HERO KPI ROW — Winner highlight
   ═════════════════════════════════════════════════════════ */

.hero-kpi-row[b-iclekulaie] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.hero-kpi[b-iclekulaie] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background: var(--surface-container-low);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.hero-kpi:hover[b-iclekulaie] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 53, 46, 0.08);
}

.hero-kpi-total[b-iclekulaie] {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
}

.hero-kpi-total .hero-kpi-content span[b-iclekulaie] {
    color: rgba(179, 238, 225, 0.7);
}

.hero-kpi-total .hero-kpi-content strong[b-iclekulaie] {
    color: #f8fafb;
}

.hero-kpi-icon[b-iclekulaie] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-container-high);
    color: var(--primary);
    flex-shrink: 0;
}

.hero-kpi-icon-accent[b-iclekulaie] {
    background: rgba(0, 96, 168, 0.1);
    color: var(--secondary);
}

.hero-kpi-icon-total[b-iclekulaie] {
    background: rgba(255, 255, 255, 0.15);
    color: #f8fafb;
}

.hero-kpi-content[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hero-kpi-content span[b-iclekulaie] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.hero-kpi-content strong[b-iclekulaie] {
    font-family: var(--font-headline);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    color: var(--on-surface);
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-kpi-content strong small[b-iclekulaie] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-left: 0.15rem;
}

.hero-kpi-operator[b-iclekulaie] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(0, 53, 46, 0.25);
    flex-shrink: 0;
    padding: 0 0.15rem;
}

/* ═════════════════════════════════════════════════════════
   WINNER BAND — Horizontal detail strip
   ═════════════════════════════════════════════════════════ */

.winner-band[b-iclekulaie] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    background: var(--surface-container-low);
}

.winner-band-item[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.winner-band-item span[b-iclekulaie] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.winner-band-item strong[b-iclekulaie] {
    font-family: var(--font-headline);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.winner-band-divider[b-iclekulaie] {
    width: 1px;
    align-self: stretch;
    background: rgba(191, 201, 197, 0.18);
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   METRIC RIBBON — Secondary KPIs
   ═════════════════════════════════════════════════════════ */

.metric-ribbon[b-iclekulaie] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.ribbon-item[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: var(--surface-container-low);
    border-radius: 16px;
    border-left: 3px solid var(--surface-variant);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.ribbon-item:hover[b-iclekulaie] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 53, 46, 0.08);
}

.ribbon-item span[b-iclekulaie] {
    font-size: 0.65rem;
    color: var(--on-surface-variant);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ribbon-item strong[b-iclekulaie] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ribbon-item:nth-child(1)[b-iclekulaie] { border-left-color: var(--primary-fixed-dim); }
.ribbon-item:nth-child(2)[b-iclekulaie] { border-left-color: var(--secondary); }
.ribbon-item:nth-child(3)[b-iclekulaie] { border-left-color: var(--tertiary); }

/* ═════════════════════════════════════════════════════════
   INSIGHT PILLS
   ═════════════════════════════════════════════════════════ */

.insight-pills[b-iclekulaie] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.insight-pill[b-iclekulaie] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    background: var(--primary-fixed);
    color: var(--on-primary-fixed-variant);
    border-radius: 99px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 150ms ease, color 150ms ease;
}

.insight-pill:hover[b-iclekulaie] {
    background: rgba(0, 53, 46, 0.12);
    color: var(--primary);
}

/* ═════════════════════════════════════════════════════════
   ENGINEERING GRID — Technical metrics
   ═════════════════════════════════════════════════════════ */

.engineering-grid[b-iclekulaie] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.engineering-card[b-iclekulaie] {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: var(--surface-container-low);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.engineering-card:hover[b-iclekulaie] {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 53, 46, 0.06);
}

.engineering-label[b-iclekulaie] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.engineering-card strong[b-iclekulaie] {
    font-family: var(--font-headline);
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--primary);
}

.engineering-card p[b-iclekulaie] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

/* ═════════════════════════════════════════════════════════
   TAB STRIP — Modern segmented control
   ═════════════════════════════════════════════════════════ */

.tab-strip[b-iclekulaie] {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: var(--surface-container-low);
    width: fit-content;
}

.tab-btn[b-iclekulaie] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.tab-btn svg[b-iclekulaie] {
    flex-shrink: 0;
}

.tab-btn:hover[b-iclekulaie] {
    background: var(--primary-fixed);
    color: var(--on-primary-fixed-variant);
}

.tab-btn.active[b-iclekulaie] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 14px rgba(0, 53, 46, 0.22);
}

/* ═════════════════════════════════════════════════════════
   SELECTED BAND
   ═════════════════════════════════════════════════════════ */

.sel-band[b-iclekulaie] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    padding: 0.35rem 0.65rem;
    background: var(--primary-fixed);
    border-radius: 8px;
    width: fit-content;
}

/* ═════════════════════════════════════════════════════════
   DASHBOARD GRID — Chart layout
   ═════════════════════════════════════════════════════════ */

.dashboard-grid[b-iclekulaie] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.optimization-grid[b-iclekulaie] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.chart-card-side[b-iclekulaie] {
    grid-column: span 6;
}

.chart-card-wide[b-iclekulaie] {
    grid-column: span 12;
}

/* ═════════════════════════════════════════════════════════
   CHART CARD — Modern glass container
   ═════════════════════════════════════════════════════════ */

.chart-card[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--surface-container-lowest);
    border-radius: 20px;
    transition: box-shadow 250ms ease, transform 250ms ease;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 8px 28px rgba(0, 53, 46, 0.05);
}

.chart-card:hover[b-iclekulaie] {
    box-shadow: 0 14px 40px rgba(0, 53, 46, 0.09);
    transform: translateY(-2px);
}

/* ── Chart card head ───────────────────────────────────── */
.chart-card-head[b-iclekulaie] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.chart-card-head > div[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.chart-card-head h3[b-iclekulaie] {
    font-size: 0.9rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    line-height: 1.3;
}

.chart-card-head .eyebrow[b-iclekulaie] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--on-surface-variant);
    font-weight: 700;
}

.chart-card-copy[b-iclekulaie] {
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.45;
}

.chart-meta[b-iclekulaie] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.chart-kpi[b-iclekulaie] {
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* ═════════════════════════════════════════════════════════
   CHART HOST — Responsive containers
   ═════════════════════════════════════════════════════════ */

.chart-host[b-iclekulaie] {
    width: 100%;
    min-height: 0;
    flex-grow: 1;
}

.chart-host-sm[b-iclekulaie]  { min-height: 150px; }
.chart-host-md[b-iclekulaie]  { min-height: 175px; }
.chart-host-lg[b-iclekulaie]  { min-height: 200px; }
.chart-host-xl[b-iclekulaie]  { min-height: 240px; }

/* ── SVG scatter chart ─────────────────────────────────── */
.chart-svg[b-iclekulaie] {
    width: 100%;
    height: 100%;
    max-height: 280px;
    display: block;
    overflow: visible;
}

/* ═════════════════════════════════════════════════════════
   MUDBLAZOR CHART OVERRIDES — Clean professional look
   ═════════════════════════════════════════════════════════ */

:deep(.mud-chart)[b-iclekulaie] {
    font-family: var(--font-body) !important;
    width: 100% !important;
}

:deep(.mud-chart svg)[b-iclekulaie] {
    width: 100% !important;
    height: 100% !important;
}

:deep(.mud-chart text)[b-iclekulaie],
:deep(.mud-chart tspan)[b-iclekulaie] {
    font-family: var(--font-body) !important;
    font-size: 9px !important;
    fill: var(--on-surface-variant) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

:deep(.mud-charts-gridline)[b-iclekulaie] {
    stroke: rgba(191, 201, 197, 0.08) !important;
}

:deep(.mud-chart-legend)[b-iclekulaie] {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
}

:deep(.mud-chart-legend-item)[b-iclekulaie] {
    gap: 6px !important;
}

/* ═════════════════════════════════════════════════════════
   CHART EMPTY STATE
   ═════════════════════════════════════════════════════════ */

.chart-empty[b-iclekulaie] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    font-style: italic;
    background: var(--surface-container-low);
    border-radius: 14px;
    margin: 0;
    text-align: center;
    padding: 1rem;
}

/* ═════════════════════════════════════════════════════════
   DATA TABLE — Clean professional grid
   ═════════════════════════════════════════════════════════ */

.data-table-shell[b-iclekulaie] {
    overflow: auto;
    border-radius: 16px;
    background: var(--surface-container-lowest);
    box-shadow: 0 8px 28px rgba(0, 53, 46, 0.05);
}

.data-table[b-iclekulaie] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-family: var(--font-body);
}

.data-table th[b-iclekulaie] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(191, 201, 197, 0.12);
    white-space: nowrap;
}

.data-table td[b-iclekulaie] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(191, 201, 197, 0.06);
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left;
}

.data-table tbody tr:last-child td[b-iclekulaie] {
    border-bottom: none;
}

.data-table tbody tr[b-iclekulaie] {
    transition: background 150ms ease;
}

.data-table tbody tr:hover td[b-iclekulaie] {
    background: rgba(0, 53, 46, 0.03);
}

.best-row[b-iclekulaie] {
    background: rgba(76, 0, 202, 0.04) !important;
}

.best-row td[b-iclekulaie] {
    font-weight: 600;
}

.best-row td:first-child[b-iclekulaie] {
    color: var(--tertiary);
}

.kpi-col[b-iclekulaie] {
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

/* ═════════════════════════════════════════════════════════
   SENSITIVITY MATRIX
   ═════════════════════════════════════════════════════════ */

.matrix-legend[b-iclekulaie] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    flex-wrap: wrap;
}

.matrix-legend-bar[b-iclekulaie] {
    flex: 1;
    max-width: 100px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 53, 46, 0.06), rgba(0, 53, 46, 0.5));
}

.matrix-legend-best[b-iclekulaie] {
    font-weight: 700;
    color: var(--tertiary);
    font-size: 0.7rem;
    background: var(--tertiary-fixed);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}

.matrix-table-shell[b-iclekulaie] {
    overflow: auto;
    border-radius: 16px;
    background: var(--surface-container-lowest);
    box-shadow: 0 8px 28px rgba(0, 53, 46, 0.05);
}

.matrix-table[b-iclekulaie] {
    border-collapse: collapse;
    font-size: 0.74rem;
    font-family: var(--font-mono);
    min-width: max-content;
    width: 100%;
}

.matrix-table th[b-iclekulaie],
.matrix-table td[b-iclekulaie] {
    padding: 0.35rem 0.5rem;
    text-align: center;
    border: 1px solid rgba(191, 201, 197, 0.06);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.matrix-table th[b-iclekulaie] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(191, 201, 197, 0.12);
}

.matrix-row-label[b-iclekulaie] {
    text-align: left !important;
    font-weight: 700;
    background: var(--surface-container-low) !important;
    color: var(--on-surface-variant);
    position: sticky;
    left: 0;
    z-index: 2;
}

.matrix-cell[b-iclekulaie] {
    transition: transform 150ms ease;
    cursor: default;
}

.matrix-cell:hover[b-iclekulaie] {
    transform: scale(1.04);
    z-index: 3;
    position: relative;
    outline: 1px solid rgba(0, 53, 46, 0.2);
}

.best-cell[b-iclekulaie] {
    border: 2px solid var(--primary) !important;
    font-weight: 700;
    color: var(--primary);
}

/* ═════════════════════════════════════════════════════════
   CHIPS
   ═════════════════════════════════════════════════════════ */

.chip[b-iclekulaie] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    white-space: nowrap;
}

.chip.success[b-iclekulaie] { background: rgba(15, 159, 110, 0.12); color: var(--success); }
.chip.soft[b-iclekulaie]    { background: var(--surface-container-low); color: var(--on-surface-variant); }

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .hero-kpi-row[b-iclekulaie] {
        flex-wrap: wrap;
    }

    .hero-kpi[b-iclekulaie] {
        flex: 1 1 calc(33% - 1rem);
    }

    .hero-kpi-operator[b-iclekulaie] {
        display: none;
    }
}

@media (max-width: 860px) {
    .metric-ribbon[b-iclekulaie] {
        grid-template-columns: repeat(3, 1fr);
    }

    .engineering-grid[b-iclekulaie] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid[b-iclekulaie],
    .optimization-grid[b-iclekulaie] {
        grid-template-columns: 1fr;
    }

    .chart-card.span-2[b-iclekulaie],
    .chart-card-side[b-iclekulaie],
    .chart-card-wide[b-iclekulaie] {
        grid-column: span 1;
    }

    .winner-band[b-iclekulaie] {
        flex-wrap: wrap;
    }

    .winner-band-divider[b-iclekulaie] {
        display: none;
    }

    .winner-band-item[b-iclekulaie] {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (max-width: 640px) {
    .result-section[b-iclekulaie] {
        gap: 1rem;
    }

    .hero-kpi-row[b-iclekulaie] {
        flex-direction: column;
    }

    .hero-kpi[b-iclekulaie] {
        flex: none;
    }

    .engineering-grid[b-iclekulaie],
    .metric-ribbon[b-iclekulaie] {
        grid-template-columns: 1fr;
    }

    .tab-strip[b-iclekulaie] {
        width: 100%;
        overflow-x: auto;
    }

    .chart-card[b-iclekulaie] {
        padding: 0.8rem;
    }

    .hero-kpi-content strong[b-iclekulaie] {
        font-size: 1.1rem;
    }

    .winner-band[b-iclekulaie] {
        flex-direction: column;
        gap: 0.6rem;
    }

    .winner-band-divider[b-iclekulaie] {
        display: none;
    }

    .winner-band-item[b-iclekulaie] {
        flex: none;
    }
}
/* /Components/Analysis/ParameterWorkspace.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Parameter Workspace — Precise Lithograph Design
   ═══════════════════════════════════════════════════════ */

/* Main card container — must define grid+gap here because
   .workspace-card in UploadWorkspace is scoped and won't apply */
.workspace-card[b-4te4fhc6h3] {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    height: auto;
}

/* ═════════════════════════════════════════════════════════
   SUMMARY ROW — Compact horizontal key metrics
   ═════════════════════════════════════════════════════════ */

.summary-row[b-4te4fhc6h3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-radius: 16px;
    background: var(--surface-container-low);
}

.summary-item[b-4te4fhc6h3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.summary-label[b-4te4fhc6h3] {
    color: var(--on-surface-variant);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.summary-item strong[b-4te4fhc6h3] {
    font-family: var(--font-headline);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-surface);
    overflow-wrap: anywhere;
}

.summary-divider[b-4te4fhc6h3] {
    width: 1px;
    align-self: stretch;
    background: rgba(191, 201, 197, 0.18);
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   PARAM GROUP — Tonal grouped sections
   ═════════════════════════════════════════════════════════ */

.param-group[b-4te4fhc6h3] {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: var(--surface-container-low);
}

.param-group-header[b-4te4fhc6h3] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.param-group-header h3[b-4te4fhc6h3] {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

.param-group-header p[b-4te4fhc6h3] {
    margin: 0.1rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* Group icons */
.param-group-icon[b-4te4fhc6h3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 53, 46, 0.14);
}

.param-group-icon-secondary[b-4te4fhc6h3] {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-container));
    color: var(--on-secondary);
    box-shadow: 0 6px 18px rgba(0, 96, 168, 0.14);
}

.param-group-icon-tertiary[b-4te4fhc6h3] {
    background: linear-gradient(135deg, var(--tertiary), var(--tertiary-container));
    color: var(--on-tertiary);
    box-shadow: 0 6px 18px rgba(76, 0, 202, 0.12);
}

/* ═════════════════════════════════════════════════════════
   PARAM FIELDS GRID
   ═════════════════════════════════════════════════════════ */

.param-fields-grid[b-4te4fhc6h3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.param-fields-3col[b-4te4fhc6h3] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ═════════════════════════════════════════════════════════
   INPUT SHELL — Tonal input with suffix badge
   ═════════════════════════════════════════════════════════ */

.input-shell label[b-4te4fhc6h3] {
    margin-bottom: 0.34rem;
}

.input-wrap[b-4te4fhc6h3] {
    position: relative;
}

.input-wrap input[b-4te4fhc6h3] {
    width: 100%;
    min-height: 48px;
    padding: 0.68rem 4rem 0.68rem 0.88rem;
    border: none;
    font-weight: 700;
    background: var(--surface-container-high);
    box-shadow: none;
    border-radius: 12px;
    color: var(--on-surface);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.input-wrap input:focus[b-4te4fhc6h3] {
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.input-suffix[b-4te4fhc6h3] {
    position: absolute;
    right: 0.78rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 0.74rem;
    font-weight: 700;
    pointer-events: none;
}

/* ═════════════════════════════════════════════════════════
   GRID SEARCH — Stacked rows with labeled inputs
   ═════════════════════════════════════════════════════════ */

.grid-search-rows[b-4te4fhc6h3] {
    display: grid;
    gap: 0.85rem;
}

.grid-search-row[b-4te4fhc6h3] {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--surface-container-high);
}

.grid-search-row label[b-4te4fhc6h3] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
}

.grid-search-row label span[b-4te4fhc6h3] {
    color: var(--outline);
    font-weight: 600;
}

.grid-search-fields[b-4te4fhc6h3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.grid-search-field[b-4te4fhc6h3] {
    display: grid;
    gap: 0.2rem;
}

.grid-search-hint[b-4te4fhc6h3] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-align: center;
}

.grid-search-field input[b-4te4fhc6h3] {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: none;
    font-weight: 700;
    background: var(--surface-container-lowest);
    border-radius: 10px;
    text-align: center;
    color: var(--on-surface);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.grid-search-field input:focus[b-4te4fhc6h3] {
    background: var(--surface-container-lowest);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* ═════════════════════════════════════════════════════════
   RULE CALLOUT — Horizontal info card
   ═════════════════════════════════════════════════════════ */

.rule-callout[b-4te4fhc6h3] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: var(--tertiary-fixed);
    color: var(--on-tertiary-fixed);
}

.rule-callout-icon[b-4te4fhc6h3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(76, 0, 202, 0.12);
    color: var(--on-tertiary-fixed);
    flex-shrink: 0;
}

.rule-callout strong[b-4te4fhc6h3] {
    font-size: 0.88rem;
    display: block;
    margin-bottom: 0.2rem;
}

.rule-callout p[b-4te4fhc6h3] {
    margin: 0;
    opacity: 0.8;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* ═════════════════════════════════════════════════════════
   ACTION BAR — Spacious button area
   ═════════════════════════════════════════════════════════ */

.action-bar[b-4te4fhc6h3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: var(--surface-container-low);
}

.action-bar-text[b-4te4fhc6h3] {
    display: grid;
    gap: 0.15rem;
}

.action-bar-text strong[b-4te4fhc6h3] {
    font-family: var(--font-headline);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface);
}

.action-bar-text p[b-4te4fhc6h3] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.78rem;
    line-height: 1.5;
}

.action-bar-buttons[b-4te4fhc6h3] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .param-fields-3col[b-4te4fhc6h3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-row[b-4te4fhc6h3] {
        flex-wrap: wrap;
    }

    .summary-divider[b-4te4fhc6h3] {
        display: none;
    }

    .summary-item[b-4te4fhc6h3] {
        flex: 0 0 calc(33% - 0.5rem);
    }
}

@media (max-width: 640px) {
    .workspace-card[b-4te4fhc6h3] {
        padding: 1rem;
        gap: 1rem;
    }

    .param-group[b-4te4fhc6h3] {
        padding: 0.85rem;
    }

    .param-fields-grid[b-4te4fhc6h3],
    .param-fields-3col[b-4te4fhc6h3] {
        grid-template-columns: 1fr;
    }

    .action-bar[b-4te4fhc6h3] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar-buttons[b-4te4fhc6h3] {
        flex-direction: column;
    }

    .action-bar-buttons .action-btn[b-4te4fhc6h3] {
        width: 100%;
        justify-content: center;
    }

    .summary-row[b-4te4fhc6h3] {
        flex-direction: column;
        gap: 0.6rem;
    }

    .summary-divider[b-4te4fhc6h3] {
        display: none;
    }

    .summary-item[b-4te4fhc6h3] {
        flex: none;
    }

    .param-group-header[b-4te4fhc6h3] {
        gap: 0.65rem;
    }

    .param-group-icon[b-4te4fhc6h3] {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}
/* /Components/Analysis/ProcessStepper.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PROCESS STEPPER — Precise Lithograph Analysis Timeline
   ═══════════════════════════════════════════════════════════════ */

.process-panel[b-ul1s34p1qk] {
    padding: 1.25rem 1.5rem;
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.stepper-track[b-ul1s34p1qk] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 0.35rem;
    gap: 0.55rem;
}

/* Connecting rail behind dots */
.stepper-rail[b-ul1s34p1qk] {
    position: absolute;
    top: 24px;
    left: 8%;
    right: 8%;
    height: 4px;
    background: var(--surface-container-high);
    z-index: 0;
    border-radius: 999px;
    overflow: hidden;
}

.rail-done[b-ul1s34p1qk] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary));
    border-radius: 999px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each step column */
.stepper-node[b-ul1s34p1qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 1;
    padding: 0.15rem;
}

/* Circle marker */
.node-dot[b-ul1s34p1qk] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    transition: background-color 250ms ease, box-shadow 250ms ease;
    background: var(--surface-container-low);
    border: none;
    color: var(--on-surface-variant);
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.stepper-node.done .node-dot[b-ul1s34p1qk] {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
}

.stepper-node.current .node-dot[b-ul1s34p1qk] {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--on-primary);
    box-shadow: 0 0 0 4px rgba(47, 104, 94, 0.12), 0 12px 40px rgba(0, 53, 46, 0.12);
}

/* Labels */
.node-label[b-ul1s34p1qk] {
    text-align: center;
    padding: 0.2rem 0.45rem 0.4rem;
    border-radius: 12px;
    min-width: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
}

.node-label strong[b-ul1s34p1qk] {
    display: block;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    font-weight: 700;
    line-height: 1.2;
}

.stepper-node.done .node-label strong[b-ul1s34p1qk] {
    color: var(--primary);
    font-weight: 700;
}

.stepper-node.current .node-label strong[b-ul1s34p1qk] {
    color: var(--primary);
    font-weight: 800;
}

.node-label span[b-ul1s34p1qk] {
    display: block;
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    margin-top: 0.18rem;
    line-height: 1.4;
    opacity: 0.7;
}

.stepper-node.current .node-label span[b-ul1s34p1qk] {
    opacity: 1;
}

@media (max-width: 960px) {
    .stepper-track[b-ul1s34p1qk] {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1rem;
    }

    .stepper-rail[b-ul1s34p1qk] {
        display: none;
    }
}

@media (max-width: 560px) {
    .stepper-track[b-ul1s34p1qk] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Analysis/QualityPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Quality Panel — Full-Width 2-Column Layout
   Precise Lithograph Design
   ═══════════════════════════════════════════════════════ */

.quality-panel[b-illmgauu3r] {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
}

/* ═════════════════════════════════════════════════════════
   2-COLUMN GRID
   ═════════════════════════════════════════════════════════ */

.quality-grid[b-illmgauu3r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.quality-col[b-illmgauu3r] {
    display: grid;
    gap: 1rem;
}

/* ═════════════════════════════════════════════════════════
   QUALITY BLOCK — Tonal grouped section
   ═════════════════════════════════════════════════════════ */

.quality-block[b-illmgauu3r] {
    display: grid;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    background: var(--surface-container-low);
}

.quality-block-header[b-illmgauu3r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quality-block-header h3[b-illmgauu3r] {
    margin: 0.05rem 0 0;
    font-size: 0.92rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

.quality-block-header p[b-illmgauu3r] {
    margin: 0.05rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.74rem;
    line-height: 1.4;
}

/* Block icons */
.quality-block-icon[b-illmgauu3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 53, 46, 0.14);
}

.quality-block-icon-secondary[b-illmgauu3r] {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-container));
    color: var(--on-secondary);
    box-shadow: 0 6px 18px rgba(0, 96, 168, 0.14);
}

.quality-block-icon-tertiary[b-illmgauu3r] {
    background: linear-gradient(135deg, var(--tertiary), var(--tertiary-container));
    color: var(--on-tertiary);
    box-shadow: 0 6px 18px rgba(76, 0, 202, 0.12);
}

/* ═════════════════════════════════════════════════════════
   GAUGE BAR — Compact horizontal quality indicator
   ═════════════════════════════════════════════════════════ */

.gauge-card[b-illmgauu3r] {
    display: grid;
    gap: 0.5rem;
}

.gauge-header[b-illmgauu3r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.gauge-score[b-illmgauu3r] {
    font-size: 1.45rem;
    font-family: var(--font-headline);
    font-weight: 800;
    line-height: 1;
    color: var(--on-surface);
}

.gauge-score small[b-illmgauu3r] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-left: 0.1rem;
}

.gauge-score-placeholder[b-illmgauu3r] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface);
}

.gauge-badge[b-illmgauu3r] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    white-space: nowrap;
}

.gauge-badge.high[b-illmgauu3r] { background: rgba(15, 159, 110, 0.12); color: var(--success); }
.gauge-badge.mid[b-illmgauu3r]  { background: rgba(182, 119, 18, 0.12); color: #b67712; }
.gauge-badge.low[b-illmgauu3r]  { background: rgba(182, 59, 59, 0.12); color: #b63b3b; }

.gauge-track[b-illmgauu3r] {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: var(--surface-container-high);
    overflow: hidden;
}

.gauge-fill[b-illmgauu3r] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-fill.high[b-illmgauu3r]  { background: linear-gradient(90deg, #177245, #0f9f6e); }
.gauge-fill.mid[b-illmgauu3r]   { background: linear-gradient(90deg, #b67712, #d4a030); }
.gauge-fill.low[b-illmgauu3r]   { background: linear-gradient(90deg, #b63b3b, #d35050); }
.gauge-fill.empty[b-illmgauu3r] { width: 0; }

.gauge-tick[b-illmgauu3r] {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.gauge-labels[b-illmgauu3r] {
    display: flex;
    justify-content: space-between;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--outline);
    letter-spacing: 0.02em;
    padding: 0 0.05rem;
}

.gauge-note[b-illmgauu3r] {
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    line-height: 1.4;
}

/* ═════════════════════════════════════════════════════════
   QUALITY STATS ROW
   ═════════════════════════════════════════════════════════ */

.quality-stats-row[b-illmgauu3r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.quality-stat[b-illmgauu3r] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: var(--surface-container-high);
}

.quality-stat span[b-illmgauu3r] {
    color: var(--on-surface-variant);
    font-size: 0.68rem;
    font-weight: 600;
}

.quality-stat strong[b-illmgauu3r] {
    font-family: var(--font-headline);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--on-surface);
}

/* ═════════════════════════════════════════════════════════
   NEXT STEP CARD
   ═════════════════════════════════════════════════════════ */

.next-step-card[b-illmgauu3r] {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: var(--tertiary-fixed);
    color: var(--on-tertiary-fixed);
}

.next-step-card strong[b-illmgauu3r] {
    font-size: 0.88rem;
}

.next-step-card p[b-illmgauu3r] {
    margin: 0.3rem 0 0;
    color: var(--on-tertiary-fixed);
    opacity: 0.8;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════
   RULE LIST
   ═════════════════════════════════════════════════════════ */

.rule-list[b-illmgauu3r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.rule-list li[b-illmgauu3r] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: var(--surface-container-high);
    font-size: 0.78rem;
    color: var(--on-surface);
    line-height: 1.45;
}

.rule-list li svg[b-illmgauu3r] {
    color: var(--primary);
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .quality-grid[b-illmgauu3r] {
        grid-template-columns: 1fr;
    }

    .quality-stats-row[b-illmgauu3r] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .quality-panel[b-illmgauu3r] {
        padding: 1rem;
        gap: 1rem;
    }

    .quality-block[b-illmgauu3r] {
        padding: 0.85rem;
    }

    .quality-stats-row[b-illmgauu3r] {
        grid-template-columns: 1fr;
    }

    .quality-block-icon[b-illmgauu3r] {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
}
/* /Components/Analysis/SimulationResultsSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   SimulationResultsSection — Precise Lithograph Design
   Premium Dashboard Experience
   ═══════════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────────── */
.result-section[b-xp3upbrexr] {
    display: grid;
    gap: 1.25rem;
}

.section-copy[b-xp3upbrexr] {
    margin: 0.15rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 60ch;
}

/* ═════════════════════════════════════════════════════════
   HERO KPI ROW — Primary financial metrics
   ═════════════════════════════════════════════════════════ */

.hero-kpi-row[b-xp3upbrexr] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.hero-kpi[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background: var(--surface-container-low);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.hero-kpi:hover[b-xp3upbrexr] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 53, 46, 0.08);
}

.hero-kpi-total[b-xp3upbrexr] {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
}

.hero-kpi-total .hero-kpi-content span[b-xp3upbrexr] {
    color: rgba(179, 238, 225, 0.7);
}

.hero-kpi-total .hero-kpi-content strong[b-xp3upbrexr] {
    color: #f8fafb;
}

.hero-kpi-total .hero-kpi-content strong small[b-xp3upbrexr] {
    color: rgba(179, 238, 225, 0.6);
}

.hero-kpi-icon[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-container-high);
    color: var(--primary);
    flex-shrink: 0;
}

.hero-kpi-icon-accent[b-xp3upbrexr] {
    background: rgba(0, 96, 168, 0.1);
    color: var(--secondary);
}

.hero-kpi-icon-total[b-xp3upbrexr] {
    background: rgba(255, 255, 255, 0.15);
    color: #f8fafb;
}

.hero-kpi-content[b-xp3upbrexr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hero-kpi-content span[b-xp3upbrexr] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}

.hero-kpi-content strong[b-xp3upbrexr] {
    font-family: var(--font-headline);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    color: var(--on-surface);
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-kpi-content strong small[b-xp3upbrexr] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-left: 0.15rem;
}

.hero-kpi-operator[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(0, 53, 46, 0.25);
    flex-shrink: 0;
    padding: 0 0.15rem;
}

/* ═════════════════════════════════════════════════════════
   SPLIT BAR — Income composition
   ═════════════════════════════════════════════════════════ */

.split-bar-wrap[b-xp3upbrexr] {
    padding: 0.65rem 1rem;
    border-radius: 14px;
    background: var(--surface-container-low);
}

.split-label-row[b-xp3upbrexr] {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    margin-bottom: 0.35rem;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.split-label-row strong[b-xp3upbrexr] {
    font-weight: 700;
    color: var(--on-surface);
}

.split-dot[b-xp3upbrexr] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.split-dot.base[b-xp3upbrexr]   { background: var(--secondary-fixed-dim); }
.split-dot.extra[b-xp3upbrexr]  { background: var(--tertiary); }

.split-track[b-xp3upbrexr] {
    display: flex;
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-container-high);
    gap: 2px;
}

.split-fill[b-xp3upbrexr] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-fill.base[b-xp3upbrexr]  { background: var(--secondary-fixed-dim); }
.split-fill.extra[b-xp3upbrexr] { background: linear-gradient(90deg, var(--tertiary), var(--tertiary-fixed-dim)); }

/* ═════════════════════════════════════════════════════════
   METRIC RIBBON — Secondary KPIs
   ═════════════════════════════════════════════════════════ */

.metric-ribbon[b-xp3upbrexr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.ribbon-item[b-xp3upbrexr] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: var(--surface-container-low);
    border-radius: 16px;
    border-left: 3px solid var(--surface-variant);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.ribbon-item:hover[b-xp3upbrexr] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 53, 46, 0.08);
}

.ribbon-item span[b-xp3upbrexr] {
    font-size: 0.65rem;
    color: var(--on-surface-variant);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ribbon-item strong[b-xp3upbrexr] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ribbon-item:nth-child(1)[b-xp3upbrexr] { border-left-color: var(--primary-fixed-dim); }
.ribbon-item:nth-child(2)[b-xp3upbrexr] { border-left-color: var(--secondary); }
.ribbon-item:nth-child(3)[b-xp3upbrexr] { border-left-color: var(--tertiary); }

/* ═════════════════════════════════════════════════════════
   INSIGHT PILLS
   ═════════════════════════════════════════════════════════ */

.insight-pills[b-xp3upbrexr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.insight-pill[b-xp3upbrexr] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    background: var(--primary-fixed);
    color: var(--on-primary-fixed-variant);
    border-radius: 99px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 150ms ease, color 150ms ease;
}

.insight-pill:hover[b-xp3upbrexr] {
    background: rgba(0, 53, 46, 0.12);
    color: var(--primary);
}

/* ═════════════════════════════════════════════════════════
   ENGINEERING GRID — Technical metrics
   ═════════════════════════════════════════════════════════ */

.engineering-grid[b-xp3upbrexr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.engineering-card[b-xp3upbrexr] {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: var(--surface-container-low);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.engineering-card:hover[b-xp3upbrexr] {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 53, 46, 0.06);
}

.engineering-label[b-xp3upbrexr] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.engineering-card strong[b-xp3upbrexr] {
    font-family: var(--font-headline);
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--primary);
}

.engineering-card p[b-xp3upbrexr] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

/* ═════════════════════════════════════════════════════════
   TAB STRIP — Modern segmented control
   ═════════════════════════════════════════════════════════ */

.tab-strip[b-xp3upbrexr] {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: var(--surface-container-low);
    width: fit-content;
}

.tab-btn[b-xp3upbrexr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.tab-btn svg[b-xp3upbrexr] {
    flex-shrink: 0;
}

.tab-btn:hover[b-xp3upbrexr] {
    background: var(--primary-fixed);
    color: var(--on-primary-fixed-variant);
}

.tab-btn.active[b-xp3upbrexr] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 14px rgba(0, 53, 46, 0.22);
}

.compact-btn[b-xp3upbrexr] {
    font-size: 0.72rem;
    padding: 0.28rem 0.6rem;
    margin-left: 0.25rem;
    border-radius: 8px;
}

/* ═════════════════════════════════════════════════════════
   SELECTED BAND
   ═════════════════════════════════════════════════════════ */

.sel-band[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    padding: 0.35rem 0.65rem;
    background: var(--primary-fixed);
    border-radius: 8px;
    width: fit-content;
}

/* ═════════════════════════════════════════════════════════
   DASHBOARD GRID — Chart layout
   ═════════════════════════════════════════════════════════ */

.dashboard-grid[b-xp3upbrexr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.simulation-grid[b-xp3upbrexr] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.chart-card-primary[b-xp3upbrexr] {
    grid-column: span 7;
}

.chart-card-wide[b-xp3upbrexr] {
    grid-column: span 7;
}

.chart-card-side[b-xp3upbrexr] {
    grid-column: span 5;
}

/* ═════════════════════════════════════════════════════════
   CHART CARD — Modern glass container
   ═════════════════════════════════════════════════════════ */

.chart-card[b-xp3upbrexr] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--surface-container-lowest);
    border-radius: 20px;
    transition: box-shadow 250ms ease, transform 250ms ease;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 8px 28px rgba(0, 53, 46, 0.05);
}

.chart-card:hover[b-xp3upbrexr] {
    box-shadow: 0 14px 40px rgba(0, 53, 46, 0.09);
    transform: translateY(-2px);
}

/* ── Chart card head ───────────────────────────────────── */
.chart-card-head[b-xp3upbrexr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.chart-card-head > div[b-xp3upbrexr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.chart-card-head h3[b-xp3upbrexr] {
    font-size: 0.9rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    line-height: 1.3;
}

.chart-card-head .eyebrow[b-xp3upbrexr] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--on-surface-variant);
    font-weight: 700;
}

.chart-card-copy[b-xp3upbrexr] {
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: 1.45;
}

.chart-meta[b-xp3upbrexr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.chart-kpi[b-xp3upbrexr] {
    font-family: var(--font-headline);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* ── Mini legend ───────────────────────────────────────── */
.mini-legend[b-xp3upbrexr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    font-weight: 700;
    align-items: center;
}

.mini-legend > span[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.legend-dot[b-xp3upbrexr] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   CHART HOST — Responsive containers
   ═════════════════════════════════════════════════════════ */

.chart-host[b-xp3upbrexr] {
    width: 100%;
    min-height: 0;
    flex-grow: 1;
}

.chart-host-sm[b-xp3upbrexr]  { min-height: 150px; }
.chart-host-md[b-xp3upbrexr]  { min-height: 175px; }
.chart-host-lg[b-xp3upbrexr]  { min-height: 200px; }
.chart-host-xl[b-xp3upbrexr]  { min-height: 240px; }

/* ═════════════════════════════════════════════════════════
   MUDBLAZOR CHART OVERRIDES — Clean professional look
   ═════════════════════════════════════════════════════════ */

:deep(.mud-chart)[b-xp3upbrexr] {
    font-family: var(--font-body) !important;
    width: 100% !important;
}

:deep(.mud-chart svg)[b-xp3upbrexr] {
    width: 100% !important;
    height: 100% !important;
}

:deep(.mud-chart text)[b-xp3upbrexr],
:deep(.mud-chart tspan)[b-xp3upbrexr] {
    font-family: var(--font-body) !important;
    font-size: 9px !important;
    fill: var(--on-surface-variant) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

:deep(.mud-charts-gridline)[b-xp3upbrexr] {
    stroke: rgba(191, 201, 197, 0.08) !important;
}

:deep(.mud-chart-legend)[b-xp3upbrexr] {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
}

:deep(.mud-chart-legend-item)[b-xp3upbrexr] {
    gap: 6px !important;
}

/* ═════════════════════════════════════════════════════════
   CHART EMPTY STATE
   ═════════════════════════════════════════════════════════ */

.chart-empty[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    font-style: italic;
    background: var(--surface-container-low);
    border-radius: 14px;
    margin: 0;
    text-align: center;
    padding: 1rem;
}

/* ═════════════════════════════════════════════════════════
   DATA TABLE — Clean professional grid
   ═════════════════════════════════════════════════════════ */

.data-table-shell[b-xp3upbrexr] {
    overflow: auto;
    border-radius: 16px;
    background: var(--surface-container-lowest);
    box-shadow: 0 8px 28px rgba(0, 53, 46, 0.05);
}

.hourly-shell[b-xp3upbrexr] {
    max-height: 480px;
    overflow: auto;
}

.data-table[b-xp3upbrexr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-family: var(--font-body);
}

.data-table th[b-xp3upbrexr] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(191, 201, 197, 0.12);
    white-space: nowrap;
}

.data-table td[b-xp3upbrexr] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(191, 201, 197, 0.06);
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left;
}

.data-table tbody tr:last-child td[b-xp3upbrexr] {
    border-bottom: none;
}

.data-table tbody tr[b-xp3upbrexr] {
    transition: background 150ms ease;
}

.data-table tbody tr:hover td[b-xp3upbrexr] {
    background: rgba(0, 53, 46, 0.03);
}

.kpi-col[b-xp3upbrexr] {
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

.text-charge[b-xp3upbrexr]    { color: var(--tertiary); }
.text-discharge[b-xp3upbrexr] { color: var(--primary); }

/* ── Table footer ──────────────────────────────────────── */
.table-footer-note[b-xp3upbrexr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    background: var(--surface-container-low);
}

/* ═════════════════════════════════════════════════════════
   CHIPS
   ═════════════════════════════════════════════════════════ */

.chip[b-xp3upbrexr] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    white-space: nowrap;
}

.chip.success[b-xp3upbrexr]   { background: rgba(15, 159, 110, 0.12); color: var(--success); }
.chip.soft[b-xp3upbrexr]      { background: var(--surface-container-low); color: var(--on-surface-variant); }
.chip.charge[b-xp3upbrexr]    { background: rgba(76, 0, 202, 0.08); color: var(--tertiary); }
.chip.discharge[b-xp3upbrexr] { background: rgba(15, 159, 110, 0.12); color: var(--success); }

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .hero-kpi-row[b-xp3upbrexr] {
        flex-wrap: wrap;
    }

    .hero-kpi[b-xp3upbrexr] {
        flex: 1 1 calc(33% - 1rem);
    }

    .hero-kpi-operator[b-xp3upbrexr] {
        display: none;
    }
}

@media (max-width: 860px) {
    .metric-ribbon[b-xp3upbrexr] {
        grid-template-columns: repeat(3, 1fr);
    }

    .engineering-grid[b-xp3upbrexr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid[b-xp3upbrexr],
    .simulation-grid[b-xp3upbrexr] {
        grid-template-columns: 1fr;
    }

    .chart-card.span-2[b-xp3upbrexr],
    .chart-card-primary[b-xp3upbrexr],
    .chart-card-wide[b-xp3upbrexr],
    .chart-card-side[b-xp3upbrexr] {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .result-section[b-xp3upbrexr] {
        gap: 1rem;
    }

    .hero-kpi-row[b-xp3upbrexr] {
        flex-direction: column;
    }

    .hero-kpi[b-xp3upbrexr] {
        flex: none;
    }

    .engineering-grid[b-xp3upbrexr],
    .metric-ribbon[b-xp3upbrexr] {
        grid-template-columns: 1fr;
    }

    .tab-strip[b-xp3upbrexr] {
        width: 100%;
        overflow-x: auto;
    }

    .chart-card[b-xp3upbrexr] {
        padding: 0.8rem;
    }

    .hero-kpi-content strong[b-xp3upbrexr] {
        font-size: 1.1rem;
    }
}
/* /Components/Analysis/UploadWorkspace.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Upload Workspace — Precise Lithograph Design
   ═══════════════════════════════════════════════════════ */

.workspace-card[b-79zs6rkctd] {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    height: auto;
}

.section-copy[b-79zs6rkctd] {
    margin: 0.25rem 0 0;
    color: var(--on-surface-variant);
    max-width: 62ch;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* ═════════════════════════════════════════════════════════
   UPLOAD ZONE — Spacious centered drop area
   ═════════════════════════════════════════════════════════ */

.upload-zone[b-79zs6rkctd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(179, 238, 225, 0.08), transparent 60%),
        var(--surface-container-low);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.upload-zone:hover[b-79zs6rkctd] {
    background:
        radial-gradient(circle at 50% 0%, rgba(179, 238, 225, 0.14), transparent 60%),
        var(--surface-container-low);
    box-shadow: inset 0 0 0 2px rgba(0, 53, 46, 0.08);
}

/* Icon */
.upload-zone-icon[b-79zs6rkctd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    box-shadow: 0 8px 24px rgba(0, 53, 46, 0.18);
}

/* Text block */
.upload-zone-text[b-79zs6rkctd] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 380px;
    padding-bottom: 12px;
}

.upload-zone-text strong[b-79zs6rkctd] {
    font-family: var(--font-headline);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--on-surface);
    letter-spacing: -0.02em;
}

.upload-zone-text p[b-79zs6rkctd] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    line-height: 1.55;
}

/* File input */
.upload-zone-input[b-79zs6rkctd] {
    width: 100%;
    max-width: 320px;
    margin-top: 0.25rem;
}

/* Feature checklist */
.upload-features[b-79zs6rkctd] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(191, 201, 197, 0.12);
    width: 100%;
}

.upload-feature[b-79zs6rkctd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--on-surface-variant);
    font-size: 0.76rem;
    font-weight: 600;
}

.upload-feature svg[b-79zs6rkctd] {
    color: var(--primary);
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   TOGGLE / SWITCH
   ═════════════════════════════════════════════════════════ */

.toggle-strip[b-79zs6rkctd] {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: var(--surface-container-low);
}

.switch-field[b-79zs6rkctd] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
    color: var(--on-surface);
    font-size: 0.8rem;
    cursor: pointer;
}

/* ═════════════════════════════════════════════════════════
   COMPACT STAT CARDS
   ═════════════════════════════════════════════════════════ */

.compact-stats[b-79zs6rkctd] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-stat[b-79zs6rkctd] {
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    background: var(--surface-container-low);
}

.compact-stat strong[b-79zs6rkctd] {
    overflow-wrap: anywhere;
    font-family: var(--font-headline);
    font-weight: 800;
}

/* ═════════════════════════════════════════════════════════
   MAPPING SHELL
   ═════════════════════════════════════════════════════════ */

.mapping-shell[b-79zs6rkctd] {
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: var(--surface-container-low);
}

.mapping-head[b-79zs6rkctd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.mapping-head h3[b-79zs6rkctd] {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

.compact-mapping[b-79zs6rkctd] {
    gap: 0.75rem;
}

/* ═════════════════════════════════════════════════════════
   PREVIEW
   ═════════════════════════════════════════════════════════ */

.preview-head[b-79zs6rkctd] {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: flex-end;
}

.preview-note[b-79zs6rkctd] {
    color: var(--on-surface-variant);
    font-size: 0.72rem;
}

.preview-head h3[b-79zs6rkctd] {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--primary);
}

/* ═════════════════════════════════════════════════════════
   SELECTED COLUMN HIGHLIGHT
   ═════════════════════════════════════════════════════════ */

.selected-column[b-79zs6rkctd] {
    color: var(--primary);
    background: rgba(179, 238, 225, 0.18);
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .compact-stats[b-79zs6rkctd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mapping-head[b-79zs6rkctd] {
        align-items: start;
        flex-direction: column;
    }

    .upload-features[b-79zs6rkctd] {
        gap: 0.75rem;
    }
}

@media (max-width: 640px) {
    .workspace-card[b-79zs6rkctd] {
        padding: 1rem;
        gap: 1rem;
    }

    .upload-zone[b-79zs6rkctd] {
        padding: 1.5rem 1rem 1.25rem;
    }

    .upload-features[b-79zs6rkctd] {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .compact-stats[b-79zs6rkctd] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   MAIN LAYOUT — Precise Lithograph Canvas
   ═══════════════════════════════════════════════════════════════ */

.app-shell[b-nw7kzom9zc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    gap: 0;
    padding: 0;
    background: var(--background);
}

.app-main[b-nw7kzom9zc] {
    min-width: 0;
    padding: 1.5rem 2rem 3rem;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.app-content[b-nw7kzom9zc] {
    min-width: 0;
}

@media (max-width: 760px) {
    .app-main[b-nw7kzom9zc] {
        padding: 1rem 0.75rem 2rem;
    }
}

#blazor-error-ui[b-nw7kzom9zc] {
    color-scheme: light only;
    background: var(--error-container);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem 0.8rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--on-error-container);
}

#blazor-error-ui .dismiss[b-nw7kzom9zc] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.55rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TOP NAVIGATION — Precise Lithograph Premium Bar
   ═══════════════════════════════════════════════════════════════ */

.nav-shell[b-dzq7p8ybfu] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.5rem;
    height: 64px;
    background: rgba(0, 53, 46, 0.92);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    color: #f8fafb;
    box-shadow: 0 1px 0 rgba(179, 238, 225, 0.06),
                0 8px 32px rgba(0, 53, 46, 0.12);
    border: none;
}

/* ═════════════════════════════════════════════════════════
   BRAND
   ═════════════════════════════════════════════════════════ */

.brand-card[b-dzq7p8ybfu] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-mark[b-dzq7p8ybfu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-orb[b-dzq7p8ybfu] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(179, 238, 225, 0.18), rgba(179, 238, 225, 0.06));
    color: #b3eee1;
    font-weight: 800;
    font-size: 1rem;
    flex: 0 0 38px;
    transition: background 200ms ease;
}

.brand-orb:hover[b-dzq7p8ybfu] {
    background: linear-gradient(135deg, rgba(179, 238, 225, 0.25), rgba(179, 238, 225, 0.1));
}

.brand-kicker[b-dzq7p8ybfu] {
    display: block;
    margin-bottom: 0.08rem;
    color: rgba(179, 238, 225, 0.6);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.brand-title[b-dzq7p8ybfu] {
    display: inline-block;
    color: #f8fafb;
    text-decoration: none;
    font-family: var(--font-headline);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    transition: color 200ms ease;
}

.brand-title:hover[b-dzq7p8ybfu] {
    color: #b3eee1;
}

/* ═════════════════════════════════════════════════════════
   NAV LINKS — Pill container (matches tab-strip pattern)
   ═════════════════════════════════════════════════════════ */

.nav-links[b-dzq7p8ybfu] {
    display: flex;
    align-items: center;
}

.nav-pill-container[b-dzq7p8ybfu] {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link[b-dzq7p8ybfu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    border-radius: 9px;
    color: rgba(179, 238, 225, 0.65);
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: none;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
}

.nav-link svg[b-dzq7p8ybfu] {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 180ms ease;
}

.nav-link:hover[b-dzq7p8ybfu] {
    color: #b3eee1;
    background: rgba(255, 255, 255, 0.08);
}

.nav-link:hover svg[b-dzq7p8ybfu] {
    opacity: 1;
}

.nav-link.active[b-dzq7p8ybfu] {
    color: #f8fafb;
    background: rgba(179, 238, 225, 0.15);
    box-shadow: 0 2px 8px rgba(0, 53, 46, 0.2);
}

.nav-link.active svg[b-dzq7p8ybfu] {
    opacity: 1;
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .nav-link[b-dzq7p8ybfu] {
        padding: 0.35rem 0.65rem;
        font-size: 0.72rem;
    }

    .nav-link svg[b-dzq7p8ybfu] {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 960px) {
    .nav-shell[b-dzq7p8ybfu] {
        position: static;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 0.75rem 1rem;
        border-radius: 20px;
        gap: 0.65rem;
    }

    .brand-card[b-dzq7p8ybfu] {
        justify-content: center;
    }

    .nav-links[b-dzq7p8ybfu] {
        justify-content: center;
    }

    .nav-pill-container[b-dzq7p8ybfu] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .nav-pill-container[b-dzq7p8ybfu] {
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .nav-link[b-dzq7p8ybfu] {
        padding: 0.3rem 0.55rem;
        font-size: 0.7rem;
        gap: 0.3rem;
    }

    .brand-title[b-dzq7p8ybfu] {
        font-size: 0.88rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-i3b1irv1wv],
.components-reconnect-repeated-attempt-visible[b-i3b1irv1wv],
.components-reconnect-failed-visible[b-i3b1irv1wv],
.components-pause-visible[b-i3b1irv1wv],
.components-resume-failed-visible[b-i3b1irv1wv],
.components-rejoining-animation[b-i3b1irv1wv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-retrying[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-failed[b-i3b1irv1wv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-i3b1irv1wv] {
    display: block;
}


#components-reconnect-modal[b-i3b1irv1wv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-i3b1irv1wv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-i3b1irv1wv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-i3b1irv1wv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-i3b1irv1wv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-i3b1irv1wv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-i3b1irv1wv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-i3b1irv1wv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-i3b1irv1wv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-i3b1irv1wv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-i3b1irv1wv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-i3b1irv1wv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-i3b1irv1wv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-i3b1irv1wv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-i3b1irv1wv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-i3b1irv1wv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-i3b1irv1wv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-i3b1irv1wv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-i3b1irv1wv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   RES/GES DEPOLAMA GEREKSİNİM ANALİZİ
   Precise Lithograph Design System
   ═══════════════════════════════════════════════════════════════ */

.analysis-page[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 0 4rem;
}

.source-strategy[b-jbniv4imak],
.decision-summary[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    border-radius: 24px;
    background: var(--surface-container-lowest);
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.source-grid[b-jbniv4imak] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.decision-grid[b-jbniv4imak] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.source-card[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
    background: var(--surface-container-low);
    border: 1px solid transparent;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.source-card:hover[b-jbniv4imak] {
    border-color: rgba(0, 53, 46, 0.08);
    box-shadow: 0 4px 16px rgba(0, 53, 46, 0.04);
}

.decision-card[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--surface-container-low);
}

.source-card > label:first-child[b-jbniv4imak],
.decision-label[b-jbniv4imak] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    margin-bottom: 0.1rem;
}

.source-hint[b-jbniv4imak] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.8;
}

.decision-card p[b-jbniv4imak] {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.55;
}

.decision-card strong[b-jbniv4imak] {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--primary);
}

/* ── Custom Select (Select2 benzeri) ────────────────────────── */

.custom-select-wrap[b-jbniv4imak] {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-select[b-jbniv4imak] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.65rem 2.2rem 0.65rem 0.9rem;
    border: 1.5px solid rgba(0, 53, 46, 0.12);
    border-radius: 12px;
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    outline: none;
}

.custom-select:hover[b-jbniv4imak] {
    border-color: rgba(0, 53, 46, 0.25);
}

.custom-select:focus[b-jbniv4imak] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 53, 46, 0.08);
}

.custom-select-arrow[b-jbniv4imak] {
    position: absolute;
    right: 0.75rem;
    pointer-events: none;
    color: var(--on-surface-variant);
    display: flex;
    opacity: 0.55;
}

/* ── Custom Date Input ─────────────────────────────────────── */

.custom-date[b-jbniv4imak] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid rgba(0, 53, 46, 0.12);
    border-radius: 12px;
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.custom-date:hover[b-jbniv4imak] {
    border-color: rgba(0, 53, 46, 0.25);
}

.custom-date:focus[b-jbniv4imak] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 53, 46, 0.08);
}

/* ── Toggle Switch ─────────────────────────────────────────── */

.toggle-switch[b-jbniv4imak] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    padding: 0.3rem 0;
    user-select: none;
}

.toggle-switch input[b-jbniv4imak] {
    display: none;
}

.toggle-slider[b-jbniv4imak] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0, 53, 46, 0.15);
    flex-shrink: 0;
    transition: background 200ms ease;
}

.toggle-slider[b-jbniv4imak]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    transition: transform 200ms ease;
}

.toggle-switch input:checked + .toggle-slider[b-jbniv4imak] {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider[b-jbniv4imak]::after {
    transform: translateX(18px);
}

.toggle-label-text[b-jbniv4imak] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

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

.btn-outline[b-jbniv4imak],
.btn-primary[b-jbniv4imak] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.btn-outline[b-jbniv4imak] {
    background: var(--surface-container-lowest);
    color: var(--primary);
    border: 1.5px solid rgba(0, 53, 46, 0.18);
}

.btn-outline:hover:not(:disabled)[b-jbniv4imak] {
    background: rgba(0, 53, 46, 0.04);
    border-color: var(--primary);
}

.btn-primary[b-jbniv4imak] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 12px rgba(0, 53, 46, 0.2);
}

.btn-primary:hover:not(:disabled)[b-jbniv4imak] {
    box-shadow: 0 6px 18px rgba(0, 53, 46, 0.3);
    transform: translateY(-1px);
}

.btn-outline:disabled[b-jbniv4imak],
.btn-primary:disabled[b-jbniv4imak] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-outline svg[b-jbniv4imak],
.btn-primary svg[b-jbniv4imak] {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ── Searchable Select (Select2 benzeri) ───────────────────── */

.searchable-select[b-jbniv4imak] {
    position: relative;
}

.search-input-wrap[b-jbniv4imak] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-jbniv4imak] {
    position: absolute;
    left: 0.8rem;
    color: var(--on-surface-variant);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-jbniv4imak] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 2.5rem;
    border: 1.5px solid rgba(0, 53, 46, 0.12);
    border-radius: 12px;
    background: var(--surface-container-lowest);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.search-input[b-jbniv4imak]::placeholder {
    color: var(--on-surface-variant);
    opacity: 0.5;
    font-weight: 500;
}

.search-input:hover:not(:disabled)[b-jbniv4imak] {
    border-color: rgba(0, 53, 46, 0.25);
}

.search-input:focus[b-jbniv4imak] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 53, 46, 0.08);
}

.search-input:disabled[b-jbniv4imak] {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-selected-badge[b-jbniv4imak] {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.search-clear[b-jbniv4imak] {
    position: absolute;
    right: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 53, 46, 0.06);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 150ms ease;
}

.search-clear:hover[b-jbniv4imak] {
    background: rgba(0, 53, 46, 0.12);
}

.search-dropdown[b-jbniv4imak] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-container-lowest);
    border: 1.5px solid rgba(0, 53, 46, 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.12), 0 4px 12px rgba(0, 53, 46, 0.06);
    z-index: 100;
    padding: 0.3rem;
    animation: dropdown-enter-b-jbniv4imak 150ms ease;
}

@keyframes dropdown-enter-b-jbniv4imak {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-dropdown[b-jbniv4imak]::-webkit-scrollbar {
    width: 6px;
}

.search-dropdown[b-jbniv4imak]::-webkit-scrollbar-track {
    background: transparent;
}

.search-dropdown[b-jbniv4imak]::-webkit-scrollbar-thumb {
    background: rgba(0, 53, 46, 0.12);
    border-radius: 3px;
}

.search-option[b-jbniv4imak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background 120ms ease;
    text-align: left;
    font-family: var(--font-body);
}

.search-option:hover[b-jbniv4imak] {
    background: rgba(0, 53, 46, 0.05);
}

.search-option.selected[b-jbniv4imak] {
    background: rgba(0, 53, 46, 0.08);
}

.search-option-name[b-jbniv4imak] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.search-option-tag[b-jbniv4imak] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(0, 53, 46, 0.06);
    color: var(--on-surface-variant);
    flex-shrink: 0;
    white-space: nowrap;
}

.search-option.selected .search-option-tag[b-jbniv4imak] {
    background: var(--primary);
    color: var(--on-primary);
}

.search-no-result[b-jbniv4imak] {
    padding: 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    opacity: 0.6;
}

.search-more[b-jbniv4imak] {
    padding: 0.5rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    opacity: 0.5;
    text-align: center;
}

.toggle-group[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.date-range[b-jbniv4imak] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.source-actions[b-jbniv4imak] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.source-card-toggle[b-jbniv4imak] {
    grid-column: span 1;
}

.source-card-plant[b-jbniv4imak] {
    grid-column: span 2;
}

/* ─────────────────────────────────────────────────────────────────
   METRICS STRIP — Tonal Layered KPI Cards
   ───────────────────────────────────────────────────────────────── */

.metrics-strip[b-jbniv4imak] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 1.5rem;
    border-radius: 24px;
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.metric-tile[b-jbniv4imak] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    padding: 0.5rem 1rem;
}

.metric-tile-primary[b-jbniv4imak] {
    flex: 1.3;
}

.metric-icon[b-jbniv4imak] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--surface-container-low);
    color: var(--primary);
    flex-shrink: 0;
    box-shadow: none;
}

.metric-icon-accent[b-jbniv4imak] {
    background: rgba(0, 96, 168, 0.08);
    color: var(--secondary);
}

.metric-icon-info[b-jbniv4imak] {
    background: rgba(76, 0, 202, 0.08);
    color: var(--tertiary);
}

.metric-content[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.metric-label[b-jbniv4imak] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}

.metric-value[b-jbniv4imak] {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--on-surface);
    line-height: 1.1;
}

.metric-value-accent[b-jbniv4imak] {
    color: var(--primary);
}

.metric-description[b-jbniv4imak] {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    line-height: 1.4;
}

.metric-divider[b-jbniv4imak] {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(191, 201, 197, 0.2), transparent);
    margin: 0.5rem 0.5rem;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   WORKSPACE GRID — Clean 2-Column Layout
   ───────────────────────────────────────────────────────────────── */

.workspace-grid[b-jbniv4imak] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* ─────────────────────────────────────────────────────────────────
   IMPACT SECTION — Revenue Impact Summary
   ───────────────────────────────────────────────────────────────── */

.impact-section[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 24px;
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.section-header[b-jbniv4imak] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.section-title-group[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.section-header h2[b-jbniv4imak] {
    margin: 0;
    font-family: var(--font-headline);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary);
}

.section-description[b-jbniv4imak] {
    margin: 0.25rem 0 0;
    max-width: 65ch;
    color: var(--on-surface-variant);
    font-size: 0.88rem;
    line-height: 1.65;
}

.section-badge[b-jbniv4imak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(179, 238, 225, 0.12);
    border: none;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.badge-icon[b-jbniv4imak] {
    display: flex;
    animation: pulse-glow-b-jbniv4imak 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-jbniv4imak {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ── Impact Cards ── */
.impact-cards[b-jbniv4imak] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.2fr;
    gap: 1rem;
    align-items: stretch;
}

.impact-card[b-jbniv4imak] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem;
    border-radius: 24px;
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.impact-card:hover[b-jbniv4imak] {
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0, 53, 46, 0.1);
}

.impact-card-baseline[b-jbniv4imak] {
    background: var(--surface-container-low);
}

.impact-card-delta[b-jbniv4imak] {
    background: var(--surface-container-lowest);
    border-top: 2px solid var(--secondary-fixed-dim);
}

.impact-card-potential[b-jbniv4imak] {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #f8fafb;
}

.impact-card-potential .card-label[b-jbniv4imak],
.impact-card-potential .card-description[b-jbniv4imak] {
    color: rgba(179, 238, 225, 0.7);
}

.card-header[b-jbniv4imak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-indicator[b-jbniv4imak] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.card-indicator.baseline[b-jbniv4imak] {
    background: var(--surface-variant);
}

.card-indicator.delta[b-jbniv4imak] {
    background: var(--secondary);
    box-shadow: 0 0 8px rgba(0, 96, 168, 0.4);
}

.card-indicator.potential[b-jbniv4imak] {
    background: var(--primary-fixed);
    box-shadow: 0 0 8px rgba(179, 238, 225, 0.5);
    animation: pulse-glow-b-jbniv4imak 2s ease-in-out infinite;
}

.card-label[b-jbniv4imak] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}

.card-value[b-jbniv4imak] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.card-value strong[b-jbniv4imak] {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--on-surface);
    line-height: 1;
}

.card-value-delta strong[b-jbniv4imak] {
    color: var(--secondary);
}

.card-value-potential strong[b-jbniv4imak] {
    color: #f8fafb;
}

.currency[b-jbniv4imak] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.card-value-potential .currency[b-jbniv4imak] {
    color: rgba(179, 238, 225, 0.7);
}

.card-description[b-jbniv4imak] {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    line-height: 1.45;
    margin: 0;
}

.card-icon[b-jbniv4imak] {
    position: absolute;
    bottom: -8px;
    right: -8px;
    opacity: 0.06;
    color: var(--on-surface);
    transition: opacity 200ms ease;
}

.impact-card:hover .card-icon[b-jbniv4imak] {
    opacity: 0.12;
}

.card-icon.delta[b-jbniv4imak] {
    color: var(--secondary);
}

.card-icon.potential[b-jbniv4imak] {
    color: var(--primary-fixed);
}

.impact-operator[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
}

.operator-plus[b-jbniv4imak],
.operator-equals[b-jbniv4imak] {
    font-size: 2rem;
    font-weight: 300;
    color: rgba(0, 53, 46, 0.3);
    line-height: 1;
}

.operator-label[b-jbniv4imak] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────
   CTA SECTION — Call to Action
   ───────────────────────────────────────────────────────────────── */

.cta-section[b-jbniv4imak] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 50%, rgba(152, 210, 197, 0.15), transparent 40%),
        radial-gradient(circle at 85% 50%, rgba(0, 96, 168, 0.1), transparent 40%),
        var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
    overflow: hidden;
}

.cta-content[b-jbniv4imak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex: 1;
    z-index: 1;
}

.cta-text[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 580px;
}

.cta-text h2[b-jbniv4imak] {
    margin: 0;
    font-family: var(--font-headline);
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--on-surface);
}

.cta-text > p[b-jbniv4imak] {
    margin: 0.35rem 0 0;
    color: var(--on-surface-variant);
    font-size: 0.9rem;
    line-height: 1.65;
}

.cta-features[b-jbniv4imak] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cta-feature[b-jbniv4imak] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
}

.cta-feature svg[b-jbniv4imak] {
    color: var(--primary-fixed-dim);
}

.cta-actions[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cta-button[b-jbniv4imak] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 220px;
    min-height: 52px;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cta-button:hover[b-jbniv4imak] {
    transform: translateY(-2px);
}

.cta-button-primary[b-jbniv4imak] {
    color: var(--on-primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    box-shadow: 0 14px 28px rgba(0, 53, 46, 0.3);
}

.cta-button-primary:hover[b-jbniv4imak] {
    box-shadow: 0 18px 36px rgba(0, 53, 46, 0.4);
}

.cta-button-secondary[b-jbniv4imak] {
    color: var(--primary);
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
}

.cta-button-secondary:hover[b-jbniv4imak] {
    box-shadow: 0 16px 48px rgba(0, 53, 46, 0.1);
}

.cta-decoration[b-jbniv4imak] {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    pointer-events: none;
}

.decoration-ring[b-jbniv4imak] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 53, 46, 0.06);
}

.decoration-ring-1[b-jbniv4imak] {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring-pulse-b-jbniv4imak 4s ease-in-out infinite;
}

.decoration-ring-2[b-jbniv4imak] {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring-pulse-b-jbniv4imak 4s ease-in-out infinite 0.5s;
}

.decoration-ring-3[b-jbniv4imak] {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring-pulse-b-jbniv4imak 4s ease-in-out infinite 1s;
}

@keyframes ring-pulse-b-jbniv4imak {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   INFO SECTION — Bilgi Paneli
   ───────────────────────────────────────────────────────────────── */

.info-section[b-jbniv4imak] {
    padding: 0;
}

.info-grid[b-jbniv4imak] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.info-card[b-jbniv4imak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--surface-container-lowest);
    border: none;
    box-shadow: 0 12px 40px rgba(0, 53, 46, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.info-card:hover[b-jbniv4imak] {
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0, 53, 46, 0.1);
}

.info-icon[b-jbniv4imak] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface-container-low);
    color: var(--primary);
}

.info-card h3[b-jbniv4imak] {
    margin: 0;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 800;
    color: var(--on-surface);
    letter-spacing: -0.01em;
}

.info-card p[b-jbniv4imak] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .impact-cards[b-jbniv4imak] {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
    }

    .impact-operator[b-jbniv4imak] {
        display: none;
    }

    .cta-decoration[b-jbniv4imak] {
        display: none;
    }
}

@media (max-width: 1024px) {
    .metrics-strip[b-jbniv4imak] {
        flex-direction: column;
        gap: 0;
    }

    .metric-divider[b-jbniv4imak] {
        width: auto;
        height: 1px;
        margin: 0.5rem 1rem;
    }

    .metric-tile[b-jbniv4imak] {
        padding: 0.75rem 0.5rem;
    }

    .workspace-grid[b-jbniv4imak] {
        grid-template-columns: 1fr;
    }

    .source-grid[b-jbniv4imak],
    .decision-grid[b-jbniv4imak] {
        grid-template-columns: 1fr;
    }

    .source-card-plant[b-jbniv4imak] {
        grid-column: auto;
    }

    .section-header[b-jbniv4imak] {
        flex-direction: column;
        gap: 1rem;
    }

    .impact-cards[b-jbniv4imak] {
        grid-template-columns: 1fr 1fr;
    }

    .impact-card-potential[b-jbniv4imak] {
        grid-column: span 2;
    }

    .info-grid[b-jbniv4imak] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analysis-page[b-jbniv4imak] {
        padding: 0 0 3rem;
        gap: 1.25rem;
    }

    .cta-section[b-jbniv4imak] {
        flex-direction: column;
        padding: 1.5rem;
    }

    .cta-content[b-jbniv4imak] {
        flex-direction: column;
        text-align: center;
    }

    .cta-features[b-jbniv4imak] {
        justify-content: center;
    }

    .cta-actions[b-jbniv4imak] {
        width: 100%;
    }

    .cta-button[b-jbniv4imak] {
        width: 100%;
        min-width: unset;
    }

    .impact-cards[b-jbniv4imak] {
        grid-template-columns: 1fr;
    }

    .impact-card-potential[b-jbniv4imak] {
        grid-column: span 1;
    }

    .section-header[b-jbniv4imak] {
        text-align: center;
        align-items: center;
    }

    .section-description[b-jbniv4imak] {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .metrics-strip[b-jbniv4imak] {
        padding: 1rem;
    }

    .metric-tile[b-jbniv4imak] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .metric-icon[b-jbniv4imak] {
        width: 44px;
        height: 44px;
    }

    .metric-icon svg[b-jbniv4imak] {
        width: 22px;
        height: 22px;
    }

    .impact-section[b-jbniv4imak] {
        padding: 1.25rem;
    }

    .impact-card[b-jbniv4imak] {
        padding: 1rem;
    }

    .cta-text h2[b-jbniv4imak] {
        font-size: 1.2rem;
    }
}