/* MVG — Music Video Generator */

:root{
  --pozadi:#12141a;
  --panel:#1b1e26;
  --panel2:#232732;
  --ramecek:#2f3543;
  --text:#e8eaf0;
  --text2:#9aa2b5;
  --akcent:#22d3c5;
  --akcent2:#f5c542;
  --cervena:#e05a5a;
  --zelena:#4caf7d;
  --r:8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--pozadi);
  color:var(--text);
  font:15px/1.55 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

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

/* ---------- Layout ---------- */
/* Menu zustava na obrazovce: na dlouhych strankach jinak clovek
   musi rolovat az nahoru, jen aby se prepnul jinam */
.hlavicka{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:12px 24px;
  background:rgba(27,30,38,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ramecek);
}
/* při rolování se odliší stínem */
.hlavicka.odrolovano{box-shadow:0 4px 18px rgba(0,0,0,.35)}
.logo{font-weight:700;font-size:20px;color:var(--text);letter-spacing:1px}
.logo:hover{text-decoration:none}
.logo span{
  display:block;font-size:11px;font-weight:400;
  color:var(--text2);letter-spacing:2px;text-transform:uppercase;
}
.hlavicka nav a{
  margin-left:18px;color:var(--text2);font-size:14px;
  display:inline-flex;align-items:center;gap:6px;transition:color .15s;
}
.hlavicka nav a svg{opacity:.7;flex-shrink:0;transition:opacity .15s}
.hlavicka nav a:hover{color:var(--text);text-decoration:none}
.hlavicka nav a:hover svg,.hlavicka nav a.aktivni svg{opacity:1}
.hlavicka nav a.aktivni{
  color:var(--akcent);font-weight:600;
  border-bottom:2px solid var(--akcent);padding-bottom:2px;
}
.hlavicka nav{display:flex;flex-wrap:wrap;align-items:center}

.obsah{max-width:1280px;margin:0 auto;padding:24px}
.pata{
  text-align:center;color:var(--text2);font-size:12px;
  padding:24px;border-top:1px solid var(--ramecek);margin-top:40px;
}

.zahlavi{margin-bottom:24px}
.zahlavi h1{margin:0;font-size:24px;font-weight:600}
.podtitulek{margin:4px 0 0;color:var(--text2);font-size:14px}

/* ---------- Panely ---------- */
.panel{
  background:var(--panel);border:1px solid var(--ramecek);
  border-radius:var(--r);padding:20px;margin-bottom:20px;
}
.panel h2{margin:0 0 16px;font-size:16px;font-weight:600}
.panel h3{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--text2)}

.radek{display:flex;gap:20px;flex-wrap:wrap}
.radek > *{flex:1;min-width:220px}

/* ---------- Formulare ---------- */
label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:8px 10px;background:var(--panel2);
  border:1px solid var(--ramecek);border-radius:6px;
  color:var(--text);font:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--akcent);
}
textarea{resize:vertical;min-height:70px;font-size:14px;line-height:1.5}
.pole{margin-bottom:14px}

button,.tlacitko{
  display:inline-block;padding:9px 16px;border:1px solid var(--ramecek);
  border-radius:6px;background:var(--panel2);color:var(--text);
  font:inherit;cursor:pointer;
}
button:hover,.tlacitko:hover{background:#2c313e;text-decoration:none}
button.hlavni,.tlacitko.hlavni{
  background:var(--akcent);border-color:var(--akcent);color:#0d1117;font-weight:600;
}
button.hlavni:hover{background:#31e4d6}
button.mala{padding:4px 9px;font-size:12px}
button.nebezpecna{border-color:var(--cervena);color:var(--cervena)}
button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Tabulky ---------- */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--ramecek);vertical-align:top}
th{font-size:12px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- Stavy ---------- */
.stav{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  background:var(--panel2);color:var(--text2);
}
.stav.hotovo{background:rgba(76,175,125,.18);color:var(--zelena)}
.stav.chyba{background:rgba(224,90,90,.18);color:var(--cervena)}
.stav.bezi{background:rgba(34,211,197,.18);color:var(--akcent)}

/* ---------- Vokaly ---------- */
.vokal{
  display:inline-block;width:100%;padding:5px 8px;border-radius:5px;
  font-size:12px;font-weight:600;text-align:center;
}
.vokal-muz{background:rgba(70,130,240,.2);color:#7fa8f5}
.vokal-zena{background:rgba(230,100,180,.2);color:#f18fca}
.vokal-duet{background:rgba(160,110,240,.2);color:#b795f5}
.vokal-sbor{background:rgba(245,197,66,.2);color:var(--akcent2)}
.vokal-instrumental{background:rgba(150,160,180,.16);color:var(--text2)}

/* ---------- Editor osy ---------- */
#vlnovka{
  background:var(--panel2);border:1px solid var(--ramecek);
  border-radius:var(--r);padding:10px;margin-bottom:12px;
}
.prehravac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.prehravac .cas{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;color:var(--akcent);min-width:110px;
}

.sekce-tabulka td{padding:7px 8px}
.sekce-tabulka input[type=text]{padding:5px 7px;font-size:13px}
.sekce-tabulka select{padding:5px 7px;font-size:13px}
.sekce-tabulka textarea{min-height:52px;font-size:13px}
.sl-poradi{width:36px;color:var(--text2);text-align:center;font-weight:600}
.sl-cas{width:92px}
.sl-delka{width:70px;color:var(--text2);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.sl-typ{width:126px}
.sl-vokal{width:138px}
.sl-akce{width:132px;white-space:nowrap}

.sekce-tabulka input[disabled]{opacity:.5;cursor:not-allowed}
.sekce-tabulka .sl-akce button{padding:3px 7px;font-size:12px;line-height:1.2}

/* aktivni radek je videt na prvni pohled, protoze na nej miri zkratky */
tr.aktivni td{background:rgba(34,211,197,.10)}
tr.aktivni td:first-child{box-shadow:inset 3px 0 0 var(--akcent)}

/* popisky regionu ve vlnovce */
#vlnovka ::part(region-content){
  font-size:11px;font-weight:600;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);padding:2px 4px;
}

tr.zamcena .sl-poradi::after{content:" •";color:var(--akcent2)}

.napoveda{
  font-size:12px;color:var(--text2);
  background:var(--panel2);border-left:3px solid var(--akcent);
  padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:16px;
}
.napoveda kbd{
  display:inline-block;padding:1px 6px;background:var(--panel);
  border:1px solid var(--ramecek);border-radius:4px;
  font-family:ui-monospace,monospace;font-size:11px;color:var(--text);
}

/* ---------- Hlaseni ---------- */
.hlaseni{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:14px}
.hlaseni.ok{background:rgba(76,175,125,.15);border:1px solid var(--zelena);color:#8fd9b4}
.hlaseni.chyba{background:rgba(224,90,90,.15);border:1px solid var(--cervena);color:#f0a0a0}

.prazdno{text-align:center;color:var(--text2);padding:40px 20px}

/* ---------- Prihlaseni ---------- */
.login{max-width:340px;margin:80px auto}

/* ---------- Storyboard ---------- */
.zaber{padding:18px}
.zaber h3{font-size:15px;color:var(--text)}

.nahled{
  background:var(--panel2);border:1px solid var(--ramecek);
  border-radius:6px;overflow:hidden;position:relative;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
}
.nahled img{width:100%;height:100%;object-fit:cover;display:block}
.nahled-prazdny{color:var(--text2);font-size:13px}

/* behem generovani */
.nahled.pracuje::after{
  content:"generuji…";
  position:absolute;inset:0;background:rgba(18,20,26,.82);
  color:var(--akcent);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  animation:puls 1.2s ease-in-out infinite;
}
@keyframes puls{0%,100%{opacity:.65}50%{opacity:1}}

.zaber details summary::-webkit-details-marker{color:var(--text2)}
.zaber details[open] summary{color:var(--akcent)}

/* ---------- Průběh renderu ---------- */
.pruh{
  height:8px;background:var(--panel2);border-radius:4px;
  overflow:hidden;border:1px solid var(--ramecek);
}
.pruh-vypln{
  height:100%;width:0;background:var(--akcent);
  transition:width .4s ease;
}

/* ---------- Video u záběru ---------- */
.nahled-video{
  width:100%;margin-top:10px;border-radius:6px;
  border:1px solid var(--ramecek);background:#000;display:block;
}

/* ---------- Plovoucí hláška ---------- */
.bublina{
  position:fixed;right:24px;bottom:24px;z-index:900;
  max-width:420px;padding:13px 44px 13px 17px;border-radius:8px;
  font-size:14px;line-height:1.45;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  animation:bublina-prichod .28s ease;
}
.bublina.ok{background:#1d3a2c;border:1px solid var(--zelena);color:#a8e0c2}
.bublina.chyba{background:#3a1d20;border:1px solid var(--cervena);color:#f3b4b4}
.bublina.mizi{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}

.bublina-zavrit{
  position:absolute;top:6px;right:8px;
  background:none;border:0;color:inherit;opacity:.6;
  font-size:19px;line-height:1;cursor:pointer;padding:4px 6px;
}
.bublina-zavrit:hover{opacity:1;background:none}

@keyframes bublina-prichod{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* Po skoku na kotvu ať záběr nelepí úplně k hornímu okraji */
/* Kotva musí skončit pod lepivou hlavičkou i pásem filtru */
.zaber{scroll-margin-top:130px}

/* ---------- Nalezené tváře (multiswap) ---------- */
.tvare-panel{
  margin-top:10px;padding:12px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--ramecek);
}
.tvare-mrizka{display:flex;flex-wrap:wrap;gap:10px}
.tvar-polozka{width:96px}
.tvar-polozka img{
  width:96px;height:96px;object-fit:cover;display:block;
  border-radius:5px;border:1px solid var(--ramecek);background:#000;
}
.tvar-polozka select{
  width:100%;margin-top:4px;padding:3px 5px;font-size:11px;
}

/* ---------- Hotové klipy ----------
   Dvě verze téhož klipu stojí vedle sebe, aby se daly porovnat.
   Rozlišuje je barevná hlava: teplá u obrázkové koláže,
   studená u verze složené z videí. */
#render-vysledek{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;align-items:start;
}
#render-vysledek .prazdno{grid-column:1 / -1}

.vystup{
  background:var(--panel2);border:1px solid var(--ramecek);
  border-top:3px solid var(--ramecek);
  border-radius:8px;padding:14px;margin:0;
}
.vystup h3{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--text);margin:0 0 10px;
}
.vystup h3::before{
  padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;
}
.vystup video{
  width:100%;border-radius:6px;
  border:1px solid var(--ramecek);background:#000;display:block;
}

/* obrázková koláž */
#vystup-obrazky{border-top-color:var(--akcent2)}
#vystup-obrazky h3::before{
  content:"koláž";background:rgba(245,197,66,.18);color:var(--akcent2);
}

/* verze složená z videí */
#vystup-videa{border-top-color:var(--akcent)}
#vystup-videa h3::before{
  content:"videa";background:rgba(34,211,197,.18);color:var(--akcent);
}

.sdileni{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--ramecek);
}
.sdileni input{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;color:var(--akcent);min-width:0;
}
.sdileni > div{flex-wrap:wrap}

@media (max-width:1000px){
  #render-vysledek{grid-template-columns:1fr}
}

/* ---------- Úprava obrázku promptem ---------- */
.uprava{
  margin-top:10px;padding:10px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--ramecek);
}
.uprava label{font-size:11px;margin-bottom:4px}
.uprava textarea{
  font-size:12px;min-height:44px;padding:6px 8px;
}

/* ============================================================
   STORYBOARD — karta záběru
   Cíl: u čtyřiceti záběrů rychle najít ten správný a nedělat
   zbytečné kroky. Proto barevná hrana podle hlasu, stopa
   ukazující místo v písni a nástroje seskupené po funkcích.
   ============================================================ */

/* ---------- pás s filtrem ---------- */
.pas-filtru{
  /* Odsazeni odpovida vysce lepive hlavicky, jinak by se prekryly */
  position:sticky;top:59px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:11px 18px;margin-bottom:16px;
  background:rgba(27,30,38,.96);
  backdrop-filter:blur(6px);
  border:1px solid var(--ramecek);border-radius:8px;
}
.pas-vlevo{font-size:13px;color:var(--text2)}
.pas-vlevo strong{color:var(--text);font-size:15px}
.pas-vpravo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pas-oddel{
  display:inline-block;width:1px;height:13px;margin:0 9px -1px;
  background:var(--ramecek);
}

.chip{
  padding:5px 12px;border-radius:20px;font-size:12px;
  background:transparent;border:1px solid var(--ramecek);color:var(--text2);
}
.chip:hover{background:var(--panel2);color:var(--text)}
.chip.aktivni{
  background:var(--akcent);border-color:var(--akcent);
  color:#0d1117;font-weight:600;
}

/* ---------- karta ---------- */
.zaber{
  background:var(--panel);border:1px solid var(--ramecek);
  border-left:3px solid var(--ramecek);
  border-radius:8px;margin-bottom:14px;overflow:hidden;
  scroll-margin-top:130px;
}
/* Levá hrana nese informaci o tom, kdo v záběru zpívá */
.zaber.vokal-muz{border-left-color:#4682f0}
.zaber.vokal-zena{border-left-color:#e664b4}
.zaber.vokal-duet{border-left-color:#a06ef0}
.zaber.vokal-sbor{border-left-color:var(--akcent2)}
.zaber.vokal-instrumental{border-left-color:#5a6478}
.zaber.schvaleno{background:linear-gradient(90deg,rgba(76,175,125,.06),transparent 40%)}

/* ---------- hlavička ---------- */
.zaber-hlava{
  display:flex;align-items:center;gap:16px;
  padding:10px 16px;border-bottom:1px solid var(--ramecek);
  background:rgba(255,255,255,.015);
}
.zaber-cislo{
  flex:0 0 auto;min-width:34px;
  font-size:20px;font-weight:700;color:var(--text2);
  font-variant-numeric:tabular-nums;text-align:right;
}
.zaber-udaje{flex:1;min-width:150px}
.zaber-cas{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;color:var(--text);
}
.zaber-delka{color:var(--text2);margin-left:8px;font-size:12px}

/* stopa ukazuje, kde v písni záběr leží */
.zaber-stopa{
  position:relative;height:4px;margin-top:5px;
  background:var(--panel2);border-radius:2px;overflow:hidden;
}
.zaber-stopa span{
  position:absolute;top:0;height:100%;
  background:var(--akcent);border-radius:2px;min-width:2px;
}

.zaber-znacky{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.zaber-znacky .vokal{width:auto;padding:3px 11px}
.znacka{
  padding:3px 9px;border-radius:4px;font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;
}
.znacka.video{background:rgba(34,211,197,.16);color:var(--akcent)}
.znacka.hotovo{background:rgba(76,175,125,.18);color:var(--zelena)}
.znacka.chyba{background:rgba(224,90,90,.18);color:var(--cervena)}
.zaber-cena{
  font-size:12px;color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.zaber-akce-hlava{display:flex;align-items:center;gap:6px}
.zaber-akce-hlava form{display:inline}
.sbalit{width:30px;text-align:center;font-weight:700}

/* ---------- tělo: média | nástroje | režie ---------- */
.zaber-telo{
  display:grid;
  grid-template-columns:300px minmax(240px,1fr) minmax(280px,1.2fr);
  gap:18px;padding:16px;
}
.zaber.sbaleno .zaber-telo{display:none}

.sloupec-media .nahled{margin-bottom:8px}
.popisek-media{
  margin:6px 0 0;font-size:11px;color:var(--text2);
  min-height:14px;
}
.hlaska-chyba{
  margin:6px 0 0;font-size:12px;color:#f0a0a0;
  background:rgba(224,90,90,.08);border-radius:4px;padding:6px 8px;
}

/* ---------- nástroje ---------- */
.nastroj{
  border:1px solid var(--ramecek);border-radius:6px;
  margin-bottom:9px;background:rgba(255,255,255,.015);
}
.nastroj-nazev{
  display:block;padding:6px 10px;
  font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text2);
  border-bottom:1px solid var(--ramecek);
}
.nastroj-poznamka{
  text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--text2);font-size:11px;
}
.nastroj-telo{padding:9px 10px}
.nastroj-telo textarea{font-size:12px;min-height:42px;margin-bottom:6px}

.radek-tlacitek{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:5px;
}
.radek-tlacitek:first-child{margin-top:0}
.radek-tlacitek select{width:auto;min-width:96px;padding:4px 7px;font-size:12px}
.radek-nahrat{margin-top:7px}
.radek-nahrat input[type=file]{font-size:11px;width:100%;margin-bottom:5px}

.video-stav,.swap-stav,.uprava-stav{font-size:12px;color:var(--text2)}

/* ---------- režie ---------- */
.sloupec-rezie .pole{margin-bottom:10px}
.sloupec-rezie label{font-size:11px}
.tichy{color:var(--text2);font-weight:400;font-size:11px}
.dvojice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.text-zpevu{color:var(--akcent2);font-size:13px}
.prompt{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;line-height:1.45;
}
.prepinac{
  display:block;font-size:12px;color:var(--text);
  margin-bottom:10px;cursor:pointer;
}
.sloupec-rezie details{margin-bottom:8px}
.sloupec-rezie summary{
  cursor:pointer;color:var(--text2);font-size:12px;
  padding:4px 0;
}
.sloupec-rezie summary:hover{color:var(--akcent)}
.ulozit-zaber{margin-top:4px}

/* ---------- kompaktní režim ---------- */
.kompaktne .sloupec-rezie,
.kompaktne .sloupec-nastroje .nastroj:not(:first-child){display:none}
.kompaktne .zaber-telo{grid-template-columns:220px 1fr}
.kompaktne .nahled-video{display:none !important}

/* ---------- užší obrazovky ---------- */
@media (max-width:1200px){
  .zaber-telo{grid-template-columns:260px 1fr}
  .sloupec-rezie{grid-column:1 / -1}
}
@media (max-width:820px){
  .zaber-telo{grid-template-columns:1fr}
  .zaber-hlava{flex-wrap:wrap}
  .pas-filtru{position:static}
}

/* ---------- Štítek prohození obličeje ----------
   Sedí přímo na náhledu, aby při rolování bylo hned vidět,
   který záběr už má skutečné tváře a který zatím ne. */
.media-obal{position:relative;margin-bottom:8px}
.media-obal .nahled,
.media-obal .nahled-video{margin-bottom:0}

.stitek-swap{
  position:absolute;left:7px;bottom:7px;
  padding:3px 9px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.stitek-swap.ano{
  background:rgba(76,175,125,.88);color:#0d1117;
}
.stitek-swap.ne{
  background:rgba(18,20,26,.78);color:var(--text2);
  border:1px solid rgba(255,255,255,.14);
}

/* ============================================================
   ČASOVÁ OSA — řádky sekcí
   Barevný proužek vlevo drží stejný klíč jako karty záběrů,
   takže se struktura písně dá číst i bez čtení textu.
   ============================================================ */
.sekce-tabulka thead th{
  position:sticky;top:59px;z-index:5;
  background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--ramecek);
}

tr.radek-sekce td:first-child{
  border-left:3px solid transparent;
}
tr.hlas-muz td:first-child{border-left-color:#4682f0}
tr.hlas-zena td:first-child{border-left-color:#e664b4}
tr.hlas-duet td:first-child{border-left-color:#a06ef0}
tr.hlas-sbor td:first-child{border-left-color:var(--akcent2)}
tr.hlas-instrumental td:first-child{border-left-color:#5a6478}

/* krátká sekce se pozná dřív, než skončí jako problém u videa */
tr.kratka .sl-delka{color:var(--akcent2)}
.sl-delka .varovani{
  display:inline-block;margin-left:5px;
  width:15px;height:15px;line-height:15px;text-align:center;
  border-radius:50%;background:rgba(245,197,66,.2);
  color:var(--akcent2);font-weight:700;font-size:11px;cursor:help;
}

/* ---------- tlačítka v řádku ---------- */
.sl-akce{white-space:nowrap;text-align:right}
.ikona{
  width:27px;height:26px;padding:0;margin-left:3px;
  font-size:13px;line-height:1;text-align:center;
  border:1px solid var(--ramecek);border-radius:5px;
  background:var(--panel2);color:var(--text2);
  vertical-align:middle;
}
.ikona:hover:not(:disabled){
  background:#2c313e;color:var(--text);border-color:#3d4657;
}
.ikona:disabled{opacity:.25;cursor:not-allowed}

.ikona.pridat{color:var(--akcent);font-size:17px;font-weight:700}
.ikona.pridat:hover{background:rgba(34,211,197,.15);border-color:var(--akcent)}
.ikona.zamknuto{background:rgba(245,197,66,.16);border-color:var(--akcent2)}
.ikona.smazat{font-size:17px}
.ikona.smazat:hover{
  background:rgba(224,90,90,.15);border-color:var(--cervena);color:var(--cervena);
}

/* aktivní řádek je cíl klávesových zkratek, ať je to vidět */
.sekce-tabulka tr.aktivni td{background:rgba(34,211,197,.10)}
.sekce-tabulka tr.aktivni td:first-child{box-shadow:inset 3px 0 0 var(--akcent)}
.sekce-tabulka tr:hover td{background:rgba(255,255,255,.03)}
.sekce-tabulka tr.aktivni:hover td{background:rgba(34,211,197,.13)}

/* ---------- Lupa na časové ose ---------- */
.lupa{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 6px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--ramecek);
}
.lupa button{
  width:28px;height:26px;padding:0;font-size:15px;line-height:1;
  border:1px solid var(--ramecek);border-radius:4px;
  background:var(--panel);color:var(--text2);
}
.lupa button:hover{background:#2c313e;color:var(--text)}
.lupa button#btn-cela{width:auto;padding:0 9px;font-size:12px}
.lupa #uroven-lupy{
  min-width:38px;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;color:var(--akcent);
}

/* při přiblížení se vlnovka posouvá vodorovně */
#vlnovka{overflow-x:auto}

/* ---------- Pruh s poslední chybou ----------
   Vyskakovací okno u hromadného generování znemožní práci,
   proto se chyba drží nenápadně nahoře, dokud ji nezavřete. */
.pruh-chyby{
  position:sticky;top:59px;z-index:60;
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 16px;margin-bottom:12px;border-radius:8px;
  background:#3a1d20;border:1px solid var(--cervena);
  color:#f3b4b4;font-size:13px;line-height:1.5;
}
.pruh-chyby button{
  margin-left:auto;flex:0 0 auto;
  background:none;border:0;color:inherit;
  font-size:19px;line-height:1;cursor:pointer;opacity:.7;padding:0 4px;
}
.pruh-chyby button:hover{opacity:1;background:none}

/* ---------- Volba modelu u záběru ---------- */
.modely-obrazku{gap:4px}
.modely-obrazku button{
  padding:3px 8px;font-size:11px;letter-spacing:.3px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.modely-obrazku button.bezi{
  background:var(--akcent);color:#0d1117;border-color:var(--akcent);
}
.model-stav{font-size:11px;color:var(--text2)}

/* ---------- Fronta úloh ---------- */
.fronta-stav{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;font-size:12px;
  background:rgba(34,211,197,.14);color:var(--akcent);
  border:1px solid rgba(34,211,197,.4);
}
.fronta-stav::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--akcent);animation:puls 1.2s ease-in-out infinite;
}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.25}}

/* ============================================================
   SCHVÁLENÝ ZÁBĚR
   Při rolování čtyřiceti záběrů musí být na první pohled jasné,
   co je hotové a co ještě čeká.
   ============================================================ */
.zaber.schvaleno{
  border-color:rgba(76,175,125,.55);
  border-left-color:var(--zelena);
  border-left-width:5px;
  background:
    linear-gradient(90deg, rgba(76,175,125,.09), rgba(76,175,125,.02) 45%, transparent 75%),
    var(--panel);
  box-shadow:0 0 0 1px rgba(76,175,125,.16);
}

.zaber.schvaleno .zaber-hlava{
  background:rgba(76,175,125,.12);
  border-bottom-color:rgba(76,175,125,.35);
}

.zaber.schvaleno .zaber-cislo{color:var(--zelena)}

/* fajfka v rohu náhledu — vidět i v kompaktním režimu */
.zaber.schvaleno .sloupec-media .media-obal:first-child::after{
  content:"\2713";
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;line-height:30px;text-align:center;
  border-radius:50%;
  background:var(--zelena);color:#0d1117;
  font-size:17px;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

.zaber.schvaleno .znacka.hotovo{
  background:var(--zelena);color:#0d1117;
}

/* hotové záběry drží pozornost méně než ty rozdělané */
.zaber.schvaleno .sloupec-nastroje{opacity:.62}
.zaber.schvaleno .sloupec-nastroje:hover{opacity:1}

/* ---------- Reels a Shorts ---------- */
.kapitoly{display:flex;flex-wrap:wrap;gap:7px}

.kapitola{
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:7px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--ramecek);
  font-size:13px;transition:background .12s,border-color .12s;
}
.kapitola:hover{background:#2c313e}
.kapitola.vybrana{
  background:rgba(34,211,197,.14);
  border-color:var(--akcent);
}
.kapitola input{margin:0}
.kapitola-nazev{color:var(--text);font-weight:600}
.kapitola-cas{
  color:var(--text2);font-size:11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

.reel-karta{
  display:inline-block;vertical-align:top;
  margin:0 14px 14px 0;padding:12px;
  background:var(--panel2);border:1px solid var(--ramecek);
  border-top:3px solid var(--akcent);border-radius:8px;
}
.reel-karta video{
  display:block;border-radius:6px;background:#000;
  border:1px solid var(--ramecek);
}
/* Svislý formát nesmí zabrat celou obrazovku */
.reel-karta.format-9x16 video{max-height:520px}
.reel-karta.format-1x1 video{max-width:420px}
.reel-karta.format-16x9 video{max-width:560px}

/* verze s titulky se odliší, aby nesplynula s tou bez nich */
.vystup.s-titulky{border-top-color:var(--akcent2)}
.vystup.s-titulky h3 .znacka{background:rgba(245,197,66,.2);color:var(--akcent2)}

/* ---------- Vzhled titulků ---------- */
.titulky-vzhled{
  padding:11px 14px;border-radius:7px;
  background:var(--panel2);border:1px solid var(--ramecek);
  align-items:flex-end;
}
.barva-pole input[type=color]{
  width:52px;height:32px;padding:2px;cursor:pointer;
  background:var(--panel);border:1px solid var(--ramecek);border-radius:5px;
}

/* ---------- Paleta barev titulků ---------- */
.titulky-vzhled{
  padding:13px 15px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--ramecek);
}
.vzhled-radek{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
}
.vzhled-radek + .vzhled-radek{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--ramecek);
}

.cislo-vedle{
  display:inline-block;min-width:28px;
  color:var(--akcent);font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
input[type=range]{
  width:100%;height:26px;padding:0;background:none;
  border:0;cursor:pointer;accent-color:var(--akcent);
}

.barvy-skupina label{
  display:block;font-size:11px;color:var(--text2);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;
}
.paleta{display:flex;gap:5px;align-items:center;flex-wrap:wrap}

.vzorek{
  width:28px;height:28px;padding:0;border-radius:6px;
  border:2px solid var(--ramecek);cursor:pointer;
}
.vzorek:hover{transform:scale(1.12);border-color:var(--text2)}
.vzorek.vybrany{
  border-color:var(--akcent);
  box-shadow:0 0 0 2px rgba(34,211,197,.35);
}
.vlastni-barva{
  width:34px;height:28px;padding:2px;margin-left:4px;cursor:pointer;
  background:var(--panel);border:1px dashed var(--ramecek);border-radius:6px;
}

/* Živý náhled — ať se nemusí renderovat kvůli kontrole vzhledu */
.nahled-titulku{
  flex:1;min-width:220px;
  display:flex;align-items:center;justify-content:center;
  min-height:66px;padding:8px 14px;border-radius:6px;
  background:linear-gradient(135deg,#0f1a2e,#2a1030);
  border:1px solid var(--ramecek);overflow:hidden;
}
.nahled-titulku span{
  white-space:nowrap;line-height:1.2;
  font-family:"DejaVu Sans",Arial,sans-serif;
}

/* ---------- Metadata pro YouTube ---------- */
.meta-panel{
  margin-top:12px;padding:14px;border-radius:8px;
  background:var(--panel);border:1px solid var(--akcent2);
}
.meta-pole{margin-bottom:10px}
.meta-pole label{
  display:block;font-size:11px;color:var(--text2);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;
}
.meta-pole input,.meta-pole textarea{font-size:13px}
.meta-pole .meta-nazev{font-weight:600;color:var(--text)}
.meta-pole .meta-stitky{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
}
.meta-stav{font-size:12px;color:var(--text2);margin-left:8px}

/* ---------- Čísla kanálu ---------- */
.cisla-kanalu{display:flex;gap:26px;flex-wrap:wrap}
.cisla-kanalu div{display:flex;flex-direction:column}
.cisla-kanalu strong{font-size:20px;color:var(--akcent)}
.cisla-kanalu span{font-size:12px;color:var(--text2)}

/* ============================================================
   SEZNAM PROJEKTŮ
   Karty místo tabulky: u každého projektu je hned vidět,
   kolik práce je hotové a co ještě chybí.
   ============================================================ */
.projekty{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:14px;
}

.projekt{
  display:flex;flex-direction:column;gap:10px;
  padding:15px;border-radius:9px;
  background:var(--panel2);
  border:1px solid var(--ramecek);
  border-left:3px solid var(--akcent);
  scroll-margin-top:80px;
}
.projekt:hover{border-color:#3d4657}

/* hotové projekty ustupují do pozadí, ať nepřekáží rozdělaným */
.projekt.hotovy{
  border-left-color:var(--zelena);
  background:linear-gradient(90deg,rgba(76,175,125,.07),transparent 55%),var(--panel2);
  opacity:.78;
}
.projekt.hotovy:hover{opacity:1}

.projekt-hlava{display:flex;align-items:flex-start;gap:10px}
.projekt-nazev{
  display:block;font-size:16px;font-weight:600;
  color:var(--akcent);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.projekt-nazev:hover{text-decoration:underline}
.projekt-styl{font-size:12px;color:var(--text2);margin-top:2px}

/* proužek postupu podle podílu hotových obrázků */
.postup{
  height:5px;border-radius:3px;overflow:hidden;
  background:var(--panel);border:1px solid var(--ramecek);
}
.postup span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--akcent),var(--zelena));
}

.projekt-cisla{display:flex;gap:14px;flex-wrap:wrap}
.projekt-cisla div{display:flex;flex-direction:column;line-height:1.25}
.projekt-cisla strong{
  font-size:16px;color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.projekt-cisla div.ma strong{color:var(--text)}
.projekt-cisla span{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}

.projekt-znacky{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:20px}
.projekt-znacky .znacka{background:var(--panel);color:var(--text2)}
.projekt-cena{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}

.projekt-akce{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--ramecek);
}
.projekt-akce form{display:inline}
.projekt-cas{font-size:11px;color:var(--text2);text-align:right}

@media (max-width:760px){
  .projekty{grid-template-columns:1fr}
}

/* ---------- Náhled projektu ---------- */
.projekt-nahled{
  flex:0 0 auto;width:84px;height:47px;   /* 16:9 */
  display:block;border-radius:5px;overflow:hidden;
  border:1px solid var(--ramecek);background:#000;
}
.projekt-nahled img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.projekt-nahled:hover{border-color:var(--akcent)}

.projekt-nahled.prazdny{
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--ramecek);font-size:20px;
}

/* ---------- Čas strávený na projektu ---------- */
.projekt-doba{
  color:var(--akcent);cursor:help;
  font-variant-numeric:tabular-nums;
}

/* ---------- Hotové projekty podle alb ---------- */
.alba-seznam{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.album-box{
  background:var(--panel2);
  border:1px solid var(--ramecek);
  border-left:3px solid var(--zelena);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.album-box:hover{
  border-color:#3d4657;
}

.album-box[open]{
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  border-color:#3d4657;
}

.album-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  cursor:pointer;
  user-select:none;
  list-style:none;
  background:linear-gradient(90deg, rgba(76,175,125,.07), transparent 60%);
  transition:background .15s ease;
}

.album-summary::-webkit-details-marker{
  display:none;
}

.album-summary:hover{
  background:linear-gradient(90deg, rgba(76,175,125,.13), rgba(255,255,255,.02) 60%);
}

.album-info-vlevo{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.album-nahled{
  width:64px;
  height:36px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--ramecek);
  background:#000;
  flex:0 0 auto;
}

.album-nahled img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.album-nahled.prazdny{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2);
  font-size:18px;
  background:var(--panel);
}

.album-texty{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.album-nazev{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.album-podrobnosti{
  font-size:12px;
  color:var(--text2);
  margin-top:2px;
}

.album-zanr{
  color:var(--akcent);
  font-weight:600;
}

.album-info-vpravo{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}

.album-utrata{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  background:var(--panel);
  padding:3px 10px;
  border-radius:4px;
  border:1px solid var(--ramecek);
}

.album-sipka{
  font-size:14px;
  color:var(--text2);
  transition:transform .2s ease;
  display:inline-block;
  line-height:1;
}

.album-box[open] .album-sipka{
  transform:rotate(180deg);
  color:var(--zelena);
}

.album-obsah{
  padding:16px;
  background:rgba(0,0,0,.15);
  border-top:1px solid var(--ramecek);
}

/* Zvýraznění karty po přechodu na kotvu */
.projekt:target,
.projekt.zvyrazneny{
  outline:2px solid var(--akcent);
  box-shadow:0 0 16px rgba(34,211,197,.3);
  animation:zablesk-karty 1.5s ease-out;
}

@keyframes zablesk-karty{
  0%{background:rgba(34,211,197,.2)}
  100%{background:var(--panel2)}
}



/* ---------- Navigace rolování ---------- */
.navigace-rolovani{
  position:fixed;right:20px;bottom:20px;z-index:95;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px;border-radius:10px;
  background:rgba(27,30,38,.94);
  backdrop-filter:blur(8px);
  border:1px solid var(--ramecek);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.navigace-rolovani button{
  width:38px;height:32px;padding:0;
  font-size:12px;line-height:1;
  background:transparent;border:0;border-radius:6px;
  color:var(--text2);cursor:pointer;
}
.navigace-rolovani button:hover:not(:disabled){
  background:var(--panel2);color:var(--akcent);
}
.navigace-rolovani button:disabled{opacity:.22;cursor:default}

.pozice-rolovani{
  font-size:10px;color:var(--text2);
  font-variant-numeric:tabular-nums;
  padding:1px 0;
}

/* na úzkých obrazovkách ať nepřekáží obsahu */
@media (max-width:600px){
  .navigace-rolovani{right:10px;bottom:10px}
  .navigace-rolovani button{width:32px;height:28px}
}

/* ---------- Vzhled titulků v panelu reelu ---------- */
.vzhled-titulku-obal{
  margin-top:14px;padding:0;border-radius:8px;
  background:var(--panel);border:1px solid var(--ramecek);
}
.vzhled-titulku-obal summary{
  padding:10px 14px;cursor:pointer;
  font-size:13px;color:var(--text2);
  list-style:none;
}
.vzhled-titulku-obal summary::before{
  content:"▸ ";color:var(--akcent);
}
.vzhled-titulku-obal[open] summary::before{content:"▾ "}
.vzhled-titulku-obal summary:hover{color:var(--text)}
.vzhled-titulku-obal[open] summary{border-bottom:1px solid var(--ramecek)}
.vzhled-titulku-obal .titulky-vzhled{
  border:0;border-radius:0 0 8px 8px;
}

/* ---------- Průběh sestavování reelu ---------- */
.reel-prubeh{
  margin-top:14px;padding:13px 15px;border-radius:8px;
  background:var(--panel);border:1px solid var(--akcent);
}
.reel-prubeh-pruh{
  height:9px;border-radius:5px;overflow:hidden;
  background:var(--panel2);border:1px solid var(--ramecek);
}
.reel-prubeh-pruh span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--akcent),var(--zelena));
  transition:width .5s ease;
  /* jemné pruhování, ať je poznat, že se pracuje */
  background-image:linear-gradient(90deg,var(--akcent),var(--zelena)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px);
  background-blend-mode:overlay;
}
.reel-prubeh-text{
  margin:8px 0 0;font-size:13px;color:var(--akcent);
}

/* ---------- Metadata: přepínání sítí ---------- */
.meta-site{
  display:flex;gap:6px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--ramecek);
}
.meta-fb-popis,.meta-tt-popis{font-size:13px}

/* ---------- Pokyn pro generování ---------- */
.meta-pokyn{
  margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--ramecek);
}
.meta-pokyn-text{
  font-size:13px;
  border-color:var(--akcent2) !important;
}
.meta-pokyn-text::placeholder{color:var(--text2);opacity:.65}

/* ---------- Schválený záběr: nástroje zamčené ---------- */
.zaber-hotovy{
  padding:14px 16px;border-radius:7px;
  background:rgba(76,175,125,.08);
  border:1px solid rgba(76,175,125,.35);
}

/* ---------- Režie u schváleného záběru ----------
   Jen k přečtení: co je schválené, do toho se nesahá. */
.rezie-hotova{
  padding:14px 16px;border-radius:7px;
  background:rgba(76,175,125,.05);
  border:1px solid rgba(76,175,125,.22);
}
.rezie-popis{
  margin:0 0 8px;font-size:14px;color:var(--text);
}
.rezie-text{
  margin:0 0 12px;padding:8px 11px;border-radius:5px;
  background:var(--panel);
  color:var(--akcent2);font-size:13px;line-height:1.5;
  white-space:pre-line;
}
.rezie-udaje{
  display:grid;grid-template-columns:auto 1fr;
  gap:5px 14px;margin:0;font-size:12px;
}
.rezie-udaje dt{
  color:var(--text2);text-transform:uppercase;
  letter-spacing:.4px;font-size:10px;padding-top:2px;
}
.rezie-udaje dd{margin:0;color:var(--text)}

/* ---------- Referenční obrázek (předloha) ---------- */
.panel-kotva{border-left:3px solid var(--akcent2)}

.kotva-nahled{
  display:block;flex:0 0 auto;
  width:124px;height:70px;border-radius:6px;overflow:hidden;
  border:2px solid var(--akcent2);background:#000;
}
.kotva-nahled img{width:100%;height:100%;object-fit:cover;display:block}
.kotva-nahled.prazdny{
  display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--ramecek);color:var(--ramecek);font-size:22px;
}

.kotva-aktivni{
  background:rgba(245,197,66,.18) !important;
  border-color:var(--akcent2) !important;
  color:var(--akcent2) !important;
}

/* ---------- Nahrávání vlastních podkladů ---------- */
.popisek-nahrat{
  display:block;font-size:11px;color:var(--text2);
  margin-bottom:5px;
}
.pozadi-radek{display:flex;gap:8px;align-items:center}
.pozadi-radek img{
  width:74px;height:42px;object-fit:cover;
  border-radius:4px;border:1px solid var(--akcent2);display:block;
}

/* ---------- Hláška o prázdném filtru ---------- */
.filtr-hlaska{
  font-size:12px;color:var(--zelena);
  padding:4px 10px;border-radius:14px;
  background:rgba(76,175,125,.14);
}

/* ---------- Základní motiv projektu ---------- */
.panel-motiv{border-left:3px solid var(--akcent2)}
.panel-motiv input[type=text]{
  font-size:14px;border-color:var(--akcent2);
}
.panel-motiv input::placeholder{color:var(--text2);opacity:.6}

/* ---------- Titulkovač ---------- */
.vzorek-maly{
  display:inline-block;width:11px;height:11px;
  border-radius:3px;border:1px solid var(--ramecek);
  vertical-align:-1px;margin-right:2px;
}
.tichy{color:var(--text2);font-weight:400;font-size:11px}

/* ---------- Výroba úpravou předlohy ---------- */
.z-predlohy{
  background:rgba(245,197,66,.14) !important;
  border-color:var(--akcent2) !important;
  color:var(--akcent2) !important;
  font-weight:600;
}
.z-predlohy:hover:not(:disabled){background:rgba(245,197,66,.26) !important}
.z-predlohy.bezi{background:var(--akcent2) !important;color:#0d1117 !important}

/* ---------- Přepínač režimu výroby obrázků ---------- */
.prepinac-rezimu{
  display:inline-flex;gap:0;margin-right:10px;
  border:1px solid var(--ramecek);border-radius:7px;overflow:hidden;
}
.prepinac-rezimu .chip{
  border:0;border-radius:0;margin:0;
  padding:7px 14px;font-size:12px;
}
.prepinac-rezimu .chip + .chip{border-left:1px solid var(--ramecek)}
.prepinac-rezimu .chip.aktivni{
  background:var(--akcent2);color:#0d1117;font-weight:600;
}
.prepinac-rezimu .chip:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Průběh dávkové úlohy ---------- */
.prubeh-davky{
  margin-top:12px;padding:12px 14px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--akcent);
}
.prubeh-pruh{
  height:8px;border-radius:4px;overflow:hidden;
  background:var(--panel);border:1px solid var(--ramecek);
}
.prubeh-pruh span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--akcent),var(--zelena));
  transition:width .4s ease;
}
.prubeh-text{margin:8px 0 0;font-size:13px;color:var(--akcent)}

/* ---------- Přehrání úseku písně ---------- */
.prehrat-usek{
  flex:0 0 auto;
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--panel2);border:1px solid var(--ramecek);
  color:var(--text2);font-size:12px;cursor:pointer;
  transition:background .12s,color .12s;
}
.prehrat-usek:hover{
  background:var(--akcent);color:#0d1117;border-color:var(--akcent);
}
.prehrat-usek.hraje{
  background:var(--akcent);color:#0d1117;border-color:var(--akcent);
  animation:tep 1.4s ease-in-out infinite;
}
@keyframes tep{
  0%,100%{box-shadow:0 0 0 0 rgba(34,211,197,.5)}
  50%{box-shadow:0 0 0 6px rgba(34,211,197,0)}
}

/* ---------- Vizualizace generování a Fronty ---------- */

.zaber{
  transition:border-color .3s ease,box-shadow .3s ease;
}

.zaber.v-cekani{
  border-color:#9055ff !important;
  box-shadow:0 0 12px rgba(144,85,255,.25) !important;
}

.zaber.v-generovani-obrazku{
  border-color:var(--akcent) !important;
  box-shadow:0 0 16px rgba(34,211,197,.35) !important;
  animation:pulz-obrazek 2s infinite ease-in-out;
}

.zaber.v-generovani-videa{
  border-color:#3b82f6 !important;
  box-shadow:0 0 16px rgba(59,130,246,.35) !important;
  animation:pulz-video 2s infinite ease-in-out;
}

.zaber.v-swapu{
  border-color:#ec4899 !important;
  box-shadow:0 0 16px rgba(236,72,153,.35) !important;
  animation:pulz-swap 2s infinite ease-in-out;
}

.zaber.v-uprave{
  border-color:var(--akcent2) !important;
  box-shadow:0 0 16px rgba(245,197,66,.35) !important;
  animation:pulz-uprava 2s infinite ease-in-out;
}

.zaber.dokonceno-flash{
  animation:blesk-zelena 1.5s ease-out;
}

@keyframes pulz-obrazek{
  0%,100%{box-shadow:0 0 12px rgba(34,211,197,.3)}
  50%{box-shadow:0 0 24px rgba(34,211,197,.7)}
}

@keyframes pulz-video{
  0%,100%{box-shadow:0 0 12px rgba(59,130,246,.3)}
  50%{box-shadow:0 0 24px rgba(59,130,246,.7)}
}

@keyframes pulz-swap{
  0%,100%{box-shadow:0 0 12px rgba(236,72,153,.3)}
  50%{box-shadow:0 0 24px rgba(236,72,153,.7)}
}

@keyframes pulz-uprava{
  0%,100%{box-shadow:0 0 12px rgba(245,197,66,.3)}
  50%{box-shadow:0 0 24px rgba(245,197,66,.7)}
}

@keyframes blesk-zelena{
  0%{border-color:var(--zelena);box-shadow:0 0 28px rgba(76,175,125,.8)}
  100%{border-color:var(--ramecek);box-shadow:none}
}

/* Načítací vrstva u náhledu / videa */
.nahled,.obal-videa{
  position:relative;
}

.nahled-loading-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(18,20,26,.85);
  backdrop-filter:blur(4px);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:10;
  padding:12px;
  text-align:center;
}

.nahled-loading-overlay .mvg-spinner{
  width:32px;
  height:32px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--akcent);
  border-radius:50%;
  animation:mvg-tocit .8s linear infinite;
}

.nahled-loading-overlay.typ-video .mvg-spinner{
  border-top-color:#3b82f6;
}

.nahled-loading-overlay.typ-swap .mvg-spinner{
  border-top-color:#ec4899;
}

.nahled-loading-overlay.typ-ceka .mvg-spinner{
  border-top-color:#9055ff;
}

@keyframes mvg-tocit{
  to{transform:rotate(360deg)}
}

.nahled-loading-text{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}

.nahled-loading-cas{
  font-size:11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--akcent);
}

/* Odznaky u záběrů */
.zaber-odznak{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
}

.zaber-odznak-ceka{background:rgba(144,85,255,.2);color:#b795f5;border:1px solid rgba(144,85,255,.4)}
.zaber-odznak-generuje{background:rgba(34,211,197,.2);color:var(--akcent);border:1px solid rgba(34,211,197,.4)}
.zaber-odznak-video{background:rgba(59,130,246,.2);color:#60a5fa;border:1px solid rgba(59,130,246,.4)}
.zaber-odznak-swap{background:rgba(236,72,153,.2);color:#f472b6;border:1px solid rgba(236,72,153,.4)}
.zaber-odznak-hotovo{background:rgba(76,175,125,.2);color:var(--zelena);border:1px solid rgba(76,175,125,.4)}
.zaber-odznak-chyba{background:rgba(224,90,90,.2);color:var(--cervena);border:1px solid rgba(224,90,90,.4)}

/* Plovoucí Widget Fronty */
#fronta-widget{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:990;
  width:320px;
  background:rgba(27,30,38,.95);
  backdrop-filter:blur(12px);
  border:1px solid var(--akcent);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  padding:14px 16px;
  transition:all .3s ease;
  display:none;
}

#fronta-widget.aktivni{
  display:block;
  animation:fronta-slide-in .3s cubic-bezier(.16,1,.3,1);
}

@keyframes fronta-slide-in{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

#fronta-widget-hlavicka{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

#fronta-widget-titul{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}

#fronta-widget-titul .puls-tecka{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--akcent);
  box-shadow:0 0 8px var(--akcent);
  animation:tep 1.2s infinite;
}

#fronta-widget-pruh-obal{
  height:6px;
  background:var(--panel2);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:10px;
  border:1px solid var(--ramecek);
}

#fronta-widget-pruh{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--akcent),#3b82f6);
  transition:width .3s ease;
}

#fronta-widget-seznam{
  max-height:160px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
  padding-right:4px;
}

.fronta-polozka{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  padding:6px 10px;
  background:var(--panel2);
  border-radius:6px;
  border-left:3px solid var(--akcent);
}

.fronta-polozka.stav-bezi{border-left-color:var(--akcent)}
.fronta-polozka.stav-ceka{border-left-color:#9055ff;opacity:.85}
.fronta-polozka.typ-video{border-left-color:#3b82f6}
.fronta-polozka.typ-swap{border-left-color:#ec4899}

.fronta-polozka-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}

.fronta-polozka-cas{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
  color:var(--text2);
  margin-left:8px;
}

#fronta-widget-tlacitka{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
/* ---------- Výběr tváře u WaveSpeed swapu ----------
   Model řadí nalezené tváře podle velikosti, takže se dá rovnou
   vybrat, kterou nahradit — bez samostatné detekce. */
.swap-index{max-width:130px;font-size:12px}

/* ---------- Stažení úseku písně ----------
   Sedí vedle přehrání, jen nenápadněji — stahuje se méně často. */
.stahnout-usek{
  flex:0 0 auto;
  width:28px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:transparent;border:1px solid var(--ramecek);
  color:var(--text2);font-size:11px;cursor:pointer;
  text-decoration:none;
  transition:background .12s,color .12s;
}
.stahnout-usek:hover{
  background:var(--panel2);color:var(--akcent);
  border-color:var(--akcent);text-decoration:none;
}

/* ===== Vlastni obrazky a videa: generator + mix zvuku (zabery.php) ===== */
.radek-generator {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px;
}
.radek-generator label { color: var(--text2); }
.radek-generator input[type="text"] { width: 190px; }

.mix-zvuku {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--ramecek); border-radius: 8px;
  background: var(--panel2);
}
.mix-radek {
  display: grid; grid-template-columns: 110px 1fr 48px;
  align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px;
}
.mix-radek label { color: var(--text2); }
.mix-radek input[type="range"] { width: 100%; accent-color: var(--akcent); }
.mix-radek input[type="range"]:disabled { opacity: .4; }
.mix-hodnota { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.mix-zvuku .radek-tlacitek { margin-top: 4px; }

/* ===== Hotova metadata - tlacitko u videa/reelu (zabery.php) ===== */
button.meta-hotovo {
  color: var(--zelena);
  border-color: var(--zelena);
}
/* ===== Vizualizator (vizualizator.php) ===== */
.viz-pozn { color: var(--text2); font-size: 13px; margin: 10px 0 0; }
.viz-stav { color: var(--text2); font-size: 13px; }
.viz-mrizka { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 24px; }
@media (max-width: 900px) { .viz-mrizka { grid-template-columns: 1fr; } }

.viz-zdroj { position: relative; line-height: 0; cursor: crosshair;
  border: 1px solid var(--ramecek); border-radius: 8px; overflow: hidden; }
.viz-zdroj img { width: 100%; height: auto; display: block; }
.viz-bod { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--akcent); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.viz-bod::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  margin: -2px 0 0 -2px; background: var(--akcent); border-radius: 50%; }

.viz-volby .pole { margin-bottom: 12px; }
.viz-posuvnik { margin-bottom: 12px; }
.viz-posuvnik label { display: flex; justify-content: space-between; font-size: 13px; }
.viz-posuvnik label span { font-variant-numeric: tabular-nums; color: var(--text2); }
.viz-posuvnik input[type="range"] { width: 100%; accent-color: var(--akcent); }
.viz-posuvnik small { color: var(--text2); font-size: 11px; }
.viz-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.viz-nahled-obal { max-width: 960px; }
.viz-nahled { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 70vh; margin: 0 auto;
  background: #000; border-radius: 8px; overflow: hidden; }
.viz-nahled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.viz-urovne { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin-top: 6px; }
.viz-urovne span { height: 18px; font-size: 10px; line-height: 18px; text-align: center; cursor: pointer;
  color: var(--text2); background: var(--panel2); border-radius: 3px; }
.viz-urovne span.aktivni { background: var(--akcent); color: var(--text); }

#viz-graf { width: 100%; height: 70px; margin-top: 14px; cursor: pointer;
  background: var(--panel2); border-radius: 6px; display: block; }

.viz-video { margin-bottom: 14px; }
.viz-video video { width: 100%; max-width: 960px; max-height: 60vh; background: #000; border-radius: 8px; }
.viz-seznam { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.viz-polozka { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.viz-polozka img { width: 110px; height: 62px; object-fit: cover; border-radius: 6px; }
#viz-nahled { position: absolute; inset: 0; }
.viz-zrno { position: absolute; inset: 0; pointer-events: none; opacity: .13; mix-blend-mode: overlay; }
#viz-tvary-platno { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.viz-tma { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }