:root { --pozadi: #f6f2ea; --text: #2b2620; --tlumeny: #6f665a; --akcent: #7a4f2a; --karta: #fffdf8; --okraj: #e2d9c8; }
@media (prefers-color-scheme: dark) {
  :root { --pozadi: #1d1a16; --text: #ece5d8; --tlumeny: #a89e8f; --akcent: #d9a46c; --karta: #26221d; --okraj: #3a342c; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--pozadi); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 30px; }
a { color: var(--akcent); }

.karta { width: min(360px, 100%); background: var(--karta); border: 1px solid var(--okraj); border-radius: 14px; padding: 28px; }
.uvod { color: var(--tlumeny); margin: 0 0 20px; }
.chyba { color: #b3261e; margin: 0 0 12px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--tlumeny); }
input { font: inherit; padding: 10px 12px; border: 1px solid var(--okraj); border-radius: 8px; background: var(--pozadi); color: var(--text); }
button { font: inherit; font-weight: 600; padding: 11px; border: 0; border-radius: 8px; background: var(--akcent); color: #fff; cursor: pointer; }

.rozcestnik { width: min(720px, 100%); }
.rozcestnik header { margin-bottom: 24px; }
.rozcestnik .kdo { color: var(--tlumeny); }
.odhlasit { display: inline; }
.odhlasit button { font: inherit; font-weight: normal; padding: 0; background: none; color: var(--akcent); text-decoration: underline; cursor: pointer; }
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.dlazdice a { display: grid; gap: 6px; padding: 24px; text-decoration: none; color: var(--text);
  background: var(--karta); border: 1px solid var(--okraj); border-radius: 14px; transition: border-color .15s; }
.dlazdice a:hover { border-color: var(--akcent); }
.nazev { font-family: Georgia, "Times New Roman", serif; font-size: 21px; color: var(--akcent); }
.popis { color: var(--tlumeny); font-size: 14px; }