* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 0;
  background: #f7f7fa;
  color: #1a1a1a;
}
h1 { font-size: 22px; margin-bottom: 4px; }
.sub { color: #666; font-size: 14px; margin-bottom: 20px; }
.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
input[type=text], input[type=number], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
}
textarea { resize: vertical; }
.option-row { display: flex; gap: 8px; margin-bottom: 8px; }
.option-row input { flex: 1; }
.option-row button { flex: none; }
.toggle-row { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.toggle-row label { margin: 0; }
button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
}
.btn-primary { background: #4361ee; color: #fff; width: 100%; margin-top: 18px; }
.btn-primary:disabled { background: #b7c0ea; cursor: not-allowed; }
.btn-secondary { background: #eee; color: #333; }
.btn-danger { background: #e5484d; color: #fff; width: 100%; margin-top: 10px; }
.btn-danger.ready { background: #2e7d32; }
.btn-small { padding: 6px 10px; font-size: 13px; }
.qr-wrap { text-align: center; }
.qr-wrap img { width: 220px; height: 220px; }
.progress { text-align: center; font-size: 16px; font-weight: 600; margin: 10px 0; }
.progress .done { color: #2e7d32; }
.candidate-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px;
  background: #fafafa;
}
.candidate-item .order { font-weight: 700; color: #4361ee; width: 24px; }
.candidate-item .arrows button { padding: 4px 8px; margin-left: 4px; }
.choice-option {
  display: block; padding: 12px; border: 2px solid #ddd; border-radius: 8px;
  margin-bottom: 8px; cursor: pointer; font-size: 15px;
}
.choice-option.selected { border-color: #4361ee; background: #eef0ff; }
.result-bar-wrap { margin-bottom: 14px; }
.result-bar-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.result-bar-bg { background: #eee; border-radius: 6px; overflow: hidden; height: 18px; }
.result-bar-fill { background: #4361ee; height: 100%; }
.answer-item { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.answer-item .name { font-weight: 600; color: #4361ee; margin-right: 6px; }
.center { text-align: center; }
.error { color: #e5484d; font-size: 13px; margin-top: 6px; }
.ad-slot {
  margin: 28px 0 16px;
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: #999;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
}
.footer-links {
  margin: 28px 0 24px;
  text-align: center;
  font-size: 12px;
  color: #999;
}
.footer-links a { color: #666; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links span { margin: 0 6px; }