/* AUTH */
.modal.auth{
  width:520px;
  max-width:calc(100vw - 32px);
  height:auto;
  max-height:min(720px, calc(100vh - 32px));
  display:block;
  overflow:hidden;
}

.auth-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 22px 0;
}

.auth-body{padding:18px 22px 22px}
.auth-title{margin:0;font-size:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auth-title__brand{display:inline-flex;align-items:baseline}
.auth-row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.auth-actions{display:flex;gap:10px;align-items:center;justify-content:stretch;margin-top:14px}
.auth-actions .btn{flex:1}
.auth-error{color:#fca5a5;font-size:12px;min-height:16px}

.auth-close{
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:16px;
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
}

@media (max-width: 520px){
  .modal.auth{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    height:auto;
    max-height:calc(100vh - 24px);
    border-radius:24px;
  }

  .auth-head,
  .auth-body{
    padding-left:18px;
    padding-right:18px;
  }

  .auth-head{padding-top:18px}
  .auth-body{padding-top:16px;padding-bottom:18px}
  .auth-actions{flex-direction:column}
  .auth-actions .btn{width:100%}
}