/* Portál Sutra — jeden soubor bez sestavování, bez inline stylů (CSP). Směr „tichý stůl“ (DEC-SRV-121): postranní panel a lišta na
   počítači, spodní záložky a lepivý pruh akcí na telefonu, skupiny místo karet, systémové písmo, teplé neutrály s jedním akcentem.
   Mobil od začátku (DEC-SRV-49 bod 5), světlý i tmavý režim, kontrast AA. */

/* --- tokeny --- */
:root {
  --bg: #F4F2ED; --surface: #FFFFFF; --surface-2: #F7F5F0; --text: #1D1C1A; --muted: #6A665F; --hair: rgba(29, 28, 26, .12);
  --accent: #1C7F7C; --accent-ink: #FFFFFF; --accent-soft: rgba(28, 127, 124, .12);
  --warn: #B85A12; --warn-soft: rgba(208, 106, 28, .14); --danger: #B3261E; --ok: #2B7F47; --ok-soft: rgba(47, 143, 78, .13);
  --img-bg: #E9E6DF; --radius: 12px; --radius-s: 8px;
  --shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 10px 28px -20px rgba(0, 0, 0, .35);
  --lista-v: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1917; --surface: #232220; --surface-2: #2A2927; --text: #ECE9E3; --muted: #A8A39A; --hair: rgba(236, 233, 227, .12);
    --accent: #5CC1BD; --accent-ink: #0F1F1E; --accent-soft: rgba(92, 193, 189, .16);
    --warn: #F39A55; --warn-soft: rgba(240, 138, 60, .16); --danger: #FF8A80; --ok: #7CCB96; --ok-soft: rgba(108, 196, 138, .16);
    --img-bg: #121110; --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 28px -20px rgba(0, 0, 0, .8);
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* --- základ --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text);
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 16px; }
p { margin: 0 0 .75em; }
.tlumene { color: var(--muted); }
.chyba { color: var(--danger); }
.kod, .otisk { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.drobne, .drobne li { font-size: 13.5px; }
.jen-telefon { display: none; }

/* --- kostra --- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.app.bez-panelu { grid-template-columns: minmax(0, 1fr); }
.app.bez-panelu main { margin-inline: auto; }  /* bez panelu (přihlášení, pozvánka) obsah na střed i nad 76rem */
.bocni { position: sticky; top: 0; height: 100vh; padding: 18px 12px 14px; border-right: 1px solid var(--hair); display: flex; flex-direction: column;
         gap: 2px; background: var(--bg); overflow-y: auto; }
.znacka { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: var(--text); font-weight: 700; font-size: 17px; }
.znacka:hover { text-decoration: none; }
.mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
        font-size: 15px; font-weight: 800; flex: none; }
.bocni nav { display: flex; flex-direction: column; gap: 2px; }
.bocni nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-s); color: var(--text);
               font-size: 14px; }
.bocni nav a:hover { background: var(--surface-2); text-decoration: none; }
.bocni nav a.aktivni { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.bocni nav svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.bocni .sekce { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 16px 10px 6px; }
.pocet { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: 11px; line-height: 16px; padding: 0 7px;
         font-weight: 700; }
.ja { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.ja .kdo { min-width: 0; overflow: hidden; }
.ja .jmeno { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ja .role { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
          font-weight: 700; font-size: 12px; flex: none; }
.rodina { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.rodina img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.rodina a { color: var(--muted); }
form.odhlasit { margin: 0; margin-left: auto; }
button.odkaz { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; min-height: 32px; }
button.odkaz:hover { text-decoration: underline; }
.obsah { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.lista { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; min-height: var(--lista-v); padding: 8px 32px;
         border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px);
         -webkit-backdrop-filter: blur(14px); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .lista, .zalozky, .akcni-pruh { background: var(--bg); } }
.lista-titul { font-weight: 650; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drobek { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.drobek a { color: var(--muted); }
.lista-akce { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.zpet { display: none; }
main { padding: 24px 32px 56px; max-width: 76rem; width: 100%; flex: 1; }
.paticka { padding: 16px 32px 24px; font-size: 12px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.paticka a { color: var(--muted); }
.zalozky { display: none; }

/* --- hlava stránky --- */
.hlava { margin: 2px 0 20px; }
.hlava h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.hlava .meta { white-space: normal; }
.hlava .stitky { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* --- skupiny (macOS „inset grouped“) a řádky --- */
.nadpis-skupiny { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
                  margin: 0 0 8px 4px; font-weight: 600; }
.nadpis-skupiny .n { font-weight: 500; opacity: .85; }
.skupina, .karta { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
                   margin-bottom: 22px; }
.karta { padding: 14px 16px; }
.karta h1 { font-size: 20px; margin-bottom: 8px; }
.karta h2 { margin: 14px 0 8px; }
.karta h2:first-child { margin-top: 0; }
.uzka { max-width: 26rem; margin: 6vh auto 2rem; }
.blok { padding: 14px 16px; }
.blok h2 { margin: 0 0 10px; }
.blok + .blok { border-top: 1px solid var(--hair); }
.seznam { list-style: none; padding: 0; margin: 0; }
.seznam li { padding: 10px 16px; border-top: 1px solid var(--hair); }
.seznam li:first-child { border-top: 0; }
.radek { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hair);
         color: inherit; min-height: 56px; }
.radek.bez-nahledu { grid-template-columns: minmax(0, 1fr) auto; }
.radek:first-child, .seznam li:first-child .radek { border-top: 0; }
a.radek:hover { background: var(--surface-2); text-decoration: none; }
.seznam li:has(> .radek) { padding: 0; }
.mini { width: 52px; height: 52px; border-radius: var(--radius-s); object-fit: cover; background: var(--img-bg); display: block; }
.bez { width: 52px; height: 52px; border-radius: var(--radius-s); background: var(--img-bg); display: grid; place-items: center; color: var(--muted);
       font-size: 11px; text-align: center; line-height: 1.2; }
.titul { font-weight: 600; display: block; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 13px; display: block; overflow-wrap: anywhere; }
.duvod { font-size: 13.5px; margin-top: 2px; display: block; overflow-wrap: anywhere; }
.vpravo { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sipka { color: var(--muted); opacity: .6; font-size: 18px; line-height: 1; }
.prazdne { padding: 28px 16px; color: var(--muted); text-align: center; }
.udaje { margin: 0; padding: 2px 16px; }
.udaje div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.udaje div:first-child { border-top: 0; }
.udaje dt { color: var(--muted); }
.udaje dd { margin: 0; overflow-wrap: anywhere; }
.poznamka { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.poznamka b { color: var(--text); font-weight: 600; }
.kontrola { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.tecka { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.tecka.pozor { background: var(--warn); }
.tecka.spatne { background: var(--danger); }

/* --- štítky --- */
.stitek { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 99px;
          background: var(--accent-soft); color: var(--accent); white-space: nowrap; line-height: 1.3; vertical-align: middle; }
.stitek::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.stitek.returned, .stitek.vraceno, .stitek.varovani { background: var(--warn-soft); color: var(--warn); }
.stitek.navrh, .stitek.tichy { background: var(--surface-2); color: var(--muted); border: 1px solid var(--hair); }
.stitek.tichy::before { display: none; }
.stitek.ok { background: var(--ok-soft); color: var(--ok); }

/* --- tlačítka --- */
.tl, button.hlavni, button.druha { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
      border-radius: 9px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 14px;
      cursor: pointer; text-decoration: none; }
.tl:hover, button.druha:hover { background: var(--surface-2); text-decoration: none; }
.tl.hlavni, button.hlavni { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.tl.hlavni:hover, button.hlavni:hover { filter: brightness(1.06); background: var(--accent); }
.tl.druha, button.druha { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.tl.druha:hover, button.druha:hover { background: var(--accent-soft); filter: brightness(.97); }
.tl.siroky, button.hlavni, button.druha { width: 100%; min-height: 44px; font-size: 15px; }
.tl.maly { min-height: 32px; padding: 0 12px; font-size: 13px; }
.akce form + form, .akce details + form, .akce form + details { margin-top: 12px; }
.akce .tl, .akce button.hlavni, .akce button.druha { margin-top: 12px; }

/* --- formuláře --- */
label { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
input, select, textarea { display: block; width: 100%; font: inherit; font-size: 15px; font-weight: 400; color: var(--text); padding: 9px 11px; margin-top: 5px;
                          border: 1px solid var(--hair); border-radius: 9px; background: var(--surface); min-height: 42px; }
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
         background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { display: inline-block; width: 18px; height: 18px; min-height: 0; margin: 0 6px 0 0; padding: 0; accent-color: var(--accent);
                                          vertical-align: -3px; }
input[type=file] { padding: 8px 11px; font-size: 14px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; padding: 6px 12px; margin-right: 10px; border-radius: 7px;
                                         border: 1px solid var(--hair); background: var(--surface-2); color: var(--text); cursor: pointer; }
input[type=hidden] { display: none; }
fieldset.schopnosti { border: 1px solid var(--hair); border-radius: 9px; margin: 12px 0 0; padding: 8px 12px 10px; }
fieldset.schopnosti legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 4px; }
fieldset.schopnosti label { display: inline-flex; align-items: center; gap: 4px; margin: 4px 14px 4px 0; font-weight: 400; color: var(--text); font-size: 14px; }
.tajemstvi { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border: 1px dashed var(--hair); border-radius: 9px; user-select: all;
             font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--surface-2); margin: 0 0 10px; }
details.pridat { border-top: 1px solid var(--hair); }
details.pridat > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--accent); display: flex;
                           align-items: center; gap: 8px; min-height: 44px; }
details.pridat > summary::-webkit-details-marker { display: none; }
details.pridat > summary::before { content: "+"; font-size: 18px; line-height: 1; width: 18px; text-align: center; }
details.pridat[open] > summary::before { content: "–"; }
details.pridat > form, details.pridat > .blok { padding: 0 16px 16px; }
form.radek { display: inline; margin: 0; padding: 0; border: 0; min-height: 0; }
.akce-radek { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* --- dva sloupce (detail) --- */
.dve { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.dve.vyrovnane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lepi { position: sticky; top: calc(var(--lista-v) + 20px); }
.nahled { width: 100%; max-height: 62vh; object-fit: contain; background: var(--img-bg); border-radius: var(--radius); display: block; }
.nahled-prazdny { aspect-ratio: 4 / 3; max-height: 40vh; border-radius: var(--radius); background: var(--img-bg); display: grid; place-items: center;
                  color: var(--muted); font-size: 14px; text-align: center; padding: 16px; border: 1px dashed var(--hair); }
.nahled-prazdny + .skupina { margin-top: 14px; }  /* „Nahrát náhled“ pod prázdným náhledem (detail k verdiktu) */
.nahled + .drobne { margin: 8px 0 14px; }  /* štítek ověřený / neověřený náhled */
details.vratit > summary { list-style: none; cursor: pointer; }
details.vratit > summary::-webkit-details-marker { display: none; }
.akcni-pruh { display: none; }

/* --- fronta a stará jména tříd --- */
.fronta .polozka { color: inherit; }
.stitek.verdict { background: var(--accent-soft); color: var(--accent); }

/* --- čtení (dokument, profil brandu, soukromí) --- */
.cteni { display: grid; grid-template-columns: 208px minmax(0, 44rem); gap: 40px; align-items: start; }
.obsah-doc { position: sticky; top: calc(var(--lista-v) + 20px); font-size: 13px; max-height: calc(100vh - var(--lista-v) - 40px); overflow-y: auto; }
.obsah-doc .nadpis-skupiny { margin-left: 0; margin-top: 22px; }
.obsah-doc .nadpis-skupiny:first-child { margin-top: 0; }
.obsah-doc a, .obsah-doc span.polozka { display: block; padding: 4px 0 4px 10px; color: var(--muted); border-left: 2px solid var(--hair); }
.obsah-doc a.aktivni, .obsah-doc span.aktivni { color: var(--accent); border-left-color: var(--accent); }
.obsah-doc a.l3 { padding-left: 22px; }
.obsah-doc form { margin: 0; }
.obsah-doc button.odkaz { display: block; padding: 4px 0 4px 10px; border-left: 2px solid var(--hair); text-align: left; width: 100%; min-height: 0; font-size: 13px; }
details.obsah-tel { display: none; }
.doc-hlava { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 20px; }
.doc-hlava .meta { white-space: normal; }
.prosa, .dokument { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.prosa h1, .dokument h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
.prosa h2, .dokument h2 { font-size: 21px; margin: 1.5em 0 .5em; }
.prosa h3, .dokument h3 { font-size: 17px; margin: 1.3em 0 .4em; }
.prosa p, .prosa ul, .prosa ol, .dokument p, .dokument ul, .dokument ol { margin: 0 0 1em; }
.prosa blockquote, .dokument blockquote { margin: 1em 0; padding: 2px 16px; border-left: 3px solid var(--accent-soft); color: var(--muted); }
.prosa table, .dokument table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1em 0; display: block; overflow-x: auto; }
.prosa th, .dokument th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.prosa th, .prosa td, .dokument th, .dokument td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prosa tbody tr:nth-child(even) td, .dokument tbody tr:nth-child(even) td { background: var(--surface-2); }
.prosa pre, .dokument pre { white-space: pre-wrap; font-size: 13px; background: var(--surface-2); padding: 12px; border-radius: 9px; }
.prosa code, .dokument code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.prosa img, .dokument img { max-width: 100%; height: auto; }
.karta.dokument { padding: 24px 28px; font-size: 16px; }
.karta.dokument h1 { font-size: 26px; }
.verze { margin: 0; padding: 2px 16px; }
.verze div { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; align-items: center; }
.verze div:first-child { border-top: 0; }
.verze dd { margin: 0; overflow-wrap: anywhere; }
details.sklad { border-top: 1px solid var(--hair); }
details.sklad > summary { padding: 12px 16px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.rozdil { margin: 0; padding: 0 16px 14px; font-size: 12.5px; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; color: var(--muted); overflow-x: auto; }
pre.rozdil.profil { padding: 0; color: var(--text); font-size: 13px; }
.exporty, .tlacitka { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- profil brandu (rozbalovací oddíly) --- */
details.oddil { border-top: 1px solid var(--hair); }
details.oddil:first-of-type { border-top: 0; }
details.oddil > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; }
details.oddil > summary::-webkit-details-marker { display: none; }
details.oddil > summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; transform: rotate(90deg); transition: transform .15s; }
details.oddil[open] > summary::after { transform: rotate(-90deg); }
details.oddil > summary .meta { font-weight: 400; }
details.oddil > .telo { padding: 0 16px 18px; }
details.oddil > .telo.prosa { font-size: 16px; }

/* --- projekty (seznam napříč brandy, filtr podle brandu bez JavaScriptu) --- */
.filtr-odkazy { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filtr-odkazy a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--hair);
                  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.filtr-odkazy a:hover { background: var(--surface-2); text-decoration: none; }
.filtr-odkazy a.aktivni { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.meta .brand-projektu { color: var(--text); font-weight: 500; }

/* --- karta projektu, pokrytí, podklady --- */
.pokryti li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.pokryti .radky { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
.pokryti .radky b { color: var(--text); font-weight: 500; }
.pokryti .radky .vraceno { color: var(--warn); }
.podklady li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.podklady li.bez-miniatury { grid-template-columns: minmax(0, 1fr); }
.miniatura { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; border: 1px solid var(--hair); background: var(--img-bg); }

/* --- lidé a práva, roboti --- */
.lide li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.lide li .stitky { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.lide li .akce-radek { grid-column: 1 / -1; }
.osoba { display: flex; align-items: center; gap: 10px; min-width: 0; }
.osoba .avatar { width: 34px; height: 34px; }

/* --- galerie póz --- */
.galerie { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 12px; }
.galerie li { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow); }
.galerie li:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.galerie label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 400; color: var(--text); cursor: pointer; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--img-bg); display: block; }
.galerie .bez-nahledu { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border: 1px dashed var(--hair); border-radius: 8px;
                        color: var(--muted); }
.galerie .popis { display: flex; align-items: center; gap: 6px; padding: 0 4px; min-height: 28px; }
.galerie .popis .meta { font-size: 12.5px; }
.galerie .pozn { font-size: 12px; color: var(--warn); padding: 0 4px 4px; }
.filtr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.filtr label { margin: 0; }
.filtr .tl { margin-bottom: 1px; }

/* --- přihlášení --- */
.prihlaseni { min-height: calc(100vh - 120px); display: grid; place-items: center; }
.prihlaseni .karta { width: 100%; max-width: 24rem; padding: 26px 24px 24px; margin: 0; }
.prihlaseni .znacka { padding: 0 0 18px; font-size: 20px; }
.prihlaseni .tl, .prihlaseni button.hlavni { margin-top: 18px; }
.prihlaseni form + form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.prihlaseni .karta h1 { font-size: 20px; }
/* „Přihlásit přes Microsoft“ podle pravidel značky Microsoft: neutrální světlé tlačítko (v tmavém režimu tmavé), hranaté, logo čtyř
   čtverců 21 px vlevo, mezera 12 px, Segoe UI 15 px; barvy tlačítka se nepřebírají z tokenů portálu. */
button.microsoft { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; margin-top: 18px;
                   padding: 0 12px; border: 1px solid #8C8C8C; border-radius: 0; background: #FFFFFF; color: #5E5E5E; cursor: pointer;
                   font: 600 15px/1.2 "Segoe UI", system-ui, -apple-system, sans-serif; }
button.microsoft:hover { background: #F3F3F3; }
button.microsoft svg { width: 21px; height: 21px; flex: none; }
.pod-tlacitkem { margin: 6px 0 0; text-align: center; }
@media (prefers-color-scheme: dark) {
  button.microsoft { background: #2F2F2F; border-color: #2F2F2F; color: #FFFFFF; }
  button.microsoft:hover { background: #3B3B3B; }
}

/* --- telefon --- */
@media (max-width: 899px) {
  body { font-size: 16px; }
  h1 { font-size: 22px; }
  .jen-pocitac { display: none !important; }
  .jen-telefon { display: block; }
  .lista .znacka.jen-telefon { display: inline-flex; padding: 0 4px; font-size: 16px; }
  .app, .app.bez-panelu { display: block; }
  .bocni { display: none; }
  .obsah { min-height: auto; }
  .lista { padding: 8px 12px 8px 8px; gap: 8px; }
  .lista-titul { font-size: 16px; flex: 1; }
  .drobek { display: none; }
  .zpet { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 15px; min-height: 44px; padding: 0 8px; flex: none; max-width: 45%;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zpet:hover { text-decoration: none; }
  main { padding: 16px 16px 24px; }
  .paticka { padding: 8px 16px calc(84px + env(safe-area-inset-bottom)); }
  .s-pruhem .paticka { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .dve, .dve.vyrovnane, .cteni { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lepi { position: static; }
  .obsah-doc { display: none; }
  details.obsah-tel { display: block; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); margin-bottom: 16px; }
  details.obsah-tel > summary { padding: 12px 14px; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
  details.obsah-tel a { display: block; padding: 10px 14px 10px 24px; color: var(--muted); border-top: 1px solid var(--hair); }
  details.obsah-tel a.l3 { padding-left: 36px; }
  .zalozky { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
             border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px);
             -webkit-backdrop-filter: blur(14px); z-index: 6; }
  .zalozky a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; font-size: 11px; color: var(--muted);
               border-radius: 10px; position: relative; }
  .zalozky a:hover { text-decoration: none; }
  .zalozky a.aktivni { color: var(--accent); font-weight: 600; }
  .zalozky svg { width: 22px; height: 22px; }
  .zalozky .pocet { position: absolute; top: 4px; right: calc(50% - 24px); margin: 0; }
  .zalozky form { margin: 0; display: contents; }
  .zalozky button.odkaz { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; font-size: 11px;
                          color: var(--muted); width: 100%; }
  .radek { padding: 12px 14px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mini, .bez { width: 48px; height: 48px; }
  .akcni-pruh { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
                background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
                border-top: 1px solid var(--hair); z-index: 6; }
  .akcni-pruh form { flex: 1; margin: 0; }
  .akcni-pruh .tl, .akcni-pruh button.hlavni, .akcni-pruh button.druha { width: 100%; min-height: 48px; font-size: 16px; margin: 0; }
  .akcni-pruh a.tl { flex: 1; }
  .nahled { max-height: 52vh; }
  .prosa, .dokument { font-size: 17px; }
  .prosa h1, .dokument h1 { font-size: 26px; }
  .karta.dokument { padding: 18px 16px; }
  .udaje div { grid-template-columns: 88px minmax(0, 1fr); }
  .verze div { grid-template-columns: 72px minmax(0, 1fr); }
  .verze div dd:last-child { grid-column: 2; }
  .filtr { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lide li { grid-template-columns: minmax(0, 1fr); }
  .lide li .stitky { justify-content: flex-start; }
  .prihlaseni { min-height: auto; padding-top: 6vh; }
  .uzka { margin-top: 4vh; }
}
@media (pointer: coarse) { button.odkaz { min-height: 44px; padding: 0 6px; } .filtr-odkazy a { min-height: 40px; } .obsah-doc a, details.obsah-tel a { min-height: 44px; display: flex; align-items: center; } }