/* Schválený místní úvod 3 · Perleťové sklo. Pouze povrchy, žádná změna geometrie. */
html.compact-home:not(.dark) {
  --bg: #f2edfc;
  --surface: #fff;
  --surface2: #f7f2ff;
  --text: #201349;
  --text2: #62518e;
  --text3: #6a5893;
  --accent: #6232d6;
  --accent-light: #eee3ff;
  --border: #d9c9f4;
  --pearl-face: linear-gradient(135deg, #fffffff5, #fcfaffdf 52%, #eee6fcbd);
  --pearl-edge: #d9c9f4;
  --pearl-light: #ffffffed;
  --pearl-shade: #a992d929;
  --pearl-shadow: #70519e12;
  --pearl-selected: linear-gradient(135deg, #eee4fff5, #e0d1f7e8);
}
html.compact-home.dark {
  --pearl-face: linear-gradient(135deg, #302743f5, #282135ef 52%, #322641e8);
  --pearl-edge: #66517f;
  --pearl-light: #a58cb32b;
  --pearl-shade: #140d242e;
  --pearl-shadow: #00000024;
  --pearl-selected: linear-gradient(135deg, #4a365f, #3b2c51);
}
html.compact-home:not(.dark) body {
  background: radial-gradient(ellipse at 9% 4%, #e7dcfa99, transparent 48%),
    radial-gradient(ellipse at 94% 36%, #f1ddf655, transparent 52%),
    linear-gradient(135deg, #faf8ff, #f2edfc 60%, #fcfaff);
  background-attachment: fixed;
}
html.compact-home :is(#header-row2 .h-tile, #header-row2 .filter-btn, #co-dnes .top-info-tile,
  #stats > .stat, #cat-sex-tabs > *, #lang-pill-btn, .compact-card-actions button,
  .compact-detail-label, .compact-close) {
  border-radius: 0 !important;
  border-color: var(--pearl-edge) !important;
  background: var(--pearl-face) !important;
  box-shadow: inset 1px 1px 0 var(--pearl-light), inset -1px -1px 0 var(--pearl-shade),
    0 2px 5px var(--pearl-shadow) !important;
}
/* Barvy stavů připojení a zálohy určuje původní aplikace, lesk je jen nad nimi. */
html.compact-home header :is(#badge-device, #badge-cloud, #header-backup-tile) {
  border-radius: 0 !important;
  background-image: linear-gradient(135deg, #ffffff35, #ffffff08 58%, #b5a0cf10) !important;
  box-shadow: inset 1px 1px 0 var(--pearl-light), inset -1px -1px 0 var(--pearl-shade),
    0 1px 3px var(--pearl-shadow) !important;
}
html.compact-home #header-row2 .header-left-group .fbtn-notes { border-color: #acd9d2 !important; }
html.compact-home #header-row2 .header-left-group .fbtn-mating { border-color: #e3c89e !important; }
html.compact-home #co-dnes .top-info-tile { border-color: #ead9ae !important; }
html.compact-home .compact-list > [data-compact-preview] {
  border-radius: 0 !important;
  border-color: var(--pearl-edge) !important;
  background: var(--pearl-face) !important;
  box-shadow: inset 1px 1px 0 var(--pearl-light), inset -1px -1px 0 var(--pearl-shade),
    0 3px 8px var(--pearl-shadow) !important;
}
html.compact-home .compact-summary { border-radius: 0; background: transparent; }
/* Vnitřní saténový rámeček fotografie neubere místo textu ani nezvětší kartu. */
html.compact-home .compact-avatar > div,
html.compact-home .compact-avatar .sq-avatar {
  border-radius: 0;
  outline: 1px solid var(--pearl-edge);
  outline-offset: -1px;
  box-shadow: 0 0 0 2px var(--pearl-light);
}
html.compact-home .compact-vaccine,
html.compact-home .compact-vaccine::before { border-radius: 0; }
html.compact-home .ios-tab-bar {
  border-radius: 0;
  border-color: var(--pearl-edge);
  background: var(--pearl-face);
  background-color: var(--surface);
  box-shadow: inset 0 1px 0 var(--pearl-light), 0 -2px 12px var(--pearl-shadow);
}
html.compact-home .tab-item { border-radius: 0; }
html.compact-home .tab-item.active {
  border-color: var(--pearl-edge);
  background: var(--pearl-selected);
  box-shadow: inset 1px 1px 0 var(--pearl-light), inset -1px -1px 0 var(--pearl-shade);
}
html.compact-home .tab-item.active .tab-label { color: var(--accent) !important; }
html.compact-home #stats .stat[style*="border-width:2.5px"],
html.compact-home #cat-sex-tabs > [aria-selected="true"] {
  background: var(--pearl-selected) !important;
  border-color: #b59adf !important;
}
/* Vybraný filtr (Všichni / Kocouři / …): na světlém perleťovém pozadí tmavý text, ne bílý z vykreslení (27. 10. 2026, kontrast). */
html.compact-home:not(.dark) #cat-sex-tabs > [aria-selected="true"],
html.compact-home:not(.dark) #cat-sex-tabs > [aria-selected="true"] * { color: #4A1D7A !important; }
@media (hover: hover) {
  html.compact-home :is(#header-row2 .h-tile, #header-row2 .filter-btn, #cat-sex-tabs > *, .compact-card-actions button):hover {
    background: var(--pearl-selected) !important;
    border-color: #b59adf !important;
  }
}
html.compact-home :is(#header-row2 .h-tile, #header-row2 .filter-btn, #stats > .stat,
  #cat-sex-tabs > *, .compact-card-actions button):active {
  box-shadow: inset 1px 1px 3px var(--pearl-shade), inset -1px -1px 0 var(--pearl-light) !important;
}
html.compact-home :is(#header-row2 button, #stats [role="button"], #cat-sex-tabs > *,
  .compact-card-actions button, .tab-item):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Nastavení: všechny mezery mezi prvky 4 px (PC i telefon); vnitřní odsazení karet beze změny. */
html:has(#tab-nastaveni.active) header { gap:4px !important; margin-bottom:4px !important; }
html:has(#tab-nastaveni.active) header .logo { gap:4px !important; column-gap:4px !important; row-gap:4px !important; }
html:has(#tab-nastaveni.active) #header-row2, html:has(#tab-nastaveni.active) #header-row2 .header-left-group { gap:4px !important; }
#tab-nastaveni#tab-nastaveni #settings-motto-banner > div { gap:4px !important; }
#tab-nastaveni#tab-nastaveni#tab-nastaveni > div > :first-child { margin:0 0 4px !important; }
#tab-nastaveni#tab-nastaveni#tab-nastaveni > div > div > * { margin-top:0 !important; margin-bottom:4px !important; }
#tab-nastaveni#tab-nastaveni#tab-nastaveni > div > div > *:last-child { margin-bottom:0 !important; }
#tab-nastaveni#tab-nastaveni .breedtrack-promo-card > * { margin-top:0 !important; margin-bottom:4px !important; }
#tab-nastaveni#tab-nastaveni .breedtrack-promo-card > *:last-child { margin-bottom:0 !important; }
#tab-nastaveni#tab-nastaveni .breedtrack-promo-card button { gap:4px !important; }
#tab-nastaveni#tab-nastaveni :has(> .settings-tile) { gap:4px !important; margin-top:0 !important; }
#tab-nastaveni#tab-nastaveni .settings-tile { gap:4px !important; }
#tab-nastaveni#tab-nastaveni .set-brand-group { margin-bottom:4px !important; }
#tab-nastaveni#tab-nastaveni .set-brand-group > * { margin-bottom:4px !important; }
#tab-nastaveni#tab-nastaveni .set-brand-group > *:last-child { margin-bottom:0 !important; }
#tab-nastaveni#tab-nastaveni .set-head { gap:4px !important; }
#tab-nastaveni#tab-nastaveni #set-patka > * { margin-top:4px !important; }
#tab-nastaveni#tab-nastaveni #set-odkazy-radek { gap:4px !important; padding-top:4px !important; margin-top:4px !important; }
#tab-nastaveni#tab-nastaveni #set-verze-radek { margin-top:4px !important; }
html:has(#tab-nastaveni.active) #settings-motto-banner > div { gap:4px !important; }
#tab-nastaveni#tab-nastaveni .set-danger-card { margin-top:0 !important; }

/* Nastavení: písmo podle společného měřítka --ts. */
#tab-nastaveni#tab-nastaveni .set-brand-title, #tab-nastaveni#tab-nastaveni .set-danger-title { font-size:calc(14.5px * var(--ts, 1)) !important; }
#tab-nastaveni#tab-nastaveni .set-brand-sub, #tab-nastaveni#tab-nastaveni .set-danger-sub { font-size:calc(11.5px * var(--ts, 1)) !important; }
#tab-nastaveni#tab-nastaveni .settings-tile { font-size:calc(11px * var(--ts, 1)) !important; }
#tab-nastaveni#tab-nastaveni .set-brand-title, #tab-nastaveni#tab-nastaveni .set-danger-title { font-size:calc(14px * var(--ts, 1)) !important; }


/* ═══ TMAVÝ REŽIM NOVÉHO VZHLEDU (25. 10. 2026, Petrův návrh 3 „plné barvy") ═══
   Nový vzhled (compact-*.css) měl barvy jen pro světlý režim: v tmavém režimu zůstaly
   karty Kalendáře světle růžové s bílým textem a některá tlačítka měla tmavý text na černé.
   Barevné dlaždice a tlačítka se v tmavém režimu VYPLNÍ sytou tmavou barvou (80 % své
   barvy ze světlého režimu), lem je zesvětlený (70 % barvy + 30 % bílé) a text je bílý.
   Platí jen pro html.dark (nastavuje ho index.html podle telefonu); světlý režim se nemění.
   Předpona :not(#s1):not(#s2) jen zvedá váhu pravidla nad starší pravidla s :is(#…) v compact-*.css. */
/* Horní řady tlačítek: barva je v proměnné --td (definují ji compact-*.css pro každou záložku). */
html.dark:not(#s1):not(#s2) #header-row2 :is(#add-adult-btn, #add-cal-btn, #add-litter-btn, #add-supply-btn, #global-search-btn, #cal-events-btn, #cal-notif-btn, #supply-dosage-btn, #supply-export-btn, #litter-parent-btn, #cat-sort-bar button, #litter-sort-bar button, #supply-sort-wrap > button, .filter-btn, select.cl-year, #add-trials-btn, .cx-titles, #fin-export-btn, #cf-filtry-btn) {
  background: color-mix(in srgb, rgb(var(--td, 98,50,214)) 80%, #000) !important;
  border-color: color-mix(in srgb, rgb(var(--td, 98,50,214)) 70%, #fff) !important;
  color: #fff !important;
}
html.dark:not(#s1):not(#s2) #header-row2 :is(#add-adult-btn, #add-cal-btn, #add-litter-btn, #add-supply-btn, #global-search-btn, #cal-events-btn, #cal-notif-btn, #supply-dosage-btn, #supply-export-btn, #litter-parent-btn, #cat-sort-bar button, #litter-sort-bar button, #supply-sort-wrap > button, .filter-btn, select.cl-year, #add-trials-btn, .cx-titles, #fin-export-btn, #cf-filtry-btn) * { color: #fff !important; }
/* fialová (98, 50, 214) */
html.dark:not(#s1):not(#s2) #lang-pill-btn, html.dark:not(#s1):not(#s2) .cc-actions, html.dark:not(#s1):not(#s2) .cc-detail, html.dark:not(#s1):not(#s2) .cc-stat.cc-today, html.dark:not(#s1):not(#s2) .cl-kittens, html.dark:not(#s1):not(#s2) .cl-weights, html.dark:not(#s1):not(#s2) .compact-detail-label, html.dark:not(#s1):not(#s2) .compact-qr, html.dark:not(#s1):not(#s2) .cp-btn, html.dark:not(#s1):not(#s2) .supply-item-card button.tap44, html.dark:not(#s1):not(#s2) .litter-roleta-btn, html.dark:not(#s1):not(#s2) .cf-detail, html.dark:not(#s1):not(#s2) .cx-detail, html.dark:not(#s1):not(#s2) .cx-actions, html.dark:not(#s1):not(#s2) .cx-tools button { background: rgb(78,40,171) !important; border-color: rgb(145,112,226) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) #lang-pill-btn *, html.dark:not(#s1):not(#s2) .cc-actions *, html.dark:not(#s1):not(#s2) .cc-detail *, html.dark:not(#s1):not(#s2) .cc-stat.cc-today *, html.dark:not(#s1):not(#s2) .cl-kittens *, html.dark:not(#s1):not(#s2) .cl-weights *, html.dark:not(#s1):not(#s2) .compact-detail-label *, html.dark:not(#s1):not(#s2) .compact-qr *, html.dark:not(#s1):not(#s2) .cp-btn *, html.dark:not(#s1):not(#s2) .supply-item-card button.tap44 *, html.dark:not(#s1):not(#s2) .litter-roleta-btn *, html.dark:not(#s1):not(#s2) .cf-detail *, html.dark:not(#s1):not(#s2) .cx-detail *, html.dark:not(#s1):not(#s2) .cx-actions *, html.dark:not(#s1):not(#s2) .cx-tools button * { color: #fff !important; }
/* tmavě fialová (85, 33, 135) */
html.dark:not(#s1):not(#s2) #cat-sex-tabs .sex-tab { background: rgb(68,26,108) !important; border-color: rgb(136,100,171) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) #cat-sex-tabs .sex-tab * { color: #fff !important; }
/* tyrkysová (18, 102, 94) */
html.dark:not(#s1):not(#s2) .cc-stat.cc-next { background: rgb(14,82,75) !important; border-color: rgb(89,148,142) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cc-stat.cc-next * { color: #fff !important; }
/* červená (181, 46, 72) */
html.dark:not(#s1):not(#s2) .cc-stat.cc-todo { background: rgb(145,37,58) !important; border-color: rgb(203,109,127) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cc-stat.cc-todo * { color: #fff !important; }
/* vínová (165, 36, 60) */
html.dark:not(#s1):not(#s2) .cp-st.cp-expired { background: rgb(132,29,48) !important; border-color: rgb(192,102,118) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cp-st.cp-expired * { color: #fff !important; }
/* okrová (140, 95, 10) */
html.dark:not(#s1):not(#s2) .cp-st.cp-expiring, html.dark:not(#s1):not(#s2) .cp-st.cp-low { background: rgb(112,76,8) !important; border-color: rgb(174,143,84) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cp-st.cp-expiring *, html.dark:not(#s1):not(#s2) .cp-st.cp-low * { color: #fff !important; }
/* zelená (31, 106, 53) */
html.dark:not(#s1):not(#s2) .cp-st.cp-stock { background: rgb(25,85,42) !important; border-color: rgb(98,151,114) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cp-st.cp-stock * { color: #fff !important; }
/* noční modř (32, 19, 73) */
html.dark:not(#s1):not(#s2) #stats .stat, html.dark:not(#s1):not(#s2) .cl-stat, html.dark:not(#s1):not(#s2) .top-info-tile, html.dark:not(#s1):not(#s2) .compact-statuses, html.dark:not(#s1):not(#s2) .supply-item-card, html.dark:not(#s1):not(#s2) .cc-card { background: rgb(26,15,58) !important; border-color: rgb(99,90,128) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) #stats .stat *, html.dark:not(#s1):not(#s2) .cl-stat *, html.dark:not(#s1):not(#s2) .top-info-tile *, html.dark:not(#s1):not(#s2) .compact-statuses *, html.dark:not(#s1):not(#s2) .supply-item-card *, html.dark:not(#s1):not(#s2) .cc-card * { color: #fff !important; }
/* Karty (koček, Kalendáře) mají vlastní tmavě fialový podklad. */
html.dark:not(#s1):not(#s2) :is(.compact-card, .cc-card, .adult-design-card, .cf-card) { background: #241f33 !important; }
/* Datum v kartě Kalendáře: tmavý podklad místo světle modrého. */
html.dark:not(#s1):not(#s2) .cc-date-block { background: rgb(47,39,49) !important; }
/* Prázdná fotka (silueta kočky) ztlumená, aby nesvítila. */
/* Jen prázdný rámeček bez fotky – skutečná fotka (img uvnitř) se neztlumuje. */
html.dark:not(#s1):not(#s2) .sq-avatar:not(:has(img)), html.dark:not(#s1):not(#s2) span.cx-photo { filter: brightness(.42) saturate(1.3); border-color: #4a4560 !important; }
/* Karta BreedTrack v Nastavení: tmavý podklad, světlé texty. */
html.dark:not(#s1):not(#s2) .breedtrack-promo-card { background: rgb(30,28,38) !important; color: #f0ede6 !important; }
html.dark:not(#s1):not(#s2) .breedtrack-promo-card :is(div, p, span, b, strong):not(button *) { color: #f0ede6 !important; }
/* Zelené tlačítko breedtrack.app: tmavší zelená, bílý text 5,0 : 1 (dřív 3,3 : 1). */
html.dark:not(#s1):not(#s2) .breedtrack-promo-card button { background: #15803d !important; }
/* Zásoby: oranžový a červený popisek dlaždic Dochází / Do 30 dnů světlejší (dřív 3,8 a 3,0 : 1 na černé). */
html.dark:not(#s1):not(#s2) .supply-top-stat-lbl[style*="#b45309"], html.dark:not(#s1):not(#s2) .supply-top-stat-lbl[style*="#b45309"] * { color: #fbbf24 !important; }
html.dark:not(#s1):not(#s2) .supply-top-stat-lbl[style*="#be123c"], html.dark:not(#s1):not(#s2) .supply-top-stat-lbl[style*="#be123c"] * { color: #fb7185 !important; }
/* Spodní lišta: popisky zůstávají v barvě záložky, jen zesvětlené (fialová „Kočky" měla 3,9 : 1);
   červený odznak počtu je tmavší (bílé číslo mělo 3,0 : 1). */
html.dark:not(#s1):not(#s2) .ios-tab-bar .tab-item .tab-label { color: color-mix(in srgb, rgb(var(--t, 160,157,150)) 72%, #fff) !important; }
html.dark:not(#s1):not(#s2) .cal-tab-badge { background: #d32f2f !important; }
/* Finance: přehledové dlaždice a dlužníci tmavě modře, barevné popisky zesvětlené (dřív 2,1–3,0 : 1). */
html.dark:not(#s1):not(#s2) :is(.cf-stat, .cf-dluh) { background: rgb(26,15,58) !important; border-color: rgb(99,90,128) !important; }
html.dark:not(#s1):not(#s2) .cf-stat[data-cf-stat="income"] :is(.cf-stat-value, .cf-stat-label) { color: #86efac !important; }
html.dark:not(#s1):not(#s2) .cf-stat:is([data-cf-stat="expenses"], [data-cf-stat="refund"]) :is(.cf-stat-value, .cf-stat-label) { color: #fca5a5 !important; }
html.dark:not(#s1):not(#s2) #fin-export-btn { --td: 46,125,50; }
/* Částky obarvené přímo v kódu (saldo zeleně / červeně, vratky červeně, dluhy oranžově) zesvětlené pro tmavý podklad. */
html.dark:not(#s1):not(#s2) .cf-stat [style*="#2e7d32" i] { color: #86efac !important; }
html.dark:not(#s1):not(#s2) .cf-stat [style*="#c62828" i] { color: #fca5a5 !important; }
html.dark:not(#s1):not(#s2) .cf-dluh:not(.cf-dluh-vice) b { color: #fbbf24 !important; }
/* Výstavy: žlutý pruh s tituly okrový, štítky v něm tmavé s bílým textem. */
html.dark:not(#s1):not(#s2) .cx-card .cx-results { background: rgb(112,76,8) !important; border-color: rgb(175,143,84) !important; }
html.dark:not(#s1):not(#s2) .cx-card .cx-badge { background: rgba(0,0,0,.28) !important; border-color: rgba(255,255,255,.45) !important; color: #fff !important; }
html.dark:not(#s1):not(#s2) .cx-card .cx-badge * { color: #fff !important; }