/* Okna Psů v rozložení Koček – jen přestavěná okna. Barvy: psí zelená, dlaždice v původních barvách (fialová místo zelené). */
/* ── Vrh (#litter-overlay): nové rozložení, schválený návrh 1 (22. 10. 2026) ── */
#litter-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --y-bg:#fff6d9; --y-fg:#7a5a00; --b-bg:#e6f0fd; --b-fg:#1a5299; --p-bg:#fdeaf0; --p-fg:#a02a5c; --o-bg:#ffe9d9; --o-fg:#9a4514; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #litter-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --y-bg:#3b3210; --y-fg:#f0d36a; --b-bg:#14283f; --b-fg:#a3cbf8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --o-bg:#40231a; --o-fg:#f0b48a; --l-bg:#444a1f; --l-fg:#e6eacd; }
#litter-overlay .lt-win { width:100%; max-width:1320px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); box-sizing:border-box; }
#litter-overlay .lt-win * { box-sizing:border-box; }
#litter-overlay .lt-hd { position:relative; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); flex:0 0 auto; }
#litter-overlay .lt-ti { font-size:22px; font-weight:800; line-height:1.2; }
#litter-overlay .lt-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#litter-overlay .lt-bd { flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; }
#litter-overlay .lt-side { padding:20px 24px; border-right:1px solid var(--xs); overflow-y:auto; background:var(--l-bg); }
#litter-overlay .lt-photo { width:100%; aspect-ratio:1; border:1px solid var(--xl); border-radius:6px; background-size:cover; background-position:center; background-color:var(--surface); display:flex; align-items:center; justify-content:center; font-size:48px; }
#litter-overlay .lt-name { font-size:20px; font-weight:800; text-align:center; margin:14px 0 2px; line-height:1.2; word-break:break-word; }
#litter-overlay .lt-age { text-align:center; font-size:13px; color:var(--xm); margin-bottom:14px; min-height:16px; }
#litter-overlay .lt-side > .lt-ct { margin-top:8px; }
#litter-overlay .lt-main { padding:16px 24px; overflow-y:auto; min-width:0; display:flex; flex-direction:column; gap:12px; }
#litter-overlay .lt-panel { padding:14px; border:1px solid var(--l-fg); border-radius:6px; background:var(--l-bg); }
#litter-overlay .lt-panel.g { border-color:var(--g-fg); background:var(--g-bg); }
#litter-overlay .lt-cap { font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; }
#litter-overlay .lt-g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#litter-overlay .lt-g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#litter-overlay .lt-g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#litter-overlay .lt-full { grid-column:1 / -1; }
#litter-overlay .lt-ct { position:relative; border:1px solid; border-radius:6px; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px 8px; gap:3px; background:var(--surface); min-width:0; margin:0; }
#litter-overlay .lt-ct small { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.9; line-height:1.15; }
#litter-overlay .lt-ct b { font-size:15px; font-weight:700; line-height:1.2; }
#litter-overlay .lt-ct input:not([type=checkbox]), #litter-overlay .lt-ct select, #litter-overlay .lt-ct textarea { display:block; width:100%; min-height:0; height:auto; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.25; text-align:center; text-align-last:center; box-shadow:none !important; outline:none; overflow-wrap:anywhere; }
#litter-overlay .lt-ct textarea { resize:none; min-height:56px; text-align:center; font-weight:600; }
#litter-overlay .lt-ct select { appearance:none; -webkit-appearance:none; cursor:pointer; text-overflow:ellipsis; }
#litter-overlay .lt-ct ::placeholder { color:inherit; opacity:.5; font-weight:500; }
#litter-overlay .lt-ct #l-father-manual { margin-top:4px !important; border-top:1px dashed currentColor !important; padding-top:4px; }
#litter-overlay .lt-ct #l-gestation { -moz-appearance:textfield; }
#litter-overlay .lt-g { color:var(--g-fg); border-color:var(--g-fg); }
#litter-overlay .lt-b { color:var(--b-fg); border-color:var(--b-fg); }
#litter-overlay .lt-y { color:var(--y-fg); border-color:var(--y-fg); }
#litter-overlay .lt-p { color:var(--p-fg); border-color:var(--p-fg); }
#litter-overlay .lt-o { color:var(--o-fg); border-color:var(--o-fg); }
#litter-overlay .lt-l { color:var(--l-fg); border-color:var(--l-fg); }
#litter-overlay .lt-w { color:var(--xi); border-color:var(--xl); }
#litter-overlay .lt-side > .lt-g, #litter-overlay .lt-ct.lt-g.lt-sg { background:var(--g-bg); }
#litter-overlay .lt-clr { position:absolute; right:4px; top:4px; width:28px; height:28px; min-height:0; padding:0; border:0; background:transparent; color:inherit; font-size:15px; opacity:.7; cursor:pointer; box-shadow:none; }
#litter-overlay .lt-clr:not([style*="none"]) { display:block; }
#litter-overlay .lt-bl { margin-top:10px; }
#litter-overlay .lt-note { margin-top:10px; padding:10px 14px; border:1px solid; border-radius:6px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:1.4; }
#litter-overlay .lt-note b { font-size:13px; }
#litter-overlay .lt-warn { color:var(--p-fg); border-color:var(--p-fg); background:var(--p-bg); }
#litter-overlay .lt-safe { color:var(--g-fg); border-color:var(--g-fg); background:var(--surface); }
#litter-overlay .lt-hint { margin-top:8px; font-size:11.5px; color:var(--xm); text-align:center; line-height:1.4; }
#litter-overlay .lt-rhd { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
#litter-overlay #litter-reservations-list { color:var(--xi); }
#litter-overlay #litter-reservations-list > div[style*="border-top"] { border-top-color:var(--xs) !important; }
#litter-overlay .lt-ft { flex:0 0 auto; padding:12px 24px; border-top:1px solid var(--xs); display:flex; justify-content:center; gap:12px; background:var(--surface); }
#litter-overlay .lt-bt { width:210px; min-height:48px; padding:4px 8px; border:1px solid; border-radius:6px; font-family:inherit; font-size:15px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; }
#litter-overlay .lt-bt.s { background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)); color:var(--g-fg); border-color:var(--g-fg); font-weight:800; }
#litter-overlay .lt-bt.c { background:var(--b-bg); color:var(--b-fg); border-color:var(--b-fg); }
#litter-overlay .lt-bt.p { background:var(--p-bg); color:var(--p-fg); border-color:var(--p-fg); }
#litter-overlay .lt-bt.g { background:var(--g-bg); color:var(--g-fg); border-color:var(--g-fg); }
@media (max-width:820px) {
#litter-overlay .lt-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); height:98vh; height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#litter-overlay .lt-hd { padding:12px 60px 10px; }
#litter-overlay .lt-ti { font-size:18px; }
#litter-overlay .lt-bd { display:block; overflow-y:auto; }
#litter-overlay .lt-side { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:4px 12px; padding:12px 14px; border-right:0; border-bottom:1px solid var(--xs); overflow:visible; }
#litter-overlay .lt-photo { width:64px; height:64px; aspect-ratio:auto; font-size:28px; grid-row:1 / 3; }
#litter-overlay .lt-sidetx { min-width:0; }
#litter-overlay .lt-name { text-align:left; margin:0 0 2px; font-size:16px; }
#litter-overlay .lt-age { text-align:left; margin:0; }
#litter-overlay .lt-side > .lt-ct { display:none; }
#litter-overlay .lt-main { padding:12px 14px; overflow:visible; }
#litter-overlay .lt-g2, #litter-overlay .lt-g3, #litter-overlay .lt-g4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#litter-overlay .lt-ct input:not([type=checkbox]), #litter-overlay .lt-ct select, #litter-overlay .lt-ct textarea { font-size:14px; }
#litter-overlay .lt-ft { padding:10px 14px 16px; gap:6px; }
#litter-overlay .lt-bt { width:auto; flex:1; font-size:13px; }
}
#litter-overlay .lt-sw .lt-val { display:block; width:100%; font-size:15px; font-weight:700; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
#litter-overlay .lt-sw > select { position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; cursor:pointer; z-index:1; }
#litter-overlay .lt-sw > #l-father-manual { position:relative; z-index:2; }
@media (max-width:820px) {
#litter-overlay .lt-sw .lt-val { font-size:14px; }
}
/* PC: levý pruh s fotkou má kolem sebe bílý okraj (stejně jako pravý panel), telefon beze změny */
@media (min-width:821px) {
html body #litter-overlay .lt-side,
html body #pup-overlay .pt-side,
html body #weight-overlay .wt-side,
html body .of-modal .of-side,
html body #litter-shows-modal .ls-side,
html body #litter-show-form-modal .sf-side,
html body #pup-shows-modal .ps-side,
html body #pup-show-form-modal .sf-side,
html body #milestones-modal .ms-side,
html body #pup-feeding-form-modal .pf-side,
html body #stud-agreement-overlay .sa-side,
html body #reminder-form-modal .rm-side,
html body #bulk-pup-overlay .bk-side,
html body #mating-overlay .ml-side,
html body #mating-form-overlay .mf-side,
html body #cycle-predictor-overlay .cp-side,
html body #health-form-modal .hf-side,
html body #pup-health-form-modal .hf-side
{ margin:6px !important; border:1px solid var(--xl) !important; border-radius:6px !important; }
}
/* PC: mezery kolem pruhu a pravého panelu všude 6 px (pruh má margin 6, hlavní část padding 6 bez levého) */
@media (min-width:821px) {
html body #litter-overlay .lt-bd > :not([class$="-side"]),
html body #pup-overlay .pt-bd > :not([class$="-side"]),
html body #weight-overlay .wt-bd > :not([class$="-side"]),
html body .of-modal .of-bd:not(.nos) > :not([class$="-side"]),
html body #health-form-modal .hf-bd > :not([class$="-side"]),
html body #litter-shows-modal .ls-bd2 > :not([class$="-side"]),
html body #litter-show-form-modal .sf-bd > :not([class$="-side"]),
html body #pup-shows-modal .ps-bd2 > :not([class$="-side"]),
html body #pup-show-form-modal .sf-bd > :not([class$="-side"]),
html body #milestones-modal .ms-bd > :not([class$="-side"]),
html body #pup-health-form-modal .hf-bd > :not([class$="-side"]),
html body #pup-feeding-form-modal .pf-bd > :not([class$="-side"]),
html body #reminder-form-modal .rm-bd > :not([class$="-side"]),
html body #bulk-pup-overlay .bk-bd > :not([class$="-side"]),
html body #mating-overlay .ml-bd > :not([class$="-side"]),
html body #mating-form-overlay .mf-bd > :not([class$="-side"]),
html body #cycle-predictor-overlay .cp-bd > :not([class$="-side"]),
html body #stud-agreement-content > :not([class$="-side"])
{ padding:6px 6px 6px 0 !important; }
}

/* ── Společný vzhled formulářových oken (.of-*, pomocník js/okno-form.js): fotka vlevo, podklady, dlaždice ── */
.of-modal { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --y-bg:#fff6d9; --y-fg:#7a5a00; --b-bg:#e6f0fd; --b-fg:#1a5299; --p-bg:#fdeaf0; --p-fg:#a02a5c; --o-bg:#ffe9d9; --o-fg:#9a4514; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark .of-modal { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --y-bg:#3b3210; --y-fg:#f0d36a; --b-bg:#14283f; --b-fg:#a3cbf8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --o-bg:#40231a; --o-fg:#f0b48a; --l-bg:#444a1f; --l-fg:#e6eacd; }
.of-modal .of-win { width:100%; max-width:var(--ofw,1320px); max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); box-sizing:border-box; }
.of-modal .of-win * { box-sizing:border-box; }
.of-modal .of-hd { position:relative; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); flex:0 0 auto; }
.of-modal .of-ti { font-size:22px; font-weight:800; line-height:1.2; }
.of-modal .of-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
.of-modal .of-bd { flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; }
.of-modal .of-side { padding:20px 24px; border-right:1px solid var(--xs); overflow-y:auto; background:var(--l-bg); }
.of-modal .of-photo { width:100%; aspect-ratio:1; border:1px solid var(--xl); border-radius:6px; background-size:cover; background-position:center; background-color:var(--surface); display:flex; align-items:center; justify-content:center; font-size:48px; }
.of-modal .of-name { font-size:20px; font-weight:800; text-align:center; margin:14px 0 2px; line-height:1.2; word-break:break-word; }
.of-modal .of-age { text-align:center; font-size:13px; color:var(--xm); margin-bottom:14px; min-height:16px; }
.of-modal .of-side > .of-ct { margin-top:8px; }
.of-modal .of-main { padding:16px 24px; overflow-y:auto; min-width:0; display:flex; flex-direction:column; gap:12px; }
.of-modal .of-panel { padding:14px; border:1px solid var(--l-fg); border-radius:6px; background:var(--l-bg); }
.of-modal .of-panel.g { border-color:var(--g-fg); background:var(--g-bg); }
.of-modal .of-cap { font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; }
.of-modal .of-g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.of-modal .of-g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.of-modal .of-g5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.of-modal .of-gap { margin-top:10px; }
.of-modal .of-ct { position:relative; border:1px solid; border-radius:6px; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px 5px; gap:3px; background:var(--surface); min-width:0; margin:0; }
.of-modal .of-ct small { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.9; line-height:1.15; margin:0; display:block; }
.of-modal .of-ct b { font-size:15px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.of-modal .of-ct input:not([type=checkbox]):not([type=radio]) { display:block; width:100%; min-height:0; height:auto; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.25; text-align:center; box-shadow:none !important; outline:none; overflow-wrap:anywhere; }
.of-modal .of-ct textarea { display:block; width:100%; min-height:0; height:auto; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.25; text-align:center; resize:none; overflow:hidden; overflow-wrap:anywhere; box-shadow:none !important; outline:none; }
.of-modal .of-ct ::placeholder { color:inherit; opacity:.5; font-weight:500; }
.of-modal .of-sw .of-val { display:block; width:100%; font-size:15px; font-weight:700; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
.of-modal .of-sw > select { position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; cursor:pointer; z-index:1; }
.of-modal .of-g { color:var(--g-fg); border-color:var(--g-fg); }
.of-modal .of-b { color:var(--b-fg); border-color:var(--b-fg); }
.of-modal .of-y { color:var(--y-fg); border-color:var(--y-fg); }
.of-modal .of-p { color:var(--p-fg); border-color:var(--p-fg); }
.of-modal .of-o { color:var(--o-fg); border-color:var(--o-fg); }
.of-modal .of-l { color:var(--l-fg); border-color:var(--l-fg); }
.of-modal .of-w { color:var(--xi); border-color:var(--xl); }
.of-modal .of-clr { position:absolute; right:4px; bottom:4px; width:28px; height:28px; min-height:0; padding:0; border:0; background:transparent; color:inherit; font-size:15px; opacity:.7; cursor:pointer; box-shadow:none; }
.of-modal label.of-tog { cursor:pointer; min-height:52px; }
.of-modal label.of-tog input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.of-modal label.of-tog.of-b { background:var(--b-bg); }
.of-modal label.of-tog.of-y { background:var(--y-bg); }
.of-modal label.of-tog.of-g { background:var(--g-bg); }
.of-modal label.of-tog.of-p { background:var(--p-bg); }
.of-modal label.of-tog.of-l { background:var(--l-bg); }
.of-modal label.of-tog:has(input:checked) { background:color-mix(in srgb,currentColor 24%,var(--surface)); }
.of-modal label.of-tog:has(input:checked) b { font-weight:800; }
.of-modal .of-ft { flex:0 0 auto; padding:12px 24px; border-top:1px solid var(--xs); display:flex; justify-content:center; gap:12px; background:var(--surface); }
.of-modal .of-bt { width:210px; min-height:48px; padding:4px 8px; border:1px solid; border-radius:6px; font-family:inherit; font-size:15px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; }
.of-modal .of-bt.s { background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)); color:var(--g-fg); border-color:var(--g-fg); font-weight:800; }
/* Kontrast textu hlavního tlačítka (test 25. 10. 2026): ve světlém režimu text o 20 % tmavší (dřív 3,9 : 1, nově 4,9 : 1),
   v tmavém režimu podklad méně namíchaný (dřív 4,49 : 1, nově 5,2 : 1). Podklad ve světlém režimu se nemění. */
html:not(.dark) .of-modal .of-bt.s { color:color-mix(in srgb,var(--g-fg) 80%,#000); }
html.dark .of-modal .of-bt.s { background:color-mix(in srgb,var(--g-fg) 18%,var(--g-bg)); }
.of-modal .of-bt.c { background:var(--b-bg); color:var(--b-fg); border-color:var(--b-fg); }

@media (max-width:820px) {
.of-modal { padding:6px !important; }
.of-modal .of-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
.of-modal .of-hd { padding:12px 60px 10px; }
.of-modal .of-ti { font-size:18px; }
.of-modal .of-bd { display:block; overflow-y:auto; }
.of-modal .of-side { display:flex; align-items:center; gap:12px; padding:12px 14px; border-right:0; border-bottom:1px solid var(--xs); overflow:visible; }
.of-modal .of-photo { width:64px; height:64px; flex:0 0 64px; aspect-ratio:auto; font-size:28px; }
.of-modal .of-sidetx { flex:1; min-width:0; }
.of-modal .of-name { text-align:left; margin:0 0 2px; font-size:16px; }
.of-modal .of-age { text-align:left; margin:0; }
.of-modal .of-side > .of-ct { display:none; }
.of-modal .of-main { padding:12px 14px; overflow:visible; gap:10px; }
.of-modal .of-g3, .of-modal .of-g2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.of-modal .of-g5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.of-modal .of-full { grid-column:1 / -1; }
.of-modal .of-ct input:not([type=checkbox]):not([type=radio]), .of-modal .of-ct textarea, .of-modal .of-sw .of-val { font-size:14px; }
.of-modal .of-ft { padding:10px 14px 16px; }
.of-modal .of-bt { width:auto; flex:1; }
}
.of-modal .of-bd.nos { display:block; overflow-y:auto; }
.of-modal .of-bd.nos .of-main { overflow:visible; }
.of-modal .of-g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.of-modal .of-g1 { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.of-modal .of-ct small + small { margin-top:-1px; }
.of-modal .of-note { font-size:12px; color:var(--xm); text-align:center; line-height:1.4; margin:2px 0 0; }
.of-modal .of-warn { border:1px solid var(--p-fg); background:var(--p-bg); color:var(--p-fg); border-radius:6px; padding:10px 14px; font-size:13px; font-weight:700; text-align:center; }
.of-modal.of-wrap { position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; background:rgba(47,52,18,.6); padding:12px; }
.of-modal > .of-win, html.compact-preview .of-modal > .of-win { width:100% !important; max-width:var(--ofw,1320px) !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; border:1px solid var(--xl) !important; border-radius:6px !important; box-shadow:none !important; background:var(--surface) !important; }

@media (max-width:820px) {
.of-modal > .of-win, html.compact-preview .of-modal > .of-win { max-height:98vh !important; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; }
.of-modal .of-g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.of-modal .of-ct:has(.of-clr) input { padding:0 22px !important; text-overflow:clip; }
.of-modal .of-bt.d { background:var(--p-bg); color:var(--p-fg); border-color:var(--p-fg); }
.of-modal .of-chips { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin-top:10px; }
.of-modal .of-chip { min-height:44px; padding:4px 6px; text-align:center; line-height:1.15; overflow-wrap:anywhere; border:1px solid var(--b-fg); border-radius:6px; background:var(--b-bg); color:var(--b-fg); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; box-shadow:none; }
.of-modal .of-act { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:4px 10px; margin-top:10px; border:1px solid; border-radius:6px; font-family:inherit; font-size:14px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.2; }
.of-modal .of-act.of-b { background:var(--b-bg); color:var(--b-fg); border-color:var(--b-fg); }
.of-modal .of-act.of-g { background:var(--g-bg); color:var(--g-fg); border-color:var(--g-fg); }
.of-modal .of-act.of-l { background:var(--l-bg); color:var(--l-fg); border-color:var(--l-fg); }
.of-modal .of-act.of-p { background:var(--p-bg); color:var(--p-fg); border-color:var(--p-fg); }
.of-modal .of-act.of-y { background:var(--y-bg); color:var(--y-fg); border-color:var(--y-fg); }
.of-modal .of-act.of-o { background:var(--o-bg); color:var(--o-fg); border-color:var(--o-fg); }
.of-modal .of-msg { font-size:15px; font-weight:700; line-height:1.4; text-align:center; padding:6px 4px 4px; overflow-wrap:anywhere; }
.of-modal .of-bd.nos .of-main { padding:16px 20px; }
.of-modal .of-g2 > .of-act, .of-modal .of-g3 > .of-act, .of-modal .of-g4 > .of-act { margin-top:0; }
.of-modal .of-sub { display:block; font-size:11px; font-weight:500; line-height:1.25; opacity:.85; text-align:center; overflow-wrap:anywhere; }
.of-modal .of-ct small:empty { display:none; }

/* Úzké telefony (≤ 430 px): menší vnitřní okraje a popisky, aby se vešla i nejdelší německá, švédská a ruská slova */
@media (max-width: 430px) {
.of-modal .of-main { padding:10px 8px !important; }
.of-modal .of-panel { padding:8px; }
.of-modal .of-ct { padding:6px 4px; }
.of-modal .of-ct small { font-size:9.5px; letter-spacing:.2px; }
.of-modal .of-sw .of-val { font-size:13px; }
}

@media (max-width:820px) {
.of-modal .of-chips { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-columns:auto; }
}
/* Stejně velké dlaždice v řadě po --n, nedotažená poslední řada je vystředěná */
.of-modal .of-gc { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.of-modal .of-gc > * { flex:0 0 calc((100% - (var(--n) - 1) * 10px) / var(--n)); min-width:0; }

@media (max-width:820px) {
.of-modal .of-gc { gap:8px; --n:2 !important; }
.of-modal .of-gc > * { flex-basis:calc((100% - 8px) / 2); }
}

/* Telefon: dlaždice ve výběru kočky pod fotkou zůstává vidět (formulář Přidat výstavu) */
@media (max-width:820px) {
.of-modal .of-side:has(> .of-keep) { flex-wrap:wrap; }
.of-modal .of-side > .of-ct.of-keep { display:flex; flex:1 0 100%; margin-top:6px; }
}
/* Podklad pro přihlášku na výstavu: text ke zkopírování */
.of-modal .of-entry-text { display:block; width:100%; min-height:300px; box-sizing:border-box; padding:12px; border:1px solid var(--l-fg); border-radius:6px; background:var(--surface); color:var(--xi); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; resize:none; }
/* Šablony smluv: víceřádkové texty zarovnané doleva, popisek uprostřed */
.of-modal .of-ct.of-left { align-items:stretch; }
.of-modal .of-ct.of-left small { text-align:center; margin-bottom:4px; }
.of-modal .of-ct.of-left textarea { text-align:left; font-weight:600; font-size:14px; line-height:1.55; }

@media (max-width:820px) {
.of-modal .of-g2.of-stack { grid-template-columns:minmax(0,1fr); }
}
/* Zpětná vazba: volba typu jako dvě dlaždice (tlačítka), vybraná se ztmaví; prostřední tlačítko patičky (Obrázek) */
.of-modal button.of-ct.of-tile { cursor:pointer; font-family:inherit; width:100%; }
.of-modal button.of-ct.of-tile.of-y { background:var(--y-bg); }
.of-modal button.of-ct.of-tile.of-p { background:var(--p-bg); }
.of-modal button.of-ct.of-tile.of-on { background:color-mix(in srgb,currentColor 24%,var(--surface)); }
.of-modal button.of-ct.of-tile.of-on b { font-weight:800; }
.of-modal .of-bt.l { background:var(--l-bg); color:var(--l-fg); border-color:var(--l-fg); }
.of-modal #fb-message { min-height:110px; }
.of-modal .dc-sub { margin-top:2px; font-size:12px; color:var(--xm); }
.of-modal .dc-bd { flex:1; min-height:0; display:grid; grid-template-columns:320px minmax(0,1fr); overflow:hidden; }
.of-modal .dc-side { padding:6px; background:var(--l-bg); border-right:1px solid var(--xs); overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.of-modal .dc-main { padding:12px 16px; overflow-y:auto; min-width:0; display:flex; flex-direction:column; gap:12px; }
.of-modal .dc-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.of-modal .dc-chip { display:inline-flex; align-items:stretch; border:1px solid var(--y-fg); border-radius:6px; background:var(--y-bg); color:var(--y-fg); overflow:hidden; }
.of-modal .dc-chip-load { min-height:44px; padding:4px 12px; border:0; background:transparent; color:inherit; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.of-modal .dc-chip-del { width:36px; border:0; border-left:1px solid var(--y-fg); background:transparent; color:inherit; font-size:12px; cursor:pointer; }
.of-modal .dc-chip-custom { min-height:44px; padding:4px 14px; border:1px dashed var(--xl); background:var(--surface); color:var(--xi); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.of-modal label.of-ct.of-tile, .of-modal button.of-ct.of-tile { cursor:pointer; font-family:inherit; }
.of-modal label.of-ct.of-tile.of-b, .of-modal button.of-ct.of-tile.of-b { background:var(--b-bg); }
.of-modal label.of-ct.of-tile.of-l, .of-modal button.of-ct.of-tile.of-l { background:var(--l-bg); }
.of-modal .dc-on { background:color-mix(in srgb,currentColor 24%,var(--surface)) !important; }
.of-modal .dc-on b { font-weight:800; }
.of-modal .dc-units { gap:8px; }
.of-modal .dc-units .of-tile { min-height:62px; width:100%; }
.of-modal .dc-medrow .of-ct { margin:0; }
.of-modal .dc-res #dcalc-big-result { margin:6px 0; text-align:center; font-size:34px; font-weight:800; line-height:1.15; color:var(--g-fg); overflow-wrap:anywhere; }
.of-modal .dc-res #dcalc-detail-result { margin-bottom:10px; text-align:center; font-size:13px; line-height:1.5; color:var(--xm); overflow-wrap:anywhere; }
.of-modal .dc-res .of-act { margin-top:0; }
.of-modal .dc-par .of-act { margin-top:10px; }

@media (max-width:820px) {
.of-modal .dc-bd { display:flex; flex-direction:column; overflow-y:auto; gap:10px; padding:10px 12px; }
.of-modal .dc-side, .of-modal .dc-main { display:contents; }
.of-modal .dc-pac { order:1; }
.of-modal .dc-pre { order:2; }
.of-modal .dc-par { order:3; }
.of-modal .dc-res { order:4; }
.of-modal .dc-main > .of-note { order:5; }
}
.of-modal .dc-medrow .of-clr { width:40px; height:40px; right:2px; top:50%; bottom:auto; transform:translateY(-50%); font-size:18px; opacity:1; }
.of-modal .dc-medrow .of-ct:has(.of-clr) input { padding:0 44px !important; }
.ro-modal .ro-btns .of-act { flex: 1 1 0; min-width: 0; margin-top: 0; min-height: 56px; font-size: 15px; }
.ro-modal .ro-btns .of-act[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
.ro-modal .of-hd { padding: 10px 60px; }
.ro-modal .of-x { top: 50%; transform: translateY(-50%); right: 8px; }
}
/* Test 27. 10. 2026 – kontrast: textové barvy oken ztmaveny (světlý režim) / zesvětleny (tmavý) tak, aby text měl aspoň 4,5 : 1. Pastelová pozadí beze změny.
   --g-fg #420f6e→#350b5a, --xm #919865→#858c5a, --b-fg #1f5fb0→#1a5299, --o-fg #b4531a→#9a4514; tmavý --g-fg →#bf9ce8, --b-fg →#a3cbf8, --p-fg →#f6b5cf, --l-fg →#e6eacd; nový vzhled --text3 #9ba26a→#8b9358. */
/* Test 27. 10. 2026 – dotykové plochy: „ד u data měl klikací výšku 28 px; teď 44 px (průhledné tlačítko, křížek vypadá stejně). */
.of-modal .of-clr { bottom:0; height:44px; }

/* ── Karta koťátka (#pup-overlay): nové rozložení, schválený návrh 2 (22. 10. 2026) ── */
#pup-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --y-bg:#fff6d9; --y-fg:#7a5a00; --b-bg:#e6f0fd; --b-fg:#1a5299; --p-bg:#fdeaf0; --p-fg:#a02a5c; --o-bg:#ffe9d9; --o-fg:#9a4514; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #pup-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --y-bg:#3b3210; --y-fg:#f0d36a; --b-bg:#14283f; --b-fg:#a3cbf8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --o-bg:#40231a; --o-fg:#f0b48a; --l-bg:#444a1f; --l-fg:#e6eacd; }
#pup-overlay .pt-win { width:100%; max-width:1320px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); box-sizing:border-box; }
#pup-overlay .pt-win * { box-sizing:border-box; }
#pup-overlay .pt-hd { position:relative; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); flex:0 0 auto; }
#pup-overlay .pt-ti { font-size:22px; font-weight:800; line-height:1.2; }
#pup-overlay .pt-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#pup-overlay .pt-bd { flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; }
#pup-overlay .pt-side { padding:20px 24px; border-right:1px solid var(--xs); overflow-y:auto; background:var(--l-bg); }
#pup-overlay .pt-side #p-img-preview { width:100% !important; height:auto !important; aspect-ratio:1; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:48px; overflow:hidden; cursor:pointer; }
#pup-overlay .pt-side #p-img-preview img { width:100%; height:100%; object-fit:cover; }
#pup-overlay .pt-name { font-size:20px; font-weight:800; text-align:center; margin:14px 0 2px; line-height:1.2; word-break:break-word; }
#pup-overlay .pt-age { text-align:center; font-size:13px; color:var(--xm); margin-bottom:14px; min-height:16px; }
#pup-overlay .pt-side > .pt-ct { margin-top:8px; }
#pup-overlay .pt-main { padding:16px 24px; overflow-y:auto; min-width:0; display:block; max-height:none; }
#pup-overlay .pt-panel { padding:14px; border:1px solid var(--l-fg); border-radius:6px; background:var(--l-bg); margin-bottom:12px; }
#pup-overlay .pt-panel.g { border-color:var(--g-fg); background:var(--g-bg); }
#pup-overlay .pt-cap { font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; }
#pup-overlay .pt-g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#pup-overlay .pt-g6 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
#pup-overlay .pt-full { grid-column:1 / -1; }
#pup-overlay .pt-hide { display:none !important; }
#pup-overlay .pt-ct { position:relative; border:1px solid; border-radius:6px; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px 8px; gap:3px; background:var(--surface); min-width:0; margin:0; }
#pup-overlay .pt-ct small { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.9; line-height:1.15; margin:0; display:block; }
#pup-overlay .pt-ct b { font-size:15px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
#pup-overlay .pt-ct input:not([type=checkbox]):not([type=hidden]), #pup-overlay .pt-ct select { display:block; width:100%; min-height:0; height:auto; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.25; text-align:center; text-align-last:center; box-shadow:none !important; outline:none; overflow-wrap:anywhere; }
#pup-overlay .pt-ct ::placeholder { color:inherit; opacity:.5; font-weight:500; }
#pup-overlay .pt-ct #p-father-manual { margin-top:4px !important; border-top:1px dashed currentColor !important; padding-top:4px !important; position:relative; z-index:2; }
#pup-overlay .pt-sw .pt-val { display:block; width:100%; font-size:15px; font-weight:700; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
#pup-overlay .pt-sw > select { position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; cursor:pointer; z-index:1; }
#pup-overlay .pt-clr { position:absolute; right:4px; top:4px; width:28px; height:28px; min-height:0; padding:0; border:0; background:transparent; color:inherit; font-size:15px; opacity:.7; cursor:pointer; box-shadow:none; }
#pup-overlay .pt-ct:has(.pt-clr) small { padding:0 20px; }
#pup-overlay .pt-cur .cur-dropdown { width:100%; }
#pup-overlay .pt-cur .cur-dropdown-btn { width:100%; min-height:0; padding:0; border:0 !important; background:transparent !important; color:inherit; font-weight:700; font-size:15px; display:flex; justify-content:center; gap:6px; box-shadow:none !important; }
#pup-overlay .pt-g { color:var(--g-fg); border-color:var(--g-fg); }
#pup-overlay .pt-b { color:var(--b-fg); border-color:var(--b-fg); }
#pup-overlay .pt-y { color:var(--y-fg); border-color:var(--y-fg); }
#pup-overlay .pt-p { color:var(--p-fg); border-color:var(--p-fg); }
#pup-overlay .pt-o { color:var(--o-fg); border-color:var(--o-fg); }
#pup-overlay .pt-l { color:var(--l-fg); border-color:var(--l-fg); }
#pup-overlay .pt-st { min-height:52px; padding:4px 6px; border:1px solid; border-radius:6px; font-family:inherit; font-size:14px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; overflow-wrap:anywhere; }
#pup-overlay .pt-st.pt-g { background:var(--g-bg); }
#pup-overlay .pt-st.pt-y { background:var(--y-bg); }
#pup-overlay .pt-st.pt-b { background:var(--b-bg); }
#pup-overlay .pt-st.pt-p { background:var(--p-bg); }
#pup-overlay .pt-st.pt-l { background:var(--l-bg); }
#pup-overlay .pt-st.pt-o { background:var(--o-bg); }
#pup-overlay .pt-st.on { background:color-mix(in srgb,currentColor 24%,var(--surface)) !important; font-weight:800; }
#pup-overlay .pt-lbtns { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
#pup-overlay .pt-lbtns .pt-bt { width:auto; min-height:40px; padding:4px 16px; font-size:13px; }
#pup-overlay .pt-ft { flex:0 0 auto; padding:12px 24px; border-top:1px solid var(--xs); display:flex; justify-content:center; gap:12px; background:var(--surface); flex-wrap:wrap; }
#pup-overlay .pt-bt { width:210px; min-height:48px; padding:4px 8px; border:1px solid; border-radius:6px; font-family:inherit; font-size:15px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; }
#pup-overlay .pt-ft .pt-bt.l { width:270px; }
#pup-overlay .pt-bt.s { background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)); color:var(--g-fg); border-color:var(--g-fg); font-weight:800; }
#pup-overlay .pt-bt.c, #pup-overlay .pt-bt.b { background:var(--b-bg); color:var(--b-fg); border-color:var(--b-fg); }
#pup-overlay .pt-bt.p { background:var(--p-bg); color:var(--p-fg); border-color:var(--p-fg); }
#pup-overlay .pt-bt.l { background:var(--l-bg); color:var(--l-fg); border-color:var(--l-fg); }
#pup-overlay .pt-bt.g { background:var(--g-bg); color:var(--g-fg); border-color:var(--g-fg); }
/* Záložky sekcí (js/pup-tabs.js) — stejný vzhled jako u profilu dospělé kočky */
html.compact-preview #pup-overlay.has-tabs .apple-sec-row { display: none !important; }
html.compact-preview #pup-overlay.has-tabs .apple-sec-group { border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; }
html.compact-preview #pup-overlay.has-tabs .apple-sec-content { border: 1px solid var(--l-fg); border-radius: 6px; margin-top: 8px; padding: 14px; background: var(--l-bg); }
html.compact-preview #pup-overlay .pup-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 4px 0 4px; }
html.compact-preview #pup-overlay .pup-tab { grid-column: span 2; position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; border: 1px solid var(--ct-fg) !important; border-radius: 6px !important; background: var(--ct-bg) !important; color: var(--ct-fg) !important; font-family: inherit; font-weight: 700; font-size: var(--ct-size, 13px); cursor: pointer; box-shadow: none !important; }
html.compact-preview #pup-overlay .pup-tab.on { background: color-mix(in srgb, var(--ct-fg) 22%, var(--ct-bg)) !important; font-weight: 800; }
html.compact-preview #pup-overlay .pup-tab .ct-tx { position: relative; white-space: nowrap; }
html.compact-preview #pup-overlay .pup-tab .ct-ic { position: absolute; right: calc(100% + 5px); top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1; }
html.compact-preview #pup-overlay .pup-tab .ct-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #5710b9; display: none; }
/* Pole uvnitř sekcí jako barevné dlaždice (popisek nahoře, hodnota uprostřed) */
#pup-overlay .apple-sec-content > .field, #pup-overlay .apple-sec-content > div > .field { --tf: var(--xl); margin: 0 0 10px; }
#pup-overlay .apple-sec-content .field:nth-child(6n+1) { --tf: var(--g-fg); }
#pup-overlay .apple-sec-content .field:nth-child(6n+2) { --tf: var(--b-fg); }
#pup-overlay .apple-sec-content .field:nth-child(6n+3) { --tf: var(--y-fg); }
#pup-overlay .apple-sec-content .field:nth-child(6n+4) { --tf: var(--p-fg); }
#pup-overlay .apple-sec-content .field:nth-child(6n+5) { --tf: var(--l-fg); }
#pup-overlay .apple-sec-content .field:nth-child(6n) { --tf: var(--o-fg); }
#pup-overlay .apple-sec-content .field:has(> input:not([type=checkbox]):not([type=hidden]), > select, > textarea) { border: 1px solid var(--tf); border-radius: 6px; background: var(--surface); padding: 6px 10px; color: var(--tf); }
#pup-overlay .apple-sec-content .field:has(> input:not([type=checkbox]):not([type=hidden]), > select, > textarea) > label { display: block; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tf); margin: 0 0 3px; }
#pup-overlay .apple-sec-content .field > :is(input:not([type=checkbox]):not([type=hidden]), select, textarea) { width: 100%; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0; text-align: center; font-weight: 700; color: inherit; }
#pup-overlay .apple-sec-content .btn { border: 1px solid currentColor !important; border-radius: 6px !important; box-shadow: none !important; }
html.compact-preview #pup-overlay .apple-sec-content :is(#p-health-records,#p-weights,#p-feedings,#p-attachments):has(button) { border: 1px solid var(--xs); border-radius: 6px; overflow: hidden; background: var(--surface); }
@media (max-width:820px) {
#pup-overlay .pt-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); height:98vh; height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#pup-overlay .pt-hd { padding:12px 60px 10px; }
#pup-overlay .pt-ti { font-size:18px; }
#pup-overlay .pt-bd { display:block; overflow-y:auto; }
#pup-overlay .pt-side { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:4px 12px; padding:12px 14px; border-right:0; border-bottom:1px solid var(--xs); }
#pup-overlay .pt-side > div:first-child { grid-row:1 / 3; }
#pup-overlay .pt-side #p-img-preview { width:64px !important; font-size:28px; }
#pup-overlay .pt-sidetx { min-width:0; }
#pup-overlay .pt-name { text-align:left; margin:0 0 2px; font-size:16px; }
#pup-overlay .pt-age { text-align:left; margin:0; }
#pup-overlay .pt-side > .pt-ct { display:none; }
#pup-overlay .pt-main { padding:12px 14px; overflow:visible; }
#pup-overlay .pt-g3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#pup-overlay .pt-g6 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#pup-overlay .pt-st { min-height:46px; font-size:13px; }
#pup-overlay .pt-ct input:not([type=checkbox]):not([type=hidden]), #pup-overlay .pt-ct select, #pup-overlay .pt-sw .pt-val { font-size:14px; }
#pup-overlay .pt-ft { padding:10px 14px 16px; gap:6px; }
#pup-overlay .pt-bt, #pup-overlay .pt-ft .pt-bt.l { width:auto; flex:1 1 40%; font-size:13px; }
html.compact-preview #pup-overlay .pup-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width:430px) {
#pup-overlay .pt-g6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Datumová pole v sekcích koťátka jako dlaždice (křížek mazání v rohu) */
#pup-overlay .apple-sec-content .field:has(.date-display) { position: relative; border: 1px solid var(--tf); border-radius: 6px; background: var(--surface); padding: 6px 10px; color: var(--tf); }
#pup-overlay .apple-sec-content .field:has(.date-display) > label { display: block; text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tf); margin: 0 0 3px; padding: 0 22px; }
#pup-overlay .apple-sec-content .field:has(.date-display) > div { display: block !important; }
#pup-overlay .apple-sec-content .field .date-display { display: block; width: 100%; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0; text-align: center; font-weight: 700; color: inherit; }
#pup-overlay .apple-sec-content .field:has(.date-display) > div > button { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; min-height: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; opacity: .7; }
/* PC: levý pruh s fotkou má kolem sebe bílý okraj (stejně jako pravý panel), telefon beze změny */
@media (min-width:821px) {
html body #litter-overlay .lt-side,
html body #pup-overlay .pt-side,
html body #weight-overlay .wt-side,
html body .of-modal .of-side,
html body #litter-shows-modal .ls-side,
html body #litter-show-form-modal .sf-side,
html body #pup-shows-modal .ps-side,
html body #pup-show-form-modal .sf-side,
html body #milestones-modal .ms-side,
html body #pup-feeding-form-modal .pf-side,
html body #stud-agreement-overlay .sa-side,
html body #reminder-form-modal .rm-side,
html body #bulk-pup-overlay .bk-side,
html body #mating-overlay .ml-side,
html body #mating-form-overlay .mf-side,
html body #cycle-predictor-overlay .cp-side,
html body #health-form-modal .hf-side,
html body #pup-health-form-modal .hf-side
{ margin:6px !important; border:1px solid var(--xl) !important; border-radius:6px !important; }
}
/* PC: mezery kolem pruhu a pravého panelu všude 6 px (pruh má margin 6, hlavní část padding 6 bez levého) */
@media (min-width:821px) {
html body #litter-overlay .lt-bd > :not([class$="-side"]),
html body #pup-overlay .pt-bd > :not([class$="-side"]),
html body #weight-overlay .wt-bd > :not([class$="-side"]),
html body .of-modal .of-bd:not(.nos) > :not([class$="-side"]),
html body #health-form-modal .hf-bd > :not([class$="-side"]),
html body #litter-shows-modal .ls-bd2 > :not([class$="-side"]),
html body #litter-show-form-modal .sf-bd > :not([class$="-side"]),
html body #pup-shows-modal .ps-bd2 > :not([class$="-side"]),
html body #pup-show-form-modal .sf-bd > :not([class$="-side"]),
html body #milestones-modal .ms-bd > :not([class$="-side"]),
html body #pup-health-form-modal .hf-bd > :not([class$="-side"]),
html body #pup-feeding-form-modal .pf-bd > :not([class$="-side"]),
html body #reminder-form-modal .rm-bd > :not([class$="-side"]),
html body #bulk-pup-overlay .bk-bd > :not([class$="-side"]),
html body #mating-overlay .ml-bd > :not([class$="-side"]),
html body #mating-form-overlay .mf-bd > :not([class$="-side"]),
html body #cycle-predictor-overlay .cp-bd > :not([class$="-side"]),
html body #stud-agreement-content > :not([class$="-side"])
{ padding:6px 6px 6px 0 !important; }
}
#pup-overlay .apple-sec-content .field:has(.date-display) > div > button { top:50%; height:44px; width:44px; right:0; transform:translateY(-50%); }

/* ── Váha (#weight-overlay, sdílené koťátkem i kočkou): nové rozložení, schválený návrh 1 (22. 10. 2026) ── */
#weight-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --y-bg:#fff6d9; --y-fg:#7a5a00; --b-bg:#e6f0fd; --b-fg:#1a5299; --p-bg:#fdeaf0; --p-fg:#a02a5c; --o-bg:#ffe9d9; --o-fg:#9a4514; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #weight-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --y-bg:#3b3210; --y-fg:#f0d36a; --b-bg:#14283f; --b-fg:#a3cbf8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --o-bg:#40231a; --o-fg:#f0b48a; --l-bg:#444a1f; --l-fg:#e6eacd; }
#weight-overlay .wt-win { width:100%; max-width:1140px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); box-sizing:border-box; }
#weight-overlay .wt-win * { box-sizing:border-box; }
#weight-overlay .wt-hd { position:relative; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); flex:0 0 auto; }
#weight-overlay .wt-ti { font-size:22px; font-weight:800; line-height:1.2; }
#weight-overlay .wt-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#weight-overlay .wt-bd { flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; }
#weight-overlay .wt-side { padding:20px 24px; border-right:1px solid var(--xs); overflow-y:auto; background:var(--l-bg); }
#weight-overlay .wt-photo { width:100%; aspect-ratio:1; border:1px solid var(--xl); border-radius:6px; background-size:cover; background-position:center; background-color:var(--surface); display:flex; align-items:center; justify-content:center; font-size:48px; }
#weight-overlay .wt-name { font-size:20px; font-weight:800; text-align:center; margin:14px 0 2px; line-height:1.2; word-break:break-word; }
#weight-overlay .wt-age { text-align:center; font-size:13px; color:var(--xm); margin-bottom:14px; min-height:16px; }
#weight-overlay .wt-side > .wt-ct { margin-top:8px; }
#weight-overlay .wt-main { padding:20px 24px; overflow-y:auto; min-width:0; display:flex; flex-direction:column; gap:12px; max-height:none; }
#weight-overlay .wt-panel { padding:16px; border:1px solid var(--l-fg); border-radius:6px; background:var(--l-bg); }
#weight-overlay .wt-panel.g { border-color:var(--g-fg); background:var(--g-bg); }
#weight-overlay .wt-cap { font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; }
#weight-overlay .wt-g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#weight-overlay .wt-ct { position:relative; border:1px solid; border-radius:6px; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px 8px; gap:3px; background:var(--surface); min-width:0; margin:0; }
#weight-overlay .wt-ct small { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.9; line-height:1.15; margin:0; display:block; }
#weight-overlay .wt-ct b { font-size:15px; font-weight:700; line-height:1.2; }
#weight-overlay .wt-ct input { display:block; width:100%; min-height:0; height:auto; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.25; text-align:center; box-shadow:none !important; outline:none; overflow-wrap:anywhere; }
#weight-overlay .wt-ct ::placeholder { color:inherit; opacity:.5; font-weight:500; }
#weight-overlay .wt-big { min-height:96px; }
#weight-overlay .wt-big input { font-size:32px; font-weight:800; font-family:'Nunito',inherit; }
#weight-overlay .wt-g { color:var(--g-fg); border-color:var(--g-fg); }
#weight-overlay .wt-b { color:var(--b-fg); border-color:var(--b-fg); }
#weight-overlay .wt-p { color:var(--p-fg); border-color:var(--p-fg); }
#weight-overlay .wt-o { color:var(--o-fg); border-color:var(--o-fg); }
#weight-overlay .wt-clr { position:absolute; right:4px; top:4px; width:28px; height:28px; min-height:0; padding:0; border:0; background:transparent; color:inherit; font-size:15px; opacity:.7; cursor:pointer; box-shadow:none; }
#weight-overlay .wt-ct:has(.wt-clr) small { padding:0 20px; }
#weight-overlay .wt-q { min-height:48px; padding:4px 8px; border:1px solid; border-radius:6px; font-family:inherit; font-size:14px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; overflow-wrap:anywhere; }
#weight-overlay .wt-q.y { background:var(--y-bg); color:var(--y-fg); border-color:var(--y-fg); }
#weight-overlay .wt-q.l { background:var(--l-bg); color:var(--l-fg); border-color:var(--l-fg); }
#weight-overlay .wt-ft { flex:0 0 auto; padding:12px 24px; border-top:1px solid var(--xs); display:flex; justify-content:center; gap:12px; background:var(--surface); }
#weight-overlay .wt-bt { width:210px; min-height:48px; padding:4px 8px; border:1px solid; border-radius:6px; font-family:inherit; font-size:15px; font-weight:700; text-align:center; cursor:pointer; box-shadow:none; line-height:1.15; }
#weight-overlay .wt-bt.s { background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)) !important; color:var(--g-fg) !important; border-color:var(--g-fg) !important; font-weight:800; }
#weight-overlay .wt-bt.c { background:var(--b-bg) !important; color:var(--b-fg) !important; border-color:var(--b-fg) !important; }
@media (max-width:820px) {
#weight-overlay .wt-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#weight-overlay .wt-hd { padding:12px 60px 10px; }
#weight-overlay .wt-ti { font-size:18px; }
#weight-overlay .wt-bd { display:block; overflow-y:auto; }
#weight-overlay .wt-side { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:4px 12px; padding:12px 14px; border-right:0; border-bottom:1px solid var(--xs); overflow:visible; }
#weight-overlay .wt-photo { width:64px; height:64px; aspect-ratio:auto; font-size:28px; grid-row:1 / 3; }
#weight-overlay .wt-name { text-align:left; margin:0 0 2px; font-size:16px; }
#weight-overlay .wt-age { text-align:left; margin:0; }
#weight-overlay .wt-side > .wt-ct { display:none !important; }
#weight-overlay .wt-main { padding:12px 14px; overflow:visible; gap:10px; }
#weight-overlay .wt-g2 { gap:8px; }
#weight-overlay .wt-big { min-height:84px; }
#weight-overlay .wt-ft { padding:10px 14px 16px; }
#weight-overlay .wt-bt { width:auto; flex:1; }
}
/* PC: levý pruh s fotkou má kolem sebe bílý okraj (stejně jako pravý panel), telefon beze změny */
@media (min-width:821px) {
html body #litter-overlay .lt-side,
html body #pup-overlay .pt-side,
html body #weight-overlay .wt-side,
html body .of-modal .of-side,
html body #litter-shows-modal .ls-side,
html body #litter-show-form-modal .sf-side,
html body #pup-shows-modal .ps-side,
html body #pup-show-form-modal .sf-side,
html body #milestones-modal .ms-side,
html body #pup-feeding-form-modal .pf-side,
html body #stud-agreement-overlay .sa-side,
html body #reminder-form-modal .rm-side,
html body #bulk-pup-overlay .bk-side,
html body #mating-overlay .ml-side,
html body #mating-form-overlay .mf-side,
html body #cycle-predictor-overlay .cp-side,
html body #health-form-modal .hf-side,
html body #pup-health-form-modal .hf-side
{ margin:6px !important; border:1px solid var(--xl) !important; border-radius:6px !important; }
}
/* PC: mezery kolem pruhu a pravého panelu všude 6 px (pruh má margin 6, hlavní část padding 6 bez levého) */
@media (min-width:821px) {
html body #litter-overlay .lt-bd > :not([class$="-side"]),
html body #pup-overlay .pt-bd > :not([class$="-side"]),
html body #weight-overlay .wt-bd > :not([class$="-side"]),
html body .of-modal .of-bd:not(.nos) > :not([class$="-side"]),
html body #health-form-modal .hf-bd > :not([class$="-side"]),
html body #litter-shows-modal .ls-bd2 > :not([class$="-side"]),
html body #litter-show-form-modal .sf-bd > :not([class$="-side"]),
html body #pup-shows-modal .ps-bd2 > :not([class$="-side"]),
html body #pup-show-form-modal .sf-bd > :not([class$="-side"]),
html body #milestones-modal .ms-bd > :not([class$="-side"]),
html body #pup-health-form-modal .hf-bd > :not([class$="-side"]),
html body #pup-feeding-form-modal .pf-bd > :not([class$="-side"]),
html body #reminder-form-modal .rm-bd > :not([class$="-side"]),
html body #bulk-pup-overlay .bk-bd > :not([class$="-side"]),
html body #mating-overlay .ml-bd > :not([class$="-side"]),
html body #mating-form-overlay .mf-bd > :not([class$="-side"]),
html body #cycle-predictor-overlay .cp-bd > :not([class$="-side"]),
html body #stud-agreement-content > :not([class$="-side"])
{ padding:6px 6px 6px 0 !important; }
}

/* ── Vlastní úpravy Psů ── */
#litter-overlay .lt-full2 { grid-column: span 2; }
@media (max-width: 760px) {
 #litter-overlay .lt-full2 { grid-column: 1 / -1; }
}
/* Platba (Psi): volba měny jako řada stejně velkých čipů uprostřed dlaždice */
.of-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px; }
.of-chip { min-width:64px; height:40px; padding:0 14px; border:1px solid var(--border,#e0d3bc); border-radius:6px; background:var(--surface,#fff); color:var(--text,#3f4517); font:inherit; font-weight:700; cursor:pointer; }
#pay-currency-chips .of-chip.active, #pay-currency-chips .of-chip[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:#3e431b; }
@media (max-width: 600px) { .of-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .of-chips .of-chip { min-width:0; width:100%; } }
@media (max-width: 600px) { #pay-currency-chips.of-chips { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px; width:100%; max-width:none; } #pay-currency-chips .of-chip { min-width:0 !important; width:100% !important; } }
/* Štěně (Psi): pět stavů v jedné řadě, poslední řada Základu bez osamělé dlaždice, tlačítka pod Základem uprostřed */
#pup-overlay .pt-g6 { grid-template-columns:repeat(5,minmax(0,1fr)); }
#pup-overlay .pt-g3 .pt-full { grid-column:1 / span 2; }
#pup-overlay .pt-lbtns { justify-content:center; }
#pup-overlay .pt-bt.y { background:var(--ak-reminders-bg,#fff4d6); color:var(--ak-reminders-fg,#7a5600); border:1px solid currentColor; }
@media (max-width: 900px) { #pup-overlay .pt-g6 { grid-template-columns:repeat(3,minmax(0,1fr)); } #pup-overlay .pt-g3 .pt-full { grid-column:1 / -1; } }
@media (max-width: 600px) { #pup-overlay .pt-g6 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { #pup-overlay .pt-g6 > :last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (min-width:601px) and (max-width:900px) { #pup-overlay .pt-g6 > :nth-child(4) { grid-column:1 / span 1; } }
/* Váha (Psi): přepínače Datum/Týden a Ráno/Večer jako dlaždice, vybraná je plná */
#weight-overlay .wt-q.btn-primary, #weight-overlay .wt-q[aria-pressed="true"] { background:var(--accent) !important; color:#fff !important; border-color:#3e431b !important; }
#weight-overlay .wt-g1 { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }

/* ── Okno Zásoba ── */
/* Editor zásoby (#supply-modal): tři sloupce stejných dlaždic, vše vycentrované (25. 10. 2026, návrh 3) */
#supply-modal.sp-wrap { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#f2f4e5; --g-fg:#454c19; --y-bg:#fff6d9; --y-fg:#7a5a00; --b-bg:#e6f0fd; --b-fg:#1a5299; --p-bg:#fdeaf0; --p-fg:#a02a5c; --l-bg:#f7f8f0; --l-fg:#974226; position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center; padding:12px; box-sizing:border-box; background:rgba(47,52,18,.6); }
html.dark #supply-modal.sp-wrap { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#333816; --g-fg:#cdd3b1; --y-bg:#3b3210; --y-fg:#f0d36a; --b-bg:#14283f; --b-fg:#a3cbf8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --l-bg:#444a1f; --l-fg:#e6eacd; }
#supply-modal .sp-win { width:100%; max-width:1360px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); }
#supply-modal .sp-hd { position:relative; flex:0 0 auto; text-align:center; padding:12px 64px; border-bottom:1px solid var(--xs); min-height:72px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#supply-modal .sp-hd h2 { margin:0; font-size:20px; font-weight:800; line-height:1.2; color:var(--xi); min-width:0; max-width:100%; overflow-wrap:anywhere; }
#supply-modal .sp-sub { margin-top:2px; font-size:12px; color:var(--xm); }
#supply-modal .sp-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#supply-modal .sp-bd { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px; background:var(--l-bg); display:grid; gap:6px; align-content:start; }
#supply-modal .sp-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; align-items:stretch; }
#supply-modal .sp-g { display:grid; grid-template-rows:auto repeat(3,1fr); gap:8px; padding:8px; border:1px solid; border-radius:6px; min-width:0; }
#supply-modal .sp-g.a { background:var(--g-bg); border-color:var(--g-fg); }
#supply-modal .sp-g.b { background:var(--y-bg); border-color:var(--y-fg); }
#supply-modal .sp-g.c { background:var(--b-bg); border-color:var(--b-fg); }
#supply-modal .sp-g h4 { margin:0; padding:2px 0; text-align:center; font-size:13px; font-weight:800; color:var(--xi); }
#supply-modal .sp-t { display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:96px; padding:8px 10px; box-sizing:border-box; min-width:0; border:1px solid var(--xl); border-radius:6px; background:var(--surface); text-align:center; }
#supply-modal .sp-t.sp-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:6px; }
#supply-modal .sp-t.off { opacity:.45; pointer-events:none; border-style:dashed; }
#supply-modal .sp-t label { display:block !important; margin:0 0 4px !important; text-align:center; font-size:11px !important; font-weight:800; color:var(--xm); text-transform:uppercase; letter-spacing:.4px; }
#supply-modal .sp-t input:not([type=checkbox]), #supply-modal .sp-t select { width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:8px 10px !important; margin:0 !important; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; color:var(--xi); font-size:15px; text-align:center; text-align-last:center; }
#supply-modal .sp-t > div { margin:0 !important; }
#supply-modal .sp-t > div[style*="display:flex"] { display:flex !important; gap:6px; align-items:center; width:100%; }
#supply-modal .sp-t > div[style*="display:flex"] input { flex:1 1 0 !important; width:auto; }
#supply-modal .sp-t > div[style*="display:flex"] .btn { flex:0 0 auto; min-height:44px; padding:0 12px !important; border-radius:6px !important; white-space:nowrap; }
#supply-modal .sp-t > div[style*="grid-template-columns:repeat(3"] { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#supply-modal .supply-type-tile { border-radius:6px !important; padding:6px 2px !important; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#supply-modal .sp-hint { margin:0; padding:4px 8px; text-align:center; font-size:11px; line-height:1.3; color:var(--xm); }
#supply-modal .sp-ft { flex:0 0 auto; display:flex; gap:6px; padding:6px; border-top:1px solid var(--xs); background:var(--surface); }
html body #supply-modal .sp-ft button { flex:1; min-height:48px; padding:4px 10px; border-radius:6px !important; font-weight:700 !important; font-size:15px; box-shadow:none !important; margin:0; width:auto; }
html body #supply-modal .sp-ft .sp-cancel { border:1px solid var(--l-fg) !important; background:var(--surface) !important; color:var(--l-fg) !important; }
html body #supply-modal .sp-ft .sp-save { flex:2; border:1px solid var(--g-fg) !important; background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)) !important; color:var(--g-fg) !important; }
html body #supply-modal .sp-ft .sp-del { border:1px solid var(--p-fg) !important; background:var(--p-bg) !important; color:var(--p-fg) !important; }
@media (max-width:1100px) {
#supply-modal .sp-win { max-width:720px; }
#supply-modal .sp-cols { grid-template-columns:minmax(0,1fr); }
#supply-modal .sp-g { grid-template-rows:auto; }
}
@media (max-width:820px) {
#supply-modal.sp-wrap { padding:6px; }
#supply-modal .sp-win { max-height:96vh; max-height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#supply-modal .sp-hd h2 { font-size:18px; }
}
html body #supply-modal > .sp-win { width:100% !important; max-width:1360px !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; border-radius:6px !important; border:1px solid var(--xl) !important; background:var(--surface) !important; box-shadow:none !important; }
@media (max-width:1100px) {
html body #supply-modal > .sp-win { max-width:720px !important; }
}
@media (max-width:820px) {
html body #supply-modal > .sp-win { max-height:96vh !important; max-height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; }
}
/* Editor zásoby – opravy po připomínce (25. 10. 2026): vyšší dlaždice, stejná spodní tlačítka, okno nad spodní lištou */
#supply-modal .sp-g { grid-template-rows:auto repeat(3,minmax(104px,1fr)); }
#supply-modal .sp-t { min-height:104px; }
#supply-modal .supply-type-tile { min-height:48px; }
@media (max-width:1100px) {
#supply-modal .sp-g { grid-template-rows:auto repeat(3,minmax(104px,1fr)); }
}
@media (max-width:820px) {
#supply-modal.sp-wrap { align-items:flex-start; padding:6px 6px calc(76px + env(safe-area-inset-bottom, 0px)); }
html body #supply-modal > .sp-win { max-height:calc(100dvh - 82px - env(safe-area-inset-bottom, 0px)) !important; }
#supply-modal .sp-ft { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
html body #supply-modal .sp-ft button, html body #supply-modal .sp-ft .sp-save { flex:none; min-height:56px; font-size:13px; line-height:1.15; padding:4px; display:flex; align-items:center; justify-content:center; text-align:center; }
}
/* Editor zásoby – spodní tlačítka: tři stejná, přesně pod sloupci, ikona + text (25. 10. 2026) */
#supply-modal .sp-ft { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; padding:6px !important; }
#supply-modal .sp-ft.two { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
html body #supply-modal .sp-ft button, html body #supply-modal .sp-ft .sp-save { flex:none !important; width:auto !important; min-width:0; height:56px; min-height:56px !important; margin:0 !important; padding:4px 6px !important; border-radius:6px !important; font-size:15px !important; font-weight:700 !important; line-height:1.15 !important; display:flex !important; flex-direction:row; align-items:center; justify-content:center; gap:8px; text-align:center; box-sizing:border-box; }
#supply-modal .sp-ft .ic { font-size:20px; line-height:1; }
@media (max-width:820px) {
html body #supply-modal .sp-ft button, html body #supply-modal .sp-ft .sp-save { flex-direction:column; gap:2px; height:64px; min-height:64px !important; font-size:12px !important; }
}
@media (max-width:420px) {
#supply-modal .sp-g { grid-template-rows:auto repeat(3,minmax(112px,1fr)); }
#supply-modal .sp-t { min-height:112px; }
}
/* Editor zásoby: tlačítko × u data expirace má v tmavém režimu dost kontrastu (dřív 3,2 : 1, 25. 10. 2026) */
#supply-modal .sp-t button[onclick^="clearDateField"] { color:var(--p-fg) !important; border-color:var(--p-fg) !important; background:var(--p-bg) !important; }

@media (max-width: 600px) { #custom-event-modal .of-g3 > :nth-child(3) { grid-column:1 / -1; } }

@media (max-width: 600px) { #other-income-modal .of-g3 > :nth-child(3) { grid-column:1 / -1; } }
/* Výběr výsledku v okně testů krycího psa: bez šipky prohlížeče, uprostřed dlaždice */
#spt-form-modal .of-ct select { appearance:none; -webkit-appearance:none; text-align:center; text-align-last:center; cursor:pointer; }
/* z Koček: #(confirm|prompt|choice|datepicker)-overlay */
/* Výběr data (#datepicker-overlay): okno s políčkem a jedním propojeným kolečkem Den · Měsíc · Rok, dvě stejná tlačítka (25. 10. 2026, návrh 3) */
#datepicker-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #datepicker-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --l-bg:#444a1f; --l-fg:#e6eacd; }
html body #datepicker-overlay .dp-win { width:400px !important; max-width:96% !important; max-height:96vh !important; max-height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; padding:0 !important; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; color:var(--xi); }
@media (max-width:820px) {
html body #datepicker-overlay .dp-win { width:96% !important; }
}
/* Potvrzovací okna (#confirm-overlay, #prompt-overlay) a obecné okno (#generic-modal-overlay): záhlaví s ikonou a nadpisem, text v rámečku, dvě stejná tlačítka (25. 10. 2026, návrh 2) */
#confirm-overlay, #prompt-overlay, #generic-modal-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --p-bg:#fdeaf0; --p-fg:#a02a5c; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #confirm-overlay, html.dark #prompt-overlay, html.dark #generic-modal-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --p-bg:#3d1a2a; --p-fg:#f6b5cf; --l-bg:#444a1f; --l-fg:#e6eacd; }
html body #confirm-overlay .dlg-win:has(#confirm-ok-btn.btn-danger), html body #prompt-overlay .dlg-win:has(#prompt-ok-btn.btn-danger) { border-color:var(--p-fg) !important; }
html body #confirm-overlay .dlg-win:has(#confirm-ok-btn.btn-danger) .dlg-bd, html body #prompt-overlay .dlg-win:has(#prompt-ok-btn.btn-danger) .dlg-bd { background:var(--p-bg); }
html body #confirm-overlay .dlg-win:has(#confirm-ok-btn.btn-danger) .dlg-t, html body #prompt-overlay .dlg-win:has(#prompt-ok-btn.btn-danger) .dlg-t { border-color:var(--p-fg); }
/* z Koček: pay-history|\.ph- */
/* ── Historie plateb (#pay-history-overlay), návrh 3 (26. 10. 2026): souhrny, pruh, tabulka plateb a vratek ── */
#pay-history-overlay.ph-modal { background: rgba(64,70,24,0.38) !important; padding: 12px !important; }
#pay-history-overlay .ph-win { --ofw: 880px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#pay-history-overlay .ph-sub { font-size: 13px; color: var(--xm); margin-top: 2px; word-break: break-word; }
#pay-history-overlay .ph-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; background: var(--l-bg); display: flex; flex-direction: column; gap: 6px; }
#pay-history-overlay .ph-g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
#pay-history-overlay .ph-t { border: 1px solid; border-radius: 6px; padding: 8px 4px; text-align: center; }
#pay-history-overlay .ph-t small { display: block; font-size: 11px; }
#pay-history-overlay .ph-t b { font-size: 16px; color: var(--xi); word-break: break-word; }
#pay-history-overlay .ph-g { background: var(--g-bg); color: var(--g-fg); border-color: var(--g-fg); }
#pay-history-overlay .ph-p { background: var(--p-bg); color: var(--p-fg); border-color: var(--p-fg); }
#pay-history-overlay .ph-b { background: var(--b-bg); color: var(--b-fg); border-color: var(--b-fg); }
#pay-history-overlay .ph-bar { height: 8px; border: 1px solid var(--g-fg); border-radius: 6px; overflow: hidden; background: var(--surface); }
#pay-history-overlay .ph-bar i { display: block; height: 100%; background: var(--g-fg); }
#pay-history-overlay .ph-cap { font-size: 12px; font-weight: 800; color: var(--xm); text-align: center; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
#pay-history-overlay .ph-cap-r { color: var(--p-fg); }
#pay-history-overlay .ph-empty { border: 1px solid var(--xs); border-radius: 6px; background: var(--surface); padding: 16px; text-align: center; color: var(--xm); }
#pay-history-overlay .ph-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 140px 140px; gap: 6px; width: 100%; padding: 0; margin: 0; border: none; background: none; font: inherit; text-align: center; }
#pay-history-overlay .ph-head span { font-size: 11px; color: var(--xm); font-weight: 700; }
#pay-history-overlay .ph-pay { cursor: pointer; }
#pay-history-overlay .ph-c { border: 1px solid var(--xs); border-radius: 6px; background: var(--surface); padding: 10px 6px; color: var(--xi); font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; word-break: break-word; min-width: 0; }
#pay-history-overlay .ph-pay:hover .ph-c { border-color: var(--xl); }
#pay-history-overlay .ph-am { font-weight: 800; color: var(--g-fg); }
#pay-history-overlay .ph-ref { grid-template-columns: 120px minmax(0,1fr) 140px 44px; }
#pay-history-overlay .ph-ref .ph-c { border-color: color-mix(in srgb, var(--p-fg) 40%, var(--p-bg)); background: var(--p-bg); }
#pay-history-overlay .ph-ref .ph-am, #pay-history-overlay .ph-note { color: var(--p-fg); }
#pay-history-overlay .ph-del { min-height: 44px; border: 1px solid var(--p-fg); border-radius: 6px; background: var(--surface); color: var(--p-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#pay-history-overlay .ph-att:empty { display: none; }
#pay-history-overlay .ph-btns { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--xs); flex: 0 0 auto; }
#pay-history-overlay .ph-btns .of-act { flex: 1 1 0; min-width: 0; margin: 0; min-height: 56px; }
@media (max-width: 700px) {
#pay-history-overlay.ph-modal { padding: 6px !important; }
#pay-history-overlay .ph-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#pay-history-overlay .of-hd { padding: 10px 60px; }
#pay-history-overlay .of-x { top: 50%; transform: translateY(-50%); right: 8px; }
#pay-history-overlay .ph-row { grid-template-columns: 92px minmax(0,1fr) 108px; }
#pay-history-overlay .ph-ref { grid-template-columns: 92px minmax(0,1fr) 100px 44px; }
#pay-history-overlay .ph-m { display: none !important; }
#pay-history-overlay .ph-t b { font-size: 14px; }
}

/* ── Společný kabát starších oken (30. 10. 2026): ostré 1px lemování, rohy 6 px, bez stínů, psí zelená; styl Koček ── */
.psi-okno { background: rgba(47,52,18,0.6) !important; }
.psi-okno-win,
:is(#notes-overlay,#export-overlay,#ht-overlay,#gsearch-overlay,#pgt-overlay,#pedigree-overlay,#onboarding-overlay,#paywall-overlay,#choice-overlay,#prompt-overlay,#crop-overlay,#pdf-crop-overlay,#puppy-card-preview-overlay).overlay > .modal {
  border: 1px solid #a04628 !important; border-radius: 6px !important; box-shadow: none !important; background: var(--surface) !important; }
:is(.psi-okno-win, #notes-overlay > .modal, #export-overlay > .modal, #ht-overlay > .modal, #gsearch-overlay > .modal, #pgt-overlay > .modal, #choice-overlay > .modal) :is(h1,h2,h3) { color: #404618; font-weight: 800; }
.psi-okno-win :is(button, .btn):not(.of-bt):not(.of-x) { border-radius: 6px !important; box-shadow: none !important; font-family: inherit; }
.psi-okno-win :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { border-radius: 6px !important; border: 1px solid #a04628 !important; background: #fafbf4 !important; box-shadow: none !important; }
html.dark .psi-okno-win :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { background: #2b2e1b !important; border-color: #aeb493 !important; }
.psi-okno-win > :first-child { border-bottom: 1px solid #e8ebd2; }
.psi-okno-win :is([style*="border-radius:20px"], [style*="border-radius: 20px"]) { border-radius: 6px !important; }
.psi-okno-win [style*="border-radius:10px"], .psi-okno-win [style*="border-radius: 10px"], .psi-okno-win [style*="border-radius:12px"], .psi-okno-win [style*="border-radius:8px"] { border-radius: 6px !important; }
.psi-okno-win [style*="box-shadow"] { box-shadow: none !important; }
/* Telefon: osamělá dlaždice v poslední řadě se roztáhne přes celou šířku (bez díry vpravo) */
@media (max-width:820px) {
.of-modal :is(.of-g2,.of-g3,.of-g4) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Starší okna: nadpisy se zalamují místo tří teček; texty smluv se v úzkém okně zalomí i uprostřed dlouhého slova */
.psi-okno-win :is([style*="text-overflow"], [style*="ellipsis"]) { white-space: normal !important; text-overflow: clip !important; overflow-wrap: anywhere; }
:is(#reservation-agreement-overlay, #purchase-agreement-overlay, #stud-agreement-overlay, #contract-template-overlay, #reservation-template-overlay) :is(h1,h2,h3,h4,p,div,span,td,th) { overflow-wrap: anywhere; }
/* Malá tlačítka × (vymazat datum, zavřít) se ve flexu nesmí smrsknout pod šířku svého obsahu */
:is(.psi-okno-win, .of-modal) button.btn.tap44 { min-width: 44px; flex-shrink: 0; box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
.psi-okno-win :is(div, span, p, h1, h2, h3, b, label, button) { overflow-wrap: anywhere; }
/* Seznamy uvnitř oken (milníky, ENS): řádky ve stylu Koček – 1px lemování, rohy 6 px, mezi řádky mezera */
.of-modal .psi-sezn { text-align: left; }
.of-modal .psi-sezn > div { border: 1px solid var(--xs,#e8ebd2); border-radius: 6px; background: var(--surface); margin: 0 0 6px; padding: 8px 10px; }
/* z Koček: Poznámky (#notes-overlay) */
html.compact-preview #notes-overlay .modal .btn { font-family: inherit !important; border: 1px solid currentColor !important; border-radius: 6px !important; box-shadow: none !important; }
html.compact-preview #notes-overlay .note-item { border: 1px solid var(--ak-line) !important; border-radius: 6px !important; box-shadow: none !important; background: var(--surface, #fff) !important; }
html.compact-preview #notes-overlay :is(#notes-tab-btn,#wl-tab-btn,#contacts-tab-btn) { min-height: 44px; font-weight: 700; }
html.compact-preview #notes-overlay #notes-tab-btn { background: var(--ak-qr-bg) !important; color: var(--ak-qr-fg) !important; }
html.compact-preview #notes-overlay #wl-tab-btn { background: var(--ak-health-bg) !important; color: var(--ak-health-fg) !important; }
html.compact-preview #notes-overlay #contacts-tab-btn { background: var(--ak-reminders-bg) !important; color: var(--ak-reminders-fg) !important; }
html.compact-preview #notes-overlay :is(#notes-tab-btn,#wl-tab-btn,#contacts-tab-btn).btn-primary { background: color-mix(in srgb, currentColor 12%, var(--ak-qr-bg)) !important; font-weight: 800; }
html.compact-preview #notes-overlay #notes-tab-content > .btn-primary { background: var(--ak-edit-bg) !important; color: var(--ak-edit-fg) !important; min-height: 44px; }
html.compact-preview #notes-overlay .modal-footer .btn { width: 100%; min-height: 44px; background: var(--ak-qr-bg) !important; color: var(--ak-qr-fg) !important; }
html.compact-preview #notes-overlay .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { border: 1px solid var(--ak-line) !important; border-radius: 6px !important; box-shadow: none !important; }
/* Zbytky starého vzhledu (robot stary-vzhled.mjs): lišta zálohy s rohy 6 px a bez stínu u fotek */
.backup-warn-banner { border-radius: 6px !important; }
.backup-warn-btn { border-radius: 6px !important; }
.sq-avatar { box-shadow: none !important; }
/* Výběr feny/otce v Plánovaném krytí: text se v úzkém okně zmenší, aby se nikdy neusekl třemi tečkami */
.psi-okno-win .mating-picker-select { font-size: clamp(10px, 3.1vw, 14px) !important; text-overflow: clip !important; }
.psi-okno-win [class*="mating-picker"], .psi-okno-win [class*="mating-picker"] * { white-space: normal !important; text-overflow: clip !important; overflow-wrap: anywhere; }

/* Tmavý režim: nadpisy starších oken světlé (dřív zůstaly tmavozelené na tmavém pozadí) */
html.dark :is(.psi-okno-win, #notes-overlay > .modal, #export-overlay > .modal, #ht-overlay > .modal, #gsearch-overlay > .modal, #pgt-overlay > .modal, #choice-overlay > .modal) :is(h1,h2,h3) { color: #f5f7ec; }
html.dark .psi-okno-win > :first-child { border-bottom-color: #5a6031; }
/* Světlý režim: vedlejší texty ve starších oknech tmavší, aby měly kontrast aspoň 4,5 : 1 (měřeno robotem kontrast.mjs) */
html:not(.dark) :is(.psi-okno-win, .overlay > .modal) { --text2: #52553f; --text3: #5c5f4a; }
html:not(.dark) .psi-okno-win label, html:not(.dark) .overlay > .modal label { color: var(--text2); }
/* Kalendář: názvy událostí se zalamují místo tří teček (měřeno robotem jazyky320.mjs) */
html.compact-calendar .cc-label { white-space: normal !important; text-overflow: clip !important; height: auto !important; min-height: 24px; line-height: 1.2; overflow-wrap: anywhere; }

/* Kontrast (robot kontrast.mjs): světle zelený text tmavší, tmavý režim – fialová, červená a modrá tlačítka světlejší, bílý papír smlouvy s tmavým písmem */
html.compact-preview:not(.dark) #notes-overlay #notes-tab-content > .btn-primary { color: #974226 !important; }
html.dark #fb-add-img-btn { color: #0d2236 !important; }
html.dark .psi-okno-win button.btn[style*="--danger"]:not([style*="background:var(--danger)"]) { color: #ff9a8f !important; border-color: #ff9a8f !important; }
html.dark .psi-okno-win :is([style*="background:white"],[style*="background: white"],[style*="background:#fff;"],[style*="background: #fff;"],[style*="background:#ffffff"]) { --text: #1a1a1a; --text2: #444; --text3: #555; --surface: #fff; --surface2: #f3f3f0; --bg: #fff; --border: #ddd; color: #1a1a1a; }
html.dark .psi-okno-win [style*="color:#f44336"] { color: #ff8a80 !important; }
.of-modal span[style*="background:#4caf50"] { background: #2e7d32 !important; }
html.dark #pay-currency-chips .of-chip[style*="var(--accent)"] { color: #262a0e !important; }
html:not(.dark) :is(.of-modal, #supply-modal, #ens-overlay, #milestones-modal, #reserved-list-modal) { --text2: #52553f; --text3: #5c5f4a; }
/* z Koček: #health-plan-overlay */
/* ── Plán zdraví (#health-plan-overlay): záhlaví s křížkem, seznam na světle fialovém podkladu, položky s pruhem vlevo (25. 10. 2026, návrh 3) ── */
#health-plan-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#858c5a; --l-bg:#f7f8f0; }
html.dark #health-plan-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --l-bg:#444a1f; }
html body #health-plan-overlay .hp-win { width:96% !important; max-width:760px !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; padding:0 !important; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; }
#health-plan-overlay .hp-hd { position:relative; flex:0 0 auto; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); background:var(--surface); min-height:72px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
#health-plan-overlay .hp-hd h2 { margin:0; font-size:22px; font-weight:800; line-height:1.2; color:var(--xi); }
#health-plan-overlay .hp-sub { margin-top:2px; font-size:12px; color:var(--xm); }
#health-plan-overlay .hp-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#health-plan-overlay .hp-body { flex:1; min-height:0; overflow-y:auto; background:var(--l-bg); padding:6px; }
html body #health-plan-overlay #health-plan-content { background:var(--surface); border:1px solid var(--xl); border-radius:6px; padding:12px; }
#health-plan-overlay .hp-list { display:flex; flex-direction:column; gap:8px; }
#health-plan-overlay .hp-item { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border:1px solid var(--xl); border-left-width:6px; border-radius:6px; }
#health-plan-overlay .hp-plan { background:#fff6d9; border-color:#7a5a00; }
#health-plan-overlay .hp-done { background:#ece4d4; border-color:#420f6e; }
html.dark #health-plan-overlay .hp-plan { background:#3b3210; border-color:#f0d36a; }
html.dark #health-plan-overlay .hp-done { background:#261638; border-color:#ae86dc; }
#health-plan-overlay .hp-main { flex:1; min-width:0; cursor:pointer; }
#health-plan-overlay .hp-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
#health-plan-overlay .hp-line strong { font-size:15px; line-height:1.25; color:var(--xi); overflow-wrap:anywhere; }
#health-plan-overlay .hp-state { padding:2px 8px; border:1px solid currentColor; border-radius:6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
#health-plan-overlay .hp-plan .hp-state { color:#7a5a00; }
#health-plan-overlay .hp-done .hp-state { color:#420f6e; }
html.dark #health-plan-overlay .hp-plan .hp-state { color:#f0d36a; }
html.dark #health-plan-overlay .hp-done .hp-state { color:#ae86dc; }
#health-plan-overlay .hp-meta { margin-top:3px; font-size:12.5px; color:var(--xm); overflow-wrap:anywhere; }
#health-plan-overlay .hp-btns { display:flex; gap:6px; flex:0 0 auto; }
html body #health-plan-overlay .hp-b { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; color:var(--xi) !important; font-size:18px; font-weight:700; box-shadow:none !important; }
html body #health-plan-overlay .hp-b.hp-del { color:#a02a5c !important; border-color:#a02a5c !important; }
#health-plan-overlay .hp-empty { text-align:center; padding:36px 16px; color:var(--xm); font-size:14px; }
#health-plan-overlay .hp-empty-ic { font-size:44px; margin-bottom:12px; }
#health-plan-overlay .hp-ft { flex:0 0 auto; display:flex; justify-content:center; gap:8px; padding:12px 16px; border-top:1px solid var(--xs); background:var(--surface); }
html body #health-plan-overlay .hp-ft .btn { min-height:48px; min-width:140px; border:1px solid !important; border-radius:6px !important; font-weight:700 !important; box-shadow:none !important; }
html body #health-plan-overlay .hp-ft .hp-close { background:#e6f0fd !important; color:#1f5fb0 !important; border-color:#1f5fb0 !important; }
html body #health-plan-overlay .hp-ft .btn-primary { background:#bfb2d6 !important; color:#350c58 !important; border-color:#420f6e !important; }
html.dark body #health-plan-overlay .hp-ft .hp-close { background:#14283f !important; color:#8dbcf5 !important; border-color:#8dbcf5 !important; }
html.dark body #health-plan-overlay .hp-ft .btn-primary { background:#261638 !important; color:#ae86dc !important; border-color:#ae86dc !important; }
@media (max-width:820px) {
html body #health-plan-overlay .hp-win { width:100% !important; max-height:98vh !important; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; }
#health-plan-overlay .hp-hd h2 { font-size:18px; }
html body #health-plan-overlay .hp-ft .btn { flex:1 1 45%; min-width:0; }
}
/* Psi navíc: záložky, stav „po termínu“, ikona položky, formuláře záložek Vakcinace vrhu a Vlastní položky */
#health-plan-overlay .hp-tabs { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px; background:var(--surface); border-bottom:1px solid var(--xs); }
html body #health-plan-overlay .hp-tab { min-height:44px; padding:6px 8px !important; font-size:13px !important; font-weight:700 !important; line-height:1.15; border:1px solid var(--xs) !important; border-radius:6px !important; box-shadow:none !important; background:var(--surface) !important; color:var(--xm) !important; white-space:normal; overflow-wrap:anywhere; }
html body #health-plan-overlay .hp-tab.btn-primary { background:var(--l-bg) !important; color:var(--xi) !important; border-color:var(--xl) !important; }
#health-plan-overlay .hp-item { cursor:pointer; }
#health-plan-overlay .hp-ic { flex:0 0 auto; width:32px; text-align:center; font-size:20px; line-height:1; }
#health-plan-overlay .hp-late { background:#fdeaf0; border-color:#a02a5c; }
#health-plan-overlay .hp-late .hp-state { color:#a02a5c; }
html.dark #health-plan-overlay .hp-late { background:#3d1a2a; border-color:#f6b5cf; }
html.dark #health-plan-overlay .hp-late .hp-state { color:#f6b5cf; }
#health-plan-overlay .hp-empty-s { padding:14px 8px; font-size:13px; }
#health-plan-overlay .hp-lb { display:block; margin:0 0 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--xm); }
html body #health-plan-overlay .hp-in { width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px; margin:0 0 10px; border:1px solid var(--xs) !important; border-radius:6px !important; background:var(--surface); color:var(--text); font-size:15px; box-shadow:none !important; }
html body #health-plan-overlay .hp-add { width:100%; min-height:48px; margin:2px 0 14px; border:1px solid var(--xl) !important; border-radius:6px !important; box-shadow:none !important; font-weight:700 !important; background:var(--l-bg) !important; color:var(--xi) !important; }
#health-plan-overlay .hp-sec { margin:4px 0 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--xm); }
/* z Koček: #mating-overview-overlay */
/* ── Krytí a reprodukce (#mating-overview-overlay): symetrické, text vždy uprostřed, ikonky visí vedle textu ── */
html.compact-preview #mating-overview-overlay > div { border: 1px solid var(--ak-line) !important; border-radius: 6px !important; box-shadow: none !important; }
html.compact-preview #mating-overview-overlay :is([style*="border-radius:5px"],[style*="border-radius: 5px"],[style*="border-radius:8px"],[style*="border-radius: 8px"],[style*="border-radius:10px"],[style*="border-radius: 10px"],[style*="border-radius:12px"],[style*="border-radius: 12px"],[style*="border-radius:14px"],[style*="border-radius: 14px"],[style*="border-radius:16px"],[style*="border-radius: 16px"]) { border-radius: 6px !important; }
html.compact-preview #mating-overview-overlay [style*="box-shadow"] { box-shadow: none !important; }
html.compact-preview #mating-overview-overlay .btn { font-family: inherit !important; }
html.compact-preview #mating-overview-overlay #mating-overview-content :is([style*="padding:14px"],[style*="padding:10px 14px"])[style*="border-radius"] { border: 1px solid var(--ak-line) !important; }
/* záhlaví: nadpis uprostřed, logo vlevo a křížek vpravo zrcadlově */
html.compact-preview #mating-overview-overlay > div > div:first-child { position: relative; justify-content: center !important; text-align: center; min-height: 56px; }
html.compact-preview #mating-overview-overlay > div > div:first-child > div:first-child { position: static; justify-content: center; flex: 0 1 auto !important; }
html.compact-preview #mating-overview-overlay > div > div:first-child > div:first-child > div:first-child { position: absolute; left: 16px; top: 10px; }
html.compact-preview #mating-overview-overlay > div > div:first-child > button { position: absolute; right: 16px; top: 12px; border: 1px solid var(--ak-line) !important; }
/* tři stejné záložky v pastelových barvách; ikonka vlevo a počet vpravo od textu, text přesně uprostřed */
html.compact-preview #mating-overview-overlay > div > div:nth-child(2) { padding: 10px 16px !important; }
html.compact-preview #mating-overview-overlay > div > div:nth-child(2) > div { background: none !important; border: 0 !important; padding: 0 !important; gap: 6px !important; }
html.compact-preview #mating-overview-overlay :is(#tab-btn-pregnancy,#tab-btn-plans,#tab-btn-test) { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 5px; min-height: 44px; padding: 6px 4px !important; border: 1px solid currentColor !important; border-radius: 6px !important; box-shadow: none !important; background-image: none !important; font-weight: 700 !important; }
html.compact-preview #mating-overview-overlay :is(#tab-btn-pregnancy,#tab-btn-plans,#tab-btn-test) > span:nth-child(1) { justify-self: end; }
html.compact-preview #mating-overview-overlay :is(#tab-btn-pregnancy,#tab-btn-plans,#tab-btn-test) > span:nth-child(2) { justify-self: center; text-align: center; }
html.compact-preview #mating-overview-overlay :is(#tab-btn-pregnancy,#tab-btn-plans,#tab-btn-test) > span:nth-child(3) { justify-self: start; }
html.compact-preview #mating-overview-overlay #tab-btn-pregnancy { background: var(--ak-mating-bg, var(--ak-reminders-bg)) !important; color: var(--ak-mating-fg, var(--ak-reminders-fg)) !important; }
html.compact-preview #mating-overview-overlay #tab-btn-plans { background: var(--ak-health-bg) !important; color: var(--ak-health-fg) !important; }
html.compact-preview #mating-overview-overlay #tab-btn-test { background: var(--ak-qr-bg) !important; color: var(--ak-qr-fg) !important; }
html.compact-preview #mating-overview-overlay :is(#tab-badge-preg,#tab-badge-plans,#tab-badge-test) { background: #fff !important; color: currentColor !important; border: 1px solid currentColor; }
/* nadpisy sekcí (Aktivní březost, Poslední krytí): ikonka vlevo, text uprostřed, počet vpravo */
html.compact-preview #mating-overview-overlay .mo-h { display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 6px; width: 100%; }
html.compact-preview #mating-overview-overlay .mo-h > span:nth-child(1) { justify-self: end; }
html.compact-preview #mating-overview-overlay .mo-h > span:nth-child(3) { justify-self: start; }
html.compact-preview #mating-overview-overlay #mating-overview-content > div:has(> .mo-h) { justify-content: center !important; }
html.compact-preview #mating-overview-overlay :is(#mating-overview-content > div[style*="text-transform:uppercase"]) { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 6px; }
html.compact-preview #mating-overview-overlay #mating-overview-content > div[style*="text-transform:uppercase"] > .mo-ic { justify-self: end; }
html.compact-preview #mating-overview-overlay #mating-overview-content > div[style*="text-transform:uppercase"] > .mo-tx { justify-self: center; text-align: center; }
/* karta březosti: název uprostřed (ikonka vlevo), tři stejná tlačítka (ikonka vlevo od textu), pod sebou datum uprostřed */
html.compact-preview #mating-overview-overlay .mo-nm { position: relative; display: inline-block; }
html.compact-preview #mating-overview-overlay .mo-nm > .mo-ic { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
html.compact-preview #mating-overview-overlay #mating-overview-content [style*="padding:14px"][style*="border-radius"] > div:first-child { flex-direction: column; justify-content: center !important; align-items: center; text-align: center; }
html.compact-preview #mating-overview-overlay #mating-overview-content [style*="padding:14px"][style*="border-radius"] > div:last-child { flex-direction: column !important; align-items: stretch !important; text-align: center; }
html.compact-preview #mating-overview-overlay #mating-overview-content [style*="padding:14px"][style*="border-radius"] > div:last-child > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; }
html.compact-preview #mating-overview-overlay #mating-overview-content [style*="padding:14px"][style*="border-radius"] > div:last-child > div > .btn { min-height: 40px; border: 1px solid currentColor !important; background-image: none !important; box-shadow: none !important; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 5px; padding: 6px 4px !important; }
html.compact-preview #mating-overview-overlay .btn > .mo-ic { justify-self: end; }
html.compact-preview #mating-overview-overlay .btn > .mo-tx { justify-self: center; text-align: center; }
html.compact-preview #mating-overview-overlay #mating-overview-content .btn[style*="#d2542a"] { background: var(--ak-health-bg) !important; color: var(--ak-health-fg) !important; }
/* spodní lišta: Hotovo přes celou šířku */
html.compact-preview #mating-overview-overlay > div > .modal-footer { justify-content: center !important; }
html.compact-preview #mating-overview-overlay > div > .modal-footer .btn { width: 100%; min-height: 44px; background: var(--ak-qr-bg) !important; color: var(--ak-qr-fg) !important; border: 1px solid currentColor !important; }
/* karta plánu a historie: tři stejná tlačítka, řádky historie vystředěné, popelnice uprostřed */
html.compact-preview #mating-overview-overlay #mating-overview-content div[style*="display:flex;gap:8px;margin-top:2px"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.compact-preview #mating-overview-overlay #mating-overview-content div[style*="display:flex;gap:8px;margin-top:2px"] > .btn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 5px; min-height: 40px; padding: 6px 4px !important; border: 1px solid currentColor !important; }
html.compact-preview #mating-overview-overlay #mating-overview-content [style*="padding:14px"][style*="border-radius"] > div:last-child > div > .btn-danger { display: flex; justify-content: center; align-items: center; }
html.compact-preview #mating-overview-overlay #mating-overview-content div[style*="padding:10px 14px"][style*="border-radius"] { flex-direction: column; justify-content: center !important; align-items: center !important; text-align: center; }
/* Psi: podklad záložek Krytí v tmavém režimu (barvy záložek jsou nastavené ve skriptu napevno světlé) */
html.dark #mating-overview-content { background: var(--bg) !important; }
#mating-overview-overlay .mo-ic + .mo-tx { margin-left: 6px; }
/* z Koček: #restore-modal\b */
/* ── Obnovit ze zálohy (#restore-modal): okno uprostřed, jedna záloha = jeden řádek (25. 10. 2026, návrh 3) ── */
#restore-modal { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#858c5a; --l-bg:#f7f8f0; --l-fg:#d3643f; }
html.dark #restore-modal { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --l-bg:#444a1f; --l-fg:#e6eacd; }
#restore-modal.rs-wrap { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:12px; box-sizing:border-box; background:rgba(47,52,18,.6); }
#restore-modal .rs-win { width:100%; max-width:760px; height:min(88vh,860px); max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--xi); }
#restore-modal .rs-hd { position:relative; flex:0 0 auto; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); min-height:72px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
#restore-modal .rs-hd h2 { margin:0; font-size:22px; font-weight:800; line-height:1.2; color:var(--xi); }
#restore-modal .rs-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#restore-modal .rs-tabs { display:flex; gap:8px; padding:8px 6px 0; background:var(--l-bg); flex:0 0 auto; }
html body #restore-modal .rs-tabs button { flex:1; min-height:48px; padding:4px 6px; border:1px solid var(--l-fg) !important; border-radius:6px !important; background:var(--surface) !important; color:var(--l-fg) !important; font-size:14px !important; font-weight:700 !important; box-shadow:none !important; }
html body #restore-modal .rs-tabs button.btn-primary { background:color-mix(in srgb,var(--l-fg) 24%,var(--surface)) !important; }
#restore-modal .rs-list { flex:1; min-height:0; overflow-y:auto; padding:6px; background:var(--l-bg); }
#restore-modal .rs-wait { text-align:center; color:var(--xm); padding:24px; }
html body #restore-modal #backup-bulk-bar { background:var(--surface) !important; border:1px solid var(--l-fg) !important; border-radius:6px !important; min-height:52px; box-sizing:border-box; }
html body #restore-modal .backup-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; padding:8px 10px; margin-bottom:6px; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; }
html body #restore-modal .backup-card-top, html body #restore-modal .backup-card-bottom { padding:0 !important; margin:0 !important; border:0 !important; }
html body #restore-modal .backup-card-bottom { display:flex; align-items:center; gap:6px; }
html body #restore-modal .backup-restore-btn { min-height:48px; padding:0 14px; border:1px solid #420f6e !important; border-radius:6px !important; background:#bfb2d6 !important; color:#350c58 !important; font-weight:700 !important; box-shadow:none !important; }
html body #restore-modal .backup-tool-btn { width:48px; height:48px; min-width:48px; border:1px solid var(--l-fg) !important; border-radius:6px !important; background:var(--l-bg) !important; box-shadow:none !important; }
html body #restore-modal .backup-tool-btn.del { border-color:#a02a5c !important; background:#fdeaf0 !important; }
html body #restore-modal .backup-badge { padding:3px 8px; border-radius:6px !important; font-weight:700; }
html body #restore-modal .backup-badge-manual { background:#e6f0fd !important; color:#1f5fb0 !important; border:1px solid #1f5fb0 !important; }
html body #restore-modal .backup-badge-auto { background:var(--l-bg) !important; color:var(--l-fg) !important; border:1px solid var(--l-fg) !important; }
#restore-modal .backup-item-checkbox, #restore-modal #backup-select-all { width:24px !important; height:24px !important; }
html.dark body #restore-modal .backup-restore-btn { background:#261638 !important; color:#ae86dc !important; border-color:#ae86dc !important; }
html.dark body #restore-modal .backup-tool-btn.del { background:#3d1a2a !important; border-color:#f2a0c0 !important; }
html.dark body #restore-modal .backup-badge-manual { background:#14283f !important; color:#8dbcf5 !important; border-color:#8dbcf5 !important; }
@media (max-width:820px) {
#restore-modal.rs-wrap { padding:6px; }
#restore-modal .rs-win { height:96vh; height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#restore-modal .rs-hd h2 { font-size:18px; }
html body #restore-modal .backup-card { grid-template-columns:minmax(0,1fr); }
}
#restore-modal .rs-hd h2 { min-width:0; max-width:100%; overflow-wrap:anywhere; }
html body #restore-modal .backup-card-bottom { flex-wrap:wrap; min-width:0; }
html body #restore-modal .backup-restore-btn { flex:1 1 auto; min-width:0; }
html body #restore-modal .backup-card-tools { display:flex; gap:6px; flex:0 0 auto; margin-left:auto; }
@media (max-width:820px) {
html body #restore-modal .backup-tool-btn { width:44px; height:44px; min-width:44px; }
html body #restore-modal .backup-card-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
}
/* z Koček: #pedigree-overlay\b */
/* Výšky oken v dvh: na iPhonu v aplikaci okno odsazuje výřez displeje a lišta (.overlay padding safe-area) –
   výška se proto omezí i na zbylé místo (27. 10. 2026); na PC a v prohlížeči jsou safe-area 0, výška beze změny. */
/* ── Rodokmen (#pedigree-overlay): záhlaví s křížkem, pruh pohledu nahoře (jazyk, zoom, generace), akce dole (Načíst rodokmen, PDF, Zavřít); strom beze změny (25. 10. 2026, návrh 3) ── */
#pedigree-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#858c5a; --l-bg:#f7f8f0; }
html.dark #pedigree-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --l-bg:#444a1f; }
html body #pedigree-overlay .ped-win { width:96% !important; max-width:1100px !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; padding:0 !important; display:flex !important; flex-direction:column; overflow:hidden !important; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; }
#pedigree-overlay .ped-hd { position:relative; flex:0 0 auto; text-align:center; padding:16px 64px 14px; border-bottom:1px solid var(--xs); min-height:72px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
html body #pedigree-overlay #pedigree-modal-title { margin:0; font-size:22px; font-weight:800; line-height:1.2; color:var(--xi); white-space:normal; max-width:100%; overflow-wrap:anywhere; }
#pedigree-overlay .ped-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
#pedigree-overlay .ped-strip { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:8px 6px; background:var(--l-bg); border-bottom:1px solid var(--xs); }
#pedigree-overlay .ped-strip > * { margin:0 !important; }
html body #pedigree-overlay :is(#ped-lang-pill-btn, #ped-lang-pill) { height:44px !important; min-width:44px; padding:0 12px !important; border:1px solid #1f5fb0 !important; border-radius:6px !important; background:#e6f0fd !important; color:#1f5fb0 !important; font-size:13px !important; font-weight:700; }
html body #pedigree-overlay .ped-zoom-group { height:44px; background:var(--surface) !important; border:1px solid #d3643f !important; border-radius:6px !important; padding:0 4px !important; }
html body #pedigree-overlay .ped-zoom-group .btn { height:40px !important; min-width:40px; border-radius:6px !important; font-size:15px !important; }
html body #pedigree-overlay .ped-gen-group { height:44px; background:#fff6d9 !important; border:1px solid #7a5a00 !important; border-radius:6px !important; padding:0 10px !important; }
html body #pedigree-overlay .ped-gen-group select { height:36px; border-radius:6px !important; font-size:14px !important; }
html body #pedigree-overlay #pedigree-content { flex:1; min-height:0; overflow:auto; padding:24px; background:var(--l-bg); cursor:grab; user-select:none; border:1px solid var(--xl); border-radius:6px; margin:6px; }
#pedigree-overlay .ped-ft { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 16px; border-top:1px solid var(--xs); background:var(--surface); }
html body #pedigree-overlay #pedigree-import-btn { height:48px !important; min-width:200px; padding:0 14px !important; border:1px solid #d3643f !important; border-radius:6px !important; background:var(--l-bg) !important; color:#d3643f !important; font-weight:700 !important; font-size:13px !important; box-shadow:none !important; white-space:nowrap; }
html body #pedigree-overlay #pedigree-pdf-btn { height:48px !important; min-width:140px; padding:0 16px !important; border:1px solid #420f6e !important; border-radius:6px !important; background:#bfb2d6 !important; color:#350c58 !important; font-weight:700 !important; font-size:13px !important; box-shadow:none !important; }
html body #pedigree-overlay .ped-close { width:auto !important; min-width:140px; min-height:48px; border:1px solid #1f5fb0 !important; border-radius:6px !important; background:#e6f0fd !important; color:#1f5fb0 !important; font-weight:700 !important; box-shadow:none !important; }
html body #pedigree-overlay #pedigree-import-dd { top:auto !important; bottom:calc(100% + 4px) !important; left:0 !important; right:auto !important; }
html.dark body #pedigree-overlay :is(#ped-lang-pill-btn, #ped-lang-pill) { background:#14283f !important; color:#8dbcf5 !important; border-color:#8dbcf5 !important; }
html.dark body #pedigree-overlay .ped-gen-group { background:#3b3210 !important; border-color:#f0d36a !important; }
html.dark body #pedigree-overlay #pedigree-pdf-btn { background:#261638 !important; color:#ae86dc !important; border-color:#ae86dc !important; }
html.dark body #pedigree-overlay .ped-close { background:#14283f !important; color:#8dbcf5 !important; border-color:#8dbcf5 !important; }
html.dark body #pedigree-overlay #pedigree-import-btn { color:#e1e7c0 !important; border-color:#e1e7c0 !important; }
@media (max-width:820px) {
html body #pedigree-overlay .ped-win { width:100% !important; max-height:98vh !important; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; }
html body #pedigree-overlay #pedigree-modal-title { font-size:17px; }
html body #pedigree-overlay #pedigree-content { padding:12px; }
html body #pedigree-overlay #pedigree-import-btn { min-width:0; white-space:normal; }
html body #pedigree-overlay .ped-ft > * { flex:1 1 auto; }
html body #pedigree-overlay .ped-close, html body #pedigree-overlay #pedigree-pdf-btn { min-width:0; }
}
html body #pedigree-overlay .ped-gen-group select { height:36px !important; min-width:56px; }
/* Lov (4. 11. 2026): jedna řada zoomu (−, %, +, Celý) se nesmí zalomit ani přetéct (obecné pravidlo oken z okna-mensi.css jim dávalo zalamování a výšku 48 px) a výběr generací pro PDF dostal stejný vzhled jako ostatní prvky. */
html body #pedigree-overlay .ped-zoom-group { display:inline-flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:3px !important; }
html body #pedigree-overlay .ped-zoom-group .btn { flex:0 0 auto !important; width:auto !important; min-width:40px !important; max-width:none !important; min-height:0 !important; height:40px !important; padding:0 8px !important; white-space:nowrap !important; font-weight:700 !important; }
html body #pedigree-overlay #ped-lang-pill-dropdown { right:auto !important; left:0 !important; }
html body #pedigree-overlay #ped-print-gens { height:48px; min-width:0; padding:0 10px; border:1px solid var(--xl); border-radius:6px; background:var(--surface); color:var(--text); font-size:14px; font-weight:700; }
/* Rodokmen v tmavém režimu: zelený / oranžový / červený text příbuznosti (COI) má barvu přímo v kódu,
   na tmavém podkladu měl 2,7–2,9 : 1 (test 25. 10. 2026). Zesvětlené odstíny dávají přes 7 : 1. */
html.dark #pedigree-overlay [style*="color:#2E7D32" i] { color:#cad2a3 !important; }
html.dark #pedigree-overlay [style*="color:#E65100" i] { color:#fdba74 !important; }
html.dark #pedigree-overlay [style*="color:#C62828" i] { color:#fca5a5 !important; }
/* z Koček: #purchase-agreement-overlay\b */
/* ── Kupní a Rezervační smlouva: nové okolí papíru (25. 10. 2026, návrh 2). Papír (#…-agreement-content) se nemění, podle něj se dělá PDF a Word. ── */
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#858c5a; --l-bg:#f7f8f0; }
html.dark :is(#purchase-agreement-overlay, #reservation-agreement-overlay) { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --l-bg:#444a1f; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-win { max-width:1180px !important; width:96% !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; padding:0 !important; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-hd { position:relative; flex:0 0 auto; text-align:center; padding:16px 280px 14px; border-bottom:1px solid var(--xs); background:var(--surface); }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-hd h2 { margin:0; font-size:22px; font-weight:800; color:var(--xi); line-height:1.2; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tools { position:absolute; right:14px; top:50%; transform:translateY(-50%); display:flex; gap:8px; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tpl { min-height:44px; padding:4px 12px; border:1px solid #d3643f !important; border-radius:6px !important; background:var(--l-bg) !important; color:#d3643f !important; font-size:13px !important; font-weight:700 !important; box-shadow:none !important; }
html.dark body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tpl { color:#e1e7c0 !important; border-color:#e1e7c0 !important; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-x { width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-wrap { flex:1; min-height:0; display:flex; overflow:hidden; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-side { flex:0 0 250px; background:var(--l-bg); border-right:1px solid var(--xs); padding:6px; overflow-y:auto; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc { margin:6px; padding:12px; border:1px solid var(--xl); border-radius:6px; background:var(--surface); text-align:center; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc small { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--xm); }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ph { height:120px; margin-top:6px; border:1px solid var(--xl); border-radius:6px; background-color:var(--l-bg); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:44px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tx b { display:block; margin-top:8px; font-size:15px; line-height:1.25; color:var(--xi); overflow-wrap:anywhere; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tx i { display:block; margin-top:2px; font-style:normal; font-size:12px; color:var(--xm); overflow-wrap:anywhere; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-body { flex:1; min-width:0; min-height:0; overflow-y:auto; background:var(--l-bg); padding:6px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 16px; border-top:1px solid var(--xs); background:var(--surface); }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn { min-height:48px; min-width:130px; border:1px solid !important; border-radius:6px !important; font-weight:700 !important; box-shadow:none !important; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn-close { background:#e6f0fd !important; color:#1f5fb0 !important; border-color:#1f5fb0 !important; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn:nth-child(2) { background:#fff6d9 !important; color:#7a5a00 !important; border-color:#7a5a00 !important; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn:nth-child(3) { background:var(--l-bg) !important; color:#d3643f !important; border-color:#d3643f !important; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn-primary { background:#bfb2d6 !important; color:#350c58 !important; border-color:#420f6e !important; }
html.dark body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn-close { background:#14283f !important; color:#8dbcf5 !important; border-color:#8dbcf5 !important; }
html.dark body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn:nth-child(2) { background:#3b3210 !important; color:#f0d36a !important; border-color:#f0d36a !important; }
html.dark body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn:nth-child(3) { color:#e1e7c0 !important; border-color:#e1e7c0 !important; }
html.dark body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn-primary { background:#261638 !important; color:#ae86dc !important; border-color:#ae86dc !important; }
@media (max-width:820px) {
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-win { width:100% !important; max-height:98vh !important; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-hd { padding:10px 14px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-hd h2 { font-size:18px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tools { position:static; transform:none; justify-content:center; margin-top:8px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-wrap { flex-direction:column; overflow-y:auto; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-side { flex:0 0 auto; border-right:0; border-bottom:1px solid var(--xs); overflow:visible; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc { margin:3px; padding:8px; display:flex; align-items:center; gap:10px; text-align:left; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc small { display:none; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ph { height:44px; width:44px; flex:0 0 44px; margin:0; font-size:24px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tx b { margin-top:0; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-body { flex:none; overflow:visible; }
html body :is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ft .btn { flex:1 1 45%; min-width:0; }
}
/* Telefon: panel s rodiči / koťátkem = řádek se čtvercovou fotkou vlevo a jménem vedle (fotka se vejde celá, jméno se zalomí uvnitř dlaždice) */
@media (max-width:820px) {
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc { display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; margin:3px; padding:8px; text-align:left; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-ph { grid-column:1; grid-row:1 / 3; width:64px; height:64px; flex:none; margin:0; font-size:28px; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-pc small { display:block; grid-column:2; grid-row:1; align-self:end; text-align:left; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tx { grid-column:2; grid-row:2; align-self:start; min-width:0; }
:is(#purchase-agreement-overlay, #reservation-agreement-overlay) .agr-tx b { margin-top:2px; text-align:left; overflow-wrap:anywhere; }
}
/* z Koček: #stud-agreement-overlay\b */
/* ── Dohoda o krytí (#stud-agreement-overlay): nové rozložení má vlastní šířku (přebíjí starší pravidla oken) ── */
html.compact-preview #stud-agreement-overlay > .sa-win, #stud-agreement-overlay > .sa-win { width: 100% !important; max-width: 1280px !important; max-height:94vh !important; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; border: 1px solid var(--xl) !important; border-radius: 6px !important; box-shadow: none !important; background: var(--surface) !important; }
@media (max-width: 820px) {
#stud-agreement-overlay > .sa-win, html.compact-preview #stud-agreement-overlay > .sa-win { max-height:98vh !important; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; height:98vh; height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
html body #stud-agreement-overlay { padding: 6px !important; }
html body #stud-agreement-overlay .sa-grid > .sa-ct:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* PC: levý pruh s fotkou má kolem sebe bílý okraj (stejně jako pravý panel), telefon beze změny */
@media (min-width:821px) {
html body #litter-overlay .lt-side,
html body #pup-overlay .pt-side,
html body #weight-overlay .wt-side,
html body .of-modal .of-side,
html body #litter-shows-modal .ls-side,
html body #litter-show-form-modal .sf-side,
html body #pup-shows-modal .ps-side,
html body #pup-show-form-modal .sf-side,
html body #milestones-modal .ms-side,
html body #pup-feeding-form-modal .pf-side,
html body #stud-agreement-overlay .sa-side,
html body #reminder-form-modal .rm-side,
html body #bulk-pup-overlay .bk-side,
html body #mating-overlay .ml-side,
html body #mating-form-overlay .mf-side,
html body #cycle-predictor-overlay .cp-side,
html body #health-form-modal .hf-side,
html body #pup-health-form-modal .hf-side
{ margin:6px !important; border:1px solid var(--xl) !important; border-radius:6px !important; }
}
/* Dohoda o krytí, PC: dlaždice po čtyřech v řadě, nedotažená poslední řada je vystředěná */
@media (min-width:821px) {
html body #stud-agreement-overlay .sa-grid.c4 { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
html body #stud-agreement-overlay .sa-grid.c4 > * { flex:0 0 calc((100% - 24px) / 4); min-width:0; }
}
/* Dohoda o krytí: fotka kočky čtvercová (dřív široký pruh 1,5 a 1,8, ze kterého by se fotka useknula); na telefonu čtverec vlevo a jméno vedle, stejně jako ostatní okna */
html body #stud-agreement-overlay .sa-ph { aspect-ratio:1 !important; }
@media (max-width:820px) {
html body #stud-agreement-overlay .sa-side { grid-template-columns:minmax(0,1fr) !important; gap:6px !important; }
html body #stud-agreement-overlay .sa-side > div { display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; min-width:0; border:1px solid var(--xl); border-radius:6px; background:var(--surface); padding:8px; }
html body #stud-agreement-overlay .sa-ph { grid-column:1; grid-row:1 / 3; width:64px !important; height:64px; aspect-ratio:auto !important; font-size:28px; }
html body #stud-agreement-overlay .sa-name { grid-column:2; grid-row:1; align-self:end; margin:0; text-align:left; font-size:15px; overflow-wrap:anywhere; }
html body #stud-agreement-overlay .sa-role { grid-column:2; grid-row:2; align-self:start; margin:2px 0 0; text-align:left; font-size:11px; }
}
/* Záznamy krytí v rozložení Koček: široké okno jako v Kočkách (obecné pravidlo „#mating-overlay > div“ ho stahovalo na 480 px) */
html body #mating-overlay > .ml-win, html.font-large body #mating-overlay > .ml-win, html.font-xlarge body #mating-overlay > .ml-win, html.compact-preview body #mating-overlay > .ml-win { width: 100% !important; max-width: 1140px !important; max-height: 94vh !important; max-height: 94dvh !important; border-radius: 6px !important; box-shadow: none !important; margin: auto !important; }
@media (max-width:820px) { html body #mating-overlay > .ml-win, html.font-large body #mating-overlay > .ml-win, html.font-xlarge body #mating-overlay > .ml-win, html.compact-preview body #mating-overlay > .ml-win { max-height: 98vh !important; max-height: 98dvh !important; height: 98vh; height: 98dvh; } }
/* Křížek pro smazání data (clearDateField): bez bočního odsazení, ať se „ד vejde (měřeno robotem matice-vse, němčina) */
html body .modal button.tap44[onclick^="clearDateField"], html body button.btn.tap44[onclick^="clearDateField"], html body #supply-modal .sp-t button.btn[onclick^="clearDateField"] { padding: 0 !important; min-width: 44px; display: inline-flex !important; align-items: center; justify-content: center; }

/* Tlačítko hodnocení v obchodě po 4–5 hvězdách (31. 10. 2026, převzato z Koček): zlaté, na počítači dvě vedle sebe */
html body #review-prompt-modal #review-store-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:6px; margin-bottom:12px; }
html body #review-prompt-modal .review-store-btn { display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px; padding:8px 10px; border:1px solid #7a5a00; border-radius:6px; background:#fff6d9; color:#5c4300; font-family:inherit; font-size:15px; font-weight:700; line-height:1.15; cursor:pointer; box-shadow:none; }
html.dark body #review-prompt-modal .review-store-btn { background:#3b3210; border-color:#f0d36a; color:#f0d36a; }
/* Hodnocení: „Připomenout později“ / „Hotovo / Zavřít“ aspoň 48 px vysoké (31. 10. 2026; v Kočkách okna-styl.css, který Psi nenačítají) */
html body #review-prompt-modal #review-btn-later, html body #review-prompt-modal #review-btn-done, html body #review-prompt-modal #review-low-close { display:flex !important; align-items:center; justify-content:center; min-height:48px; }

/* Okno Prémiové funkce v jednotném vzhledu jako Kočky (Petr 1. 11. 2026: okno bylo moc vysoké) – pravidla z okna-styl.css, jehož Psi nenačítají. */
/* ── Předplatné (#paywall-overlay), návrh 1 (26. 10. 2026): úzké okno, cena, 3 výhody, velké Koupit, dlaždice odkazů ── */
#paywall-overlay.pw-modal { background: rgba(29,22,72,0.38) !important; padding: 12px !important; }
#paywall-overlay .pw-win { --ofw: 600px; max-height:94vh; max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); }
#paywall-overlay .pw-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; background: var(--l-bg); display: flex; flex-direction: column; gap: 6px; }
#paywall-overlay .pw-desc { margin: 0; border: 1px solid var(--xs); background: var(--surface); border-radius: 6px; padding: 12px; text-align: center; color: var(--xi); font-size: 14px; line-height: 1.5; }
#paywall-overlay .pw-pan { border: 1px solid; border-radius: 6px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
#paywall-overlay .pw-price { background: var(--g-bg); color: var(--g-fg); border-color: var(--g-fg); }
#paywall-overlay .pw-pr { font-size: 30px; font-weight: 800; color: var(--xi); line-height: 1.2; } #paywall-overlay .pw-pr small { font-size: 14px; font-weight: 600; color: var(--xm); }
#paywall-overlay .pw-in { font-size: 13px; line-height: 1.4; }
#paywall-overlay .pw-in[style*="display: none"], #paywall-overlay .pw-in[style*="display:none"] { display: none !important; }
#paywall-overlay .pw-feats { display: flex; flex-direction: column; gap: 6px; }
#paywall-overlay .pw-t { border: 1px solid; border-radius: 6px; padding: 10px; text-align: center; font-weight: 700; font-size: 14px; }
#paywall-overlay .pw-b { background: var(--b-bg); color: var(--b-fg); border-color: color-mix(in srgb, var(--b-fg) 40%, var(--b-bg)); }
#paywall-overlay .pw-y { background: var(--y-bg); color: var(--y-fg); border-color: color-mix(in srgb, var(--y-fg) 40%, var(--y-bg)); }
#paywall-overlay .pw-p { background: var(--p-bg); color: var(--p-fg); border-color: color-mix(in srgb, var(--p-fg) 40%, var(--p-bg)); }
#paywall-overlay .pw-big { margin: 0 !important; min-height: 60px; font-size: 17px; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; }
#paywall-overlay .pw-big[style*="display: none"], #paywall-overlay .pw-big[style*="display:none"] { display: none !important; }
#paywall-overlay #paywall-stripe-hr { display: none !important; }
#paywall-overlay .pw-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-auto-rows: 1fr; gap: 6px; }
@media (max-width: 520px) { #paywall-overlay .pw-links { grid-template-columns: minmax(0, 1fr); } }
#paywall-overlay .pw-l { min-height: 44px; border: 1px solid var(--xs); border-radius: 6px; background: var(--surface); color: var(--l-fg); font: inherit; font-weight: 700; font-size: 13px; padding: 6px 8px; cursor: pointer; text-align: center; }
#paywall-overlay .pw-l[style*="display: none"], #paywall-overlay .pw-l[style*="display:none"] { display: none !important; }
#paywall-overlay .pw-key { border: 1px solid var(--xs); border-radius: 6px; background: var(--surface); padding: 6px; }
#paywall-overlay .pw-key > * + * { margin-top: 6px; }
#paywall-overlay .pw-f { display: block; border: 1px solid var(--xs); border-radius: 6px; padding: 6px; text-align: center; }
#paywall-overlay .pw-f small { display: block; font-size: 11px; color: var(--xm); }
#paywall-overlay .pw-f input { width: 100%; box-sizing: border-box; border: none !important; text-align: center; font: inherit; font-size: 15px; background: transparent !important; color: var(--xi); outline: none; padding: 4px !important; box-shadow: none !important; }
#paywall-overlay .pw-err { color: var(--p-fg); font-size: 13px; text-align: center; }
#paywall-overlay .pw-key .of-act { margin-top: 6px; min-height: 48px; width: 100%; }
#paywall-overlay .pw-btns { padding: 6px; border-top: 1px solid var(--xs); flex: 0 0 auto; }
#paywall-overlay .pw-btns .of-act { margin: 0; min-height: 56px; width: 100%; }
@media (max-width: 700px) { #paywall-overlay.pw-modal { padding: 6px !important; } #paywall-overlay .pw-win { max-height:98vh; max-height:min(98dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)); } }
#paywall-overlay #license-key-input { text-transform: uppercase; letter-spacing: .5px; }
#paywall-overlay #paywall-stripe-btn[style*="block"] { display: flex !important; }

#paywall-overlay #paywall-stripe-btn, body.is-pwa #paywall-overlay #paywall-stripe-btn { display: flex !important; align-items: center; justify-content: center; }
body.is-native #paywall-overlay #paywall-stripe-btn { display: none !important; }

/* Panel Důležité ve formuláři štěněte (podle Koček, 1. 11. 2026): váha, úhyn a poznámka hned nahoře */
#pup-overlay .pt-cap { font-size:16px; font-weight:800; text-align:center; margin:0 0 10px; }
#pup-overlay #pt-important { background:var(--l-bg); }
#pup-overlay .pt-imp { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
#pup-overlay .pt-death { margin-top:10px; }
#pup-overlay .pt-sw2 { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; cursor:pointer; font-size:15px; font-weight:700; color:var(--p-fg); }
#pup-overlay .pt-sw2 input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
#pup-overlay .pt-knob { position:relative; flex:0 0 auto; width:38px; height:22px; border:1px solid var(--p-fg); border-radius:11px; background:var(--surface); }
#pup-overlay .pt-knob::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--p-fg); }
#pup-overlay .pt-sw2 input:checked + .pt-knob { background:var(--p-bg); }
#pup-overlay .pt-sw2 input:checked + .pt-knob::after { left:18px; }
#pup-overlay .pt-sw2 input:focus-visible + .pt-knob { outline:2px solid var(--p-fg); outline-offset:1px; }
#pup-overlay #p-death-fields { margin-top:6px; }
#pup-overlay #p-death-fields > .pt-ct + .pt-ct { margin-top:6px; }
#pup-overlay .pt-i-note { margin-top:8px; }
#pup-overlay .pt-i-note textarea { display:block; width:100%; min-height:56px; padding:0; margin:0; border:0 !important; border-radius:0 !important; background:transparent !important; color:inherit; font:inherit; font-size:15px; font-weight:700; text-align:center; resize:vertical; outline:none; box-shadow:none !important; }
@media (max-width: 700px) { #pup-overlay .pt-i-note textarea { font-size:14px; } }

/* Výřez fotky (#crop-overlay) a výřez pro PDF (#pdf-crop-overlay): okno podle Koček, paleta Psů (2. 11. 2026) */
#crop-overlay, #pdf-crop-overlay { --xl:#a04628; --xs:#e8ebd2; --xi:#404618; --xm:#646a3f; --g-bg:#ece4d4; --g-fg:#350b5a; --l-bg:#f7f8f0; --l-fg:#974226; }
html.dark #crop-overlay, html.dark #pdf-crop-overlay { --xl:#aeb493; --xs:#5a6031; --xi:#f5f7ec; --xm:#c1c6ab; --g-bg:#261638; --g-fg:#bf9ce8; --l-bg:#444a1f; --l-fg:#e6eacd; }
html body .overlay .cr-win { width:400px !important; max-width:96% !important; max-height:96vh !important; max-height:min(96dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px)) !important; padding:0 !important; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--xl) !important; border-radius:6px !important; background:var(--surface) !important; box-shadow:none !important; text-align:left; color:var(--xi); }
.cr-win .cr-hd { position:relative; flex:0 0 auto; text-align:center; padding:12px 64px; border-bottom:1px solid var(--xs); min-height:72px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cr-win .cr-hd h3 { margin:0; font-size:20px; font-weight:800; line-height:1.2; color:var(--xi); min-width:0; max-width:100%; overflow-wrap:anywhere; }
.cr-win .cr-sub { margin:2px 0 0; font-size:12px; line-height:1.3; color:var(--xm); }
.cr-win .cr-x { position:absolute; right:14px; top:14px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--xs); border-radius:6px; background:var(--surface); color:var(--xm); font-size:15px; cursor:pointer; }
.cr-win .cr-bd { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px; background:var(--l-bg); display:grid; gap:6px; align-content:start; }
.cr-win .cr-t { display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:0; padding:8px; border:1px solid var(--xl); border-radius:6px; background:var(--surface); }
.cr-win .cr-t .crop-canvas-wrap { margin:0 !important; border-radius:6px; flex:0 0 auto; }
.cr-win .cr-sl { height:64px; }
.cr-win .cr-sl input[type=range] { width:100%; margin:0; }
.cr-win .cr-ft { flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:6px; border-top:1px solid var(--xs); background:var(--surface); }
html body .cr-win .cr-ft button { height:56px; min-height:56px; margin:0; padding:4px; border-radius:6px !important; font-size:15px; font-weight:700; box-shadow:none !important; flex:none; width:auto; }
html body .cr-win .cr-ft .cr-cancel { border:1px solid var(--l-fg) !important; background:var(--surface) !important; color:var(--l-fg) !important; }
html body .cr-win .cr-ft .cr-ok { border:1px solid var(--g-fg) !important; background:color-mix(in srgb,var(--g-fg) 24%,var(--g-bg)) !important; color:var(--g-fg) !important; }
@media (max-width:820px) { html body .overlay .cr-win { width:96% !important; } .cr-win .cr-hd h3 { font-size:18px; } }

/* Tlačítka v oknech aspoň 44 px na výšku (Lov 4. 11. 2026). Kočky mají 48 px přes nový systém oken (of-bt), Psi 21 px. */
html body :is(#feedback-modal, #contract-template-overlay, #stud-agreement-overlay) .btn { min-height:44px; box-sizing:border-box; }
html body #contract-template-overlay .btn.btn-close { min-width:44px; }
html body .vacc-x { position:relative; }
html body .vacc-x::after { content:''; position:absolute; top:-15px; bottom:-15px; left:-16px; right:-16px; }

/* Hodnocení: křížek ✕ v rohu okna (převzato z Koček) */
html body #review-prompt-modal .rv-x { position:absolute; right:10px; top:10px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid #3b2a7a; border-radius:6px; background:var(--surface,#fff); color:var(--text,#1a1814); font-size:15px; cursor:pointer; touch-action:manipulation; }
html.dark body #review-prompt-modal .rv-x { border-color:#8f7fc8; }