/* Вариант 3 — квиз в формате сторис, тёмная «вечерняя» палитра */
body.st { background: #1b1316; color: #fbf3ec; overflow: hidden; height: 100dvh; }
.st .aurora { background: radial-gradient(120% 90% at 50% 0%, #3a2430 0%, #1b1316 70%); }
.st .aurora i { opacity: .28; }
.st .aurora i:nth-child(3) { background: #3d5246; }
.st p { color: rgba(251,243,236,.72); }
.st .grain { opacity: .09; mix-blend-mode: overlay; }

.phone { position: relative; width: 100%; height: 100dvh; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 600px) {
  body.st { display: grid; place-items: center; }
  .phone { width: 420px; height: min(860px, 94dvh); border-radius: 38px; box-shadow: 0 0 0 10px #0e0a0b, 0 0 0 11px rgba(255,255,255,.08), 0 50px 120px -30px rgba(0,0,0,.8); }
}
.story-bg { position: absolute; inset: 0; z-index: 0; transition: background 1.2s var(--ease); }
.story-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 110%, rgba(180,107,85,.35), transparent 70%); }
.blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; transition: all 1.6s var(--ease); }

.st-top { position: relative; z-index: 5; padding: calc(12px + env(safe-area-inset-top)) 14px 0; display: grid; gap: 12px; }
.segs { display: flex; gap: 4px; }
.segs i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; position: relative; }
.segs i b { position: absolute; inset: 0; width: 0; background: #fff; border-radius: 3px; transition: width .5s var(--ease); }
.segs i.done b { width: 100%; }
.segs i.cur b { width: 100%; transition: width var(--dur, 6s) linear; }
.who { display: flex; align-items: center; gap: 10px; }
.who .av { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--peach) 40%, var(--clay)); display: grid; place-items: center; font-family: var(--serif); font-size: 18px; color: #fff; font-weight: 600; box-shadow: 0 0 0 2px #1b1316, 0 0 0 4px var(--clay); position: relative; }
.who .av.talk::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rose); animation: pulse 1.4s ease-out infinite; }
.who b { font-size: 14px; } .who small { font-size: 12px; opacity: .55; margin-left: 6px; }
.who .snd { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; font-size: 15px; }

.story { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-width: none; }
.story::-webkit-scrollbar { display: none; }
.story.enter { animation: stIn .7s var(--ease) both; }
.story.leave { animation: stOut .35s var(--ease) both; }
@keyframes stIn { from { opacity: 0; transform: translateX(40px) scale(.97); filter: blur(8px); } }
@keyframes stOut { to { opacity: 0; transform: translateX(-40px) scale(.97); filter: blur(8px); } }
.story.back-in { animation-name: stInB; } @keyframes stInB { from { opacity: 0; transform: translateX(-40px) scale(.97); filter: blur(8px); } }

.st h2 { font-size: clamp(30px, 8.5vw, 38px); color: #fff; line-height: 1.08; }
.st h1 { font-size: clamp(40px, 11vw, 52px); color: #fff; }
.st .eyebrow { color: var(--rose); }

/* Субтитры голосового */
.voice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); margin-bottom: 18px; animation: noteIn .7s var(--spring) both; }
.voice .wave { flex: none; display: flex; gap: 3px; align-items: center; height: 34px; width: 34px; justify-content: center; border-radius: 50%; background: var(--clay); }
.voice .wave i { width: 3px; border-radius: 3px; background: #fff; height: 6px; }
.voice.playing .wave i { animation: wv .9s ease-in-out infinite; }
.voice .wave i:nth-child(2) { animation-delay: .15s } .voice .wave i:nth-child(3) { animation-delay: .3s } .voice .wave i:nth-child(4) { animation-delay: .45s }
@keyframes wv { 50% { height: 18px; } }
.voice p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.55); }
.voice p span { transition: color .3s; } .voice p span.on { color: #fff; }

.st-opts { display: grid; gap: 9px; margin-top: auto; padding-top: 20px; }
.st-opt { text-align: left; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 15.5px; font-weight: 500; line-height: 1.35; backdrop-filter: blur(10px); transition: transform .35s var(--spring), background .3s, border-color .3s; display: flex; gap: 12px; align-items: center; position: relative; overflow: hidden; opacity: 0; animation: optIn .55s var(--ease) forwards; }
.st-opt:active { transform: scale(.97); }
.st-opt:hover { background: rgba(255,255,255,.14); }
.st-opt .k { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-family: var(--serif); font-size: 16px; }
.st-opt.sel { background: #fff; color: var(--ink); border-color: #fff; transform: scale(1.02); }
.st-opt.sel .k { background: var(--clay); color: #fff; }
.st-opt.dim { opacity: .35 !important; }
.st-grid { grid-template-columns: 1fr 1fr; }
.st-grid .st-opt { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 86px; font-size: 14px; }
.st-grid .st-opt .k { font-family: var(--sans); font-size: 15px; }
.st .btn-primary { background: #fff; color: var(--ink); }
.st .btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }

.tapzone { position: absolute; top: 90px; bottom: 0; width: 30%; z-index: 4; }
.tapzone.l { left: 0; } .tapzone.r { right: 0; }
.tap-hint { font-size: 12px; opacity: .45; text-align: center; margin-top: 14px; }

/* Результат */
.st .ring .bg { stroke: rgba(255,255,255,.1); }
.st .ring .val b { color: #fff; } .st .ring .val small { color: rgba(255,255,255,.5); }
.st .scale-head { color: #fff; } .st .scale-head span:last-child { color: rgba(255,255,255,.6); }
.st .scale-bar { background: rgba(255,255,255,.1); }
.st .lvl.bad { background: rgba(224,122,115,.22); color: #f3a39c; }
.st .lvl.mid { background: rgba(230,182,99,.2); color: #f0cd8c; }
.st .lvl.okk { background: rgba(127,165,123,.22); color: #b4d6b0; }
.glass { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; backdrop-filter: blur(12px); }
.st .err-n { font-family: var(--serif); font-size: 44px; line-height: .8; color: var(--rose); }
.timeline { position: relative; display: grid; gap: 12px; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--rose), var(--clay), transparent); }
.tl { position: relative; padding: 14px 16px; opacity: 0; animation: optIn .6s var(--ease) forwards; }
.tl::before { content: ""; position: absolute; left: -22px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #1b1316; border: 2px solid var(--rose); }
.tl small { color: var(--rose); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tl b { display: block; font-size: 15px; margin: 4px 0 2px; }
.tl p { font-size: 13px; line-height: 1.4; }
.tl .pr { position: absolute; right: 14px; top: 14px; font-weight: 700; font-size: 14px; }
.total { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(232,184,173,.25), rgba(180,107,85,.25)); border: 1px solid rgba(232,184,173,.35); }

.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -20px; padding: 2px 20px; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 62px; padding: 10px 0; border-radius: 16px; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: all .3s var(--spring); }
.day small { display: block; font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.day b { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.1; }
.day.on { background: #fff; color: var(--ink); transform: translateY(-2px); }
.times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.time { padding: 12px 0; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: 14px; transition: all .3s var(--spring); opacity: 0; animation: optIn .4s var(--ease) forwards; }
.time[disabled] { opacity: .25 !important; text-decoration: line-through; cursor: default; }
.time.on { background: var(--clay); border-color: var(--clay); transform: scale(1.05); }
.st .field input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.st .field input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(232,184,173,.15); }
.st .field span { color: rgba(255,255,255,.5); }
.st .field input:focus + span, .st .field input:not(:placeholder-shown) + span { color: var(--rose); }
.st .consent { color: rgba(255,255,255,.4); }
.check-big { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: radial-gradient(circle at 30% 30%, #fff, var(--rose) 45%, var(--clay)); box-shadow: 0 0 80px rgba(232,184,173,.5); animation: noteIn .8s var(--spring) both; }
.check-big svg { width: 44px; stroke: #fff; stroke-width: 3.5; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s var(--ease) .4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }