.wrapper-enter {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      padding: 12px;
      gap: 12px;

  }
  
  .wrapper-enter > .pie { max-width: 420px; }
  
     @media (max-width: 604px) { 
         
          .wrapper-enter > .pie { max-width: 90vw; }
         
     }
  
  .wrapper-enter > .pie .pie-container { max-width: 100%; }
  
  
  
  .mail {
    background-color: #f3f5f7;
    color: black;
    padding: 12px 20px;
    border-radius: 14px;
    height: 64px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 17px;
    line-height: 22px;
    cursor: pointer;
    border: none;
    outline: none;
}

.mail::placeholder { color: #78848D; }

.mail:focus { background-color: #E4E8ED; }


.code {
    background-color: #f3f5f7;
    color: black;
    padding: 12px 20px;
    border-radius: 14px;
    height: 64px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 17px;
    line-height: 22px;
    cursor: pointer;
    border: none;
    outline: none;
}

.code::placeholder { color: #78848D; }

.code:focus { background-color: #E4E8ED; }

.auth-status {
    width: 100%;
    min-height: 18px;
    text-align: center;
    color: #5D6870;
}

.auth-status.is-error {
    color: #D92D20;
}

.wrapper-enter .btn[hidden],
#extra_field {
    display: none;
}

.wrapper-enter .btn:disabled,
.wrapper-enter input:disabled {
    cursor: wait;
    opacity: .6;
}


   
   .avatar-character {
       width: 100%;
       aspect-ratio: 1/1;
   }
   
   
   .avatar-lesson {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 64px;
       min-width: 64px;
       height: 64px;
       min-height: 64px;
       border-radius: 14px;
       overflow: hidden;
   }
   
   .avatar-emotion-normal {
       background-color: #B7E376;
   }
   
   .btn-primary > span { color: white; }