/* Страница участника: вопрос грузится первым, меню сайта — следом (menu.css подключается из JS). */
html { font-size: 16px; }
body { padding-top: 104px; padding-bottom: 32px; }
@media (max-width: 767.98px) { body { padding-top: 84px; } }
.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px; }
.anon { color: var(--white-60); font-size: 14px; letter-spacing: .04em; margin: 8px 0 14px; display: flex; align-items: center; gap: 8px; }
.anon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.title { font-size: 22px; font-weight: 540; color: var(--white); margin: 0 0 16px; }
.q { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px 16px; margin-bottom: 14px; }
.q.done { background: rgba(255, 255, 255, 0.035); }
.q .num { color: var(--white-40); font-size: 13px; letter-spacing: .06em; margin-bottom: 6px; }
.q .text { font-size: 20px; line-height: 1.3; font-weight: 540; margin: 0 0 14px; }
.q .hint { color: var(--white-60); font-size: 14px; margin: -6px 0 12px; }
.q .hint + .hint { margin-top: -8px; }
.q .qnum { color: var(--white-60); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.q .choices { display: flex; flex-direction: column; gap: 8px; }
.q .own { margin-top: 10px; }
.q .own label { display: block; color: var(--white-60); font-size: 14px; margin-bottom: 6px; }
.q .actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.q .counter { color: var(--white-40); font-size: 13px; margin-left: auto; }
.q .done-line-old { display: flex; align-items: center; gap: 10px; color: var(--ok); font-size: 15px; }
.q .done-line-old .change { margin-left: auto; color: var(--white); background: var(--card-2); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: 14px; min-height: 36px; }
.q .summary { color: var(--white-60); font-size: 14px; margin-top: 6px; }
.scale { padding: 4px 0 0; }
.scale .val { font-size: 44px; font-weight: 540; line-height: 1; text-align: center; min-height: 48px; color: var(--accent); }
.scale .val.empty { color: var(--white-40); font-size: 16px; line-height: 48px; }
.scale input[type="range"] { width: 100%; height: 44px; margin: 6px 0 0; background: transparent; -webkit-appearance: none; appearance: none; }
.scale input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 90, 95, 0.55), rgba(255, 255, 255, 0.18) 45%, rgba(110, 231, 183, 0.55)); }
.scale input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); border: 3px solid #0b1220; margin-top: -11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.scale input[type="range"].untouched::-webkit-slider-thumb { opacity: 0; }
.scale input[type="range"]::-moz-range-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); }
.scale input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); border: 3px solid #0b1220; }
.scale input[type="range"].untouched::-moz-range-thumb { opacity: 0; }
.scale .ends { display: flex; justify-content: space-between; color: var(--white-60); font-size: 13px; margin-top: 2px; gap: 12px; }
.scale .ends span:last-child { text-align: right; }
.wait { text-align: center; padding: 48px 16px; color: var(--white-60); font-size: 18px; }
.wait .dots::after { content: "…"; animation: dots 1.6s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "…"; } }
.final { text-align: center; padding: 28px 16px 8px; }
.final h2 { font-size: 24px; margin: 0 0 8px; font-weight: 540; }
.final p { color: var(--white-60); margin: 0; }
.banner { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: #3b1d22; color: #ffd0d3; text-align: center; font-size: 14px; z-index: 20; }
.textarea-wrap { position: relative; }
.textarea-wrap .left { position: absolute; right: 10px; bottom: 8px; color: var(--white-40); font-size: 12px; }
/* меню сайта поверх: на странице опроса — фиксированная шапка, фон — цвет сайта */
.header { background: var(--bg); }
.accepted { display: flex; align-items: center; gap: 10px; color: var(--ok); font-size: 16px; margin: 4px 0 6px; }
.accepted .tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(110, 231, 183, .16); display: inline-flex; align-items: center; justify-content: center; }
.wait .sub { font-size: 14px; color: var(--white-40); margin-top: 8px; }
.note-line { color: var(--white-60); font-size: 14px; margin: 0 0 12px; }
.fb-head { margin: 4px 0 14px; }
.fb-head h2 { font-size: 22px; font-weight: 540; margin: 0 0 4px; }
.fb-head p { color: var(--white-60); font-size: 14px; margin: 0; }

/* «Следующий вопрос» — неброская: без заливки и рамки, приглушённый цвет (решение 11.10) */
.btn-next { display: block; width: 100%; margin: 0; padding: 12px 18px; min-height: 48px; background: none; border: 1px solid rgba(255,255,255,.45); border-radius: 52px; color: #fff; font-size: 16px; letter-spacing: .01em; }
.btn-next:active { background: rgba(255,255,255,.1); }
.btn-next:disabled { opacity: .35; }
.nav-row { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }