/*
 * ZZVibe V3.2 visual polish
 * A production-safe finishing layer for the real WoWonder interface.
 */

body.zzv3 {
  --zzv3-accent: #8358e8;
  --zzv3-accent-strong: #6f42d7;
  --zzv3-accent-soft: rgba(131, 88, 232, 0.12);
  --zzv3-purple: #8358e8;
  --zzv3-blue: #3b82d0;
  --zzv3-coral: #e85d75;
  --zzv3-green: #2eae70;
  --zzv3-amber: #d99a36;
  --zzv3-bg: #f0f2f5;
  --zzv3-bg-elevated: #f5f6f8;
  --zzv3-shell: #ffffff;
  --zzv3-surface: #ffffff;
  --zzv3-surface-soft: #f4f5f7;
  --zzv3-surface-hover: #eceef2;
  --zzv3-surface-raised: #eef0f4;
  --zzv3-text: #191a1f;
  --zzv3-text-soft: #50535c;
  --zzv3-muted: #777b86;
  --zzv3-border: rgba(23, 25, 31, 0.09);
  --zzv3-border-strong: rgba(23, 25, 31, 0.14);
  --zzv3-shadow-sm: 0 1px 2px rgba(15, 16, 19, 0.04), 0 7px 22px rgba(15, 16, 19, 0.035);
  --zzv3-shadow-md: 0 14px 42px rgba(15, 16, 19, 0.1);
  --zzv3-radius-sm: 11px;
  --zzv3-radius-md: 15px;
  --zzv3-radius-lg: 19px;
  --zzv3-radius-xl: 24px;
  --zzv3-header-height: 64px;
  --zzv3-home-max: 1180px;
  --zzv3-feed-width: 720px;
  --zzv3-rail-width: 340px;
  --zzv3-column-gap: 22px;
  background: var(--zzv3-bg) !important;
  color: var(--zzv3-text);
  font-size: 14px;
}

body.zzv3.zzv3-dark {
  --zzv3-accent: #9268ed;
  --zzv3-accent-strong: #b08df4;
  --zzv3-accent-soft: rgba(146, 104, 237, 0.15);
  --zzv3-bg: #111216;
  --zzv3-bg-elevated: #15171c;
  --zzv3-shell: #17191e;
  --zzv3-surface: #1c1f25;
  --zzv3-surface-soft: #21242b;
  --zzv3-surface-hover: #292d35;
  --zzv3-surface-raised: #24272f;
  --zzv3-text: #f5f6f8;
  --zzv3-text-soft: #c8cbd2;
  --zzv3-muted: #969ba6;
  --zzv3-border: rgba(255, 255, 255, 0.08);
  --zzv3-border-strong: rgba(255, 255, 255, 0.13);
  --zzv3-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.22), 0 9px 26px rgba(0, 0, 0, 0.16);
  --zzv3-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.3);
  background: var(--zzv3-bg) !important;
}

body.zzv3 .wow_content,
body.zzv3 .panel,
body.zzv3 .modal-content,
body.zzv3 .dropdown-menu {
  background-color: var(--zzv3-surface);
  color: var(--zzv3-text);
  border-color: var(--zzv3-border);
}

/* Header: balanced like a social product, not an admin dashboard. */
body.zzv3 header .navbar,
body.zzv3 .tag_navbar_top,
body.zzv3 .tag_navbar_top_right {
  min-height: var(--zzv3-header-height);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--zzv3-border);
  box-shadow: 0 1px 0 var(--zzv3-border);
  backdrop-filter: saturate(145%) blur(18px);
  -webkit-backdrop-filter: saturate(145%) blur(18px);
}

body.zzv3.zzv3-dark header .navbar,
body.zzv3.zzv3-dark .tag_navbar_top,
body.zzv3.zzv3-dark .tag_navbar_top_right {
  background: rgba(23, 25, 30, 0.96);
}

body.zzv3 .tag_header,
body.zzv3 .tag_navbar_top .container-fluid,
body.zzv3 .tag_navbar_top .tag_header {
  min-height: var(--zzv3-header-height);
  height: var(--zzv3-header-height);
}

body.zzv3 .tag_header {
  gap: 12px;
  padding-inline: 8px;
}

body.zzv3 .header-brand {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background: linear-gradient(145deg, #b953d2 0%, #8259e9 52%, #438fdc 100%);
  box-shadow: 0 7px 18px rgba(109, 73, 203, 0.22);
}

body.zzv3 .tag_header .search-container {
  width: min(360px, 28vw);
}

body.zzv3 .tag_header .search-input {
  height: 42px;
  padding-inline: 43px 40px;
  color: var(--zzv3-text);
  background: var(--zzv3-surface-raised);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
}

body.zzv3 .tag_header .search-input:focus {
  background: var(--zzv3-surface);
  border-color: rgba(146, 104, 237, 0.52);
  box-shadow: 0 0 0 3px var(--zzv3-accent-soft);
}

body.zzv3 .tag_hdr_right {
  gap: 7px;
}

body.zzv3 .tag_hdr_droptoggle,
body.zzv3 .tag_hdr_right > .dropdown > .dropdown-toggle,
body.zzv3 .tag_navbar_top_right .dropdown-toggle,
body.zzv3 .tag_toggle_sidebar,
body.zzv3 .tag_toggle_search {
  width: 42px;
  min-width: 42px;
  height: 42px;
  color: var(--zzv3-text-soft);
  background: var(--zzv3-surface-raised);
  border: 1px solid transparent;
  border-radius: 50%;
}

body.zzv3 .tag_hdr_droptoggle:hover,
body.zzv3 .tag_hdr_droptoggle:focus,
body.zzv3 .tag_toggle_sidebar:hover,
body.zzv3 .tag_toggle_search:hover {
  color: var(--zzv3-text);
  background: var(--zzv3-surface-hover);
  border-color: var(--zzv3-border);
}

body.zzv3 .tag_hdr_user_droptoggle {
  width: auto;
  min-width: 42px;
  height: 42px;
  max-width: 154px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
}

body.zzv3 .tag_hdr_user_droptoggle img {
  width: 34px;
  height: 34px;
}

body.zzv3 .zzv3-primary-tabs {
  top: 0;
  height: var(--zzv3-header-height);
  gap: 6px;
}

body.zzv3 .zzv3-primary-tab {
  width: 64px;
  height: 52px;
  margin-top: 6px;
  color: var(--zzv3-muted) !important;
  border-radius: 14px;
  font-size: 20px;
}

body.zzv3 .zzv3-primary-tab:hover {
  color: var(--zzv3-text) !important;
  background: var(--zzv3-surface-hover);
}

body.zzv3 .zzv3-primary-tab.is-active {
  color: var(--zzv3-purple) !important;
  background: var(--zzv3-accent-soft);
}

body.zzv3 .zzv3-primary-tab.is-active::after {
  right: 18px;
  bottom: -6px;
  left: 18px;
  height: 3px;
  border-radius: 3px 3px 0 0;
}

body.zzv3 .zzv3-primary-tab.zzv3-route-reels:hover,
body.zzv3 .zzv3-primary-tab.zzv3-route-reels.is-active {
  color: var(--zzv3-coral) !important;
}

body.zzv3 .zzv3-primary-tab.zzv3-route-groups:hover,
body.zzv3 .zzv3-primary-tab.zzv3-route-groups.is-active {
  color: var(--zzv3-blue) !important;
}

body.zzv3 .zzv3-primary-tab.zzv3-route-products:hover,
body.zzv3 .zzv3-primary-tab.zzv3-route-products.is-active {
  color: var(--zzv3-green) !important;
}

/* Left navigation: restrained chrome with memorable colored icons. */
body.zzv3 .tag_sidebar {
  background: var(--zzv3-bg-elevated);
  border-color: var(--zzv3-border);
}

body.zzv3 .sidebar_innr {
  padding: 14px 10px 30px;
}

body.zzv3 .tag_sidebar_section > a {
  min-height: 48px;
  gap: 11px;
  margin: 2px 0;
  padding: 6px 9px;
  color: var(--zzv3-text-soft);
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 680;
}

body.zzv3 .tag_sidebar_section > a > svg {
  width: 34px !important;
  min-width: 34px;
  height: 34px !important;
  padding: 7px;
  border-radius: 50%;
}

body.zzv3 .tag_sidebar_section > a:hover,
body.zzv3 .tag_sidebar_section > a:focus,
body.zzv3 .tag_sidebar_section > a.active,
body.zzv3 .tag_sidebar_section > a.zzv3-current {
  color: var(--zzv3-text);
  background: var(--zzv3-surface-raised);
  border-color: var(--zzv3-border);
}

/* Home: wider, better aligned and visually connected. */
body.zzv3.zzv3-home-surface .page-margin {
  margin-top: 18px;
}

body.zzv3.zzv3-home-surface .page-margin > .container {
  width: calc(100% - 32px);
  max-width: var(--zzv3-home-max);
  padding-inline: 0;
}

body.zzv3 .greetalert {
  max-width: var(--zzv3-home-max);
  margin: 0 auto 12px;
  padding: 0 2px;
}

body.zzv3 .greetalert #daynightmsg {
  color: var(--zzv3-text);
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

@media (min-width: 1200px) {
  body.zzv3.zzv3-home-surface .page-margin > .container > .row {
    display: grid !important;
    grid-template-columns: minmax(0, var(--zzv3-feed-width)) minmax(0, var(--zzv3-rail-width));
    justify-content: center;
    align-items: start;
    gap: var(--zzv3-column-gap);
    margin: 0;
  }

  body.zzv3.zzv3-home-surface .page-margin .middlecol,
  body.zzv3.zzv3-home-surface .page-margin .rightcol {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    float: none !important;
  }
}

/* V3.3.6: keep the account controls inside the primary desktop header row. */
body.zzv3 .tag_navbar_top .tag_header > .tag_navbar_top_right {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-block: 0;
  margin-inline: auto 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 768px) {
  body.zzv3 .tag_navbar_top .tag_header > .tag_navbar_top_right {
    align-self: stretch;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
  }

  body.zzv3 .tag_navbar_top .tag_header > .tag_navbar_top_right .tag_hdr_right {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 6px !important;
  }
}

/* V3.3.7: compact desktop rail that expands on hover or keyboard focus. */
@media (min-width: 993px) and (hover: hover) and (pointer: fine) {
  body.zzv3 {
    --zzv3-sidebar-collapsed: 72px;
    --zzv3-sidebar-expanded: 244px;
  }

  body.zzv3 .tag_header_top_m {
    margin-inline-start: var(--zzv3-sidebar-collapsed) !important;
  }

  body.zzv3.tag_header_top_p .tag_show_fnd_bottom {
    inset-inline-start: var(--zzv3-sidebar-collapsed) !important;
  }

  body.zzv3 .tag_navbar_top_side {
    width: var(--zzv3-sidebar-collapsed) !important;
    z-index: 1035;
    overflow: hidden;
    box-shadow: none;
    transition:
      width 220ms cubic-bezier(0.2, 0.8, 0.2, 1) 110ms,
      box-shadow 180ms ease;
    will-change: width;
  }

  body.zzv3 .tag_navbar_top_side:hover,
  body.zzv3 .tag_navbar_top_side:focus-within {
    width: var(--zzv3-sidebar-expanded) !important;
    box-shadow: 12px 0 34px rgba(8, 12, 20, 0.14);
    transition-delay: 0ms;
  }

  [dir="rtl"] body.zzv3 .tag_navbar_top_side:hover,
  [dir="rtl"] body.zzv3 .tag_navbar_top_side:focus-within {
    box-shadow: -12px 0 34px rgba(8, 12, 20, 0.14);
  }

  body.zzv3 .tag_navbar_top_side .sidebar_innr {
    padding-inline: 9px !important;
    overflow-x: hidden !important;
  }

  body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn {
    width: 100%;
    min-width: 0 !important;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0 !important;
    overflow: hidden !important;
    padding-inline: 8px !important;
    white-space: nowrap;
    transition:
      gap 180ms ease,
      background-color 160ms ease,
      border-color 160ms ease;
  }

  body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn > svg {
    flex: 0 0 34px;
    margin: 0 !important;
  }

  body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn > span {
    position: static !important;
    display: block !important;
    min-width: 0;
    max-width: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    opacity: 0;
    color: inherit !important;
    background: transparent !important;
    border-radius: 0 !important;
    line-height: 1.25 !important;
    text-overflow: clip;
    white-space: nowrap;
    transform: translateX(-8px) !important;
    pointer-events: none;
    transition:
      max-width 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 120ms ease,
      transform 180ms ease;
  }

  [dir="rtl"] body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn > span {
    transform: translateX(8px) !important;
  }

  body.zzv3 .tag_navbar_top_side:hover .sidebar_innr > .btn,
  body.zzv3 .tag_navbar_top_side:focus-within .sidebar_innr > .btn {
    gap: 11px !important;
  }

  body.zzv3 .tag_navbar_top_side:hover .sidebar_innr > .btn > span,
  body.zzv3 .tag_navbar_top_side:focus-within .sidebar_innr > .btn > span {
    max-width: 172px;
    opacity: 1;
    transform: none !important;
    transition-delay: 55ms;
  }
}

@media (min-width: 993px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  body.zzv3 .tag_navbar_top_side,
  body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn,
  body.zzv3 .tag_navbar_top_side .sidebar_innr > .btn > span {
    transition: none !important;
  }
}

/* V3.3.8: align the brand with the rail and use a real double-chevron control. */
@media (min-width: 993px) {
  body.zzv3 .tag_navbar_top .tag_header > .header-brand {
    order: 0;
    margin-inline-start: 8px;
  }

  body.zzv3 .tag_navbar_top .tag_header > .tag_toggle_sidebar {
    order: 1;
    margin: 0 !important;
    font-size: 19px;
  }

  body.zzv3 .tag_navbar_top .tag_header > .tag_toggle_sidebar > svg {
    display: none !important;
  }

  body.zzv3 .tag_navbar_top .tag_header > .tag_toggle_sidebar::after {
    content: "\f101";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 19px;
    line-height: 1;
    transition: transform 180ms ease;
  }

  body.zzv3 .tag_navbar_top .tag_header > .search-container {
    order: 2;
  }

  body.zzv3 .tag_navbar_top .tag_header > .tag_navbar_top_right {
    order: 3;
  }

  body.zzv3 .tag_navbar_top .tag_header .tag_toggle_search {
    display: none !important;
  }

  [dir="rtl"] body.zzv3 .tag_navbar_top .tag_header > .tag_toggle_sidebar::after {
    transform: scaleX(-1);
  }
}

@media (max-width: 992px) {
  body.zzv3 .tag_navbar_top .tag_header .tag_toggle_search {
    display: none !important;
  }

  body.zzv3 .tag_navbar_top .tag_header .search-container.show .tag_toggle_search {
    display: inline-flex !important;
  }
}

@media (min-width: 993px) and (hover: hover) and (pointer: fine) {
  body.zzv3 .tag_header_top_m {
    transition:
      opacity 250ms linear,
      margin-inline-start 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.zzv3.zzv3-sidebar-pinned .tag_header_top_m {
    margin-inline-start: var(--zzv3-sidebar-expanded) !important;
  }

  body.zzv3.zzv3-sidebar-pinned.tag_header_top_p .tag_show_fnd_bottom {
    inset-inline-start: var(--zzv3-sidebar-expanded) !important;
  }

  body.zzv3.zzv3-sidebar-pinned .tag_navbar_top_side {
    width: var(--zzv3-sidebar-expanded) !important;
    box-shadow: 12px 0 34px rgba(8, 12, 20, 0.14);
    transition-delay: 0ms;
  }

  [dir="rtl"] body.zzv3.zzv3-sidebar-pinned .tag_navbar_top_side {
    box-shadow: -12px 0 34px rgba(8, 12, 20, 0.14);
  }

  body.zzv3.zzv3-sidebar-pinned .tag_navbar_top_side .sidebar_innr > .btn {
    gap: 11px !important;
  }

  body.zzv3.zzv3-sidebar-pinned .tag_navbar_top_side .sidebar_innr > .btn > span {
    max-width: 172px;
    opacity: 1;
    transform: none !important;
    transition-delay: 55ms;
  }

  body.zzv3.zzv3-sidebar-pinned .tag_navbar_top .tag_header > .tag_toggle_sidebar::after {
    transform: rotate(180deg);
  }

  [dir="rtl"] body.zzv3.zzv3-sidebar-pinned .tag_navbar_top .tag_header > .tag_toggle_sidebar::after {
    transform: scaleX(-1) rotate(180deg);
  }
}

/* V3.3.9: show the real transparent ZZ logo instead of the icon treatment. */
body.zzv3 .tag_navbar_top .header-brand {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50%;
  box-shadow: none !important;
}

body.zzv3 .tag_navbar_top .header-brand .tag_logo_pc {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 5px 10px rgba(105, 72, 203, 0.2));
}

body.zzv3 .tag_navbar_top .header-brand .tag_logo_mobi {
  display: none !important;
}

@media (max-width: 992px) {
  body.zzv3 .tag_navbar_top .header-brand,
  body.zzv3 .tag_navbar_top .header-brand .tag_logo_pc {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
}

/* Stories: real full-bleed story cards, not tiny floating avatars. */
body.zzv3 .tag_stories_on_home {
  position: relative;
  max-width: var(--zzv3-home-max);
  margin: 0 auto 15px;
  padding: 4px 2px 6px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.zzv3 .tag_stories_on_home .tag_lbox_stories {
  width: 100%;
}

body.zzv3 .tag_stories_on_home .status-list {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 4px 4px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body.zzv3 .tag_stories_on_home .status-list::-webkit-scrollbar {
  display: none;
}

body.zzv3 .tag_stories_on_home .status-list > li {
  position: relative;
  width: 116px;
  min-width: 116px;
  height: 168px;
  margin: 0;
  overflow: visible;
  text-align: left;
  scroll-snap-align: start;
}

body.zzv3 .tag_stories_on_home .status-list > li.story_empty {
  display: none;
}

body.zzv3 .tag_stories_on_home .status-list > li > a {
  position: relative;
  isolation: isolate;
  width: 116px;
  height: 168px;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--zzv3-surface-raised);
  border: 1px solid var(--zzv3-border-strong);
  border-radius: 19px;
  box-shadow: var(--zzv3-shadow-sm);
}

body.zzv3 .tag_stories_on_home .status-list > li.not_seen_story > a {
  border: 2px solid var(--zzv3-purple);
}

body.zzv3 .tag_stories_on_home .status-list > li > a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.03) 34%, rgba(8, 9, 12, 0.78) 100%);
  pointer-events: none;
}

body.zzv3 .tag_stories_on_home .status-list > li > a > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 18px;
  transition: transform 180ms ease;
}

body.zzv3 .tag_stories_on_home .status-list > li:hover > a > img {
  transform: scale(1.035);
}

body.zzv3 .tag_stories_on_home .status-list > li > a > span {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: auto;
  bottom: auto;
  left: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2px;
  color: #fff;
  background: var(--zzv3-surface);
  border: 2px solid var(--zzv3-purple);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

body.zzv3 .tag_stories_on_home .status-list > li > a > span > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

body.zzv3 .tag_stories_on_home .status-list > li.create_new > a {
  border-color: var(--zzv3-border-strong);
}

body.zzv3 .tag_stories_on_home .status-list > li.create_new > a > span {
  top: 10px;
  right: 10px;
  left: auto;
  padding: 0;
  background: var(--zzv3-purple);
  border: 2px solid #fff;
}

body.zzv3 .tag_stories_on_home .status-list > li.create_new > a > span svg {
  width: 17px;
  height: 17px;
}

body.zzv3 .tag_stories_on_home .status-list > li > p {
  position: absolute;
  z-index: 4;
  right: 9px;
  bottom: 11px;
  left: 9px;
  width: auto;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.68);
}

body.zzv3 .tag_stories_on_home .view-more-stories {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: 8px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: var(--zzv3-text);
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border-strong);
  border-radius: 50%;
  box-shadow: var(--zzv3-shadow-md);
  transform: translateY(-50%);
}

/* Filters: a useful compact control, no empty full-width box. */
body.zzv3 .tag_home_filters,
body.zzv3.zzv3-dark .tag_home_filters {
  max-width: var(--zzv3-home-max);
  min-height: 48px;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 0 2px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.zzv3 .tag_home_filters .tag_page_nav {
  width: auto;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 3px;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border);
  border-radius: 14px;
  box-shadow: var(--zzv3-shadow-sm);
  scrollbar-width: none;
}

body.zzv3 .tag_home_filters .tag_page_nav::-webkit-scrollbar {
  display: none;
}

body.zzv3 .tag_home_filters .btn,
body.zzv3 .tag_home_filters .btn-mat,
body.zzv3 .tag_home_post_order .dropdown-toggle {
  min-height: 38px;
  padding: 8px 13px;
  color: var(--zzv3-muted);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}

body.zzv3 .tag_home_filters .filter-by-li.active > a,
body.zzv3 .tag_home_filters .filter-by-li > a:hover,
body.zzv3 .tag_home_post_order > a:hover {
  color: var(--zzv3-accent-strong);
  background: var(--zzv3-accent-soft);
}

body.zzv3 .tag_home_filters .tag_home_goup {
  margin-inline-start: auto;
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border);
}

/* Composer and posts: one confident feed surface with better hierarchy. */
body.zzv3 .tag_pub_box_bg {
  min-height: 82px;
  gap: 11px;
  margin-bottom: 16px;
  padding: 15px;
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border);
  border-radius: 20px;
  box-shadow: var(--zzv3-shadow-sm);
}

body.zzv3 .tag_pub_box_avatar,
body.zzv3 .tag_pub_box_avatar img {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

body.zzv3 .tag_pub_box_bg_text {
  min-height: 46px;
  padding-inline: 17px;
  color: var(--zzv3-muted);
  background: var(--zzv3-surface-raised);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 560;
}

body.zzv3 .tag_pub_box_bg_text:hover,
body.zzv3 .tag_pub_box_bg_text:focus {
  color: var(--zzv3-text-soft);
  background: var(--zzv3-surface-hover);
  border-color: var(--zzv3-border);
}

body.zzv3 .tag_pub_box_bg_camlve {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
}

body.zzv3 .post-container,
body.zzv3 .post.wow_content,
body.zzv3 .posts_load > div > .wow_content {
  overflow: visible;
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border);
  border-radius: 20px;
  box-shadow: var(--zzv3-shadow-sm);
}

body.zzv3 .post-container {
  margin-bottom: 16px;
}

body.zzv3 .post .post-heading,
body.zzv3 .post-container .post-heading {
  padding: 16px 17px 11px;
}

body.zzv3 .post-heading .avatar,
body.zzv3 .post-heading .avatar img {
  width: 46px;
  height: 46px;
}

body.zzv3 .post-heading .user-name,
body.zzv3 .post-heading .user-name a {
  color: var(--zzv3-text);
  font-size: 14px;
  font-weight: 760;
}

body.zzv3 .post-heading .ajax-time,
body.zzv3 .tag_post_hdr_sub {
  color: var(--zzv3-muted);
  font-size: 12px;
}

body.zzv3 .post .post-description,
body.zzv3 .post-container .post-description {
  padding-inline: 17px;
  color: var(--zzv3-text);
  font-size: 14.5px;
  line-height: 1.58;
}

body.zzv3 .post-file,
body.zzv3 .post-file img,
body.zzv3 .post-file video,
body.zzv3 .post-container .wo_adaptive_media,
body.zzv3 .post-container .wo_adaptive_media img {
  border-radius: 14px;
}

body.zzv3 .post .post-actions,
body.zzv3 .post-container .post-actions,
body.zzv3 .tag_post_actions {
  gap: 6px;
  padding: 8px 12px 10px;
  border-color: var(--zzv3-border);
}

body.zzv3 .post .post-actions .stat-item,
body.zzv3 .post-container .post-actions .stat-item,
body.zzv3 .tag_post_actions .btn,
body.zzv3 .post .post-actions .stat-item:nth-child(1),
body.zzv3 .post .post-actions .stat-item:nth-child(2),
body.zzv3 .post .post-actions .stat-item:nth-child(3),
body.zzv3 .tag_post_actions > *:nth-child(1),
body.zzv3 .tag_post_actions > *:nth-child(2),
body.zzv3 .tag_post_actions > *:nth-child(3) {
  min-height: 40px;
  padding: 9px 12px;
  color: var(--zzv3-muted);
  background: transparent;
  border-radius: 12px;
  font-weight: 680;
}

body.zzv3 .post .post-actions .stat-item:hover,
body.zzv3 .post-container .post-actions .stat-item:hover,
body.zzv3 .tag_post_actions .btn:hover {
  color: var(--zzv3-accent-strong);
  background: var(--zzv3-accent-soft);
}

body.zzv3 .comment-text,
body.zzv3 .comment-reply .comment-text {
  background: var(--zzv3-surface-raised);
  border-radius: 7px 16px 16px 16px;
}

/* Right rail: every widget belongs to the same product. */
body.zzv3 .rightcol.sidebar_fixed {
  top: 80px;
}

body.zzv3 .rightcol .wow_content,
body.zzv3 .tag_sidebar_widget {
  margin-bottom: 16px;
  padding: 15px;
  background: var(--zzv3-surface);
  border: 1px solid var(--zzv3-border);
  border-radius: 18px;
  box-shadow: var(--zzv3-shadow-sm);
}

body.zzv3 .tag_sidebar_widget_title,
body.zzv3 .wo_page_hdng {
  color: var(--zzv3-text);
  font-size: 15px;
  font-weight: 760;
}

body.zzv3 .rightcol .featured-users-innr,
body.zzv3 .rightcol .tag_pro_users {
  gap: 9px;
}

body.zzv3 .rightcol .btn-main,
body.zzv3 .rightcol .btn-default {
  border-radius: 11px;
}

body.zzv3 .zz-weather-widget,
body.zzv3 .zz-weather-light,
body.zzv3 .zz-weather-dark {
  margin-bottom: 16px !important;
  padding: 15px !important;
  color: var(--zzv3-text) !important;
  background: var(--zzv3-surface) !important;
  border: 1px solid var(--zzv3-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--zzv3-shadow-sm) !important;
}

body.zzv3 .zz-weather-title {
  font-size: 16px;
  font-weight: 760;
}

body.zzv3 .zz-weather-refresh,
body.zzv3 .zz-weather-day {
  color: var(--zzv3-text-soft);
  background: var(--zzv3-surface-raised);
}

/* Native create menu: useful but no longer a giant detached purple tile. */
body.zzv3 .tag_create_dropup {
  right: 28px;
  bottom: 26px;
}

body.zzv3 .tag_create_dropup.tag_chat_header {
  right: 104px;
}

body.zzv3 .tag_create_dropup > .btn,
body.zzv3 .tag_create_dropup > .btn.btn-main {
  min-width: 48px;
  width: 48px;
  height: 48px;
  line-height: 47px;
  color: var(--zzv3-accent-strong) !important;
  background: var(--zzv3-surface) !important;
  border: 1px solid var(--zzv3-border-strong) !important;
  border-radius: 16px;
  box-shadow: var(--zzv3-shadow-md);
}

body.zzv3 .tag_create_dropup > .btn:hover {
  color: #fff !important;
  background: var(--zzv3-purple) !important;
}

body.zzv3 .tag_create_dropup > .dropdown-menu::before {
  background: var(--zzv3-surface);
}

/* Messages, chat, reels and live inherit the calmer V3.2 surfaces. */
body.zzv3 .tag_messages,
body.zzv3 .chat_main,
body.zzv3 .wo_reels_cont,
body.zzv3 .tag_live_stage,
body.zzv3 .tag_self_hosted_stage {
  border-color: var(--zzv3-border);
  box-shadow: var(--zzv3-shadow-md);
}

body.zzv3 .chat_main {
  border-radius: 18px 18px 0 0;
}

@media (max-width: 1199px) {
  body.zzv3.zzv3-home-surface .page-margin > .container {
    max-width: 1040px;
  }

  body.zzv3.zzv3-home-surface .middlecol {
    width: min(100%, 680px);
    max-width: 680px;
  }
}

@media (max-width: 991px) {
  body.zzv3.zzv3-home-surface .page-margin > .container {
    max-width: 720px;
  }

  body.zzv3.zzv3-home-surface .middlecol {
    width: min(100%, 720px);
    max-width: 720px;
    margin-inline: auto;
  }

  body.zzv3 .tag_stories_on_home,
  body.zzv3 .tag_home_filters,
  body.zzv3 .greetalert {
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  body.zzv3 {
    --zzv3-header-height: 56px;
  }

  body.zzv3 .tag_header {
    gap: 8px;
    padding-inline: 8px;
  }

  body.zzv3 .header-brand {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  body.zzv3 .tag_header .search-input {
    height: 38px;
  }

  body.zzv3.zzv3-home-surface .page-margin {
    margin-top: 10px;
  }

  body.zzv3.zzv3-home-surface .page-margin > .container {
    width: 100%;
    padding-inline: 9px;
  }

  body.zzv3 .greetalert {
    margin-bottom: 8px;
    padding-inline: 4px;
  }

  body.zzv3 .greetalert #daynightmsg {
    font-size: 18px;
  }

  body.zzv3 .tag_stories_on_home {
    margin-bottom: 10px;
    padding-inline: 0;
  }

  body.zzv3 .tag_stories_on_home .status-list {
    gap: 9px;
    padding: 4px 2px 7px;
  }

  body.zzv3 .tag_stories_on_home .status-list > li,
  body.zzv3 .tag_stories_on_home .status-list > li > a {
    width: 96px;
    min-width: 96px;
    height: 142px;
  }

  body.zzv3 .tag_stories_on_home .status-list > li > a {
    border-radius: 17px;
  }

  body.zzv3 .tag_stories_on_home .status-list > li > a > img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }

  body.zzv3 .tag_stories_on_home .status-list > li > a > span {
    top: 8px;
    left: 8px;
    width: 29px;
    height: 29px;
  }

  body.zzv3 .tag_stories_on_home .status-list > li.create_new > a > span {
    top: 8px;
    right: 8px;
    left: auto;
  }

  body.zzv3 .tag_stories_on_home .status-list > li > p {
    right: 8px;
    bottom: 9px;
    left: 8px;
    font-size: 11px;
  }

  body.zzv3 .tag_home_filters,
  body.zzv3.zzv3-dark .tag_home_filters {
    min-height: 44px;
    margin-bottom: 11px;
    padding: 0;
    overflow-x: auto;
  }

  body.zzv3 .tag_home_filters .tag_page_nav {
    flex: 0 0 auto;
    max-width: 100%;
    border-radius: 13px;
  }

  body.zzv3 .tag_pub_box_bg {
    min-height: 68px;
    margin-bottom: 11px;
    padding: 10px;
    border-radius: 17px;
  }

  body.zzv3 .tag_pub_box_avatar,
  body.zzv3 .tag_pub_box_avatar img {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  body.zzv3 .tag_pub_box_bg_text {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 12px;
  }

  body.zzv3 .tag_pub_box_bg_camlve {
    width: 39px;
    min-width: 39px;
    height: 39px;
  }

  body.zzv3 .post-container,
  body.zzv3 .post.wow_content,
  body.zzv3 .posts_load > div > .wow_content {
    border-radius: 17px;
  }

  body.zzv3 .post .post-heading,
  body.zzv3 .post-container .post-heading {
    padding: 13px 13px 9px;
  }

  body.zzv3 .post .post-description,
  body.zzv3 .post-container .post-description {
    padding-inline: 13px;
  }

  body.zzv3 .tag_create_dropup {
    display: none;
  }

  body.zzv3 .zzv3-mobile-nav {
    background: color-mix(in srgb, var(--zzv3-shell) 96%, transparent);
    border-color: var(--zzv3-border);
  }
}

@media (max-width: 430px) {
  body.zzv3 .tag_stories_on_home .status-list > li,
  body.zzv3 .tag_stories_on_home .status-list > li > a {
    width: 90px;
    min-width: 90px;
    height: 134px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.zzv3 .tag_stories_on_home .status-list > li > a > img {
    transition: none;
  }
}

/*
 * V3.3 screenshot-led refinement
 * Aligns the home hierarchy, removes the double post shell and compacts the
 * account menu without changing WoWonder markup or behaviour.
 */
@media (min-width: 1200px) {
  body.zzv3.zzv3-home-surface .greetalert,
  body.zzv3.zzv3-home-surface .tag_stories_on_home,
  body.zzv3.zzv3-home-surface .tag_home_filters {
    max-width: calc(var(--zzv3-feed-width) + var(--zzv3-rail-width) + var(--zzv3-column-gap));
  }
}

body.zzv3 .greetalert #daynightmsg,
body.zzv3 .greetalert #daynightmsg * {
  color: var(--zzv3-text) !important;
}

body.zzv3 .greetalert #daynightmsg {
  font-size: 21px !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em;
}

/* The outer WoWonder wrapper is structural; the inner panel is the card. */
body.zzv3.zzv3-home-surface .posts_load .post-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.zzv3.zzv3-home-surface .posts_load .post-container > .post > .panel {
  margin: 0 0 16px !important;
  overflow: visible;
  background: var(--zzv3-surface) !important;
  border: 1px solid var(--zzv3-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--zzv3-shadow-sm) !important;
}

body.zzv3.zzv3-home-surface .posts_load .post-container > .post > .panel > .post-description {
  padding-bottom: 0;
}

body.zzv3.zzv3-home-surface .posts_load .wow_shared_posts {
  background: var(--zzv3-surface-soft);
  border-color: var(--zzv3-border-strong);
  border-radius: 16px;
}

body.zzv3.zzv3-home-surface .posts_load .tag_post_actions {
  margin: 14px -17px 0;
  padding: 8px 10px;
  border-top: 1px solid var(--zzv3-border);
}

/* Empty reaction/count rows previously created the large blank post footer. */
body.zzv3.zzv3-home-surface .posts_load .tag_post_foot_stats {
  min-height: 0;
  margin: 0;
  padding: 0 0 3px;
}

body.zzv3.zzv3-home-surface .posts_load .tag_post_foot_stats .post-actions {
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

body.zzv3.zzv3-home-surface .posts_load .tag_post_foot_stats .post-actions .stat-item {
  min-height: 0;
  margin: 0;
  padding: 4px 5px;
  background: transparent;
  border-radius: 8px;
}

body.zzv3.zzv3-home-surface .posts_load .tag_post_foot_stats .post-actions:not(:has(.stat-item:not(.d-none))),
body.zzv3.zzv3-home-surface .posts_load .tag_post_foot_stats .post-actions:has(> .like-stat .like-emo:empty) {
  display: none !important;
}

body.zzv3.zzv3-home-surface .posts_load .post-footer.hidden {
  display: none !important;
}

/* Account menu: compact social-app sheet instead of a tall square admin list. */
@media (min-width: 768px) {
  body.zzv3 .tag_navbar_top_right .tag_hdr_right > .tag_main_usr_ddmenu .tag_hdr_user_dropdown {
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    max-height: min(680px, calc(100vh - 88px)) !important;
    padding: 9px !important;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--zzv3-text) !important;
    background: var(--zzv3-surface) !important;
    border: 1px solid var(--zzv3-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(9, 10, 13, 0.24) !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 5px 8px;
    color: var(--zzv3-text-soft) !important;
    line-height: 34px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 630;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a:hover,
  body.zzv3 .tag_hdr_user_dropdown > li > a:focus {
    color: var(--zzv3-text) !important;
    background: var(--zzv3-surface-raised) !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a::before {
    display: none;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a > svg,
  body.zzv3 .tag_hdr_user_dropdown > li > a > img {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a > svg {
    padding: 7px;
    color: var(--zzv3-accent-strong);
    background: var(--zzv3-accent-soft);
  }

  body.zzv3 .tag_hdr_user_submenu {
    gap: 5px;
    margin: 1px 0 7px;
    padding-left: 52px;
  }

  body.zzv3 .tag_hdr_user_submenu a {
    min-height: 28px;
    margin: 0;
    padding: 0 9px;
    color: var(--zzv3-text-soft) !important;
    background: var(--zzv3-surface-raised);
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 28px;
  }

  body.zzv3 .tag_hdr_user_submenu a:hover {
    color: var(--zzv3-accent-strong) !important;
    background: var(--zzv3-accent-soft);
  }

  body.zzv3 .tag_hdr_user_dropdown hr {
    margin: 6px 4px;
    border-color: var(--zzv3-border);
  }
}

@media (max-width: 767px) {
  body.zzv3.zzv3-home-surface .posts_load .post-container > .post > .panel {
    border-radius: 17px !important;
  }
}

/* V3.3.1: preserve WoWonder's native dropdown mechanics and restore hit targets. */
@media (min-width: 768px) {
  body.zzv3 .tag_navbar_top_right .tag_hdr_right {
    z-index: 1048 !important;
  }

  body.zzv3 .tag_navbar_top_right .tag_main_usr_ddmenu,
  body.zzv3 .tag_navbar_top_right .tag_main_usr_ddmenu.show {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
  }

  body.zzv3 .tag_navbar_top_right .tag_hdr_right > .tag_main_usr_ddmenu .tag_hdr_user_dropdown {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y pinch-zoom;
    pointer-events: auto !important;
    isolation: isolate;
    z-index: 2 !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li {
    position: relative;
    pointer-events: auto !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a {
    position: relative;
    z-index: 2;
    display: block !important;
    width: 100%;
    cursor: pointer;
    pointer-events: auto !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a::before {
    pointer-events: none !important;
  }

  body.zzv3 .tag_hdr_user_dropdown > li > a > * {
    pointer-events: none !important;
  }

  body.zzv3 .tag_hdr_user_dropdown .tag_hdr_user_submenu,
  body.zzv3 .tag_hdr_user_dropdown .tag_hdr_user_submenu > a,
  body.zzv3 .tag_hdr_user_dropdown #collapseInvite,
  body.zzv3 .tag_hdr_user_dropdown #collapseInvite * {
    pointer-events: auto !important;
  }

  body.zzv3 .tag_hdr_user_dropdown .tag_hdr_user_submenu > a > * {
    pointer-events: none !important;
  }

  body.zzv3 .tag_hdr_user_dropdown::-webkit-scrollbar {
    width: 10px;
  }

  body.zzv3 .tag_hdr_user_dropdown::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--zzv3-accent) 55%, transparent);
    border: 3px solid var(--zzv3-surface);
    border-radius: 999px;
  }
}

/* V3.3.2: render the live account menu above WoWonder's fixed shell. */
@media (min-width: 768px) {
  body.zzv3 > .tag_hdr_user_dropdown.zzv3-profile-menu-portal,
  body.zzv3 > .tag_mobi_langs_menu.zzv3-profile-language-portal {
    position: fixed !important;
    top: var(--zzv3-profile-menu-top, 72px) !important;
    right: var(--zzv3-profile-menu-right, 12px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1090 !important;
    float: none !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--zzv3-profile-menu-max-height, calc(100vh - 88px)) !important;
    margin: 0 !important;
    padding: 9px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    color: var(--zzv3-text) !important;
    background: var(--zzv3-surface) !important;
    border: 1px solid var(--zzv3-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(5, 7, 12, 0.38) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    isolation: isolate;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  body.zzv3 > .tag_hdr_user_dropdown.zzv3-profile-menu-portal {
    display: block !important;
  }

  body.zzv3 > .tag_mobi_langs_menu.zzv3-profile-language-portal {
    display: none !important;
    pointer-events: auto !important;
  }

  body.zzv3.zzv3-profile-language-open > .tag_hdr_user_dropdown.zzv3-profile-menu-portal {
    display: none !important;
  }

  body.zzv3.zzv3-profile-language-open > .tag_mobi_langs_menu.zzv3-profile-language-portal {
    display: block !important;
  }

  body.zzv3 > .tag_hdr_user_dropdown.zzv3-profile-menu-portal > li,
  body.zzv3 > .tag_hdr_user_dropdown.zzv3-profile-menu-portal > li > a {
    pointer-events: auto !important;
  }

  body.zzv3 > .tag_hdr_user_dropdown.zzv3-profile-menu-portal > li > a {
    display: flex !important;
    align-items: center;
  }

  body.zzv3 > .tag_mobi_langs_menu.zzv3-profile-language-portal > .btn,
  body.zzv3 > .tag_mobi_langs_menu.zzv3-profile-language-portal > li,
  body.zzv3 > .tag_mobi_langs_menu.zzv3-profile-language-portal > li > a {
    pointer-events: auto !important;
  }
}

/* V3.3.5: let Pro member cards use the full widget width without becoming oversized. */
@media (min-width: 1200px) {
  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
    margin: 0;
  }

  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users:not(:has(> div:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users > div {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users > div > a {
    height: 100%;
    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden;
    background: var(--zzv3-surface-soft);
    border: 1px solid var(--zzv3-border) !important;
    border-radius: 14px;
    box-shadow: none !important;
  }

  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users > div img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px !important;
  }

  body.zzv3.zzv3-home-surface .rightcol .tag_pro_users > div h4 {
    margin: 8px 2px 2px;
    overflow: hidden;
    color: var(--zzv3-text);
    font-size: 13px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* V3.4.0: compact live weather in the social header. */
body.zzv3 .tag_hdr_right > .zz-weather-menu {
  position: relative;
  margin: 0 3px;
}

body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-trigger {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  min-width: 76px !important;
  height: 42px !important;
  gap: 7px;
  padding: 4px 11px 4px 5px !important;
  overflow: visible;
  color: var(--zzv3-text) !important;
  background: linear-gradient(135deg, rgba(244, 184, 74, 0.13), var(--zzv3-accent-soft)) !important;
  border: 1px solid rgba(217, 154, 54, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 18px rgba(38, 28, 10, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.zzv3 .zz-weather-menu-trigger::after {
  display: none !important;
}

body.zzv3 .zz-weather-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  overflow: hidden;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
  background: linear-gradient(145deg, #fff5bd 0%, #ffd166 52%, #ff9f55 100%);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(217, 154, 54, 0.25);
}

body.zzv3 .zz-weather-menu-temp {
  min-width: 27px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  letter-spacing: -0.025em;
  text-align: center;
}

body.zzv3 .zz-weather-menu-status {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: var(--zzv3-accent);
  border: 2px solid var(--zzv3-surface);
  border-radius: 50%;
  box-sizing: content-box;
}

body.zzv3 .zz-weather-menu.is-loading .zz-weather-menu-status {
  animation: zzWeatherPulse 1.2s ease-in-out infinite;
}

body.zzv3 .zz-weather-menu.is-ready .zz-weather-menu-status {
  background: var(--zzv3-green);
}

body.zzv3 .zz-weather-menu.has-error .zz-weather-menu-status {
  background: var(--zzv3-coral);
}

body.zzv3 .zz-weather-menu.has-error .zz-weather-menu-temp {
  color: var(--zzv3-coral);
}

body.zzv3 .zz-weather-menu.open > .zz-weather-menu-trigger,
body.zzv3 .zz-weather-menu.show > .zz-weather-menu-trigger {
  border-color: rgba(131, 88, 232, 0.4) !important;
  box-shadow: 0 0 0 3px var(--zzv3-accent-soft), 0 7px 22px rgba(38, 28, 10, 0.09);
}

body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1095 !important;
  width: 350px !important;
  min-width: 350px !important;
  height: auto !important;
  max-height: calc(100vh - 88px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  color: var(--zzv3-text) !important;
  background: var(--zzv3-surface) !important;
  background: color-mix(in srgb, var(--zzv3-surface) 96%, transparent) !important;
  border: 1px solid var(--zzv3-border-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(8, 10, 14, 0.24) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  transform-origin: top right;
  isolation: isolate;
}

body.zzv3 .zz-weather-menu.open > .zz-weather-menu-panel,
body.zzv3 .zz-weather-menu.show > .zz-weather-menu-panel {
  animation: zzWeatherPanelIn 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.zzv3 .zz-weather-menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, #ffd166, #ff8a65, var(--zzv3-accent));
  border-radius: 0 0 999px 999px;
  pointer-events: none;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-widget,
body.zzv3 .zz-weather-menu-panel .zz-weather-light,
body.zzv3 .zz-weather-menu-panel .zz-weather-dark {
  margin: 0 !important;
  padding: 18px !important;
  color: var(--zzv3-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-head {
  margin-bottom: 16px;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-subtitle {
  margin-top: 2px;
  color: var(--zzv3-muted);
  opacity: 1;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--zzv3-text-soft);
  background: var(--zzv3-surface-raised);
  border: 1px solid var(--zzv3-border);
  border-radius: 12px;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-now {
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.15), var(--zzv3-accent-soft));
  border: 1px solid var(--zzv3-border);
  border-radius: 16px;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-temp {
  min-width: 92px;
  color: var(--zzv3-text);
  font-size: 38px;
  letter-spacing: -0.055em;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-meta {
  color: var(--zzv3-text-soft);
  line-height: 1.65;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-meta > div:first-child {
  color: var(--zzv3-text);
  font-weight: 760;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-days {
  gap: 8px;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-day {
  min-width: 0;
  padding: 10px;
  color: var(--zzv3-text-soft);
  background: var(--zzv3-surface-raised);
  border: 1px solid var(--zzv3-border);
  border-radius: 13px;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-day-name,
body.zzv3 .zz-weather-menu-panel .zz-weather-day-temp {
  color: var(--zzv3-text);
}

body.zzv3 .zz-weather-menu-panel .zz-weather-loading,
body.zzv3 .zz-weather-menu-panel .zz-weather-error {
  padding: 12px;
  background: var(--zzv3-surface-raised);
  border-radius: 13px;
}

body.zzv3 .zz-weather-menu-panel .zz-weather-error {
  color: var(--zzv3-coral);
  background: rgba(232, 93, 117, 0.1);
}

[dir="rtl"] body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-panel {
  right: auto !important;
  left: 0 !important;
  transform-origin: top left;
}

@media (hover: hover) and (pointer: fine) {
  body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(217, 154, 54, 0.34) !important;
    box-shadow: 0 9px 24px rgba(38, 28, 10, 0.11);
  }

  body.zzv3 .zz-weather-menu-panel .zz-weather-refresh:hover {
    color: var(--zzv3-accent-strong);
    background: var(--zzv3-accent-soft);
    transform: rotate(20deg);
  }
}

@media (max-width: 1100px) {
  body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-trigger {
    width: 42px !important;
    min-width: 42px !important;
    padding: 4px !important;
  }

  body.zzv3 .zz-weather-menu-temp {
    display: none;
  }
}

@media (max-width: 767px) {
  body.zzv3 .tag_hdr_right > .zz-weather-menu {
    margin: 0 !important;
  }

  body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-panel,
  [dir="rtl"] body.zzv3 .tag_hdr_right > .zz-weather-menu > .zz-weather-menu-panel {
    position: fixed !important;
    top: auto !important;
    right: 10px !important;
    bottom: 57px !important;
    left: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    border-radius: 20px !important;
    transform-origin: bottom center;
  }

  body.zzv3 .zz-weather-menu-panel .zz-weather-now {
    flex-direction: row !important;
    align-items: center !important;
  }

  body.zzv3 .zz-weather-menu-panel .zz-weather-days {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.zzv3 .zz-weather-menu-panel .zz-weather-day {
    padding: 8px;
  }

  body.zzv3 .zz-weather-menu-panel .zz-weather-day-desc {
    display: none;
  }
}

@keyframes zzWeatherPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes zzWeatherPanelIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.zzv3 .zz-weather-menu-status,
  body.zzv3 .zz-weather-menu-panel,
  body.zzv3 .zz-weather-menu-trigger,
  body.zzv3 .zz-weather-refresh {
    animation: none !important;
    transition: none !important;
  }
}

/* V3.4.2: centre the actual feed, not the feed plus its right rail. */
@media (min-width: 1600px) {
  body.zzv3.zzv3-home-surface .page-margin > .container {
    max-width: calc(
      var(--zzv3-rail-width) +
      var(--zzv3-column-gap) +
      var(--zzv3-feed-width) +
      var(--zzv3-column-gap) +
      var(--zzv3-rail-width)
    ) !important;
  }

  body.zzv3.zzv3-home-surface .page-margin > .container > .row {
    grid-template-columns:
      minmax(0, var(--zzv3-rail-width))
      minmax(0, var(--zzv3-feed-width))
      minmax(0, var(--zzv3-rail-width)) !important;
  }

  body.zzv3.zzv3-home-surface .page-margin .middlecol {
    grid-column: 2;
  }

  body.zzv3.zzv3-home-surface .page-margin .rightcol {
    grid-column: 3;
  }

  body.zzv3.zzv3-home-surface .home-announcement,
  body.zzv3.zzv3-home-surface .greetalert,
  body.zzv3.zzv3-home-surface .tag_stories_on_home,
  body.zzv3.zzv3-home-surface .tag_home_filters,
  body.zzv3.zzv3-home-surface .page-margin > .container > hr.style-two {
    width: min(100%, var(--zzv3-feed-width));
    max-width: var(--zzv3-feed-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.zzv3.zzv3-home-surface .tag_stories_on_home .status-list {
    justify-content: center;
    justify-content: safe center;
  }

  body.zzv3.zzv3-home-surface .tag_stories_on_home .status-list:has(> li:nth-child(6):not(.story_empty)) {
    justify-content: flex-start;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters {
    justify-content: center;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters .tag_page_nav {
    margin-right: auto;
    margin-left: auto;
  }
}

/* V3.4.3: make the home filter rail match the composer width. */
@media (min-width: 768px) {
  body.zzv3.zzv3-home-surface .tag_home_filters.home > .tag_page_nav {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    justify-content: stretch;
    margin: 0 !important;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters.home > .tag_page_nav > .filter-by-li {
    min-width: 0;
    flex: 1 1 0;
    margin: 0 !important;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters.home > .tag_page_nav > .filter-by-li:last-child {
    padding-right: 0 !important;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters.home > .tag_page_nav > .filter-by-li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    gap: 7px;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  body.zzv3.zzv3-home-surface .tag_home_filters.home > .tag_home_goup {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    min-width: 60px;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  body.zzv3.zzv3-home-surface .tag_home_filters.home:has(> .tag_home_goup.btn-home-go-up) > .tag_page_nav {
    padding-right: 72px;
  }
}