:root {
  --pozadi: #f4f5f7; --karta: #ffffff; --text: #1b2433; --tlumene: #667085; --linka: #e3e6ec;
  --hlavni: #14233c; --akcent: #b8924a; --akcent-svetly: #f6efe2;
  --ok: #1f7a4d; --ok-pozadi: #e7f5ee; --chyba: #b42318; --chyba-pozadi: #fdecea; --varovani: #8a5a00; --varovani-pozadi: #fff6e0;
  --info: #1f4e8a; --info-pozadi: #e9f1fb; --zaobleni: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pozadi); color: var(--text); font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body.stred { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; } h2 { font-size: 1.1rem; margin: 0; } h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
small, .tlumene { color: var(--tlumene); }
a { color: var(--hlavni); }

.hlavicka { background: var(--hlavni); color: #fff; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hlavicka .tlumene { color: #c9d1de; } .hlavicka .odkaz { color: #fff; margin-left: 16px; }
.znacka { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.znacka small { display: block; font-size: .8rem; opacity: .8; }
.logo { width: 38px; height: 38px; border-radius: 9px; background: var(--akcent); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .5px; }
.prihlaseni .znacka { margin-bottom: 1.25rem; } .prihlaseni .znacka small { color: var(--tlumene); }

.obsah { max-width: 880px; margin: 24px auto; padding: 0 16px; display: grid; gap: 20px; }
.karta { background: var(--karta); border: 1px solid var(--linka); border-radius: var(--zaobleni); padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.karta.prihlaseni { width: 100%; max-width: 400px; }
.radek { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: .75rem; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 500; }
input, select, textarea { font: inherit; color: inherit; border: 1px solid #cfd4dc; border-radius: 8px; padding: 9px 11px; background: #fff; width: 100%; }
input[type=radio], input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
details summary { cursor: pointer; color: var(--tlumene); margin-bottom: 8px; }
details[open] { display: grid; gap: 14px; }

fieldset.volby { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
fieldset.volby legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.volba { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--linka); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-weight: 400; }
.volba:has(input:checked) { border-color: var(--akcent); background: var(--akcent-svetly); }
.volba b { display: block; } .volba small { display: block; }
.volba input { margin-top: 4px; }
.radek-volby { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.volba.mala { padding: 8px 12px; align-items: center; } .volba.mala input { margin-top: 0; }

.tlacitko { font: inherit; font-weight: 600; border: 1px solid var(--hlavni); color: var(--hlavni); background: #fff; border-radius: 8px; padding: 10px 18px; cursor: pointer; justify-self: start; }
.tlacitko.hlavni { background: var(--hlavni); color: #fff; }
.tlacitko.maly { padding: 5px 12px; font-size: .85rem; }
.tlacitko:disabled { opacity: .55; cursor: wait; }
.odkaz { text-decoration: none; } .zpet { display: inline-block; margin-bottom: 12px; }

.hlaska { padding: 10px 14px; border-radius: 8px; margin: 0; }
.hlaska.chyba { background: var(--chyba-pozadi); color: var(--chyba); }
.hlaska.info { background: var(--info-pozadi); color: var(--info); }
.hlaska.varovani { background: var(--varovani-pozadi); color: var(--varovani); }
.hlaska ul { margin: 6px 0 0; padding-left: 18px; }

.seznam { display: grid; gap: 6px; }
.polozka { display: grid; grid-template-columns: 150px 1fr; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--linka); border-radius: 10px; text-decoration: none; color: inherit; }
.polozka:hover { border-color: var(--akcent); }
.polozka .stitek { grid-row: span 2; align-self: center; justify-self: start; }
.polozka .nazev { font-weight: 600; }
.polozka .tlumene { font-size: .85rem; }

.stitek { display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--info-pozadi); color: var(--info); white-space: nowrap; }
.stitek.s-hotovo { background: var(--ok-pozadi); color: var(--ok); }
.stitek.s-chyba, .stitek.s-neshoda { background: var(--chyba-pozadi); color: var(--chyba); }
.stitek.s-specifikace, .stitek.s-otazky { background: var(--varovani-pozadi); color: var(--varovani); }

.detail-hlavicka { margin-bottom: 16px; } .detail-hlavicka h1 { margin-bottom: .2rem; } .detail-hlavicka p { margin: 0 0 .5rem; }
pre { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; }
pre.specifikace { background: #f8f9fb; border: 1px solid var(--linka); border-radius: 8px; padding: 14px; margin: 8px 0 12px; }
.info-blok { display: grid; gap: 4px; margin-bottom: 16px; }
.info-blok pre { background: #f8f9fb; border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.html-blok { border-top: 1px solid var(--linka); padding-top: 10px; } .html-blok p { margin: 0 0 4px; }
.souhrn li.pozor { color: var(--varovani); font-weight: 500; }
.soubory li { margin: 4px 0; }

.cekani { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--info-pozadi); border-radius: 10px; color: var(--info); }
.cekani p { margin: 0; }
.kolecko { width: 26px; height: 26px; flex: none; border: 3px solid #c7d7ee; border-top-color: var(--info); border-radius: 50%; animation: tocit 1s linear infinite; }
@keyframes tocit { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .karta { padding: 18px; } .hlavicka { padding: 12px 16px; }
  .polozka { grid-template-columns: 1fr; } .polozka .stitek { grid-row: auto; }
}