/* Portal suvlasnika – isti izgled kao odobreni prototip */
:root{
  --bg:#edf1f2; --povrsina:#ffffff; --povrsina2:#f6f8f8; --tekst:#16232b; --siva:#5d6d76; --rub:#d5dde0;
  --more:#0d5b76; --more-meko:#dcebf0; --dug:#b4520f; --dug-meko:#f8e8db; --plus:#1f7a4c; --plus-meko:#dcf0e5; --hitno:#b3261e;
  --f-tekst:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --r:14px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1619; --povrsina:#172126; --povrsina2:#1c282e; --tekst:#e4ecef; --siva:#94a6ae; --rub:#2b3a41;
  --more:#5fb3d0; --more-meko:#16323c; --dug:#f0a05e; --dug-meko:#3a2616; --plus:#5cc993; --plus-meko:#16301f; --hitno:#ff8a80; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tekst);font:15px/1.5 var(--f-tekst)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}h1{font-size:1.5rem}h2{font-size:1.15rem}
a{color:var(--more)}
.num,td.b{font-variant-numeric:tabular-nums}
.oznaka{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--siva);font-weight:600}
.mali{font-size:.85rem;color:var(--siva)}
.traka{position:sticky;top:0;z-index:5;background:var(--povrsina);border-bottom:1px solid var(--rub);padding:10px max(16px,env(safe-area-inset-right));
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.traka .logo{font-weight:700;text-decoration:none;color:var(--tekst)}
.traka nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.traka nav a{text-decoration:none;padding:6px 10px;border-radius:8px;color:var(--siva);font-weight:600;font-size:.9rem}
.traka nav a:hover{background:var(--more-meko);color:var(--more)}
main{max-width:760px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}
footer{text-align:center;font-size:.8rem;color:var(--siva);padding:0 16px 24px}
.kartica{background:var(--povrsina);border:1px solid var(--rub);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.red{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.razmak{justify-content:space-between}
.gumb{display:inline-block;border:0;background:var(--more);color:#fff;border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.gumb.sporedni{background:var(--povrsina2);color:var(--tekst);border:1px solid var(--rub)}
.gumb.mali{padding:6px 10px;font-size:.85rem}
.polje{width:100%;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--rub);background:var(--povrsina2);color:var(--tekst)}
textarea.polje{min-height:110px}
.cip{display:inline-flex;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600}
.cip.dug{background:var(--dug-meko);color:var(--dug)}.cip.plus{background:var(--plus-meko);color:var(--plus)}.cip.info{background:var(--more-meko);color:var(--more)}
.saldo{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:end}
.saldo .iznos{font-size:2.2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tablica{overflow-x:auto;border:1px solid var(--rub);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:430px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--rub)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--siva);background:var(--povrsina2)}
td.b,th.b{text-align:right}tr:last-child td{border-bottom:0}
.stavka{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px dashed var(--rub);align-items:center}
.stavka:last-child{border-bottom:0}
.hitni{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.hitni .br{font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;text-decoration:none}
.hitni .br.hitno{color:var(--hitno)}
.mjerac{grid-column:1 / -1;height:10px;border-radius:6px;background:var(--povrsina2);overflow:hidden;border:1px solid var(--rub)}
.mjerac i{display:block;height:100%;background:var(--more)}
.trosak{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;font-size:.9rem}
.obavijest{border-left:4px solid var(--more);padding-left:12px}
.poruka{padding:10px 12px;border-radius:10px;background:var(--more-meko);color:var(--more)}
.poruka.greska{background:var(--dug-meko);color:var(--dug)}
.prijava{max-width:420px;margin:8vh auto 0}