/* Shared HTML Generator top navigation — self-contained so it can load on the
   dark app pages (which also load index.css) AND the light legal pages (which do
   not). All colors are explicit hex, never index.css tokens, so the bar looks
   identical everywhere. Loaded on: /, /my/, and the four legal pages. */

.nav{position:sticky;top:0;z-index:50;background:rgba(10,8,18,.82);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid #241d38}
.nav .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* Overlap fix (4a): brand is fixed-width and never shrinks; the links group is
   pushed right and lays out without wrapping, so a long signed-in name can never
   collide with the brand — it ellipsizes instead (see .nav-profile-name). */
.nav-inner{display:flex;align-items:center;gap:16px;height:66px}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:1.06rem;
  color:#f2eefb;text-decoration:none;flex:0 0 auto;white-space:nowrap}
.nav-brand .mark{border-radius:8px;flex:0 0 auto}
.nav-brand:hover{color:#fff}
.nav-links{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:nowrap}

/* Text links: muted, with a tasteful violet underline that grows on hover/active. */
.nav-links a.nav-link{position:relative;color:#a99fc0;font-size:.96rem;text-decoration:none;white-space:nowrap;
  padding:4px 0;transition:color .18s}
.nav-links a.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,#d946ef,#8b5cf6,#6366f1);transition:right .2s ease}
.nav-links a.nav-link:hover,.nav-links a.nav-link[aria-current="page"]{color:#f2eefb}
.nav-links a.nav-link:hover::after,.nav-links a.nav-link[aria-current="page"]::after{right:0}

/* Buttons (Try the generator / Book a call) reused from index.css on the app
   pages; redeclared here so they also render on the legal pages. */
.nav-links .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:650;font-size:.94rem;line-height:1;padding:10px 16px;border-radius:11px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:.18s}
.nav-links .btn-ghost{background:#181327;color:#f2eefb;border-color:#332a4d}
.nav-links .btn-ghost:hover{background:#221a35;border-color:#8b5cf6}
.nav-links .btn-primary{background:linear-gradient(135deg,#d946ef,#8b5cf6,#6366f1);color:#fff;
  box-shadow:0 8px 28px -12px rgba(139,92,246,.7)}
.nav-links .btn-primary:hover{filter:brightness(1.06)}

/* Credit balance chip. */
.credit-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.9rem;
  color:#a78bfa;background:#181327;border:1px solid #332a4d;border-radius:999px;padding:5px 12px;
  font-weight:600;cursor:pointer;transition:border-color .2s;white-space:nowrap}
.credit-chip:hover{border-color:#8b5cf6}
.credit-chip b{color:#f2eefb}

/* Sign-in link (signed out). */
.nav-signin{color:#a99fc0;font-size:.96rem;text-decoration:none;cursor:pointer;transition:color .18s}
.nav-signin:hover{color:#f2eefb}

/* Profile menu (signed in). */
.nav-profile{position:relative;flex:0 0 auto}
.nav-profile-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.94rem;
  color:#f2eefb;background:#181327;border:1px solid #332a4d;border-radius:999px;padding:5px 10px 5px 6px;
  cursor:pointer;transition:border-color .2s}
.nav-profile-btn:hover,.nav-profile-btn[aria-expanded="true"]{border-color:#8b5cf6}
.nav-avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#d946ef,#8b5cf6,#6366f1);flex:0 0 auto}
.nav-profile-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.nav-profile-chev{width:14px;height:14px;flex:0 0 auto;opacity:.7;transition:transform .2s}
.nav-profile-btn[aria-expanded="true"] .nav-profile-chev{transform:rotate(180deg)}

.nav-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:216px;
  background:#120e1d;border:1px solid #332a4d;border-radius:14px;padding:8px;
  box-shadow:0 20px 48px -18px rgba(0,0,0,.72);display:flex;flex-direction:column;gap:2px;z-index:60}
.nav-menu[hidden]{display:none}
.nav-menu a,.nav-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font:inherit;font-size:.92rem;color:#f2eefb;background:transparent;border:0;border-radius:9px;
  padding:9px 11px;cursor:pointer;text-decoration:none;transition:background .15s}
.nav-menu a:hover,.nav-menu button:hover,.nav-menu a:focus-visible,.nav-menu button:focus-visible{
  background:#221a35;outline:none}
.nav-menu-credits{display:flex;align-items:center;gap:8px;padding:9px 11px;font-size:.86rem;
  color:#a99fc0;border-top:1px solid #241d38;border-bottom:1px solid #241d38;margin:4px 0}
.nav-menu-credits b{color:#a78bfa}
.nav-menu .nav-menu-signout{color:#f0a5b5}

@media (max-width:1024px){
  .nav-links{gap:16px}
}
@media (max-width:860px){
  /* Text nav links collapse on tablet/phone; keep chip, account + CTAs reachable. */
  .nav-links a.nav-link{display:none}
  .nav-profile-name{max-width:10ch}
}
@media (max-width:600px){
  .nav-links{gap:10px}
  .nav-links .btn{padding:8px 12px;font-size:.86rem}
  .nav-links a[href*="ark.chakrakali.com"]{display:none}
}