:root {
  --modra: #001744;
  --zluta: #ffb612;
  --bila: #ffffff;
  --text: #0b1a33;
  --sedy-text: #4a5670;
  --pozadi: #f3f5f9;
  --okraj: #d8deea;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--pozadi);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hlavicka { background: var(--modra); color: var(--bila); border-bottom: 4px solid var(--zluta); }
.hlavicka-obsah {
  max-width: 960px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.logo img { display: block; height: 39px; width: auto; }
.nazev-portalu { font-weight: 600; letter-spacing: 0.02em; }
.odhlaseni { margin-left: auto; }
.obsah { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.karta {
  background: var(--bila); border: 1px solid var(--okraj); border-radius: 12px;
  padding: 24px; box-shadow: 0 1px 3px rgba(0, 23, 68, 0.08);
}
h1 { color: var(--modra); font-size: 1.5rem; line-height: 1.25; margin: 0 0 12px; }
a { color: var(--modra); font-weight: 600; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--zluta); outline-offset: 2px; }
.formular { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 8px; }
label { font-weight: 600; }
input[type="email"] {
  font: inherit; padding: 12px; border: 1px solid var(--okraj); border-radius: 8px; width: 100%;
}
.tlacitko {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--zluta); color: var(--modra); border: 0; border-radius: 8px; padding: 12px 20px;
}
.tlacitko:hover { filter: brightness(0.95); }
.tlacitko-svetle { background: transparent; color: var(--bila); border: 1px solid var(--bila); padding: 8px 14px; }
.oznameni { background: #e8f0ff; border-left: 4px solid var(--modra); padding: 8px 12px; margin: 0 0 16px; }
.stitek { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--sedy-text); margin: 0 0 4px; }
.poznamka { color: var(--sedy-text); font-size: 0.9rem; }
.prazdny-stav {
  margin-top: 20px; padding: 20px; border: 2px dashed var(--okraj); border-radius: 12px;
  background: #fafbfd; color: var(--sedy-text);
}
.paticka { text-align: center; color: var(--sedy-text); font-size: 0.85rem; padding: 16px; }
@media (max-width: 480px) {
  .karta { padding: 18px; }
  h1 { font-size: 1.3rem; }
  .tlacitko { width: 100%; text-align: center; }
  .tlacitko-svetle { width: auto; }
}