/* Unified colorful bottom navigation icons */
.bottom .nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.bottom .nav-ico{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:0 8px 20px rgba(76,99,210,.16),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.bottom .nav-ico svg{
  width:24px;
  height:24px;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.bottom .nav-budget{background:linear-gradient(135deg,#4463ff 0%,#6c4dff 100%)}
.bottom .nav-spending{background:linear-gradient(135deg,#f7c84b 0%,#f0a928 100%)}
.bottom .nav-reports{background:linear-gradient(135deg,#23c86d 0%,#16b5a4 100%)}
.bottom .nav-settings{background:linear-gradient(135deg,#8b6cff 0%,#5568ff 100%)}
.bottom .nav.active .nav-ico{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 12px 26px rgba(76,99,210,.23),inset 0 1px 0 rgba(255,255,255,.32);
}
.bottom .nav>span:last-child{line-height:1.08;text-align:center}
@media(min-width:1101px){
  .bottom .nav{flex-direction:row;justify-content:flex-start;gap:10px}
  .bottom .nav-ico{width:38px;height:38px;border-radius:12px}
  .bottom .nav-ico svg{width:20px;height:20px}
}
@media(max-width:640px){
  .bottom .nav-ico{width:44px;height:44px;border-radius:14px}
  .bottom .nav-ico svg{width:22px;height:22px}
}