/* Four primary destinations stay within thumb reach while the page scrolls. */
main{padding-bottom:max(84px,calc(72px + env(safe-area-inset-bottom,0px)))}
footer{padding-bottom:max(82px,calc(72px + env(safe-area-inset-bottom,0px)))}
#app>.top-nav{position:fixed;z-index:60;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:4px;width:min(384px,calc(100vw - 28px));margin:0;padding:6px;border:1px solid rgba(159,179,163,.35);border-radius:999px;background:rgba(27,34,29,.5);box-shadow:0 10px 25px rgba(0,0,0,.18);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);overflow:visible;scroll-snap-type:none}
#app>.top-nav .nav-btn{min-width:0;width:100%;height:52px;min-height:52px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:transparent;color:#d7e2d8;box-shadow:none;scroll-snap-align:none;transition:background .18s ease,color .18s ease,transform .18s ease}
#app>.top-nav .nav-btn svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app>.top-nav .nav-btn .nav-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app>.top-nav .nav-btn.active{background:rgba(37,126,80,.84);color:#fff;border:0;box-shadow:none}
#app>.top-nav .nav-btn.active::after{display:none}
#app>.top-nav .nav-btn:hover{background:rgba(143,171,148,.22);color:#fff}
#app>.top-nav .nav-btn:active{transform:scale(.94)}
#app>.top-nav .nav-btn:focus-visible{outline:2px solid #a9c8ad;outline-offset:2px}
html[data-theme=light] #app>.top-nav{background:rgba(249,251,249,.56);border-color:rgba(132,160,140,.34);box-shadow:0 10px 27px rgba(24,53,34,.12)}
html[data-theme=light] #app>.top-nav .nav-btn{background:transparent;color:#304b39;border:0;box-shadow:none}
html[data-theme=light] #app>.top-nav .nav-btn.active{background:rgba(35,92,60,.78);color:#fff;border:0;box-shadow:none}
html[data-theme=light] #app>.top-nav .nav-btn:hover{background:rgba(48,100,64,.13);color:#1c4d31}
html[data-theme=light] #app>.top-nav .nav-btn.active:hover{background:rgba(35,92,60,.85);color:#fff}
@media(max-width:520px){#app{padding-top:12px}main{padding-bottom:max(78px,calc(68px + env(safe-area-inset-bottom,0px)))}footer{padding-bottom:max(74px,calc(64px + env(safe-area-inset-bottom,0px)))}#app>.top-nav{width:calc(100vw - 24px);bottom:max(10px,env(safe-area-inset-bottom,0px));padding:5px}#app>.top-nav .nav-btn{height:49px;min-height:49px}#app>.top-nav .nav-btn svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){#app>.top-nav .nav-btn{transition:none}}

/* A shallow glass shell and raised active key keep the dock compact. */
#app>.top-nav{
  background:linear-gradient(165deg,rgba(57,69,60,.64),rgba(18,26,20,.56) 58%,rgba(10,17,12,.64));
  border-color:rgba(190,211,195,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 4px rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.32),0 2px 4px rgba(0,0,0,.16);
  backdrop-filter:blur(16px) saturate(1.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.16);
}
#app>.top-nav .nav-btn.active{
  transform:translateY(0);
  background:linear-gradient(160deg,rgba(65,166,107,.96),rgba(29,105,66,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.29),inset 0 -2px 2px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.28);
}
#app>.top-nav .nav-btn.active:active{transform:translateY(0) scale(.96)}
html[data-theme=light] #app>.top-nav{
  background:linear-gradient(165deg,rgba(255,255,255,.64),rgba(232,241,234,.52));
  border-color:rgba(129,157,137,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(41,78,52,.08),0 12px 28px rgba(24,53,34,.18),0 2px 4px rgba(24,53,34,.09);
}
html[data-theme=light] #app>.top-nav .nav-btn.active{
  background:linear-gradient(160deg,rgba(54,126,78,.96),rgba(29,83,51,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -2px 2px rgba(0,0,0,.11),0 4px 8px rgba(24,53,34,.22);
}

/* Telegram fullscreen draws iPhone status and app controls over the viewport. */
html.telegram-mini{
  --toros-tg-top-space:max(0px,calc(var(--tg-safe-area-inset-top,env(safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) - 6px));
}
/* Telegram iOS can report zero insets even when launched fullscreen. */
html.telegram-mini.telegram-ios-layout{
  --toros-tg-top-space:94px;
}
@supports (-webkit-touch-callout: none){
  html.telegram-mini{
    --toros-tg-top-space:94px;
  }
}
html.telegram-mini .site-header{
  height:calc(76px + var(--toros-tg-top-space));
  padding-top:var(--toros-tg-top-space);
}
@media(max-width:760px){
  html.telegram-mini .site-header{height:calc(58px + var(--toros-tg-top-space))}
}
/* The account dialog is outside the page header, so its controls need the same top clearance. */
html.telegram-mini .account-dialog :is(.account-menu-screen,.account-detail){
  padding-top:calc(var(--toros-tg-top-space) + 72px)!important;
}
/* Keep iPhone status icons legible in the light Telegram theme. */
html.telegram-mini[data-theme=light]{background:#526e58}
html.telegram-mini[data-theme=light] body,
html.telegram-mini[data-theme=light] .account-dialog{
  background:linear-gradient(180deg,#526e58 0,#8fa992 50px,#dce8dc 100px,#fff 140px);
}
html.telegram-mini[data-theme=light] .site-header{background:transparent;border-bottom-color:transparent}

/* Mini apps have their own bottom controls; lift the dock clear of them. */
html:is(.telegram-mini,.max-mini) #app>.top-nav{
  bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 14px));
}
@media(max-width:520px){
  html:is(.telegram-mini,.max-mini) #app>.top-nav{
    bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 14px));
  }
  html:is(.telegram-mini,.max-mini) main{
    padding-bottom:max(94px,calc(82px + env(safe-area-inset-bottom,0px)));
  }
  html:is(.telegram-mini,.max-mini) footer{
    padding-bottom:max(90px,calc(78px + env(safe-area-inset-bottom,0px)));
  }
}