/* ==============================
   Floating Navbar + Controls
============================== */
.nav{
  position:fixed;
  top:1rem; left:50%;
  transform:translateX(-50%);
  z-index:1000;
  background: rgba(6,10,7,.88);
  border:1px solid var(--neon-weak);
  border-radius:.6rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 8px var(--neon-weak2);
  padding:.35rem .6rem;
  backdrop-filter: blur(6px);
  width:max-content;
  max-width:min(1080px,92%);
}
.nav__bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

/* Menu */
.menu{ display:flex; align-items:center; gap:1rem; }
.menu a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.92rem; font-weight:600; font-family:inherit;
  color:var(--text); opacity:.9;
  padding:.25rem .2rem;
  border-bottom:2px solid transparent;
  transition: color .2s, opacity .2s, border-color .2s, text-shadow .2s;
}
.menu a i{ color:var(--neon); font-size:.95rem; }
.menu a:hover{ opacity:1; border-bottom-color:var(--neon); }
.menu a.active{
  opacity:1; color:var(--neon);
  border-bottom-color:var(--neon);
  text-shadow:0 0 6px var(--neon-weak);
}

/* Page controls (top-right; same level as nav) */
.page-controls{
  position:fixed;
  top:1rem;
  right:max(4%, calc((100vw - 1080px)/2));
  z-index:1001;
  display:inline-flex; align-items:center; gap:.6rem;
}

/* Icon button (theme) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; width:34px;
  border-radius:.45rem; border:1px solid var(--neon-weak);
  background:#0d1612; color:var(--neon);
  cursor:pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  transition: transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  font-family:inherit;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color:var(--neon);
  box-shadow: 0 5px 18px rgba(0,0,0,.35), 0 0 8px var(--neon-weak2);
}
.icon-btn i{ font-size:.95rem; }

/* Language select */
.select-wrap{ position:relative; height:34px; display:inline-flex; align-items:center; }
.lang-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:34px; line-height:34px;
  padding:0 1.8rem 0 .6rem;
  border-radius:.45rem; border:1px solid var(--neon-weak);
  background:#0d1612; color:var(--text);
  font-weight:700; font-size:.9rem; font-family:inherit;
  cursor:pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  transition: box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.lang-select:hover{
  border-color:var(--neon);
  box-shadow: 0 5px 18px rgba(0,0,0,.35), 0 0 8px var(--neon-weak2);
}
.lang-select:focus{ outline:none; }
.select-wrap::after{
  content:"▾"; position:absolute;
  right:.5rem; top:50%; transform:translateY(-50%);
  color:var(--neon); pointer-events:none; font-size:.85rem;
  text-shadow:0 0 6px var(--neon-weak);
}
.lang-select option{ background:#0b120d; color:var(--text); }

/* Social controls (top-left) */
.social-controls{
  position: fixed;
  top: 1rem;
  left: max(4%, calc((100vw - 1080px) / 2));
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.social-controls .icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px var(--neon-weak);
  color: var(--neon);
}
.social-controls .icon-btn i { font-size: 1rem; }

/* Light variants */
:root[data-theme="light"] .nav{
  background: rgba(255,255,255,.92);
  border-color:var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
:root[data-theme="light"] .menu a i{ color:var(--accent); }

:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .lang-select{
  border-color:var(--border);
  color:var(--text);
  background:#ffffffd9;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
:root[data-theme="light"] .lang-select:hover{
  border-color:var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
:root[data-theme="light"] .select-wrap::after,
:root[data-theme="light"] .social-controls .icon-btn { color:var(--accent); }
@media (max-width:420px){ .page-controls{ right:1rem; top:.75rem; gap:.45rem; } }