.quiz-open-btn{
    padding:18px 42px;
    border-radius:50px;
    border:none;
    cursor:pointer;
    color:#fff;
    font-weight:600;
    background:linear-gradient(135deg,#ff2fa6,#7c5cff);
    box-shadow:0 0 35px rgba(255,47,166,.45);
}
.quiz-open-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 0 55px rgba(255,47,166,.6);
}

.quiz-modal{position:fixed;inset:0;display:none;z-index:99999}
.quiz-modal.active{display:block}
.quiz-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8)}

.quiz-box{
  position:relative;
  width:94%;
  max-width:520px;
  margin:10vh auto;
  background:#0f1116;
  border-radius:22px;
  padding:36px;
  color:#fff;
  box-shadow:0 0 80px rgba(124,92,255,.35);
  border:1px solid rgba(255,47,166,.15)
}

.quiz-close{position:absolute;right:18px;top:14px;font-size:22px;cursor:pointer}

.quiz-progress-wrap{
  position:relative;
  height:8px;
  background:#1a1f2b;
  border-radius:10px;
  margin-bottom:28px;
  overflow:hidden;
}
.quiz-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff2fa6,#7c5cff);
  transition:.4s;
}
.quiz-progress-text{
  position:absolute;
  right:10px;
  top:-22px;
  font-size:12px;
  opacity:.7;
}

.quiz-step{display:none;animation:fade .35s ease}
.quiz-step.active{display:block}

.quiz-step h3{margin-bottom:22px}

.quiz-answers button,
.quiz-next,
.quiz-finish,
.quiz-finish-final,
.quiz-step input{
  width:100%;
  padding:15px;
  margin-bottom:12px;
  border-radius:14px;
  border:none;
  font-size:16px
}

.quiz-answers button{
  background:#161b27;
  color:#fff;
  border:1px solid #23283a;
}
.quiz-answers button:hover{
  background:linear-gradient(135deg,#ff2fa6,#7c5cff);
}

.quiz-step input{
  background:#161b27;
  color:#fff;
  border:1px solid #23283a;
}

.quiz-next,
.quiz-finish,
.quiz-finish-final{
  background:linear-gradient(135deg,#ff2fa6,#7c5cff);
  color:#fff;
}

.quiz-profit{
  text-align:center;
  font-size:20px;
  margin:20px 0;
  background:linear-gradient(90deg,#ff2fa6,#7c5cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}

@keyframes fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.quiz-error{
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: linear-gradient(135deg,#ff4d6d,#ff1fa8);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,0,120,.4);
    animation: quizErrorShow .3s ease;
    z-index: 999;
}

@keyframes quizErrorShow{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}

.field-error {
  color: #ff4d6d;
  font-size: 13px;
  margin-top: 6px;
  animation: fe 0.3s ease;
}

@keyframes fe {
  from { opacity:0; transform: translateY(-4px); }
  to { opacity:1; transform: translateY(0); }
}