:root{
  --zl-bg:#080809;
  --zl-s1:#0f0f11;
  --zl-s2:#141416;
  --zl-border:rgba(255,255,255,.075);
  --zl-purple:#9b51ff;
  --zl-lavender:#c4a8ff;
  --zl-white:#fff;
  --zl-muted:#a1a1aa;
  --zl-dim:#858590;
}
body.has-zl-shell{padding-left:82px}
.zl-global-nav{
  position:fixed;inset:0 auto 0 0;width:82px;z-index:1000;
  display:flex;flex-direction:column;align-items:center;
  background:#0b0b0d;border-right:1px solid var(--zl-border);
  font-family:'Geist',system-ui,sans-serif;
}
.zl-global-mark{
  width:42px;height:42px;margin:17px 0 28px;border-radius:13px;
  display:grid;place-items:center;text-decoration:none;
  color:var(--zl-white);font-size:12px;font-weight:750;letter-spacing:-.03em;
  border:1px solid rgba(196,168,255,.26);
  background:linear-gradient(145deg,rgba(155,81,255,.22),rgba(155,81,255,.06));
}
.zl-global-links{display:flex;flex-direction:column;gap:7px;width:100%;align-items:center}
.zl-global-link{
  position:relative;width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;color:var(--zl-dim);text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
  border:1px solid transparent;
}
.zl-global-link:hover{color:var(--zl-white);background:var(--zl-s2)}
.zl-global-link.active{
  color:var(--zl-lavender);background:rgba(155,81,255,.11);
  border-color:rgba(155,81,255,.18);
}
.zl-global-link svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.zl-global-link .tip{
  position:absolute;left:59px;top:50%;transform:translateY(-50%);
  padding:6px 9px;border-radius:7px;background:#202024;color:var(--zl-white);
  border:1px solid var(--zl-border);font-size:11px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.zl-global-link:hover .tip{opacity:1}
.zl-global-link .tip em{
  font-style:normal;margin-left:5px;padding:1px 5px;border-radius:4px;
  background:rgba(155,81,255,.22);color:var(--zl-lavender);font-size:9.5px;
  letter-spacing:.02em;vertical-align:1px;
}
/* Always-visible badge (not hover-gated like .tip) for modules still in
   beta — solves "these got lost" without needing a hover to notice them. */
.zl-global-beta{position:relative}
.zl-beta-dot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--zl-purple);border:1.5px solid #0b0b0d;
  box-shadow:0 0 0 1px rgba(155,81,255,.35);
}
.zl-global-bottom{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding-bottom:17px;align-items:center}
.zl-global-signout{background:none;border:1px solid transparent;font:inherit;cursor:pointer;}
.zl-global-signout:hover{color:var(--zl-lavender);}
@media(max-width:720px){
  body.has-zl-shell{padding-left:0;padding-bottom:64px}
  .zl-global-nav{
    inset:auto 0 0 0;width:auto;height:64px;flex-direction:row;
    justify-content:flex-start;border-right:0;border-top:1px solid var(--zl-border);
    overflow-x:auto;padding:0 8px;scrollbar-width:none;
  }
  .zl-global-nav::-webkit-scrollbar{display:none}
  .zl-global-mark{display:none}
  .zl-global-bottom{flex-direction:row;margin-top:0;padding-bottom:0;gap:4px}
  .zl-global-links,.zl-global-bottom{width:auto;flex-direction:row;gap:4px;flex:0 0 auto}
  .zl-global-link{width:54px;height:48px}
  .zl-global-link .tip{display:none}
}

/* Authenticated product pages now share the contextual Workspace rail.
   Keep the legacy shell offsets only as layout compatibility for pages that
   load platform-nav.js; the actual rail styling comes from workspace-shell.css. */
body.has-zl-shell{padding-left:258px}
@media(max-width:720px){
  body.has-zl-shell{padding-left:0;padding-bottom:90px;padding-top:0}
  .sidebar-scrim[hidden]{display:none}
}

/* Clearly named destinations, with account utilities kept separate. */
body.has-zl-shell{padding-left:210px}
.zl-global-nav{width:210px;align-items:stretch;padding:0 14px;box-sizing:border-box}
.zl-global-mark{align-self:flex-start;margin:14px 8px 26px;width:154px;height:48px;border:0;background:none;border-radius:0}
.zl-global-mark img{display:block;width:128px;height:38px;object-fit:contain}
.zl-global-links{align-items:stretch}
.zl-global-link{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;height:auto;padding:12px;box-sizing:border-box;color:var(--zl-muted)}
.zl-global-link svg{flex:0 0 19px}
.zl-global-link .tip{position:static;transform:none;padding:0;border:0;background:none;color:inherit;font-size:13px;white-space:normal;opacity:1;pointer-events:auto}
.zl-global-link:focus-visible,.zl-global-bottom summary:focus-visible{outline:2px solid var(--zl-lavender);outline-offset:3px}
.zl-global-bottom{display:block;position:relative;margin-top:auto;padding:0 0 20px;width:100%}
.zl-global-bottom summary{padding:14px 12px;color:var(--zl-muted);font-size:13px;cursor:pointer}
.zl-account-menu{padding-top:5px}
.zl-area-links{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 24px;font:13px 'Geist',system-ui,sans-serif}
.zl-area-links a{color:var(--zl-lavender);text-decoration:none;padding:8px 10px;border:1px solid var(--zl-border);border-radius:8px}
.zl-area-links a:hover,.zl-area-links a:focus-visible{background:var(--zl-s2);color:white}
.zl-error a{color:inherit;text-decoration:underline}
.zl-global-link,.zl-area-links a{overflow-wrap:anywhere}
.zl-exp-title{min-width:0;text-align:left}
.zl-exp-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zl-exp-menu .zl-exp-item{width:100%;text-align:left;border:0;border-bottom:1px solid var(--zl-border);background:transparent;font-family:inherit;line-height:1.5}
.zl-exp-menu .zl-exp-item:focus-visible{outline:2px solid var(--zl-lavender);outline-offset:-3px}
.zl-exp-menu .zl-exp-item:hover{background:var(--zl-s2)}
.zl-exp-menu .zl-exp-item.active{background:rgba(155,81,255,.11)}
@media(max-width:720px){
 body.has-zl-shell{padding-left:0;padding-bottom:calc(78px + env(safe-area-inset-bottom));padding-top:58px}
 .zl-global-nav{width:auto;height:calc(72px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);overflow:visible}
 .zl-global-links{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 .zl-global-links .zl-global-link{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:7px 2px;min-height:60px;text-align:center}
 .zl-global-link .tip{display:block;font-size:11px;line-height:1.2}
 .zl-global-bottom{position:fixed;top:10px;right:12px;width:auto;margin:0;padding:0}
 .zl-global-bottom summary{list-style:none;border:1px solid var(--zl-border);border-radius:8px;background:var(--zl-s1);padding:10px;font-size:12px}
 .zl-global-bottom summary::-webkit-details-marker{display:none}
 .zl-account-menu{position:absolute;right:0;top:44px;min-width:170px;background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:10px;padding:6px;box-shadow:0 12px 30px #0008}
 body .zl-exp-bar{right:92px !important}
}

/* Final compatibility overrides for the shared contextual rail. */
body.has-zl-shell{padding-left:258px}
/* Pages that use platform-nav.js do not have the workspace.html grid
   wrapper. Keep the shared contextual rail out of normal document flow so
   Discover, Pipeline, Briefs and the other standalone pages retain their
   main content beside it. */
body.has-zl-shell > .workspace-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:258px;
  height:100vh;
}
/* Standalone workspace pages (Discover, Pipeline and Briefs) keep their
   document content outside the fixed rail. Make that contract explicit so a
   stale shell stylesheet or mobile scrim cannot leave the page looking empty
   after navigation. */
body.has-zl-shell > main.page{
  position:relative;
  z-index:1;
  display:block;
  visibility:visible;
  opacity:1;
}
body.has-zl-shell > .sidebar-scrim[hidden]{display:none!important}
@media(max-width:720px){
  body.has-zl-shell{padding-left:0;padding-bottom:90px;padding-top:0}
  body.has-zl-shell > .workspace-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(290px,86vw);
    height:100dvh;
  }
}