:root{
  --bg:#08080b;
  --panel:#111116;
  --panel2:#17171e;
  --line:#2a2a33;
  --text:#f5f5f7;
  --muted:#a5a5b0;
  --accent:#ef365c;
  --accent2:#825cff;
  --warn:#e6b37e;
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 50% -12%,rgba(130,92,255,.15),transparent 31rem),
    radial-gradient(circle at 110% 45%,rgba(239,54,92,.12),transparent 28rem),
    #08080b;
}
.app{
  min-height:100dvh;width:min(100%,820px);margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
          max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  display:flex;flex-direction:column
}
.screen{display:none;min-height:calc(100dvh - 34px);animation:fade .24s ease both}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.start{flex-direction:column;justify-content:space-between;gap:24px}
.start-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.result > .home{align-self:flex-start}
.brand{display:flex;align-items:center;gap:10px;font-size:.76rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:#d7d7de}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(239,54,92,.8)}
.hero{margin:auto 0;padding:18px 4px}
.kicker{color:var(--accent);font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
h1{margin:0;font-size:clamp(2.8rem,12vw,6rem);line-height:.9;letter-spacing:-.06em}
.hero p{color:var(--muted);font-size:clamp(1rem,3.7vw,1.15rem);line-height:1.6;margin:20px 0 0}
.warning{
  margin-top:16px;padding:13px 14px;border:1px solid rgba(230,179,126,.24);
  border-radius:15px;background:rgba(230,179,126,.055);color:#d9c2ad;font-size:.84rem;line-height:1.45
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.stat{border:1px solid var(--line);border-radius:15px;padding:13px;background:rgba(255,255,255,.018)}
.stat strong{display:block;font-size:1.05rem}.stat span{display:block;color:var(--muted);font-size:.73rem;margin-top:2px}
.cta,.ghost{width:100%;min-height:58px;border-radius:17px;font-weight:900;cursor:pointer;font-size:1rem}
.cta{border:0;background:linear-gradient(135deg,var(--accent),#b72b48);color:white;box-shadow:0 16px 34px rgba(239,54,92,.17)}
.ghost{border:1px solid var(--line);background:#17171e;color:var(--text)}
.tiny{text-align:center;color:#72727d;font-size:.73rem;line-height:1.45;margin-top:9px}
.quiz{flex-direction:column}
.topbar{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;margin-bottom:12px}
.icon{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#121217;color:white;font-size:1.15rem;cursor:pointer}
.home{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;
  border-radius:14px;border:1px solid var(--line);background:#121217;color:#fff;
  text-decoration:none;font-size:.78rem;font-weight:800;white-space:nowrap
}
.icon:disabled{opacity:.28}
.progress-meta{display:flex;justify-content:space-between;color:#858590;font-size:.74rem;margin-bottom:7px}
.track{height:6px;background:#1b1b22;border:1px solid #24242d;border-radius:99px;overflow:hidden}
.bar{height:100%;width:10%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}
.question-wrap{flex:1;display:flex;align-items:center}
.card{
  width:100%;padding:clamp(20px,5vw,34px);border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(circle at 100% 0%,rgba(130,92,255,.08),transparent 15rem),
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),
    var(--panel);
  box-shadow:0 24px 90px rgba(0,0,0,.4)
}
.qlabel{color:var(--accent);font-size:.76rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
.qtitle{margin:0 0 22px;font-size:clamp(1.4rem,5.3vw,2.15rem);line-height:1.13;letter-spacing:-.026em}
.answers{display:grid;gap:10px}
.answer{
  border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:17px;
  min-height:62px;padding:14px 15px;display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer;width:100%;
  transition:.14s ease
}
.answer:active{transform:scale(.992)}
.answer.selected{border-color:rgba(239,54,92,.85);background:linear-gradient(135deg,rgba(239,54,92,.14),rgba(130,92,255,.06)),#181820}
.letter{flex:0 0 34px;height:34px;border-radius:11px;background:#25252f;display:grid;place-items:center;font-size:.8rem;font-weight:900}
.answer.selected .letter{background:var(--accent)}
.answer-text{font-size:.97rem;line-height:1.38;font-weight:650}
.next{display:none;width:100%;min-height:60px;border:0;border-radius:16px;margin-top:15px;background:#f0f0f3;color:#101014;font-weight:900;font-size:1.28rem;cursor:pointer}
.next.show{display:block}
.result{flex-direction:column;justify-content:center;gap:14px}
.result-card{
  padding:26px 21px;border:1px solid rgba(239,54,92,.42);border-radius:28px;
  background:
    radial-gradient(circle at 88% 0%,rgba(239,54,92,.16),transparent 20rem),
    radial-gradient(circle at 0 100%,rgba(130,92,255,.1),transparent 22rem),
    #111116;
  box-shadow:0 24px 90px rgba(0,0,0,.45)
}
.result-card::before{
  content:"😈";
  display:block;
  font-size:clamp(2.8rem,12vw,4.2rem);
  line-height:1;
  margin:0 0 10px;
  filter:drop-shadow(0 0 22px rgba(239,54,92,.45))
}
.reyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:900}
.score{font-size:clamp(4rem,19vw,7rem);font-weight:950;line-height:.9;letter-spacing:-.07em;margin:12px 0 8px}
.rtitle{margin:0;font-size:clamp(1.7rem,7vw,2.7rem);line-height:1.02;letter-spacing:-.04em}
.rtext{color:#ccccd3;line-height:1.6;margin:15px 0 0}
.traits{display:grid;gap:9px;margin-top:18px}
.trait{border:1px solid var(--line);background:#0d0d12;border-radius:14px;padding:12px}
.trait-top{display:flex;justify-content:space-between;gap:12px;font-size:.83rem;margin-bottom:7px}
.trait-top span:last-child{color:#c9c9d2}
.mini-track{height:6px;background:#1e1e26;border-radius:99px;overflow:hidden}
.mini-bar{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.share{margin-top:16px;border:1px solid var(--line);border-radius:15px;background:#0d0d12;padding:13px;color:#dadade;font-size:.9rem;line-height:1.5}
.subscribe{
  margin-top:18px;padding:16px 15px;border:1px solid rgba(239,54,92,.38);border-radius:18px;
  background:linear-gradient(135deg,rgba(239,54,92,.12),rgba(130,92,255,.08)),#0d0d12
}
.subscribe-kicker{color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.subscribe-title{margin:8px 0 0;font-size:1.25rem;letter-spacing:-.03em;line-height:1.15}
.subscribe-text{margin:8px 0 0;color:#c7c7d0;line-height:1.5;font-size:.92rem}
.subscribe .category-grid{margin-top:14px}
.subscribe .category-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  min-height:34px;padding:0 10px;
  font-size:.72rem;font-weight:750;letter-spacing:0;text-transform:none
}
.subscribe .category-btn.is-on{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--accent),#c51d4a 58%,var(--accent2));
  box-shadow:0 8px 22px rgba(239,54,92,.24)
}
.subscribe-row{display:grid;gap:10px;margin-top:14px}
.subscribe input[type=email]{
  width:100%;min-height:56px;border-radius:16px;border:1px solid var(--line);
  background:#17171e;color:var(--text);padding:0 16px;font:inherit;font-size:1rem
}
.subscribe input[type=email]:focus{outline:none;border-color:rgba(239,54,92,.85)}
.subscribe .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.subscribe-status{margin:10px 0 0;color:#c9c9d2;font-size:.88rem}
.result-actions{display:grid;gap:10px;margin-top:14px}
.category-pick{
  margin-top:18px;padding:16px 15px;border:1px solid var(--line);border-radius:18px;
  background:#0d0d12
}
.category-kicker{color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.category-title{margin:8px 0 0;font-size:1.15rem;letter-spacing:-.03em;line-height:1.2;font-weight:850}
.category-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.category-btn{
  flex:1 1 calc(50% - 8px);min-width:7.2rem;min-height:46px;padding:0 12px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);border-radius:999px;background:#17171e;color:#fff;
  text-decoration:none;font-weight:900;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit
}
.category-btn:active{transform:scale(.97)}
.more-tests{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;
  margin-top:16px;border:0;border-radius:17px;font-weight:900;font-size:1.08rem;
  text-decoration:none;color:#101014;background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.22)
}
.legal{text-align:center;color:#6d6d79;font-size:.72rem;line-height:1.45}
@media(min-width:700px){
  .answers{grid-template-columns:1fr 1fr}
  .subscribe-row{grid-template-columns:1fr auto}
  .subscribe-row .cta{width:auto;padding:0 22px}
  .next{font-size:1rem;min-height:56px}
}