:root{
  --max-w:720px;
  --gap:1rem;
  --radius:8px;
  --accent:#007BFF;
}
html,body{height:100%;}
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; padding:2rem; background:#fafafa; color:#111 }
.container { max-width: var(--max-w); margin: 0 auto; background: #fff; padding: clamp(1rem, 3vw, 2rem); border-radius: 10px; box-shadow: 0 6px 20px rgba(16,24,40,0.06); }
.hidden { display: none; }
.error { color: #b00020; margin-bottom: 0.75rem; white-space: pre-line; }
.success { color: #28a745; }
label { display:block; margin-bottom: .5rem; font-weight:600 }
input[type="text"] { width:100%; padding: .75rem; font-size: 1rem; box-sizing:border-box; border:1px solid #d0d7de; border-radius: var(--radius); }
button { margin-top:.75rem; padding:.75rem 1rem; border-radius: var(--radius); border:none; background:var(--accent); color:#fff; font-weight:600; cursor:pointer }
.spacer { min-height:1.2em; margin-top:.5rem; }
.repeat-btn { background:#fff; color:#333; border:1px solid #d0d7de; }

@media (max-width: 480px) {
  body{padding:1rem}
  .container{border-radius:8px;padding:1rem}
  h1{font-size:1.1rem;margin:0 0 .5rem}
  input[type="text"]{font-size:1rem;padding:.75rem}
  button{width:100%; font-size:1rem}
}

@media (min-width: 481px) and (max-width: 1024px) {
  .container{padding:1.25rem}
  h1{font-size:1.25rem}
  input[type="text"]{font-size:1rem}
}

@media (min-width: 1025px) {
  .container{padding:2rem}
  h1{font-size:1.5rem}
  input[type="text"]{font-size:1.05rem}
  button{width:auto}
}

/* accordion - simplified, lighter design */
.accordion{margin-top:1rem}
.accordion input[type="radio"]{position:absolute;opacity:0;height:0;width:0}
.accordion .acc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  background:transparent;
  border:1px solid #eef3f6;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  color:#111;
  transition:background .12s ease, border-color .12s ease;
  margin-bottom:.75rem;
  position:relative;
}
.accordion .acc-header:hover{background:#fbfdff;border-color:#e6f0f5}
.accordion .acc-header::after{
  content: "";
  width:10px;height:10px;
  border-right:2px solid #666;border-bottom:2px solid #666;
  position:absolute;right:1rem;top:50%;
  transform:translateY(-50%) rotate(-45deg);
  transition:transform .18s ease;
  display:inline-block;
}
.accordion input[type="radio"]:checked + .acc-header{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.accordion input[type="radio"]:checked + .acc-header::after{transform:translateY(-50%) rotate(45deg)}
.acc-panel{border:none;border-top:0;border-radius:0 0 8px 8px;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .18s ease;padding:0 1rem}
.accordion input[type="radio"]:checked + .acc-header + .acc-panel{max-height:1000px;padding:.25rem 1rem .75rem;margin-top:-1px;margin-bottom:.75rem;border:1px solid #eef3f6;border-top:0}
.accordion input[type="radio"]:checked + .acc-header + .acc-panel{max-height:1000px;padding:18px 1rem 9px;margin-top:-1px;margin-bottom:.75rem;border:1px solid #eef3f6;border-top:0}
.acc-panel p{margin:0 0 .5rem;color:#333;line-height:1.5}
.acc-panel ul{margin:0 0 .5rem 0.75rem; padding-left:0.75rem}
.acc-panel li{margin-left:0}

/* Heading spacing inside panels: add top margin so title sits off the panel border */
.acc-panel h1,
.acc-panel h2,
.acc-panel h3,
.acc-panel h4,
.acc-panel h5,
.acc-panel h6{
  margin:8px 0 .5rem;
  font-weight:700;
}

.acc-panel :first-child{
  margin-top:0;
}

/* chevron is absolutely positioned and vertically centered */