/* === NOVO FUNDO DINÂMICO – ORBES GEOMÉTRICAS VERSO === */
:root{
    --blue:#93C5FD;
    --pink:#FCA5C0;
    --blue-2:#6CA8FF;
    --shadow-blue: 0 12px 24px rgba(54,146,247,.22);
    --shadow-blue-lg: 0 18px 36px rgba(54,146,247,.32);
    --cloud:#ffffff;

    /* cores do logo */
    --verso-blue:#0EA5E9;
    --verso-blue-deep:#0B63C5;
    --verso-green:#22C55E;
    --verso-green-deep:#15803D;
    --verso-yellow:#FACC15;
    --verso-yellow-deep:#EAB308;
    --verso-orange:#FB923C;
    --verso-orange-deep:#F97316;

    --bg-dark:#020617;
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

*{box-sizing:border-box;}
html{font-size:16px;}
body{
    margin:0;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    /* NOVO FUNDO: degradê escuro + glows nas cores do logo */
    background:
      radial-gradient(circle at 8% 0%,  rgba(14,165,233,0.13) 0, transparent 55%),
      radial-gradient(circle at 92% 10%, rgba(34,197,94,0.14) 0, transparent 55%),
      radial-gradient(circle at -10% 100%,rgba(251,146,60,0.14) 0, transparent 50%),
      radial-gradient(circle at 110% 100%,rgba(250,204,21,0.14) 0, transparent 50%),
      linear-gradient(160deg,#020617 0%, #020617 40%, #031022 100%);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    position:relative;
    overflow:hidden;
    animation: pageEnter 0.5s ease-out;
}

/* ====== NOVA CAMADA DE FUNDO GEOMÉTRICO ====== */
.scene{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

/* blocos principais */
.shape{
    position:absolute;
    border-radius:22px;
    background-size:180% 180%;
    opacity:.9;
    mix-blend-mode:screen;
    filter:drop-shadow(0 18px 40px rgba(15,23,42,.55));
    will-change:transform;
}

.shape--blue{
    background-image:linear-gradient(135deg,var(--verso-blue),var(--verso-blue-deep));
}
.shape--green{
    background-image:linear-gradient(135deg,var(--verso-green),var(--verso-green-deep));
}
.shape--yellow{
    background-image:linear-gradient(135deg,var(--verso-yellow),var(--verso-yellow-deep));
}
.shape--orange{
    background-image:linear-gradient(135deg,var(--verso-orange),var(--verso-orange-deep));
}

/* tamanhos e posições dos blocos */
.shape--1{
    width:320px;height:220px;
    top:-60px;left:-40px;
    transform:rotate(-18deg);
    animation: floatShape1 28s ease-in-out infinite alternate;
}
.shape--2{
    width:280px;height:210px;
    top:10%;right:-80px;
    transform:rotate(16deg);
    animation: floatShape2 32s ease-in-out infinite alternate;
}
.shape--3{
    width:260px;height:190px;
    bottom:-80px;left:4%;
    transform:rotate(11deg);
    animation: floatShape3 30s ease-in-out infinite alternate;
}
.shape--4{
    width:340px;height:230px;
    bottom:-120px;right:-40px;
    transform:rotate(-22deg);
    animation: floatShape4 34s ease-in-out infinite alternate;
}

/* fragmentos menores, tipo “lasquinhas” */
.fragment{
    position:absolute;
    width:80px;height:56px;
    border-radius:18px;
    opacity:.8;
    mix-blend-mode:screen;
    filter:drop-shadow(0 10px 24px rgba(15,23,42,.6));
    background-size:180% 180%;
    will-change:transform;
}

.fragment--blue{ background-image:linear-gradient(135deg,var(--verso-blue),var(--verso-blue-deep)); }
.fragment--green{ background-image:linear-gradient(135deg,var(--verso-green),var(--verso-green-deep)); }
.fragment--yellow{ background-image:linear-gradient(135deg,var(--verso-yellow),var(--verso-yellow-deep)); }
.fragment--orange{ background-image:linear-gradient(135deg,var(--verso-orange),var(--verso-orange-deep)); }

.fragment--a{ top:18%;left:20%; animation: driftFragA 22s ease-in-out infinite alternate; }
.fragment--b{ top:26%;right:24%; animation: driftFragB 24s ease-in-out infinite alternate; }
.fragment--c{ bottom:28%;left:30%; animation: driftFragC 26s ease-in-out infinite alternate; }
.fragment--d{ bottom:24%;right:20%; animation: driftFragD 23s ease-in-out infinite alternate; }

/* animações dos blocos */
@keyframes floatShape1{
    0%{ transform:translate3d(0,0,0) rotate(-18deg) scale(1); }
    100%{ transform:translate3d(40px,26px,0) rotate(-10deg) scale(1.06); }
}
@keyframes floatShape2{
    0%{ transform:translate3d(0,0,0) rotate(16deg) scale(1); }
    100%{ transform:translate3d(-32px,24px,0) rotate(9deg) scale(1.04); }
}
@keyframes floatShape3{
    0%{ transform:translate3d(0,0,0) rotate(11deg) scale(1); }
    100%{ transform:translate3d(26px,-26px,0) rotate(4deg) scale(1.05); }
}
@keyframes floatShape4{
    0%{ transform:translate3d(0,0,0) rotate(-22deg) scale(1); }
    100%{ transform:translate3d(-40px,-24px,0) rotate(-14deg) scale(1.07); }
}

/* animações dos fragmentos */
@keyframes driftFragA{
    0%{ transform:translate3d(0,0,0) rotate(-12deg); }
    100%{ transform:translate3d(18px,-16px,0) rotate(-6deg); }
}
@keyframes driftFragB{
    0%{ transform:translate3d(0,0,0) rotate(8deg); }
    100%{ transform:translate3d(-16px,-10px,0) rotate(2deg); }
}
@keyframes driftFragC{
    0%{ transform:translate3d(0,0,0) rotate(15deg); }
    100%{ transform:translate3d(18px,14px,0) rotate(9deg); }
}
@keyframes driftFragD{
    0%{ transform:translate3d(0,0,0) rotate(-18deg); }
    100%{ transform:translate3d(-18px,12px,0) rotate(-10deg); }
}

/* menos movimento se o usuário pedir redução */
@media (prefers-reduced-motion: reduce){
    .shape,
    .fragment{
        animation-duration: 60s;
    }
}

/* ====== SHELL E CARD ====== */

/* ====== PAGE TRANSITIONS ====== */
@keyframes pageEnter{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.page-exit{
    animation: pageExit 0.4s ease-out forwards;
}

@keyframes pageExit{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

/* ====== RESPONSIVE ====== */
@media (max-width:420px){
    .brand{width:72%;}
    .title{font-size:1.05rem;}
}
.login-shell{
    width:100%;
    max-width:min(98vw,1040px);
    position:relative;
    z-index:1; /* acima do fundo */
}

@media (min-width:768px){
    .login-shell{max-width:min(96vw,1120px);}
}

@media (min-width:1280px){
    .login-shell{max-width:1200px;min-width: 500px;}
}

/* Variante estreita para formulários simples (ex: recuperar senha, registro simples) */
.login-shell--narrow{
    max-width: 400px !important;
    min-width: auto !important;
}

.card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 28px 56px rgba(0,0,0,.14);
}

.card__header{
    background: #FFF;
    padding:22px 20px 4px;
    text-align:center;
}

.brand{
    width:60%;
    max-width:360px;
    height:auto;
    margin:0 auto 8px;
    display:block;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

.title{
    margin:0;
    color:#c3c3c3;
    font-weight:800;
    letter-spacing:.2px;
    font-size:clamp(1rem,2.1vw,1.25rem);
}

.card__body{padding:clamp(24px, 5vw, 40px);}
.grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.4vw,22px);}

/* ====== FORM ELEMENTS ====== */
.field{margin-bottom:14px;}

.label{
    display:block;
    font-size:.92rem;
    font-weight:600;
    color:#000;
    margin-bottom:6px;
}

.input{
    width:100%;
    padding:13px 12px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--blue);
    box-shadow:0 0 0 3px rgba(54,146,247,.14);
    outline:none;
    transition:box-shadow .16s ease,border-color .16s ease;
}

.input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(54,146,247,.22);
}

/* ====== BUTTONS ====== */
.forgot{
    display:inline-block;
    font-size:.85rem;
    color:var(--pink);
    text-decoration:none;
    margin:6px 0 18px;
    transition:opacity .15s ease,transform .15s ease;
}

.forgot:hover{
    opacity:.9;
    transform:translateY(-1px);
}

.btn{
    appearance:none;
    border:none;
    border-radius:14px;
    padding:13px 16px;
    width:100%;
    color:#fff;
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(90deg,var(--blue)0%,var(--pink)100%);
    box-shadow:var(--shadow-blue);
    transition:transform .12s ease,box-shadow .12s ease,filter .18s ease,opacity .12s ease;
    -webkit-text-fill-color:#fff;
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
    filter:grayscale(12%);
}

.btn:not(:disabled):hover{
    color:#fff;
    -webkit-text-fill-color:#fff;
    transform:translateY(-1px);
    box-shadow:var(--shadow-blue-lg);
    filter:brightness(1.05);
}

.btn:not(:disabled):active{
    color:#fff;
    transform:translateY(0);
    box-shadow:var(--shadow-blue);
}

.btn--enabled{animation:glow 1.1s ease-out 1;}

@keyframes glow{
    0%{box-shadow:0 0 0 0 rgba(54,146,247,.28);}
    100%{box-shadow:var(--shadow-blue);}
}

.btn__icon,
.btn__spinner{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn__spinner{ 
    display:none; 
}

.btn__spinner i{ 
    font-size:16px; 
}

/* ====== DIVIDERS ====== */
.divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:20px 0;
}

.divider__line{
    flex:1;
    height:1px;
    background:#e6e6e6;
}

.divider__text{
    font-size:.95rem;
    color:var(--pink);
    font-weight:700;
}

.help-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:20px 0 10px;
}

.help-divider__line{
    flex:1;
    height:1px;
    background:#eee;
}

.help-divider__text{
    font-size:.95rem;
    color:#9aa4b2;
}

/* ====== SECONDARY BUTTONS ====== */
.btn-outline{
    width:100%;
    padding:12px 16px;
    border-radius:12px;
    border:1.5px solid var(--pink);
    color:var(--pink);
    background:#fff;
    font-weight:800;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease;
}

.btn-outline:hover{
    background:#fff5f9;
    transform:translateY(-1px);
    box-shadow:0 12px 20px rgba(251,124,173,.16);
}

.btn-support{
    --btn-bg1:var(--blue);
    --btn-bg2:var(--blue-2);
    display:flex;
    align-items:center;
    gap:.65rem;
    width:100%;
    margin-top:6px;
    padding:12px 16px;
    border-radius:12px;
    background:linear-gradient(90deg,var(--btn-bg1)0%,var(--btn-bg2)100%);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:var(--shadow-blue);
    transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}

.btn-support:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px rgba(54,146,247,.35);
    color:#fff;
}

.btn-support__icon i{font-size:1rem;}

.btn-support__text{flex:1;text-align:center;}

.btn-support__arrow{
    opacity:.95;
    transition:transform .15s ease,opacity .15s ease;
}

.btn-support:hover .btn-support__arrow{
    transform:translateX(4px);
    opacity:1;
}