/* ── Nav bar ─────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:rgba(248,250,255,0.97); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); z-index:500;
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-w); margin:0 auto; padding:0 20px; height:100%;
}

/* ── Logo — image-first, text fallback ─────────────────────────────── */
.nav-logo {
  text-decoration:none;
  display:flex; align-items:center;
  flex-shrink:0;
  font-family:var(--font-display); font-size:1.35rem; font-weight:600;
  letter-spacing:0.01em; color:var(--blue-dark);
}
.nav-logo-img {
  /*
    Logo is 400×100px (4:1 ratio).
    nav-h = 60px → logo height 42px leaves 9px breathing room each side.
    Rendered size: ~168×42px — visible and prominent.
    To make bigger/smaller: change height only. Width follows automatically.
  */
  height:42px;
  width:auto;
  display:block;
  object-fit:contain;
}
.nav-logo-text {
  /* Text fallback — only shown when Logo.png fails to load */
  display:none;
}
.nav-logo-img-error .nav-logo-text { display:inline; }
.nav-logo-img-error .nav-logo-img  { display:none; }
.nav-logo-glyph { color:var(--blue); font-size:1rem; opacity:0.85; }

/* ── Nav right side ──────────────────────────────────────────────────── */
#nav-gate-right { display:none; align-items:center; gap:8px; }
.btn-nav-in {
  background:transparent; border:1px solid var(--border); color:var(--text-mid);
  font-family:var(--font-body); font-size:0.83rem; font-weight:500;
  padding:7px 16px; border-radius:6px; cursor:pointer;
  transition:border-color 0.15s, color 0.15s;
}
.btn-nav-in:hover { border-color:var(--blue); color:var(--blue); }
.btn-nav-cta {
  background:var(--blue); color:#fff; border:none;
  font-family:var(--font-body); font-size:0.83rem; font-weight:600;
  padding:8px 18px; border-radius:6px; cursor:pointer; transition:background 0.15s;
}
.btn-nav-cta:hover { background:var(--blue-mid); }
#nav-dash-right { display:none; align-items:center; gap:10px; }
.util-credits {
  display:flex; align-items:baseline; gap:4px;
  padding:5px 13px; border:1px solid var(--border); border-radius:6px;
  background:var(--warm-white); white-space:nowrap;
}
.util-credits-num {
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  color:var(--green); line-height:1;
}
.util-credits-label { font-size:0.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; }
.btn-topup {
  background:var(--blue); color:#fff; border:none;
  font-family:var(--font-body); font-size:0.8rem; font-weight:600;
  padding:7px 15px; border-radius:6px; cursor:pointer;
  transition:background 0.15s; white-space:nowrap;
}
.btn-topup:hover { background:var(--blue-mid); }
.btn-signout {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  font-family:var(--font-body); font-size:0.78rem; padding:6px 13px;
  border-radius:6px; cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.btn-signout:hover { border-color:var(--blue); color:var(--blue); }
.hamburger {
  display:none; background:transparent; border:none;
  color:var(--text); font-size:1.2rem; cursor:pointer; padding:4px;
}

/* ── Responsive nav ─────────────────────────────────────────────────── */
@media(max-width:600px) {
  #nav.dash-mode { height:auto; min-height:var(--nav-h); }
  #nav.dash-mode .nav-inner { flex-direction:column; align-items:center; padding:10px 16px; gap:8px; height:auto; }
  #nav-dash-right { justify-content:center; width:100%; }
}