.bottom-nav{
  gap:6px;
  padding:8px 8px calc(8px + var(--safe-bottom));
  border-top:1px solid var(--black);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.bottom-nav a{
  min-width:0;
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 5px;
  border:1px solid #d1d1d1;
  background:#f6f6f3;
  color:var(--black);
  font-size:.66rem;
  font-weight:650;
  line-height:1;
  letter-spacing:.015em;
  text-align:center;
  text-decoration:none;
  transform:translateY(0);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.bottom-nav a.active{
  border-color:var(--black);
  background:var(--black);
  color:var(--white);
}
.bottom-nav a.active::before{content:none!important}
.nav-icon{position:relative;width:24px;height:20px;flex:0 0 auto;color:currentColor}
.nav-icon::before,.nav-icon::after{content:"";position:absolute;box-sizing:border-box}
.nav-icon-profile::before{top:0;left:8px;width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.nav-icon-profile::after{left:3px;bottom:0;width:18px;height:9px;border:2px solid currentColor;border-bottom:0;border-radius:10px 10px 0 0}
.nav-icon-learning::before{top:2px;left:7px;width:16px;height:2px;background:currentColor;box-shadow:0 7px currentColor,0 14px currentColor}
.nav-icon-learning::after{top:1px;left:1px;width:4px;height:4px;background:var(--red);box-shadow:0 7px var(--red),0 14px var(--red)}
.nav-icon-plan::before{top:1px;left:5px;width:2px;height:19px;background:currentColor}
.nav-icon-plan::after{top:1px;left:7px;width:14px;height:9px;border:2px solid currentColor;border-left:0;background:transparent}
.bottom-nav a.active .nav-icon-plan::after{border-color:var(--red)}
.bottom-nav a:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.bottom-nav a:hover{border-color:var(--black);background:var(--black);color:var(--white);transform:translateY(-2px)}}
@media(max-width:360px){.bottom-nav{gap:4px;padding-inline:5px}.bottom-nav a{font-size:.61rem}}
@media(prefers-reduced-motion:reduce){.bottom-nav a{transition:none}}