/* Svátky. Vzhled vychází z trhacího kalendáře: krémový papír, červená hlavička, patkové písmo u jmen. */
:root {
  --papir: #F4EEE3; --karta: #FFFCF6; --ink: #1F1A15; --tlum: #766C60; --linka: #E3D9C8;
  --cervena: #C2362B; --cervena-tm: #9F2A21; --cervena-sv: #F7E3DF; --na-cervene: #FFF8F0;
  --zlata: #B5852A; --zlata-sv: #F5EBD3; --nocni: #2F4A78; --nocni-sv: #E2E8F3;
  --stin: 0 1px 2px rgba(60, 40, 20, .08), 0 6px 18px rgba(60, 40, 20, .07);
  --r: 6px;
  --patka: "Noto Serif", Georgia, "Times New Roman", serif;
  --bez: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papir: #141210; --karta: #1F1C18; --ink: #F2ECE1; --tlum: #A2988A; --linka: #322D27;
    --cervena: #E05A4E; --cervena-tm: #B83F35; --cervena-sv: #3A211E; --na-cervene: #FFF8F0;
    --zlata: #D9A94A; --zlata-sv: #33291A; --nocni: #8FB0E6; --nocni-sv: #1D2636;
    --stin: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
/* Čínské znaky zvířat a živlů: výřez z Noto Serif SC Bold (OFL), jen 44 znaků */
@font-face { font-family: "Cina"; src: url(cina.woff2) format("woff2"); font-weight: 700; font-display: block; }
:root { --cina: "Cina", "Noto Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  /* barvy živlů: nefrit, rumělka, okr, cín, tuš */
  --z0: #4F7C5A; --z1: #B8322A; --z2: #A87A34; --z3: #7F7B72; --z4: #22324D; }
@media (prefers-color-scheme: dark) { :root { --z0: #6E9C78; --z1: #D9564A; --z2: #C79A52; --z3: #A39F95; --z4: #5F7BA6; } }
.pecet { position: relative; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .22em;
  background: var(--z, var(--cervena)); color: #FBF4E8; font: 700 1em/1 var(--cina); vertical-align: middle;
  box-shadow: inset 0 0 0 .07em rgba(255, 248, 236, .55), inset 0 0 0 .14em var(--z, var(--cervena)); }
.pecet b, .znam .pecet b { display: block; margin: 0; color: inherit; font: inherit; font-size: 1.12em; transform: translateY(.02em); }
.pecet i { position: absolute; right: -.32em; bottom: -.32em; width: 1.02em; height: 1.02em; border-radius: 50%; display: grid; place-items: center;
  background: var(--karta); color: var(--z, var(--cervena)); font: 700 .5em/1 var(--cina); font-style: normal; box-shadow: 0 0 0 .12em var(--z, var(--cervena)); }
:root { --emoji: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", sans-serif; }
.pecet.emo { background: color-mix(in srgb, var(--z, var(--cervena)) 16%, var(--karta)); font-family: var(--emoji); font-weight: 400;
  box-shadow: inset 0 0 0 .08em var(--z, var(--cervena)); }
.pecet.emo b, .znam .pecet.emo b { font-size: 1.15em; transform: none; }
.pecet.emo i { font: .52em/1 var(--emoji); }
.pecet.z0 { --z: var(--z0); } .pecet.z1 { --z: var(--z1); } .pecet.z2 { --z: var(--z2); } .pecet.z3 { --z: var(--z3); } .pecet.z4 { --z: var(--z4); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--papir); color: var(--ink); font: 15px/1.45 var(--bez);
  display: flex; flex-direction: column; overflow: hidden; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

#hlava { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; flex: none; }
#hlava h1 { font: 600 20px/1.2 var(--patka); letter-spacing: .01em; }
.ikona { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--tlum); }
.ikona:active { background: var(--linka); }

#obsah { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 16px 24px; overscroll-behavior: contain; }
#lista { flex: none; display: flex; background: var(--karta); border-top: 1px solid var(--linka); padding-bottom: env(safe-area-inset-bottom); }
#lista button { flex: 1; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--tlum); font-size: 11px; }
#lista svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#lista button.akt { color: var(--cervena); font-weight: 600; }

.karta { background: var(--karta); border-radius: var(--r); box-shadow: var(--stin); margin-bottom: 14px; overflow: hidden; }
.karta .vnitrek { padding: 14px 16px; }
.nadpis { font: 600 12px/1 var(--bez); letter-spacing: .09em; text-transform: uppercase; color: var(--tlum); margin: 18px 2px 8px; }
.tlum { color: var(--tlum); }
.maly { font-size: 13px; }

/* list trhacího kalendáře */
.trhaci .pas { background: var(--cervena); color: var(--na-cervene); display: flex; align-items: center; justify-content: space-between; padding: 6px 6px; }
.trhaci .pas .datum { text-align: center; flex: 1; font: 600 13px/1.2 var(--bez); letter-spacing: .08em; text-transform: uppercase; }
.trhaci .pas button { width: 40px; height: 36px; display: grid; place-items: center; border-radius: var(--r); }
.trhaci .pas button:active { background: rgba(255, 255, 255, .18); }
.trhaci .telo { padding: 10px 16px 18px; text-align: center; }
.trhaci .cislo { font: 700 84px/1 var(--patka); color: var(--cervena); letter-spacing: -.02em; }
.trhaci .popisek { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tlum); margin-top: 8px; }
.trhaci .jmeno { font: 600 34px/1.15 var(--patka); margin-top: 2px; overflow-wrap: anywhere; }
.trhaci .jmeno.dlouhe { font-size: 25px; }
.trhaci .jmeno button { font: inherit; }
.trhaci .take { margin-top: 8px; color: var(--tlum); font-size: 14px; }
.trhaci .pocet { margin-top: 6px; color: var(--tlum); font-size: 12.5px; }
.znam .zn .pecet { font-size: 15px; color: #FBF4E8; }
.dalsiDny { display: flex; align-items: stretch; width: 100%; text-align: left; padding: 0; }
.dalsiDny > span { flex: 1; padding: 12px 14px; font: 600 15px/1.25 var(--patka); border-right: 1px solid var(--linka); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dalsiDny small { display: block; font: 500 11px/1.4 var(--bez); letter-spacing: .08em; text-transform: uppercase; color: var(--tlum); }
.dalsiDny em { font-style: normal; display: flex; align-items: center; gap: 4px; padding: 0 12px; font-size: 12.5px; color: var(--cervena); font-weight: 600; max-width: 96px; line-height: 1.2; }
.dalsiDny em i { font-style: normal; font-size: 22px; }
.dalsiDny:active { background: var(--linka); }
.svet > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--linka); }
.svet > div:first-child { border-top: 0; }
.svet span { color: var(--tlum); font-size: 13.5px; }
.svet b { font: 600 15px var(--patka); text-align: right; }
.svet button { width: 100%; padding: 10px; border-top: 1px solid var(--linka); color: var(--cervena); font-weight: 600; font-size: 13px; }
.pocetJm { display: flex; align-items: baseline; gap: 10px; }
.pocetJm b { font: 700 28px/1 var(--patka); color: var(--cervena); white-space: nowrap; }
.pocetJm small { display: block; font-size: 11px; color: var(--tlum); margin-top: 2px; }
.trhaci .take button { color: var(--ink); text-decoration: underline; text-decoration-color: var(--linka); text-underline-offset: 3px; }
.zpetDnes { display: block; margin: 10px auto 0; color: var(--cervena); font-weight: 600; font-size: 13px; padding: 6px 12px; }

.svatecni { border-left: 4px solid var(--cervena); }
.svatecni.zvyk { border-left-color: var(--zlata); }
.svatecni h3 { font: 600 17px/1.25 var(--patka); }
.svatecni .druh { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--cervena); font-weight: 700; margin-bottom: 3px; }
.svatecni.zvyk .druh { color: var(--zlata); }
.svatecni p { margin-top: 6px; color: var(--tlum); font-size: 14px; user-select: text; -webkit-user-select: text; }

.radky > * { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--linka); width: 100%; text-align: left; }
.radky > *:first-child { border-top: 0; }
.radky button:active { background: var(--papir); }
.radky .den { flex: none; width: 46px; text-align: center; }
.radky .den b { display: block; font: 700 19px/1 var(--patka); color: var(--cervena); }
.radky .den span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--tlum); }
.radky .hl { flex: 1; min-width: 0; }
.radky .hl b { font: 600 16px/1.25 var(--patka); display: block; overflow-wrap: anywhere; }
.radky .hl span { font-size: 12.5px; color: var(--tlum); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radky .pr { flex: none; color: var(--tlum); font-size: 12.5px; text-align: right; }
.znacka { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cervena); margin-left: 6px; vertical-align: middle; }
.znacka.zl { background: var(--zlata); }

.znam { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.znam > div { padding: 12px 4px; border-left: 1px solid var(--linka); }
.znam > div:first-child { border-left: 0; }
.znam .zn { font-size: 24px; line-height: 1.1; }
.znam b { display: block; font: 600 15px/1.2 var(--patka); margin-top: 2px; }
.znam span { font-size: 11px; color: var(--tlum); }

/* ovládací prvky: plné, bez obrysových kapslí */
.prepinac { display: flex; background: var(--linka); border-radius: var(--r); padding: 3px; gap: 3px; margin-bottom: 12px; }
.prepinac button { flex: 1; padding: 8px 6px; border-radius: 4px; font-size: 13.5px; font-weight: 600; color: var(--tlum); }
.prepinac button.akt { background: var(--karta); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tl { background: var(--cervena); color: var(--na-cervene); border-radius: var(--r); padding: 11px 16px; font-weight: 600; text-align: center; }
.tl:active { background: var(--cervena-tm); }
.tl.vedl { background: var(--linka); color: var(--ink); }
.tl.sirka { display: block; width: 100%; margin-top: 10px; }

/* měsíc */
.mesicHlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mesicHlava h2 { font: 600 22px/1.2 var(--patka); }
.mesicHlava h2 small { font: 400 15px var(--bez); color: var(--tlum); margin-left: 6px; }
.mesicHlava .sipky { display: flex; }
.mrizka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mrizka .dt { text-align: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tlum); padding: 2px 0 4px; }
.mrizka .dt.vik { color: var(--cervena); }
.bunka { background: var(--karta); border-radius: 4px; min-height: 62px; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; overflow: hidden; position: relative; }
.bunka b { font: 700 16px/1.1 var(--patka); }
.bunka.vik b, .bunka.sv b { color: var(--cervena); }
.bunka span { font-size: 9.5px; line-height: 1.12; text-align: center; margin-top: 3px; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; letter-spacing: -.01em; }
.bunka.sv span { color: var(--cervena); font-weight: 600; }
.bunka.dnes { background: var(--cervena); color: var(--na-cervene); }
.bunka.dnes b, .bunka.dnes span { color: var(--na-cervene); }
.bunka .tecka { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--zlata); }
.bunka.prazdna { background: none; }
.bunka:active { filter: brightness(.94); }
.seznamMesic .radky > * { padding: 7px 14px; }
.seznamMesic .den b { font-size: 17px; }
.dnesRadek { background: var(--cervena-sv); }

/* hledání */
.hledat { position: sticky; top: -4px; z-index: 3; background: var(--papir); padding: 4px 0 8px; margin: 0 -2px; }
.pole { display: flex; align-items: center; gap: 8px; background: var(--karta); border-radius: var(--r); padding: 0 12px; box-shadow: var(--stin); }
.pole input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 12px 0; font-size: 16px; user-select: text; -webkit-user-select: text; }
.pole svg { width: 19px; height: 19px; fill: none; stroke: var(--tlum); stroke-width: 2; stroke-linecap: round; flex: none; }
.filtry { display: flex; gap: 6px; margin-top: 8px; }
.filtry .prepinac { margin: 0; flex: 1; }
.pismena { display: flex; gap: 2px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; }
.pismena::-webkit-scrollbar { display: none; }
.pismena button { flex: none; min-width: 32px; height: 32px; border-radius: 4px; font: 600 14px var(--patka); color: var(--tlum); }
.pismena button.akt { background: var(--cervena); color: var(--na-cervene); }
.mesicPruh { position: sticky; top: 0; font: 600 12px/1 var(--bez); letter-spacing: .09em; text-transform: uppercase; color: var(--cervena); padding: 14px 2px 7px; }
.nic { text-align: center; color: var(--tlum); padding: 36px 20px; }

/* spodní list */
#zavoj { position: fixed; inset: 0; background: rgba(20, 14, 8, .45); z-index: 10; }
#list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--papir); border-radius: 14px 14px 0 0; max-height: 90%; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); animation: nahoru .18s ease-out; }
@keyframes nahoru { from { transform: translateY(24px); opacity: 0; } }
#listUchyt { flex: none; height: 20px; position: relative; }
#listUchyt::after { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--linka); }
#listObsah { overflow-y: auto; padding: 2px 16px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
#listObsah h2 { font: 600 28px/1.15 var(--patka); overflow-wrap: anywhere; }
#listObsah .pod { color: var(--tlum); margin: 3px 0 14px; }
#listObsah p.popis { user-select: text; -webkit-user-select: text; }
.stitky { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stitky span, .stitky button { background: var(--linka); border-radius: 4px; padding: 4px 9px; font-size: 13.5px; }
.akce { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.akce button { background: var(--karta); border-radius: var(--r); padding: 10px 2px 8px; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: var(--stin); }
.akce button:active { background: var(--linka); }
.akce svg { width: 22px; height: 22px; fill: none; stroke: var(--cervena); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hvezda { color: var(--linka); font-size: 22px; width: 40px; height: 40px; flex: none; }
.hvezda.ano { color: var(--zlata); }

/* nastavení */
.volba { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--linka); }
.volba:first-child { border-top: 0; }
.volba > div { min-width: 0; }
.volba small { display: block; color: var(--tlum); font-size: 12.5px; margin-top: 1px; }
.volba select, .volba input[type=time], .volba input[type=text] { background: var(--linka); border: 0; border-radius: 4px; padding: 7px 8px; max-width: 170px; }
.volba input[type=text] { width: 100%; max-width: none; user-select: text; -webkit-user-select: text; }
.vyp { flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--linka); position: relative; transition: background .15s; }
.vyp::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--karta); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.vyp.ano { background: var(--cervena); }
.vyp.ano::after { transform: translateX(18px); }

/* horoskop */
.kolo { display: block; width: 100%; max-width: 420px; margin: 0 auto; touch-action: none; }
.kolo text { font-family: var(--bez); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.kolo .vys { stroke: var(--papir); stroke-width: 1.2; }
.legenda { display: grid; gap: 0; }
.legenda > div { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--linka); }
.legenda > div:first-child { border-top: 0; }
.legenda i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.legenda b { font: 600 17px var(--patka); }
.legenda .co { flex: 1; min-width: 0; }
.legenda small { display: block; color: var(--tlum); font-size: 12px; }
.datumOvl { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.datumOvl b { font: 600 19px var(--patka); min-width: 150px; text-align: center; }
.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tlum); text-align: left; padding: 8px 6px; font-weight: 600; }
.tab td { padding: 7px 6px; border-top: 1px solid var(--linka); white-space: nowrap; }
.tab td:first-child, .tab th:first-child { padding-left: 14px; }
.tab td b { font-family: var(--patka); }
.tab .dni { color: var(--tlum); font-size: 11.5px; }
.tab tr.akt td { background: var(--cervena-sv); }
.text p { margin-bottom: 9px; user-select: text; -webkit-user-select: text; }
.text p:last-child { margin-bottom: 0; }
.rokOvl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.rokOvl input { width: 96px; text-align: center; font: 700 26px var(--patka); background: var(--karta); border: 0; border-radius: var(--r); padding: 6px 4px; box-shadow: var(--stin); user-select: text; -webkit-user-select: text; }
.rokOvl button { width: 44px; height: 44px; border-radius: var(--r); background: var(--linka); font-size: 20px; font-weight: 600; }
.cyklus { display: grid; grid-template-columns: 50px repeat(12, 1fr); gap: 2px; font-size: 10px; align-items: center; }
.cyklus .zv { text-align: center; font: 700 15px/1.6 var(--cina); color: var(--tlum); }
.cyklus .zv.akt { color: var(--ink); }
.cyklus .zv.emo { font: 15px/1.6 var(--emoji); opacity: .55; }
.cyklus .zv.emo.akt { opacity: 1; }
.cyklus .zi b.emo { font: 12px/1 var(--emoji); }
.kolo text.emo { font-family: var(--emoji); }
.cinaStyl { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cinaStyl > span { font-size: 12px; color: var(--tlum); }
.cinaStyl .prepinac { flex: 1; margin: 0; }
.cinaStyl .prepinac button { padding: 6px; font-size: 13px; }
.cinaStyl b.cina { font: 700 1.05em/1 var(--cina); }
.cyklus .zi { font-size: 10px; font-weight: 600; color: var(--z); display: flex; align-items: center; gap: 3px; }
.cyklus .zi b { font: 700 13px/1 var(--cina); }
.cyklus button { height: 26px; border-radius: 3px; font-size: 10px; background: color-mix(in srgb, var(--z, var(--linka)) 13%, var(--karta)); color: var(--tlum); }
.cyklus button.akt { background: var(--z, var(--cervena)); color: #FBF4E8; font-weight: 700; }
.cyklusHlava { display: flex; align-items: center; justify-content: space-between; margin: 18px 4px 6px; }
.cyklusHlava div { text-align: center; }
.cyklusHlava span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tlum); }
.cyklusHlava b { font: 700 18px var(--patka); }
.cyklusHlava .ikona { font-size: 24px; background: var(--karta); box-shadow: var(--stin); color: var(--ink); }
.kolo text.cina { font-family: var(--cina); font-weight: 700; }
/* pole k přepsání: po klepnutí je celý obsah označený modře */
.prepis { user-select: text; -webkit-user-select: text; caret-color: #2F6FDE; outline: none; }
.prepis::selection { background: #2F6FDE; color: #fff; }
.prepis:focus { box-shadow: 0 0 0 2px #2F6FDE; }
.prepis.chyba { box-shadow: 0 0 0 2px var(--cervena); }
.datumPole { position: relative; display: flex; align-items: center; gap: 2px; }
.datumPole input.prepis { width: 150px; text-align: center; font: 600 19px var(--patka); background: transparent; border: 0; border-radius: var(--r); padding: 4px 2px; }
.datumPole input.prepis:focus { background: var(--karta); }
.kalBtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--tlum); }
.kalBtn:active { background: var(--linka); }
#hvKal { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.cyklus button.prazdne { visibility: hidden; }

#hlaska { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--papir); padding: 9px 16px; border-radius: var(--r); font-size: 14px; z-index: 30; max-width: 86%; text-align: center; }
[hidden] { display: none !important; }