/* Wiki ELSPOL. Rozloženie a typografia podľa Notionu, akcenty podľa brand manuálu ELSPOL. */
:root {
  --zlta: #FFE100;
  --modra: #3C2DB4;
  --polnoc: #1A1441;

  --pozadie: #ffffff;
  --panel: #f7f7f5;
  --hover: rgba(55, 53, 47, .06);
  --hover-silny: rgba(55, 53, 47, .1);
  --aktivny: rgba(55, 53, 47, .08);
  --text: rgb(55, 53, 47);
  --text-panel: rgb(95, 94, 91);
  --tlmeny: rgba(55, 53, 47, .5);
  --ciara: rgba(55, 53, 47, .09);
  --ciara-silna: rgba(55, 53, 47, .16);
  --akcent: #2383e2;
  --vyber: rgba(35, 131, 226, .14);
  --callout: rgb(241, 241, 239);
  --kod: rgba(135, 131, 120, .15);
  --kod-text: #eb5757;
  --chyba: #d44c47;
  --tien: rgba(15, 15, 15, .05) 0 0 0 1px, rgba(15, 15, 15, .1) 0 3px 6px, rgba(15, 15, 15, .2) 0 9px 24px;

  --tag-gray: rgba(227, 226, 224, .5); --tag-brown: rgb(238, 224, 218); --tag-orange: rgb(250, 222, 201);
  --tag-yellow: rgb(253, 236, 200); --tag-green: rgb(219, 237, 219); --tag-blue: rgb(211, 229, 239);
  --tag-purple: rgb(232, 222, 238); --tag-pink: rgb(245, 224, 233); --tag-red: rgb(255, 226, 221);
  --tag-text: rgb(50, 48, 44);

  --pismo: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pozadie: #191919;
    --panel: #202020;
    --hover: rgba(255, 255, 255, .055);
    --hover-silny: rgba(255, 255, 255, .09);
    --aktivny: rgba(255, 255, 255, .07);
    --text: rgba(255, 255, 255, .81);
    --text-panel: rgba(255, 255, 255, .6);
    --tlmeny: rgba(255, 255, 255, .45);
    --ciara: rgba(255, 255, 255, .09);
    --ciara-silna: rgba(255, 255, 255, .16);
    --akcent: #529cca;
    --vyber: rgba(82, 156, 202, .25);
    --callout: rgb(37, 37, 37);
    --kod: rgba(135, 131, 120, .15);
    --kod-text: #ff7369;
    --tien: rgba(0, 0, 0, .2) 0 0 0 1px, rgba(0, 0, 0, .3) 0 3px 6px, rgba(0, 0, 0, .4) 0 9px 24px;
    --tag-gray: rgb(55, 55, 55); --tag-brown: rgb(68, 42, 30); --tag-orange: rgb(92, 59, 35);
    --tag-yellow: rgb(86, 67, 40); --tag-green: rgb(36, 61, 48); --tag-blue: rgb(20, 58, 78);
    --tag-purple: rgb(60, 45, 73); --tag-pink: rgb(78, 44, 60); --tag-red: rgb(82, 46, 42);
    --tag-text: rgba(255, 255, 255, .88);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--pozadie); color: var(--text); font: 16px/1.5 var(--pismo);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.tlmene { color: var(--tlmeny); }
::selection { background: var(--vyber); }

/* ---------------- prihlásenie */
.prihlasenie { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.prihlasenie-karta { width: 100%; max-width: 320px; }
.prihlasenie-karta .logo-velke { font-size: 30px; font-weight: 700; margin-bottom: 4px; display: flex; gap: 10px; align-items: center; }
.prihlasenie-karta label { display: block; font-size: 12px; color: var(--tlmeny); margin-top: 14px; font-weight: 500; }
.prihlasenie-karta input { display: block; width: 100%; margin-top: 4px; }
.prihlasenie-karta .tlacidlo { width: 100%; margin-top: 20px; justify-content: center; }
.logo-znak {
  display: inline-flex; width: 22px; height: 22px; border-radius: 5px; align-items: center; justify-content: center;
  background: var(--polnoc); color: var(--zlta); font-weight: 800; font-size: 12px; flex: none;
}
.prihlasenie-karta .logo-znak { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], select, textarea {
  padding: 6px 10px; border: 0; border-radius: 6px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--ciara-silna);
  outline: none; min-width: 0; font-size: 14px; line-height: 1.5;
}
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--akcent), 0 0 0 3px var(--vyber); }

.tlacidlo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; border: 0;
  box-shadow: inset 0 0 0 1px var(--ciara-silna); background: transparent; cursor: pointer; font-size: 14px;
  font-weight: 500; white-space: nowrap; line-height: 1.4;
}
.tlacidlo:hover { background: var(--hover); }
.tlacidlo.hlavne { background: var(--akcent); box-shadow: none; color: #fff; }
.tlacidlo.hlavne:hover { filter: brightness(.94); }
.tlacidlo.nebezpecne { color: var(--chyba); }
.tlacidlo.male { padding: 3px 8px; font-size: 13px; }
.tlacidlo.ciste { box-shadow: none; color: var(--tlmeny); }
.ikona-tl {
  border: 0; background: transparent; cursor: pointer; border-radius: 5px; min-width: 28px; height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tlmeny); font-size: 14px; gap: 4px;
}
.ikona-tl:hover { background: var(--hover-silny); color: var(--text); }
.ikona-tl svg { width: 18px; height: 18px; }
.chyba { background: rgba(212, 76, 71, .1); color: var(--chyba); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-top: 12px; }

/* ---------------- rozloženie */
.appka { display: flex; height: 100vh; height: 100dvh; }
.panel {
  width: 248px; flex: none; background: var(--panel); display: flex; flex-direction: column; min-height: 0;
  color: var(--text-panel); font-size: 14px; box-shadow: inset -1px 0 0 var(--ciara);
}
.panel-hlava { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px 8px; }
.pracovisko {
  display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); text-decoration: none;
  padding: 4px 8px; border-radius: 6px; flex: 1; min-width: 0; font-size: 14px;
}
.pracovisko:hover { background: var(--hover-silny); }
.panel-polozka {
  display: flex; width: 100%; gap: 8px; align-items: center; border: 0; background: transparent; min-height: 28px;
  padding: 2px 10px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--text-panel); text-decoration: none;
  font-weight: 500;
}
.panel-polozka:hover { background: var(--hover-silny); }
.panel-polozka .pi { width: 20px; text-align: center; opacity: .8; flex: none; }
.panel-polozka kbd { margin-left: auto; font: 11px var(--pismo); opacity: .6; }
.panel-skupina { padding: 2px 6px; }
.panel-sekcia {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 2px 16px;
  font-size: 12px; font-weight: 500; color: var(--tlmeny);
}
.panel-sekcia .ikona-tl { visibility: hidden; height: 22px; min-width: 22px; }
.panel-sekcia:hover .ikona-tl { visibility: visible; }
.strom { flex: 1; overflow-y: auto; padding: 0 6px 16px; min-height: 0; }
.uzol-riadok {
  display: flex; align-items: center; border-radius: 6px; padding: 0 4px; min-height: 28px; gap: 2px;
  cursor: pointer; color: var(--text-panel); text-decoration: none; font-weight: 500;
}
.uzol-riadok:hover { background: var(--hover-silny); }
.uzol-riadok.aktivny { background: var(--aktivny); color: var(--text); }
.uzol-sipka {
  width: 20px; height: 20px; flex: none; border: 0; background: transparent; border-radius: 4px; padding: 0;
  cursor: pointer; color: var(--tlmeny); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s;
}
.uzol-sipka svg { width: 12px; height: 12px; }
.uzol-sipka:hover { background: var(--hover-silny); }
.uzol-sipka.otvoreny { transform: rotate(90deg); }
.uzol-ikona { width: 22px; text-align: center; flex: none; font-size: 15px; }
.uzol-nazov { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.uzol-plus { visibility: hidden; height: 22px; min-width: 22px; }
.uzol-riadok:hover .uzol-plus { visibility: visible; }
.uzol-deti { padding-left: 12px; }
.uzol-prazdne { padding: 2px 8px 2px 46px; font-size: 13px; color: var(--tlmeny); min-height: 26px; }
.panel-spodok { padding: 6px; }

.hlavna { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.horna-lista { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 45px; flex: none; }
.drobcky { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 14px; overflow: hidden; white-space: nowrap; }
.drobcky a { color: var(--text); text-decoration: none; padding: 2px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.drobcky a:hover { background: var(--hover-silny); }
.drobcky .odd { color: var(--tlmeny); padding: 0 1px; }
.stav-ulozenia { font-size: 14px; color: var(--tlmeny); white-space: nowrap; margin-right: 6px; }
.stav-ulozenia.chyba-stav { color: var(--chyba); }
.akcie { display: flex; gap: 2px; }
.obsah { flex: 1; overflow-y: auto; position: relative; }

/* ---------------- stránka */
.stranka { max-width: 900px; margin: 0 auto; padding: 0 96px 30vh; }
.stranka.siroka { max-width: none; padding: 0 96px 30vh; }
.kos-pruh {
  background: #eb5757; color: #fff; padding: 8px 16px; margin: 0 -96px 0; font-size: 14px;
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.kos-pruh .tlacidlo { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.hlavicka { padding-top: 80px; position: relative; }
.hlavicka.s-ikonou { padding-top: 48px; }
.stranka-ikona {
  font-size: 78px; line-height: 1.1; border: 0; background: transparent; cursor: pointer; padding: 0 4px;
  border-radius: 6px; margin-left: -4px; display: block;
}
.stranka-ikona:hover { background: var(--hover-silny); }
.hlavicka-akcie { display: flex; gap: 4px; min-height: 28px; margin: 8px 0 4px -6px; opacity: 0; transition: opacity .15s; }
.hlavicka:hover .hlavicka-akcie, .hlavicka-akcie:focus-within { opacity: 1; }
.stranka-nazov {
  font-size: 40px; font-weight: 700; line-height: 1.2; border: 0; outline: none; width: 100%; color: var(--text);
  background: transparent; padding: 3px 2px; resize: none; overflow: hidden; display: block; letter-spacing: -.01em;
  font-family: var(--pismo); box-shadow: none !important; border-radius: 0;
}
.stranka-nazov::placeholder { color: var(--text); opacity: .2; }

.vlastnosti { margin: 12px 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ciara); }
.vlastnost { display: flex; align-items: flex-start; min-height: 34px; }
.vlastnost-meno {
  width: 160px; flex: none; color: var(--tlmeny); font-size: 14px; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px; border-radius: 4px; overflow: hidden; white-space: nowrap;
}
.vlastnost-meno .ti { width: 16px; text-align: center; font-size: 13px; opacity: .8; }
.vlastnost-hodnota { flex: 1; min-width: 0; }
.vlastnost-hodnota .bunka { border-radius: 4px; font-size: 14px; white-space: normal; }
.vlastnost-hodnota .bunka:hover { background: var(--hover); }
.meta { font-size: 12px; color: var(--tlmeny); margin: 4px 2px 0; }

.vlozene-databazy { margin-top: 28px; }
.vlozena-db { margin-top: 26px; }
.vlozena-db-nazov { display: inline-flex; gap: 6px; align-items: center; font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; padding: 2px 4px; margin-left: -4px; border-radius: 4px; }
.vlozena-db-nazov:hover { background: var(--hover-silny); }

.podstranky { margin-top: 20px; }
.podstranka {
  display: flex; gap: 6px; padding: 3px 4px; border-radius: 4px; color: var(--text); text-decoration: none;
  align-items: center; margin-left: -4px;
}
.podstranka:hover { background: var(--hover-silny); }
.podstranka .pn { text-decoration: underline; text-decoration-color: var(--ciara-silna); text-underline-offset: 3px; font-weight: 500; }

/* ---------------- editor (Milkdown Crepe) v Notion štýle */
.editor-obal { margin-top: 4px; margin-left: -60px; margin-right: -20px; }
.editor-obal .milkdown {
  --crepe-color-background: var(--pozadie);
  --crepe-color-on-background: var(--text);
  --crepe-color-surface: var(--pozadie);
  --crepe-color-surface-low: var(--panel);
  --crepe-color-on-surface: var(--text);
  --crepe-color-on-surface-variant: var(--tlmeny);
  --crepe-color-outline: var(--tlmeny);
  --crepe-color-primary: var(--akcent);
  --crepe-color-secondary: var(--vyber);
  --crepe-color-on-secondary: var(--text);
  --crepe-color-inverse: var(--text);
  --crepe-color-on-inverse: var(--pozadie);
  --crepe-color-inline-code: var(--kod-text);
  --crepe-color-error: var(--chyba);
  --crepe-color-hover: var(--hover-silny);
  --crepe-color-selected: var(--vyber);
  --crepe-color-inline-area: var(--kod);
  --crepe-font-title: var(--pismo);
  --crepe-font-default: var(--pismo);
  --crepe-font-code: "SFMono-Regular", Menlo, Consolas, monospace;
  --crepe-shadow-1: var(--tien);
  --crepe-shadow-2: var(--tien);
  background: transparent;
}
.editor-obal .milkdown .ProseMirror {
  padding: 4px 20px 60px 60px; font-size: 16px; line-height: 1.5; color: var(--text); min-height: 160px;
}
.editor-obal .milkdown .ProseMirror > * { margin-top: 2px; margin-bottom: 2px; }
.editor-obal .milkdown .ProseMirror p { font-size: 16px; line-height: 1.5; padding: 3px 2px; margin: 1px 0; }
.editor-obal .milkdown .ProseMirror h1 { font-size: 1.875em; font-weight: 700; margin-top: 1.4em; margin-bottom: 4px; line-height: 1.3; padding: 3px 2px; }
.editor-obal .milkdown .ProseMirror h2 { font-size: 1.5em; font-weight: 700; margin-top: 1.1em; margin-bottom: 1px; line-height: 1.3; padding: 3px 2px; }
.editor-obal .milkdown .ProseMirror h3 { font-size: 1.25em; font-weight: 700; margin-top: 1em; margin-bottom: 1px; line-height: 1.3; padding: 3px 2px; }
.editor-obal .milkdown .ProseMirror a { color: inherit; text-decoration: underline; text-decoration-color: var(--ciara-silna); text-underline-offset: 3px; }
.editor-obal .milkdown .ProseMirror a[href^="/p/"] { text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--ciara-silna); cursor: pointer; }
.editor-obal .milkdown .ProseMirror a[href^="/p/"]::before { content: "📄"; font-size: .9em; margin-right: 3px; }
.editor-obal .milkdown .ProseMirror a[href^="/prilohy/"] { font-weight: 500; }
.editor-obal .milkdown .ProseMirror blockquote {
  background: var(--callout); border: 0; border-radius: 4px; padding: 14px 16px 14px 14px; margin: 4px 0; color: var(--text);
}
.editor-obal .milkdown .ProseMirror blockquote p { padding: 0; }
.editor-obal .milkdown .ProseMirror code { background: var(--kod); color: var(--kod-text); border-radius: 4px; padding: .2em .4em; font-size: 85%; }
.editor-obal .milkdown .ProseMirror pre { background: var(--callout); border-radius: 4px; padding: 20px 24px; font-size: 14px; }
.editor-obal .milkdown .ProseMirror pre code { background: none; color: var(--text); padding: 0; }
.editor-obal .milkdown .ProseMirror hr { border: 0; border-top: 1px solid var(--ciara-silna); margin: 14px 0; }
.editor-obal .milkdown .ProseMirror table { font-size: 14px; }
.editor-obal .milkdown .ProseMirror th, .editor-obal .milkdown .ProseMirror td { border-color: var(--ciara-silna) !important; padding: 7px 9px; }
.editor-obal .milkdown .ProseMirror th { background: var(--panel); font-weight: 600; }
.editor-obal .milkdown .ProseMirror img { border-radius: 4px; }
.editor-obal .milkdown .milkdown-block-handle { background: transparent; }
.editor-obal .milkdown .milkdown-block-handle .operation-item:hover { background: var(--hover-silny); }
.editor-nacitava { color: var(--tlmeny); padding: 8px 2px; font-size: 14px; }

/* ---------------- databáza (tabuľka ako v Notione) */
.db-karty { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--ciara); margin-top: 12px; }
.db-karta { display: inline-flex; gap: 6px; align-items: center; padding: 6px 4px; margin-bottom: -1px; font-size: 14px; font-weight: 500; border-bottom: 2px solid var(--text); }
.db-lista { display: flex; gap: 4px; align-items: center; margin-left: auto; padding: 4px 0; }
.db-lista input[type=search] { width: 180px; padding: 3px 8px; font-size: 14px; }
.db-pocet { font-size: 12px; color: var(--tlmeny); margin-right: 6px; }
.db-obal { overflow-x: auto; margin: 0 -96px; padding: 0 96px; }
table.db { border-collapse: collapse; font-size: 14px; min-width: 100%; table-layout: auto; }
table.db th {
  text-align: left; font-weight: 400; color: var(--tlmeny); padding: 0; height: 34px; border-bottom: 1px solid var(--ciara);
  border-right: 1px solid var(--ciara); white-space: nowrap; cursor: pointer; user-select: none; background: var(--pozadie);
  position: sticky; top: 0; z-index: 2; font-size: 14px;
}
table.db th .th-obsah { display: flex; gap: 6px; align-items: center; padding: 0 8px; height: 33px; }
table.db th:hover .th-obsah { background: var(--hover); }
table.db th .typ { font-size: 12px; opacity: .8; width: 14px; text-align: center; }
table.db td { border-bottom: 1px solid var(--ciara); border-right: 1px solid var(--ciara); padding: 0; vertical-align: top; max-width: 360px; min-width: 110px; }
table.db td:last-child, table.db th:last-child { border-right: 0; }
table.db tr:hover td { background: var(--hover); }
.bunka { padding: 6px 8px; min-height: 33px; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 21px; }
.bunka.nazov-bunka { font-weight: 500; display: flex; gap: 6px; align-items: center; min-width: 260px; }
.bunka.nazov-bunka a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--ciara-silna); }
.bunka.nazov-bunka .otvor { margin-left: auto; visibility: hidden; font-size: 12px; font-weight: 500; color: var(--tlmeny); box-shadow: inset 0 0 0 1px var(--ciara-silna); border-radius: 4px; padding: 0 6px; background: var(--pozadie); text-decoration: none; border: 0; }
table.db tr:hover .bunka.nazov-bunka .otvor { visibility: visible; }
.bunka.cislo { text-align: right; font-variant-numeric: tabular-nums; }
.bunka a { color: inherit; }
.bunka-edit { width: 100%; border-radius: 0 !important; box-shadow: inset 0 0 0 2px var(--akcent) !important; padding: 6px 8px !important; background: var(--pozadie) !important; font-size: 14px; }
.db-pridaj { border: 0; background: transparent; color: var(--tlmeny); cursor: pointer; padding: 6px 8px; width: 100%; text-align: left; font-size: 14px; border-bottom: 1px solid var(--ciara); }
.db-pridaj:hover { background: var(--hover); }
.stitok {
  display: inline-flex; align-items: center; padding: 0 6px; border-radius: 3px; font-size: 14px; line-height: 20px; height: 20px;
  margin: 0 4px 0 0; background: var(--tag-gray); color: var(--tag-text); white-space: nowrap;
}
.stitok.gray { background: var(--tag-gray); } .stitok.brown { background: var(--tag-brown); }
.stitok.orange { background: var(--tag-orange); } .stitok.yellow { background: var(--tag-yellow); }
.stitok.green { background: var(--tag-green); } .stitok.blue { background: var(--tag-blue); }
.stitok.purple { background: var(--tag-purple); } .stitok.pink { background: var(--tag-pink); }
.stitok.red { background: var(--tag-red); }
.zaskrt { display: inline-flex; width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--text-panel); vertical-align: -3px; align-items: center; justify-content: center; color: #fff; font-size: 12px; cursor: pointer; }
.zaskrt.ano { background: var(--akcent); box-shadow: none; }
.vyber-zoznam { display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow-y: auto; }
.vyber-moznost { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.vyber-moznost:hover, .vyber-moznost.vybrana { background: var(--hover-silny); }

/* ---------------- plávajúce menu, modal, hláška */
.menu-plavajuce {
  position: fixed; z-index: 60; background: var(--pozadie); border-radius: 8px; box-shadow: var(--tien);
  padding: 6px; min-width: 240px; max-width: min(380px, calc(100vw - 32px)); font-size: 14px;
}
.menu-polozka {
  display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; padding: 5px 8px;
  border-radius: 4px; cursor: pointer; text-align: left; font-size: 14px; min-height: 28px;
}
.menu-polozka:hover { background: var(--hover-silny); }
.menu-polozka.nebezpecne:hover { color: var(--chyba); }
.menu-oddelovac { height: 1px; background: var(--ciara); margin: 4px 0; }
.modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(15, 15, 15, .6); display: flex;
  align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
}
.modal-okno {
  width: 100%; max-width: 620px; background: var(--pozadie); border-radius: 12px; box-shadow: var(--tien);
  max-height: 76vh; overflow-y: auto; padding: 20px;
}
.modal-okno.siroke { max-width: 960px; }
.modal-okno.hladanie-okno { padding: 0; max-width: 680px; }
.modal h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.modal h3 { font-size: 14px; margin: 18px 0 6px; font-weight: 600; }
.modal-paticka { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.hladanie-hlava { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ciara); }
.hladanie-hlava h2 { margin: 0; font-size: 13px; color: var(--tlmeny); font-weight: 500; white-space: nowrap; }
.hladanie-vstup { flex: 1; font-size: 18px !important; padding: 4px 0 !important; background: transparent !important; box-shadow: none !important; }
.hladanie-extra { padding: 8px 12px 0; }
.vysledky { display: flex; flex-direction: column; padding: 6px; max-height: 56vh; overflow-y: auto; }
.vysledok { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); text-decoration: none; cursor: pointer; }
.vysledok.vybrany { background: var(--hover-silny); }
.vysledok-nazov { font-weight: 500; font-size: 14px; }
.vysledok-cesta { font-size: 12px; color: var(--tlmeny); }
.vysledok-ukazka { font-size: 12px; color: var(--tlmeny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vysledky-prazdne { padding: 18px 16px; color: var(--tlmeny); font-size: 14px; }
.emoji-mriezka { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 8px; }
.emoji-mriezka button { font-size: 22px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; padding: 2px; }
.emoji-mriezka button:hover { background: var(--hover-silny); }
.tabulka-jednoducha { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabulka-jednoducha td, .tabulka-jednoducha th { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--ciara); vertical-align: middle; }
.tabulka-jednoducha th { color: var(--tlmeny); font-weight: 500; }
.formular-riadok { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.formular-riadok > input, .formular-riadok > select { flex: 1; min-width: 140px; }
.kod-box { font-family: "SFMono-Regular", Menlo, monospace; font-size: 13px; background: var(--callout); padding: 10px 12px; border-radius: 6px; word-break: break-all; user-select: all; }
.karty-nastaveni { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--ciara); }
.karta-nast { border: 0; background: transparent; padding: 6px 8px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--tlmeny); font-weight: 500; font-size: 14px; margin-bottom: -1px; }
.karta-nast.aktivna { color: var(--text); border-bottom-color: var(--text); }
.verzie-rozlozenie { display: grid; grid-template-columns: 1fr 240px; gap: 0; min-height: 360px; }
.verzie-zoznam { border-left: 1px solid var(--ciara); padding-left: 8px; max-height: 62vh; overflow-y: auto; }
.verzia-polozka { padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.verzia-polozka:hover, .verzia-polozka.vybrana { background: var(--hover-silny); }
.verzia-nahlad { max-height: 62vh; overflow-y: auto; padding-right: 16px; }
.verzia-nahlad .editor-obal { margin-left: -40px; }

.hlaska {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: rgb(47, 47, 47);
  color: #fff; padding: 8px 14px; border-radius: 6px; box-shadow: var(--tien); font-size: 14px; max-width: calc(100vw - 32px);
}
.hlaska.chyba-hlaska { background: var(--chyba); }

/* ---------------- domov */
.domov { padding-top: 72px; }
.domov h1 { font-size: 32px; margin: 0 0 4px; font-weight: 700; text-align: center; }
.domov > p { text-align: center; }
.domov-sekcia { margin-top: 36px; }
.domov-sekcia h2 { font-size: 12px; color: var(--tlmeny); margin: 0 0 8px 2px; font-weight: 500; display: flex; gap: 6px; align-items: center; }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.karta {
  display: flex; flex-direction: column; justify-content: flex-end; height: 128px; border-radius: 12px; color: var(--text); text-decoration: none;
  background: var(--panel); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--ciara);
}
.karta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: var(--hover); }
.karta:hover { box-shadow: inset 0 0 0 1px var(--ciara-silna), rgba(15,15,15,.08) 0 2px 8px; }
.karta .k-ikona { font-size: 26px; position: absolute; top: 24px; left: 14px; }
.karta .k-nazov { font-weight: 600; font-size: 14px; padding: 0 14px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aktivita-riadok { display: flex; gap: 10px; font-size: 14px; padding: 6px 2px; border-bottom: 1px solid var(--ciara); align-items: baseline; }
.aktivita-riadok .kedy { color: var(--tlmeny); width: 104px; flex: none; font-size: 13px; }
.aktivita-riadok a { color: var(--text); text-decoration: none; font-weight: 500; }
.aktivita-riadok a:hover { text-decoration: underline; }
.prazdne { color: var(--tlmeny); padding: 40px 0; text-align: center; }

.len-mobil { display: none; }
.zatemnenie { display: none; }

@media (max-width: 860px) {
  .len-mobil { display: inline-flex; }
  .panel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 86vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--tien);
  }
  .appka.panel-otvoreny .panel { transform: none; }
  .appka.panel-otvoreny .zatemnenie { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(15, 15, 15, .4); }
  .stranka, .stranka.siroka { padding: 0 16px 40vh; }
  .kos-pruh { margin: 0 -16px; }
  .db-obal { margin: 0 -16px; padding: 0 16px; }
  .hlavicka { padding-top: 36px; }
  .hlavicka-akcie { opacity: 1; }
  .stranka-nazov { font-size: 30px; }
  .stranka-ikona { font-size: 56px; }
  .editor-obal { margin-left: -16px; margin-right: -16px; }
  .editor-obal .milkdown .ProseMirror { padding: 4px 16px 60px 16px; }
  .vlastnost-meno { width: 120px; }
  .horna-lista { padding: 0 8px; }
  .drobcky a { max-width: 130px; }
  .verzie-rozlozenie { grid-template-columns: 1fr; }
  .verzie-zoznam { border-left: 0; max-height: 26vh; order: -1; }
  .modal { padding-top: 16px; }
  .db-lista input[type=search] { width: 120px; }
  .aktivita-riadok .kedy { width: 76px; }
}

/* ---------------- Notion bloky v editore */
.editor-obal .milkdown .ProseMirror blockquote.callout {
  display: block; background: var(--callout); border-radius: 4px; padding: 14px 16px 14px 14px;
}
.editor-obal .milkdown .ProseMirror blockquote:not(.callout) {
  background: transparent; border-left: 3px solid currentColor; border-radius: 0; padding: 0 14px; margin: 6px 0;
}
.editor-obal .milkdown li.toggle > .list-item > .label-wrapper,
.editor-obal .milkdown li.toggle .label-wrapper { visibility: hidden; width: 0; }
.editor-obal .milkdown li.toggle:not(.otvoreny) .children > :not(:first-child) { display: none; }
.editor-obal .milkdown li.toggle .children > p:first-child { cursor: pointer; }
.editor-obal .milkdown li.toggle.otvoreny .children > p:first-child { color: var(--text); }
.editor-obal .milkdown p.odkaz-na-db { display: none; }
.vlozena-db-widget { margin: 14px 0 18px; }
.editor-obal .milkdown .ProseMirror .vlozena-db-widget a[href^="/p/"] { border-bottom: 0; font-weight: 500; }
.editor-obal .milkdown .ProseMirror .vlozena-db-widget a[href^="/p/"]::before { content: none; }
.editor-obal .milkdown .ProseMirror .vlozena-db-widget .bunka.nazov-bunka a:first-of-type { border-bottom: 1px solid var(--ciara-silna); }
.editor-obal .milkdown .ProseMirror .vlozena-db-widget table { font-size: 14px; }
.vlozena-db-widget .db-obal { margin: 0; padding: 0; }