.app{padding-bottom:108px}

nav.tabbar{
  left:12px;
  right:12px;
  bottom:max(9px,env(safe-area-inset-bottom));
  height:72px;
  padding:6px;
  gap:3px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 72%,#fff 28%);
  border-radius:24px;
  background:color-mix(in srgb,var(--nav) 88%,transparent);
  box-shadow:0 14px 38px rgba(20,8,35,.22),inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
}
nav.tabbar::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 42%,color-mix(in srgb,var(--purple) 11%,transparent));
  pointer-events:none;
}
nav.tabbar button{
  position:relative;
  min-width:0;
  padding:7px 2px 6px;
  gap:3px;
  border-radius:18px;
  color:var(--muted);
  transition:color .2s ease,background .24s ease,box-shadow .24s ease,transform .18s ease;
}
nav.tabbar button span{display:grid;place-items:center;height:25px;font-size:0}
nav.tabbar button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
nav.tabbar button small{
  overflow:hidden;
  max-width:100%;
  font-size:9.5px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
nav.tabbar button.active{
  color:#7140d2;
  background:linear-gradient(145deg,#fff,#eee5ff);
  box-shadow:0 7px 17px rgba(83,44,145,.17),inset 0 1px 0 #fff;
}
nav.tabbar button.active svg{transform:translateY(-1px) scale(1.07)}
nav.tabbar button:active{transform:scale(.96)}

@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]) nav.tabbar{border-color:rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(31,22,45,.9),rgba(16,11,25,.84));box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
  html:not([data-theme="light"]) nav.tabbar button{color:#bdb1c8}
  html:not([data-theme="light"]) nav.tabbar button.active{color:#7a48d7;background:linear-gradient(145deg,#faf7ff,#dfd2f7);box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 1px 0 #fff}
}
html[data-theme="dark"] nav.tabbar{border-color:rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(31,22,45,.9),rgba(16,11,25,.84));box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] nav.tabbar button{color:#bdb1c8}
html[data-theme="dark"] nav.tabbar button.active{color:#7a48d7;background:linear-gradient(145deg,#faf7ff,#dfd2f7)}

@media(max-width:350px){
  nav.tabbar{left:8px;right:8px;gap:1px;padding-inline:4px}
  nav.tabbar button small{font-size:8.5px}
  nav.tabbar button svg{width:21px;height:21px}
}