:root {
  --pozadie: #f4f6f8; --karta: #fff; --text: #1d2733; --tlmene: #5f6b7a; --okraj: #dde3ea;
  --hlavna: #1f6feb; --hlavna-text: #fff; --cervena: #c62828;
  --online: #1a7f37; --online-bg: #dcf5e3; --offline: #c62828; --offline-bg: #fde4e4;
  --nikdy: #6b7280; --nikdy-bg: #eceff3; --blok: #9a6700; --blok-bg: #fff3cd;
  --kod-bg: #eef2f6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pozadie: #0f141a; --karta: #18202a; --text: #e3e8ee; --tlmene: #95a1b0; --okraj: #2b3644;
    --hlavna: #4c8dff; --cervena: #ff6b6b;
    --online: #4ade80; --online-bg: #143222; --offline: #ff7b7b; --offline-bg: #3a1a1a;
    --nikdy: #a3acb9; --nikdy-bg: #262f3a; --blok: #f5c451; --blok-bg: #3a2f12;
    --kod-bg: #222c38;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--pozadie); color: var(--text); }
a { color: var(--hlavna); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; background: var(--kod-bg); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--kod-bg); padding: .8rem 1rem; border-radius: 6px; overflow-x: auto; font-size: .88em; }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }

.lista { display: flex; align-items: center; gap: 1.2rem; padding: .6rem 1.2rem; background: var(--karta); border-bottom: 1px solid var(--okraj); flex-wrap: wrap; }
.lista .logo { font-weight: 700; text-decoration: none; color: var(--text); }
.lista nav { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1; }
.lista nav a { text-decoration: none; color: var(--tlmene); }
.lista nav a:hover { color: var(--text); }
.lista .ja { display: flex; gap: .8rem; align-items: center; }
.lista .ja form { margin: 0; }

main { max-width: 1100px; margin: 0 auto; padding: 1.4rem 16px 3rem; }
main.uzky { max-width: 440px; padding-top: 3rem; }
main.stredny, .stredny { max-width: 760px; }
.hlavicka { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.hlavicka h1 { margin: 0; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.hlavicka > div { display: flex; gap: .5rem; }

.karta { background: var(--karta); border: 1px solid var(--okraj); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.2rem; }
.karta.prazdne { text-align: center; padding: 2.5rem; }
.mriezka { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.mriezka .karta { margin-bottom: 0; }
.mriezka + .karta { margin-top: 1.2rem; }

label { display: block; margin-bottom: .9rem; font-weight: 500; }
label small, .akcia small { display: block; font-weight: 400; color: var(--tlmene); margin-top: .25rem; }
input, textarea, select { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; color: var(--text); background: var(--pozadie); border: 1px solid var(--okraj); border-radius: 6px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--hlavna); outline-offset: -1px; }
button, .tlacidlo { display: inline-block; font: inherit; font-weight: 500; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--okraj); background: var(--karta); color: var(--text); cursor: pointer; text-decoration: none; }
button:hover, .tlacidlo:hover { border-color: var(--tlmene); }
.hlavne { background: var(--hlavna); border-color: var(--hlavna); color: var(--hlavna-text); }
.hlavne:hover { filter: brightness(1.08); border-color: var(--hlavna); }
.cervene { color: var(--cervena); border-color: var(--cervena); }
button.male { padding: .2rem .55rem; font-size: .85em; }
button.odkaz { border: 0; background: none; padding: 0; color: var(--hlavna); font-weight: 400; }

.hlaska { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--okraj); background: var(--karta); }
.hlaska.ok { background: var(--online-bg); border-color: transparent; }
.hlaska.chyba { background: var(--offline-bg); border-color: transparent; }
.hlaska.varovanie { background: var(--blok-bg); border-color: transparent; }
.hlaska.info { background: var(--nikdy-bg); border-color: transparent; }
.tlmene { color: var(--tlmene); font-size: .92em; }
.chyba-text { color: var(--cervena); }

.suhrn { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.filter b { font-weight: 600; }
.filter.aktivny { border-color: var(--hlavna); box-shadow: inset 0 0 0 1px var(--hlavna); }
#hladaj { flex: 1; min-width: 180px; margin: 0; width: auto; }

.tabulka-obal { overflow-x: auto; background: var(--karta); border: 1px solid var(--okraj); border-radius: 10px; }
.karta .tabulka-obal { border: 0; }
.tabulka { width: 100%; border-collapse: collapse; }
.tabulka th, .tabulka td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--okraj); vertical-align: top; }
.tabulka th { font-size: .82em; text-transform: uppercase; letter-spacing: .03em; color: var(--tlmene); font-weight: 600; }
.tabulka tbody tr:last-child td { border-bottom: 0; }
.tabulka tr.neaktivny { opacity: .55; }
.tabulka .obsah { max-width: 280px; word-break: break-all; }
.tabulka .hex code { word-break: break-all; font-size: .8em; }
.nowrap { white-space: nowrap; }
.akcie-riadok { display: flex; gap: .3rem; flex-wrap: wrap; }
.akcie-riadok form { margin: 0; }

.stav { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.stav::before, .bod { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; display: inline-block; }
.stav.online { color: var(--online); background: var(--online-bg); }
.stav.offline { color: var(--offline); background: var(--offline-bg); }
.stav.nikdy, .stav.odstraneny { color: var(--nikdy); background: var(--nikdy-bg); }
.stav.blokovany { color: var(--blok); background: var(--blok-bg); }
.bod.online { color: var(--online); } .bod.offline { color: var(--offline); } .bod.nikdy { color: var(--nikdy); } .bod.blokovany { color: var(--blok); }

.udaje { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.udaje dt { color: var(--tlmene); }
.udaje dd { margin: 0; }
.akcia { padding: .8rem 0; border-bottom: 1px solid var(--okraj); margin: 0; }
.akcia:last-child { border-bottom: 0; }
.akcia.nebezpecne label { font-weight: 400; }

.nast { width: 100%; border-collapse: collapse; }
.nast th, .nast td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--okraj); }
.nast th { width: 38%; font-weight: 500; color: var(--tlmene); }
code.velke { font-size: 1.05em; font-weight: 600; }
code.heslo, [data-kopiruj] { cursor: copy; }
.skopirovane { outline: 2px solid var(--online); }
.iba-tlac { display: none; }

@media (max-width: 600px) {
  .lista { gap: .6rem; }
  .nast th { width: 45%; }
  .tabulka th, .tabulka td { padding: .5rem .6rem; }
}
@media print {
  :root { --pozadie: #fff; --karta: #fff; --text: #000; --kod-bg: #f0f0f0; color-scheme: light; }
  .lista, .netlac, .hlaska { display: none !important; }
  .iba-tlac { display: block; }
  span.iba-tlac { display: inline; }
  main { padding: 0; max-width: none; }
  body { font-size: 12px; }
  code.heslo { font-size: 1.3em; border: 1px solid #000; }
}
.qr { margin: .8rem 0; }
.qr img { background: #fff; padding: 8px; border-radius: 8px; display: block; }
.kroky li { margin-bottom: .8rem; }
input.kod { font-size: 1.4rem; letter-spacing: .2em; max-width: 14rem; font-family: ui-monospace, Consolas, monospace; }
.zalozne { columns: 2; list-style: none; padding: 0; font-size: 1.1rem; }
.zalozne li { margin-bottom: .4rem; }
.hlaska.varovanie a { font-weight: 600; }