:root{
  --papir:#F6F7F9;
  --karta:#FFFFFF;
  --inkoust:#14171C;
  --inkoust-2:#4B5460;
  --inkoust-3:#7A8494;
  --linka:#E3E7ED;
  --linka-2:#CFD6E0;
  --akcent:#FF3F6C;
  --akcent-tmavy:#D81F4C;
  --modra:#2454E0;
  --zelena:#0E8F5E;
  --zelena-svetla:#E8F6F0;
  --zluta:#FFF6E0;
  --zluta-linka:#F0C97A;
  --grad:linear-gradient(90deg,#FF5A2F 0%,#FF7A3D 25%,#FF3F6C 60%,#FF2D8F 100%);
  --r:14px;
  --stin:0 1px 2px rgba(20,23,28,.05), 0 6px 20px rgba(20,23,28,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papir);
  color:var(--inkoust);
  font:400 16px/1.55 Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  padding-bottom:64px;
}
h1,h2,h3{font-family:"Bricolage Grotesque",Manrope,sans-serif;font-weight:700;letter-spacing:-.015em;margin:0}
p{margin:0}
button{font:inherit}

.pruh{
  background:var(--zluta);border-bottom:1px solid var(--zluta-linka);
  padding:8px 16px;text-align:center;font-size:13px;color:#7A5A16;
}

/* ---------- hlavička ---------- */
.hlavicka{
  position:sticky;top:0;z-index:20;
  background:rgba(246,247,249,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linka);
}
.hlavicka::before{content:"";display:block;height:3px;background:var(--grad)}
.hl-vnitrek{
  max-width:920px;margin:0 auto;padding:12px 16px 10px;
  display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}
.hl-nazev h1{font-size:19px}
.hl-nazev p{font-size:13px;color:var(--inkoust-3);margin-top:2px;max-width:44ch}
.hl-stav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pocitadla{display:flex;gap:6px}
.pocet{
  font-size:12px;font-weight:600;color:var(--inkoust-2);
  background:var(--karta);border:1px solid var(--linka);border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.pocet.hotovo{color:var(--zelena);border-color:#B7E3CE;background:var(--zelena-svetla)}
#pocet-r::after{content:" rozhodnutí"}
#pocet-d::after{content:" potvrzeno"}
.pill{font-size:12px;color:var(--inkoust-3);min-width:64px}
.pill.ok{color:var(--zelena)}
.pill.chyba{color:var(--akcent-tmavy)}
.tl-hlavni{
  border:0;border-radius:999px;padding:9px 16px;cursor:pointer;
  background:var(--inkoust);color:#fff;font-weight:700;font-size:14px;
}
.tl-hlavni:hover{background:#000}
.tl-hlavni.predano{background:var(--zelena)}

.chipy{
  max-width:920px;margin:0 auto;padding:0 16px 10px;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
}
.chipy::-webkit-scrollbar{display:none}
.chip{
  border:1px solid var(--linka-2);background:var(--karta);color:var(--inkoust-2);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.chip:hover{border-color:var(--inkoust-3)}
.chip .chip-poc{color:var(--inkoust-3);font-weight:500}
.chip.hotova{background:var(--zelena-svetla);border-color:#B7E3CE;color:var(--zelena)}

/* ---------- obsah ---------- */
.hlavni{max-width:920px;margin:0 auto;padding:0 16px}
.sekce{padding-top:34px;scroll-margin-top:120px}
.sekce-hlava{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.sekce-ikona{
  font-size:15px;width:28px;height:28px;flex:0 0 28px;border-radius:9px;
  display:grid;place-items:center;background:var(--inkoust);color:#fff;
}
.sekce h2{font-size:23px}
.sekce-uvod{color:var(--inkoust-2);font-size:15px;margin:0 0 14px 38px;max-width:66ch}

.karta{
  background:var(--karta);border:1px solid var(--linka);border-radius:var(--r);
  padding:18px 18px 16px;margin-bottom:12px;box-shadow:var(--stin);
  scroll-margin-top:130px;
}
.karta.rozhodnuti{border-left:3px solid var(--akcent)}
.karta.hotova{border-left-color:var(--zelena)}
.karta.vysvetleni{border-left:3px solid var(--modra)}
.karta.vysvetleni.hotova{border-left-color:var(--zelena)}

.stitky{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.stitek{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:6px;padding:3px 7px;background:#EEF1F6;color:var(--inkoust-2);
}
.stitek.rozhodni{background:var(--akcent);color:#fff}
.stitek.blok{background:#FFE8EE;color:var(--akcent-tmavy)}
.stitek.vysvetleni{background:#E7EDFC;color:var(--modra)}
.stitek.id{background:transparent;color:var(--inkoust-3);padding-left:0}

.karta h3{font-size:18px;line-height:1.35;margin-bottom:10px}
.karta h3 .otaznik{color:var(--akcent)}

.citace{
  border-left:3px solid var(--linka-2);padding:2px 0 2px 12px;margin:0 0 12px;
  color:var(--inkoust-2);font-size:14px;font-style:italic;
}
.proc{margin:0 0 14px;padding:0;list-style:none}
.proc li{position:relative;padding-left:18px;margin-bottom:7px;font-size:15px;color:var(--inkoust-2)}
.proc li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--linka-2)}
.proc li strong{color:var(--inkoust)}

.zaver{
  background:#F3F6FB;border-radius:10px;padding:11px 13px;font-size:14.5px;margin-bottom:12px;
  color:var(--inkoust);
}
.zaver b{color:var(--modra)}

/* možnosti */
.moznosti{display:grid;gap:8px;margin-bottom:12px}
.moznost{
  display:block;border:1px solid var(--linka-2);border-radius:11px;padding:11px 13px;cursor:pointer;
  transition:border-color .12s, background .12s;
}
.moznost:hover{border-color:var(--inkoust-3)}
.moznost input{position:absolute;opacity:0;pointer-events:none}
.moznost.vybrano{border-color:var(--akcent);background:#FFF5F8;box-shadow:inset 0 0 0 1px var(--akcent)}
.m-hlava{display:flex;gap:9px;align-items:flex-start}
.m-radio{
  flex:0 0 17px;width:17px;height:17px;border-radius:50%;border:2px solid var(--linka-2);margin-top:2px;
}
.moznost.vybrano .m-radio{border-color:var(--akcent);background:radial-gradient(circle,var(--akcent) 0 45%,#fff 46%)}
.m-nazev{font-weight:700;font-size:15px}
.m-hvezda{color:#C99A00;font-size:12px;font-weight:700;margin-left:6px;white-space:nowrap}
.m-popis{font-size:14px;color:var(--inkoust-2);margin:4px 0 0 26px}
.m-dusledek{font-size:13.5px;color:var(--inkoust-3);margin:5px 0 0 26px}

/* beru / chci jinak */
.potvrzeni{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tl-volba{
  border:1px solid var(--linka-2);background:var(--karta);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;color:var(--inkoust-2);
}
.tl-volba:hover{border-color:var(--inkoust-3)}
.tl-volba.aktivni[data-volba="beru"]{background:var(--zelena);border-color:var(--zelena);color:#fff}
.tl-volba.aktivni[data-volba="jinak"]{background:var(--akcent);border-color:var(--akcent);color:#fff}

/* poznámka */
.pozn-prep{
  border:0;background:transparent;color:var(--inkoust-3);font-size:13.5px;font-weight:600;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;
}
.pozn-prep:hover{color:var(--inkoust)}
.pozn-prep.plna{color:var(--modra)}
textarea{
  width:100%;margin-top:8px;border:1px solid var(--linka-2);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:15px;line-height:1.5;resize:vertical;min-height:82px;background:#FCFCFD;color:var(--inkoust);
}
textarea:focus{outline:2px solid var(--modra);outline-offset:1px;border-color:var(--modra)}

.seznam{margin:0;padding:0;list-style:none}
.seznam li{position:relative;padding-left:24px;margin-bottom:9px;font-size:15px;color:var(--inkoust-2)}
.seznam li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--zelena);font-weight:800;font-size:14px;
}
.sekce#sek-S7 .seznam li::before{content:"→";color:var(--modra)}

.pata{max-width:920px;margin:40px auto 0;padding:20px 16px;color:var(--inkoust-3);font-size:13.5px;border-top:1px solid var(--linka)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;
  background:var(--inkoust);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

@media (max-width:720px){
  .hl-vnitrek{padding:9px 14px 7px;flex-direction:column;gap:7px}
  .hl-nazev h1{font-size:16px}
  .hl-nazev p{display:none}
  .hl-stav{width:100%;justify-content:space-between;gap:6px;flex-wrap:nowrap}
  .pocitadla{gap:5px;min-width:0}
  .pocet{font-size:11px;padding:4px 8px}
  #pocet-r::after{content:" rozh."}
  #pocet-d::after{content:" potvrz."}
  .pill{font-size:11px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tl-hlavni{flex:0 0 auto}
  .chipy{padding:0 14px 9px}
  .hlavni{padding:0 14px}
  .karta{padding:15px 14px 14px}
  .karta h3{font-size:17px}
  .sekce h2{font-size:20px}
  .sekce-uvod{margin-left:0}
  .tl-hlavni{padding:8px 13px;font-size:13px}
}