/* ExitBid canonical site header — shared across all pages (2026-08-01, v2).
   Grid layout (1fr auto 1fr) so the center links are position-locked regardless of
   the side widths (Sign In vs avatar, AI-cue font load) — identical on every page,
   no shift. Scoped under #ebnav; self-contained. Pair with /nav.js + the inline
   auth script that ships inside each page's nav block. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');

#ebnav{
  position:sticky;top:0;width:100%;z-index:1000;box-sizing:border-box;
  height:60px;padding:0 32px;margin:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:rgba(7,8,12,0.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,158,11,0.07);
  font-family:'Inter',system-ui,sans-serif;
}
#ebnav *{box-sizing:border-box}
#ebnav a{text-decoration:none}

/* zones */
#ebnav .eb-left{grid-column:1;justify-self:start;display:flex;align-items:center;min-width:0}
#ebnav .eb-nav-center{grid-column:2;justify-self:center;display:flex;align-items:center;gap:36px}
#ebnav .eb-nav-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}

#ebnav .eb-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
#ebnav .eb-logo-text{font-family:'Sora',sans-serif;font-size:19px;font-weight:900;letter-spacing:-0.5px;text-transform:lowercase;line-height:1}
#ebnav .eb-logo-e{color:#F1F5F9}
#ebnav .eb-logo-x{color:#FBBF24}
#ebnav .eb-logo-rest{color:#F1F5F9}

#ebnav .eb-ai-cue{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;
  letter-spacing:1.45px;white-space:nowrap;padding:6px 8px;margin-left:14px;flex-shrink:0;
}
#ebnav .eb-ai-cue .eb-fc-ai{color:#FBBF24;text-transform:uppercase;transition:color .3s}
#ebnav .eb-ai-cue .eb-fc-read{color:#9CA3AF;transition:color .3s}
#ebnav .eb-ai-cue:hover .eb-fc-ai,#ebnav .eb-ai-cue:hover .eb-fc-read{color:#FDE68A}

#ebnav .eb-nav-center a{font-size:13px;font-weight:500;color:#9CA3AF;transition:color .3s;white-space:nowrap}
#ebnav .eb-nav-center a:hover,#ebnav .eb-nav-center a.active{color:#FBBF24}

#ebnav .eb-nav-sign{
  padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700;
  font-family:'Sora',sans-serif;color:#07080C;display:inline-block;letter-spacing:.3px;
  background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%);border:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(180,83,9,0.55),0 2px 6px -1px rgba(0,0,0,0.5),0 2px 10px rgba(245,158,11,0.15);
  transition:background .3s,transform .3s,box-shadow .3s;
}
#ebnav .eb-nav-sign:hover{background:linear-gradient(135deg,#FCD34D 0%,#FBBF24 100%);transform:translateY(-1px)}
#ebnav .eb-nav-sign:active{transform:translateY(1px)}

/* logged-in account cluster (chat + avatar), built by the inline auth script */
#ebnav .eb-account{display:none;align-items:center;gap:10px}
#ebnav .eb-chat{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;color:#9CA3AF;position:relative;transition:all .3s}
#ebnav .eb-chat:hover{color:#FBBF24;border-color:rgba(255,255,255,0.14)}
#ebnav .eb-chat .eb-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#EF4444;box-shadow:0 0 6px rgba(239,68,68,.5);display:none}
#ebnav .eb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#0D9488);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;font-family:'Sora',sans-serif;border:2px solid rgba(245,158,11,0.3)}
html[data-eb-auth="in"] #ebnav .eb-nav-sign{display:none}
html[data-eb-auth="in"] #ebnav .eb-account{display:inline-flex}

/* hamburger */
#ebnav .eb-hamburger{display:none;position:relative;width:44px;height:44px;padding:0;cursor:pointer;background:none;border:none;align-items:center;justify-content:center;z-index:1010}
#ebnav .eb-hamburger span{position:absolute;width:18px;height:1.5px;background:#9CA3AF;border-radius:1px;transition:all .3s ease}
#ebnav .eb-hamburger span:nth-child(1){transform:translateY(-4px)}
#ebnav .eb-hamburger span:nth-child(3){transform:translateY(4px)}
#ebnav .eb-hamburger.active span{background:#FBBF24}
#ebnav .eb-hamburger.active span:nth-child(1){transform:rotate(45deg)}
#ebnav .eb-hamburger.active span:nth-child(2){opacity:0}
#ebnav .eb-hamburger.active span:nth-child(3){transform:rotate(-45deg)}

/* mobile dropdown */
#ebnav .eb-mobile-menu{
  display:none;position:fixed;top:60px;left:0;right:0;z-index:1000;
  flex-direction:column;padding:12px 24px 20px;gap:2px;
  background:rgba(9,10,15,0.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,158,11,0.12);box-shadow:0 20px 40px -12px rgba(0,0,0,0.6);
}
#ebnav .eb-mobile-menu.open{display:flex}
#ebnav .eb-mobile-menu a{
  font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:#E8EAF0;
  padding:13px 4px;border-bottom:1px solid rgba(255,255,255,0.05);transition:color .2s;
}
#ebnav .eb-mobile-menu a:hover{color:#FBBF24}
#ebnav .eb-mobile-menu .eb-mm-ai{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:1px;color:#FBBF24;text-transform:uppercase}
#ebnav .eb-mobile-menu .eb-mm-sign{
  margin-top:12px;text-align:center;color:#07080C;border:none;border-radius:8px;
  background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%);font-family:'Sora',sans-serif;font-weight:700;
}

@media (max-width:1024px){
  #ebnav{padding:0 20px}
  #ebnav .eb-ai-cue{display:none}
  #ebnav .eb-nav-center{display:none}
  #ebnav .eb-nav-right .eb-nav-sign,#ebnav .eb-nav-right .eb-account{display:none}
  html[data-eb-auth="in"] #ebnav .eb-account{display:none}
  #ebnav .eb-hamburger{display:inline-flex}
}
