/* Minimal, Reddit-safe, trust-forward UI */
:root{
  --bg:#0b0d10;
  --card:#11151b;
  --card2:#0f1318;
  --text:#e9eef7;
  --muted:#a9b4c5;
  --line:#202a36;
  --accent:#7aa6ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 10% 0%, #132036 0%, var(--bg) 60%);
  color:var(--text);
}
.wrap{max-width:980px;margin:0 auto;padding:18px}
h1{margin:12px 0 8px}
.sub{color:var(--muted);margin:0 0 10px}
.note{
  border:1px solid var(--line);
  background: rgba(122,166,255,0.08);
  padding:10px 12px;
  border-radius:10px;
  color:var(--text);
}
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:16px;
  margin:14px 0;
}
.card2{
  border:1px solid var(--line);
  background: var(--card2);
  border-radius:12px;
  padding:12px;
  margin:12px 0;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.sectionTitle{
  font-size:1.15rem;
  margin:8px 0 12px;
  padding:10px 12px;
  background: var(--card2);
  border:1px solid var(--line);
  border-radius:12px;
}
.topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.progress{height:10px;background:var(--card2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress > div{height:100%;width:0%;background:var(--accent)}
.q{
  border:1px solid var(--line);
  background: var(--card);
  border-radius:12px;
  padding:12px;
  margin:10px 0;
}
.q .qtitle{font-weight:600;margin-bottom:8px}
.opts{display:grid;gap:8px}
.opt{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  border-radius:10px;
}
.opt input{margin-top:3px}
.scale{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  border-radius:999px;
  padding:8px 10px;
}
textarea, input[type="text"]{
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  border-radius:10px;
}
.actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.btn{
  border:1px solid var(--line);
  background: var(--accent);
  color:#07101f;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}
.btn.ghost{background:transparent;color:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:860px){.grid2{grid-template-columns:1fr 1fr}}
.resultSummary{
  border:1px solid var(--line);
  background: rgba(122,166,255,0.08);
  border-radius:12px;
  padding:12px;
}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.modal{
  position:fixed; inset:0; background: rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modalBox{
  width:min(760px, 96vw);
  background: var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.jumpList{display:grid;gap:8px}
.jumpItem{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
}