/* Prijava (izdanje 36): moderna stranica za prijavu. Pozadinska slika ostaje od škole (css/style1.css škole se ne dira);
   preko nje tamni prijelaz da se kartica i tekst dobro vide. Na mobitelu je kartica dolje (vidi se slika škole),
   na računalu i tabletu u sredini (izdanje 38). */
:root { --prj-navy: #1f3b57; --prj-plava: #1f6feb; --prj-plava-t: #1a5fd0; --prj-tekst: #0f172a; --prj-siva: #475569; --prj-rub: #cbd5e1; --prj-zuta: #ffc107; }
html.login_page, html.login_page body { height: auto; min-height: 100%; }
html.login_page { overflow: auto; }
body.prj { margin: 0 !important; max-width: none !important; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--prj-tekst); background-color: #12304c; background-attachment: fixed; -webkit-text-size-adjust: 100%; }
body.prj::before { content: ""; position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 25, 45, 0) 25%, rgba(10, 25, 45, .55) 70%, rgba(10, 25, 45, .8) 100%); }
.prj-okvir { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.prj-kartica { width: 100%; max-width: 400px; box-sizing: border-box; background: #fff; border-radius: 22px; padding: 26px 24px 20px; box-shadow: 0 20px 50px rgba(5, 15, 30, .35), 0 2px 6px rgba(5, 15, 30, .12); }
.prj-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.prj-znak { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.prj-naziv { min-width: 0; }
.prj-naziv h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 750; color: var(--prj-navy); letter-spacing: -.01em; overflow-wrap: anywhere; }
.prj-naziv p { margin: 3px 0 0; font-size: 14px; color: var(--prj-siva); }
.prj-forma { margin: 0; }
.prj-forma[hidden] { display: none; }
.prj-poruka { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 15px; line-height: 1.4; }
.prj-poruka[hidden] { display: none; }
.prj-poruka-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; margin-top: 4px; }
.prj-polje { display: block; margin: 0 0 14px; font-weight: normal; }
.prj-oznaka { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--prj-siva); }
.prj-unos { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; border: 1.5px solid var(--prj-rub); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.prj-unos:focus-within { border-color: var(--prj-plava); box-shadow: 0 0 0 3px rgba(31, 111, 235, .18); }
.prj-unos > .fa { width: 18px; text-align: center; color: #94a3b8; font-size: 17px; }
.prj-unos input { flex: 1; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 17px; color: var(--prj-tekst); }
.prj-oko { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #64748b; font-size: 18px; cursor: pointer; }
.prj-oko:hover { background: #f1f5f9; }
.prj-oko:focus-visible { outline: 3px solid rgba(31, 111, 235, .35); }
.prj-unos-captcha { padding-right: 6px; }
.prj-unos-captcha img { height: 38px; border-radius: 8px; }
.prj-ostani { display: flex !important; align-items: center; gap: 10px; margin: 2px 0 18px !important; font-size: 15px; font-weight: normal !important; color: var(--prj-siva); cursor: pointer; }
.prj-ostani input { width: 20px; height: 20px; margin: 0 !important; accent-color: var(--prj-plava); flex: 0 0 auto; }
.prj-gumb { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--prj-plava); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(31, 111, 235, .28); transition: background .15s, transform .05s; }
.prj-gumb:hover { background: var(--prj-plava-t); }
.prj-gumb:active { transform: translateY(1px); }
.prj-gumb:focus-visible { outline: 3px solid rgba(31, 111, 235, .45); outline-offset: 2px; }
.prj-gumb:disabled { opacity: .65; cursor: default; }
.prj-gumb.prj-salje .fa { animation: prj-krug 1s linear infinite; }
.prj-gumb.prj-salje .fa::before { content: "\f110"; }
@keyframes prj-krug { to { transform: rotate(360deg); } }
.prj-podnaslov { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--prj-navy); }
.prj-tekst { margin: 0 0 14px; font-size: 15px; color: var(--prj-siva); }
.prj-linkovi { display: flex; justify-content: center; margin-top: 14px; }
.prj-linkovi a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--prj-plava) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.prj-linkovi a:hover { background: #eff6ff; }
.prj-linkovi a[hidden] { display: none; }
.prj-skola { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px -8px -6px; padding: 12px; border-top: 1px solid #e2e8f0; color: var(--prj-navy) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.prj-dno { position: relative; z-index: 1; margin-top: 18px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.prj-dno a { color: #fff !important; text-decoration: none; font-weight: 600; }
.prj-dno .prj-copy { display: block; margin-top: 2px; opacity: .85; }
/* računalo i tablet: kartica u sredini (izdanje 38 - prije je i ovdje bila dolje pa je izgledalo kao da je „propala”);
   tamni prijelaz ravnomjerniji, da se slika škole i dalje vidi */
@media (min-width: 601px) {
  .prj-okvir { justify-content: center; padding: 32px 16px; }
  body.prj::before { background: radial-gradient(ellipse at center, rgba(10, 25, 45, .45) 0%, rgba(10, 25, 45, .2) 55%, rgba(10, 25, 45, .35) 100%); }
}
/* mobitel: kartica dolje, iznad nje slika škole */
@media (max-width: 600px) {
  .prj-okvir { justify-content: flex-end; padding: 18vh 12px calc(14px + env(safe-area-inset-bottom)); }
  .prj-kartica { border-radius: 22px; padding: 22px 18px 16px; }
  .prj-glava { margin-bottom: 16px; }
  .prj-naziv h1 { font-size: 20px; }
  .prj-dno { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .prj-unos, .prj-gumb { transition: none; } .prj-gumb.prj-salje .fa { animation: none; } }