:root{
  --bg:#071016; --bg2:#0c1a22; --card:#0f2029; --line:#1e3742;
  --tx:#e6f2f4; --mut:#84a3ac; --accent:#22c3a6; --accent2:#3a9ef7;
  --ok:#2fd27a; --warn:#f7c948; --bad:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(1100px 560px at 50% -10%,#123 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,3rem);font-weight:850;line-height:1.1;letter-spacing:-.5px}
.lead{color:var(--mut);max-width:640px;margin:1rem auto 2rem;font-size:1.05rem}

.analyze{display:flex;gap:.6rem;max-width:600px;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:#5b7580}
.analyze button{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04231d;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}
.err{background:#3a1620;border:1px solid #6b2233;color:#ff9aa5;border-radius:12px;
  padding:.7rem 1rem;max-width:600px;margin:1rem auto 0;font-size:.92rem}

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

.result{padding:1rem 0 2rem}
.scorehead{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.gauge{--v:0;width:120px;height:120px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(var(--col) calc(var(--v)*1%),var(--line) 0)}
.gauge>div{width:92px;height:92px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;text-align:center}
.gauge span{font-size:1.9rem;font-weight:800} .gauge small{display:block;color:var(--mut);font-size:.7rem}
.scoremeta h2{font-size:1.5rem;word-break:break-all}
.scoremeta .u{color:var(--mut);font-size:.85rem;margin:.15rem 0 .6rem}
.pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{font-size:.82rem;padding:.2rem .7rem;border-radius:20px;font-weight:700}
.pill.p{background:rgba(47,210,122,.14);color:var(--ok)}
.pill.w{background:rgba(247,201,72,.14);color:var(--warn)}
.pill.f{background:rgba(255,107,107,.14);color:var(--bad)}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.6rem}
.catbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.catbox .nm{font-size:.8rem;color:var(--mut);margin-bottom:.4rem;min-height:2.2em}
.catbox .bar{height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.catbox .bar i{display:block;height:100%}
.catbox .vv{font-weight:800;font-size:1.1rem;margin-top:.3rem}

.group{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:.9rem;overflow:hidden}
.group h3{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;
  font-size:1.02rem;cursor:default;background:var(--bg2)}
.group h3[data-toggle]{cursor:pointer}
.group h3 .sc{font-size:.82rem;color:var(--mut);font-weight:600}
.group.closed .chk{display:none}
.chk{display:flex;gap:.7rem;padding:.7rem 1.1rem;border-top:1px solid var(--line)}
.ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;color:#04231d;margin-top:.1rem}
.ic.pass{background:var(--ok)} .ic.warn{background:var(--warn)} .ic.fail{background:var(--bad)}
.ic.info{background:var(--mut)}
.chk .lab{font-weight:600}
.chk .val{color:var(--mut);font-weight:400;font-size:.9rem}
.chk .det{color:var(--mut);font-size:.82rem;margin-top:.15rem;word-break:break-word}
.chk .tip{color:#a9d9cf;font-size:.82rem;margin-top:.3rem}
.disc{color:#5b7580;font-size:.82rem;max-width:640px;margin:1.2rem auto 0;text-align:center}

.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:1px solid var(--line);border-radius:14px;padding:1.1rem}
.hc b{display:block;margin-bottom:.4rem} .hc span{color:var(--mut);font-size:.9rem}

.guia{max-width:760px;margin:1rem auto 0;padding:1rem 0}
.guia h2{font-size:1.4rem;margin-bottom:.8rem}
.guia p{color:var(--mut);margin-bottom:.6rem}
.guia strong{color:var(--tx)}
.foot{text-align:center;color:#5b7580;font-size:.85rem;padding:2rem 1rem}