/* Zajednički izgled formi (prijava, registracija, podrška, Early Access) — boje i tipografija iz index.html. */
:root{
  --ground:#f2f4f1;
  --surface:#ffffff;
  --surface-2:#e9ece7;
  --line:#d5dad2;
  --line-soft:#e4e8e1;
  --ink:#161a16;
  --ink-2:#414a41;
  --muted:#6d766c;
  --accent:#14584f;
  --accent-ink:#0c3a33;
  --accent-wash:#dceae6;
  --ok:#2f6b4c;
  --ok-wash:#dceadf;
  --warn:#8d5a10;
  --warn-wash:#f2e6cf;
  --crit:#9c2f28;
  --crit-wash:#f3dcda;
  --shadow:0 1px 2px rgba(20,30,20,.06), 0 8px 24px -16px rgba(20,30,20,.25);
  --r:6px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:"IBM Plex Serif", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0e120f;
    --surface:#171c18;
    --surface-2:#1f251f;
    --line:#2e362e;
    --line-soft:#252c25;
    --ink:#e6ebe4;
    --ink-2:#b6c0b4;
    --muted:#8b968a;
    --accent:#63c2b0;
    --accent-ink:#9adbcd;
    --accent-wash:#18332e;
    --ok:#6cbf93;
    --ok-wash:#173024;
    --warn:#d8a75a;
    --warn-wash:#33280f;
    --crit:#e0827a;
    --crit-wash:#331b19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0e120f;
  --surface:#171c18;
  --surface-2:#1f251f;
  --line:#2e362e;
  --line-soft:#252c25;
  --ink:#e6ebe4;
  --ink-2:#b6c0b4;
  --muted:#8b968a;
  --accent:#63c2b0;
  --accent-ink:#9adbcd;
  --accent-wash:#18332e;
  --ok:#6cbf93;
  --ok-wash:#173024;
  --warn:#d8a75a;
  --warn-wash:#33280f;
  --crit:#e0827a;
  --crit-wash:#331b19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

:root{color-scheme:light dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; padding:32px 16px;
}
h1{margin:0 0 4px; font-size:20px; font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent); text-underline-offset:2px}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.brand{display:flex; align-items:baseline; gap:8px; margin-bottom:20px; text-decoration:none; color:var(--ink)}
.brand .mark{font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.06em;
  color:var(--surface); background:var(--accent); padding:3px 7px; border-radius:4px}
.brand .name{font-weight:600; font-size:15px}
.brand .sub{font-size:11px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}

.kartica{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:24px}
.kartica.siroka{max-width:560px}
.uvod{color:var(--muted); margin-bottom:18px}
form{display:flex; flex-direction:column; gap:14px}
.polje{display:flex; flex-direction:column; gap:4px}
.polje label{font-size:12px; font-weight:600; color:var(--ink-2)}
.polje .opc{font-weight:400; color:var(--muted)}
.polje input, .polje textarea{border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:9px 10px; font-size:14px; width:100%}
.polje textarea{min-height:140px; resize:vertical}
.polje input[aria-invalid="true"], .polje textarea[aria-invalid="true"]{border-color:var(--crit)}
.pomoc{font-size:12px; color:var(--muted)}
.greska-polja{font-size:12px; color:var(--crit)}
.greska-polja:empty{display:none}
.lozinka{display:flex; gap:6px}
.lozinka input{flex:1}
.saglasnost{display:flex; gap:8px; align-items:flex-start; font-size:13px}
.saglasnost input{margin-top:3px}

.btn{border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:9px 14px; font-size:14px; font-weight:500; cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
:root[data-theme="dark"] .btn-primary{color:#0c1a17}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-primary{color:#0c1a17} }
.btn-primary:hover{filter:brightness(1.08); background:var(--accent)}
.btn[disabled]{opacity:.6; cursor:progress}

.poruka{border-radius:var(--r); padding:10px 12px; font-size:13px}
.poruka:empty{display:none}
.poruka.greska{background:var(--crit-wash); color:var(--crit)}
.poruka.ok{background:var(--ok-wash); color:var(--ok)}
.poruka.info{background:var(--accent-wash); color:var(--accent-ink)}
.linkovi{display:flex; flex-direction:column; gap:6px; margin-top:18px; font-size:13px}
.registracija{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:14px}
.skriveno{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* Bili style="…" (CSP bez 'unsafe-inline'). */
.odvojeno{margin-top:16px}
.podnaslov{font-size:15px; margin:0 0 6px}
.link-dugme{display:inline-block; text-decoration:none}