/* ReAssembler — vizuelni sistem.
   Prepisan 11.09.2026. Staro: cetiri nijanse mornarskog plavog jedna preko druge
   (`#0b1b33`, `#13294b`, `#1c3a66`), pa su se kartica, dugme, okvir i pozadina u
   halskom svetlu stapali u jedno polje. Zlatna je znacila pet stvari: akciju,
   izabran tab, upozorenje, vezu i napredak. Font se gazio inline na devet velicina.

   Tri pravila koja ovo drzi:

   1. TRI POVRSINE, ne cetiri nijanse. Podloga, izdignuta kartica, udubljeno polje.
      Polje za unos je TAMNIJE od podloge — rupa, ne kartica; tako se vidi sta prima
      unos a sta samo stoji.
   2. BOJA IMA JEDAN POSAO. Akcent je iskljucivo „ovo se pritiska". Stanje je
      semaforsko i nikad se ne mesa sa akcentom: zeleno gotovo, zuto ceka tebe,
      crveno zauzeto. Akcent je zato PLAV — jedina boja koja u semaforu ne postoji.
   3. SKALA, ne inline. Pet velicina slova, sest razmaka, tri visine dodira.
      Sve van skale je greska koja se vidi.

   Svetla tema je podrazumevana (halsko svetlo, masna stakla, stampa), tamna ide
   automatski po `prefers-color-scheme` — telefon nocu ne sme da zaslepi.

   Nijedna boja ne stoji van palete: sve sto se crta uzima `var(--...)`, pa se tema
   menja na jednom mestu. Kontrast je izmeren, ne procenjen. */

:root{
  /* povrsine */
  --podloga:#eef0f2;
  --povrsina:#ffffff;
  --udubljeno:#e2e5e9;
  --linija:#c9ced6;
  --linija-tiha:#dfe3e8;

  /* tekst */
  --tekst:#14181d;
  --tekst-2:#48515c;
  --tekst-3:#6d7782;

  /* akcent — SAMO akcija */
  --akcent:#0f5fb3;
  --akcent-tih:#dce9f8;
  --na-akcentu:#ffffff;

  /* semafor — SAMO stanje */
  --ok:#0e6b43;        --ok-tih:#d6ecdf;     --na-ok:#ffffff;
  --cek:#8a5200;       --cek-tih:#faeacd;
  --stop:#a5271e;      --stop-tih:#f6dcd9;   --na-stop:#ffffff;

  /* slova */
  --f0:12px;  --f1:14px;  --f2:16.5px;  --f3:21px;  --f4:28px;  --f5:36px;

  /* razmaci */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* dodir */
  --d-glavni:60px; --d-red:68px; --d-manji:54px; --d-ikona:46px;

  --r:10px; --r-s:6px;
  --senka:0 1px 2px rgba(15,22,30,.08), 0 2px 8px rgba(15,22,30,.05);
}

@media (prefers-color-scheme: dark){
  :root{
    --podloga:#15181c;
    --povrsina:#20242a;
    --udubljeno:#0d0f12;
    --linija:#363c45;
    --linija-tiha:#2a2f37;

    --tekst:#f1f3f5;
    --tekst-2:#b2bac3;
    --tekst-3:#858e99;

    --akcent:#63aaff;
    --akcent-tih:#17293d;
    --na-akcentu:#0b1116;

    --ok:#56d394;        --ok-tih:#102c20;     --na-ok:#0b1116;
    --cek:#f5c04a;       --cek-tih:#2f2410;
    --stop:#ff8a80;      --stop-tih:#2f1714;   --na-stop:#0b1116;

    --senka:0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}

body{
  background:var(--podloga);
  color:var(--tekst);
  font-family:Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--f2);
  line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100%;display:flex;flex-direction:column}

/* Sifra dela je identifikator, ne recenica: monospace da se `0` i `O` ne pomesaju,
   i da `AM-L-014` na ekranu izgleda kao ono sto stoji na nalepnici. */
.oznaka,.brojac,.kod{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums
}

/* --- zaglavlje ----------------------------------------------------------- */
.zaglavlje{
  position:sticky;top:0;z-index:20;
  background:var(--povrsina);border-bottom:1px solid var(--linija);
  padding:var(--s3) var(--s4);
  padding-top:calc(var(--s3) + env(safe-area-inset-top));
  display:flex;align-items:center;gap:var(--s3)
}
.zaglavlje .ekran{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:24px;line-height:1.05;letter-spacing:.01em
}
.zaglavlje .gde{
  font-size:var(--f0);color:var(--tekst-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.zaglavlje .desno{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex:0 0 auto}
/* Prst u rukavici, ne mis. */
.zaglavlje .strelica{
  background:none;border:0;color:var(--akcent);font-size:30px;line-height:1;
  width:var(--d-ikona);height:var(--d-ikona);margin:-8px 0 -8px -10px;padding:0;
  cursor:pointer;flex:0 0 auto;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center
}
.zaglavlje .strelica:active{background:var(--udubljeno)}

.telo{flex:1;padding:var(--s4);padding-bottom:132px}
/* Ekran bez jednog jasnog poteza nema traku na dnu — pa ni praznine za nju. */
.telo.bez-dna{padding-bottom:var(--s5)}
.dno{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)) var(--s4);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--podloga) 26%)
}

/* --- dugmad -------------------------------------------------------------- */
/* Jedno glavno dugme po ekranu i uvek na dnu — pravilo iz plana. Akcent nosi samo
   njega; sve ostalo sto se pritiska je tiho. */
button,.dugme{
  width:100%;min-height:var(--d-glavni);border:0;border-radius:var(--r);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:21px;letter-spacing:.02em;
  background:var(--akcent);color:var(--na-akcentu);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  text-decoration:none;padding:0 var(--s4)
}
button:active,.dugme:active{filter:brightness(.92)}
button.sporedno,.dugme.sporedno{
  background:var(--povrsina);color:var(--tekst);
  border:1px solid var(--linija);min-height:var(--d-manji);font-size:18px
}
button.sporedno:active{background:var(--udubljeno)}
button.dobro{background:var(--ok);color:var(--na-ok)}
button.opasno{background:var(--stop);color:var(--na-stop)}
button[disabled]{opacity:.4;pointer-events:none}
.dugmad{display:flex;gap:var(--s2)}
.dugmad button{flex:1}

/* --- kartice ------------------------------------------------------------- */
.karta{
  background:var(--povrsina);border:1px solid var(--linija-tiha);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3);
  box-shadow:var(--senka)
}
.karta.tanka{padding:var(--s3)}
.karta > :first-child{margin-top:0}

.grupa{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:var(--f1);text-transform:uppercase;letter-spacing:.1em;
  color:var(--tekst-3);margin:var(--s5) 2px var(--s2)
}
.telo > .grupa:first-of-type{margin-top:var(--s2)}

.pod{font-size:var(--f0);text-transform:uppercase;letter-spacing:.08em;color:var(--tekst-3)}
.mut{color:var(--tekst-2)}
.sitno{font-size:var(--f1);line-height:1.45}
.naslov-koraka{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:var(--f4);line-height:1.1;margin:var(--s2) 0 var(--s1)
}
.oznaka{font-size:var(--f3);font-weight:600}
.brojac{font-size:var(--f1);color:var(--tekst-3);letter-spacing:.08em}
.prazno{text-align:center;color:var(--tekst-3);padding:56px var(--s4)}

.red{display:flex;align-items:center;gap:var(--s3)}
.razmak{margin-left:auto}
/* Red sa razmakom na krajeve treba SAMO carobnjaku; pod svojim imenom, da ne gazi
   svih petnaest ostalih `.red`-ova kao do 11.09.2026. */
.red-stavka{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--linija-tiha)
}
.red-stavka:last-child{border-bottom:0}
.red-stavka button{flex:0 0 auto;width:44px;min-height:44px;padding:0}

/* --- znakovi stanja ------------------------------------------------------ */
/* Semafor, i nikad akcent: zeleno gotovo, zuto ceka tebe, crveno zauzeto. */
.znak{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding:4px 10px;border-radius:999px;
  font-size:var(--f0);font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.znak.ok{background:var(--ok-tih);color:var(--ok)}
.znak.cek{background:var(--cek-tih);color:var(--cek)}
.znak.ne{background:var(--stop-tih);color:var(--stop)}
.znak.info{background:var(--udubljeno);color:var(--tekst-2)}
.red-cekanja{
  background:var(--cek-tih);color:var(--cek);border-radius:999px;
  padding:4px 10px;font-size:var(--f0);font-weight:600;white-space:nowrap
}

.greska{
  background:var(--stop-tih);border:1px solid var(--stop);color:var(--stop);
  padding:var(--s3) var(--s4);border-radius:var(--r);margin-bottom:var(--s3);
  font-size:var(--f1);line-height:1.45;font-weight:500
}

/* --- polja --------------------------------------------------------------- */
/* Udubljeno, tamnije od podloge: polje je rupa koja prima unos, ne jos jedna ploca. */
textarea,input,select{
  width:100%;background:var(--udubljeno);color:var(--tekst);
  border:1px solid var(--linija);border-radius:var(--r-s);
  padding:14px var(--s3);font-size:18px;font-family:inherit;line-height:1.4
}
textarea:focus,input:focus,select:focus{
  outline:2px solid var(--akcent);outline-offset:1px;border-color:var(--akcent)
}
textarea{min-height:34vh;resize:vertical}
input.kod,#sken,#spoj-cilj,#sklapam-sken{
  font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;font-size:20px
}
label{
  display:block;font-size:var(--f0);text-transform:uppercase;letter-spacing:.08em;
  color:var(--tekst-3);font-weight:600;margin:0 0 var(--s2)
}

/* --- lista stavki -------------------------------------------------------- */
.stavke{
  background:var(--povrsina);border:1px solid var(--linija-tiha);
  border-radius:var(--r);overflow:hidden;margin-bottom:var(--s3);box-shadow:var(--senka)
}
.stavka{
  width:100%;min-height:var(--d-red);display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);background:none;border:0;
  border-bottom:1px solid var(--linija-tiha);border-radius:0;
  justify-content:flex-start;text-align:left;color:var(--tekst);
  font-family:Barlow,sans-serif;font-size:var(--f2);font-weight:400;letter-spacing:0
}
.stavka:last-child{border-bottom:0}
.stavka:active{background:var(--udubljeno)}
.stavka .tekst{flex:1;min-width:0}
.stavka .ime{
  display:block;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:var(--f3);line-height:1.15
}
.stavka .zasto{display:block;font-size:var(--f1);color:var(--tekst-2);line-height:1.35;margin-top:2px}
.stavka .kaz{flex:0 0 auto;color:var(--tekst-3);font-size:22px;line-height:1}
/* Zakljucano se VIDI, sa razlogom — ne nestaje sa ekrana. */
.stavka[disabled]{opacity:1;pointer-events:none}
.stavka[disabled] .ime{color:var(--tekst-3)}
.stavka[disabled] .zasto{color:var(--cek)}
.stavka[disabled] .kaz{color:var(--cek)}

/* Stavka koja stoji sama, van `.stavke` liste — nosi svoj okvir. */
.stavka-sama{border:1px solid var(--linija);border-radius:var(--r);background:var(--povrsina)}

.izbor{display:grid;gap:var(--s2)}
.izbor button{
  justify-content:flex-start;text-align:left;min-height:var(--d-manji);
  font-size:18px;padding:0 var(--s4)
}

/* --- sledeci potez ------------------------------------------------------- */
/* Jedina kartica koja nosi akcent, i to samo na ivici: glavno dugme je dole. */
.sada{
  background:var(--akcent-tih);border:1px solid var(--akcent);
  border-left:5px solid var(--akcent);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3)
}
.sada .ime{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:26px;line-height:1.1;color:var(--tekst)
}
.sada .zasto{font-size:var(--f1);color:var(--tekst-2);line-height:1.45;margin-top:var(--s2)}

/* --- brojevi i trake ----------------------------------------------------- */
.stanje{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.stanje b{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;
  font-size:var(--f5);line-height:1;letter-spacing:-.01em
}
.traka{height:8px;border-radius:4px;background:var(--udubljeno);overflow:hidden;margin-top:var(--s3)}
.traka i{display:block;height:100%;background:var(--ok)}

/* Faze koraka: pet polja, tekuce je akcentovano, gotova su zelena. */
.koraci{display:flex;gap:var(--s1);margin-bottom:var(--s4)}
.koraci div{flex:1;height:5px;border-radius:3px;background:var(--linija)}
.koraci div.aktivan{background:var(--akcent)}
.koraci div.gotov{background:var(--ok)}
/* Carobnjak crta imenovane korake u <span>; bez ovoga nisu imali nijedan stil. */
.koraci span{
  flex:1;font-size:11px;line-height:1.2;color:var(--tekst-3);text-align:center;
  padding-top:var(--s2);border-top:3px solid var(--linija)
}
.koraci span.aktivan{color:var(--akcent);border-top-color:var(--akcent);font-weight:600}
.koraci span.gotov{color:var(--tekst-2);border-top-color:var(--ok)}

/* --- slike --------------------------------------------------------------- */
.slika{width:100%;border-radius:var(--r);display:block;background:var(--udubljeno);object-fit:cover}
.slika.velika{aspect-ratio:4/3}
.slika.mala{aspect-ratio:4/3;max-width:46%}
.duh{position:relative}
.duh img.ref{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;border-radius:var(--r);pointer-events:none
}
.rupa{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4/3;border:2px dashed var(--linija);border-radius:var(--r);
  color:var(--tekst-3);padding:var(--s4);font-size:var(--f1)
}

/* Kamera u stranici: duh stoji PREKO zivog kadra — tamo gde jedino i sluzi necemu. */
.kadar{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);
  overflow:hidden;background:#000
}
/* `contain`, ne `cover`: kadar mora da pokaze TACNO ono sto ce `okini()` snimiti.
   Pod `cover` se visak isecao, sve je izgledalo uvelicano, a snimak je ispadao siri
   od onoga po cemu je covek kadrirao. Odnos stranica okvira se povija za kamerom
   (vidi `veziPolja`), pa `contain` u praksi ne ostavlja crne trake. */
.kadar video{width:100%;height:100%;object-fit:contain;display:block}
/* Duh se mesa NORMALNO, ne `screen`. Pod `screen` tamna ivica duha preko svetlog
   lima daje razliku od 0.01 — prakticno nestane; a tamna ivica je jedino po cemu se
   ugao i pogadja. Normalno mesanje na istoj providnosti daje razliku 0.25. */
.kadar .duh-sloj{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.38;pointer-events:none
}
.kadar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:3px solid var(--akcent);border-radius:var(--r)
}

.mere-red{display:flex;gap:var(--s2)}
.mere-red > div{flex:1}
.mere-red input{
  text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600;font-size:19px;padding:var(--s3) var(--s2)
}

/* --- izbor zone ---------------------------------------------------------- */
/* „gornja" i „donja" bez slike nista ne znace coveku koji prvi put prilazi masini. */
.zone-lista{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.zone-lista .zona{
  display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;
  background:var(--povrsina);border:2px solid var(--linija-tiha);border-radius:var(--r);
  padding:0;overflow:hidden;cursor:pointer;text-align:left;color:var(--tekst);
  font:inherit;box-shadow:var(--senka)
}
.zone-lista .zona.aktivna{border-color:var(--akcent)}
.zone-lista .zona:active{background:var(--udubljeno)}
.zona-slika{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--udubljeno)}
.zona-ime{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:19px;
  line-height:1.15;padding:var(--s3) var(--s3) 0
}
.zona-strana{font-size:var(--f0);color:var(--tekst-3);padding:2px var(--s3) 0}
.zona-stanje{font-size:var(--f0);color:var(--tekst-2);line-height:1.3;padding:var(--s1) var(--s3) var(--s3)}

/* --- carobnjak ----------------------------------------------------------- */
.n-slika{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.n-slika img{
  width:76px;height:57px;object-fit:cover;border-radius:var(--r-s);
  border:1px solid var(--linija);flex:0 0 auto
}
.n-slika > div{flex:1;min-width:0}
.n-slika input{margin-top:var(--s1)}

/* Osnovno pravilo za dugme je `width:100%` — tacno za glavni potez na dnu ekrana,
   POGRESNO za sitno dugme u redu. U flex redu `width` postaje osnova rasta, pa je
   takvo dugme trazilo ceo red: slika je ostajala na 10%, ime strane se lomilo na
   5%, a `×` je uzimao 85%. Svako dugme u redu zato ima svoju meru. */
.n-slika button{flex:0 0 auto;width:46px;min-height:46px;padding:0;font-size:22px}
.red > button{flex:0 0 auto;width:auto}

/* --- „Kako ovo radi" ----------------------------------------------------- */
.put{counter-reset:p;margin:0;padding:0;list-style:none}
.put li{counter-increment:p;position:relative;padding:0 0 var(--s4) 48px}
.put li:last-child{padding-bottom:0}
.put li::before{
  content:counter(p);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:999px;background:var(--akcent);color:var(--na-akcentu);
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:17px;
  display:flex;align-items:center;justify-content:center
}
.put b{
  display:block;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:20px;line-height:1.15
}
.put span{display:block;font-size:var(--f1);color:var(--tekst-2);line-height:1.45;margin-top:3px}

.recnik div{padding:var(--s3) 0;border-bottom:1px solid var(--linija-tiha)}
.recnik div:first-child{padding-top:0}
.recnik div:last-child{border-bottom:0;padding-bottom:0}
.recnik b{
  display:block;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:19px;letter-spacing:.01em
}
.recnik span{display:block;font-size:var(--f1);color:var(--tekst-2);line-height:1.45;margin-top:2px}

/* --- stanja kartice i sitni taster --------------------------------------- */
/* Kartica koja nosi stanje: ivica semaforske boje, nikad akcent. */
.karta-stop{border-color:var(--stop);border-left:4px solid var(--stop)}
.karta-ok{border-color:var(--ok);border-left:4px solid var(--ok)}

/* Sitan taster unutar kartice (npr. „Ukloni", „Gledam/Sklapam"). 46px je donja
   granica koju prst u rukavici pogadja — 40px, koliko je bilo, nije. */
.d-mali,button.d-mali{
  width:auto;min-height:var(--d-ikona);padding:0 var(--s3);font-size:15px;
  background:var(--povrsina);color:var(--tekst);border:1px solid var(--linija)
}
button.d-mali:active{background:var(--udubljeno)}

.polje-nisko{min-height:22vh}
.polje-srednje{min-height:28vh}

/* --- razmaci i velicine umesto inline stilova ---------------------------- */
.mt1{margin-top:var(--s2)}
.mt2{margin-top:var(--s3)}
.mt3{margin-top:var(--s4)}
.mb2{margin-bottom:var(--s3)}
.f-sitno{font-size:var(--f1)}
.uski{flex:0 0 34%}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}