:root {

    --bg:
        #080c14;

    --panel:
        #111823;

    --panel2:
        #151e2b;

    --border:
        #263246;

    --text:
        #f7f9fc;

    --muted:
        #8998ad;

    --green:
        #25d57f;

    --green2:
        #0cab62;

    --red:
        #f05262;

    --purple:
        #7257ff;

    --blue:
        #4685ff;

    --yellow:
        #f5c84c;
}


* {
    box-sizing:
        border-box;
}


html,
body {
    margin:
        0;

    min-height:
        100%;

    background:
        var(--bg);
}


body {

    color:
        var(--text);

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

    background:

        radial-gradient(
            circle at top,
            #18243a 0,
            #080c14 34%
        );
}


button,
input,
select {
    font:
        inherit;
}


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


.app-shell {

    width:
        min(680px, 100%);

    min-height:
        100vh;

    margin:
        0 auto;

    padding-bottom:
        88px;
}


.topbar {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        calc(
            14px +
            env(safe-area-inset-top)
        )
        16px
        12px;

    background:
        rgba(
            8,
            12,
            20,
            .92
        );

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .05
        );
}


.logo {

    font-size:
        19px;

    font-weight:
        900;

    letter-spacing:
        .6px;
}


.logo b {
    color:
        var(--green);
}


.subtitle {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        10px;
}


.status {

    padding:
        6px 10px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        900;
}


.status.active {

    background:
        rgba(
            37,
            213,
            127,
            .13
        );

    color:
        var(--green);
}


.status.stopped {

    background:
        rgba(
            240,
            82,
            98,
            .13
        );

    color:
        var(--red);
}


main {

    padding:
        12px 12px 24px;
}


.tab-page {
    display:
        none;
}


.tab-page.active {
    display:
        block;
}


.bank-strip {

    display:
        grid;

    grid-template-columns:
        1.1fr 1fr .8fr;

    gap:
        7px;
}


.bank-strip > div {

    min-width:
        0;

    padding:
        11px;

    background:
        var(--panel);

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

    border-radius:
        13px;
}


.bank-strip span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        800;
}


.bank-strip strong {

    display:
        block;

    overflow:
        hidden;

    margin-top:
        5px;

    font-size:
        15px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.next-operation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        9px;

    padding:
        14px;

    background:

        linear-gradient(
            135deg,
            rgba(
                114,
                87,
                255,
                .12
            ),
            rgba(
                37,
                213,
                127,
                .05
            )
        ),

        var(--panel);

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

    border-radius:
        16px;
}


.mini-label {

    display:
        block;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .8px;
}


.next-left strong {

    display:
        block;

    margin-top:
        2px;

    font-size:
        31px;

    font-weight:
        950;
}


.round-box {

    min-width:
        72px;

    padding:
        9px 11px;

    text-align:
        center;

    background:
        #090e17;

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

    border-radius:
        12px;
}


.round-box span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;
}


.round-box strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        18px;
}


.progress-track {

    height:
        6px;

    margin:
        8px 4px 0;

    overflow:
        hidden;

    background:
        #03060a;

    border-radius:
        10px;
}


.progress-fill {

    width:
        14%;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            var(--green),
            var(--yellow)
        );

    border-radius:
        10px;

    transition:
        width .25s ease;
}


.progression-text {

    overflow:
        hidden;

    margin:
        6px 4px 10px;

    color:
        #627189;

    font-size:
        9px;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.mode-switch {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;

    margin-bottom:
        9px;

    padding:
        4px;

    background:
        #090e17;

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

    border-radius:
        13px;
}


.mode-btn {

    min-height:
        40px;

    padding:
        8px 6px;

    color:
        var(--muted);

    background:
        transparent;

    border:
        0;

    border-radius:
        10px;

    font-size:
        10px;

    font-weight:
        900;
}


.mode-btn.active {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #5a63ff,
            #7847ff
        );

    box-shadow:
        0 6px 20px
        rgba(
            99,
            79,
            255,
            .22
        );
}


.panel {

    margin-bottom:
        9px;

    padding:
        13px;

    background:
        var(--panel);

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

    border-radius:
        15px;
}


.panel-title {

    margin-bottom:
        11px;

    font-size:
        13px;

    font-weight:
        900;
}


.panel-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.panel-head .panel-title {
    margin-bottom:
        0;
}


.panel-head small {

    color:
        var(--muted);

    font-size:
        9px;
}


.odds-mobile {

    display:
        grid;

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

    gap:
        7px;
}


label span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        800;
}


input,
select {

    width:
        100%;

    min-height:
        45px;

    padding:
        10px;

    color:
        #fff;

    background:
        #090e17;

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

    border-radius:
        10px;

    outline:
        none;
}


input:focus,
select:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 2px
        rgba(
            70,
            133,
            255,
            .10
        );
}


.main-button {

    width:
        100%;

    min-height:
        45px;

    margin-top:
        10px;

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            #5269ff,
            #7b3fff
        );

    border:
        0;

    border-radius:
        11px;

    font-size:
        12px;

    font-weight:
        950;
}


.main-button:active,
.result-btn:active,
.nav-btn:active {

    transform:
        scale(.98);
}


.stake-big {

    overflow:
        hidden;

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

    border-radius:
        12px;
}


.stake-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    padding:
        12px;

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


.stake-item:last-child {
    border-bottom:
        0;
}


.stake-name {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.dot {

    width:
        9px;

    height:
        9px;

    flex:
        0 0 auto;

    border-radius:
        50%;
}


.dot.over {
    background:
        var(--blue);
}


.dot.four {
    background:
        var(--yellow);
}


.dot.five {
    background:
        var(--green);
}


.stake-name b {

    display:
        block;

    font-size:
        12px;
}


.stake-name small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        9px;
}


.stake-item > strong {

    font-size:
        20px;

    font-weight:
        950;
}


.scenario-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-bottom:
        9px;
}


.scenario-card {

    padding:
        12px;

    background:
        var(--panel);

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

    border-radius:
        15px;
}


.scenario-title {

    margin-bottom:
        10px;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .4px;
}


.scenario-return span,
.scenario-profit span,
.scenario-cycle span {

    display:
        block;

    color:
        #6f7e93;

    font-size:
        8px;
}


.scenario-return strong {

    display:
        block;

    margin:
        2px 0 8px;

    font-size:
        21px;
}


.scenario-profit,
.scenario-cycle {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        4px;

    margin-top:
        5px;
}


.scenario-profit b,
.scenario-cycle b {

    font-size:
        11px;

    color:
        var(--green);
}


.action-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}


.result-btn {

    min-height:
        51px;

    color:
        #fff;

    border:
        0;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        950;
}


.result-btn span {

    margin-right:
        4px;

    font-size:
        17px;
}


.result-btn.green {

    background:
        #0b9558;
}


.result-btn.green2 {

    background:
        #087747;
}


.result-btn.red {

    grid-column:
        1 / -1;

    background:
        #b73e4c;
}


.result-btn:disabled {

    opacity:
        .35;
}


.message {

    margin-top:
        9px;

    padding:
        10px;

    border-radius:
        10px;

    font-size:
        11px;

    line-height:
        1.5;
}


.message.success {

    color:
        #a9f6cf;

    background:
        rgba(
            37,
            213,
            127,
            .09
        );

    border:
        1px solid
        rgba(
            37,
            213,
            127,
            .20
        );
}


.message.error {

    color:
        #ffc5cb;

    background:
        rgba(
            240,
            82,
            98,
            .09
        );

    border:
        1px solid
        rgba(
            240,
            82,
            98,
            .20
        );
}


.message.info {

    color:
        #d2dcff;

    background:
        rgba(
            70,
            133,
            255,
            .09
        );

    border:
        1px solid
        rgba(
            70,
            133,
            255,
            .20
        );
}


.cycle-small {

    padding:
        3px;

    color:
        var(--muted);

    font-size:
        9px;

    text-align:
        center;
}


.page-title {

    margin:
        4px 2px 12px;

    font-size:
        22px;

    font-weight:
        950;
}


.stats-grid {

    display:
        grid;

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

    gap:
        7px;

    margin-bottom:
        9px;
}


.stat {

    padding:
        11px;

    background:
        var(--panel);

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

    border-radius:
        12px;
}


.stat span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        800;
}


.stat strong {

    display:
        block;

    margin-top:
        5px;

    overflow:
        hidden;

    font-size:
        14px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.small-button {

    padding:
        6px 8px;

    color:
        var(--muted);

    background:
        #090e17;

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

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        900;
}


.history-item {

    padding:
        11px 0;

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


.history-item:last-child {
    border-bottom:
        0;
}


.history-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;
}


.history-result {

    padding:
        5px 7px;

    border-radius:
        7px;

    font-size:
        9px;

    font-weight:
        950;
}


.history-result.win {

    color:
        var(--green);

    background:
        rgba(
            37,
            213,
            127,
            .10
        );
}


.history-result.loss {

    color:
        var(--red);

    background:
        rgba(
            240,
            82,
            98,
            .10
        );
}


.history-money {

    font-size:
        13px;

    font-weight:
        900;
}


.history-detail {

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.5;
}


.form-stack {

    display:
        grid;

    gap:
        10px;
}


.simulation {

    line-height:
        1.7;

    font-size:
        12px;
}


.progression-preview {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        10px;

    padding:
        10px;

    background:
        #090e17;

    border-radius:
        10px;
}


.progression-preview span {

    color:
        var(--muted);

    font-size:
        9px;
}


.progression-preview strong {

    font-size:
        15px;
}


.help-text {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.5;
}


.settings-save {
    margin-top:
        0;
}


.secondary-button {

    width:
        100%;

    min-height:
        45px;

    margin-top:
        8px;

    color:
        var(--text);

    background:
        transparent;

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

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        900;
}


.bottom-nav {

    position:
        fixed;

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        100;

    display:
        grid;

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

    width:
        min(680px, 100%);

    margin:
        0 auto;

    padding:
        7px
        7px
        calc(
            7px +
            env(safe-area-inset-bottom)
        );

    background:
        rgba(
            9,
            14,
            23,
            .96
        );

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

    backdrop-filter:
        blur(14px);
}


.nav-btn {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    color:
        #69788e;

    background:
        transparent;

    border:
        0;

    border-radius:
        10px;

    font-size:
        9px;

    font-weight:
        800;
}


.nav-icon {

    margin-bottom:
        2px;

    font-size:
        19px;

    line-height:
        1;
}


.nav-btn.active {

    color:
        var(--green);

    background:
        rgba(
            37,
            213,
            127,
            .07
        );
}


.hidden {
    display:
        none !important;
}


@media (
    max-width:
        380px
) {

    .bank-strip strong {
        font-size:
            13px;
    }

    .next-left strong {
        font-size:
            28px;
    }

    .scenario-return strong {
        font-size:
            18px;
    }

    .stake-item > strong {
        font-size:
            18px;
    }

}


/* =========================================
   V2.1 - RESUMO OPERACIONAL
========================================= */

.next-side {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        6px;

    min-width:
        92px;
}


.spent-box strong {

    font-size:
        13px;
}


.return-health {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        6px 12px;

    align-items:
        center;

    margin-bottom:
        9px;

    padding:
        11px 12px;

    background:
        var(--panel);

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

    border-radius:
        13px;
}


.return-health span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .4px;
}


.return-health strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        14px;
}


.quality-right {

    text-align:
        right;
}


.return-health small {

    grid-column:
        1 / -1;

    color:
        #59687c;

    font-size:
        8px;

    line-height:
        1.35;
}


.return-health.strong {

    border-color:
        rgba(
            37,
            213,
            127,
            .36
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                37,
                213,
                127,
                .09
            ),
            var(--panel)
        );
}


.return-health.strong #qualityLabel {

    color:
        var(--green);
}


.return-health.balanced {

    border-color:
        rgba(
            245,
            200,
            76,
            .30
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                245,
                200,
                76,
                .07
            ),
            var(--panel)
        );
}


.return-health.balanced #qualityLabel {

    color:
        var(--yellow);
}


.return-health.tight {

    border-color:
        rgba(
            240,
            82,
            98,
            .28
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                240,
                82,
                98,
                .07
            ),
            var(--panel)
        );
}


.return-health.tight #qualityLabel {

    color:
        var(--red);
}


.cycle-status {

    margin-top:
        9px;

    padding:
        7px 5px;

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        900;

    text-align:
        center;
}


.cycle-status.positive {

    color:
        var(--green);

    background:
        rgba(
            37,
            213,
            127,
            .08
        );
}


.cycle-status.negative {

    color:
        var(--red);

    background:
        rgba(
            240,
            82,
            98,
            .08
        );
}


@media (
    max-width:
        380px
) {

    .next-side {

        min-width:
            82px;
    }


    .round-box {

        min-width:
            0;
    }


    .return-health strong {

        font-size:
            12px;
    }

}


/* =========================================
   V2.2 - BANCA SE PERDER
========================================= */

.risk-box {

    border-color:
        rgba(
            240,
            82,
            98,
            .18
        );
}


.risk-box strong {

    font-size:
        13px;
}


.risk-box.safe strong {

    color:
        var(--green);
}


.risk-box.warning strong {

    color:
        var(--yellow);
}


.risk-box.danger strong {

    color:
        var(--red);
}


@media (
    max-width:
        420px
) {

    .next-side {

        min-width:
            96px;
    }


    .round-box {

        padding:
            7px 8px;
    }


    .round-box span {

        font-size:
            7px;
    }


    .round-box strong {

        font-size:
            13px;
    }

}


/* =========================================
   V2.3 - OVER 2.5
========================================= */

.over25-toggle {

    flex:
        0 0 auto;

    padding:
        7px 9px;

    color:
        var(--green);

    background:
        rgba(
            37,
            213,
            127,
            .08
        );

    border:
        1px solid
        rgba(
            37,
            213,
            127,
            .25
        );

    border-radius:
        9px;

    font-size:
        8px;

    font-weight:
        950;

    cursor:
        pointer;
}


.over25-toggle.off {

    color:
        var(--muted);

    background:
        #090e17;

    border-color:
        var(--border);
}


.over25-info {

    margin:
        -2px 0 10px;

    color:
        #64748b;

    font-size:
        8px;

    line-height:
        1.4;
}


.odds-four {

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


.dot.over25 {

    background:
        #37b6ff;
}


.scenario3-wrapper {

    margin-bottom:
        8px;
}


.scenario-three {

    border-color:
        rgba(
            55,
            182,
            255,
            .25
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                55,
                182,
                255,
                .05
            ),
            var(--panel)
        );
}


.blue-result {

    background:
        #2478bb;
}


.action-grid {

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


.result-btn.red {

    grid-column:
        1 / -1;
}


.over25-disabled {

    display:
        none !important;
}


@media (
    max-width:
        520px
) {

    .odds-four {

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


    .action-grid {

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


    .blue-result {

        grid-column:
            1 / -1;
    }


    .result-btn.red {

        grid-column:
            1 / -1;
    }

}