/* ---------- Minimal, Apple-inspired look ---------- */
:root{
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: #e5e5ea;
  --ring: #007aff;
  --chip: #efeff4;
  --chip-text: #1d1d1f;
}

[data-theme="dark"]{
  --bg:#0b0b0c; --bg-soft:#17171a;
  --text:#f5f5f7; --muted:#a1a1a6;
  --border:#2a2a2e; --ring:#0a84ff;
  --chip:#1c1c1e; --chip-text:#f5f5f7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-soft); color:var(--text);
  font: 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:0.2px;
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ max-width: 1100px; margin: 32px auto; padding: 0 16px; }
header{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
h1{font-size:28px; margin:0}
.sub{color:var(--muted); font-size:14px}
.toolbar{
  background:var(--bg); border:1px solid var(--border);
  border-radius:14px; padding:12px; display:flex; flex-wrap:wrap;
  gap:8px; align-items:center; position:sticky; top:12px; z-index:5;
  backdrop-filter:saturate(180%) blur(10px);
}
.field{
  display:flex; align-items:center; gap:8px; background:var(--bg-soft);
  border:1px solid var(--border); padding:8px 10px; border-radius:10px;
}
.field input, .field select{
  border:none; outline:none; background:transparent; color:var(--text);
  min-width: 200px;
}
.spacer{flex:1}
.btn, button{
  border:1px solid var(--border); background:var(--bg);
  color:var(--text); padding:8px 12px; border-radius:10px;
  cursor:pointer;
}
.toc{ margin:16px 0 8px; padding:12px; background:var(--bg);
  border:1px solid var(--border); border-radius:14px; }
.toc strong{display:block; margin-bottom:6px}
.toc-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:6px; }
.toc a{
  text-decoration:none; color:var(--text); background:var(--chip); padding:8px 10px;
  border:1px solid var(--border); border-radius:999px; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px;
}
.count{ font-size:13px; color:var(--muted); margin:12px 2px; }

/* Cards */
.card{
  background:var(--bg); border:1px solid var(--border);
  border-radius:16px; margin:12px 0; overflow:hidden;
}
.card header{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; gap:10px; align-items:center; margin:0;
}
.idx{
  font-weight:600; font-variant-numeric: tabular-nums;
  background:var(--chip); color:var(--chip-text);
  border:1px solid var(--border); padding:2px 8px; border-radius:999px; font-size:12px;
}
.card h2{font-size:18px; margin:0}
.prompt{ padding:14px 16px; color:var(--text); background:var(--bg); }
.qr-label{ padding:0 16px 8px; font-weight:600; }
.responses{ border-top:1px solid var(--border); padding:4px 0; }
.row{ display:grid; grid-template-columns: 1fr 180px; gap:12px;
  align-items:center; padding:10px 16px; border-top:1px solid var(--border); }
.row:first-child{border-top:none}
.resp-text{font-size:15px}
.badge{
  justify-self:end; font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--chip); color:var(--chip-text);
  text-align:center; min-width:140px;
}
.he{outline:2px solid rgba(48,209,88,.35)}
.me{outline:2px solid rgba(255,149,0,.35)}
.se{outline:2px solid rgba(10,132,255,.35)}
.mi{outline:2px solid rgba(255,149,0,.25)}
.hi{outline:2px solid rgba(255,59,48,.35)}
.ur{outline:2px dashed rgba(142,142,147,.45)}
.footer{
  color:var(--muted); font-size:12px; margin:24px 4px 40px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.switch{ display:inline-flex; align-items:center; gap:8px; }
.switch input{appearance:none; width:44px; height:26px; border-radius:999px;
  border:1px solid var(--border); position:relative; background:var(--bg);
  outline:none; cursor:pointer;
}
.switch input::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:var(--text);
  transition: transform .2s ease;
}
.switch input:checked::after{ transform: translateX(18px); }
.hidden{display:none !important}

@media (max-width:700px){
  .row{grid-template-columns: 1fr;}
  .badge{justify-self:start; margin-top:4px}
}