diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css
index ac6f2b8b..949134e5 100644
--- a/assets/css/frontend/nav/base.css
+++ b/assets/css/frontend/nav/base.css
@@ -538,6 +538,9 @@ body.nav-fixed .header.show-slide .navbar.navbar-top {
   display: flex;
   align-items: center;
   gap: 8px;
+  overflow: visible;
+  position: relative;
+  z-index: 25;
 }
 
 .scroll-down.nav-fixed .header.scroll-down-hide,
diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css
index d1fca48a..d040a49c 100644
--- a/assets/css/frontend/nav/header-menu-buttons.css
+++ b/assets/css/frontend/nav/header-menu-buttons.css
@@ -10,6 +10,9 @@
   gap: 8px;
   flex-wrap: nowrap;
   min-width: 0;
+  overflow: visible;
+  position: relative;
+  z-index: 30;
 }
 
 .navbar-but-cluster .navbar-but,
@@ -27,28 +30,30 @@
 .navbar-but-cluster a.btn-primary,
 .navbar-but-cluster a.but.btn-primary,
 .navbar-but-cluster a.navbar-newposts.but,
-.navbar-but-cluster a.but,
+.navbar-but-cluster a.but:not(.newadd-btns__item),
 .navbar-but-cluster button.navbar-cta {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 6px 14px;
+  padding: 0 14px;
+  height: 34px;
+  min-height: 34px;
+  max-height: 34px;
   border-radius: var(--navbar-cta-radius, 20px);
   background: var(--color-primary, #2f6df6);
   color: #fff !important;
   text-decoration: none;
   border: 0;
   font-size: 13px;
-  line-height: 1.2;
+  line-height: 1;
   white-space: nowrap;
   box-sizing: border-box;
   vertical-align: middle;
   flex: 0 0 auto;
-  width: auto;
+  width: auto !important;
   max-width: none;
-  height: auto;
-  min-height: 0;
+  min-width: 0;
 }
 
 .navbar-but-cluster a.navbar-cta > i,
@@ -98,15 +103,21 @@
   margin-left: 0;
 }
 
-/* Publish multi-type dropdown */
+/* Publish multi-type dropdown
+ *
+ * Hover bridge strategy (zibll parity):
+ * - panel sits at top:100% (NO gap) so the mouse never leaves .hover-show
+ * - transparent padding-top is the bridge into the menu
+ * - solid white plate is painted by ::before below the bridge
+ * - do NOT put solid background on the whole panel (that would fill the bridge)
+ */
 .navbar-but-cluster .newadd-btns.hover-show,
 .newadd-btns.hover-show {
   position: relative;
   display: inline-flex;
   align-items: center;
   align-self: center;
-  z-index: 20;
-  /* Wrapper must never look like the CTA (no fill, no stretch when open). */
+  z-index: 40;
   background: transparent !important;
   color: inherit !important;
   padding: 0 !important;
@@ -119,54 +130,82 @@
   height: auto !important;
   flex: 0 0 auto;
   white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* Toggle: fixed chip size — never stretch when menu opens */
+.navbar-but-cluster a.newadd-btns__toggle,
+.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
+a.newadd-btns__toggle.navbar-cta {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px !important;
+  min-height: 34px !important;
+  max-height: 34px;
+  padding: 0 14px !important;
+  width: auto !important;
+  min-width: 0;
+  max-width: none;
+  flex: 0 0 auto !important;
+  box-sizing: border-box;
+  white-space: nowrap;
 }
 
 .navbar-but-cluster .newadd-btns .drop-newadd,
-.navbar-but-cluster .newadd-btns .hover-show-con,
+.navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd,
 .newadd-btns .drop-newadd,
-.newadd-btns .hover-show-con {
-  display: block !important;
-  position: absolute !important;
-  top: calc(100% + 4px) !important;
-  right: 0 !important;
-  left: auto !important;
-  float: none !important;
-  width: max-content !important;
+.newadd-btns .hover-show-con.drop-newadd {
+  display: block;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: auto;
+  float: none;
+  width: max-content;
   min-width: 160px;
   max-width: min(240px, 80vw);
-  margin: 0 !important;
-  /* Top bridge so pointer can move into menu without collapsing hover */
-  padding: 8px 0 6px !important;
-  /* Solid plate — guarantees readable ink contrast in light mode */
-  background: #ffffff !important;
-  color: #222222 !important;
-  border: 1px solid rgba(0, 0, 0, 0.08) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+  margin: 0;
+  /* Transparent hover bridge — must stay part of the panel hit area */
+  padding: 10px 0 6px;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  color: #222;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(6px);
-  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
-  z-index: 1200 !important;
+  transform: translateY(4px);
+  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
+  z-index: 1200;
   pointer-events: none;
   box-sizing: border-box;
 }
 
-/* Hide decorative plate — real background is on the panel itself */
+/* Solid readable plate under the bridge */
+.navbar-but-cluster .newadd-btns .drop-newadd::before,
 .newadd-btns .drop-newadd::before,
 .newadd-btns .hover-show-con.drop-newadd::before {
-  content: none !important;
-  display: none !important;
+  content: "" !important;
+  display: block !important;
+  position: absolute;
+  inset: 8px 0 0 0; /* sit below the transparent bridge */
+  background: #ffffff !important;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  z-index: -1;
+  pointer-events: none;
 }
 
 .navbar-but-cluster .newadd-btns.hover-show:hover .drop-newadd,
-.navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con,
+.navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
 .navbar-but-cluster .newadd-btns.hover-show:focus-within .drop-newadd,
-.navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con,
+.navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd,
 .newadd-btns.hover-show:hover .drop-newadd,
-.newadd-btns.hover-show:hover .hover-show-con,
+.newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
 .newadd-btns.hover-show:focus-within .drop-newadd,
-.newadd-btns.hover-show:focus-within .hover-show-con {
+.newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
@@ -187,11 +226,11 @@
   border: 0 !important;
   border-radius: 0;
   background: transparent !important;
-  /* Force dark ink — never inherit CTA white */
-  color: #222 !important;
+  color: #222222 !important;
   text-decoration: none !important;
   white-space: nowrap;
   position: relative;
+  z-index: 1;
   box-sizing: border-box;
   font-size: 13px !important;
   font-weight: 500;
@@ -218,19 +257,18 @@
 .navbar-but-cluster .newadd-btns .newadd-btns__item:hover,
 .newadd-btns .drop-newadd .newadd-btns__item:hover,
 .newadd-btns__item:hover {
-  background: var(--surface-2, rgba(0, 0, 0, 0.06)) !important;
+  background: rgba(0, 0, 0, 0.05) !important;
   color: var(--color-primary, #f04494) !important;
 }
 
-html.dark .newadd-btns .drop-newadd,
-html.dark .newadd-btns .hover-show-con,
-body.dark-theme .newadd-btns .drop-newadd,
-body.dark-theme .newadd-btns .hover-show-con,
-body.theme-dark .newadd-btns .drop-newadd,
-body.theme-dark .newadd-btns .hover-show-con {
+html.dark .newadd-btns .drop-newadd::before,
+html.dark .newadd-btns .hover-show-con.drop-newadd::before,
+body.dark-theme .newadd-btns .drop-newadd::before,
+body.dark-theme .newadd-btns .hover-show-con.drop-newadd::before,
+body.theme-dark .newadd-btns .drop-newadd::before,
+body.theme-dark .newadd-btns .hover-show-con.drop-newadd::before {
   background: #323335 !important;
-  color: #f8fafc !important;
-  border-color: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 html.dark .newadd-btns__item,
@@ -275,25 +313,62 @@ body.theme-dark .newadd-btns__item:hover {
   pointer-events: auto;
 }
 
-/* Header VIP hover cards — zibll .sub-vip-card */
+/* Header VIP hover cards — zibll .sub-vip-card
+ * Markup: .navbar-vip > span.navbar-vip-hover.hover-show > a + .sub-vip-card
+ * vip-modal.css also styles this; keep both in sync and win display:none.
+ */
+.navbar-but-cluster .navbar-vip,
+.navbar-vip {
+  position: relative;
+  z-index: 35;
+  overflow: visible;
+}
+
 .navbar-vip-hover,
 .navbar-vip .hover-show {
   position: relative;
   display: inline-block;
-  z-index: 30;
+  z-index: 35;
+  overflow: visible;
 }
 
+/* Kill vip-modal display:none when using the correct hover wrapper */
+.navbar-vip-hover .sub-vip-card,
+.navbar-vip .hover-show .sub-vip-card,
 .sub-vip-card.hover-show-con,
 .hover-show-con.sub-vip-card {
+  display: none; /* default hidden; shown on hover below */
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: auto;
+  z-index: 1200;
   font-size: 12px;
-  padding: 10px 0 0 !important; /* top bridge */
+  padding: 12px 8px 8px !important; /* top bridge into cards */
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   white-space: nowrap;
-  left: auto;
-  right: 0;
   min-width: 0;
+  width: max-content;
+  max-width: min(520px, 92vw);
+  box-sizing: border-box;
+  /* reset opacity system from generic .hover-show-con when display is used */
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+  pointer-events: auto;
+}
+
+.navbar-vip-hover:hover .sub-vip-card,
+.navbar-vip-hover:focus-within .sub-vip-card,
+.navbar-vip .hover-show:hover .sub-vip-card,
+.navbar-vip .hover-show:focus-within .sub-vip-card,
+.hover-show:hover > .sub-vip-card,
+.hover-show:focus-within > .sub-vip-card {
+  display: flex !important;
+  flex-wrap: wrap;
+  align-items: stretch;
 }
 
 .sub-vip-card .vip-card {
diff --git a/assets/css/frontend/nav/responsive-mega-menu.css b/assets/css/frontend/nav/responsive-mega-menu.css
index bff4a837..55a61fe1 100644
--- a/assets/css/frontend/nav/responsive-mega-menu.css
+++ b/assets/css/frontend/nav/responsive-mega-menu.css
@@ -26,6 +26,9 @@
   gap: 4px;
   flex-shrink: 0;
   margin-left: auto;
+  overflow: visible;
+  position: relative;
+  z-index: 25;
 }
 
 .nav-settings-link,
diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css
index 61a7b809..8349818e 100644
--- a/assets/css/frontend/vip-modal.css
+++ b/assets/css/frontend/vip-modal.css
@@ -198,27 +198,36 @@
   color: #e74c3c;
 }
 
-/* Header hover VIP cards */
-.navbar-vip.hover-show {
+/* Header hover VIP cards
+ * Markup: .navbar-vip > .navbar-vip-hover.hover-show > a + .hover-show-con.sub-vip-card
+ * (hover-show is on the INNER span, not on .navbar-vip itself)
+ */
+.navbar-vip-hover.hover-show,
+.navbar-vip .hover-show {
   position: relative;
 }
 
 .sub-vip-card {
   display: none;
   position: absolute;
-  top: calc(100% + 8px);
+  top: calc(100% + 0px);
   right: 0;
   z-index: 60;
-  width: min(420px, 90vw);
+  width: max-content;
+  max-width: min(520px, 92vw);
   padding: 10px;
+  padding-top: 12px; /* hover bridge */
   border-radius: 12px;
-  background: var(--main-bg-color, #fff);
-  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
+  background: transparent;
+  box-shadow: none;
   gap: 10px;
+  box-sizing: border-box;
 }
 
-.navbar-vip.hover-show:hover .sub-vip-card,
-.navbar-vip.hover-show:focus-within .sub-vip-card {
+.navbar-vip-hover.hover-show:hover .sub-vip-card,
+.navbar-vip-hover.hover-show:focus-within .sub-vip-card,
+.navbar-vip .hover-show:hover .sub-vip-card,
+.navbar-vip .hover-show:focus-within .sub-vip-card {
   display: flex;
   flex-wrap: wrap;
 }