/* =====================================================================
   Finanční peklo — styly
   KAM: /web/Finraj/assets/app.css   PRÁVA: 644

   Značka: černá, pekelná červená a oheň. Nadpisy těžkým kondenzovaným
   písmem jako v logu, text běžným bezpatkovým.

   Barva nese informaci, ne ozdobu:
     • každá sekce má vlastní barvu (pojištění červená, úvěry oranžová,
       penzijní zlatá, investice zelená, energie modrá) — poznáš typ
       smlouvy dřív, než začneš číst
     • uvnitř smlouvy platí jiná sada: zelená sjednáno, červená výluka,
       oheň termín, který hoří

   Žádné webfonty ani CDN — jen písma, která zařízení už má.
   ===================================================================== */

:root {
  /* značka */
  --cervena:      #E53935;
  --cervena-tmava:#B32B28;
  --ohen:         #FF6B00;

  /* plochy — tmavý režim (výchozí) */
  --pozadi:       #121110;
  --panel:        #1B1A19;
  --panel-vyssi:  #24222180;
  --panel-plny:   #242221;
  --linka:        #322F2D;
  --linka-svetla: #423E3B;

  --text:         #F2F0EE;
  --text-tichy:   #A29C97;
  --text-slaby:   #756E69;

  /* stav */
  --kryto:        #4CC38A;
  --kryto-tlum:   #16281F;
  --vyluka:       #E5544E;
  --vyluka-tlum:  #2C1917;
  --termin:       #FF6B00;
  --termin-tlum:  #2A1B0C;

  /* sekce */
  --s-pojisteni:  #E53935;
  --s-uver:       #FF6B00;
  --s-penzijni:   #E8B93B;
  --s-investice:  #37B87C;
  --s-energie:    #3F9BE0;

  /* písma */
  --pismo-nadpis: Impact, Haettenschweiler, "Arial Narrow Bold",
                  "Franklin Gothic Bold", "Poppins", system-ui, sans-serif;
  --pismo-text:   "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pismo-data:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 10px;
  --r-maly: 6px;
  --sirka: 1080px;
}

html[data-tema="svetle"] {
  --pozadi:       #F5F5F5;
  --panel:        #FFFFFF;
  --panel-vyssi:  #F0EEEC;
  --panel-plny:   #F0EEEC;
  --linka:        #E1DEDB;
  --linka-svetla: #CFCAC6;
  --text:         #1A1918;
  --text-tichy:   #5C5651;
  --text-slaby:   #8A837D;
  --kryto-tlum:   #E4F5EC;
  --vyluka-tlum:  #FBE9E8;
  --termin-tlum:  #FFF0E2;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--pozadi); color: var(--text);
  font: 15.5px/1.6 var(--pismo-text);
}

a { color: var(--cervena); text-decoration: none; }
html[data-tema="svetle"] a { color: var(--cervena-tmava); }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ohen); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- typografie ------------------------------------------------------ */
h1, h2, h3 { margin: 0 0 10px; }
h1 {
  font-family: var(--pismo-nadpis); font-weight: 400;
  font-size: 30px; line-height: 1.08; text-transform: uppercase;
  letter-spacing: .01em; margin: 2px 0 4px;
}
h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 14.5px; font-weight: 650; }
p { margin: 0 0 12px; }

.navesti {
  font: 600 11px/1.4 var(--pismo-text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-slaby); margin-bottom: 4px;
}
.data  { font-family: var(--pismo-data); font-size: 13px; }
.cifra { font-variant-numeric: tabular-nums; }
.tichy { color: var(--text-tichy); }
.slaby { color: var(--text-slaby); }
.male  { font-size: 13px; }
.zelene { color: var(--kryto); }
.cervene { color: var(--vyluka); }
.jantar { color: var(--termin); }

/* --- hlavička -------------------------------------------------------- */
.hlavicka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; padding-top: calc(9px + env(safe-area-inset-top));
  background: #0D0C0B; border-bottom: 2px solid var(--cervena);
  position: sticky; top: 0; z-index: 20;
}
html[data-tema="svetle"] .hlavicka { background: #16100E; }
.znacka { display: flex; align-items: center; gap: 8px; color: #F2F0EE; }
.znacka:hover { text-decoration: none; }
.znacka img { display: block; width: 34px; height: 34px; object-fit: contain; }
.znacka b {
  font-family: var(--pismo-nadpis); font-weight: 400; font-size: 19px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.znacka b i { color: var(--cervena); font-style: normal; }

.ucet { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #A29C97; }
.ucet a { color: #A29C97; }
.ucet .kdo { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stitek {
  font: 600 10px/1 var(--pismo-text); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--linka-svetla); color: var(--text-slaby);
}
.stitek.role-admin { color: var(--ohen); border-color: var(--ohen); }

/* --- navigace -------------------------------------------------------- */
.navigace {
  display: flex; gap: 3px; overflow-x: auto; padding: 8px 12px;
  background: var(--panel); border-bottom: 1px solid var(--linka);
  scrollbar-width: none;
}
.navigace::-webkit-scrollbar { display: none; }
.navigace a, .navigace span {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--text-tichy); white-space: nowrap;
  border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s;
}
.navigace a:hover { background: var(--panel-plny); color: var(--text); text-decoration: none; }
.navigace .zde { color: #fff; }
.navigace .chybi { opacity: .32; cursor: default; }

/* aktivní položka nese barvu své sekce */
.navigace .zde.s-prehled   { background: #4A4644; }
.navigace .zde.s-pojisteni { background: var(--s-pojisteni); }
.navigace .zde.s-uver      { background: var(--s-uver); }
.navigace .zde.s-penzijni  { background: var(--s-penzijni); color: #1A1918; }
.navigace .zde.s-investice { background: var(--s-investice); }
.navigace .zde.s-energie   { background: var(--s-energie); }

/* --- rozvržení ------------------------------------------------------- */
.obsah { max-width: var(--sirka); margin: 0 auto; padding: 20px 15px 70px; }
.zahlavi-stranky {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.list {
  background: var(--panel); border: 1px solid var(--linka);
  border-radius: var(--r); padding: 16px; margin-bottom: 13px;
}
.list > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--linka); }

.pwa-device-grid { display: grid; gap: 13px; }
.pwa-device { margin-bottom: 0; }
.pwa-device-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pwa-device-head h3 { margin-bottom: 3px; }
.pwa-device-head p { margin: 0; }
.pwa-device-rename { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linka); }
.pwa-device-rename .akce, .pwa-device > form:last-child .akce { margin-top: 9px; }
.pwa-revoked { margin-top: 18px; }
.pwa-revoked summary { cursor: pointer; font-weight: 600; }
.pwa-revoked ul { margin: 12px 0 0; padding-left: 20px; }

/* --- zprávy ---------------------------------------------------------- */
.zprava {
  padding: 11px 14px; border-radius: var(--r-maly); margin-bottom: 15px;
  border: 1px solid var(--linka); border-left-width: 4px; background: var(--panel);
}
.zprava.ok       { border-left-color: var(--kryto);  background: var(--kryto-tlum); }
.zprava.chyba    { border-left-color: var(--vyluka); background: var(--vyluka-tlum); }
.zprava.varovani { border-left-color: var(--termin); background: var(--termin-tlum); }

.kod-vypis {
  margin: 0; padding: 13px; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--linka); border-radius: var(--r-maly);
  background: var(--pozadi); color: var(--text-tichy);
  font: 12.5px/1.55 var(--pismo-data); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- prázdný stav ---------------------------------------------------- */
.prazdno {
  text-align: center; padding: 40px 20px; color: var(--text-tichy);
  border: 2px dashed var(--linka-svetla); border-radius: var(--r);
}
.prazdno h3 { font-family: var(--pismo-nadpis); font-weight: 400; font-size: 22px;
  text-transform: uppercase; color: var(--text); letter-spacing: .01em; }

/* --- karty smluv ----------------------------------------------------- */
.smlouvy { display: grid; gap: 9px; }

.karta {
  display: block; background: var(--panel); border: 1px solid var(--linka);
  border-left: 4px solid var(--linka-svetla); border-radius: var(--r-maly);
  padding: 12px 14px; color: var(--text);
  transition: transform .1s ease, background .12s ease;
}
.karta:hover { text-decoration: none; background: var(--panel-plny); transform: translateX(2px); }
.karta.zanikla { opacity: .5; }
.karta .nazev { font-size: 15.5px; font-weight: 650; margin: 2px 0 4px; line-height: 1.3; }
.karta .radka { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; color: var(--text-tichy); }
.karta .castka { margin-left: auto; font-family: var(--pismo-data);
  font-variant-numeric: tabular-nums; color: var(--text); }

/* barva sekce na levém okraji karty i dlaždice */
.s-pojisteni { border-left-color: var(--s-pojisteni); }
.s-uver      { border-left-color: var(--s-uver); }
.s-penzijni  { border-left-color: var(--s-penzijni); }
.s-investice { border-left-color: var(--s-investice); }
.s-energie   { border-left-color: var(--s-energie); }

/* štítek sekce */
.sekce-stitek {
  display: inline-block; font: 600 10px/1 var(--pismo-text);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; color: #fff;
}
.sekce-stitek.s-pojisteni { background: var(--s-pojisteni); }
.sekce-stitek.s-uver      { background: var(--s-uver); }
.sekce-stitek.s-penzijni  { background: var(--s-penzijni); color: #1A1918; }
.sekce-stitek.s-investice { background: var(--s-investice); }
.sekce-stitek.s-energie   { background: var(--s-energie); }

/* karta, které hoří termín */
.karta.hori { background:
  linear-gradient(90deg, var(--termin-tlum), var(--panel) 55%); }

/* --- proužek krytí --------------------------------------------------- */
/* Každý segment = jedno pojistné nebezpečí. */
.prouzek { display: flex; gap: 2px; margin-top: 9px; height: 5px; }
.prouzek i { flex: 1 1 0; min-width: 3px; border-radius: 1px; background: var(--linka-svetla); }
.prouzek i.ano  { background: var(--kryto); }
.prouzek i.vyl  { background: var(--vyluka); }
.prouzek i.nezn { background: repeating-linear-gradient(45deg,
                   var(--linka-svetla) 0 2px, transparent 2px 4px); }
.prouzek-popis { display: flex; gap: 14px; flex-wrap: wrap;
  font: 500 11px/1.6 var(--pismo-text); color: var(--text-slaby); }
.prouzek-popis span::before { content: ''; display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--linka-svetla); }
.prouzek-popis .l-ano::before { background: var(--kryto); }
.prouzek-popis .l-vyl::before { background: var(--vyluka); }

/* --- razítko --------------------------------------------------------- */
.razitko {
  display: inline-block; transform: rotate(-5deg);
  border: 2.5px solid var(--vyluka); color: var(--vyluka);
  padding: 4px 10px; border-radius: 4px;
  font: 400 15px/1.1 var(--pismo-nadpis); letter-spacing: .1em; text-transform: uppercase;
  opacity: .9;
}
.razitko.je-aktivni { border-color: var(--kryto); color: var(--kryto); transform: rotate(-2deg); }

/* --- výluky ---------------------------------------------------------- */
.vyluky {
  border: 1px solid var(--vyluka); border-radius: var(--r);
  background: var(--vyluka-tlum); padding: 15px 16px; margin-bottom: 13px;
}
.vyluky h2 { color: var(--vyluka); border: none; padding: 0;
  font-family: var(--pismo-nadpis); font-weight: 400; font-size: 20px;
  text-transform: uppercase; letter-spacing: .02em; }
.vyluky ul { margin: 0; padding-left: 18px; }
.vyluky li { margin-bottom: 8px; }
.vyluky li:last-child { margin-bottom: 0; }

/* --- řádky krytí ----------------------------------------------------- */
.kryti { display: grid; gap: 8px; }
.kryti-radek {
  border: 1px solid var(--linka); border-left: 4px solid var(--linka-svetla);
  border-radius: var(--r-maly); padding: 11px 13px; background: var(--panel-plny);
}
.kryti-radek.je-ano { border-left-color: var(--kryto); }
.kryti-radek.je-ne  { opacity: .55; }
.kryti-radek.je-vyl { border-left-color: var(--vyluka); }
.kryti-radek .hlava { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.kryti-radek .co { font-weight: 650; }
.kryti-radek dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 8px 0 0; font-size: 13.5px; }
.kryti-radek dt { color: var(--text-slaby); font: 600 10.5px/1.8 var(--pismo-text);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.kryti-radek dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- údaje ----------------------------------------------------------- */
.udaje { display: grid; grid-template-columns: 210px 1fr; margin: 0; }
.udaje dt { color: var(--text-slaby); padding: 9px 0; border-bottom: 1px solid var(--linka);
  font: 600 10.5px/1.8 var(--pismo-text); letter-spacing: .1em; text-transform: uppercase; }
.udaje dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--linka);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .udaje { grid-template-columns: 1fr; }
  .udaje dt { padding: 10px 0 0; border: none; }
  .udaje dd { padding-top: 1px; }
}

/* --- dlaždice -------------------------------------------------------- */
.dlazdice { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.dlazdice a, .dlazdice div {
  background: var(--panel-plny); border: 1px solid var(--linka);
  border-left: 4px solid var(--linka-svetla); border-radius: var(--r-maly);
  padding: 12px 13px; color: var(--text); display: block;
  transition: background .12s ease;
}
.dlazdice a:hover { background: var(--panel); text-decoration: none; }
.dlazdice .pocet { display: block; font-family: var(--pismo-nadpis); font-weight: 400;
  font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dlazdice .co { font-size: 12.5px; color: var(--text-tichy); }
.dlazdice .suma { display: block; font: 500 11.5px var(--pismo-data); color: var(--text-slaby); }

/* --- formuláře ------------------------------------------------------- */
form .pole { margin-bottom: 13px; }
label { display: block; margin-bottom: 5px;
  font: 600 10.5px/1.6 var(--pismo-text); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-slaby); }
label .napoveda { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--text-slaby); font-size: 12px; }

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; font-size: 16px;   /* 16px, ať iOS nezvětšuje */
  background: var(--panel-plny); color: var(--text);
  border: 1px solid var(--linka-svetla); border-radius: var(--r-maly);
  font-family: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-slaby); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ohen);
  box-shadow: 0 0 0 3px rgba(255,107,0,.18); }
textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tichy) 50%),
                    linear-gradient(135deg, var(--text-tichy) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.dvojice { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .dvojice { grid-template-columns: 1fr; } }

.zaskrtnout { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.zaskrtnout input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--cervena); flex: 0 0 auto; }
.zaskrtnout label { margin: 0; text-transform: none; letter-spacing: 0;
  font: 400 14.5px/1.45 var(--pismo-text); color: var(--text); }

/* --- tlačítka -------------------------------------------------------- */
button, .tl {
  display: inline-block; padding: 10px 18px; border: 1px solid transparent;
  font: 600 14.5px var(--pismo-text); border-radius: var(--r-maly);
  background: var(--cervena); color: #fff; cursor: pointer;
  transition: background .12s ease;
}
button:hover, .tl:hover { background: var(--cervena-tmava); text-decoration: none; color: #fff; }
.tl.tise, button.tise { background: transparent; color: var(--text-tichy);
  border-color: var(--linka-svetla); }
.tl.tise:hover, button.tise:hover { background: var(--panel-plny); color: var(--text); }
.tl.ohnive, button.ohnive { background: var(--ohen); }
.tl.ohnive:hover, button.ohnive:hover { background: #D95B00; }
.tl.drobne, button.drobne { padding: 5px 11px; font-size: 12.5px; }
button.rizik { background: transparent; color: var(--vyluka); border-color: var(--vyluka); }
button.rizik:hover { background: var(--vyluka-tlum); }
.akce { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }

/* P2.0: čtecí role vidí data, ne nefunkční zápisové formuláře. */
.p20-cteni form, .p20-cteni section > hr, .p20-cteni section > h3 { display: none; }
.p20-cteni .tabulka th:last-child, .p20-cteni .tabulka td:last-child { display: none; }

/* --- filtry ---------------------------------------------------------- */
.filtry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 15px; }
.filtry .hledani { flex: 1 1 200px; }
.filtr { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--linka-svetla); color: var(--text-tichy); }
.filtr:hover { text-decoration: none; color: var(--text); border-color: var(--text-slaby); }
.filtr.zde { background: var(--panel-plny); color: var(--text); border-color: var(--ohen); }

/* --- tabulka --------------------------------------------------------- */
.tabulka { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabulka th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linka);
  font: 600 10.5px var(--pismo-text); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-slaby); }
.tabulka td { padding: 10px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.tabulka tr:last-child td { border-bottom: none; }

@media (max-width: 620px) {
  .tabulka, .tabulka tbody, .tabulka tr, .tabulka td { display: block; width: 100%; }
  .tabulka thead { display: none; }
  .tabulka tr { background: var(--panel-plny); border: 1px solid var(--linka);
    border-radius: var(--r-maly); padding: 10px 12px; margin-bottom: 9px; }
  .tabulka td { border: none; padding: 3px 0; }
  .tabulka td, .tabulka td a, .tabulka td strong, .tabulka td span {
    overflow-wrap: anywhere; word-break: break-word;
  }
  .tabulka td::before { content: attr(data-popisek); display: block;
    font: 600 10px var(--pismo-text); letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-slaby); }
}

/* --- přihlášení ------------------------------------------------------ */
.brana { max-width: 380px; margin: 6vh auto; padding: 0 18px; }
.brana .znak { text-align: center; margin-bottom: 6px; }
.brana .znak img { width: 190px; height: auto; }
.brana .podnadpis { text-align: center; color: var(--text-tichy);
  font-size: 13.5px; margin-bottom: 22px; }
.brana button { width: 100%; margin-top: 14px; padding: 13px; }
.brana .spodek { text-align: center; margin-top: 20px; }

/* --- patička --------------------------------------------------------- */
.paticka { text-align: center; color: var(--text-slaby); font-size: 12px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linka); }
.paticka a { color: var(--text-slaby); }

/* --- drobnosti ------------------------------------------------------- */
code, .kod { background: var(--panel-plny); padding: 2px 6px; border-radius: 4px;
  font-family: var(--pismo-data); font-size: 13px; overflow-wrap: anywhere; }
hr { border: none; border-top: 1px solid var(--linka); margin: 18px 0; }

/* =====================================================================
   ŠIROKÁ OBRAZOVKA
   Řídíme se skutečnou šířkou okna, ne typem zařízení — funguje to
   správně i na tabletu, v děleném okně nebo když si na počítači
   zmenšíš prohlížeč na půlku monitoru.
   ===================================================================== */

/* --- od 700 px: obsah dýchá, karty do dvou sloupců ------------------- */
@media (min-width: 700px) {
  .obsah { padding: 26px 24px 80px; }
  h1 { font-size: 34px; }

  .smlouvy { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .kryti   { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .dlazdice { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  /* Panely, které se vedle sebe čtou líp než pod sebou */
  .vedle-sebe { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
  .vedle-sebe > .list { margin-bottom: 0; }
  .pwa-device-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

  /* Formuláře nechceme přes celou šířku — dlouhé řádky se špatně vyplňují */
  form .list { max-width: 780px; }
  .brana { margin-top: 10vh; }
}

/* --- od 1000 px: navigace do levého sloupce -------------------------- */
/* Použito jen tam, kde navigace opravdu je (ne na přihlašovací stránce).
   Starší prohlížeč, který :has() neumí, prostě zůstane u horní lišty. */
@media (min-width: 1000px) {
  body:has(.navigace) {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-areas:
      "hlavicka hlavicka"
      "navigace obsah"
      "navigace paticka";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
  body:has(.navigace) > .hlavicka { grid-area: hlavicka; }
  body:has(.navigace) > .navigace { grid-area: navigace; }
  body:has(.navigace) > .obsah    { grid-area: obsah; }
  body:has(.navigace) > .paticka  { grid-area: paticka; }

  body:has(.navigace) > .navigace {
    flex-direction: column; align-items: stretch; gap: 3px;
    padding: 16px 12px; overflow: visible;
    border-bottom: none; border-right: 1px solid var(--linka);
    position: sticky; top: 56px; align-self: start;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
  body:has(.navigace) > .navigace a,
  body:has(.navigace) > .navigace span {
    border-radius: var(--r-maly); padding: 9px 13px; font-size: 14px;
  }
  /* V sloupci nese barvu sekce svislý pruh vlevo, ne celá plocha */
  body:has(.navigace) > .navigace .zde { position: relative; }

  .obsah { max-width: 1120px; margin: 0; padding: 28px 32px 80px; }
  .zahlavi-stranky { margin-bottom: 24px; }

  .smlouvy { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .udaje { grid-template-columns: 230px 1fr; }
  .ucet .kdo { max-width: none; }
}

/* --- od 1400 px: víc sloupců, ne širší text -------------------------- */
@media (min-width: 1400px) {
  .obsah { max-width: 1280px; }
  .smlouvy { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .dlazdice { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* --- ovládání myší --------------------------------------------------- */
/* Na dotykovém displeji nemá hover smysl a jen bliká. */
@media (hover: hover) and (pointer: fine) {
  .karta:hover { box-shadow: 0 2px 14px rgba(0,0,0,.28); }
  html[data-tema="svetle"] .karta:hover { box-shadow: 0 2px 12px rgba(0,0,0,.09); }
}
@media (hover: none) {
  .karta:hover { transform: none; }
}

/* --- tisk ------------------------------------------------------------ */
@media print {
  .hlavicka, .navigace, .paticka, .akce, .filtry { display: none; }
  body { background: #fff; color: #000; }
  .list, .karta { border: 1px solid #ccc; break-inside: avoid; }
}

/* =====================================================================
   GRAFY
   Kreslí je PHP jako SVG. Tady jen barvy, rozměry a legendy.
   ===================================================================== */

/* --- řada velkých čísel nad grafy ------------------------------------ */
.ukazatele {
  display: grid; gap: 9px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ukazatel {
  background: var(--panel); border: 1px solid var(--linka);
  border-radius: var(--r-maly); padding: 12px 14px;
}
.ukazatel .popis { display: block; font: 600 10.5px/1.5 var(--pismo-text);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-slaby); }
.ukazatel .cislo { display: block; font-family: var(--pismo-nadpis); font-weight: 400;
  font-size: 26px; line-height: 1.15; margin-top: 2px; }
.ukazatel .spodek { display: block; font-size: 12px; color: var(--text-tichy); }

/* --- prstencový graf -------------------------------------------------- */
.graf { margin: 0; }
.graf.s-kolacem { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 480px) {
  .graf.s-kolacem { grid-template-columns: 190px minmax(0, 1fr); }
}
.graf-kolac { width: 100%; max-width: 190px; margin: 0 auto; display: block; }
.graf-kolac .graf-stred {
  text-anchor: middle; fill: var(--text); font-family: var(--pismo-nadpis);
  font-weight: 400; font-size: 21px;
}
.graf-kolac .graf-podstred {
  text-anchor: middle; fill: var(--text-slaby); font-family: var(--pismo-text);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* --- legenda ---------------------------------------------------------- */
.legenda { list-style: none; margin: 0; padding: 0; font-size: 13.5px; min-width: 0; }
.legenda li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--linka); min-width: 0; }
.legenda li:last-child { border-bottom: none; }
.legenda .tecka { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
  transform: translateY(1px); }
.legenda .popis { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.legenda .hodnota { font-family: var(--pismo-data); font-size: 12.5px; white-space: nowrap; }
.legenda.vodorovna { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.legenda.vodorovna li { border: none; padding: 0; }

/* --- vodorovné sloupce ------------------------------------------------ */
.graf-sloupce { display: grid; gap: 9px; }
.graf-sloupce .sloupec { display: grid; gap: 2px 10px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.graf-sloupce .popis { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.graf-sloupce .hodnota { font-family: var(--pismo-data); font-size: 12.5px;
  color: var(--text-tichy); text-align: right; white-space: nowrap; }
.graf-sloupce .drah { grid-column: 1 / -1; height: 8px; border-radius: 4px;
  background: var(--panel-plny); overflow: hidden; }
.graf-sloupce .drah span { display: block; height: 100%; border-radius: 4px; }
html[data-tema="svetle"] .graf-sloupce .drah { background: #E6E3E0; }

/* --- spojnicový graf -------------------------------------------------- */
.graf-cara { width: 100%; height: 220px; display: block; }
.graf-cara .mrizka { stroke: var(--linka); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graf-cara .popiska { fill: var(--text-slaby); font-family: var(--pismo-data); font-size: 10px; }

/* --- ukazatel postupu -------------------------------------------------- */
.postup .drah { height: 14px; border-radius: 7px; background: var(--panel-plny); overflow: hidden; }
html[data-tema="svetle"] .postup .drah { background: #E6E3E0; }
.postup .drah span { display: block; height: 100%; border-radius: 7px; }
.postup-popis { display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 13px; flex-wrap: wrap; }

/* --- ocenění ---------------------------------------------------------- */
.oceneni-radek { display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--linka); font-size: 14px; }
.oceneni-radek:last-child { border-bottom: none; }
.oceneni-radek .kdy { color: var(--text-tichy); font-family: var(--pismo-data); font-size: 12.5px;
  min-width: 0; overflow-wrap: anywhere; }
.oceneni-radek .kolik { font-family: var(--pismo-data); font-variant-numeric: tabular-nums;
  flex: 0 0 auto; }

/* --- malý pruh postupu (časový test v tabulce) ----------------------- */
.drah-maly { height: 6px; border-radius: 3px; background: var(--panel-plny);
  overflow: hidden; max-width: 140px; margin-bottom: 3px; }
html[data-tema="svetle"] .drah-maly { background: #E6E3E0; }
.drah-maly span { display: block; height: 100%; background: #3F9BE0; border-radius: 3px; }

/* --- nahrávání souboru ----------------------------------------------- */
input[type=file] { width: 100%; padding: 10px 12px; font-size: 14px;
  background: var(--panel-plny); color: var(--text);
  border: 1px dashed var(--linka-svetla); border-radius: var(--r-maly); }
input[type=file]::file-selector-button {
  background: var(--ocel, #55719A); background: var(--cervena); color: #fff;
  border: none; border-radius: 4px; padding: 6px 12px; margin-right: 10px;
  font: 600 13px var(--pismo-text); cursor: pointer; }

/* --- rozhovor s AI --------------------------------------------------- */
.rozhovor { display: grid; gap: 10px; margin-bottom: 16px; }
.bublina { border: 1px solid var(--linka); border-radius: var(--r);
  padding: 12px 14px; background: var(--panel); }
.bublina.ja { background: var(--panel-plny); border-left: 3px solid var(--linka-svetla); }
.bublina.ai { border-left: 3px solid var(--cervena); }
.bublina .kdo { font: 600 10.5px/1.6 var(--pismo-text); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-slaby); margin-bottom: 6px; }
.bublina .text { white-space: normal; overflow-wrap: anywhere; }

/* --- nabídka otázek -------------------------------------------------- */
.napady { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.napady button { text-align: left; white-space: normal; }

/* --- číslovaný postup ------------------------------------------------ */
.postup { margin: 0 0 12px; padding-left: 20px; }
.postup li { margin-bottom: 8px; }

/* --- ukazatel postupu při dávkovém zpracování ------------------------ */
.postup .drah span { transition: width .3s ease; }

/* --- překryv při dlouhé AI úloze ------------------------------------- */
#pracuje {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,9,8,.88); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#pracuje[hidden] { display: none; }
.obsah-pracuje {
  background: var(--panel); border: 1px solid var(--linka);
  border-top: 3px solid var(--cervena);
  border-radius: var(--r); padding: 28px 26px; max-width: 380px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.obsah-pracuje h2 { font-family: var(--pismo-nadpis); font-weight: 400; font-size: 22px;
  text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 6px; }
.obsah-pracuje p { margin: 0 0 6px; }
.obsah-pracuje .plamen { font-size: 34px; line-height: 1; animation: horeni 1.1s ease-in-out infinite; }
@keyframes horeni {
  0%, 100% { transform: scale(1) rotate(-3deg); opacity: .9; }
  50%      { transform: scale(1.12) rotate(3deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .obsah-pracuje .plamen { animation: none; } }

/* --- podnabídka uvnitř sekce ----------------------------------------- */
.podnabidka {
  display: flex; gap: 4px; flex-wrap: wrap; margin: -4px 0 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linka);
}
.podnabidka a {
  padding: 6px 12px; border-radius: var(--r-maly); font-size: 13.5px;
  color: var(--text-tichy); border: 1px solid transparent;
}
.podnabidka a:hover { background: var(--panel-plny); color: var(--text); text-decoration: none; }
.podnabidka a.zde { background: var(--panel-plny); color: var(--text);
  border-color: var(--linka-svetla); font-weight: 600; }


/* =====================================================================
   SVĚTLÝ REŽIM — dorovnání kontrastu
   Pravidlo pro odkazy ve světlém režimu přebíjelo bílý text na tlačítkách,
   takže na červeném tlačítku byl červený nápis. Tady se to vrací zpátky.
   ===================================================================== */
html[data-tema="svetle"] a.tl,
html[data-tema="svetle"] a.tl:hover,
html[data-tema="svetle"] .karta,
html[data-tema="svetle"] .karta:hover,
html[data-tema="svetle"] .znacka,
html[data-tema="svetle"] .navigace .zde,
html[data-tema="svetle"] .sekce-stitek { color: #fff; }

html[data-tema="svetle"] .karta,
html[data-tema="svetle"] .karta:hover { color: var(--text); }

html[data-tema="svetle"] .navigace .zde.s-penzijni,
html[data-tema="svetle"] .sekce-stitek.s-penzijni { color: #1A1918; }

/* Nadpisy těžkým písmem potřebují na světlém pozadí plnou černou */
html[data-tema="svetle"] h1 { color: #111; }
html[data-tema="svetle"] .prazdno h3,
html[data-tema="svetle"] .obsah-pracuje h2 { color: #111; }

/* Odkazy uvnitř textu tmavší, ať jsou čitelné na bílé */
html[data-tema="svetle"] { --cervena: #C62828; }
html[data-tema="svetle"] a { color: #B3261E; }
html[data-tema="svetle"] a:hover { color: #8E1D17; }

/* Tlačítka a štítky si drží sytou červenou z loga */
html[data-tema="svetle"] button,
html[data-tema="svetle"] .tl { background: #D32F2F; color: #fff; }
html[data-tema="svetle"] button:hover,
html[data-tema="svetle"] .tl:hover { background: #B3261E; }
html[data-tema="svetle"] button.tise,
html[data-tema="svetle"] .tl.tise { background: transparent; color: #4A443F; }
html[data-tema="svetle"] button.tise:hover,
html[data-tema="svetle"] .tl.tise:hover { background: #EDEAE7; color: #111; }
html[data-tema="svetle"] button.rizik { background: transparent; color: #B3261E; }
html[data-tema="svetle"] .tl.ohnive,
html[data-tema="svetle"] button.ohnive { background: #E8620A; color: #fff; }

/* Významové barvy potřebují na bílé víc tmy */
html[data-tema="svetle"] { --kryto: #1F7A52; --vyluka: #B3261E; --termin: #A85B00; }
html[data-tema="svetle"] .zelene { color: #1F7A52; }
html[data-tema="svetle"] .cervene { color: #B3261E; }
html[data-tema="svetle"] .jantar { color: #A85B00; }

/* Proužek krytí a grafy zůstávají syté, ať jsou vidět */
html[data-tema="svetle"] .prouzek i.ano { background: #2E9E6B; }
html[data-tema="svetle"] .prouzek i.vyl { background: #D5443B; }
html[data-tema="svetle"] .prouzek i { background: #D8D3CF; }
html[data-tema="svetle"] input[type=file] { background: #F4F2F0; }

/* --- P3.0: instalovatelná PWA, aktualizace a bezpečný offline stav -------- */
.pwa-banner {
  position: fixed; z-index: 10000;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 920px; margin: 0 auto; padding: 14px 16px;
  border: 1px solid var(--linka-svetla); border-left: 4px solid var(--ohen);
  border-radius: var(--r); background: var(--panel-plny); color: var(--text);
  box-shadow: 0 16px 45px rgba(0,0,0,.42);
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-copy { display: grid; gap: 3px; min-width: 0; }
.pwa-banner-title { font-size: 15px; }
.pwa-banner-text { color: var(--text-tichy); font-size: 13px; line-height: 1.45; }
.pwa-banner-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.pwa-banner-actions button { width: auto; margin: 0; padding: 8px 12px; white-space: nowrap; }
.pwa-banner-primary { background: var(--ohen); color: #fff; }
.pwa-banner-close { background: transparent; color: var(--text-tichy); border-color: var(--linka); }
.pwa-banner.pwa-offline { border-left-color: var(--termin); }
.pwa-banner.pwa-update { border-left-color: var(--kryto); }

.offline-stranka {
  width: min(620px, calc(100% - 32px)); min-height: 100dvh; margin: 0 auto;
  padding: max(54px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.offline-stranka img { width: 96px; height: 96px; object-fit: contain; }
.offline-stranka h1 { margin: 8px 0 16px; }
.offline-stranka p { max-width: 55ch; }
.offline-stranka button { width: auto; margin-top: 10px; }

@media (display-mode: standalone) {
  .hlavicka { padding-top: max(12px, env(safe-area-inset-top)); }
  .paticka { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  .pwa-banner { align-items: stretch; flex-direction: column; gap: 11px; }
  .pwa-banner-actions { width: 100%; }
  .pwa-banner-actions button { flex: 1 1 auto; }
}

/* --- tři možnosti u návrhu AI ---------------------------------------- */
.rozhodnuti { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rozhodnuti input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.rozhodnuti label {
  display: inline-block; padding: 7px 13px; border-radius: var(--r-maly);
  border: 1px solid var(--linka); color: var(--text-tichy);
  font-size: 13.5px; cursor: pointer; user-select: none;
}
.rozhodnuti input:checked + label.volba-zapsat {
  background: var(--kryto); border-color: var(--kryto); color: #08130D; font-weight: 600;
}
.rozhodnuti input:checked + label.volba-nechat {
  background: var(--panel-plny); border-color: var(--linka-svetla); color: var(--text);
}
.rozhodnuti input:checked + label.volba-zamitnout {
  background: var(--vyluka); border-color: var(--vyluka); color: #fff; font-weight: 600;
}
.rozhodnuti input:focus-visible + label { outline: 2px solid var(--ohen); outline-offset: 2px; }

/* --- výluky jako rozbalovací blok ------------------------------------ */
.vyluky-blok {
  background: var(--panel); border: 1px solid var(--linka);
  border-left: 3px solid var(--vyluka); border-radius: var(--r);
  margin-bottom: 18px; overflow: hidden;
}
.vyluky-blok > summary {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  cursor: pointer; list-style: none; user-select: none;
}
.vyluky-blok > summary::-webkit-details-marker { display: none; }
.vyluky-blok > summary::after {
  content: '▾'; margin-left: auto; color: var(--text-slaby);
  transition: transform .2s ease;
}
.vyluky-blok[open] > summary::after { transform: rotate(180deg); }
.vyluky-blok .pocet-vyluk {
  min-width: 42px; height: 42px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: rgba(229,84,78,.14);
  color: var(--vyluka); font-family: var(--pismo-data); font-weight: 700; font-size: 17px;
}
.vyluky-blok .popis-vyluk { display: flex; flex-direction: column; gap: 2px; }
.vyluky-blok .popis-vyluk strong { font-size: 16px; }
.seznam-vyluk { margin: 0; padding: 0 18px 16px 44px; }
.seznam-vyluk li { margin-bottom: 12px; }
.seznam-vyluk li:last-child { margin-bottom: 0; }

/* --- sbalená skupina nesjednaných krytí ------------------------------ */
.skupina-kryti { margin-top: 16px; }
.skupina-kryti > summary {
  cursor: pointer; padding: 10px 0; color: var(--text-tichy);
  border-top: 1px solid var(--linka);
}
.skupina-kryti > summary::marker { color: var(--text-slaby); }
.skupina-kryti[open] > summary { margin-bottom: 10px; }

/* --- P2.1: lhůty a upozornění --------------------------------------- */
.trojice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.lhuty-seznam { display: grid; gap: 14px; }
.lhuta-karta { margin-bottom: 0; border-left: 4px solid var(--linka-svetla); }
.lhuta-karta.informace { border-left-color: var(--text-slaby); }
.lhuta-karta.varovani { border-left-color: var(--termin); }
.lhuta-karta.kriticka { border-left-color: var(--vyluka); }
.lhuta-karta.vyrizena { opacity: .78; }
.lhuta-karta h2 { margin: 10px 0 6px; padding: 0; border: 0; font-size: 19px; }
.lhuta-karta p { margin: 6px 0; }
.lhuta-horni { align-items: center; gap: 8px 16px; }
.lhuta-horni > :last-child { margin-left: auto; font-family: var(--pismo-data); font-size: 13px; }
.lhuta-akce { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 14px; }
.lhuta-akce form { margin: 0; }
.lhuta-odlozit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lhuta-odlozit label { font-size: 12px; color: var(--text-tichy); }
.lhuta-odlozit input[type=date] { width: auto; min-width: 145px; padding: 7px 9px; }
.lhuty-filtry .akce { margin-top: 4px; }

@media (max-width: 720px) {
  .trojice { grid-template-columns: 1fr; }
  .lhuta-horni > :last-child { width: 100%; margin-left: 0; }
  .lhuta-akce { align-items: stretch; }
  .lhuta-akce form:not(.lhuta-odlozit), .lhuta-akce form:not(.lhuta-odlozit) button { width: 100%; }
  .lhuta-odlozit { width: 100%; }
  .lhuta-odlozit input[type=date] { flex: 1 1 160px; }
}

/* --- P2.5: účty, druhý faktor a bezpečnost --------------------------- */
.odhlaseni { display: inline; margin: 0; }
.odhlaseni button { width: auto; min-height: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.prepinac-vzhledu,.radkovy-formular { display: inline-flex; margin: 0; }
.prepinac-vzhledu button,.odkazove-tlacitko { all: unset; cursor: pointer; color: var(--cervena); }
.prepinac-vzhledu button { font-size: 1.1rem; line-height: 1; }
.v-obsahu { width: min(100%, 560px); margin: 24px auto; }
.bezpecnost-mrizka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 14px 0 18px; }
.bezpecnost-karta { min-width: 0; padding: 13px 14px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); background: var(--panel-plny); }
.bezpecnost-karta strong { display: block; overflow-wrap: anywhere; }
.bezpecnost-karta p { margin: 5px 0 0; color: var(--text-tichy); font-size: 13px; }
.obnovovaci-kody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin: 12px 0; padding: 14px; border: 1px solid var(--termin);
  border-radius: var(--r-maly); background: var(--termin-tlum); }
.obnovovaci-kody code { font-size: 15px; letter-spacing: .08em; }
.totp-tajemstvi { display: block; padding: 12px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); overflow-wrap: anywhere; font-size: 16px;
  letter-spacing: .08em; text-align: center; background: var(--panel-plny); }
.stav-bezpecnosti { display: inline-flex; align-items: center; gap: 6px; }
.stav-bezpecnosti::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vyluka); }
.stav-bezpecnosti.ok::before { background: var(--kryto); }
.dokument-konverze { display: inline-block; margin-top: 6px; color: var(--termin);
  font-size: 12px; }

@media (max-width: 720px) {
  .bezpecnost-mrizka { grid-template-columns: 1fr; }
  .obnovovaci-kody { grid-template-columns: 1fr; }
  .odhlaseni button { width: auto; }
}

/* --- P2.2: interní notifikace a kanály ------------------------------- */
.nav-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px;
  align-items: center; justify-content: center; border-radius: 9px;
  background: var(--vyluka); color: #fff; font: 700 10px/1 var(--pismo-data);
  vertical-align: 1px; }
.oznameni-seznam { display: grid; gap: 12px; margin-bottom: 18px; }
.oznameni-karta { margin-bottom: 0; border-left: 4px solid var(--linka-svetla); }
.oznameni-karta.informace { border-left-color: var(--text-slaby); }
.oznameni-karta.varovani { border-left-color: var(--termin); }
.oznameni-karta.kriticka { border-left-color: var(--vyluka); }
.oznameni-karta.prectena { opacity: .74; }
.oznameni-karta h2 { margin: 10px 0 6px; padding: 0; border: 0; font-size: 19px; }
.oznameni-horni { align-items: center; gap: 8px 16px; }
.oznameni-horni > :last-child { margin-left: auto; font-family: var(--pismo-data);
  font-size: 13px; }
.notifikace-badge { display: inline-block; padding: 3px 7px; border-radius: 999px;
  background: var(--vyluka); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
.notifikace-kanaly { margin-top: 18px; }
.kod-url input { font-family: var(--pismo-data); font-size: 12px; }
.kalendar-soukromi { margin-top: 12px; }
.kalendar-akce { align-items: stretch; }
.kalendar-akce a { flex: 1 1 150px; text-align: center; }
.kalendar-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 14px 0; }
.kalendar-meta > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); background: var(--panel-plny); }
.kalendar-meta dt { color: var(--text-slaby); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.kalendar-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.kalendar-admin { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--linka); }
.notifikace-stav { margin-top: 18px; }
.adresati-smlouvy { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linka); }
.adresati-tabulka input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--cervena); }
.pravidla-smlouvy { margin-top: 22px; }
.pravidla-tabulka th:first-child { width: 34%; }
.pravidla-tabulka th:nth-child(2) { width: 12%; }
.pravidla-tabulka th:nth-child(3) { width: 20%; }
.pravidla-tabulka th:nth-child(4) { width: 25%; }
.pravidla-tabulka th:last-child,
.pravidla-tabulka td:last-child { width: 9%; text-align: center; }
.pravidla-tabulka input[type="checkbox"] {
  width: 21px; height: 21px; margin: 0; accent-color: var(--cervena);
}
.pravidla-tabulka .pravidlo-vypnute td { background: rgba(255,255,255,.018); }
.pravidla-tabulka .pravidlo-vypnute td:first-child strong { color: var(--slaby); }
.pravidla-tabulka .pravidlo-volitelne td { background: rgba(255,190,61,.025); }
.pravidlo-typ { margin-top: 5px; font-size: 9px; letter-spacing: .04em; }
.poznamky-seznam { display: grid; gap: 10px; margin-top: 15px; }
.poznamka-karta { padding: 13px 14px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); background: var(--panel-plny); }
.poznamka-karta > p { margin: 0 0 8px; white-space: normal; }
.poznamka-meta { overflow-wrap: anywhere; }
.nova-poznamka { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--linka); }
.radkova-uprava { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--linka); }
.radkova-uprava summary { cursor: pointer; color: var(--odkaz); font-size: 13px; }
.radkova-uprava form { margin-top: 12px; }
.smazat-radek { padding-top: 12px; border-top: 1px solid var(--linka); }
button.nebezpecne { border-color: var(--vyluka); color: var(--vyluka); background: transparent; }
button.nebezpecne:hover { color: #fff; background: var(--vyluka); }
.historie-platby { padding-bottom: 12px; border-bottom: 1px solid var(--linka); }
.historie-platby:last-of-type { border-bottom: 0; }
.historie-platby .oceneni-radek { border-bottom: 0; }
.adresati-volby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px; padding: 12px; border: 1px solid var(--linka); border-radius: 7px;
  background: var(--panel-plny); }
.adresati-volby .zaskrtnout { margin: 0; }

/* --- P3.1.3: obsahová revize smluv ------------------------------- */
.revize-souhrn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 0 0 16px; }
.revize-souhrn > div { min-width: 0; padding: 14px; border: 1px solid var(--linka);
  border-left: 4px solid var(--linka-svetla); border-radius: var(--r-maly);
  background: var(--panel-plny); }
.revize-souhrn > div.ok { border-left-color: var(--kryto); }
.revize-souhrn > div.varovani { border-left-color: var(--termin); }
.revize-souhrn > div.chyba { border-left-color: var(--vyluka); }
.revize-souhrn strong { display: block; font: 700 25px/1 var(--pismo-data); }
.revize-souhrn span { display: block; margin-top: 7px; color: var(--text-tichy);
  font-size: 12px; }
.revize-filtry .akce { margin-top: 4px; }
.revize-seznam { display: grid; gap: 14px; }
.revize-karta { margin-bottom: 0; border-left: 4px solid var(--linka-svetla); }
.revize-karta.kontrola { border-left-color: var(--termin); }
.revize-karta.chyba { border-left-color: var(--vyluka); }
.revize-karta.ok { border-left-color: var(--kryto); }
.revize-karta h2 { margin: 11px 0 5px; padding: 0; border: 0; font-size: 20px; }
.revize-horni { align-items: center; gap: 10px; }
.revize-horni > :last-child { margin-left: auto; }
.revize-fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 14px 0; }
.revize-fakta > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); background: var(--panel-plny); }
.revize-fakta dt { color: var(--text-slaby); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.revize-fakta dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.revize-nalezy { margin: 12px 0; padding: 12px 14px 12px 34px;
  border-radius: var(--r-maly); background: var(--termin-tlum); }
.revize-karta.chyba .revize-nalezy { background: var(--vyluka-tlum); }
.revize-nalezy li { margin: 5px 0; }
.revize-pravidla { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--linka);
  border-radius: var(--r-maly); background: var(--panel-plny); }
.revize-pravidla summary { cursor: pointer; font-weight: 700; }
.revize-pravidla p { margin: 9px 0 0; }
.revize-akce { margin-top: 14px; }

@media (max-width: 720px) {
  .oznameni-horni > :last-child { width: 100%; margin-left: 0; }
  .oznameni-karta .lhuta-akce form,
  .oznameni-karta .lhuta-akce button { width: 100%; }
  .notifikace-kanaly .akce { align-items: stretch; }
  .notifikace-kanaly .akce a,
  .notifikace-kanaly .akce form,
  .notifikace-kanaly .akce button { width: 100%; text-align: center; }
  .kalendar-meta { grid-template-columns: 1fr; }
  .adresati-volby { grid-template-columns: 1fr; }
  .pravidla-tabulka td:last-child { text-align: left; padding-top: 8px; }
  .radkova-uprava button, .nova-poznamka button { width: 100%; }
  .revize-souhrn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revize-horni { align-items: flex-start; }
  .revize-horni > :last-child { width: 100%; margin-left: 0; }
  .revize-fakta { grid-template-columns: 1fr; }
  .revize-akce { align-items: stretch; flex-direction: column; }
  .revize-akce .tl { width: 100%; text-align: center; }
}

/* --- P2.4: provozní dohled, zálohy a obnova -------------------------- */
.provoz-nadpis { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; }
.provoz-nadpis h2 { margin: 0; padding: 0; border: 0; }
.provoz-stav { display: inline-flex; padding: 5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.provoz-stav.ok { color: var(--kryto); background: var(--kryto-tlum); }
.provoz-stav.varovani { color: var(--termin); background: var(--termin-tlum); }
.provoz-stav.chyba { color: var(--vyluka); background: var(--vyluka-tlum); }
.provoz-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-bottom: 14px; }
.provoz-karta { min-width: 0; padding: 13px 14px; border: 1px solid var(--linka);
  border-left: 4px solid var(--linka-svetla); border-radius: var(--r-maly);
  background: var(--panel-plny); }
.provoz-karta.ok { border-left-color: var(--kryto); }
.provoz-karta.varovani { border-left-color: var(--termin); }
.provoz-karta.chyba { border-left-color: var(--vyluka); }
.provoz-karta p { margin: 5px 0 0; color: var(--text-tichy); font-size: 13px; }
.provoz-akce, .provoz-radek-akci { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.provoz-akce form, .provoz-radek-akci form { margin: 0; }
.provoz-kroky { margin-bottom: 0; }
.provoz-kroky li { margin-bottom: 8px; }

@media (max-width: 720px) {
  .provoz-nadpis { align-items: flex-start; flex-direction: column; }
  .provoz-mrizka { grid-template-columns: 1fr; }
  .provoz-akce, .provoz-radek-akci { align-items: stretch; flex-direction: column; }
  .provoz-akce form, .provoz-akce button, .provoz-akce .tl,
  .provoz-radek-akci form, .provoz-radek-akci button, .provoz-radek-akci .tl {
    width: 100%; text-align: center;
  }
}