@media (max-width: 767px) {
.auto-page-wrapper {
    max-width: 98vw;
    padding: 1.3em 1em 1em 1em;
    font-size: 1em;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.auto-page-wrapper {
    max-width: 680px;
    padding: 2em 2em 2em 2em;
    font-size: 1.08em;
}
}

@media (min-width: 1025px) {
.auto-page-wrapper {
    max-width: 480px;
    margin: 5vh auto 0 auto;
    padding: 2.5em 2em 2em 2em;
    background: #fff;
    border-radius: 2em;
    box-shadow: 0 4px 24px 0 #2196f308;
    text-align: center;
    animation: fadeInDown .9s cubic-bezier(.19,1,.22,1);
}
.auto-page-icon {
    margin-bottom: 1em;
    animation: swing .9s ease;
}
.auto-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #183963;
    margin-bottom: 0.3em;
}
.auto-page-badge {
    display: inline-block;
    background: linear-gradient(90deg,#2196f3 50%,#ffc107 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    padding: .3em 1.4em;
    margin-bottom: 1em;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px 0 #2196f305;
}
.auto-page-desc {
    color: #6b7c92;
    font-size: 1.09rem;
    margin-bottom: .7em;
}
.auto-page-progress {
  background: #e5e7ef;
  border-radius: 100px;
  height: 11px;
  width: 72%;
  margin: 0 auto 10px auto;
  box-shadow: 0 2px 12px #ffc10718;
  overflow: hidden;
}
.auto-progress-bar {
  background: linear-gradient(90deg, #ffb300 60%, #2196f3 100%);
  height: 100%;
  border-radius: 100px;
  transition: width .5s;
  animation: progressPulse 2s infinite alternate;
}
}