:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --ink:#0b1a2b;
  --muted:#6b7a90;
  --brand:#0a3d8f;
  --ok:#0c8c4a;
  --warn:#c1292e;
  --ring:#dfe6f2;
  --shadow:0 10px 24px rgba(7,20,46,.08);
  --radius:16px;
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink); background:var(--bg);
}
.container{max-width:1120px; margin-inline:auto; padding:24px}
.page-header{padding:24px 0 0}
h1{font-size:clamp(28px,4vw,40px); margin:0 0 8px}
h2{font-size:22px; margin:0 0 16px}
.lead{color:var(--muted); margin:0}
.chip{background:var(--brand); color:#fff; padding:2px 10px; border-radius:999px}

.card{
  background:var(--card); border-radius:var(--radius);
  padding:20px; margin:18px 0; box-shadow:var(--shadow); border:1px solid var(--ring);
}

.grid{display:grid; gap:14px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr}}

.field label{display:block; font-weight:600; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:14px 12px; border:1px solid var(--ring); border-radius:12px;
  background:#fff; font:inherit; color:var(--ink); outline:none;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(10,61,143,.12)}

.radiogroup{display:flex; gap:16px; align-items:center; padding:10px 0}
.radiogroup input{transform:translateY(1px)}

.metrics{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:4px}
.metrics-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.metric{
  border:1px solid var(--ring); border-radius:14px; padding:14px; background:#fff;
}
.metric--flat{box-shadow:none}
.metric__label{color:var(--muted); font-weight:600}
.metric__value{font-size:26px; font-weight:700; margin-top:6px}
.metric__hint{color:var(--muted); font-size:14px; margin-top:6px}
.metric--bad .metric__value{color:var(--warn)}
.metric--ok  .metric__value{color:var(--ok)}

.note{color:var(--muted); margin-top:8px}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 18px;
  background:var(--brand); color:#fff; border:0; border-radius:12px;
  font-weight:700; cursor:pointer; text-decoration:none;
  transition:filter .15s ease, transform .02s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:#0c315f}
.btn-ghost{background:transparent; border:1px solid var(--ring); color:var(--ink); text-decoration:none}
.hidden{display:none}
.consent{margin-top:8px}

/* Modal (používá hypotéční formulář) */
.modal{
  position:fixed; inset:0; background:rgba(7,20,46,.35);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal[aria-hidden="false"]{display:flex}
.modal__dialog{background:#fff; border-radius:14px; width:min(640px, 95vw); box-shadow:var(--shadow); padding:18px 18px 12px; border:1px solid var(--ring)}
.modal__close{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;float:right}
.modal__body{color:var(--ink); margin:8px 0 12px}
.modal__footer{text-align:right}