:root{
  --ui-enhance-vh: 1vh;
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-header-hide-distance: calc(100% + var(--ui-safe-top) + 18px);
  --ui-ease-smooth: cubic-bezier(.22,.61,.36,1);
}

html{
  scroll-padding-top: calc(92px + var(--ui-safe-top));
  scroll-padding-bottom: calc(108px + var(--ui-safe-bottom));
}

body{
  min-height: 100dvh;
  min-height: calc(var(--ui-enhance-vh) * 100);
}

body.ui-overlay-open{
  overflow: hidden;
  overscroll-behavior: none;
}

body.ui-touch :where(
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .btn,
  .miniBtn,
  .chip,
  .chipBtn,
  .iconBtn,
  .navBtn,
  .ringBtn,
  .counterBtn,
  .tasbeehAction,
  .tasbeehCore
){
  touch-action: manipulation;
}

[data-auto-hide-header]{
  transform: translate3d(0, 0, 0);
  transition:
    transform .34s var(--ui-ease-smooth),
    opacity .22s ease,
    box-shadow .22s var(--ui-ease-smooth),
    filter .22s var(--ui-ease-smooth);
  will-change: transform;
  backface-visibility: hidden;
}

[data-auto-hide-header].ui-scroll-scrolled{
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}

[data-auto-hide-header].ui-scroll-hidden{
  transform: translate3d(0, calc(-1 * var(--ui-header-hide-distance)), 0);
  opacity: .98;
  pointer-events: none;
}

body.ui-overlay-open [data-auto-hide-header]{
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.topbar,
.topBar,
.topShell,
.controlShell,
.contentPanel,
.sideCard,
.hero,
.section,
.panel,
.glass-card,
.visualPanel,
.controlPanel,
.calendarPanel,
.quick-card,
.utility,
.prayer-row,
.athkarCard,
.drawer-link,
.menuLink,
.menuItem,
.bottomNav .inner{
  transition:
    transform .24s var(--ui-ease-smooth),
    box-shadow .24s var(--ui-ease-smooth),
    border-color .24s ease,
    background-color .24s ease,
    opacity .24s ease;
}

.drawer,
.burgerMenu,
.sideMenu{
  height: calc(var(--ui-enhance-vh) * 100);
  max-height: calc(var(--ui-enhance-vh) * 100);
  width: min(360px, calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 16px));
  padding-bottom: max(10px, var(--ui-safe-bottom));
  overscroll-behavior: contain;
  box-shadow: 0 24px 54px rgba(0,0,0,.26);
}

.drawer-links,
.menuItems,
.sideMenuList,
.sheetBody,
.sheet-body{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.drawer-head,
.menuHeader,
.sheetHeader,
.sheet-head{
  position: sticky;
  top: 0;
  z-index: 2;
}

.sheet{
  max-height: calc((var(--ui-enhance-vh) * 100) - max(8px, var(--ui-safe-top)));
}

.sheetBody,
.sheet-body{
  max-height: min(78vh, calc((var(--ui-enhance-vh) * 100) - 132px - var(--ui-safe-bottom)));
}

.bottomNav{
  padding-left: max(10px, var(--ui-safe-left));
  padding-right: max(10px, var(--ui-safe-right));
}

.bottomNav .inner{
  max-width: min(100%, 780px);
  margin-inline: auto;
}

.bottomNav .navBtn{
  min-width: 0;
}

.bottomNav .navBtn .t{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px){
  html{
    scroll-padding-top: calc(84px + var(--ui-safe-top));
  }

  .topbar,
  .topBar,
  .topShell,
  .appHeader,
  .topbarWrap{
    width: 100%;
    max-width: 100%;
  }

  .hero,
  .section,
  .panel,
  .glass-card,
  .visualPanel,
  .controlPanel,
  .calendarPanel,
  .contentPanel,
  .sideCard,
  .sectionCard,
  .utilityCard,
  .mainPanel,
  .sidePanel,
  .watch-card,
  .moon-card,
  .quran-read,
  .quran-player,
  .tasbeeh,
  .prayers{
    border-radius: clamp(22px, 5vw, 28px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
  }
}

@media (max-width: 640px){
  .topbar,
  .topBar{
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .topbar .titles,
  .topbar .titleWrap,
  .topbar .brandText,
  .topbar .brandWrap,
  .topbar .brand,
  .topbar .brandGroup,
  .topbar .appSub,
  .topbar .subtitle,
  .topbar .appName,
  .topbar .appTitle,
  .topbar .brand-title,
  .barTitle{
    min-width: 0;
  }

  .topbar > *,
  .topBar > *,
  .topShell > *,
  .topbar-inner > *{
    min-width: 0;
  }

  .topbar .appName,
  .topbar .appTitle,
  .topbar .brand-title,
  .topbar h1,
  .topbar h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .appSub,
  .topbar .subtitle,
  .topbar .brand-sub{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .actions,
  .topbar .headerActions,
  .topbar .top-actions,
  .topbar .topActions,
  .topbar .topStats,
  .barActions{
    min-width: 0;
    gap: 6px;
  }

  .drawer,
  .burgerMenu,
  .sideMenu{
    width: min(380px, calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 20px));
  }

  .drawer-link,
  .menuItem,
  .menuLink{
    min-height: 60px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .bottomNav .inner{
    gap: 6px;
    padding: 7px;
    border-radius: 24px;
  }

  .bottomNav .navBtn{
    min-height: 58px;
    padding: 8px 4px;
    border-radius: 18px;
  }

  .bottomNav .navBtn .t{
    font-size: 10px;
    line-height: 1.12;
  }

  .ringBadge{
    max-width: min(52vw, 220px);
  }
}

@media (max-width: 480px){
  .topbar .actions,
  .topbar .headerActions,
  .topbar .top-actions,
  .topbar .topActions,
  .topbar .topStats,
  .barActions{
    flex-wrap: wrap;
  }

  .bottomNav{
    padding-bottom: calc(12px + var(--ui-safe-bottom));
  }

  .bottomNav .inner{
    border-radius: 22px;
  }

  #settingsBtn{
    width: 46px;
    min-width: 46px;
    padding: 0;
  }

  #settingsBtn span:last-child{
    display: none;
  }

  .ringBadge{
    max-width: min(50vw, 200px);
    padding-inline: 12px;
  }

  .hero,
  .section,
  .panel,
  .glass-card,
  .visualPanel,
  .controlPanel,
  .calendarPanel,
  .contentPanel,
  .sideCard,
  .sectionCard,
  .utilityCard,
  .mainPanel,
  .sidePanel{
    padding: 14px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-auto-hide-header]{
    transition: none !important;
  }
}