:root {
    --bg:
        #f4f7fb;

    --surface:
        rgba(
            255,
            255,
            255,
            0.88
        );

    --surface-strong:
        #ffffff;

    --surface-soft:
        #f8fafc;

    --border:
        rgba(
            148,
            163,
            184,
            0.22
        );

    --border-strong:
        rgba(
            148,
            163,
            184,
            0.36
        );

    --text:
        #0f172a;

    --text-soft:
        #475569;

    --text-muted:
        #64748b;

    --primary:
        #4f46e5;

    --primary-dark:
        #4338ca;

    --primary-soft:
        #eef2ff;

    --success:
        #059669;

    --danger:
        #dc2626;

    --warning:
        #d97706;

    --shadow-sm:
        0 1px 2px
        rgba(
            15,
            23,
            42,
            0.04
        );

    --shadow-md:
        0 12px 30px
        rgba(
            15,
            23,
            42,
            0.07
        );

    --shadow-lg:
        0 24px 60px
        rgba(
            15,
            23,
            42,
            0.10
        );

    --radius-sm:
        10px;

    --radius-md:
        16px;

    --radius-lg:
        24px;
}


* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


body {
    margin:
        0;

    min-height:
        100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle
            at top left,
            rgba(
                99,
                102,
                241,
                0.10
            ),
            transparent 32%
        ),
        radial-gradient(
            circle
            at top right,
            rgba(
                14,
                165,
                233,
                0.08
            ),
            transparent 28%
        ),
        var(--bg);

    color:
        var(--text);

    line-height:
        1.6;
}


/* ============================================================
   Main container
   ============================================================ */

.container {
    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

    padding:
        72px 0 110px;
}


/* ============================================================
   Header / Hero
   ============================================================ */

.header {
    position:
        relative;

    max-width:
        900px;

    margin-bottom:
        46px;
}


.eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 16px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(
            79,
            70,
            229,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            238,
            242,
            255,
            0.8
        );

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}


.header h1 {
    margin:
        0;

    max-width:
        920px;

    font-size:
        clamp(
            42px,
            6vw,
            70px
        );

    line-height:
        1.02;

    letter-spacing:
        -0.055em;

    font-weight:
        780;

    background:
        linear-gradient(
            110deg,
            #0f172a,
            #1e293b 45%,
            #4f46e5
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.subtitle {
    margin:
        24px 0 0;

    max-width:
        760px;

    font-size:
        18px;

    line-height:
        1.75;

    color:
        var(--text-muted);
}


/* ============================================================
   Generic panels
   ============================================================ */

.panel {
    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        30px;

    padding:
        32px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        var(--shadow-md);
}


.panel::before {
    content:
        "";

    position:
        absolute;

    inset:
        0 0 auto 0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.8
            ),
            transparent
        );
}


.section-heading {
    margin-bottom:
        26px;
}


.section-heading h2 {
    margin:
        0 0 7px;

    font-size:
        25px;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.section-heading p {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;
}


code {
    padding:
        2px 6px;

    border-radius:
        6px;

    background:
        #eef2f7;

    color:
        #334155;

    font-size:
        0.92em;
}


/* ============================================================
   Form
   ============================================================ */

.form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;

    margin-bottom:
        26px;
}


.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


label {
    color:
        #334155;

    font-size:
        13px;

    font-weight:
        700;
}


input,
select {
    width:
        100%;

    min-height:
        50px;

    padding:
        11px 14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        12px;

    outline:
        none;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );

    color:
        var(--text);

    font:
        inherit;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


input:hover,
select:hover {
    border-color:
        rgba(
            79,
            70,
            229,
            0.38
        );
}


input:focus,
select:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(
            79,
            70,
            229,
            0.11
        );
}


input[type="file"] {
    padding:
        9px 10px;
}


input[type="file"]::file-selector-button {
    margin-right:
        12px;

    padding:
        8px 12px;

    border:
        0;

    border-radius:
        8px;

    background:
        #eef2ff;

    color:
        var(--primary-dark);

    font-weight:
        700;

    cursor:
        pointer;
}


button {
    position:
        relative;

    min-height:
        48px;

    padding:
        13px 20px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #6366f1
        );

    color:
        white;

    font:
        inherit;

    font-weight:
        750;

    letter-spacing:
        -0.01em;

    cursor:
        pointer;

    box-shadow:
        0 10px 24px
        rgba(
            79,
            70,
            229,
            0.22
        );

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}


button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 14px 30px
        rgba(
            79,
            70,
            229,
            0.26
        );
}


button:active {
    transform:
        translateY(0);
}


button:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* ============================================================
   Status
   ============================================================ */

.status {
    margin-top:
        22px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(
            79,
            70,
            229,
            0.15
        );

    border-radius:
        12px;

    background:
        var(--primary-soft);

    color:
        #3730a3;

    font-size:
        14px;
}


.status.error {
    border-color:
        rgba(
            220,
            38,
            38,
            0.15
        );

    background:
        #fef2f2;

    color:
        #991b1b;
}


/* ============================================================
   Results section
   ============================================================ */

.results-section {
    margin:
        48px 0;
}


.metric-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap:
        16px;
}


.metric-card {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        124px;

    padding:
        22px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.metric-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(
            99,
            102,
            241,
            0.22
        );

    box-shadow:
        var(--shadow-md);
}


.metric-card::after {
    content:
        "";

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -35px;

    bottom:
        -40px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                99,
                102,
                241,
                0.12
            ),
            transparent 70%
        );
}


.metric-label {
    position:
        relative;

    z-index:
        1;

    margin-bottom:
        10px;

    color:
        var(--text-muted);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


.metric-value {
    position:
        relative;

    z-index:
        1;

    color:
        var(--text);

    font-size:
        29px;

    font-weight:
        780;

    letter-spacing:
        -0.04em;
}


/* ============================================================
   Insights
   ============================================================ */

.insight-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.insight {
    padding:
        19px 20px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        rgba(
            248,
            250,
            252,
            0.72
        );

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.insight:hover {
    transform:
        translateX(2px);

    border-color:
        rgba(
            99,
            102,
            241,
            0.22
        );

    background:
        white;
}


.insight-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        7px;
}


.insight-type {
    color:
        #1e293b;

    font-weight:
        750;
}


.severity {
    flex:
        0 0 auto;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.severity-high {
    background:
        #fee2e2;

    color:
        #b91c1c;
}


.severity-medium {
    background:
        #fef3c7;

    color:
        #b45309;
}


.severity-low {
    background:
        #e0f2fe;

    color:
        #0369a1;
}


.insight-message {
    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.65;
}


/* ============================================================
   Performance explanation / rendered Markdown
   ============================================================ */

.report-text {
    color:
        var(--text-soft);

    line-height:
        1.78;
}


.report-text h1 {
    margin:
        34px 0 15px;

    color:
        var(--text);

    font-size:
        28px;

    line-height:
        1.2;

    letter-spacing:
        -0.03em;
}


.report-text h2 {
    margin:
        32px 0 12px;

    color:
        var(--text);

    font-size:
        21px;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;
}


.report-text h2:first-child,
.report-text h1:first-child {
    margin-top:
        0;
}


.report-text h3 {
    margin:
        26px 0 10px;

    color:
        var(--text);

    font-size:
        18px;
}


.report-text p {
    margin:
        0 0 17px;
}


.report-text strong {
    color:
        #111827;

    font-weight:
        750;
}


.report-text ul {
    margin:
        10px 0 22px;

    padding-left:
        22px;
}


.report-text li {
    margin-bottom:
        8px;

    padding-left:
        3px;
}


/* ============================================================
   Charts
   ============================================================ */

.chart-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;
}


.chart-card {
    overflow:
        hidden;

    padding:
        21px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.chart-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-md);
}


.chart-card h3 {
    margin:
        0 0 18px;

    color:
        var(--text);

    font-size:
        16px;

    letter-spacing:
        -0.015em;
}


.chart-card img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    border-radius:
        10px;

    background:
        white;
}


/* ============================================================
   Final report panel
   ============================================================ */

.final-report {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;

    margin-top:
        44px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.96
            ),
            rgba(
                238,
                242,
                255,
                0.88
            )
        );
}


.final-report h2 {
    margin:
        0 0 6px;

    font-size:
        23px;
}


.final-report p {
    margin:
        0;

    color:
        var(--text-muted);
}


.report-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        12px 18px;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1e293b
        );

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 10px 25px
        rgba(
            15,
            23,
            42,
            0.20
        );

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.report-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 14px 30px
        rgba(
            15,
            23,
            42,
            0.24
        );
}


/* ============================================================
   Hidden
   ============================================================ */

.hidden {
    display:
        none !important;
}


/* ============================================================
   Responsive
   ============================================================ */

@media (
    max-width: 900px
) {
    .form-grid {
        grid-template-columns:
            1fr;
    }


    .chart-grid {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 700px
) {
    .container {
        width:
            min(
                100% - 24px,
                1180px
            );

        padding:
            38px 0 72px;
    }


    .header {
        margin-bottom:
            30px;
    }


    .header h1 {
        font-size:
            clamp(
                38px,
                13vw,
                54px
            );
    }


    .subtitle {
        font-size:
            16px;
    }


    .panel {
        padding:
            22px;

        border-radius:
            18px;
    }


    .metric-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .final-report {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}


@media (
    max-width: 480px
) {
    .metric-grid {
        grid-template-columns:
            1fr;
    }


    .insight-top {
        align-items:
            flex-start;
    }
}

/* ============================================================
   CSV format helper
   ============================================================ */

.format-help {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        16px;

    padding:
        14px 16px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(
            248,
            250,
            252,
            0.78
        );
}


.format-example {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    color:
        var(--text-muted);

    font-size:
        13px;
}


.example-link {
    flex:
        0 0 auto;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;
}


.example-link:hover {
    text-decoration:
        underline;
}


@media (
    max-width: 700px
) {
    .format-help {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}