:root{
  --bg:#f5f6fa;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#e33b44;
  --primary-2:#ff5b62;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}
.app{
  max-width:420px;
  margin:0 auto;
  padding:18px;
}
.top{
  display:flex;
  gap:14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius:18px;
  padding:16px;
  color:#fff;
  align-items:center;
}
.top-left{flex:1}
.badge{
  font-weight:700;
  font-size:18px;
  margin-bottom:6px;
}
.sub{
  font-size:13px;
  opacity:.9;
  margin-bottom:10px;
}
.bar{
  height:8px;
  background:rgba(255,255,255,.35);
  border-radius:999px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  background:#fff;
  border-radius:999px;
  width:0%;
  transition: width .25s ease;
}
.top-right{
  width:84px;
  display:flex;
  justify-content:center;
}
.ring{
  width:72px;height:72px;
  border-radius:50%;
  border:8px solid rgba(255,255,255,.35);
  position:relative;
}
.ring::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:50%;
  border:8px solid #fff;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  opacity:.18;
}
.ring-text{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
}

.card{
  margin-top:14px;
  background:var(--card);
  border-radius:18px;
  padding:18px;
  border:1px solid var(--border);
}
.q-title{
  font-size:22px;
  line-height:1.25;
  margin:0 0 10px 0;
}
.q-help{
  margin:0 0 14px 0;
  color:var(--muted);
  font-size:14px;
}
.options{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.opt{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
  background:#fff;
}
.opt:hover{border-color:#d1d5db}
.dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #cbd5e1;
}
.opt[data-level="0"] .dot{border-color:#f4c84a}
.opt[data-level="1"] .dot{border-color:#f4c84a}
.opt[data-level="2"] .dot{border-color:#ef4444}

.opt.selected{
  border-color:#9ca3af;
  box-shadow:0 0 0 2px rgba(227,59,68,.15);
}
.opt.selected .dot{
  background:#22c55e;
  border-color:#22c55e;
  position:relative;
}
.opt.selected .dot::after{
  content:"✓";
  position:absolute;
  inset:0;
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.opt-text{
  font-weight:700;
  font-size:16px;
}

.footer{
  display:flex;
  gap:12px;
  margin-top:16px;
}
.btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  flex:1;
}
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn.ghost{
  background:#fff;
}

.submit-row{
  margin-top:12px;
}
.btn.wide{width:100%}
.debug{
  margin-top:14px;
  font-size:12px;
  background:#0b1020;
  color:#d1d5db;
  padding:12px;
  border-radius:12px;
  overflow:auto;
}