/* FIVEFORGE top navigation — JEDINI izvor istine za traku.
   Ista visina, isti top, isti razmaci na svakoj stranici, u oba stanja (prijavljen/odjavljen).
   Dizajn je preuzet iz hub.html (dashboard) i promovisan na cijeli sajt.
   forge.css i dalje daje .brand tipografiju; sve ostalo oko trake je ovdje.
   Rekonstruisano 2026-08-13, ujednaceno 2026-08-13. */

/* ---- traka: puna sirina, ljepljiva, 3 zone (logo | meni | nalog) ----
   Fiksna visina je namjerna: sadrzaj .acct se mijenja (Log in -> krediti), ali
   geometrija trake ne smije zavisiti od toga. */
.fnav{position:sticky;top:0;z-index:100;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  width:100vw;margin-left:calc(50% - 50vw);margin-bottom:22px;
  height:64px;padding:12px max(24px,calc(50vw - 540px))}
.fnav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,13,16,.9);border-bottom:1px solid var(--bd);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fnav .brand{flex:none;margin-right:0}
.fnav>.brandwrap{display:flex;align-items:center;gap:9px}

/* traka guta razmak ispod sebe kad odmah iza nje ide jos jedna puna traka (promo) */
.fnav ~ .promobar{margin-top:-22px;margin-bottom:22px}

/* ---- meni (centralna zona) ---- */
.navmenu{justify-self:center;display:flex;align-items:center;gap:4px;white-space:nowrap;margin:0}
.navmenu a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--mut);
  font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:10px;transition:.15s;position:relative}
.navmenu a svg,.navmenu a i{width:16px;height:16px;opacity:.85}
.navmenu a:hover{color:var(--fg);background:none}
.navmenu a.on{color:var(--acc-soft);background:none}
.navmenu a.on svg,.navmenu a.on i{opacity:1;color:var(--acc-soft)}
.navmenu a.on::after{content:"";position:absolute;left:15px;right:15px;bottom:-13px;
  height:2px;border-radius:2px;background:var(--acc)}

/* ---- klaster naloga (desna zona) ---- */
/* min-height je kljucan: klaster je isto visok prijavljen i odjavljen, pa red mreze
   (a s njim i .brand i .navmenu) stoji na istom pikselu u oba stanja */
.acct{justify-self:end;margin-left:0;display:flex;align-items:center;gap:8px;
  flex-wrap:nowrap;min-height:40px}
.acct #langswitch{display:inline-flex;align-items:center}
/* prazan prekidac jezika ne smije trositi razmak — hub.html ga nema, pa bi inace
   klaster bio 8px siri i centralni meni pomjeren za 4px */
.acct #langswitch:empty{display:none}
.langsel{background:var(--panel);border:1px solid var(--bd2);color:var(--mut);
  font-size:13px;border-radius:9px;padding:7px 10px;cursor:pointer;font-family:inherit;width:auto}
.langsel:focus{outline:none;border-color:var(--acc)}

/* odjavljeno stanje */
.fnav-login{display:inline-flex;align-items:center;text-decoration:none;color:var(--mut);
  font-size:13.5px;line-height:1.2;font-weight:600;padding:9px 14px;border-radius:10px;
  transition:.16s;white-space:nowrap}
.fnav-login:hover{color:var(--fg);background:var(--panel)}
.fnav-cta{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:#1c0f07;background:var(--acc);font-size:13.5px;line-height:1.2;font-weight:700;
  padding:9px 16px;border-radius:10px;border:1px solid transparent;transition:.18s;white-space:nowrap}
.fnav-cta:hover{background:var(--acc-soft)}
.fnav-cta i,.fnav-cta svg{width:15px;height:15px}

/* prijavljeno stanje — isti klaster koji hub.html nosi u svom HTML-u */
.acct .chip.credits,.acct .credits{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--mut);border:1px solid var(--bd2);background:var(--panel);
  border-radius:10px;padding:7px 12px;transition:.16s;font-size:13px;line-height:1.4}
.acct .chip.credits:hover,.acct .credits:hover{border-color:var(--acc-dim);background:var(--panel2)}
.acct .chip.credits i,.acct .chip.credits svg{width:14px;height:14px;color:var(--acc-soft)}
.acct .chip.credits b,.acct .credits b{color:var(--acc-soft);font-weight:700;font-size:13px}
.acct .chip.credits span{color:var(--dim);font-size:11px}

.acct .act{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--mut);
  border:1px solid transparent;border-radius:10px;padding:8px 11px;font-size:13px;font-weight:600;
  transition:.16s;cursor:pointer;font-family:inherit;background:none}
.acct .act:hover{color:var(--fg);background:var(--panel)}
.acct .act.iconly{width:33px;height:33px;border-radius:10px;border:1px solid var(--bd);
  background:var(--panel);color:var(--mut);display:grid;place-items:center;padding:0}
.acct .act.iconly:hover{color:var(--acc-soft);border-color:var(--acc-dim);background:var(--panel2)}
.acct .act.iconly i,.acct .act.iconly svg{width:15px;height:15px}

.acct .navdiv{width:1px;height:26px;background:var(--bd2);margin:0 2px;flex:none}

.acct .uwrap{display:flex;align-items:center;gap:9px;text-decoration:none;
  padding:3px 6px 3px 3px;border-radius:12px;transition:.15s}
.acct .uwrap:hover{background:var(--panel)}
.acct .uwrap img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;
  border:1px solid var(--bd2);box-shadow:0 0 0 2px #0b0d10,0 0 0 4px #4ade80}
/* fallback kad nema Discord avatara — inicijal u krugu, iste dimenzije kao slika */
.acct .uwrap .uavtxt{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--raise);color:var(--acc-soft);font-size:13px;font-weight:700;
  box-shadow:0 0 0 2px #0b0d10,0 0 0 4px #4ade80}
.uplan{display:flex;flex-direction:column;line-height:1.15;margin-left:4px}
.uplan .un{font-size:12.5px;font-weight:700;color:var(--fg)}
.uplan .up{font-size:10.5px;color:#4ade80;font-weight:700}

/* ---- zvonce + panel obavjestenja ---- */
.bellwrap{position:relative;display:inline-flex}
.ndot{position:absolute;top:5px;right:5px;min-width:8px;height:8px;border-radius:5px;
  background:var(--acc);box-shadow:0 0 0 2px var(--panel)}
/* Fixed and hung off <body> by the page script, never left inside .fnav: the bar is
   position:sticky with a z-index, which opens a stacking context, and anything nested in it
   is trapped under that number and slides behind the page's own panels. Placed from JS.
   1000 sits above page content and below the full-screen overlays (9000+). */
.npanel{position:fixed;width:min(312px,86vw);z-index:1000;
  opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;
  transition:.18s cubic-bezier(.2,.7,.2,1);overflow:hidden;
  border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 46%),rgba(13,15,18,.6);
  box-shadow:0 24px 56px -20px #000f,0 1px 0 0 rgba(255,255,255,.05) inset;
  -webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4)}
.npanel.open{opacity:1;transform:none;pointer-events:auto}
/* na uskom ekranu panel ide preko cijele sirine, inace visi izvan ekrana */
@media(max-width:560px){
  .npanel{left:12px!important;right:12px;top:70px!important;width:auto;max-width:none}
}
.nphead{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;font-weight:700;letter-spacing:-.01em}
.nphead button{background:none;border:none;color:var(--acc-soft);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.nphead button:hover{text-decoration:underline}
.nplist{max-height:min(56vh,344px);overflow-y:auto;overscroll-behavior:contain}
.nitem{position:relative;display:flex;gap:10px;padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px;transition:.14s}
.nitem:last-child{border-bottom:none}
.nitem:hover{background:rgba(255,255,255,.03)}
.nitem.unread{background:linear-gradient(90deg,rgba(230,135,92,.09),transparent 80%)}
.nitem.unread::before{content:"";position:absolute;left:5px;top:17px;width:4px;height:4px;border-radius:50%;background:var(--acc)}
.nitem .nic{width:27px;height:27px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(230,135,92,.13);border:1px solid rgba(230,135,92,.2);color:var(--acc-soft)}
.nitem .nic svg{width:14px;height:14px}
.nitem .nb{min-width:0;flex:1}
.nitem .nt{font-weight:600;color:var(--fg)}
.nitem .nx{color:var(--mut);margin-top:2px;line-height:1.5}
.nitem .ntime{color:var(--dim);font-size:11px;margin-top:4px}
.npempty{padding:22px 14px;text-align:center;color:var(--dim);font-size:12px}

/* ---- hamburger + mobilna ladica ---- */
.navhm{display:none;background:none;border:1px solid var(--bd2);border-radius:10px;
  color:var(--mut);padding:0;cursor:pointer;line-height:0;width:33px;height:33px;
  place-items:center;flex:none}
.navhm i,.navhm svg{width:18px;height:18px}
.navhm:hover{color:var(--fg);border-color:var(--dim)}

@media(max-width:1080px){
  /* justify-self:stretch je obavezan: bez njega fixed ladica ostaje zarobljena u
     sirini svoje grid celije (~152px) umjesto da bude preko cijelog ekrana */
  /* width:100vw drzi ladicu na tacnoj sirini ekrana i na stranicama koje imaju
     vodoravni preljev sadrzaja (npr. traka alata na dashboardu) */
  /* Ladica visi ISPOD TRAKE, ne na dnu ekrana. Ranije je bila inset:auto 0 0 0, dakle
     zakacena za dno viewporta — a `position:fixed` se razrijesi na najblizeg pretka koji ima
     transform/filter/backdrop-filter, pa je na telefonu "dno" postajalo dno stranice i meni
     se nalazio ispod cijelog sadrzaja. Vezana za vrh, i u tom slucaju ostaje uz hamburger. */
  .navmenu{position:fixed;top:64px;left:10px;right:10px;bottom:auto;z-index:60;
    justify-self:stretch;width:auto;max-width:none;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:var(--panel);border:1px solid var(--bd);border-radius:14px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    max-height:calc(100vh - 84px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
    box-shadow:0 26px 60px -28px rgba(0,0,0,.95)}
  .navmenu.open{opacity:1;visibility:visible;transform:none;
    transition:opacity .16s ease,transform .16s ease}
  .navmenu a{padding:13px 12px;font-size:15px}
  .navmenu a.on::after{display:none}
  .navhm{display:grid}
}
@media(max-width:860px){
  .acct .act.iconly span,.acct .act span{display:none}
}
@media(max-width:640px){
  /* 60px umjesto 64px, ali i dalje identicno na svakoj stranici */
  .fnav{height:60px;padding:10px 18px;margin-bottom:16px;gap:10px}
  .navmenu{top:60px;max-height:calc(100vh - 80px)}
  .fnav ~ .promobar{margin-top:-16px;margin-bottom:16px}
  .acct{gap:6px}
  .uplan,.acct .navdiv{display:none}
  .fnav-login{padding:9px 11px}
}
@media(max-width:480px){
  .acct{gap:5px}
  .fnav-cta{padding:8px 10px;font-size:12.5px}
  .fnav-cta span{display:inline}
  .fnav-cta svg{display:none}
  .acct #langswitch{display:none}
}
@media(prefers-reduced-motion:reduce){.navmenu,.npanel{transition:none}}