:root{
  --pink:#4f8dff !important;
  --pink2:#8bc5ff !important;
  --purple:#5875c8 !important;
  --blue:#4f8dff !important;
}

html,
body.login-body{
  width:100%;
  min-height:100%;
  margin:0;
}

.login-body{
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  background-color:#bfe5fb !important;
  background-image:
    linear-gradient(rgba(235,248,255,.42),rgba(240,247,255,.50)),
    url('/assets/blue-kawaii-desktop.svg') !important;
  background-position:center center !important;
  background-size:auto,cover !important;
  background-repeat:no-repeat,no-repeat !important;
  background-attachment:fixed,fixed !important;
}

.login-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.12),transparent 24%),
    radial-gradient(circle at 82% 30%,rgba(255,255,255,.08),transparent 28%);
  z-index:0;
}

.login-body .login-shell{
  position:relative;
  z-index:1;
}

.login-body .flower{
  display:none;
}

.login-body .login-brand{
  background:rgba(255,255,255,.18);
  border-radius:34px;
  backdrop-filter:blur(4px);
}

.login-body .login-card{
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(244,250,255,.84));
  border:1px solid rgba(203,224,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 22px 55px rgba(61,113,175,.22);
}

.login-body .premium-badge,
.login-body .primary-btn{
  background:linear-gradient(90deg,#4f8dff,#8bc5ff) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(79,141,255,.25) !important;
}

.login-body .bank-preview span{
  border-color:#cbdcff !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 7px 20px rgba(79,141,255,.13);
}

.login-body .login-brand h1{
  color:#5575c5 !important;
  text-shadow:0 4px 0 rgba(255,255,255,.92),0 10px 28px rgba(61,113,175,.18);
}

.login-body input{
  border-color:#cbdcff !important;
}

.login-body input:focus{
  border-color:#6ea6ff !important;
  box-shadow:0 0 0 3px rgba(79,141,255,.16) !important;
}

.login-body #username,
.login-body .version-ribbon{
  font-family:"Comic Sans MS","Comic Sans",cursive !important;
}

@media(max-width:760px){
  html,
  body.login-body{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    background:#bfe5fb !important;
  }

  .login-body{
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    padding:0 !important;
    overflow-y:auto !important;
    background-color:#bfe5fb !important;
    background-image:
      linear-gradient(rgba(235,248,255,.50),rgba(240,247,255,.58)),
      url('/assets/blue-kawaii-pattern.svg') !important;
    background-position:center top !important;
    background-size:auto,100% auto !important;
    background-repeat:no-repeat,repeat-y !important;
    background-attachment:scroll,scroll !important;
  }

  .login-body .login-shell{
    width:100% !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:18px !important;
    padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 36px) !important;
    box-sizing:border-box !important;
  }

  .login-body .login-brand{
    width:100% !important;
    min-height:150px !important;
    background:rgba(255,255,255,.18) !important;
    padding:16px 10px !important;
    box-sizing:border-box !important;
  }

  .login-body .login-card{
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    background:rgba(255,255,255,.91) !important;
  }
}

@media(max-width:760px) and (min-height:720px){
  .login-body .login-shell{
    justify-content:center !important;
  }
}