:root {
  --pozadina: #f5f7fa; --kartica: #ffffff; --tekst: #17212b; --pomocni: #55626f; --rub: #b9c3ce;
  --naglasak: #0b5cad; --naglasak-tekst: #ffffff; --greska: #a40e26; --uspjeh: #0d6b3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pozadina: #10151b; --kartica: #1a222b; --tekst: #e8eef4; --pomocni: #a3b0bd; --rub: #3a4654;
    --naglasak: #5aa9ff; --naglasak-tekst: #06121f; --greska: #ff8a9b; --uspjeh: #62d394;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pozadina); color: var(--tekst); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 12px; }
form { background: var(--kartica); border: 1px solid var(--rub); border-radius: 14px; padding: 16px; }
form[hidden] { display: none; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
input, textarea { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--rub); background: var(--pozadina); color: var(--tekst); font: inherit; }
input:focus, textarea:focus, button:focus-visible { outline: 3px solid var(--naglasak); outline-offset: 1px; }
.dva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .dva { grid-template-columns: 1fr; } }
.pomoc { color: var(--pomocni); margin: 4px 0; font-size: 0.95rem; }
.gumb { margin-top: 18px; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--naglasak); color: var(--naglasak-tekst); font: inherit; font-weight: 700; cursor: pointer; }
.gumb[disabled] { opacity: 0.6; cursor: progress; }
.poruka { margin: 14px 0; min-height: 1.4em; font-weight: 600; }
.poruka.greska { color: var(--greska); }
.poruka.uspjeh { color: var(--uspjeh); }
.poruka.info { color: var(--pomocni); }
h2 { font-size: 1.15rem; margin: 4px 0 8px; }
h3 { font-size: 1.05rem; margin: 0 0 4px; }
.kartica { background: var(--kartica); border: 1px solid var(--rub); border-radius: 14px; padding: 14px; margin: 10px 0; }
.kartica p { margin: 4px 0; }
.kartica .gumb { width: auto; margin-top: 8px; padding: 10px 16px; }
.gumb-drugi { background: transparent; color: var(--tekst); border: 1px solid var(--rub); margin-left: 8px; width: auto; padding: 14px 18px; }
.medu { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.otisak-kod { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; word-break: break-all; display: inline-block; margin-top: 2px; }
.sitno { color: var(--pomocni); font-size: 0.9rem; }

/* oglasnik: cijena na kartici vitrine */
.cijena { font-size: 1.3rem; font-weight: 700; margin: .15rem 0; }