/* Read-A-Thon Survey — styles.css */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --accent:#3b82f6;
  --border:#e5e7eb;
  --ok:#16a34a;
  --bad:#dc2626;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #eef2ff, #f8fafc);
  color: var(--ink);
  padding: 20px;
  display:flex;
  justify-content:center;
}
.wrap{ width:min(900px, 100%); }
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
h1{ margin:0 0 6px; font-size: clamp(1.4rem, 3vw, 2rem); }
.sub{ margin:0 0 12px; color:var(--muted); line-height:1.5; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
  padding:12px; border:1px solid var(--border);
  border-radius:14px; background:#f8fafc;
}
.progressText{ font-weight:900; }
.progressTrack{
  flex:1; min-width:220px; height:10px; background:#e9eef8;
  border-radius:999px; overflow:hidden; border:1px solid var(--border);
}
.progressBar{
  height:100%; width:0%; background: var(--accent);
  border-radius:999px; transition: width .25s ease;
}
.hint{
  margin: 0 0 12px; padding: 10px 12px;
  border:1px dashed var(--border); border-radius: 12px;
  background:#fff; color: var(--muted);
}
label{ display:block; font-weight:900; margin:14px 0 6px; }
.help{ margin-top:6px; color: var(--muted); font-size:.95rem; }
.smallHelp{ font-size:.92rem; color:var(--muted); margin-top:6px; }
input[type="text"], textarea{
  width:100%; box-sizing:border-box; padding:12px 14px;
  border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--ink); font-size:1rem;
}
textarea{ min-height:90px; resize:vertical; }
.choices{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.choice{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid var(--border);
  border-radius:999px; background:#f1f5f9; cursor:pointer;
  font-weight:900; user-select:none;
}
.choice input{ width:18px; height:18px; accent-color: var(--accent); }
.checks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.checks label{
  font-weight:800; background:#f1f5f9; border:1px solid var(--border);
  padding:8px 12px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:6px; margin:0;
}
.checks input{ accent-color: var(--accent); }
.hr{ height:1px; background:var(--border); margin:18px 0; }
.step{ display:none; }
.step.active{ display:block; }
.btnRow{
  display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
}
.btnGroup{ display:flex; gap:12px; flex-wrap:wrap; }
button{
  border:1px solid var(--border); background:#f8fafc; color:var(--ink);
  padding:12px 18px; border-radius:14px; font-weight:1000;
  cursor:pointer; font-size:1rem;
}
button.primary{ background: var(--accent); color:#fff; border-color: var(--accent); }
button:disabled{ opacity:.55; cursor:not-allowed; }
.msg{ margin-top:12px; font-weight:800; }
.ok{ color: var(--ok); }
.bad{ color: var(--bad); }
.prizeCard{
  border:1px solid var(--border); background:#fff; border-radius:16px;
  padding:14px; margin-top:12px;
}
.prizeTitle{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.prizeGrid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:10px; margin-top:10px;
}
@media (max-width: 760px){ .prizeGrid{ grid-template-columns: repeat(2, 1fr); } }
.prizeGrid img{
  width:100%; height:110px; object-fit:cover;
  border-radius:12px; border:1px solid var(--border);
  background:#f8fafc;
}
/* Range UI used in Step 9 */
.rangeRow{
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; margin-top:8px;
}
.rangeNums{ display:flex; gap:10px; font-weight:900; align-items:center; }
input[type="range"]{ width: min(420px, 100%); accent-color: var(--accent); }
.rangePill{
  display:inline-block; background: #ecfeff; border:1px solid #a5f3fc;
  padding: 8px 12px; border-radius: 999px; font-weight: 900;
}