/* Advokat AI: vizuelni stil.
   Naslovi su u serifnom pismu (kao pravni dokument), tekst i kontrole u čistom bezserifnom.
   Fontovi su sistemski: ništa se ne učitava sa interneta. */

:root {
  color-scheme: light;
  --mornarska: #14233c;
  --mornarska-tamna: #0c1729;
  --mornarska-blaga: #2c3f5f;
  --tinta: #1d2532;
  --tinta-blaga: #5f6878;
  --tinta-blijeda: #8b93a1;
  --papir: #f6f4ef;
  --karta: #ffffff;
  --linija: #e6e1d6;
  --linija-jaka: #cfc8b9;
  --zlato: #a8823c;
  --zlato-tamno: #86662b;
  --zlato-svijetlo: #f6efdf;
  --plava-svijetla: #edf2f9;
  --uspjeh: #25694b;
  --uspjeh-pozadina: #e7f3ed;
  --greska: #a32a2a;
  --greska-pozadina: #faeae8;
  --upozorenje: #8a5a00;
  --upozorenje-pozadina: #fbf2dc;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dokument: Cambria, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --radijus: 14px;
  --radijus-mali: 9px;
  --sjena: 0 1px 2px rgba(20, 35, 60, .05), 0 6px 20px rgba(20, 35, 60, .05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font: 15.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mornarska-blaga); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--zlato-tamno); }
h1, h2, h3 { font-family: var(--serif); color: var(--mornarska); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: 2.05rem; }
h2 { font-size: 1.32rem; }
h3 { font-size: 1.05rem; margin-top: 1.4em; }
p { margin: 0 0 .8em; }
ul, ol { padding-left: 1.2rem; }
code { background: #f1eee6; padding: .08rem .4rem; border-radius: 5px; font-size: .88em; word-break: break-word; }
:focus-visible { outline: 2px solid var(--zlato); outline-offset: 2px; border-radius: 4px; }

/* ---------- zaglavlje ---------- */
.traka { background: var(--mornarska); color: #fff; border-bottom: 3px solid var(--zlato); }
.traka-unutra {
  max-width: 1160px; margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-family: var(--serif); font-size: 1.28rem; letter-spacing: .01em; }
.logo:hover { color: #fff; }
.logo em { font-style: normal; color: #d9bd83; }
.znak {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d9bd83; border-radius: 8px;
  color: #d9bd83; font-family: var(--serif); font-size: 1.2rem; line-height: 1;
}
.traka nav { display: flex; align-items: center; gap: .2rem .35rem; flex-wrap: wrap; }
.traka nav a, .traka nav button {
  color: rgba(255, 255, 255, .8); text-decoration: none; font: 500 .93rem var(--sans);
  padding: .45rem .8rem; border-radius: 7px; border: 0; background: none; cursor: pointer;
}
.traka nav a:hover, .traka nav button:hover { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: none; }
.traka nav a.aktivan { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 -2px 0 #d9bd83; }
.traka nav form { margin: 0 0 0 .5rem; padding-left: .7rem; border-left: 1px solid rgba(255, 255, 255, .2); }
.demo-traka { background: var(--upozorenje-pozadina); color: var(--upozorenje); text-align: center; font-weight: 600; font-size: .9rem; padding: .45rem 1rem; border-bottom: 1px solid #ecd9a8; }

main { max-width: 1160px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 3.5rem; }
footer { text-align: center; color: var(--tinta-blijeda); font-size: .82rem; padding: 0 1rem 2rem; }

/* ---------- glava stranice ---------- */
.glava { margin-bottom: 1.4rem; }
.glava h1 { margin-bottom: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.meta, .sitno { font-size: .87rem; color: var(--tinta-blaga); font-weight: 400; }
.meta { margin: 0; }
.mrvice { margin: 0 0 .5rem; font-size: .85rem; color: var(--tinta-blijeda); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mrvice a { color: var(--tinta-blaga); text-decoration: none; }
.mrvice a:hover { color: var(--zlato-tamno); text-decoration: underline; }
.uvod { font-size: 1.02rem; color: var(--tinta-blaga); max-width: 62ch; }

/* ---------- kartice i raspored ---------- */
.karta {
  background: var(--karta); border: 1px solid var(--linija); border-radius: var(--radijus);
  padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; box-shadow: var(--sjena);
}
.karta > :last-child { margin-bottom: 0; }
.uska { max-width: 430px; margin: 1.5rem auto; }
.raspored { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.raspored.jednako { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.raspored > .karta, .raspored > aside > .karta:last-child { margin-bottom: 0; }
.raspored + * { margin-top: 1.25rem; }
.unutra { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem 2rem; align-items: start; }
.unutra > * { min-width: 0; }
.pregrada { border-left: 1px solid var(--linija); padding-left: 2rem; }
@media (max-width: 900px) {
  .raspored, .raspored.jednako, .unutra { grid-template-columns: 1fr; }
  .pregrada { border-left: 0; padding-left: 0; border-top: 1px solid var(--linija); padding-top: 1.2rem; }
}

/* ---------- redoslijed koraka ---------- */
.koraci { margin-bottom: 1.5rem; }
.koraci ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.koraci a {
  display: flex; gap: .7rem; align-items: center; height: 100%; padding: .75rem .9rem; text-decoration: none;
  background: var(--karta); border: 1px solid var(--linija); border-radius: var(--radijus-mali); color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
.koraci a:hover { border-color: var(--zlato); box-shadow: var(--sjena); color: var(--tinta); }
.koraci strong { display: block; font-size: .95rem; line-height: 1.25; }
.koraci small { display: block; font-size: .78rem; color: var(--tinta-blaga); line-height: 1.3; }
.broj {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--linija-jaka); color: var(--tinta-blaga); font: 600 .9rem var(--serif); background: #fff;
}
.koraci .trenutni a { border-color: var(--mornarska); box-shadow: 0 0 0 3px var(--plava-svijetla); }
.koraci .trenutni .broj { background: var(--mornarska); border-color: var(--mornarska); color: #fff; }
.koraci .gotov .broj { background: var(--uspjeh); border-color: var(--uspjeh); color: #fff; font-size: 0; }
.koraci .gotov .broj::before { content: "✓"; font: 700 .9rem var(--sans); }
@media (max-width: 820px) { .koraci ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .koraci ol { grid-template-columns: 1fr; } }

.korak-naslov { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; }
.korak-naslov .broj { width: 34px; height: 34px; background: var(--zlato-svijetlo); border-color: #e3d2a8; color: var(--zlato-tamno); font-size: 1rem; }
.korak-opis { color: var(--tinta-blaga); margin: 0 0 1.1rem 2.95rem; max-width: 70ch; }
@media (max-width: 600px) { .korak-opis { margin-left: 0; } }

/* ---------- forme ---------- */
.forma { display: grid; gap: 1rem; }
.forma label, .prilog label.polje { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.dvije-kolone { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .dvije-kolone { grid-template-columns: 1fr; } }
.dugmad { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }

input, select, textarea {
  font: 400 .97rem/1.5 var(--sans); color: var(--tinta); width: 100%;
  padding: .6rem .75rem; border: 1px solid var(--linija-jaka); border-radius: var(--radijus-mali); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #a6acb7; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--mornarska-blaga); box-shadow: 0 0 0 3px var(--plava-svijetla); }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; flex: none; accent-color: var(--mornarska); padding: 0; box-shadow: none; }
fieldset { border: 1px solid var(--linija); border-radius: var(--radijus-mali); padding: .7rem 1rem .9rem; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: .92rem; padding: 0 .35rem; }
.forma label.izbor, label.izbor { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.naziv { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; }

button, .dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 600 .94rem var(--sans); cursor: pointer; text-decoration: none; justify-self: start;
  padding: .6rem 1.15rem; border-radius: var(--radijus-mali); border: 1px solid var(--mornarska);
  background: var(--mornarska); color: #fff; transition: background .15s, border-color .15s, box-shadow .15s;
}
button:hover, .dugme:hover { background: var(--mornarska-tamna); color: #fff; box-shadow: 0 2px 8px rgba(20, 35, 60, .18); }
.dugme.sekundarno, button.sekundarno { background: #fff; color: var(--mornarska); border-color: var(--linija-jaka); }
.dugme.sekundarno:hover, button.sekundarno:hover { background: #fff; color: var(--mornarska); border-color: var(--zlato); box-shadow: var(--sjena); }
button.opasno { background: var(--greska); border-color: var(--greska); }
button.opasno:hover { background: #8a1f1f; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button.link { background: none; border: 0; padding: 0; color: var(--mornarska-blaga); font-weight: 500; text-decoration: underline; box-shadow: none; }
button.link.opasno { color: var(--greska); }
button.link.opasno:hover { background: none; color: #7c1b1b; }
form.u-redu { margin: 0; }

/* ---------- objašnjenja (prelazak mišem) ---------- */
.pomoc {
  display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linija-jaka); background: #fff; color: var(--tinta-blaga);
  font: 700 .68rem/1 var(--sans); cursor: help; box-shadow: none; vertical-align: middle;
}
.pomoc:hover, [data-pomoc]:hover > .pomoc { border-color: var(--zlato); color: var(--zlato-tamno); background: var(--zlato-svijetlo); box-shadow: none; }
.naziv[data-pomoc], .oznaka[data-pomoc] { cursor: help; }
.balon {
  position: fixed; z-index: 1000; max-width: min(340px, calc(100vw - 16px)); padding: .75rem .9rem;
  background: var(--mornarska-tamna); color: #f4f1ea; border-radius: 10px; border-top: 2px solid #d9bd83;
  font: 400 .87rem/1.5 var(--sans); box-shadow: 0 10px 30px rgba(12, 23, 41, .28); pointer-events: none;
}
.balon[hidden] { display: none; }

/* ---------- poruke i stanja ---------- */
.poruka { padding: .8rem 1rem; border-radius: var(--radijus-mali); margin-bottom: 1.1rem; border: 1px solid; font-size: .95rem; }
.poruka.uspjeh { background: var(--uspjeh-pozadina); border-color: #bcdccb; color: #1c4f39; }
.poruka.greska { background: var(--greska-pozadina); border-color: #ecc4c0; color: #7c1f1f; }
.poruka.info { background: var(--plava-svijetla); border-color: #cfdcee; color: #253a5c; }
.greska-tekst { color: var(--greska); }
.prazno { color: var(--tinta-blaga); background: #faf8f3; border: 1px dashed var(--linija-jaka); border-radius: var(--radijus-mali); padding: .9rem 1rem; }
.u-toku { margin: 0; display: flex; gap: .8rem; align-items: center; }
.u-toku::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--linija); border-top-color: var(--zlato); animation: vrtnja .9s linear infinite;
}
@keyframes vrtnja { to { transform: rotate(360deg); } }

.oznaka {
  display: inline-flex; align-items: center; gap: .4rem; font: 600 .76rem var(--sans); letter-spacing: .01em;
  padding: .2rem .6rem; border-radius: 999px; background: #efece4; color: var(--tinta-blaga); white-space: nowrap; vertical-align: middle;
}
.oznaka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.oznaka.spreman, .oznaka.odobren { background: var(--uspjeh-pozadina); color: var(--uspjeh); }
.oznaka.greska { background: var(--greska-pozadina); color: var(--greska); }
.oznaka.obrada { background: var(--upozorenje-pozadina); color: var(--upozorenje); }
.oznaka.obrada::before { animation: puls 1.1s infinite; }
.oznaka.nacrt { background: var(--plava-svijetla); color: var(--mornarska-blaga); }
@keyframes puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .oznaka.obrada::before, .u-toku::before, .snimac.snima .indikator { animation: none; } html { scroll-behavior: auto; } }

/* ---------- liste ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linija); }
.lista li:last-child { border-bottom: 0; }
.lista li .sitno { flex-basis: 100%; }
.lista a { font-weight: 500; }

.predmeti { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.predmeti a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; text-decoration: none;
  border: 1px solid var(--linija); border-radius: var(--radijus-mali); background: #fff; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
.predmeti a:hover { border-color: var(--zlato); box-shadow: var(--sjena); }
.predmeti strong { display: block; font: 600 1.08rem var(--serif); color: var(--mornarska); }
.predmeti .strelica { color: var(--zlato); font-size: 1.2rem; }

.vodic { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: vodic; }
.vodic li { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.vodic li::before {
  counter-increment: vodic; content: counter(vodic); flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--zlato-svijetlo); border: 1px solid #e3d2a8;
  color: var(--zlato-tamno); font: 600 .85rem var(--serif);
}

.vrste { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .55rem; }
.vrste a {
  display: block; height: 100%; padding: .75rem .85rem; text-decoration: none; border: 1px solid var(--linija);
  border-radius: var(--radijus-mali); background: #fff; color: var(--tinta); transition: border-color .15s, box-shadow .15s;
}
.vrste a:hover { border-color: var(--zlato); box-shadow: var(--sjena); }
.vrste strong { display: block; font: 600 1rem var(--serif); color: var(--mornarska); }
.vrste small { display: block; font-size: .8rem; color: var(--tinta-blaga); line-height: 1.35; margin-top: .15rem; }

.tabela { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .94rem; }
.tabela th, .tabela td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linija); vertical-align: top; }
.tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-blijeda); font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }

/* ---------- dokumenti i prilog ---------- */
.dokumenti { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.dokumenti li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .2rem .9rem; align-items: center;
  padding: .7rem .9rem; border: 1px solid var(--linija); border-radius: var(--radijus-mali); background: #fff;
}
.dokumenti .ime { font-weight: 600; overflow-wrap: anywhere; }
.dokumenti a.ime { color: var(--mornarska); text-decoration: none; }
.dokumenti a.ime:hover { color: var(--zlato-tamno); text-decoration: underline; }
.dokumenti .sitno { display: block; }
.vrsta-znak {
  display: inline-grid; place-items: center; width: 42px; height: 50px; border-radius: 6px 12px 6px 6px;
  font: 700 .62rem var(--sans); letter-spacing: .05em; color: #fff; background: var(--tinta-blaga);
}
.vrsta-znak.pdf { background: #a8433a; }
.vrsta-znak.docx { background: #2f5d9b; }
.vrsta-znak.slika { background: #3f7a5c; }
.vrsta-znak.razgovor, .vrsta-znak.zvuk { background: var(--zlato); }
@media (max-width: 560px) {
  .dokumenti li { grid-template-columns: auto minmax(0, 1fr); }
  .dokumenti li > :nth-child(n+3) { grid-column: 2; justify-self: start; }
}

.prilog { display: grid; gap: .8rem; }
.zona {
  display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 1.6rem 1rem;
  border: 1.5px dashed var(--linija-jaka); border-radius: var(--radijus); background: #fbfaf6;
  transition: border-color .15s, background .15s;
}
.zona.iznad { border-color: var(--zlato); background: var(--zlato-svijetlo); }
.zona svg { width: 38px; height: 38px; color: var(--zlato); }
.zona p { margin: 0; }
.zona .glavno { font-size: 1.02rem; }
.zona label.biraj { color: var(--mornarska-blaga); font-weight: 600; text-decoration: underline; cursor: pointer; display: inline; }
.js .zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.izabrani { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.izabrani li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center;
  padding: .45rem .6rem .45rem .5rem; border: 1px solid var(--linija); border-radius: var(--radijus-mali); background: #fff;
}
.izabrani .vrsta-znak { width: 32px; height: 38px; font-size: .52rem; }
.izabrani .ime { font-weight: 600; font-size: .93rem; overflow-wrap: anywhere; }
.izabrani .prevelik .sitno { color: var(--greska); }
.izabrani button { background: none; border: 0; color: var(--tinta-blijeda); font-size: 1.15rem; padding: .1rem .45rem; box-shadow: none; }
.izabrani button:hover { background: var(--greska-pozadina); color: var(--greska); }
.slanje { display: grid; gap: .3rem; }
progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: #ece8dd; accent-color: var(--zlato); }
progress::-webkit-progress-bar { background: #ece8dd; }
progress::-webkit-progress-value { background: var(--zlato); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--zlato); }
.napomena-privatnost { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; color: var(--tinta-blaga); margin: 0; }
.napomena-privatnost svg { flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--uspjeh); }

/* ---------- režimi rada ---------- */
.rezimi { display: grid; gap: .5rem; border: 0; padding: 0; }
.rezimi legend { padding: 0; margin-bottom: .45rem; }
.forma label.rezim, label.rezim {
  display: flex; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--linija); border-radius: var(--radijus-mali);
  background: #fff; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s;
}
label.rezim:hover { border-color: var(--zlato); }
label.rezim:has(input:checked) { border-color: var(--mornarska); background: var(--plava-svijetla); }
.rezim .cijena { float: right; font-weight: 600; color: var(--mornarska); margin-left: .6rem; }
.rezim > span { flex: 1; }

/* ---------- analiza ---------- */
.tekst { font: 1.06rem/1.7 var(--dokument); padding: 2rem clamp(1.2rem, 4vw, 2.6rem); }
.tekst > * { max-width: 74ch; }
.tekst h2 { margin-top: 1.6em; font-size: 1.2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--linija); }
.tekst h2:first-child { margin-top: 0; }
a.izvor {
  font: 600 .7rem var(--sans); vertical-align: super; text-decoration: none; margin-left: .15em; padding: .05rem .3rem;
  border-radius: 5px; background: var(--zlato-svijetlo); color: var(--zlato-tamno);
}
a.izvor:hover { background: var(--zlato); color: #fff; }
.izvori { padding-left: 1.4rem; }
.izvori li { margin-bottom: .9rem; padding: .3rem .5rem; border-radius: 6px; }
.izvori blockquote { margin: .3rem 0 0; padding-left: .8rem; border-left: 3px solid var(--zlato-svijetlo); color: var(--tinta-blaga); font: .95rem/1.55 var(--dokument); }
.izvori li:target { background: var(--zlato-svijetlo); }
.stranica pre { white-space: pre-wrap; font: 1rem/1.65 var(--dokument); margin: 0; }
.stranica h2 { font: 600 .78rem var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-blijeda); }

/* ---------- nacrt ---------- */
.sekcija { display: grid; gap: .5rem; background: #fdfcf9; }
.sekcija.nova { border-style: dashed; background: #fff; }
.naslov-sekcije { font: 600 1.02rem var(--serif); color: var(--mornarska); }
.sekcija textarea { font: 1.02rem/1.65 var(--dokument); }
.odobrenje { display: grid; gap: .65rem; margin-top: .4rem; background: var(--zlato-svijetlo); border-color: #e3d2a8; }
.upozorenja { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .93rem; }
.upozorenja > li { padding: .65rem .8rem; border-radius: var(--radijus-mali); border-left: 4px solid; overflow-wrap: anywhere; }
.upozorenja .kriticno { background: var(--greska-pozadina); border-color: var(--greska); }
.upozorenja .upozorenje { background: var(--upozorenje-pozadina); border-color: var(--upozorenje); }
.upozorenja .provjera { background: var(--plava-svijetla); border-color: var(--mornarska-blaga); }
.upozorenja .stavke { margin: .4rem 0 0; padding-left: 1.1rem; }
.upozorenja .stavke code { white-space: normal; background: rgba(255, 255, 255, .65); }
details > summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
details[open] > summary { margin-bottom: .9rem; }
.opasna-zona { box-shadow: none; background: transparent; border-style: dashed; }
.opasna-zona summary { color: var(--greska); margin: 0; font-size: .92rem; }
.opasna-zona .forma { margin-top: 1rem; }

/* ---------- prijava ---------- */
.prijava-glava { text-align: center; margin: 2rem 0 0; }
.prijava-glava .znak { width: 52px; height: 52px; font-size: 1.8rem; color: var(--zlato); border-color: var(--zlato); margin-bottom: .6rem; }
.prijava-glava h1 { margin-bottom: .2rem; }
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { max-width: 220px; height: auto; }

/* ---------- sudska praksa ---------- */
.pogodak { flex-direction: column; align-items: flex-start !important; }
.pogodak a { font: 600 1.08rem var(--serif); color: var(--mornarska); }
.isjecak { font: .96rem/1.55 var(--dokument); color: var(--tinta); border-left: 3px solid var(--zlato-svijetlo); padding-left: .7rem; }

/* ---------- razgovor ---------- */
.snimac-traka { display: flex; align-items: center; gap: .9rem; margin: .9rem 0 1.1rem; }
.snimac .indikator { width: 14px; height: 14px; border-radius: 50%; background: var(--linija-jaka); }
.snimac.snima .indikator { background: #c00000; animation: puls 1.2s infinite; }
.snimac .vrijeme { font: 600 2rem var(--serif); font-variant-numeric: tabular-nums; color: var(--mornarska); }
.transkript .segment { display: grid; gap: .35rem; padding: .6rem; border-radius: var(--radijus-mali); border: 1px solid transparent; }
.transkript .segment.za-provjeru { background: var(--upozorenje-pozadina); border-color: #ecd9a8; }
.za-provjeru-primjer { background: var(--upozorenje-pozadina); padding: 0 .3rem; border-radius: 4px; }
.transkript textarea { font: 1rem/1.6 var(--dokument); }
.segment-glava { display: flex; gap: .6rem; align-items: center; }
.segment-glava select { width: auto; padding: .25rem .5rem; font-size: .88rem; }

@media (max-width: 640px) {
  main { padding-top: 1.2rem; }
  h1 { font-size: 1.65rem; }
  .karta { padding: 1.15rem 1.1rem; }
  .traka nav { width: 100%; }
  .traka nav form { margin-left: auto; }
  .dugmad > * { flex: 1 1 auto; }
}

/* sitnice */
.glava .dugmad { margin-top: .9rem; }
p.dugmad { margin-bottom: 1.1rem; }
.pretraga button { justify-self: start; }
.lista li > .oznaka { margin-left: auto; }
.prilog h2 { margin-bottom: 0; }
.karta.forma > h2 { margin-bottom: 0; }

/* ---------- masovni nacrti (serije) ---------- */
.upozorenje-kutija { background: var(--zlato-svijetlo); border-color: #e8d9b3; }
.greska-kutija { background: var(--greska-pozadina); border-color: #e9c3bf; }
.greska-kutija h2 { color: var(--greska); }
.poruka ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.statistika { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1.2rem; }
@media (max-width: 640px) { .statistika { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plocica { border-radius: var(--radijus); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; cursor: help; }
.plocica strong { font: 600 1.9rem var(--serif); line-height: 1; }
.plocica span { font-size: .87rem; }
.plocica.spreman { background: var(--uspjeh-pozadina); color: var(--uspjeh); }
.plocica.obrada { background: var(--upozorenje-pozadina); color: var(--upozorenje); }
.plocica.nacrt { background: var(--plava-svijetla); color: var(--mornarska-blaga); }
.plocica.greska { background: var(--greska-pozadina); color: var(--greska); }
.tabela-omot { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela th { text-align: left; font-weight: 600; color: var(--tinta-blaga); border-bottom: 2px solid var(--linija-jaka); padding: .55rem .6rem; white-space: nowrap; }
.tabela td { padding: .55rem .6rem; border-bottom: 1px solid var(--linija); vertical-align: top; }
.tabela .broj-desno { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.red-greska td { background: #fdf5f4; }
.tabela tr.red-izdvojeno td { background: #f5f8fc; }
.tabela tr.red-upozorenje td { background: #fffaf0; }
.uzorak-pisma { font-family: var(--dokument); font-size: 1rem; background: #fcfbf8; border: 1px solid var(--linija); border-radius: var(--radijus-mali); padding: 1.1rem 1.3rem; }
.uzorak-pisma p { margin: 0 0 .8rem; text-align: justify; }
.kvacice { list-style: none; padding: 0; margin: 0; }
.kvacice li { padding: .35rem 0 .35rem 1.8rem; position: relative; }
.kvacice li::before { content: "✓"; position: absolute; left: 0; color: var(--uspjeh); font-weight: 700; }
.koraci-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.koraci-lista li { display: flex; gap: .9rem; align-items: flex-start; }
.koraci-lista p { margin: .15rem 0 0; color: var(--tinta-blaga); }
.da-ne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
@media (max-width: 760px) { .da-ne { grid-template-columns: 1fr; } }
.da-ne .karta { margin-bottom: 0; }
.da-ne ul { margin: 0; padding-left: 1.2rem; }
.da-ne li { margin: .35rem 0; }
.da { border-top: 4px solid var(--uspjeh); }
.ne { border-top: 4px solid var(--greska); }
.da h2 { color: var(--uspjeh); }
.ne h2 { color: var(--greska); }
.oznake-lista li > .oznaka { margin-left: 0; min-width: 11rem; justify-content: flex-start; }
.oznake-lista li .sitno { flex: 1 1 18rem; }
.lozinka { font-size: 1.15rem; letter-spacing: .03em; user-select: all; background: #fff; padding: .1rem .4rem; border-radius: 6px; }
.mapiranje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem 1.2rem; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--linija); }
.mapiranje:last-of-type { border-bottom: 0; }
.mapiranje .oznaka-polja { padding-top: .45rem; font-weight: 500; }
.mapiranje .izbori { display: grid; gap: .4rem; }
@media (max-width: 700px) { .mapiranje { grid-template-columns: 1fr; } }
input[readonly], textarea[readonly] { background: #f3f1ea; color: var(--tinta-blaga); }

/* Tabelarni pregled dokumenata */
.vidljivo-samo-citacu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dugme.malo, button.malo { padding: .4rem .8rem; font-size: .88rem; }
.dokumenti-izbor { border: 0; padding: 0; display: grid; gap: .35rem; max-height: 22rem; overflow-y: auto; }
.dokumenti-izbor label.izbor { align-items: center; }
.dokumenti-izbor .vrsta-znak { width: 34px; height: 20px; border-radius: 4px; font-size: .55rem; flex: none; }
.procjena-pregleda { font-weight: 600; color: var(--mornarska); margin: .4rem 0 0; }
.napredak { width: 100%; height: .6rem; margin-top: .8rem; accent-color: var(--zlato); }
.pregled-tabela th, .pregled-tabela td { min-width: 13rem; }
.pregled-tabela tbody th { font-weight: 600; font-size: .93rem; text-transform: none; letter-spacing: 0; color: var(--tinta); white-space: normal; border-bottom: 1px solid var(--linija); padding: .55rem .6rem; vertical-align: top; text-align: left; min-width: 11rem; }
.pregled-tabela thead th { white-space: normal; text-transform: none; letter-spacing: 0; font-size: .86rem; }
.pregled-tabela td.bez-odgovora { color: var(--tinta-blijeda); font-style: italic; }
.izvor-str { display: inline-block; margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--zlato-tamno); text-decoration: none; border-bottom: 1px dotted currentColor; }
.izvor-str:hover { color: var(--zlato); }
.pregled-tabela .oznaka { margin-top: .3rem; cursor: help; }

/* Hronologija događaja */
.hronologija-tabela td.datum { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mornarska); width: 8rem; }
.hronologija-tabela td.izvor { width: 15rem; font-size: .88rem; overflow-wrap: anywhere; }
.hronologija-tabela tr.godina th { font: 600 1.05rem var(--serif); color: var(--zlato-tamno); text-transform: none; letter-spacing: 0; padding-top: 1.1rem; border-bottom: 1px solid var(--linija-jaka); }
.hronologija-tabela .oznaka { margin-top: .3rem; cursor: help; }

/* Početna i ekrani sa ikonicama (kao na telefonu) */
.traka-desno { display: flex; align-items: center; gap: .35rem; }
.traka-dugme { display: inline-flex; align-items: center; gap: .45rem; color: #e8ecf3; text-decoration: none; font: 500 .95rem var(--sans);
  padding: .45rem .8rem; border-radius: 10px; background: transparent; border: 0; cursor: pointer; }
.traka-dugme:hover { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; }
.traka-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.traka-desno form { margin: 0; }
.traka-ime { color: #c9d1de; font-size: .9rem; padding: 0 .4rem; }
@media (max-width: 560px) { .traka-ime, .traka-dugme .traka-tekst { display: none; } }

.pozdrav { margin-bottom: .2rem; }
.aplikacije { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: grid; gap: 1.6rem .8rem;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.aplikacija { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; text-decoration: none;
  color: var(--tinta); padding: .7rem .35rem .8rem; border-radius: 18px; height: 100%; }
.aplikacija:hover, .aplikacija:focus-visible { background: rgba(20, 35, 60, .05); color: var(--tinta); }
.ikona-app { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 23px;
  color: #f3e3bd; box-shadow: 0 8px 18px rgba(12, 23, 41, .2), inset 0 1px 0 rgba(255, 255, 255, .15); transition: transform .15s ease; }
.ikona-app svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aplikacija:hover .ikona-app { transform: translateY(-3px); }
.ikona-app.plava { background: linear-gradient(155deg, #34507c, #14233c); }
.ikona-app.zelena { background: linear-gradient(155deg, #3c8064, #1d4c38); }
.ikona-app.bordo { background: linear-gradient(155deg, #9a4a4a, #5c2323); }
.ikona-app.zlatna { background: linear-gradient(155deg, #c49a4c, #86662b); color: #fff8e8; }
.ikona-app.siva { background: linear-gradient(155deg, #6c7686, #3a4250); }
.ikona-app.ljubicasta { background: linear-gradient(155deg, #6a5a92, #392d5c); }
.ikona-app.tirkiz { background: linear-gradient(155deg, #3d8590, #1d4d55); }
.ime-app { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.opis-app { font-size: .8rem; color: var(--tinta-blaga); line-height: 1.35; max-width: 15rem; }
.znacka { position: absolute; top: -7px; right: -9px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: var(--zlato); color: #fff; font: 700 .74rem var(--sans); display: grid; place-items: center; border: 2px solid var(--papir); }
.znacka.obrada { background: #c07a00; }
.znacka.greska { background: var(--greska); }
@media (max-width: 520px) {
  .aplikacije { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem .3rem; }
  .ikona-app { width: 62px; height: 62px; border-radius: 18px; }
  .ikona-app svg { width: 30px; height: 30px; }
  .ime-app { font-size: .88rem; }
  .opis-app { display: none; }
}
.nedavni { max-width: 42rem; }
.pomoc-lista { display: grid; gap: .9rem; list-style: none; padding: 0; margin: 0; }
.pomoc-lista li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; align-items: start; }
.pomoc-lista .ikona-app { width: 56px; height: 56px; border-radius: 16px; }
.pomoc-lista .ikona-app svg { width: 28px; height: 28px; }
.pomoc-lista h3 { margin: .2rem 0 .25rem; }
.pomoc-lista p { margin: 0; color: var(--tinta-blaga); }
.karta > .korak-opis:first-child { padding-left: 0; margin-left: 0; }

/* Dnevnik aktivnosti */
.filter-dnevnika { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: end; }
.filter-dnevnika label { flex: 1 1 14rem; }
.dnevnik-tabela td.vrijeme { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta-blaga); }
.oznaka-dnevnika { display: inline-block; padding: .15rem .55rem; border-radius: 7px; font-size: .86rem; background: var(--plava-svijetla); color: var(--mornarska-blaga); }
.oznaka-dnevnika.preuzimanje { background: var(--zlato-svijetlo); color: var(--zlato-tamno); }
.oznaka-dnevnika.brisanje, .oznaka-dnevnika.upozorenje { background: var(--greska-pozadina); color: var(--greska); }
.oznaka-dnevnika.odobrenje { background: var(--uspjeh-pozadina); color: var(--uspjeh); }
.oznaka-dnevnika.prijava { background: #eef0f3; color: var(--tinta-blaga); }
.ikona-app.indigo { background: linear-gradient(155deg, #4a5fa8, #24306a); }

/* Pitanja o predmetu (razgovor sa AI-jem) */
.razgovor-ai { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.mjehur { max-width: 52rem; border-radius: 16px; padding: .85rem 1.1rem; }
.mjehur.advokat { justify-self: end; background: var(--mornarska); color: #fff; border-bottom-right-radius: 4px; max-width: 40rem; }
.mjehur.advokat p { margin: 0; white-space: pre-wrap; }
.mjehur.ai { justify-self: start; background: var(--karta); border: 1px solid var(--linija); border-bottom-left-radius: 4px; box-shadow: var(--sjena); }
.mjehur .ko { display: block; font-size: .76rem; opacity: .75; margin-bottom: .25rem; }
.mjehur.ai p:last-child, .mjehur.ai ul:last-child { margin-bottom: 0; }
.mjehur.ai details { margin-top: .6rem; font-size: .88rem; }
.mjehur.ai details summary { cursor: pointer; color: var(--tinta-blaga); }
.mjehur.ai .izvori { margin: .5rem 0 0; }
.mjehur .meta-odgovora { display: block; margin-top: .5rem; font-size: .76rem; color: var(--tinta-blijeda); }
.prijedlozi { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.pitaj-red { display: flex; gap: .7rem; align-items: end; flex-wrap: wrap; }
.pitaj-red label { flex: 1 1 12rem; }
.ikona-app.narandzasta { background: linear-gradient(155deg, #c27a3e, #7a4218); }

/* Pretraga */
.brza-pretraga { display: flex; gap: .6rem; margin: 0 0 1.4rem; max-width: 46rem; }
.brza-pretraga input { flex: 1; font-size: 1.02rem; }
.pogoci-pretrage { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.pogoci-pretrage li { border-bottom: 1px solid var(--linija); padding-bottom: .8rem; }
.pogoci-pretrage li:last-child { border-bottom: 0; }
.pogoci-pretrage .sitno { margin: 0 0 .25rem; }
.isjecak-pretrage { margin: 0; font-family: var(--dokument); }
.isjecak-pretrage mark { background: var(--zlato-svijetlo); color: var(--tinta); padding: 0 .1rem; border-radius: 3px; box-shadow: inset 0 -2px 0 #e3c98c; }

/* Poređenje verzija */
.poredjenje-tekst { font-family: var(--dokument); }
.poredjenje-tekst p { margin: 0 0 .5rem; }
.isti-pasusi .rasklopljeno { display: none; color: var(--tinta-blaga); }
.poredjenje-tekst.sve .isti-pasusi .rasklopljeno { display: block; }
.poredjenje-tekst.sve .isti-pasusi .skupljeno { display: none; }
.isti-pasusi .skupljeno { font-family: var(--sans); text-align: center; color: var(--tinta-blijeda); margin: .3rem 0 .8rem; }
.izmjena { border-left: 4px solid var(--linija-jaka); padding: .5rem .9rem; margin: 0 0 1rem; border-radius: 0 10px 10px 0; background: #fbfaf7; }
.izmjena.izmijenjeno { border-left-color: var(--upozorenje); }
.izmjena.dodato { border-left-color: var(--uspjeh); }
.izmjena.obrisano { border-left-color: var(--greska); }
.oznaka-izmjene { font-family: var(--sans); margin: 0 0 .3rem !important; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.izmjena ins { background: #dff1e6; color: #1d5c3d; text-decoration: underline; text-decoration-color: #2f8a5a; }
.izmjena del { background: #fae3e0; color: #8c2323; }
.ai-objasnjenje { font-family: var(--sans); font-size: .9rem; background: var(--plava-svijetla); border-radius: 8px; padding: .5rem .75rem; margin-top: .4rem; }
.ai-objasnjenje p { margin: 0 0 .25rem; }
.rizik { font-size: .76rem; font-weight: 700; padding: .08rem .5rem; border-radius: 999px; cursor: help; }
.rizik.nizak { background: var(--uspjeh-pozadina); color: var(--uspjeh); }
.rizik.srednji { background: var(--upozorenje-pozadina); color: var(--upozorenje); }
.rizik.visok { background: var(--greska-pozadina); color: var(--greska); }

/* Šabloni */
.sablon-tekst { font-family: var(--dokument); font-size: .92rem; max-height: 32rem; overflow-y: auto; }
.sablon-tekst p { margin: 0 0 .45rem; }
.polje-sablona { background: var(--plava-svijetla); color: var(--mornarska); border: 1px dashed var(--mornarska-blaga); border-radius: 5px; padding: 0 .3rem; font-family: var(--sans); font-size: .82rem; white-space: nowrap; }
.dodaj-polje { margin-top: 1rem; }

/* Prevod */
.prevod-tabela td { width: 50%; font-family: var(--dokument); font-size: .92rem; }

/* Hronologija kao vremenska linija */
.prikaz-izbor .aktivno { border-color: var(--mornarska); background: var(--plava-svijetla); }
.godina-linije { font: 600 1.15rem var(--serif); color: var(--zlato-tamno); margin: .6rem 0 .4rem; }
.linija { list-style: none; margin: 0 0 1rem; padding: 0 0 0 1.4rem; border-left: 2px solid var(--linija-jaka); }
.linija .tacka { position: relative; margin: 0 0 1rem; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; }
.linija .tacka::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .35rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--mornarska); border: 2px solid var(--papir); }
.linija .tacka.provjeriti::before { background: var(--upozorenje); }
.datum-linije { font-weight: 700; color: var(--mornarska); font-variant-numeric: tabular-nums; }
.kartica-linije { background: #fbfaf7; border: 1px solid var(--linija); border-radius: 10px; padding: .5rem .75rem; }
.kartica-linije p { margin: 0 0 .2rem; }
@media (max-width: 560px) { .linija .tacka { grid-template-columns: 1fr; gap: .2rem; } }
.drive-red { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 0; }
.forma .puna-sirina { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }