/* =========================================================
   VizerON V2.4 — refinamento visual final do login
========================================================= */

.vzLoginShell{
    grid-template-columns:minmax(0,1.63fr) minmax(455px,.87fr);
    background:
        radial-gradient(circle at 28% 24%,rgba(0,118,255,.105),transparent 35%),
        radial-gradient(circle at 83% 44%,rgba(0,111,255,.045),transparent 26%),
        linear-gradient(110deg,#020817 0%,#031126 61%,#010613 100%);
}

.vzBrandContent{
    width:min(850px,82%);
    padding-top:6.7vh;
}

.vzBrandLogo{
    width:min(740px,100%);
    filter:drop-shadow(0 14px 30px rgba(0,102,255,.13));
}

.vzBrandTagline{margin-top:4.6vh}

.vzBrandTagline::before{
    box-shadow:
        0 0 11px rgba(0,160,255,.28),
        0 0 22px rgba(91,225,52,.07);
}

.vzPillars{
    width:min(620px,100%);
    margin-left:auto;
    margin-right:auto;
}

.vzPillars i{width:42px;height:42px}

.vzIconPlay{
    border-width:5px;
    filter:drop-shadow(0 0 8px rgba(0,122,255,.48));
}

.vzBroadcastSceneV23{
    height:clamp(260px,30vh,345px);
    border-top-color:rgba(28,146,255,.09);
    box-shadow:
        inset 0 66px 78px rgba(1,8,21,1),
        inset 0 -20px 34px rgba(1,7,18,.5);
}

.vzBroadcastSceneV23 img{
    opacity:.84;
    filter:saturate(.82) contrast(1.04) brightness(.72);
    object-position:center 55%;
}

.vzBroadcastSceneV23::before{
    background:
        linear-gradient(180deg,#020918 0%,rgba(2,9,24,.94) 11%,rgba(2,9,24,.52) 25%,rgba(2,9,24,.08) 52%,rgba(2,9,24,.34) 100%),
        linear-gradient(90deg,rgba(2,9,24,.46),transparent 28%,transparent 74%,rgba(2,9,24,.62));
}

.vzBroadcastSceneV23Shade{
    background:
        radial-gradient(ellipse at 53% 74%,transparent 0%,rgba(1,7,18,.15) 55%,rgba(1,7,18,.45) 100%),
        linear-gradient(180deg,transparent 48%,rgba(1,7,18,.46) 100%);
}

.vzLoginAccess{padding-left:4.5vw;padding-right:4.5vw}

.vzLoginCard{
    width:min(555px,100%);
    padding:48px 46px 40px;
    border-color:rgba(46,130,230,.39);
    border-radius:25px;
    background:
        radial-gradient(circle at 50% 0%,rgba(10,70,135,.12),transparent 30%),
        linear-gradient(180deg,rgba(5,20,45,.92),rgba(2,12,30,.965));
    box-shadow:
        0 34px 100px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.vzSecureMark{margin-bottom:12px}

.vzLoginCard h2{
    margin-top:16px;
    margin-bottom:12px;
    line-height:1.03;
    letter-spacing:-.038em;
}

.vzLoginIntro{margin-bottom:32px}

.vzField input{
    border-color:rgba(133,158,202,.48);
    background:rgba(2,12,29,.77);
}

.vzField input:focus{
    border-color:#168fff;
    box-shadow:
        0 0 0 3px rgba(22,143,255,.13),
        0 0 26px rgba(0,118,255,.11);
}

.vzLoginFooter{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    min-height:54px;
    padding:13px 24px;
    color:#718199;
    background:rgba(1,7,18,.76);
}

.vzLoginFooter strong{color:#8796ad;font-weight:600}

.vzLoginFooter span{
    position:relative;
    padding-left:17px;
}

.vzLoginFooter span::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:15px;
    transform:translateY(-50%);
    background:rgba(110,145,195,.3);
}

@media(max-width:1250px){
    .vzLoginShell{grid-template-columns:minmax(0,1.45fr) minmax(455px,.82fr)}
    .vzBrandContent{width:86%}
    .vzLoginCard{padding-left:38px;padding-right:38px}
}

@media(max-width:900px){
    .vzBrandContent{width:min(760px,88%)}
    .vzLoginAccess{padding-left:20px;padding-right:20px}
    .vzLoginFooter{position:relative;flex-direction:column;gap:4px}
    .vzLoginFooter span{padding-left:0}
    .vzLoginFooter span::before{display:none}
}

@media(max-width:620px){
    .vzBrandLogo{width:100%}
    .vzLoginCard{padding:36px 22px 31px}
    .vzLoginFooter span{display:none}
}