html:not([data-theme="light"]) body main.feed-screen,
html:not([data-theme="light"]) body main.app-shell.chat-screen,
html:not([data-theme="light"]) body main.admin-shell {
  background:
    radial-gradient(circle at 92% 0%, rgba(50, 157, 238, .14), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #111d2e 54%, #0b477b 100%) !important;
  background-image:
    radial-gradient(circle at 92% 0%, rgba(50, 157, 238, .14), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #111d2e 54%, #0b477b 100%) !important;
  color: #f5f9ff !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-header, .feed-tabs, .feed-list),
html:not([data-theme="light"]) body main.app-shell.chat-screen :is(.chat-header, .chat-canvas),
html:not([data-theme="light"]) body main.admin-shell :is(.admin-chat-header, .admin-chat-body) {
  background-color: transparent !important;
  background-image: none !important;
  color: #f5f9ff !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-card, .feed-empty, .feed-composer, .feed-comments-panel, .feed-comment-bubble),
html:not([data-theme="light"]) body main.app-shell.chat-screen :is(.composer-context, .attachment-preview, .support-waiting-status),
html:not([data-theme="light"]) body main.admin-shell :is(.admin-card, .conversation-card) {
  border-color: rgba(133, 188, 226, .3) !important;
  background: linear-gradient(145deg, #20364d, #172b40) !important;
  background-image: linear-gradient(145deg, #20364d, #172b40) !important;
  box-shadow: inset 0 1px rgba(214, 239, 255, .08), 0 14px 30px rgba(0, 12, 27, .34) !important;
  color: #f5f9ff !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-card-header, .feed-caption, .feed-actions, .feed-comments-preview, .feed-bottom-nav),
html:not([data-theme="light"]) body main.feed-screen :is(.feed-profile-stats, .feed-profile-filters, .feed-profile-sort) {
  border-color: rgba(112, 181, 231, .22) !important;
  background: rgba(12, 35, 59, .72) !important;
  background-image: none !important;
  color: #f5f9ff !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(button, .feed-post-action, .feed-follow-button),
html:not([data-theme="light"]) body main.app-shell.chat-screen :is(.chat-header button, .chat-composer button, .send-button, .attach-button),
html:not([data-theme="light"]) body main.admin-shell :is(.admin-chat-header button, .admin-chat-composer button) {
  border-color: rgba(107, 189, 242, .34) !important;
  background: linear-gradient(145deg, #19517d, #176b9f) !important;
  background-image: linear-gradient(145deg, #19517d, #176b9f) !important;
  color: #f4fbff !important;
  box-shadow: inset 0 1px rgba(220, 244, 255, .13), 0 8px 18px rgba(0, 20, 44, .24) !important;
}

html:not([data-theme="light"]) body main.app-shell.chat-screen .chat-canvas,
html:not([data-theme="light"]) body main.admin-shell .admin-chat-body {
  background:
    radial-gradient(circle at 18% 14%, rgba(83, 177, 236, .08), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(15, 104, 171, .16), transparent 34%),
    linear-gradient(145deg, #0d1d2e, #0b2945 55%, #0b477b) !important;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(83, 177, 236, .08), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(15, 104, 171, .16), transparent 34%),
    linear-gradient(145deg, #0d1d2e, #0b2945 55%, #0b477b) !important;
}

html:not([data-theme="light"]) body :is(main.app-shell.chat-screen, main.admin-shell) .message-bubble.outgoing {
  background: #2a638f !important;
  color: #f4fbff !important;
}

html:not([data-theme="light"]) body :is(main.app-shell.chat-screen, main.admin-shell) .message-bubble.incoming {
  background: #172b40 !important;
  color: #f4fbff !important;
}

html:not([data-theme="light"]) body main.app-shell.chat-screen .composer-wrap,
html:not([data-theme="light"]) body main.admin-shell :is(.admin-chat-composer, .composer-wrap) {
  border-color: rgba(112, 181, 231, .22) !important;
  background: linear-gradient(180deg, #10263d, #0d1d30) !important;
  box-shadow: 0 -12px 28px rgba(0, 8, 23, .3) !important;
}

html[data-theme="dark"] body > main.feed-screen,
html[data-theme="dark"] body main.feed-screen[class],
html[data-theme="dark"] body #dzo-mini-root > main.app-shell.chat-screen,
html[data-theme="dark"] body main.app-shell.chat-screen[class] {
  background:
    radial-gradient(circle at 92% 0%, rgba(50, 157, 238, .14), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #111d2e 54%, #0b477b 100%) !important;
  background-color: #111d2e !important;
  background-image:
    radial-gradient(circle at 92% 0%, rgba(50, 157, 238, .14), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #111d2e 54%, #0b477b 100%) !important;
}

/* Refined feed controls: inactive controls stay quiet, while only the
   selected control receives the blue accent. */
html:not([data-theme="light"]) body main.feed-screen :is(.feed-tabs, .feed-profile-filters, .feed-profile-sort) {
  padding: 5px !important;
  border: 1px solid rgba(136, 190, 226, .2) !important;
  border-radius: 15px !important;
  background: rgba(10, 28, 47, .72) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(226, 244, 255, .06), 0 10px 24px rgba(0, 10, 24, .22) !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-tabs > button, .feed-profile-filters > button, .feed-profile-sort > button) {
  min-height: 38px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #b9ccdc !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-tabs > button:hover, .feed-profile-filters > button:hover, .feed-profile-sort > button:hover) {
  border-color: rgba(121, 193, 235, .22) !important;
  background: rgba(64, 132, 177, .18) !important;
  background-image: none !important;
  color: #eaf6ff !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-tabs > button.active, .feed-profile-filters > button.active, .feed-profile-sort > button.active) {
  border-color: rgba(127, 211, 255, .5) !important;
  background: linear-gradient(145deg, #1d628f, #287fae) !important;
  background-image: linear-gradient(145deg, #1d628f, #287fae) !important;
  box-shadow: inset 0 1px rgba(231, 249, 255, .14), 0 6px 14px rgba(7, 74, 116, .28) !important;
  color: #ffffff !important;
}

/* The author row is a text area, not a second rectangular button. */
html:not([data-theme="light"]) body main.feed-screen .feed-card-header,
html:not([data-theme="light"]) body main.feed-screen .feed-author,
html:not([data-theme="light"]) body main.feed-screen .feed-author-name {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-author {
  padding: 7px 4px !important;
  color: #f1f7fc !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-author-meta {
  color: #8fa9bd !important;
}

/* Let captions and action rows merge with the card instead of looking like
   sharp separate strips. */
html:not([data-theme="light"]) body main.feed-screen :is(.feed-caption, .feed-actions, .feed-comments-preview) {
  border-color: rgba(151, 202, 232, .12) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-card {
  border-color: rgba(133, 188, 226, .22) !important;
  background: linear-gradient(145deg, rgba(32, 54, 77, .8), rgba(23, 43, 64, .72)) !important;
  background-image: linear-gradient(145deg, rgba(32, 54, 77, .8), rgba(23, 43, 64, .72)) !important;
  box-shadow: inset 0 1px rgba(214, 239, 255, .06), 0 12px 26px rgba(0, 12, 27, .26) !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(133, 188, 226, .36) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #20364d, #172b40) !important;
  box-shadow: inset 0 1px rgba(214, 239, 255, .08), 0 14px 30px rgba(0, 12, 27, .38) !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-media {
  background: #20364d !important;
  border: 0 !important;
  border-radius: 19px 19px 0 0 !important;
  box-shadow: none !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-media img,
html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-cta {
  min-height: 44px !important;
  padding: 0 52px 0 16px !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 19px 19px !important;
  background: linear-gradient(135deg, #04aef2 0%, #0789dc 48%, #075eb2 100%) !important;
  color: #fff !important;
  font-size: clamp(11px, 3.1vw, 15px) !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
  text-shadow: 0 1px 2px rgba(0, 31, 67, .5) !important;
  box-shadow: 0 8px 22px rgba(0, 126, 217, .48), inset 0 1px rgba(255, 255, 255, .35) !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-cta svg {
  right: 12px !important;
  bottom: 8px !important;
  width: 22px !important;
  height: 22px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 27, 63, .55)) !important;
}

html body #dzo-home-screen .profile-home.home-actions > .home-admin-ad-block > .home-admin-ad-cta:is(:hover, :focus-visible, :active) {
  filter: brightness(1.14) saturate(1.12) !important;
  box-shadow: 0 10px 26px rgba(0, 151, 245, .62), inset 0 1px rgba(255, 255, 255, .45) !important;
}

/* Catalogue entry cards: softer, more tactile than the old hard blocks. */
html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card {
  position: relative !important;
  isolation: isolate !important;
  min-height: 104px !important;
  grid-template-columns: 58px minmax(0, 1fr) 36px !important;
  gap: 15px !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
  border: 1px solid rgba(128, 205, 244, .34) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(97, 193, 238, .18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(9, 107, 171, .3), transparent 45%),
    linear-gradient(135deg, #164a70 0%, #1d6592 58%, #1b557d 100%) !important;
  box-shadow:
    inset 0 1px rgba(233, 250, 255, .18),
    inset 0 -14px 24px rgba(2, 31, 57, .16),
    0 14px 28px rgba(0, 18, 37, .3) !important;
  transform: translateZ(0) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card::before {
  position: absolute !important;
  inset: -35% 34% 35% -12% !important;
  z-index: -1 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(118, 220, 255, .2), transparent 67%) !important;
  content: "" !important;
  pointer-events: none !important;
  transform: rotate(-12deg) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card::after {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border: 0 !important;
  background: linear-gradient(112deg, rgba(255, 255, 255, .1), transparent 28%, transparent 75%, rgba(255, 255, 255, .045)) !important;
  content: "" !important;
  pointer-events: none !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card:hover,
html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card:focus-visible {
  border-color: rgba(157, 225, 255, .68) !important;
  box-shadow:
    inset 0 1px rgba(239, 252, 255, .25),
    inset 0 -14px 24px rgba(2, 31, 57, .12),
    0 18px 34px rgba(0, 37, 67, .38) !important;
  filter: brightness(1.06) saturate(1.05) !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card:active {
  transform: translateY(0) scale(.992) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon,
html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon.cars,
html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon.wheels {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  border: 1px solid rgba(206, 239, 255, .28) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .2), transparent 40%),
    linear-gradient(145deg, rgba(113, 190, 231, .3), rgba(20, 83, 126, .34)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 7px 16px rgba(0, 24, 47, .2) !important;
  color: #ffd36f !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon::after {
  position: absolute !important;
  inset: 7px !important;
  border: 1px solid rgba(208, 241, 255, .1) !important;
  border-radius: 15px !important;
  content: "" !important;
  pointer-events: none !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon.wheels {
  color: #f3b6ff !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon .ui-icon {
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 3px 5px rgba(0, 16, 33, .25)) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-copy {
  position: relative !important;
  z-index: 1 !important;
  gap: 6px !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-copy strong {
  color: #f7fcff !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
  line-height: 1.05 !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-copy small {
  color: rgba(222, 243, 255, .74) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-action {
  position: relative !important;
  z-index: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(212, 241, 255, .28) !important;
  border-radius: 50% !important;
  background: rgba(130, 207, 241, .13) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14) !important;
  color: #ecfaff !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card:hover .directory-card-action,
html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card:focus-visible .directory-card-action {
  border-color: rgba(222, 247, 255, .62) !important;
  background: rgba(143, 219, 249, .24) !important;
  transform: translateX(2px) !important;
}

/* Class filter: make the selected tab unmistakable without turning every tab
   into the same bright blue block. */
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs {
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid rgba(105, 177, 219, .18) !important;
  border-radius: 16px !important;
  background: rgba(6, 24, 40, .72) !important;
  box-shadow: inset 0 1px rgba(225, 247, 255, .06), 0 8px 18px rgba(0, 12, 26, .18) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button {
  position: relative !important;
  min-height: 38px !important;
  overflow: hidden !important;
  border: 1px solid rgba(111, 176, 213, .16) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(26, 53, 75, .86), rgba(12, 31, 49, .9)) !important;
  color: rgba(192, 216, 231, .7) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:hover,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:focus-visible {
  border-color: rgba(117, 207, 247, .46) !important;
  background: linear-gradient(145deg, rgba(35, 88, 121, .9), rgba(18, 53, 78, .94)) !important;
  color: #effaff !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button.active,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[aria-pressed="true"] {
  border-color: rgba(139, 224, 255, .8) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(188, 240, 255, .24), transparent 50%),
    linear-gradient(145deg, #1e79ad 0%, #17618f 58%, #144c73 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(239, 252, 255, .3),
    inset 0 -3px 0 rgba(91, 211, 255, .72),
    0 5px 16px rgba(0, 111, 171, .28) !important;
  transform: translateY(-1px) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button.active::after,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[aria-pressed="true"]::after {
  position: absolute !important;
  right: 9px !important;
  bottom: 4px !important;
  left: 9px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(210, 247, 255, .85) !important;
  box-shadow: 0 0 8px rgba(137, 231, 255, .75) !important;
  content: "" !important;
  pointer-events: none !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button .catalog-tab-count {
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(160, 204, 227, .14) !important;
  border-radius: 999px !important;
  background: rgba(7, 22, 36, .56) !important;
  color: #93b5ca !important;
  font-size: 8px !important;
  line-height: 15px !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button.active .catalog-tab-count,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[aria-pressed="true"] .catalog-tab-count {
  border-color: rgba(235, 252, 255, .6) !important;
  background: #d9f6ff !important;
  color: #12527a !important;
  box-shadow: 0 2px 7px rgba(0, 22, 44, .2) !important;
}

/* Final segmented-control polish: only the chosen class carries the blue
   accent; the remaining options stay visually quiet. */
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs {
  padding: 6px !important;
  border: 1px solid rgba(111, 177, 215, .24) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(8, 25, 41, .94), rgba(12, 36, 56, .84)) !important;
  box-shadow: inset 0 1px rgba(226, 247, 255, .07), 0 10px 24px rgba(0, 11, 24, .22) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:not(.active) {
  border-color: rgba(123, 163, 188, .13) !important;
  background: rgba(16, 35, 52, .72) !important;
  background-image: none !important;
  color: #8ba4b5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  transform: none !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:not(.active):hover,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:not(.active):focus-visible {
  border-color: rgba(105, 189, 229, .4) !important;
  background: rgba(28, 67, 91, .9) !important;
  color: #dceff9 !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button.active,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[aria-pressed="true"] {
  border-color: rgba(151, 228, 255, .92) !important;
  background: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  background-image: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(245, 253, 255, .38),
    inset 0 -3px 0 rgba(96, 218, 255, .8),
    0 6px 18px rgba(0, 120, 185, .34) !important;
  transform: translateY(-1px) !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button.active > span,
html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[aria-pressed="true"] > span {
  color: #ffffff !important;
  font-weight: 850 !important;
}

html:not([data-theme="light"]) body main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button:not(.active) .catalog-tab-count {
  border-color: rgba(130, 170, 193, .16) !important;
  background: rgba(4, 18, 30, .55) !important;
  color: #7592a5 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[data-selected="false"] {
  border: 1px solid rgba(123, 163, 188, .13) !important;
  background: rgba(16, 35, 52, .72) !important;
  background-image: none !important;
  color: #8ba4b5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  transform: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[data-selected="true"] {
  border: 1px solid rgba(151, 228, 255, .92) !important;
  background: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  background-image: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(245, 253, 255, .38),
    inset 0 -3px 0 rgba(96, 218, 255, .8),
    0 6px 18px rgba(0, 120, 185, .34) !important;
  transform: translateY(-1px) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[data-selected="false"] .catalog-tab-count {
  border-color: rgba(130, 170, 193, .16) !important;
  background: rgba(4, 18, 30, .55) !important;
  color: #7592a5 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-class-tabs > button[data-selected="true"] .catalog-tab-count {
  border-color: rgba(235, 252, 255, .68) !important;
  background: #d9f6ff !important;
  color: #12527a !important;
  box-shadow: 0 2px 7px rgba(0, 22, 44, .2) !important;
}

@media (max-width: 380px) {
  html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card {
    grid-template-columns: 52px minmax(0, 1fr) 34px !important;
    gap: 12px !important;
    padding-inline: 12px !important;
  }

  html:not([data-theme="light"]) body main.app-shell.directory-screen .directory-overview .directory-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars::after {
  display: none !important;
  content: none !important;
  position: absolute !important;
  inset: 6px !important;
  border: 0 !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview {
  position: absolute !important;
  inset: -8% -8% !important;
  z-index: 1 !important;
  width: 116% !important;
  height: 116% !important;
  margin: 0 !important;
  transform: translateX(-4%) scale(1.04) !important;
  animation: dzo-directory-car-preview-in .76s ease both !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview.is-leaving {
  z-index: 2 !important;
  animation: dzo-directory-car-preview-out .76s ease forwards !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview.is-entering {
  z-index: 3 !important;
  animation: dzo-directory-car-preview-in .76s ease both !important;
}

@keyframes dzo-directory-car-preview-in {
  from { opacity: 0; transform: translateX(4%) scale(.98); }
  to { opacity: 1; transform: translateX(-4%) scale(1.04); }
}

@keyframes dzo-directory-car-preview-out {
  from { opacity: 1; transform: translateX(-4%) scale(1.04); }
  to { opacity: 0; transform: translateX(-7%) scale(1.01); }
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo {
  border-right: 0 !important;
  background: linear-gradient(180deg, rgba(29, 63, 85, .34), rgba(11, 34, 54, .42)) !important;
  background-image: linear-gradient(180deg, rgba(29, 63, 85, .34), rgba(11, 34, 54, .42)) !important;
  box-shadow: inset 0 1px rgba(201, 237, 251, .08) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media > .secure-image {
  background: linear-gradient(180deg, rgba(31, 66, 88, .24), rgba(10, 31, 50, .34)) !important;
  background-image: linear-gradient(180deg, rgba(31, 66, 88, .24), rgba(10, 31, 50, .34)) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px rgba(208, 239, 250, .07), inset 0 -20px 32px rgba(0, 10, 22, .14) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media > .secure-image {
  background: linear-gradient(180deg, rgba(29, 63, 85, .18), rgba(10, 31, 50, .25)) !important;
  background-image: linear-gradient(180deg, rgba(29, 63, 85, .18), rgba(10, 31, 50, .25)) !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: clamp(170px, 29vw, 220px) auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  width: 100% !important;
  height: clamp(170px, 29vw, 220px) !important;
  min-height: clamp(170px, 29vw, 220px) !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(166, 229, 255, .18) !important;
  border-radius: 22px 22px 0 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image img:not(.catalog-normalization-source) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 14px 16px 17px !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-model-note {
  display: -webkit-box !important;
  max-height: 6.75em !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #dzo-mini-root main.app-shell.directory-screen :is(.catalog-car-photo, .catalog-detail-media, .catalog-artwork-media, .catalog-item-photo, .catalog-item-media, .catalog-wheel-photo, .catalog-wheel-admin-thumb, .catalog-admin-thumb, .catalog-admin-item-thumb) .secure-image img:not(.catalog-normalization-source) {
  filter: none !important;
}

/* DZO Hub rewards: show every available item in the compact claim tiles. */
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source {
  min-height: 0 !important;
  align-items: start !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy {
  align-self: start !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  gap: 6px 7px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-list {
  grid-column: 1 / -1 !important;
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
  overflow: visible !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 27px !important;
  gap: 7px !important;
  color: #f1f8ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art {
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(143, 220, 255, .4) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(36, 136, 204, .45), rgba(9, 39, 81, .88)) !important;
  color: #c9eeff !important;
  font-size: 12px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 2px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-items-empty {
  grid-column: 1 / -1 !important;
  color: #c0d8ed !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* Account switching: make the selected profile unmistakable and removals deliberate. */
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child[aria-current="true"] {
  border-color: rgba(120, 222, 255, .76) !important;
  background: linear-gradient(120deg, rgba(14, 142, 220, .74), rgba(32, 78, 192, .62)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 14px rgba(28, 146, 255, .18) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child > span {
  display: grid !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 3px !important;
  text-align: left !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child strong,
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-remove {
  display: grid !important;
  width: 36px !important;
  min-height: 52px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 132, 151, .2) !important;
  border-radius: 13px !important;
  background: rgba(99, 27, 48, .32) !important;
  color: #ffc1cc !important;
  font-size: 19px !important;
  cursor: pointer !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-remove:hover:not(:disabled) {
  border-color: rgba(255, 132, 151, .62) !important;
  background: rgba(133, 33, 57, .62) !important;
}

html body .dzo-hub-account-delete-backdrop {
  position: fixed !important;
  z-index: 10050 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
  background: rgba(1, 9, 24, .72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html body .dzo-hub-account-delete-dialog {
  width: min(100%, 430px) !important;
  box-sizing: border-box !important;
  padding: 23px !important;
  border: 1px solid rgba(118, 205, 255, .54) !important;
  border-radius: 25px !important;
  background: linear-gradient(145deg, #123e68, #071a35 75%) !important;
  box-shadow: 0 24px 70px rgba(0, 5, 22, .62), inset 0 1px rgba(255,255,255,.14) !important;
  color: #f2f8ff !important;
}

html body .dzo-hub-account-delete-mark {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border: 1px solid rgba(122, 213, 255, .55) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #169fe8, #244ee6) !important;
  color: white !important;
  font-size: 21px !important;
  font-weight: 900 !important;
}

html body .dzo-hub-account-delete-dialog > small {
  display: block !important;
  margin-top: 15px !important;
  color: #7ddcff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

html body .dzo-hub-account-delete-dialog h2 {
  margin: 7px 0 9px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

html body .dzo-hub-account-delete-dialog p {
  margin: 0 !important;
  color: #c4def4 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

html body .dzo-hub-account-delete-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 20px !important;
}

html body .dzo-hub-account-delete-actions button {
  min-height: 46px !important;
  border: 1px solid rgba(151, 206, 245, .28) !important;
  border-radius: 14px !important;
  background: rgba(13, 43, 74, .82) !important;
  color: #ecf7ff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

html body .dzo-hub-account-delete-actions button.is-danger {
  border-color: rgba(255, 136, 153, .58) !important;
  background: linear-gradient(120deg, #ba3c59, #8a2445) !important;
  color: #fff !important;
}

html body .dzo-hub-account-delete-actions button:disabled {
  cursor: wait !important;
  opacity: .65 !important;
}

@media (max-width: 420px) {
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source { padding: 8px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > small { font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item { grid-template-columns: 23px minmax(0,1fr) !important; gap: 5px !important; font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art { width: 23px !important; height: 23px !important; }
}

/* DZO Hub account switcher and daily reward refresh timer. */
html body .admin-hub-store-screen .admin-hub-store-nav {
  grid-template-columns: 40px minmax(0, 1fr) minmax(132px, 198px) !important;
}

html body .admin-hub-store-screen .dzo-hub-account-switcher { position: relative; min-width: 0; justify-self: end; }

html body .admin-hub-store-screen .dzo-hub-profile-trigger {
  display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important;
  justify-content: flex-start !important; gap: 8px !important; padding: 5px 9px !important; text-align: left;
}

html body .admin-hub-store-screen .dzo-hub-profile-trigger > .avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(151, 220, 255, .54); border-radius: 50%; overflow: hidden;
}

html body .admin-hub-store-screen .dzo-hub-profile-copy { display: grid; min-width: 0; gap: 2px; flex: 1; }

html body .admin-hub-store-screen .dzo-hub-profile-copy strong,
html body .admin-hub-store-screen .dzo-hub-profile-copy small {
  display: block; overflow: hidden; color: #f3f9ff; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap;
}

html body .admin-hub-store-screen .dzo-hub-profile-copy small { color: #a9cce3; font-size: 8px; font-weight: 650; }
html body .admin-hub-store-screen .dzo-hub-profile-chevron { flex: 0 0 auto; color: #aee9ff; font-size: 15px; line-height: 1; }

html body .admin-hub-store-screen .dzo-hub-account-menu {
  position: absolute; z-index: 10030; top: calc(100% + 8px); right: 0; display: grid;
  width: min(270px, calc(100vw - 34px)); gap: 6px; padding: 11px;
  border: 1px solid rgba(119, 201, 242, .36); border-radius: 18px;
  background: linear-gradient(150deg, rgba(15, 47, 75, .99), rgba(5, 22, 42, .99));
  box-shadow: 0 18px 42px rgba(0, 8, 24, .48), inset 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(18px);
}

html body .admin-hub-store-screen .dzo-hub-account-menu > small {
  padding: 4px 7px 7px; color: #85d6ff; font-size: 9px; font-weight: 900; letter-spacing: .11em;
}

html body .admin-hub-store-screen .dzo-hub-account-menu > button {
  display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid rgba(130, 181, 214, .16); border-radius: 12px;
  color: #e9f6ff; background: rgba(10, 33, 57, .7); text-align: left; cursor: pointer;
}

html body .admin-hub-store-screen .dzo-hub-account-menu > button[aria-current="true"] {
  border-color: rgba(107, 207, 255, .54); background: linear-gradient(110deg, rgba(16, 127, 201, .55), rgba(31, 78, 176, .5));
}

html body .admin-hub-store-screen .dzo-hub-account-menu > button span { display: grid; gap: 3px; }
html body .admin-hub-store-screen .dzo-hub-account-menu > button strong { font-size: 11px; }
html body .admin-hub-store-screen .dzo-hub-account-menu > button span small { color: #a8c5da; font-size: 9px; }
html body .admin-hub-store-screen .dzo-hub-account-menu > button b { color: #7be0ff; font-size: 15px; }

html body .admin-hub-store-screen .dzo-hub-reward-center-action {
  display: grid !important; justify-items: center; gap: 3px; padding-block: 9px !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action > span { font-size: inherit; line-height: 1.2; }

html body .admin-hub-store-screen .dzo-hub-reward-center-action > small {
  color: rgba(237, 249, 255, .88); font-size: 9px; font-weight: 700; letter-spacing: .025em; line-height: 1.2;
}

@media (max-width: 480px) {
  html body .admin-hub-store-screen .admin-hub-store-nav { grid-template-columns: 38px minmax(0, 1fr) minmax(116px, 142px) !important; }
  html body .admin-hub-store-screen .dzo-hub-profile-trigger { gap: 6px !important; padding-inline: 6px !important; }
  html body .admin-hub-store-screen .dzo-hub-profile-trigger > .avatar { flex-basis: 30px; width: 30px; height: 30px; }
  html body .admin-hub-store-screen .dzo-hub-profile-copy strong { font-size: 9px; }
  html body .admin-hub-store-screen .dzo-hub-profile-copy small { font-size: 7px; }
  html body .admin-hub-store-screen .dzo-hub-reward-center-action > small { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .admin-hub-store-screen .dzo-hub-profile-trigger { transition: none !important; }
}

/* DZO Hub: faster catalog painting and compact account controls. */
html body .admin-hub-store-screen .dzo-hub-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  gap: 5px;
}

html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(130, 181, 214, .16);
  border-radius: 13px;
  color: #e9f6ff;
  background: rgba(10, 33, 57, .7);
  text-align: left;
  cursor: pointer;
}

html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child[aria-current="true"] {
  border-color: rgba(107, 207, 255, .54);
  background: linear-gradient(110deg, rgba(16, 127, 201, .55), rgba(31, 78, 176, .5));
}

html body .admin-hub-store-screen .dzo-hub-account-row .avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(151, 220, 255, .44);
  border-radius: 50%;
  overflow: hidden;
}

html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child > span { display: grid; min-width: 0; gap: 3px; }
html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child strong,
html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child strong { font-size: 10px; }
html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child small { color: #a8c5da; font-size: 8px; }
html body .admin-hub-store-screen .dzo-hub-account-row > button:first-child b { margin-left: auto; color: #7be0ff; font-size: 14px; }

html body .admin-hub-store-screen .dzo-hub-account-row > .dzo-hub-account-remove {
  display: grid;
  width: 34px;
  min-height: 34px;
  align-self: center;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 141, 155, .25);
  border-radius: 11px;
  color: #ffb9c0;
  background: rgba(109, 38, 63, .28);
  font-size: 18px;
  cursor: pointer;
}

html body .admin-hub-store-screen .dzo-hub-account-row > .dzo-hub-account-remove:disabled { opacity: .55; cursor: wait; }

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

html body .admin-hub-store-screen .admin-hub-store-offer-image {
  content-visibility: auto;
}

html body .admin-hub-store-screen .dzo-hub-reward-center button,
html body .admin-hub-store-screen .dzo-hub-store-categories button,
html body .admin-hub-store-screen .dzo-hub-store-toolbar-actions button {
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}

html body .admin-hub-store-screen .dzo-hub-reward-center button:not(:disabled):hover,
html body .admin-hub-store-screen .dzo-hub-store-categories button:not(:disabled):hover,
html body .admin-hub-store-screen .dzo-hub-store-toolbar-actions button:not(:disabled):hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

html body .admin-hub-store-screen .dzo-hub-reward-center button:not(:disabled):active,
html body .admin-hub-store-screen .dzo-hub-store-categories button:not(:disabled):active,
html body .admin-hub-store-screen .dzo-hub-store-toolbar-actions button:not(:disabled):active { transform: scale(.98); }

html body .admin-hub-store-screen .dzo-hub-reward-center button:focus-visible,
html body .admin-hub-store-screen .dzo-hub-store-categories button:focus-visible,
html body .admin-hub-store-screen .dzo-hub-store-toolbar-actions button:focus-visible,
html body .admin-hub-store-screen .dzo-hub-account-menu button:focus-visible {
  outline: 2px solid #68d2ff;
  outline-offset: 2px;
}

html body .admin-hub-store-screen .dzo-hub-floating-cart {
  min-width: 190px;
  min-height: 58px;
  gap: 11px;
  padding-inline: 19px;
  border-radius: 20px;
  font-size: 13px;
}

@media (max-width: 480px) {
  html body .admin-hub-store-screen .dzo-hub-floating-cart { min-width: 170px; min-height: 56px; padding-inline: 16px; }
  html body .admin-hub-store-screen .dzo-hub-account-row { grid-template-columns: minmax(0, 1fr) 32px; }
  html body .admin-hub-store-screen .dzo-hub-account-row > .dzo-hub-account-remove { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .admin-hub-store-screen .dzo-hub-reward-center button,
  html body .admin-hub-store-screen .dzo-hub-store-categories button,
  html body .admin-hub-store-screen .dzo-hub-store-toolbar-actions button { transition: none; }
}

/* Store overview: one account selector first, followed directly by the rewards card. */
html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav.is-store-overview {
  position: relative !important;
  z-index: 10020 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  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-nav.is-store-overview > button:first-child,
html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav.is-store-overview > .admin-hub-store-nav-title {
  display: none !important;
}

html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav.is-store-overview > .dzo-hub-account-switcher {
  position: relative !important;
  z-index: 10030 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-trigger {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 64px !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  padding: 9px 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(134,229,255,.86) !important;
  border-radius: 20px !important;
  background: linear-gradient(115deg, #087ecb 0%, #0756bf 58%, #294bd0 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 7px 16px rgba(0,30,99,.24) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-trigger > .avatar {
  box-sizing: border-box !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-copy {
  flex: 1 1 auto !important;
  gap: 3px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-copy strong { font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-copy small { font-size: 9px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-chevron { font-size: 18px !important; }

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu {
  position: absolute !important;
  z-index: 10050 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(62dvh, 440px) !important;
  gap: 7px !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(134,224,255,.62) !important;
  border-radius: 19px !important;
  background: linear-gradient(150deg, rgba(10,52,99,.99), rgba(4,24,52,.99)) !important;
  box-shadow: 0 18px 42px rgba(0,8,24,.56), inset 0 1px rgba(255,255,255,.1) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu > small {
  display: block !important;
  padding: 3px 5px 5px !important;
  color: #a6e8ff !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148,209,240,.25) !important;
  border-radius: 14px !important;
  background: rgba(10,37,72,.82) !important;
  color: #f4faff !important;
  text-align: left !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child[aria-current="true"] {
  border-color: rgba(147,232,255,.82) !important;
  background: linear-gradient(110deg, rgba(15,132,205,.9), rgba(40,82,201,.86)) !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child > .avatar {
  box-sizing: border-box !important;
  grid-column: 1 !important;
  flex: none !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(165,226,255,.68) !important;
  border-radius: 50% !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child > span:not(.avatar) {
  display: grid !important;
  grid-column: 2 !important;
  min-width: 0 !important;
  gap: 3px !important;
  text-align: left !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child strong,
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child strong { color: #fff !important; font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child small { color: #c4e5f7 !important; font-size: 10px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > button:first-child b {
  grid-column: 3 !important;
  margin: 0 !important;
  color: #aaf4ff !important;
  font-size: 17px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-row > .dzo-hub-account-remove {
  box-sizing: border-box !important;
  display: grid !important;
  width: 40px !important;
  min-height: 40px !important;
  align-self: center !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,160,180,.45) !important;
  border-radius: 13px !important;
  background: rgba(111,36,64,.42) !important;
  color: #ffdce5 !important;
  font-size: 20px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu > button {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(144,215,249,.4) !important;
  border-radius: 14px !important;
  background: linear-gradient(115deg, rgba(13,107,172,.82), rgba(31,76,161,.82)) !important;
  color: #f3fbff !important;
  text-align: left !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu > button > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu > button strong { color: #fff !important; font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu > button span small { color: #c6e7fa !important; font-size: 10px !important; }

/* Make the reward summary match the reference proportions and keep the catalog controls below it. */
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-overview {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 35%) !important;
  min-height: 132px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-icon { width: 44px !important; height: 44px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy small { font-size: 8px !important; letter-spacing: .07em !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy h3 { font-size: clamp(18px, 5vw, 23px) !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy p { max-width: 245px !important; font-size: 11px !important; line-height: 1.36 !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-hero-art { height: 128px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-calendar-art { width: 82px !important; height: 106px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-cards .dzo-hub-reward-source {
  min-height: 140px !important;
  gap: 7px !important;
  padding: 10px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-heading { min-height: 34px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-cards .dzo-hub-reward-item-list { gap: 4px !important; }
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-cards .dzo-hub-reward-item {
  min-height: 23px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
html body main.app-shell.admin-hub-store-screen .admin-hub-store-toolbar.dzo-hub-store-after-rewards {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 8px 0 13px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-store-after-rewards .admin-hub-store-toolbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-store-after-rewards button {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}
html body main.app-shell.admin-hub-store-screen .dzo-hub-floating-cart { z-index: 10010 !important; }
html body main.app-shell.admin-hub-store-screen { padding-bottom: max(120px, calc(90px + env(safe-area-inset-bottom))) !important; }

@media (max-width: 480px) {
  html body main.app-shell.admin-hub-store-screen .admin-hub-store-nav.is-store-overview { margin-bottom: 9px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-trigger { min-height: 58px !important; padding: 7px 10px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-profile-trigger > .avatar { flex-basis: 38px !important; width: 38px !important; height: 38px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-account-menu { width: min(380px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-overview { grid-template-columns: minmax(0, 1fr) minmax(102px, 34%) !important; min-height: 122px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 7px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-icon { width: 38px !important; height: 38px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-copy p { font-size: 10px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-calendar-art { width: 72px !important; height: 96px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-cards .dzo-hub-reward-source { min-height: 132px !important; padding: 8px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-heading { grid-template-columns: 26px minmax(0, 1fr) 31px !important; gap: 4px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon { width: 26px !important; height: 26px !important; }
}

/* DZO Hub: brighter reward summary, quiet inactive tabs, one clear blue selection. */
html body .admin-hub-store-screen .dzo-hub-reward-center {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(71, 180, 255, .48) !important;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(30, 126, 255, .32), transparent 42%),
    radial-gradient(ellipse at 3% 100%, rgba(0, 181, 255, .16), transparent 48%),
    linear-gradient(138deg, #123d69 0%, #0c2e52 48%, #081d38 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 16px 34px rgba(0, 8, 24, .3), 0 0 24px rgba(23, 117, 255, .1) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: -40% auto -40% -65% !important;
  width: 42% !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, transparent, rgba(82, 199, 255, .09), transparent) !important;
  content: "" !important;
  pointer-events: none !important;
  transform: rotate(18deg) !important;
  animation: dzo-hub-reward-glint 8s ease-in-out infinite !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-icon {
  border-color: rgba(163, 223, 255, .68) !important;
  background: linear-gradient(145deg, #32baff, #2872ff 62%, #4149f5) !important;
  box-shadow: 0 8px 22px rgba(15, 103, 255, .34), inset 0 1px rgba(255, 255, 255, .3) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-copy small {
  color: #83d9ff !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-copy p {
  color: #c0d8ed !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source {
  border-color: rgba(131, 195, 235, .25) !important;
  background: linear-gradient(145deg, rgba(6, 29, 54, .82), rgba(8, 35, 65, .72)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source.is-free {
  border-color: rgba(69, 203, 255, .38) !important;
  background: linear-gradient(145deg, rgba(12, 76, 118, .7), rgba(7, 34, 65, .82)) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source.is-calendar {
  border-color: rgba(104, 157, 255, .32) !important;
  background: linear-gradient(145deg, rgba(35, 64, 135, .58), rgba(9, 34, 69, .82)) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source-icon,
html body .admin-hub-store-screen .dzo-hub-reward-source.is-calendar .dzo-hub-reward-source-icon {
  border-color: rgba(134, 215, 255, .42) !important;
  background: rgba(31, 132, 210, .3) !important;
  color: #c8f0ff !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source-copy small {
  color: #e5f3ff !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source-copy strong {
  display: grid !important;
  min-width: 25px !important;
  height: 25px !important;
  place-items: center !important;
  border: 1px solid rgba(144, 212, 255, .25) !important;
  border-radius: 999px !important;
  background: rgba(3, 22, 43, .48) !important;
  color: #fff !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action:not(:disabled) {
  border-color: rgba(151, 224, 255, .65) !important;
  background: linear-gradient(110deg, #17b5f5, #176cff 68%, #3154f5) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 8px 20px rgba(10, 91, 235, .32) !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action:disabled {
  border-color: rgba(134, 175, 208, .16) !important;
  background: linear-gradient(145deg, rgba(29, 54, 78, .8), rgba(15, 34, 56, .88)) !important;
  color: #b0c5d7 !important;
}

html body .admin-hub-store-screen .dzo-hub-store-primary-tabs button,
html body .admin-hub-store-screen .dzo-hub-store-reward-tabs button {
  border-color: rgba(159, 187, 213, .14) !important;
  color: #b5c5d6 !important;
  background: linear-gradient(145deg, rgba(26, 42, 62, .86), rgba(12, 25, 43, .9)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
}

html body .admin-hub-store-screen .dzo-hub-store-primary-tabs button:is(.is-active, [aria-selected="true"]),
html body .admin-hub-store-screen .dzo-hub-store-reward-tabs button:is(.is-active, [aria-selected="true"]) {
  border-color: rgba(112, 211, 255, .72) !important;
  color: #fff !important;
  background: linear-gradient(115deg, #16aef0, #176cf5 68%, #3152ec) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 5px 16px rgba(13, 91, 221, .28) !important;
}

html body .admin-hub-store-screen .admin-hub-store-categories button {
  border-color: rgba(156, 180, 202, .13) !important;
  color: #b1c0d1 !important;
  background: linear-gradient(145deg, rgba(24, 39, 58, .88), rgba(10, 23, 39, .94)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04) !important;
}

html body .admin-hub-store-screen .admin-hub-store-categories button:is(.is-active, [aria-selected="true"]) {
  border-color: rgba(120, 219, 255, .82) !important;
  color: #fff !important;
  background: linear-gradient(115deg, #12b3f5, #176cf5 66%, #364df0) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 0 18px rgba(25, 128, 255, .28) !important;
}

html body .admin-hub-store-screen .admin-hub-store-categories button small {
  border-color: rgba(178, 207, 229, .12) !important;
  color: #c1cfde !important;
  background: rgba(3, 15, 29, .56) !important;
}

html body .admin-hub-store-screen .admin-hub-store-categories button:is(.is-active, [aria-selected="true"]) small {
  border-color: rgba(230, 248, 255, .2) !important;
  color: #fff !important;
  background: rgba(3, 37, 83, .35) !important;
}

/* Keep the support shortcut geometrically identical on the home and store screens. */
html body .support-fab.support-fab,
html body:has(#dzo-home-screen#dzo-home-screen.app-shell.home-screen) .support-fab,
html body:has(.admin-hub-store-screen) .support-fab {
  position: fixed !important;
  z-index: 10020 !important;
  right: max(14px, calc((100vw - 560px) / 2 + 14px)) !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;
  box-sizing: border-box !important;
  display: grid !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 2px solid rgba(177, 230, 255, .9) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(145deg, #24b5ff, #0875ed 72%, #174ee3) !important;
  background-image: linear-gradient(145deg, #24b5ff, #0875ed 72%, #174ee3) !important;
  box-shadow: 0 5px 16px rgba(0, 15, 44, .38), inset 0 1px rgba(255, 255, 255, .3) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

html body .support-fab.support-fab .support-fab-icon,
html body:has(#dzo-home-screen#dzo-home-screen.app-shell.home-screen) .support-fab .support-fab-icon,
html body:has(.admin-hub-store-screen) .support-fab .support-fab-icon {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  line-height: 0 !important;
  filter: none !important;
}

html body .support-fab.support-fab .support-fab-icon > .ui-icon,
html body:has(#dzo-home-screen#dzo-home-screen.app-shell.home-screen) .support-fab .support-fab-icon > .ui-icon,
html body:has(.admin-hub-store-screen) .support-fab .support-fab-icon > .ui-icon {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  stroke-width: 2.2px !important;
  transform: none !important;
  filter: none !important;
}

html body .support-fab.support-fab::before,
html body .support-fab.support-fab::after,
html body .support-fab.support-fab .support-fab-ripple,
html body:has(#dzo-home-screen#dzo-home-screen.app-shell.home-screen) .support-fab::after,
html body:has(#dzo-home-screen#dzo-home-screen.app-shell.home-screen) .support-fab .support-fab-ripple,
html body:has(.admin-hub-store-screen) .support-fab::after,
html body:has(.admin-hub-store-screen) .support-fab .support-fab-ripple {
  display: none !important;
  content: none !important;
  animation: none !important;
}

@keyframes dzo-hub-reward-glint {
  0%, 68%, 100% { left: -65%; opacity: 0; }
  75% { opacity: .9; }
  92% { left: 125%; opacity: 0; }
}

@media (max-width: 620px) {
  html body .admin-hub-store-screen .dzo-hub-reward-center-copy { align-items: flex-start !important; }
  html body .admin-hub-store-screen .dzo-hub-reward-source { min-height: 60px !important; }
  html body .admin-hub-store-screen .dzo-hub-reward-center-action { min-height: 48px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .admin-hub-store-screen .dzo-hub-reward-center::before { animation: none !important; }
}

/* Keep long, endlessly scrolling feed lists responsive in Telegram WebView. */
html body .feed-screen .feed-list > .feed-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 690px;
}

/* 2026-10-30 feed polish: keep controls below Telegram's floating top dock,
   reserve the accent for the selected tab, and tighten the post rhythm. */
html:not([data-theme="light"]) body main.feed-screen > .feed-tabs {
  position: relative !important;
  inset: auto !important;
  margin: clamp(84px, 11vh, 112px) auto 12px !important;
  padding: 5px !important;
  border: 1px solid rgba(113, 184, 232, .24) !important;
  border-radius: 18px !important;
  background: rgba(5, 25, 49, .82) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 8, 24, .3) !important;
}

html:not([data-theme="light"]) body main.feed-screen > .feed-tabs > button {
  min-height: 42px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #b9cadd !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}

html:not([data-theme="light"]) body main.feed-screen > .feed-tabs > button:not(.active):is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: rgba(157, 193, 222, .08) !important;
  color: #e6f3ff !important;
}

html:not([data-theme="light"]) body main.feed-screen > .feed-tabs > button.active {
  border-color: rgba(114, 203, 255, .54) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #168dd1, #155ca8) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 5px 13px rgba(0, 65, 127, .3) !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-card-header, .feed-author, .feed-author > span:last-child, .feed-author-name, .feed-author-meta) {
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-author::before,
html:not([data-theme="light"]) body main.feed-screen .feed-author::after {
  content: none !important;
  display: none !important;
}

html:not([data-theme="light"]) body main.feed-screen :is(.feed-follow-button.is-following, .feed-profile-follow.is-following) {
  border-color: rgba(160, 183, 203, .22) !important;
  background: linear-gradient(145deg, rgba(75, 91, 107, .72), rgba(45, 59, 75, .82)) !important;
  color: #d0dce7 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
}

html:not([data-theme="light"]) body main.feed-screen > .feed-list {
  gap: 3px !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-card-header {
  min-height: 54px !important;
  padding-block: 5px !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-author {
  padding-block: 3px !important;
}

html:not([data-theme="light"]) body main.feed-screen .feed-caption {
  padding-block: 7px 9px !important;
}

/* Offscreen store cards defer paint and image decode until they approach view. */
html body .admin-hub-store-screen .admin-hub-store-offer {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

html body .event-roulette-spin-button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 9px !important;
  row-gap: 2px !important;
  padding: 9px 16px !important;
}

html body .event-roulette-spin-button > .ui-icon {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  justify-self: center !important;
}

html body .event-roulette-spin-button > span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: left !important;
}

html body .event-roulette-spin-button > small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: rgba(239, 249, 255, .88) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

html body .event-roulette-prize,
html body .event-roulette-prize.is-car,
html body .event-roulette-prize:not(.is-car) {
  border-color: rgba(69, 166, 255, .42) !important;
  background: linear-gradient(145deg, rgba(19, 81, 155, .84), rgba(7, 34, 86, .94)) !important;
}

html body .event-roulette-prize-art {
  color: #74cfff !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) body main.feed-screen > .feed-tabs > button {
    transition: none !important;
  }
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-hero {
  display: grid !important;
  grid-template-rows: clamp(210px, 58vw, 300px) auto !important;
  gap: 0 !important;
  min-height: 0 !important;
  place-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(130, 211, 247, .34) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #1d628f 0%, #18567e 48%, #132e49 100%) !important;
  box-shadow: inset 0 1px rgba(229, 249, 255, .12), 0 18px 34px rgba(3, 18, 31, .28) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-media {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  padding: 12px 12px 2px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 23px 23px 0 0 !important;
  background:
    radial-gradient(circle at 50% 64%, rgba(102, 211, 249, .18), transparent 48%),
    linear-gradient(180deg, rgba(46, 123, 169, .42), rgba(12, 47, 73, .12)) !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-media > .secure-image {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-media > .secure-image img:not(.catalog-normalization-source) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "kicker share"
    "title share"
    "summary share" !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px 14px 15px !important;
  border: 0 !important;
  border-top: 1px solid rgba(178, 232, 255, .2) !important;
  border-radius: 0 0 23px 23px !important;
  background: linear-gradient(145deg, rgba(16, 34, 55, .97), rgba(13, 25, 43, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-kicker {
  grid-area: kicker !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-kicker .catalog-exchange-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 21px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(112, 245, 191, .42) !important;
  border-radius: 999px !important;
  background: rgba(29, 164, 119, .16) !important;
  color: #7af5c3 !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-title-line {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-title-line h2 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f5fbff !important;
  font-size: clamp(26px, 8vw, 36px) !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  line-height: .95 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-title-line .catalog-class-badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(131, 212, 249, .42) !important;
  border-radius: 999px !important;
  background: rgba(74, 157, 204, .19) !important;
  color: #c5edff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-summary {
  grid-area: summary !important;
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  gap: 6px !important;
  margin: 10px 0 0 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-summary > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(137, 197, 229, .18) !important;
  border-radius: 8px !important;
  background: rgba(36, 88, 124, .28) !important;
  color: rgba(220, 243, 253, .75) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-summary > span b {
  margin-right: 3px !important;
  color: #f2fbff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-summary .catalog-admin-skin-summary {
  border-color: rgba(255, 211, 117, .28) !important;
  background: rgba(191, 125, 35, .13) !important;
  color: #ffda88 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title .catalog-share-button-inline {
  grid-area: share !important;
  position: static !important;
  align-self: center !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 104px !important;
  min-height: 38px !important;
  margin: 0 0 0 10px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(152, 227, 255, .54) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #2779aa, #15527d) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 8px 18px rgba(4, 25, 43, .3) !important;
  color: #f2fbff !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title .catalog-share-button-inline .ui-icon {
  width: 18px !important;
  height: 18px !important;
  padding: 3px !important;
  border: 1px solid rgba(230, 250, 255, .42) !important;
  border-radius: 50% !important;
  background: rgba(3, 43, 70, .3) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title .catalog-share-button-inline:hover,
html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title .catalog-share-button-inline:focus-visible {
  border-color: rgba(218, 248, 255, .82) !important;
  background: linear-gradient(145deg, #3b9ed1, #1c6595) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 10px 22px rgba(24, 142, 201, .3) !important;
}

@media (max-width: 360px) {
  html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "kicker"
      "title"
      "summary"
      "share" !important;
    gap: 0 !important;
  }

  html body #dzo-mini-root main.app-shell.directory-screen:has(.catalog-detail) .catalog-detail-title .catalog-share-button-inline {
    justify-self: start !important;
    margin: 11px 0 0 !important;
  }
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: clamp(170px, 29vw, 220px) auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  width: 100% !important;
  height: clamp(170px, 29vw, 220px) !important;
  min-height: clamp(170px, 29vw, 220px) !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(166, 229, 255, .18) !important;
  border-radius: 22px 22px 0 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image img:not(.catalog-normalization-source) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 14px 16px 17px !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-model-note {
  display: -webkit-box !important;
  max-height: 6.75em !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #dzo-mini-root main.app-shell.directory-screen :is(.catalog-car-photo, .catalog-detail-media, .catalog-artwork-media, .catalog-item-photo, .catalog-item-media, .catalog-wheel-photo, .catalog-wheel-admin-thumb, .catalog-admin-thumb, .catalog-admin-item-thumb) .secure-image img:not(.catalog-normalization-source) {
  filter: none !important;
}

/* Catalog preview polish: larger media, no artificial lower shadow/chin, and
   one stable media slot for every car, skin, and part. */
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-card {
  height: 184px !important;
  min-height: 184px !important;
  overflow: hidden !important;
  border: 1px solid rgba(121, 201, 239, .3) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 9% 12%, rgba(101, 203, 255, .12), transparent 34%),
    linear-gradient(145deg, rgba(26, 105, 151, .94), rgba(14, 59, 91, .98)) !important;
  box-shadow: inset 0 1px rgba(233, 249, 255, .13), 0 12px 25px rgba(0, 17, 34, .24) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-open {
  display: grid !important;
  grid-template-columns: minmax(136px, 43%) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 184px !important;
  min-height: 184px !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 184px !important;
  min-width: 0 !important;
  min-height: 184px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid rgba(166, 229, 255, .22) !important;
  border-radius: 22px 0 0 22px !important;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(115, 209, 255, .23), transparent 59%),
    linear-gradient(180deg, rgba(9, 41, 66, .28), rgba(7, 35, 59, .64)) !important;
  box-shadow: inset -1px 0 rgba(255, 255, 255, .06) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image::after {
  display: none !important;
  content: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo > .secure-image,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image img,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo > .secure-image img {
  display: grid !important;
  width: 100% !important;
  height: 184px !important;
  min-width: 0 !important;
  min-height: 184px !important;
  place-items: center !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-copy {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-content: center !important;
  gap: 6px !important;
  padding: 14px 13px !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-model-note {
  display: -webkit-box !important;
  min-width: 0 !important;
  max-height: 25px !important;
  overflow: hidden !important;
  color: rgba(224, 244, 255, .72) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin-top: 1px !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-card-meta > span {
  padding: 4px 7px !important;
  border: 1px solid rgba(165, 225, 250, .22) !important;
  border-radius: 999px !important;
  background: rgba(5, 34, 57, .34) !important;
  color: rgba(231, 248, 255, .82) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-quick-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Detail artwork: the same image frame is used by every skin and part. */
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-card {
  display: flex !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(118, 204, 246, .34) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 80% 10%, rgba(105, 205, 255, .17), transparent 36%),
    linear-gradient(145deg, rgba(31, 111, 158, .92), rgba(10, 49, 78, .98)) !important;
  box-shadow: inset 0 1px rgba(240, 252, 255, .14), 0 14px 28px rgba(0, 17, 35, .24) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media > .secure-image,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media > .secure-image img {
  width: 100% !important;
  min-width: 0 !important;
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  place-items: center !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-photo {
  position: relative !important;
  order: 1 !important;
  display: grid !important;
  isolation: isolate !important;
  background: radial-gradient(ellipse at 50% 73%, rgba(121, 214, 255, .2), transparent 63%) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-copy {
  order: 2 !important;
  min-height: 94px !important;
  padding: 13px 16px 15px !important;
  border-top: 1px solid rgba(186, 230, 249, .18) !important;
  border-radius: 0 !important;
  background: rgba(8, 39, 63, .74) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media > .secure-image > img:not(.catalog-normalization-source) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 16px 16px rgba(0, 18, 34, .48)) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-admin-skin-grid .catalog-artwork-card {
  min-width: 0 !important;
}

/* Detail tabs mirror the class filter: inactive tabs are quiet, selected is
   the only blue tab, including when older CSS has an .active rule. */
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 6px !important;
  border: 1px solid rgba(111, 177, 215, .24) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(8, 25, 41, .94), rgba(12, 36, 56, .84)) !important;
  box-shadow: inset 0 1px rgba(226, 247, 255, .07), 0 10px 24px rgba(0, 11, 24, .22) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button:not(.active) {
  min-width: 0 !important;
  min-height: 40px !important;
  border: 1px solid rgba(123, 163, 188, .13) !important;
  border-radius: 11px !important;
  background: rgba(16, 35, 52, .72) !important;
  background-image: none !important;
  color: #8ba4b5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  transform: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button:hover,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button:focus-visible {
  border-color: rgba(105, 189, 229, .4) !important;
  background: rgba(28, 67, 91, .9) !important;
  color: #dceff9 !important;
  outline: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button.active,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button[data-selected="true"] {
  border-color: rgba(151, 228, 255, .92) !important;
  background: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  background-image: linear-gradient(145deg, #2393ce 0%, #1975ac 55%, #155d8e 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px rgba(245, 253, 255, .38), inset 0 -3px 0 rgba(96, 218, 255, .8), 0 6px 18px rgba(0, 120, 185, .34) !important;
  transform: translateY(-1px) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-tabs > button[data-selected="false"] {
  border-color: rgba(123, 163, 188, .13) !important;
  background: rgba(16, 35, 52, .72) !important;
  background-image: none !important;
  color: #8ba4b5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  transform: none !important;
}

@media (max-width: 390px) {
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-card,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-open,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image img {
    height: 176px !important;
    min-height: 176px !important;
  }

  html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-open {
    grid-template-columns: minmax(128px, 42%) minmax(0, 1fr) !important;
  }

  html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-photo,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media > .secure-image,
  html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media > .secure-image img {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-detail-media {
  border-right: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo > .secure-image img:not(.catalog-normalization-source),
html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-wheel-photo > .secure-image img:not(.catalog-normalization-source),
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-detail-media > .secure-image > img:not(.catalog-normalization-source),
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media:not(.catalog-part-media) > .secure-image > img:not(.catalog-normalization-source) {
  transform: scale(1.12) !important;
  filter: drop-shadow(0 13px 10px rgba(0, 11, 23, .48)) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media.catalog-part-media > .secure-image > img:not(.catalog-normalization-source) {
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail .catalog-artwork-media.catalog-part-media > .secure-image > img.catalog-normalization-source {
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card {
  grid-template-columns: 112px minmax(0, 1fr) 36px !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars {
  width: 110px !important;
  height: 76px !important;
  min-height: 76px !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  background: rgba(8, 25, 41, .24) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview {
  display: block !important;
  width: 116% !important;
  height: 116% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translateX(-4%) scale(1.04) !important;
  filter: drop-shadow(0 9px 7px rgba(0, 7, 19, .62)) !important;
  animation: dzo-directory-car-preview-in .42s ease both !important;
}

@keyframes dzo-directory-car-preview-in {
  from { opacity: 0; transform: translateX(7%) scale(.92); }
  to { opacity: 1; transform: translateX(-4%) scale(1.04); }
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-hero {
  background: linear-gradient(145deg, rgba(28, 57, 78, .98), rgba(10, 27, 43, .99)) !important;
  background-image: linear-gradient(145deg, rgba(28, 57, 78, .98), rgba(10, 27, 43, .99)) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-glow,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-hero::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-hero::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media > .secure-image::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media > .secure-image::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-photo::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-photo::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media::after,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media > .secure-image::before,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media > .secure-image::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media > .secure-image,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media > .secure-image {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 380px) {
  html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card {
    grid-template-columns: 88px minmax(0, 1fr) 34px !important;
  }

  html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars {
    width: 86px !important;
    height: 68px !important;
    min-height: 68px !important;
  }
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-car-preview-card .directory-card-icon.cars::after {
  display: none !important;
  content: none !important;
  position: absolute !important;
  inset: 6px !important;
  border: 0 !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview {
  position: absolute !important;
  inset: -8% -8% !important;
  z-index: 1 !important;
  width: 116% !important;
  height: 116% !important;
  margin: 0 !important;
  transform: translateX(-4%) scale(1.04) !important;
  animation: dzo-directory-car-preview-in .76s ease both !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview.is-leaving {
  z-index: 2 !important;
  animation: dzo-directory-car-preview-out .76s ease forwards !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .directory-overview .directory-card-car-preview.is-entering {
  z-index: 3 !important;
  animation: dzo-directory-car-preview-in .76s ease both !important;
}

@keyframes dzo-directory-car-preview-in {
  from { opacity: 0; transform: translateX(4%) scale(.98); }
  to { opacity: 1; transform: translateX(-4%) scale(1.04); }
}

@keyframes dzo-directory-car-preview-out {
  from { opacity: 1; transform: translateX(-4%) scale(1.04); }
  to { opacity: 0; transform: translateX(-7%) scale(1.01); }
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory .catalog-car-photo {
  border-right: 0 !important;
  background: linear-gradient(180deg, rgba(29, 63, 85, .34), rgba(11, 34, 54, .42)) !important;
  background-image: linear-gradient(180deg, rgba(29, 63, 85, .34), rgba(11, 34, 54, .42)) !important;
  box-shadow: inset 0 1px rgba(201, 237, 251, .08) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-detail-media > .secure-image {
  background: linear-gradient(180deg, rgba(31, 66, 88, .24), rgba(10, 31, 50, .34)) !important;
  background-image: linear-gradient(180deg, rgba(31, 66, 88, .24), rgba(10, 31, 50, .34)) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px rgba(208, 239, 250, .07), inset 0 -20px 32px rgba(0, 10, 22, .14) !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-photo,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media,
html body #dzo-mini-root main.app-shell.directory-screen .catalog-artwork-media > .secure-image {
  background: linear-gradient(180deg, rgba(29, 63, 85, .18), rgba(10, 31, 50, .25)) !important;
  background-image: linear-gradient(180deg, rgba(29, 63, 85, .18), rgba(10, 31, 50, .25)) !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: clamp(170px, 29vw, 220px) auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  width: 100% !important;
  height: clamp(170px, 29vw, 220px) !important;
  min-height: clamp(170px, 29vw, 220px) !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(166, 229, 255, .18) !important;
  border-radius: 22px 22px 0 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-photo > .secure-image img:not(.catalog-normalization-source) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 14px 16px 17px !important;
  overflow: hidden !important;
}

html body #dzo-mini-root main.app-shell.directory-screen .catalog-directory > .catalog-car-list > .catalog-car-card:not(.catalog-wheel-card) .catalog-car-model-note {
  display: -webkit-box !important;
  max-height: 6.75em !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #dzo-mini-root main.app-shell.directory-screen :is(.catalog-car-photo, .catalog-detail-media, .catalog-artwork-media, .catalog-item-photo, .catalog-item-media, .catalog-wheel-photo, .catalog-wheel-admin-thumb, .catalog-admin-thumb, .catalog-admin-item-thumb) .secure-image img:not(.catalog-normalization-source) {
  filter: none !important;
}
/* DZO Hub public rewards: keep the player header stable and make reward art readable. */
html body .admin-hub-store-screen .admin-hub-store-nav {
  grid-template-columns: 42px minmax(0, 1fr) minmax(176px, 236px) !important;
  align-items: center !important;
  column-gap: 12px !important;
}

html body .admin-hub-store-screen .admin-hub-store-nav-title {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .admin-hub-store-screen .admin-hub-store-nav-title strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(12px, 3.2vw, 16px) !important;
  letter-spacing: .015em !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-source {
  min-width: 0 !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-item-list {
  width: 100% !important;
  gap: 8px !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-item {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  min-height: 50px !important;
  gap: 10px !important;
  font-size: 12px !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-item-art {
  width: 48px !important;
  height: 48px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-item-art img {
  padding: 1px !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action {
  display: flex !important;
  width: 100% !important;
  min-height: 70px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action > span,
html body .admin-hub-store-screen .dzo-hub-reward-center-action > small {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action > span {
  font-size: clamp(15px, 4vw, 19px) !important;
  line-height: 1.2 !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action > small {
  font-size: 10px !important;
  line-height: 1.25 !important;
  opacity: .9 !important;
}

html body .admin-hub-store-screen .dzo-hub-reward-center-action:disabled {
  opacity: .92 !important;
}

@media (max-width: 480px) {
  html body .admin-hub-store-screen .admin-hub-store-nav {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 9px !important;
  }

  html body .admin-hub-store-screen .admin-hub-store-nav > button:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body .admin-hub-store-screen .admin-hub-store-nav > .admin-hub-store-nav-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body .admin-hub-store-screen .admin-hub-store-nav > .dzo-hub-account-switcher {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  html body .admin-hub-store-screen .dzo-hub-profile-trigger {
    min-height: 48px !important;
    padding-inline: 10px !important;
  }

  html body .admin-hub-store-screen .dzo-hub-profile-copy strong { font-size: 11px !important; }
  html body .admin-hub-store-screen .dzo-hub-profile-copy small { font-size: 9px !important; }
  html body .admin-hub-store-screen .dzo-hub-reward-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 46px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  html body .admin-hub-store-screen .dzo-hub-reward-item-art { width: 44px !important; height: 44px !important; }
  html body .admin-hub-store-screen .dzo-hub-reward-center-action > small { font-size: 9px !important; }
}

/* DZO Hub reward overview: larger prize art and clearer source totals. */
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-sources {
  align-items: stretch !important;
  gap: 14px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source,
html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source.is-calendar {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 14px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-icon {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border-radius: 15px !important;
  font-size: 20px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px 10px !important;
  min-width: 0 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > small {
  grid-column: 1 !important;
  align-self: end !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > strong {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border: 1px solid rgba(172, 220, 255, .48) !important;
  border-radius: 16px !important;
  color: #f6fbff !important;
  background: linear-gradient(145deg, rgba(88, 177, 255, .42), rgba(23, 79, 174, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 18px rgba(3, 22, 64, .28) !important;
  font-size: 25px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-list {
  grid-column: 1 / -1 !important;
  gap: 10px !important;
  margin-top: 5px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 64px !important;
  gap: 11px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  font-size: 20px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art img {
  width: 100% !important;
  height: 100% !important;
  padding: 2px !important;
  object-fit: contain !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-icon {
  flex: 0 0 62px !important;
  width: 62px !important;
  height: 62px !important;
}

html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-icon .ui-icon {
  width: 31px !important;
  height: 31px !important;
}

@media (max-width: 620px) {
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-sources { gap: 8px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source.is-calendar {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
  }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > small { font-size: 10px !important; }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-source-copy > strong {
    width: 39px !important;
    height: 39px !important;
    border-radius: 13px !important;
    font-size: 21px !important;
  }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 54px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-item-art {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }
  html body main.app-shell.admin-hub-store-screen .dzo-hub-reward-center-icon {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* Admin overview for account links, reward claims, and roulette wins. */
.admin-dzo-hub-activity { scroll-margin-top: 90px; }
.admin-dzo-hub-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.admin-dzo-hub-activity-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 190, 230, .16);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(14, 42, 71, .55), rgba(9, 23, 42, .55));
}
.admin-dzo-hub-activity-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(139, 190, 230, .12);
}
.admin-dzo-hub-activity-panel > header > div { display: grid; gap: 4px; min-width: 0; }
.admin-dzo-hub-activity-panel > header small { color: #88cefa; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.admin-dzo-hub-activity-panel > header strong { color: #edf7ff; font-size: 12px; }
.admin-dzo-hub-activity-panel > header > span {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(137, 203, 252, .22);
  border-radius: 9px;
  color: #c8ebff;
  background: rgba(54, 133, 199, .16);
  font-size: 11px;
  font-weight: 900;
}
.admin-dzo-hub-activity-list { display: grid; gap: 0; max-height: 420px; overflow: auto; }
.admin-dzo-hub-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(139, 190, 230, .09);
}
.admin-dzo-hub-activity-row:last-child { border-bottom: 0; }
.admin-dzo-hub-activity-row > div { display: grid; gap: 4px; min-width: 0; }
.admin-dzo-hub-activity-row strong { overflow-wrap: anywhere; color: #f1f8ff; font-size: 11px; line-height: 1.35; }
.admin-dzo-hub-activity-row small { overflow-wrap: anywhere; color: #96adbf; font-size: 9px; line-height: 1.4; }
.admin-dzo-hub-activity-row time { color: #a5bbce; font-size: 9px; white-space: nowrap; }
.admin-dzo-hub-activity-list > .admin-empty-state { margin: 0; padding: 18px 12px; color: #91a9bc; font-size: 11px; text-align: center; }
@media (max-width: 980px) {
  .admin-dzo-hub-activity-grid { grid-template-columns: 1fr; }
  .admin-dzo-hub-activity-list { max-height: 280px; }
}
@media (max-width: 560px) {
  .admin-dzo-hub-activity-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .admin-dzo-hub-activity-row time { justify-self: start; }
}

/* Admin-only DZO Hub redesign. Keep this preview isolated until the public rollout is requested. */
html body main.app-shell.admin-hub-store-screen.is-admin-preview {
  --hub-ink: #f2f8ff;
  --hub-muted: #a9c2df;
  --hub-line: rgba(99, 184, 244, .32);
  color: var(--hub-ink) !important;
  background:
    radial-gradient(ellipse at 8% 5%, rgba(13, 112, 238, .19), transparent 34%),
    radial-gradient(ellipse at 92% 30%, rgba(70, 68, 219, .18), transparent 34%),
    linear-gradient(160deg, #06152e 0%, #09264d 52%, #061b38 100%) !important;
}

html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-nav {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) minmax(150px, 240px) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 11px 14px !important;
  border: 1px solid rgba(91, 185, 255, .38) !important;
  border-radius: 25px !important;
  background: linear-gradient(115deg, rgba(7, 42, 92, .96), rgba(10, 77, 151, .92) 56%, rgba(26, 49, 135, .95)) !important;
  box-shadow: 0 14px 30px rgba(0, 9, 38, .3), inset 0 1px rgba(218, 244, 255, .12) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-nav > button:first-child,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-profile-link {
  min-width: 0 !important;
  border: 1px solid rgba(116, 206, 255, .5) !important;
  border-radius: 19px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #137dc5, #0b4ea1) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(0,20,78,.2) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-nav-title strong { color: #f5fbff !important; }

html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-page {
  display: grid !important;
  gap: 16px !important;
  max-width: 980px !important;
  margin: 14px auto 36px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 4px 16px !important;
  align-content: center !important;
  min-height: 166px !important;
  padding: 22px 25px !important;
  overflow: hidden !important;
  border: 1px solid rgba(81, 188, 255, .6) !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 84% 52%, rgba(67, 92, 245, .34), transparent 31%),
    linear-gradient(112deg, #087ec9 0%, #0753ad 54%, #172e9b 100%) !important;
  box-shadow: 0 13px 30px rgba(0, 17, 65, .28), inset 0 1px rgba(255,255,255,.22) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header::before {
  z-index: -1 !important;
  inset: 0 !important;
  opacity: .85 !important;
  background: linear-gradient(135deg, transparent 48%, rgba(122, 231, 255, .1) 48.2%, transparent 53%, transparent 68%, rgba(255,255,255,.08) 68.2%, transparent 73%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header::after {
  position: absolute !important;
  z-index: -1 !important;
  right: 26px !important;
  top: 50% !important;
  content: "🛒" !important;
  font-size: clamp(58px, 12vw, 105px) !important;
  line-height: 1 !important;
  opacity: .78 !important;
  transform: translateY(-50%) rotate(-8deg) !important;
  filter: drop-shadow(0 0 20px rgba(103, 219, 255, .55)) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-mark {
  grid-row: 1 / 4 !important;
  align-self: center !important;
  width: 62px !important;
  height: 62px !important;
  border: 1px solid rgba(156, 231, 255, .66) !important;
  border-radius: 19px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #20c6f5, #1268ea 72%, #334ce6) !important;
  box-shadow: 0 7px 20px rgba(0, 24, 102, .32), inset 0 1px rgba(255,255,255,.28) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header > small,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy > div > small { color: #8ce9ff !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header h2,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header p { color: #fff !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header h2 { font-size: clamp(23px, 4vw, 32px) !important; letter-spacing: -.035em !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header p { max-width: 600px !important; color: rgba(231,246,255,.85) !important; }

html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-toolbar {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 15px !important;
  border: 1px solid var(--hub-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(110deg, rgba(5, 35, 79, .96), rgba(9, 57, 117, .94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-toolbar-actions > button {
  border: 1px solid rgba(118, 206, 255, .4) !important;
  border-radius: 14px !important;
  color: #f6fbff !important;
  background: linear-gradient(145deg, #147db9, #0b50a2) !important;
}

html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(126px, .54fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 14px 10px !important;
  padding: clamp(17px, 3vw, 26px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(61, 177, 255, .65) !important;
  border-radius: 27px !important;
  background:
    radial-gradient(ellipse at 86% 17%, rgba(102, 90, 255, .28), transparent 31%),
    radial-gradient(ellipse at 4% 100%, rgba(0, 176, 255, .2), transparent 42%),
    linear-gradient(145deg, #073c89 0%, #082f73 58%, #111e68 100%) !important;
  box-shadow: 0 14px 32px rgba(0, 13, 55, .32), inset 0 1px rgba(220, 244, 255, .12) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  background: linear-gradient(128deg, transparent 45%, rgba(119, 209, 255, .08) 45.2%, transparent 51%, transparent 76%, rgba(255,255,255,.055) 76.2%, transparent 81%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy { grid-column: 1 !important; grid-row: 1 !important; align-items: center !important; gap: 14px !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-icon {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  border: 1px solid rgba(162, 235, 255, .65) !important;
  border-radius: 19px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #26caff, #1767ee 70%, #3d4de9) !important;
  box-shadow: 0 7px 17px rgba(0, 21, 99, .34), inset 0 1px rgba(255,255,255,.27) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy h3 {
  color: #fff !important;
  font-size: clamp(22px, 3.6vw, 31px) !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 12px rgba(0, 15, 77, .3) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy p { color: rgba(233,246,255,.86) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-art {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-height: 104px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: radial-gradient(ellipse at 50% 78%, rgba(32, 190, 255, .32), transparent 65%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift {
  position: absolute !important;
  left: 50% !important;
  bottom: 7px !important;
  width: 83px !important;
  height: 62px !important;
  border: 2px solid rgba(171, 227, 255, .9) !important;
  border-radius: 10px 10px 14px 14px !important;
  background: linear-gradient(150deg, #167ff0, #091f76 72%) !important;
  box-shadow: 0 0 23px rgba(43, 205, 255, .48), inset 0 0 16px rgba(30, 180, 255, .35) !important;
  transform: translateX(-50%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift::before {
  position: absolute !important;
  left: -3px !important;
  right: -3px !important;
  top: -18px !important;
  height: 19px !important;
  content: "" !important;
  border: 2px solid rgba(181, 236, 255, .9) !important;
  border-radius: 9px !important;
  background: linear-gradient(90deg, #278eff, #0b3fbd) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift::after {
  position: absolute !important;
  top: -19px !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 12px !important;
  content: "" !important;
  border-right: 2px solid rgba(208, 249, 255, .95) !important;
  border-left: 2px solid rgba(208, 249, 255, .95) !important;
  background: linear-gradient(180deg, #24c9ff, #2368ff) !important;
  transform: translateX(-50%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift > i,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift > b {
  position: absolute !important;
  z-index: 2 !important;
  top: -28px !important;
  width: 25px !important;
  height: 17px !important;
  border: 3px solid #92eeff !important;
  border-radius: 70% 70% 15% 70% !important;
  box-shadow: 0 0 10px rgba(45, 212, 255, .45) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift > i { left: 26px !important; transform: rotate(26deg) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift > b { right: 26px !important; transform: scaleX(-1) rotate(26deg) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token {
  position: absolute !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 39px !important;
  height: 39px !important;
  overflow: hidden !important;
  border: 1px solid rgba(213, 245, 255, .8) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: linear-gradient(145deg, #ff4eb8, #a4187a) !important;
  box-shadow: 0 5px 13px rgba(0, 10, 56, .38) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 3px !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token.is-token-1 { left: 6px !important; bottom: 9px !important; transform: rotate(-12deg) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token.is-token-2 { right: 1px !important; bottom: 17px !important; background: linear-gradient(145deg, #7b5aff, #2930bc) !important; transform: rotate(10deg) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token.is-token-3 { right: 10px !important; top: 7px !important; background: linear-gradient(145deg, #ffc14a, #e67817) !important; transform: rotate(8deg) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-spark { position: absolute !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #bdf5ff !important; box-shadow: 0 0 12px 3px rgba(66, 222, 255, .7) !important; animation: hub-reward-spark 2.8s ease-in-out infinite alternate !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-spark.is-spark-one { left: 25% !important; top: 20% !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-spark.is-spark-two { right: 31% !important; bottom: 19% !important; animation-delay: -1.4s !important; }
@keyframes hub-reward-spark { from { opacity: .45; transform: scale(.7); } to { opacity: 1; transform: scale(1.35); } }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-sources {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source.is-calendar {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(117, 204, 255, .46) !important;
  border-radius: 21px !important;
  background: linear-gradient(145deg, rgba(10, 143, 216, .5), rgba(7, 53, 128, .78) 76%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 19px rgba(0, 13, 57, .22) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source.is-calendar {
  border-color: rgba(153, 139, 255, .56) !important;
  background: linear-gradient(145deg, rgba(98, 62, 218, .65), rgba(35, 44, 143, .84) 78%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-icon { border: 1px solid rgba(169, 230, 255, .46) !important; border-radius: 14px !important; color: #eafaff !important; background: linear-gradient(145deg, #169fd9, #124eae) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source.is-calendar .dzo-hub-reward-source-icon { background: linear-gradient(145deg, #9465ff, #5140c7) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-copy > small,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-items-empty { color: #f1f8ff !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-copy > strong { border: 1px solid rgba(183, 224, 255, .38) !important; border-radius: 14px !important; color: #fff !important; background: rgba(3, 28, 80, .72) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item { border-color: rgba(176, 218, 255, .22) !important; border-radius: 12px !important; background: rgba(2, 29, 76, .34) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item-art { border: 1px solid rgba(164, 219, 255, .42) !important; border-radius: 11px !important; background: linear-gradient(145deg, #164f9b, #0a316f) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 3px !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-action {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 68px !important;
  border: 1px solid rgba(155, 235, 255, .76) !important;
  border-radius: 20px !important;
  color: #fff !important;
  text-align: center !important;
  background: linear-gradient(100deg, #13b8eb, #0876e5 58%, #364de0) !important;
  box-shadow: 0 9px 22px rgba(0, 18, 90, .32), inset 0 1px rgba(255,255,255,.26) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-action > span { color: #fff !important; font-size: clamp(16px, 2.8vw, 21px) !important; font-weight: 900 !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-action > small { color: rgba(238,248,255,.91) !important; font-size: 11px !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center.is-loading .dzo-hub-reward-source { min-height: 110px !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-count-loader { display: inline-block !important; width: 18px !important; height: 18px !important; border: 2px solid rgba(215,241,255,.3) !important; border-top-color: #d4f6ff !important; border-radius: 50% !important; animation: hub-count-spin .8s linear infinite !important; }
@keyframes hub-count-spin { to { transform: rotate(360deg); } }

html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-categories,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-catalog-tools {
  border-color: rgba(89, 180, 248, .35) !important;
  border-radius: 21px !important;
  background: linear-gradient(120deg, rgba(5, 37, 82, .96), rgba(8, 63, 130, .94)) !important;
}
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-categories button { border-color: rgba(112, 190, 244, .25) !important; color: #dfedff !important; background: linear-gradient(145deg, rgba(16, 92, 163, .52), rgba(7, 48, 112, .75)) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-categories button:is(.is-active, [aria-selected="true"]) { border-color: rgba(163, 233, 255, .72) !important; background: linear-gradient(130deg, #10b9e9, #126be0 58%, #4b4be7) !important; box-shadow: 0 5px 16px rgba(0, 29, 106, .3), inset 0 1px rgba(255,255,255,.23) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-search,
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-sort select { border-color: rgba(104, 185, 242, .34) !important; border-radius: 16px !important; background: rgba(3, 25, 63, .8) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-offer { border-color: rgba(91, 176, 239, .34) !important; border-radius: 22px !important; background: linear-gradient(145deg, #0c3266, #091f4a) !important; box-shadow: 0 10px 22px rgba(0, 10, 39, .25) !important; }
html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-loading { border-color: rgba(93, 184, 245, .3) !important; border-radius: 16px !important; color: #bfddf5 !important; background: rgba(3, 27, 66, .7) !important; }

@media (max-width: 620px) {
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-nav { grid-template-columns: 44px minmax(0,1fr) minmax(112px, 42%) !important; gap: 8px !important; padding: 8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-nav-title strong { font-size: 11px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-page { gap: 12px !important; margin-top: 10px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header { grid-template-columns: 52px minmax(0,1fr) !important; min-height: 136px !important; gap: 3px 11px !important; padding: 16px !important; border-radius: 22px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header::after { right: 9px !important; opacity: .37 !important; font-size: 63px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-mark { width: 48px !important; height: 48px !important; border-radius: 15px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header h2 { font-size: 22px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-header p { max-width: 85% !important; font-size: 12px !important; line-height: 1.45 !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .admin-hub-store-toolbar { align-items: flex-start !important; flex-direction: column !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center { grid-template-columns: minmax(0,1fr) 92px !important; gap: 10px 4px !important; padding: 14px !important; border-radius: 22px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy { align-items: flex-start !important; gap: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-icon { flex-basis: 42px !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy h3 { font-size: 19px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-copy p { font-size: 12px !important; line-height: 1.45 !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-art { min-height: 88px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-gift { transform: translateX(-50%) scale(.76) !important; transform-origin: bottom center !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-token { width: 29px !important; height: 29px !important; border-radius: 9px !important; font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-sources { gap: 8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source.is-calendar { padding: 9px !important; border-radius: 16px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-icon { display: none !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-copy { grid-template-columns: minmax(0,1fr) 30px !important; gap: 5px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-copy > small { font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-copy > strong { width: 30px !important; height: 30px !important; font-size: 16px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item-list { gap: 5px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item { grid-template-columns: 30px minmax(0,1fr) !important; min-height: 30px !important; gap: 5px !important; padding: 3px !important; font-size: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-item-art { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center-action { min-height: 58px !important; border-radius: 16px !important; }
}
@media (max-width: 370px) {
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-center { grid-template-columns: minmax(0,1fr) 72px !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-sources { grid-template-columns: minmax(0,1fr) !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source,
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source.is-calendar { grid-template-columns: 36px minmax(0,1fr) !important; }
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-source-icon { display: grid !important; width: 36px !important; height: 36px !important; }
}

/* Current DZO Hub storefront: rounded page surface, public catalog and lightweight cards. */
html body main.app-shell.admin-hub-store-screen.is-store-overview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview > .admin-hub-store-page {
  position: relative !important;
  isolation: isolate !important;
  margin: 8px auto 28px !important;
  padding: clamp(12px,2vw,18px) 14px 118px !important;
  overflow: hidden !important;
  border: 1px solid rgba(83,188,255,.48) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse at 96% 0%,rgba(50,85,255,.2),transparent 34%),
    linear-gradient(155deg,rgba(17,86,163,.9),rgba(7,46,103,.96) 54%,rgba(8,34,79,.98)) !important;
  box-shadow: 0 18px 46px rgba(0,18,64,.22),inset 0 1px rgba(200,238,255,.12) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-offer {
  content-visibility: auto !important;
  contain-intrinsic-size: 370px 450px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-results {
  contain: layout style !important;
}
.dzo-hub-shortcut-backdrop {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,12,31,.72);
  backdrop-filter: blur(10px);
}
.dzo-hub-shortcut-dialog {
  position: relative;
  width: min(100%,390px);
  padding: 28px 24px 20px;
  border: 1px solid rgba(125,218,255,.7);
  border-radius: 28px;
  color: #f4fbff;
  text-align: center;
  background: radial-gradient(circle at 50% 0%,rgba(32,144,255,.38),transparent 52%),linear-gradient(155deg,#124f95,#08264f 78%);
  box-shadow: 0 22px 70px rgba(0,10,36,.52),inset 0 1px rgba(255,255,255,.17);
}
.dzo-hub-shortcut-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; color:#d8efff; background:rgba(5,24,52,.65); font-size:22px; cursor:pointer; }
.dzo-hub-shortcut-icon { display:grid; width:66px; height:66px; margin:0 auto 14px; place-items:center; border:1px solid rgba(179,239,255,.8); border-radius:22px; color:#fff; background:linear-gradient(145deg,#24c8f5,#1478fa 58%,#4854e8); box-shadow:0 8px 22px rgba(0,93,229,.38); }
.dzo-hub-shortcut-dialog > small { color:#8fe7ff; font-size:10px; font-weight:850; letter-spacing:.13em; }
.dzo-hub-shortcut-dialog h3 { margin:9px 0; font-size:23px; line-height:1.15; }
.dzo-hub-shortcut-dialog p { margin:0 0 18px; color:#c5e1f5; font-size:14px; line-height:1.5; }
.dzo-hub-shortcut-dialog .dzo-hub-shortcut-add { display:block; width:100%; min-height:54px; border:1px solid rgba(177,244,255,.9); border-radius:17px; color:#fff; font-size:15px; font-weight:850; background:linear-gradient(100deg,#11bfe9,#0878ff 58%,#4458ec); box-shadow:0 8px 22px rgba(0,111,255,.32); cursor:pointer; }
.dzo-hub-shortcut-dialog .dzo-hub-shortcut-add:disabled { opacity:.7; cursor:wait; }
.dzo-hub-shortcut-dialog .dzo-hub-shortcut-hint { margin:12px 0 0; font-size:12px; }
.dzo-hub-shortcut-later { margin-top:12px; padding:9px 16px; border:0; color:#b5d0e2; background:transparent; font-size:13px; cursor:pointer; }
.admin-shortcut-stats-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-usage-row { grid-template-columns:minmax(68px,1fr) repeat(6,minmax(64px,1fr)) !important; min-width:570px !important; }
.admin-usage-table { overflow-x:auto; }
@media (max-width:560px) {
  .admin-usage-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-shortcut-stats-summary { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell.admin-hub-store-screen.is-admin-preview .dzo-hub-reward-hero-spark { animation: none !important; }
}

/* Final DZO Hub overview layout. Keep this after the historical preview rules above. */
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-nav.is-store-overview {
  position: relative !important;
  z-index: 10020 !important;
  display: block !important;
  width: min(100% - 28px, 940px) !important;
  min-height: 0 !important;
  margin: 8px auto 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-nav.is-store-overview > button:first-child,
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-nav.is-store-overview > .admin-hub-store-nav-title { display: none !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-nav.is-store-overview > .dzo-hub-account-switcher {
  position: relative !important;
  z-index: 10030 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-trigger {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  padding: 8px 13px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,231,255,.78) !important;
  border-radius: 19px !important;
  color: #f7fcff !important;
  background: linear-gradient(110deg, #087bc7, #0758b9 58%, #244cc5) !important;
  box-shadow: 0 7px 18px rgba(0,28,92,.22), inset 0 1px rgba(255,255,255,.3) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-trigger > .avatar {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-copy { flex: 1 1 auto !important; min-width: 0 !important; gap: 3px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-copy strong { font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-copy small { font-size: 9px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-profile-chevron { flex: 0 0 auto !important; font-size: 18px !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu {
  position: absolute !important;
  z-index: 10050 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-content: start !important;
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(62dvh, 440px) !important;
  gap: 7px !important;
  padding: 12px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(142,227,255,.64) !important;
  border-radius: 19px !important;
  background: linear-gradient(150deg, rgba(9,50,96,.99), rgba(4,24,51,.99)) !important;
  box-shadow: 0 18px 42px rgba(0,8,24,.55), inset 0 1px rgba(255,255,255,.1) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu > small {
  display: block !important;
  padding: 3px 5px 5px !important;
  color: #a9eaff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 40px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(151,218,249,.27) !important;
  border-radius: 14px !important;
  color: #f5fbff !important;
  background: rgba(10,39,75,.82) !important;
  text-align: left !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child[aria-current="true"] {
  border-color: rgba(155,235,255,.82) !important;
  background: linear-gradient(110deg, rgba(14,132,205,.9), rgba(39,83,199,.88)) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child > .avatar {
  box-sizing: border-box !important;
  grid-column: 1 !important;
  flex: none !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(169,230,255,.68) !important;
  border-radius: 50% !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child > span:not(.avatar) {
  display: grid !important;
  grid-column: 2 !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child strong,
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child strong { color: #fff !important; font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child small { color: #c5e7f8 !important; font-size: 10px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > button:first-child b { grid-column: 3 !important; margin: 0 !important; color: #aaf4ff !important; font-size: 17px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-row > .dzo-hub-account-remove {
  box-sizing: border-box !important;
  display: grid !important;
  width: 40px !important;
  min-height: 40px !important;
  align-self: center !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,160,180,.42) !important;
  border-radius: 13px !important;
  color: #ffdee6 !important;
  background: rgba(108,38,64,.44) !important;
  font-size: 20px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu > button {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 52px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(145,216,251,.4) !important;
  border-radius: 14px !important;
  color: #f5fbff !important;
  background: linear-gradient(115deg, rgba(12,106,170,.84), rgba(31,76,160,.84)) !important;
  text-align: left !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu > button > span { display: grid !important; min-width: 0 !important; gap: 3px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu > button strong { color: #fff !important; font-size: 12px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-account-menu > button span small { color: #c6e7fa !important; font-size: 10px !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-page {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto 28px !important;
  padding: 0 14px 118px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-page::before,
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-page::after { display: none !important; content: none !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: stretch !important;
  gap: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: clamp(15px,4vw,22px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(111,222,255,.8) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(ellipse at 94% 2%, rgba(86,91,255,.28), transparent 31%),
    radial-gradient(ellipse at 3% 92%, rgba(22,192,255,.25), transparent 38%),
    linear-gradient(140deg, #0878c7 0%, #0753b8 53%, #2938ad 100%) !important;
  box-shadow: 0 12px 29px rgba(0,17,71,.3), inset 0 1px rgba(255,255,255,.28) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview {
  position: relative !important;
  display: block !important;
  min-height: 156px !important;
  overflow: visible !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 2px clamp(112px,24vw,190px) 0 0 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-icon {
  display: grid !important;
  grid-column: 1 !important;
  flex: none !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border: 1px solid rgba(182,243,255,.9) !important;
  border-radius: 17px !important;
  color: #fff !important;
  background: linear-gradient(145deg,#28d8fa,#087cff 60%,#4b54ee) !important;
  box-shadow: 0 6px 16px rgba(0,31,119,.32), inset 0 1px rgba(255,255,255,.42) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy > div {
  grid-column: 2 !important;
  min-width: 0 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy > div > small {
  display: block !important;
  margin: 1px 0 5px !important;
  color: #b8f2ff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1.3 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(19px,5.6vw,25px) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p {
  max-width: 330px !important;
  margin: 7px 0 0 !important;
  color: #e4f5ff !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
}

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art {
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: clamp(112px,34vw,210px) !important;
  height: 154px !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at 57% 68%, rgba(98,223,255,.38), transparent 70%) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-calendar-art {
  position: absolute !important;
  right: 22px !important;
  bottom: 4px !important;
  display: grid !important;
  width: 90px !important;
  height: 112px !important;
  place-items: start center !important;
  padding-top: 11px !important;
  border: 1px solid rgba(210,250,255,.96) !important;
  border-radius: 19px !important;
  color: #e9ffff !important;
  background: linear-gradient(150deg,#a5f4ff,#42c9f6 28%,#3688f4 100%) !important;
  box-shadow: 0 9px 22px rgba(0,24,112,.38), inset 0 1px rgba(255,255,255,.7) !important;
  transform: rotate(7deg) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-calendar-art::before {
  position: absolute !important;
  top: -7px !important;
  left: 16px !important;
  width: 56px !important;
  height: 16px !important;
  border: 5px solid #50dbff !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  content: "" !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-calendar-art > .ui-icon { width: 68px !important; height: 68px !important; opacity: .38 !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-check-grid {
  position: absolute !important;
  top: 40px !important;
  left: 17px !important;
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 5px !important;
  width: 58px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-check-grid i {
  display: grid !important;
  width: 16px !important;
  height: 16px !important;
  place-items: center !important;
  border: 1px solid rgba(222,255,255,.95) !important;
  border-radius: 5px !important;
  color: #fff !important;
  background: linear-gradient(145deg,#25d8f4,#1885ec) !important;
  font: 900 10px/1 system-ui,sans-serif !important;
  font-style: normal !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-bell-art {
  position: absolute !important;
  z-index: 4 !important;
  top: 1px !important;
  right: 4px !important;
  display: grid !important;
  width: 40px !important;
  height: 43px !important;
  place-items: center !important;
  border: 1px solid rgba(255,235,159,.95) !important;
  border-radius: 50% 50% 43% 43% !important;
  color: #fff9d7 !important;
  background: linear-gradient(145deg,#fff181,#ffb42c 68%,#f17f14) !important;
  box-shadow: 0 5px 14px rgba(75,33,0,.38), inset 0 1px rgba(255,255,255,.72) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-bell-art .ui-icon { width: 24px !important; height: 24px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art {
  position: absolute !important;
  z-index: 5 !important;
  right: 7px !important;
  bottom: -2px !important;
  display: grid !important;
  width: 72px !important;
  height: 59px !important;
  place-items: center !important;
  border: 1px solid rgba(245,204,255,.96) !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(145deg,#ff73f6,#a536ed 56%,#5736d7) !important;
  box-shadow: 0 7px 19px rgba(37,13,123,.42), inset 0 1px rgba(255,255,255,.55) !important;
  transform: rotate(-5deg) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::before,
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::after { position:absolute !important; z-index:1 !important; content:"" !important; background:linear-gradient(90deg,#fff2a3,#ffc83e 55%,#fff0a1) !important; box-shadow:0 0 9px rgba(255,224,112,.42) !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::before { inset:0 auto 0 30px !important; width:10px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::after { inset:24px 0 auto !important; height:9px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art .ui-icon { position:absolute !important; z-index:2 !important; top:-25px !important; width:49px !important; height:40px !important; color:#ffdc68 !important; filter:drop-shadow(0 3px 4px rgba(51,12,130,.5)) !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gem { display:none !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-sources {
  display: grid !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !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;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 124px !important;
  padding: 11px !important;
  border: 1px solid rgba(159,230,255,.77) !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg,rgba(13,135,220,.9),rgba(4,70,171,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2),0 6px 14px rgba(0,22,91,.18) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source.is-calendar {
  border-color: rgba(208,190,255,.84) !important;
  background: linear-gradient(145deg,#6552dd,#4245c6 62%,#2b43ad) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading {
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) 36px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !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 {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(203,247,255,.78) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(145deg,rgba(58,199,250,.8),rgba(15,97,209,.9)) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading small {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > strong,
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > .dzo-hub-count-loader {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border: 1px solid rgba(176,235,255,.72) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(4,49,128,.72) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > .dzo-hub-count-loader { width: 20px !important; height: 20px !important; justify-self: center !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-divider {
  display: block !important;
  flex: none !important;
  height: 1px !important;
  background: rgba(224,247,255,.54) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-list {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4fbff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-art {
  display: grid !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  height: 23px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(193,239,255,.62) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: rgba(4,34,99,.42) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-art img { width:100% !important; height:100% !important; object-fit:contain !important; padding:2px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-items-empty {
  display: block !important;
  grid-column: auto !important;
  color: #eef8ff !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action {
  display: flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(191,245,255,.88) !important;
  border-radius: 19px !important;
  color: #fff !important;
  text-align: center !important;
  background: linear-gradient(105deg,#24dce5 0%,#15adf2 44%,#3155ea 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.55),0 7px 17px rgba(0,26,103,.25) !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > span { color:#fff !important; font-size:16px !important; font-weight:900 !important; line-height:1.1 !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action > small { color:rgba(242,252,255,.96) !important; font-size:9px !important; font-weight:750 !important; line-height:1.2 !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action:disabled { opacity:1 !important; }

html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-toolbar.dzo-hub-store-after-rewards {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 9px 0 13px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-store-after-rewards .admin-hub-store-toolbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-store-after-rewards button {
  min-height: 34px !important;
  padding: 6px 11px !important;
  border-radius: 11px !important;
  font-size: 10px !important;
}
html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-categories { margin: 0 0 10px !important; }
html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-floating-cart { z-index: 10010 !important; }

@media (max-width: 620px) {
  html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-nav.is-store-overview { width: calc(100% - 24px) !important; margin-top: 6px !important; margin-bottom: 9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-page { width: 100% !important; padding: 0 12px 112px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto auto !important; gap: 11px !important; padding: 13px !important; border-radius: 22px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-overview { min-height: 144px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy { grid-column: auto !important; grid-row: auto !important; grid-template-columns: 40px minmax(0,1fr) !important; gap: 8px !important; padding-right: 108px !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 h3 { font-size:19px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-copy p { margin-top:6px !important; font-size:10px !important; line-height:1.34 !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art { top:0 !important; right:0 !important; bottom:0 !important; width:112px !important; height:144px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-calendar-art { right:13px !important; width:76px !important; height:99px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-calendar-art > .ui-icon { width:64px !important; height:64px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-check-grid { top:36px !important; left:14px !important; width:49px !important; gap:4px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-check-grid i { width:14px !important; height:14px !important; font-size:9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-bell-art { width:34px !important; height:37px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art { right:3px !important; width:62px !important; height:51px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::before { left:26px !important; width:9px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art::after { top:21px !important; height:8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-gift-art .ui-icon { top:-22px !important; width:44px !important; height:36px !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: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 { min-height:118px !important; padding:8px !important; border-radius:16px !important; gap:7px !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; min-height:32px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon { display:grid !important; width:25px !important; height:25px !important; border-radius:8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon .ui-icon { width:17px !important; height:17px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading small { font-size:9px !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-item { min-height:21px !important; gap:5px !important; font-size:8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-item-art { flex-basis:20px !important; width:20px !important; height:20px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-items-empty { font-size:10px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-center-action { min-height:60px !important; border-radius:17px !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:8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-toolbar.dzo-hub-store-after-rewards { margin-top:7px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .admin-hub-store-categories { margin-top:0 !important; }
}

@media (max-width: 370px) {
  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-center-copy { padding-right:100px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-hero-art { width:104px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading { grid-template-columns:22px minmax(0,1fr) 27px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading .dzo-hub-reward-source-icon { width:22px !important; height:22px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading small { font-size:8px !important; }
  html body main.app-shell.admin-hub-store-screen.is-store-overview .dzo-hub-reward-source-heading > strong { width:27px !important; height:27px !important; font-size:15px !important; }
}