:root{
  --paper:#F1F4F3; --surface:#FAFCFB; --surface-2:#E6ECEA;
  --ink:#111917; --ink-2:#4E5B58; --ink-3:#78847F;
  --rule:#C7D2CF; --accent:#0C6E6A; --accent-soft:#D9EAE8;
  --warn:#9E560F; --warn-soft:#F5E3D2;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0C1211; --surface:#141C1B; --surface-2:#1D2726;
    --ink:#E5ECEA; --ink-2:#9AA7A4; --ink-3:#75817E;
    --rule:#2B3735; --accent:#48B5AC; --accent-soft:#123230;
    --warn:#D2924E; --warn-soft:#312415;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- spolecna navigace ---- */
.lista{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:10px 18px; border-bottom:1px solid var(--rule);
  background:var(--surface); position:sticky; top:0; z-index:10;
}
.lista .znak{font-size:18px; margin-right:6px; text-decoration:none}
.lista a{
  color:var(--ink-2); text-decoration:none; font-size:14px;
  padding:5px 11px; border-radius:5px; white-space:nowrap;
}
.lista a:hover{background:var(--surface-2); color:var(--ink)}
.lista a.zde{background:var(--accent-soft); color:var(--accent); font-weight:600}
.lista form{margin-left:auto}
.lista button{
  background:none; border:1px solid var(--rule); color:var(--ink-3);
  border-radius:5px; padding:5px 11px; font-size:13px;
}
.lista button:hover{border-color:var(--warn); color:var(--warn)}

.lista .kdo{margin-left:auto; font-size:12.5px; color:var(--ink-3); letter-spacing:.04em}