.quiz{
width:500px;
height:600px;
background:rgba(11,11,11,.75);
border:1px solid #1c1c1c;
border-radius:20px;
padding:34px 30px;
box-shadow:0 30px 70px rgba(0,0,0,.6);
backdrop-filter:blur(10px);
color:#fff;
font-family:Inter,system-ui,Arial;
}

h2{color:#9ac72c}

.progress{height:4px;background:#111;border-radius:10px;margin-bottom:28px;overflow:hidden}
.bar{height:100%;width:0%;background:linear-gradient(90deg,#9ac72c,#d7ff74);transition:.35s}

.step{display:none;transform:translateX(40px);opacity:0;transition:.35s}
.step.active{display:block;transform:translateX(0);opacity:1}

.options{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.card{padding:18px 14px;border:1px solid #1c1c1c;border-radius:14px;text-align:center;cursor:pointer;background:#080808;transition:.25s}
.card:hover{transform:translateY(-3px);border-color:#2a2a2a}
.card.selected{border-color:#9ac72c;box-shadow:0 0 0 1px #9ac72c,0 0 18px rgba(154,199,44,.45),inset 0 0 12px rgba(154,199,44,.15)}

.icon{font-size:26px;margin-bottom:8px;display:block}

.nav{display:flex;justify-content:space-between;margin-top:26px}

button{padding:12px 20px;border-radius:10px;border:none;font-weight:600;cursor:pointer}
.next{background:#9ac72c;color:#000}
.back{background:#151515;color:#fff}
.submit{width:100%;background:#9ac72c;color:#000;padding:14px}

input{width:100%;padding:14px;margin-bottom:14px;border-radius:10px;border:1px solid #1c1c1c;background:#050505;color:#fff}
input:focus{outline:none;border-color:#9ac72c}