body.appsations-shell{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
body.appsations-shell main{
  height:100%;
  min-height:100%;
  overflow:auto;
}
body.appsations-shell .sdk-frame{
  width:min(1200px,100%);
  margin:0 auto;
  padding:clamp(2rem,4vw,3.25rem);
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.appsations-nav{
  --nav-top-height:4.2rem;
  --nav-secondary-height:3rem;
  --nav-padding-x:1.4rem;
  --nav-gap:.6rem;
  position:sticky;
  top:0;
  z-index:200;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--nav-gap);
  padding:0;
  border-radius:.95rem;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(140deg,rgba(10,14,26,.78),rgba(10,14,26,.52));
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  max-height:12rem;
  transition:transform .25s ease,opacity .25s ease,max-height .25s ease;
  will-change:transform,opacity;
}
.appsations-nav.nav-hidden{
  max-height:0;
  opacity:0;
  transform:translateY(-0.6rem);
  pointer-events:none;
  overflow:hidden;
  border-color:transparent;
  box-shadow:none;
}
.appsations-nav + .appsations-nav{margin-top:.5rem;}
.appsations-nav.compact{
  --nav-top-height:3.1rem;
  --nav-secondary-height:2.4rem;
  --nav-padding-x:1rem;
  --nav-gap:.35rem;
  border-radius:.8rem;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.appsations-nav.compact .nav-kicker{font-size:.56rem;letter-spacing:.24em;}
.appsations-nav.compact .nav-title{font-size:.88rem;}
.appsations-nav.compact .nav-badge{font-size:.52rem;padding:.18rem .48rem;}
.appsations-nav.compact .nav-links a{font-size:.78rem;padding:.28rem .7rem;}
.appsations-nav.compact .nav-chip{font-size:.56rem;padding:.18rem .6rem;}
.appsations-nav.compact .nav-links.secondary a{font-size:.72rem;}
.appsations-nav.compact .env-badge{font-size:.6rem;padding:.26rem .6rem;}
.appsations-nav.compact .nav-brand{gap:.55rem;}
.appsations-nav.compact .nav-icon{
  width:2rem;
  height:2rem;
  padding:.2rem;
}
.appsations-nav .nav-row{
  display:flex;
  flex-wrap:nowrap;
  gap:.6rem;
  align-items:center;
  height:var(--nav-secondary-height);
  padding:0 var(--nav-padding-x);
  box-sizing:border-box;
}
.appsations-nav .nav-row.top{
  justify-content:space-between;
  height:var(--nav-top-height);
}
.appsations-nav .nav-row.top .nav-links{flex:1;justify-content:flex-end;}
.appsations-nav .nav-meta{margin-left:auto;}
.appsations-nav .env-badge{
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:.35rem .8rem;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,.06);
  color:var(--text,#f6f8ff);
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.appsations-nav .env-badge[data-env="beta"]{
  background:linear-gradient(135deg,rgba(111,227,243,.25),rgba(227,158,86,.25));
  border-color:rgba(111,227,243,.5);
  color:var(--accent,#6fe3f3);
}
.appsations-nav .env-badge:hover{
  transform:translateY(-1px);
  border-color:var(--accent,#6fe3f3);
  color:var(--accent,#6fe3f3);
}
.appsations-nav .nav-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-right:1rem;
}
.appsations-nav .nav-brand-text{
  display:flex;
  flex-direction:column;
  gap:.08rem;
}
.appsations-nav .nav-icon{
  width:2.6rem;
  height:2.6rem;
  border-radius:999px;
  object-fit:contain;
  padding:.3rem;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.appsations-nav .nav-icon:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.45);
}
.appsations-nav .nav-hamburger{position:relative;flex:0 0 auto;}
.appsations-nav .nav-hamburger summary{
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.2);
  border-radius:.75rem;
  width:2.5rem;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--text,#f6f8ff);
  background:rgba(255,255,255,.04);
}
.appsations-nav .nav-hamburger summary::-webkit-details-marker{display:none;}
.appsations-nav .nav-hamburger[open] summary{
  border-color:var(--accent,#6fe3f3);
  color:var(--accent,#6fe3f3);
}
.appsations-nav .nav-hamburger-panel{
  position:absolute;
  top:calc(100% + .45rem);
  left:0;
  min-width:15rem;
  max-width:24rem;
  padding:.75rem;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,10,22,.94);
  box-shadow:0 18px 32px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  z-index:500;
}
.appsations-nav .nav-hamburger-group{display:flex;flex-direction:column;gap:.35rem;}
.appsations-nav .nav-group-label{
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--muted,#9aa1b7);
}
.appsations-nav .nav-hamburger-panel .nav-links{
  flex-wrap:wrap;
  overflow:visible;
  white-space:normal;
}
.appsations-nav.compact .nav-hamburger summary{
  width:2.05rem;
  height:2.05rem;
  font-size:.95rem;
  border-radius:.6rem;
}
.appsations-nav .nav-kicker{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted,#9aa1b7);}
.appsations-nav .nav-title{font-size:1.1rem;font-weight:600;letter-spacing:.05em;color:var(--text,#f6f8ff);}
.appsations-nav .nav-badge{
  margin-top:.18rem;
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted,#9aa1b7);
  border:1px solid rgba(255,255,255,.16);
  padding:.18rem .5rem;
  border-radius:999px;
  align-self:flex-start;
}
.appsations-nav .nav-links{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  overflow-x:auto;
  white-space:nowrap;
  min-width:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.appsations-nav .nav-links::-webkit-scrollbar{display:none;}
.appsations-nav .nav-links a{
  color:var(--text,#f6f8ff);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.2);
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  transition:transform .2s ease,border-color .2s ease,color .2s ease;
}
.appsations-nav .nav-links a:hover{transform:translateY(-1px);border-color:var(--accent,#6fe3f3);color:var(--accent,#6fe3f3);}
.appsations-nav .nav-links a[aria-current=page]{
  background:linear-gradient(135deg,var(--accent,#6fe3f3),var(--accent-strong,#e39e56));
  color:#05020b;
  border:none;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.appsations-nav .nav-chip{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted,#9aa1b7);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:.25rem .7rem;
}
.appsations-nav .nav-links.secondary a{font-size:.76rem;border-style:dashed;color:var(--muted,#9aa1b7);}
.appsations-nav .nav-links.secondary a:hover{color:var(--accent,#6fe3f3);}
@media (max-width:900px){
  .appsations-nav .nav-row{gap:.45rem;}
  .appsations-nav .nav-row.top .nav-links{justify-content:flex-start;}
}
.appsations-nav.compact .nav-row.top{flex-direction:row;align-items:center;}
