/* ═══════════════════════════════════════════════════════════════════════════
   CHRONOS EDUCATION — vzdelávacia platforma
   Spoločný vzhľad. Farby a písma sú prevzaté z chronoseducation.sk, aby
   platforma pôsobila ako pokračovanie stránky, nie ako cudzí systém.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:     #0c0c0c;
  --dark:      #141414;
  --mid:       #1e1e1e;
  --card:      #242424;
  --white:     #f4f1eb;
  --gold:      #c49a3c;
  --gold2:     #e8b84b;
  --gold-pale: #f5e8c8;
  --gold-dim:  rgba(196, 154, 60, 0.15);
  --red:       #b33020;
  --border:    rgba(196, 154, 60, 0.2);
  --text:      rgba(244, 241, 235, 0.85);
  --muted:     rgba(244, 241, 235, 0.5);

  --radius: 4px;
  --sirka: 900px;
}

/* Zelená pre "hotovo" — jediná farba mimo pôvodnej palety. Zlatá tu nestačí,
   lebo zlatá je farba značky a používa sa všade; odškrtnutie musí byť
   rozoznateľné na prvý pohľad. */
:root { --zelena: #4a8f52; --zelena-dim: rgba(74, 143, 82, 0.15); }

html { scroll-behavior: smooth; }

body {
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }

a { color: var(--gold2); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ─── ROZLOŽENIE ─────────────────────────────────────────────────────────── */

.obal { max-width: var(--sirka); margin: 0 auto; padding: 0 20px; }
.obal-siroky { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.hlavicka {
  border-bottom: 1px solid var(--border);
  background: var(--dark);
  position: sticky; top: 0; z-index: 50;
}
.hlavicka-vnutro {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; flex-wrap: wrap;
}
.znacka {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.02em; text-decoration: none;
}
.znacka span { color: var(--white); font-weight: 400; }
.hlavicka-vpravo { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hlavicka-meno { color: var(--muted); font-size: 0.9rem; }

main { padding: 40px 0 80px; }

/* ─── KARTY ──────────────────────────────────────────────────────────────── */

.karta {
  background: var(--mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.karta + .karta { margin-top: 16px; }
.karta-tmava { background: var(--dark); }

/* ─── TLAČIDLÁ ───────────────────────────────────────────────────────────── */

.tl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none; line-height: 1.2;
}
.tl:hover { text-decoration: none; }
.tl:disabled { opacity: 0.45; cursor: not-allowed; }

.tl-hlavne { background: var(--gold); color: var(--black); }
.tl-hlavne:hover:not(:disabled) { background: var(--gold2); }

.tl-obrys { background: transparent; color: var(--gold2); border-color: var(--border); }
.tl-obrys:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-dim); }

.tl-tiche { background: transparent; color: var(--muted); padding: 8px 12px; }
.tl-tiche:hover:not(:disabled) { color: var(--white); }

.tl-cervene { background: transparent; color: #e07a6a; border-color: rgba(179, 48, 32, 0.4); }
.tl-cervene:hover:not(:disabled) { background: rgba(179, 48, 32, 0.15); }

.tl-male { padding: 6px 12px; font-size: 0.85rem; }

/* ─── FORMULÁRE ──────────────────────────────────────────────────────────── */

.pole { margin-bottom: 18px; }
.pole label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.02em; }
.pole .napoveda { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem;
  background: var(--black); color: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select { cursor: pointer; }

.pole-kod input {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 1.2rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase;
}

.dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .dvojica { grid-template-columns: 1fr; } }

.zaskrtnutie { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.92rem; }
.zaskrtnutie input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }

/* ─── HLÁSENIA ───────────────────────────────────────────────────────────── */

.hlasenie { padding: 12px 16px; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 18px; }
.hlasenie-chyba { background: rgba(179, 48, 32, 0.12); border: 1px solid rgba(179, 48, 32, 0.4); color: #e79c8e; }
.hlasenie-ok { background: var(--zelena-dim); border: 1px solid rgba(74, 143, 82, 0.4); color: #8fd097; }
.hlasenie-info { background: var(--gold-dim); border: 1px solid var(--border); color: var(--gold-pale); }
.hlasenie:empty { display: none; }

/* ─── UKAZOVATEĽ PROGRESU ────────────────────────────────────────────────── */

.progres { display: flex; align-items: center; gap: 12px; }
.progres-drazka {
  flex: 1; height: 6px; background: var(--card); border-radius: 3px; overflow: hidden;
}
.progres-vypln {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 3px; transition: width 0.5s ease;
}
.progres-cislo { font-size: 0.85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ─── ZOZNAM MODULOV (bočný panel v kurze) ───────────────────────────────── */

.kurz-mriezka { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .kurz-mriezka { grid-template-columns: 1fr; } }

.panel-modulov { position: sticky; top: 88px; }
.panel-modulov ol { list-style: none; }

.polozka-modulu {
  display: block; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid transparent; color: var(--text); cursor: pointer;
  background: none; width: 100%; text-align: left; font-family: inherit; font-size: 0.92rem;
  transition: background 0.15s, border-color 0.15s;
}
.polozka-modulu:hover { background: var(--mid); text-decoration: none; }
.polozka-modulu[aria-current="true"] { background: var(--mid); border-color: var(--border); color: var(--white); }
.polozka-modulu .cislo { color: var(--gold); font-weight: 700; margin-right: 8px; }
.polozka-modulu .stav { float: right; font-size: 0.8rem; color: var(--muted); }
.polozka-modulu.hotovy .stav { color: var(--zelena); }

/* ─── KOMPONENTY MODULU ──────────────────────────────────────────────────── */

/* Modul je zoznam položiek, nie jedna dlhá stránka. Účastník vidí na prvý
   pohľad, čo ho čaká, a rozbalí si to, na čom práve je. */
/* Položky musia byť od seba jasne odlíšené. Pri desiatich pod sebou splývali
   do jednej plochy a nedalo sa rýchlo prebehnúť očami, kde jedna končí. */
.komponent {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--mid); margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.komponent:hover { border-color: rgba(196, 154, 60, 0.4); }
.komponent.rozbaleny { border-color: var(--gold); }
.komponent.hotovy { border-left: 3px solid var(--zelena); }

/* Riadok nad zoznamom — napovie, že sa položky dajú otvárať. */
.ovladanie-zoznamu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); font-size: 0.85rem;
}

.polozka {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 20px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; color: var(--white); text-align: left;
  transition: background 0.15s;
}
.polozka:hover { background: var(--card); text-decoration: none; }
.polozka .ikona { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
/* Rovnaké pravidlá platia aj pre hlavičku oznamu — tá používa tie isté triedy.
   Bez toho sa dátum lepil rovno na nadpis. */
.polozka .nazov, .oznam-hlava .nazov { display: block; font-weight: 600; }
.polozka .druh, .oznam-hlava .druh {
  display: block; font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px;
}
.polozka .stred, .oznam-hlava .stred { flex: 1; min-width: 0; }
.polozka .znacka { flex-shrink: 0; color: var(--muted); font-size: 0.85rem; }
.komponent.hotovy .polozka .znacka { color: var(--zelena); }

/* Šípka v rámčeku, aby čítala ako tlačidlo a nie ako ozdoba. */
.polozka .sipka {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  transition: transform 0.2s, border-color 0.15s, color 0.15s;
}
.polozka:hover .sipka { border-color: var(--gold); color: var(--gold2); }
.komponent.rozbaleny .polozka .sipka { transform: rotate(90deg); border-color: var(--gold); color: var(--gold2); }

/* Materiál, ktorý sa dá aj otvoriť aj stiahnuť — dve akcie v jednom riadku. */
.polozka-riadok { display: flex; align-items: stretch; }
.polozka-riadok .polozka { flex: 1; min-width: 0; }
.stiahnut {
  display: flex; align-items: center; padding: 0 22px;
  border-left: 1px solid var(--border); color: var(--muted);
  font-size: 1.1rem; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.stiahnut:hover { background: var(--card); color: var(--gold2); text-decoration: none; }

.komponent-telo { padding: 4px 20px 22px; border-top: 1px solid var(--border); }
.komponent-telo[hidden] { display: none; }

.komponent-hlava {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.komponent-hlava .odznak-hotovo { margin-left: auto; color: var(--zelena); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }

.pod-videom {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px;
}

.komponent-text { color: var(--text); }
.komponent-text > * + * { margin-top: 0.9em; }
.komponent-text ul, .komponent-text ol { padding-left: 1.4em; }
.komponent-text li + li { margin-top: 0.4em; }
.komponent-text strong { color: var(--white); }
.komponent-text h3, .komponent-text h4 { color: var(--white); margin-top: 1.4em; }
.komponent-text img { max-width: 100%; height: auto; border-radius: var(--radius); }

/*
 * Text napísaný v administrácii sa zobrazí tak, ako bol napísaný — vrátane
 * prázdnych riadkov a odsadenia. Bez toho HTML zlepí všetko do jedného odseku.
 * Dlhé riadky sa aj tak zalamujú, takže na mobile nič nevytŕča.
 */
.so-zlomami { white-space: pre-wrap; overflow-wrap: break-word; }

.komponent-nadpis { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold-pale); }

.ramik-videa {
  position: relative; padding-bottom: 56.25%; height: 0;
  background: var(--black); border-radius: var(--radius); overflow: hidden;
}
.ramik-videa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.obrazok-komponentu { width: 100%; border-radius: var(--radius); display: block; }
.popisok { font-size: 0.85rem; color: var(--muted); margin-top: 8px; font-style: italic; }

.odkaz-karta {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--dark); color: var(--white); text-decoration: none;
}
.odkaz-karta:hover { border-color: var(--gold); text-decoration: none; }
.odkaz-karta .ikona { font-size: 1.4rem; }
/* Názov nesmie prerásť nadpis položky, v ktorej karta leží — inak sa
   z podkladu stane hlavná vec na obrazovke. Popis ide na vlastný riadok. */
.odkaz-karta .nazov { display: block; font-weight: 700; color: var(--gold-pale); }
.odkaz-karta .popis { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--muted); }

/* ─── ÚLOHY ──────────────────────────────────────────────────────────────── */

.zadanie {
  background: var(--dark); border-left: 3px solid var(--gold);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 18px;
}
/* Pokyn, ako pomenovať odovzdaný súbor. Musí byť vidieť skôr, než človek
   klikne na výber súboru — potom už je neskoro. */
.pokyn-nazvu {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.88rem; color: var(--muted);
}
.pokyn-nazvu strong { color: var(--gold-pale); font-size: 0.95rem; }

.pripojene-subory { list-style: none; margin-top: 10px; }
.pripojene-subory li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--dark); border-radius: var(--radius);
  font-size: 0.88rem; margin-bottom: 6px;
}
.pripojene-subory .velkost { color: var(--muted); margin-left: auto; font-size: 0.8rem; }

.hodnotenie-box {
  background: var(--zelena-dim); border: 1px solid rgba(74, 143, 82, 0.35);
  border-radius: var(--radius); padding: 16px; margin-top: 16px;
}
.hodnotenie-box .body { font-size: 1.3rem; font-weight: 700; color: var(--gold2); font-family: 'Playfair Display', serif; }

/* ─── TESTY ──────────────────────────────────────────────────────────────── */

.otazka { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
.otazka:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.otazka-text { font-weight: 600; margin-bottom: 12px; }
.otazka-cislo { color: var(--gold); margin-right: 8px; }
/* Otázka sa uznáva celá. Pri viacerých správnych odpovediach nestačí trafiť
   jednu — bez tejto značky by čiastočná odpoveď vyzerala ako uznaná. */
.otazka-znacka {
  margin-left: 8px; font-size: 0.75rem; font-weight: 500;
  color: var(--red); white-space: nowrap;
}

.moznost {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s;
}
.moznost:hover { border-color: var(--gold); }
.moznost input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.moznost.spravna { border-color: var(--zelena); background: var(--zelena-dim); }
.moznost.zla { border-color: var(--red); background: rgba(179, 48, 32, 0.1); }

.vysvetlenie {
  font-size: 0.88rem; color: var(--muted); margin-top: 8px;
  padding-left: 14px; border-left: 2px solid var(--border);
}

/* ─── PRECHOD MEDZI MODULMI ──────────────────────────────────────────────── */

.prechody { display: flex; gap: 12px; justify-content: space-between; }
.prechod {
  flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 20px; text-align: left; max-width: 48%;
}
.prechod-vpred { align-items: flex-end; text-align: right; }
.prechod .smer {
  font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.prechod .nazov {
  font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.prechod:hover .smer { color: var(--gold2); }

@media (max-width: 600px) {
  .prechody { flex-direction: column; }
  .prechod { max-width: 100%; width: 100%; align-items: flex-start; text-align: left; }
}

/* ─── OZNAMY ─────────────────────────────────────────────────────────────── */

.oznam {
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--radius); background: var(--mid);
  margin-bottom: 10px; overflow: hidden;
}
.oznam-hlava {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; color: var(--white); text-align: left;
}
.oznam-hlava:hover { background: var(--card); }
.oznam-hlava .sipka {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  transition: transform 0.2s, border-color 0.15s, color 0.15s;
}
.oznam-hlava:hover .sipka { border-color: var(--gold); color: var(--gold2); }
.oznam.rozbaleny .sipka { transform: rotate(90deg); border-color: var(--gold); color: var(--gold2); }

.oznam-telo { padding: 0 18px 18px 50px; color: var(--text); }
.oznam-telo[hidden] { display: none; }

/* ─── OCENENIE PO MODULE ─────────────────────────────────────────────────── */

.zaves {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.zaves.viditelny { opacity: 1; pointer-events: auto; }

.ocenenie {
  background: var(--mid); border: 1px solid var(--gold);
  border-radius: 8px; padding: 40px 32px; max-width: 460px; width: 100%;
  text-align: center; transform: scale(0.94); transition: transform 0.3s;
}
.zaves.viditelny .ocenenie { transform: scale(1); }
.ocenenie .ikona { font-size: 4rem; line-height: 1; margin-bottom: 16px; display: block; }
.ocenenie .titul {
  font-family: 'Playfair Display', serif; font-size: 1.7rem; color: var(--gold2); margin-bottom: 12px;
}
.ocenenie .hlaska { color: var(--text); font-size: 1.02rem; margin-bottom: 22px; }
/* Konfety kreslíme cez celú obrazovku, ale nesmú prekážať v klikaní. */
.konfety {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 120;
}

.ocenenie .zvuk {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; padding: 6px;
}
.ocenenie .zvuk:hover { color: var(--gold2); }
.ocenenie { position: relative; }

.ocenenie .body-zisk {
  display: inline-block; padding: 6px 16px; border: 1px solid var(--border);
  border-radius: 100px; color: var(--gold-pale); font-size: 0.9rem; margin-bottom: 26px;
}

/* ─── TABUĽKY (admin) ────────────────────────────────────────────────────── */

.tabulka-obal { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Tlačidlá v poslednom stĺpci. Flex tu nie, rozbil by zarovnanie riadkov. */
.akcie-bunka .tl + .tl { margin-left: 8px; }
th {
  background: var(--dark); color: var(--gold-pale); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:hover { background: var(--mid); }
tbody tr:last-child td { border-bottom: none; }

/* Zarovnanie musí sedieť v hlavičke aj v bunke, inak tabuľka pôsobí rozsypane.
   Čísla doprava, stav do stredu, text doľava. */
th.cislo, td.cislo { text-align: right; font-variant-numeric: tabular-nums; }
th.stred, td.stred { text-align: center; }
td.stred .tl { margin: 0 auto; }

.stav-bodka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.stav-odovzdane { background: var(--zelena); }
.stav-chyba { background: var(--red); }
.stav-caka { background: var(--gold); }

/* ─── ZÁLOŽKY ────────────────────────────────────────────────────────────── */

.zalozky { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.zalozka {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 12px 18px; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.zalozka:hover { color: var(--white); }
.zalozka[aria-selected="true"] { color: var(--gold2); border-bottom-color: var(--gold); }

/* ─── EDITOR MODULU ──────────────────────────────────────────────────────── */

/* Kostra kurzu vľavo, obsah vpravo. */
.admin-mriezka { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .admin-mriezka { grid-template-columns: 1fr; } .admin-kostra { display: none; } }

.admin-kostra { position: sticky; top: 88px; }
.admin-kostra h2 {
  font-size: 0.82rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 10px; font-family: 'Mulish', sans-serif;
}
.admin-kostra ol { list-style: none; }

/* Presúvanie modulov ťahaním */
.modul-karta { transition: opacity .15s, border-color .15s, transform .15s; }
.modul-karta.tahany { opacity: .4; }
.modul-karta.ciel { border-color: var(--gold); transform: translateY(2px); }
.uchyt {
  cursor: grab; color: var(--muted); font-size: 1.1rem; padding: 0 2px;
  user-select: none;
}
.uchyt:active { cursor: grabbing; }
.modul-karta:hover .uchyt { color: var(--gold); }

.editor-komponent {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--mid); margin-bottom: 12px;
}
.editor-hlava {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--dark); border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.editor-hlava .typ {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.editor-hlava .nahlad { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-hlava .nastroje { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.editor-telo { padding: 18px; }
.editor-telo[hidden] { display: none; }

.pridat-komponent {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-top: 16px;
}
.pridat-komponent button {
  background: var(--dark); border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 0.85rem; padding: 14px 8px;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pridat-komponent button:hover { border-color: var(--gold); color: var(--gold2); }
.pridat-komponent .ikona { font-size: 1.3rem; }

/* Paleta ikon k oceneniu */
.paleta-ikon { display: flex; flex-wrap: wrap; gap: 6px; }
.ikona-volba {
  width: 40px; height: 40px; font-size: 1.25rem; line-height: 1;
  background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.ikona-volba:hover { border-color: var(--gold); transform: translateY(-2px); }
.ikona-volba.vybrana { border-color: var(--gold); background: var(--gold-dim); }

/* ─── HLÁSENIA V ROHU ────────────────────────────────────────────────────── */

.stoh-hlaseni {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.bublina {
  pointer-events: auto; cursor: pointer; max-width: 380px;
  padding: 13px 18px; border-radius: var(--radius);
  background: var(--mid); border: 1px solid var(--border);
  color: var(--text); font-size: 0.92rem; line-height: 1.5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.bublina.vidno { opacity: 1; transform: translateY(0); }
.bublina-ok { border-left: 3px solid var(--zelena); }
.bublina-chyba { border-left: 3px solid var(--red); color: #e79c8e; }
.bublina-info { border-left: 3px solid var(--gold); }

@media (max-width: 600px) {
  .stoh-hlaseni { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .bublina { max-width: none; }
}

/* ─── DIALÓG ─────────────────────────────────────────────────────────────── */

.dialog { max-width: 460px; width: 100%; }
.dialog .riadok { margin-top: 4px; }

/* ─── ZVÝRAZNENIE PO ODŠKRTNUTÍ ──────────────────────────────────────────── */

@keyframes rozsvietenie {
  0%   { border-color: var(--zelena); box-shadow: 0 0 0 0 rgba(74, 143, 82, .45); }
  40%  { border-color: var(--zelena); box-shadow: 0 0 0 7px rgba(74, 143, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 143, 82, 0); }
}
.rozsvietene { animation: rozsvietenie 1.2s ease-out; }

/* Fajka, ktorá sa nakreslí, keď sa položka odškrtne. */
@keyframes prilet {
  from { opacity: 0; transform: scale(.4) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.komponent.hotovy .znacka { animation: prilet .35s ease-out; }

/* ─── DROBNOSTI ──────────────────────────────────────────────────────────── */

.prazdno { text-align: center; padding: 60px 20px; color: var(--muted); }
.prazdno .ikona { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5; }

.stredna-karta { max-width: 460px; margin: 60px auto; }

/* ─── VSTUPNÁ STRÁNKA ────────────────────────────────────────────────────── */

/* Značka sa drží ľavého okraja a je zarovnaná s textom pod obrázkom.
   V zúženom obale by sedela na štvrtine šírky a pôsobila by, akoby jej ušla
   stránka. */
.hlavicka-vstup { padding: 0 52px; }
@media (max-width: 900px) { .hlavicka-vstup { padding: 0 24px; } }

/* Obrázok vľavo, formulár vpravo. Keď obrázok chýba, ostane pod ním prechod
   v zlatej — stránka teda nikdy nevyzerá rozbito, len skromnejšie. */
.vstup-mriezka {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; min-height: calc(100vh - 64px);
}

.vstup-obraz {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 40% 40%, rgba(196,154,60,.18), transparent 60%), var(--dark);
  display: flex; align-items: flex-end;
}
/* Obrázok je široký a kompozícia sa v ňom opakuje dvakrát. V úzkom stĺpci by
   sa stred orezal presne na spoj medzi kópiami, preto posúvame výrez doľava
   na prvú dvojicu rúk. */
.vstup-obraz img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% center; opacity: 0.9;
}
/* Tmavý prechod sprava, aby sa obrázok zlial s formulárom a nekončil hranou. */
.vstup-obraz::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,.1) 45%, var(--black) 100%);
}
.vstup-slogan {
  position: relative; z-index: 1; padding: 46px 52px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.35;
  color: var(--gold-pale); text-shadow: 0 2px 24px rgba(0,0,0,.9);
  max-width: 30ch;
}
.vstup-slogan small {
  display: block; margin-top: 12px;
  font-family: 'Mulish', sans-serif; font-size: 0.9rem;
  color: var(--muted); letter-spacing: .04em;
}

.vstup-formular { display: flex; align-items: center; padding: 40px 20px; }
.vstup-formular .karta { width: 100%; max-width: 440px; margin: 0 auto; }

@media (max-width: 900px) {
  .vstup-mriezka { grid-template-columns: 1fr; min-height: 0; }
  .vstup-obraz { height: 190px; }
  .vstup-obraz::after {
    background: linear-gradient(180deg, rgba(12,12,12,.2) 0%, var(--black) 100%);
  }
  .vstup-slogan { padding: 20px 24px; font-size: 1.1rem; }
  .vstup-slogan small { display: none; }
}

.riadok { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.riadok-koniec { margin-left: auto; }
.medzera { margin-top: 24px; }
.tichy { color: var(--muted); font-size: 0.88rem; }
.kod-text { font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.08em; color: var(--gold-pale); }

.nacitava { text-align: center; padding: 60px 20px; color: var(--muted); }

@media print {
  .hlavicka, .tl, .zalozky { display: none; }
  body { background: #fff; color: #000; }
}