/*
  Vzhľad: hviezdna mapa, nie nástenka. Tenké čiary prstencov s popisom na
  čiare, jemné krížiky namiesto bodkovanej mriežky, karty ako papierové
  štítky s tlmenými farbami oblastí.

  Písma (Tomáš 2026-09-28: pôvodný vzhľad pôsobil ako šablóna):
  Bricolage Grotesque na texty, má charakter aj v malej veľkosti;
  DM Mono na dátumy, počítadlá a popisy, všetko, čo sa číta ako údaj.

  Farby sú len tokeny. Svetlý a tmavý režim sa líšia iba hodnotami v
  :root[data-tema], nikde inde v súbore nie je natvrdo zapísaná farba plochy.
*/

:root,
:root[data-tema="tmava"] {
  --pozadie: #0e0f11;
  --panel: #17191d;
  --panel-2: #1f2126;
  --text: #edebe6;
  --tlmene: #8d8a83;
  --ciara: rgba(237, 235, 230, .09);
  --ciara-silna: rgba(237, 235, 230, .2);
  --akcent: #f2c14e;
  --akcent-text: #f2c14e;
  --akcent-ciara: rgba(242, 193, 78, .5);
  --akcent-plocha: rgba(242, 193, 78, .055);
  --hotove: #5fd3a5;
  --hori: #ef5b4c;
  --na-farbe: #17150f;
  --karta-bez: #262930;
  --karta-bez-text: #edebe6;
  --tien: 0 6px 18px rgba(0, 0, 0, .45);
  --tien-velky: 0 18px 44px rgba(0, 0, 0, .6);
  --kalendar: dark;
  --krizik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 21v6M21 24h6' stroke='%23edebe6' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");

  /* Paleta oblastí. Kľúče sú v logika.js (PALETA) aj v databáze (bluma_oblasti.farba). */
  --p-terakota: #e98a5e;
  --p-salvia: #5cc7a0;
  --p-levandula: #a594f2;
  --p-okra: #e8c25a;
  --p-more: #6fa8e6;
  --p-ruza: #e585ad;
  --p-oliva: #a3c062;
  --p-koral: #e86f5f;
  --p-piesok: #cfab86;
  --p-bridlica: #97a3b4;
}

:root[data-tema="svetla"] {
  --pozadie: #f3f0e8;
  --panel: #fffdf8;
  --panel-2: #f7f4ec;
  --text: #1c1b18;
  --tlmene: #77746c;
  --ciara: rgba(28, 27, 24, .1);
  --ciara-silna: rgba(28, 27, 24, .24);
  --akcent: #f2b83a;
  --akcent-text: #9a6400;
  --akcent-ciara: rgba(201, 138, 18, .6);
  --akcent-plocha: rgba(242, 184, 58, .1);
  --hotove: #1c9468;
  --hori: #d8412f;
  --na-farbe: #1c1b18;
  --karta-bez: #fffdf8;
  --karta-bez-text: #1c1b18;
  --tien: 0 1px 2px rgba(28, 27, 24, .08), 0 4px 14px rgba(28, 27, 24, .07);
  --tien-velky: 0 16px 40px rgba(28, 27, 24, .18);
  --kalendar: light;
  --krizik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 21v6M21 24h6' stroke='%231c1b18' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");

  --p-terakota: #f3a47e;
  --p-salvia: #82d4b5;
  --p-levandula: #bfb3f6;
  --p-okra: #f0cf78;
  --p-more: #9dc5f1;
  --p-ruza: #f3aac8;
  --p-oliva: #c2d98f;
  --p-koral: #f29a8e;
  --p-piesok: #e2c7a8;
  --p-bridlica: #bcc5d2;
}

:root {
  --pismo: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pismo-udaj: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --okraj-l: calc(16px + env(safe-area-inset-left));
  --okraj-p: calc(16px + env(safe-area-inset-right));
  --okraj-h: calc(12px + env(safe-area-inset-top));
  --okraj-d: calc(16px + env(safe-area-inset-bottom));
}

/* V appke na ploche iPhonu kreslí iOS pod stavovú lištu rozmazaný prechod,
   ktorý siaha asi 35 bodov pod ňu. Horná lišta sa preto posunie pod neho.
   Plátno ide ďalej až po okraj. Tomáš 2026-09-28 na telefóne: pri 12 px bol
   rozmazaný nápis aj tlačidlá, pri 46 px ostré, ale príliš nízko. Mimo plochy
   sa nič nemení. */
:root.ios-plocha {
  --okraj-h: calc(36px + env(safe-area-inset-top));
}

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--pozadie);
  color: var(--text);
  font-family: var(--pismo);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s;
}

button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--ciara-silna);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

button.tiche { border-color: transparent; color: var(--tlmene); }
button.nebezpecne { color: var(--hori); }

/* Údaj: dátumy, počty, popisy prstencov. */
.udaj {
  font-family: var(--pismo-udaj);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- plátno ---------- */

.platno {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  background-image: var(--krizik);
}

.platno:active { cursor: grabbing; }

.svet {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.prstenec {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--ciara-silna);
  box-sizing: border-box;
  pointer-events: none;
  transition: width .5s, height .5s, left .5s, top .5s;
}

.prstenec.raz { border-style: dashed; border-color: var(--ciara-silna); }

.prstenec.teraz {
  border-color: var(--akcent-ciara);
  background: var(--akcent-plocha);
}

/* Popis sedí priamo na čiare prstenca a prerušuje ju. */
.prstenec-popis {
  position: absolute;
  left: 0;
  z-index: 5;
  transform: translate(-50%, -50%);
  padding: 0 8px;
  background: var(--pozadie);
  font-family: var(--pismo-udaj);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tlmene);
  white-space: nowrap;
  pointer-events: none;
  transition: top .5s, background-color .25s;
}

.prstenec-popis.teraz { color: var(--akcent-text); }

/* ---------- karta ---------- */

.karta {
  --prach: 0;
  --zona: 1;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 11px 9px;
  border-radius: 10px;
  background-color: var(--farba);
  background-size: cover;
  background-position: center;
  color: var(--karta-bez-text);
  cursor: pointer;
  box-shadow: var(--tien);
  opacity: calc(var(--zona) * (1 - .6 * var(--prach)));
  transform: scale(calc(1 - .25 * var(--prach)));
  filter: grayscale(var(--prach));
  transition:
    left .5s cubic-bezier(.2, .8, .2, 1),
    top .5s cubic-bezier(.2, .8, .2, 1),
    width .25s, height .25s,
    opacity .3s, transform .3s;
}

/* Čím ďalej od dneška, tým tichšia karta. Dnes je vždy naplno. */
.karta.z-tyzden { --zona: .72; }
.karta.z-raz { --zona: .45; }

.karta.farebna { color: var(--na-farbe); }
.karta:not(.farebna):not(.s-obrazkom) { box-shadow: var(--tien), inset 0 0 0 1px var(--ciara); }

.karta.ta {
  z-index: 9999 !important;
  cursor: grabbing;
  opacity: 1;
  filter: none;
  transform: scale(1.04) rotate(-1.2deg);
  box-shadow: var(--tien-velky);
  transition: width .25s, height .25s, transform .15s;
}

.karta.vybrana { opacity: 1; outline: 2px solid var(--text); outline-offset: 3px; }

.karta.odlet {
  opacity: 0;
  transform: scale(.3) rotate(8deg);
  transition: opacity .28s, transform .28s;
}

.karta-text {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: -.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.karta[data-vaha="1"] .karta-text { font-size: 13px; -webkit-line-clamp: 2; }
.karta[data-vaha="3"] .karta-text { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }

.karta.s-obrazkom { justify-content: flex-end; color: #fff; }
.karta.s-obrazkom .karta-text { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* Termín: údaj s bodkou, nie bublina. Bodka zčervenie, keď horí. */
.karta-termin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--pismo-udaj);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .78;
}

.karta-termin::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.karta-termin.hori { opacity: 1; font-weight: 500; }
.karta-termin.hori::before { background: var(--hori); opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.karta.s-obrazkom .karta-termin { order: -1; margin-bottom: auto; }

/* ---------- horná lišta ---------- */

.horna-lista {
  position: fixed;
  z-index: 200;
  top: var(--okraj-h);
  left: var(--okraj-l);
  right: var(--okraj-p);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.horna-lista > * { pointer-events: auto; }

.znacka {
  margin: 0 auto 0 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--text);
}

.znacka span {
  font-family: var(--pismo-udaj);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tlmene);
  margin-left: 8px;
}

.pocitadlo {
  margin: 0;
  font-family: var(--pismo-udaj);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akcent-text);
  pointer-events: none;
}

.pocitadlo span { margin-left: 4px; }
.pocitadlo.plno { color: var(--hori); }

.napoveda {
  position: fixed;
  top: calc(var(--okraj-h) + 40px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 14px;
  color: var(--tlmene);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- lišta nástrojov a kopa ---------- */

.ovladanie {
  position: fixed;
  z-index: 200;
  left: var(--okraj-l);
  bottom: var(--okraj-d);
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--ciara);
  box-shadow: var(--tien);
}

/* Ikony sú kreslené, nie znaky: znak ako ☰ má v každom písme inú výšku
   a nikdy nesedí presne na strede. */
.nastroj {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  color: var(--text);
}

.nastroj:hover { background: var(--panel-2); }

.nastroj svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nastroj.hlavne { background: var(--akcent); color: var(--na-farbe); }
.nastroj.hlavne svg { width: 22px; height: 22px; stroke-width: 2.4; }

.nastroj.maly { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ciara); background: var(--panel); }
.nastroj.maly svg { width: 17px; height: 17px; }

:root[data-tema="svetla"] .ikona-slnko,
:root[data-tema="tmava"] .ikona-mesiac { display: none; }

/* Kopa vyzerá ako stoh odložených kariet. */
.kopa {
  position: fixed;
  z-index: 200;
  right: var(--okraj-p);
  bottom: var(--okraj-d);
  width: 76px;
  height: 64px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ciara-silna);
  border-radius: 10px;
  background: var(--panel);
  /* Dve karty pod vrchnou: každá je výplň a o pixel väčší obrys za ňou. */
  box-shadow:
    4px -4px 0 -1px var(--panel-2), 4px -4px 0 0 var(--ciara-silna),
    8px -8px 0 -1px var(--panel-2), 8px -8px 0 0 var(--ciara),
    var(--tien);
  transition: transform .15s, border-color .15s, background-color .15s;
}

.kopa-pocet { font-family: var(--pismo-udaj); font-size: 20px; font-weight: 500; line-height: 1.1; color: var(--hotove); }
.kopa small { font-family: var(--pismo-udaj); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tlmene); }

.kopa.ciel { transform: scale(1.1); border-color: var(--hotove); }
.kopa.pulz { animation: pulz .45s ease-out; }

@keyframes pulz {
  40% { transform: scale(1.14); border-color: var(--hotove); }
}

.hlaska {
  position: fixed;
  left: 50%;
  bottom: calc(var(--okraj-d) + 78px);
  transform: translate(-50%, 8px);
  max-width: calc(100% - 32px);
  padding: 10px 15px;
  border-radius: 10px;
  background: var(--text);
  color: var(--pozadie);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20000;
}

.hlaska.vidno { opacity: 1; transform: translate(-50%, 0); }

/* ---------- spodný list: editor, otázka, hotové ---------- */

.list {
  position: fixed;
  left: 50%;
  bottom: var(--okraj-d);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(500px, calc(100% - 20px));
  max-height: 72vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--ciara);
  box-shadow: var(--tien-velky);
  z-index: 10000;
}

.list textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: 600 21px/1.25 var(--pismo);
  letter-spacing: -.015em;
}

.list textarea::placeholder { color: var(--tlmene); }

.riadok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.stitok {
  min-width: 70px;
  font-family: var(--pismo-udaj);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tlmene);
}

.cip { padding: 6px 11px; font-size: 13.5px; }

.cip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--farba);
  box-shadow: inset 0 0 0 1px var(--ciara);
}

.cip.zvolena { background: var(--farba); border-color: transparent; color: var(--na-farbe); }
.cip.zvolena[data-o=""] { background: var(--panel-2); border-color: var(--ciara-silna); color: var(--text); }
.cip.zvolena::before { background: currentColor; opacity: .45; box-shadow: none; }

.prepinac { display: flex; flex-wrap: wrap; gap: 4px; }
.prepinac button, .datum-volba { padding: 6px 11px; font-size: 13.5px; }
.prepinac .zvolena { background: var(--text); color: var(--pozadie); border-color: transparent; }

/* Dátum je tlačidlo, cez ktoré leží neviditeľné pole. Ťuknutie na mobile
   otvorí systémový kalendár, na počítači ho otvorí showPicker(). */
.datum-volba {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--ciara-silna);
  border-radius: 9px;
  font-weight: 500;
  cursor: pointer;
}

.datum-volba input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  color-scheme: var(--kalendar);
}

.datum-volba.zvolena { background: var(--text); color: var(--pozadie); border-color: transparent; }

.akcie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--ciara);
}

.akcie .nebezpecne { color: var(--hori); }
.akcie .hotovo { color: var(--hotove); }
.akcie .potvrd { margin-left: auto; padding: 10px 22px; background: var(--text); border-color: transparent; color: var(--pozadie); font-weight: 600; }
#otazka .akcie { justify-content: flex-end; }

.list h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.popis { margin: -6px 0 0; font-size: 14px; color: var(--tlmene); }
.volby { display: flex; flex-wrap: wrap; gap: 6px; }
.volba { padding: 9px 13px; }
.volba.tiche { border-color: var(--ciara); }

.hlavicka { display: flex; align-items: center; justify-content: space-between; }

.zoznam { list-style: none; margin: 0; padding: 0; }

.zoznam li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--ciara);
  font-size: 15px;
}

.zoznam .bodka { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.zoznam .nazov { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoznam .kedy { font-family: var(--pismo-udaj); color: var(--tlmene); font-size: 12px; }
.zoznam .prazdne { color: var(--tlmene); border: 0; }

/* ---------- zoznamový pohľad ---------- */

.zoznam-pohlad {
  position: fixed;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--okraj-h) + 48px) var(--okraj-p) calc(var(--okraj-d) + 100px) var(--okraj-l);
  background: var(--pozadie);
}

.zoznam-vnutro { max-width: 640px; margin: 0 auto; }

.zoradenie { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.cip-zoradenie {
  padding: 6px 10px;
  font-family: var(--pismo-udaj);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cip-zoradenie.zvolena { background: var(--text); color: var(--pozadie); border-color: transparent; }

.zoznam-pohlad h3 {
  margin: 26px 0 8px;
  font-family: var(--pismo-udaj);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tlmene);
}

.ulohy { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ciara); }

.ulohy li {
  --prach: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--ciara);
  cursor: pointer;
  opacity: calc(1 - .55 * var(--prach));
}

.ulohy li:hover { background: var(--panel); }
.ulohy li.vybrana { background: var(--panel); }

.ulohy .znak {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--farba) center / cover;
  box-shadow: inset 0 0 0 1px var(--ciara);
}

.ulohy .znak.s-obrazkom { width: 36px; height: 36px; border-radius: 7px; }

.ulohy .nazov {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ulohy .karta-termin { flex: none; align-self: center; color: var(--tlmene); }
.ulohy .karta-termin.hori { color: var(--hori); }
.ulohy .vaha { flex: none; font-size: 8px; letter-spacing: 2px; color: var(--tlmene); }
.zoznam-pohlad .prazdne { margin-top: 32px; color: var(--tlmene); text-align: center; }

/* ---------- nastavenia ---------- */

.nastavenia {
  position: fixed;
  inset: 0;
  z-index: 15000;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--okraj-h) + 4px) var(--okraj-p) calc(var(--okraj-d) + 24px) var(--okraj-l);
  background: var(--pozadie);
}

.nastavenia-vnutro { max-width: 560px; margin: 0 auto; }

.nastavenia-hlavicka {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 10px;
  background: var(--pozadie);
}

.nastavenia-hlavicka h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.nastavenia h3 {
  margin: 28px 0 10px;
  font-family: var(--pismo-udaj);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tlmene);
}

.nastavenia .popis { margin: 0 0 10px; }

.oblasti { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ciara); }
.oblasti > li { border-bottom: 1px solid var(--ciara); padding: 8px 0; }

.oblast-riadok { display: flex; align-items: center; gap: 8px; }
.oblast-riadok .pole { flex: 1; min-width: 0; padding: 8px 10px; background: transparent; border-color: transparent; font-weight: 500; }
.oblast-riadok .pole:hover { border-color: var(--ciara); }
.oblast-riadok .pole:focus { border-color: var(--ciara-silna); background: var(--panel-2); }

.vzorka {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--ciara);
  background: var(--farba);
}

.vzorka.zvolena { outline: 2px solid var(--text); outline-offset: 2px; }

.oblast-riadok .pocet { flex: none; min-width: 22px; text-align: right; font-family: var(--pismo-udaj); font-size: 11px; color: var(--tlmene); }
.oblast-riadok .nastroj.maly { width: 30px; height: 30px; border: 0; background: transparent; }
.oblast-riadok .nastroj.maly:disabled { opacity: .25; cursor: default; }
.oblast-riadok .tiche { padding: 6px 8px; font-size: 13px; }

.paleta { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px 34px; }

.skryte-oblasti .oblast-riadok .nazov { flex: 1; color: var(--tlmene); }

.volba-temy { display: flex; gap: 4px; }
.volba-temy button { flex: 1; padding: 9px 8px; font-size: 13.5px; }
.volba-temy .zvolena { background: var(--text); color: var(--pozadie); border-color: transparent; }

/* ---------- prihlásenie, načítanie, stav siete ---------- */

.pole {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ciara-silna);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: 400 16px var(--pismo);
  outline: 0;
}

.pole:focus { border-color: var(--text); }
.riadok .pole { flex: 1 1 200px; width: auto; }

.prihlasenie,
.nacitava {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--pozadie);
}

.nacitava { font-family: var(--pismo-udaj); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tlmene); }

.prihlasenie-vnutro { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.prihlasenie h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.prihlasenie form { display: flex; flex-direction: column; gap: 8px; }
.prihlasenie .potvrd { padding: 12px; background: var(--text); color: var(--pozadie); border-color: transparent; font-weight: 600; }
.prihlasenie .popis { margin: 0; }

.stav-siete {
  position: fixed;
  z-index: 200;
  top: calc(var(--okraj-h) + 42px);
  right: var(--okraj-p);
  max-width: min(320px, calc(100% - 32px));
  margin: 0;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--hori);
  font-size: 13px;
  color: var(--text);
}

/* Mediálne dotazy patria na koniec súboru, inak ich neskorší kód ticho prebije. */

@media (hover: none) {
  .nastroj:hover { background: transparent; }
  .nastroj.hlavne:hover { background: var(--akcent); }
  .ulohy li:hover { background: transparent; }
}

@media (max-width: 480px) {
  .stitok { min-width: 100%; }
  .znacka span { display: none; }
}