/* =========================================================
   VNAX EUR/USD ENTERPRISE DASHBOARD
   COMPLETE STYLE.CSS REPLACEMENT
========================================================= */


/* =========================================================
   DESIGN VARIABLES
========================================================= */

:root {
    color-scheme: dark;

    --background:
        #050914;

    --background-soft:
        #08101f;

    --surface:
        #0d1629;

    --surface-soft:
        #121d32;

    --surface-raised:
        #172238;

    --surface-hover:
        #1a2841;

    --border:
        rgba(
            150,
            174,
            220,
            0.15
        );

    --border-strong:
        rgba(
            150,
            174,
            220,
            0.26
        );

    --text:
        #f5f7fc;

    --text-soft:
        #a6b2c8;

    --text-muted:
        #76839a;

    --blue:
        #4d7fff;

    --blue-light:
        #89aaff;

    --green:
        #50e3a4;

    --green-strong:
        #25ca84;

    --red:
        #ff7183;

    --red-strong:
        #ff5069;

    --yellow:
        #ffd35a;

    --yellow-dark:
        #c49c27;

    --shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.30
        );

    --radius-large:
        26px;

    --radius-medium:
        18px;

    --radius-small:
        14px;

    --content-width:
        1180px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing:
        border-box;
}

html {
    min-height:
        100%;

    background:
        var(
            --background
        );

    scroll-behavior:
        smooth;
}

body {
    min-height:
        100vh;

    margin:
        0;

    overflow-x:
        hidden;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(
                77,
                127,
                255,
                0.16
            ),
            transparent 31%
        ),
        radial-gradient(
            circle at 94% 11%,
            rgba(
                80,
                227,
                164,
                0.09
            ),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #07101f 0%,
            var(
                --background
            ) 42%,
            #03060d 100%
        );

    color:
        var(
            --text
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.55;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

button,
input,
select,
textarea {
    font:
        inherit;
}

button {
    -webkit-tap-highlight-color:
        transparent;
}

strong {
    color:
        var(
            --text
        );
}

p {
    margin-top:
        0;
}

::selection {
    background:
        rgba(
            77,
            127,
            255,
            0.38
        );

    color:
        #ffffff;
}


/* =========================================================
   PAGE CONTAINER AND VISUAL ORDER
========================================================= */

.container {
    display:
        flex;

    flex-direction:
        column;

    width:
        min(
            calc(
                100% -
                32px
            ),
            var(
                --content-width
            )
        );

    margin:
        0 auto;

    padding:
        max(
            26px,
            env(
                safe-area-inset-top
            )
        )
        0
        calc(
            60px +
            env(
                safe-area-inset-bottom
            )
        );
}


/*
 * Most important information appears first.
 */

.container > .header {
    order:
        1;
}

.container > .prediction-panel {
    order:
        2;
}

.container > #predictionPerformancePanel {
    order:
        3;
}

.container > #walkForwardBacktestPanel {
    order:
        4;
}

.container > #finnhubLivePanel {
    order:
        5;
}

.container > #twelveDataLivePanel {
    order:
        5;
}

.container > #massiveLiveFeedPanel {
    order:
        5;
}

.container > .summary-grid {
    order:
        6;
}

.container > .panel:has(
    #latestTimestamp
) {
    order:
        7;
}

.container > .panel:has(
    #featureBody
) {
    order:
        8;
}

.container > .importer-panel {
    order:
        9;
}

.container > .panel:has(
    #systemLog
) {
    order:
        10;
}

.container > .panel {
    order:
        8;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    display:
        grid;

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

    align-items:
        center;

    gap:
        26px;

    margin-bottom:
        22px;

    padding:
        30px;

    overflow:
        hidden;

    position:
        relative;

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

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

    background:
        linear-gradient(
            135deg,
            rgba(
                25,
                41,
                75,
                0.96
            ),
            rgba(
                12,
                23,
                44,
                0.96
            )
        );

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

.header::before {
    content:
        "";

    position:
        absolute;

    top:
        -140px;

    right:
        -100px;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                77,
                127,
                255,
                0.26
            ),
            transparent 68%
        );

    pointer-events:
        none;
}

.header > * {
    position:
        relative;

    z-index:
        1;
}

.header h1 {
    max-width:
        760px;

    margin:
        4px 0 12px;

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

    line-height:
        1.02;

    letter-spacing:
        -0.045em;
}

.description {
    max-width:
        760px;

    margin:
        0;

    color:
        var(
            --text-soft
        );

    font-size:
        clamp(
            16px,
            2.4vw,
            21px
        );
}

.tag {
    margin:
        0 0 8px;

    color:
        var(
            --blue-light
        );

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


/* =========================================================
   STATUS BADGES
========================================================= */

.status,
.market-badge,
.import-badge,
.live-status-badge,
.finnhub-status,
.twelve-live-status,
.performance-status,
.backtest-status {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        10px 17px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        0.01em;

    white-space:
        nowrap;
}

.status.loading,
.market-badge.waiting,
.import-badge.waiting,
.performance-status.waiting,
.backtest-status.waiting {
    color:
        var(
            --yellow
        );

    border-color:
        rgba(
            255,
            211,
            90,
            0.18
        );

    background:
        rgba(
            255,
            211,
            90,
            0.11
        );
}

.status.success,
.status.ready,
.market-badge.ready,
.import-badge.ready,
.performance-status.ready,
.backtest-status.ready {
    color:
        var(
            --green
        );

    border-color:
        rgba(
            80,
            227,
            164,
            0.20
        );

    background:
        rgba(
            80,
            227,
            164,
            0.12
        );
}

.status.error,
.market-badge.error,
.import-badge.error,
.performance-status.error,
.performance-status.failed,
.backtest-status.error,
.backtest-status.failed {
    color:
        var(
            --red
        );

    border-color:
        rgba(
            255,
            113,
            131,
            0.20
        );

    background:
        rgba(
            255,
            113,
            131,
            0.12
        );
}

.performance-status.running,
.backtest-status.running {
    color:
        var(
            --blue-light
        );

    border-color:
        rgba(
            77,
            127,
            255,
            0.22
        );

    background:
        rgba(
            77,
            127,
            255,
            0.13
        );
}


/* =========================================================
   GENERIC PANELS
========================================================= */

.panel {
    width:
        100%;

    margin-bottom:
        22px;

    padding:
        28px;

    overflow:
        hidden;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(
                15,
                25,
                46,
                0.97
            ),
            rgba(
                9,
                17,
                33,
                0.98
            )
        );

    box-shadow:
        0 18px 55px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.panel-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}

.panel-header h2,
.panel > h2 {
    margin:
        0 0 7px;

    font-size:
        clamp(
            27px,
            4vw,
            42px
        );

    line-height:
        1.12;

    letter-spacing:
        -0.035em;
}

.panel-header p {
    max-width:
        720px;

    margin:
        0;

    color:
        var(
            --text-soft
        );

    font-size:
        15px;
}


/* =========================================================
   PRIMARY PROBABILITY HERO
========================================================= */

.prediction-panel {
    position:
        relative;

    padding:
        32px;

    border:
        1px solid
        rgba(
            77,
            127,
            255,
            0.34
        );

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(
                77,
                127,
                255,
                0.24
            ),
            transparent 36%
        ),
        linear-gradient(
            140deg,
            #101c38,
            #0c1529 60%,
            #10192f
        );

    box-shadow:
        0 30px 90px
        rgba(
            23,
            55,
            130,
            0.25
        );
}

.prediction-panel::before {
    content:
        "PRIMARY SIGNAL";

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    margin-bottom:
        17px;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(
            137,
            170,
            255,
            0.22
        );

    border-radius:
        999px;

    background:
        rgba(
            77,
            127,
            255,
            0.10
        );

    color:
        var(
            --blue-light
        );

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.15em;
}

.prediction-panel .panel-header {
    align-items:
        center;

    margin-bottom:
        22px;
}

.prediction-panel .panel-header h2 {
    font-size:
        clamp(
            34px,
            6vw,
            58px
        );
}

.prediction-panel .market-badge {
    min-width:
        116px;

    min-height:
        52px;

    padding:
        12px 20px;

    font-size:
        15px;
}

.prediction-panel .market-badge.ready {
    box-shadow:
        0 0 30px
        rgba(
            80,
            227,
            164,
            0.15
        );
}

.market-information {
    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        18px;
}

.market-information > div {
    min-width:
        0;

    padding:
        15px 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

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

    background:
        rgba(
            255,
            255,
            255,
            0.038
        );
}

.market-information span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;
}

.market-information strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    font-size:
        17px;
}

.probability-grid {
    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        16px;
}

.probability-card {
    min-width:
        0;

    padding:
        22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );
}

.long-card {
    box-shadow:
        inset 0 0 0 1px
        rgba(
            80,
            227,
            164,
            0.04
        );
}

.short-card {
    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            113,
            131,
            0.04
        );
}

.probability-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        9px;
}

.probability-heading span {
    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        0.10em;
}

.long-card .probability-heading span,
.long-card .probability-heading strong {
    color:
        var(
            --green
        );
}

.short-card .probability-heading span,
.short-card .probability-heading strong {
    color:
        var(
            --red
        );
}

.probability-heading strong {
    font-size:
        clamp(
            28px,
            5vw,
            48px
        );

    line-height:
        1;
}

.probability-card p {
    min-height:
        42px;

    margin:
        0 0 14px;

    color:
        var(
            --text-soft
        );

    font-size:
        13px;
}

.probability-track {
    width:
        100%;

    height:
        12px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );
}

.probability-fill {
    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    transition:
        width 0.45s ease;
}

.long-fill {
    background:
        linear-gradient(
            90deg,
            var(
                --green-strong
            ),
            #6eeab7
        );
}

.short-fill {
    background:
        linear-gradient(
            90deg,
            var(
                --red-strong
            ),
            #ff8998
        );
}

.prediction-message {
    padding:
        15px 17px;

    border:
        1px solid
        rgba(
            255,
            211,
            90,
            0.18
        );

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

    background:
        rgba(
            255,
            211,
            90,
            0.08
        );

    color:
        var(
            --yellow
        );

    font-size:
        14px;

    line-height:
        1.6;
}


/* =========================================================
   VERIFIED PREDICTION PERFORMANCE
========================================================= */

#predictionPerformancePanel {
    border-color:
        rgba(
            80,
            227,
            164,
            0.20
        );

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                80,
                227,
                164,
                0.13
            ),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0e1a30,
            #091426
        );
}

#predictionPerformancePanel .performance-main-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            200px,
            0.72fr
        )
        minmax(
            0,
            1.65fr
        ) !important;

    gap:
        16px !important;

    margin-bottom:
        17px !important;
}

#predictionPerformancePanel .score-ring-card {
    min-height:
        230px !important;

    padding:
        18px !important;

    border-radius:
        18px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        ) !important;
}

#predictionPerformancePanel .score-ring {
    width:
        165px !important;

    height:
        165px !important;
}

#predictionPerformancePanel .score-ring::before {
    width:
        124px !important;

    height:
        124px !important;

    background:
        #111b30 !important;
}

#predictionPerformancePanel .score-ring-content strong {
    font-size:
        31px !important;
}

#predictionPerformancePanel .performance-stat-grid {
    display:
        grid !important;

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

    gap:
        11px !important;
}

#predictionPerformancePanel .performance-stat-grid > div {
    padding:
        15px !important;

    border-radius:
        14px !important;
}

#predictionPerformancePanel .performance-stat-grid span {
    font-size:
        11px !important;
}

#predictionPerformancePanel .performance-stat-grid strong {
    font-size:
        20px !important;
}

#predictionPerformancePanel .pending-prediction {
    padding:
        14px 16px !important;

    margin-bottom:
        16px !important;

    font-size:
        13px;
}

#predictionPerformancePanel .performance-chart {
    padding:
        17px !important;

    margin-bottom:
        17px !important;
}

#predictionPerformancePanel .result-chart-row {
    grid-template-columns:
        80px
        minmax(
            0,
            1fr
        )
        45px !important;

    margin-bottom:
        11px !important;
}

#predictionPerformancePanel .result-chart-track {
    height:
        12px !important;
}

#predictionPerformancePanel .prediction-history-list {
    display:
        grid !important;

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

    gap:
        10px !important;
}

#predictionPerformancePanel .prediction-history-item {
    padding:
        14px !important;

    border-radius:
        14px !important;
}


/* =========================================================
   WALK-FORWARD BACKTEST
========================================================= */

#walkForwardBacktestPanel {
    border-color:
        rgba(
            137,
            170,
            255,
            0.22
        );

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                77,
                127,
                255,
                0.13
            ),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0d1930,
            #091326
        );
}

#walkForwardBacktestPanel .backtest-progress-wrap {
    padding:
        15px !important;

    margin-bottom:
        15px !important;
}

#walkForwardBacktestPanel .backtest-summary-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        11px !important;

    margin-bottom:
        15px !important;
}

#walkForwardBacktestPanel .backtest-summary-grid > div {
    padding:
        15px !important;

    border-radius:
        14px !important;
}

#walkForwardBacktestPanel .backtest-summary-grid span {
    font-size:
        11px !important;
}

#walkForwardBacktestPanel .backtest-summary-grid strong {
    font-size:
        19px !important;
}

#walkForwardBacktestPanel .metric-chart {
    padding:
        17px !important;

    gap:
        12px !important;
}

#walkForwardBacktestPanel .metric-chart-row {
    grid-template-columns:
        105px
        minmax(
            0,
            1fr
        )
        55px !important;
}

#walkForwardBacktestPanel .backtest-example-list {
    display:
        grid !important;

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

    gap:
        10px !important;
}

#walkForwardBacktestPanel .backtest-example-item {
    padding:
        14px !important;

    border-radius:
        14px !important;
}

#walkForwardBacktestPanel .advanced-details {
    border-color:
        var(
            --border
        ) !important;
}

#walkForwardBacktestPanel .advanced-details-content {
    display:
        grid !important;

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


/* =========================================================
   LIVE FOREX PANEL
========================================================= */

#finnhubLivePanel,
#twelveDataLivePanel,
#massiveLiveFeedPanel {
    border-color:
        rgba(
            80,
            227,
            164,
            0.17
        );
}

#finnhubLivePanel .panel-header h2,
#twelveDataLivePanel .panel-header h2,
#massiveLiveFeedPanel .panel-header h2 {
    font-size:
        clamp(
            29px,
            4vw,
            42px
        );
}

#finnhubLivePanel .finnhub-main-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1.45fr
        )
        minmax(
            200px,
            0.75fr
        ) !important;

    gap:
        14px !important;
}

#finnhubLivePanel .finnhub-price-card,
#finnhubLivePanel .finnhub-countdown-card {
    padding:
        20px !important;

    border-radius:
        18px !important;
}

#finnhubLivePanel .finnhub-live-price {
    font-size:
        clamp(
            42px,
            7vw,
            67px
        ) !important;
}

#finnhubLivePanel .finnhub-candle-grid,
#finnhubLivePanel .finnhub-information-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        10px !important;

    margin-bottom:
        13px !important;
}

#finnhubLivePanel .finnhub-candle-grid > div,
#finnhubLivePanel .finnhub-information-grid > div {
    padding:
        14px !important;

    border-radius:
        14px !important;
}

#finnhubLivePanel .finnhub-candle-grid span,
#finnhubLivePanel .finnhub-information-grid span {
    margin-bottom:
        6px !important;

    font-size:
        11px !important;
}

#finnhubLivePanel .finnhub-candle-grid strong,
#finnhubLivePanel .finnhub-information-grid strong {
    font-size:
        15px !important;
}

#finnhubLivePanel .finnhub-message {
    padding:
        13px 15px !important;

    margin-bottom:
        12px !important;

    font-size:
        13px;
}

#finnhubLivePanel .finnhub-log {
    max-height:
        145px !important;

    padding:
        14px !important;

    margin-bottom:
        12px !important;

    font-size:
        11px !important;
}

#finnhubLivePanel .finnhub-actions {
    display:
        grid !important;

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

    gap:
        10px !important;
}


/* =========================================================
   DATASET SUMMARY
========================================================= */

.summary-grid {
    display:
        grid;

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

    gap:
        13px;

    margin-bottom:
        22px;
}

.card {
    min-width:
        0;

    padding:
        20px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(
                17,
                29,
                52,
                0.96
            ),
            rgba(
                10,
                18,
                34,
                0.98
            )
        );

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            0.14
        );
}

.card span {
    display:
        block;

    margin-bottom:
        9px;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;
}

.card strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    font-size:
        clamp(
            26px,
            4vw,
            40px
        );

    line-height:
        1.1;
}


/* =========================================================
   CLOSED CANDLE AND FEATURE DETAILS
========================================================= */

.candle-details {
    display:
        grid;

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

    gap:
        12px;
}

.candle-details > div {
    min-width:
        0;

    padding:
        17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

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

    background:
        rgba(
            255,
            255,
            255,
            0.037
        );
}

.candle-details span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;
}

.candle-details strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    font-size:
        18px;
}

.bullish {
    color:
        var(
            --green
        ) !important;
}

.bearish {
    color:
        var(
            --red
        ) !important;
}

.neutral {
    color:
        var(
            --yellow
        ) !important;
}


/* =========================================================
   CSV IMPORTER
========================================================= */

.importer-panel {
    opacity:
        0.92;

    border-style:
        dashed;
}

.importer-panel .panel-header h2 {
    font-size:
        clamp(
            26px,
            4vw,
            36px
        );
}

.import-upload-box {
    display:
        grid;

    place-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;

    padding:
        22px;

    border:
        1px dashed
        rgba(
            137,
            170,
            255,
            0.34
        );

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

    background:
        rgba(
            77,
            127,
            255,
            0.035
        );

    text-align:
        center;
}

.file-select-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        min(
            100%,
            430px
        );

    min-height:
        52px;

    padding:
        12px 20px;

    border:
        1px solid
        rgba(
            137,
            170,
            255,
            0.28
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #4d7fff,
            #3769eb
        );

    color:
        #ffffff;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 12px 30px
        rgba(
            77,
            127,
            255,
            0.18
        );
}

#csvFile {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}

#importFileName {
    max-width:
        100%;

    color:
        var(
            --text-soft
        );

    font-size:
        13px;

    overflow-wrap:
        anywhere;
}

.import-statistics {
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
}

.import-actions {
    display:
        grid;

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

    gap:
        11px;

    margin-bottom:
        14px;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
    min-height:
        50px;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(
            137,
            170,
            255,
            0.26
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #4d7fff,
            #386beb
        );

    color:
        #ffffff;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 12px 28px
        rgba(
            77,
            127,
            255,
            0.14
        );

    transition:
        transform 0.16s ease,
        filter 0.16s ease,
        opacity 0.16s ease;
}

button:active {
    transform:
        scale(
            0.985
        );
}

button:hover {
    filter:
        brightness(
            1.06
        );
}

button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.38;

    filter:
        grayscale(
            0.25
        );

    box-shadow:
        none;
}

.secondary-button {
    border-color:
        var(
            --border-strong
        );

    background:
        rgba(
            77,
            127,
            255,
            0.08
        );

    color:
        var(
            --blue-light
        );

    box-shadow:
        none;
}

.compact-panel-toggle {
    min-height:
        36px !important;

    padding:
        7px 12px !important;

    border-radius:
        999px !important;

    font-size:
        11px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   LOGS
========================================================= */

pre,
#systemLog,
#importLog,
.backtest-log,
.finnhub-log {
    width:
        100%;

    max-height:
        230px;

    margin:
        0;

    padding:
        17px;

    overflow:
        auto;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

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

    background:
        #020610;

    color:
        #65e6a8;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        12px;

    line-height:
        1.7;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}

.compact-panel-content.collapsed {
    display:
        none !important;
}


/* =========================================================
   PERFORMANCE CHART COMPONENTS
========================================================= */

#predictionPerformancePanel .performance-chart,
#walkForwardBacktestPanel .metric-chart {
    border:
        1px solid
        var(
            --border
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            0.032
        ) !important;
}

#predictionPerformancePanel .result-chart-track,
#walkForwardBacktestPanel .metric-chart-track,
#walkForwardBacktestPanel .backtest-progress-track {
    background:
        rgba(
            255,
            255,
            255,
            0.09
        ) !important;
}

#walkForwardBacktestPanel .backtest-progress-bar,
#walkForwardBacktestPanel .metric-chart-fill {
    background:
        linear-gradient(
            90deg,
            var(
                --blue
            ),
            var(
                --green
            )
        ) !important;
}

.prediction-result-badge.correct {
    color:
        var(
            --green
        ) !important;

    background:
        rgba(
            80,
            227,
            164,
            0.12
        ) !important;
}

.prediction-result-badge.wrong {
    color:
        var(
            --red
        ) !important;

    background:
        rgba(
            255,
            113,
            131,
            0.12
        ) !important;
}

.prediction-result-badge.skipped,
.prediction-result-badge.neutral,
.prediction-result-badge.missed {
    color:
        var(
            --yellow
        ) !important;

    background:
        rgba(
            255,
            211,
            90,
            0.11
        ) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width:
        900px
) {
    .container {
        width:
            min(
                calc(
                    100% -
                    24px
                ),
                var(
                    --content-width
                )
            );
    }

    .header {
        grid-template-columns:
            1fr;

        padding:
            26px;
    }

    .header .status {
        width:
            fit-content;
    }

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

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

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

    #predictionPerformancePanel .performance-main-grid {
        grid-template-columns:
            1fr !important;
    }

    #predictionPerformancePanel .score-ring-card {
        min-height:
            210px !important;
    }

    #walkForwardBacktestPanel .backtest-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    #finnhubLivePanel .finnhub-main-grid {
        grid-template-columns:
            1fr !important;
    }

    #finnhubLivePanel .finnhub-candle-grid,
    #finnhubLivePanel .finnhub-information-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width:
        600px
) {
    body {
        font-size:
            15px;
    }

    .container {
        width:
            min(
                calc(
                    100% -
                    18px
                ),
                var(
                    --content-width
                )
            );

        padding-top:
            max(
                14px,
                env(
                    safe-area-inset-top
                )
            );
    }

    .header,
    .panel {
        margin-bottom:
            14px;

        padding:
            18px;

        border-radius:
            21px;
    }

    .header {
        gap:
            17px;
    }

    .header h1 {
        margin-bottom:
            9px;

        font-size:
            clamp(
                35px,
                12vw,
                50px
            );
    }

    .description {
        font-size:
            16px;

        line-height:
            1.55;
    }

    .panel-header {
        flex-direction:
            column;

        gap:
            13px;

        margin-bottom:
            18px;
    }

    .panel-header h2,
    .panel > h2 {
        font-size:
            29px;
    }

    .panel-header p {
        font-size:
            13px;
    }

    .prediction-panel {
        padding:
            20px;
    }

    .prediction-panel .panel-header {
        align-items:
            flex-start;
    }

    .prediction-panel .panel-header h2 {
        font-size:
            36px;
    }

    .prediction-panel .market-badge {
        min-height:
            45px;

        font-size:
            13px;
    }

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

        gap:
            8px;

        margin-bottom:
            12px;
    }

    .market-information > div {
        padding:
            12px;
    }

    .market-information span {
        font-size:
            10px;
    }

    .market-information strong {
        font-size:
            14px;
    }

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

        gap:
            9px;
    }

    .probability-card {
        padding:
            15px 13px;

        border-radius:
            16px;
    }

    .probability-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;
    }

    .probability-heading span {
        font-size:
            11px;
    }

    .probability-heading strong {
        font-size:
            clamp(
                27px,
                8vw,
                34px
            );
    }

    .probability-card p {
        min-height:
            55px;

        margin-bottom:
            11px;

        font-size:
            11px;

        line-height:
            1.5;
    }

    .probability-track {
        height:
            9px;
    }

    .prediction-message {
        padding:
            12px;

        font-size:
            12px;
    }

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

        gap:
            9px;

        margin-bottom:
            14px;
    }

    .card {
        padding:
            15px;

        border-radius:
            16px;
    }

    .card span {
        margin-bottom:
            7px;

        font-size:
            10px;
    }

    .card strong {
        font-size:
            27px;
    }

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

        gap:
            8px;
    }

    .candle-details > div {
        padding:
            13px;

        border-radius:
            13px;
    }

    .candle-details span {
        font-size:
            10px;
    }

    .candle-details strong {
        font-size:
            15px;
    }

    #predictionPerformancePanel .performance-stat-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    #predictionPerformancePanel .prediction-history-list {
        grid-template-columns:
            1fr;
    }

    #predictionPerformancePanel .score-ring-card {
        min-height:
            200px !important;
    }

    #predictionPerformancePanel .score-ring {
        width:
            145px !important;

        height:
            145px !important;
    }

    #predictionPerformancePanel .score-ring::before {
        width:
            108px !important;

        height:
            108px !important;
    }

    #walkForwardBacktestPanel .backtest-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    #walkForwardBacktestPanel .backtest-example-list {
        grid-template-columns:
            1fr;
    }

    #walkForwardBacktestPanel .advanced-details-content {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    #walkForwardBacktestPanel .metric-chart-row {
        grid-template-columns:
            78px
            minmax(
                0,
                1fr
            )
            48px !important;
    }

    #finnhubLivePanel .finnhub-candle-grid,
    #finnhubLivePanel .finnhub-information-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

    #finnhubLivePanel .finnhub-candle-grid > div,
    #finnhubLivePanel .finnhub-information-grid > div {
        padding:
            12px !important;
    }

    #finnhubLivePanel .finnhub-actions {
        grid-template-columns:
            1fr !important;
    }

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

    .import-actions {
        grid-template-columns:
            1fr;
    }

    button {
        min-height:
            47px;
    }

    pre,
    #systemLog,
    #importLog,
    .backtest-log,
    .finnhub-log {
        max-height:
            180px;

        padding:
            13px;

        font-size:
            10px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width:
        370px
) {
    .container {
        width:
            calc(
                100% -
                12px
            );
    }

    .header,
    .panel {
        padding:
            15px;

        border-radius:
            18px;
    }

    .header h1 {
        font-size:
            34px;
    }

    .prediction-panel .panel-header h2 {
        font-size:
            31px;
    }

    .probability-card {
        padding:
            13px 10px;
    }

    .probability-heading strong {
        font-size:
            25px;
    }

    .probability-card p {
        font-size:
            10px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
        reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}