/* ============================================================
   Quiz-лендинг — современный вид + анимации.
   Акцент: --ql-accent (из конфига). Грузится на опубликованной
   странице и в превью редактора.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.ql {
  --ql-accent: #10b981;
  --ql-accent-2: color-mix(in srgb, var(--ql-accent) 65%, #6366f1);
  --ql-bg: #eef5f2;
  --ql-ink: #0f172a;
  --ql-muted: #64748b;
  --ql-line: #e5e7eb;
  --ql-grad: linear-gradient(135deg, var(--ql-accent), var(--ql-accent-2));
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh; margin: 0; color: var(--ql-ink);
  background: radial-gradient(1100px 480px at 50% -8%, color-mix(in srgb, var(--ql-accent) 14%, #fff), transparent 60%), var(--ql-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px 60px; box-sizing: border-box;
}
.ql * { box-sizing: border-box; }

.ql-topbar { width: 100%; max-width: 680px; display: flex; align-items: center; gap: 12px; min-height: 34px; margin-bottom: 26px; }
.ql-logo-text { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ql-ink); }
.ql-logo-img { max-width: 240px; object-fit: contain; display: block; }

.ql-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 0 0 28px; }
.ql-chip { font-size: 13px; font-weight: 650; color: var(--ql-accent); background: color-mix(in srgb, var(--ql-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--ql-accent) 24%, transparent); padding: 7px 15px; border-radius: 999px; }

.ql-card {
  width: 100%; max-width: 680px; background: #fff; border-radius: 24px;
  box-shadow: 0 40px 80px -28px rgba(16, 24, 40, .28), 0 2px 8px rgba(16, 24, 40, .05);
  padding: 40px 42px 42px; position: relative; overflow: hidden;
}
.ql-stage { position: relative; }

@keyframes ql-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ql-in { animation: ql-in .4s cubic-bezier(.2, .7, .2, 1); }

/* прогресс */
.ql-bar-wrap { height: 8px; background: #eef1f6; border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.ql-bar { height: 100%; background: var(--ql-grad); border-radius: 999px; transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.ql-count { font-size: 13px; font-weight: 700; color: var(--ql-accent); margin-bottom: 20px; }

/* вопрос */
.ql-q { font-size: 27px; line-height: 1.22; font-weight: 800; letter-spacing: -.025em; margin: 0 0 24px; }
.ql-opts { display: flex; flex-direction: column; gap: 12px; }
.ql-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 19px; border: 1.5px solid var(--ql-line); border-radius: 15px; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--ql-ink); background: #fff; font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .08s;
}
.ql-opt:hover { border-color: color-mix(in srgb, var(--ql-accent) 55%, var(--ql-line)); background: color-mix(in srgb, var(--ql-accent) 4%, #fff); }
.ql-opt:active { transform: scale(.99); }
.ql-opt.on { border-color: var(--ql-accent); background: color-mix(in srgb, var(--ql-accent) 9%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ql-accent) 16%, transparent); }
.ql-radio, .ql-check { width: 22px; height: 22px; border: 2px solid #cbd3e1; flex: none; position: relative; transition: border-color .15s, background .15s; }
.ql-radio { border-radius: 50%; }
.ql-check { border-radius: 7px; }
.ql-opt.on .ql-radio, .ql-opt.on .ql-check { border-color: var(--ql-accent); background: var(--ql-accent); }
.ql-opt.on .ql-radio::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ql-opt.on .ql-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* поля ввода */
.ql-form { display: flex; flex-direction: column; gap: 13px; }
.ql-input { font: inherit; font-size: 16px; padding: 15px 17px; border: 1.5px solid var(--ql-line); border-radius: 13px; color: var(--ql-ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
.ql-input:focus { border-color: var(--ql-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ql-accent) 16%, transparent); }
.ql-textarea { resize: vertical; min-height: 84px; }

/* кнопки */
.ql-cta { font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: var(--ql-grad); border: 0; padding: 17px 30px; border-radius: 14px; cursor: pointer; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ql-accent) 70%, transparent); transition: filter .15s, transform .08s; }
.ql-cta:hover { filter: brightness(1.07); }
.ql-cta:active { transform: translateY(1px); }
.ql-cta[disabled] { opacity: .7; cursor: default; }
.ql-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 12px; }
.ql-back { background: none; border: 0; color: var(--ql-muted); font: inherit; font-weight: 600; cursor: pointer; padding: 8px 4px; }
.ql-back:hover { color: var(--ql-ink); }
.ql-next { font: inherit; font-weight: 700; color: #fff; background: var(--ql-grad); border: 0; padding: 12px 24px; border-radius: 11px; cursor: pointer; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--ql-accent) 65%, transparent); }
.ql-privacy { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 2px; }

/* герой */
.ql-hero { text-align: center; padding: 8px 0 4px; }
.ql-hero-img { max-width: 100%; max-height: 220px; border-radius: 18px; margin: 0 auto 26px; display: block; }
.ql-hero-h { font-size: 33px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; }
.ql-hero-sub { font-size: 17px; line-height: 1.6; color: var(--ql-muted); margin: 0 auto 30px; max-width: 480px; }

/* экран ожидания */
.ql-pending { text-align: center; padding: 20px 0 10px; }
.ql-pending-h { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.ql-pending-t { font-size: 16px; line-height: 1.65; color: var(--ql-muted); margin: 0 auto; max-width: 440px; }
.ql-check-big { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: var(--ql-grad); position: relative; box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--ql-accent) 70%, transparent); animation: ql-pop .5s cubic-bezier(.2, .8, .2, 1.2); }
.ql-check-big::after { content: ''; position: absolute; left: 27px; top: 20px; width: 16px; height: 30px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(45deg); }
@keyframes ql-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .ql-card { padding: 28px 22px 30px; border-radius: 20px; }
  .ql-q { font-size: 22px; } .ql-hero-h { font-size: 26px; }
}