:root {
  --pozadina: #f4f2ef;
  --kartica: #ffffff;
  --tekst: #1d1d1f;
  --blijedo: #6b6b70;
  --linija: #e2ded8;
  --naglasak: #1f4e79;
  --naglasak-svijetlo: #e7eef6;
  --dobro: #1e7a46;
  --lose: #b3261e;
  --sjena: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--pozadina);
  color: var(--tekst);
  font: 15px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
h2 { font-size: 15px; margin: 14px 0 8px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 13px; margin: 12px 0 6px; }
.sitno { font-weight: 400; color: var(--blijedo); font-size: 12px; }
.pomoc { color: var(--blijedo); font-size: 12px; margin: 8px 0 0; }

input, select, textarea {
  font: inherit;
  color: inherit;
  border: 1px solid var(--linija);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff;
  width: 100%;
  min-width: 0;
}
textarea { resize: vertical; }
#prompt { font: 12.5px/1.45 ui-monospace, Consolas, monospace; }

.dugme {
  font: inherit;
  border: 1px solid var(--naglasak);
  background: var(--naglasak);
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.dugme.tiho { background: #fff; color: var(--naglasak); border-color: var(--linija); }
.dugme.tiho:hover { border-color: var(--naglasak); }
.dugme.glavno { padding: 10px 22px; font-weight: 600; }
.dugme:disabled { opacity: .45; cursor: not-allowed; }
.dugme.siroko { width: 100%; margin-top: 8px; }

.traka {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px max(16px, calc((100vw - 1760px) / 2 + 16px));
  background: var(--kartica);
  border-bottom: 1px solid var(--linija);
  position: sticky;
  top: 0;
  z-index: 5;
}
.logo { font-weight: 700; letter-spacing: .2px; }
.polje-u-traci { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--blijedo); }
.polje-u-traci select { width: auto; min-width: 220px; color: var(--tekst); }
.kredit { margin-left: auto; font-size: 13px; color: var(--blijedo); }

.raspored, .rezultati {
  max-width: 1760px;
  margin: 0 auto;
  padding: 16px;
}
.raspored {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 1000px) {
  .raspored { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
}
.kolona { display: grid; gap: 16px; align-content: start; min-width: 0; }
.kartica {
  background: var(--kartica);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--sjena);
  padding: 14px;
  min-width: 0;
}
.red { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.red > input, .red > select { flex: 1 1 160px; }
.rasti { flex: 1 1 auto; }
.dugmad { justify-content: flex-start; }
.podesavanja label { display: grid; gap: 4px; font-size: 12px; color: var(--blijedo); }
.podesavanja label:first-child { flex: 0 0 110px; }
.podesavanja .broj-slika { flex: 0 0 170px; }

.zona {
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px dashed var(--linija);
  border-radius: var(--radius);
  padding: 18px 10px;
  cursor: pointer;
  color: var(--blijedo);
  background: #faf9f7;
}
.zona.preko { border-color: var(--naglasak); background: var(--naglasak-svijetlo); }
.zona.mala-zona { padding: 10px; }
#glavnaPrikaz:not(:empty) { margin-bottom: 10px; }
.glavna-slika { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.glavna-slika img { width: 100%; max-height: 380px; object-fit: contain; background: #eeebe6; border-radius: 8px; border: 2px solid var(--naglasak); cursor: zoom-in; display: block; }
.glavna-slika .alati-glavna { display: grid; gap: 6px; }
.glavna-slika .ime-fajla { font-size: 12px; color: var(--blijedo); word-break: break-all; max-width: 120px; }
.bib-grupa + .bib-grupa { margin-top: 10px; }
.bib-grupa h3 { margin: 0 0 6px; }
.bib-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.bib-slika { border: 1px solid var(--linija); border-radius: 8px; overflow: hidden; background: #fff; min-width: 0; display: grid; }
.bib-slika.ukljucena { border-color: var(--dobro); box-shadow: 0 0 0 2px #d6efe0; }
.bib-izbor { position: relative; padding: 0; border: 0; background: #eeebe6; cursor: pointer; display: block; width: 100%; }
.bib-izbor img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bib-znak { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--dobro); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.bib-alati { display: flex; justify-content: space-between; gap: 2px; padding: 2px 4px; }
.bib-alati button { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; color: var(--blijedo); }
.bib-alati.potvrda button { font-size: 11px; padding: 2px; }
.bib-alati .opasno-tekst { color: var(--lose); font-weight: 600; }
.bib-dodaj { display: grid; place-items: center; min-height: 100px; border: 2px dashed var(--linija); border-radius: 8px; background: #faf9f7; color: var(--blijedo); font-size: 24px; cursor: pointer; }
.bib-dodaj.preko { border-color: var(--naglasak); background: var(--naglasak-svijetlo); }
.kvacice { display: grid; gap: 6px; margin-top: 10px; }
.kvacice:empty { display: none; }
.uloga-novih { display: grid; gap: 4px; font-size: 12px; color: var(--blijedo); margin-bottom: 8px; }
.uloga-novih select { color: var(--tekst); }
#upozorenje:empty { display: none; }
.ref-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.ref {
  border: 1px solid var(--linija);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: grid;
  min-width: 0;
}
.ref.istaknuta { border-color: #c58b00; box-shadow: 0 0 0 2px #f4e6bf; }
.dugme.tiho.zvijezda-aktivna { color: #8a6100; border-color: #c58b00; background: #fbf3dc; }
.ref img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #eee; cursor: zoom-in; }
.ref .alati { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; align-items: center; justify-content: space-between; }
.ref select { font-size: 11px; padding: 2px 0 2px 2px; flex: 1 1 100%; }
.ref button { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 2px 4px; color: var(--blijedo); }
.ref button.zvijezda.aktivna { color: #c58b00; }

.kadrovi, .modeli { display: grid; gap: 6px; }
.kadrovi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.modeli { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.izbor {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--linija);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: #fff;
}
.izbor:has(input:checked) { border-color: var(--naglasak); background: var(--naglasak-svijetlo); }
.izbor input { width: auto; margin-top: 3px; }
.izbor .ime { font-weight: 600; }
.izbor .opis { color: var(--blijedo); font-size: 12px; }
.izbor .cijena { margin-left: auto; font-size: 12px; color: var(--blijedo); white-space: nowrap; }
.ostali { margin-top: 8px; }
.ostali summary { cursor: pointer; color: var(--naglasak); font-size: 13px; margin-bottom: 6px; }

.poruka { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; }
.poruka.lose { color: var(--lose); }
.poruka.dobro { color: var(--dobro); }

/* Rezultati */
.rezultati { display: grid; gap: 16px; padding-top: 0; }
.krug { background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--radius); box-shadow: var(--sjena); padding: 14px; min-width: 0; }
.krug-glava { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.krug-glava b { font-size: 15px; }
.krug-glava { align-items: center; }
.krug-glava .desno { margin-left: auto; }
.krug-glava .dugme { padding: 3px 9px; font-size: 12px; }
.krug-glava.moze-sklop { cursor: pointer; }
.krug.smanjen { padding-top: 8px; padding-bottom: 8px; }
.strelica { color: var(--blijedo); width: 12px; }
.sicusne { display: inline-flex; gap: 3px; }
.sicusne img { width: 28px; height: 38px; object-fit: cover; border-radius: 3px; background: #eeebe6; display: block; }
.dugme.tiho.obrisi { color: var(--lose); }
.dugme.tiho.obrisi:hover { border-color: var(--lose); }
.dugme.opasno { background: var(--lose); border-color: var(--lose); }
.potvrda { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: var(--lose); }
.krug details { margin: 6px 0 10px; }
.krug details summary { cursor: pointer; color: var(--naglasak); font-size: 12px; }
.krug pre { white-space: pre-wrap; font-size: 12px; background: #faf9f7; border: 1px solid var(--linija); border-radius: 8px; padding: 10px; margin: 6px 0 0; }
.slike {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}
.slika { border: 1px solid var(--linija); border-radius: 8px; overflow: hidden; background: #fff; display: grid; align-content: start; min-width: 0; }
.slika.izabrana { border-color: var(--dobro); box-shadow: 0 0 0 2px #d6efe0; }
.slika .okvir { aspect-ratio: 2 / 3; background: #eeebe6; display: grid; place-items: center; overflow: hidden; }
.slika img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.slika .info { padding: 8px 10px 4px; font-size: 12px; color: var(--blijedo); }
.slika .info b { color: var(--tekst); font-size: 13px; }
.slika .info .lose { color: var(--lose); }
.slika .akcije { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px 10px; }
.slika .akcije .dugme { padding: 4px 8px; font-size: 12px; }
.slika.original .okvir { background: #fff; }
.slika.nastavlja { border-color: var(--naglasak); box-shadow: 0 0 0 2px var(--naglasak-svijetlo); }
.slika .varijanta { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Nastavi: panel ispod slika i krugovi koji su iz njega nastali */
.krug-nastavak { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--naglasak-svijetlo); min-width: 0; }
.zelja { font-size: 13px; color: var(--blijedo); max-width: 100%; overflow-wrap: anywhere; }
.nastavak {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 12px;
  padding: 12px;
  background: var(--naglasak-svijetlo);
  border: 1px solid var(--naglasak);
  border-radius: 8px;
}
.nastavak > img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; cursor: zoom-in; display: block; }
.nastavak-forma { display: grid; gap: 8px; min-width: 0; }
.nastavak-forma .pomoc, .nastavak-forma .poruka, .nastavak-forma .red { margin: 0; }
.nastavak-red { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nastavak-red > .sitno { min-width: 76px; }
.izbor.mali { padding: 4px 10px; align-items: center; }
.izbor.mali input { margin-top: 0; }
@media (max-width: 520px) {
  .nastavak { grid-template-columns: minmax(0, 1fr); }
  .nastavak > img { width: 96px; }
}
.ceka { color: var(--blijedo); font-size: 13px; text-align: center; padding: 10px; }
.ceka::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 8px; border-radius: 50%; border: 3px solid var(--linija); border-top-color: var(--naglasak); animation: vrti 1s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }

.pregled { position: fixed; inset: 0; background: rgba(20, 20, 20, .88); display: grid; place-items: center; z-index: 20; padding: 16px; }
.pregled[hidden] { display: none; }
.pregled img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; }
.pregled .dugme { position: fixed; top: 14px; right: 14px; }

/* Online (studio.lafo.ch): prijava, bez izbora proizvoda i Explorera */
.prijava { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--pozadina); }
.prijava-forma { width: min(360px, 100%); display: grid; gap: 10px; }
.prijava-forma h2 { margin: 0; font-size: 20px; }
.prijava-forma .pomoc, .prijava-forma .poruka { margin: 0; }
body.prijava-otvorena > header, body.prijava-otvorena > main, body.prijava-otvorena > .rezultati { display: none; }
body.online #proizvodKartica, body.online #otvoriFolder { display: none; }
.naslov-red { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.naslov-red .dugme { margin-left: auto; }
.dugme.malo { padding: 4px 10px; font-size: 12px; font-weight: 400; }