:root{--bg:#fff8fc;--fg:#1d1b26;--muted:#5d5870;--card:#fff;--line:#1d1b26;--pink:#ff5fa2;--violet:#8b5cf6;--teal:#14b8a6;--soft:#f6eeff;--r:20px;--sh:4px 4px 0 #1d1b26}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);background-image:radial-gradient(circle at 10% 0,#ffe1f0 0,transparent 40%),radial-gradient(circle at 95% 10%,#e7ddff 0,transparent 35%)}
a{color:#6d28d9}
img,svg,canvas{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header.top{border-bottom:2px solid var(--line);background:#fff}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;text-decoration:none;color:var(--fg);font-size:19px;letter-spacing:-.02em}
.brand img{width:30px;height:30px}
nav.main{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px;padding:6px 0}
nav.main a{text-decoration:none;color:var(--muted);font-weight:600}
nav.main a[aria-current=page]{color:var(--fg);box-shadow:inset 0 -3px 0 var(--pink)}
.hero{padding:22px 0 8px}
h1{font-size:clamp(28px,5vw,46px);line-height:1.08;margin:0 0 10px;letter-spacing:-.03em;font-weight:900}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);margin:0 0 14px;max-width:760px;font-size:17px}
.tool{display:grid;grid-template-columns:350px 1fr;gap:20px;align-items:start}
.tool>*{min-width:0}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.field{margin:0 0 14px}
.field>.lab{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-family:inherit;font-weight:600;font-size:14px;line-height:1.1;cursor:pointer;color:var(--fg)}
.chip[aria-pressed=true]{background:var(--fg);color:#fff}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.trow{display:flex;align-items:center;gap:10px}
.trow input{flex:1;accent-color:var(--pink)}
.trow output{font-weight:900;font-size:20px;min-width:62px;text-align:right}
.linkbtn{background:none;border:0;color:#6d28d9;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:14px;padding:11px 15px;font-family:inherit;font-weight:800;font-size:15px;line-height:1.1;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .08s,box-shadow .08s;text-decoration:none;color:var(--fg);background:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn-primary{background:var(--pink);color:#fff}
.btn-violet{background:var(--violet);color:#fff}
.btn-geo{width:100%;background:#e9fbf7;margin-bottom:6px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.wmsg{font-size:13px;color:var(--muted);margin:0 0 12px;min-height:1em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1060px){.outs{grid-template-columns:1fr}}
.outs.pop .outfit{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.96) rotate(-1deg);opacity:.4}100%{transform:none;opacity:1}}
.outfit{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh);display:flex;flex-direction:column}
@media (max-width:1060px) and (min-width:520px){.outfit{display:grid;grid-template-columns:120px 1fr;gap:4px 14px}.outfit .ohead,.outfit .why,.outfit .pick{grid-column:1/-1}.outfit .fig{grid-row:2/4}}
.outfit:nth-child(1) .tag{background:var(--pink)}.outfit:nth-child(2) .tag{background:var(--violet)}.outfit:nth-child(3) .tag{background:var(--teal)}
.outfit.picked{outline:4px solid var(--pink);outline-offset:3px}
.ohead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{color:#fff;font-weight:900;border:2px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px}
.vibe{font-size:13px;color:var(--muted);font-weight:700;text-align:right}
.fig{display:flex;justify-content:center;padding:8px 0;background:var(--soft);border-radius:14px;margin:10px 0}
.items{list-style:none;margin:0;padding:0;font-size:14.5px}
.items li{display:flex;align-items:center;gap:8px;padding:3px 0}
.sw{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.slot{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted);width:46px;flex:none}
.why{font-size:14px;margin:10px 0 0;padding:8px 10px;background:#fff6d6;border-radius:12px;border:1.5px dashed #c9a400}
.pick{margin-top:12px;width:100%}
.note{font-size:13px;color:var(--muted)}
.shop{margin-top:16px;padding:12px 14px;border:2px dashed #b9b2cc;border-radius:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.ad-slot{display:none;min-height:90px;margin:16px 0}
.sec{margin:34px 0}
.sec h2{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.prose{max-width:780px}
.prose h3{margin:22px 0 6px}
.prose li{margin:4px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0;list-style:none;counter-reset:s}
.steps li{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fg);color:#fff;font-weight:900;margin-bottom:4px}
.steps h3{margin:2px 0;font-size:17px}.steps p{margin:0;font-size:14.5px;color:var(--muted)}
.faq details{background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 14px;margin:8px 0}
.faq summary{font-weight:800;cursor:pointer}
.faq p{margin:8px 0 2px}
.more{display:flex;flex-wrap:wrap;gap:8px}
.more a{border:2px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--fg);font-weight:700;background:#fff;font-size:14px}
footer{border-top:2px solid var(--line);margin-top:40px;padding:20px 0;font-size:14px;color:var(--muted);background:#fff}
footer a{margin-right:14px;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;background:var(--fg);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;transition:.25s;z-index:9;max-width:90vw;word-break:break-all}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* quiz */
.quiz{max-width:760px}
.q{border:2px solid var(--line);border-radius:18px;background:#fff;margin:0 0 12px;padding:12px 14px;box-shadow:3px 3px 0 var(--line)}
.q legend{font-weight:800;padding:0 4px;display:flex;gap:8px;align-items:flex-start}
.qn{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff;font-size:14px}
.opt{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;margin-top:4px;border:1.5px solid #e6e1f0}
.opt:has(input:checked){background:#ffe6f2;border-color:var(--pink)}
.opt input{accent-color:var(--pink);width:18px;height:18px}
.rateres{max-width:760px;margin-top:18px}
.scorebox{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.score{font-size:64px;font-weight:900;line-height:1;background:linear-gradient(90deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.score::after{content:"/100";font-size:20px;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.verdict{font-size:22px;font-weight:900;margin:0}
.vsub{margin:0;color:var(--muted)}
.bar{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:10px 0;font-weight:700;font-size:14px}
.bar i{grid-column:1/-1;height:12px;border-radius:9px;border:2px solid var(--line);background:linear-gradient(90deg,var(--pink),var(--violet)) 0/var(--w) 100% no-repeat,#fff}
.vote-head{text-align:center}
.legal{max-width:760px}
.jump{display:none;width:100%;margin-top:6px}
@media (max-width:900px){.jump{display:flex}}