/* iOS 26 liquid-glass tab bar effect — sliding glass lens + frosted shell (layout untouched) */
.tabbar.has-lens{
  background:linear-gradient(180deg,rgba(58,46,38,.62),rgba(26,20,16,.72))!important;
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.05);backdrop-filter:blur(22px) saturate(190%) brightness(1.05);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.14),0 14px 34px -8px rgba(21,10,2,.45),0 3px 8px rgba(21,10,2,.2)!important}
/* outer frame ring, like the nested glass shell */
.tabbar.has-lens::before{content:"";position:absolute;inset:-5px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
/* warm glow under the bar (the green glow in the reference, in the site's orange) */
.tabbar.has-lens::after{content:"";position:absolute;left:12%;right:12%;bottom:-18px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,129,58,.55),transparent);filter:blur(10px);opacity:.75;z-index:-1}
.tabbar.has-lens .tab.nav-active{background:transparent!important;color:#fff!important}
.tabbar.has-lens .tab:not(.nav-active){color:rgba(255,255,255,.78)}
.tab-lens{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;pointer-events:none;opacity:0;z-index:0;
  list-style:none;will-change:transform,width;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1) 55%,rgba(255,235,210,.16));
  -webkit-backdrop-filter:blur(8px) brightness(1.3) saturate(1.7);backdrop-filter:blur(8px) brightness(1.3) saturate(1.7);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -1.5px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 14px rgba(255,255,255,.12),0 8px 18px -4px rgba(0,0,0,.35),0 0 22px rgba(212,129,58,.28);
  transition:opacity .4s ease}
.tabbar.has-lens .tab-lens{opacity:1}
.tabbar.has-lens>li:not(.tab-lens){position:relative;z-index:1}
.tab-lens::after{content:"";position:absolute;top:2px;left:14%;right:14%;height:42%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);opacity:.6}
.tab-lens.is-moving{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 18px rgba(255,255,255,.2),0 10px 22px -4px rgba(0,0,0,.4),0 0 30px rgba(212,129,58,.45)}

/* ── Colour unification: one warm espresso + amber palette for bar, lens, icons, glow ── */
:root{--tg-bar-top:rgba(104,64,34,.78);--tg-bar-bot:rgba(52,30,15,.88);--tg-ink:#FFF4E6;--tg-ink-dim:rgba(255,235,212,.74);--tg-amber:#F2A867;--tg-rim:rgba(255,226,196,.5)}
.tabbar.has-lens{background:linear-gradient(180deg,var(--tg-bar-top),var(--tg-bar-bot))!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1.5px 0 var(--tg-rim),inset 0 -1px 0 rgba(255,214,170,.14),inset 0 0 0 1px rgba(255,214,170,.16),0 14px 34px -8px rgba(60,28,8,.5),0 3px 8px rgba(60,28,8,.22)!important}
.tabbar.has-lens::before{border-color:rgba(255,214,170,.28);background:linear-gradient(180deg,rgba(255,226,196,.09),transparent 40%)}
.tabbar.has-lens .tab:not(.nav-active){color:var(--tg-ink-dim)!important}
.tabbar.has-lens .tab:not(.nav-active):hover{color:var(--tg-ink)!important}
.tabbar.has-lens .tab.nav-active{color:var(--tg-ink)!important}
.tabbar.has-lens .tab-icon{stroke:currentColor}
.tab-lens{background:linear-gradient(180deg,rgba(255,196,138,.55),rgba(212,129,58,.34) 60%,rgba(184,100,38,.4))!important;
  -webkit-backdrop-filter:blur(6px) saturate(150%)!important;backdrop-filter:blur(6px) saturate(150%)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,240,222,.8),inset 0 -1.5px 0 rgba(255,214,170,.25),inset 0 0 0 1px rgba(255,226,196,.4),0 8px 18px -4px rgba(60,28,8,.45),0 0 22px rgba(242,168,103,.4)!important}
.tab-lens::after{background:linear-gradient(180deg,rgba(255,244,230,.5),transparent)!important}
.tab-lens.is-moving{box-shadow:inset 0 1.5px 0 rgba(255,244,230,.9),inset 0 0 0 1px rgba(255,226,196,.55),0 10px 22px -4px rgba(60,28,8,.5),0 0 32px rgba(242,168,103,.6)!important}