/* Nav base reset */
.nav-root{position:relative;z-index:40}
.nav-root *{box-sizing:border-box}

/* Mobile top bar */
.nav-mobile{position:fixed;top:0;left:0;right:0;height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);background:rgba(255,255,255,0.28);border-bottom:1px solid rgba(255,255,255,0.3);z-index:50}
.nav-brand{display:inline-flex;align-items:center;gap:8px}
.nav-brand img{height:24px;width:auto;display:block}
.nav-toggle{appearance:none;background:transparent;border:0;color:#111;padding:4px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.nav-toggle:focus{outline:2px solid rgba(17,17,17,0.3);outline-offset:2px}

/* Backdrop */
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:45}

/* Drawer */
.nav-drawer{position:fixed;top:10px;left:10px;width:56px;border-radius:12px;padding:6px;z-index:60;transform:translateX(-96px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
.nav-drawer.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.glass{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.35);box-shadow:0 0 5px rgba(0,0,0,0.1);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}

.nav-icons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;}
.nav-icons a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:#111;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));border:1px solid rgba(255,255,255,0.5);text-decoration:none;transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.nav-icons a:hover{transform:translateY(-1px);box-shadow:0 2px 0 rgba(255,255,255,0.7) inset, 0 8px 24px rgba(0,0,0,0.15)}
.nav-icons a svg{width:18px;height:18px;display:block}

/* Desktop right rail */
.nav-rail{position:fixed;top:50%;right:14px;transform:translateY(-50%);width:56px;border-radius:14px;padding:6px;display:none}

/* Breakpoints */
@media (min-width: 1024px){
  .nav-mobile{display:none}
  .nav-rail{display:block}
  .nav-drawer{display:none}
  .nav-backdrop{display:none}
}

@media (max-width: 1023.98px){
  body{padding-top:0;padding-bottom:84px}
  .nav-toggle{display:none}
  .nav-backdrop{display:none}
  .nav-drawer{top:auto;left:50%;right:auto;bottom:14px;transform:translateX(-50%);opacity:1;pointer-events:auto;width:auto;min-width:280px;max-width:calc(100vw - 24px);padding:8px 10px;border-radius:16px}
  .nav-icons{flex-direction:row;gap:12px}
  .nav-icons a{width:44px;height:44px;border-radius:12px}
}


/* Active state */
.nav-icons a.is-active{
  background:#111 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.2);
}