/* Rentys admin – vzhled ve stylu Revolut: černá, skleněné karty, barevné přechody a záře.
   Světlý vzhled (Nastavení → Vzhled, html[data-vzhled=svetly]) jen přepíše proměnné; úvodní pásmo (hero)
   a okno kalkulačky zůstávají tmavé i ve světlém vzhledu. */
:root, :root[data-vzhled="svetly"] .hero, :root[data-vzhled="svetly"] .kalk-okno {
  color-scheme: dark;
  --pozadi: #000;
  --rgb: 255, 255, 255;               /* barva popředí pro průhledné plochy, okraje a čáry */
  --karta: rgba(255, 255, 255, .045);
  --karta-2: rgba(255, 255, 255, .075);
  --karta-pozadi: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
  --karta-stin: none;
  --okraj: rgba(255, 255, 255, .08);
  --okraj-silny: rgba(255, 255, 255, .16);
  --text: #fff;
  --tlumene: rgba(255, 255, 255, .58);
  --slabe: rgba(255, 255, 255, .36);
  --odkaz: #a99bff;
  --info-text: #cdc4ff;
  --pozor-text: #ffd497;
  --hlavni: #fff;                     /* hlavní tlačítko a vybraná volba */
  --hlavni-text: #000;
  --dialog: #121218;
  --plovouci: rgba(22, 22, 30, .96);  /* bublina, toast, vyskakovací menu */
  --lista: rgba(10, 10, 14, .82);     /* spodní lišta na telefonu */
  --bocni: rgba(0, 0, 0, .35);
  --dnes: rgba(16, 12, 40, .9);
  --fialova: #7b61ff;
  --modra: #3d7bff;
  --azurova: #00c2ff;
  --prechod: linear-gradient(120deg, #7b61ff 0%, #3d7bff 55%, #00c2ff 100%);
  --plus: #2ee59d;
  --minus: #ff5d6c;
  --pozor: #ffb547;
  --plus-jemne: rgba(46, 229, 157, .12);
  --minus-jemne: rgba(255, 93, 108, .12);
  --pozor-jemne: rgba(255, 181, 71, .12);
  --akcent-jemne: rgba(123, 97, 255, .16);
  --r: 22px;
  --r-s: 14px;

  /* jména, která používají grafy a skripty */
  --pos: var(--plus);
  --neg: var(--minus);
  --airbnb: #ff7a59;
  --booking: #4c8dff;
  --heat-0: rgba(255, 255, 255, .03);
  --akcent: #8f7bff;
}
:root[data-vzhled="svetly"] {
  color-scheme: light;
  --pozadi: #f4f4f8;
  --rgb: 20, 20, 40;
  --karta: #fff;
  --karta-2: rgba(20, 20, 40, .06);
  --karta-pozadi: #fff;
  --karta-stin: 0 1px 2px rgba(20, 20, 40, .04), 0 10px 30px -18px rgba(20, 20, 40, .18);
  --okraj: rgba(20, 20, 40, .09);
  --okraj-silny: rgba(20, 20, 40, .17);
  --text: #14141c;
  --tlumene: rgba(20, 20, 40, .64);
  --slabe: rgba(20, 20, 40, .44);
  --odkaz: #5a43e6;
  --info-text: #4a37c9;
  --pozor-text: #8a5300;
  --hlavni: #14141c;
  --hlavni-text: #fff;
  --dialog: #fff;
  --plovouci: rgba(255, 255, 255, .97);
  --lista: rgba(255, 255, 255, .88);
  --bocni: rgba(255, 255, 255, .6);
  --dnes: #fff;
  --plus: #0b9a62;
  --minus: #e0364a;
  --pozor: #b86e00;
  --plus-jemne: rgba(11, 154, 98, .1);
  --minus-jemne: rgba(224, 54, 74, .09);
  --pozor-jemne: rgba(255, 170, 40, .15);
  --akcent-jemne: rgba(123, 97, 255, .1);
  --heat-0: rgba(20, 20, 40, .04);
  --akcent: #6a52f5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--pozadi); color: var(--text);
  font: 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum", "cv11"; }
a { color: var(--odkaz); text-decoration: none; }
a:hover { color: var(--text); }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
[hidden] { display: none !important; }
.tlumene, .podtitul { color: var(--tlumene); }
::selection { background: rgba(123, 97, 255, .45); }

/* ---------- záře v pozadí ---------- */
.zare { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zare span { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; animation: plout 30s ease-in-out infinite alternate; }
.zare span:nth-child(1) { width: 560px; height: 560px; left: -120px; top: -180px; background: radial-gradient(circle, rgba(91, 60, 255, .9), transparent 65%); }
.zare span:nth-child(2) { width: 520px; height: 520px; right: -160px; top: 120px; background: radial-gradient(circle, rgba(0, 119, 255, .8), transparent 65%); animation-delay: -8s; }
.zare span:nth-child(3) { width: 480px; height: 480px; left: 35%; bottom: -260px; background: radial-gradient(circle, rgba(0, 180, 216, .7), transparent 65%); opacity: .3; animation-delay: -14s; }
@keyframes plout { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.12); } }

/* ---------- rozvržení a levé menu ---------- */
.rozlozeni { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.bocni { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 26px 16px;
  border-right: 1px solid var(--okraj); background: var(--bocni); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.logo { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; padding: 0 8px; }
.logo:hover { color: var(--text); }
.logo-znak { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--prechod); color: #fff; font-weight: 800;
  box-shadow: 0 6px 24px rgba(91, 60, 255, .55); }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a, .menu summary { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-s); color: var(--tlumene); font-weight: 500;
  transition: background .2s, color .2s; }
.menu a svg, .menu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu a:hover, .menu summary:hover { background: var(--karta); color: var(--text); }
.menu a.aktivni, .menu summary.aktivni { background: var(--karta-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--okraj); position: relative; }
.menu a.aktivni::before, .menu summary.aktivni::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--prechod); }
.menu a.aktivni svg, .menu summary.aktivni svg { color: var(--odkaz); }
/* Byty: rozbalovací seznam bytů */
.menu summary { cursor: pointer; list-style: none; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .sipka { width: 16px; height: 16px; margin-left: auto; transition: transform .2s ease; }
.menu-skupina[open] > summary .sipka { transform: rotate(180deg); }
.menu-skupina[open] > summary.aktivni { background: transparent; box-shadow: none; }
.menu-skupina[open] > summary.aktivni::before { display: none; }
.podmenu { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px 23px; padding-left: 10px; border-left: 1px solid var(--okraj); }
.menu .podmenu a { padding: 8px 12px; font-size: 14px; }
.menu .podmenu a.aktivni::before { left: -27px; }
.menu .podmenu a.nepocitany { color: var(--slabe); }
.bocni-pata { margin-top: auto; padding: 0 8px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.bocni-pata a { color: var(--slabe); }
.bocni-pata a:hover { color: var(--text); }

.obsah { padding: 32px 40px 80px; max-width: 1320px; width: 100%; }
.hlavicka-stranky { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.hlavicka-stranky p { margin: 0; max-width: 760px; color: var(--tlumene); }
.hlavicka { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.hlavicka > div:first-child { flex: 1 1 320px; min-width: 0; }
.nadpis-sekce { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--slabe); margin: 40px 0 14px; font-weight: 600; }

/* ---------- karty ---------- */
.karta { position: relative; background: var(--karta-pozadi); box-shadow: var(--karta-stin);
  border: 1px solid var(--okraj); border-radius: var(--r); padding: 24px; margin-bottom: 20px; min-width: 0;
  animation: vyjet .6s cubic-bezier(.2, .7, .2, 1) both;
  transition: border-color .25s, transform .25s; }
.karta:hover { border-color: var(--okraj-silny); }
.karta > h2 { margin-bottom: 4px; }
.karta .popisek, .popisek { color: var(--tlumene); font-size: 13px; margin: 0 0 16px; }
.mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 20px; margin-bottom: 20px; }
.mrizka .karta { margin-bottom: 0; }
@keyframes vyjet { from { transform: translateY(12px); } to { transform: none; } }
.karta:nth-of-type(2) { animation-delay: .05s; } .karta:nth-of-type(3) { animation-delay: .1s; } .karta:nth-of-type(4) { animation-delay: .15s; }

/* ukazatele (dlaždice) */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dlazdice > div { position: relative; overflow: hidden; background: var(--karta); box-shadow: var(--karta-stin); border: 1px solid var(--okraj); border-radius: var(--r);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; animation: vyjet .6s cubic-bezier(.2, .7, .2, 1) both;
  transition: transform .25s, border-color .25s, background .25s; }
.dlazdice > div:hover { transform: translateY(-2px); border-color: var(--okraj-silny); background: var(--karta-2); }
.dlazdice > div:nth-child(2) { animation-delay: .04s; } .dlazdice > div:nth-child(3) { animation-delay: .08s; }
.dlazdice > div:nth-child(4) { animation-delay: .12s; } .dlazdice > div:nth-child(5) { animation-delay: .16s; } .dlazdice > div:nth-child(6) { animation-delay: .2s; }
.dlazdice .popis { font-size: 13px; color: var(--tlumene); font-weight: 500; }
.dlazdice .hodnota { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.dlazdice .pozn { font-size: 12px; color: var(--slabe); }
.dlazdice .hodnota.plus { color: var(--plus); } .dlazdice .hodnota.minus { color: var(--minus); }
/* ruční úpravy nákladů a příjmů */
.tlacitko.male { min-height: 32px; padding: 5px 14px; font-size: 13px; }
.karta > .hlavicka { align-items: center; margin-bottom: 4px; }
.karta > .hlavicka h2 { margin: 0; }
td.radek-akce { text-align: right; white-space: nowrap; }
/* názvy položek se smí zalomit, ať se do sloupce vejdou i tlačítka */
#t-pevne td:first-child, #t-prijmy td:nth-child(2), #t-jednorazove td:nth-child(2) { white-space: normal; min-width: 150px; }
#t-prijmy td:nth-child(4) { white-space: normal; }
td.radek-akce button { font: inherit; font-size: 12px; font-weight: 600; color: var(--tlumene); background: none; border: 0; padding: 4px 6px;
  cursor: pointer; border-radius: 8px; }
td.radek-akce button:hover { color: var(--text); background: var(--karta-2); }
td.radek-akce button.smazat:hover { color: var(--minus); }
.stitek { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--karta-2); color: var(--tlumene); vertical-align: 1px; }
.formular-dialog { width: min(440px, calc(100vw - 32px)); padding: 26px; color: var(--text); background: var(--dialog); border: 1px solid var(--okraj-silny);
  border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.formular-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.formular-dialog h2 { margin: 0 0 16px; }
.formular-dialog label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--tlumene); }
.formular-dialog input { font: inherit; color: var(--text); background: var(--karta); border: 1px solid var(--okraj-silny); border-radius: 12px;
  padding: 9px 14px; min-height: 40px; }
.formular-dialog .pole-radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.formular-dialog .napoveda { font-size: 12px; color: var(--slabe); font-weight: 400; }
.chyba-formulare { margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--minus-jemne); color: var(--minus); font-size: 13px; }
/* chyba v dialogu na telefonu: scrollIntoView ji posune nad lepkavou lištu Zrušit / Uložit */
.formular-dialog .chyba-formulare { scroll-margin-bottom: 110px; }
.chyba-formulare.varovani { background: var(--pozor-jemne); color: var(--pozor); }
.dlg-akce { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
dl.parametry { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 10px 20px; margin: 0; }
dl.parametry dt { color: var(--tlumene); }
dl.parametry dd { margin: 0; text-align: right; }

/* ---------- úvodní pásmo (hero) ---------- */
.hero { position: relative; overflow: hidden; color: var(--text); display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: 28px; margin-bottom: 20px;
  border: 1px solid rgba(var(--rgb), .1); background:
    radial-gradient(120% 140% at 0% 0%, rgba(123, 97, 255, .55), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(0, 194, 255, .35), transparent 60%),
    linear-gradient(180deg, #120f2a, #07070d);
  box-shadow: 0 30px 80px -30px rgba(91, 60, 255, .6); animation: vyjet .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(115deg, transparent 40%, rgba(var(--rgb), .07) 50%, transparent 60%); background-size: 260% 100%; animation: lesk 7s ease-in-out infinite; }
@keyframes lesk { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.hero-cast { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-popis { font-size: 14px; color: rgba(var(--rgb), .7); margin-top: 14px; }
.hero-cislo { font-size: 56px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; white-space: nowrap; }
.hero-cislo small { font-size: .45em; font-weight: 600; color: rgba(var(--rgb), .55); margin-left: 6px; letter-spacing: 0; }
.hero-pozn { font-size: 13px; color: rgba(var(--rgb), .62); max-width: 460px; }
.hero-radek { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cip { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: rgba(var(--rgb), .08);
  border: 1px solid rgba(var(--rgb), .08); min-width: 130px; flex: 1 1 130px; }
.cip span { font-size: 12px; color: rgba(var(--rgb), .6); }
.cip b { font-size: 17px; letter-spacing: -0.02em; }
.cip b.plus { color: var(--plus); } .cip b.minus { color: var(--minus); }

/* ---------- formuláře a tlačítka ---------- */
.filtry { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filtry label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tlumene); }
select, .formular-zustatek input, .chat-formular textarea {
  font: inherit; color: var(--text); background: var(--karta); border: 1px solid var(--okraj-silny); border-radius: 12px; padding: 9px 14px; min-height: 40px; }
select option { background: var(--dialog); color: var(--text); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 4px rgba(123, 97, 255, .25); }
.tlacitko { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 20px; min-height: 40px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; white-space: nowrap; border-radius: 999px; background: var(--karta-2); color: var(--text); border: 1px solid var(--okraj-silny);
  transition: transform .15s, background .2s, box-shadow .2s; }
.tlacitko:hover { background: rgba(var(--rgb), .14); color: var(--text); }
.tlacitko:active { transform: scale(.97); }
.tlacitko.hlavni { background: var(--hlavni); color: var(--hlavni-text); border-color: var(--hlavni); }
.tlacitko.hlavni:hover { box-shadow: 0 8px 28px rgba(var(--rgb), .25); background: var(--hlavni); color: var(--hlavni-text); }
.tlacitko:disabled { opacity: .5; cursor: wait; }

/* přepínače (výběr bytu, záložky na stránce Finance, období grafu) */
.pilulky, .podzalozky, .prepinac { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px; border-radius: 999px; background: var(--karta);
  border: 1px solid var(--okraj); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pilulky { display: flex; flex-wrap: wrap; border-radius: 22px; }
.pilulky button, .podzalozky a, .prepinac button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 0;
  color: var(--tlumene); background: transparent; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.pilulky button:hover, .podzalozky a:hover, .prepinac button:hover { color: var(--text); }
.pilulky button.aktivni, .podzalozky a.aktivni, .prepinac button.aktivni { background: var(--hlavni); color: var(--hlavni-text); }
.prepinac { margin: 0; }
.prepinac button { padding: 6px 14px; font-size: 13px; }

/* ---------- tabulky ---------- */
.tabulka-obal { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: right; font-weight: 600; color: var(--slabe); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px;
  border-bottom: 1px solid var(--okraj); white-space: nowrap; }
td { text-align: right; padding: 12px; border-bottom: 1px solid rgba(var(--rgb), .05); white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child, .vlevo { text-align: left; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(var(--rgb), .035); }
tr.soucet td { font-weight: 700; border-bottom: none; border-top: 1px solid var(--okraj-silny); }
tr.budouci td { color: var(--tlumene); }
.zaporne { color: var(--minus) !important; }
.kladne { color: var(--plus) !important; }
.teplo td.bunka { text-align: center; font-size: 12px; border-radius: 8px; }

/* ---------- štítky, hlášky ---------- */
.stitek { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: var(--karta-2); color: var(--tlumene); white-space: nowrap; }
.stitek::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stitek.zaplaceno { background: var(--plus-jemne); color: var(--plus); }
.stitek.ceka { background: var(--pozor-jemne); color: var(--pozor); }
.stitek.chybi { background: var(--minus-jemne); color: var(--minus); }
.upozorneni { padding: 12px 16px; margin-bottom: 12px; font-weight: 500; border-radius: var(--r-s); background: var(--pozor-jemne);
  color: var(--pozor-text); border: 1px solid rgba(255, 181, 71, .2); }
.upozorneni b { color: inherit; }
.upozorneni.info { background: var(--akcent-jemne); color: var(--info-text); border-color: rgba(123, 97, 255, .3); }
.prazdne { color: var(--slabe); padding: 28px 0; text-align: center; }
.nacitani { opacity: .5; transition: opacity .2s; }

/* ---------- grafy ---------- */
.legenda { display: flex; gap: 16px; font-size: 13px; color: var(--tlumene); flex-wrap: wrap; margin: -4px 0 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.graf { position: relative; width: 100%; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf text { fill: var(--slabe); font-size: 11px; font-family: inherit; }
.graf .osa { stroke: rgba(var(--rgb), .14); }
.graf .mrizka-cara { stroke: rgba(var(--rgb), .06); }
.graf rect.znacka:hover, .graf rect.znacka:focus { outline: none; fill: var(--text); fill-opacity: .04; }
.bublina { position: fixed; pointer-events: none; background: var(--plovouci); border: 1px solid var(--okraj-silny); border-radius: 14px;
  padding: 10px 12px; font-size: 12px; z-index: 50; min-width: 150px; display: none; backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.bublina .nadpis { color: var(--tlumene); margin-bottom: 4px; }
.bublina .radek { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.bublina .radek b { color: var(--text); }
.bublina .klic { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.karta-hlava { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.karta-hlava h2 { margin: 0; }

/* ---------- kalendář ---------- */
.kal-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kal-hlavicka h2 { margin: 0; text-transform: capitalize; }
.kal-hlavicka .tlacitko { min-height: 36px; width: 36px; padding: 0; }
.kal-mrizka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-mrizka .nazev-dne { color: var(--slabe); font-size: 11px; text-align: center; padding: 2px 0 6px; text-transform: uppercase; letter-spacing: .1em; }
.kal-den { background: rgba(var(--rgb), .03); border: 1px solid var(--okraj); border-radius: 14px; padding: 7px 8px; min-height: 80px; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: background .15s, border-color .15s, transform .15s; }
.kal-den:hover { background: rgba(var(--rgb), .07); border-color: var(--okraj-silny); transform: translateY(-1px); }
.kal-den.prazdny { visibility: hidden; }
.kal-den.minuly { opacity: .35; cursor: default; }
.kal-den.dnes { border-color: transparent; background: linear-gradient(var(--dnes), var(--dnes)) padding-box, var(--prechod) border-box; }
.kal-den.vybrany { background: var(--akcent-jemne); border-color: var(--akcent); }
.kal-den .cislo { font-size: 12px; color: var(--tlumene); }
.kal-den .zust { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-den .zust.nizky { color: var(--minus); }
.kal-den .pohyb { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tlumene); }
.kal-den .pohyb i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.kal-den .k-vyplate { font-size: 11px; font-weight: 600; color: var(--info-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-rozlozeni { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-bottom: 20px; }
.kal-rozlozeni .karta { margin-bottom: 0; }
.detail-dne .polozka { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--okraj); }
.detail-dne .polozka small { display: block; color: var(--slabe); }
.detail-dne .polozka b { white-space: nowrap; }
.formular-zustatek { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.formular-zustatek input { width: 180px; }
.vyplata-box { border-radius: var(--r-s); padding: 14px 16px; margin-bottom: 12px; background: linear-gradient(135deg, rgba(123, 97, 255, .3), rgba(0, 194, 255, .15));
  border: 1px solid rgba(123, 97, 255, .35); }
.vyplata-box .popis { color: var(--info-text); font-size: 13px; font-weight: 500; }
.vyplata-box .hodnota { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 6px; }
.vyplata-box p { margin: 0; color: rgba(var(--rgb), .75); font-size: 13px; }
#t-vyplaty tbody tr:not(.soucet) { cursor: pointer; }

/* ---------- byty a chatbot ---------- */
.byty-rozlozeni { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; }
@media (max-width: 1280px) { .byty-rozlozeni { grid-template-columns: minmax(0, 1fr); } .byty-rozlozeni .chat { position: static; max-height: 640px; } }
.chat { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.chat-zpravy { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 4px 2px 10px; }
.bublinka { padding: 10px 14px; max-width: 92%; white-space: pre-wrap; line-height: 1.45; font-size: 14px; border-radius: 18px; }
.bublinka.ty { align-self: flex-end; background: var(--prechod); color: #fff; border-bottom-right-radius: 6px; }
.bublinka.bot { align-self: flex-start; background: var(--karta-2); border: 1px solid var(--okraj); border-bottom-left-radius: 6px; }
.bublinka.cekani { color: var(--tlumene); font-style: italic; }
.navrh { align-self: stretch; border: 1px solid rgba(255, 181, 71, .3); border-radius: var(--r-s); padding: 12px 14px; background: var(--pozor-jemne); }
.navrh.ulozeno { border-color: rgba(46, 229, 157, .3); background: var(--plus-jemne); }
.navrh.zamitnuto { border-color: var(--okraj); background: var(--karta); opacity: .7; }
.navrh h3 { margin: 0 0 6px; }
.navrh ul { margin: 6px 0 10px; padding-left: 18px; color: var(--tlumene); font-size: 13px; }
.navrh .akce { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.navrh .stav { font-size: 13px; color: var(--tlumene); }
.chat-formular { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--okraj); padding-top: 12px; }
.chat-formular textarea { flex: 1; resize: vertical; }
.dohoda { padding: 12px 0; border-bottom: 1px solid var(--okraj); }
.dohoda:last-child { border-bottom: 0; }
.dohoda small { color: var(--slabe); display: block; }

/* ---------- přihlášení ---------- */
.prihlaseni { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.prihlaseni-karta { width: 100%; max-width: 400px; padding: 36px 30px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.prihlaseni-karta h1 { font-size: 24px; margin: 0; }
.prihlaseni-karta .popisek { margin: 0 0 6px; }
.prihlaseni-karta label { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; color: var(--tlumene); font-weight: 500; }
.prihlaseni-karta input { font: inherit; color: var(--text); background: var(--karta); border: 1px solid var(--okraj-silny); border-radius: 12px; padding: 11px 14px; }
.prihlaseni-karta .tlacitko { margin-top: 8px; width: 100%; min-height: 46px; }
.logo-znak.velky { width: 56px; height: 56px; border-radius: 18px; font-size: 26px; margin: 0 auto 6px; }

/* ---------- kalkulačka: seznam uložených, kalkulace v okně ---------- */
.kalk-ramec { width: 100%; min-height: 70vh; border: 0; display: block; background: transparent; color-scheme: dark; }
.kalk-seznam { display: flex; flex-direction: column; }
.kalk-polozka { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--okraj); }
.kalk-polozka:last-child { border-bottom: 0; }
.kalk-odkaz { flex: 1; min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 10px; margin-left: -10px; border-radius: var(--r-s); color: var(--text); transition: background .15s; }
.kalk-odkaz:hover { background: var(--karta); color: var(--text); }
.kalk-nahled { width: 76px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--karta-2); }
.kalk-nahled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kalk-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kalk-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalk-text small { color: var(--slabe); font-size: 12px; }
.kalk-zisk { font-weight: 700; color: var(--plus); white-space: nowrap; text-align: right; }
.kalk-zisk.minus { color: var(--minus); }
.kalk-zisk small { font-size: 12px; font-weight: 500; color: var(--slabe); }
.kalk-akce { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--slabe); cursor: pointer;
  display: grid; place-items: center; transition: background .15s, color .15s; }
.kalk-akce:hover { background: var(--karta-2); color: var(--text); }
.kalk-akce svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kalk-akce.hvezda.zapnuto { color: #f5c84c; }
.kalk-akce.hvezda.zapnuto svg { fill: currentColor; }
.kalk-akce.smazat:hover { color: var(--minus); }
/* top kalkulace = „zlatá volba“: zlatý rámeček, přejíždějící odlesk a mince stoupající za řádkem */
.kalk-polozka.top { position: relative; overflow: hidden; isolation: isolate; margin: 6px 0; padding: 0 6px 0 12px;
  border: 1px solid rgba(245, 200, 76, .5); border-radius: var(--r-s);
  background: linear-gradient(100deg, rgba(245, 200, 76, .22), rgba(245, 200, 76, .05) 65%, rgba(245, 200, 76, .1));
  box-shadow: inset 4px 0 0 #f5c84c, 0 0 28px -8px rgba(245, 200, 76, .6); }
.kalk-polozka.top:last-child { border-bottom: 1px solid rgba(245, 200, 76, .5); }
.kalk-polozka.top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 228, 150, .3) 50%, transparent 60%); background-size: 250% 100%;
  animation: kalk-lesk 4.5s ease-in-out infinite; }
.kalk-polozka.top .kalk-odkaz:hover { background: rgba(245, 200, 76, .08); }
.kalk-polozka.top .kalk-nahled { box-shadow: 0 0 0 2px #f5c84c, 0 0 16px rgba(245, 200, 76, .55); }
.kalk-polozka.top .kalk-zisk { font-size: 1.15em; background: linear-gradient(90deg, #fff3c4, #f5c84c 45%, #e3a72f);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.kalk-odznak { align-self: flex-start; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #2b1d00; background: linear-gradient(90deg, #fff1b8, #f5c84c 55%, #e0a92e); }
.mince { position: absolute; bottom: -16px; z-index: -1; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 35%, #fff6c8, #f5c84c 45%, #a87900);
  box-shadow: inset 0 0 0 2px rgba(168, 121, 0, .55), 0 0 10px rgba(245, 200, 76, .6); animation: kalk-mince 3.6s linear infinite; }
.mince.vybuch { position: fixed; bottom: auto; z-index: 1000; width: 16px; height: 16px; opacity: 1; animation: none; }
@keyframes kalk-lesk { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes kalk-mince {
  0% { transform: translateY(0) rotateY(0); opacity: 0; }
  15%, 70% { opacity: .85; }
  100% { transform: translateY(-120px) rotateY(720deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kalk-polozka.top::after { animation: none; } .kalk-polozka.top .mince { display: none; } }
.kalk-okno { width: min(980px, calc(100vw - 48px)); height: calc(100vh - 48px); max-width: none; max-height: none; padding: 0; color: var(--text);
  background: radial-gradient(120% 60% at 0% 0%, rgba(91, 60, 255, .22), transparent 60%), #0b0b11;
  border: 1px solid var(--okraj-silny); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); overflow: hidden; }
.kalk-okno[open] { display: flex; flex-direction: column; }
.kalk-okno::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.kalk-okno-hlava { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--okraj); background: rgba(0, 0, 0, .3); }
.kalk-okno-hlava b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalk-okno .kalk-ramec { flex: 1; min-height: 0; }
html:has(.kalk-okno[open]) { overflow: hidden; }

/* ---------- mobil: spodní lišta jako v aplikaci ---------- */
@media (max-width: 1100px) {
  .kal-rozlozeni, .byty-rozlozeni { grid-template-columns: minmax(0, 1fr); }
  .chat { position: static; max-height: none; }
}
@media (max-width: 860px) {
  .rozlozeni { grid-template-columns: minmax(0, 1fr); }
  .bocni { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 30; flex-direction: row; gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--okraj); background: var(--lista); }
  .logo, .bocni-pata { display: none; }
  .menu { flex-direction: row; flex: 1; justify-content: space-around; }
  .menu a, .menu summary { flex-direction: column; gap: 3px; padding: 6px 10px; font-size: 11px; }
  .menu a.aktivni, .menu summary.aktivni { background: transparent; box-shadow: none; color: var(--text); }
  .menu a.aktivni::before, .menu summary.aktivni::before { left: 30%; right: 30%; top: -6px; bottom: auto; width: auto; height: 3px; }
  .menu-skupina { position: relative; display: flex; }
  .menu summary .sipka { display: none; }
  .menu-skupina[open] > summary.aktivni::before { display: block; }
  .podmenu { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 230px; margin: 0;
    padding: 6px; border: 1px solid var(--okraj-silny); border-radius: var(--r); background: var(--plovouci);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
  .menu .podmenu a { flex-direction: row; font-size: 15px; padding: 11px 14px; }
  .menu .podmenu a.aktivni { background: var(--karta-2); }
  .menu .podmenu a.aktivni::before { display: none; }
  .obsah { padding: 22px 16px 110px; }
  h1 { font-size: 26px; }
  .hero-cislo { font-size: 44px; }
  .hero-cast { padding: 24px 22px; }
  .mrizka { grid-template-columns: minmax(0, 1fr); }
  .karta { padding: 20px 18px; }
  .tabulka-obal { margin: 0 -18px; padding: 0 18px; }
  .kal-den { min-height: 54px; padding: 4px; border-radius: 10px; }
  .kal-den .pohyb { display: none; }
  .kal-den .zust { font-size: 11px; }
  /* kalkulačka: výdělek pod názvem, okno přes celou obrazovku */
  .kalk-polozka { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 0 4px; }
  .kalk-akce { width: 36px; height: 36px; }
  .kalk-odkaz { grid-row: span 2; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 12px; }
  .kalk-nahled { width: 56px; height: 44px; grid-row: span 2; }
  .kalk-zisk { grid-column: 2; text-align: left; font-size: 14px; }
  .kalk-okno { width: 100vw; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .kalk-okno-hlava { padding-top: calc(12px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) {
  .zare span, .hero::after { animation: none; }
  .karta, .dlazdice > div, .hero { animation: none; }
}

/* ---------- menu, „+ Náklad“ a telefon (fáze 1) ---------- */
/* Mac: „+ Náklad“ jako bílé tlačítko nahoře v menu, odkazy „Více“ jen na telefonu */
.menu-pridat { order: -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; padding: 11px 14px;
  font: inherit; font-weight: 600; color: var(--hlavni-text); background: var(--hlavni); border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .15s, box-shadow .2s; }
.menu-pridat:hover { box-shadow: 0 8px 28px rgba(var(--rgb), .25); }
.menu-pridat:active { transform: scale(.97); }
.menu-pridat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.menu-vice, .jen-mobil { display: none; }

/* rychlé přidání nákladu */
.formular-dialog.naklad { width: min(480px, calc(100vw - 32px)); }
.naklad .naklad-castka { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; padding: 8px 14px; }
.volby { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.volby legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--tlumene); }
.volby-radek { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.formular-dialog .volba { display: inline-flex; flex-direction: row; margin: 0; gap: 0; }
.volba input { position: absolute; opacity: 0; pointer-events: none; }
.volba span, .volba-tlacitko { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 14px;
  font-weight: 500; color: var(--tlumene); background: var(--karta); border: 1px solid var(--okraj-silny); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s; }
.volba span:hover, .volba-tlacitko:hover { color: var(--text); }
.volba input:checked + span, .volba-tlacitko.vybrano { background: var(--hlavni); border-color: var(--hlavni); color: var(--hlavni-text); }
.volba input:focus-visible + span { box-shadow: 0 0 0 4px rgba(123, 97, 255, .35); }
.volby input[type=date] { width: 100%; }
.naklad .napoveda { min-height: 18px; margin: 0 0 8px; }

/* krátká hláška po uložení */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px;
  border-radius: 999px; background: var(--plovouci); border: 1px solid rgba(46, 229, 157, .35); color: var(--text); font-size: 14px; font-weight: 500;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.toast::before { content: "✓ "; color: var(--plus); }
/* Mac: v nízkém okně se menu (s rozbaleným seznamem bytů) dá posouvat, ať jsou vidět i Export a Odhlásit */
.bocni { overflow-y: auto; }

@media (max-width: 860px) {
  /* spodní lišta: Přehled · Byty · + · Kalkulačka · Více (vyskakovací seznamy přesahují nad lištu) */
  .bocni { overflow: visible; }
  /* aplikace z plochy iPhonu kreslí až pod stavový řádek (black-translucent) */
  .obsah { padding-top: calc(22px + env(safe-area-inset-top)); }
  .jen-pocitac { display: none !important; }
  .menu-vice { display: flex; }
  .jen-mobil { display: inline; }
  .menu a, .menu summary { padding: 6px 4px; min-width: 0; flex: 1 1 0; }
  .menu a span, .menu summary span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-skupina { flex: 1 1 0; min-width: 0; position: static; }
  .menu-skupina summary { width: 100%; }
  .menu-pridat { order: 0; flex: none; flex-direction: column; gap: 2px; margin: -18px 6px 0; padding: 0; width: 56px; height: 56px;
    border-radius: 50%; background: var(--prechod); color: #fff; box-shadow: 0 8px 24px rgba(91, 60, 255, .55); }
  .menu-pridat svg { width: 24px; height: 24px; }
  .menu-pridat span { font-size: 10px; line-height: 1; }
  /* vyskakovací seznamy (byty, více) přes celou šířku lišty, ať nevyjedou z obrazovky */
  .podmenu { left: 8px; right: 8px; bottom: calc(100% + 8px); transform: none; min-width: 0; max-height: 60vh; overflow-y: auto; }

  /* formuláře: 16px, jinak iPhone při psaní zvětšuje stránku; dialogy jako list zespodu */
  input, select, textarea, .formular-dialog input, .prihlaseni-karta input, .formular-zustatek input, .chat-formular textarea { font-size: 16px; }
  .formular-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh; overflow-y: auto;
    border-radius: 22px 22px 0 0; border-bottom: 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .formular-dialog.naklad { width: 100vw; }
  .formular-dialog .dlg-akce { position: sticky; bottom: 0; background: var(--dialog); padding-top: 10px; }
  .formular-dialog .dlg-akce .tlacitko { flex: 1; min-height: 46px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Finance: sbalené části a telefon (fáze 1) ---------- */
/* sbalené části (kontrola párování, návody k nastavení) – lišta jako karta, obsah pod ní */
details.fin-sbalene { margin-bottom: 20px; }
details.fin-sbalene > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px;
  border: 1px solid var(--okraj); border-radius: var(--r); background: var(--karta); color: var(--tlumene); font-weight: 600;
  cursor: pointer; list-style: none; user-select: none; transition: border-color .25s, color .2s; }
details.fin-sbalene > summary::-webkit-details-marker { display: none; }
details.fin-sbalene > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
details.fin-sbalene > summary:hover { color: var(--text); border-color: var(--okraj-silny); }
details.fin-sbalene[open] > summary { color: var(--text); margin-bottom: 20px; }
details.fin-sbalene[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* e-mail servisního účtu je jedno dlouhé slovo */
#tabulka-stav { overflow-wrap: anywhere; }
/* stav Smoobu a banky jako dva řádky pod sebou */
#sync-stav { margin-bottom: 4px; }

@media (max-width: 860px) {
  /* podzáložky přes celou šířku, bez posouvání do strany */
  .podzalozky { display: flex; width: 100%; }
  .podzalozky a { flex: 1 1 auto; padding: 8px 6px; font-size: 13px; text-align: center; }
  #parametry { grid-template-columns: minmax(0, 1fr) auto; }
  details.fin-sbalene > summary { padding: 14px 18px; }
}
@media (max-width: 360px) {
  .podzalozky a { padding: 7px 4px; font-size: 12px; }
}

/* ---------- stránka bytu (fáze 1) ---------- */
/* /byty bez vybraného bytu: seznam bytů na klepnutí */
.byty-seznam { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 6px; }
.byty-seznam a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--okraj);
  color: var(--text); font-weight: 500; }
.byty-seznam a:last-child { border-bottom: 0; }
.byty-seznam a span { flex: 1; min-width: 0; }
.byty-seznam a small { color: var(--slabe); font-size: 12px; font-weight: 400; }
.byty-seznam a::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-top: 2px solid var(--slabe);
  border-right: 2px solid var(--slabe); transform: rotate(45deg); }
.byty-seznam a:hover::after { border-color: var(--hlavni); }
/* chatbot je schovaný za tlačítkem pod kartami, otevřený má vlastní „Skrýt“ */
.chat-otevrit { white-space: normal; flex-wrap: wrap; text-align: center; }
.chat-tlacitka { display: flex; gap: 8px; }
td.radek-akce button:disabled { opacity: .5; cursor: wait; }
#byt-dlazdice > .upozorneni { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .chat-otevrit { width: 100%; }
  .tlacitko.male[data-pridat], .chat-tlacitka .tlacitko { min-height: 40px; padding: 8px 16px; }
  /* otevřený chat nesmí zajet pod spodní lištu */
  .chat { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  /* dlaždice po dvou vedle sebe, ať jsou náklady hned pod nimi */
  #byt-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #byt-dlazdice > div { padding: 14px; }
  #byt-dlazdice .hodnota { font-size: 20px; }
  /* náklady a příjmy: řádek = název a částka, pod tím datum/splatnost, pod tím Upravit a Smazat – nic se neposouvá do strany */
  table.polozky, table.polozky tbody { display: block; }
  table.polozky thead { display: none; }
  table.polozky tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--okraj); }
  table.polozky tr:last-child { border-bottom: 0; }
  table.polozky tr::after { content: ""; order: 3; flex-basis: 100%; }
  table.polozky td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.polozky td.nazev { order: 1; flex: 1 1 0; font-weight: 600; }
  table.polozky td.castka { order: 2; font-weight: 600; white-space: nowrap; }
  table.polozky td.meta { order: 4; font-size: 13px; color: var(--tlumene); }
  table.polozky td.meta::before { content: attr(data-popis) " "; color: var(--slabe); }
  table.polozky td.radek-akce { order: 5; flex-basis: 100%; display: flex; gap: 8px; margin-top: 10px; }
  table.polozky td.radek-akce button { flex: 1; min-height: 40px; font-size: 14px; background: var(--karta); border: 1px solid var(--okraj);
    border-radius: 999px; }
  table.polozky td.prazdne { flex-basis: 100%; padding: 20px 0; text-align: center; }
}

/* ---------- Přehled a Kalendář a podrobnosti (fáze 1) ---------- */
/* Přehled: úzký sloupec, nahoře aktuálnost dat a tlačítko Obnovit */
.prehled { max-width: 880px; }
.prehled-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.prehled-hlava > div { min-width: 0; }
.prehled-hlava h1 { margin: 0 0 2px; }
.prehled-hlava .tlacitko { flex: none; margin-top: 4px; }
.cerstvost { margin: 0; font-size: 13px; color: var(--tlumene); }
.cerstvost .pozor { color: var(--pozor); font-weight: 600; }
.cerstvost .chyba { color: var(--minus); font-weight: 600; cursor: help; }
/* dvě hlavní čísla vedle sebe (i na telefonu): vlevo „Na účtu teď“, vpravo „Peníze k dispozici“, pod nimi čipy */
.prehled-hero { grid-template-columns: minmax(0, 1fr); }
.prehled-hero .hero-cast { gap: 22px; }
/* velikost čísel podle šířky celé karty – obě stejně velká, vejde se i šesticiferná částka na telefonu */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); container-type: inline-size; }
.hero-pul { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prehled-hero .hero-pul .hero-cislo { font-size: clamp(22px, 6.8vw, 56px); font-size: clamp(22px, 8.4cqi, 56px); }
.hero-pul + .hero-pul { padding-left: 28px; margin-left: 28px; border-left: 1px solid rgba(var(--rgb), .14); }
.prehled-hero .hero-popis { margin-top: 0; font-weight: 500; color: rgba(var(--rgb), .8); }
.prehled-hero .hero-cislo small { color: inherit; opacity: .6; }
.hero-pul-volne .hero-cislo { background: linear-gradient(90deg, #fff, #c9c0ff 60%, #8fe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prehled-hero .hero-radek { margin-top: 0; }
.cip small { font-size: 11px; color: rgba(var(--rgb), .5); }
/* Co nás čeká: dny s pohybem na účtu RB, na konci dne zůstatek */
.ceka-karta .karta-hlava { margin-bottom: 10px; }
.ceka-karta .karta-hlava .popisek { margin: 0; }
.ceka { display: flex; flex-direction: column; }
.ceka:not(.vse) .ceka-den.dalsi { display: none; }
.ceka-den { padding: 14px 0; border-bottom: 1px solid var(--okraj); }
.ceka-den:first-child { padding-top: 0; }
.ceka-den.nejnizsi { margin: 4px -12px; padding: 12px; border: 1px solid rgba(255, 181, 71, .3); border-radius: var(--r-s); background: var(--pozor-jemne); }
.ceka-hlava { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--tlumene); }
.ceka-polozka { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.ceka-text { min-width: 0; overflow-wrap: anywhere; }
.ceka-text div { font-weight: 500; }
.ceka-text small { display: block; color: var(--slabe); font-size: 12px; }
.ceka-polozka b { flex: none; white-space: nowrap; font-weight: 600; }
.ceka-polozka b.plus { color: var(--plus); }
.ceka-prazdne { padding: 4px 0; color: var(--slabe); font-size: 13px; }
.ceka-zustatek { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--okraj); font-size: 13px; color: var(--slabe); }
.ceka-zustatek b { color: var(--tlumene); font-weight: 600; white-space: nowrap; }
.ceka-den.nejnizsi .ceka-zustatek, .ceka-den.nejnizsi .ceka-zustatek b { color: var(--pozor); }
.ceka-prepinac { margin-top: 14px; }
.ceka-karta .ceka-jinam { margin: 12px 0 0; }
.prehled-dalsi { display: flex; width: 100%; min-height: 48px; margin-bottom: 20px; }

/* Kalendář a podrobnosti */
.podrobnosti-filtr { margin: 0; }
.karta .podrobnosti-napoveda { margin: 0; }
.podrobnosti-legenda { margin-top: 12px; }
/* výchozí zůstatek: s bankou sbalený */
.zustatek-karta > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; user-select: none; }
.zustatek-karta > summary::-webkit-details-marker { display: none; }
.zustatek-karta > summary h2 { margin: 0; }
.zustatek-karta > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--tlumene);
  border-bottom: 2px solid var(--tlumene); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.zustatek-karta[open] > summary { margin-bottom: 12px; }
.zustatek-karta[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

@media (max-width: 860px) {
  .prehled-hlava { margin-bottom: 14px; }
  .prehled-hero .hero-cast { gap: 16px; padding: 20px 18px; }
  .hero-pul + .hero-pul { padding-left: 14px; margin-left: 14px; }
  .prehled-hero .hero-pozn { font-size: 12px; }
  .ceka-den.nejnizsi { margin: 4px -10px; padding: 12px 10px; }
  .podrobnosti-filtr, .podrobnosti-filtr label { width: 100%; }
  .podrobnosti-filtr select { flex: 1; min-width: 0; }
  /* dlaždice po dvou vedle sebe, ať je graf a kalendář blíž */
  #dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #dlazdice > div { padding: 14px; }
  #dlazdice .hodnota { font-size: 20px; }
}

/* ---------- + Náklad, Byty a Finance (fáze 2) ---------- */
/* + Náklad: platba se stejnou částkou, která už je v bance („V bance už je … → To je ono“) */
.naklad-banka { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 12px; }
.naklad-cip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 14px; font: inherit; text-align: left;
  color: var(--text); background: var(--plus-jemne); border: 1px dashed rgba(46, 229, 157, .45); border-radius: var(--r-s); cursor: pointer;
  transition: background .15s, border-color .15s; }
.naklad-cip:hover { background: rgba(46, 229, 157, .18); }
.naklad-cip.vybrano { border-style: solid; border-color: var(--plus); background: rgba(46, 229, 157, .2); }
.naklad-cip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.naklad-cip-text small { font-size: 12px; color: var(--tlumene); }
.naklad-cip-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-size: 14px; font-weight: 600; }
.naklad-cip-akce { flex: none; font-size: 14px; font-weight: 700; color: var(--plus); }
.naklad-cip.vybrano .naklad-cip-akce { color: var(--tlumene); font-weight: 600; }
.naklad .napoveda { line-height: 1.45; white-space: pre-line; }
/* Zrušit / Uložit vždy vidět, i když je okno nižší než formulář (Mac) */
#dlg-naklad .dlg-akce, #dlg-polozka .dlg-akce { position: sticky; bottom: -26px; z-index: 1; margin-bottom: -26px; padding: 10px 0 26px;
  background: var(--dialog); }

/* Byty: dialog položky plánu (opakování, pro koho, placeno, „i zpětně“) a volba při mazání */
.formular-dialog .dlg-zpetne { flex-direction: row; align-items: center; gap: 10px; min-height: 40px; color: var(--text); cursor: pointer; }
.formular-dialog .dlg-zpetne input { flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; accent-color: var(--fialova); }
.formular-dialog .dlg-napoveda { margin: -4px 0 12px; }
#dlg-smazat .popisek { margin-bottom: 8px; }
#t-pevne td:nth-child(3) { white-space: normal; }

/* Finance: řádek Firmy v tabulce bytů */
tr.firma-radek td { color: var(--info-text); border-top: 1px dashed var(--okraj-silny); }
tr.firma-radek td small { display: block; font-size: 12px; color: var(--slabe); }

@media (max-width: 860px) {
  .formular-dialog .dlg-zpetne { min-height: 44px; }
  /* mazání: hlavní volba přes celou šířku, pod ní Zrušit a I zpětně */
  .smazat-akce { flex-wrap: wrap; }
  .smazat-akce #smazat-odted { order: -1; flex-basis: 100%; }
  /* přepínače v dialozích: aspoň 40px na klepnutí */
  .volba span, .volba-tlacitko { min-height: 40px; padding: 6px 11px; }
  /* lišta Zrušit / Uložit až ke spodnímu okraji – pod ní neprosvítá posouvaný formulář */
  #dlg-naklad .dlg-akce, #dlg-polozka .dlg-akce, #dlg-smazat .dlg-akce { bottom: calc(-18px - env(safe-area-inset-bottom));
    margin-bottom: calc(-18px - env(safe-area-inset-bottom)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------- K vyřešení a Náklady (fáze 2) ---------- */
/* K vyřešení (Přehled i Náklady): skupiny výdajů, které v bance nejsou, a příjmů, které nepřišly */
.vyr-karta .karta-hlava { margin-bottom: 0; }
.vyr-karta > .upozorneni { margin: 10px 0 0; }
.vyr-nadpis { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 2px; font-size: 13px;
  font-weight: 600; color: var(--pozor); }
.vyr-nadpis b { flex: none; white-space: nowrap; }
.vyr-skupina { padding: 10px 0 14px; border-bottom: 1px solid var(--okraj); transition: opacity .2s; }
.vyr-skupina:last-child { border-bottom: 0; padding-bottom: 0; }
.vyr-skupina.hotovo { opacity: .4; pointer-events: none; }
.vyr-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 40px; padding: 4px 0;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 10px; }
button.vyr-hlava { cursor: pointer; }
button.vyr-hlava:hover .vyr-text small { color: var(--tlumene); }
.vyr-text { min-width: 0; overflow-wrap: anywhere; }
.vyr-text b { display: block; font-weight: 600; }
.vyr-text small { display: block; color: var(--slabe); font-size: 12px; }
button.vyr-hlava .vyr-text small::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
button.vyr-hlava[aria-expanded=true] .vyr-text small::after { transform: translateY(1px) rotate(-135deg); }
.vyr-castka { flex: none; white-space: nowrap; font-weight: 600; }
.vyr-castka.plus, .vyr-moznost-castka.plus { color: var(--plus); }
.vyr-rozpis { margin: 2px 0 6px; padding: 2px 0 2px 12px; border-left: 2px solid var(--okraj); font-size: 13px; color: var(--tlumene); }
.vyr-rozpis div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; }
.vyr-rozpis span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vyr-rozpis span + span { flex: none; white-space: nowrap; }
.vyr-skupina .vyr-rozpis .vyr-rozpis-akce { flex: none; min-height: 36px; padding: 4px 12px; font-size: 13px; }
.vyr-kandidat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 2px; padding: 8px 12px; border-radius: var(--r-s);
  background: var(--akcent-jemne); border: 1px solid rgba(123, 97, 255, .3); }
.vyr-kandidat-text { flex: 1 1 180px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.vyr-kandidat-text b { white-space: nowrap; }
.vyr-kandidat-text small { display: block; color: var(--tlumene); font-size: 12px; }
.vyr-kandidat .vyr-zaskrt { flex-basis: 100%; min-height: 32px; }
.vyr-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vyr-skupina .tlacitko, .nkl .tlacitko.male, .nkl-dialog .tlacitko, .vyr-vyber .tlacitko { min-height: 40px; }
.vyr-skupina .chyba-formulare, .nkl-radek .chyba-formulare { margin: 8px 0 0; flex-basis: 100%; }
.vyr-potvrzeni { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-s); background: var(--pozor-jemne); border: 1px solid rgba(255, 181, 71, .25); }
.vyr-potvrzeni p { margin: 0; font-size: 13px; color: var(--pozor-text); }
.vyr-prazdne { margin: 8px 0 0; color: var(--slabe); font-size: 14px; }
/* zaškrtávátko vedle textu (i v dialozích, kde je label jinak sloupec) */
.vyr-zaskrt, .formular-dialog .vyr-zaskrt { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; min-height: 40px; margin: 0;
  font-size: 13px; font-weight: 500; color: var(--tlumene); cursor: pointer; user-select: none; }
.vyr-zaskrt input, .formular-dialog .vyr-zaskrt input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  accent-color: var(--fialova); cursor: pointer; }
/* okno výběru platby / položky */
.vyr-vyber .vyr-seznam { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vyr-vyber .vyr-moznost { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 52px; margin: 0;
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--okraj); background: var(--karta); color: var(--text); font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s; }
.vyr-vyber .vyr-moznost:hover { border-color: var(--okraj-silny); }
.vyr-vyber .vyr-moznost.vybrano { border-color: var(--hlavni); background: var(--karta-2); box-shadow: inset 0 0 0 1px var(--hlavni); }
.vyr-vyber .vyr-moznost input { position: absolute; opacity: 0; pointer-events: none; }
.vyr-vyber .vyr-moznost input:focus-visible ~ .vyr-moznost-text b { text-decoration: underline; }
.vyr-moznost-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.vyr-moznost-text b { font-weight: 600; }
.vyr-moznost-text small { color: var(--slabe); font-size: 12px; }
.vyr-moznost-castka { flex: none; white-space: nowrap; font-weight: 600; }
.vyr-vyber .vyr-dalsi { width: 100%; margin-bottom: 8px; }
.vyr-vyber .vyr-navic { display: block; width: 100%; min-height: 40px; margin: 4px 0 8px; padding: 8px 0; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--odkaz); background: none; border: 0; text-align: left; cursor: pointer; }
.vyr-vyber .vyr-navic:hover { color: var(--text); }
/* „Příště párovat samo“ a tlačítka vždy vidět, i když je seznam dlouhý */
.vyr-pata { position: sticky; bottom: 0; z-index: 1; padding-top: 6px; background: var(--dialog); }
.vyr-pata .dlg-akce { position: static; }
.toast.chyba { border-color: rgba(255, 93, 108, .45); }
.toast.chyba::before { content: "! "; color: var(--minus); font-weight: 700; }
.toast-akce { margin-left: 12px; padding: 4px 10px; min-height: 32px; font: inherit; font-weight: 700; color: var(--hlavni-text); background: var(--hlavni); border: 0;
  border-radius: 999px; cursor: pointer; }

/* Přehled: nenápadný odkaz na platby bez zařazení */
.nezarazene-odkaz { display: flex; align-items: center; min-height: 40px; margin: -12px 0 12px; padding: 0 4px; font-size: 13px; color: var(--slabe); }
.nezarazene-odkaz:hover { color: var(--text); }

/* stránka Náklady */
.nkl { max-width: 880px; }
.nkl.jen-cteni .nkl-zapis { display: none !important; }
.nkl.nacitam > :not(.prehled-hlava) { display: none !important; }   /* do prvního načtení jen nadpis, žádné prázdné karty */
.nkl #nezarazene, .nkl details.nkl-sbalene { scroll-margin-top: 16px; }
.nkl-text { margin: 0 0 8px; color: var(--tlumene); font-size: 14px; }
.nkl-seznam { margin: 0 0 10px; padding-left: 18px; font-size: 14px; color: var(--tlumene); }
.nkl-seznam li { margin: 3px 0; }
.nkl-podnadpis { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--tlumene); }
.nkl-nulove summary { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--slabe); font-size: 13px; cursor: pointer;
  list-style: none; }
.nkl-nulove summary::-webkit-details-marker { display: none; }
.nkl-nulove summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nkl-nulove[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.nkl-nulove summary:hover { color: var(--tlumene); }
.nkl-pata { margin: 6px 0 0; }
.nkl-zmeny .nkl-seznam { margin: 8px 0 12px; color: inherit; font-weight: 400; }
/* sbalené části (Plán, Spárováno, Vzory) */
details.karta.nkl-sbalene { padding: 0; }
details.nkl-sbalene > summary { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 14px 24px; cursor: pointer; list-style: none;
  user-select: none; }
details.nkl-sbalene > summary::-webkit-details-marker { display: none; }
details.nkl-sbalene > summary h2 { margin: 0; }
details.nkl-sbalene > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid var(--tlumene);
  border-bottom: 2px solid var(--tlumene); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
details.nkl-sbalene[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nkl-pocet { font-size: 13px; color: var(--slabe); }
.nkl-sbalene-obsah { padding: 0 24px 24px; }
.nkl-plan-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.nkl-plan-hlava .popisek { margin: 0 0 6px; }
.nkl-plan-hlava .tlacitko { flex: none; }
/* platby z účtu: filtr Vše / Bez zařazení / Přiřazené, bez zařazení zaškrtnout a hromadně zařadit, pod platbou
   štítky (karta, komu patří, z poznámky) a akce (Přiřadit / Rozdělit, Zrušit párování, Zase počítat) */
.nkl-filtr { display: flex; width: max-content; margin: 6px 0 10px; }
.nkl-filtr button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.nkl-filtr button small { font-size: 12px; color: var(--slabe); font-weight: 600; }
.nkl-filtr button.aktivni small { color: var(--hlavni-text); opacity: .55; }
.nkl-platby { display: flex; flex-direction: column; }
.nkl-platba { padding: 8px 6px; margin: 0 -6px; border-bottom: 1px solid var(--okraj); border-radius: 10px; transition: background .15s, opacity .2s; }
.nkl-platba:last-child { border-bottom: 0; }
.nkl-platba.vybrano { background: var(--akcent-jemne); }
.nkl-platba.hotovo { opacity: .4; pointer-events: none; }
.nkl-platba-hlava { display: flex; align-items: center; gap: 12px; min-height: 36px; }
label.nkl-platba-hlava { cursor: pointer; }
.nkl-platba:has(label.nkl-platba-hlava):hover { background: rgba(var(--rgb), .03); }
.nkl-platba.vybrano:hover { background: var(--akcent-jemne); }
.nkl-platba input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--fialova); cursor: pointer; }
.nkl-platba-misto { flex: none; width: 22px; }
.nkl-platba-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.nkl-platba-pata.odsadit { padding-left: 34px; }
.nkl-platba-pata .chyba-formulare { flex-basis: 100%; margin: 4px 0 0; }
.nkl-stitky { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nkl-stitky .stitek { white-space: normal; overflow-wrap: anywhere; }
.nkl-stitky-text { flex-basis: 100%; font-size: 12px; color: var(--tlumene); overflow-wrap: anywhere; }
.stitek.nkl-cil { background: var(--akcent-jemne); color: var(--info-text); }
.stitek.nkl-pozor { background: var(--pozor-jemne); color: var(--pozor); }
.nkl-platba-akce { flex: none; display: flex; gap: 8px; margin-left: auto; }
.nkl-platba-akce:empty { display: none; }
.nkl-dalsi { width: 100%; margin-top: 10px; }
/* okno Přiřadit / Rozdělit: části = komu + kolik + odebrat */
.nkl-poznamka { padding: 8px 12px; border-radius: 12px; background: var(--karta); color: var(--tlumene); overflow-wrap: anywhere; }
.nkl-casti { display: flex; flex-direction: column; gap: 8px; }
.nkl-cast { display: flex; align-items: center; gap: 8px; }
.nkl-cast select { flex: 1 1 auto; min-width: 0; }
.formular-dialog .nkl-cast input { flex: none; width: 120px; min-width: 0; text-align: right; }
.nkl-cast .nkl-zavrit { flex: none; }
.nkl-casti-akce { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.nkl-zbyva { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--pozor); }
.nkl-zbyva.sedi { color: var(--plus); }
.nkl-odkaz { display: block; width: 100%; min-height: 40px; margin: 0 0 8px; padding: 8px 0; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--tlumene); background: none; border: 0; text-align: left; cursor: pointer; }
.nkl-odkaz.nkl-smazat:hover { color: var(--minus); }
.nkl-platba-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.nkl-platba-text b { font-weight: 600; }
.nkl-platba-text small { color: var(--slabe); font-size: 12px; }
.nkl-platba-castka { flex: none; white-space: nowrap; font-weight: 600; }
.nkl-hromadne { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-top: 12px; padding: 10px 12px 10px 16px; border-radius: var(--r); background: var(--plovouci); border: 1px solid var(--okraj-silny);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.nkl-hromadne-pocet { font-size: 14px; font-weight: 600; }
.nkl-hromadne-akce { display: flex; flex-wrap: wrap; gap: 8px; }
.nkl-zavrit { width: 40px; padding: 0; }
/* plán, spárováno, vzory: řádek = text vlevo, částka vpravo, akce pod tím (Mac vedle) */
.nkl-skupina h3 { margin: 18px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--slabe); }
.nkl-radek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--okraj); }
.nkl-radek:last-child { border-bottom: 0; }
.nkl-radek.skoncilo { opacity: .5; }
.nkl-radek.hotovo { opacity: .4; pointer-events: none; }
.nkl-radek-text { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.nkl-radek-text b { font-weight: 600; }
.nkl-radek-text .stitek { margin-left: 8px; vertical-align: 1px; }
.nkl-radek-text small { display: block; color: var(--slabe); font-size: 12px; }
.nkl-radek-text small.nkl-jak { color: var(--slabe); }
.nkl-jina { color: var(--pozor); font-weight: 600; }
.nkl-radek-castka { flex: none; white-space: nowrap; font-weight: 600; }
.nkl-radek-castka.plus { color: var(--plus); }
.nkl-radek-akce { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nkl-radek .tlacitko.nkl-smazat:hover, .nkl-potvrzeni .tlacitko.nkl-smazat { color: var(--minus); }
.nkl-potvrzeni .tlacitko.nkl-smazat { border-color: rgba(255, 93, 108, .4); }
.nkl-potvrzeni { flex-basis: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--minus-jemne);
  border: 1px solid rgba(255, 93, 108, .25); }
.nkl-potvrzeni p { margin: 0 0 2px; font-weight: 600; }
.nkl-potvrzeni small { display: block; color: var(--tlumene); font-size: 12px; }
.nkl-dialog .napoveda { display: block; margin-top: 2px; }
.nkl-dialog #polozka-zpetne { margin-bottom: 6px; }

@media (min-width: 861px) {
  .nkl-radek { flex-wrap: nowrap; align-items: center; }
  .nkl-radek-akce { flex-basis: auto; flex: none; }
  .nkl-radek .chyba-formulare { flex-basis: auto; }
  .nkl-potvrzeni { flex-basis: auto; }
  .nkl-radek:has(.nkl-potvrzeni) { flex-wrap: wrap; }
  .vyr-vyber { width: min(560px, calc(100vw - 32px)); }
  .vyr-vyber .vyr-seznam { max-height: min(50vh, 440px); overflow-y: auto; padding-right: 4px; }
}
@media (max-width: 860px) {
  /* hromadné akce nad spodní lištou */
  .nkl-hromadne { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .nkl-hromadne-akce { width: 100%; }
  .nkl-hromadne-akce .tlacitko { flex: 1 1 auto; }
  .nkl-hromadne-akce .nkl-zavrit { flex: none; }
  /* filtr plateb přes celou šířku, tlačítka pod platbou aspoň 40px */
  .nkl-filtr { width: 100%; }
  .nkl-filtr button { flex: 1 1 0; justify-content: center; min-height: 40px; padding: 6px 8px; }
  .formular-dialog .nkl-cast input { width: 104px; }
  details.nkl-sbalene > summary { padding: 12px 18px; }
  .nkl-sbalene-obsah { padding: 0 18px 20px; }
  .nkl-plan-hlava { flex-direction: column; align-items: stretch; }
  .nkl-radek-akce { margin-top: 2px; }
  .nkl-radek-akce .tlacitko { flex: 0 1 auto; min-width: 104px; }   /* Upravit / Smazat / Zrušit jen tak široké, jak je třeba */
  .vyr-akce .tlacitko { flex: 1 1 auto; }
  .nezarazene-odkaz { margin-top: -10px; }
  /* lišta s tlačítky až ke spodnímu okraji okna – pod ní neprosvítá posouvaný seznam */
  .vyr-vyber .vyr-pata, .nkl-dialog .dlg-akce { bottom: calc(-18px - env(safe-area-inset-bottom));
    margin-bottom: calc(-18px - env(safe-area-inset-bottom)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .vyr-vyber .vyr-pata .dlg-akce { margin-bottom: 0; padding-bottom: 0; }
}

/* ---------- Úklidy ---------- */
.ukl-mesic .karta-hlava .popisek { margin: 0; }
.ukl-mesic .hero-radek { margin-top: 0; }
.ukl-stitek { margin-left: 8px; vertical-align: 1px; }
/* ceny: byt a odkud data, vpravo cena a tlačítko Změnit */
.ukl-ceny { display: flex; flex-direction: column; }
.ukl-cena { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--okraj); }
.ukl-cena:first-child { padding-top: 0; }
.ukl-cena:last-child { border-bottom: 0; padding-bottom: 0; }
.ukl-cena-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ukl-cena-byt { font-weight: 600; }
.ukl-cena-text small, .ukl-cena-castka small { display: block; color: var(--slabe); font-size: 12px; }
.ukl-cena-castka { flex: none; text-align: right; }
.ukl-cena-castka b { font-size: 17px; white-space: nowrap; }
/* po měsících: řádek měsíce vybírá rozpis po bytech */
.ukl-radek { cursor: pointer; }
.ukl-radek:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.ukl-radek.vybrany td { background: var(--akcent-jemne); color: var(--text); }
.ukl-odhad { margin-left: 6px; color: var(--slabe); font-size: 12px; font-weight: 400; }
.ukl-rozpis-nadpis { margin: 20px 0 0; color: var(--tlumene); }
/* dialog ceny: dřívější ceny se smazáním */
.ukl-historie h3 { margin: 4px 0 6px; font-size: 13px; color: var(--tlumene); }
.ukl-historie-radek { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--okraj); font-size: 14px; }
.ukl-historie-radek:last-child { border-bottom: 0; margin-bottom: 8px; }
#dlg-cena select { width: 100%; }

@media (max-width: 860px) {
  /* telefon: cena a Změnit pod názvem bytu, ať se dlouhé názvy nelámou po písmenech */
  .ukl-cena { flex-wrap: wrap; row-gap: 8px; }
  .ukl-cena-text { flex-basis: 100%; }
  .ukl-cena-castka { flex: 1; text-align: left; }
  .ukl-cena .tlacitko { min-height: 40px; }
  /* tabulky bez posouvání do strany: „odhadem“ pod počet, den platby je v kartě Tento měsíc */
  .ukl-odhad { display: block; margin-left: 0; line-height: 1.2; }
  #ukl-mesice th:nth-child(4), #ukl-mesice td:nth-child(4) { display: none; }
  .ukl-tabulka td:first-child { white-space: normal; }
}

/* ---------- Nastavení ---------- */
.nast { max-width: 640px; }
.nast .volby-radek { margin: 0; }
.nast-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0 4px; border-top: 1px solid var(--okraj); margin-top: 6px; }
.nast-form h3 { margin: 0; font-size: 15px; }
.nast-form form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.nast-form label { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; font-size: 13px; font-weight: 500; color: var(--tlumene); }
.nast-form input { font: inherit; color: var(--text); background: var(--karta); border: 1px solid var(--okraj-silny); border-radius: 12px;
  padding: 9px 14px; min-height: 44px; }
.nast-form .napoveda { font-size: 12px; font-weight: 400; color: var(--slabe); margin: 0; }
.nast-form .chyba-formulare { margin: 0; max-width: 360px; width: 100%; }
.nast-form .nkl-text { margin: 0; }
.nast-qr { width: 200px; height: 200px; padding: 10px; border-radius: var(--r-s); background: #fff; }
.nast-qr svg { display: block; width: 100%; height: 100%; }
.nast-akce { display: flex; gap: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; overflow-wrap: anywhere; }
.prihlaseni-karta label .napoveda { font-size: 12px; font-weight: 400; color: var(--slabe); }
@media (max-width: 860px) {
  .nast-form label, .nast-form .chyba-formulare { max-width: none; }
  .nast-form > .tlacitko, .nast-form form > .tlacitko { width: 100%; min-height: 46px; }
}

/* ---------- světlý vzhled: co se nedá vyjádřit proměnnými ---------- */
:root[data-vzhled="svetly"] .zare span { opacity: .16; }
:root[data-vzhled="svetly"] .zare span:nth-child(3) { opacity: .1; }
:root[data-vzhled="svetly"] .kalk-polozka.top .kalk-zisk { background: linear-gradient(90deg, #b07800, #8a5c00); -webkit-background-clip: text; background-clip: text; }
:root[data-vzhled="svetly"] .formular-dialog, :root[data-vzhled="svetly"] .toast, :root[data-vzhled="svetly"] .bublina,
:root[data-vzhled="svetly"] .podmenu, :root[data-vzhled="svetly"] .nkl-hromadne { box-shadow: 0 20px 50px -12px rgba(20, 20, 40, .28); }
:root[data-vzhled="svetly"] .formular-dialog::backdrop, :root[data-vzhled="svetly"] .kalk-okno::backdrop { background: rgba(20, 20, 40, .35); }