body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f8fafc;
  color: #111827;
  margin: 0;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  margin-bottom: 8px;
}

.subtitle {
  color: #4b5563;
  margin-bottom: 32px;
}

h2 {
  margin-top: 32px;
}

.section-note {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.question {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.options input {
  margin-right: 6px;
  margin-left: 10px;
}

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 24px;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.result {
  margin-top: 40px;
  padding: 24px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.hidden {
  display: none;
}

footer {
  margin-top: 48px;
  font-size: 13px;
  color: #6b7280;
}
.helper-text {
  font-size: 14px;
  color: #374151;
  background: #eef2ff;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 24px;
}
.result-title {
  margin-bottom: 12px;
}

.result.high-risk {
  border-left: 6px solid #dc2626;
  background: #fef2f2;
}

.result.medium-risk {
  border-left: 6px solid #f59e0b;
  background: #fffbeb;
}

.result.low-risk {
  border-left: 6px solid #16a34a;
  background: #f0fdf4;
}
.privacy-note {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}
/* Mobile readability */
@media (max-width: 640px) {
  .question {
    padding: 14px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .options input {
    margin: 0;
  }

  .btn-primary {
    width: 100%;
    font-size: 17px;
  }
}