/* ===== RESET & BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#f9f9fb;
  color:#2d2d2d;
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  line-height:1.5;
}

/* ===== CARD ===== */
.card {
  background:#fff;
  border-radius:16px;
  padding:24px;
  max-width:480px;
  width:100%;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  text-align:center;
}

/* ===== TYPOGRAPHY ===== */
h1 { font-size:1.75rem; margin-bottom:8px; color:#ff6b35; font-weight:700; }
.subtitle { margin-bottom:16px; color:#555; font-size:0.95rem; }
.instructions { margin:20px 0; font-size:0.9rem; color:#444; }

/* ===== INPUT ===== */
input[type=text] {
  width:100%;
  padding:14px 16px;
  margin:16px 0 24px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background:#ff6b35;
  color:#fff;
  border:none;
  padding:14px 28px;
  border-radius:50px;
  font-weight:600;
  cursor:pointer;
  font-size:1rem;
  transition:background .25s;
  min-width:140px;
}
.btn-primary:hover { background:#e55a2b; }

.btn-secondary {
  background:#f0f0f0;
  color:#555;
  border:none;
  padding:12px 24px;
  border-radius:50px;
  font-weight:600;
  cursor:pointer;
  font-size:0.95rem;
}

/* ===== SCREENS ===== */
.screen { display:none; }
.screen.active { display:block; animation:fadeIn .5s forwards; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ===== PROGRESS ===== */
.progress-bar {
  height:6px;
  background:#eee;
  border-radius:3px;
  margin-bottom:24px;
  overflow:hidden;
}
.progress-bar #progress {
  height:100%;
  width:0;
  background:#ff6b35;
  border-radius:3px;
  transition:width .4s ease;
}

/* ===== QUESTION ===== */
#question-container {
  margin:20px 0;
  font-size:1.1rem;
  line-height:1.6;
}
#question-container strong {
  display:block;
  margin-bottom:8px;
  color:#ff6b35;
  font-size:1rem;
  font-weight:600;
}

/* ===== OPTIONS ===== */
.options {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:24px 0;
}
.options label {
  display:flex;
  align-items:center;
  background:#fafafa;
  border:1px solid #eee;
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  transition:all .2s;
  font-size:0.95rem;
}
.options input { display:none; }
.options input:checked + span {
  color:#ff6b35;
  font-weight:600;
}
.options label:hover {
  background:#f5f5f5;
  border-color:#ff6b35;
}

/* ===== NAV ===== */
.nav {
  display:flex;
  justify-content:space-between;
  margin-top:32px;
  flex-wrap:wrap;
  gap:12px;
}

/* ===== RESULT ===== */
#result img {
  width:160px;
  height:160px;
  object-fit:contain;
  margin:20px auto;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
#result h3 {
  color:#ff6b35;
  margin:12px 0;
  font-size:1.4rem;
  font-weight:700;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  body { padding:12px; }
  .card { padding:20px; }
  h1 { font-size:1.6rem; }
  .instructions { font-size:0.85rem; }
  .options label { padding:12px 14px; font-size:0.9rem; }
  .btn-primary, .btn-secondary { width:100%; }
  .nav { flex-direction:column; }
}