.top-shell{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:linear-gradient(135deg,var(--yellow2),var(--yellow));
  border-bottom:1px solid var(--stroke);
  transition:box-shadow .2s ease, transform .25s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.header{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font-weight:800;
}

.toolbar{
  padding:0 16px 14px;
  transition:opacity .18s ease, transform .22s cubic-bezier(.4,0,.2,1), max-height .22s ease;
  transform-origin:top;
}

.top-shell.is-collapsed .toolbar{
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform:translateY(-8px);
  pointer-events:none;
}

.top-shell.is-collapsed{
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.page{
  padding:16px;
  padding-bottom:calc(var(--nav-h) + 20px);
}

.feed{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* =========================
   BOTTOM NAV
========================= */

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:var(--nav-h);
  backdrop-filter:blur(16px);
  background:rgba(255,255,255,.85);
  border-top:1px solid var(--stroke);
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:900;
}

.bottom-nav a{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  position:relative;
  transition:color .2s ease;
}

.bottom-nav a .ico{
  height:32px;
  width:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .15s ease;
}

.bottom-nav a.active{
  color:var(--text);
}

.bottom-nav a.active .ico{
  background:linear-gradient(135deg,var(--yellow2),var(--yellow));
  transform:translateY(-1px);
}

.bottom-nav a:active .ico{
  transform:scale(.92);
}

/* subtle underline indicator */
.bottom-nav a::after{
  content:"";
  position:absolute;
  bottom:6px;
  height:3px;
  width:18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--yellow2),var(--yellow));
  opacity:0;
  transition:opacity .2s ease;
}

.bottom-nav a.active::after{
  opacity:1;
}