.jbody{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
 background:radial-gradient(900px 500px at 50% 0%,#dff3e8 0,transparent 70%),radial-gradient(700px 500px at 100% 100%,#fff3d6 0,transparent 65%),var(--bg)}
.jwrap{position:relative;z-index:1;width:100%;max-width:420px;padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.jowl{width:116px;height:116px;animation:jfloat 3.2s ease-in-out infinite}
.jowl svg{display:block;width:100%;height:100%;overflow:visible}
.jowl .pp{transition:transform .12s ease-out}
.jowl .wl,.jowl .wr{transition:transform .3s cubic-bezier(.3,1.35,.5,1)}
.jowl .wl{transform-origin:12px 64px}.jowl .wr{transform-origin:84px 64px}
.jowl.hop{animation:jhop .6s cubic-bezier(.3,1.5,.5,1)}
.jowl.hop .wl{transform:rotate(28deg)}.jowl.hop .wr{transform:rotate(-28deg)}
.jowl.no{animation:jshake .45s}
@keyframes jfloat{50%{transform:translateY(-8px)}}
@keyframes jhop{40%{transform:translateY(-34px) scale(1.06)}}
@keyframes jshake{20%{transform:translateX(-10px) rotate(-5deg)}40%{transform:translateX(10px) rotate(5deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.jbrand{margin:6px 0 14px;font-size:22px}
#jf{width:100%;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 18px 20px;box-shadow:0 10px 30px rgba(13,122,84,.12);animation:jin .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes jin{from{opacity:0;transform:translateY(18px) scale(.97)}}
#jf h1{font-size:26px;margin:0 0 16px}
.jslots{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 6px}
.jslots input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;z-index:2;cursor:text}
.js{width:44px;height:58px;border-radius:12px;border:2px solid #bfd2c6;background:#fff;display:flex;align-items:center;justify-content:center;font:700 28px var(--fd);color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.js.cur{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent);animation:jblink 1s steps(2) infinite}
.js.on{background:var(--soft);border-color:var(--acc);animation:jpop .25s cubic-bezier(.3,1.6,.5,1)}
.jdash{width:10px;height:3px;border-radius:2px;background:#bfd2c6}
.jslots.bad .js{border-color:var(--bad);background:var(--bad-soft)}
.jslots.bad{animation:jshake .45s}
@keyframes jpop{from{transform:scale(.6)}}
@keyframes jblink{50%{box-shadow:0 0 0 4px transparent}}
#jf .qerr{min-height:1.4em;margin:8px 0 0;font-weight:600}
#jg{width:100%;margin-top:10px;min-height:54px;font-size:18px;border-radius:14px;box-shadow:0 4px 0 var(--acc-h);transition:transform .1s,box-shadow .1s}
#jg:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--acc-h)}
.jb{position:absolute;border-radius:50%;opacity:.5;animation:jdrift 9s ease-in-out infinite;pointer-events:none}
.jb1{width:90px;height:90px;background:#bfe6d3;left:6%;top:12%}
.jb2{width:46px;height:46px;background:#f2b134;right:10%;top:18%;animation-delay:-3s}
.jb3{width:64px;height:64px;background:#9fd6bd;left:12%;bottom:12%;animation-delay:-5s}
.jb4{width:34px;height:34px;background:#f7c968;right:16%;bottom:20%;animation-delay:-1s}
.jb5{width:24px;height:24px;background:#0d7a54;left:46%;top:6%;opacity:.25;animation-delay:-6s}
@keyframes jdrift{50%{transform:translate(14px,-22px)}}
.jc{position:fixed;top:-12px;width:9px;height:14px;border-radius:2px;z-index:5;pointer-events:none;animation:jfall 1.1s ease-in forwards}
@keyframes jfall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
@media(max-width:380px){.js{width:38px;height:52px}}
@media(prefers-reduced-motion:reduce){.jowl,.jb,#jf,.js.cur,.js.on,.jslots.bad{animation:none}.jowl.hop,.jowl.no{animation:none}}

/* екран с името (/q/<код>) — същият стил като входа с код */
body.jintro{position:relative;overflow-x:hidden;background:radial-gradient(900px 500px at 50% 0%,#dff3e8 0,transparent 70%),radial-gradient(700px 500px at 100% 100%,#fff3d6 0,transparent 65%),var(--bg)}
body.jintro .qwrap{position:relative;z-index:1}
body.jintro.jfirst .qwrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:460px}
body.jintro .jowl{margin:0 auto}
body.jintro .qtop{padding:6px 0 14px;text-align:center}
body.jintro #qintro{width:100%;box-shadow:0 10px 30px rgba(13,122,84,.12);border-radius:22px;animation:jin .5s cubic-bezier(.2,1.2,.4,1) both}
body.jintro #qintro h1{font-size:26px}
body.jintro #qintro .qchips{justify-content:center}
body.jintro #qname{font-size:24px;font-weight:700;text-align:center;border:2px solid #bfd2c6;border-radius:14px;min-height:60px;transition:border-color .15s,box-shadow .15s}
body.jintro #qname:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
body.jintro #qgo{min-height:54px;font-size:18px;border-radius:14px;box-shadow:0 4px 0 var(--acc-h);transition:transform .1s,box-shadow .1s}
body.jintro #qgo:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--acc-h)}
body.jintro #qintro .qerr{font-weight:600}
body.jintro #qname.bad{border-color:var(--bad);background:var(--bad-soft);animation:jshake .45s}
body.jintro:not(.jfirst) .jowl{display:none}
body.jintro{min-height:100vh;min-height:100dvh;background-attachment:fixed}
body.jintro .jb{position:fixed}
body.jintro .qcard{box-shadow:0 8px 24px rgba(13,122,84,.10);border-radius:20px}
body.jintro .qq{border-radius:18px;box-shadow:0 6px 18px rgba(13,122,84,.08)}
body.jintro .qo{border-width:2px;border-radius:14px;min-height:54px;transition:transform .12s,border-color .15s,background .15s}
body.jintro .qo:active{transform:scale(.98)}
body.jintro .qo:has(input:checked){animation:jpop .25s cubic-bezier(.3,1.6,.5,1)}
body.jintro #qgo:not(:disabled),body.jintro .qnav button:not(.ghost):not(:disabled){box-shadow:0 4px 0 var(--acc-h);transition:transform .1s,box-shadow .1s}
body.jintro #qgo:active:not(:disabled),body.jintro .qnav button:not(.ghost):active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--acc-h)}
body.jintro .qnav button.ghost{border-width:2px;border-radius:14px}
body.jintro .jb{z-index:0;opacity:.35}
@media(prefers-reduced-motion:reduce){body.jintro #qintro,body.jintro #qname.bad{animation:none}}
body.jintro .qbar,body.jintro .qsteps .qnav{background:rgba(244,248,245,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:transparent}