:root{
  --bg:#0b1020; --bg2:#111834; --card:#161e3d; --line:#232c52;
  --tx:#e8ecff; --mut:#8b96c4; --accent:#5b8cff; --accent2:#9a6bff;
  --ok:#2fd27a; --warn:#f7c948; --bad:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(1200px 600px at 50% -10%,#1a2350 0%,var(--bg) 55%);
  color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;line-height:1.5}
a{color:var(--accent)}
.grad{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;
  background-clip:text;color:transparent}

.top{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1rem,4vw,2.5rem);
  max-width:1080px;margin:0 auto}
.brand{font-size:1.25rem;font-weight:800;letter-spacing:.3px}
.brand b{color:var(--accent)} .brand .logo{margin-right:.2rem}
.ghost{color:var(--mut);text-decoration:none;font-size:.9rem;border:1px solid var(--line);
  padding:.4rem .8rem;border-radius:10px}

main{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.hero{text-align:center;padding:2.5rem 0 1.5rem}
.hero h1{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:850;line-height:1.1;letter-spacing:-.5px}
.lead{color:var(--mut);max-width:620px;margin:1rem auto 2rem;font-size:1.05rem}

.analyze{display:flex;gap:.6rem;max-width:640px;margin:0 auto;background:var(--card);
  border:1.5px solid var(--line);border-radius:16px;padding:.5rem;box-shadow:0 20px 60px -20px #000}
.analyze input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);
  font-size:1.05rem;padding:.7rem .9rem}
.analyze input::placeholder{color:#5f6b9a}
.analyze button{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff;border:none;
  font-weight:800;font-size:1rem;padding:.75rem 1.5rem;border-radius:12px;cursor:pointer;white-space:nowrap}
.analyze button:disabled{opacity:.6;cursor:wait}
.psi-opt{display:inline-flex;align-items:center;gap:.45rem;color:var(--mut);font-size:.82rem;margin-top:.9rem;cursor:pointer}
.err{background:#3a1620;border:1px solid #6b2233;color:#ff9aa5;border-radius:12px;
  padding:.7rem 1rem;max-width:640px;margin:1rem auto 0;font-size:.92rem}

.loading{text-align:center;padding:3rem 0;color:var(--mut)}
.spinner{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 1rem;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── resultado ── */
.result{padding:1rem 0 2rem}
.scorehead{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1.5px solid var(--line);border-radius:20px;padding:1.4rem 1.6rem;margin-bottom:1.2rem}
.gauge{--v:0;--col:var(--ok);width:132px;height:132px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--col) calc(var(--v)*1%),#222c52 0);
  display:grid;place-items:center;position:relative}
.gauge::before{content:"";position:absolute;inset:12px;background:var(--card);border-radius:50%}
.gauge span{position:relative;font-size:2.2rem;font-weight:850}
.gauge small{position:relative;display:block;font-size:.7rem;color:var(--mut);text-align:center;font-weight:600}
.scoremeta{flex:1;min-width:220px}
.scoremeta h2{font-size:1.15rem;word-break:break-all}
.scoremeta .u{color:var(--mut);font-size:.85rem;word-break:break-all}
.pills{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.pill{border-radius:20px;padding:.25rem .7rem;font-size:.8rem;font-weight:700}
.pill.p{background:#123a28;color:var(--ok)} .pill.w{background:#3a3413;color:var(--warn)}
.pill.f{background:#3a1620;color:var(--bad)}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.2rem}
.catbox{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:.9rem}
.catbox .bar{height:7px;background:#222c52;border-radius:4px;overflow:hidden;margin:.5rem 0 .35rem}
.catbox .bar i{display:block;height:100%;border-radius:4px}
.catbox .nm{font-size:.82rem;color:var(--mut)} .catbox .vv{font-weight:800;font-size:1.05rem}

.psi{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.psi h3{font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin-bottom:.9rem}
.psi .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}
.lh{text-align:center}.lh .ring{width:64px;height:64px;border-radius:50%;margin:0 auto .4rem;
  display:grid;place-items:center;position:relative;background:conic-gradient(var(--col) calc(var(--v)*1%),#222c52 0)}
.lh .ring::before{content:"";position:absolute;inset:7px;background:var(--card);border-radius:50%}
.lh .ring b{position:relative;font-size:1.1rem} .lh small{color:var(--mut);font-size:.75rem}
.cwv{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.cwv .m{flex:1;min-width:90px} .cwv .m b{font-size:1.15rem} .cwv .m small{display:block;color:var(--mut);font-size:.72rem}
.cwv .g{color:var(--ok)} .cwv .a{color:var(--warn)} .cwv .r{color:var(--bad)}

.group{background:var(--card);border:1.5px solid var(--line);border-radius:16px;margin-bottom:1rem;overflow:hidden}
.group>h3{padding:.9rem 1.1rem;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;user-select:none}
.group>h3 .sc{font-size:.85rem;color:var(--mut);font-weight:700}
.group.closed .chk{display:none}
.chk{display:flex;gap:.75rem;padding:.75rem 1.1rem;border-top:1px solid var(--line);align-items:flex-start}
.chk .ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;margin-top:.1rem}
.chk .ic.pass{background:#123a28;color:var(--ok)} .chk .ic.warn{background:#3a3413;color:var(--warn)}
.chk .ic.fail{background:#3a1620;color:var(--bad)} .chk .ic.info{background:#1c2550;color:var(--accent)}
.chk .body{flex:1;min-width:0}
.chk .lab{font-weight:650} .chk .val{color:var(--mut);font-size:.85rem;word-break:break-word}
.chk .det{color:#707da8;font-size:.8rem;margin-top:.15rem;word-break:break-word}
.chk .tip{color:#6f7bb0;font-size:.8rem;margin-top:.25rem;font-style:italic}
.chk.pass .tip{display:none}

.wall{max-width:760px;margin:2.5rem auto 0;text-align:center}
.wall h2{font-size:1.4rem;margin-bottom:.4rem}
.wall-sub{color:var(--mut);margin-bottom:1.4rem}
.wall-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;text-align:left}
.wcard{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.9rem}
.wcard .wdom{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wsc{font-family:var(--mono);font-size:.82rem;color:var(--mut);white-space:nowrap}
.wcard .wsc b{color:var(--accent)}
.wcard .wdelta{font-weight:800;font-size:.9rem;color:#0b1020;background:var(--accent);
  border-radius:20px;padding:.15rem .6rem;white-space:nowrap}

.how{padding:2.5rem 0 1rem;text-align:center}
.how h2{font-size:1.5rem;margin-bottom:1.4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;text-align:left}
.hc{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:1.1rem}
.hc b{display:block;margin-bottom:.4rem} .hc span{color:var(--mut);font-size:.9rem}
.disc{color:#5f6b9a;font-size:.82rem;max-width:640px;margin:1.5rem auto 0}

.guia{max-width:760px;margin:1rem auto 0;padding:1rem 0}
.guia h2{font-size:1.4rem;margin-bottom:.8rem}
.guia h3{font-size:1.05rem;margin:1.3rem 0 .4rem;color:#c7d0f5}
.guia p{color:var(--mut);margin-bottom:.6rem}
.guia strong{color:var(--tx)} .guia em{color:#c7d0f5;font-style:normal}

.foot{text-align:center;color:var(--mut);font-size:.85rem;padding:2rem 1rem;border-top:1px solid var(--line);margin-top:2rem}