/* Shared top nav bar — logo, My Shows/Browse/Friends links, account dropdown.
   The markup itself is generated by /js/top-nav.js; this file is everything
   that styles it, so a future nav tweak (spacing, colors, a new item) is one
   file each, not six. Every page needs an empty mount point:
     <nav id="top-nav"></nav>
   min-height on nav/.nav-right reserves the real height before JS ever
   populates it — without this, the nav pops in with zero height first and
   the rest of the page jumps down (a CLS regression a previous perf pass
   already fixed once for .nav-right alone; this generalizes it to the
   whole bar now that the whole bar is JS-injected). */
nav{position:sticky;top:0;z-index:100;display:flex;flex-wrap:wrap;row-gap:.5rem;align-items:center;padding:1rem 3rem;border-bottom:1px solid var(--bd);background:rgba(14,14,12,.9);backdrop-filter:blur(12px);min-height:68px}
.logo{font-family:'Playfair Display','Playfair Display Fallback',Georgia,serif;font-size:1.4rem;font-weight:600;letter-spacing:-.02em;cursor:pointer;text-decoration:none;color:var(--tx);flex:1 1 0;min-width:0}
.logo span{color:var(--ac)}
.nav-links{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--tx2);font-size:.875rem;white-space:nowrap;cursor:pointer;transition:color .2s;display:inline-flex;align-items:center;gap:.4rem}
.nav-links a:hover{color:var(--tx)}
.nav-links a.active{color:var(--tx);font-weight:600}
.nav-icon{width:15px;height:15px;flex-shrink:0}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem;min-height:35px;flex:1 1 0;min-width:0}

/* Account dropdown */
.avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--ac);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:#fff;position:relative;flex-shrink:0}
.user-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg2);border:1px solid var(--bd2);border-radius:10px;min-width:200px;overflow:hidden;display:none;z-index:200}
.user-menu.open{display:block}
.user-menu-header{padding:.875rem 1rem;border-bottom:1px solid var(--bd)}
.user-menu-name{font-size:.875rem;font-weight:500}
.user-menu-email{font-size:.75rem;color:var(--tx3);margin-top:2px}
.user-menu-item{display:flex;align-items:center;gap:.625rem;padding:.7rem 1rem;font-size:.85rem;color:var(--tx2);cursor:pointer;transition:background .15s;border:none;background:transparent;width:100%;text-align:left;font-family:inherit}
.user-menu-item:hover{background:var(--bg3);color:var(--tx)}
.user-menu-item.danger{color:var(--red)}
.user-menu-item.danger:hover{background:rgba(226,75,74,.08)}

@media(max-width:768px){
  nav{padding:1rem 1.25rem}
}