:root{
  --bg1:#12051f;
  --bg2:#1a0b2e;
  --card:#23113f;
  --text:#f3eaff;
  --muted:#cbb6ff;
  --accent:#9f7cff;
  --accent-2:#7a5eea;
  --danger:#ff6b6b;
  --ok:#7CF29A;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

/* высота/скролл */
html, body{ height:auto; min-height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg2), var(--bg1));
  color:var(--text);
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start;
  padding:16px;
  overflow-y:auto; -webkit-overflow-scrolling: touch;
  min-height:100svh;
}

/* на широких — центрируем */
@media (min-width: 900px){
  body{ align-items:center; justify-content:center; padding:24px; }
}

.shell{ width:100%; max-width:880px }

/* Опросная карточка */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
  width:100%;
}

/* типографика */
h1{ margin:0 0 10px; font-size:28px; letter-spacing:.3px }
.sub{ color:var(--muted); font-size:14px; margin-bottom:18px }
.q-wrap{ margin-top:8px }
.q-title{ font-weight:600; font-size:24px; margin:0 0 16px }

/* сетка опций */
.options{ display:grid; grid-template-columns: 1fr; gap:12px }
@media (min-width:700px){ .options{ grid-template-columns: 1fr 1fr; } }

.opt{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:14px 14px; background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; cursor:pointer;
  transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease;
}
.opt:hover{ transform: translateY(-1px); border-color: rgba(159,124,255,.7); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.opt input[type="checkbox"], .opt input[type="radio"]{ width:18px; height:18px; accent-color: var(--accent); }
.opt .label{ flex:1; line-height:1.3 }

/* свой вариант */
.other-input{ margin-top:10px; display:none }
.other-input input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#1b1231; color:var(--text);
}
.other-input input::placeholder{ color:#bba9f8 }

/* кнопки */
.controls{ display:flex; justify-content:center; align-items:center; margin-top:24px }
.btn{
  appearance:none; border:none; border-radius:16px;
  padding:18px 36px; font-weight:600; font-size:18px; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:white; box-shadow: var(--shadow);
  transition: transform .06s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.04); box-shadow: 0 14px 34px rgba(122,94,234,.35); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.counter{ color:var(--muted); font-size:13px; margin-left:auto }
.error{ color:var(--danger); font-size:14px; margin-top:8px; display:none }
.progress{ height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin:16px 0 6px }
.progress > i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .3s ease }

/* ===== THANK-YOU / DONE ===== */
#done{
  /* делаем отдельной «карточкой» */
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:34px 28px 28px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
  width:100%;
  max-width:720px;
  margin: 10px auto 0;
  text-align:center;
}
#done h2{ margin:0 0 14px; font-size:32px; letter-spacing:.2px }
#done p{ margin:0 0 8px; color:var(--text) }
#done p + .promo{ margin-top:12px }

/* промокод как split-плашка */
.promo{
  display:flex; align-items:center; justify-content:space-between;
  gap:0;
  background:#2a1a4f; border:1px dashed rgba(255,255,255,.22);
  padding:0; border-radius:16px; margin:16px auto;
  max-width:460px;
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.promo::after{
  /* легкое свечение границы */
  content:""; position:absolute; inset:-1px; border-radius:16px;
  pointer-events:none; box-shadow:0 0 0 1px rgba(159,124,255,.25);
}
.promo code{
  flex:1; padding:16px 18px; text-align:left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.promo .btn{
  border-radius:14px;
  margin:6px; /* чтобы кнопка сидела внутри рамки красиво */
  padding:14px 18px; font-size:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.14));
  color:var(--text);
  box-shadow:none; border:1px solid rgba(255,255,255,.18);
}
.promo .btn:hover{
  filter:none; transform:none;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.20));
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* кнопка «Перейти» — крупнее; на мобиле растягиваем */
.link-btn{ display:inline-block; margin-top:18px }
#done .link-btn.btn{
  padding:16px 40px; font-size:20px; border-radius:18px;
}
@media (max-width: 520px){
  #done .link-btn.btn{ width:100%; }
}

.footer-note{ color:var(--muted); font-size:12px; margin-top:16px }

/* логотип */
.logo-wrap{ display:flex; justify-content:center; margin-bottom:16px }
.logo-img{
  height:102px; padding:10px 18px; border-radius:16px;
  background:#ffffff00; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

/* очень узкие экраны */
@media (max-width: 420px){
  .card{ padding:16px; border-radius:16px; }
  h1{ font-size:22px; }
  .q-title{ font-size:20px; }
  .sub{ font-size:13px; }
  .controls{ margin-top:20px; }
  .btn{ padding:14px 22px; font-size:16px; border-radius:14px; }
  .logo-img{ height:86px; }
  #done{ padding:22px 16px; border-radius:16px }
  #done h2{ font-size:24px }
  .promo{ max-width:100% }
  .promo code{ font-size:18px; padding:14px }
}