*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button,input{font:inherit}
button{border:0;cursor:pointer}
svg{width:20px;height:20px;fill:currentColor;display:block}

.login-page{
    min-height:100vh;
    color:var(--text,#122D70);
    background:#f7faff;
    overflow:hidden;
    display:grid;
    place-items:center;
    padding:clamp(18px,2.2vw,34px);
    position:relative;
}
.login-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-4;
    background:
        radial-gradient(circle at 90% 18%,rgba(18,45,112,.11),transparent 27rem),
        radial-gradient(circle at 5% 78%,rgba(39,94,232,.30),transparent 31rem),
        linear-gradient(135deg,#fff 0%,#fbfdff 50%,#edf4ff 100%);
}
.login-page::after{
    content:"";
    position:fixed;
    left:-15vw;
    bottom:-24vh;
    width:82vw;
    height:62vh;
    z-index:-3;
    border-radius:0 100% 0 0;
    background:linear-gradient(128deg,rgba(39,94,232,.80),rgba(211,226,255,.48) 47%,rgba(255,255,255,.08) 70%,transparent 84%);
    box-shadow:0 -28px 110px rgba(39,94,232,.24);
}

.login-app{
    width:min(1560px,calc(100vw - clamp(36px,4.5vw,68px)));
    height:min(820px,calc(100vh - clamp(36px,4.5vw,68px)));
    min-height:620px;
    display:grid;
    grid-template-columns:minmax(560px,1.1fr) minmax(420px,.84fr);
    gap:clamp(48px,6vw,104px);
    align-items:center;
    position:relative;
    isolation:isolate;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .45s ease,transform .45s ease;
}
.login-app.is-ready{opacity:1;transform:none}
.login-app.is-exiting{opacity:.78;transform:scale(.992)}

.ambient{position:absolute;border-radius:999px;pointer-events:none;z-index:-2;filter:blur(18px)}
.ambient-left{width:330px;height:330px;left:-140px;top:-70px;background:rgba(39,94,232,.15)}
.ambient-right{width:430px;height:430px;right:-170px;top:0;background:rgba(18,45,112,.065)}
.decor-line{position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.76);border-color:rgba(255,255,255,.78) transparent transparent rgba(255,255,255,.52);border-radius:999px;z-index:-1;opacity:.68}
.decor-line-one{left:-7%;bottom:9%;width:64%;height:24%;transform:rotate(-10deg)}
.decor-line-two{left:5%;bottom:-6%;width:70%;height:32%;transform:rotate(-4deg);opacity:.28}

.login-hero{
    position:relative;
    height:100%;
    min-width:0;
    padding:clamp(42px,4.8vw,70px) clamp(32px,3.8vw,58px) clamp(42px,4.8vw,70px) clamp(58px,6.4vw,96px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    border-radius:48px;
}
.login-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    border-radius:48px;
    background:radial-gradient(circle at 18% 3%,rgba(39,94,232,.08),transparent 18rem),linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.10));
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 34px 90px rgba(18,45,112,.055),inset 0 1px 0 rgba(255,255,255,.72);
}
.login-hero::after{
    content:"";
    position:absolute;
    left:-2%;
    bottom:6%;
    width:108%;
    height:34%;
    z-index:-1;
    pointer-events:none;
    border-radius:100%;
    transform:rotate(-8deg);
    background:linear-gradient(103deg,transparent 0%,rgba(255,255,255,.55) 34%,rgba(255,255,255,.24) 56%,transparent 80%);
}

.brand-logo{
    display:block;
    width:min(430px,70%);
    height:auto;
    max-height:156px;
    object-fit:contain;
    margin:0 0 clamp(28px,4vh,46px);
    filter:drop-shadow(0 22px 32px rgba(18,45,112,.10));
    animation:logoFloat 7s ease-in-out infinite;
}
.hero-copy{max-width:720px}
.eyebrow{
    margin:0 0 18px;
    color:var(--accent,#275EE8);
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:.80rem;
    font-weight:900;
}
.hero-copy h1{
    margin:0 0 22px;
    max-width:720px;
    color:var(--primary,#122D70);
    font-size:clamp(4.1rem,5.25vw,6.25rem);
    line-height:.90;
    letter-spacing:-.087em;
    font-weight:950;
}
.hero-text{
    margin:0;
    max-width:675px;
    color:#52658e;
    font-size:clamp(1.02rem,1.16vw,1.22rem);
    line-height:1.62;
    font-weight:500;
}
.feature-row{
    margin-top:clamp(28px,4.3vh,46px);
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    max-width:720px;
}
.feature-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:42px;
    padding:0 20px;
    border:1px solid rgba(18,45,112,.11);
    border-radius:999px;
    background:rgba(255,255,255,.83);
    color:var(--primary,#122D70);
    box-shadow:0 14px 30px rgba(18,45,112,.05),inset 0 1px 0 rgba(255,255,255,.78);
    font-weight:850;
    font-size:.94rem;
    transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease,background .25s ease;
}
.feature-pill svg{width:17px;height:17px;color:var(--accent,#275EE8)}
.feature-pill.is-active{
    transform:translateY(-2px);
    border-color:rgba(39,94,232,.30);
    background:#fff;
    box-shadow:0 20px 42px rgba(39,94,232,.15),0 0 0 5px rgba(39,94,232,.05);
}
.trust-note{
    margin-top:auto;
    padding-top:clamp(28px,4.5vh,50px);
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--primary,#122D70);
}
.trust-icon{
    width:38px;
    height:38px;
    border-radius:14px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    color:#fff;
    background:linear-gradient(135deg,var(--accent,#275EE8),var(--primary,#122D70));
    box-shadow:0 18px 35px rgba(39,94,232,.22);
}
.trust-icon svg{width:20px;height:20px}
.trust-note strong{display:block;font-size:.98rem;font-weight:900}
.trust-note small{display:block;margin-top:4px;color:#7180a3;font-size:.88rem;font-weight:500}

.login-panel{
    height:100%;
    display:grid;
    place-items:center;
    min-width:0;
}
.panel-card{
    position:relative;
    width:min(510px,100%);
    min-height:600px;
    padding:clamp(38px,4.2vw,60px) clamp(34px,3.4vw,50px) clamp(30px,3.4vw,44px);
    overflow:hidden;
    border-radius:42px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 48px 120px rgba(18,45,112,.17),inset 0 1px 0 rgba(255,255,255,.92);
    text-align:center;
    animation:cardFloat 8s ease-in-out infinite;
}
.panel-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 50% 8%,rgba(39,94,232,.12),transparent 16rem),
        linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.38));
}
.panel-card>*{position:relative;z-index:1}
.panel-icon{
    width:116px;
    height:116px;
    margin:0 auto 26px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.92);
    box-shadow:0 24px 58px rgba(18,45,112,.12),0 0 0 10px rgba(255,255,255,.34),inset 0 0 0 1px rgba(39,94,232,.09);
}
.panel-icon img{width:72px;height:72px;object-fit:contain;display:block}
.panel-kicker{
    margin:0 0 13px;
    color:var(--accent,#275EE8);
    font-size:.80rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.25em;
}
.panel-card h2{
    margin:0 0 18px;
    color:var(--primary,#122D70);
    font-size:clamp(2.05rem,2.7vw,2.55rem);
    line-height:.98;
    letter-spacing:-.066em;
    font-weight:950;
}
.panel-text{
    margin:0 auto 26px;
    max-width:397px;
    color:#5f6b82;
    font-size:.98rem;
    line-height:1.58;
    font-weight:500;
}
.panel-text code{
    color:var(--primary,#122D70);
    background:rgba(39,94,232,.085);
    border:1px solid rgba(39,94,232,.12);
    border-radius:9px;
    padding:3px 8px;
    font-weight:900;
}
.provider-card-mini{
    display:flex;
    align-items:center;
    text-align:left;
    gap:14px;
    margin:0 0 22px;
    padding:12px 14px;
    border-radius:22px;
    border:1px solid rgba(18,45,112,.10);
    background:rgba(255,255,255,.74);
    box-shadow:0 12px 28px rgba(18,45,112,.06);
}
.provider-card-mini img{width:58px;height:48px;object-fit:contain;border-radius:14px;background:#fff}
.provider-card-mini span{display:block;color:#748096;font-size:.76rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em}
.provider-card-mini strong{display:block;margin-top:3px;color:var(--primary,#122D70)}
.smart-form{display:grid;gap:16px;text-align:left}
.field{display:grid;gap:9px}
.field>span{color:#2d3650;font-weight:850;font-size:.92rem}
.input-shell{
    height:60px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 18px;
    border-radius:18px;
    border:1px solid rgba(18,45,112,.16);
    background:rgba(255,255,255,.88);
    color:#8693aa;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 12px 28px rgba(18,45,112,.04);
    transition:border-color .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease;
}
.input-shell:focus-within,.input-shell.has-value{
    border-color:var(--accent,#275EE8);
    box-shadow:0 0 0 5px rgba(39,94,232,.12),0 16px 34px rgba(39,94,232,.10),inset 0 1px 0 rgba(255,255,255,.9);
    color:var(--accent,#275EE8);
    background:#fff;
}
.input-shell svg{width:20px;height:20px;flex:0 0 auto}
.input-shell input{width:100%;height:100%;min-width:0;border:0;outline:0;background:transparent;color:#1d2841;font-weight:750;font-size:1rem}
.input-shell input::placeholder{color:#8b96aa;font-weight:750}
.primary-action{
    position:relative;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:1px;
    overflow:hidden;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent,#275EE8),#0F46D9 48%,var(--primary,#122D70));
    box-shadow:0 20px 45px rgba(39,94,232,.30),inset 0 1px 0 rgba(255,255,255,.22);
    font-weight:920;
    font-size:1.02rem;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease;
}
.primary-action:hover{transform:translateY(-2px);box-shadow:0 28px 58px rgba(39,94,232,.36);filter:saturate(1.05)}
.primary-action:active{transform:translateY(0)}
.primary-action svg{width:25px;height:25px;transition:transform .18s ease}
.primary-action:hover svg{transform:translateX(3px)}
.primary-action:disabled{opacity:.72;cursor:wait;transform:none}
.login-app.is-busy .primary-action::after{
    content:"";
    position:absolute;
    right:18px;
    width:24px;
    height:24px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.38);
    border-top-color:#fff;
    animation:spin .72s linear infinite;
}
.login-app.is-busy .primary-action svg{opacity:0}
.form-feedback{min-height:24px;margin-top:-2px;text-align:center;font-size:.90rem;font-weight:850}
.form-feedback.is-info{color:var(--primary,#122D70)}
.form-feedback.is-success{color:#11815d}
.form-feedback.is-error{color:#c33d3d}
.panel-security{
    margin-top:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#60708c;
    font-size:.88rem;
    line-height:1.42;
}
.panel-security svg{width:18px;height:18px;color:var(--primary,#122D70);flex:0 0 auto}

@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1380px){
    .login-app{grid-template-columns:minmax(520px,1.05fr) minmax(410px,.88fr);gap:clamp(36px,5vw,78px)}
    .login-hero{padding-left:clamp(46px,5.5vw,78px)}
    .brand-logo{width:min(390px,68%)}
    .hero-copy h1{font-size:clamp(3.55rem,4.65vw,5.15rem)}
    .panel-card{width:min(500px,100%);min-height:590px}
}
@media (max-width:1180px){
    .login-page{overflow:auto}
    .login-app{width:min(760px,calc(100vw - 36px));height:auto;min-height:0;grid-template-columns:1fr;gap:28px}
    .login-hero{height:auto;min-height:560px;padding:42px clamp(24px,6vw,70px)}
    .login-panel{height:auto}
    .panel-card{width:min(620px,100%)}
    .login-page::after{width:120vw;height:48vh}
    .brand-logo{width:min(440px,90%)}
    .trust-note{margin-top:44px}
}
@media (max-width:720px){
    .login-page{padding:18px}
    .login-app{width:100%}
    .login-hero{padding:32px 22px;border-radius:30px;min-height:auto}
    .login-hero::before{border-radius:30px}
    .brand-logo{width:92%;max-height:140px;margin-bottom:28px}
    .hero-copy h1{font-size:3.08rem;letter-spacing:-.075em}
    .hero-text{font-size:1rem}
    .feature-pill{width:100%;justify-content:center}
    .trust-note{padding-top:22px}
    .panel-card{border-radius:30px;padding:30px 22px;min-height:auto}
    .panel-icon{width:106px;height:106px}
    .panel-icon img{width:64px;height:64px}
    .panel-card h2{font-size:2.05rem}
    .input-shell,.primary-action{height:62px}
}
@media (max-height:760px) and (min-width:1181px){
    .login-page{padding:18px}
    .login-app{height:calc(100vh - 36px);min-height:585px}
    .login-hero{padding-top:32px;padding-bottom:32px}
    .brand-logo{width:360px;max-height:130px;margin-bottom:22px}
    .hero-copy h1{font-size:4.05rem;margin-bottom:16px}
    .hero-text{font-size:1rem;line-height:1.50}
    .feature-row{margin-top:24px}
    .trust-note{padding-top:26px}
    .panel-card{min-height:560px;padding-top:34px;padding-bottom:28px}
    .panel-icon{width:104px;height:104px;margin-bottom:19px}
    .panel-icon img{width:62px;height:62px}
    .panel-card h2{font-size:2.22rem}
    .panel-text{font-size:.94rem;margin-bottom:20px}
    .input-shell{height:58px}
    .primary-action{height:62px}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .login-app{opacity:1;transform:none}
}

/* v7: evita estouro visual quando a URL da API do provedor for longa. */
.provider-card-mini{min-width:0}
.provider-card-mini>div{min-width:0;flex:1}
.provider-card-mini strong{word-break:break-all;line-height:1.25}