:root{
  --rql-primary:#5a4a6b;
  --rql-accent:#806e8f;
  --rql-bg:#fff;
  --rql-border:#c3c4a4;
  --rql-button:#5a4a6b;
  --rql-font:Arial, Helvetica, sans-serif;
  --rql-size:16px;
}
.rql-wrap{max-width:720px;margin:0 auto;padding:1rem;border:1px solid var(--rql-border);border-radius:12px;background:var(--rql-bg);font-size:var(--rql-size);font-family:var(--rql-font)}
.rql-header h2{margin:0 0 .25rem 0;color:var(--rql-primary)}
.rql-header p{margin:0 0 .75rem 0;}
.rql-q{margin:1rem 0}
.rql-opt{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;padding:.5rem .6rem;border:1px solid var(--rql-border);border-radius:10px;cursor:pointer;background:#fff;transition:box-shadow .15s ease}
.rql-opt:hover{box-shadow:0 2px 10px rgba(0,0,0,.05)}
.rql-opt input{margin-right:.25rem;accent-color:var(--rql-primary)}
.rql-opt-img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--rql-border)}
.rql-btn{display:inline-block;margin-top:.75rem;padding:.6rem 1rem;border:0;border-radius:999px;background:var(--rql-button);color:#fff;font-weight:600;cursor:pointer}
.rql-btn-secondary{background:transparent;color:var(--rql-primary);border:2px solid var(--rql-primary)}
.rql-result{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--rql-border)}
.rql-optin input{display:block;width:100%;max-width:360px;margin:.35rem 0;padding:.5rem;border:1px solid var(--rql-border);border-radius:8px}
.rql-msg{margin-top:.5rem;font-size:.95rem}
.rql-error{padding:1rem;background:#fff3f3;border:1px solid #ffd3d3;border-radius:8px}
.rql-progress{height:8px;background:#f3f3f3;border-radius:999px;overflow:hidden;margin:.5rem 0 1rem 0}
.rql-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--rql-primary),var(--rql-accent));transition:width .25s ease}
.rql-step legend{font-weight:700;margin-bottom:.5rem}
.rql-nav{display:flex;justify-content:space-between;gap:.5rem;margin-top:.75rem}
.rql-shake{animation:rqlshake .2s linear 1}
@keyframes rqlshake{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}
}
.rql-hp-wrap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.rql-hp-label{
  font-size:0;
}