/* =========================================================
   Deponije · alert.ba — jedinstveni stylesheet
   Paleta: bor, mahovina, lišaj, papir, kora
   ========================================================= */
:root {
  --bor: #1E4D3A;
  --bor-tamni: #153829;
  --mahovina: #3F7D52;
  --lisaj: #DCE9D4;
  --lisaj-svijetli: #EEF4EA;
  --papir: #F3F5EF;
  --bijela: #FFFFFF;
  --kora: #1C2620;
  --siva: #5B675F;
  --linija: #D3DCCF;

  --narandzasta: #E26A12;
  --narandzasta-tamna: #C4570A;
  --narandzasta-svijetla: #FDEBDD;

  --mala: #C9971C;
  --srednja: #D46F22;
  --velika: #B23F2A;
  --ociscena: #2F8F4E;

  --greska: #B23F2A;
  --upozorenje: #9A6A0B;

  --font-naslov: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

  --zaglavlje-v: 60px;
  --nav-v: 66px;
  --sirina: 1120px;
  --r-malo: 8px;
  --r: 14px;
  --sjena: 0 1px 2px rgba(28, 38, 32, .06), 0 6px 20px -8px rgba(28, 38, 32, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--kora);
  background: var(--papir);
  padding-bottom: calc(var(--nav-v) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--bor); text-underline-offset: 3px; }
a:hover { color: var(--mahovina); }
h1, h2, h3 { font-family: var(--font-naslov); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 5.5vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--mala); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }

.ik { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.ik--mala { width: 1em; height: 1em; vertical-align: -0.15em; }
.ik--velika { width: 2.4rem; height: 2.4rem; }

.vizuelno-skriveno, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.preskoci { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--bor); color: #fff; padding: 8px 14px; border-radius: var(--r-malo); }
.preskoci:focus { left: 8px; }

/* ---------- DUGMAD ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.3em;
  background: var(--bor); color: #fff; border: 2px solid var(--bor);
  border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s;
}
.dugme:hover { background: var(--bor-tamni); border-color: var(--bor-tamni); color: #fff; }
.dugme:active { transform: translateY(1px); }
.dugme--veliko { min-height: 56px; font-size: 1.08rem; padding: .8em 1.5em; }
.dugme--malo { min-height: 40px; padding: .45em 1em; font-size: .95rem; }
.dugme--puno { width: 100%; }
.dugme--sporedno { background: transparent; color: var(--bor); }
.dugme--sporedno:hover { background: var(--lisaj); color: var(--bor); border-color: var(--bor); }
.dugme--opasno { background: transparent; color: var(--greska); border-color: color-mix(in srgb, var(--greska) 45%, transparent); }
.dugme--opasno:hover { background: var(--greska); border-color: var(--greska); color: #fff; }
.dugme[disabled] { opacity: .6; cursor: wait; }
.link-dugme { background: none; border: 0; color: var(--bor); text-decoration: underline; padding: 6px 0; cursor: pointer; font-weight: 700; }
.link-dalje { color: var(--narandzasta-tamna); font-weight: 700; text-decoration: none; display: inline-flex; gap: .35em; align-items: center; }
.link-nazad { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; margin-bottom: 1rem; font-size: .95rem; }

/* ---------- NARANDŽASTI AKCENT (glavne akcije prijave) ---------- */
.dugme--akcent,
.uvod__akcije .dugme--veliko,
.nav-desktop .dugme,
.forma-dno .dugme,
.info__cta .dugme,
.prazno .dugme,
.mapa-prazno .dugme { background: var(--narandzasta); border-color: var(--narandzasta); color: #fff; }
.dugme--akcent:hover,
.uvod__akcije .dugme--veliko:hover,
.nav-desktop .dugme:hover,
.forma-dno .dugme:hover,
.info__cta .dugme:hover,
.prazno .dugme:hover,
.mapa-prazno .dugme:hover { background: var(--narandzasta-tamna); border-color: var(--narandzasta-tamna); color: #fff; }
.uvod__akcije .dugme--veliko { box-shadow: 0 8px 20px -10px rgba(226, 106, 18, .7); }
.logo__znak path:last-child { fill: #F4A261; }

/* ---------- ZAGLAVLJE ---------- */
.zaglavlje {
  position: sticky; top: 0; z-index: 1100;
  background: rgba(243, 245, 239, .92);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linija);
  box-shadow: inset 0 3px 0 var(--narandzasta);
}
.zaglavlje__unutra {
  max-width: var(--sirina); margin: 0 auto; height: var(--zaglavlje-v);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kora); }
.logo__znak { width: 30px; height: 30px; }
.logo__tekst { display: flex; flex-direction: column; line-height: 1.05; }
.logo__tekst strong { font-family: var(--font-naslov); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.logo__tekst small { font-size: .78rem; color: var(--siva); }
.nav-desktop { display: none; }

/* ---------- MOBILNA NAVIGACIJA (donja traka) ---------- */
.nav-mobilna {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--nav-v) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bijela); border-top: 1px solid var(--linija);
  box-shadow: 0 -4px 18px -10px rgba(28, 38, 32, .25);
}
.nav-mobilna a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--nav-v); font-size: .74rem; font-weight: 700; color: var(--siva); text-decoration: none;
}
.nav-mobilna__ik .ik { width: 24px; height: 24px; }
.nav-mobilna a.aktivno { color: var(--bor); }
.nav-mobilna a.aktivno .nav-mobilna__ik { background: var(--lisaj); }
.nav-mobilna__ik { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .15s; }
.nav-mobilna__glavno .nav-mobilna__ik {
  width: 54px; height: 54px; margin-top: -26px; border-radius: 50%;
  background: var(--narandzasta); color: #fff; box-shadow: 0 6px 16px -4px rgba(226, 106, 18, .65);
  border: 4px solid var(--bijela);
}
.nav-mobilna__glavno.aktivno .nav-mobilna__ik { background: var(--narandzasta-tamna); }
.nav-mobilna__glavno { color: var(--narandzasta-tamna) !important; }

/* ---------- GLAVNI ---------- */
.glavni { max-width: var(--sirina); margin: 0 auto; padding: 20px 16px 40px; }
.glavni--mapa { max-width: none; padding: 0; }
.glavni > .obavijest { margin-bottom: 16px; }

/* ---------- OBAVIJESTI ---------- */
.obavijest { padding: 12px 16px; border-radius: var(--r-malo); border-left: 4px solid; background: var(--bijela); font-size: .98rem; }
.obavijest--uspjeh { border-color: var(--ociscena); background: #E7F3EA; }
.obavijest--greska { border-color: var(--greska); background: #FBEDEA; color: #6E2215; }
.obavijest--info { border-color: var(--bor); background: var(--lisaj-svijetli); }
.obavijest--upozorenje { border-color: var(--mala); background: #FBF4DF; color: #5B4307; }
.obavijest--mala { font-size: .9rem; padding: 8px 12px; margin: 8px 0; }

/* ---------- UVOD (početna) ---------- */
.uvod { display: grid; gap: 22px; padding: 8px 0 28px; }
.uvod h1 { max-width: 17ch; margin-bottom: .45em; }
.uvod__podnaslov { font-size: 1.12rem; color: var(--siva); max-width: 46ch; }
.uvod__akcije { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.uvod__akcije .dugme--veliko { flex: 1 1 260px; }
.uvod__akcije .dugme--sporedno { flex: 1 1 160px; }
.uvod__napomena { font-size: .92rem; color: var(--siva); }
.uvod__napomena .ik { margin-right: .3em; }
.uvod__mapa {
  position: relative; display: block; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--linija); box-shadow: var(--sjena); background: var(--lisaj);
  aspect-ratio: 4 / 3; text-decoration: none;
}
.mapa-pregled { position: absolute; inset: 0; z-index: 1; }
.mapa-pregled .leaflet-control-container { display: none; }
.uvod__mapa-oznaka {
  position: absolute; z-index: 500; left: 12px; bottom: 12px;
  background: var(--bijela); color: var(--kora); font-weight: 700; font-size: .92rem;
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--sjena);
  display: inline-flex; gap: .4em; align-items: center;
}

/* ---------- STANJE / STATISTIKA ---------- */
.stanje {
  background: var(--bor); color: #fff; border-radius: 22px; padding: 22px 18px;
  margin-bottom: 36px;
}
.brojke { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.brojka { display: flex; flex-direction: column; padding-left: 12px; border-left: 3px solid rgba(255, 255, 255, .25); }
.brojka__vrijednost { font-family: var(--font-naslov); font-size: 2.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.brojka__naziv { font-size: .92rem; opacity: .85; margin-top: 4px; }
.brojka--aktivne { border-color: var(--srednja); }
.brojka--provjera { border-color: var(--mala); }
.brojka--ociscene { border-color: #8FD19E; }
.sanacija { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); }
.sanacija__red { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.sanacija__red span { opacity: .8; font-size: .95rem; }
.sanacija__traka { height: 12px; background: rgba(255, 255, 255, .14); border-radius: 999px; overflow: hidden; }
.sanacija__traka span { display: block; height: 100%; background: linear-gradient(90deg, #6CC283, #B9E3A9); border-radius: 999px; min-width: 6px; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.sanacija__velicine { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; }
.sanacija__velicine li { display: inline-flex; align-items: center; gap: .4em; opacity: .92; }
.sanacija__velicine strong { margin-left: .15em; }

.tacka { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.tacka--mala { background: var(--mala); }
.tacka--srednja { background: var(--srednja); }
.tacka--velika { background: var(--velika); }
.tacka--ociscena { background: var(--ociscena); }

/* ---------- SEKCIJE ---------- */
.sekcija { margin-bottom: 40px; }
.sekcija__glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sekcija__glava h2 { margin: 0; }
.sekcija > h2::after, .sekcija__glava h2::after, .info h2::after {
  content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: var(--narandzasta); margin-top: 8px;
}

.lista-prijava { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linija); border: 1px solid var(--linija); border-radius: var(--r); overflow: hidden; }
.prijava-red { display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--bijela); text-decoration: none; color: var(--kora); }
.prijava-red:hover { background: var(--lisaj-svijetli); color: var(--kora); }
.prijava-red img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-malo); flex: none; background: var(--lisaj); }
.prijava-red__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.prijava-red__tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prijava-red__meta { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--siva); flex-wrap: wrap; }
.prijava-red__vrijeme { font-size: .85rem; color: var(--siva); }
.prijava-red__vrijeme--ociscena { color: var(--ociscena); font-weight: 700; }

.znacka { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #fff; }
.znacka--mala { background: var(--mala); color: #2A1F02; }
.znacka--srednja { background: var(--srednja); }
.znacka--velika { background: var(--velika); }
.znacka--neutral { background: var(--lisaj); color: var(--bor); }
.status { display: inline-flex; align-items: center; gap: .35em; font-size: .85rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.status--ociscena { background: #DDF0E1; color: #1C6234; }
.status--aktivna { background: #FBE6DD; color: #8A2F1B; }

.prazno { text-align: center; padding: 34px 20px; background: var(--bijela); border: 2px dashed var(--linija); border-radius: var(--r); color: var(--siva); }
.prazno .ik--velika { color: var(--mahovina); margin: 0 auto 8px; }
.prazno p { max-width: 38ch; margin: 0 auto 16px; }

/* Prije/poslije kartice */
.prije-poslije-niz { display: grid; gap: 14px; }
.pp-kartica { display: block; text-decoration: none; color: var(--kora); background: var(--bijela); border-radius: var(--r); overflow: hidden; border: 1px solid var(--linija); }
.pp-kartica__slike { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bijela); }
.pp-kartica__slike img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.pp-kartica__slike img:last-child { outline: 3px solid var(--ociscena); outline-offset: -3px; }
.pp-kartica__tekst { padding: 10px 14px; display: flex; flex-direction: column; }
.pp-kartica__tekst span { font-size: .88rem; color: var(--ociscena); font-weight: 700; }

/* Koraci (stvarna sekvenca) */
.koraci { list-style: none; counter-reset: k; padding: 0; margin: 0; display: grid; gap: 18px; }
.koraci li { counter-increment: k; position: relative; padding-left: 52px; display: flex; flex-direction: column; }
.koraci li::before {
  content: counter(k); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lisaj); color: var(--bor); font-family: var(--font-naslov); font-weight: 800;
}
.koraci li:first-child::before { background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
.koraci li:last-child::before { background: var(--ociscena); color: #fff; }
.koraci li span { color: var(--siva); }

/* ---------- PODNOŽJE ---------- */
.podnozje { border-top: 1px solid var(--linija); background: var(--lisaj-svijetli); }
.podnozje__unutra { max-width: var(--sirina); margin: 0 auto; padding: 26px 16px; font-size: .95rem; color: var(--siva); }
.podnozje__linkovi { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.podnozje__mali { font-size: .82rem; margin: 0; }

/* ---------- MAPA STRANICA ---------- */
.mapa-stranica { position: relative; height: calc(100vh - var(--zaglavlje-v) - 1px - var(--nav-v) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - var(--zaglavlje-v) - 1px - var(--nav-v) - env(safe-area-inset-bottom, 0px)); min-height: 360px; }
.mapa-velika { position: absolute; inset: 0; z-index: 1; background: var(--lisaj); }
.mapa-filteri {
  position: absolute; z-index: 500; top: 12px; left: 12px; right: 64px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.mapa-filteri::-webkit-scrollbar { display: none; }
.cip {
  flex: none; border: 1px solid var(--linija); background: var(--bijela); color: var(--kora);
  border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .92rem; cursor: pointer;
  box-shadow: 0 2px 8px -3px rgba(28, 38, 32, .3); min-height: 40px;
}
.cip span { color: var(--siva); font-weight: 400; margin-left: 2px; }
.cip.aktivno { background: var(--bor); color: #fff; border-color: var(--bor); }
.cip.aktivno span { color: rgba(255, 255, 255, .75); }
.mapa-dugme {
  position: absolute; z-index: 500; right: 12px; background: var(--bijela); color: var(--bor);
  border: 1px solid var(--linija); box-shadow: 0 2px 8px -3px rgba(28, 38, 32, .3); cursor: pointer;
}
.mapa-dugme--lokacija { top: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.mapa-dugme--lokacija .ik { width: 22px; height: 22px; }
.mapa-dugme--lokacija.trazi .ik { animation: puls 1s infinite; }
.mapa-dugme--legenda { bottom: 26px; left: 12px; right: auto; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .9rem; }
.legenda {
  position: absolute; z-index: 600; left: 12px; bottom: 74px; background: var(--bijela);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sjena); font-size: .92rem; max-width: 230px;
}
.legenda p { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.legenda__mali { color: var(--siva); font-size: .82rem; margin: 8px 0 0 !important; }
.mapa-prazno {
  position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bijela); padding: 18px 22px; border-radius: var(--r); box-shadow: var(--sjena); text-align: center; width: min(320px, 86vw);
}
@keyframes puls { 50% { opacity: .35; } }

/* ---------- PINOVI ---------- */
.pin-omot { background: none; border: 0; }
.pin {
  position: relative; width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--boja, var(--srednja)); border: 3px solid #fff;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .45);
  display: grid; place-items: center; transition: transform .15s;
}
.pin--gomila { border-radius: 9px 9px 9px 0; }
.pin svg { transform: rotate(45deg); width: 17px; height: 17px; color: #fff; }
.pin--mala { --boja: var(--mala); }
.pin--srednja { --boja: var(--srednja); }
.pin--velika { --boja: var(--velika); width: 42px; height: 42px; }
.pin--velika svg { width: 20px; height: 20px; }
.pin--ociscena { --boja: var(--ociscena); }
.pin--odabran { --boja: var(--bor); }
.leaflet-marker-icon:hover .pin, .leaflet-marker-icon:focus .pin { transform: rotate(-45deg) scale(1.12); }
.pin-ja { width: 18px; height: 18px; border-radius: 50%; background: #2B6CDF; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(43, 108, 223, .22); }

.marker-cluster-moj {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bor); color: #fff; font-weight: 800; font-family: var(--font-naslov);
  border: 3px solid #fff; box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .45);
}

/* Leaflet popup */
.leaflet-popup-content-wrapper { border-radius: var(--r); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 260px !important; font-family: var(--font-tekst); font-size: .95rem; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button {
  top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--kora); font-size: 20px; line-height: 28px;
}
.popup__slika { display: block; aspect-ratio: 4 / 3; background: var(--lisaj); }
.popup__slika { position: relative; }
.popup__slika img { width: 100%; height: 100%; object-fit: cover; }
.popup__broj { position: absolute; left: 10px; bottom: 10px; background: rgba(28, 38, 32, .8); color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.popup__tijelo { padding: 12px 14px 14px; }
.popup__tijelo h3 { font-size: 1.05rem; margin: 0 0 6px; }
.popup__znacke { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.popup__datum { color: var(--siva); font-size: .85rem; margin: 0 0 10px !important; }
.popup__akcije { display: flex; gap: 8px; }
.popup__akcije .dugme { flex: 1; min-height: 40px; font-size: .88rem; padding: .4em .8em; color: #fff; }
.popup__akcije .dugme--sporedno { color: var(--bor); }
.popup__ceka { font-size: .85rem; color: var(--upozorenje); margin: 0 0 10px !important; }

/* ---------- FORME ---------- */
.forma-omot { max-width: 640px; margin: 0 auto; }
.forma-glava { margin-bottom: 18px; }
.forma-glava p { color: var(--siva); }
.forma { display: grid; gap: 14px; }
.blok {
  margin: 0; border: 1px solid var(--linija); border-radius: var(--r);
  background: var(--bijela); padding: 16px; min-width: 0;
}
.blok legend, .blok summary {
  font-family: var(--font-naslov); font-weight: 700; font-size: 1.12rem; padding: 0 6px; margin-left: -6px;
}
.blok--sklopivo summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; }
.blok--sklopivo summary::-webkit-details-marker { display: none; }
.blok--sklopivo summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--siva); border-bottom: 2px solid var(--siva); transform: rotate(45deg); transition: transform .15s; }
.blok--sklopivo[open] summary::after { transform: rotate(-135deg); }
.blok--sklopivo[open] summary { margin-bottom: 10px; }
.blok__opis { color: var(--siva); font-size: .95rem; margin-top: 4px; }
.blok--greska { border-color: var(--greska); box-shadow: 0 0 0 1px var(--greska); }
.blok--trese { animation: trese .4s; }
@keyframes trese { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.neobavezno { font-family: var(--font-tekst); font-weight: 400; font-size: .85rem; color: var(--siva); background: var(--papir); padding: 1px 8px; border-radius: 999px; margin-left: 4px; }

.polje { display: grid; gap: 6px; margin-top: 12px; }
.polje label { font-weight: 700; font-size: .95rem; }
.polje input, .polje textarea, .polje select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--kora);
  padding: 12px 14px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela);
  min-height: 48px;
}
.polje textarea { resize: vertical; min-height: 96px; }
.polje input:focus, .polje textarea:focus, .polje select:focus { outline: none; border-color: var(--mahovina); box-shadow: 0 0 0 3px rgba(63, 125, 82, .2); }
.polje--greska input, .polje--greska textarea { border-color: var(--greska); }
.polje__greska { color: var(--greska); font-size: .9rem; font-weight: 700; margin: 6px 0 0; }

/* Fotografije: dugmad i lista */
.brojac { font-family: var(--font-tekst); font-weight: 700; font-size: .85rem; color: var(--bor); background: var(--lisaj); padding: 1px 9px; border-radius: 999px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.brojac--puno { background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
.foto-akcije { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.foto-dugme {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  min-height: 112px; padding: 14px 10px; cursor: pointer; color: var(--bor);
  border: 2px dashed var(--mahovina); border-radius: var(--r); background: var(--lisaj-svijetli);
  transition: background-color .15s, border-color .15s;
}
.foto-dugme:first-child { border-color: var(--narandzasta); background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
.foto-dugme > .ik { width: 30px; height: 30px; }
.foto-dugme span { display: flex; flex-direction: column; }
.foto-dugme small { color: var(--siva); font-size: .82rem; line-height: 1.3; }
.foto-dugme:hover { border-style: solid; }
.foto-dugme:focus-within { outline: 3px solid var(--mala); outline-offset: 2px; }
.foto-dugme--onemoguceno { opacity: .45; cursor: not-allowed; }
.foto-skriveno { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.foto-lista { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.foto-stavka { position: relative; aspect-ratio: 1; border-radius: var(--r-malo); overflow: hidden; background: var(--lisaj); }
.foto-stavka:first-child { box-shadow: 0 0 0 3px var(--narandzasta); }
.foto-stavka__slika { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.foto-stavka__slika img { width: 100%; height: 100%; object-fit: cover; }
.foto-stavka__naslovna { position: absolute; left: 0; top: 0; background: var(--narandzasta); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-bottom-right-radius: 8px; pointer-events: none; }
.foto-stavka__vel { position: absolute; left: 4px; bottom: 4px; background: rgba(28, 38, 32, .78); color: #fff; font-size: .72rem; padding: 1px 6px; border-radius: 999px; pointer-events: none; font-variant-numeric: tabular-nums; }
.foto-stavka__ukloni {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--greska); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.foto-stavka__ukloni svg { width: 16px; height: 16px; }
.foto-stavka--obrada { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.foto-stavka--obrada .foto-stavka__vel { position: static; background: none; color: var(--siva); margin-top: 6px; }
.foto-stavka__spiner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linija); border-top-color: var(--narandzasta); animation: vrti .8s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }
.foto-info { font-size: .88rem; color: var(--greska); font-weight: 700; margin: 8px 0 0; }
.foto-info:empty { display: none; }

/* Galerija (detalj, admin) */
.galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.galerija a { display: block; border-radius: var(--r-malo); overflow: hidden; aspect-ratio: 1; background: var(--lisaj); }
.galerija img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.galerija a:hover img { transform: scale(1.05); }
.galerija--ispod { margin: -6px 0 16px; }
.galerija--mala { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 8px; }
.galerija__naslov { font-weight: 700; font-size: .9rem; color: var(--siva); margin: 0 0 6px; }
.galerija__naslov--zeleno { color: var(--ociscena); }
.galerija-grupe { display: grid; gap: 14px; margin-bottom: 16px; }
.detalj__slika { position: relative; }
.detalj__broj-slika { position: absolute; right: 10px; bottom: 10px; background: rgba(28, 38, 32, .8); color: #fff; font-size: .85rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; pointer-events: none; }
.referenca__ostale { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.referenca__ostale img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.admin-prijava__slike { display: grid; gap: 8px; align-content: start; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(12, 18, 14, .94); display: flex; align-items: center; justify-content: center; padding: 50px 10px; }
.lightbox[hidden] { display: none !important; }
.lightbox__slika { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox__dugme { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox__dugme:hover { background: rgba(255, 255, 255, .26); }
.lightbox__zatvori { top: 12px; right: 12px; }
.lightbox__prev { left: 10px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 10px; top: 50%; margin-top: -24px; }
.lightbox__brojac { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .85); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Izbor (radio kartice) */
.izbor { display: grid; gap: 10px; margin-top: 6px; }
.izbor__opcija { position: relative; cursor: pointer; }
.izbor__opcija input { position: absolute; opacity: 0; pointer-events: none; }
.izbor__opcija > span {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  padding: 12px 14px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); min-height: 64px;
  transition: border-color .15s, background-color .15s;
}
.izbor__opcija > span > .ik, .izbor__opcija > span > .velicina-znak { grid-row: span 2; }
.izbor__opcija > span > .ik { width: 26px; height: 26px; color: var(--bor); }
.izbor__opcija small { color: var(--siva); font-size: .88rem; line-height: 1.3; }
.izbor__opcija input:checked + span { border-color: var(--bor); background: var(--lisaj-svijetli); box-shadow: 0 0 0 1px var(--bor); }
.izbor__opcija input:focus-visible + span { outline: 3px solid var(--mala); outline-offset: 2px; }
.velicina-znak { display: block; border-radius: 50%; background: var(--b); }
.velicina-znak--mala { --b: var(--mala); width: 14px; height: 14px; margin: 0 6px; }
.velicina-znak--srednja { --b: var(--srednja); width: 20px; height: 20px; margin: 0 3px; }
.velicina-znak--velika { --b: var(--velika); width: 26px; height: 26px; }

/* Lokacija */
.lokacija-izbor { display: grid; gap: 10px; margin-top: 6px; }
.lok-dugme {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; min-height: 64px; cursor: pointer; color: var(--kora);
  background: var(--bijela); border: 1.5px solid var(--linija); border-radius: var(--r-malo);
}
.lok-dugme > .ik { width: 26px; height: 26px; color: var(--bor); }
.lok-dugme span { display: flex; flex-direction: column; }
.lok-dugme small { color: var(--siva); font-size: .88rem; }
.lok-dugme[aria-pressed="true"] { border-color: var(--bor); background: var(--lisaj-svijetli); box-shadow: 0 0 0 1px var(--bor); }
.lok-dugme.trazi > .ik { animation: puls 1s infinite; }
.lok-status { margin: 10px 0 0; font-size: .93rem; color: var(--siva); }
.lok-status.ok { color: var(--ociscena); font-weight: 700; }
.lok-status.greska { color: var(--greska); font-weight: 700; }
.lok-mapa-omot { margin-top: 12px; }
.lok-mapa { height: 300px; border-radius: var(--r-malo); border: 1px solid var(--linija); background: var(--lisaj); }
.lok-savjet { font-size: .85rem; color: var(--siva); margin: 6px 0 0; }
.lok-mapa .leaflet-control-layers { font-size: .85rem; }
.duplikat { margin-top: 12px; padding: 10px 14px; background: #FBF4DF; border-left: 4px solid var(--mala); border-radius: var(--r-malo); font-size: .93rem; color: #5B4307; }
.duplikat ul { margin: 6px 0 0; padding-left: 18px; }

.referenca { margin: 4px 0 0; }
.referenca img { border-radius: var(--r-malo); width: 100%; max-height: 360px; object-fit: cover; }
.referenca figcaption { font-size: .93rem; color: var(--siva); margin-top: 8px; }

.forma-dno { position: sticky; bottom: calc(var(--nav-v) + env(safe-area-inset-bottom, 0px)); padding: 12px 0 4px; background: linear-gradient(to bottom, rgba(243, 245, 239, 0), var(--papir) 30%); z-index: 5; }
.forma-dno__greska { color: var(--greska); font-weight: 700; font-size: .95rem; margin: 0 0 8px; text-align: center; }

/* ---------- ZAHVALA ---------- */
.zahvala { max-width: 520px; margin: 30px auto; text-align: center; }
.zahvala__znak { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; background: var(--ociscena); color: #fff; display: grid; place-items: center; }
.zahvala__znak--siva { background: var(--lisaj); color: var(--bor); }
.zahvala p { color: var(--siva); }
.zahvala__broj { font-size: .95rem; }
.zahvala__akcije { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ---------- DETALJ ---------- */
.detalj { max-width: 760px; margin: 0 auto; }
.detalj__glava { margin-bottom: 16px; }
.detalj__znacke { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.detalj__meta { color: var(--siva); margin: 0; }
.detalj__slika { margin: 0 0 16px; }
.detalj__slika img { width: 100%; border-radius: var(--r); max-height: 560px; object-fit: cover; }
.detalj__opis { background: var(--bijela); padding: 14px 16px; border-radius: var(--r-malo); border: 1px solid var(--linija); }
.detalj__opis--zeleno { background: #EAF5EC; border-color: #BEE0C6; }
.detalj__akcija { margin: 18px 0 22px; }
.detalj__savjet { text-align: center; color: var(--siva); font-size: .9rem; margin: 8px 0 0; }
.detalj__mapa { height: 260px; border-radius: var(--r); border: 1px solid var(--linija); background: var(--lisaj); }
.detalj__koordinate { font-size: .9rem; color: var(--siva); margin: 8px 0 4px; }
.detalj__id { font-size: .82rem; color: var(--siva); }

/* Poređenje prije/poslije */
.poredjenje { position: relative; border-radius: var(--r); overflow: hidden; margin-bottom: 16px; background: var(--kora); aspect-ratio: 4 / 3; --poz: 50%; user-select: none; touch-action: pan-y; }
.poredjenje img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poredjenje__prije-omot { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.poredjenje__linija { position: absolute; top: 0; bottom: 0; left: var(--poz); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; box-shadow: 0 0 8px rgba(0, 0, 0, .4); }
.poredjenje__linija::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%231E4D3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 24px; background-position: center; background-repeat: no-repeat;
}
.poredjenje__klizac { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.poredjenje__oznaka { position: absolute; top: 10px; font-size: .82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.poredjenje__oznaka--l { left: 10px; background: rgba(28, 38, 32, .75); color: #fff; }
.poredjenje__oznaka--d { right: 10px; background: var(--ociscena); color: #fff; }

/* ---------- INFO ---------- */
.info { max-width: 720px; margin: 0 auto; }
.info__uvod { font-size: 1.15rem; color: var(--siva); }
.info section { margin-top: 34px; }
.koraci--uski { margin-top: 12px; }
.pojmovi { margin: 0 0 1em; display: grid; gap: 12px; }
.pojmovi div { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); padding: 12px 16px; }
.pojmovi dt { font-weight: 700; display: flex; gap: 8px; align-items: center; color: var(--bor); }
.pojmovi dd { margin: 4px 0 0; color: var(--siva); }
.lista-savjeta { padding-left: 1.2em; }
.lista-savjeta li { margin-bottom: 6px; }
.info__cta { margin-top: 36px; }
.kontakt-podaci { margin-top: 24px; color: var(--siva); }

/* ---------- ADMIN ---------- */
body.admin { padding-bottom: 40px; }
.admin-login { max-width: 400px; margin: 10vh auto; padding: 0 16px; }
.admin-login h1 { display: flex; gap: 10px; align-items: center; font-size: 1.8rem; }
.admin-login .forma { background: var(--bijela); padding: 18px; border-radius: var(--r); border: 1px solid var(--linija); margin-top: 12px; }
.admin-login .polje { margin-top: 0; }
.admin-login__nazad { text-align: center; margin-top: 16px; }
.admin-zaglavlje { background: var(--bor); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: inset 0 3px 0 var(--narandzasta); }
.admin-zaglavlje__unutra { max-width: var(--sirina); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 58px; padding: 0 16px; }
.admin-zaglavlje .logo, .admin-zaglavlje a { color: #fff; }
.admin-zaglavlje .logo__tekst small { color: rgba(255, 255, 255, .7); }
.admin-zaglavlje__desno { display: flex; gap: 16px; font-size: .95rem; }
.admin-tabovi { max-width: var(--sirina); margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
.admin-tabovi::-webkit-scrollbar { display: none; }
.admin-tabovi a { flex: none; padding: 10px 12px 12px; text-decoration: none; font-weight: 700; font-size: .93rem; color: rgba(255, 255, 255, .78); border-bottom: 3px solid transparent; }
.admin-tabovi a.aktivno { color: #fff; border-color: #B9E3A9; }
.broj { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .8rem; text-align: center; }
.broj--hitno { background: var(--mala); color: #2A1F02; }
.admin-glavni { max-width: var(--sirina); margin: 0 auto; padding: 18px 16px; display: grid; gap: 14px; }
.admin-prazno { text-align: center; color: var(--siva); padding: 40px 0; }
.admin-kartica { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); padding: 14px; }
.admin-kartica--nova { border-left: 4px solid var(--mala); }
.admin-kartica--uska { max-width: 480px; }
.admin-prijava { display: grid; gap: 16px; }
.admin-prijava__slika img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-malo); }
.admin-prijava__info h2 { font-size: 1.25rem; margin-bottom: 6px; }
.admin-prijava__dvije { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-prijava__dvije a { position: relative; display: block; }
.admin-prijava__dvije img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--r-malo); }
.admin-prijava__dvije span { position: absolute; left: 6px; bottom: 6px; background: rgba(28, 38, 32, .8); color: #fff; font-size: .78rem; padding: 2px 8px; border-radius: 999px; }
.poredjenje--malo { margin-bottom: 8px; }
.admin-podaci { margin: 8px 0; display: grid; gap: 4px; font-size: .93rem; }
.admin-podaci div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.admin-podaci dt { color: var(--siva); }
.admin-podaci dd { margin: 0; overflow-wrap: anywhere; }
.admin-podaci .ok { color: var(--ociscena); font-weight: 700; }
.admin-podaci .upoz { color: var(--upozorenje); font-weight: 700; }
.admin-opis { background: var(--papir); padding: 10px 12px; border-radius: var(--r-malo); font-size: .95rem; }
.admin-ciscenje { border-top: 1px dashed var(--linija); margin-top: 12px; padding-top: 12px; }
.admin-ciscenje h3 { color: var(--ociscena); }
.admin-akcije { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
form.inline { display: inline; margin: 0; }
.admin-uredi { margin-top: 12px; font-size: .95rem; }
.admin-uredi summary { cursor: pointer; color: var(--bor); font-weight: 700; }
.admin-uredi .forma { gap: 0; }
.admin-uredi__red { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-uredi .dugme { margin-top: 12px; justify-self: start; }
.admin-meta { color: var(--siva); font-size: .88rem; }
.admin-poruka__glava { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.admin-poruka__tekst { white-space: normal; }
.admin-stranice { display: flex; gap: 6px; justify-content: center; }
.admin-stranice a { padding: 6px 12px; border-radius: var(--r-malo); background: var(--bijela); border: 1px solid var(--linija); text-decoration: none; }
.admin-stranice a.aktivno { background: var(--bor); color: #fff; }

/* ---------- ŠIRI EKRANI ---------- */
@media (min-width: 640px) {
  .brojke { grid-template-columns: repeat(4, 1fr); }
  .izbor--2 { grid-template-columns: 1fr 1fr; }
  .izbor--3 { grid-template-columns: repeat(3, 1fr); }
  .izbor--3 .izbor__opcija > span { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 4px; height: 100%; }
  .izbor--3 .izbor__opcija > span > .velicina-znak { grid-row: auto; margin-bottom: 4px; }
  .lokacija-izbor { grid-template-columns: 1fr 1fr; }
  .prije-poslije-niz { grid-template-columns: repeat(3, 1fr); }
  .lista-prijava { grid-template-columns: 1fr 1fr; }
  .lista-prijava li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stanje { padding: 28px 30px; }
  .pojmovi--velicine { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  :root { --nav-v: 0px; }
  body { padding-bottom: 0; }
  .nav-mobilna { display: none; }
  .zaglavlje__unutra { height: 68px; }
  :root { --zaglavlje-v: 68px; }
  .nav-desktop { display: flex; align-items: center; gap: 6px; }
  .nav-desktop > a:not(.dugme) { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--kora); font-weight: 700; }
  .nav-desktop > a:not(.dugme):hover { background: var(--lisaj); }
  .nav-desktop > a.aktivno:not(.dugme) { background: var(--lisaj); color: var(--bor); }
  .nav-desktop .dugme { margin-left: 10px; }
  .glavni { padding-top: 36px; }
  .glavni--mapa { padding: 0; }
  .uvod { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding-bottom: 44px; }
  .uvod__akcije .dugme--veliko, .uvod__akcije .dugme--sporedno { flex: none; }
  .koraci-sekcija .koraci { grid-template-columns: repeat(4, 1fr); }
  .koraci--uski { grid-template-columns: 1fr !important; }
  .admin-prijava { grid-template-columns: 360px 1fr; }
  .galerija-grupe { grid-template-columns: 1fr 1fr; }
  .forma-dno { position: static; background: none; }
  .lok-mapa { height: 360px; }
}

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

/* =========================================================
   KATEGORIJE (deponija, požar, poplava, odron, klizište)
   ========================================================= */
/* Pinovi: boja = kategorija, veličina = ozbiljnost */
.pin--kat { --boja: var(--srednja); }
.pin--v30 { width: 30px; height: 30px; border-width: 2.5px; }
.pin--v30 svg { width: 14px; height: 14px; }
.pin--v32 { width: 32px; height: 32px; }
.pin--v32 svg { width: 15px; height: 15px; }
.pin--v36 { width: 36px; height: 36px; }
.pin--v42 { width: 42px; height: 42px; }
.pin--v42 svg { width: 21px; height: 21px; }

/* Brzi izbor kategorije na početnoj */
.brze-kategorije { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.brza-kat {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 6px; min-height: 40px;
  border-radius: 999px; background: var(--bijela); border: 1px solid var(--linija);
  color: var(--kora); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.brza-kat:hover { border-color: var(--kb); color: var(--kora); background: color-mix(in srgb, var(--kb) 8%, var(--bijela)); }
.brza-kat__ik { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kb); color: #fff; }
.brza-kat__ik .ik { width: 16px; height: 16px; }

/* Statistika po kategorijama */
.sanacija__kategorije { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sanacija__kategorije li {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: .93rem;
}
.sanacija__kat-ik { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--kb); display: grid; place-items: center; color: #fff; }
.sanacija__kategorije strong { grid-row: span 2; font-family: var(--font-naslov); font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sanacija__kategorije small { opacity: .7; font-size: .8rem; grid-column: 2; }

/* Lista prijava: ikona kategorije na sličici */
.prijava-red__slika { position: relative; flex: none; }
.prijava-red__kat {
  position: absolute; left: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--kb); color: #fff; display: grid; place-items: center; border: 2px solid var(--bijela);
}
.prijava-red__kat .ik { width: 13px; height: 13px; vertical-align: 0; }

.znacka--kat { background: color-mix(in srgb, var(--kb) 14%, var(--bijela)); color: color-mix(in srgb, var(--kb) 75%, #000); gap: 4px; }
.znacka--kat .ik { width: .95em; height: .95em; vertical-align: 0; }

/* Mapa: filteri po kategoriji */
.cip { display: inline-flex; align-items: center; gap: 6px; }
.cip--kat .ik { color: var(--kb); }
.cip--kat.aktivno { background: var(--kb); border-color: var(--kb); }
.cip--kat.aktivno .ik { color: #fff; }
.cip--rijeseno .ik { color: var(--ociscena); }
.cip--rijeseno.aktivno { background: var(--ociscena); border-color: var(--ociscena); }
.cip--rijeseno.aktivno .ik { color: #fff; }
.legenda__pin { width: 24px; height: 24px; border-radius: 50%; background: var(--kb); color: #fff; display: grid; place-items: center; flex: none; }
.legenda__pin .ik, .legenda__pin svg { width: 13px; height: 13px; }

/* Forma: izbor kategorije */
.izbor--kat { grid-template-columns: 1fr 1fr; }
.izbor__opcija--kat > span { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; row-gap: 6px; min-height: 96px; height: 100%; padding: 12px 8px; }
.izbor__opcija--kat strong { line-height: 1.25; }
.izbor__opcija--kat > span > .kat-ik { grid-row: auto; }
.kat-ik { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--kb) 14%, var(--bijela)); color: var(--kb); transition: background-color .15s, color .15s; }
.kat-ik .ik { width: 20px; height: 20px; }
.izbor__opcija--kat input:checked + span { border-color: var(--kb); background: color-mix(in srgb, var(--kb) 7%, var(--bijela)); box-shadow: 0 0 0 1px var(--kb); }
.izbor__opcija--kat input:checked + span .kat-ik { background: var(--kb); color: #fff; }
.izbor__opcija--kat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.izbor__opcija--kat:last-child:nth-child(odd) > span { grid-template-columns: auto auto; justify-content: center; min-height: 64px; column-gap: 12px; }

/* Hitni brojevi */
.hitno {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-malo); background: #FBEDEA; border-left: 4px solid var(--greska);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: #6E2215;
}
.hitno p { margin: 0; flex: 1 1 220px; font-size: .95rem; }
.dugme--hitno { background: var(--greska); border-color: var(--greska); color: #fff; flex: none; }
.dugme--hitno:hover { background: #8E2F1E; border-color: #8E2F1E; }
.hitno--info { display: block; margin: 0 0 8px; }
.hitno--info p { margin-bottom: 10px; }
.hitni-brojevi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hitni-brojevi a { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: var(--r-malo); background: var(--bijela); color: #6E2215; text-decoration: none; }
.hitni-brojevi strong { font-family: var(--font-naslov); font-size: 1.25rem; }
.podnozje__hitno { font-size: .9rem; }

/* Info: opisi kategorija */
.kat-opisi { display: grid; gap: 12px; margin-bottom: 1em; }
.kat-opis { background: var(--bijela); border: 1px solid var(--linija); border-top: 4px solid var(--kb); border-radius: var(--r-malo); padding: 14px 16px; }
.kat-opis h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kat-opis__ik { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--kb); color: #fff; }
.kat-opis__ik .ik { width: 18px; height: 18px; }
.kat-opis dl { margin: 0; display: grid; gap: 6px; }
.kat-opis dl div { display: grid; grid-template-columns: 170px 1fr; gap: 8px; font-size: .95rem; }
.kat-opis dt { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.kat-opis dd { margin: 0; color: var(--siva); }
.kat-opis__hitno { margin: 10px 0 0; font-size: .9rem; color: var(--greska); font-weight: 700; }

@media (max-width: 520px) {
  .kat-opis dl div { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 640px) {
  .izbor--kat { grid-template-columns: repeat(5, 1fr); }
  .izbor__opcija--kat:last-child:nth-child(odd) { grid-column: auto; }
  .izbor__opcija--kat:last-child:nth-child(odd) > span { grid-template-columns: 1fr; min-height: 96px; }
  .sanacija__kategorije { grid-template-columns: repeat(5, 1fr); }
  .sanacija__kategorije li { grid-template-columns: auto 1fr; }
  .sanacija__kategorije strong { grid-row: auto; grid-column: 1 / -1; margin-top: 6px; }
  .sanacija__kat-ik { grid-row: auto; }
  .sanacija__kategorije small { grid-column: 1 / -1; }
  .hitni-brojevi { grid-template-columns: repeat(4, 1fr); }
  .kat-opisi { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   PRIJAVI GREŠKU: modal, captcha, admin
   ========================================================= */
.detalj__dno { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 4px; }
.detalj__dno .detalj__id { margin: 0; }
.link-greska { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 700; color: var(--siva); text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linija); background: var(--bijela); }
.link-greska:hover { color: var(--greska); border-color: var(--greska); }
.popup__greska { display: block; text-align: center; margin-top: 10px; font-size: .82rem; color: var(--siva); }

.modal { position: fixed; inset: 0; z-index: 2500; display: none; align-items: flex-end; justify-content: center; }
.modal.otvoren, html:not(.js) .modal:target { display: flex; }
.modal__pozadina { position: absolute; inset: 0; background: rgba(12, 18, 14, .6); }
.modal__okvir {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--papir); border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: modal-gore .22s ease-out;
}
@keyframes modal-gore { from { transform: translateY(30px); opacity: 0; } }
.modal__glava { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal__glava h2 { margin: 0; }
.modal__zatvori { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--kora); background: var(--bijela); border: 1px solid var(--linija); flex: none; }
.modal__opis { color: var(--siva); font-size: .95rem; margin: 6px 0 4px; }
.forma--modal { gap: 0; }
.forma--modal .polje { margin-top: 14px; }
.modal__dugmad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.modal__dugmad .dugme { flex: 1 1 200px; }
.modal .obavijest { margin-top: 10px; }

.captcha__uputa { margin: 2px 0 10px; font-size: .92rem; color: var(--siva); line-height: 1.45; }
.captcha__uputa strong { color: var(--tekst, #1b2a22); }
.captcha__uputa b { display: inline-block; min-width: 1.9em; padding: 0 6px; border-radius: 6px; background: var(--lisaj-svijetli); color: var(--bor); text-align: center; }
.captcha__red { display: flex; align-items: center; gap: 8px; }
.captcha__slika { width: 210px; height: 64px; max-width: 100%; border-radius: 10px; border: 1px solid var(--linija); background: var(--lisaj-svijetli); user-select: none; flex: 0 1 auto; min-width: 0; }
.captcha__strelica { color: var(--bor); font-size: 1.4rem; font-weight: 700; flex: none; }
.captcha__polje { position: relative; flex: none; }
.polje input.captcha__unos {
  width: 84px; max-width: none; height: 64px; padding: 0 8px; text-align: center;
  font-size: 1.7rem; font-weight: 800; letter-spacing: .08em;
  border: 2px solid var(--bor); border-radius: 10px; background: var(--bijela);
}
.polje input.captcha__unos::placeholder { color: #b9c7bd; font-weight: 700; }
.polje input.captcha__unos:focus { outline: none; box-shadow: 0 0 0 4px rgba(63, 125, 82, .22); }
.captcha__ok {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ociscena, #2e8b4e); color: #fff; font-size: 14px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transform: scale(0); transition: transform .18s ease;
}
.captcha--tacno .captcha__ok { transform: scale(1); }
.captcha--tacno input.captcha__unos { border-color: var(--ociscena, #2e8b4e); background: #EFF8F1; }
.captcha--provjera input.captcha__unos { opacity: .6; }
.captcha__novi { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linija); background: var(--bijela); color: var(--bor); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.captcha__novi:hover { border-color: var(--bor); }
@keyframes captcha-dugme { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 125, 82, .55); } 50% { box-shadow: 0 0 0 8px rgba(63, 125, 82, 0); } }
.captcha-spremno { animation: captcha-dugme 1s ease 2; }
@media (max-width: 420px) {
  .captcha__strelica { display: none; }
  .captcha__slika { width: 168px; height: auto; aspect-ratio: 210 / 64; }
  .polje input.captcha__unos { width: 72px; height: 54px; font-size: 1.5rem; }
}

.admin-filter { background: var(--lisaj-svijetli); padding: 8px 12px; border-radius: var(--r-malo); font-size: .93rem; margin: 0; }
.admin-oznaka-greske { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--greska); background: #FBEDEA; padding: 3px 10px; border-radius: 999px; text-decoration: none; margin-bottom: 6px; }
.admin-greska__red { display: flex; gap: 14px; align-items: flex-start; }
.admin-greska__slika { flex: none; width: 84px; height: 84px; border-radius: var(--r-malo); overflow: hidden; }
.admin-greska__slika img { width: 100%; height: 100%; object-fit: cover; }
.admin-greska__tekst { min-width: 0; flex: 1; }
.admin-greska__tekst p { margin: 0 0 6px; }
.admin-greska__vrsta { font-weight: 700; color: var(--greska); }
.admin-greska__vrsta .znacka { margin-left: 6px; vertical-align: 2px; }
.admin-greska--rijesena { opacity: .7; }

@media (min-width: 640px) {
  .modal { align-items: center; padding: 20px; }
  .modal__okvir { border-radius: 20px; padding: 22px 24px; }
}

/* =========================================================
   RIJEŠENO (i bez fotografije), CAPTCHA NA PRIJAVI, ADMIN RJEŠAVANJE
   ========================================================= */
.pin-sklop { position: relative; display: inline-block; }
.pin--ociscena svg { color: #fff; }
.pin-kvacica {
  position: absolute; top: -6px; right: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--ociscena); display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.pin-kvacica svg { width: 12px; height: 12px; }

.rijeseno-traka {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 16px;
  border-radius: var(--r-malo); background: #E7F3EA; color: #1C6234; border-left: 4px solid var(--ociscena);
}
.rijeseno-traka > .ik { width: 28px; height: 28px; flex: none; }
.rijeseno-traka div { display: flex; flex-direction: column; }
.rijeseno-traka span { font-size: .9rem; color: var(--siva); }

.pp-kartica__bez-foto {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--ociscena); color: #fff; font-weight: 700; text-align: center; padding: 8px;
}
.pp-kartica__bez-foto .ik { width: 30px; height: 30px; }

.blok__opis--mali { font-size: .85rem; margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.blok__opis--mali .ik { margin-top: 3px; }
#blok-captcha .polje { margin-top: 4px; }
.captcha__poruka[hidden] { display: none !important; }

.admin-rijesi {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px; border-radius: var(--r-malo); background: #E7F3EA; border: 1px solid #BEE0C6;
}
.admin-rijesi input[type=text] {
  flex: 1 1 220px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: .93rem;
  border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela);
}
.admin-rijesi small { flex: 1 1 100%; color: var(--siva); }
.dugme--rijesi { background: var(--ociscena); border-color: var(--ociscena); color: #fff; }
.dugme--rijesi:hover { background: #1F6E39; border-color: #1F6E39; color: #fff; }

/* Vođenje kroz formu: sljedeći korak */
.blok, .forma-dno { scroll-margin-top: calc(var(--zaglavlje-v) + 14px); }
.blok--sljedeci { animation: sljedeci 1.5s ease-out; }
@keyframes sljedeci {
  0%   { box-shadow: 0 0 0 0 rgba(226, 106, 18, .55); border-color: var(--narandzasta); }
  60%  { box-shadow: 0 0 0 8px rgba(226, 106, 18, 0); border-color: var(--narandzasta); }
  100% { box-shadow: 0 0 0 0 rgba(226, 106, 18, 0); }
}

/* =========================================================
   TOPLOTNA MAPA, U BLIZINI, BROJAČ ISTIH PRIJAVA, KOMENTARI, PWA
   ========================================================= */
/* Brojač istih prijava */
.znacka--brojac { background: var(--kora); color: #fff; }
.pin-brojac {
  position: absolute; top: -8px; left: -8px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
  background: var(--kora); color: #fff; font: 700 11px/19px var(--font-tekst); text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Dugme toplotne mape */
.mapa-dugme--heat { top: 64px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.mapa-dugme--heat .ik { width: 22px; height: 22px; color: var(--narandzasta-tamna); }
.mapa-dugme--heat.aktivno { background: var(--narandzasta); border-color: var(--narandzasta); }
.mapa-dugme--heat.aktivno .ik { color: #fff; }
.heat-legenda {
  position: absolute; z-index: 600; left: 12px; bottom: 82px; width: min(260px, calc(100% - 90px));
  background: var(--bijela); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--sjena); font-size: .88rem;
  display: grid; gap: 4px;
}
.heat-legenda__traka { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #F2C230, #F08A24, #D6402B, #7A1414); }
.heat-legenda__oznake { display: flex; justify-content: space-between; color: var(--siva); font-size: .8rem; }
.heat-legenda small { color: var(--siva); font-size: .78rem; line-height: 1.35; }

/* U blizini */
.mapa-blizina-dugme {
  position: absolute; z-index: 550; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; min-height: 44px; border-radius: 999px;
  background: var(--narandzasta); color: #fff; border: 0; font-weight: 700; font-size: .95rem; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(226, 106, 18, .8);
}
.mapa-blizina-dugme.aktivno { background: var(--narandzasta-tamna); }
.blizina {
  position: absolute; z-index: 700; left: 0; right: 0; bottom: 0; max-height: 52%;
  display: flex; flex-direction: column; background: var(--papir);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .22); padding: 6px 14px 10px;
  transition: max-height .25s ease;
}
.blizina::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--linija); margin: 4px auto 6px; }
.blizina--skupljeno { max-height: 118px; overflow: hidden; }
.blizina__glava { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.blizina__glava h2 { font-size: 1.1rem; margin: 0; display: flex; gap: 7px; align-items: center; }
.blizina__glava h2 .ik { color: var(--narandzasta); }
.blizina__zatvori { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linija); background: var(--bijela); display: grid; place-items: center; cursor: pointer; color: var(--kora); }
.blizina__radijusi { display: flex; gap: 6px; margin: 8px 0 4px; }
.blizina__radijusi .cip { min-height: 36px; padding: 6px 14px; box-shadow: none; }
.blizina__radijusi .cip.aktivno { background: var(--narandzasta); border-color: var(--narandzasta); }
.blizina__status { font-size: .9rem; color: var(--siva); margin: 4px 0 6px; }
.blizina__lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; }
.blizina__stavka {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 6px; border-radius: var(--r-malo); background: var(--bijela); border: 1px solid var(--linija); color: var(--kora); font: inherit;
}
.blizina__stavka:hover { border-color: var(--narandzasta); }
.blizina__stavka img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.blizina__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.blizina__tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.blizina__tekst span { font-size: .82rem; color: var(--siva); display: flex; align-items: center; gap: 6px; }
.blizina__tacka { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.blizina__dist { font-weight: 700; font-size: .9rem; color: var(--narandzasta-tamna); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapa-stranica:has(.blizina:not([hidden])) .mapa-blizina-dugme,
.mapa-stranica:has(.blizina:not([hidden])) .mapa-dugme--legenda,
.mapa-stranica:has(.blizina:not([hidden])) .heat-legenda { display: none; }

/* Admin: povezivanje istih prijava */
.admin-iste, .admin-povezane { margin: 10px 0; padding: 10px; border-radius: var(--r-malo); background: var(--papir); border: 1px dashed var(--linija); display: grid; gap: 8px; }
.admin-povezane { border-style: solid; background: var(--lisaj-svijetli); }
.admin-iste__naslov { margin: 0; font-weight: 700; font-size: .9rem; display: flex; gap: 6px; align-items: center; color: var(--bor); }
.admin-iste__red { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-iste__red img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.admin-iste__red > div { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; font-size: .9rem; }
.admin-iste__red > div span { color: var(--siva); font-size: .82rem; }
.admin-iste__red--vjerovatno { padding: 6px; border-radius: 6px; background: #FDEBDD; }
.dugme--povezi { background: var(--kora); border-color: var(--kora); color: #fff; }
.dugme--povezi:hover { background: #000; border-color: #000; color: #fff; }
.admin-komentar__tekst { margin: 6px 0 0; font-size: 1rem; }

/* Komentari */
.komentari { margin: 26px 0 22px; }
.komentari h2 { display: flex; align-items: center; gap: 8px; }
.komentari__broj { font-family: var(--font-tekst); font-size: .85rem; background: var(--lisaj); color: var(--bor); padding: 1px 10px; border-radius: 999px; }
.komentari__prazno, .komentari__limit { color: var(--siva); font-size: .95rem; }
.komentari__lista { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.komentar { display: flex; gap: 10px; align-items: flex-start; }
.komentar__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lisaj); color: var(--bor); display: grid; place-items: center; flex: none; }
.komentar > div { background: var(--bijela); border: 1px solid var(--linija); border-radius: 4px 14px 14px 14px; padding: 8px 12px; min-width: 0; flex: 1; }
.komentar__meta { margin: 0 0 2px; font-size: .82rem; color: var(--siva); }
.komentar__meta strong { color: var(--kora); margin-right: 6px; }
.komentar__tekst { margin: 0; overflow-wrap: anywhere; }
.komentar-forma { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); padding: 4px 14px 14px; gap: 0; }
.komentar-forma__info { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--siva); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.komentar-forma__info--puno #komentar-brojac { color: var(--greska); font-weight: 700; }
.komentar-forma__dugme { margin-top: 12px; }
.komentari__limit { display: flex; gap: 6px; align-items: center; background: var(--lisaj-svijetli); padding: 10px 12px; border-radius: var(--r-malo); }

/* PWA */
.pwa-kartica {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative;
  background: var(--bijela); border: 1px solid var(--linija); border-left: 4px solid var(--narandzasta);
  border-radius: var(--r); padding: 12px 44px 12px 14px; margin-bottom: 22px;
}
.pwa-kartica[hidden] { display: none; }
.pwa-kartica__ikona img { border-radius: 10px; display: block; }
.pwa-kartica__tekst { flex: 1 1 200px; display: flex; flex-direction: column; font-size: .92rem; }
.pwa-kartica__tekst span { color: var(--siva); }
.pwa-kartica__zatvori { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--papir); display: grid; place-items: center; cursor: pointer; color: var(--siva); }
.pwa-dugme { display: inline-flex; align-items: center; gap: 5px; font-size: inherit; padding: 0; }

@media (min-width: 900px) {
  .blizina { left: 12px; right: auto; top: 70px; bottom: 26px; width: 340px; max-height: none; border-radius: var(--r); }
  .blizina::before { display: none; }
  .blizina--skupljeno { max-height: none; }
}
.komentari, #komentari { scroll-margin-top: calc(var(--zaglavlje-v) + 12px); }

/* Ekran "Šaljem podatke…" */
.loader-ekran {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(12, 18, 14, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: loader-pojava .2s ease-out;
}
.loader-ekran[hidden] { display: none !important; }
.loader-ekran__okvir {
  background: var(--bijela); border-radius: 18px; padding: 26px 30px; text-align: center; max-width: 320px; width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.loader-ekran__spiner {
  display: block; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid var(--lisaj); border-top-color: var(--narandzasta); animation: vrti .8s linear infinite;
}
.loader-ekran__tekst { font-family: var(--font-naslov); font-weight: 700; font-size: 1.15rem; margin: 0 0 4px; }
.loader-ekran small { color: var(--siva); }
body.salje-se { overflow: hidden; }
@keyframes loader-pojava { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loader-ekran__spiner { animation: vrti 1.6s linear infinite !important; } }

/* Galerija: fotografije se otvaraju samo u pregledu */
[data-velika] { cursor: zoom-in; }
[data-velika] img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.referenca > a { display: block; }
.referenca__ostale a { flex: none; display: block; }
.lightbox__brojac[hidden], .lightbox__dugme[hidden] { display: none !important; }
.lightbox__ucitava {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: vrti .8s linear infinite; pointer-events: none;
}
.lightbox__ucitava[hidden] { display: none; }

/* =========================================================
   BROJAČ DANA, UPOZORENJA FOTOGRAFIJA, OBAVJEŠTENJA, STATISTIKA, IZVJEŠTAJ
   ========================================================= */
/* Brojač dana */
.prijava-red__dani { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--narandzasta-tamna); }
.prijava-red__dani .ik { width: .9em; height: .9em; vertical-align: 0; }
.detalj__dani {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 3px 11px; border-radius: 999px;
  font-size: .85rem; font-weight: 700; background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna);
}
.detalj__dani--rijeseno { background: #E7F3EA; color: #1C6234; }
.stanje__linkovi { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: .92rem; }
.stanje__linkovi a { color: #fff; opacity: .9; display: inline-flex; gap: 6px; align-items: center; }

/* Upozorenja za fotografije (forma) */
.foto-upozorenja { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-malo); background: #FBF4DF; border-left: 4px solid var(--mala); color: #5B4307; font-size: .9rem; }
.foto-upozorenja p { margin: 0 0 4px; }
.foto-upozorenja p:last-child { margin: 0; }
.lok-dugme--foto { border-style: dashed; }
.lok-dugme--foto > .ik { color: var(--narandzasta-tamna); }
@media (min-width: 640px) { .lokacija-izbor:has(.lok-dugme--foto:not([hidden])) { grid-template-columns: 1fr 1fr 1fr; } }

/* Admin: provjera fotografija */
.admin-foto { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-malo); background: var(--papir); border: 1px solid var(--linija); font-size: .88rem; }
.admin-foto--upozorenje { background: #FBF4DF; border-color: #E8C976; }
.admin-foto__naslov { margin: 0 0 6px; font-weight: 700; }
.admin-foto--upozorenje .admin-foto__naslov { color: #7A5300; }
.admin-foto__upoz { margin: 0 0 4px; color: #6E2215; }
.admin-foto__lista { margin: 6px 0 0; padding-left: 18px; color: var(--siva); }

/* Obavještenja u panelu "U blizini" */
.blizina__obavjestenja { margin: 2px 0 8px; }
.blizina__zvono { width: 100%; justify-content: flex-start; min-height: 42px; font-size: .9rem; }
.blizina__zvono[aria-pressed="true"] { background: var(--lisaj); border-color: var(--bor); }
.blizina__zvono .ik { color: var(--narandzasta-tamna); }
.blizina__obav-info { font-size: .8rem; color: var(--siva); margin: 4px 2px 0; }
.blizina__obav-info:empty { display: none; }

/* Statistika */
.stat { max-width: var(--sirina); margin: 0 auto; }
.stat__glava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.stat__glava h1 { margin-bottom: 4px; }
.stat__podnaslov { color: var(--siva); margin: 0; max-width: 60ch; }
.stat__period select { font: inherit; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--linija); background: var(--bijela); min-height: 44px; }
.stat-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat-kpi__k { background: var(--bijela); border: 1px solid var(--linija); border-top: 4px solid var(--bor); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; }
.stat-kpi__k--narandza { border-top-color: var(--narandzasta); }
.stat-kpi__k--zeleno { border-top-color: var(--ociscena); }
.stat-kpi__v { font-family: var(--font-naslov); font-weight: 800; font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-kpi__n { color: var(--siva); font-size: .88rem; margin-top: 4px; }
.stat-kartica { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); padding: 16px; min-width: 0; }
.stat-kartica h2 { font-size: 1.15rem; margin-bottom: 4px; }
.stat-napomena { color: var(--siva); font-size: .85rem; margin: 0 0 10px; }
.stat-mreza { display: grid; gap: 14px; margin-top: 14px; }
.stat-graf { position: relative; height: 240px; }
.stat-graf--visok { height: 300px; }
.stat-tone__red { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 10px; }
.stat-tone__red div { display: flex; flex-direction: column; font-size: .85rem; color: var(--siva); }
.stat-tone__v { font-family: var(--font-naslov); font-weight: 800; font-size: 1.6rem; color: var(--narandzasta-tamna); line-height: 1.1; }
.stat-tone__v--zeleno { color: var(--ociscena); }
.stat-tone__v--siva { color: var(--kora); }
.stat-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.stat-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-malo); background: var(--papir); }
.stat-lista__tacka { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.stat-lista__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stat-lista__tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-lista__tekst strong a { color: inherit; }
.stat-lista__tekst small { color: var(--siva); }
.stat-lista__dani { font-weight: 700; color: var(--narandzasta-tamna); white-space: nowrap; font-size: .9rem; }
.stat-lista__link { font-size: .85rem; font-weight: 700; }
.stat-prazno { color: var(--siva); }
.stat-dno { margin: 18px 0 0; color: var(--siva); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.stat-dno a { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }

/* Mjesečni izvještaj */
.izvj { max-width: 900px; margin: 0 auto; }
.izvj__alati { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.izvj__izbor { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.izvj__izbor select { font: inherit; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--linija); background: var(--bijela); min-height: 40px; }
.izvj__glava { border-bottom: 3px solid var(--bor); padding-bottom: 12px; margin-bottom: 16px; }
.izvj__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.izvj__logo img { border-radius: 10px; }
.izvj__logo div { display: flex; flex-direction: column; font-size: .85rem; color: var(--siva); }
.izvj__logo strong { color: var(--kora); font-size: 1rem; }
.izvj__glava h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); margin-bottom: 4px; }
.izvj__meta { color: var(--siva); margin: 0; font-size: .9rem; }
.izvj__sazetak { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.izvj__sazetak div { border: 1px solid var(--linija); border-radius: var(--r-malo); padding: 12px; background: var(--bijela); display: flex; flex-direction: column; font-size: .85rem; color: var(--siva); }
.izvj__v { font-family: var(--font-naslov); font-size: 1.9rem; font-weight: 800; color: var(--kora); line-height: 1.1; }
.izvj__v--zeleno { color: var(--ociscena); }
.izvj__v--narandza { color: var(--narandzasta-tamna); }
.izvj__sekcija { margin-bottom: 22px; break-inside: avoid; }
.izvj__sekcija h2 { font-size: 1.2rem; border-left: 4px solid var(--narandzasta); padding-left: 10px; }
.izvj__napomena { color: var(--siva); font-size: .85rem; margin: 6px 0 0; }
.izvj__tabela-omot { overflow-x: auto; }
.izvj__tabela { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--bijela); }
.izvj__tabela th, .izvj__tabela td { padding: 7px 10px; border-bottom: 1px solid var(--linija); text-align: left; vertical-align: top; }
.izvj__tabela th { background: var(--lisaj-svijetli); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bor); }
.izvj__tabela td:not(:first-child):not(:nth-child(3)) { white-space: nowrap; }
.izvj__tabela tfoot td { font-weight: 700; border-top: 2px solid var(--bor); }
.izvj__tabela a { color: inherit; }
.izvj__tacka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.izvj__mapa { height: 340px; border-radius: var(--r-malo); border: 1px solid var(--linija); }
.izvj__zone { margin: 8px 0 0; padding-left: 20px; }
.izvj__zone li { margin-bottom: 4px; }
.izvj__dno { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--linija); color: var(--siva); font-size: .82rem; }

@media (min-width: 640px) {
  .stat-kpi { grid-template-columns: repeat(4, 1fr); }
  .izvj__sazetak { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .stat-mreza { grid-template-columns: 1fr 1fr; }
  .stat-kartica--siroka { grid-column: 1 / -1; }
}

/* Štampa mjesečnog izvještaja */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  .zaglavlje, .nav-mobilna, .podnozje, .izvj__alati, .preskoci, .obavijest, .pwa-kartica, .leaflet-control-container { display: none !important; }
  .glavni { padding: 0; max-width: none; }
  .izvj { max-width: none; }
  .izvj__sazetak div, .izvj__tabela, .izvj__mapa { box-shadow: none; }
  .izvj__tabela th { background: #EEF4EA !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .izvj__tacka, .izvj__glava, .izvj__sekcija h2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .izvj__mapa { height: 300px; }
  a { color: inherit; text-decoration: none; }
  tr { break-inside: avoid; }
}

/* =========================================================
   PODNOŽJE (novi raspored), DUGMAD BEZ PRELOMA, KOMENTARI NA ČEKANJU, ZONE NA MAPI
   ========================================================= */
.podnozje { background: var(--bor); color: rgba(255, 255, 255, .82); border-top: 0; }
.podnozje__unutra { display: grid; gap: 26px; padding: 32px 18px 22px; font-size: .95rem; color: inherit; }
.podnozje a { color: #fff; }
.podnozje__brend p { margin: 10px 0 12px; max-width: 42ch; }
.logo--podnozje { color: #fff; }
.logo--podnozje .logo__znak path:first-child { fill: #fff; }
.logo--podnozje .logo__znak path:last-child { fill: var(--narandzasta); }
.logo--podnozje .logo__tekst small { color: rgba(255, 255, 255, .65); }
.podnozje .pwa-dugme { color: #fff; border-color: rgba(255, 255, 255, .5); }
.podnozje .pwa-dugme:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.podnozje__kolone { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.podnozje__kolona { display: flex; flex-direction: column; gap: 2px; }
.podnozje__kolona h2 {
  font-family: var(--font-tekst); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin: 0 0 6px;
}
.podnozje__kolona a { display: flex; align-items: center; gap: 8px; padding: 7px 0; text-decoration: none; min-height: 40px; }
.podnozje__kolona a .ik { color: #F4A261; flex: none; }
.podnozje__kolona a:hover { color: #F4A261; }
.podnozje__hitno { background: rgba(0, 0, 0, .16); border-radius: var(--r); padding: 14px; }
.podnozje__hitno p { margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.podnozje__hitno p strong { color: #fff; }
.podnozje__hitno p span { font-size: .85rem; color: rgba(255, 255, 255, .65); }
.podnozje__hitno ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.podnozje__hitno a {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; min-width: 0; line-height: 1.25;
}
.podnozje__hitno a b { font-family: var(--font-naslov); font-size: 1.15rem; color: #F4A261; }
.podnozje__hitno a:hover { background: rgba(255, 255, 255, .16); }
.podnozje__mali { font-size: .8rem; color: rgba(255, 255, 255, .55); margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }

@media (min-width: 640px) {
  .podnozje__kolone { grid-template-columns: repeat(3, 1fr); }
  .podnozje__hitno ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .podnozje__unutra { grid-template-columns: 1.1fr 1.6fr; column-gap: 48px; padding-top: 40px; }
  .podnozje__hitno, .podnozje__mali { grid-column: 1 / -1; }
  .podnozje__hitno { display: flex; align-items: center; gap: 18px; }
  .podnozje__hitno p { margin: 0; flex: 0 0 auto; }
  .podnozje__hitno ul { flex: 1; }
}

/* Dugmad na početnoj: tekst se ne prelama ("Pogledaj mapu", "U blizini") */
.uvod__akcije .dugme { white-space: nowrap; }
.uvod__akcije .dugme--sporedno { flex: 1 1 auto; padding-left: 1em; padding-right: 1em; }
@media (max-width: 380px) {
  .uvod__akcije .dugme--sporedno { font-size: .95rem; padding-left: .8em; padding-right: .8em; }
}

/* Komentar koji čeka odobrenje (vidi ga samo autor) */
.komentar--ceka > div { border-style: dashed; border-color: var(--mala); background: #FFFBEF; }
.komentar__ceka { margin: 0 0 4px; font-size: .8rem; color: #7A5300; display: flex; gap: 5px; align-items: center; }

/* Zone na toplotnoj mapi (pri većem zumiranju) */
.zona-oznaka {
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: #fff; color: var(--kora); font: 800 13px/28px var(--font-tekst); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  border: 2px solid var(--zb, #E2562B); white-space: nowrap;
}
.zona-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.zona-lista li { display: flex; flex-direction: column; font-size: .9rem; }
.zona-lista small { color: var(--siva); }

/* Mali ekrani (320 px): mreže se ne smiju širiti preko ekrana */
.brojke, .sanacija__kategorije, .hitni-brojevi, .stat-kpi, .izvj__sazetak, .izbor--kat, .stat-tone__red { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-tone__red { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sanacija__kategorije li, .hitni-brojevi li, .hitni-brojevi a, .stat-lista li, .lista-prijava li, .prijava-red, .prijava-red__tekst { min-width: 0; }
.sanacija__kategorije li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hitni-brojevi a { flex-wrap: wrap; }
@media (min-width: 640px) {
  .brojke, .stat-kpi, .izvj__sazetak { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sanacija__kategorije { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hitni-brojevi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .izbor--kat { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .stat-tone__red { grid-template-columns: 1fr; }
  .stat-lista__link { display: none; }
}

/* Dugme "Instaliraj aplikaciju" u podnožju: preko cijele širine na malim ekranima */
@media (max-width: 639px) {
  .podnozje .pwa-dugme { display: flex; width: 100%; min-height: 48px; justify-content: center; }
  .podnozje .pwa-dugme[hidden] { display: none; }
}

/* =========================================================
   BEZ SIGNALA, MOJE PRIJAVE, POTVRDE, ZAMAGLJIVANJE, GLAS, PRETRAGA, DIJELJENJE
   ========================================================= */
/* Traka "prijava čeka signal" i kratke poruke */
.red-traka {
  position: fixed; z-index: 1200; left: 10px; right: 10px; bottom: calc(var(--nav-v) + env(safe-area-inset-bottom, 0px) + 10px);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  background: var(--kora); color: #fff; font-size: .9rem; box-shadow: var(--sjena);
}
.red-traka .ik { color: #F4A261; flex: none; }
.red-traka span { flex: 1; }
.red-traka__dugme { border: 0; background: var(--narandzasta); color: #fff; font: inherit; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tost {
  position: fixed; z-index: 3500; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-v) + env(safe-area-inset-bottom, 0px) + 70px);
  width: min(440px, calc(100% - 24px)); padding: 12px 16px; border-radius: var(--r); background: var(--bor); color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: .93rem; transition: opacity .5s;
}
.tost a { color: #F4A261; font-weight: 700; }
.tost--greska { background: #8E2F1E; }
.tost--nestaje { opacity: 0; }
@media (min-width: 900px) { .red-traka { left: auto; right: 20px; bottom: 20px; max-width: 420px; } .tost { bottom: 24px; } }
.zahvala__znak--offline { background: var(--kora); }

/* Praćenje prijave */
.prati-link { text-align: left; margin: 18px 0 6px; padding: 14px; border-radius: var(--r); background: var(--bijela); border: 1px solid var(--linija); border-left: 4px solid var(--narandzasta); }
.prati-link__naslov { margin: 0 0 4px; font-weight: 700; display: flex; gap: 6px; align-items: center; color: var(--kora); }
.prati-link__opis { font-size: .88rem; margin: 0 0 10px; }
.prati-link__red { display: flex; gap: 8px; }
.prati-link__red input { flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: 8px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--papir); color: var(--kora); }
.prati-link .link-dugme { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .9rem; }
.kopirano { background: var(--ociscena) !important; border-color: var(--ociscena) !important; color: #fff !important; }
.moje-kartica {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); font-weight: 700; text-decoration: none; font-size: .92rem;
}
.moje-kartica[hidden] { display: none; }
.prati { max-width: 680px; margin: 0 auto; }
.prati__opis { color: var(--siva); }
.prati-kartica { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }
.prati-kartica__glava { display: flex; gap: 12px; align-items: center; }
.prati-kartica__glava img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-malo); flex: none; }
.prati-kartica__glava h2 { font-size: 1.1rem; margin: 0 0 4px; }
.prati-kartica__glava p { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prati-kartica__broj { font-size: .8rem; color: var(--siva); }
.prati-koraci { list-style: none; margin: 14px 0 6px; padding: 0 0 0 4px; }
.prati-koraci li { position: relative; padding: 0 0 14px 28px; display: flex; flex-direction: column; }
.prati-koraci li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linija); background: var(--bijela); }
.prati-koraci li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--linija); }
.prati-koraci li:last-child::after { display: none; }
.prati-koraci li.gotovo::before { background: var(--ociscena); border-color: var(--ociscena); }
.prati-koraci li.odbijeno::before { background: var(--greska); border-color: var(--greska); }
.prati-koraci li:not(.gotovo) strong { color: var(--siva); font-weight: 400; }
.prati-koraci span { font-size: .85rem; color: var(--siva); }
.prati-kartica__info { display: flex; gap: 6px; align-items: center; font-size: .9rem; color: var(--narandzasta-tamna); margin: 0 0 10px; }
.prati-kartica__info--crveno { color: #6E2215; display: block; }
.prati-kartica__akcije { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prati-kartica__ukloni { font-size: .85rem; margin-left: auto; color: var(--siva); }
.prati__dno { text-align: center; }

/* Potvrde "Još uvijek je tu" */
.potvrde { margin: -6px 0 22px; padding: 14px; border-radius: var(--r); background: var(--bijela); border: 1px solid var(--linija); }
.potvrde__stanje { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .93rem; }
.potvrde__stanje .ik { color: var(--ociscena); }
.potvrde__pitanje { margin: 0 0 10px; color: var(--siva); font-size: .9rem; }
.potvrde__dugmad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.potvrde__dugmad .dugme { white-space: nowrap; padding-left: .6em; padding-right: .6em; }
.potvrde__tu { background: var(--ociscena); border-color: var(--ociscena); }
.potvrde__tu:hover { background: #1F6E39; border-color: #1F6E39; }
.potvrde__poruka { margin: 10px 0 0; font-size: .9rem; color: var(--siva); }
.potvrde__poruka:empty { display: none; }
.potvrde__poruka.ok { color: var(--ociscena); font-weight: 700; }
.potvrde__poruka.greska { color: var(--greska); }
.detalj__dno-akcije { display: inline-flex; gap: 8px; flex-wrap: wrap; }
button.link-greska { font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }

/* Zamagljivanje */
.foto-stavka__zamagli {
  position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--bor); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.foto-stavka__zamagli svg { width: 17px; height: 17px; }
.foto-stavka__zamagli.aktivno { background: var(--bor); color: #fff; }
.blur-ured { position: fixed; inset: 0; z-index: 3200; background: #0C120E; display: flex; flex-direction: column; color: #fff; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.blur-ured__glava { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.blur-ured__glava span { font-size: .88rem; color: rgba(255, 255, 255, .7); }
.blur-ured__platno { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.blur-ured__platno canvas { max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair; border-radius: 6px; }
.blur-ured__ucitava { position: absolute; color: rgba(255, 255, 255, .8); }
.blur-ured__dugmad { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.blur-ured__dugmad .dugme--sporedno { color: #fff; border-color: rgba(255, 255, 255, .5); }
.blur-ured__dugmad .dugme--sporedno:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.blur-ured__dugmad .dugme[disabled] { opacity: .4; cursor: not-allowed; }
.admin-blur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; font-size: .88rem; }
.admin-blur > span { display: inline-flex; gap: 6px; align-items: center; color: var(--siva); margin-right: 4px; }
.admin-glas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 8px 10px; background: var(--lisaj-svijetli); border-radius: var(--r-malo); font-size: .9rem; }
.admin-glas audio { max-width: 100%; height: 36px; }
.admin-potvrde { margin: 10px 0; padding: 8px 12px; border-radius: var(--r-malo); background: var(--papir); font-size: .9rem; }
.admin-potvrde--upozorenje { background: #FBF4DF; border: 1px solid #E8C976; color: #5B4307; }

/* Glas */
.glas { margin-top: 10px; }
.glas__dugmad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.glas__dugme {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; min-height: 58px; cursor: pointer;
  background: var(--bijela); border: 1.5px solid var(--linija); border-radius: var(--r-malo); color: var(--kora); font: inherit;
}
.glas__dugme[hidden] { display: none; }
.glas__dugme > .ik { width: 24px; height: 24px; color: var(--bor); flex: none; }
.glas__dugme span { display: flex; flex-direction: column; min-width: 0; }
.glas__dugme small { color: var(--siva); font-size: .8rem; line-height: 1.25; }
.glas__dugme[aria-pressed="true"] { border-color: var(--greska); background: #FBEDEA; }
.glas__tacka { width: 16px; height: 16px; border-radius: 50%; background: var(--greska); flex: none; margin: 0 4px; box-shadow: 0 0 0 4px rgba(178, 63, 42, .18); }
.glas__dugme[aria-pressed="true"] .glas__tacka { animation: puls .9s infinite; }
.glas__status { margin: 8px 0 0; font-size: .88rem; color: var(--siva); font-variant-numeric: tabular-nums; }
.glas__status:empty { display: none; }
.glas__snimak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.glas__snimak audio { max-width: 100%; height: 38px; }
.glas__napomena { margin: 6px 0 0; font-size: .78rem; color: var(--siva); }
@media (max-width: 380px) { .glas__dugmad { grid-template-columns: 1fr; } }

/* Mapa: pretraga i dijeljenje */
.mapa-dugme--trazi, .mapa-dugme--podijeli { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.mapa-dugme--trazi { top: 116px; }
.mapa-dugme--podijeli { top: 168px; }
.mapa-dugme--trazi .ik, .mapa-dugme--podijeli .ik { width: 21px; height: 21px; }
.pretraga {
  position: absolute; z-index: 800; top: 8px; left: 8px; right: 8px; max-width: 520px;
  background: var(--bijela); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); overflow: hidden;
}
.pretraga__polje { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--linija); }
.pretraga__polje > .ik { color: var(--siva); flex: none; }
.pretraga__polje input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1rem; padding: 10px 0; outline: none; background: none; color: var(--kora); }
.pretraga__zatvori { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--papir); display: grid; place-items: center; cursor: pointer; color: var(--kora); flex: none; }
.pretraga__rezultati { list-style: none; margin: 0; padding: 4px; max-height: 50vh; overflow-y: auto; }
.pretraga__rezultati button { width: 100%; text-align: left; display: flex; flex-direction: column; padding: 9px 12px; border: 0; background: none; border-radius: var(--r-malo); cursor: pointer; font: inherit; color: var(--kora); }
.pretraga__rezultati button:hover, .pretraga__rezultati button:focus-visible { background: var(--lisaj-svijetli); }
.pretraga__rezultati small { color: var(--siva); font-size: .82rem; }
.pretraga__nema { padding: 10px 12px; color: var(--siva); font-size: .9rem; }
.pretraga__rezultati:empty { display: none; }

/* Meni za dijeljenje (preglednici bez ugrađenog dijeljenja) */
.dijeli-meni { position: fixed; inset: 0; z-index: 3300; background: rgba(12, 18, 14, .5); display: flex; align-items: flex-end; justify-content: center; }
.dijeli-meni__okvir { background: var(--bijela); width: 100%; max-width: 420px; border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; }
.dijeli-meni__naslov { margin: 0 0 4px; font-weight: 700; text-align: center; }
.dijeli-meni a, .dijeli-meni button { display: block; text-align: center; padding: 12px; border-radius: var(--r-malo); background: var(--papir); color: var(--kora); text-decoration: none; font: inherit; font-weight: 700; border: 0; cursor: pointer; }
.dijeli-meni__zatvori { background: none !important; color: var(--siva) !important; }
@media (min-width: 640px) { .dijeli-meni { align-items: center; } .dijeli-meni__okvir { border-radius: 18px; } }

/* =========================================================
   PROŠIRENE OPCIJE: oznake otpada, količina, video; prikaz na stranici prijave
   ========================================================= */
.blok--vise summary { color: var(--bor); }
.vise-otpad[hidden] { display: none; }
.oznake { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; min-height: 48px;
  border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); }
.oznake:focus-within { border-color: var(--mahovina); box-shadow: 0 0 0 3px rgba(63, 125, 82, .2); }
.oznake__lista { list-style: none; margin: 0; padding: 0; display: contents; }
.oznake__lista li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: var(--lisaj); color: var(--bor); font-weight: 700; font-size: .88rem; }
.oznake__lista li button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(30, 77, 58, .12); color: var(--bor); cursor: pointer; font-size: 16px; line-height: 1; }
.oznake__lista--prikaz { display: flex; flex-wrap: wrap; gap: 6px; }
.oznake__lista--prikaz li { padding: 4px 11px; }
.polje .oznake input { flex: 1 1 140px; min-width: 120px; border: 0; padding: 6px 4px; min-height: 34px; box-shadow: none !important; }
.oznake__prijedlozi { position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px;
  background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); box-shadow: var(--sjena); max-height: 240px; overflow-y: auto; }
.oznake__prijedlozi[hidden] { display: none; }
.oznake__prijedlozi li { padding: 9px 12px; border-radius: 6px; cursor: pointer; }
.oznake__prijedlozi li:hover, .oznake__prijedlozi li.aktivno { background: var(--lisaj-svijetli); }
.oznake__brze { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cip--mali { min-height: 32px; padding: 4px 11px; font-size: .84rem; box-shadow: none; font-weight: 700; }
.cip--mali[hidden] { display: none; }
.kg-polje { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.kg-polje span { color: var(--siva); font-weight: 700; }
.polje__pomoc { font-size: .82rem; color: var(--siva); margin: 2px 0 0; }
.polje__pomoc.ok { color: var(--ociscena); font-weight: 700; }

.video-izbor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.video-izbor__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 8px 6px;
  border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); color: var(--kora); font: inherit; font-size: .84rem; font-weight: 700; text-align: center; cursor: pointer; line-height: 1.2; }
.video-izbor__tab .ik { width: 20px; height: 20px; color: var(--narandzasta-tamna); }
.video-izbor__tab.aktivno { border-color: var(--bor); background: var(--lisaj-svijetli); box-shadow: 0 0 0 1px var(--bor); }
.video-panel { margin-top: 8px; }
.video-panel[hidden] { display: none; }
.video-panel input[type=url] { width: 100%; }
.video-dugme { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 58px; cursor: pointer;
  border: 2px dashed var(--mahovina); border-radius: var(--r-malo); background: var(--lisaj-svijetli); color: var(--bor); }
.video-dugme > .ik { width: 26px; height: 26px; flex: none; }
.video-dugme span { display: flex; flex-direction: column; }
.video-dugme small { color: var(--siva); font-weight: 400; }
.video-pregled { margin-top: 10px; }
.video-pregled[hidden] { display: none; }
.video-pregled video { width: 100%; max-height: 280px; border-radius: var(--r-malo); background: #000; }
.video-pregled p { margin: 6px 0 0; font-size: .85rem; color: var(--siva); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

.detalj__vise { display: grid; gap: 12px; margin: 0 0 16px; }
.detalj__otpad { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); padding: 12px 14px; }
.detalj__oznaka-naslov { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--siva); text-transform: uppercase; letter-spacing: .05em; }
.detalj__kg { margin: 10px 0 0; }
.detalj__glas { display: flex; flex-direction: column; gap: 6px; background: var(--lisaj-svijetli); padding: 10px 12px; border-radius: var(--r-malo); font-size: .9rem; }
.detalj__glas audio { width: 100%; height: 40px; }
.video-fajl { width: 100%; max-height: 480px; border-radius: var(--r); background: #000; display: block; }
.video-okvir { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.video-okvir--uspravno { aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; }
.video-okvir iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.admin-otpad { font-size: .9rem; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.admin-video { display: grid; gap: 8px; margin: 10px 0; padding: 10px; border-radius: var(--r-malo); background: var(--papir); font-size: .9rem; }
.admin-video video { width: 100%; max-height: 260px; background: #000; border-radius: 6px; }
.admin-video .video-okvir--uspravno { max-width: 220px; margin: 0; }
.admin-glas form.inline { margin-left: auto; }
.stat-otpad__naslov { margin: 12px 0 6px; font-weight: 700; font-size: .9rem; }
.stat-otpad { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stat-otpad li { padding: 4px 11px; border-radius: 999px; background: var(--lisaj-svijetli); font-size: .85rem; }
.stat-otpad strong { color: var(--bor); margin-left: 3px; }
@media (max-width: 380px) { .video-izbor__tab { font-size: .78rem; } }

/* "Nedavno riješeno" na početnoj: kompaktne kartice */
.rijeseno-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rijeseno-kartica {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; text-decoration: none; color: var(--kora);
  background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rijeseno-kartica:hover { border-color: #BEE0C6; box-shadow: 0 6px 18px -10px rgba(47, 143, 78, .55); transform: translateY(-1px); color: var(--kora); }
.rijeseno-kartica__slike { position: relative; display: flex; flex: none; }
.rijeseno-kartica__slike img, .rijeseno-kartica__bez { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 2px solid var(--bijela); }
.rijeseno-kartica__slike img:first-child { filter: grayscale(.35) brightness(.92); }
.rijeseno-kartica__slike > :nth-child(2) { position: relative; z-index: 1; margin-left: -14px; box-shadow: -3px 0 8px rgba(0, 0, 0, .18); }
.rijeseno-kartica__kvacica { z-index: 2; }
.rijeseno-kartica__kad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rijeseno-kartica__bez { display: grid; place-items: center; background: var(--ociscena); color: #fff; }
.rijeseno-kartica__bez .ik { width: 22px; height: 22px; }
.rijeseno-kartica__kvacica {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ociscena); color: #fff; border: 2px solid var(--bijela);
}
.rijeseno-kartica__kvacica .ik { width: 12px; height: 12px; }
.rijeseno-kartica__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rijeseno-kartica__tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .98rem; }
.rijeseno-kartica__vrsta { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--siva); }
.rijeseno-kartica__vrsta .ik { color: var(--kb); width: .95em; height: .95em; }
.rijeseno-kartica__kad { font-size: .8rem; font-weight: 700; color: var(--ociscena); }
@media (min-width: 640px) { .rijeseno-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vođenje kroz formu: dugme "Dalje" kod neobaveznih koraka; greška za video */
.korak-dalje { display: block; margin: 10px 0 0 auto; font-size: .9rem; }
.video-greska { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-malo); background: #FBEDEA; border-left: 4px solid var(--greska); color: #6E2215; font-size: .9rem; font-weight: 700; }
.video-greska[hidden] { display: none; }
.video-izbor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-preuzmi { margin: 6px 0 0; font-size: .82rem; color: var(--siva); }

/* =========================================================
   ADMIN: uloge, pretraga, masovne radnje, institucije, kopije, dnevnik
   ========================================================= */
.admin-ja { display: inline-flex; flex-direction: column; line-height: 1.1; font-size: .9rem; color: rgba(255, 255, 255, .92); text-align: right; }
.admin-ja small { font-size: .72rem; color: rgba(255, 255, 255, .65); }
.admin-zaglavlje__desno { align-items: center; }
.admin-trazi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); padding: 10px; }
.admin-trazi input[type=search], .admin-trazi select, .admin-trazi input[type=date] {
  font: inherit; font-size: .92rem; padding: 8px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); min-height: 40px; color: var(--kora);
}
.admin-trazi input[type=search] { flex: 1 1 220px; min-width: 0; }
.admin-trazi__datum { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--siva); }
.admin-masovno {
  position: sticky; bottom: 12px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r); background: var(--kora); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.admin-masovno[hidden] { display: none; }
.admin-masovno select { font: inherit; padding: 7px 10px; border-radius: var(--r-malo); border: 0; min-height: 38px; }
.admin-masovno .link-dugme { color: #F4A261; }
.admin-masovno__broj { margin-right: auto; }
.admin-oznaci-sve, .admin-oznaci { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--siva); cursor: pointer; }
.admin-oznaci { margin-bottom: 8px; }
.admin-oznaci input, .admin-oznaci-sve input { width: 18px; height: 18px; accent-color: var(--bor); }
.admin-kartica--oznacena { border-color: var(--bor); box-shadow: 0 0 0 2px var(--bor); }
.dugme-ip { border: 1px solid #E8B6AA; background: #FBEDEA; color: var(--greska); font: inherit; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; cursor: pointer; margin-left: 4px; }
.dugme-ip:hover { background: var(--greska); color: #fff; }
.znacka--blokirana { background: #FBEDEA; color: var(--greska); }
.admin-proslijedjeno { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-malo); background: #EEF3FB; border: 1px solid #C9D8F0; font-size: .88rem; }
.admin-proslijedjeno p { margin: 0 0 4px; font-weight: 700; display: flex; gap: 6px; align-items: center; color: #234C8A; }
.admin-proslijedjeno ul { margin: 0; padding-left: 18px; }
.admin-proslijedi summary { display: inline-flex; gap: 6px; align-items: center; }
.admin-inst-izbor { border: 1px solid var(--linija); border-radius: var(--r-malo); padding: 8px 12px; margin: 8px 0 0; display: grid; gap: 6px; }
.admin-inst-izbor legend { font-weight: 700; font-size: .9rem; padding: 0 4px; }
.admin-inst-izbor label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.admin-inst-izbor label span { display: flex; flex-direction: column; }
.admin-inst-izbor small { color: var(--siva); font-size: .8rem; }
.admin-inst-izbor input, .admin-check input { width: 18px; height: 18px; accent-color: var(--bor); margin-top: 2px; }
.admin-check { display: flex; gap: 8px; align-items: center; font-size: .9rem; margin: 10px 0 4px; }
.admin-inst__glava { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.admin-postavke { display: grid; gap: 14px; }
.admin-tabela-omot { overflow-x: auto; margin: 10px 0; }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-tabela th, .admin-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linija); vertical-align: top; }
.admin-tabela th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--siva); background: var(--papir); }
.admin-tabela small { color: var(--siva); }
.admin-tabela__akcije { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-dnevnik td:first-child, .admin-dnevnik td:nth-child(2) { white-space: nowrap; }
.admin-red-uredi summary { cursor: pointer; color: var(--bor); font-weight: 700; }
.admin-red-uredi .forma { margin-top: 8px; min-width: 240px; }
.admin-uloge { display: grid; gap: 4px; font-size: .86rem; color: var(--siva); margin: 6px 0 10px; }
.admin-uloge p { margin: 0; }
.admin-blok-forma { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.admin-blok-forma input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); min-height: 40px; flex: 1 1 180px; }
@media (min-width: 900px) { .admin-postavke { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-postavke #korisnici, .admin-postavke #kopije, .admin-postavke #blokirane { grid-column: 1 / -1; } }

/* =========================================================
   ŠTETNI UTICAJ DEPONIJA, RAZGRADNJA OTPADA, KLASIFIKACIJA U ADMINU
   ========================================================= */
.uticaj { background: var(--bijela); border: 1px solid var(--linija); border-top: 4px solid var(--nb); border-radius: var(--r); padding: 16px; margin: 0 0 18px; }
.uticaj__glava { display: flex; gap: 14px; align-items: center; }
.uticaj__mjerac { width: 120px; flex: none; }
.uticaj__broj { font: 800 30px var(--font-naslov); fill: var(--kora); }
.uticaj__glava h2 { font-size: 1.15rem; margin: 0 0 4px; }
.uticaj__nivo { display: inline-block; padding: 2px 11px; border-radius: 999px; background: var(--nb); color: #fff; font-weight: 700; font-size: .85rem; }
.uticaj__opis { margin: 6px 0 0; font-size: .85rem; color: var(--siva); }
.uticaj__dims { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.uticaj__dims li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: .9rem; }
.uticaj__dim-naziv { display: flex; align-items: center; gap: 6px; min-width: 0; }
.uticaj__dim-naziv small { color: var(--siva); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uticaj__dims strong { text-align: right; font-variant-numeric: tabular-nums; }
.uticaj__traka { display: block; height: 9px; border-radius: 999px; background: var(--papir); overflow: hidden; }
.uticaj__traka span { display: block; height: 100%; border-radius: 999px; }
.uticaj__traka--vrijeme span { background: linear-gradient(90deg, #8FC79A, #E0B424, #E2731C, #B8321F); }
.uticaj__razgradnja { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--linija); }
.uticaj__podnaslov { margin: 0 0 8px; font-weight: 700; font-size: .9rem; display: flex; gap: 6px; align-items: center; }
.uticaj__razgradnja ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.uticaj__razgradnja li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 10px; align-items: center; font-size: .88rem; }
.uticaj__razgradnja li small { grid-column: 2; color: var(--siva); font-size: .78rem; margin-top: -3px; }
.uticaj__napomene { margin: 14px 0 0; padding: 10px 12px 10px 28px; background: #FFF6E9; border-radius: var(--r-malo); font-size: .88rem; color: #5B4307; }
.uticaj__napomene li { margin-bottom: 4px; }
@media (max-width: 420px) { .uticaj__glava { flex-direction: column; align-items: flex-start; } .uticaj__dim-naziv small { display: none; } }

/* Mapa uticaja */
.mapa-dugme--uticaj { top: 220px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.mapa-dugme--uticaj .ik { width: 22px; height: 22px; color: #B8321F; }
.mapa-dugme--uticaj.aktivno { background: #B8321F; border-color: #B8321F; }
.mapa-dugme--uticaj.aktivno .ik { color: #fff; }
.uticaj-legenda { position: absolute; z-index: 600; left: 12px; bottom: 82px; width: min(270px, calc(100% - 90px)); background: var(--bijela); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--sjena); font-size: .85rem; }
.uticaj-legenda ul { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.uticaj-legenda li { display: flex; gap: 6px; align-items: center; }
.uticaj-legenda li span { width: 14px; height: 14px; border-radius: 50%; opacity: .75; }
.uticaj-legenda p { margin: 4px 0; display: flex; gap: 6px; align-items: center; font-size: .8rem; }
.uticaj-legenda__voda { width: 22px; height: 0; border-top: 2px dashed #2F6FD0; }
.uticaj-legenda small { color: var(--siva); font-size: .76rem; line-height: 1.35; display: block; }
.uticaj-oznaka { display: inline-flex; align-items: flex-end; gap: 3px; padding: 4px 6px 4px 4px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); border: 2px solid var(--nb); height: 30px; }
.uticaj-oznaka span { align-self: center; min-width: 22px; height: 20px; border-radius: 6px; background: var(--nb); color: #fff; font: 800 12px/20px var(--font-tekst); text-align: center; padding: 0 3px; }
.uticaj-oznaka i { display: flex; align-items: flex-end; width: 6px; height: 18px; background: var(--papir); border-radius: 2px; overflow: hidden; }
.uticaj-oznaka b { display: block; width: 100%; }
.uticaj-popup h3 { margin-bottom: 6px; }
.uticaj-popup__nivo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font-size: .9rem; }
.uticaj-popup__nivo span { min-width: 34px; height: 26px; border-radius: 8px; background: var(--nb); color: #fff; font: 800 15px/26px var(--font-tekst); text-align: center; }
.uticaj-popup__dims { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.uticaj-popup__dims li { display: grid; grid-template-columns: 62px 1fr 24px; gap: 8px; align-items: center; font-size: .82rem; }
.uticaj-popup__dims i { display: block; height: 7px; border-radius: 999px; background: var(--papir); overflow: hidden; }
.uticaj-popup__dims b { display: block; height: 100%; border-radius: 999px; }
.uticaj-popup__dims em { font-style: normal; font-weight: 700; text-align: right; }
.uticaj-popup__trajnost { font-size: .82rem; color: var(--siva); margin: 0 0 10px !important; }
.uticaj-popup .dugme { color: #fff; width: 100%; }
.mapa-stranica:has(.blizina:not([hidden])) .uticaj-legenda { display: none; }

/* Početna: koliko dugo otpad ostaje u prirodi */
.razgradnja-sekcija__uvod { color: var(--siva); margin: -4px 0 12px; }
.razgradnja-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.razgradnja-kartica { display: flex; flex-direction: column; gap: 3px; padding: 12px; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); min-width: 0; }
.razgradnja-kartica__ik { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); margin-bottom: 2px; }
.razgradnja-kartica strong { font-size: .98rem; }
.razgradnja-kartica__vrijeme { font-family: var(--font-naslov); font-weight: 800; color: var(--narandzasta-tamna); font-size: 1rem; line-height: 1.2; }
.razgradnja-kartica__traka { display: block; height: 6px; border-radius: 999px; background: var(--papir); overflow: hidden; margin: 4px 0 2px; }
.razgradnja-kartica__traka span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8FC79A, #E0B424, #E2731C, #B8321F); }
.razgradnja-kartica small { color: var(--siva); font-size: .78rem; }
.razgradnja-sekcija__skala { display: flex; justify-content: space-between; font-size: .72rem; color: var(--siva); margin: 6px 2px 0; text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 640px) { .razgradnja-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Statistika: uticaj */
.stat-uticaj { margin-top: 14px; }
.stat-uticaj__mreza { display: grid; gap: 16px; align-items: center; }
.stat-uticaj .stat-graf { height: 280px; }
.stat-uticaj__nivoi { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stat-uticaj__nivoi li { border-radius: var(--r-malo); background: var(--papir); border-top: 4px solid var(--nb); padding: 8px; display: flex; flex-direction: column; font-size: .78rem; color: var(--siva); }
.stat-uticaj__nivoi strong { font: 800 1.4rem var(--font-naslov); color: var(--kora); }
.stat-uticaj__oblasti { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.stat-uticaj__oblasti li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; font-size: .88rem; }
.stat-uticaj__oblasti small { color: var(--siva); font-size: .76rem; }
.stat-uticaj__oblasti em { grid-column: 2; font-style: normal; font-size: .8rem; color: var(--narandzasta-tamna); font-weight: 700; }
.stat-trajnost { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.stat-trajnost li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2px 10px; align-items: center; font-size: .88rem; }
.stat-trajnost li small { color: var(--siva); font-size: .76rem; }
.stat-trajnost li > small { grid-column: 2; }
@media (min-width: 900px) { .stat-uticaj__mreza { grid-template-columns: 1fr 1.2fr; } }

/* Admin: uticaj, klasifikacija otpada, prekidač */
.admin-uticaj { display: flex; gap: 10px; align-items: center; margin: 10px 0; padding: 8px 10px; border-radius: var(--r-malo); background: var(--papir); border-left: 4px solid var(--nb); font-size: .88rem; }
.admin-uticaj__indeks { min-width: 38px; height: 30px; border-radius: 8px; background: var(--nb); color: #fff; font: 800 15px/30px var(--font-tekst); text-align: center; }
.admin-uticaj span:last-child { display: flex; flex-direction: column; }
.admin-uticaj small { color: var(--siva); }
.admin-otpad-tabela { font-size: .82rem; min-width: 1150px; }
.admin-otpad-tabela input, .admin-otpad-tabela select { font: inherit; width: 100%; padding: 5px 6px; border: 1px solid var(--linija); border-radius: 6px; background: var(--bijela); }
.admin-otpad-tabela td { padding: 4px; }
.admin-otpad-tabela td:first-child input { font-weight: 700; min-width: 130px; }
.admin-otpad-broj { width: 70px !important; }
.admin-tez { width: 48px !important; font-weight: 700; }
.admin-tez--0 { background: #F1F4EE !important; }
.admin-tez--1 { background: #FBF3D6 !important; }
.admin-tez--2 { background: #FBE3CC !important; }
.admin-tez--3 { background: #F6D2CB !important; }
.admin-otpad-novi input { border-style: dashed; }
.admin-prekidac { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; }
.admin-prekidac input { position: absolute; opacity: 0; }
.admin-prekidac span { width: 46px; height: 26px; border-radius: 999px; background: var(--linija); position: relative; transition: background .2s; flex: none; }
.admin-prekidac span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.admin-prekidac input:checked + span { background: var(--ociscena); }
.admin-prekidac input:checked + span::after { transform: translateX(20px); }
.admin-prekidac input:focus-visible + span { outline: 3px solid var(--mala); outline-offset: 2px; }
/* kompaktniji prikaz razgradnje */
.razgradnja-lista { grid-template-columns: 1fr; gap: 0; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); overflow: hidden; }
.razgradnja-kartica { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; padding: 10px 14px; border: 0; border-radius: 0; border-bottom: 1px solid var(--linija); }
.razgradnja-kartica:last-child { border-bottom: 0; }
.razgradnja-kartica__ik { display: none; }
.razgradnja-kartica strong { font-size: .93rem; grid-column: 1; }
.razgradnja-kartica__vrijeme { grid-column: 2; grid-row: 1; font-size: .85rem; text-align: right; white-space: nowrap; }
.razgradnja-kartica__traka { grid-column: 1 / -1; margin: 0; height: 5px; }
.razgradnja-kartica small { grid-column: 1 / -1; font-size: .74rem; }
@media (min-width: 640px) {
  .razgradnja-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .razgradnja-kartica:nth-child(odd) { border-right: 1px solid var(--linija); }
  .razgradnja-kartica:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 900px) {
  .razgradnja-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .razgradnja-kartica:nth-child(odd) { border-right: 0; }
  .razgradnja-kartica:not(:nth-child(3n)) { border-right: 1px solid var(--linija); }
  .razgradnja-kartica:nth-last-child(-n+3) { border-bottom: 0; }
}
.razgradnja-kartica { align-items: baseline; }
.razgradnja-kartica__vrijeme { white-space: normal; max-width: 52vw; line-height: 1.25; }
@media (min-width: 640px) { .razgradnja-kartica__vrijeme { max-width: 180px; } }

/* Klasifikacija otpada: prijedlozi sa kategorijom, katalog po kategorijama */
.oznake__prijedlozi li { display: flex; flex-direction: column; line-height: 1.25; }
.oznake__prijedlozi li small { color: var(--siva); font-size: .76rem; }
.otpad-katalog { margin-top: 10px; border: 1px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); }
.otpad-katalog summary { padding: 10px 12px; cursor: pointer; font-weight: 700; color: var(--bor); font-size: .9rem; }
.otpad-katalog__grupa { padding: 4px 12px 10px; border-top: 1px solid var(--linija); }
.otpad-katalog__grupa p { margin: 8px 0 6px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--siva); }
.otpad-katalog__grupa div { display: flex; flex-wrap: wrap; gap: 6px; }

/* Admin: kategorije otpada, uvoz/izvoz */
.admin-otpad-alati { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; padding: 10px; border-radius: var(--r-malo); background: var(--papir); }
.admin-otpad-uvoz { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-otpad-uvoz select { font: inherit; font-size: .88rem; padding: 7px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); min-height: 38px; }
.admin-otpad-uvoz__fajl { position: relative; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border: 1.5px dashed var(--mahovina); border-radius: var(--r-malo); background: var(--bijela); cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--bor); }
.admin-otpad-uvoz__fajl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.admin-otpad-kat { border: 1px solid var(--linija); border-radius: var(--r-malo); margin-bottom: 8px; background: var(--bijela); }
.admin-otpad-kat summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.admin-otpad-kat summary input { flex: 1; font: inherit; font-weight: 700; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; min-width: 0; }
.admin-otpad-kat summary input:hover, .admin-otpad-kat summary input:focus { border-color: var(--linija); background: var(--bijela); }
.admin-otpad-kat summary small { color: var(--siva); white-space: nowrap; }
.admin-otpad-kat__id { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bor); color: #fff; font-weight: 800; font-size: .8rem; flex: none; }
.admin-otpad-tabela textarea { font: inherit; width: 100%; min-width: 220px; padding: 5px 6px; border: 1px solid var(--linija); border-radius: 6px; resize: vertical; }
.admin-otpad-tabela select[name$="[kategorija]"] { min-width: 150px; }
.admin-otpad-novi-blok { border: 1.5px dashed var(--mahovina); border-radius: var(--r-malo); padding: 10px 12px; margin: 12px 0; }
.admin-otpad-novi-naslov { margin: 0 0 6px; font-weight: 700; color: var(--bor); }
.admin-otpad-tezine { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 10px; font-size: .85rem; }
.admin-otpad-tezine select { font: inherit; padding: 4px 6px; border: 1px solid var(--linija); border-radius: 6px; margin-left: 4px; }

/* Dugme Satelit / Mapa na mapama */
.sloj-prekidac {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 4px 4px 5px; cursor: pointer;
  background: var(--bijela); border: 2px solid var(--bijela); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  font: 700 11px/1.1 var(--font-tekst); color: var(--kora);
}
.sloj-prekidac:hover { border-color: var(--bor); }
.sloj-prekidac__slika {
  display: block; width: 54px; height: 38px; border-radius: 8px;
  background: linear-gradient(135deg, #E8E6D8 0 30%, #CFE3C2 30% 55%, #F2E4C2 55% 70%, #BFD8EE 70%);
}
.sloj-prekidac--sat .sloj-prekidac__slika {
  background: radial-gradient(circle at 30% 35%, #6E8B4E 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #4F6B3A 0 22%, transparent 23%),
              linear-gradient(160deg, #3F5A33 0 35%, #7A7253 35% 45%, #5D7A45 45%);
}
@media print { .sloj-prekidac { display: none; } }

/* Hitno obavještenje na cijelom sajtu */
.obav-traka { background: #E8F1FB; color: #163B66; border-bottom: 1px solid #C4D8EF; }
.obav-traka--upozorenje { background: #FFF1D6; color: #5B3B00; border-bottom-color: #F0D08C; }
.obav-traka--hitno { background: #B8321F; color: #fff; border-bottom-color: #8E2416; }
.obav-traka[hidden], .obav-skriveno .obav-traka:not(.obav-traka--pregled) { display: none; }
.obav-traka__unutra { max-width: var(--sirina); margin: 0 auto; padding: 10px 18px; display: flex; align-items: flex-start; gap: 10px; }
.obav-traka__ik { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .55); }
.obav-traka--hitno .obav-traka__ik { background: rgba(255, 255, 255, .2); animation: puls 1.6s infinite; }
.obav-traka__ik .ik { width: 17px; height: 17px; }
.obav-traka p { margin: 3px 0 0; flex: 1; font-size: .93rem; line-height: 1.45; }
.obav-traka a { color: inherit; font-weight: 700; margin-left: 4px; }
.obav-traka__zatvori { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.obav-traka__zatvori:hover { background: rgba(0, 0, 0, .08); }
.obav-traka__zatvori .ik { width: 18px; height: 18px; }
.obav-traka--plutajuca { position: fixed; z-index: 950; top: calc(var(--zaglavlje-v, 60px) + 66px); left: 10px; right: 10px; border-radius: var(--r); border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: 640px; margin: 0 auto; }
.obav-traka--plutajuca .obav-traka__unutra { padding: 8px 10px 8px 12px; }
.obav-traka--plutajuca p { font-size: .87rem; }
.obav-traka--pregled { border-radius: var(--r-malo); margin: 8px 0; border: 0; }
@media (prefers-reduced-motion: reduce) { .obav-traka--hitno .obav-traka__ik { animation: none; } }

/* "Već je prijavljeno" u formi */
.duplikat { padding: 12px; }
.duplikat__naslov { margin: 0 0 8px; }
.duplikat__opis { margin: 0 0 8px; font-size: .9rem; }
.duplikat__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duplikat__kartica { display: flex; gap: 10px; align-items: flex-start; background: var(--bijela); border-radius: var(--r-malo); padding: 8px; border: 1px solid #EBD9A6; }
.duplikat__kartica img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.duplikat__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--kora); }
.duplikat__tekst a { color: var(--kora); }
.duplikat__tekst small { color: var(--siva); font-size: .8rem; }
.duplikat__dugmad { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; }
.duplikat__izbor { display: grid; gap: 8px; margin-bottom: 8px; }
.duplikat__opcija { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); color: var(--kora); font: inherit; cursor: pointer; }
.duplikat__opcija span { display: flex; flex-direction: column; }
.duplikat__opcija small { color: var(--siva); font-size: .8rem; }
.duplikat__opcija .ik { color: var(--bor); flex: none; width: 22px; height: 22px; }
.duplikat__opcija.aktivno { border-color: var(--bor); box-shadow: 0 0 0 1px var(--bor); background: var(--lisaj-svijetli); }
.duplikat__poruka { margin: 0 0 6px; font-size: .88rem; color: var(--bor); font-weight: 700; }
.duplikat__poruka.greska { color: var(--greska); }
.admin-isto { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px; border-radius: var(--r-malo); background: #EEF3FB; border: 1px solid #C9D8F0; font-size: .9rem; }
.admin-isto img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.admin-isto div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.admin-isto strong { color: #234C8A; }
.duplikat .duplikat__lista { padding: 0; margin: 0; }
.duplikat__dugmad .dugme { font-size: .85rem; padding: .5em 1em; min-height: 36px; white-space: nowrap; }

/* Admin meni: na većim ekranima se prelama u više redova (sve kartice vidljive),
   na mobitelu se pomjera prstom, sa naznakom da ima još kartica */
.admin-tabovi { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
@media (min-width: 760px) {
  .admin-tabovi { flex-wrap: wrap; overflow: visible; row-gap: 0; padding: 2px 10px 0; -webkit-mask-image: none; mask-image: none; }
  .admin-tabovi a { padding: 9px 11px 10px; font-size: .9rem; white-space: nowrap; }
}
.admin-tabovi a:hover { color: #fff; }
.admin-tabovi a:focus-visible { outline: 2px solid #B9E3A9; outline-offset: -2px; border-radius: 6px; }
.video-greska--upozorenje { background: #FFF6E2; border-left-color: var(--mala); color: #5B4307; font-weight: 400; }
.video-preuzmi--greska { color: #6E2215; background: #FBEDEA; padding: 8px 10px; border-radius: var(--r-malo); }
.admin-video__upoz { margin: 0; padding: 8px 10px; border-radius: var(--r-malo); background: #FFF1D6; color: #5B3B00; font-size: .86rem; }

/* =========================================================
   ADMIN MENI: tri grupe sa padajućim listama (jedan red na svim ekranima)
   ========================================================= */
.admin-meni { max-width: var(--sirina); margin: 0 auto; display: flex; gap: 6px; padding: 0 12px 8px; position: relative; }
.admin-meni__grupa { position: relative; }
.admin-meni__dugme {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 700; font-size: .93rem; list-style: none; user-select: none;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.admin-meni__dugme::-webkit-details-marker { display: none; }
.admin-meni__dugme:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.admin-meni__dugme:focus-visible { outline: 2px solid #B9E3A9; outline-offset: 2px; }
.admin-meni__grupa.aktivno > .admin-meni__dugme, .admin-meni__dugme.aktivno { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 -3px 0 #B9E3A9; }
.admin-meni__grupa[open] > .admin-meni__dugme { background: #fff; color: var(--bor); box-shadow: none; }
.admin-meni__dugme .ik { flex: none; opacity: .9; }
.admin-meni__naziv { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.admin-meni__naziv small { font-size: .72rem; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.admin-meni__strelica { width: 12px; height: 12px; flex: none; transition: transform .15s; }
.admin-meni__grupa[open] .admin-meni__strelica { transform: rotate(180deg); }
.admin-meni__lista {
  position: absolute; z-index: 120; top: calc(100% + 6px); left: 0; min-width: 240px; padding: 6px;
  background: var(--bijela); border-radius: var(--r); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); display: grid; gap: 2px;
}
.admin-meni__lista a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--kora); text-decoration: none; font-weight: 600; font-size: .93rem; }
.admin-meni__lista a:hover { background: var(--lisaj-svijetli); }
.admin-meni__lista a.aktivno { background: var(--lisaj); color: var(--bor); font-weight: 800; }
.admin-meni__lista .broj { background: var(--papir); color: var(--kora); }
.admin-meni__lista .broj--hitno { background: var(--mala); color: #2A1F02; }
.admin-meni .broj { margin-left: auto; }
/* stari meni sa karticama više se ne koristi */
.admin-tabovi { display: none; }

@media (max-width: 640px) {
  .admin-meni { gap: 4px; padding: 0 8px 8px; }
  .admin-meni__grupa, .admin-meni > .admin-meni__dugme { flex: 1 1 0; min-width: 0; }
  .admin-meni__dugme { padding: 6px 8px; gap: 6px; font-size: .86rem; justify-content: center; }
  .admin-meni__naziv { overflow: hidden; }
  .admin-meni__naziv small { max-width: 100%; }
  .admin-meni__grupa { position: static; }
  .admin-meni__lista { left: 8px; right: 8px; min-width: 0; }
}
@media (max-width: 380px) { .admin-meni__dugme > .ik { display: none; } }
.admin-meni__kratko { display: none; }
@media (max-width: 640px) {
  .admin-meni__dugo { display: none; }
  .admin-meni__kratko { display: inline; }
  .admin-meni__naziv small { display: none; }
  .admin-meni__dugme > .ik { display: none; }
  .admin-meni__dugme { min-height: 42px; font-size: .9rem; }
  .admin-meni .broj { margin-left: 0; font-size: .74rem; min-width: 20px; padding: 0 5px; }
  /* zaglavlje: kompaktno da ništa ne bude odsječeno */
  .admin-zaglavlje__unutra { height: 52px; padding: 0 10px; gap: 8px; }
  .admin-zaglavlje .logo__tekst strong { font-size: 1rem; }
  .admin-zaglavlje .logo__tekst small { display: none; }
  .admin-zaglavlje__desno { gap: 12px; font-size: .86rem; align-items: center; }
  .admin-ja small { display: none; }
  .admin-ja { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
}
@media (max-width: 400px) { .admin-zaglavlje__desno a[href="index.php"] { display: none; } }

/* YouTube link u formi */
#vise-video label .ik { color: #C4302B; vertical-align: -2px; }
.polje__pomoc.greska { color: var(--greska); font-weight: 700; }

/* =========================================================
   VAŽNI BROJEVI
   ========================================================= */
.brojevi { max-width: 900px; margin: 0 auto; }
.brojevi__uvod h1 { margin-bottom: 4px; }
.brojevi__uvod > p { color: var(--siva); margin: 0 0 14px; }
.brojevi__trazi { position: sticky; top: calc(var(--zaglavlje-v) + 6px); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 16px;
  background: var(--bijela); border: 2px solid var(--bor); border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35); }
.brojevi__trazi > .ik { color: var(--siva); flex: none; }
.brojevi__trazi input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.05rem; padding: 10px 0; background: none; color: var(--kora); }
.brojevi__ocisti { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--papir); display: grid; place-items: center; cursor: pointer; color: var(--kora); flex: none; }
.brojevi__ocisti[hidden] { display: none; }
.brojevi__filteri { display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.brojevi__filteri::-webkit-scrollbar { display: none; }
.brojevi__filteri .cip { flex: none; box-shadow: none; border: 1px solid var(--linija); }
.brojevi__hitno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.hitni-kartica { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r); text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #B8321F, #D2442D); box-shadow: 0 10px 22px -14px rgba(184, 50, 31, .9); }
.hitni-kartica:nth-child(2) { background: linear-gradient(135deg, #C4570A, #E26A12); }
.hitni-kartica:nth-child(3) { background: linear-gradient(135deg, #1E4D3A, #2F7A55); }
.hitni-kartica:nth-child(4) { background: linear-gradient(135deg, #234C8A, #2F6FD0); }
.hitni-kartica[hidden] { display: none; }
.hitni-kartica:hover { color: #fff; transform: translateY(-1px); }
.hitni-kartica__broj { font: 800 2.3rem/1 var(--font-naslov); letter-spacing: .02em; }
.hitni-kartica__naziv { font-weight: 700; font-size: .9rem; opacity: .95; }
.brojevi__nema { padding: 16px; border-radius: var(--r); background: var(--papir); color: var(--siva); text-align: center; }
.brojevi__grupa { margin-top: 18px; }
.brojevi__grupa[hidden] { display: none; }
.brojevi__grupa h2 { font-size: 1.05rem; display: flex; gap: 8px; align-items: center; color: var(--bor); margin-bottom: 8px; }
.broj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.broj-kartica { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); }
.broj-kartica[hidden] { display: none; }
.broj-kartica__tekst { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.broj-kartica__tekst strong { font-size: .97rem; }
.broj-kartica__tekst small { color: var(--siva); font-size: .82rem; line-height: 1.4; }
.znacka-24 { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #E7F3EA; color: #1C6234; font-size: .7rem; font-weight: 800; vertical-align: 2px; }
.broj-kartica__akcije { display: flex; gap: 6px; align-items: center; flex: none; }
.broj-kartica__broj { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--bor); color: #fff; text-decoration: none;
  font: 800 1.02rem var(--font-naslov); white-space: nowrap; font-variant-numeric: tabular-nums; }
.broj-kartica__broj:hover { background: var(--kora); color: #fff; }
.broj-kartica__kopiraj { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linija); background: var(--bijela); display: grid; place-items: center; cursor: pointer; color: var(--siva); }
.broj-kartica__kopiraj.kopirano { color: #fff; }
.brojevi__napomena { color: var(--siva); font-size: .85rem; margin: -2px 0 10px; }
.pozivni-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pozivni-lista li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); }
.pozivni-lista li[hidden] { display: none; }
.pozivni-lista__broj { flex: none; width: 54px; text-align: center; font: 800 1.1rem var(--font-naslov); color: var(--narandzasta-tamna); }
.pozivni-lista span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pozivni-lista small { color: var(--siva); font-size: .8rem; }
.brojevi__dno { margin: 22px 0 0; color: var(--siva); font-size: .9rem; }
.podnozje__svi-brojevi { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-weight: 700; font-size: .9rem; text-decoration: none; }
@media (min-width: 640px) {
  .brojevi__hitno { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pozivni-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .broj-kartica { flex-direction: column; align-items: stretch; }
  .broj-kartica__akcije { justify-content: space-between; }
  .broj-kartica__broj { flex: 1; justify-content: center; }
}

/* =========================================================
   KAKO OBJAVITI PRIJAVU
   ========================================================= */
.kako { max-width: 920px; margin: 0 auto; }
.kako__uvod { text-align: center; padding: 10px 0 18px; }
.kako__oznaka { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.kako__uvod h1 { margin: 10px 0 6px; }
.kako__uvod p { color: var(--siva); max-width: 56ch; margin: 0 auto 16px; }
.kako__koraci { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: k; position: relative; }
.kako-korak { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--bijela); border: 1px solid var(--linija); border-radius: 18px; overflow: hidden; }
.kako-korak__slika { background: linear-gradient(160deg, var(--lisaj-svijetli), #F7F3EA); display: grid; place-items: center; padding: 14px; }
.kako-korak__slika svg { width: 100%; max-width: 230px; height: auto; }
.kako-korak__tekst { padding: 16px 18px 18px; position: relative; }
.kako-korak__broj { position: absolute; top: -20px; left: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--narandzasta); color: #fff; font: 800 1.15rem var(--font-naslov); border: 3px solid var(--bijela); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.kako-korak__tekst h2 { font-size: 1.15rem; margin: 10px 0 6px; }
.kako-korak__tekst p { margin: 0 0 8px; }
.kako-korak__savjet { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-malo); background: #FFF6E9; color: #5B4307; font-size: .88rem; margin: 6px 0 0 !important; }
.kako-korak__savjet .ik { flex: none; margin-top: 3px; color: var(--narandzasta-tamna); }
@media (min-width: 760px) {
  .kako-korak { grid-template-columns: 240px 1fr; }
  .kako-korak:nth-child(even) { grid-template-columns: 1fr 240px; }
  .kako-korak:nth-child(even) .kako-korak__slika { order: 2; }
  .kako-korak__tekst { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
  .kako-korak__broj { position: static; margin-bottom: 4px; }
  .kako-korak__tekst h2 { margin-top: 4px; }
}
.kako__tok { margin-top: 26px; }
.kako__tok h2, .kako__foto h2, .kako__pitanja h2 { font-size: 1.25rem; margin-bottom: 12px; }
.tok { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tok li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; position: relative; }
.tok li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: -10px; width: 2px; background: var(--linija); }
.tok__ik { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lisaj); color: var(--bor); }
.tok__ik--zeleno { background: var(--ociscena); color: #fff; }
.tok small { color: var(--siva); font-size: .85rem; }
@media (min-width: 760px) {
  .tok { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .tok li { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 4px; }
  .tok__ik { grid-row: auto; }
  .tok li:not(:last-child)::after { left: calc(50% + 28px); right: calc(-50% + 28px); top: 21px; bottom: auto; width: auto; height: 2px; }
}
.kako__foto { margin-top: 26px; }
.kako__foto-mreza { display: grid; gap: 10px; }
.kako__foto-kartica { border-radius: var(--r); padding: 14px 16px; border: 1px solid; }
.kako__foto-kartica ul { margin: 0; padding-left: 18px; }
.kako__foto-kartica li { margin-bottom: 4px; }
.kako__foto-kartica--da { background: #EEF7F0; border-color: #BEE0C6; }
.kako__foto-kartica--ne { background: #FBEDEA; border-color: #EBC2B9; }
.kako__foto-oznaka { margin: 0 0 6px; font-weight: 800; display: flex; gap: 6px; align-items: center; }
.kako__foto-kartica--da .kako__foto-oznaka { color: #1C6234; }
.kako__foto-kartica--ne .kako__foto-oznaka { color: #8E2F1E; }
@media (min-width: 640px) { .kako__foto-mreza { grid-template-columns: 1fr 1fr; } }
.kako__hitno { margin-top: 26px; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: #FBEDEA; border-left: 5px solid var(--greska); }
.kako__hitno > .ik { flex: none; width: 28px; height: 28px; color: var(--greska); }
.kako__hitno p { margin: 4px 0 6px; }
.kako__hitno a[href^="tel:"] { font-weight: 800; color: var(--greska); }
.kako__pitanja { margin-top: 26px; }
.kako__pitanja details { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); margin-bottom: 8px; }
.kako__pitanja summary { padding: 12px 14px; cursor: pointer; font-weight: 700; }
.kako__pitanja details p { margin: 0; padding: 0 14px 14px; color: var(--siva); }
.kako__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 6px; }

/* =========================================================
   SVE PRIJAVE (ARHIVA)
   ========================================================= */
.arhiva { max-width: var(--sirina); margin: 0 auto; }
.arhiva__glava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.arhiva__glava h1 { margin-bottom: 4px; }
.arhiva__glava p { color: var(--siva); margin: 0; max-width: 62ch; }
.arhiva__mapa-dugme { flex: none; }
.arhiva__trazi { position: sticky; top: calc(var(--zaglavlje-v) + 6px); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 16px;
  background: var(--bijela); border: 2px solid var(--bor); border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35); }
.arhiva__trazi > .ik { color: var(--siva); flex: none; }
.arhiva__trazi input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.05rem; padding: 10px 0; background: none; color: var(--kora); }
.arhiva__stanja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 14px 0 10px; padding: 4px; background: var(--papir); border: 1px solid var(--linija); border-radius: 14px; }
.arhiva__stanje { border: 0; background: none; padding: 10px 8px; border-radius: 10px; font: inherit; font-weight: 700; color: var(--siva); cursor: pointer; display: flex; gap: 6px; justify-content: center; align-items: center; }
.arhiva__stanje span { font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: var(--bijela); color: var(--kora); }
.arhiva__stanje.aktivno { background: var(--bijela); color: var(--bor); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.arhiva__stanje.aktivno span { background: var(--bor); color: #fff; }
.arhiva__filteri { display: grid; gap: 8px; }
.arhiva__kat { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.arhiva__kat::-webkit-scrollbar { display: none; }
.arhiva__kat .cip { flex: none; box-shadow: none; border: 1px solid var(--linija); }
.arhiva__vise { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r-malo); }
.arhiva__vise summary { padding: 10px 12px; cursor: pointer; font-weight: 700; color: var(--bor); display: flex; align-items: center; gap: 6px; font-size: .92rem; }
.arhiva__broj-filtera { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--narandzasta); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; }
.arhiva__broj-filtera[hidden] { display: none; }
.arhiva__polja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 12px 12px; }
.arhiva__polja label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--siva); }
.arhiva__polja select { font: inherit; font-size: .92rem; font-weight: 400; color: var(--kora); padding: 8px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); min-height: 42px; }
.arhiva__polja .arhiva__check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; color: var(--kora); font-size: .9rem; }
.arhiva__check input { width: 18px; height: 18px; accent-color: var(--bor); }
.arhiva__polja .link-dugme { justify-self: start; align-self: center; }
@media (min-width: 760px) { .arhiva__polja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arhiva__rezultat { margin: 14px 2px 8px; color: var(--siva); font-size: .9rem; font-weight: 600; }
.arhiva__rezultat:empty { display: none; }
.arhiva__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .arhiva__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .arhiva__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arhiva-kartica { display: flex; flex-direction: column; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--r); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.arhiva-kartica:hover { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .35); transform: translateY(-1px); }
.arhiva-kartica__slika { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--papir); overflow: hidden; }
.arhiva-kartica__slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arhiva-kartica--rijeseno .arhiva-kartica__slika > img:first-child { filter: grayscale(.4); }
.arhiva-kartica__poslije { position: absolute; right: 10px; bottom: 10px; width: 34% !important; height: 46% !important; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); filter: none !important; }
.arhiva-kartica__kat { position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--kb); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.arhiva-kartica--rijeseno .arhiva-kartica__kat { background: var(--ociscena); }
.arhiva-kartica__uticaj { position: absolute; right: 10px; top: 10px; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--nb); color: #fff; font: 800 13px/26px var(--font-tekst); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.arhiva-kartica__tijelo { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.arhiva-kartica__vrsta { margin: 0; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--kb); }
.arhiva-kartica--rijeseno .arhiva-kartica__vrsta { color: var(--siva); }
.arhiva-kartica h2 { font-size: 1.05rem; margin: 0; line-height: 1.3; }
.arhiva-kartica h2 a { color: var(--kora); text-decoration: none; }
.arhiva-kartica h2 a:hover { text-decoration: underline; }
.arhiva-kartica__stanje { margin: 2px 0 0; display: flex; align-items: center; gap: 5px; font-size: .86rem; font-weight: 700; color: var(--narandzasta-tamna); }
.arhiva-kartica__stanje--rijeseno { color: var(--ociscena); }
.arhiva-kartica__meta { margin: 0; font-size: .8rem; color: var(--siva); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.arhiva-kartica__otpad { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.arhiva-kartica__otpad span { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--lisaj-svijetli); color: var(--bor); font-weight: 700; }
.arhiva-kartica__akcije { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--linija); }
.arhiva-kartica__akcije a { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; font-size: .88rem; padding-top: 8px; }
.arhiva__nema { text-align: center; padding: 30px 16px; color: var(--siva); background: var(--papir); border-radius: var(--r); margin-top: 12px; }
.arhiva__nema[hidden] { display: none; }
.arhiva__nema .ik { color: var(--linija); }
.arhiva__vise-dugme { text-align: center; margin: 16px 0 4px; }
.arhiva__vise-dugme [hidden] { display: none; }
.sekcija__linkovi { display: inline-flex; gap: 14px; align-items: center; }
.link-dalje--sporedno { color: var(--siva); }
.arhiva-poziv { text-align: center; margin: 14px 0 0; }

/* Objašnjenja na mapi (Legenda, Toplotna mapa, Štetni uticaj): dugme × za zatvaranje */
.legenda, .heat-legenda, .uticaj-legenda { position: absolute; }
.legenda { padding-right: 40px; }
.heat-legenda, .uticaj-legenda { padding-right: 40px !important; }
.legenda__naslov { display: block; margin-bottom: 8px; font-size: .92rem; }
.legenda-zatvori {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--papir); color: var(--kora); display: grid; place-items: center;
}
.legenda-zatvori:hover { background: var(--lisaj); }
.legenda-zatvori:focus-visible { outline: 2px solid var(--bor); outline-offset: 2px; }
.legenda-zatvori .ik { width: 16px; height: 16px; }

/* Traka obavještenja na mapi ne smije prekrivati dugmad mape uz desnu ivicu */
.obav-traka--plutajuca { left: 10px; right: 66px; margin: 0; max-width: 640px; }
@media (min-width: 900px) { .obav-traka--plutajuca { left: 50%; right: auto; transform: translateX(-50%); width: min(640px, calc(100% - 160px)); } }

/* "Nedavno riješeno": na velikim ekranima 3 u redu (2 reda), na mobitelu i tabletu ostaje prve 4 kao do sada */
.rijeseno-lista > li:nth-child(n+5) { display: none; }
@media (min-width: 1000px) {
  .rijeseno-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rijeseno-lista > li:nth-child(n+5) { display: block; }
}

/* Pretraga mjesta na mapi (lupa u uglu mape u formi za prijavu) */
.mapa-trazi { position: relative; }
.mapa-trazi__dugme {
  width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--bijela); color: var(--bor); box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.mapa-trazi__dugme:hover { background: var(--lisaj-svijetli); }
.mapa-trazi.otvoreno .mapa-trazi__dugme { background: var(--bor); color: #fff; }
.mapa-trazi__dugme .ik { width: 21px; height: 21px; }
.mapa-trazi__panel {
  position: absolute; top: 0; right: 52px; width: min(330px, calc(100vw - 120px)); background: var(--bijela);
  border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); overflow: hidden; font-family: var(--font-tekst);
}
.mapa-trazi__panel[hidden] { display: none; }
.mapa-trazi__polje { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-bottom: 1px solid var(--linija); }
.mapa-trazi__polje > .ik { color: var(--siva); flex: none; }
.mapa-trazi__polje input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; padding: 10px 0; background: none; color: var(--kora); }
.mapa-trazi__zatvori { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--papir); cursor: pointer; display: grid; place-items: center; color: var(--kora); flex: none; }
.mapa-trazi__rezultati { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.mapa-trazi__rezultati:empty { display: none; }
.mapa-trazi__rezultati button { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: var(--kora); }
.mapa-trazi__rezultati button:hover, .mapa-trazi__rezultati button:focus-visible { background: var(--lisaj-svijetli); }
.mapa-trazi__rezultati button .ik { color: var(--narandzasta-tamna); flex: none; margin-top: 3px; }
.mapa-trazi__rezultati span { display: flex; flex-direction: column; min-width: 0; }
.mapa-trazi__rezultati strong { font-size: .95rem; }
.mapa-trazi__rezultati small { color: var(--siva); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-trazi__info { padding: 10px 12px; color: var(--siva); font-size: .86rem; }
.mapa-trazi__savjet { margin: 0; padding: 8px 12px; font-size: .78rem; color: var(--siva); background: var(--papir); border-top: 1px solid var(--linija); }
/* otvorena pretraga je iznad ostalih kontrola mape (satelit, atribucija) */
.leaflet-top.leaflet-right:has(.mapa-trazi.otvoreno) { z-index: 1100; }
.mapa-trazi.otvoreno { z-index: 1100; }
.mapa-trazi__rezultati { max-height: 190px; }
.mapa-trazi__polje input::-webkit-search-cancel-button { display: none; }

/* =========================================================
   UGRADNJA WIDGETA
   ========================================================= */
.ugradi { max-width: var(--sirina); margin: 0 auto; }
.ugradi__uvod { text-align: center; padding: 8px 0 22px; }
.ugradi__uvod h1 { margin: 10px 0 8px; }
.ugradi__uvod > p { color: var(--siva); max-width: 62ch; margin: 0 auto 14px; }
.ugradi__prednosti { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ugradi__prednosti li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--bijela); border: 1px solid var(--linija); font-size: .86rem; font-weight: 600; }
.ugradi__prednosti .ik { color: var(--ociscena); }
.ugradi-widget { display: grid; gap: 16px; padding: 18px; margin-bottom: 18px; background: var(--bijela); border: 1px solid var(--linija); border-radius: 20px; }
.ugradi-widget h2 { font-size: 1.25rem; margin: 0 0 6px; }
.ugradi-widget__lijevo > p { color: var(--siva); margin: 0 0 12px; }
.ugradi-widget__opcije { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ugradi-widget__opcije label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--siva); }
.ugradi-widget__opcije select { font: inherit; font-size: .92rem; font-weight: 400; color: var(--kora); padding: 8px 10px; border: 1.5px solid var(--linija); border-radius: var(--r-malo); background: var(--bijela); min-height: 40px; }
.ugradi-kod { border-radius: 14px; overflow: hidden; background: #14201A; color: #D8E8DA; }
.ugradi-kod__glava { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: #1C2C24; font-size: .8rem; font-weight: 700; color: #9FB8A6; }
.ugradi-kod pre { margin: 0; padding: 14px; overflow-x: auto; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.ugradi-widget__pregled { position: relative; border-radius: 16px; padding: 34px 14px 14px; background: repeating-linear-gradient(45deg, #F4F6F1 0 12px, #EEF2EA 12px 24px); border: 1px dashed var(--linija); min-height: 200px; }
.ugradi-widget__pregled[data-tamna-pozadina="1"] { background: repeating-linear-gradient(45deg, #0F1713 0 12px, #121C17 12px 24px); }
.ugradi-widget__oznaka { position: absolute; top: 9px; left: 14px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--siva); }
.ugradi-widget__pregled[data-tamna-pozadina="1"] .ugradi-widget__oznaka { color: #8FA596; }
.ugradi-widget__mjesto { max-width: 460px; margin: 0 auto; }
@media (min-width: 960px) {
  .ugradi-widget { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; padding: 22px; }
  .ugradi-widget[data-ugradi="mapa"] .ugradi-widget__mjesto, .ugradi-widget[data-ugradi="prijavi"] .ugradi-widget__mjesto { max-width: none; }
}
.ugradi__upute { margin-top: 10px; padding: 18px; border-radius: 18px; background: var(--lisaj-svijetli); }
.ugradi__upute h2 { font-size: 1.2rem; }
.ugradi__upute ol { padding-left: 20px; }
.ugradi__upute li { margin-bottom: 6px; }
.ugradi__napomena { color: var(--siva); font-size: .88rem; margin: 8px 0 0; }
.ugradi code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 5px; font-size: .88em; }
.ugradi-kod code { background: none; padding: 0; }

/* Početna, veliki ekrani: "Nedavno riješeno" i "Najnovije prijave" po 3 u redu.
   Zadnji red se uvijek razvuče preko cijele širine: 1 kartica = cijeli red, 2 kartice = po pola. */
@media (min-width: 1000px) {
  .rijeseno-lista, .lista-prijava { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rijeseno-lista > li, .lista-prijava > li,
  .rijeseno-lista > li:last-child:nth-child(odd), .lista-prijava > li:last-child:nth-child(odd) { grid-column: span 2; }
  .rijeseno-lista > li:last-child:nth-child(3n+1), .lista-prijava > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .rijeseno-lista > li:nth-last-child(2):nth-child(3n+1), .lista-prijava > li:nth-last-child(2):nth-child(3n+1),
  .rijeseno-lista > li:last-child:nth-child(3n+2), .lista-prijava > li:last-child:nth-child(3n+2) { grid-column: span 3; }
}

/* =========================================================
   POČETNA: naslov do mape, linkovi u jednom redu, razmak
   ========================================================= */
.uvod h1 { max-width: none; }
.uvod__podnaslov { max-width: none; }
.uvod__tekst { min-width: 0; }
.sekcija__glava { align-items: center; }
.sekcija__linkovi { flex: none; white-space: nowrap; }
@media (max-width: 420px) {
  .sekcija__glava h2 { font-size: 1.2rem; }
  .sekcija__linkovi { gap: 10px; font-size: .92rem; }
}
.koraci-sekcija { margin-top: 52px; }

/* =========================================================
   VAŽNI BROJEVI: dvije kolone
   ========================================================= */
.broj-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pozivni-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pozivni-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .brojevi__grupa { margin-top: 14px; }
  .broj-lista { gap: 8px; }
  .broj-kartica { position: relative; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; padding: 10px; }
  .broj-kartica__tekst { padding-right: 26px; }
  .broj-kartica__tekst strong { font-size: .88rem; line-height: 1.25; }
  .broj-kartica__tekst small { font-size: .76rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .broj-kartica__akcije { display: block; }
  .broj-kartica__broj { display: flex; width: 100%; justify-content: center; padding: 8px 6px; font-size: .92rem; gap: 4px; }
  .broj-kartica__kopiraj { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; background: var(--papir); }
  .znacka-24 { font-size: .64rem; padding: 0 5px; }
  .pozivni-lista li { gap: 8px; padding: 7px 8px; }
  .pozivni-lista__broj { width: 40px; font-size: 1rem; }
  .pozivni-lista strong { font-size: .88rem; }
  .pozivni-lista small { font-size: .74rem; }
}
@media (max-width: 480px) {
  .broj-kartica__akcije { justify-content: initial; }
}
.pozivni-lista li { min-width: 0; }
.pozivni-lista strong, .pozivni-lista small { overflow-wrap: anywhere; }
.ugradi-widget > * { min-width: 0; }
@media (max-width: 639px) {
  .pozivni-lista li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pozivni-lista__broj { width: auto; text-align: left; }
}

/* Podnožje: hitni brojevi i link „Svi važni brojevi“ nikad u dva reda */
.podnozje__hitno a, .podnozje__svi-brojevi { white-space: nowrap; }
.podnozje__hitno ul { display: flex; flex-wrap: wrap; }
.podnozje__hitno li { flex: 1 1 calc(50% - 4px); min-width: max-content; }
@media (min-width: 640px) { .podnozje__hitno li { flex: 1 1 auto; } }
@media (min-width: 900px) {
  .podnozje__hitno { flex-wrap: wrap; row-gap: 10px; }
  .podnozje__hitno ul { flex: 1 1 auto; }
  .podnozje__svi-brojevi { margin-top: 0; flex: none; }
}
@media (max-width: 360px) { .podnozje__hitno a { font-size: .82rem; padding: 8px 9px; gap: 6px; } }

/* =========================================================
   ŠTA JE UGROŽENO (GIS)
   ========================================================= */
.ugrozeno { margin: 18px 0; padding: 16px 18px; border-radius: var(--r); background: #FFF6EC; border: 1px solid #F3D7B8; }
.ugrozeno h2 { font-size: 1.15rem; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; color: #8A3D0E; }
.ugrozeno__tekst { margin: 0 0 12px; }
.ugrozeno__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ugrozeno__lista li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--bijela); border-radius: var(--r-malo); border: 1px solid #F1E0CC; }
.ugrozeno__lista li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ugrozeno__lista strong { font-size: .92rem; }
.ugrozeno__lista small { color: var(--siva); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ugrozeno__ik { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FBE3CB; color: #A9480F; }
.ugrozeno__ik .ik { width: 19px; height: 19px; }
.ugrozeno__izvor { margin: 10px 0 0; font-size: .8rem; color: var(--siva); }
.popup__ugrozeno { font-size: .82rem; color: #8A3D0E; margin: 0 0 8px !important; }

/* Admin blok */
.admin-gis { margin: 12px 0; padding: 12px 14px; border-radius: var(--r-malo); border: 1px dashed #E5B98E; background: #FFFAF4; }
.admin-gis--potvrdjeno { border-style: solid; border-color: #A9D3B4; background: #F3FAF4; }
.admin-gis__glava { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; margin-bottom: 6px; }
.admin-gis__glava strong { display: inline-flex; gap: 6px; align-items: center; }
.admin-gis__status { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FBE6DD; color: #8A2F1B; display: inline-flex; gap: 4px; align-items: center; }
.admin-gis__status--ok { background: #DDF0E1; color: #1C6234; }
.admin-gis__info { font-size: .86rem; color: var(--siva); margin: 0 0 10px; }
.admin-gis__info--greska { color: var(--greska); }
.admin-gis__vrti { display: inline-block; vertical-align: -2px; margin-right: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #E5B98E; border-top-color: var(--narandzasta); animation: gis-vrti .8s linear infinite; flex: none; }
@keyframes gis-vrti { to { transform: rotate(360deg); } }
.admin-gis__stavke { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 10px; }
.admin-gis__stavka { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 8px; background: var(--bijela); border: 1px solid var(--linija); cursor: pointer; font-size: .88rem; }
.admin-gis__stavka--osm { border-color: #E9B486; }
.admin-gis__stavka input { margin-top: 3px; accent-color: var(--narandzasta); }
.admin-gis__stavka span { display: flex; flex-direction: column; min-width: 0; }
.admin-gis__stavka span .ik { display: inline; vertical-align: -3px; margin-right: 3px; }
.admin-gis__stavka small { color: var(--siva); font-size: .76rem; }
.admin-gis__stavka--osm small { color: #A9480F; font-weight: 700; }
.admin-gis__dugmad { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========================================================
   DJELIMIČNO RIJEŠENO
   ========================================================= */
.status--djelimicno { background: #FBF0CC; color: #725A06; }
.djelimicno { margin: 18px 0; padding: 16px 18px; border-radius: var(--r); background: #FFFBEA; border: 1px solid #EEDC9A; }
.djelimicno__glava { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.djelimicno__glava h2 { font-size: 1.15rem; margin: 0 0 2px; color: #725A06; }
.djelimicno__glava p { margin: 0; color: var(--siva); font-size: .92rem; }
.djelimicno__ik { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #C9A227; color: #fff; display: grid; place-items: center; }
.djelimicno__ik .ik { width: 22px; height: 22px; }
.djelimicno .poredjenje { margin-bottom: 12px; }
.djelimicno__lista { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid #EEDC9A; display: grid; gap: 12px; }
.djelimicno__lista li { position: relative; }
.djelimicno__lista li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: #C9A227; box-shadow: 0 0 0 3px #FFFBEA; }
.djelimicno__lista strong { display: block; }
.djelimicno__lista span { font-size: .84rem; color: var(--siva); }
.djelimicno__lista p { margin: 4px 0 6px; }
.djelimicno__napomena { font-size: .9rem; color: #725A06; }
.pin-djelimicno { position: absolute; bottom: -4px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #C9A227; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pin-djelimicno svg { width: 14px; height: 14px; }
.popup__djel { font-size: .84rem; color: #725A06; font-weight: 700; margin: 0 0 8px !important; display: flex; gap: 5px; align-items: center; }
.prijava-red__vrijeme--djelimicno { color: #8A6D08; }
.legenda__pin--djel { position: relative; }
.legenda__pin--djel i { position: absolute; right: -6px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #C9A227; display: grid; place-items: center; }
.legenda__pin--djel i .ik { width: 11px; height: 11px; }
.legenda__pin--vrijeme { background: var(--bor); }
.admin-obim { font-size: .88rem; margin: 6px 0; display: flex; gap: 6px; align-items: center; }
.admin-obim--djelimicno { color: #725A06; background: #FBF0CC; padding: 6px 10px; border-radius: 8px; }
.admin-djelimicno { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-malo); background: #FFFBEA; border: 1px solid #EEDC9A; }
.admin-djelimicno__red { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: .88rem; }
.admin-djelimicno__red img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; }
.admin-rijesi select { font: inherit; font-size: .88rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linija); background: var(--bijela); }

/* =========================================================
   PRIJAVE KROZ VRIJEME (vrijeme.php)
   ========================================================= */
.vrijeme {
  background: var(--bijela); border-radius: 18px; box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .35); padding: 10px 14px 12px;
  display: grid; gap: 8px;
}
.vrijeme[hidden] { display: none; }
.vrijeme__vrh { display: flex; align-items: center; gap: 10px; }
.vrijeme__naslov { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; color: var(--bor); white-space: nowrap; }
.vrijeme__datum { margin-left: auto; font: 800 1.15rem/1 var(--font-naslov); color: var(--kora); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vrijeme__zatvori { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--linija); background: var(--bijela); display: grid; place-items: center; cursor: pointer; color: var(--kora); }
.vrijeme__kontrole { display: flex; align-items: center; gap: 12px; }
.vrijeme__play { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--narandzasta); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(226, 106, 18, .8); }
.vrijeme__play .ik { width: 22px; height: 22px; }
.vrijeme__klizac { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--narandzasta) var(--pr, 0%), var(--linija) var(--pr, 0%)); }
.vrijeme__klizac::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--narandzasta); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
.vrijeme__klizac::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--narandzasta); }
.vrijeme__brojke { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--siva); }
.vrijeme__brojke b { color: var(--kora); font-size: 1rem; }
.vrijeme__akt b { color: #B23F2A; }
.vrijeme__djel b { color: #A07F0A; }
.vrijeme__rij b { color: var(--ociscena); }
.pin-novo .pin-sklop { animation: pin-pojava .7s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 50% 100%; }
@keyframes pin-pojava { 0% { transform: scale(0) translateY(-14px); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pin-rijesen-anim .pin-sklop { animation: pin-rijesen .8s ease; }
@keyframes pin-rijesen { 0% { transform: scale(1); } 40% { transform: scale(1.35); filter: drop-shadow(0 0 8px #4FBF6E); } 100% { transform: scale(1); } }
@media (max-width: 560px) {
  .vrijeme { bottom: 10px; padding: 8px 12px 10px; }
  .vrijeme__naslov span, .vrijeme__naslov { font-size: .82rem; }
  .vrijeme__datum { font-size: 1rem; }
}

/* =========================================================
   DIJELJENJE
   ========================================================= */
.podijeli { display: flex; flex-wrap: wrap; gap: 6px; }
.podijeli__dugme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font: 700 .88rem var(--font-tekst); text-decoration: none; cursor: pointer;
  background: var(--bijela); color: var(--kora); border: 1px solid var(--linija); white-space: nowrap; }
.podijeli__dugme:hover { border-color: var(--bor); color: var(--bor); }
.podijeli__dugme--fb { background: #1877F2; border-color: #1877F2; color: #fff; }
.podijeli__dugme--viber { background: #7360F2; border-color: #7360F2; color: #fff; }
.podijeli__dugme--wa { background: #1FA855; border-color: #1FA855; color: #fff; }
.podijeli__dugme--fb:hover, .podijeli__dugme--viber:hover, .podijeli__dugme--wa:hover { color: #fff; filter: brightness(1.08); }
.detalj__podijeli { margin: 20px 0 6px; }
.detalj__mjesto-link { display: inline-flex; align-items: center; gap: 5px; margin: -4px 0 8px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--bor); }
.detalj__mjesto-link:hover { color: var(--narandzasta-tamna); }

/* =========================================================
   JAVNA STRANICA MJESTA
   ========================================================= */
.lokacija { max-width: 1040px; margin: 0 auto; }
.lokacija__glava { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.lokacija__naslov { min-width: 0; flex: 1 1 320px; }
.lokacija__oznaka { display: inline-flex; gap: 5px; align-items: center; font-size: .85rem; font-weight: 700; color: var(--siva); text-transform: uppercase; letter-spacing: .03em; }
.lokacija__oznaka a { text-transform: none; letter-spacing: 0; }
.lokacija__glava h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin: 4px 0 10px; }
.lokacija__stanje { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lokacija__bez { color: var(--ociscena); font-weight: 700; }
.lokacija__brojke { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lokacija__brojke li { padding: 12px 14px; border-radius: var(--r); background: var(--bijela); border: 1px solid var(--linija); display: flex; flex-direction: column; gap: 2px; }
.lokacija__brojke strong { font: 800 1.45rem/1.1 var(--font-naslov); color: var(--bor); }
.lokacija__brojke span { font-size: .84rem; color: var(--siva); line-height: 1.35; }
.lokacija__podijeli { margin: 0 0 14px; }
.lokacija__mapa { height: 340px; border-radius: 20px; overflow: hidden; border: 1px solid var(--linija); box-shadow: var(--sjena); margin-bottom: 30px; background: var(--lisaj); z-index: 1; }
.lokacija__broj { font-weight: 700; color: var(--siva); }
.lokacija__pp { display: grid; gap: 14px; }
.lokacija__pp-stavka { margin: 0; }
.lokacija__pp-stavka figcaption { font-size: .86rem; color: var(--siva); margin-top: 6px; }
.lokacija__foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lokacija__foto a { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--papir); }
.lokacija__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.lokacija__foto a:hover img { transform: scale(1.05); }
.lokacija__foto-oznaka { position: absolute; left: 6px; bottom: 6px; font-size: .7rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: #fff; background: rgba(28, 38, 32, .7); }
.lokacija__foto-oznaka--r { background: var(--ociscena); }
.lokacija__foto-oznaka--d { background: #C9A227; }
.lokacija__akcija { text-align: center; margin: 26px 0 10px; }
.historija { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.historija__stavka { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.historija__stavka:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--linija); }
.historija__ik { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hb); color: #fff; box-shadow: 0 0 0 3px var(--papir); }
.historija__stavka div { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.historija time { font-size: .8rem; color: var(--siva); font-weight: 700; }
.historija a { font-weight: 700; text-decoration: none; color: var(--kora); }
.historija a:hover { color: var(--narandzasta-tamna); }
.historija small { color: var(--siva); font-size: .82rem; }
@media (min-width: 720px) {
  .lokacija__brojke { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lokacija__mapa { height: 420px; }
  .lokacija__pp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lokacija__foto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .lokacija__pp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lokacija__pp:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   INDEKS STANJA
   ========================================================= */
.indeks-kartica { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--bijela); border: 1px solid var(--linija); box-shadow: var(--sjena); text-decoration: none; color: var(--kora); }
.indeks-kartica__mjerac { width: 110px; height: 66px; flex: none; }
.indeks-kartica__broj { font: 800 28px var(--font-naslov); fill: var(--kora); }
.indeks-kartica__tekst { display: flex; flex-direction: column; line-height: 1.2; }
.indeks-kartica__tekst small { font-size: .78rem; color: var(--siva); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.indeks-kartica__tekst strong { font: 800 1.2rem var(--font-naslov); color: var(--ib); }
.indeks-kartica__tekst em { font-style: normal; font-size: .82rem; color: var(--siva); }
.indeks-objasnjenje { margin: 30px 0 10px; padding: 16px 18px; border-radius: var(--r); background: var(--papir); border: 1px solid var(--linija); }
.indeks-objasnjenje h2 { font-size: 1.1rem; display: flex; gap: 8px; align-items: center; }
.indeks-objasnjenje ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.indeks-napomena { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-malo); background: #EEF4FB; color: #24456E; font-size: .9rem; font-weight: 700; }
.indeks-napomena .ik { flex: none; margin-top: 2px; }
.indeks-napomena--velika { font-size: .98rem; }
.indeks-str { max-width: 980px; margin: 0 auto; }
.indeks-str__uvod { text-align: center; padding: 8px 0 18px; }
.indeks-str__uvod h1 { margin: 10px 0 8px; }
.indeks-str__uvod > p { color: var(--siva); max-width: 62ch; margin: 0 auto; }
.indeks-str__uvod .indeks-napomena { max-width: 62ch; margin: 14px auto 0; text-align: left; }
.indeks-str__trazi { position: static; margin-bottom: 12px; }
.indeks-opcine { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.indeks-opcina { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--bijela); border: 1px solid var(--linija); text-decoration: none; color: var(--kora); }
.indeks-opcina:hover { border-color: var(--ib); }
.indeks-opcina__broj { grid-row: 1 / 3; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 800 1.45rem var(--font-naslov); color: #fff; background: var(--ib); }
.indeks-opcina__tekst { display: flex; flex-direction: column; min-width: 0; }
.indeks-opcina__tekst strong { font-size: 1.05rem; }
.indeks-opcina__tekst small { color: var(--siva); font-size: .82rem; }
.indeks-opcina__traka { height: 7px; border-radius: 999px; background: var(--papir); overflow: hidden; }
.indeks-opcina__traka span { display: block; height: 100%; border-radius: 999px; background: var(--ib); }
.mjesta-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mjesta-lista li[hidden] { display: none; }
.mjesta-lista a { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 54px 11px 14px; border-radius: var(--r-malo); background: var(--bijela); border: 1px solid var(--linija); text-decoration: none; color: var(--kora); min-height: 62px; justify-content: center; }
.mjesta-lista a:hover { border-color: var(--bor); }
.mjesta-lista span { color: var(--siva); font-size: .82rem; }
.mjesta-lista__indeks { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--font-naslov); font-style: normal; color: #fff; background: var(--ib); }
@media (min-width: 720px) { .indeks-opcine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.poredjenje__oznaka--djel { background: #C9A227 !important; color: #fff; }

.vrijeme-str { max-width: 1100px; margin: 0 auto; }
.vrijeme-str__uvod { padding: 4px 0 12px; }
.vrijeme-str__uvod h1 { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.vrijeme-str__uvod h1 .ik { width: 1em; height: 1em; color: var(--narandzasta); }
.vrijeme-str__uvod p { color: var(--siva); margin: 0; max-width: 70ch; }
.vrijeme-str__okvir { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--linija); box-shadow: var(--sjena); }
.vrijeme-str__mapa { height: min(62vh, 560px); min-height: 360px; background: var(--lisaj); z-index: 1; }
.vrijeme-str__start { position: absolute; z-index: 600; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px 16px 22px; border-radius: 999px; border: 0; background: var(--narandzasta); color: #fff; font: 800 1.2rem var(--font-naslov); cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(226, 106, 18, .9); }
.vrijeme-str__start .ik { width: 26px; height: 26px; }
.vrijeme-str__start[hidden] { display: none; }
.vrijeme-str__dogadjaj { position: absolute; z-index: 600; left: 12px; top: 12px; max-width: min(360px, calc(100% - 70px)); display: flex; gap: 10px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--bijela); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); border-left: 5px solid var(--narandzasta);
  animation: dog-ulaz .35s ease; }
.vrijeme-str__dogadjaj[hidden] { display: none; }
.vrijeme-str__dogadjaj--r { border-left-color: var(--ociscena); }
.vrijeme-str__dogadjaj--d { border-left-color: #C9A227; }
.vrijeme-str__dogadjaj img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; }
.vrijeme-str__dogadjaj div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vrijeme-str__dogadjaj small { font-size: .76rem; color: var(--siva); font-weight: 700; }
.vrijeme-str__dogadjaj strong { font-size: .98rem; }
.vrijeme-str__dogadjaj--n strong { color: #B23F2A; }
.vrijeme-str__dogadjaj--r strong { color: var(--ociscena); }
.vrijeme-str__dogadjaj--d strong { color: #8A6D08; }
.vrijeme-str__dogadjaj span { font-size: .84rem; color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes dog-ulaz { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.vrijeme--stat { position: static; transform: none; width: auto; margin: 12px 0 0; box-shadow: var(--sjena); border: 1px solid var(--linija); }
.vrijeme__dan { font-size: .85rem; color: var(--narandzasta-tamna); font-weight: 700; white-space: nowrap; }
.vrijeme--stat .vrijeme__datum { margin-left: 0; }
.vrijeme__brzina { margin-left: auto; display: flex; gap: 4px; }
.vrijeme__brzina .cip { min-height: 32px; padding: 4px 10px; box-shadow: none; }
.vrijeme__mali { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--linija); background: var(--bijela); display: grid; place-items: center; cursor: pointer; color: var(--kora); }
.vrijeme__mali--naprijed .ik { transform: scaleX(-1); }
.vrijeme__mjeseci { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 2px; }
.vrijeme__mjeseci::-webkit-scrollbar { display: none; }
.vrijeme__mjeseci .cip { min-height: 34px; padding: 4px 12px; box-shadow: none; }
.vrijeme-str__dno { margin: 14px 0 0; font-weight: 700; }
@media (max-width: 560px) {
  .vrijeme--stat .vrijeme__vrh { flex-wrap: wrap; row-gap: 6px; }
  .vrijeme__brzina { margin-left: 0; width: 100%; }
  .vrijeme-str__mapa { height: 56vh; }
}

/* Stranica mjesta: brojač stanja krajnje desno od naziva, indeks preko cijele širine na telefonu */
.lokacija__glava { display: block; margin-bottom: 12px; }
.lokacija__red { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lokacija__red h1 { margin: 4px 0 6px; min-width: 0; overflow-wrap: break-word; }
.lokacija__stanje { flex: 0 1 auto; justify-content: flex-end; text-align: right; max-width: 60%; }
.lokacija__bez { font-size: .9rem; }
.lokacija__pregled { display: grid; gap: 8px; margin-bottom: 14px; }
.lokacija__pregled .lokacija__brojke { margin: 0; }
.lokacija__pregled .indeks-kartica { box-shadow: none; }
@media (min-width: 720px) {
  .lokacija__pregled { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .lokacija__pregled--bez { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .lokacija__stanje { flex-direction: column; align-items: flex-end; gap: 5px; max-width: 55%; }
  .lokacija__stanje .status { font-size: .8rem; padding: 3px 9px; }
  .lokacija__bez { font-size: .82rem; }
  .indeks-kartica { width: 100%; justify-content: center; box-sizing: border-box; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .lokacija__pregled:not(.lokacija__pregled--bez) .lokacija__brojke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mapa: tačno između zaglavlja i donje navigacije (ne zavisi od 100vh/100dvh koje se u instaliranoj
   aplikaciji (PWA) računa drugačije nego u pregledniku, pa su donja dugmad bila skrivena ispod navigacije) */
.mapa-stranica {
  position: fixed; z-index: 1; left: 0; right: 0; height: auto; min-height: 0;
  top: var(--mapa-vrh, calc(var(--zaglavlje-v) + 1px));
  bottom: var(--mapa-dno, calc(var(--nav-v) + env(safe-area-inset-bottom, 0px)));
}
body[data-page="mapa"] { overflow: hidden; overscroll-behavior: none; }

/* =========================================================
   DA LI SE PROBLEM ŠIRI? (stanje na terenu)
   ========================================================= */
.blok--sirenje legend .ik { color: var(--narandzasta); vertical-align: -3px; }
.sirenje-izbor[hidden] { display: none; }
.sirenje-izbor__pitanje { font-weight: 700; margin: 4px 0 8px; font-size: .95rem; }
.sirenje-izbor__opcije { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sirenje-cip { position: relative; display: block; cursor: pointer; }
.sirenje-cip input { position: absolute; opacity: 0; pointer-events: none; }
.sirenje-cip > span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 10px; border-radius: 12px; text-align: center;
  background: var(--bijela); border: 1.5px solid var(--linija); font-weight: 700; font-size: .92rem; line-height: 1.2; transition: border-color .15s, background .15s; }
.sirenje-cip input:focus-visible + span { outline: 3px solid var(--narandzasta); outline-offset: 2px; }
.sirenje-cip--lose input:checked + span { background: #FBE6DD; border-color: #D2442D; color: #8A2F1B; }
.sirenje-cip--dobro input:checked + span { background: #DDF0E1; border-color: var(--ociscena); color: #1C6234; }
.sirenje-cip--neutral input:checked + span { background: #EEF2FA; border-color: #4A6FA5; color: #24456E; }
.sirenje-cip--nepoznato input:checked + span { background: #EEF0EB; border-color: #8C968E; color: var(--kora); }
.sirenje-cip--mali > span { display: inline-flex; min-height: 0; padding: 3px 9px; border-radius: 999px; font-size: .78rem; border-width: 1px; }
.sirenje-cip--mali.sirenje-cip--lose > span { background: #FBE6DD; color: #8A2F1B; border-color: #F1C2B3; }
.sirenje-cip--mali.sirenje-cip--dobro > span { background: #DDF0E1; color: #1C6234; border-color: #B8DCC1; }
.sirenje-cip--mali.sirenje-cip--neutral > span { background: #EEF2FA; color: #24456E; border-color: #CDD9EC; }
.sirenje-izbor__ponisti { margin-top: 6px; font-size: .85rem; }
.kompas-omot { margin-top: 12px; }
.kompas-omot[hidden] { display: none; }
.kompas { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 58px); gap: 6px; justify-content: center;
  padding: 10px; border-radius: 50%; width: max-content; margin: 0 auto; background: radial-gradient(circle, #fff 55%, var(--papir) 56%); }
.kompas__smjer { position: relative; cursor: pointer; }
.kompas__smjer input { position: absolute; opacity: 0; pointer-events: none; }
.kompas__smjer span { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: var(--bijela); border: 1.5px solid var(--linija); line-height: 1; }
.kompas__smjer b { font-size: 1.35rem; color: var(--bor); }
.kompas__smjer small { font-size: .66rem; font-weight: 800; color: var(--siva); margin-top: 2px; letter-spacing: .04em; }
.kompas__smjer input:checked + span { background: var(--narandzasta); border-color: var(--narandzasta); }
.kompas__smjer input:checked + span b, .kompas__smjer input:checked + span small { color: #fff; }
.kompas__smjer input:focus-visible + span { outline: 3px solid var(--narandzasta); outline-offset: 2px; }
.kompas__sredina { display: grid; place-items: center; color: var(--narandzasta); }
.kompas__sredina .ik { width: 26px; height: 26px; }

/* Stranica prijave */
.sirenje { margin: 18px 0; padding: 16px 18px; border-radius: var(--r); background: var(--bijela); border: 1px solid var(--linija); }
.sirenje h2 { font-size: 1.15rem; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.sirenje h2 .ik { color: var(--narandzasta); }
.sirenje__stanje { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--papir); margin-bottom: 14px; }
.sirenje__stanje div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sirenje__stanje small { color: var(--siva); font-size: .84rem; }
.sirenje__strelica { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #8C968E; color: #fff; }
.sirenje__strelica b { font-size: 1.5rem; line-height: 1; transform: rotate(var(--ugao, 0deg)); display: block; }
.sirenje__strelica .ik { width: 22px; height: 22px; }
.sirenje__stanje--lose { background: #FDEFEA; } .sirenje__stanje--lose .sirenje__strelica { background: #D2442D; } .sirenje__stanje--lose strong { color: #8A2F1B; }
.sirenje__stanje--dobro { background: #EAF6EC; } .sirenje__stanje--dobro .sirenje__strelica { background: var(--ociscena); } .sirenje__stanje--dobro strong { color: #1C6234; }
.sirenje__stanje--neutral { background: #EEF2FA; } .sirenje__stanje--neutral .sirenje__strelica { background: #4A6FA5; }
.sirenje__raspodjela { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sirenje__forma .dugme { margin-top: 14px; }
.sirenje__napomena { font-size: .82rem; color: var(--siva); margin: 8px 0 0; }
.sirenje__poruka { font-size: .9rem; margin: 6px 0 0; }
.sirenje__poruka.ok { color: var(--ociscena); font-weight: 700; }
.sirenje__poruka.greska { color: var(--greska); }
.popup__sirenje { font-size: .84rem; font-weight: 700; margin: 0 0 8px !important; }
.popup__sirenje--lose { color: #B23F2A; } .popup__sirenje--dobro { color: #1C6234; }
.popup__sirenje small { font-weight: 400; color: var(--siva); }
.admin-teren { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-malo); background: var(--papir); border: 1px solid var(--linija); }
.admin-teren__red { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; font-size: .86rem; }
.admin-teren__red small { color: var(--siva); }
@media (min-width: 640px) { .sirenje-izbor__opcije { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Stanje na terenu: dva reda (širenje, pristup) i forma */
.sirenje__redovi { display: grid; gap: 8px; margin-bottom: 14px; }
.sirenje__redovi .sirenje__stanje { margin-bottom: 0; }
.sirenje__oznaka { font-size: .74rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--siva); }
.sirenje__stanje--oprez { background: #FDF3E1; } .sirenje__stanje--oprez .sirenje__strelica { background: #D9901A; } .sirenje__stanje--oprez strong { color: #8A5A06; }
.sirenje-cip--oprez input:checked + span { background: #FDF3E1; border-color: #D9901A; color: #8A5A06; }
.sirenje-cip--mali.sirenje-cip--oprez > span { background: #FDF3E1; color: #8A5A06; border-color: #F0D49E; }
.sirenje__forma-naslov { font-weight: 700; margin: 0 0 4px; }
.blok__razmak { height: 14px; }
.popup__pristup { font-size: .84rem; font-weight: 700; margin: 0 0 8px !important; }
.popup__pristup--lose { color: #B23F2A; } .popup__pristup--oprez { color: #8A5A06; } .popup__pristup--dobro { color: #1C6234; }
.popup__pristup small { font-weight: 400; color: var(--siva); }
@media (min-width: 720px) { .sirenje__redovi { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   SMJER PREMA PROBLEMU
   ========================================================= */
.prema { margin: 10px 0 4px; }
.prema__otvori { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: #FFF6EC; border: 1.5px dashed #E9B486; color: var(--kora); font: inherit; }
.prema__otvori .ik { width: 22px; height: 22px; color: var(--narandzasta); flex: none; }
.prema__otvori span { display: flex; flex-direction: column; }
.prema__otvori small { color: var(--siva); font-size: .82rem; }
.prema__otvori[aria-expanded="true"] { border-style: solid; }
.prema__tijelo { padding: 12px 4px 4px; }
.prema__status { font-size: .88rem; color: var(--ociscena); font-weight: 700; margin: 8px 0 0; }
.kompas__sredina--ja { flex-direction: column; color: var(--bor); font-size: .7rem; font-weight: 800; }
.kompas__sredina--ja .ik { width: 22px; height: 22px; }
.prema-udaljenost { display: block; margin: 14px auto 0; max-width: 320px; }
.prema-udaljenost span { display: flex; justify-content: space-between; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.prema-udaljenost output { color: var(--narandzasta-tamna); font-variant-numeric: tabular-nums; }
.prema-udaljenost input { width: 100%; accent-color: var(--narandzasta); }
.prema-savjet { font-size: .8rem; color: var(--siva); text-align: center; margin: 8px 0 0; }
.prema-detalj { margin-top: 14px; border: 1px solid var(--linija); border-radius: 12px; background: var(--papir); }
.prema-detalj summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: .92rem; display: flex; gap: 6px; align-items: center; }
.prema-detalj summary .ik { color: var(--narandzasta); }
.prema-detalj[open] summary { border-bottom: 1px solid var(--linija); }
.prema-detalj .prema-izbor, .prema-detalj .sirenje__napomena { padding: 0 12px; }
.prema-detalj .sirenje__napomena { padding-bottom: 12px; }
.admin-procjene__prosjek { padding: 6px 8px; border-radius: 8px; background: #EEF2FA; }
.admin-procjene .upoz { color: var(--upozorenje); font-weight: 700; } .admin-procjene .ok { color: var(--ociscena); font-weight: 700; }

/* =========================================================
   POVRŠINA PROBLEMA
   ========================================================= */
.povrsina-izbor__opcije { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.povrsina-cip { position: relative; cursor: pointer; }
.povrsina-cip input { position: absolute; opacity: 0; pointer-events: none; }
.povrsina-cip > span { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; height: 100%;
  padding: 8px 10px; border-radius: 12px; background: var(--bijela); border: 1.5px solid var(--linija); line-height: 1.2; }
.povrsina-cip strong { font-size: .9rem; }
.povrsina-cip small { grid-column: 2; color: var(--siva); font-size: .76rem; }
.povrsina-cip__kv { grid-row: 1 / 3; justify-self: center; display: block; border-radius: 3px; background: #E9B486; border: 1.5px solid #C4570A; }
.povrsina-cip__kv--1 { width: 8px; height: 8px; } .povrsina-cip__kv--2 { width: 12px; height: 12px; } .povrsina-cip__kv--3 { width: 17px; height: 17px; }
.povrsina-cip__kv--4 { width: 22px; height: 22px; } .povrsina-cip__kv--5 { width: 28px; height: 28px; }
.povrsina-cip input:checked + span { background: #FFF1E3; border-color: var(--narandzasta); }
.povrsina-cip input:checked + span .povrsina-cip__kv { background: var(--narandzasta); }
.povrsina-cip input:focus-visible + span { outline: 3px solid var(--narandzasta); outline-offset: 2px; }
.povrsina-m2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; font-size: .88rem; font-weight: 700; }
.povrsina-m2__polje { display: inline-flex; align-items: center; gap: 6px; }
.povrsina-m2 input { width: 120px; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--linija); background: var(--bijela); }
.povrsina-m2 em { font-style: normal; color: var(--siva); }
.sirenje__stanje--povrsina { background: #FFF6EC; } .sirenje__stanje--povrsina .sirenje__strelica { background: #C4570A; } .sirenje__stanje--povrsina strong { color: #8A3D0E; }
.popup__povrsina { font-size: .84rem; color: #8A3D0E; margin: 0 0 8px !important; }
@media (min-width: 640px) { .povrsina-izbor__opcije { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .sirenje__redovi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   Uvodna poruka (dobrodošlica) — tamna providna pozadina, bijeli centriran tekst
   ===================================================================== */
.intro { display: none; }
html.intro-aktivan { overflow: hidden; }
html.intro-aktivan .intro {
  display: flex; position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(30, 77, 58, .3), transparent 70%),
    rgba(0, 0, 0, .86);
  backdrop-filter: blur(10px) saturate(.8); -webkit-backdrop-filter: blur(10px) saturate(.8);
  animation: intro-pojava .5s ease both;
}
.intro.intro--odlazi { animation: intro-odlazak .35s ease both; }
@keyframes intro-pojava { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-odlazak { to { opacity: 0; transform: scale(1.02); } }
.intro__kartica {
  width: 100%; max-width: 520px; max-height: 100%; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 28px calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.intro__kartica > * { animation: intro-gore .7s cubic-bezier(.2, .8, .2, 1) both; }
.intro__sadrzaj { animation-delay: .15s !important; }
.intro__dno { animation-delay: .3s !important; }
@keyframes intro-gore { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.intro__vrh { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 30px; }
.intro__znak { width: 58px; height: 58px; filter: drop-shadow(0 0 24px rgba(185, 216, 166, .45)); }
.intro__kategorije { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; justify-content: center; }
.intro__kategorije li {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: color-mix(in srgb, var(--b) 70%, #fff); border: 1.5px solid currentColor; background: rgba(255, 255, 255, .05);
}
.intro__kategorije .ik { width: 19px; height: 19px; }
.intro__sadrzaj { display: flex; flex-direction: column; align-items: center; }
.intro__naslov {
  font-family: var(--font-naslov); font-weight: 800; color: #fff; margin: 0 0 18px;
  font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em;
}
.intro__sadrzaj p { margin: 0 0 12px; font-size: 1.08rem; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 30em; }
.intro__sadrzaj p:first-of-type { font-size: 1.16rem; color: #fff; }
.intro__koraci {
  list-style: none; margin: 22px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: 100%; max-width: 360px; font-size: .88rem; line-height: 1.25; color: rgba(255, 255, 255, .8);
}
.intro__koraci li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro__koraci li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 20px); width: calc(100% - 40px); height: 1px; background: rgba(255, 255, 255, .28); }
.intro__koraci span {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55); font-size: .8rem; font-weight: 700; color: #fff;
}
.intro__potpis { margin: 26px 0 0 !important; font-family: var(--font-naslov); font-style: italic; font-weight: 500; color: #B9D8A6 !important; font-size: 1rem !important; }
.intro__dno { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
.intro__dugme {
  min-width: 220px; justify-content: center; font-size: 1.08rem; font-weight: 700; padding: 15px 34px;
  border-radius: 999px; background: #fff; color: var(--bor-tamni); border: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .15s;
}
.intro__dugme:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.intro__dugme:focus-visible { outline: 3px solid #B9D8A6; outline-offset: 3px; }
.intro__check { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; color: rgba(255, 255, 255, .7); cursor: pointer; padding: 6px; }
.intro__check input { width: 18px; height: 18px; accent-color: #B9D8A6; margin: 0; }
@media (min-width: 700px) { .intro__kartica { height: auto; } }
@media (max-height: 640px) {
  .intro__vrh { gap: 14px; margin-bottom: 18px; } .intro__znak { width: 44px; height: 44px; }
  .intro__naslov { margin-bottom: 12px; } .intro__dno { margin-top: 22px; } .intro__potpis { margin-top: 16px !important; }
  .intro__kartica { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .intro, .intro * { animation: none !important; } }
.admin-check--istaknuto { align-items: flex-start; background: var(--narandzasta-svijetla); border-radius: 10px; padding: 10px 12px; }

/* =====================================================================
   Kompas do prijave
   ===================================================================== */
.kompas-dugme {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0 4px; padding: 14px 16px;
  border: 0; border-radius: var(--r); cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(135deg, #111814 0%, #1E4D3A 100%); box-shadow: 0 8px 22px rgba(21, 56, 41, .25);
  font: inherit; transition: transform .15s, box-shadow .15s;
}
.kompas-dugme:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(21, 56, 41, .32); }
.kompas-dugme__ikona { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .45); }
.kompas-dugme__ikona .ik { width: 24px; height: 24px; animation: kompas-njihanje 3s ease-in-out infinite; }
@keyframes kompas-njihanje { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.kompas-dugme__tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kompas-dugme__tekst strong { font-family: var(--font-naslov); font-size: 1.05rem; }
.kompas-dugme__tekst small { font-size: .85rem; color: rgba(255, 255, 255, .72); }

.navkompas { display: none; }
html.navkompas-otvoren { overflow: hidden; }
html.navkompas-otvoren .navkompas {
  display: flex; position: fixed; inset: 0; z-index: 10001; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 56px) 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  text-align: center; color: #fff; overflow-y: auto;
  background: radial-gradient(70% 50% at 50% 45%, rgba(30, 77, 58, .28), transparent 75%), rgba(0, 0, 0, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s ease;
}
html.navkompas-otvoren .navkompas.navkompas--vidljiv { opacity: 1; }
.navkompas__zatvori {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.navkompas__zatvori:hover { background: rgba(255, 255, 255, .16); }
.navkompas__oznaka { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #B9D8A6; }
.navkompas__naziv { margin: 4px 0 0; font-family: var(--font-naslov); font-weight: 800; font-size: clamp(1.25rem, 5.4vw, 1.7rem); line-height: 1.15; color: #fff; max-width: 22em; }
.navkompas__brojcanik { position: relative; width: min(86vw, 52vh, 420px); aspect-ratio: 1; margin: 10px 0 4px; }
.navkompas__svg { width: 100%; height: 100%; overflow: visible; display: block; }
.navkompas__svg .k-prsten { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.navkompas__svg .k-prsten2 { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.navkompas__svg .k-duga { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.navkompas__svg .k-kratka { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.navkompas__svg text { fill: #fff; text-anchor: middle; dominant-baseline: central; font-family: var(--font-naslov); }
.navkompas__svg .k-broj { font-size: 11px; fill: rgba(255, 255, 255, .55); font-family: var(--font-tekst); }
.navkompas__svg .k-strana { font-size: 24px; font-weight: 800; }
.navkompas__svg .k-sjever { fill: #FF5A4E; }
.navkompas__svg .k-medju { font-size: 12px; font-weight: 700; fill: rgba(255, 255, 255, .7); }
.navkompas__svg .k-indeks { fill: #fff; }
.navkompas__ploca, .navkompas__strelica { transform-origin: 0 0; will-change: transform; }
.navkompas__strelica { opacity: 0; transition: opacity .4s; }
.navkompas--ima-smjer .navkompas__strelica { opacity: 1; }
.navkompas__svg .k-igla { fill: var(--k-boja, #E26A12); stroke: rgba(0, 0, 0, .35); stroke-width: 1; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .5)); transition: fill .3s; }
.navkompas__svg .k-rep { stroke: rgba(255, 255, 255, .35); stroke-width: 4; stroke-linecap: round; }
.navkompas__svg .k-cilj circle { fill: var(--k-boja, #E26A12); stroke: #fff; stroke-width: 2.5; transition: fill .3s; }
.navkompas__svg .k-cilj-ik { color: #fff; }
.navkompas--poravnato .k-igla, .navkompas--poravnato .k-cilj circle { fill: #3FCB7A; }
.navkompas--poravnato .k-prsten2 { stroke: #3FCB7A; stroke-width: 3; filter: drop-shadow(0 0 12px rgba(63, 203, 122, .7)); }
.navkompas__centar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(10, 14, 12, .92); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 6px rgba(0, 0, 0, .35);
}
.navkompas__udaljenost { font-family: var(--font-naslov); font-weight: 800; font-size: clamp(1.1rem, 5.5vw, 1.6rem); line-height: 1; white-space: nowrap; }
.navkompas__centar small { font-size: .72rem; color: rgba(255, 255, 255, .65); margin-top: 3px; }
.navkompas__smjer { margin: 6px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .8); white-space: pre-wrap; }
.navkompas__status { margin: 0; min-height: 1.5em; font-family: var(--font-naslov); font-weight: 700; font-size: 1.2rem; color: #fff; }
.navkompas--poravnato .navkompas__status { color: #3FCB7A; }
.navkompas--stigli .navkompas__status { color: #B9D8A6; }
.navkompas--stigli .navkompas__centar { border-color: #3FCB7A; box-shadow: 0 0 0 6px rgba(63, 203, 122, .25), 0 0 30px rgba(63, 203, 122, .5); }
.navkompas--greska .navkompas__status { color: #FFB4A8; font-size: 1rem; }
.navkompas__napomena { margin: 0; max-width: 26em; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .55); }
.navkompas__karta { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none; font-size: .9rem; }
.navkompas__karta:hover { background: rgba(255, 255, 255, .1); }
@media (max-height: 640px) { .navkompas__brojcanik { width: min(80vw, 46vh); } html.navkompas-otvoren .navkompas { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .kompas-dugme__ikona .ik { animation: none; } }
.navkompas__svg .k-uspravno { transform-box: view-box; transform-origin: 0 0; transform: rotate(calc((var(--h, 0) - var(--i, 0)) * 1deg)); }
.navkompas__svg .k-cilj-ik { transform-origin: 0 0; transform: rotate(calc(var(--a, 0) * -1deg)); }
.navkompas--stigli .navkompas__strelica { opacity: .35; }

/* =====================================================================
   Isti kadar: prozirni prethodni snimak preko kamere
   ===================================================================== */
.kadar { display: none; }
html.kadar-otvoren { overflow: hidden; }
.kadar.kadar--otvoren {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 10002; background: #000; color: #fff;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); --duh: .45;
}
.kadar__vrh { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.kadar__naslov { margin: 0; font-family: var(--font-naslov); font-weight: 700; font-size: 1.05rem; }
.kadar__x, .kadar__mreza-dugme {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: 700 1.1rem var(--font-naslov);
}
.kadar__mreza-dugme.aktivno { background: #fff; color: #000; }
.kadar__scena { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kadar__okvir { position: relative; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; background: #111; }
.kadar__video, .kadar__duh, .kadar__rezultat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kadar__rezultat { z-index: 1; }
.kadar__duh { z-index: 2; opacity: var(--duh); pointer-events: none; transition: opacity .15s; user-select: none; -webkit-user-select: none; }
.kadar--staro .kadar__duh { opacity: 1; }
.kadar__mreza {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.kadar--bez-mreze .kadar__mreza { display: none; }
.kadar__blic { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.kadar--blic .kadar__blic { animation: kadar-blic .35s ease-out; }
@keyframes kadar-blic { from { opacity: .85; } to { opacity: 0; } }
.kadar__poruka { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 5; margin: 0; padding: 16px; border-radius: 14px; text-align: center; background: rgba(0, 0, 0, .78); line-height: 1.45; }
.kadar__dno { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; background: linear-gradient(to top, #000 70%, rgba(0, 0, 0, .6)); }
.kadar__uputa { margin: 0; text-align: center; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.kadar__kontrole { display: flex; flex-direction: column; gap: 6px; }
.kadar__klizac { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: .82rem; color: rgba(255, 255, 255, .75); }
.kadar__klizac[hidden] { display: none; }
.kadar__klizac input { width: 100%; accent-color: #B9D8A6; }
.kadar__slicice { display: flex; gap: 8px; justify-content: center; }
.kadar__slicice:empty { display: none; }
.kadar__slicice button { width: 46px; height: 46px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; }
.kadar__slicice button.aktivno { border-color: #fff; opacity: 1; }
.kadar__slicice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kadar__akcije { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kadar__akcije[hidden] { display: none; }
.kadar__mali { flex: 1; min-width: 0; padding: 10px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; font: 600 .82rem var(--font-tekst); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.kadar__okidac { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; }
.kadar__okidac span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.kadar__okidac:active span { transform: scale(.88); }
.kadar__sekundarno, .kadar__primarno { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 999px; font: 700 .92rem var(--font-tekst); cursor: pointer; white-space: nowrap; }
.kadar__sekundarno { border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.kadar__primarno { border: 0; background: #fff; color: var(--bor-tamni); }
.kadar--pregled .kadar__video { visibility: hidden; }
@media (min-width: 700px) { .kadar__dno { max-width: 560px; width: 100%; margin: 0 auto; } }

/* Računar (miš, bez dodira): nema "Uslikaj", samo "Dodaj fotografiju" (klik ili prevlačenje) */
.samo-racunar { display: none !important; }
html.racunar .samo-racunar { display: flex !important; }
html.racunar .samo-mobilni { display: none !important; }
html.racunar label.foto-dugme[for="foto-kamera"] { display: none; }
html.racunar .foto-akcije { grid-template-columns: 1fr; }
html.racunar label.foto-dugme[for="foto-galerija"] { min-height: 128px; flex-direction: row; gap: 16px; border-color: var(--narandzasta); background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
html.racunar label.foto-dugme[for="foto-galerija"] > .ik { width: 36px; height: 36px; }
html.racunar label.foto-dugme[for="foto-galerija"] span { text-align: left; }
.blok--prevlacenje label.foto-dugme[for="foto-galerija"] { border-style: solid; background: var(--lisaj); box-shadow: 0 0 0 4px rgba(226, 106, 18, .18); }
html.racunar .samo-racunar.samo-inline { display: inline !important; }

/* =====================================================================
   Alert Lens (lens.php): kamera + oznake prijava + radar
   ===================================================================== */
body[data-page="lens"] { background: #000; overflow: hidden; }
body[data-page="lens"] .zaglavlje, body[data-page="lens"] .nav-mobilna, body[data-page="lens"] .offline-traka { display: none !important; }
.lens { position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; background: #050806; font-family: var(--font-tekst); touch-action: none; user-select: none; -webkit-user-select: none; }
.lens__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.lens--kamera .lens__video { opacity: 1; }
.lens__bez-kamere {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(63, 125, 82, .35), transparent 60%),
    linear-gradient(to bottom, #0b1712 0%, #0f2219 46%, #132a1f 46.2%, #07100b 100%);
}
.lens__bez-kamere::after {
  content: ""; position: absolute; left: -50%; right: -50%; top: 46%; bottom: -10%;
  background-image: linear-gradient(rgba(185, 216, 166, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 216, 166, .14) 1px, transparent 1px);
  background-size: 60px 60px; transform: perspective(300px) rotateX(62deg); transform-origin: top;
}
.lens--kamera .lens__bez-kamere { display: none; }
.lens__vinjeta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* početni ekran */
.lens__start {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 28px calc(env(safe-area-inset-bottom, 0px) + 24px); gap: 10px; overflow-y: auto; touch-action: auto;
  background: radial-gradient(80% 55% at 50% 38%, rgba(63, 125, 82, .45), transparent 70%), rgba(0, 0, 0, .55);
}
.lens__start[hidden] { display: none; }
.lens__logo { position: relative; width: 108px; height: 108px; display: grid; place-items: center; margin-bottom: 8px; }
.lens__logo svg { width: 76px; height: 76px; position: relative; z-index: 1; filter: drop-shadow(0 0 22px rgba(185, 216, 166, .55)); }
.lens__val { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(185, 216, 166, .7); animation: lens-val 2.8s ease-out infinite; }
.lens__val:nth-child(2) { animation-delay: .93s; } .lens__val:nth-child(3) { animation-delay: 1.86s; }
@keyframes lens-val { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.lens__oznaka { margin: 0; font: 700 .85rem var(--font-naslov); letter-spacing: .3em; text-transform: uppercase; color: #B9D8A6; }
.lens__naslov { margin: -6px 0 4px; font: 800 clamp(3.2rem, 15vw, 4.6rem)/1 var(--font-naslov); letter-spacing: -.03em; color: #fff; }
.lens__opis { margin: 0; max-width: 26em; font-size: 1.04rem; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.lens__kat { list-style: none; display: flex; gap: 10px; padding: 0; margin: 12px 0 8px; }
.lens__kat li { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--b) 70%, #fff); border: 1.5px solid currentColor; }
.lens__kat .ik { width: 19px; height: 19px; }
.lens__pokreni {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 16px 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--bor-tamni); font: 800 1.12rem var(--font-naslov); box-shadow: 0 0 0 6px rgba(185, 216, 166, .18), 0 14px 34px rgba(0, 0, 0, .45);
}
.lens__pokreni .ik { width: 24px; height: 24px; }
.lens__pokreni:hover { transform: translateY(-1px); }
.lens__privatnost { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .6); max-width: 24em; text-align: left; }
.lens__poruka { margin: 0; color: #FFB4A8; }
.lens__nazad-link { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); font-size: .9rem; text-decoration: none; }

/* scena */
.lens__scena { position: absolute; inset: 0; z-index: 2; }
.lens__scena[hidden] { display: none; }
.lens__traka { position: absolute; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 40px); padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(to bottom, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 3; }
.lens__traka canvas { width: 100%; height: 40px; display: block; }
.lens__traka-oznaka { position: absolute; left: 50%; bottom: -8px; width: 0; height: 0; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #B9D8A6; }
.lens__vrh { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 50px); z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; pointer-events: none; }
.lens__vrh > * { pointer-events: auto; }
.lens__x, .lens__domet {
  height: 42px; min-width: 42px; border-radius: 999px; display: grid; place-items: center; padding: 0 12px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .45); color: #fff; font: 700 .9rem var(--font-naslov); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lens__x { padding: 0; }
.lens__smjer { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: 14px; background: rgba(0, 0, 0, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lens__smjer strong { font: 800 1.1rem var(--font-naslov); font-variant-numeric: tabular-nums; }
.lens__smjer small { font-size: .72rem; color: rgba(255, 255, 255, .7); }
.lens__smjer small.lens__losa { color: #FFC48A; }
.lens__oznake { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.lens-oznaka {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--b) 75%, #fff); background: rgba(8, 12, 10, .72); color: #fff; font: inherit; text-align: left;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); pointer-events: auto; will-change: transform; transform-origin: 50% 100%;
  white-space: nowrap;
}
.lens-oznaka[hidden] { display: none; }
.lens-oznaka__ik { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--b); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 35%, transparent); }
.lens-oznaka__ik .ik { width: 19px; height: 19px; }
.lens-oznaka__tekst { display: flex; flex-direction: column; line-height: 1.1; }
.lens-oznaka__tekst strong { font: 700 .88rem var(--font-naslov); }
.lens-oznaka__tekst small { font: 800 .95rem var(--font-naslov); color: color-mix(in srgb, var(--b) 45%, #fff); font-variant-numeric: tabular-nums; }
.lens-oznaka__stub { position: absolute; left: 50%; top: 100%; width: 2px; height: var(--stub, 30px); transform: translateX(-50%); background: linear-gradient(to bottom, color-mix(in srgb, var(--b) 80%, #fff), transparent); pointer-events: none; }
.lens-oznaka__stub::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, 50%); background: var(--b); box-shadow: 0 0 10px var(--b); }
.lens-oznaka--odabrana { background: color-mix(in srgb, var(--b) 85%, #000); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 8px 24px rgba(0, 0, 0, .5); }

.lens__rub {
  position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; font: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateY(-50%);
  border-left: 3px solid var(--b); max-width: 44vw; text-align: left;
}
.lens__rub[hidden] { display: none; }
.lens__rub--lijevo { left: 0; border-radius: 0 14px 14px 0; }
.lens__rub--desno { right: 0; border-radius: 14px 0 0 14px; flex-direction: row-reverse; text-align: right; border-left: 0; border-right: 3px solid var(--b); }
.lens__rub-strelica { font: 800 1.8rem/1 var(--font-naslov); animation: lens-puls 1.4s ease-in-out infinite; }
.lens__rub--lijevo .lens__rub-strelica { --pomak: -3px; } .lens__rub--desno .lens__rub-strelica { --pomak: 3px; }
@keyframes lens-puls { 50% { transform: translateX(var(--pomak)); opacity: .6; } }
.lens__rub span:last-child { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lens__rub strong { font: 800 1rem var(--font-naslov); }
.lens__rub small { font-size: .72rem; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lens__savjet { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 104px); z-index: 4; transform: translateX(-50%); width: min(92vw, 420px); margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .65); font-size: .88rem; line-height: 1.45; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; transition: all .3s; }
.lens__savjet[hidden] { display: none; }
.lens__savjet--mali { font-size: .74rem; padding: 6px 10px; opacity: .75; }

.lens__dno { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: flex-end; gap: 12px; padding: 30px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); pointer-events: none; }
.lens__dno > * { pointer-events: auto; }
.lens__radar-omot { position: relative; flex: 0 0 auto; width: 128px; height: 128px; }
.lens__radar { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.lens__radar-domet { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-size: .66rem; font-weight: 700; color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .5); padding: 1px 6px; border-radius: 999px; }
.lens__sazetak { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.lens__broj { margin: 0; font-size: .86rem; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.lens__broj strong { font: 800 1.25rem var(--font-naslov); color: #fff; }
.lens__filteri { display: flex; gap: 6px; flex-wrap: wrap; }
.lens-filter { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 8px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--b); background: rgba(0, 0, 0, .45); color: #fff; font: 700 .82rem var(--font-naslov); opacity: .45; }
.lens-filter .ik { width: 16px; height: 16px; color: color-mix(in srgb, var(--b) 65%, #fff); }
.lens-filter.aktivno { opacity: 1; background: color-mix(in srgb, var(--b) 35%, rgba(0, 0, 0, .5)); }
.lens-filter--prazno.aktivno { opacity: .55; }

/* info panel */
.lens__panel {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 10; width: min(94vw, 440px); transform: translate(-50%, 30px); opacity: 0;
  padding: 16px; border-radius: 22px; background: rgba(10, 14, 12, .9); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s; touch-action: auto;
}
.lens__panel[hidden] { display: none; }
.lens__panel--otvoren { transform: translate(-50%, 0); opacity: 1; }
.lens__panel::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--b); }
.lens__panel-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.lens__panel-vrh { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.lens__panel-ik { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--b) 30%, transparent); }
.lens__panel-ik .ik { width: 26px; height: 26px; }
.lens__panel-kat { margin: 0; font: 800 .78rem var(--font-naslov); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--b) 55%, #fff); }
.lens__panel-naslov { margin: 2px 0 0; font: 800 1.12rem/1.2 var(--font-naslov); color: #fff; }
.lens__panel-tijelo { display: flex; gap: 12px; margin: 14px 0; }
.lens__panel-podaci { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.lens__panel-podaci li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.3; }
.lens__panel-podaci .ik { flex: 0 0 auto; width: 18px; height: 18px; color: color-mix(in srgb, var(--b) 55%, #fff); margin-top: 1px; }
.lens__panel-podaci strong { color: #fff; }
.lens__panel-slika { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 14px; object-fit: cover; background: #222; }
.lens__panel-dugme { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 999px; background: #fff; color: var(--bor-tamni); font: 800 1rem var(--font-naslov); text-decoration: none; }
@media (min-width: 700px) { .lens__radar-omot { width: 160px; height: 160px; } }
@media (prefers-reduced-motion: reduce) { .lens__val, .lens__rub-strelica { animation: none; } }

/* link u podnožju */
.podnozje__lens { position: relative; }
.podnozje__lens .podnozje__novo { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(90deg, #E26A12, #D6402B); vertical-align: middle; }
.lens-oznaka__stub { left: calc(50% + var(--stub-x, 0px)); }
.lens__rub { top: calc(env(safe-area-inset-top, 0px) + 112px); transform: none; max-width: 40vw; padding: 6px 10px; }
.lens__rub-ik { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--b); flex: 0 0 auto; }
.lens__rub-ik .ik { width: 15px; height: 15px; }
.lens__savjet { top: calc(env(safe-area-inset-top, 0px) + 168px); }
.podijeljeno-obavijest { scroll-margin-top: calc(var(--zaglavlje-v, 60px) + 14px); }

/* Nestajuća poruka preko ekrana */
.toast { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.toast__kartica {
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: min(88vw, 360px); padding: 26px 22px 24px;
  border-radius: 24px; background: rgba(10, 14, 12, .86); color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: scale(.9) translateY(10px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.toast--vidljiv .toast__kartica { opacity: 1; transform: none; }
.toast__ik { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: #3FCB7A; color: #fff; font: 800 1.6rem var(--font-naslov); box-shadow: 0 0 0 6px rgba(63, 203, 122, .22); }
.toast--vidljiv .toast__ik { animation: toast-ik .5s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
@keyframes toast-ik { from { transform: scale(.3); } to { transform: none; } }
.toast__ik .ik { width: 30px; height: 30px; }
.toast--greska .toast__ik { background: #D6402B; box-shadow: 0 0 0 6px rgba(214, 64, 43, .25); }
.toast__naslov { font: 800 1.2rem/1.2 var(--font-naslov); }
.toast__tekst { font-size: .98rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.toast__dodatno { margin-top: 8px; padding: 8px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.35; background: rgba(255, 196, 138, .14); color: #FFD3A8; }
.toast__dodatno--ok { background: rgba(63, 203, 122, .16); color: #A8EBC4; }
.toast__traka { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #B9D8A6; transform-origin: left; animation: toast-traka linear forwards; }
.toast--greska .toast__traka { background: #FFB4A8; }
@keyframes toast-traka { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast__kartica { transition: opacity .2s; transform: none; } .toast--vidljiv .toast__ik { animation: none; } }

/* Alert Lens: prozirna mapa kao "tlo" ispod oznaka */
.lens__desno { display: flex; gap: 8px; align-items: center; }
.lens__mapa-dugme {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, color .2s, box-shadow .2s;
}
.lens__mapa-dugme .ik { width: 20px; height: 20px; }
.lens__mapa-dugme.aktivno { background: #B9D8A6; color: #12301f; border-color: #B9D8A6; box-shadow: 0 0 0 4px rgba(185, 216, 166, .25); }
.lens__mapa-omot {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--maska-vrh, 0)) 6%, rgba(0, 0, 0, max(.7, var(--maska-vrh, 0))) 16%, #000 28%, #000 80%, rgba(0, 0, 0, max(.35, var(--maska-vrh, 0))) 100%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--maska-vrh, 0)) 6%, rgba(0, 0, 0, max(.7, var(--maska-vrh, 0))) 16%, #000 28%, #000 80%, rgba(0, 0, 0, max(.35, var(--maska-vrh, 0))) 100%);
}
.lens__mapa-omot[hidden] { display: none; }
.lens__mapa-omot--vidljiv { opacity: var(--vidljivost, 1); }
.lens__mapa-ravan {
  position: absolute; left: 50%; top: 68%; width: 200vmax; height: 200vmax; transform-origin: 50% 50%;
  transform: translate(-50%, -50%); will-change: transform;
}
.lens__mapa { width: 100%; height: 100%; background: transparent !important; }
/* tamna, prozirna mapa koja "svijetli" preko kamere */
.lens__mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(1.15) contrast(1.05); mix-blend-mode: screen; opacity: var(--plocice, .7); }
.lens__mapa-pozadina { position: absolute; inset: 0; background: #0b130f; opacity: var(--pozadina, .36); }
.lens__mapa .leaflet-overlay-pane { opacity: .95; }
.lens__mapa .leaflet-container, .lens__mapa.leaflet-container { background: transparent; }
.lens__mapa-ja {
  position: absolute; left: 50%; top: 68%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #4FA3FF; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(79, 163, 255, .25), 0 0 20px rgba(79, 163, 255, .8);
}
.lens__mapa-ja::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; transform: translateX(-50%); border: 9px solid transparent; border-bottom: 22px solid rgba(79, 163, 255, .45); border-top: 0; margin-bottom: 2px; }
.lens__mapa-izvor { position: absolute; right: 8px; bottom: 6px; font-size: .62rem; color: rgba(255, 255, 255, .55); }
/* Lens mapa: vidno polje kamere (Stellarium princip) — van njega je zatamnjeno */
.lens__mapa-konus {
  position: absolute; left: 50%; top: 68%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: conic-gradient(from calc(var(--fov, 52deg) / -2), rgba(185, 216, 166, .10) 0deg var(--fov, 52deg), rgba(0, 0, 0, .55) var(--fov, 52deg) 360deg);
}
.lens__mapa-konus::before, .lens__mapa-konus::after {
  content: ""; position: absolute; left: 50%; bottom: 50%; width: 1.5px; height: 50%; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(185, 216, 166, .75), rgba(185, 216, 166, 0) 60%);
}
.lens__mapa-konus::before { transform: translateX(-50%) rotate(calc(var(--fov, 52deg) / -2)); }
.lens__mapa-konus::after { transform: translateX(-50%) rotate(calc(var(--fov, 52deg) / 2)); }
/* bez treptanja */
.lens__rub-strelica { animation: none !important; }
.lens__mapa-ja::after { display: none; }

/* Lens: diskretni klizač vidljivosti mape (desni rub) */
.lens__prozirnost {
  position: absolute; right: 8px; top: 50%; z-index: 4; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 34px; padding: 8px 0;
  border-radius: 999px; background: rgba(0, 0, 0, .32); color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: .7; transition: opacity .2s; cursor: pointer;
}
.lens__prozirnost:hover, .lens__prozirnost:focus-within, .lens__prozirnost:active { opacity: 1; }
.lens__prozirnost[hidden] { display: none; }
.lens__prozirnost .ik { width: 14px; height: 14px; opacity: .8; }
.lens__prozirnost-vrijednost { font: 700 .62rem var(--font-naslov); font-variant-numeric: tabular-nums; }
.lens__prozirnost input {
  -webkit-appearance: none; appearance: none; width: 130px; height: 24px; margin: 53px 0; background: transparent; transform: rotate(-90deg); cursor: pointer; touch-action: none;
}
.lens__prozirnost input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, rgba(255, 255, 255, .25), #B9D8A6); }
.lens__prozirnost input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, rgba(255, 255, 255, .25), #B9D8A6); }
.lens__prozirnost input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(185, 216, 166, .3); }
.lens__prozirnost input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(185, 216, 166, .3); }

/* Stanje na terenu (stranica prijave): forma za odgovor je sklopljena */
.sirenje__sklopivo { border: 1px solid var(--linija); border-radius: var(--r); background: var(--bijela); }
.sirenje__sklopivo > summary.sirenje__forma-naslov {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; color: var(--bor);
}
.sirenje__sklopivo > summary::-webkit-details-marker { display: none; }
.sirenje__sklopivo > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--siva); border-bottom: 2px solid var(--siva); transform: rotate(45deg); transition: transform .15s; flex: 0 0 auto; }
.sirenje__sklopivo[open] > summary::after { transform: rotate(-135deg); }
.sirenje__sklopivo .sirenje__forma { padding: 0 16px 16px; }
.blok--sirenje > summary .ik { color: var(--bor); }

/* =====================================================================
   Administracija: sažete kartice prijava (otvaraju se klikom) i paginacija
   ===================================================================== */
.admin-kartica--kompakt { padding: 0; overflow: hidden; }
.admin-kompakt > .admin-prijava { padding: 14px; border-top: 1px solid var(--linija); }
.admin-kompakt__red {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none;
  transition: background .15s;
}
.admin-kompakt__red::-webkit-details-marker { display: none; }
.admin-kompakt__red:hover { background: var(--lisaj-svijetli); }
.admin-kompakt[open] > .admin-kompakt__red { background: var(--lisaj-svijetli); }
.admin-kompakt__oznaka { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--bor); }
.admin-kompakt__slika { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--lisaj); }
.admin-kompakt__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-kompakt__tekst > strong { font-family: var(--font-naslov); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-kompakt__znacke { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-kompakt__znacke .znacka { font-size: .7rem; padding: 2px 7px; }
.admin-kompakt__meta { font-size: .76rem; color: var(--siva); line-height: 1.35; }
.admin-kompakt__upoz { color: var(--upozorenje); font-weight: 700; }
.admin-kompakt__akcije { display: flex; gap: 6px; flex: 0 0 auto; }
.admin-kompakt__akcije .dugme { padding: 7px 11px; font-size: .82rem; }
.admin-kompakt__strelica { flex: 0 0 auto; width: 9px; height: 9px; margin: 0 4px; border-right: 2px solid var(--siva); border-bottom: 2px solid var(--siva); transform: rotate(45deg); transition: transform .15s; }
.admin-kompakt[open] .admin-kompakt__strelica { transform: rotate(-135deg); }
@media (max-width: 640px) {
  .admin-kompakt__red { flex-wrap: wrap; }
  .admin-kompakt__slika { width: 48px; height: 48px; }
  .admin-kompakt__akcije { order: 5; width: 100%; padding-left: 30px; }
  .admin-kompakt__akcije .dugme { flex: 1; justify-content: center; }
}
.admin-lista-kompakt { display: grid; gap: 8px; }
.admin-stranice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.admin-stranice__tri { color: var(--siva); padding: 0 2px; }
.admin-stranice__strelica { font-weight: 800; }
.admin-stranice__info { margin-left: auto; font-size: .82rem; color: var(--siva); }
.admin-nova-objava { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--narandzasta); color: #fff !important; font-weight: 700; text-decoration: none; }
.admin-nova-objava:hover { background: var(--narandzasta-tamna); }
.forma-glava--admin .admin-objava-oznaka { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #E7F3EA; border: 1px solid #BFE0C8; color: #1C6234; }

/* Administracija: traka za označene prijave (uvijek vidljiva na dnu ekrana) */
.admin-masovno { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(96vw, 860px); z-index: 80; }
.admin-masovno__dugmad { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-masovno__dugme {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: 700 .9rem var(--font-tekst);
}
.admin-masovno__dugme:hover { background: rgba(255, 255, 255, .12); }
.admin-masovno__dugme--objavi { background: #3FCB7A; border-color: #3FCB7A; color: #0d2a19; font-size: .95rem; padding: 8px 18px; }
.admin-masovno__dugme--objavi:hover { background: #5ad991; }
.admin-masovno__dugme--opasno { border-color: rgba(255, 140, 120, .6); color: #FFB4A8; }
.admin-masovno__dugme:disabled { opacity: .6; cursor: wait; }
.admin-masovno__broj strong { font-size: 1.15rem; }
@media (max-width: 640px) { .admin-masovno__broj { width: 100%; } .admin-masovno__dugmad { width: 100%; } .admin-masovno__dugme--objavi { flex: 1; justify-content: center; } }
body.admin { padding-bottom: 90px; }

/* =====================================================================
   Korisnički računi: prijava, registracija, profil
   ===================================================================== */
.zaglavlje__nalog { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; text-decoration: none; color: var(--bor); font-weight: 700; font-size: .92rem; border: 1px solid var(--linija); background: var(--bijela); }
.zaglavlje__nalog:hover, .zaglavlje__nalog.aktivno { border-color: var(--bor); }
.zaglavlje__nalog-ik { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lisaj); color: var(--bor); font-family: var(--font-naslov); font-weight: 800; }
.zaglavlje__nalog-ik .ik { width: 17px; height: 17px; }
.zaglavlje__nalog--prijavljen .zaglavlje__nalog-ik { background: var(--bor); color: #fff; }
.zaglavlje__nalog-tekst { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaglavlje__unutra { gap: 8px; }
@media (max-width: 900px) {
  .zaglavlje__nalog { margin-left: auto; padding: 3px; border: 0; background: transparent; }
  .zaglavlje__nalog-tekst { display: none; }
  .zaglavlje__nalog-ik { width: 36px; height: 36px; }
}

.nalog { max-width: 460px; margin: 24px auto 40px; padding: 0 16px; }
.nalog--profil { max-width: 640px; }
.nalog__kartica { background: var(--bijela); border: 1px solid var(--linija); border-radius: 22px; padding: 26px 22px; box-shadow: 0 10px 30px rgba(30, 77, 58, .06); }
.nalog__glava { text-align: center; margin-bottom: 14px; }
.nalog__glava h1 { font-family: var(--font-naslov); font-size: 1.6rem; margin: 10px 0 4px; }
.nalog__glava p { margin: 0; color: var(--siva); }
.nalog__znak { width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--lisaj); color: var(--bor); }
.nalog__znak .ik { width: 28px; height: 28px; }
.nalog__znak--ok { background: #E7F3EA; color: var(--ociscena); }
.nalog__anonimno { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 16px; padding: 9px 12px; border-radius: 12px; background: var(--lisaj-svijetli); color: var(--bor); font-size: .86rem; font-weight: 700; text-align: center; }
.nalog__anonimno--vrh { margin-bottom: 14px; }
.nalog__forma { display: grid; gap: 4px; }
.nalog__forma .dugme--puno { margin-top: 10px; justify-content: center; }
.nalog__pomoc { margin: 4px 0 0; font-size: .8rem; color: var(--siva); }
.nalog__pomoc--ok { color: var(--ociscena); font-weight: 700; }
.nalog__pomoc--greska { color: var(--greska); font-weight: 700; }
.nalog__lozinka { position: relative; }
.nalog__lozinka input { padding-right: 46px; width: 100%; }
.nalog__oko { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--siva); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.nalog__oko.aktivno { color: var(--bor); background: var(--lisaj-svijetli); }
.nalog__oko .ik { width: 20px; height: 20px; }
.nalog__izbor { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin: 6px 0; border: 1px solid var(--linija); border-radius: 12px; cursor: pointer; }
.nalog__izbor input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bor); flex: 0 0 auto; }
.nalog__izbor span { display: flex; flex-direction: column; gap: 2px; }
.nalog__izbor small { color: var(--siva); font-size: .82rem; line-height: 1.4; }
.nalog__izbor--greska { border-color: var(--greska); }
.nalog__red { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: .9rem; }
.nalog__mali-izbor { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.nalog__mali-izbor input { width: 18px; height: 18px; accent-color: var(--bor); }
.nalog__dno { text-align: center; margin: 16px 0 0; color: var(--siva); }
.nalog__tekst { color: var(--siva); }
.nalog__kod { font-size: 1.8rem !important; letter-spacing: .4em; text-align: center; font-family: var(--font-naslov); font-weight: 800; }
.nalog__ponovo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font-size: .88rem; color: var(--siva); }
.nalog__upozorenje { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; border-radius: 16px; background: var(--narandzasta-svijetla); border: 1px solid #F3C9A6; color: var(--narandzasta-tamna); }
.nalog__upozorenje > .ik { width: 26px; height: 26px; flex: 0 0 auto; }
.nalog__upozorenje div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nalog__upozorenje span { font-size: .84rem; color: var(--kora); }
.profil-kartica { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--bor-tamni), var(--mahovina)); box-shadow: 0 14px 34px rgba(30, 77, 58, .22); }
.profil-kartica__avatar { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .5); font: 800 2rem var(--font-naslov); }
.profil-kartica__tekst { min-width: 0; }
.profil-kartica h1 { margin: 0 0 6px; font-family: var(--font-naslov); font-size: 1.6rem; color: #fff; overflow-wrap: anywhere; }
.profil-kartica p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.profil-oznaka { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255, 255, 255, .14); color: #fff; }
.profil-oznaka--javni { background: rgba(185, 216, 166, .25); }
.profil-oznaka--ok { background: rgba(63, 203, 122, .28); }
.profil-kartica__podaci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: rgba(255, 255, 255, .9); }
.profil-kartica__podaci li { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.profil-kartica__podaci small { color: rgba(255, 255, 255, .6); }
.profil-uskoro { margin: 16px 0; padding: 16px 18px; border: 1.5px dashed var(--mahovina); border-radius: 18px; background: var(--lisaj-svijetli); }
.profil-uskoro h2 { margin: 0 0 4px; font-size: 1rem; color: var(--bor); }
.profil-uskoro p { margin: 0; color: var(--siva); font-size: .9rem; }
.profil-sekcija { margin: 14px 0; padding: 18px; border: 1px solid var(--linija); border-radius: 18px; background: var(--bijela); }
.profil-sekcija h2 { margin: 0 0 10px; font-size: 1.1rem; }
.profil-sekcija--sklopivo > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; }
.profil-sekcija--sklopivo > summary::-webkit-details-marker { display: none; }
.profil-sekcija--sklopivo > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--siva); border-bottom: 2px solid var(--siva); transform: rotate(45deg); transition: transform .15s; }
.profil-sekcija--sklopivo[open] > summary { margin-bottom: 12px; }
.profil-sekcija--sklopivo[open] > summary::after { transform: rotate(-135deg); }
.profil-sekcija--opasno > summary { color: var(--greska); }
.profil-sekcija--opasno p { color: var(--siva); font-size: .9rem; }
.profil-odjava { margin: 14px 0; text-align: center; }
@media (max-width: 520px) { .profil-kartica { flex-direction: column; text-align: center; } .profil-kartica p, .profil-kartica__podaci li { justify-content: center; } }
/* Administracija: registrovani korisnici */
.admin-filteri { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.admin-filteri input[type=search] { flex: 1; min-width: 200px; }
.admin-clanovi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-clan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linija); border-radius: 14px; }
.admin-clan--blokiran { background: #FBEDEA; }
.admin-clan__av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bor); color: #fff; font: 800 1.1rem var(--font-naslov); }
.admin-clan__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-clan__tekst small { color: var(--siva); font-size: .78rem; overflow-wrap: anywhere; }
.admin-clan__znacke { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-clan__znacke .znacka { font-size: .68rem; padding: 2px 7px; }
.admin-clan__akcije { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; font-size: .84rem; }
.link-dugme--opasno { color: var(--greska) !important; }
@media (max-width: 640px) { .admin-clan { flex-wrap: wrap; } .admin-clan__akcije { width: 100%; justify-content: flex-start; padding-left: 52px; } }

/* Profil: brojke, moje prijave, prenos */
.profil-brojke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.profil-brojke div { background: var(--bijela); border: 1px solid var(--linija); border-radius: 14px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.profil-brojke strong { font: 800 1.45rem/1 var(--font-naslov); color: var(--bor); }
.profil-brojke span { font-size: .76rem; color: var(--siva); }
@media (min-width: 600px) { .profil-brojke { grid-template-columns: repeat(6, 1fr); } }
.profil-prenos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px; border-radius: 16px; background: var(--lisaj-svijetli); border: 1px solid var(--lisaj); }
.profil-prenos[hidden] { display: none; }
.profil-prenos div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.profil-prenos span { font-size: .84rem; color: var(--siva); }
.profil-sekcija h2 small, .profil-podnaslov small { font: 700 .8rem var(--font-tekst); color: var(--siva); background: var(--lisaj-svijetli); padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.profil-podnaslov { margin: 18px 0 8px; font-size: 1rem; }
.profil-prazno { color: var(--siva); margin: 0; }
.moje-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moje-red a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--kora); border: 1px solid transparent; }
.moje-red a:hover { background: var(--lisaj-svijetli); border-color: var(--linija); }
.moje-red img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--lisaj); }
.moje-red--skriveno { display: none; }
.moje-red__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.moje-red__tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moje-red__tekst small { color: var(--siva); font-size: .78rem; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.moje-red__tekst small .ik { width: 12px; height: 12px; }
.moje-red__kat { color: var(--kb); font-weight: 700; }
.moje-status { flex: 0 0 auto; font-size: .74rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.moje-status--obrada { background: #EEF0EC; color: #5B675F; }
.moje-status--aktivna { background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
.moje-status--djelimicno { background: #FDF3E1; color: #8A5A06; }
.moje-status--provjera { background: #E6EEF9; color: #2F5FA8; }
.moje-status--rijesena { background: #E7F3EA; color: #1C6234; }
.moje-status--odbijena { background: #FBEDEA; color: var(--greska); }
.moje-vise { margin-top: 8px; }
.blok--racun legend { display: flex; align-items: center; gap: 6px; }
.admin-kompakt__autor { color: var(--bor); }

/* ===== Profil: XP, nivo, evidencija, statistika (korak 3) ===== */
.xp-kartica { display: flex; gap: 16px; align-items: center; margin: 14px 0; padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--bor) 0%, #2f6b50 60%, #3d7d5d 100%); box-shadow: 0 8px 24px rgba(30,77,58,.22); }
.xp-kartica__nivo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border: 3px solid var(--narandzasta); }
.xp-kartica__broj { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.xp-kartica__nivo small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.xp-kartica__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xp-kartica__tekst strong { font-size: 1.2rem; }
.xp-kartica__xp { font-weight: 700; color: #ffd2ad; }
.xp-kartica__tekst small { opacity: .9; font-size: .85rem; }
.xp-traka { height: 10px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; margin: 4px 0 2px; }
.xp-traka span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb070, var(--narandzasta)); transition: width .6s ease; }
.xp-napomena { margin: -4px 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); font-size: .88rem; display: flex; gap: 8px; align-items: center; }
.profil-sekcija h2 small { font-size: .8rem; font-weight: 700; color: var(--siva); margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--lisaj-svijetli); }
.evid-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.evid-mreza div { padding: 12px; border-radius: 14px; background: var(--lisaj-svijetli); display: flex; flex-direction: column; gap: 2px; }
.evid-mreza strong { font-size: 1.35rem; color: var(--bor); line-height: 1.1; }
.evid-mreza span { font-size: .8rem; color: var(--siva); line-height: 1.25; }
.stat-lista { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.stat-lista div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linija); }
.stat-lista dt { color: var(--siva); font-size: .88rem; }
.stat-lista dd { margin: 0; font-weight: 700; text-align: right; display: inline-flex; gap: 4px; align-items: center; }
.stat-lista dd small { font-weight: 400; color: var(--siva); }
.profil-prazno { margin: 0; color: var(--siva); font-size: .92rem; }
.xp-lista { list-style: none; margin: 0; padding: 0; }
.xp-lista li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linija); font-size: .9rem; }
.xp-lista li:last-child { border-bottom: 0; }
.xp-lista b, .xp-pravila b { color: #2f7d4f; }
.xp-lista small { color: var(--siva); white-space: nowrap; font-size: .78rem; }
.xp-minus { color: #c0392b !important; }
.xp-pravila { margin-top: 12px; font-size: .9rem; }
.xp-pravila summary { cursor: pointer; font-weight: 700; color: var(--narandzasta-tamna); }
.xp-pravila ul { margin: 10px 0; padding-left: 0; list-style: none; }
.xp-pravila ul li { padding: 3px 0; }
.xp-pravila ul b { display: inline-block; min-width: 38px; }
.xp-pravila p { color: var(--siva); }
.nivoi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nivoi-lista li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; }
.nivoi-lista li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lisaj-svijetli); font-weight: 700; font-size: .8rem; }
.nivoi-lista li small { margin-left: auto; color: var(--siva); }
.nivoi-lista li.aktivno { background: var(--narandzasta-svijetla); font-weight: 700; }
.nivoi-lista li.aktivno span { background: var(--narandzasta); color: #fff; }
.moje-status--spojena { background: #e8eefc; color: #2c4a9a; }
@media (max-width: 520px) { .xp-lista li { grid-template-columns: 62px 1fr; } .xp-lista small { grid-column: 2; } }

/* ===== Profil: reputacija i značke (korak 4) ===== */
.rep__glava { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.rep__glava h2 { margin: 0; }
.rep__krug { --rep: 0; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 26px; box-sizing: border-box;
  background: radial-gradient(closest-side, var(--bijela) 78%, transparent 80% 100%), conic-gradient(var(--narandzasta) calc(var(--rep) * 1%), var(--lisaj-svijetli) 0); }
.rep__krug strong { font-size: 1.6rem; line-height: 1; color: var(--bor); }
.rep__krug small { font-size: .72rem; color: var(--siva); margin-left: 1px; }
.rep__oznaka { margin: 2px 0; font-weight: 700; color: var(--narandzasta-tamna); }
.rep__pomoc { margin: 0; font-size: .85rem; color: var(--siva); }
.rep__dijelovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.rep__red { display: flex; justify-content: space-between; font-size: .9rem; }
.rep__red b { color: var(--bor); }
.rep__traka { height: 7px; margin: 4px 0 3px; border-radius: 999px; background: var(--lisaj-svijetli); overflow: hidden; }
.rep__traka span { display: block; height: 100%; border-radius: inherit; background: var(--bor); }
.rep__dio small { color: var(--siva); font-size: .78rem; }

.znacke__osvojene { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zk-mala { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--lisaj-svijetli); border: 1.5px solid transparent; }
.zk-mala span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bijela); font-size: 15px; }
.zk-mala--nova { animation: zk-nova 1.4s ease 3; box-shadow: 0 0 0 3px rgba(226,106,18,.35); }
@keyframes zk-nova { 50% { transform: scale(1.08); } }
.znacke__sve { margin-top: 10px; }
.znacke__sve > summary { cursor: pointer; font-weight: 700; color: var(--narandzasta-tamna); padding: 6px 0; }
.znacke__kol { margin: 16px 0 8px; font-size: .95rem; color: var(--bor); }
.znacke__kol small { display: block; font-weight: 400; color: var(--siva); font-size: .78rem; }
.znacke__mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.zk { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 10px 12px; border-radius: 16px; border: 1.5px solid var(--linija); background: var(--bijela); }
.zk strong { font-size: .86rem; line-height: 1.2; }
.zk small { font-size: .74rem; color: var(--siva); line-height: 1.25; }
.zk__medalja { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; background: var(--lisaj-svijetli); border: 3px solid #d9ddd6; margin-bottom: 4px; }
.zk.zakljucana .zk__medalja { filter: grayscale(1); opacity: .45; }
.zk.zakljucana strong { color: var(--siva); }
.zk__stepen { font-style: normal; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.zk__traka { width: 100%; height: 5px; margin-top: 4px; border-radius: 999px; background: var(--lisaj-svijetli); overflow: hidden; }
.zk__traka span { display: block; height: 100%; background: var(--narandzasta); border-radius: inherit; }
.zk__broj { font-size: .7rem; color: var(--siva); }
.zk--bronza .zk__medalja, .zk-mala.zk--bronza { border-color: #c98a4f; }
.zk--bronza .zk__medalja { background: #f8ebdd; } .zk--bronza .zk__stepen { color: #9a5f2a; }
.zk--srebro .zk__medalja, .zk-mala.zk--srebro { border-color: #a9b2b8; }
.zk--srebro .zk__medalja { background: #eef1f3; } .zk--srebro .zk__stepen { color: #66737c; }
.zk--zlato .zk__medalja, .zk-mala.zk--zlato { border-color: #e2b23a; }
.zk--zlato .zk__medalja { background: #fdf3d6; box-shadow: 0 0 0 4px rgba(226,178,58,.18); } .zk--zlato .zk__stepen { color: #9a7410; }
.zk--jedna .zk__medalja, .zk-mala.zk--jedna { border-color: var(--bor); }
.zk--rijetka.osvojena, .zk-mala.zk--rijetka { border-color: #8e5bd6; }
.zk--rijetka.osvojena { background: linear-gradient(160deg, #f5effd, var(--bijela) 60%); }
.zk--rijetka.osvojena .zk__medalja { border-color: #8e5bd6; background: #f1e9fc; }
.zk--admin, .zk-mala.zk--admin { border-color: var(--narandzasta); }
.zk--admin { background: linear-gradient(160deg, var(--narandzasta-svijetla), var(--bijela) 60%); }
.zk--admin .zk__medalja { border-color: var(--narandzasta); background: var(--bijela); }
.znacke__pomoc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .82rem; color: var(--siva); }
@media (max-width: 420px) { .znacke__mreza { grid-template-columns: repeat(2, 1fr); } }

/* admin: dodjela znački */
.clan-znacke { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.clan-znacke span { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--narandzasta-svijetla); }
.clan-dodjela { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.clan-dodjela select, .clan-dodjela input { padding: 6px 8px; border: 1px solid var(--linija); border-radius: 10px; font: inherit; font-size: .85rem; }
.clan-dodjela input { flex: 1; min-width: 140px; }

/* ===== Korak 5: javni profil, rang lista, mapa doprinosa, "Pratim" ===== */
.profil-veze { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.profil-veze a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bijela); border: 1px solid var(--linija); color: var(--bor); font-weight: 700; font-size: .88rem; text-decoration: none; }
.profil-veze a:hover { border-color: var(--bor); }
.profil-veze b { color: var(--narandzasta-tamna); }
.pratim-obavijest { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px 16px; border-radius: 16px; background: var(--narandzasta); color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(226,106,18,.25); }
.pratim-obavijest:hover { background: var(--narandzasta-tamna); }

.mapa-doprinosa { height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid var(--linija); z-index: 0; }
.mapa-doprinosa__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: .8rem; color: var(--siva); }
.md-tacka { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--narandzasta); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linija); }
.md-tacka--rijeseno { background: #2f7d4f; } .md-tacka--obrada { background: #8A968E; }

.pratim-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pratim-lista > li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linija); }
.pratim-lista > li.pratim-lista--novo { border-color: var(--narandzasta); background: var(--narandzasta-svijetla); }
.pratim-lista__glava { display: flex; align-items: center; gap: 10px; }
.pratim-lista__glava > a { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.pratim-lista__glava small { display: block; color: var(--siva); font-size: .8rem; }
.pratim-lista__glava form { margin: 0; }
.pratim-lista__novo { padding: 2px 9px; border-radius: 999px; background: var(--narandzasta); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.pratim-lista__prijave { list-style: none; margin: 8px 0 0; padding: 0; font-size: .85rem; }
.pratim-lista__prijave li { padding: 4px 0; border-top: 1px dashed var(--linija); }
.pratim-lista__prijave a { color: inherit; text-decoration: none; }
.pratim-lista__prijave small { color: var(--siva); }
.pratim-vidjeno { margin: 8px 0 0; text-align: right; }
.pratim-kanali { margin-top: 14px; }
.pratim-kanal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linija); margin: 0; }
.pratim-kanal > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; font-size: .92rem; }
.pratim-kanal small { flex-basis: 100%; font-weight: 400; color: var(--siva); font-size: .8rem; }

.pratim-forma { margin: 10px 0 0; }
.pratim-dugme { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--bor); background: var(--bijela); color: var(--bor); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; }
.pratim-dugme:hover { background: var(--lisaj-svijetli); }
.pratim-dugme--aktivno { background: var(--bor); color: #fff; }
.pratim-dugme--aktivno .ik { fill: currentColor; }
.pratim-dugme--aktivno:hover { background: #163a2c; }
a.pratim-dugme { margin-top: 10px; }

/* javni profil */
.clan__vlasnik { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--lisaj-svijetli); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clan-kartica { margin: 0 0 14px; padding: 20px; border-radius: 22px; color: #fff; background: linear-gradient(140deg, var(--bor) 0%, #2f6b50 65%, #3d7d5d 100%); box-shadow: 0 10px 28px rgba(30,77,58,.25); }
.clan-kartica__vrh { display: flex; gap: 16px; align-items: center; }
.clan-kartica__vrh h1 { margin: 0; font-size: 1.5rem; color: #fff; }
.clan-kartica__avatar { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; background: rgba(255,255,255,.14); border: 3px solid var(--narandzasta); }
.clan-kartica__avatar b { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; background: var(--narandzasta); border: 2px solid #fff; }
.clan-kartica__nivo { margin: 2px 0; font-weight: 700; color: #ffd2ad; }
.clan-kartica__podaci { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; opacity: .9; }
.clan-kartica__podaci span { display: inline-flex; align-items: center; gap: 4px; }
.clan-kartica__brojke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.clan-kartica__brojke div { padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.1); text-align: center; display: flex; flex-direction: column; }
.clan-kartica__brojke strong { font-size: 1.25rem; }
.clan-kartica__brojke span { font-size: .72rem; opacity: .85; }
.clan__privatnost { margin: 8px 0 0; font-size: .8rem; color: var(--siva); display: flex; gap: 6px; align-items: center; }
.clan__dno { text-align: center; }

/* rang lista */
.rang { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.rang__glava { text-align: center; }
.rang__glava h1 { margin: 0 0 4px; }
.rang__glava p { margin: 0 0 14px; color: var(--siva); }
.rang__tabovi { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--lisaj-svijetli); gap: 4px; }
.rang__tabovi a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--bor); font-weight: 700; font-size: .9rem; }
.rang__tabovi a small { font-weight: 400; color: var(--siva); }
.rang__tabovi a.aktivno { background: var(--bijela); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.rang__ja { margin: 16px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--narandzasta-svijetla); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.rang__prazno { text-align: center; color: var(--siva); margin: 30px 0; }
.rang__podij { list-style: none; margin: 22px 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; }
.rang__podij li a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 18px; background: var(--bijela); border: 1px solid var(--linija); text-decoration: none; color: inherit; text-align: center; }
.rang__podij-1 a { padding-top: 22px !important; padding-bottom: 22px !important; border-color: #e2b23a !important; background: linear-gradient(180deg, #fdf3d6, var(--bijela)) !important; }
.rang__podij-2 a { border-color: #a9b2b8 !important; } .rang__podij-3 a { border-color: #c98a4f !important; }
.rang__medalja { font-size: 1.6rem; line-height: 1; }
.rang__podij strong { font-size: .95rem; word-break: break-word; }
.rang__podij small { color: var(--siva); font-size: .75rem; }
.rang__podij b { color: var(--narandzasta-tamna); font-size: .9rem; }
.rang__av { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--bor); color: #fff; flex: 0 0 auto; }
.rang__lista { list-style: none; margin: 0; padding: 0; border-radius: 18px; border: 1px solid var(--linija); background: var(--bijela); overflow: hidden; }
.rang__lista li + li { border-top: 1px solid var(--linija); }
.rang__lista a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; }
.rang__lista a:hover { background: var(--lisaj-svijetli); }
.rang__broj { width: 26px; text-align: center; font-weight: 800; color: var(--siva); }
.rang__lista .rang__av { width: 34px; height: 34px; font-size: .9rem; }
.rang__ime { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rang__ime small { color: var(--siva); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang__zn { font-size: .8rem; color: var(--siva); white-space: nowrap; }
.rang__lista b { color: var(--narandzasta-tamna); white-space: nowrap; font-size: .9rem; }
.rang__ja-red a { background: var(--narandzasta-svijetla) !important; }
.rang__napomena { margin: 18px 0 0; font-size: .82rem; color: var(--siva); text-align: center; }
@media (max-width: 420px) { .rang__zn { display: none; } .clan-kartica__brojke strong { font-size: 1.05rem; } }
.rang__podij-1 { grid-column: 2; grid-row: 1; } .rang__podij-2 { grid-column: 1; grid-row: 1; } .rang__podij-3 { grid-column: 3; grid-row: 1; }
.rang__tabovi a { white-space: nowrap; }
@media (max-width: 480px) { .rang__tabovi a small { display: none; } }

/* rang lista: mini statistika zajednice */
.rang-stat { margin: 26px 0 0; padding: 20px; border-radius: 22px; background: var(--bijela); border: 1px solid var(--linija); box-shadow: 0 6px 20px rgba(30,77,58,.06); }
.rang-stat h2 { margin: 0 0 14px; font-size: 1.05rem; text-align: center; color: var(--bor); }
.rang-stat__glavna { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--bor) 0%, #2f6b50 70%, #3d7d5d 100%); }
.rang-stat__ik { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(255,255,255,.14); flex: 0 0 auto; }
.rang-stat__glavna div { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.rang-stat__glavna strong { font-size: 2.1rem; line-height: 1; font-family: 'Bricolage Grotesque', inherit; }
.rang-stat__glavna span:not(.rang-stat__ik) { font-size: .9rem; opacity: .9; }
.rang-stat__glavna em { font-style: normal; font-weight: 700; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: var(--narandzasta); }
.rang-stat__mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.rang-stat__mreza div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--lisaj-svijetli); }
.rang-stat__mreza span { font-size: 18px; }
.rang-stat__mreza strong { font-size: 1.3rem; color: var(--bor); line-height: 1.1; }
.rang-stat__mreza small { font-size: .74rem; color: var(--siva); line-height: 1.25; }
.rang-stat__dno { margin: 12px 0 0; text-align: center; font-size: .8rem; color: var(--siva); }
@media (max-width: 520px) { .rang-stat__mreza { grid-template-columns: repeat(2, 1fr); } }

/* admin: autor prijave i prebacivanje */
.admin-autor > summary { font-weight: 700; }
.admin-autor__forma select, .clan-dodjela select { max-width: 100%; }
.admin-autor__anon { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin: 6px 0 10px; }
.clan-dodjela .admin-autor__anon { margin: 0; flex-basis: 100%; }

/* ===== Detalj prijave: novi raspored ===== */
.detalj__vrijeme { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 10px 0 0; white-space: nowrap; }
.detalj__vrijeme .detalj__meta { font-size: .84rem; }
.detalj__vrijeme .detalj__dani { margin: 0; }
.detalj__meta--rijeseno { margin-top: 4px; font-size: .84rem; }
@media (max-width: 440px) {
  .detalj__vrijeme { gap: 6px; }
  .detalj__vrijeme .detalj__meta { font-size: .74rem; }
  .detalj__vrijeme .detalj__dani { font-size: .76rem; padding: 3px 9px; gap: 4px; }
  .detalj__vrijeme .detalj__dani .ik { width: .95em; height: .95em; }
}
@media (max-width: 350px) { .detalj__vrijeme { flex-wrap: wrap; white-space: normal; } }

.detalj__sekcija-naslov { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.15rem; }
.detalj-lokacija { margin: 24px 0; }
.detalj-lokacija .ugrozeno { margin: 0 0 12px; }
.detalj-lokacija .detalj__mapa { height: 280px; }
.detalj-lokacija .kompas-dugme { margin-top: 10px; }

.detalj-dokumenti { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--linija); }
.pdf-prijave { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); text-decoration: none; color: var(--tekst, #1C2620);
  background: linear-gradient(135deg, var(--narandzasta-svijetla), #fff 85%); border: 1.5px solid var(--narandzasta); box-shadow: 0 6px 18px rgba(226,106,18,.14); transition: transform .15s, box-shadow .15s; }
.pdf-prijave:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(226,106,18,.22); }
.pdf-prijave__ik { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--narandzasta); color: #fff; }
.pdf-prijave__ik .ik { width: 24px; height: 24px; }
.pdf-prijave__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdf-prijave__tekst strong { font-family: var(--font-naslov); font-size: 1.08rem; color: var(--narandzasta-tamna); }
.pdf-prijave__tekst small { color: var(--siva); font-size: .82rem; line-height: 1.3; }
.pdf-prijave > .ik { color: var(--narandzasta-tamna); }
.detalj-dokumenti .detalj__podijeli { margin: 16px 0 6px; }

/* ===== Režim održavanja ===== */
.odr-traka { display: block; padding: 8px 16px; text-align: center; font-size: .82rem; color: #fff; background: #111814; text-decoration: none; position: relative; z-index: 1001; }
.odr-traka b { color: #FFB37A; margin-left: 6px; }
.odr-baner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #111814, #1E4D3A); box-shadow: 0 10px 26px rgba(17,24,20,.25); }
.odr-baner > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.odr-baner small { opacity: .75; }
.odr-baner__tacka { width: 12px; height: 12px; border-radius: 50%; background: #FF8A3D; box-shadow: 0 0 0 0 rgba(255,138,61,.6); animation: odr-puls 1.8s ease-out infinite; }
@keyframes odr-puls { 80%, 100% { box-shadow: 0 0 0 12px rgba(255,138,61,0); } }
.odr-baner__dugme { background: #fff !important; color: #1E4D3A !important; }
.odr__glava { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.odr__glava h2 { margin: 0 0 4px; }
.odr__stanje { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; white-space: nowrap; }
.odr__stanje i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.odr__stanje--on { background: #E7F3EA; color: #1C6234; }
.odr__stanje--off { background: #111814; color: #FFB37A; }
.odr__stanje--off i { animation: odr-puls 1.8s ease-out infinite; }
.odr__info { margin: 16px 0; padding: 16px 18px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #111814, #24352c); }
.odr__info p { margin: 0 0 6px; } .odr__info strong { color: #FFB37A; }
.odr__aktiviraj { margin-top: 8px; background: #fff !important; color: #1E4D3A !important; }
.odr__forma { margin-top: 18px; display: grid; gap: 14px; max-width: 640px; }
.odr__prekidac { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--linija); cursor: pointer; }
.odr__prekidac input { position: absolute; opacity: 0; pointer-events: none; }
.odr__prekidac-klizac { flex: 0 0 auto; position: relative; width: 52px; height: 30px; border-radius: 999px; background: #cfd6d1; transition: background .2s; }
.odr__prekidac-klizac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.odr__prekidac input:checked + .odr__prekidac-klizac { background: #111814; }
.odr__prekidac input:checked + .odr__prekidac-klizac::after { transform: translateX(22px); background: #FF8A3D; }
.odr__prekidac input:focus-visible + .odr__prekidac-klizac { outline: 3px solid var(--narandzasta); outline-offset: 2px; }
.odr__prekidac:has(input:checked) { border-color: #111814; background: #f4f6f4; }
.odr__prekidac span:last-child { display: flex; flex-direction: column; }
.odr__prekidac small, .odr__opcija small { color: var(--siva); font-size: .82rem; }
.odr__nacin { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.odr__nacin legend { font-weight: 700; margin-bottom: 6px; }
.odr__opcija { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linija); cursor: pointer; }
.odr__opcija:has(input:checked) { border-color: var(--narandzasta); background: var(--narandzasta-svijetla); }
.odr__opcija input[type=radio] { margin-top: 4px; accent-color: var(--narandzasta); }
.odr__opcija > span { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.odr__opcija input[type=datetime-local] { margin-top: 8px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--linija); border-radius: 10px; font: inherit; }
.odr__opcija:not(:has(input:checked)) input[type=datetime-local] { opacity: .5; }
.odr__dugmad { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Admin: profil korisnika ===== */
.admin-clan__link, .admin-kompakt__autor-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; }
.admin-clan__link:hover, .admin-kompakt__autor-link:hover { color: var(--narandzasta-tamna); }
.ap-glava { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: #fff; background: linear-gradient(135deg, var(--bor), #2f6b50 70%, #3d7d5d) !important; border: 0 !important; }
.ap-glava--blokiran { background: linear-gradient(135deg, #3a1d18, #6e2215) !important; }
.ap-glava h2 { margin: 0; color: #fff; }
.ap-glava .admin-meta { color: rgba(255,255,255,.75); margin: 4px 0 0; }
.ap-glava__av { position: relative; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; background: rgba(255,255,255,.14); border: 3px solid var(--narandzasta); }
.ap-glava__av b { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--narandzasta); border: 2px solid #fff; }
.ap-glava__tekst { flex: 1; min-width: 240px; }
.ap-glava__email { margin: 2px 0 6px; } .ap-glava__email a { color: #ffd2ad; }
.ap-oznake { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ap-oz { font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.ap-oz--ok { background: rgba(185,216,166,.25); } .ap-oz--upoz { background: rgba(255,179,122,.3); } .ap-oz--blok { background: #c0392b; } .ap-oz--link { background: #fff; color: var(--bor); }
.ap-brojke { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 6px; flex-basis: 100%; }
.ap-brojke div { padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.1); text-align: center; display: flex; flex-direction: column; }
.ap-brojke strong { font-size: 1.3rem; } .ap-brojke span { font-size: .72rem; opacity: .85; }
.ap-mreza { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.ap-kol { display: grid; gap: 16px; min-width: 0; }
.ap-kol > .admin-kartica { margin: 0; }
@media (max-width: 900px) { .ap-mreza { grid-template-columns: 1fr; } .ap-brojke { grid-template-columns: repeat(2, 1fr); } }
.ap-masovno { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin: 0 0 10px; border-radius: 14px; background: var(--lisaj-svijetli); }
.ap-masovno__sve { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; margin-right: auto; }
.ap-prijave { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-prijava { display: grid; grid-template-columns: auto 72px 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 14px; border: 1px solid var(--linija); border-left: 4px solid var(--linija); }
.ap-prijava--na_provjeri { border-left-color: #E2B23A; } .ap-prijava--aktivna { border-left-color: var(--narandzasta); } .ap-prijava--ociscena { border-left-color: #2f7d4f; } .ap-prijava--odbijena { border-left-color: #c0392b; opacity: .85; }
.ap-prijava__cb { margin-top: 26px; width: 18px; height: 18px; }
.ap-prijava__slika img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.ap-prijava__tekst { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-prijava__tekst strong a { color: inherit; text-decoration: none; } .ap-prijava__tekst strong a:hover { text-decoration: underline; }
.ap-prijava__tekst small { color: var(--siva); font-size: .78rem; }
.ap-prijava__oznake { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-st { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--lisaj-svijetli); color: var(--bor); white-space: nowrap; }
.ap-st--na_provjeri { background: #FDF3E1; color: #8A5A06; } .ap-st--aktivna { background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); }
.ap-st--ociscena { background: #E7F3EA; color: #1C6234; } .ap-st--odbijena { background: #FBEDEA; color: #9B2C1F; } .ap-st--upoz { background: #FFF3CD; color: #7a5b00; }
.ap-prijava__akcije { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: flex-start; }
.ap-prijava__akcije form.inline { margin: 0; }
.ap-prebaci { position: relative; }
.ap-prebaci > summary { list-style: none; cursor: pointer; } .ap-prebaci > summary::-webkit-details-marker { display: none; }
.ap-prebaci__forma { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; padding: 10px; border-radius: 12px; background: var(--lisaj-svijetli); }
.ap-prebaci__forma select { max-width: 240px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--linija); font: inherit; font-size: .85rem; }
.ap-prebaci__forma label { font-size: .82rem; display: inline-flex; gap: 4px; align-items: center; }
.ap-linija { list-style: none; margin: 0; padding: 0; }
.ap-linija li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--linija); font-size: .88rem; }
.ap-linija__em { font-size: 18px; line-height: 1.2; }
.ap-linija small { display: block; color: var(--siva); font-size: .78rem; word-break: break-word; }
.ap-linija time { color: var(--siva); font-size: .75rem; white-space: nowrap; }
.ap-lista { margin: 0; display: grid; gap: 0; }
.ap-lista div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linija); font-size: .88rem; }
.ap-lista dt { color: var(--siva); } .ap-lista dd { margin: 0; font-weight: 700; text-align: right; }
.ap-xp { margin-top: 10px; font-size: .86rem; } .ap-xp summary { cursor: pointer; font-weight: 700; color: var(--narandzasta-tamna); }
.ap-xp ul { list-style: none; padding: 0; margin: 8px 0 0; } .ap-xp li { padding: 3px 0; } .ap-xp b { color: #2f7d4f; display: inline-block; min-width: 34px; } .ap-xp small { color: var(--siva); }
.ap-uredi { display: grid; gap: 10px; }
.ap-moderacija { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-podnaslov { font-size: .95rem; margin: 16px 0 6px; }

/* ===== Admin: baza podataka ===== */
.bz__koraci { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bz__koraci li { display: flex; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--linija); opacity: .65; }
.bz__koraci li.aktivno { opacity: 1; border-color: var(--narandzasta); background: var(--narandzasta-svijetla); }
.bz__koraci li.gotovo { opacity: 1; border-color: #2f7d4f; background: #E7F3EA; }
.bz__koraci b { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bijela); border: 1.5px solid currentColor; font-size: .85rem; }
.bz__koraci li.gotovo b { background: #2f7d4f; color: #fff; border-color: #2f7d4f; }
.bz__koraci span { display: flex; flex-direction: column; gap: 2px; } .bz__koraci small { color: var(--siva); font-size: .8rem; }
.bz__forma { display: grid; gap: 10px; max-width: 720px; margin: 8px 0 14px; }
.bz__red { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bz__port { max-width: 140px; }
.bz__ok { color: #1C6234; font-weight: 700; font-size: .9rem; margin-left: 10px; }
.bz__akcije { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.bz__akcije button[disabled] { opacity: .5; cursor: not-allowed; }
.bz__tabela-omot { overflow-x: auto; }
.bz__tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bz__tabela th, .bz__tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linija); }
.bz__tabela th { color: var(--siva); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 700px) { .bz__koraci { grid-template-columns: 1fr; } .bz__red { grid-template-columns: 1fr; } }
.ap-lozinka { display: grid; gap: 8px; }
.ap-lozinka__red { display: flex; gap: 6px; }
.ap-lozinka__red input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--linija); border-radius: 10px; font: inherit; font-family: ui-monospace, monospace; }
/* Lens radar: oznaka dometa ispod kruga (ne prekriva tačke na jugu) */
.lens__radar-omot { margin-bottom: 14px; }
.lens__radar-domet { bottom: -16px; pointer-events: none; }

/* ===== Profil: profesionalniji izgled (manje margine, manje zaobljeno) ===== */
.nalog--profil { max-width: 760px; margin: 12px auto 32px; padding: 0 8px; }
.nalog--profil .profil-kartica, .nalog--profil .xp-kartica, .nalog--profil .profil-sekcija, .nalog--profil .profil-prenos,
.nalog--profil .nalog__upozorenje, .nalog--profil .pratim-obavijest, .nalog--profil .xp-napomena, .nalog--profil .mapa-doprinosa { border-radius: 10px; }
.nalog--profil .profil-sekcija { margin: 10px 0; padding: 14px; box-shadow: 0 1px 2px rgba(17, 24, 20, .04); }
.nalog--profil .profil-sekcija h2 { font-size: 1.02rem; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.nalog--profil .profil-sekcija h2 small { margin-left: 2px; }
.nalog--profil .profil-kartica { flex-direction: row; text-align: left; padding: 16px; gap: 14px; box-shadow: 0 6px 18px rgba(30, 77, 58, .18); margin-top: 0; }
.nalog--profil .profil-kartica p, .nalog--profil .profil-kartica__podaci li { justify-content: flex-start; }
.nalog--profil .profil-kartica__avatar { width: 64px; height: 64px; font-size: 1.6rem; flex: 0 0 auto; }
.nalog--profil .profil-kartica h1 { font-size: 1.35rem; margin: 0 0 4px; }
.nalog--profil .xp-kartica { margin: 10px 0; padding: 14px; box-shadow: 0 4px 14px rgba(30, 77, 58, .16); }
.nalog--profil .xp-kartica__nivo { width: 60px; height: 60px; }
.nalog--profil .profil-veze { margin: 0 0 10px; gap: 6px; }
.nalog--profil .profil-veze a { border-radius: 8px; padding: 7px 12px; font-size: .85rem; }
.nalog--profil .evid-mreza div, .nalog--profil .zk, .nalog--profil .moje-red a, .nalog--profil .pratim-lista > li, .nalog--profil .rep__traka,
.nalog--profil .znacke__sve .zk__medalja { border-radius: 8px; }
.nalog--profil .moje-red img { border-radius: 6px; }
.nalog--profil .evid-mreza { gap: 6px; grid-template-columns: repeat(3, 1fr); }
.nalog--profil .evid-mreza div { padding: 10px; }
@media (max-width: 520px) { .nalog--profil .evid-mreza { grid-template-columns: repeat(2, 1fr); } }

/* osvojene značke: uredna mreža od ruba do ruba */
.nalog--profil .znacke__osvojene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nalog--profil .zk-mala { display: flex; width: 100%; min-width: 0; border-radius: 8px; padding: 6px 8px 6px 6px; font-size: .8rem; line-height: 1.2; }
.nalog--profil .zk-mala span { flex: 0 0 auto; }
@media (max-width: 560px) { .nalog--profil .znacke__osvojene { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* moja statistika: dvije kolone, oznaka iznad vrijednosti */
.profil-stat { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
.profil-stat > div { display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: 2px !important; padding: 9px 10px !important; border: 0 !important; border-radius: 8px; background: var(--lisaj-svijetli); min-width: 0; }
.profil-stat dt { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .03em; color: var(--siva); }
.profil-stat dd { text-align: left !important; justify-content: flex-start; font-size: .95rem; overflow-wrap: anywhere; }
@media (min-width: 640px) { .profil-stat { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* pratim: izbor mjesta */
.pratim-uvod { margin: -4px 0 10px; color: var(--siva); font-size: .88rem; }
.pratim-dodaj { display: flex; gap: 6px; margin: 0 0 8px; }
.pratim-dodaj__polje { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1.5px solid var(--linija); border-radius: 8px; background: var(--bijela); }
.pratim-dodaj__polje:focus-within { border-color: var(--bor); box-shadow: 0 0 0 3px rgba(30, 77, 58, .12); }
.pratim-dodaj__polje .ik { color: var(--siva); flex: 0 0 auto; }
.pratim-dodaj__polje input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 0; font: inherit; background: transparent; }
.pratim-dodaj .dugme { border-radius: 8px; white-space: nowrap; }
.pratim-prijedlog { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: .85rem; color: var(--siva); }
.pratim-cip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1.5px dashed var(--bor); background: var(--bijela); color: var(--bor); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.pratim-cip:hover { background: var(--lisaj-svijetli); }
.pratim-prazno { display: flex; gap: 6px; align-items: flex-start; padding: 10px; border-radius: 8px; background: var(--lisaj-svijetli); }
.nalog--profil .pratim-lista { margin-top: 4px; }
.nalog--profil .pratim-kanali { margin-top: 12px; }
.nalog--profil .profil-kartica__tekst { min-width: 0; flex: 1; }
.profil-kartica__email span { min-width: 0; overflow-wrap: anywhere; }
.profil-kartica__email small { display: block; opacity: .7; font-size: .72rem; }

/* Moje prijave: 2 kolone na velikim ekranima + stranice */
@media (min-width: 720px) {
  .moje-lista--mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .moje-lista--mreza .moje-red a { height: 100%; border: 1px solid var(--linija); }
}
.nalog--profil .moje-lista--mreza .moje-red a { border-radius: 8px; }
.moje-red__tekst { min-width: 0; }
.moje-red__tekst strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moje-stranice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; }
.moje-stranice a, .moje-stranice span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--linija); background: var(--bijela); color: var(--bor); font-weight: 700; font-size: .88rem; text-decoration: none; }
.moje-stranice a:hover { border-color: var(--bor); }
.moje-stranice a.aktivno { background: var(--bor); border-color: var(--bor); color: #fff; }
.moje-stranice__off { opacity: .35; }
.moje-stranice .moje-stranice__tri { border: 0; background: none; min-width: 20px; padding: 0; }
.moje-stranice small { margin-left: auto; color: var(--siva); font-size: .8rem; }
.moje-lista--mreza .moje-status { white-space: nowrap; font-size: .72rem; padding: 3px 8px; flex: 0 0 auto; }

/* ===== Početna: ilustrativna mapa (10 tačaka po BiH) ===== */
.uvod__mapa { border-radius: 16px; }
.mapa-pregled .leaflet-tile-pane { filter: saturate(.55) sepia(.12) brightness(1.04) contrast(.95); }
.mapa-pregled::after { content: ""; position: absolute; inset: 0; z-index: 450; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(30, 77, 58, .22) 100%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(30,77,58,.08)); }
.pin-ilustracija { animation: pin-ulaz .55s cubic-bezier(.2, .9, .3, 1.3) both; }
.pin-ilustracija .pin-sklop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; transform: translate(-50%, -50%); background: currentColor; color: rgba(226, 106, 18, .35); animation: pin-val 2.8s ease-out infinite; z-index: -1; }
.pin-ilustracija .pin-sklop { position: relative; }
@keyframes pin-ulaz { from { opacity: 0; transform: translateY(-14px) scale(.6); } }
@keyframes pin-val { 0% { box-shadow: 0 0 0 0 rgba(226, 106, 18, .35); opacity: .7; } 80%, 100% { box-shadow: 0 0 0 16px rgba(226, 106, 18, 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-ilustracija, .pin-ilustracija .pin-sklop::before { animation: none; } }

/* ===== Zaglavlje: Alert Lens ===== */
.zaglavlje__lens { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #111814, #1E4D3A); position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(17, 24, 20, .22); transition: transform .15s; }
.zaglavlje__lens:hover { transform: translateY(-1px); }
.zaglavlje__lens::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(185, 216, 166, .35), transparent); animation: lens-sjaj 4.5s ease-in-out infinite; }
@keyframes lens-sjaj { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.zaglavlje__lens-ik { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(185, 216, 166, .18); border: 1.5px solid rgba(185, 216, 166, .55); }
.zaglavlje__lens-ik .ik { width: 18px; height: 18px; color: #B9D8A6; }
.zaglavlje__lens-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.zaglavlje__lens-tekst strong { font-size: .88rem; }
.zaglavlje__lens-tekst small { font-size: .66rem; opacity: .75; }
.zaglavlje__lens.aktivno { box-shadow: 0 0 0 3px rgba(185, 216, 166, .5); }
.zaglavlje__lens + .zaglavlje__nalog { margin-left: 0; }
@media (max-width: 520px) {
  .zaglavlje__lens { padding: 4px; margin-right: 6px; }
  .zaglavlje__lens-tekst { display: none; }
  .zaglavlje__lens-ik { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .zaglavlje__lens::after { animation: none; } }

/* ===== Rang lista: uređena lista od 4. mjesta ===== */
.rang__lista { border: 0; background: none; overflow: visible; display: grid; gap: 6px; counter-reset: none; }
.rang__lista li + li { border-top: 0; }
.rang__lista a { padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--bijela); border: 1px solid var(--linija); box-shadow: 0 1px 2px rgba(17, 24, 20, .04); transition: border-color .15s, transform .15s; }
.rang__lista a:hover { background: var(--bijela); border-color: var(--bor); transform: translateX(2px); }
.rang__broj { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lisaj-svijetli); color: var(--bor); font-size: .85rem; }
.rang__lista .rang__av { background: linear-gradient(135deg, var(--bor), #3d7d5d); }
.rang__lista .rang__ime strong { font-size: .95rem; }
.rang__lista b { padding: 4px 10px; border-radius: 999px; background: var(--narandzasta-svijetla); font-size: .82rem; }
.rang__zn { padding: 3px 8px; border-radius: 999px; background: var(--lisaj-svijetli); }
.rang__ja-red a { border-color: var(--narandzasta) !important; box-shadow: 0 0 0 3px rgba(226, 106, 18, .12); }
/* početna: satelitski snimak sa granicom BiH */
.mapa-pregled { background: #0b1410; }
.mapa-pregled .leaflet-tile-pane { filter: saturate(1.15) contrast(1.05) brightness(.95); }
.mapa-pregled::after { background: radial-gradient(130% 100% at 50% 45%, transparent 60%, rgba(6, 16, 11, .45) 100%); }
.mapa-pregled__izvor { position: absolute; right: 8px; bottom: 6px; z-index: 600; font-size: .62rem; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none; }
.pin-ilustracija .pin { box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }

/* ===== Forma: "Pozicioniram…" dok se traži GPS lokacija ===== */
.pozicioniranje { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(8, 14, 11, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.pozicioniranje--vidljivo { opacity: 1; }
.pozicioniranje__kartica { width: 100%; max-width: 320px; padding: 24px 20px 18px; border-radius: 18px; background: var(--bijela); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.pozicioniranje__kartica strong { font-family: var(--font-naslov); font-size: 1.2rem; color: var(--bor); }
.pozicioniranje__tekst { font-size: .9rem; color: var(--siva); }
.pozicioniranje__tacnost { font-weight: 700; color: var(--narandzasta-tamna); font-size: .92rem; }
.pozicioniranje__odustani { margin-top: 8px; }
.pozicioniranje__radar { position: relative; width: 78px; height: 78px; margin-bottom: 8px; }
.pozicioniranje__radar b { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2B6CDF; box-shadow: 0 0 0 4px rgba(43, 108, 223, .25); }
.pozicioniranje__radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2B6CDF; opacity: 0; animation: poz-val 2s ease-out infinite; }
.pozicioniranje__radar i:nth-child(2) { animation-delay: 1s; }
@keyframes poz-val { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pozicioniranje__radar i { animation: none; opacity: .4; } }

/* ===== Zagađenje zraka ===== */
.izbor--zrak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .izbor--zrak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.izbor--zrak .izbor__opcija > span { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; text-align: left; min-height: 0; height: 100%; padding: 12px 14px; }
.izbor--zrak .izbor__opcija small { font-size: .8rem; line-height: 1.35; }
.zrak-privatnost { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #F1EEF8; color: #4B4170; font-size: .88rem; line-height: 1.45; }
.zrak-privatnost .ik { flex: none; margin-top: 2px; }
.zrak-ucestalost { margin-top: 14px; }
.zrak-ucestalost__naslov { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 8px; }
.zrak-ucestalost__izbor { display: flex; flex-wrap: wrap; gap: 6px; }
.zrak-ucestalost__izbor label { position: relative; cursor: pointer; }
.zrak-ucestalost__izbor input { position: absolute; opacity: 0; pointer-events: none; }
.zrak-ucestalost__izbor span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--linija, #dde3dd); border-radius: 999px; font-size: .9rem; background: #fff; transition: background .15s, border-color .15s; }
.zrak-ucestalost__izbor input:checked + span { background: #7A6F9B; border-color: #7A6F9B; color: #fff; font-weight: 700; }
.zrak-ucestalost__izbor input:focus-visible + span { outline: 2px solid #7A6F9B; outline-offset: 2px; }
.detalj-zrak { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 14px 0; padding: 14px; border-radius: 12px; background: #F4F2F9; border: 1px solid #E2DDEF; }
.detalj-zrak p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.detalj-zrak p span { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6385; }
.detalj-zrak p strong { color: #2F2850; }
.detalj-zrak__napomena { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; color: #5E5679; font-size: .84rem; }
/* šest kategorija (sa zagađenjem zraka): 2 → 3 → 6 kolona */
@media (min-width: 640px) {
  .izbor--kat, .sanacija__kategorije { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .izbor--kat, .sanacija__kategorije { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.podnozje__novo { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(90deg, #E26A12, #D6402B); vertical-align: middle; }

/* ===== Zagađenje zraka: poseban okvir u formi ===== */
.blok--zrak { background: linear-gradient(160deg, #F5F2FB, #EEE9F7); border-color: #DDD5EE; }
.blok--zrak > legend { color: #3A3160; }
.smog-izbor { position: relative; display: block; cursor: pointer; }
.smog-izbor input { position: absolute; opacity: 0; pointer-events: none; }
.smog-izbor > span { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(120deg, #3A3160, #5E4F8E); color: #fff; border: 3px solid transparent; transition: transform .1s, box-shadow .15s, border-color .15s; box-shadow: 0 6px 18px rgba(58, 49, 96, .22); }
.smog-izbor:active > span { transform: scale(.99); }
.smog-izbor__ik { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
.smog-izbor__ik .ik { width: 30px; height: 30px; }
.smog-izbor__tekst { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.smog-izbor__tekst strong { font-family: var(--font-naslov); font-size: 1.15rem; }
.smog-izbor__tekst small { font-size: .86rem; opacity: .85; line-height: 1.4; }
.smog-izbor__kvacica { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); }
.smog-izbor__kvacica .ik { width: 16px; height: 16px; opacity: 0; }
.smog-izbor input:checked + span { border-color: #B9A6F0; box-shadow: 0 0 0 4px rgba(122, 111, 155, .25), 0 6px 18px rgba(58, 49, 96, .3); }
.smog-izbor input:checked + span .smog-izbor__kvacica { background: #fff; border-color: #fff; color: #3A3160; }
.smog-izbor input:checked + span .smog-izbor__kvacica .ik { opacity: 1; }
.smog-izbor input:focus-visible + span { outline: 3px solid #7A6F9B; outline-offset: 3px; }
.smog-ili { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: #6B6385; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.smog-ili::before, .smog-ili::after { content: ""; flex: 1; height: 1px; background: #D9D2E8; }
.blok--zrak .izbor__opcija > span { background: #fff; }

/* ===== Mapa: zagađenje zraka grupisano u krugu od 10 km (mali krug ispod ostalih pinova) ===== */
.smog-krug { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #5E4F8E; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(30, 20, 60, .35); cursor: pointer; opacity: .92; transition: transform .12s, opacity .12s; }
.smog-krug:hover, .smog-krug--otvoren { opacity: 1; transform: scale(1.12); }
.smog-krug--1 { background: #8C7FB5; }
.smog-krug--2 { background: #5E4F8E; }
.smog-krug--3 { background: #3A2363; }
.smog-krug--0 { background: #8E8A99; }
.smog-krug svg { width: 16px; height: 16px; }
.smog-krug b { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #fff; color: #3A2363; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.smog-krug--otvoren { box-shadow: 0 0 0 4px rgba(94, 79, 142, .3), 0 2px 8px rgba(30, 20, 60, .35); }
.smog-tooltip { font-weight: 700; }

/* ===== Administracija: botovi ===== */
.bot-kartica { margin-bottom: 14px; }
.bot-glava { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.bot-glava h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.bot-znak { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.2rem; }
.bot-znak--viber { background: #7360F2; }
.bot-znak--tg { background: #229ED9; }
.bot-stanje { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.bot-stanje--on { background: #E6F4EA; color: #1E5B34; }
.bot-stanje--off { background: #F1F1F1; color: #6B6B6B; }
.bot-prekidac { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-weight: 700; cursor: pointer; }
.bot-prekidac input { position: absolute; opacity: 0; pointer-events: none; }
.bot-prekidac span { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #CBD3CB; transition: background .15s; flex: none; }
.bot-prekidac span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.bot-prekidac input:checked + span { background: #2F8F4E; }
.bot-prekidac input:checked + span::after { transform: translateX(20px); }
.bot-prekidac input:focus-visible + span { outline: 2px solid #1E4D3A; outline-offset: 2px; }
.bot-dogadjaji { border: 1px solid #E2E8E2; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 6px; }
.bot-dogadjaji legend { font-weight: 700; font-size: .88rem; padding: 0 4px; }
.bot-akcije { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bot-uputa { margin-top: 12px; font-size: .9rem; }
.bot-uputa summary { cursor: pointer; font-weight: 700; color: #1E4D3A; }
.bot-uputa ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }

/* ===== Administracija: slike za društvene mreže ===== */
.mreze__raspored { display: grid; gap: 20px; }
@media (min-width: 980px) { .mreze__raspored { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.mreze__forma fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.mreze__forma legend { font-weight: 800; font-size: .9rem; margin-bottom: 8px; color: #1E4D3A; }
.mreze__sabloni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mreze__formati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mreze__izbor { position: relative; cursor: pointer; }
.mreze__izbor input { position: absolute; opacity: 0; pointer-events: none; }
.mreze__izbor > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px; border: 2px solid #E2E8E2; border-radius: 12px; background: #fff; transition: border-color .15s, background .15s; }
.mreze__izbor strong { font-size: .92rem; }
.mreze__izbor small { font-size: .78rem; color: #5B675F; line-height: 1.3; }
.mreze__izbor input:checked + span { border-color: #E26A12; background: #FFF6EF; }
.mreze__izbor input:focus-visible + span { outline: 2px solid #1E4D3A; outline-offset: 2px; }
.mreze__izbor--format > span { align-items: center; text-align: center; }
.mreze__oblik { display: block; width: 26px; border: 2px solid #1E4D3A; border-radius: 4px; margin-bottom: 6px; }
.mreze__pregled { position: sticky; top: 12px; }
.mreze__slika { position: relative; margin: 0 auto 12px; max-width: 420px; border-radius: 14px; overflow: hidden; background: #E8ECE8; box-shadow: 0 10px 30px rgba(20, 56, 42, .18); }
.mreze__slika img { display: block; width: 100%; height: auto; }
.mreze__slika--story { max-width: 300px; }
.mreze__slika--ucitava::after { content: "Pravim sliku…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(232, 236, 232, .85); font-weight: 700; color: #1E4D3A; }
.mreze__akcije { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.mreze__tekst textarea { font-size: .9rem; line-height: 1.45; }
.mreze__tekst button { margin-top: 6px; }

/* ===== PDF izvještaj o stanju (stranica mjesta, statistika) ===== */
.izv-kartica { display: grid; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid #E2E8E2; border-radius: 14px; background: linear-gradient(135deg, #FFFFFF, #F6F9F4); }
@media (min-width: 1040px) { .izv-kartica { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; align-items: center; } }
.izv-kartica__tekst { display: flex; gap: 12px; align-items: flex-start; }
.izv-kartica__tekst strong { display: block; font-family: var(--font-naslov); color: var(--bor); font-size: 1.02rem; }
.izv-kartica__tekst small { display: block; color: var(--siva); font-size: .84rem; line-height: 1.4; margin-top: 2px; }
.izv-kartica__ik { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #1E4D3A; color: #fff; }
.izv-kartica__ik .ik { width: 22px; height: 22px; }
.izv-kartica__izbor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.izv-kartica__izbor label { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--siva); }
.izv-kartica__izbor select { padding: 8px 10px; border: 1.5px solid #DCE2DC; border-radius: 10px; background: #fff; font: inherit; font-size: .88rem; color: inherit; min-width: 0; width: 100%; text-overflow: ellipsis; }
.izv-kartica__dugmad { display: flex; gap: 8px; flex-wrap: wrap; }

/* =================================================================
   PSI LUTALICE (zaseban dio)
   ================================================================= */
.psi { max-width: 1180px; margin: 0 auto; padding: 14px 14px 40px; }
.psi-meni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #2E2416; color: #fff; }
.psi-meni__naslov { font-family: var(--font-naslov); font-weight: 800; font-size: 1.02rem; display: inline-flex; gap: 8px; align-items: center; }
.psi-meni__linkovi { display: flex; flex-wrap: wrap; gap: 4px; }
.psi-meni__linkovi a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: #F3E7D3; text-decoration: none; font-weight: 700; font-size: .9rem; }
.psi-meni__linkovi a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.psi-meni__linkovi a.aktivno { background: #E2A13A; color: #2E2416; }
.psi__glava { margin-bottom: 16px; }
.psi__glava h1 { margin: 0 0 6px; font-family: var(--font-naslov); font-size: clamp(1.6rem, 4.5vw, 2.3rem); color: var(--bor); line-height: 1.1; }
.psi__glava p { margin: 0; color: var(--siva); max-width: 66ch; }
.psi__glava--red { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-end; }
.psi-brojke { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .psi-brojke { grid-template-columns: repeat(4, minmax(0, 1fr)); } .psi-brojke--velike { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.psi-brojke li { padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #ECE4D6; display: flex; flex-direction: column; gap: 2px; }
.psi-brojke strong { font-family: var(--font-naslov); font-size: 1.7rem; color: #6B4A1E; line-height: 1.1; font-variant-numeric: tabular-nums; }
.psi-brojke span { font-size: .82rem; color: var(--siva); }
.psi-filteri { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.psi-tacka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.psi-zone-prekidac { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; font-weight: 700; color: var(--siva); }
.psi-mapa { height: 460px; border-radius: 14px; overflow: hidden; background: #E8ECE8; border: 1px solid #E2E8E2; }
@media (min-width: 900px) { .psi-mapa { height: 560px; } }
.psi-mapa--profil { height: 340px; }
.psi-prazno { text-align: center; color: var(--siva); }
.psi-pin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--sb); background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); overflow: hidden; display: grid; place-items: center; font-size: 20px; }
.psi-pin img { width: 100%; height: 100%; object-fit: cover; }
.psi-pin--oprez { box-shadow: 0 0 0 3px #C4372B, 0 3px 10px rgba(0, 0, 0, .3); }
.psi-klaster { width: 44px; height: 44px; border-radius: 50%; background: #2E2416; color: #fff; border: 3px solid #E2A13A; display: grid; place-items: center; position: relative; font-size: 18px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.psi-klaster b { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E2A13A; color: #2E2416; font-size: .72rem; line-height: 20px; text-align: center; }
.psi-popup { display: flex; gap: 10px; }
.psi-popup img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; }
.psi-popup > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.psi-popup small { color: var(--siva); }
.psi-popup__oprez { color: #9A2D17 !important; font-weight: 700; }
.psi-status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sb) 14%, #fff); color: color-mix(in srgb, var(--sb) 80%, #000); font-size: .74rem; font-weight: 800; border: 1px solid color-mix(in srgb, var(--sb) 35%, #fff); }
.psi-status--veliki { font-size: .82rem; padding: 4px 12px; }
.psi-sekcija { margin-top: 22px; }
.psi-sekcija h2 { font-family: var(--font-naslov); color: var(--bor); font-size: 1.2rem; margin: 0 0 10px; }
.psi-kartica-bijela { background: #fff; border: 1px solid #E2E8E2; border-radius: 14px; padding: 16px; }
.psi-kartice { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.psi-kartica { display: flex; gap: 12px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #ECE4D6; color: inherit; text-decoration: none; transition: border-color .15s, transform .1s; }
.psi-kartica:hover { border-color: #E2A13A; }
.psi-kartica__slika { flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: #F3ECDF; display: grid; place-items: center; font-size: 30px; }
.psi-kartica__slika img { width: 100%; height: 100%; object-fit: cover; }
.psi-kartica__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.psi-kartica__tekst strong { color: var(--bor); }
.psi-kartica__tekst small { color: var(--siva); font-size: .8rem; }
.psi-napomena { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; font-size: .84rem; color: var(--siva); }
.psi-napomena .ik { flex: none; margin-top: 2px; }
/* forma */
.psi-forma { max-width: 820px; }
.psi-tip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psi-tip__op { position: relative; cursor: pointer; }
.psi-tip__op input { position: absolute; opacity: 0; pointer-events: none; }
.psi-tip__op > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 14px; border: 2px solid #E3E7E3; border-radius: 14px; background: #fff; }
.psi-tip__op b { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }
.psi-tip__op small { color: var(--siva); font-size: .82rem; }
.psi-tip__op input:checked + span { border-color: #E2A13A; background: #FFF8EC; }
.psi-tip__op--ugriz input:checked + span { border-color: #C4372B; background: #FDF0EE; }
.psi-tip__op input:focus-visible + span { outline: 3px solid #1E4D3A; outline-offset: 2px; }
.psi-hitno { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #FDF0EE; border-left: 4px solid #C4372B; color: #6B1F14; font-size: .9rem; line-height: 1.5; }
.psi-hitno a { color: #9A2D17; font-weight: 800; }
.psi-cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.psi-cipovi label { position: relative; cursor: pointer; }
.psi-cipovi input { position: absolute; opacity: 0; pointer-events: none; }
.psi-cipovi span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid #DCE2DC; border-radius: 999px; background: #fff; font-size: .9rem; }
.psi-cipovi i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.psi-cipovi input:checked + span { background: #2E2416; border-color: #2E2416; color: #fff; font-weight: 700; }
.psi-cipovi input:focus-visible + span { outline: 2px solid #E2A13A; outline-offset: 2px; }
.psi-legenda-sitno { font-weight: 400; font-size: .8rem; color: var(--siva); }
.psi-markica-broj { margin-top: 10px; max-width: 260px; }
.psi-podgrupa { margin-top: 12px; }
.psi-podgrupa > span { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.psi-foto-dugme { max-width: 340px; }
.psi-foto-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; }
.psi-foto-lista li { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; }
.psi-foto-lista img { width: 100%; height: 100%; object-fit: cover; }
.psi-foto-lista button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 16px; cursor: pointer; }
.psi-forma-mapa { height: 320px; border-radius: 12px; overflow: hidden; margin-top: 8px; border: 1px solid #E2E8E2; }
.psi-isti { background: #FFF8EC; border-color: #F0DDB8; }
.psi-isti__lista { display: grid; gap: 8px; margin-bottom: 10px; }
.psi-kandidat { position: relative; cursor: pointer; display: block; }
.psi-kandidat input { position: absolute; opacity: 0; pointer-events: none; }
.psi-kandidat > span { display: flex; gap: 10px; align-items: center; padding: 8px; border: 2px solid #EADFC9; border-radius: 12px; background: #fff; }
.psi-kandidat input:checked + span { border-color: #E2A13A; box-shadow: 0 0 0 3px rgba(226, 161, 58, .25); }
.psi-kandidat input:focus-visible + span { outline: 2px solid #1E4D3A; outline-offset: 2px; }
.psi-kandidat__slika { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #F3ECDF; display: grid; place-items: center; font-size: 26px; }
.psi-kandidat__slika img { width: 100%; height: 100%; object-fit: cover; }
.psi-kandidat__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.psi-kandidat__tekst small { color: var(--siva); font-size: .8rem; }
.psi-kandidat__skor { font-style: normal; font-weight: 800; color: #6B4A1E; font-size: .9rem; }
.psi-isti__novi { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: .9rem; cursor: pointer; }
/* profil */
.psi-profil__glava { display: grid; gap: 18px; }
@media (min-width: 760px) { .psi-profil__glava { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.psi-profil__foto { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #F3ECDF; display: grid; place-items: center; font-size: 80px; }
.psi-profil__foto img, .psi-profil__foto a { width: 100%; height: 100%; object-fit: cover; display: block; }
.psi-profil__info h1 { margin: 8px 0 4px; font-family: var(--font-naslov); color: var(--bor); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.psi-profil__opis { margin: 0 0 12px; color: var(--siva); }
.psi-profil__cinjenice { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.psi-profil__cinjenice li { display: flex; gap: 8px; align-items: center; }
.psi-profil__napomena { padding: 10px 12px; border-radius: 10px; background: #F6F1E7; }
.psi-profil__akcije { display: flex; flex-wrap: wrap; gap: 8px; }
.psi-galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.psi-galerija a { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: block; }
.psi-galerija img { width: 100%; height: 100%; object-fit: cover; }
.psi-galerija span { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .72rem; }
.psi-vidjenja { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.psi-vidjenja li { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid #E2A13A; background: #fff; border-radius: 0 10px 10px 0; }
.psi-vidjenja__datum { font-size: .78rem; color: var(--siva); }
.psi-vidjenja__detalji { font-size: .86rem; color: var(--siva); }
.psi-vidjenja__opis { font-style: italic; }
/* statistika */
.psi-stat-red { display: grid; gap: 14px; }
@media (min-width: 860px) { .psi-stat-red { grid-template-columns: 1fr 1fr; } }
.psi-traka { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: .9rem; }
.psi-traka i { height: 12px; border-radius: 6px; background: #EEF1EC; overflow: hidden; }
.psi-traka b { display: block; height: 100%; border-radius: 6px; }
.psi-traka strong { text-align: right; }
.psi-upozorenja { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.psi-upozorenja li b { font-family: var(--font-naslov); font-size: 1.3rem; color: #6B4A1E; margin-right: 6px; }
.psi-upozorenja small { display: block; color: var(--siva); }
.psi-stubici { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 20px; }
.psi-stubici__s { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.psi-stubici__s i { width: 100%; max-width: 38px; background: #E2A13A; border-radius: 6px 6px 0 0; }
.psi-stubici__s small { font-size: .7rem; color: var(--siva); white-space: nowrap; }
.psi-stubici__n { font-size: .74rem; font-weight: 700; }
.psi-tabela-omot { overflow-x: auto; }
.psi-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.psi-tabela th, .psi-tabela td { padding: 9px 10px; border-bottom: 1px solid #EEF1EC; text-align: left; }
.psi-tabela th { background: #F6F1E7; font-size: .8rem; }
/* administracija */
.psi-adm-linkovi { margin: 0 0 10px; }
.psi-adm-v__red { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.psi-adm-foto { display: flex; gap: 6px; flex-wrap: wrap; }
.psi-adm-foto img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; }
.psi-adm-v__info { flex: 1; min-width: 240px; }
.psi-adm-v__info p { margin: 6px 0 0; }
.psi-adm-v__kaze { padding: 6px 10px; border-radius: 8px; background: #FFF8EC; font-weight: 700; }
.psi-adm-v--gotovo { opacity: .6; }
.psi-adm-izbor { display: grid; gap: 6px; margin: 12px 0; }
@media (min-width: 900px) { .psi-adm-izbor { grid-template-columns: 1fr 1fr; } }
.psi-adm-op { position: relative; cursor: pointer; }
.psi-adm-op > input { position: absolute; opacity: 0; pointer-events: none; }
.psi-adm-op > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid #E3E7E3; border-radius: 12px; background: #fff; }
.psi-adm-op > span > img, .psi-adm-op > span > b { grid-row: span 3; width: 54px; height: 54px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #F3ECDF; font-size: 22px; }
.psi-adm-op > span small, .psi-adm-op > span a { font-size: .78rem; color: var(--siva); }
.psi-adm-op > span input[type=text], .psi-adm-op > span select { font: inherit; font-size: .85rem; padding: 6px 8px; border: 1px solid #DCE2DC; border-radius: 8px; min-width: 0; }
.psi-adm-op > input:checked + span { border-color: #E2A13A; background: #FFF8EC; }
.psi-adm-p__slika { width: 90px; height: 90px; border-radius: 12px; overflow: hidden; background: #F3ECDF; display: grid; place-items: center; font-size: 34px; flex: none; }
.psi-adm-p__slika img { width: 100%; height: 100%; object-fit: cover; }
.psi-adm-boje { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; }
.psi-adm-spoji, .psi-adm-obrisi { margin-top: 10px; }
.psi-adm-spoji select, .psi-adm-prem select { max-width: 280px; }
.psi-adm-vlista { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.psi-adm-vlista li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .86rem; }
.psi-adm-vlista .psi-adm-foto img { width: 56px; height: 56px; }
.psi-adm-prem { display: inline-flex; gap: 6px; }
/* psi: dorade (ikona psa na mapi, centrirani izbor vrste, link u meniju) */
.psi-pin { width: 38px; height: 38px; border: 3px solid #fff; background: var(--sb); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.psi-pin svg { width: 22px; height: 22px; }
.psi-klaster svg { width: 22px; height: 22px; color: #fff; }
.psi-tip__op > span { align-items: center; text-align: center; padding: 16px 12px; }
.psi-tip__op b { font-size: 2rem; }
.zaglavlje__psi { display: inline-flex; align-items: center; gap: 5px; }
.psi-bodovi { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #FFF8EC; border: 1px solid #F0DDB8; font-size: .9rem; color: #5A3E14; }
.psi-bodovi a { font-weight: 700; }
.moji-psi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .moji-psi { grid-template-columns: 1fr 1fr; } }
.moji-psi a { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #ECE4D6; border-radius: 10px; color: inherit; text-decoration: none; background: #fff; }
.moji-psi a:hover { border-color: #E2A13A; }
.moji-psi__slika { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #F3ECDF; display: grid; place-items: center; color: #6B4A1E; }
.moji-psi__slika img { width: 100%; height: 100%; object-fit: cover; }
.moji-psi__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.moji-psi__tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moji-psi__tekst small { color: var(--siva); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moje-status--odbijena { background: #F3F3F3; color: #6B6B6B; }
.profil-sitno { margin: 10px 0 0; font-size: .88rem; }

/* Psi: obrada fotografija u pregledniku */
.psi-foto-lista li.psi-foto--obrada { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--lisaj-svijetli); color: var(--siva); font-size: .74rem; }
.psi-foto__vel { position: absolute; left: 4px; bottom: 4px; background: rgba(28, 38, 32, .78); color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: 999px; pointer-events: none; }
.psi-foto-info { margin: 8px 0 0; font-size: .88rem; color: var(--siva); }
.psi-foto-info--greska { color: var(--greska); font-weight: 700; }
.foto-dugme--onemoguceno { opacity: .5; pointer-events: none; }

/* Psi: administracija, uređivanje svih polja */
.psi-adm-uredi > form { margin-top: 10px; padding: 12px; border: 1px solid #E3E7E3; border-radius: 12px; background: #FBFCFA; }
.psi-adm-lok { border: 1px solid #E3E7E3; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
.psi-adm-lok legend { font-weight: 700; padding: 0 6px; }
.psi-adm-mapa { height: 260px; border-radius: 10px; overflow: hidden; margin-bottom: 6px; background: #E8EDE6; }
.psi-adm-slike { display: flex; flex-wrap: wrap; gap: 10px; }
.psi-adm-slika { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; align-items: flex-start; }
.psi-adm-slika img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.psi-adm-slika__ukloni { color: var(--greska); }
.psi-adm-slika--izbor { position: relative; cursor: pointer; }
.psi-adm-slika--izbor input { position: absolute; opacity: 0; }
.psi-adm-slika--izbor img { border: 3px solid transparent; }
.psi-adm-slika--izbor input:checked + img { border-color: #E2A13A; }
.psi-adm-vlista li { flex-direction: column; align-items: stretch; border-top: 1px solid #EEF1EC; padding-top: 8px; }
.psi-adm-vlista li > span { display: block; }
[data-samo-tip][hidden] { display: none !important; }
.psi-adm-boje label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.psi-adm-boje input[type=checkbox], .psi-adm-slika input[type=radio], .psi-adm-slika input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; }
.psi-adm-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #E2731C; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

/* Psi: poređenje fotografija sa psima u blizini */
.psi-uporedi { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #FFF6E8, #FFEFD9); border: 1px solid #F1D9B1; }
.psi-uporedi__slike { display: flex; flex: none; }
.psi-uporedi__slike span { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #FFEFD9; display: grid; place-items: center; font-size: 17px; margin-left: -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.psi-uporedi__slike span:first-child { margin-left: 0; }
.psi-uporedi__vise { font-size: .74rem !important; font-weight: 800; color: #8A4B0F; }
.psi-uporedi__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psi-uporedi__tekst strong { color: #6E3A0B; font-size: .95rem; }
.psi-uporedi__tekst small { color: #8A6A45; font-size: .82rem; line-height: 1.35; }
.psi-uporedi .dugme { flex: none; }
.psi-uporedi .dugme:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .psi-uporedi { flex-wrap: wrap; } .psi-uporedi .dugme { width: 100%; justify-content: center; } }
.psi-izabran { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: #EAF5EC; border: 2px solid #9ACBA6; }
.psi-izabran img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: #fff; }
.psi-izabran > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.psi-izabran strong { color: #1C6234; }
.psi-izabran small { color: #4B6B52; font-size: .84rem; }
.psi-izabran .link-dugme { font-size: .86rem; }

.psi-modal-aktivan, .psi-modal-aktivan body { overflow: hidden; }
.psi-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(14, 24, 18, .72); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.psi-modal--otvoren { opacity: 1; }
.psi-modal__okvir { width: 100%; max-width: 560px; height: 100%; max-height: 100dvh; background: #F7F8F4; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .22s ease; overflow: hidden; }
.psi-modal--otvoren .psi-modal__okvir { transform: none; }
@media (min-width: 640px) { .psi-modal { align-items: center; padding: 20px; } .psi-modal__okvir { height: auto; max-height: calc(100dvh - 40px); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } }
.psi-modal__glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #E6EAE3; }
.psi-modal__glava strong { display: block; font-family: var(--font-naslov); font-size: 1.1rem; color: var(--bor); }
.psi-modal__glava small { color: var(--siva); font-size: .82rem; }
.psi-modal__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E0E5DD; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; flex: none; }
.psi-modal__moja { position: relative; flex: none; height: 30vh; min-height: 170px; max-height: 280px; background: #1C2620; cursor: pointer; }
.psi-modal__moja img { width: 100%; height: 100%; object-fit: contain; display: block; }
.psi-modal__oznaka { position: absolute; left: 10px; top: 10px; background: #E26A12; color: #fff; font-weight: 800; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }
.psi-modal__tacke { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.psi-modal__tacke i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.psi-modal__tacke i.aktivno { background: #fff; }
.psi-modal__srednje { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 4px; font-size: .78rem; color: var(--siva); }
.psi-modal__brojac { font-weight: 800; color: var(--bor); font-variant-numeric: tabular-nums; }
.psi-modal__traka-omot { position: relative; flex: 1; min-height: 0; display: flex; }
.psi-modal__traka { flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.psi-modal__traka::-webkit-scrollbar { display: none; }
.psi-karta { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; background: #fff; border: 1px solid #E3E7E1; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 14px -8px rgba(20, 40, 30, .35); }
.psi-karta__foto { position: relative; border: 0; padding: 0; margin: 0; background: #EDE6D8; cursor: pointer; height: 26vh; min-height: 150px; max-height: 240px; }
.psi-karta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psi-karta__br, .psi-karta__m { position: absolute; bottom: 8px; background: rgba(20, 30, 24, .75); color: #fff; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.psi-karta__br { right: 8px; } .psi-karta__m { left: 8px; }
.psi-karta__info { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 3px; }
.psi-karta__info strong { font-size: 1.02rem; }
.psi-karta__info .psi-status { align-self: flex-start; }
.psi-karta__info small { color: var(--siva); font-size: .82rem; }
.psi-karta__da { margin: auto 12px 12px; justify-content: center; }
.psi-modal__str { position: absolute; top: 40%; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-size: 24px; line-height: 1; cursor: pointer; color: var(--bor); }
.psi-modal__str--l { left: 6px; } .psi-modal__str--d { right: 6px; }
@media (hover: none) { .psi-modal__str { display: none; } }
.psi-modal__dno { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E6EAE3; }
.psi-karta__da.dugme--puno { width: auto; align-self: stretch; }
.psi-karta__m { top: 8px; bottom: auto; }

/* Link na Telegram bot za građane */
.tg-traka { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #E9F4FB; color: #1C5F86; text-decoration: none; font-size: .9rem; border: 1px solid #C9E4F4; }
.tg-traka svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #29A3DA; color: #fff; flex: none; }
.tg-traka b { color: #0F4C6E; }
.tg-traka:hover { background: #DDEFFA; }
.bot-provjera { margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: #F6F8F4; border: 1px solid #E1E6DE; }
.bot-provjera ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; font-size: .9rem; }
.bot-provjera--ne { color: #8A2414; }
.bot-provjera--ok { color: #1C6234; }
/* Smog: bijeli oblak koji blijedi prema ivicama (gradijent #smog-grad); preklopljeni oblaci daju gušći smog */
.leaflet-overlay-pane path.smog-oblak { fill: url(#smog-grad); filter: drop-shadow(0 0 4px rgba(60, 64, 84, .42)); cursor: pointer; }

/* ================= Za medije (mediji.php) ================= */
.medij { max-width: 1100px; margin: 0 auto; }
.medij-glava { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 28px; align-items: stretch; margin: 8px 0 44px; }
.medij-glava__nadnaslov { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--narandzasta-svijetla); color: var(--narandzasta-tamna); font-weight: 700; font-size: .88rem; }
.medij-glava h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin-bottom: .35em; }
.medij-glava__tekst > p:not(.medij-glava__nadnaslov) { font-size: 1.1rem; color: var(--siva); max-width: 60ch; }
.medij-glava__dugmad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.medij-brojke { position: relative; overflow: hidden; border-radius: 22px; padding: 24px 26px; color: #fff;
  background: radial-gradient(420px 300px at 85% 0%, #2F6E50 0%, transparent 70%), linear-gradient(160deg, #1E4D3A, #123023); display: grid; gap: 14px; align-content: start; }
.medij-brojke::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(168, 212, 154, .14); box-shadow: 0 0 0 26px rgba(168, 212, 154, .05); }
.medij-brojke__naslov { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: .9rem; color: #BFDDB2; text-transform: uppercase; letter-spacing: .06em; }
.medij-uzivo { width: 9px; height: 9px; border-radius: 50%; background: #F08A3C; box-shadow: 0 0 0 0 rgba(240, 138, 60, .6); animation: medij-puls 2s infinite; }
@keyframes medij-puls { 70% { box-shadow: 0 0 0 9px rgba(240, 138, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 138, 60, 0); } }
.medij-brojke div { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.medij-brojke strong { font-family: var(--font-naslov); font-size: 2.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.medij-brojke span { color: #D6E6D4; }
.medij-brojke a { position: relative; z-index: 1; color: #FFC79C; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.medij-brojke a:hover { color: #fff; }

.medij-sekcija { margin: 0 0 48px; }
.medij-sekcija > h2 { font-size: 1.6rem; display: flex; align-items: center; gap: 12px; }
.medij-sekcija > h2::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--linija), transparent); }
.medij-sekcija__uvod, .medij-prazno { color: var(--siva); }
.medij-prazno { padding: 22px; border: 2px dashed var(--linija); border-radius: 16px; background: var(--lisaj-svijetli); }

.medij-objave { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.medij-objava { background: var(--bijela); border: 1px solid var(--linija); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(28, 38, 32, .04); }
.medij-objava--prva { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.medij-objava--prva:not(:has(.medij-objava__slika)) { grid-template-columns: 1fr; }
.medij-objava__slika { display: block; background: var(--lisaj); aspect-ratio: 16 / 9; overflow: hidden; }
.medij-objava--prva .medij-objava__slika { aspect-ratio: auto; min-height: 100%; }
.medij-objava__slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.medij-objava__slika:hover img { transform: scale(1.03); }
.medij-objava__tijelo { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.medij-objava--prva .medij-objava__tijelo { padding: 28px 30px 24px; }
.medij-objava time { font-size: .85rem; font-weight: 700; color: var(--narandzasta-tamna); }
.medij-objava h3 { font-size: 1.25rem; margin: 6px 0 10px; }
.medij-objava--prva h3 { font-size: 1.65rem; }
.medij-objava__tekst { color: var(--kora); line-height: 1.6; }
.medij-objava__vise summary { list-style: none; cursor: pointer; }
.medij-objava__vise summary::-webkit-details-marker { display: none; }
.medij-objava__vise summary p { margin: 0 0 6px; line-height: 1.6; }
.medij-objava__vise summary span { color: var(--bor); font-weight: 700; text-decoration: underline; }
.medij-objava__vise[open] summary { display: none; }
.medij-objava__akcije { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }

.medij-znacka { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--b); color: #fff; font-family: var(--font-naslov); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.medij-linkovi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.medij-linkovi a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bijela); border: 1px solid var(--linija); color: inherit; text-decoration: none; height: 100%; transition: border-color .15s, transform .15s, box-shadow .15s; }
.medij-linkovi a:hover { border-color: var(--mahovina); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 77, 58, .1); }
.medij-linkovi__tekst { display: grid; gap: 2px; min-width: 0; flex: 1; }
.medij-linkovi__tekst strong { font-size: 1.02rem; }
.medij-linkovi__naslov { color: var(--kora); font-size: .93rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.medij-linkovi__tekst small { color: var(--siva); }
.medij-linkovi__strelica { width: 20px; height: 20px; flex: none; color: var(--narandzasta); }

.medij-paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.medij-paket__stavka { display: grid; gap: 4px; padding: 12px 12px 14px; border-radius: 18px; background: var(--bijela); border: 1px solid var(--linija); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.medij-paket__stavka:hover { border-color: var(--mahovina); box-shadow: 0 8px 20px rgba(30, 77, 58, .1); }
.medij-paket__slika { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #1E4D3A; margin-bottom: 8px; }
.medij-paket__slika img { width: 100%; height: 100%; object-fit: contain; display: block; }
.medij-paket__stavka small { color: var(--siva); display: inline-flex; align-items: center; gap: 6px; }

.medij-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; margin-bottom: 20px; border-radius: 22px; background: var(--narandzasta-svijetla); border: 1px solid #F6CFAE; }
.medij-kontakt h2 { font-size: 1.4rem; margin-bottom: .3em; }
.medij-kontakt p { margin: 0; color: var(--kora); max-width: 56ch; }
.medij-kontakt__dugmad { display: grid; gap: 8px; justify-items: center; }
.medij-kontakt .dugme { background: var(--narandzasta); border-color: var(--narandzasta); }
.medij-kontakt .dugme:hover { background: var(--narandzasta-tamna); border-color: var(--narandzasta-tamna); }
.medij-kontakt__email { font-weight: 700; color: var(--narandzasta-tamna); }

@media (max-width: 860px) {
  .medij-glava { grid-template-columns: 1fr; }
  .medij-objave { grid-template-columns: 1fr; }
  .medij-objava--prva { grid-template-columns: 1fr; }
  .medij-objava--prva .medij-objava__slika { aspect-ratio: 16 / 9; }
  .medij-paket { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .medij-paket { grid-template-columns: 1fr; }
  .medij-kontakt { padding: 22px; }
  .medij-objava--prva .medij-objava__tijelo { padding: 20px; }
}

/* Kontakt: kartica za medije */
.kontakt-mediji { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; padding: 14px 16px; border-radius: 16px; background: var(--lisaj-svijetli); border: 1px solid var(--linija); color: inherit; text-decoration: none; }
.kontakt-mediji:hover { border-color: var(--mahovina); }
.kontakt-mediji__ik { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bor); color: #fff; flex: none; }
.kontakt-mediji > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.kontakt-mediji small { color: var(--siva); }

/* Administracija: Mediji */
.medij-admin__sekcija { margin: 18px 0 30px; }
.medij-admin__sekcija h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.medij-admin__sekcija h2 small { font-size: .8rem; background: var(--lisaj); border-radius: 999px; padding: 2px 9px; }
.medij-admin__nova > summary { list-style: none; display: inline-flex; margin-bottom: 12px; }
.medij-admin__nova > summary::-webkit-details-marker { display: none; }
.medij-forma { background: var(--lisaj-svijetli); border: 1px solid var(--linija); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; display: grid; gap: 10px; }
.medij-forma .polje { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; margin: 0; }
.medij-forma input[type=text], .medij-forma input[inputmode=url], .medij-forma input[type=date], .medij-forma textarea { width: 100%; }
.medij-forma__red { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.medij-forma__red > * { flex: 1 1 160px; }
.medij-forma__siroko { flex: 3 1 280px !important; }
.medij-forma__red--dno > .dugme { flex: 0 0 auto; }
.medij-forma__javno { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.medij-forma__slika { flex: 0 0 auto !important; margin: 0; display: grid; gap: 4px; font-size: .85rem; }
.medij-forma__slika img { width: 90px; height: 60px; object-fit: cover; border-radius: 8px; }
.medij-admin__stavka { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--linija); border-radius: 14px; background: var(--bijela); margin-bottom: 10px; }
.medij-admin__stavka--link { grid-template-columns: 46px minmax(0, 1fr) auto; }
.medij-admin__stavka > img, .medij-admin__bez { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--lisaj); display: grid; place-items: center; color: var(--bor); }
.medij-admin__stavka strong { display: block; }
.medij-admin__stavka small { color: var(--siva); }
.medij-admin__stavka p { margin: 4px 0; font-size: .92rem; }
.medij-admin__stavka details summary { cursor: pointer; color: var(--bor); font-weight: 700; font-size: .9rem; }
.medij-admin__stavka details .medij-forma { margin-top: 8px; }
.medij-oznaka { font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #EEE; color: #555; }
.medij-oznaka--da { background: #DDF1E2; color: #1C6234; }
@media (max-width: 600px) { .medij-admin__stavka { grid-template-columns: 1fr; } }

/* Mediji: video materijal */
.medij-videi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.medij-video { background: var(--bijela); border: 1px solid var(--linija); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.medij-video--prvi { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.medij-video__player { position: relative; aspect-ratio: 16 / 9; background: #0F2A1E; overflow: hidden; }
.medij-video__player video, .medij-video__player img, .medij-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; background: #0F2A1E; }
.medij-video__player.igra video { object-fit: contain; background: #000; }
.medij-video__pokreni { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(15, 42, 30, 0) 40%, rgba(15, 42, 30, .55)); }
.medij-video__pokreni span { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--narandzasta); box-shadow: 0 0 0 10px rgba(226, 106, 18, .25), 0 14px 34px rgba(0, 0, 0, .35); transition: transform .2s, box-shadow .2s; }
.medij-video__pokreni svg { width: 38px; height: 38px; margin-left: 5px; }
.medij-video__pokreni:hover span { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(226, 106, 18, .22), 0 14px 34px rgba(0, 0, 0, .35); }
.medij-video:not(.medij-video--prvi) .medij-video__pokreni span { width: 64px; height: 64px; }
.medij-video:not(.medij-video--prvi) .medij-video__pokreni svg { width: 28px; height: 28px; }
.medij-video__player.igra .medij-video__pokreni, .medij-video__player.igra .medij-video__trajanje { display: none; }
.medij-video__trajanje { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.medij-video__tijelo { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.medij-video--prvi .medij-video__tijelo { padding: 28px 30px; }
.medij-video__tijelo time { font-size: .85rem; font-weight: 700; color: var(--narandzasta-tamna); }
.medij-video__tijelo h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.medij-video--prvi .medij-video__tijelo h3 { font-size: 1.6rem; }
.medij-video__tijelo p { color: var(--siva); margin: 0; }
@media (max-width: 860px) { .medij-videi, .medij-video--prvi { grid-template-columns: 1fr; } }
/* admin */
.medij-forma__video { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed #B9C7B4; background: #fff; }
.medij-forma__naslov { margin: 0; font-weight: 700; color: var(--bor); }
.medij-forma select { width: 100%; }
.medij-admin__vid { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; background: #0F2A1E; }
.medij-upoz { color: var(--greska); font-weight: 700; }
.smog-mali { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 0 4px rgba(122,111,155,.25), 0 4px 10px rgba(0,0,0,.25); display: grid; place-items: center; }
.smog-mali svg { width: 24px; height: 24px; }

/* Administracija: Android aplikacija */
.android-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.android-lista li { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--linija); }
.android-lista li span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; flex: none; font-size: .85rem; }
.android-lista li.ok span { background: #DDF1E2; color: #1C6234; }
.android-lista li.ne span { background: #FBE3DE; color: #8A2414; }
.android-lista li.neznano span { background: #EEE; color: #666; }
.android-koraci { display: grid; gap: 10px; padding-left: 22px; }
.android-tabela { margin: 8px 0; border-collapse: collapse; font-size: .92rem; }
.android-tabela td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--linija); vertical-align: top; }
.android-tabela td:first-child { color: var(--siva); white-space: nowrap; }
/* Pravne stranice (privatnost, brisanje računa) */
.pravno__datum { color: var(--siva); font-size: .92rem; }
.pravno__sadrzaj { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.pravno__sadrzaj a { padding: 6px 12px; border-radius: 999px; background: var(--lisaj-svijetli); border: 1px solid var(--linija); font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--bor); }
.pravno__kartice { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pravno__kartice li { padding: 14px 16px; border-radius: 14px; background: var(--lisaj-svijetli); border: 1px solid var(--linija); }
.pravno__kartice strong { display: block; color: var(--bor); }
.pravno h3 { font-size: 1.1rem; margin: 18px 0 6px; }

/* Mediji: "Pisali su o nama" sa sličicama članaka */
.medij-sekcija__broj { font-family: var(--font-tekst); font-weight: 400; font-size: 1.05rem; color: var(--siva); }
.medij-linkovi .medij-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bijela); border: 1px solid var(--linija); transition: border-color .15s, transform .15s, box-shadow .15s; }
.medij-linkovi .medij-link[hidden] { display: none; }
.medij-linkovi .medij-link:hover { border-color: var(--mahovina); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 77, 58, .1); }
.medij-linkovi .medij-link > a { flex: 1; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; transform: none; height: auto; }
.medij-linkovi .medij-link > a:hover { transform: none; box-shadow: none; border: 0; }
.medij-znacka--slika { position: relative; padding: 0; border: 0; overflow: hidden; background: var(--lisaj); cursor: zoom-in; object-fit: cover; box-shadow: 0 0 0 1px var(--linija); }
.medij-znacka--slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medij-znacka--slika span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 42, 30, .55); color: #fff; opacity: 0; transition: opacity .15s; }
.medij-znacka--slika:hover span, .medij-znacka--slika:focus-visible span { opacity: 1; }
.medij-linkovi__vise { text-align: center; margin-top: 16px; }
.medij-clanak { border: 0; padding: 0; border-radius: 18px; width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); background: var(--bijela); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.medij-clanak[open] { display: flex; flex-direction: column; }
.medij-clanak::backdrop { background: rgba(8, 20, 14, .72); }
.medij-clanak__glava { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--linija); }
.medij-clanak__glava strong { flex: 1; font-size: 1rem; line-height: 1.3; }
.medij-clanak__zatvori { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--lisaj-svijetli); font-size: 26px; line-height: 1; cursor: pointer; color: var(--kora); }
.medij-clanak__slika { overflow: auto; background: #E9ECE6; flex: 1; }
.medij-clanak__slika img { display: block; width: 100%; height: auto; }
.medij-clanak__dno { padding: 12px 16px; border-top: 1px solid var(--linija); display: flex; justify-content: flex-end; }

/* Administracija: uređivanje fotografija prijave */
.admin-fotke { margin: 10px 0; border: 1px solid var(--linija); border-radius: 12px; background: #fff; }
.admin-fotke > summary { cursor: pointer; padding: 9px 12px; font-weight: 700; color: var(--bor); display: flex; align-items: center; gap: 6px; }
.admin-fotke > summary small { font-weight: 400; color: var(--siva); }
.admin-fotke[open] > summary { border-bottom: 1px solid var(--linija); }
.admin-fotke__mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 12px; }
.admin-fotke__stavka { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--linija); background: var(--lisaj-svijetli); display: flex; flex-direction: column; }
.admin-fotke__stavka--naslovna { border-color: #E07B1F; box-shadow: 0 0 0 3px rgba(224, 123, 31, .18); }
.admin-fotke__stavka img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.admin-fotke__oznaka { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: #E07B1F; color: #fff; font-size: .75rem; font-weight: 700; }
.admin-fotke__oznaka--siva { background: rgba(0, 0, 0, .55); }
.admin-fotke__stavka figcaption { display: flex; gap: 4px; padding: 6px; flex-wrap: wrap; }
.admin-fotke__stavka figcaption form { flex: 1; }
.admin-fotke__dugme { width: 100%; min-height: 32px; border-radius: 8px; border: 1px solid var(--linija); background: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; color: var(--bor); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.admin-fotke__dugme:hover { background: var(--lisaj); }
.admin-fotke__dugme--opasno { color: var(--greska); }
.admin-fotke__dugme--opasno:hover { background: var(--greska); color: #fff; border-color: var(--greska); }
.admin-fotke__dodaj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 12px 12px; }
.admin-fotke__polje { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; }
.admin-fotke__polje input { font-weight: 400; }
.admin-fotke__cek { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; }
.admin-fotke__podnaslov { margin: 0; padding: 4px 12px 0; font-weight: 700; font-size: .9rem; color: var(--bor); }