:root{
    --bg:#06090f;
    --panel:#0c121d;
    --panel2:#101925;
    --line:#1a2738;
    --text:#edf4fb;
    --muted:#7e90a6;
    --green:#29e29a;
    --red:#ff5d73;
    --yellow:#f4c95d;
    --blue:#4ca6ff;
}

*{
    box-sizing:border-box;
}

html{
    color-scheme:dark;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 15% -10%,
            #12304c 0,
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0,
            #102720 0,
            transparent 28%
        ),
        var(--bg);

    color:var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.shell{
    width:min(
        1200px,
        calc(100% - 30px)
    );

    margin:auto;
}

.topbar{
    min-height:74px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

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

.brand{
    display:flex;

    align-items:center;

    gap:9px;

    font-weight:900;

    letter-spacing:.8px;
}

.brand-gs{
    color:#04170f;

    background:var(--green);

    border-radius:8px;

    padding:6px 8px;
}

.nav{
    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;
}

.nav a{
    color:#c8d4e0;

    padding:9px 11px;

    border-radius:9px;
}

.nav a:hover{
    background:#101925;
}

.nav .nav-cta{
    color:#03130d;

    background:var(--green);

    font-weight:800;
}

.lab-banner{
    margin-top:16px;

    padding:10px 14px;

    border-radius:10px;

    border:
        1px solid #594713;

    background:#211b08;

    color:#f7d86e;

    font-size:12px;

    letter-spacing:.4px;
}

.lab-dot{
    color:var(--yellow);
}

.flash{
    margin-top:16px;

    padding:12px 15px;

    background:#0e2c22;

    border:
        1px solid #205840;

    color:#a7f0d1;

    border-radius:10px;
}

.hero{
    padding:
        65px 0 36px;
}

.eyebrow{
    color:var(--green);

    font-size:12px;

    font-weight:900;

    letter-spacing:2px;
}

.hero h1{
    margin:
        12px 0;

    max-width:820px;

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

    line-height:1.02;
}

.hero p{
    max-width:680px;

    color:var(--muted);

    line-height:1.7;

    font-size:16px;
}

.page-title{
    padding:
        35px 0 18px;
}

.page-title h1{
    margin:0;

    font-size:34px;
}

.page-title p{
    color:var(--muted);
}

.grid{
    display:grid;

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

    gap:14px;
}

.grid-2{
    display:grid;

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

    gap:14px;
}

.card{
    background:
        linear-gradient(
            180deg,
            rgba(18,29,43,.96),
            rgba(10,16,25,.98)
        );

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

    box-shadow:
        0 18px 60px rgba(0,0,0,.22);

    border-radius:16px;

    padding:19px;
}

.card-label{
    color:var(--muted);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.card-value{
    margin-top:8px;

    font-size:30px;

    font-weight:900;
}

.positive{
    color:var(--green);
}

.negative{
    color:var(--red);
}

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

.section{
    margin-top:18px;
}

.section-title{
    margin:
        0 0 15px;

    font-size:19px;
}

.table-wrap{
    overflow-x:auto;
}

table{
    width:100%;

    border-collapse:collapse;
}

th,
td{
    padding:13px 11px;

    text-align:left;

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

    white-space:nowrap;
}

th{
    color:var(--muted);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.form{
    display:grid;

    gap:11px;
}

label{
    color:var(--muted);

    font-size:12px;
}

input,
select,
textarea{
    width:100%;

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

    background:#07101a;

    color:var(--text);

    padding:12px;

    border-radius:9px;

    outline:none;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#355477;
}

textarea{
    min-height:90px;

    resize:vertical;
}

.btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

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

    background:#121c29;

    color:#e9f3fb;

    padding:
        10px 14px;

    border-radius:9px;

    cursor:pointer;

    font-weight:700;
}

.btn:hover{
    filter:brightness(1.12);
}

.btn-primary{
    background:var(--green);

    border-color:var(--green);

    color:#03140d;
}

.btn-danger{
    background:#33151b;

    border-color:#632530;

    color:#ffc2ca;
}

.actions{
    display:flex;

    gap:7px;

    flex-wrap:wrap;
}

.admin-nav{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:
        22px 0 18px;
}

.admin-nav a{
    padding:
        9px 12px;

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

    border-radius:8px;

    color:#cbd7e4;

    background:#0d1520;
}

.admin-nav a:hover{
    border-color:#355477;
}

.chart-card{
    overflow:hidden;
}

.chart-area{
    height:270px;

    display:flex;

    align-items:flex-end;

    gap:6px;

    padding:
        20px 5px 0;

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

.chart-bar-wrap{
    flex:1;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;
}

.chart-bar{
    width:70%;

    min-width:4px;

    max-width:28px;

    border-radius:5px;

    position:absolute;

    left:15%;
}

.chart-bar.positive-bar{
    bottom:50%;

    background:
        linear-gradient(
            180deg,
            #43f0b0,
            #12885f
        );

    border-radius:
        5px 5px 0 0;
}

.chart-bar.negative-bar{
    top:50%;

    background:
        linear-gradient(
            180deg,
            #9e293b,
            #ff6b80
        );

    border-radius:
        0 0 5px 5px;
}

.chart-zero{
    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#2a3a4d;
}

.empty{
    text-align:center;

    padding:40px;

    color:var(--muted);
}

.auth-box{
    width:min(
        500px,
        100%
    );

    margin:
        45px auto;
}

.small{
    color:var(--muted);

    font-size:12px;
}

.badge{
    display:inline-flex;

    align-items:center;

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

    background:#111a25;

    padding:
        5px 8px;

    border-radius:999px;

    font-size:11px;
}

.badge-green{
    color:#9bf1cf;

    border-color:#245c47;

    background:#0d2a20;
}

.badge-red{
    color:#ffc0c8;

    border-color:#63303a;

    background:#2c1318;
}

.badge-yellow{
    color:#f8da78;

    border-color:#594713;

    background:#231d09;
}

.footer{
    display:flex;

    justify-content:space-between;

    gap:15px;

    flex-wrap:wrap;

    padding:
        35px 0;

    margin-top:35px;

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

    color:var(--muted);

    font-size:12px;
}

@media(max-width:850px){

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

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

}

@media(max-width:560px){

    .shell{
        width:
            min(
                calc(100% - 20px),
                1200px
            );
    }

    .topbar{
        align-items:flex-start;

        flex-direction:column;

        padding:
            15px 0;
    }

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

    .hero{
        padding-top:40px;
    }

    .hero h1{
        font-size:40px;
    }

}

/* ==========================================================
   GS VISION PERFORMANCE
   FASE 2 - VITRINE PREMIUM
   ========================================================== */

.result-date{
    margin-top:8px;
    font-size:12px;
    color:#7791ab;
}

.gsvp-public-hero{
    margin-top:24px;
    padding:38px;
    border:1px solid #1d3042;
    border-radius:24px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(41,226,154,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 0,
            rgba(76,166,255,.10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #0c1623,
            #080d14
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.30);
    overflow:hidden;
    position:relative;
}

.gsvp-live-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:35px;
}

.gsvp-live-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    border:1px solid #245946;
    background:#0c281e;
    color:#8ee8c4;
    font-size:10px;
    letter-spacing:1px;
    font-weight:900;
}

.gsvp-live-badge span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#29e29a;
    box-shadow:
        0 0 15px #29e29a;
}

.gsvp-update{
    color:#6f8499;
    font-size:12px;
}

.gsvp-update strong{
    color:#d9e5ef;
}

.gsvp-hero-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1.5fr)
        minmax(280px,.7fr);
    gap:40px;
    align-items:center;
}

.gsvp-public-hero h1{
    margin:10px 0 18px;
    font-size:
        clamp(
            44px,
            6vw,
            76px
        );
    line-height:.98;
    max-width:720px;
    letter-spacing:-2px;
}

.gsvp-public-hero p{
    max-width:620px;
    color:#8297aa;
    font-size:16px;
    line-height:1.7;
}

.gsvp-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:25px;
}

.gsvp-big-button{
    padding:13px 18px;
}

.gsvp-main-result{
    padding:28px;
    border-radius:20px;
    border:1px solid #1f3547;
    background:
        linear-gradient(
            180deg,
            rgba(14,28,40,.96),
            rgba(7,14,21,.96)
        );
    text-align:right;
}

.gsvp-main-result-label{
    color:#71899d;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.3px;
}

.gsvp-main-result-value{
    margin-top:10px;
    font-size:
        clamp(
            45px,
            5vw,
            70px
        );
    font-weight:950;
    letter-spacing:-2px;
}

.gsvp-main-result-meta{
    margin-top:8px;
    color:#758b9e;
    font-size:12px;
}

.gsvp-primary-cards{
    margin-top:16px;
}

.gsvp-kpi{
    min-height:145px;
    position:relative;
    overflow:hidden;
}

.gsvp-kpi:after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    background:
        rgba(41,226,154,.035);
    right:-25px;
    bottom:-25px;
}

.gsvp-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.gsvp-section-head h2{
    margin:5px 0 0;
    font-size:22px;
}

.gsvp-equity-card{
    padding:24px;
}

.gsvp-index-box{
    text-align:right;
}

.gsvp-index-box span{
    display:block;
    color:#667d92;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.gsvp-index-box strong{
    display:block;
    margin-top:4px;
    font-size:25px;
}

.gsvp-svg-wrap{
    height:300px;
    background:
        linear-gradient(
            180deg,
            rgba(15,28,40,.38),
            rgba(5,10,16,.06)
        );
    border:1px solid #172536;
    border-radius:15px;
    padding:12px;
    overflow:hidden;
}

.gsvp-equity-svg{
    display:block;
    width:100%;
    height:100%;
}

.gsvp-chart-footer{
    display:flex;
    justify-content:space-between;
    gap:15px;
    color:#698096;
    font-size:11px;
    margin-top:10px;
}

.gsvp-chart-footer strong{
    color:#d6e1eb;
}

.gsvp-unit{
    font-size:12px;
    color:#71879b;
    font-weight:500;
}

.gsvp-daily-chart{
    height:240px;
    display:flex;
    align-items:center;
    position:relative;
    gap:6px;
    padding:10px 0;
}

.gsvp-zero-line{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:#26384c;
}

.gsvp-daily-column{
    flex:1;
    height:100%;
    position:relative;
    min-width:4px;
}

.gsvp-daily-bar{
    position:absolute;
    left:15%;
    width:70%;
    min-width:4px;
    max-width:30px;
    border-radius:4px;
}

.gsvp-bar-up{
    bottom:50%;
    background:
        linear-gradient(
            180deg,
            #3af0ac,
            #168a62
        );
    box-shadow:
        0 0 13px rgba(41,226,154,.12);
    border-radius:4px 4px 0 0;
}

.gsvp-bar-down{
    top:50%;
    background:
        linear-gradient(
            180deg,
            #a8293b,
            #ff6277
        );
    box-shadow:
        0 0 13px rgba(255,93,115,.10);
    border-radius:0 0 4px 4px;
}

.gsvp-transparency{
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(41,226,154,.07),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #0f1925,
            #090f17
        );
}

.gsvp-transparency h2{
    font-size:27px;
    margin:8px 0 12px;
}

.gsvp-transparency p{
    color:#8296a8;
    line-height:1.7;
}

.gsvp-info-line{
    display:flex;
    gap:10px;
    align-items:center;
    margin:11px 0;
    color:#bdccd8;
}

.gsvp-info-line span{
    display:inline-flex;
    width:23px;
    height:23px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0d2a20;
    border:1px solid #20583f;
    color:#29e29a;
    font-size:11px;
}

.gsvp-privacy-box{
    margin-top:20px;
    padding:14px;
    border-radius:11px;
    border:1px solid #1c3242;
    background:#08111a;
    color:#7790a4;
    font-size:12px;
    line-height:1.6;
}

.gsvp-disclaimer{
    margin-top:18px;
    padding:15px 18px;
    border-radius:12px;
    border:1px solid #283849;
    background:#0a111a;
    color:#748a9d;
    font-size:12px;
    line-height:1.6;
}

.gsvp-disclaimer strong{
    color:#c3d1dc;
}

@media(max-width:850px){

    .gsvp-hero-grid{
        grid-template-columns:1fr;
    }

    .gsvp-main-result{
        text-align:left;
    }

}

@media(max-width:560px){

    .gsvp-public-hero{
        padding:24px 18px;
        border-radius:18px;
    }

    .gsvp-live-row{
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:25px;
    }

    .gsvp-public-hero h1{
        font-size:43px;
        letter-spacing:-1px;
    }

    .gsvp-svg-wrap{
        height:220px;
    }

}

/* ==========================================================
   FASE 2.1 - CAMPOS MASCARADOS
   ========================================================== */

input::placeholder{
    color:#52677b;
}

input[type="email"]{
    text-transform:lowercase;
}


/* ==========================================================
   FASE 2.8 - COMPROVANTE
   ========================================================== */

input[type="file"]{
    cursor:pointer;
    padding:8px;
}

input[type="file"]::file-selector-button{
    margin-right:12px;
    padding:9px 13px;
    border:1px solid #24364a;
    border-radius:8px;
    background:#142131;
    color:#e9f1f8;
    cursor:pointer;
    font-weight:700;
}

input[type="file"]::file-selector-button:hover{
    background:#1a2a3d;
}

.receipt-help{
    margin-top:-4px;
    margin-bottom:5px;
}


/* ==========================================================
   FASE 2.12 - SAQUES
   ========================================================== */

.withdrawal-policy-box{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:10px;
    margin:12px 0 18px;
}

.withdrawal-policy-box > div{
    padding:12px;
    border:1px solid #1e3042;
    border-radius:10px;
    background:#09131e;
}

.withdrawal-policy-box span{
    display:block;
    margin-bottom:5px;
    color:#70869b;
    font-size:9px;
    letter-spacing:.8px;
    font-weight:900;
}

.withdrawal-policy-box strong{
    display:block;
    color:#dce8f2;
    font-size:15px;
}

.withdrawal-closed{
    margin:10px 0 14px;
    padding:11px 12px;
    border:1px solid #28394b;
    border-radius:9px;
    background:#0a131d;
    line-height:1.5;
}

@media(max-width:560px){

    .withdrawal-policy-box{
        grid-template-columns:1fr;
    }

}