:root{
  --pozadie:#0f172a; --panel:#1e293b; --panel2:#334155; --text:#e2e8f0;
  --tlmene:#94a3b8; --akcent:#38bdf8; --ok:#4ade80; --caka:#fbbf24; --zle:#f87171;
}
*{box-sizing:border-box}
/* Vlastné `display` v CSS prebije to, čo atribút `hidden` dedí z UA štýlu.
   Bez tohto zostane prihlasovací formulár na obrazovke aj po prihlásení. */
[hidden]{display:none!important}
body{margin:0;background:var(--pozadie);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;gap:.6rem;align-items:center;padding:.7rem .9rem;
  background:var(--panel);position:sticky;top:0;z-index:5}
h1{font-size:1.05rem;margin:0;letter-spacing:.02em}
select,input,button{font:inherit;color:var(--text);background:var(--panel2);
  border:1px solid #475569;border-radius:.5rem;padding:.55rem .7rem}
select{flex:1;min-width:0}
button{cursor:pointer}
button.hlavne{background:var(--akcent);color:#0b1220;border-color:var(--akcent);
  font-weight:600;flex:1}
button:disabled{opacity:.5;cursor:default}
nav{display:flex;background:var(--panel);border-top:1px solid #0b1220;
  position:sticky;top:3.1rem;z-index:4}
nav button{flex:1;border:0;border-radius:0;background:none;color:var(--tlmene);
  padding:.7rem .3rem;border-bottom:2px solid transparent}
nav button.aktiv{color:var(--akcent);border-bottom-color:var(--akcent)}
.odznak{background:var(--panel2);border-radius:1rem;padding:0 .4rem;font-size:.75rem}
main{padding:.9rem}
.tab{display:none}.tab.aktiv{display:block}
.riadok{display:flex;gap:.5rem;margin:.7rem 0}
.riadok input{flex:1;min-width:0}
.pata{position:sticky;bottom:.6rem}
#kamera-obal{position:relative;border-radius:.7rem;overflow:hidden;background:#000;
  aspect-ratio:4/3}
#video{width:100%;height:100%;object-fit:cover}
#ramik{position:absolute;inset:16% 10%;border:2px solid var(--akcent);
  border-radius:.6rem;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
.hlaska{min-height:1.3rem;margin:.4rem 0;font-size:.9rem}
.hlaska.ok{color:var(--ok)}.hlaska.zle{color:var(--zle)}.hlaska.caka{color:var(--caka)}
.karta{background:var(--panel);border-radius:.7rem;padding:.7rem .8rem;margin:.6rem 0}
.karta .hlava{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.karta .dod{font-weight:600}
.karta .suma{white-space:nowrap;font-variant-numeric:tabular-nums}
.karta .meta{color:var(--tlmene);font-size:.82rem;margin-top:.15rem;word-break:break-all}
.karta select{width:100%;margin-top:.5rem}
.karta .akcie{display:flex;gap:.5rem;margin-top:.5rem}
.karta .akcie button{flex:1;font-size:.85rem;padding:.4rem}
.stav{font-size:.75rem;padding:.1rem .45rem;border-radius:1rem;white-space:nowrap}
.stav.resolved{background:#14532d;color:var(--ok)}
.stav.scanned,.stav.pending_fs{background:#4a3208;color:var(--caka)}
.stav.not_found,.stav.error{background:#4c1d1d;color:var(--zle)}
.stav.exported{background:#1e3a5f;color:var(--akcent)}
.prazdne{color:var(--tlmene);text-align:center;padding:2rem 1rem}
a{color:var(--akcent)}

#login{position:fixed;inset:0;display:grid;place-items:center;padding:1.2rem;
  background:var(--pozadie)}
#login form{display:flex;flex-direction:column;gap:.7rem;width:min(22rem,100%)}
#login h2{margin:0 0 .4rem;text-align:center;letter-spacing:.04em}
#btn-odhlas{padding:.5rem .6rem;background:none;border-color:transparent;
  color:var(--tlmene)}