/* PACER bottom navigation — Concept 2 / Minimal Line / icon only */
:root{--nav-h:74px}
.nav{
  position:fixed;
  left:50%;
  right:auto;
  bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 28px),392px);
  height:60px;
  min-height:60px;
  padding:0 10px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  background:rgba(16,18,22,.98);
  border:1px solid #353940;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:1000;
  overflow:visible;
}
.nav button{
  appearance:none;
  position:relative;
  border:0;
  background:transparent!important;
  color:#aeb4c0;
  min-width:0;
  min-height:60px;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0!important;
  cursor:pointer;
  transition:color .14s ease,opacity .14s ease;
}
.nav button::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:-1px;
  height:2px;
  background:transparent;
}
.nav button.active{color:#4f7cff!important;background:transparent!important}
.nav button.active::after{background:#4f7cff}
.nav svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav .record-nav span{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid currentColor;
  background:transparent!important;
  display:grid;
  place-items:center;
  position:relative;
}
.nav .record-nav i{
  width:14px;
  height:14px;
  border-radius:0;
  background:transparent!important;
  position:relative;
  display:block;
}
.nav .record-nav i::before,
.nav .record-nav i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
  border-radius:1px;
}
.nav .record-nav i::after{transform:translate(-50%,-50%) rotate(90deg)}
.nav .record-nav.active span{border-color:#4f7cff}
.nav button:active{opacity:.62}
@media(max-width:380px){
  .nav{width:calc(100% - 20px);height:58px;min-height:58px;bottom:calc(10px + env(safe-area-inset-bottom));padding:0 8px}
  .nav button{min-height:58px}
  .nav svg{width:21px;height:21px}
  .nav .record-nav span{width:32px;height:32px}
}