@import url("/styles.css");
.app{display:grid;place-items:center;padding:12px}
.card{width:100%;max-width:920px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--shadow);padding:clamp(16px,2.5vw,28px)}
.progress{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-bottom:18px}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s ease}
.slides{min-height:360px;display:flex;align-items:center;position:relative}
.slide{width:100%;animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.q{font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600;margin:0 0 16px}
.options{display:grid;gap:10px;margin:4px 0 8px}
.option{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;cursor:pointer}
.option input{accent-color:var(--accent)}.option:hover{border-color:rgba(255,255,255,.15)}
.scale{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.helper{color:var(--muted);font-size:.9rem;margin-top:4px}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.btn[disabled]{opacity:.6;cursor:not-allowed}
.error{color:#ff7a7a;font-size:.95rem;margin-top:6px}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6)}.modal[hidden]{display:none}
.modal-content{width:min(920px,94vw);background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:clamp(16px,2.5vw,28px);box-shadow:var(--shadow)}
.modal-close{float:right;font-size:1.4rem;line-height:1;padding:6px 10px;background:transparent;border:0;color:var(--ink);cursor:pointer}
.modal-actions{display:flex;gap:10px;margin-top:14px}