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 #dzo-mini-root > 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 #dzo-mini-root 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 #dzo-mini-root 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 #dzo-mini-root 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 #dzo-mini-root 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 #dzo-mini-root main.feed-screen .feed-card-header,
html:not([data-theme="light"]) body #dzo-mini-root main.feed-screen .feed-author,
html:not([data-theme="light"]) body #dzo-mini-root 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 #dzo-mini-root main.feed-screen .feed-author {
  padding: 7px 4px !important;
  color: #f1f7fc !important;
}

html:not([data-theme="light"]) body #dzo-mini-root 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 #dzo-mini-root 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 #dzo-mini-root 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;
}

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;
}