.auth-wrap{
  min-height:calc(100vh - 130px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 0 48px;
}

.auth-card{
  width:100%;
  max-width:460px;
  border:1px solid rgba(219,228,240,.9);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 60px rgba(15,23,42,.10);
}

.auth-card__inner{
  padding:8px 4px 2px;
}

.auth-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.auth-header h2{
  margin:0 0 6px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.auth-subtitle{
  margin:0;
  color:#64748b;
  font-size:15px;
}

.brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
}

.auth-form{
  display:block;
}

.field{
  margin-top:16px;
}

.field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
}

.field input{
  width:100%;
}

.pwd-wrapper{
  position:relative;
}

.pwd-wrapper input{
  padding-right:48px;
}

.pwd-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}

.pwd-toggle:hover{
  background:#eff6ff;
  color:#2563eb;
}

.pwd-toggle:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
}

.icon-eye{
  width:20px;
  height:20px;
  fill:currentColor;
}

.actions{
  margin-top:24px;
  display:flex;
  justify-content:flex-end;
}

.auth-submit{
  min-width:156px;
}

.alert.alert-danger{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
  border-left:5px solid #dc2626;
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
  margin-bottom:14px;
}

.alert-icon{
  width:22px;
  height:22px;
  fill:#dc2626;
  flex:0 0 auto;
}

#pwd.is-error{
  border-color:#dc2626 !important;
  background:#fff5f5 !important;
}

html.theme-dark .auth-card{
  background:rgba(15,27,45,.96) !important;
  border-color:#223554 !important;
  box-shadow:0 28px 64px rgba(0,0,0,.28);
}

html.theme-dark .auth-header h2{
  color:#f8fbff !important;
}

html.theme-dark .auth-subtitle{
  color:#9eb0c9 !important;
}

html.theme-dark .pwd-toggle{
  color:#93a6c3;
}

html.theme-dark .pwd-toggle:hover{
  background:#162846;
  color:#dceaff;
}

html.theme-dark .alert.alert-danger{
  background:rgba(127,29,29,.22);
  color:#fecaca;
  border-color:rgba(248,113,113,.35);
}

html.theme-dark #pwd.is-error{
  background:#2a1116 !important;
}

@media (max-width:640px){
  .auth-wrap{
    min-height:calc(100vh - 110px);
    padding:18px 0 28px;
  }

  .auth-card{
    max-width:none;
    border-radius:20px;
  }

  .auth-header{
    gap:12px;
  }

  .auth-header h2{
    font-size:30px;
  }
}


/* === Softer dark login refinement === */
html.theme-dark .auth-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , #141d2d !important;
  border-color:#26364d !important;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}

html.theme-dark .auth-subtitle{
  color:#9fb0c8 !important;
}

html.theme-dark .brand-badge{
  box-shadow:0 10px 24px rgba(37,99,235,.14);
}

html.theme-dark .field label{
  color:#edf3ff !important;
}

html.theme-dark .field input{
  background:#0f1727 !important;
  border-color:#314562 !important;
  color:#edf3ff !important;
}