.qsq-root { --qsq-accent: #6b7280; }
.qsq-root * { box-sizing: border-box; }

.qsq-root .qsq-card{
  width:100%;
  max-width: 720px;
  margin: 14px auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  position:relative;
}

.qsq-root .qsq-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0);
  transition: box-shadow .2s ease;
}
.qsq-root .qsq-card:hover::before{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qsq-accent) 22%, transparent);
}

.qsq-root .qsq-top{ text-align:center; padding: 2px 6px 8px; }
.qsq-root .qsq-top__title{ font-size:20px; font-weight:800; color:#111827; }
.qsq-root .qsq-top__desc{ margin-top:6px; color:#6b7280; font-size:14px; }

.qsq-root .qsq-progress{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin: 10px 0 12px;
}
.qsq-root .qsq-progress__bar{
  height:10px; background:#f3f4f6; border-radius:999px; overflow:hidden; flex:1;
  border:1px solid #eef2f7;
}
.qsq-root .qsq-progress__bar span{
  display:block; height:100%; width:0%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--qsq-accent) 90%, #fff), var(--qsq-accent));
  border-radius:999px;
  transition: width .25s ease;
}
.qsq-root .qsq-progress__text{ color:#6b7280; font-size:12px; min-width:54px; text-align:right; }

.qsq-root .qsq-stage{ display:flex; flex-direction:column; gap:10px; }
.qsq-root .qsq-question{ font-weight:700; color:#111827; margin: 4px 0 2px; text-align:center; }

.qsq-root .qsq-btn{
  width:100%;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  cursor:pointer;
  transition: transform .05s ease, border-color .15s ease, box-shadow .15s ease;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.qsq-root .qsq-btn:hover{
  border-color: color-mix(in srgb, var(--qsq-accent) 40%, #e5e7eb);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.qsq-root .qsq-btn:active{ transform: scale(.995); }

.qsq-root .qsq-nav{
  margin-top: 12px;
  display:flex; justify-content:space-between; gap:10px;
}
.qsq-root .qsq-back, .qsq-root .qsq-restart{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  color:#111827;
  min-width:110px;
}
.qsq-root .qsq-back:disabled{ opacity:.45; cursor:not-allowed; }
.qsq-root .qsq-restart{
  border-color: color-mix(in srgb, var(--qsq-accent) 40%, #e5e7eb);
}

.qsq-root .qsq-result{
  text-align:center;
  padding: 6px 2px 2px;
}
.qsq-root .qsq-result__title{ font-size:20px; font-weight:900; color:#111827; }
.qsq-root .qsq-result__text{ margin-top:8px; color:#374151; line-height:1.55; }
.qsq-root .qsq-result__cta{
  margin-top:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--qsq-accent) 90%, #fff), var(--qsq-accent));
  color:#fff;
  text-decoration:none;
  border-radius:14px;
  padding:12px 16px;
  font-weight:900;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.qsq-root .qsq-result__cta:hover{ filter: brightness(1.02); }
.qsq-root .qsq-result__legend{ margin-top:10px; color:#6b7280; font-size:12px; }