/* menu.css — v52 adds settings dropdown */
.nav-wrap{position:sticky;top:0;z-index:1200;padding:8px 12px}
.nav{max-width:1200px;margin:0 auto;border:1px solid var(--glass-b);border-radius:16px;background:var(--glass);
     backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;flex-direction:column;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1rem;letter-spacing:.2px}
.brand-mark{display:inline-flex;align-items:center;gap:8px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:900;color:#0b1220}
.pill.sandbox{background:#0ea5e9}.pill.live{background:#22c55e}
.menu-btn{appearance:none;border:1px solid var(--glass-b);background:rgba(255,255,255,.18);
          width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;transition:transform .2s ease}
.menu-btn:hover{transform:translateY(-1px)}
.menu-btn i{width:20px;height:20px}
.links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.navlink{padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:800;color:var(--fg);
         border:1px solid transparent;transition:background .2s ease,border-color .2s ease}
.navlink:hover{border-color:var(--glass-b);background:rgba(255,255,255,.10)}
.hello{opacity:.85;font-weight:700}
.divider{width:1px;height:22px;background:var(--glass-b)}

/* Drawer mobile */
.drawer{display:none;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid var(--glass-b);overflow:hidden;
        max-height:0;transition:max-height .25s ease}
.drawer.open{display:flex;max-height:420px}
.drawer .navlink{display:block}
.drawer-hello{padding:8px 12px}

/* Settings dropdown */
.settings{position:relative}
.settings-menu{position:absolute;right:0;top:100%;min-width:280px;background:var(--glass);border:1px solid var(--glass-b);
              border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.settings .s-item{appearance:none;border:1px solid var(--glass-b);background:rgba(255,255,255,.12);color:var(--fg);
                  border-radius:10px;padding:10px;text-align:left;font-weight:800;cursor:pointer}
.settings .s-item:hover{background:rgba(255,255,255,.18)}
.settings-btn{display:inline-flex;align-items:center;gap:6px}

/* Full-width look */
.nav-wide{width:100%}

/* Typography modern */
.nav, .nav *{font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}

@media (min-width: 920px){
  .menu-btn{display:none}
  .drawer{display:none!important}
}