/* Barevné palety hry — zadání Bětky 29. 7. 2026 („dvě palety + přepínač").
 *
 * PROČ TAKHLE: v šablonách je ~2600 pevných Tailwind barev (bg-white, text-slate-500…).
 * Přepsat je ručně by znamenalo 67 souborů a jistotu, že se na něco zapomene a v tmavém
 * režimu zůstane svítivě bílý kus. Místo toho tady jednou provždy PŘEMAPUJU Tailwind třídy
 * na proměnné palety. Šablony zůstávají beze změny a přepne se úplně všechno.
 *
 * Hexy jsou PŘESNĚ ze zadání, nic vlastního. Selektory začínají `html`, aby přebily
 * Tailwind (ten se vkládá do stránky až za běhu, takže na pořadí souborů se nedá spolehnout).
 */

:root {                     /* světlý režim = výchozí (paleta A, béžová) */
  --page: #cabfa6;
  --card: #fffdf8;
  --pole: #ffffff;           /* políčka formulářů: bílá, ať na béžové nesplývají (Bětka 22. 9. 2026) */
  --card-line: #c9bb9f;
  --inset: #faf6ec;
  --ink: #3a3226;
  --muted: #8f8065;
  --faint: #a89a82;
  --green: #1a9e6f;
  --green-dark: #158a60;
  --green-strong: #10b981;   /* sytá zelená tmavé palety (tady ji drží jen kvůli jednomu zdroji) */
  --bar: var(--btn);         /* lišta = přesně barva tlačítka „Zaplatit a uzavřít" (#1a9e6f) */
  --bar-ink: #000000;        /* na zelené má černá kontrast 6,1:1, bílá jen 3,4:1 */
  --subbar: #b89f7d;         /* informační pruh pod lištou — jiná úroveň než navigace */
  --subbar-ink: #3a3226;
  --subbar-link: #5f2708;    /* rezavá z náhledu (#7a3410) ztmavená: 3,5:1 → 4,6:1 kontrast */

  /* ── 🍽️ Okno „Jídlo" (návrh Bětka 18. a 21. 9. 2026) ─────────────────────
   * Pilulky denní doby a kategorií mají BÍLÉ písmo, takže barva musí bílou
   * unést: nejslabší zlatá 3,9:1, nejsilnější fialová 5,7:1. Jsou to PLOCHY,
   * ne písmo — kontrast si nesou s sebou, proto se v tmavém režimu NEMĚNÍ.
   * Kdyby se měla vrátit svítivá žlutá, musí se u ní vrátit i tmavé písmo. */
  --jidlo-snidane: #15803d;        /* zelená — bílá 5,0:1 */
  --jidlo-obed: #a87908;           /* zlatá — bílá 3,9:1 */
  --jidlo-vecere: #2563eb;         /* modrá — bílá 5,2:1 */
  --jidlo-svacina: #db2777;        /* růžová — bílá 4,6:1 */
  --jidlo-pismo: #ffffff;          /* písmo v pilulkách */
  --jidlo-kat-pecivo: #a87908;
  --jidlo-kat-maso: #db2777;
  --jidlo-kat-mlecne: #2563eb;
  --jidlo-kat-zelenina: #15803d;
  --jidlo-kat-ostatni: #7c3aed;    /* fialová — bílá 5,7:1 */

  /* Záhlaví karty osoby i kategorie. Rezavá je TMAVÁ barva, takže pod ní musí
   * být SVĚTLÁ plocha — na tmavém pruhu měla 1,2:1. Světle zlatý pruh je proto
   * stejný v obou paletách; v tmavém režimu je to jediná světlá plocha v okně
   * a oko na ní zůstane. Rezavá na něm má 4,4:1. */
  --jidlo-pruh: #f2d489;
  --jidlo-pruh-pismo: #ae3708;
  /* Ploška se součtem sedí NA zlatém pruhu, ne na kartě — barvu karty mít
   * nesmí, v tmavém režimu je modrošedá a na pruhu by svítila. */
  --jidlo-ploska: #fffdf8;
  --jidlo-ploska-pismo: #241f19;

  /* Rozlišovací odstíny dlaždic. Jediná sada v okně, která NIC NEZNAMENÁ —
   * jen odděluje sousední dlaždice, aby se dalo říct „vezmi tu modrou".
   * Proto jemné, ne syté: tmavé písmo na nich drží nad 12:1. */
  --jidlo-dl-1: #e7f3ea; --jidlo-dl-1-ram: #a9cdb5;
  --jidlo-dl-2: #e6edf9; --jidlo-dl-2-ram: #aac0e4;
  --jidlo-dl-3: #fbe8f1; --jidlo-dl-3-ram: #e3b2cc;
  --jidlo-dl-4: #fbf1d3; --jidlo-dl-4-ram: #dfc47c;
  --jidlo-dl-5: #f0eafb; --jidlo-dl-5-ram: #c4b4e6;

  /* ── 🏠 Hlavní obrazovka žáka (Bětka a Honza 21. 9. 2026) ─────────────────
   * Šalvěj je TÝŽ odstín, jaký nosí učitelské rozhraní
   * (`ucitel-vzhled-salvej.css`) — hra tím nezískává novou barvu, jen ji
   * používá i u žáka: pruhy bankovních příkazů, řádky pojištění, mřížka
   * volného času. */
  --salvej: #e4ebd8;
  --salvej-ram: #c0dd97;
  --salvej-ink: #27500a;      /* na šalvěji 6,2:1 */

  /* Plocha a rámeček dlaždice. Dlaždice dosud braly `--inset`, jenže ten je
   * v TMAVÉ paletě (#3d4563) skoro k nerozeznání od karty (#313850) — proto
   * na obrazovce splývaly. Tohle od karty odskočí v obou paletách. */
  --dl-plocha: #faf6ec;
  --dl-ram: #c9bb9f;

  /* Písmo na PLNÉ zelené ploše. Černá na `--green` má 6,1:1, bílá jen 3,4:1 —
   * stejný důvod, proč má `--bar-ink` výš taky černou. */
  --zelena-ink: #08130e;

  /* Rozlišovací barvy dlaždic v košíku. Neznamenají nic — jen oddělují tři
   * skoro stejné dlaždice vedle sebe, aby se dalo říct „vezmi tu modrou".
   * ZELENÁ tu schválně NENÍ: ve hře znamená „vybráno" a na nevybrané dlaždici
   * mátla (Honza 21. 9. 2026: „u vyznačených políček změň barvu na sv. žlutou"). */
  --dl-1: #fbf1d3; --dl-1-ram: #dfc47c;   /* světle žlutá */
  --dl-2: #e6edf9; --dl-2-ram: #aac0e4;   /* modrá */
  --dl-3: #fbe8f1; --dl-3-ram: #e3b2cc;   /* růžová */

  /* odvozené (v tabulce nejsou, ale plochy je potřebují) */
  --inset-strong: #efe7d6;   /* tmavší ploška uvnitř karty */
  --ink-surface: #3a3226;    /* tmavá plocha (tlačítko „stáhnout vše“) */
  --ink-surface-text: #fffdf8;
  --btn: var(--green);
  --btn-hover: var(--green-dark);
  --btn-ink: #ffffff;
  --tag: #f0b429;            /* odznak pásma */
  --tag-ink: #3a3226;
  --green-soft: #e4f4ec;     /* zelené informační pole */
  --amber-soft: #f8edd4;     /* upozornění */
  --amber-ink: #8a6212;
  --red-soft: #f7e0dc;       /* chyba / dluh */
  --red-ink: #a03225;
  --info-bg: #e6ecfb;        /* modré informační plochy (bankovní příkazy, tipy) */
  --info-ink: #2c3f8f;
  --info-line: #b9c6f0;
  --info-strong: #4f46e5;         /* plné modré tlačítko (debrief, nastavit zůstatek) */
  --info-strong-hover: #4338ca;
  --info-strong-ink: #ffffff;
  /* závoj pod oknem, které překrývá obsah — MUSÍ zůstat průhledný (Bětka 17. 8. 2026:
     „pásky by byly v pozadí"). Tailwindí bg-slate-900/70 se níž přemapovává na
     neprůhlednou plochu, tady se tedy nedá použít. */
  --okno-stin: rgba(58, 50, 38, .62);
}

html.dark {                 /* tmavý režim (paleta B, vysoký kontrast) */
  --page: #0e111c;
  --card: #313850;
  --pole: #262c42;           /* políčka: o stupeň tmavší než karta, stejný princip jako ve světlém */
  --card-line: #454d70;
  --inset: #3d4563;
  --ink: #e8eaf2;
  --muted: #8b90ab;
  --faint: #6b7095;
  --green: #34d399;
  --green-strong: #10b981;
  --tag: #fcd34d;
  --bar: var(--btn);            /* i tady lišta = tlačítko (v tmavé paletě #10b981) */
  --bar-ink: #000000;
  --subbar: #1a2536;
  --subbar-ink: #c3c8db;
  --subbar-link: #fcd34d;

  /* 🍽️ Okno „Jídlo": pilulky ani zlatý pruh se NEPŘEBARVUJÍ (viz světlá paleta).
   * Mění se jen rozlišovací odstíny dlaždic — karta pod nimi je sama tmavě
   * modrošedá (#313850), takže tlumené odstíny na ní splývaly. Tyhle se liší
   * odstínem, ne jen jasem, a rámeček je výrazně světlejší, aby byla hranice
   * dlaždice vidět i tam, kde je výplň podobná. Bílé písmo drží nad 9:1. */
  --jidlo-dl-1: #1f4a37; --jidlo-dl-1-ram: #3e8563;
  --jidlo-dl-2: #1c3e6b; --jidlo-dl-2-ram: #3c72be;
  --jidlo-dl-3: #52243e; --jidlo-dl-3-ram: #99487a;
  --jidlo-dl-4: #4e3c13; --jidlo-dl-4-ram: #96742a;
  --jidlo-dl-5: #3a2a63; --jidlo-dl-5-ram: #6a53b4;

  /* 🏠 Hlavní obrazovka žáka — tmavé protějšky (viz světlá paleta). */
  --green-dark: #34d399;     /* dědila se světlá #158a60 → 2,1:1 na tmavé ploše */
  --salvej: #1d3328;
  --salvej-ram: #3e8563;
  --salvej-ink: #9fe3bd;
  --dl-plocha: #434d6f;       /* výrazně světlejší než karta #313850 */
  --dl-ram: #7b82a8;
  --zelena-ink: #04160f;
  --dl-1: #4e3c13; --dl-1-ram: #96742a;
  --dl-2: #1c3e6b; --dl-2-ram: #3c72be;
  --dl-3: #52243e; --dl-3-ram: #99487a;

  --inset-strong: #485073;
  --ink-surface: #1c2133;
  --ink-surface-text: #e8eaf2;
  --btn: var(--green-strong);
  --btn-hover: #34d399;
  --btn-ink: #04160f;        /* velmi tmavý text na syté zelené (viz zadání) */
  --tag-ink: #2a220a;
  --green-soft: #24503f;
  --amber-soft: #4a3c14;
  --amber-ink: #fcd34d;
  --red-soft: #4b2521;
  --red-ink: #fca5a5;
  --info-bg: #1e2740;        /* v tmavém režimu tlumená modrá, ne svítivá (kontrast 7,9:1) */
  --info-ink: #a9bcff;
  --info-line: #3c4a7a;
  --info-strong: #3b4bb5;         /* v tmavém režimu tlumenější, ať nesvítí */
  --info-strong-hover: #4a5ad0;
  --info-strong-ink: #f2f4ff;
  --okno-stin: rgba(4, 6, 14, .72);
}

/* ── plochy stránky ─────────────────────────────────────────────────────── */
html, body { background: var(--page); color: var(--ink); }
html .bg-slate-100, html .bg-slate-50, html .bg-gray-50, html .bg-gray-100 { background-color: var(--inset); }
html body.bg-slate-100, html body.bg-slate-50 { background-color: var(--page); }
html .bg-white { background-color: var(--card); }
html .bg-slate-200, html .bg-gray-200 { background-color: var(--inset-strong); }
html .bg-slate-700, html .bg-slate-800, html .bg-slate-900 { background-color: var(--ink-surface); }
html .bg-slate-700, html .bg-slate-800, html .bg-slate-900 { color: var(--ink-surface-text); }
html .hover\:bg-slate-800:hover, html .hover\:bg-slate-900:hover { background-color: var(--ink-surface); }
html .bg-slate-300 { background-color: var(--card-line); }

/* horní lišta — zelená jako hlavní tlačítko (zadání Bětky 30. 7. 2026).
 * Dřív byla fialová (--bar: #5548c8 / #4c3fb0). Barva se BERE z --btn, ne natvrdo:
 * lišta je pak vždycky přesně to, co tlačítko „Zaplatit a uzavřít" (Bětka 15:21 —
 * „#1a9e6f sjednoť je na tento odstín"), a nemůžou se rozejít ani po úpravě palety.
 * Text je černý v OBOU paletách — na #1a9e6f má kontrast 6,1:1, na #10b981 8,2:1
 * (bílá by měla 3,4:1 resp. 2,6:1, tedy propadla by).
 * Odznaky (název hry, „Učitel …") jsou bez podkladu a rámečku: zůstává jen text. */
html .app-bar { background: var(--bar); color: var(--bar-ink); }
html .app-bar a, html .app-bar span, html .app-bar button { color: var(--bar-ink); }
html .app-bar .app-bar-chip { background: transparent; border: 0; padding: 0; }
/* přepínač režimu musí na zelené zůstat vidět → jemný světlý kruh (zadání, bod 4) */
html .app-bar .rezim-prepinac { background: rgba(0,0,0,.22); }
html .app-bar .rezim-volba { color: var(--bar-ink); }

/* informační pruh pod lištou — schválně JINÁ barva než hlavní zelená, ať je poznat,
 * že nejde o navigaci (zadání: „nech odlišný … tmavší neutrální odstín").
 * Tmavá linka nahoře: světlá hnědá #b89f7d má NÁHODOU skoro stejný jas jako zelená
 * (kontrast 1,0), takže bez ní by hranice stála jen na barevném tónu — a při barvosleposti
 * by zmizela. S linkou je předěl vidět vždycky. */
html .app-subbar { background: var(--subbar); color: var(--subbar-ink);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.28); }
html .app-subbar a { color: var(--subbar-link); }

/* ── text ───────────────────────────────────────────────────────────────── */
html .text-slate-900, html .text-slate-800, html .text-slate-700,
html .text-gray-900, html .text-gray-800, html .text-gray-700 { color: var(--ink); }
html .text-slate-600, html .text-slate-500, html .text-gray-600, html .text-gray-500 { color: var(--muted); }
html .text-slate-400, html .text-slate-300, html .text-gray-400 { color: var(--faint); }

/* ── linky a rámečky ────────────────────────────────────────────────────── */
html .border-slate-100, html .border-slate-200, html .border-slate-300,
html .border-gray-100, html .border-gray-200, html .border-gray-300 { border-color: var(--card-line); }
html .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--card-line); }

/* ── zelená: akce, částky, tlačítka ─────────────────────────────────────── */
html .text-emerald-500, html .text-emerald-600, html .text-emerald-700,
html .text-emerald-800, html .text-emerald-900, html .text-green-600, html .text-green-700 { color: var(--green); }
/* Text NA zeleném poli (bg-emerald-50 → --green-soft) je jiný případ než zelený text
   na kartě: v tmavé paletě je pole tmavě zelené, takže skoro černá `emerald-950` by
   na něm zmizela. Bere proto běžnou barvu textu, která je v obou paletách kontrastní.
   Našel to test tmavého režimu 25. 8. 2026 — do té doby třída nebyla přepsaná vůbec. */
html .text-emerald-950 { color: var(--ink); }
html .bg-emerald-600, html .bg-emerald-700, html .bg-emerald-800, html .bg-green-600 { background-color: var(--btn); }
html .bg-emerald-600, html .bg-emerald-700, html .bg-emerald-800, html .bg-green-600 { color: var(--btn-ink); }
html .hover\:bg-emerald-700:hover, html .hover\:bg-emerald-800:hover,
html .hover\:bg-emerald-600:hover, html .hover\:bg-green-700:hover { background-color: var(--btn-hover); }
html .bg-emerald-50, html .bg-emerald-100, html .bg-green-50, html .bg-green-100 { background-color: var(--green-soft); }
html .bg-emerald-50, html .bg-emerald-100, html .bg-green-50, html .bg-green-100 { color: var(--ink); }
html .border-emerald-200, html .border-emerald-300, html .border-emerald-400 { border-color: var(--green); }

/* ── jantar: upozornění, odznaky ────────────────────────────────────────── */
html .bg-amber-50, html .bg-amber-100, html .bg-yellow-50, html .bg-yellow-100 { background-color: var(--amber-soft); }
html .text-amber-500, html .text-amber-600, html .text-amber-700,
html .text-amber-800, html .text-amber-900, html .text-yellow-700, html .text-yellow-800 { color: var(--amber-ink); }
html .border-amber-200, html .border-amber-300, html .border-amber-400 { border-color: var(--amber-ink); }
html .bg-amber-400, html .bg-amber-500, html .bg-yellow-400 { background-color: var(--tag); }
html .bg-amber-400, html .bg-amber-500, html .bg-yellow-400 { color: var(--tag-ink); }

/* ── červená: dluh, chyba ───────────────────────────────────────────────── */
html .bg-red-50, html .bg-red-100, html .bg-rose-50,
html .bg-rose-100 { background-color: var(--red-soft); }
/* sytější červená pro sloupec grafu, který jde do mínusu (mini-hry k návrhům hodin,
   6. 9. 2026) — musí se odlišit od šedého sloupce, proto ne --red-soft */
html .bg-rose-300 { background-color: var(--red-ink); }
html .text-red-500, html .text-red-600, html .text-red-700, html .text-red-800,
html .text-rose-600, html .text-rose-700, html .text-rose-800,
html .text-rose-900 { color: var(--red-ink); }
html .border-red-200, html .border-red-300, html .border-red-400,
html .border-rose-200 { border-color: var(--red-ink); }
html .bg-red-600, html .bg-red-700 { background-color: #c0392b; color: #fff; }
html .hover\:bg-red-700:hover { background-color: #a93226; }

/* ── modré informační plochy (Bětka 30. 7. 2026: „přesvícené rozhraní v tmavém režimu")
 * Rámeček „Tento měsíc si účty platíš sám" a spol. používaly indigo/sky/blue třídy, které
 * paleta vůbec nepřepisovala — v tmavém režimu tak zůstaly svítivě světlé (#eef2ff) a
 * tlačítka v nich měla fialový text na tmavém podkladu. Teď jdou z jedné proměnné. */
html .bg-indigo-50, html .bg-indigo-100, html .bg-sky-50, html .bg-sky-100,
html .bg-blue-50, html .bg-blue-100, html .bg-purple-50, html .bg-purple-100,
html .bg-violet-50, html .bg-violet-100 { background-color: var(--info-bg); }
/* 🧪 Tlačítko „Zkušební průchod“ v seznamu hodin (4. 9. 2026): bílé s fialovým rámečkem,
   po najetí zesvětlá. Bez remapu by ta světlá plocha v tmavém režimu svítila. */
html .hover\:bg-violet-50:hover, html .hover\:bg-violet-200:hover { background-color: var(--info-bg); }
html .text-indigo-400, html .text-indigo-500, html .text-indigo-600, html .text-indigo-700,
html .text-indigo-800, html .text-indigo-900, html .text-sky-600, html .text-sky-700,
html .text-sky-800, html .text-sky-900, html .text-blue-600, html .text-blue-700, html .text-blue-800,
html .text-purple-700, html .text-purple-800, html .text-violet-700 { color: var(--info-ink); }
html .border-indigo-200, html .border-indigo-300, html .border-indigo-400,
html .border-indigo-500, html .border-sky-200, html .border-sky-300,
html .border-blue-200, html .border-blue-300, html .border-blue-400 { border-color: var(--info-line); }
html .hover\:bg-indigo-100:hover, html .hover\:bg-sky-100:hover,
html .hover\:bg-blue-100:hover { background-color: var(--inset-strong); }

/* dodatečné odstíny, které v mapování chyběly a v tmavém režimu splývaly */
html .bg-orange-50, html .bg-orange-100 { background-color: var(--amber-soft); }
html .bg-orange-200 { background-color: var(--inset-strong); }
html .hover\:bg-orange-100:hover { background-color: var(--amber-soft); }
html .text-orange-600, html .text-orange-700, html .text-orange-800,
html .text-orange-900, html .text-amber-400, html .text-amber-950 { color: var(--amber-ink); }

/* ⚠️ Výjimka: `text-amber-950` na PLNÉM jantarovém pozadí (Honza 10. 9. 2026:
   „tady je to nečitelné"). V tmavém režimu je `--amber-ink` SVĚTLÁ jantarová, takže
   světlý text seděl na žlutém tlačítku a text zmizel. Pravidlo výš je stejně silné
   jako to o pozadí a stálo v souboru níž, takže vyhrávalo. Dvě třídy přebijí jednu. */
html .bg-amber-400.text-amber-950,
html .bg-amber-500.text-amber-950,
html .bg-amber-600.text-amber-950,
html .bg-yellow-400.text-amber-950 { color: var(--tag-ink); }
html .text-green-800, html .text-green-900, html .text-emerald-400 { color: var(--green); }
html .text-red-400, html .text-red-900 { color: var(--red-ink); }
html .border-emerald-500, html .border-emerald-600, html .border-green-500,
html .border-green-600 { border-color: var(--green); }
html .border-red-500, html .border-red-600 { border-color: var(--red-ink); }
html .border-amber-500, html .border-amber-600 { border-color: var(--amber-ink); }

/* Sytá modrá tlačítka a pruhy (debrief na projektor, „Nastavit zůstatek", dvojrole).
 * Plné indigo v tmavém režimu doslova svítí, proto ho tlumíme — bílý text na něm zůstává. */
html .bg-indigo-600, html .bg-indigo-700, html .bg-blue-500,
html .bg-blue-600 { background-color: var(--info-strong); color: var(--info-strong-ink); }
html .hover\:bg-indigo-700:hover, html .hover\:bg-indigo-800:hover,
html .hover\:bg-blue-600:hover { background-color: var(--info-strong-hover); }

/* Varianty s průhledností (Tailwind je generuje jako vlastní třídy „bg-indigo-50/60").
 * Selektor bez lomítka je nezasáhne — přesně proto zůstal v učitelském rozhraní
 * světlý pruh „Nastavit zůstatek na účtu" (Bětka, fotka 30. 7. 19:41). */
html .bg-indigo-50\/60, html .bg-indigo-50\/40 { background-color: var(--info-bg); }
/* Bětka 4. 8. 2026: „uprav tyto přesvícené dlaždice napříč hrou." Poloprůhledná bílá
 * (bg-white/60, /70…) je stejný případ: v tmavém režimu svítila jako bílá skvrna uvnitř
 * tmavé karty — třeba dlaždice „Tvoje řešení: Půjčka od rodiny" v rozpadu měsíce.
 * Jsou to VNOŘENÉ dlaždice uvnitř barevných boxů, proto --inset (o odstín jinak než karta). */
html .bg-white\/50, html .bg-white\/60, html .bg-white\/70,
html .bg-white\/80, html .bg-white\/90 { background-color: var(--inset); }
html .bg-slate-900\/70 { background-color: var(--ink-surface); }
html .text-emerald-700\/80, html .text-emerald-800\/80 { color: var(--green); }
html .text-red-700\/80 { color: var(--red-ink); }
html .border-slate-700\/60 { border-color: var(--card-line); }

/* Zvýraznění VYBRANÉ volby v košíku dělá JS třídami s vykřičníkem (Tailwind „important").
 * Bez těchhle dvou řádků zůstala vybraná dlaždice bíle svítivá a světlý text na ní zmizel —
 * přesně to Bětka vyfotila. Musí být taky !important, jinak Tailwind přebije paletu. */
html .\!bg-emerald-50 { background-color: var(--green-soft) !important; }
html .\!border-emerald-500 { border-color: var(--green) !important; }

/* Bětka 5. 8. 2026: „pořád se přesvěcují některé dlaždice." Dva zbylé případy:
 * 1) GRADIENT — dlaždice „Napište mi cokoli" na nástěnce vývoje skládá pozadí
 *    z --tw-gradient-* proměnných, takže remap bg-tříd na ni nedosáhl a v tmavém
 *    režimu svítila celá. Přemapované zastávky = stejný vzhled ve světlé paletě,
 *    tlumený v tmavé. */
html .from-emerald-50 {
  --tw-gradient-from: var(--green-soft) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .to-white { --tw-gradient-to: var(--card) var(--tw-gradient-to-position); }
/* 2) SVĚTLÉ HOVERY — dlaždice/řádky v tmavém režimu při najetí „blikly" bílou
 *    (hover:bg-slate-50 má 24 výskytů). Mapování drží stejné páry jako klidové třídy. */
html .hover\:bg-slate-50:hover, html .hover\:bg-slate-100:hover,
html .hover\:bg-gray-50:hover, html .hover\:bg-gray-100:hover { background-color: var(--inset); }
html .hover\:bg-slate-200:hover, html .hover\:bg-slate-300:hover { background-color: var(--inset-strong); }
html .hover\:bg-emerald-50:hover, html .hover\:bg-emerald-100:hover,
html .hover\:bg-green-50:hover, html .hover\:bg-green-100:hover { background-color: var(--green-soft); }
html .hover\:bg-amber-50:hover, html .hover\:bg-amber-100:hover { background-color: var(--amber-soft); }
html .hover\:bg-red-50:hover, html .hover\:bg-red-100:hover,
html .hover\:bg-rose-50:hover, html .hover\:bg-rose-100:hover { background-color: var(--red-soft); }
/* žluté plovoucí tlačítko (nástěnka vývoje) — hover drží odznakovou žlutou, jen ji nezesvětlí */
html .hover\:bg-amber-300:hover { background-color: var(--tag); filter: brightness(1.08); }

/* ── formulářová pole ───────────────────────────────────────────────────── */
html input, html select, html textarea {
  background-color: var(--pole); color: var(--ink); border-color: var(--card-line);
}
html input::placeholder, html textarea::placeholder { color: var(--faint); }

/* ── texty nápověd a dokumentace ────────────────────────────────────────────
 * Dřív byl stejný blok zkopírovaný ve třech šablonách (admin_project, admin_help,
 * help_page) s pevnými barvami. Je tu jednou, barvy jdou z palety.
 */
.prose-like h1, .prose-help h1 { font-size: 1.5rem; font-weight: 800; margin: .3rem 0 .7rem;
  color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: .3rem; }
.prose-like h2, .prose-help h2 { font-size: 1.18rem; font-weight: 700; margin: 1.2rem 0 .4rem;
  color: var(--green); border-bottom: 1px solid var(--card-line); padding-bottom: .2rem; }
.prose-like h3, .prose-help h3 { font-size: 1.02rem; font-weight: 700; margin: .85rem 0 .3rem;
  color: var(--green); }
.prose-like p, .prose-help p { margin: .5rem 0; line-height: 1.6; color: var(--ink); }
.prose-like ul, .prose-help ul { list-style: disc; padding-left: 1.3rem; margin: .4rem 0; }
.prose-like ol, .prose-help ol { list-style: decimal; padding-left: 1.3rem; margin: .4rem 0; }
.prose-like li, .prose-help li { margin: .2rem 0; color: var(--ink); }
.prose-like strong, .prose-help strong { color: var(--ink); font-weight: 700; }
.prose-like a, .prose-help a { color: var(--green); text-decoration: underline; }
.prose-like code, .prose-help code { background: var(--inset); color: var(--ink);
  padding: .1rem .3rem; border-radius: .25rem; font-size: .88em; }
.prose-like pre { background: var(--inset); color: var(--ink); padding: .6rem .8rem;
  border-radius: .4rem; overflow-x: auto; margin: .5rem 0; }
.prose-like pre code { background: none; padding: 0; }
.prose-like table, .prose-help table { width: 100%; border-collapse: collapse;
  font-size: .88rem; margin: .6rem 0; }
.prose-like th, .prose-like td, .prose-help th, .prose-help td {
  border: 1px solid var(--card-line); padding: .3rem .6rem; text-align: left; vertical-align: top; }
.prose-like th, .prose-help th { background: var(--inset); color: var(--ink); }
.prose-like hr { border: 0; border-top: 1px solid var(--card-line); margin: 1rem 0; }
.prose-like blockquote { border-left: 3px solid var(--card-line); padding-left: .8rem;
  color: var(--muted); font-style: italic; }
.prose-help blockquote { border-left: 4px solid var(--green); background: var(--green-soft);
  padding: .4rem .8rem; margin: .6rem 0; color: var(--ink); }

/* ── přepínač režimu ──────────────────────────────────────────────────────
 * Bětka 3. 8. 2026: dvě volby vedle sebe v pilulce, aktivní podbarvená.
 * Který režim běží, se pozná z třídy `dark` na <html> — čistě CSS, bez JS stavu. */
.rezim-prepinac {
  display: inline-flex; align-items: center; gap: .15rem;
  background: rgba(0,0,0,.28); border-radius: 9999px; padding: .16rem;
}
.rezim-volba {
  display: inline-flex; align-items: center; gap: .3rem;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  border-radius: 9999px; padding: .28rem .75rem; font-size: .82rem; font-weight: 600;
  line-height: 1.2; white-space: nowrap; opacity: .72; transition: background .12s, opacity .12s;
}
.rezim-volba:hover { opacity: 1; background: rgba(255,255,255,.14); }
/* aktivní volba: ve světlém režimu „Světlý", v tmavém „Tmavý" */
html:not(.dark) .rezim-volba--svetly,
html.dark .rezim-volba--tmavy { background: rgba(255,255,255,.92); color: #1f2937; opacity: 1; }
@media (max-width: 640px) { .rezim-volba span { display: none; } .rezim-volba { padding: .28rem .5rem; } }

/* ── horní panel studenta (zadání Bětky 30. 7. 2026) ─────────────────────────
 * Avatar · identita rodiny · sezónní kalendář, pod tím tři dlaždice s čísly.
 * Barvy odznaků pásma jsou přesně ze zadání; v tmavém režimu je odznak jantarový
 * (červená by na tmavém pozadí zapadla) a popis rodiny světlejší, ať je čitelný.
 */
:root {
  --low-bg: #f6e2d5;  --low-ink: #a5451f;
  --avg-bg: #f7ecd3;  --avg-ink: #8a6212;
  --high-bg: #e3edf7; --high-ink: #2c5d8a;
  --avatar-bg: #e8f3ee;
  --bar-track: #e6dcc9;
  --panel-muted: #8f8065;
  --sezonni-bg: #fdf3e3;  --sezonni-ram: #e6c48a;  --sezonni-text: #8a5a12;
}
html.dark {
  --low-bg: #3a2f14;  --low-ink: #fcd34d;
  --avg-bg: #3a2f14;  --avg-ink: #fcd34d;
  --high-bg: #1c2e44; --high-ink: #7db8e8;
  --avatar-bg: #123326;
  --bar-track: #454d70;
  --panel-muted: #c3c8db;
  --sezonni-bg: #3a2f14;  --sezonni-ram: #7a6428;  --sezonni-text: #fcd34d;
}

.panel-rodiny {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 1rem;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); margin-bottom: 1rem;
}
.panel-radek { display: flex; gap: 1rem; padding: 1rem 1.1rem 0; align-items: center; }
.panel-stred { flex: 1; text-align: center; min-width: 0; }

.panel-avatar {
  flex: none; padding: .5rem; border-radius: .9rem;
  border: 2px solid var(--card-line); background: var(--avatar-bg);
}
.panel-avatar img { width: 76px; height: 76px; object-fit: contain; display: block; }
/* Uvítání nové rodiny — obrázek je tam hlavní prvek, tak je větší (Bětka 3. 8. 2026). */
.panel-avatar--velky img { width: 132px; height: 132px; }

.panel-tag {
  display: inline-block; font-size: .66rem; font-weight: 700; padding: .18rem .62rem;
  border-radius: 1.25rem; text-transform: uppercase; letter-spacing: .3px;
}
.panel-tag--low { background: var(--low-bg); color: var(--low-ink); }
.panel-tag--avg { background: var(--avg-bg); color: var(--avg-ink); }
.panel-tag--above { background: var(--high-bg); color: var(--high-ink); }

.panel-jmeno { font-weight: 800; font-size: 1.2rem; margin: .3rem 0 .2rem; color: var(--ink); }
.panel-meta { color: var(--panel-muted); font-size: .8rem; line-height: 1.45; }
.panel-pozn { color: var(--panel-muted); font-size: .72rem; margin-top: .25rem; }

.panel-kalendar { flex: none; text-align: center; padding: .6rem .75rem; }
.panel-ikona { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; margin: 0 auto .25rem; }
.panel-ikona img { width: 100%; height: 100%; object-fit: contain; }
.panel-emoji { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.panel-mesic { font-size: .78rem; font-weight: 800; color: var(--green); }
.panel-poradi { font-size: .78rem; font-weight: 700; color: var(--ink); }
.panel-poradi b { font-size: .95rem; }

.panel-dlazdice { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .6rem; padding: .9rem 1.1rem 1rem; }
/* účty už nejsou tři dlaždice — spokojenost je vlastní pruh pod panelem (Bětka 3. 8. 2026) */
.panel-dlazdice--ucty { grid-template-columns: 1fr 1fr; }
.panel-dlazdice-box { background: var(--inset); border-radius: .65rem; padding: .6rem .8rem; }
.panel-lbl { font-size: .66rem; color: var(--panel-muted); text-transform: uppercase; letter-spacing: .3px; }
.panel-lbl--cil { margin-top: .3rem; text-transform: none; }
.panel-val { font-weight: 800; font-size: 1.1rem; margin-top: .12rem; color: var(--ink); }
.panel-val--minus, .panel-val--nizka { color: var(--red-ink); }
.panel-val--stredni { color: var(--amber-ink); }
.panel-val--vysoka { color: var(--green); }
.panel-pruh { height: 8px; background: var(--bar-track); border-radius: 5px; overflow: hidden; margin-top: .45rem; }
.panel-pruh > span { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.panel-pruh > .panel-pruh--nizka { background: var(--red-ink); }
.panel-pruh > .panel-pruh--stredni { background: var(--amber-ink); }

/* ── rozklad příjmu (Bětka 3. 8. 2026) ──────────────────────────────────────
 * „ZACHOVAT OBA PŘÍJMY ZVLÁŠŤ… NA KONCI SEČÍST." Každý vydělávající má svůj řádek
 * hrubá − odvody = čistá; pod nimi součet. Znaménka mezi dlaždicemi říkají, jak
 * se k čisté částce došlo. */
.panel-prijmy { padding: 0 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.prijem-radek { display: flex; flex-direction: column; gap: .3rem; }
/* jméno je vlastní řádek NAD poli — pole tak zůstanou tři stejně široká vedle sebe
   (Bětka 3. 8. 2026: „přizpůsob ty vnitřní panely, aby byly jednotné a vedle sebe") */
.prijem-kdo { display: flex; align-items: baseline; gap: .4rem; }
.prijem-ikona { font-size: .95rem; }
.prijem-jmeno { font-weight: 800; font-size: .88rem; color: var(--ink); }
.prijem-role { font-size: .68rem; color: var(--panel-muted); }
.prijem-mriz { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .45rem; align-items: stretch; margin-bottom: .35rem; }
.prijem-mriz:last-child { margin-bottom: 0; }
/* 4 pole = obrat/zisk − pojistné − daň = čistý (Bětka 4. 8. 2026: „daň rozděl") */
.prijem-mriz--4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
/* 2 pole = důchod / rodičovská: přiznaná částka = čistý příjem (🦆 Kachnička 2 O21) */
.prijem-mriz--2 { grid-template-columns: 1fr auto 1fr; }
.prijem-box { background: var(--inset); border-radius: .55rem; padding: .45rem .65rem;
  display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.prijem-box--cisty { background: var(--green-soft); }
/* mezivýsledek (zisk živnostníka) — vede do dalšího řádku, tak je odlišený jemně */
.prijem-box--mezi { background: var(--inset); box-shadow: inset 0 0 0 1px var(--card-line); }
.prijem-poznamka { text-transform: none; letter-spacing: 0; opacity: .85; }
/* Rozklad pojistného na sociální a zdravotní pod hlavní částkou (Honza 10. 9. 2026).
   Drobným písmem, ať nekonkuruje číslu nad sebou — je to vysvětlení, ne další údaj. */
.prijem-rozpis {
  margin-top: .15rem; font-size: .72rem; line-height: 1.25;
  color: var(--muted); text-transform: none; letter-spacing: 0;
}
.prijem-val--bonus { color: var(--green); }
.prijem-val--nula { color: var(--panel-muted); }
.prijem-lbl { font-size: .62rem; color: var(--panel-muted); text-transform: uppercase;
  letter-spacing: .3px; }
.prijem-val { font-weight: 800; font-size: .98rem; color: var(--ink); }
.prijem-val--minus { color: var(--red-ink); }
.prijem-box--cisty .prijem-val { color: var(--green); }
.prijem-znak { font-weight: 800; color: var(--panel-muted); align-self: center; }
.prijem-soucet { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--card-line); padding-top: .5rem; font-size: .85rem;
  color: var(--ink); }
.prijem-soucet strong { font-size: 1.05rem; color: var(--green); }
/* Dávky (přídavky na děti, výživné, rodičovská) — na účet přijdou, ale nejsou to
   výplaty, takže stojí mezi páskami a součtem a jsou vizuálně tišší. */
.prijem-davka { display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--panel-muted); padding: .15rem 0; }
.prijem-davka strong { font-weight: 700; color: var(--ink); }

/* ── spokojenost jako samostatný pruh pod panelem ─────────────────────────── */
.spokojenost-lista { display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: .75rem;
  padding: .8rem 1.1rem; margin-bottom: .9rem; }
.spokojenost-popis { font-weight: 800; font-size: .85rem; color: var(--ink); white-space: nowrap; }
.spokojenost-drah { flex: 1; height: 12px; background: var(--bar-track); border-radius: 7px;
  overflow: hidden; }
.spokojenost-vypln { display: block; height: 100%; border-radius: 7px; background: var(--green); }
.spokojenost-vypln--nizka { background: var(--red-ink); }
.spokojenost-vypln--stredni { background: var(--amber-ink); }
.spokojenost-pct { font-weight: 800; font-size: 1.05rem; color: var(--green); }
.spokojenost-pct--nizka { color: var(--red-ink); }
.spokojenost-pct--stredni { color: var(--amber-ink); }

/* mobil: tři horní bloky pod sebe, dlaždice na jeden sloupec */
@media (max-width: 640px) {
  .panel-radek { flex-direction: column; padding-bottom: .5rem; }
  .panel-dlazdice { grid-template-columns: 1fr; }
  .prijem-mriz, .prijem-mriz--4, .prijem-mriz--2 { grid-template-columns: 1fr; }
  .prijem-znak { display: none; }
  .spokojenost-lista { flex-wrap: wrap; }
}

/* Sezónní nákup v košíku (Bětka 4. 8. 2026) — odliší blok, který je jen tenhle měsíc,
   a upozornění na příští měsíc, ať se dá naspořit. */
.basket-sezonni { border-color: var(--sezonni-ram); background-color: var(--sezonni-bg); }
.basket-predem { background-color: var(--sezonni-bg); color: var(--sezonni-text);
                 border: 1px solid var(--sezonni-ram); }

/* ── Volný čas 2.0: dlaždice (Bětka 4. 8. 2026, podle jejího náhledu) ──────────
   Dřív to byla mřížka zaškrtávátek, kde byla vidět jen cena. Teď má každá aktivita
   obrázek (nebo emoji), cenu za celou rodinu, typ zážitku a počet bodů. */
.akce-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .6rem; }
.akce-dlazdice { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; background: var(--inset); border: 2px solid var(--card-line);
  border-radius: .75rem; padding: .7rem .5rem .55rem; text-align: center;
  transition: border-color .12s, background-color .12s; }
.akce-dlazdice:hover { border-color: var(--green); }
.akce-dlazdice:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
/* Vybraná dlaždice: `--vybrana` přijde ze serveru po načtení stránky, `:has(input:checked)`
   drží barvu HNED po kliknutí. Bez toho dítě klikalo naslepo a nevšimlo si, že se mu peníze
   odečítají (Honza 14. 8. 2026, poznámka #20). Stejné pravidlo má u voleb karty `.ev-opt`. */
.akce-dlazdice--vybrana,
.akce-dlazdice:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.akce-fajfka { position: absolute; top: .35rem; right: .4rem; font-size: .6rem; font-weight: 800;
  color: var(--green); opacity: 0; }
.akce-dlazdice--vybrana .akce-fajfka,
.akce-dlazdice:has(input:checked) .akce-fajfka { opacity: 1; }
.akce-obrazek { width: 4.5rem; height: 4.5rem; object-fit: contain; margin-bottom: .1rem; }
.akce-emoji { font-size: 2.6rem; line-height: 4.5rem; height: 4.5rem; }
.akce-nazev { font-weight: 700; font-size: .78rem; color: var(--ink); line-height: 1.15; }
.akce-cena { font-weight: 800; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.akce-zaosobu { font-size: .62rem; color: var(--panel-muted); }
.akce-paticka { display: flex; align-items: center; justify-content: center; gap: .35rem;
  flex-wrap: wrap; margin-top: .3rem; }
.akce-typ { font-size: .6rem; color: var(--panel-muted); }
.akce-body { font-size: .65rem; font-weight: 800; color: var(--green);
  background: var(--green-soft); border-radius: .5rem; padding: .05rem .35rem; }
.akce-body--bonus { box-shadow: inset 0 0 0 1px var(--green); }
@media (max-width: 640px) {
  .akce-mrizka { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .45rem; }
  .akce-obrazek, .akce-emoji { width: 3.4rem; height: 3.4rem; line-height: 3.4rem; font-size: 2rem; }
}

/* ── Učitelská úvodní strana (Bětka 4. 8. 2026) ────────────────────────────────
   „Učitelská část je na počítači dost nepřehledná, většina učitelů bude na notebooku."
   Drobné odkazy v jedné řádce nahradily dlaždice, formulář má mřížku s pevnou šířkou
   a učitel bez třídy dostane rozcestník místo prázdného boxu. */
.ucitel-rozcestnik { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem; }
.ucitel-dlazdice { display: flex; flex-direction: column; gap: .1rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: .75rem;
  padding: .85rem 1rem; text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
.ucitel-dlazdice:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transform: translateY(-1px); }
.ucitel-ikona { font-size: 1.35rem; line-height: 1.5; }
.ucitel-nazev { font-weight: 800; font-size: .92rem; color: var(--ink); }
.ucitel-popis { font-size: .72rem; color: var(--panel-muted); line-height: 1.3; }

.ucitel-start { background: var(--card); border: 1px solid var(--card-line);
  border-radius: 1rem; padding: 1.4rem 1.6rem; max-width: 56rem; }
.ucitel-start-nadpis { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: .4rem; }
.ucitel-start-text { font-size: .92rem; color: var(--panel-muted); line-height: 1.55;
  max-width: 44rem; }
.ucitel-kroky { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ucitel-kroky li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem;
  color: var(--ink); line-height: 1.45; }
.ucitel-krok-cislo { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; }
.ucitel-start-tip { margin-top: 1.1rem; font-size: .82rem; color: var(--panel-muted);
  background: var(--inset); border-radius: .6rem; padding: .6rem .8rem; }

/* Formulář nové třídy — mřížka místo jedné dlouhé řady.
   Honza 16. 8. 2026: „založit třídu je takové nedotažené na šířku". Karta měla
   max-width 56rem, zatímco seznam tříd pod ní jde přes celou šířku, takže na
   monitoru končila dřív a vypadalo to rozbitě. Omezení se proto přesunulo na
   MŘÍŽKU POLÍ uvnitř — původní důvod (pole se nemají roztáhnout přes celou
   obrazovku, Bětka 4. 8. 2026) platí dál, ale karta už lícuje se třídami. */
.ucitel-form-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem 1rem; align-items: start; max-width: 56rem; }
.ucitel-pole-siroke { grid-column: span 2; min-width: 0; }
.ucitel-pole { min-width: 0; }
@media (max-width: 640px) {
  .ucitel-rozcestnik { grid-template-columns: 1fr; }
  .ucitel-start { padding: 1.1rem; }
  .ucitel-pole-siroke { grid-column: span 1; }
}


/* Rozklad zůstatku pod částkou na účtu — Bětka 2. 9. 2026: „potřebuji, aby byly ty částky
   rozkladu zůstatku lépe vidět." Drobné šedé písmo se v tmavém režimu ztrácelo. */
.panel-rozklad { font-size: .8rem; font-weight: 700; color: inherit; opacity: .9;
  margin-top: .2rem; line-height: 1.35; }


/* Spořicí účet a cíl vedle sebe (Honza 2. 9. 2026) — dvě hromádky, ne popisek jedné. */
.panel-dlazdice--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .panel-dlazdice--tri { grid-template-columns: 1fr 1fr; } }

/* ⏱ KOLEČKO OBNOVENÍ v liště žáka během tématické hodiny.
 *
 * Honza 5. 9. 2026 po předváděčce ve škole: „nahoře bych rád nějaké refresh tlačítko,
 * možná nějaké kolečko, kde se bude načítat progresbar, a když dojede, dojde k refresh
 * stránky, ale když na to kliknou, tak se udělá refresh hned. Jde mi o to, že při testu
 * to některým telefonům trvalo a některé se automaticky nerefreshly vůbec."
 *
 * Kroužek dojíždí do plna za dobu jednoho dotazu na server (proměnná --obnova-cas
 * ji nastavuje JS podle skutečné periody, ať se obrázek a chování nerozejdou).
 * Barvy z --bar-ink, aby to sedlo na zelenou lištu i po přebarvení palety. */
html .app-bar .zn-obnova {
  position: relative; width: 30px; height: 30px; flex: none;
  background: rgba(0,0,0,.22); border: 0; border-radius: 999px; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
html .app-bar .zn-obnova:hover { background: rgba(0,0,0,.32); }
html .app-bar .zn-obnova svg { position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); }            /* start nahoře, ne vpravo */
html .app-bar .zn-obnova circle { fill: none; stroke-width: 3.5; }
html .app-bar .zn-obnova-drah { stroke: rgba(255,255,255,.28); }
html .app-bar .zn-obnova-beh {
  stroke: var(--bar-ink);
  stroke-linecap: round;
  stroke-dasharray: 94.25;                /* 2πr pro r=15 */
  stroke-dashoffset: 94.25;
  animation: zn-obnova-jede var(--obnova-cas, 5s) linear infinite;
}
html .app-bar .zn-obnova-sipka { font-size: 13px; line-height: 1; pointer-events: none;
  font-weight: 800; font-variant-numeric: tabular-nums; }   /* i vteřiny odpočtu (Bětka 6. 10. 2026) */
@keyframes zn-obnova-jede { from { stroke-dashoffset: 94.25; } to { stroke-dashoffset: 0; } }

/* Kdo si vypnul animace, nemá vidět nic blikat — kroužek zůstane stát plný.
 * Tlačítko funguje dál, jen bez ukazatele času. */
@media (prefers-reduced-motion: reduce) {
  html .app-bar .zn-obnova-beh { animation: none; stroke-dashoffset: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🏠 HLAVNÍ OBRAZOVKA ŽÁKA — vzhled odsouhlasený 21. 9. 2026
   ══════════════════════════════════════════════════════════════════════════
   Bětka a Honza si podobu prošli v sedmi kolech nad živým náhledem. Mění se
   JEN vzhled; čísla, volby ani průchod ne.

   Oponentura Astry (`.review-log/2026-09-21/141930_vzhled-obrazovky__withctx`)
   vrátila sedm P1. Kde pravidlo vypadá zbytečně opatrně, řeší některý z nich —
   je to u něj napsané.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Nadpis karty: vlastní pruh přes celou šířku ──────────────────────────
   Honza: „Nadpisy ať mají taky svůj vlastní řádek a barvu."
   Pruh vznikne zápornými okraji o velikost vnitřního odsazení karty (p-4).
   Selektor je třída, ne `main h3` — globální pravidlo by zasáhlo i ostatní
   stránky, dialogy a náhledy (Astra, bod 8). */
/* Ořez jen u karet s pruhem — na správě školy by ořízl plovoucí nabídku ⋮ (Smazat třídu). */
.zn-karta:has(> .zn-karta-nazev) { overflow: hidden; }
.zn-karta > .zn-karta-nazev {
  display: block;
  margin: -1rem -1rem .9rem;
  padding: .75rem 1rem;
  border-radius: .75rem .75rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--inset-strong);
  color: var(--ink);
  border-bottom: 2px solid var(--card-line);
}
#banka-karta { overflow: hidden; }
#banka-karta > .zn-karta-nazev {
  display: block;
  margin: -1rem -1rem .9rem;
  padding: .75rem 1rem;
  border-radius: .75rem .75rem 0 0;
  font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: var(--salvej); color: var(--salvej-ink);
  border-bottom: 2px solid var(--salvej-ram);
}
.zn-mesic > .zn-karta-nazev {
  background: var(--info-bg); color: var(--info-ink); border-bottom-color: var(--info-ink);
}
.zn-pojisteni > .zn-karta-nazev {
  background: var(--amber-ink); color: var(--card); border-bottom-color: var(--amber-ink);
}
.zn-pojisteni > .zn-karta-nazev .font-normal { color: var(--card); }
.zn-kosik > .zn-karta-nazev {
  background: var(--ink-surface); color: var(--ink-surface-text); border-bottom-color: var(--ink-surface);
}
.zn-volnycas > .zn-karta-nazev {
  background: var(--salvej); color: var(--salvej-ink); border-bottom-color: var(--salvej-ram);
}

/* Police košíku (Jídlo, Hygiena a domácnost, Oblečení, Sezónní nákup) mají
   stejné záhlaví jako karta „Nákupní košík" — béžový pruh, černé písmo
   (Honza: „udělej ve stejném stylu jako Nákupní košík"). Police má p-3. */
.zn-police { overflow: hidden; }
.zn-police > .zn-police-hlava {
  margin: -.75rem -.75rem .6rem;
  padding: .6rem .8rem;
  border-radius: .75rem .75rem 0 0;
  background: var(--inset-strong);
  border-bottom: 2px solid var(--card-line);
}
.zn-police > .zn-police-hlava > h4 {
  font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink);
}
.zn-police > .zn-police-hlava > span { font-size: .8rem; font-weight: 800; color: var(--ink); }
.jidlo-karta-nazev {
  display: block;
  margin: 0 0 .6rem;
  padding: .6rem .8rem;
  border-radius: .5rem;
  background: var(--inset-strong);
  color: var(--ink);
  border-bottom: 2px solid var(--card-line);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ── Výplata: cesta peněz zleva doprava ──────────────────────────────────
   Dlaždice měly všechny stejný podklad, takže se četl jen text. Třídy
   `--minus` / `--plus` přiděluje šablona PŘESNĚ podle stejných podmínek,
   jaké má barva čísla — nulová daň tedy nedostane ani jednu (Astra, bod 3). */
.prijem-box {
  background: var(--dl-plocha);
  border: 2px solid var(--dl-ram);
  padding: .5rem .7rem;
}
.prijem-lbl { font-size: .66rem; font-weight: 800; color: var(--ink); }
.prijem-val { font-size: 1.24rem; letter-spacing: -.01em; }
.prijem-box--minus { background: var(--red-soft); border-color: var(--red-ink); }
.prijem-box--minus .prijem-lbl { color: var(--red-ink); }
.prijem-rozpis { color: var(--red-ink); font-size: .74rem; }
.prijem-box--plus { background: var(--green-soft); border-color: var(--green); }
.prijem-box--plus .prijem-lbl { color: var(--green-dark); }
.prijem-box--plus .prijem-val { color: var(--ink); }
/* Plná zelená nese TMAVÉ písmo: černá na `--green` má 5,6:1, bílá jen 3,4:1. */
.prijem-box--cisty { background: var(--green); border-color: var(--green-dark); }
.prijem-box--cisty .prijem-lbl,
.prijem-box--cisty .prijem-val { color: var(--zelena-ink); }
.prijem-znak { font-size: 1.1rem; color: var(--ink); }
/* Jméno vydělávajícího je záhlaví toho, kdo vydělává — vlastní dlaždice
   (Bětka: „potřebuji ty jména rodičů zvlášť do dlaždice"). */
.prijem-radek { border-top: 2px solid var(--card-line); padding-top: .7rem; }
.prijem-radek:first-child { border-top: 0; padding-top: 0; }
.prijem-kdo {
  /* Bětka 22. 9. 2026: „ať jsou jména rodičů ve žlutém rámečku" — stejná žlutá
     jako první dlaždice košíku, ať paleta drží pohromadě. */
  background: var(--dl-1);
  border: 2px solid var(--dl-1-ram);
  border-radius: .55rem;
  padding: .45rem .8rem;
}
.prijem-jmeno { font-size: 1rem; }
.prijem-role { background: var(--card); color: var(--ink); border-radius: 999px;
  padding: .1rem .5rem; font-weight: 700; }
/* Dávky, které rodině ZŮSTANOU (přídavek na dítě, výživné) — zelená dlaždice.
   Odvody OSVČ se vykreslují stejným prvkem, ale ty peníze dítě pošle dál;
   zelená by u nich lhala, takže mají vlastní třídu a zůstávají neutrální. */
.prijem-davka {
  border-radius: .55rem;
  padding: .5rem .8rem;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
}
.prijem-davka + .prijem-davka { margin-top: .4rem; }
.prijem-davka strong { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.prijem-davka--zustane { background: var(--green-soft); border: 2px solid var(--green); }
.prijem-davka--zustane strong { color: var(--green-dark); }
.prijem-davka--projde { background: var(--dl-plocha); border: 2px solid var(--dl-ram); }
/* Účty pod výplatou splývaly s kartou stejně jako dlaždice. */
.panel-dlazdice-box { background: var(--dl-plocha); border: 2px solid var(--dl-ram); }
.panel-lbl { color: var(--ink); font-weight: 800; }
.panel-val { font-size: 1.3rem; }

/* ── „Tvůj měsíc" ────────────────────────────────────────────────────────
   Karta byla bílá jako všechno kolem a devět řádků splývalo. */
.zn-mesic { border: 2px solid var(--info-ink); }
.zn-mesic > .text-sm > .flex {
  padding: .45rem .6rem;
  border-radius: .4rem;
  align-items: baseline;
}
.zn-mesic > .text-sm > .flex:nth-of-type(odd) { background: var(--inset); }
.zn-mesic > .text-sm > .flex > span:last-child { font-weight: 800; font-size: .95rem; }
/* ⚠️ Zesvětluje se JEN tlumená šedá. Pravidlo na všechny `span` by přepsalo
   i červenou záporného výsledku a barvy dluhů a srážek — varování by zmizelo
   (Astra, bod 3). */
.zn-mesic .text-slate-500 { color: var(--ink); }
.zn-mesic .text-\[10px\] { color: var(--muted); }
/* Příjem a odhad výsledku jsou dvě čísla, kvůli kterým se sloupec čte. */
.zn-mesic > .text-sm > .flex.zn-prijem {
  background: var(--green-soft);
  border: 2px solid var(--green);
  font-weight: 800; font-size: 1rem;
  margin-bottom: .3rem;
}
.zn-mesic > .text-sm > .flex.zn-prijem > span:last-child {
  color: var(--green-dark); font-size: 1.25rem;
}
.zn-mesic > .text-sm > .flex.zn-vysledek {
  background: var(--info-bg);
  border: 2px solid var(--info-ink);
  color: var(--info-ink);
  margin: .6rem 0 .3rem;
  padding: .7rem .8rem;
  font-size: 1rem;
}
.zn-mesic > .text-sm > .flex.zn-vysledek > span:last-child { font-size: 1.3rem; }
.zn-mesic > .text-sm > .border-t { background: var(--inset); margin: .8rem -1rem 0; padding: .7rem 1rem; }

/* ── Bankovní příkazy: šalvěj / bílá na střídačku ────────────────────────
   ⚠️ Pruhování NESMÍ přebít červený řádek předpisu bez šablony — tam dítě vidí
   problém a ten má přednost (Astra, bod 3). Proto `:not(.bg-red-50)` a rámeček
   se nemaže, jen skrývá mezi pruhy. */
#banka-karta > .space-y-2 {
  border: 2px solid var(--salvej-ram);
  border-radius: .6rem;
  overflow: hidden;
}
#banka-karta > .space-y-2 > .ob-row { margin: 0; border-radius: 0; padding: .8rem 1rem; }
#banka-karta > .space-y-2 > .ob-row:not(.bg-red-50) { border: 0; }
#banka-karta > .space-y-2 > .ob-row:not(.bg-red-50):nth-child(odd) { background: var(--salvej); }
#banka-karta > .space-y-2 > .ob-row:not(.bg-red-50):nth-child(even) { background: var(--card); }
#banka-karta > .space-y-2 > .ob-row + .ob-row { border-top: 1px solid var(--salvej-ram); }
#banka-karta .ob-row > .flex > span:first-child { font-size: 1rem; font-weight: 800; }

/* ── Pojištění ───────────────────────────────────────────────────────────
   Řádky byly bílé na světle jantarové kartě a splývaly. Selektory jdou přes
   vlastní třídy, ne přes `.text-slate-500` — ten by zasáhl i vysvětlivky
   „Co tahle pojistka kryje?" (Astra, bod 5). */
.zn-pojisteni .zn-pojistka {
  background: var(--salvej);
  border: 2px solid var(--salvej-ram);
  padding: .6rem .8rem;
}
.zn-pojisteni .zn-pojistka + .zn-pojistka { margin-top: .5rem; }
.zn-pojisteni .zn-pojistka > span:first-child { font-size: 1rem; font-weight: 800; color: var(--ink); }
.zn-pojistka-castka {
  background: var(--card);
  border: 1px solid var(--amber-ink);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--amber-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Zaškrtávátko: bílé v OBOU paletách (`--card` je v tmavé modrošedá), zelené
   po zaškrtnutí. `accent-color` řeší i zaškrtnutý stav napříč systémy. */
.zn-pojisteni input[type="checkbox"] {
  width: 22px; height: 22px; flex: none;
  accent-color: var(--green);
}

/* ── Nákupní košík ───────────────────────────────────────────────────────
   Tři skoro stejné dlaždice vedle sebe se špatně ukazují prstem; s barvou jde
   říct „vezmi tu modrou". Zelená tu NENÍ: ve hře znamená „vybráno". */
.basket-row .grid > .basket-opt:nth-child(1) { background: var(--dl-1); border-color: var(--dl-1-ram); }
.basket-row .grid > .basket-opt:nth-child(2) { background: var(--dl-2); border-color: var(--dl-2-ram); }
.basket-row .grid > .basket-opt:nth-child(3) { background: var(--dl-3); border-color: var(--dl-3-ram); }
/* 🎨 Bětka 23. 9. 2026: „barvy v políčcích zpřeházet, aby to nebylo takhle pod
   sebou — aby je to nutilo se na to podívat." Řádky košíku nesou `data-barvy`
   (0/1/2 napříč kartami, dává je šablona) a pořadí barev se v každém vzoru otočí,
   takže dva sousední řádky nikdy nemají v jednom sloupci stejnou barvu. */
.basket-row[data-barvy="1"] .grid > .basket-opt:nth-child(1) { background: var(--dl-2); border-color: var(--dl-2-ram); }
.basket-row[data-barvy="1"] .grid > .basket-opt:nth-child(2) { background: var(--dl-3); border-color: var(--dl-3-ram); }
.basket-row[data-barvy="1"] .grid > .basket-opt:nth-child(3) { background: var(--dl-1); border-color: var(--dl-1-ram); }
.basket-row[data-barvy="2"] .grid > .basket-opt:nth-child(1) { background: var(--dl-3); border-color: var(--dl-3-ram); }
.basket-row[data-barvy="2"] .grid > .basket-opt:nth-child(2) { background: var(--dl-1); border-color: var(--dl-1-ram); }
.basket-row[data-barvy="2"] .grid > .basket-opt:nth-child(3) { background: var(--dl-2); border-color: var(--dl-2-ram); }
.basket-row .grid > .basket-opt .font-semibold { font-size: .78rem; font-weight: 800; }
.basket-row .grid > .basket-opt > div:last-child { color: var(--ink); font-weight: 700; font-size: .85rem; }
/* Vystoupení vybrané dlaždice. Stav „vybráno" už dnes maluje `recompute()`
   třídami `!bg-emerald-50` / `!border-emerald-500` — navazuje se na NĚJ, aby
   o vzhledu nerozhodovaly dva mechanismy (Astra, bod 2). */
.basket-opt { transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; }
.basket-row .basket-opt.\!border-emerald-500 {
  box-shadow: 0 12px 26px rgba(0, 0, 0, .26);
  position: relative;
  z-index: 1;
}
.basket-row .grid > .basket-opt.\!border-emerald-500 { transform: translateY(-4px) scale(1.03); }
.basket-row > .basket-opt.\!border-emerald-500 { transform: translateY(-3px); }
/* Varianty se ztlumí, TEPRVE když dítě u té položky opravdu klikne na
   „tenhle měsíc nekupovat". Volba je totiž PŘEDVYBRANÁ — bez `zvoleno` by
   dlaždice byly šedé hned po načtení a dítě by je barevné nikdy nevidělo
   (Bětka: „vrať mi tam tyhle barvy"). Třídy přiděluje skript v šabloně podle
   skutečného `input.checked`. Šedne jen PODKLAD; text zůstává na `--ink`,
   protože `--muted` by na tlumené ploše spadl pod 4,5:1 (Astra, bod 4). */
.basket-row.zvoleno.zn-nekupuje .grid > .basket-opt {
  background: var(--inset);
  border-color: var(--card-line);
  transform: scale(.97);
}

/* ── Volný čas ───────────────────────────────────────────────────────────
   Honza: „místo bílé dej šalvěj, aby jednotlivá políčka víc vynikla."
   Vybranost aktivit se NEMĚNÍ — dá se jich zaškrtnout víc a stávající
   pravidlo `.akce-dlazdice--vybrana` zůstává, jak je (Astra, bod 2 a 10). */
.akce-mrizka {
  background: var(--salvej);
  border: 2px solid var(--salvej-ram);
  border-radius: .75rem;
  padding: .7rem;
}
.akce-dlazdice { background: var(--inset); border: 2px solid var(--salvej-ram); }
.akce-nazev { font-size: .95rem; font-weight: 800; }
.akce-cena { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ── Úzká obrazovka ──────────────────────────────────────────────────────
   Zvětšení nepřepočítá rozložení sousedů, takže v jednosloupcové mřížce by
   dlaždice vylezla z karty (Astra, bod 7). Na telefonu proto jen nadzvednutí. */
@media (max-width: 640px) {
  .basket-row .grid > .basket-opt.\!border-emerald-500 { transform: translateY(-4px); }
  .basket-row.zvoleno.zn-nekupuje .grid > .basket-opt { transform: none; }
  .zn-karta > .zn-karta-nazev { margin: -1rem -1rem .8rem; padding: .65rem .9rem; }
  .zn-police > .zn-police-hlava { padding: .55rem .7rem; }
}
/* Kdo má vypnuté animace, dostane stejný výsledek bez pohybu — pravidlo musí
   pokrýt i přímou dlaždici „nekupovat", ne jen varianty v mřížce. */
@media (prefers-reduced-motion: reduce) {
  .basket-opt { transition: none; }
  .basket-row .basket-opt.\!border-emerald-500,
  .basket-row.zvoleno.zn-nekupuje .grid > .basket-opt { transform: none; }
}

/* Dlaždice tématických hodin se střídají: šalvějová, hnědá, šalvějová… (Bětka 29. 9. 2026).
 * Písmo zůstává `--ink`, takže kontrast drží v obou paletách. */
html .dl-salvej { background-color: #d5e2be; color: var(--ink); }
html .dl-hneda { background-color: #e9e5d6; color: var(--ink); }
html.dark .dl-salvej { background-color: #2c4a3b; }
html.dark .dl-hneda { background-color: #4a3b2a; }

/* Nadpisy dlaždic tématických hodin: VELKÁ písmena a tmavší zelená, ať se odliší od popisu (Bětka 30. 9. 2026). */
html .dl-nadpis { text-transform: uppercase; letter-spacing: .03em; }
html .dl-nadpis-barva { color: #2b5a36; }
html.dark .dl-nadpis-barva { color: #a8d9b3; }