/* ===== Mimora webmail — premium login v5 (CSS-only, host-scoped) ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');

body.task-login{margin:0;min-height:100vh;font-family:'Nunito',-apple-system,Segoe UI,sans-serif;
  background:#10306e;
  background:
    radial-gradient(820px 520px at 12% 6%,rgba(99,160,255,.55),transparent 60%),
    radial-gradient(620px 480px at 92% 4%,rgba(255,216,63,.30),transparent 55%),
    radial-gradient(900px 760px at 86% 104%,rgba(16,64,150,.70),transparent 60%),
    linear-gradient(155deg,#2f7cf0 0%,#1a5fce 48%,#123f8c 100%);
  background-attachment:fixed}
body.task-login::before,body.task-login::after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(6px)}
body.task-login::before{width:240px;height:240px;left:-70px;bottom:6%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%)}
body.task-login::after{width:180px;height:180px;right:5%;top:12%;background:radial-gradient(circle,rgba(255,216,63,.22),transparent 70%)}

#layout{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:26px 18px;background:transparent!important;overflow:auto}

/* The card — force block + auto height so it contains the whole form */
#layout-content.no-navbar{position:relative;z-index:1;display:block!important;height:auto!important;min-height:0!important;max-height:none!important;
  flex:0 0 auto;width:100%;max-width:410px;margin:auto;background:#fff!important;border-radius:30px;padding:40px 36px 30px;text-align:center;
  box-shadow:0 42px 96px -30px rgba(7,26,70,.58),0 1px 0 rgba(255,255,255,.7) inset;
  animation:mimrise .55s cubic-bezier(.2,.75,.2,1) both}
@keyframes mimrise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

#logo{display:block;margin:0 auto 2px;max-width:188px;width:60%;height:auto}
#login-form.propform{display:block!important;height:auto!important;min-height:0!important;margin:0;text-align:left}
#login-form::before{content:"Bem-vindo de volta";display:block;text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:23px;color:#172439;margin:8px 0 6px}

#login-form .input-group,#login-form .form-group{display:flex!important;margin:0 0 14px 0!important;width:100%}
#login-form .input-group{background:#f1f5fb;border:1.6px solid #e4ebf5;border-radius:16px;overflow:hidden;align-items:center;transition:border-color .15s,box-shadow .15s,background .15s}
#login-form .input-group:focus-within{border-color:#1F6FE6;background:#fff;box-shadow:0 0 0 4px rgba(31,111,230,.15)}
#login-form .input-group-prepend,#login-form .input-group-text{background:transparent!important;border:0!important;color:#9aa7bd!important;padding-left:15px}
#login-form .form-control{flex:1;border:0!important;background:transparent!important;box-shadow:none!important;height:52px;font-size:15px;color:#172439;padding-left:8px}
#login-form .form-control::placeholder{color:#9aa7bd}

.formbuttons{display:block!important;margin:6px 0 0!important;text-align:center;float:none!important}
#rcmloginsubmit,#login-form button.mainaction,#login-form .btn-primary{width:100%!important;height:54px;margin:0!important;border:0!important;border-radius:999px!important;
  background:linear-gradient(180deg,#3286ff,#1F6FE6 55%,#1a5fd6)!important;color:#fff!important;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;letter-spacing:.2px;
  box-shadow:0 15px 28px -11px rgba(31,111,230,.72);cursor:pointer;transition:transform .12s,box-shadow .2s,filter .2s}
#rcmloginsubmit:hover,#login-form button.mainaction:hover{transform:translateY(-1px);box-shadow:0 19px 34px -11px rgba(31,111,230,.82);filter:brightness(1.05)}
#rcmloginsubmit:active{transform:translateY(0)}

#login-footer{margin-top:20px!important;text-align:center;line-height:0;font-size:0!important;position:static!important}
#login-footer::after{content:"Sempre perto de quem mais importa";font-family:'Fredoka',sans-serif;font-weight:500;font-size:12.5px;line-height:1.3;color:#aeb8c9;letter-spacing:.2px}

@media (max-width:430px){#layout-content.no-navbar{padding:34px 22px 22px;border-radius:26px}#logo{width:56%}}

/* Neutralize Elastic vertical-centering offset so the form sits inside the card */
#login-form,#login-form.propform{top:0!important;bottom:auto!important}
#layout-content.no-navbar>#login-form{position:relative!important}

/* Logo: kill Elastic offset → sits at top of card */
#layout-content>#logo,#logo{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;float:none!important;margin:2px auto 12px!important}