body {
font-family: Arial;
background: linear-gradient(135deg,#667eea,#764ba2);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

.card {
background:#fff;
padding:20px;
border-radius:15px;
width:100%;
max-width:420px;
box-shadow:0 15px 30px rgba(0,0,0,.2);
}

input, button {
width:100%;
padding:12px;
margin:10px 0;
border-radius:8px;
border:1px solid #ddd;
}

button {
background:#667eea;
color:#fff;
border:none;
font-size:16px;
}

.question {
margin-bottom:15px;
}

.animate {
animation: slideUp .6s ease;
}

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

.good {color:green;}
.medium {color:orange;}
.bad {color:red;}




.progress-wrap { margin-bottom:20px; }
.progress-text { font-size:14px; margin-bottom:6px; }
.progress-bar {
  height:8px;
  background:#eee;
  border-radius:20px;
  overflow:hidden;
}
.progress-fill {
  height:100%;
  width:0%;
  background:#667eea;
  transition:width .4s ease;
}