.auth-card,
.auth-card *{
  min-width:0;
}

.auth-card{
  overflow-wrap:anywhere;
}

.auth-card.auth-shell{
  width:min(100%,500px);
  max-width:500px;
  margin:clamp(18px,4vw,42px) auto;
  padding:0;
  overflow:hidden;
}

.auth-shell-head{
  position:relative;
  padding:28px 28px 22px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 43%),
    var(--card);
}

.auth-shell-head .auth-shell-icon{
  width:46px;
  height:46px;
  margin:0 0 14px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--accent);
  font-size:19px;
}

.auth-shell-head h1{
  margin:5px 0 4px;
  font-size:clamp(25px,4vw,31px);
  line-height:1.18;
  letter-spacing:-.55px;
}

.auth-shell-head p{
  max-width:410px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.auth-shell-body{
  padding:24px 28px 27px;
}

.auth-form{
  display:grid;
  gap:18px;
}

.auth-form .auth-field{
  margin:0;
}

.auth-form .auth-field>label,
.auth-field-head>label{
  display:block;
  margin:0 0 7px;
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}

.auth-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.auth-field-head>label{
  margin:0;
}

.auth-forgot-link,
.auth-back a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--accent);
  font-size:12px;
  line-height:1.3;
}

.auth-forgot-link{
  margin:-10px -8px -9px 0;
  padding:8px;
  text-align:right;
  white-space:nowrap;
}

.auth-card input{
  max-width:100%;
  min-height:46px;
  margin:0;
  padding:11px 12px;
  border-radius:8px;
}

.auth-card input:focus{
  border-color:var(--accent);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

.auth-card :is(a,button,input):focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 58%,#fff);
  outline-offset:2px;
}

.auth-card.auth-shell .auth-submit{
  width:100%;
  min-height:46px;
  margin:2px 0 0;
  padding:11px 16px;
  text-align:center;
}

.auth-hint{
  display:block;
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  line-height:1.55;
}

.auth-alt{
  margin:19px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
  font-size:12px;
}

.auth-alt a,
.auth-back a{
  color:var(--accent);
  font-weight:600;
}

.auth-back{
  display:flex;
  justify-content:center;
  margin:14px 0 -8px;
}

.auth-back a{
  padding:8px 10px;
}

.auth-notice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 20px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
}

.auth-notice>i{
  flex:0 0 auto;
  margin-top:3px;
  font-size:17px;
}

.auth-notice strong,
.auth-notice p{
  display:block;
  margin:0;
}

.auth-notice p,
.auth-notice ul{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.55;
}

.auth-notice ul{
  padding-left:18px;
}

.auth-notice.is-success{
  border-color:#a7e3c4;
  background:#ecfdf3;
  color:#166534;
}

.auth-notice.is-error{
  border-color:#fecaca;
  background:#fff1f2;
  color:#991b1b;
}

html[data-theme=dark] .auth-notice.is-success{
  border-color:#235f43;
  background:#102a20;
  color:#a7f3d0;
}

html[data-theme=dark] .auth-notice.is-error{
  border-color:#713338;
  background:#321b20;
  color:#fecaca;
}

@media(max-width:900px){
  .auth-card input{
    font-size:16px;
  }
}

@media(max-width:560px){
  .auth-card.auth-shell{
    margin:10px auto 18px;
    border-radius:9px;
  }

  .auth-shell-head{
    padding:22px 19px 18px;
  }

  .auth-shell-body{
    padding:20px 19px 22px;
  }

  .auth-field-head{
    gap:8px;
  }

  .auth-forgot-link{
    white-space:normal;
  }
}

@media(prefers-reduced-motion:reduce){
  .auth-card *,
  .auth-card *::before,
  .auth-card *::after{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}