*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f6f8fc;color:#13213c}
body{min-height:100vh}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(390px,46%) 1fr}

/* PAINEL DA MARCA */
.brand-panel{
    position:relative;
    overflow:hidden;
    padding:58px 64px;
    background:
        radial-gradient(circle at 18% 16%,rgba(41,130,255,.34),transparent 28%),
        radial-gradient(circle at 85% 75%,rgba(0,174,255,.16),transparent 32%),
        linear-gradient(145deg,#071a43 0%,#08275c 48%,#06377c 100%);
    color:#fff
}
.brand-panel:before,.brand-panel:after{
    content:"";position:absolute;border:1px solid rgba(255,255,255,.08);
    border-radius:50%;width:520px;height:520px
}
.brand-panel:before{right:-270px;top:-140px}
.brand-panel:after{left:-330px;bottom:-330px}
.brand-content{position:relative;z-index:2;height:100%;min-height:650px;display:flex;flex-direction:column}
.brand-logo{display:block;max-width:280px;max-height:78px;object-fit:contain;object-position:left center}
.brand-message{margin:auto 0;max-width:540px}
.brand-tag{
    display:inline-flex;padding:8px 13px;border:1px solid rgba(255,255,255,.18);
    border-radius:20px;background:rgba(255,255,255,.07);
    font-size:11px;font-weight:800;letter-spacing:1.6px
}
.brand-message h1{font-size:52px;line-height:1.05;margin:22px 0 18px;letter-spacing:-2px}
.brand-message p{max-width:470px;font-size:17px;line-height:1.7;color:#c8d8f3;margin:0}
.brand-footer{display:flex;align-items:center;gap:9px;font-size:13px;color:#bfd0ed}
.status-dot{width:9px;height:9px;background:#38d98a;border-radius:50%;box-shadow:0 0 0 5px rgba(56,217,138,.11)}

/* LOGIN */
.form-panel{display:flex;align-items:center;justify-content:center;padding:50px 7%;background:#f8faff}
.login-card{width:100%;max-width:470px}
.mobile-logo{display:none}
.login-heading{margin-bottom:34px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#1769e0}
.login-heading h2{font-size:34px;letter-spacing:-1px;margin:8px 0 9px;color:#102044}
.login-heading p{margin:0;color:#72809a;font-size:15px;line-height:1.5}

.field{margin-bottom:21px}
.field-header{display:flex;align-items:center;justify-content:space-between;gap:15px}
.field label{display:block;font-size:13px;font-weight:700;color:#263654;margin-bottom:8px}
.link{font-size:12px;color:#1769e0;text-decoration:none;font-weight:700;margin-bottom:8px}
.field input{
    width:100%;height:54px;border:1px solid #dce3ee;border-radius:11px;
    padding:0 16px;background:#fff;color:#152442;font-size:14px;outline:none;
    transition:.2s;border-box
}
.field input:focus{border-color:#2c76e8;box-shadow:0 0 0 4px rgba(44,118,232,.09)}
.field input::placeholder{color:#a0aabd}
.password-wrap{position:relative}
.password-wrap input{padding-right:54px}
.show-password{
    position:absolute;right:8px;top:7px;width:40px;height:40px;border:0;
    border-radius:8px;background:transparent;cursor:pointer;font-size:16px
}
.remember{display:flex;align-items:center;gap:9px;font-size:13px;color:#65738d;margin:2px 0 25px;cursor:pointer}
.remember input{width:16px;height:16px;accent-color:#1769e0}
.btn-login{
    width:100%;height:55px;border:0;border-radius:11px;padding:0 20px;
    display:flex;align-items:center;justify-content:center;gap:13px;
    background:linear-gradient(135deg,#1769e0,#0751be);color:#fff;
    font-size:14px;font-weight:800;cursor:pointer;
    box-shadow:0 12px 28px rgba(17,91,199,.20);transition:.2s
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 15px 32px rgba(17,91,199,.27)}
.btn-login span{font-size:20px;font-weight:400}
.divider{display:flex;align-items:center;gap:14px;margin:29px 0 20px;color:#9aa6b8;font-size:10px;font-weight:800;letter-spacing:1.1px}
.divider:before,.divider:after{content:"";height:1px;background:#e3e8f0;flex:1}
.btn-first{
    height:52px;border:1px solid #d6dfeb;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;color:#1b5fc5;text-decoration:none;font-size:13px;font-weight:800;
    transition:.2s
}
.btn-first:hover{border-color:#8fb4ea;background:#f6faff}
.security-note{text-align:center;color:#97a3b5;font-size:11px;margin:25px 0 0}

/* RESPONSIVO */
@media(max-width:900px){
    .login-page{grid-template-columns:1fr}
    .brand-panel{display:none}
    .form-panel{min-height:100vh;padding:35px 22px}
    .login-card{max-width:430px}
    .mobile-logo{display:block;text-align:center;margin-bottom:38px}
    .mobile-logo img{max-width:245px;max-height:70px;object-fit:contain}
    .login-heading{text-align:center}
    .login-heading h2{font-size:30px}
}
@media(max-width:480px){
    .form-panel{align-items:flex-start;padding:32px 20px}
    .mobile-logo{margin:8px 0 34px}
    .login-heading{margin-bottom:28px}
    .login-heading h2{font-size:28px}
    .field-header{align-items:flex-end}
}