/* Starbook global app shell — one persistent nav on every platform page.
   Desktop: fixed top bar. Mobile (<760px): top bar slims + a fixed bottom tab bar (FB/TikTok pattern). */
.sb-nav{ position:fixed; top:0; left:0; right:0; height:54px; z-index:1000; display:flex; align-items:center; gap:16px;
  padding:0 16px; background:rgba(7,11,18,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08); font-family:'Space Grotesk',system-ui,sans-serif; }
.sb-nav__brand{ display:flex; align-items:center; gap:9px; color:#EAEEF4; text-decoration:none; font-weight:700; letter-spacing:.04em; font-size:1.02rem; flex:none; }
.sb-nav__beacon{ width:9px; height:9px; border-radius:50%; background:#FF9E2C; box-shadow:0 0 10px 2px rgba(255,158,44,.6); }
.sb-nav__items{ display:flex; align-items:center; gap:4px; margin-left:6px; }
.sb-nav__item{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; color:#AEB7C4; text-decoration:none; font-size:.9rem; font-weight:500; white-space:nowrap; transition:color .15s, background .15s; }
.sb-nav__item:hover{ color:#EAEEF4; background:rgba(255,255,255,.06); }
.sb-nav__item.is-active{ color:#FF9E2C; background:rgba(255,158,44,.10); }
.sb-nav__item svg, .sb-tab svg, .sb-icirc svg{ width:19px; height:19px; flex:none; }
.sb-nav__right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; position:relative; }
.sb-icirc{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#AEB7C4; border:1px solid rgba(255,255,255,.12); text-decoration:none; }
.sb-icirc:hover{ color:#EAEEF4; border-color:rgba(255,158,44,.4); }
.sb-avatar{ width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,158,44,.45); cursor:pointer; object-fit:cover; background:#05070A; }
.sb-signin{ font-family:inherit; font-weight:500; font-size:.84rem; letter-spacing:.02em; padding:8px 15px; border-radius:100px; text-decoration:none; color:#FF9E2C; border:1.5px solid rgba(255,158,44,.4); background:rgba(255,158,44,.10); }
.sb-signin:hover{ color:#120d04; background:#FF9E2C; }
.sb-join{ font-family:inherit; font-weight:500; font-size:.84rem; padding:8px 13px; color:#AEB7C4; text-decoration:none; }
.sb-join:hover{ color:#EAEEF4; }
.sb-menu{ position:absolute; top:46px; right:0; background:#0b121c; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:6px; min-width:190px; display:none; box-shadow:0 16px 40px -12px rgba(0,0,0,.7); }
.sb-menu.open{ display:block; }
.sb-menu a{ display:block; padding:10px 12px; color:#EAEEF4; text-decoration:none; border-radius:8px; font-size:.9rem; font-family:'Inter',system-ui,sans-serif; }
.sb-menu a:hover{ background:rgba(255,255,255,.06); }
.sb-menu .sb-menu__sep{ height:1px; background:rgba(255,255,255,.08); margin:6px 4px; }
body.sb-has-nav{ padding-top:54px; }

/* Shared cosmic backdrop — subtle drifting stars + occasional comet arcs, matching the landing page.
   Painted by assets/js/starfield.js onto a fixed canvas behind all content; the page's own dark
   background shows through and only the stars are muted (opacity) so they stay subtle under the UI. */
#starfield{ position:fixed; inset:0; width:100%; height:100%; z-index:-3; pointer-events:none; opacity:.5; }

.sb-tabs{ display:none; }
@media (max-width:760px){
  .sb-nav__items{ display:none; }
  .sb-tabs{ display:flex; position:fixed; bottom:0; left:0; right:0; height:60px; z-index:1000;
    background:rgba(7,11,18,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.08); padding-bottom:env(safe-area-inset-bottom); }
  .sb-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:#AEB7C4; text-decoration:none; font-size:.6rem; font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:.02em; }
  .sb-tab svg{ width:23px; height:23px; }
  .sb-tab.is-active{ color:#FF9E2C; }
  body.sb-has-nav{ padding-top:54px; padding-bottom:64px; }
}