/* Telegram fullscreen safe areas and one floating capsule navigation. */
:root {
  --tg-content-safe-top: 0px;
  --tg-content-safe-bottom: 0px;
  --tg-fullscreen-safe-top: 0px;
  --tg-fullscreen-safe-bottom: 0px;
}

html[data-theme="dark"] body main.app-shell:not(.home-screen):has(> :is(header.directory-header, header.profile-page-header, header.games-header, header.chat-header)) {
  padding-top: calc(max(var(--safe-top), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 0px)) + 160px) !important;
}

html[data-telegram-fullscreen="true"] body #dzo-home-screen.app-shell.home-screen {
  padding-top: calc(max(var(--safe-top), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 72px)) + 64px) !important;
}

html[data-theme="dark"] body main.app-shell:not(.home-screen) > :is(header.directory-header, header.profile-page-header, header.games-header, header.chat-header) {
  position: fixed !important;
  z-index: 2147482000 !important;
  top: calc(max(var(--safe-top), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 0px)) + 64px) !important;
  right: auto !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: min(calc(100vw - 28px), 840px) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
}

html[data-theme="dark"] body main.app-shell:not(.home-screen) > header.games-header .game-wallet-row > .games-balance,
html[data-theme="dark"] body main.app-shell:not(.home-screen) > header.profile-page-header .profile-page-balance {
  display: none !important;
}

html[data-theme="dark"] body main.app-shell:not(.home-screen) > header.games-header .game-wallet-row:has(> .games-balance):not(:has(> .ticket-balance)) {
  display: none !important;
}

html[data-telegram-fullscreen="true"] body #dzo-home-top-overlay.home-top-overlay {
  top: calc(max(var(--safe-top), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 72px)) + 8px) !important;
  z-index: 2147482600 !important;
}

html[data-theme="dark"] body #dzo-home-top-overlay.home-top-overlay {
  top: calc(max(var(--safe-top), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 0px)) + 8px) !important;
  z-index: 2147482600 !important;
}

body:has(.app-bottom-nav:not(.store-bottom-nav)) main.app-shell {
  padding-bottom: calc(150px + max(var(--safe-bottom), var(--tg-content-safe-bottom, 0px), var(--tg-fullscreen-safe-bottom, 0px))) !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(max(var(--safe-bottom), var(--tg-content-safe-bottom, 0px), var(--tg-fullscreen-safe-bottom, 0px)) + 16px) !important;
  left: 50% !important;
  display: grid !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: min(calc(100vw - 28px), 560px) !important;
  max-width: none !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(116, 203, 255, .48) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 16% 0%, rgba(95, 194, 255, .21), transparent 38%), linear-gradient(145deg, rgba(23, 78, 119, .97), rgba(5, 28, 51, .985)) !important;
  background-image: radial-gradient(circle at 16% 0%, rgba(95, 194, 255, .21), transparent 38%), linear-gradient(145deg, rgba(23, 78, 119, .97), rgba(5, 28, 51, .985)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .26), inset 0 -2px rgba(0, 8, 22, .4), 0 16px 34px rgba(0, 8, 24, .58), 0 0 18px rgba(46, 167, 229, .15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  transform: translate3d(-50%, 0, 0) !important;
  contain: layout paint !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  left: 8px !important;
  display: block !important;
  width: calc((100% - 16px) / 5) !important;
  content: "" !important;
  border: 1px solid rgba(143, 221, 255, .62) !important;
  border-radius: 999px !important;
  opacity: var(--nav-indicator-opacity, 1) !important;
  background: linear-gradient(180deg, rgba(74, 176, 235, .68), rgba(26, 103, 158, .76)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .4), inset 0 -2px rgba(0, 30, 58, .24), 0 5px 14px rgba(0, 14, 35, .38), 0 0 14px rgba(70, 190, 255, .24) !important;
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 420ms cubic-bezier(.22, .82, .24, 1), opacity 180ms ease !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)[data-active-index="1"]::before { transform: translate3d(100%, 0, 0) !important; }
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)[data-active-index="2"]::before { transform: translate3d(200%, 0, 0) !important; }
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)[data-active-index="3"]::before { transform: translate3d(300%, 0, 0) !important; }
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)[data-active-index="4"]::before { transform: translate3d(400%, 0, 0) !important; }

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)::after {
  position: absolute !important;
  z-index: 0 !important;
  top: 1px !important;
  right: 24px !important;
  left: 24px !important;
  display: block !important;
  height: 1px !important;
  content: "" !important;
  background: linear-gradient(90deg, transparent, rgba(231, 249, 255, .4), transparent) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button:hover,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button:focus-visible,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button:active,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active:hover,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active:focus-visible {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 60px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 2px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(196, 220, 239, .84) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 220ms ease, filter 220ms ease !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active .ui-icon,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active > span {
  color: #f0faff !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) .app-bottom-nav-icon-wrap {
  display: grid !important;
  width: 23px !important;
  height: 23px !important;
  place-items: center !important;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1) !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active .app-bottom-nav-icon-wrap {
  transform: translateY(-1px) scale(1.08) !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button > span:last-child {
  max-width: 100% !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) .app-bottom-nav-badge {
  left: calc(50% + 8px) !important;
  right: auto !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav)::before,
  html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) .app-bottom-nav-icon-wrap {
    transition-duration: 1ms !important;
  }
}

/* Give the long content screens their own real scroll viewport in Telegram's
   fullscreen WebView. The fixed top overlay and bottom capsule stay in place. */
html[data-theme="dark"] body :is(
  main.app-shell.leaderboard-screen,
  main.app-shell.profile-screen,
  main.app-shell.news-screen,
  main.feed-screen
) {
  box-sizing: border-box !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* The feed keeps the older dark navy backdrop; blue remains on its controls. */
html[data-theme="dark"] body main.feed-screen,
html:not([data-theme="light"]) body main.feed-screen[class] {
  background:
    radial-gradient(circle at 86% 4%, rgba(44, 97, 143, .14), transparent 34%),
    linear-gradient(180deg, #111d2e 0%, #0b1623 58%, #07111d 100%) !important;
  background-color: #0b1623 !important;
  background-image:
    radial-gradient(circle at 86% 4%, rgba(44, 97, 143, .14), transparent 34%),
    linear-gradient(180deg, #111d2e 0%, #0b1623 58%, #07111d 100%) !important;
}

/* Keep the new tick marks on the tiny launcher reel only. */
html body .event-roulette-markings {
  display: none !important;
}

html body .event-roulette-launch-reel {
  border: 1px solid rgba(141, 225, 255, .34) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(3, 29, 65, .34), rgba(5, 42, 88, .2)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12) !important;
}

html body .event-roulette-launch-reel::before,
html body .event-roulette-launch-reel::after {
  position: absolute !important;
  z-index: 2 !important;
  right: 8px !important;
  left: 8px !important;
  height: 4px !important;
  content: "" !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(90deg, rgba(177, 239, 255, .78) 0 1px, transparent 1px 8px) !important;
  opacity: .72 !important;
}

html body .event-roulette-launch-reel::before { top: 1px !important; }
html body .event-roulette-launch-reel::after { bottom: 1px !important; }

html body .event-roulette-launch-prize {
  position: relative !important;
}

html body .games-hub-screen .games-hub-content.is-events-index {
  padding-top: 108px !important;
}

html body .games-hub-screen .event-roulette-launch-card {
  margin-top: 30px !important;
}

/* Keep each navigation item the full width of its grid cell. The moving
   ::before indicator is the single selected-state surface. */
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active:hover,
html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active:focus-visible {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body .app-bottom-nav:not(.store-bottom-nav) > button.is-active {
  color: #f0faff !important;
}

/* One stable, flat support control across every app section. */
html body .support-fab {
  position: fixed !important;
  z-index: 2147482500 !important;
  right: max(12px, calc((100vw - 560px) / 2 + 12px)) !important;
  bottom: calc(max(var(--safe-bottom, env(safe-area-inset-bottom, 0px)), var(--tg-content-safe-bottom, 0px), var(--tg-fullscreen-safe-bottom, 0px)) + 106px) !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(172, 228, 255, .72) !important;
  border-radius: 50% !important;
  background: #1289e8 !important;
  background-image: none !important;
  box-shadow: 0 7px 18px rgba(0, 16, 42, .4), inset 0 1px rgba(255, 255, 255, .26) !important;
  color: #fff !important;
  animation: none !important;
  transform: none !important;
}

html body .support-fab::before,
html body .support-fab::after,
html body .support-fab .support-fab-ripple {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html body .support-fab .support-fab-icon,
html body .support-fab .support-fab-icon > .ui-icon {
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  place-items: center !important;
  margin: 0 !important;
  color: #fff !important;
  filter: none !important;
  stroke: currentColor !important;
}

html body .support-fab:active {
  background: #0876cf !important;
  transform: scale(.97) !important;
}

@media (max-width: 600px) {
  html body .support-fab {
    right: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .support-fab,
  html body .support-fab::before,
  html body .support-fab::after {
    animation: none !important;
    transition: none !important;
  }
}

/* The home screen has older inline selected-button styles. Keep the moving
   capsule indicator as the only selected surface so it fills one grid cell. */
html body #dzo-mini-root nav.app-bottom-nav:not(.store-bottom-nav).dzo-home-bottom-nav {
  gap: 0 !important;
}

html body #dzo-mini-root nav.app-bottom-nav:not(.store-bottom-nav).dzo-home-bottom-nav > button,
html body #dzo-mini-root nav.app-bottom-nav:not(.store-bottom-nav).dzo-home-bottom-nav > button.is-active,
html body #dzo-mini-root nav.app-bottom-nav:not(.store-bottom-nav).dzo-home-bottom-nav > button.is-active:hover,
html body #dzo-mini-root nav.app-bottom-nav:not(.store-bottom-nav).dzo-home-bottom-nav > button.is-active:focus-visible {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Telegram owns the top-level Back control. Remove duplicate in-page arrows
   and their hard header plates while retaining each page title. */
html[data-telegram-app="true"] body main.app-shell > header:is(
  .directory-header,
  .profile-page-header,
  .games-header,
  .chat-header,
  .settings-header,
  .notifications-header,
  .feed-header,
  .news-page-header,
  .faq-page-header,
  .maintenance-screen-header
) > :is(button.icon-button:first-child, button[aria-label*="Назад"], button[aria-label*="Вернуться в меню"], button[aria-label*="Вернуться в главное меню"]),
html[data-telegram-app="true"] body main.app-shell .maintenance-screen-header > .maintenance-back-button,
html[data-telegram-app="true"] body main.app-shell .admin-hub-store-nav > button:first-child,
html[data-telegram-app="true"] body .admin-shell .mobile-back,
html[data-telegram-app="true"] body main.feed-screen > .feed-header > button:first-child,
html[data-telegram-app="true"] body main.app-shell > header > button[aria-label*="Назад"],
html[data-telegram-app="true"] body main.app-shell > header > button[aria-label*="Вернуться"] {
  display: none !important;
}

html[data-telegram-app="true"] body main.app-shell > header:is(
  .directory-header,
  .profile-page-header,
  .games-header,
  .chat-header,
  .settings-header,
  .notifications-header,
  .feed-header,
  .news-page-header,
  .faq-page-header,
  .maintenance-screen-header
) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Disable Telegram's swipe-to-close gesture without blocking native page
   scroll bounce; a pull at the top now springs back into the menu. */
html[data-telegram-app="true"] body #dzo-home-screen.app-shell.home-screen {
  min-height: var(--app-height, 100dvh) !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y pinch-zoom !important;
  scroll-behavior: smooth !important;
}

html[data-telegram-app="true"] body main.app-shell {
  min-height: var(--app-height, 100dvh) !important;
  overscroll-behavior-y: contain !important;
  transition: min-height .2s cubic-bezier(.2,.8,.2,1) !important;
}

html[data-telegram-app="true"] body main.feed-screen > .feed-header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-telegram-app="true"] body main.app-shell { transition: none !important; }
}

/* Keep the mobile feed and shop responsive by skipping off-screen paint. */
html body main.feed-screen .feed-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 660px;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Refined account/profile and leaderboard surfaces share the saturated blue
   palette without adding high-cost animated filters to every card. */
html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-hero,
html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-list > article,
html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-mine-dock,
html:not([data-theme="light"]) body main.app-shell.profile-screen :is(.profile-identity-card, .profile-level-card, .profile-balance-card),
html:not([data-theme="light"]) body main.app-shell.feed-screen.is-profile-page .feed-profile-card {
  border-color: rgba(89, 183, 255, .42) !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(25, 123, 255, .2), transparent 46%),
    linear-gradient(145deg, rgba(14, 56, 111, .96), rgba(5, 24, 59, .98)) !important;
  box-shadow: inset 0 1px rgba(222, 244, 255, .12), 0 13px 30px rgba(0, 8, 30, .3) !important;
}

html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-tabs > button:not(.is-active),
html:not([data-theme="light"]) body main.app-shell.profile-screen .profile-section-tabs > button:not(.is-active) {
  border-color: rgba(118, 172, 218, .2) !important;
  background: rgba(5, 24, 55, .5) !important;
  box-shadow: none !important;
  color: #b9cfe7 !important;
}

html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-tabs > button.is-active,
html:not([data-theme="light"]) body main.app-shell.profile-screen .profile-section-tabs > button.is-active {
  border-color: rgba(122, 216, 255, .66) !important;
  background: linear-gradient(135deg, #138df0, #2457e8) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 6px 18px rgba(0, 95, 237, .32) !important;
  color: #fff !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-page {
  border-color: rgba(90, 184, 255, .58) !important;
  background:
    radial-gradient(ellipse at 9% 0%, rgba(27, 122, 255, .26), transparent 35%),
    linear-gradient(155deg, #103e80 0%, #0a2c63 54%, #071d48 100%) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center {
  animation: none !important;
  border-color: rgba(107, 207, 255, .78) !important;
  background:
    radial-gradient(ellipse at 92% 0%, rgba(42, 160, 255, .42), transparent 42%),
    linear-gradient(135deg, #126dca 0%, #0d4eab 52%, #092a70 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 15px 34px rgba(0, 9, 38, .34) !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer {
  border-color: rgba(88, 173, 255, .34) !important;
  background-color: #0b2c5d !important;
  box-shadow: 0 8px 20px rgba(0, 8, 31, .26) !important;
}

html:not([data-theme="light"]) body main.app-shell.admin-hub-store-screen {
  background:
    radial-gradient(ellipse at 92% 0%, rgba(33, 137, 255, .2), transparent 36%),
    linear-gradient(180deg, #07172b 0%, #0a2c55 48%, #0b4b81 100%) !important;
}

html:not([data-theme="light"]) body main.app-shell.admin-hub-store-screen .admin-hub-store-page {
  border-color: rgba(80, 177, 255, .52) !important;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(21, 115, 239, .34), transparent 42%),
    linear-gradient(150deg, #103e78 0%, #0a2d5b 58%, #071e43 100%) !important;
  box-shadow: inset 0 1px rgba(222, 244, 255, .1), 0 14px 32px rgba(0, 8, 28, .28) !important;
}

html:not([data-theme="light"]) body main.app-shell.profile-screen .profile-identity-card {
  border-color: rgba(89, 183, 255, .5) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(30, 126, 255, .23), transparent 54%),
    linear-gradient(155deg, #103b70, #081f45) !important;
}

html:not([data-theme="light"]) body main.app-shell.profile-screen :is(.inventory-panel, .recent-chest-openings, .profile-xp-guide) {
  border-color: rgba(91, 177, 255, .36) !important;
  background: linear-gradient(145deg, rgba(13, 52, 97, .96), rgba(6, 25, 56, .98)) !important;
  box-shadow: inset 0 1px rgba(222, 244, 255, .08), 0 10px 25px rgba(0, 8, 28, .22) !important;
}

html:not([data-theme="light"]) body main.app-shell.leaderboard-screen .leaderboard-tabs > button {
  min-height: 44px !important;
  border-radius: 16px !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

/* One compact round like control at the lower-left of each feed image. */
html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay {
  inset: auto auto 12px 12px !important;
  display: grid !important;
  grid-template-rows: 22px 11px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px 0 !important;
  border: 1px solid rgba(188, 230, 255, .5) !important;
  border-radius: 50% !important;
  background: rgba(7, 43, 87, .8) !important;
  box-shadow: 0 4px 12px rgba(0, 8, 24, .3), inset 0 1px rgba(255,255,255,.16) !important;
  color: #f7fbff !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease !important;
}

html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay .feed-heart-icon {
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  color: #fff !important;
  filter: none !important;
}

html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay .feed-heart-icon::before {
  content: "♥" !important;
  display: block !important;
  color: currentColor !important;
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay.is-liked {
  border-color: rgba(255, 126, 158, .62) !important;
  background: rgba(91, 24, 63, .86) !important;
  color: #ff7896 !important;
}

html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay b {
  min-width: 0 !important;
  color: currentColor !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay:active {
  transform: scale(.94) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body main.feed-screen .feed-photo-grid > .feed-post-like-overlay { transition: none !important; }
}

/* Rewards overview rebuilt to match the larger DZO Hub reference card. */
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center {
  display: grid !important;
  transform: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 13px !important;
  padding: clamp(15px, 4vw, 23px) !important;
  border: 1px solid rgba(132, 226, 255, .88) !important;
  border-radius: 27px !important;
  background:
    radial-gradient(ellipse at 88% 3%, rgba(97, 99, 255, .4), transparent 35%),
    radial-gradient(ellipse at 4% 89%, rgba(0, 218, 255, .28), transparent 40%),
    linear-gradient(138deg, #086dc4 0%, #0755bb 50%, #2036b3 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 12px 28px rgba(0,24,89,.36), 0 0 22px rgba(31,174,255,.15) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 210px !important;
  overflow: visible !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 0 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 0 17px rgba(77,223,255,.42), 0 7px 16px rgba(0,31,119,.3) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy > div > small {
  margin: 2px 0 7px !important;
  color: #8ef0ff !important;
  font-size: 10px !important;
  letter-spacing: .07em !important;
  line-height: 1.25 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy h3 {
  font-size: clamp(24px, 6vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 8px rgba(0,30,96,.28) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p {
  max-width: 410px !important;
  margin-top: 9px !important;
  color: rgba(241,250,255,.94) !important;
  font-size: clamp(13px, 3.5vw, 16px) !important;
  line-height: 1.42 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  inset: auto !important;
  justify-self: center !important;
  width: 100% !important;
  height: 178px !important;
  background: radial-gradient(ellipse at 58% 63%, rgba(38,224,255,.34), transparent 68%) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art > img {
  display: block !important;
  width: 125% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translateX(-7%) !important;
  filter: drop-shadow(0 9px 12px rgba(0,28,113,.34)) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-sources {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source,
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar {
  min-height: 158px !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 7px 18px rgba(0,25,99,.25) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading {
  position: relative !important;
  grid-template-columns: 30px minmax(0, 1fr) 34px !important;
  gap: 5px !important;
  min-height: 38px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 3px 10px rgba(0,24,100,.22) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading small {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(10px, 2.8vw, 13px) !important;
  line-height: 1.2 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > strong {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  justify-self: end !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 19px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item {
  min-height: 26px !important;
  gap: 7px !important;
  font-size: clamp(9px, 2.7vw, 12px) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-art {
  flex-basis: 27px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 9px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-items-empty {
  font-size: 13px !important;
  line-height: 1.42 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action {
  min-height: 68px !important;
  gap: 6px !important;
  border-radius: 22px !important;
  background: linear-gradient(105deg, #24d8e6 0%, #12aef4 43%, #3154ec 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.68), 0 8px 20px rgba(0,26,103,.3), 0 0 16px rgba(30,194,255,.2) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > span {
  font-size: clamp(18px, 5vw, 22px) !important;
  letter-spacing: -.015em !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > small {
  font-size: 11px !important;
}

@media (min-width: 621px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview { min-height: 250px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy { grid-template-columns: 68px minmax(0,1fr) !important; gap: 16px !important; padding: 0 !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-icon { width: 68px !important; height: 68px !important; border-radius: 21px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy h3 { font-size: clamp(32px,4vw,44px) !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p { font-size: 18px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art { width: 100% !important; height: 245px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art > img { width: 115% !important; transform: translateX(-5%) !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar { min-height: 190px !important; padding: 16px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item { font-size: 14px !important; min-height: 32px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-items-empty { font-size: 16px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action { min-height: 82px !important; }
}

@media (max-width: 370px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr) !important; min-height: 190px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy { grid-template-columns: 40px minmax(0,1fr) !important; gap: 7px !important; padding: 0 !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-icon { width: 40px !important; height: 40px !important; border-radius: 14px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy > div > small { font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy h3 { font-size: 20px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p { font-size: 12px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art { width: 100% !important; height: 164px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-sources { gap: 7px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar { min-height: 150px !important; padding: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading { grid-template-columns: 25px minmax(0,1fr) 31px !important; gap: 4px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon { width: 25px !important; height: 25px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > strong { width: 31px !important; height: 31px !important; font-size: 18px !important; }
}

/* Use the supplied calendar artwork and keep its blue glow blended into the card. */
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art > img {
  width: 150% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: translateX(-16%) !important;
  mix-blend-mode: screen !important;
  opacity: .98 !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 93%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 93%, transparent 100%) !important;
}

/* Avoid painting and decoding a large batch of catalog cards during a swipe. */
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer {
  content-visibility: auto !important;
  contain: layout style !important;
  contain-intrinsic-size: auto 390px !important;
  transition: none !important;
  will-change: auto !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-image,
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-image:hover {
  content-visibility: auto !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-image-badges {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 621px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art > img {
    width: 118% !important;
    transform: translateX(-7%) !important;
  }
}

/* Keep the official news list scrollable inside Telegram's fixed-height webview. */
html body main.app-shell.news-screen {
  box-sizing: border-box !important;
  height: var(--app-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: var(--app-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
  padding-bottom: calc(160px + max(var(--safe-bottom, 0px), var(--tg-content-safe-bottom, 0px), var(--tg-fullscreen-safe-bottom, 0px))) !important;
}

html body main.app-shell.news-screen::-webkit-scrollbar { display: none !important; }
html body main.app-shell.news-screen > .news-page-content { min-height: 0 !important; padding-bottom: 160px !important; }

/* The rewards card and the catalog sit on one rounded surface. */
html body main.app-shell.admin-hub-store-screen.is-store-overview > section.admin-hub-store.admin-hub-store-page {
  box-sizing: border-box !important;
  width: min(100%, 980px) !important;
  margin: 12px auto 28px !important;
  padding: clamp(12px, 2vw, 20px) 14px 132px !important;
  overflow: hidden !important;
  border: 1px solid rgba(99, 190, 255, .48) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse at 95% 0%, rgba(54, 99, 255, .24), transparent 36%),
    radial-gradient(ellipse at 3% 80%, rgba(0, 167, 255, .15), transparent 42%),
    linear-gradient(155deg, rgba(12, 65, 133, .97), rgba(8, 42, 96, .98) 58%, rgba(7, 29, 70, .99)) !important;
  box-shadow: inset 0 1px rgba(225, 246, 255, .14), 0 18px 40px rgba(0, 10, 39, .28) !important;
}

/* Keep rendering work small while swiping through the donation catalog. */
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer {
  contain: layout style !important;
  contain-intrinsic-size: 1px 380px !important;
  transform: none !important;
  backface-visibility: visible !important;
  transition: border-color .14s ease !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer:hover {
  transform: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-image,
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-image:hover {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-image-badges {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-purchase-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: auto !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(151, 233, 255, .64) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: linear-gradient(110deg, #08a9e7, #087cf0 58%, #285be9) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 7px 17px rgba(0,82,205,.24) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart > svg { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart > span { overflow: visible !important; font-size: 12px !important; text-overflow: clip !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart.is-in-cart { border-color: rgba(136, 247, 194, .68) !important; background: linear-gradient(110deg, #168d82, #167f76 58%, #156657) !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart:disabled { opacity: .5 !important; cursor: not-allowed !important; }

html body main.app-shell.admin-hub-store-screen .admin-hub-store-load-more {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  padding: 14px 8px 4px !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-load-more button {
  min-width: min(100%, 260px) !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(111, 209, 255, .42) !important;
  border-radius: 14px !important;
  color: #e9f8ff !important;
  background: linear-gradient(135deg, rgba(19, 100, 178, .84), rgba(21, 70, 150, .9)) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* On narrow phones, stack reward groups so item names and counts remain legible. */
@media (max-width: 420px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview > section.admin-hub-store.admin-hub-store-page {
    width: calc(100% - 16px) !important;
    padding: 10px 10px 126px !important;
    border-radius: 24px !important;
  }

  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-sources {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 17px !important;
  }

  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-heading small { font-size: 12px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-list,
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-items-empty { font-size: 12px !important; }
}

/* Match all visible wallet pills to the home balance without moving them. */
html body main.app-shell :is(.profile-page-balance, .games-balance) {
  border: 1px solid rgba(167, 229, 255, .76) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(51, 179, 255, .96), rgba(0, 83, 207, .98)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 7px 18px rgba(0,31,92,.3), 0 0 14px rgba(49,190,255,.22) !important;
}

html body main.app-shell :is(.profile-page-balance, .games-balance) > strong {
  color: #fff !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer { transition: none !important; }
}

/* Compact DZO Hub catalog, clean two-panel rewards and account setup. */
html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav {
  position: relative !important;
  display: flex !important;
  min-height: 0 !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav-title { display: none !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-switcher { width: min(100%, 380px) !important; margin-left: auto !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-trigger { width: 100% !important; min-height: 62px !important; border-radius: 20px !important; }

html body main.app-shell.admin-hub-store-screen .admin-hub-store-page {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(105, 196, 255, .58) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(56, 113, 255, .24), transparent 38%),
    linear-gradient(150deg, #104b91 0%, #0a3773 52%, #082956 100%) !important;
  box-shadow: inset 0 1px rgba(232, 248, 255, .12), 0 15px 36px rgba(0, 13, 44, .24) !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-header {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-form {
  max-width: 760px !important;
  margin-inline: auto !important;
  padding: clamp(15px, 4vw, 24px) !important;
  border: 1px solid rgba(119, 207, 255, .54) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(18, 103, 185, .78), rgba(10, 54, 123, .9)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 10px 24px rgba(0, 18, 57, .22) !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-intro {
  gap: 14px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  background: transparent !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-icon {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(151, 228, 255, .62) !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #27a8ea, #155bd7) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 5px 14px rgba(0, 34, 111, .3) !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-intro strong { color: #fff !important; font-size: clamp(18px, 4vw, 25px) !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-intro p { color: rgba(226, 242, 255, .86) !important; line-height: 1.5 !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-form > label { color: #e5f6ff !important; font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-form .admin-hub-store-input-row { grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-form input { min-height: 50px !important; border-radius: 15px !important; border-color: rgba(151, 221, 255, .43) !important; background: rgba(4, 29, 75, .7) !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-id-form .admin-hub-store-input-row button { min-height: 49px !important; border-radius: 15px !important; background: linear-gradient(110deg, #13a8ed, #1263e4) !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: clamp(13px, 3vw, 20px) !important;
  border: 1px solid rgba(128, 220, 255, .74) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #126ec4, #1054b2 58%, #2348bc) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.19), 0 9px 22px rgba(0, 22, 86, .22) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 4px 11px rgba(0,24,100,.24) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy > div > small {
  margin: 0 0 3px !important;
  color: #9beaff !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy h3 {
  margin: 0 !important;
  font-size: clamp(20px, 5vw, 27px) !important;
  line-height: 1.1 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p {
  margin: 5px 0 0 !important;
  color: rgba(225, 242, 255, .88) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art { display: none !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-sources {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source,
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar {
  display: flex !important;
  min-width: 0 !important;
  min-height: 126px !important;
  flex-direction: column !important;
  padding: 10px !important;
  border-radius: 17px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading {
  grid-template-columns: 24px minmax(0, 1fr) 31px !important;
  gap: 5px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading small {
  overflow: hidden !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > strong {
  width: 31px !important;
  height: 31px !important;
  font-size: 17px !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-divider { margin: 8px 0 !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-list { min-height: 0 !important; gap: 5px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item { min-height: 22px !important; gap: 5px !important; font-size: 9px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-art { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-items-empty { font-size: 10px !important; line-height: 1.35 !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action {
  min-height: 54px !important;
  border-radius: 17px !important;
  background: linear-gradient(105deg, #17c3e2, #1688ec 52%, #405ce9) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 7px 16px rgba(0,35,125,.24) !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > span { font-size: 15px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > small { font-size: 10px !important; }

/* Product cards now keep a short image band and compact information below it. */
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer {
  display: grid !important;
  grid-template-rows: clamp(92px, 22vw, 136px) minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  contain: layout paint style !important;
  contain-intrinsic-size: 1px 220px !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 13px rgba(0, 10, 35, .2) !important;
  transition: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-image-frame {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-image-frame::after {
  background: linear-gradient(180deg, rgba(4, 14, 44, .02), rgba(4, 14, 44, .16)) !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer:hover .admin-hub-store-offer-image { transform: none !important; filter: none !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-image-badges { inset: 7px 7px auto !important; gap: 4px !important; }
html body main.app-shell.admin-hub-store-screen :is(.admin-hub-store-image-stock, .admin-hub-store-image-promo) { min-height: 20px !important; padding: 3px 6px !important; font-size: 8px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-copy {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 9px 10px 10px !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-eyebrow { font-size: 8px !important; line-height: 1.1 !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-title h3 { margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-meta { gap: 4px !important; margin-top: 0 !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-meta > span { padding: 3px 5px !important; font-size: 8px !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-purchase-row { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px !important; margin-top: auto !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-price strong { padding: 5px 7px !important; font-size: 10px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart { width: auto !important; min-width: 88px !important; min-height: 35px !important; padding: 5px 8px !important; gap: 5px !important; border-radius: 11px !important; font-size: 9px !important; box-shadow: none !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart > svg { width: 14px !important; height: 14px !important; flex-basis: 14px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart > span { font-size: 9px !important; }

html body main.app-shell.admin-hub-store-screen .dzo-hub-card-quantity {
  display: grid !important;
  width: 92px !important;
  min-height: 35px !important;
  grid-template-columns: 29px minmax(20px, 1fr) 29px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 2px !important;
  border: 1px solid rgba(143, 227, 255, .58) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0d96d5, #1455d8) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.19) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-card-quantity button {
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  border: 1px solid rgba(226, 248, 255, .35) !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: rgba(0, 37, 115, .32) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-card-quantity button:disabled { opacity: .45 !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-card-quantity strong { color: #fff !important; font-size: 12px !important; font-variant-numeric: tabular-nums !important; }

/* The system Telegram back control replaces the cramped local events title bar. */
html body main.app-shell.games-hub-screen {
  padding-top: calc(max(var(--safe-top, env(safe-area-inset-top, 0px)), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 0px)) + 160px) !important;
}

html body main.app-shell.games-hub-screen > header.games-hub-header { display: none !important; }
html body main.app-shell.games-hub-screen .games-hub-content { padding-top: 8px !important; }

/* Ticks and end marks make the roulette reel's center selection easy to read. */
html body .event-roulette-markings {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 9px !important;
  pointer-events: none !important;
  background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(141, 225, 255, .62) 21px 22px, transparent 22px 24px) !important;
  background-repeat: repeat-x !important;
  background-size: auto 10px !important;
  background-position: top left, bottom left !important;
  opacity: .68 !important;
}

html body .event-roulette-markings::after {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 10px !important;
  background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(141, 225, 255, .62) 21px 22px, transparent 22px 24px) !important;
  content: "" !important;
}

html body .event-roulette-pointer::before,
html body .event-roulette-pointer::after {
  position: absolute !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 8px solid transparent !important;
  border-left: 8px solid transparent !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

html body .event-roulette-pointer::before { top: 0 !important; border-top: 11px solid #b9f5ff !important; }
html body .event-roulette-pointer::after { bottom: 0 !important; border-bottom: 11px solid #b9f5ff !important; }

@media (max-width: 420px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-sources { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar { min-height: 122px !important; padding: 8px !important; }
  html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer { grid-template-rows: 92px minmax(0, 1fr) !important; }
  html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer-copy { padding: 8px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-add-to-cart { min-width: 78px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell.admin-hub-store-screen .admin-hub-store-offer,
  html body .event-roulette-markings { animation: none !important; transition: none !important; }
}

/* Keep the shared top balance identical to the redesigned home on every page. */
html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) {
  top: calc(max(var(--safe-top, env(safe-area-inset-top, 0px)), var(--tg-content-safe-top, 0px), var(--tg-fullscreen-safe-top, 0px)) + 7px) !important;
  right: auto !important;
  left: 50% !important;
  width: min(calc(100vw - 36px), 560px) !important;
  height: 54px !important;
  transform: translateX(-50%) !important;
}

html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-top-right-dock {
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  height: 46px !important;
  align-items: center !important;
  gap: 9px !important;
}

html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-balance-dock {
  top: 0 !important;
  left: 0 !important;
  min-width: 150px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 37px 0 14px !important;
  border: 2px solid rgba(151, 230, 255, .94) !important;
  border-radius: 999px !important;
  background: linear-gradient(115deg, #0874d9, #0b91ee 54%, #0758ca) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.32), 0 8px 22px rgba(0,31,100,.36), 0 0 16px rgba(44,204,255,.28) !important;
}

html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-balance-dock::after {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2.5px solid #fff !important;
  border-right: 2.5px solid #fff !important;
  content: "" !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-balance-dock .currency-icon,
html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-balance-dock .ui-icon {
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
}

html body #dzo-home-top-overlay.home-top-overlay:not(.home-redesign-dock) .home-balance-dock strong {
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}