:root{
  --bg:#ffffff; --ink:#0b0b0c; --muted:#6b7280; --surface:#f6f7fb;
  --brand:#111827; --focus:#1d4ed8;
  --ok:#16a34a; --warn:#eab308; --bad:#ef4444;
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg)}
.wrap{max-width:940px; margin-inline:auto; padding:28px 18px 72px}
.sitehead, .sitefoot {display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
#footer-tag {
  display: inline-block; /* or display: block; */
  max-width: 500px;
  font-size: 10px;
}
.brand{font-weight:800; text-decoration:none; color:var(--ink)}
.dot{color:#6d28d9}
.navlink{color:var(--brand); text-decoration:none; font-weight:600}
.navlink:hover{text-decoration:underline}
.hero{padding:32px 20px; text-align:center; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px}
h1{font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.15; margin:.2rem 0 .6rem}
h2{margin:0 0 .6rem}
.sub{color:var(--muted); max-width:720px; margin:0 auto 16px}
.btn{appearance:none; border:0; border-radius:999px; padding:12px 18px; font-weight:800; cursor:pointer; background:#e5e7eb; color:#111827; text-decoration:none; display:inline-block}
.btn.primary{background:var(--brand); color:#fff}
.card{background:var(--surface); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin:18px 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.bullets{margin:.4rem 0 0 1rem}
.bullets li{margin:.3rem 0}
.links{margin:.4rem 0 0 1rem}
.links a{color:#1f2937}
.grid2{display:grid; gap:16px}
@media (min-width:820px){ .grid2{grid-template-columns:1fr 1fr} }
label{display:block; font-weight:700; margin-bottom:6px}
input[type="number"]{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #d1d5db; background:#fff; font-size:1rem}
input[type="number"]:focus{outline:3px solid rgba(29,78,216,.2); border-color:var(--focus)}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.gap{gap:18px}
.hint{color:var(--muted); font-size:.9rem}
.kpi{display:flex; align-items:center; gap:10px; margin-top:6px}
.badge{border-radius:999px; padding:4px 10px; font-weight:800; font-size:.9rem; background:#e5e7eb}
.badge.ok{background:#dcfce7}
.badge.warn{background:#fef9c3}
.badge.bad{background:#fee2e2}
.result{font-size:clamp(1.05rem,2.2vw,1.25rem); font-weight:800}
.hr{height:1px; background:#e5e7eb; margin:14px 0}
.sharebox{display:flex; gap:10px; flex-wrap:wrap}
.vis{--pct:0; --ring:#e5e7eb; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--ring) calc(var(--pct)*1%), #e5e7eb 0);
  display:grid; place-items:center; font-weight:800}
.vis-inner{width:86px; height:86px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:1.1rem}