.quiz-body{background:radial-gradient(900px 500px at 80% 0%,#1C2F63 0%,var(--night) 65%) fixed;color:#fff;min-height:100vh;display:flex;flex-direction:column}
.qtop{display:flex;align-items:center;gap:18px;padding:14px 20px;max-width:760px;width:100%;margin:0 auto}
.qtop .brand{font-size:17px}.qtop .brand img{width:30px;height:30px;border-radius:8px}
.qprogress{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.qprogress span{display:block;height:100%;width:0;background:var(--gold);border-radius:6px;transition:width .35s ease}
.qmain{flex:1;width:100%;max-width:760px;margin:0 auto;padding:18px 20px 40px}
.qfoot{text-align:center;padding:18px;font-size:13px;color:#8C9AC2}.qfoot a{color:#AEBBE0}

.qstep{animation:qin .35s ease both}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qstep{animation:none}.qprogress span{transition:none}}
.qcount{font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:14px 0 12px}
.qtitle{font:700 clamp(26px,5vw,36px)/1.15 var(--head);margin:0 0 8px}
.qhelp{color:#BFCAE6;margin:0 0 22px;font-size:16px}
.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:520px){.opts.two{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:14px 18px;border-radius:16px;border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font:500 17px/1.3 var(--body);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.opt:hover{background:rgba(255,255,255,.11)}
.opt:active{transform:scale(.99)}
.opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,179,61,.16)}
.opt .ico{font-size:24px;width:30px;text-align:center;flex:none}
.opt small{display:block;color:#AEBBE0;font-size:14px;margin-top:2px}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.qback{background:none;border:0;color:#AEBBE0;font:500 16px var(--body);cursor:pointer;min-height:44px;padding:0 6px}
.qback:hover{color:#fff}
.qinput{width:100%;min-height:58px;padding:0 18px;border-radius:16px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font:500 18px var(--body)}
.qinput::placeholder{color:#8C9AC2}
.qlist{list-style:none;margin:12px 0 0;padding:0;max-height:46vh;overflow:auto;display:grid;gap:8px}
.qlist .opt{min-height:52px}
.qlabel{display:block;font-weight:600;margin:16px 0 8px}
.qcheck{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;font-size:15px;color:#C9D3EE}
.qcheck input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--gold)}
.qerr{color:#FFB4A8;font-size:15px;min-height:1.4em;margin-top:10px}
.qskip{display:inline-block;margin-top:14px;color:#AEBBE0;background:none;border:0;font:500 15px var(--body);text-decoration:underline;cursor:pointer;min-height:44px}

/* loading */
.qload{text-align:center;padding:60px 0}
.globe{width:92px;height:92px;margin:0 auto 26px;border-radius:50%;border:5px solid rgba(255,255,255,.12);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qload p{color:#C9D3EE;font-size:18px;min-height:1.6em}

/* result */
.res-head{text-align:center;margin:10px 0 26px}
.ring{--p:0;width:180px;height:180px;margin:18px auto 14px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
.ring div{width:146px;height:146px;border-radius:50%;background:var(--night);display:grid;place-items:center;align-content:center}
.ring b{font:700 46px/1 var(--head)}.ring span{font-size:13px;color:#BFCAE6;margin-top:4px}
.res-sum{color:#D4DCF2;font-size:18px;max-width:32em;margin:0 auto}
.res-sec{margin-top:34px}
.res-sec h2{font-size:24px;margin-bottom:14px}
.lock{display:grid;gap:12px}
.lockc{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:linear-gradient(120deg,rgba(242,179,61,.18),rgba(255,255,255,.05));border:1.5px solid rgba(242,179,61,.5)}
.lockc .rk{font:700 22px/1 var(--head);color:var(--gold);width:38px}
.lockc .nm{flex:1}
.lockc .blur{font:700 20px/1.2 var(--head);filter:blur(7px);user-select:none}
.lockc .nm small{display:block;color:#C9D3EE;font-size:14px;margin-top:4px}
.lockc .sc{font:700 22px/1 var(--head)}
.cities{display:grid;gap:10px}
.city{display:grid;grid-template-columns:38px 1fr auto;gap:6px 14px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.city .rk{font:700 18px/1 var(--head);color:#AEBBE0}
.city .nm b{font:700 18px/1.2 var(--head)}.city .nm small{display:block;color:#AEBBE0;font-size:14px}
.city .sc{font:700 20px/1 var(--head);text-align:right}
.city .meta{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:#C9D3EE}
.pos{color:#7EE2A8}.neg{color:#FFB4A8}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.12);color:#E4E9F7}
.badge.ok{background:rgba(126,226,168,.18);color:#9AF0BF}
.unlock{margin-top:34px;padding:26px;border-radius:22px;background:#fff;color:var(--ink)}
.unlock h2{font-size:26px}
.unlock .sub{font-size:16px}
.unlock .row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
.unlock video{border-radius:18px;border:6px solid #1B2238;width:200px}
@media (max-width:600px){.unlock .row{grid-template-columns:1fr}.unlock video{margin:0 auto}}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.store{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;border-radius:14px;background:var(--night);color:#fff;font:600 15px/1.1 var(--body);border:0;cursor:pointer}
.store small{display:block;font-weight:400;font-size:11.5px;color:#AEBBE0}
.store[aria-pressed="true"]{outline:3px solid var(--gold)}
.unlock .qinput{background:#F4F1EA;color:var(--ink);border-color:#DDD6C6}
.unlock .qinput::placeholder{color:#8A8FA3}
.unlock .qerr{color:var(--red)}
.okmsg{background:var(--green-bg);color:var(--green);padding:14px 16px;border-radius:14px;font-weight:600}
.share{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.disc{color:#8C9AC2;font-size:13px;text-align:center;margin-top:26px}
html:has(.quiz-body){background:#0B1020}
.quiz-body{background-color:#0B1020}
.qtitle:focus{outline:none}