/* Mobile & Tablet persistent bottom navigation */
:root{
  --mobile-nav-height: 64px;
  --mobile-nav-bg: #ffffff;
  --mobile-nav-border: rgba(15,23,42,0.06);
  --mobile-nav-shadow: 0 -8px 24px rgba(2,6,23,0.06);
  --mobile-nav-accent: #2563eb;
  --mobile-nav-muted: #6b7280;
}

.mobile-bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--mobile-nav-height);
  background:var(--mobile-nav-bg);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:8px 6px;
  box-shadow:var(--mobile-nav-shadow);
  border-top:1px solid var(--mobile-nav-border);
  z-index:1200;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--mobile-nav-muted);
  text-decoration:none;
  font-size:11px;
  width:64px;
  height:48px;
  border-radius:10px;
}

.mobile-bottom-nav__item:active{ opacity:0.9 }
.mobile-bottom-nav__icon{ font-size:20px; line-height:1 }
.mobile-bottom-nav__label{ font-size:11px; }

.mobile-bottom-nav__item--active{
  color:var(--mobile-nav-accent);
}

.mobile-bottom-nav__badge{
  position:absolute;
  top:6px;
  right:10px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--mobile-nav-accent);
  color:#fff;
  font-size:11px;
  display:flex;align-items:center;justify-content:center;
}

/* Keep a safe area on devices with notch/home indicator */
@supports (padding: env(safe-area-inset-bottom)){
  .mobile-bottom-nav{ padding-bottom: calc(8px + env(safe-area-inset-bottom)); height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
}

/* Hide on desktop/larger screens */
@media (min-width:1025px){
  .mobile-bottom-nav{ display:none !important }
}

/* Ensure nav is visible on tablets and phones */
@media (max-width:1024px){
  .mobile-bottom-nav{ display:flex }
}

/* Small screens adjustments */
@media (max-width:420px){
  .mobile-bottom-nav__item{ width:56px }
  .mobile-bottom-nav__icon{ font-size:18px }
}