:root { --bg:#f6f7fb; --fg:#0f1729; --mut:#5b667a; --card:#ffffff; --bd:#e4e8f1; --ok:#12a150; --okbg:#e4f8ec; --no:#d92d20; --nobg:#fdeceb; --acc:#4f46e5; --acc2:#06b6d4; --sh:0 1px 2px rgba(15,23,41,.05),0 8px 24px rgba(15,23,41,.06); --r:16px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1020; --fg:#e9edf7; --mut:#9aa6c0; --card:#131a2e; --bd:#222c47; --okbg:#0d3a24; --nobg:#4a1a18; --acc:#8b86ff; --acc2:#22d3ee; --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
.w { max-width: 940px; margin: 0 auto; padding: 0 18px; }
header { position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.4) blur(10px); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--bd); }
header .w { display:flex; align-items:center; justify-content:space-between; gap:12px; height:58px; }
.logo { font-weight:800; font-size:20px; letter-spacing:-.3px; color:var(--fg); text-decoration:none; } .logo span { background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav { display:flex; gap:4px; } nav a { color:var(--mut); text-decoration:none; font-weight:600; font-size:14px; padding:8px 12px; border-radius:10px; } nav a:hover { color:var(--fg); background:var(--bd); } nav a.on { color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,transparent); }
.hero { padding:44px 0 18px; } .hero h1 { font-size:clamp(30px,6vw,50px); line-height:1.08; letter-spacing:-1.2px; margin:0 0 14px; font-weight:800; }
.hero h1 em { font-style:normal; background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:18px; color:var(--mut); max-width:640px; margin:0 0 22px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:8px 0 6px; }
.stat { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh); } .stat b { display:block; font-size:30px; line-height:1.1; letter-spacing:-.8px; font-variant-numeric:tabular-nums; } .stat span { color:var(--mut); font-size:13px; }
.fine { color:var(--mut); font-size:13px; margin:6px 0 0; }
h2.sec { font-size:13px; text-transform:uppercase; letter-spacing:.9px; color:var(--mut); margin:30px 0 12px; font-weight:700; }
.exames { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.ex { text-align:left; background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:16px; cursor:pointer; box-shadow:var(--sh); transition:transform .12s,border-color .12s; color:var(--fg); font:inherit; }
.ex:hover, .ex.on { transform:translateY(-2px); border-color:var(--acc); } .ex b { display:block; font-size:18px; letter-spacing:-.3px; } .ex .n { font-size:26px; font-weight:800; letter-spacing:-.6px; margin-top:6px; display:block; font-variant-numeric:tabular-nums; } .ex .t { font-size:12px; color:var(--mut); }
.tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); } .tag.g { background:color-mix(in srgb,var(--acc2) 18%,transparent); color:color-mix(in srgb,var(--acc2) 70%,var(--fg)); }
.card { background:var(--card); border:1px solid var(--bd); border-radius:var(--r); padding:20px; margin:14px 0; box-shadow:var(--sh); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
select, button, input { font:inherit; padding:10px 14px; border-radius:12px; border:1px solid var(--bd); background:var(--card); color:var(--fg); }
button { cursor:pointer; font-weight:600; } button.pri { background:linear-gradient(135deg,var(--acc),#6d5dfc); color:#fff; border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 35%,transparent); } button:disabled { opacity:.6; cursor:default; }
.meta { color:var(--mut); font-size:14px; }
.placar { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:14px 0; } .placar div { background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:10px 14px; font-size:13px; color:var(--mut); } .placar b { display:block; font-size:22px; color:var(--fg); letter-spacing:-.4px; }
.bar { height:6px; background:var(--bd); border-radius:9px; overflow:hidden; margin:2px 0 12px; } .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .3s; }
.enun { white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; } .enun img, .alt img { max-width:100%; height:auto; border-radius:10px; margin:8px 0; display:block; }
.alts { display:grid; gap:10px; margin-top:16px; }
.alt { display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%; padding:14px 16px; border:2px solid var(--bd); border-radius:14px; background:var(--card); font-weight:500; transition:border-color .1s,transform .1s; }
.alt:hover:enabled { border-color:var(--acc); transform:translateX(2px); } .alt .l { font-weight:800; min-width:1.6em; height:1.6em; display:grid; place-items:center; border-radius:8px; background:var(--bd); font-size:14px; }
.alt.ok { border-color:var(--ok); background:var(--okbg); } .alt.ok .l { background:var(--ok); color:#fff; } .alt.no { border-color:var(--no); background:var(--nobg); } .alt.no .l { background:var(--no); color:#fff; }
.fb { font-weight:700; margin-top:14px; font-size:17px; } .fb.ok { color:var(--ok); } .fb.no { color:var(--no); }
table { width:100%; border-collapse:collapse; } td, th { padding:10px 8px; border-bottom:1px solid var(--bd); text-align:left; }
code, pre { background:color-mix(in srgb,var(--fg) 6%,transparent); border:1px solid var(--bd); border-radius:8px; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } code { padding:1px 6px; word-break:break-all; } pre { padding:14px; overflow:auto; }
footer { color:var(--mut); font-size:13px; padding:28px 0 48px; } a { color:var(--acc); }
.hide { display:none !important; } .btn-share a { display:inline-block; padding:10px 14px; border:1px solid var(--bd); border-radius:12px; text-decoration:none; font-weight:600; background:var(--card); }
@media (max-width:560px) { .hero { padding-top:28px; } nav a { padding:8px 9px; font-size:13px; } .enun { font-size:16px; } }