:root {
  --papier: #faf7f1; --plocha: #fff; --text: #2b2620; --tlmene: #7a6f62; --ciara: #e4ddd0;
  --akcent: #8a3b12; --akcent-svetly: #f4e6dc; --ok: #2f6b3a; --ok-pozadie: #e5f1e6;
  --chyba: #a3261b; --chyba-pozadie: #fbe7e4; --upozornenie-pozadie: #fdf4d9; --podklad: #ece5d8;
  --okraj-pola: #cfc5b4; --na-akcente: #fff;
  --serif: Georgia, "Times New Roman", serif; --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papier: #1d1a17; --plocha: #27231f; --text: #ece6dc; --tlmene: #a89d8f; --ciara: #3d3730;
    --akcent: #e39162; --akcent-svetly: #3b2a20; --ok: #86c790; --ok-pozadie: #1f3323;
    --chyba: #f08a7e; --chyba-pozadie: #3a2220; --upozornenie-pozadie: #3a3219; --podklad: #322d27;
    --okraj-pola: #4a4239; --na-akcente: #1d1a17;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--akcent); }
h1, h2 { font-family: var(--serif); font-weight: normal; }
h1 small { color: var(--tlmene); font-size: .6em; }
main { max-width: 90rem; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2rem) 3rem; }
.hlavicka { display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(1rem, 3vw, 2rem); background: #2b2620; color: #faf7f1; }
.logo { font: 1.3rem var(--serif); }
.logo small { font-size: .7em; opacity: .7; }
.hlavicka .kto, .hlavicka .vpravo { margin-left: auto; font-size: .9rem; opacity: .85; }
.hlavicka .odkaz { color: #faf7f1; }
.tlmene { color: var(--tlmene); }
.panel { background: var(--plocha); border: 1px solid var(--ciara); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.panel h2 { margin-top: 0; }
.stred { max-width: 28rem; margin: 3rem auto; }
.sprava { padding: .6rem .9rem; border-radius: 4px; margin-bottom: 1rem; background: var(--upozornenie-pozadie); }
.sprava-ok { background: var(--ok-pozadie); color: var(--ok); }
.sprava-chyba { background: var(--chyba-pozadie); color: var(--chyba); }
label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; color: var(--tlmene); }
label.zaskrtavacie { flex-direction: row; align-items: center; gap: .35rem; color: var(--text); }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=file]), select, textarea {
  padding: .4rem .55rem; border: 1px solid var(--okraj-pola); border-radius: 4px; background: var(--plocha); color: var(--text);
}
button, a.tlacidlo {
  display: inline-block; padding: .45rem 1rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--akcent); color: var(--na-akcente); text-decoration: none;
}
button.druhotne { background: var(--podklad); color: var(--text); }
button.odkaz { background: none; padding: 0; color: var(--akcent); text-decoration: underline; }
.nebezpecne-text { color: var(--chyba) !important; }
.formular { display: flex; flex-direction: column; gap: .8rem; }
.riadok-formulara { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.riadok-formulara .siroke { flex: 1 1 14rem; }
.akcie { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.akcie form { margin: 0; }
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.velke { font: 2rem var(--serif); }
.tabulka-obal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .35rem .55rem; border-bottom: 1px solid var(--ciara); vertical-align: top; }
th { font-weight: 600; color: var(--tlmene); }
.cislo { text-align: right; }
.nezalamovat { white-space: nowrap; }
td.stare { color: var(--chyba); }
td.nove { color: var(--ok); }
tr.neaktivny { opacity: .55; }
.stav { font-size: .8rem; padding: 0 .4rem; border-radius: 3px; background: var(--podklad); }
.stav-platný { background: var(--ok-pozadie); color: var(--ok); }
.novy-link .riadok { display: flex; gap: .5rem; margin-top: .4rem; }
.novy-link input { flex: 1; min-width: 0; }
details summary { cursor: pointer; }

/* editor – galéria */
.filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
.filter input[type=search] { flex: 1 1 16rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; }
.karta { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--plocha);
  border: 1px solid var(--ciara); border-radius: 6px; overflow: hidden; }
.karta:hover { border-color: var(--akcent); }
.obal-nahladu { position: relative; aspect-ratio: 4 / 3; background: var(--podklad); display: flex; align-items: center; justify-content: center; }
.obal-nahladu img { width: 100%; height: 100%; object-fit: cover; }
.bez-suboru { color: var(--tlmene); font-size: .85rem; }
.odznak, .odznak-zmena { position: absolute; font-size: .75rem; padding: .05rem .4rem; border-radius: 3px; }
.odznak { right: .3rem; bottom: .3rem; background: rgba(0,0,0,.65); color: #fff; }
.odznak-zmena { left: .3rem; top: .3rem; background: #e0a100; color: #2b2620; font-weight: 600; }
.popis-karty { padding: .4rem .55rem; font-size: .85rem; }
.orezany { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tlmene); }

/* editor – prehliadač na celú obrazovku */
body.pr-otvoreny { overflow: hidden; }
.prehliadac { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 12, 10, .96); padding: 2.5rem calc(22rem + 4rem) 3rem 4rem; }
.prehliadac[hidden] { display: none; }
.prehliadac.bez-panela { padding-right: 4rem; }
.prehliadac figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.prehliadac img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; background: #fff; }
.prehliadac figcaption { color: #e8e0d4; margin-top: .7rem; text-align: center; max-width: 60rem; font-size: .95rem; }
.pr-bez-suboru { color: #cfc5b8; padding: 4rem 2rem; border: 2px dashed #5a5046; border-radius: 6px; }
.pr-zavriet, .pr-sipka { position: absolute; background: rgba(255,255,255,.08); color: #fff; border-radius: 50%;
  width: 3rem; height: 3rem; padding: 0; font-size: 1.6rem; line-height: 1; }
.pr-zavriet:hover, .pr-sipka:hover { background: rgba(255,255,255,.2); }
.pr-zavriet { top: .8rem; right: calc(22rem + .8rem); font-size: 1.2rem; }
.pr-predosly { left: .8rem; top: 50%; transform: translateY(-50%); }
.pr-dalsi { right: calc(22rem + .8rem); top: 50%; transform: translateY(-50%); }
.bez-panela .pr-zavriet, .bez-panela .pr-dalsi { right: .8rem; }
.pr-prepni { position: absolute; top: .8rem; left: .8rem; background: rgba(255,255,255,.08); color: #fff; padding: .35rem .7rem; font-size: .85rem; }
.pr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 22rem; overflow-y: auto; padding: 1rem 1.1rem;
  background: #231f1b; border-left: 1px solid #3d3730; color: #ece6dc; display: flex; flex-direction: column; gap: .55rem; }
.bez-panela .pr-panel { display: none; }
.pr-panel label { color: #b8ad9f; }
.pr-panel input, .pr-panel textarea, .pr-panel select { background: #1a1714 !important; color: #ece6dc !important;
  border-color: #4a4239 !important; color-scheme: dark; width: 100%; }
.pr-panel .chyba { border-color: #f08a7e !important; }
.pr-riadok { display: flex; gap: .6rem; }
.pr-riadok label:first-child { flex: 0 0 5rem; }
.pr-riadok label:last-child { flex: 1; }
.pr-hlavicka { display: flex; align-items: baseline; gap: .5rem; font-size: 1.05rem; }
.pr-stav { font-size: .8rem; color: #b8ad9f; margin-left: auto; }
.pr-stav.ok { color: #86c790; }
.pr-stav.chyba { color: #f08a7e; }
.pr-napoveda { font-size: .78rem; color: #8f8578; margin: .3rem 0 0; }
@media (max-width: 900px) {
  .prehliadac, .prehliadac.bez-panela { padding: 3.5rem .5rem 45vh; }
  .prehliadac.bez-panela { padding-bottom: 3rem; }
  .prehliadac img { max-height: calc(55vh - 6rem); }
  .pr-panel { top: auto; left: 0; width: auto; height: 42vh; border-left: 0; border-top: 1px solid #3d3730; }
  .pr-zavriet, .pr-dalsi { right: .8rem; }
  .pr-sipka { top: 25vh; transform: none; }
}

/* priebeh nahrávania */
.priebeh { display: flex; flex-direction: column; gap: .3rem; }
.pas { height: .7rem; background: var(--podklad); border-radius: 4px; overflow: hidden; }
.plnenie { height: 100%; width: 0; background: var(--akcent); transition: width .3s; }
.plnenie.neurcite { width: 30% !important; animation: neurcite 1.2s ease-in-out infinite alternate; }
@keyframes neurcite { from { margin-left: 0; } to { margin-left: 70%; } }
.priebeh-text { font-size: .9rem; color: var(--tlmene); }

/* načítavanie fotky: rozmazaný náhľad + točiace sa koliesko */
.nacitava { position: relative; }
.nacitava::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem;
  border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); animation: tocenie .8s linear infinite; pointer-events: none;
}
@keyframes tocenie { to { transform: rotate(360deg); } }
img.rozmazany { filter: blur(6px); }
/* miniatúry v galérii: jemné pulzovanie, kým sa načítajú */
.obal-nahladu { background: linear-gradient(90deg, var(--podklad) 0%, var(--ciara) 50%, var(--podklad) 100%) 0 0 / 200% 100%;
  animation: pulz 1.4s ease-in-out infinite; }
.obal-nahladu img { position: relative; }   /* načítaná miniatúra zakryje pulzovanie */
@keyframes pulz { 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .nacitava::after { animation-duration: 2.4s; } .obal-nahladu { animation: none; } }