:root { --bg:#fff; --fg:#111; --muted:#555; --accent:#111; --card:#fafafa; --border:#e8e8e8; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--fg); font-family: "Cal Sans","Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; line-height:1.5; }
.site-header { padding: 2rem 1rem 1.25rem; text-align:center; }
.site-header h1 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); margin:0 0 .25rem; }
.site-header p { margin:0; color: var(--muted); }

.tabs { display:flex; gap:.5rem; padding: .5rem 1rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:auto; }
.tab { appearance:none; border:1px solid var(--border); background:#fff; padding:.6rem .9rem; border-radius:.6rem; cursor:pointer; font-weight:600; transition: transform .12s ease, background .2s ease; }
.tab:hover { transform: translateY(-1px); }
.tab.is-active { background: var(--card); }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.panel { display:none; padding: 1rem; animation: fade .2s ease; }
.panel.is-active { display:block; }
@keyframes fade { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }

.intro { color: var(--muted); margin-top:.25rem; }

.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin: 1rem 0; }
fieldset { border:1px solid var(--border); background: var(--card); border-radius:.8rem; padding: .75rem; }
legend { padding: 0 .5rem; color: var(--muted); font-weight:600; }
label { display:flex; flex-direction:column; gap:.35rem; font-size:.95rem; }
input { padding:.6rem .7rem; border:1px solid var(--border); border-radius:.5rem; background:#fff; color:var(--fg); }
input:focus { outline: 2px solid #000; outline-offset: 2px; }

.results { border:1px dashed var(--border); border-radius:.8rem; padding:1rem; background:#fff; }
.results h3 { margin-top:0; }
.results .cols { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: .75rem; }
.kpi { padding:.75rem; border:1px solid var(--border); border-radius:.6rem; background: var(--card); }
.kpi strong { display:block; font-size:1.05rem; }

.notes { margin-top: .75rem; }

.site-footer { padding: 2rem 1rem; text-align:center; color: var(--muted); border-top:1px solid var(--border); }

@media (prefers-color-scheme: dark) {
  :root { --bg:#0e0e0f; --fg:#f5f5f5; --muted:#b9b9b9; --accent:#f5f5f5; --card:#161618; --border:#2a2a2e; }
  input { background:#0f0f11; }
  .tab { background:#111114; }
}