/**

 * ZOOPEM

 * Shared UI Foundation

 *

 * Purpose:

 * - Global design tokens

 * - Responsive application shell

 * - Global search

 * - Navigation

 * - Modular/customizable cards

 * - Membership locked states

 * - Buttons/forms/badges

 * - Light/dark theme readiness

 *

 * NOTE:

 * This is the shared visual system.

 * Individual pages should reuse these classes instead of redefining them.

 */





/* ============================================================

   1. DESIGN TOKENS

   ============================================================ */



:root,
[data-zp-theme="dark"] {

  color-scheme: dark;



  --zp-bg: #0f1720;

  --zp-bg-soft: #131d28;



  --zp-surface: #17212d;

  --zp-surface-2: #1b2734;

  --zp-surface-3: #223142;



  --zp-border: #2b3a49;

  --zp-border-strong: #3a4b5e;



  --zp-text: #f3f6f9;

  --zp-text-soft: #c6d0da;

  --zp-text-muted: #8fa0b2;



  --zp-primary: #4f8cff;

  --zp-primary-hover: #75a6ff;

  --zp-primary-soft: #1d3151;





  --zp-success: #15803d;

  --zp-warning: #b45309;

  --zp-danger: #b91c1c;





  --zp-header-height: 68px;

  --zp-left-nav-width: 250px;

  --zp-right-rail-width: 310px;





  --zp-radius-sm: 8px;

  --zp-radius-md: 12px;

  --zp-radius-lg: 18px;





  --zp-transition:

    160ms ease;



  --zp-lock-bg: #332414;

  --zp-lock-border: #6b4420;



  --zp-shadow-sm:

    0 1px 2px rgba(0, 0, 0, 0.25);



  --zp-shadow-md:

    0 8px 24px rgba(0, 0, 0, 0.32);

}


/* ============================================================

   2. LIGHT THEME TOKENS

   ============================================================ */


[data-zp-theme="light"] {

  color-scheme: light;



  --zp-bg: #f4f7fb;

  --zp-bg-soft: #eef3f8;



  --zp-surface: #ffffff;

  --zp-surface-2: #f8fafc;

  --zp-surface-3: #eef3f8;



  --zp-border: #dbe3ec;

  --zp-border-strong: #c5d0dc;



  --zp-text: #17202b;

  --zp-text-soft: #4b5a6a;

  --zp-text-muted: #718096;



  --zp-primary: #2563eb;

  --zp-primary-hover: #1d4ed8;

  --zp-primary-soft: #e8f0ff;



  --zp-success: #15803d;

  --zp-warning: #b45309;

  --zp-danger: #b91c1c;



  --zp-lock-bg: #fff7ed;

  --zp-lock-border: #fed7aa;



  --zp-header-height: 68px;

  --zp-left-nav-width: 250px;

  --zp-right-rail-width: 310px;



  --zp-radius-sm: 8px;

  --zp-radius-md: 12px;

  --zp-radius-lg: 18px;



  --zp-shadow-sm:

    0 1px 2px rgba(15, 23, 42, 0.06);



  --zp-shadow-md:

    0 8px 24px rgba(15, 23, 42, 0.08);



  --zp-transition:

    160ms ease;

}





/* ============================================================

   3. RESET / BASE

   ============================================================ */



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  min-height: 100%;

  background: var(--zp-bg);

}



body {

  margin: 0;

  min-height: 100vh;



  background: var(--zp-bg);

  color: var(--zp-text);



  font-family:

    Inter,

    ui-sans-serif,

    system-ui,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;



  line-height: 1.5;

}



button,

input,

select,

textarea {

  font: inherit;

}



button,

a {

  -webkit-tap-highlight-color: transparent;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  max-width: 100%;

  display: block;

}





/* ============================================================

   4. SHARED APP SHELL

   ============================================================ */



.zp-shell {

  min-height: 100vh;

  background: var(--zp-bg);

}



.zp-header {

  position: sticky;

  top: 0;

  z-index: 100;



  height: var(--zp-header-height);



  display: grid;

  grid-template-columns:

    minmax(180px, var(--zp-left-nav-width))

    minmax(260px, 1fr)

    auto;



  align-items: center;

  gap: 20px;



  padding: 0 20px;



  background: var(--zp-surface);



  border-bottom:

    1px solid var(--zp-border);

}



.zp-body {

  display: grid;



  grid-template-columns:

    var(--zp-left-nav-width)

    minmax(0, 1fr)

    var(--zp-right-rail-width);



  gap: 22px;



  max-width: 1680px;

  margin: 0 auto;



  padding: 22px;

}



.zp-main {

  min-width: 0;

}



.zp-left-nav,

.zp-right-rail {

  min-width: 0;

}



/* ============================================================

   LEFT NAVIGATION SCROLL

   ============================================================ */



.zp-left-nav {

  position: sticky;

  top: calc(var(--zp-header-height) + 22px);



  align-self: start;



  max-height: calc(100vh - var(--zp-header-height) - 44px);



  overflow-y: auto;

  overflow-x: hidden;



  padding-right: 5px;



  scrollbar-width: thin;

  scrollbar-color:

    transparent

    transparent;

}



/* ============================================================



   ZOOPEM DESKTOP PERMANENT LEFT NAV FRAME



   ============================================================ */



@media (min-width: 781px) {



  .zp-left-nav {



    padding: 10px 5px 10px 10px;



    border:

      1px solid var(--zp-border);



    border-radius:

      var(--zp-radius-lg);



    background:

      rgba(13, 25, 37, 0.75);



    backdrop-filter:

      blur(16px);



  }



  .zp-left-nav > .zp-nav {



    position: static !important;



    top: auto !important;



    padding: 0 !important;



    border: 0 !important;



    border-radius: 0 !important;



    background: transparent !important;



    backdrop-filter: none !important;



  }



}







.zp-left-nav:hover {

  scrollbar-color:

    rgba(89, 166, 255, 0.50)

    transparent;

}



.zp-left-nav::-webkit-scrollbar {

  width: 5px;

}



.zp-left-nav::-webkit-scrollbar-track {

  background: transparent;

}



.zp-left-nav::-webkit-scrollbar-thumb {

  background: transparent;

  border-radius: 999px;

}



.zp-left-nav:hover::-webkit-scrollbar-thumb {

  background: rgba(89, 166, 255, 0.50);

}



.zp-left-nav::-webkit-scrollbar-thumb:hover {

  background: rgba(89, 166, 255, 0.72);

}





/* ============================================================

   5. BRAND

   ============================================================ */



.zp-brand {

  display: flex;

  align-items: center;

  gap: 12px;



  min-width: 0;

}



.zp-brand-mark {

  width: 40px;

  height: 40px;



  display: grid;

  place-items: center;



  flex: 0 0 auto;



  border-radius: 12px;



  background:

    linear-gradient(

      135deg,

      var(--zp-primary),

      #7c3aed

    );



  color: #ffffff;



  font-size: 18px;

  font-weight: 800;

}



.zp-brand-name {

  overflow: hidden;



  font-size: 20px;

  font-weight: 800;



  white-space: nowrap;

  text-overflow: ellipsis;

}





/* ============================================================

   6. GLOBAL SEARCH

   ============================================================ */



.zp-search {

  position: relative;



  width: 100%;

  max-width: 720px;



  margin: 0 auto;

}



.zp-search-input {

  width: 100%;

  height: 44px;



  padding:

    0 46px

    0 16px;



  border:

    1px solid var(--zp-border);



  border-radius: 999px;



  background: var(--zp-surface-2);

  color: var(--zp-text);



  outline: none;



  transition:

    border-color var(--zp-transition),

    background var(--zp-transition),

    box-shadow var(--zp-transition);

}



.zp-search-input::placeholder {

  color: var(--zp-text-muted);

}



.zp-search-input:focus {

  background: var(--zp-surface);



  border-color: var(--zp-primary);



  box-shadow:

    0 0 0 3px var(--zp-primary-soft);

}



.zp-search-button {

  position: absolute;

  top: 50%;

  right: 8px;



  width: 34px;

  height: 34px;



  transform: translateY(-50%);



  display: grid;

  place-items: center;



  border: 0;

  border-radius: 999px;



  background: transparent;

  color: var(--zp-text-soft);



  cursor: pointer;

}



.zp-search-button:hover {

  background: var(--zp-surface-3);

  color: var(--zp-text);

}



.zp-search-menu {

  position: absolute;

  top: calc(100% + 10px);

  left: 0;

  right: 0;



  display: none;



  padding: 10px;



  background: var(--zp-surface);



  border:

    1px solid var(--zp-border);



  border-radius: var(--zp-radius-lg);



  box-shadow: var(--zp-shadow-md);

}



.zp-search-menu[data-open="true"] {

  display: block;

}



.zp-search-category-row {

  display: flex;

  gap: 8px;



  overflow-x: auto;



  padding-bottom: 6px;

}



.zp-search-category {

  flex: 0 0 auto;



  padding: 7px 12px;



  border:

    1px solid var(--zp-border);



  border-radius: 999px;



  background: var(--zp-surface-2);

  color: var(--zp-text-soft);



  cursor: pointer;

}



.zp-search-category[data-active="true"] {

  background: var(--zp-primary);

  border-color: var(--zp-primary);

  color: #ffffff;

}








/* ============================================================

   SHARED GLOBAL SEARCH RESULTS

   ============================================================ */



.zp-global-search-results {

  display: grid;

  gap: 7px;

  max-height: 360px;

  margin-top: 8px;

  padding-top: 32px;

  overflow-y: auto;

  overscroll-behavior: contain;

}



.zp-global-search-results[hidden] {

  display: none;

}



.zp-global-search-group {



  display: grid;



  gap: 7px;



}







.zp-global-search-group + .zp-global-search-group {



  margin-top: 8px;



}







.zp-global-search-group-title {



  padding: 3px 4px;



  color: var(--zp-text-muted);



  font-size: 10px;



  font-weight: 800;



  letter-spacing: .08em;



  text-transform: uppercase;



}







.zp-global-search-group-heading {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  min-height: 26px;



  padding: 3px 5px 5px;



  border-bottom: 1px solid rgba(255,255,255,.06);



}







.zp-global-search-group-heading .zp-global-search-group-title {



  padding: 0;



  color: var(--zp-text-soft);



  font-size: 10px;



  font-weight: 850;



  letter-spacing: .1em;



}







.zp-global-search-group-view-all {



  flex: 0 0 auto;



  padding: 4px 8px;



  border: 1px solid rgba(89,166,255,.18);



  border-radius: 8px;



  background: rgba(89,166,255,.045);



  color: var(--zp-primary);



  font: inherit;



  font-size: 10px;



  font-weight: 750;



  line-height: 1.2;



  cursor: pointer;



}







.zp-global-search-group-view-all:hover,

.zp-global-search-group-view-all:focus-visible {



  border-color: rgba(89,166,255,.38);



  background: rgba(89,166,255,.11);



  text-decoration: none;



  outline: none;



}







.zp-global-search-group-results {



  display: grid;



  gap: 7px;



}







.zp-global-search-partial {



  margin-top: 6px;



  padding: 8px 10px;



  border: 1px solid var(--zp-border);



  border-radius: 10px;



  color: var(--zp-text-muted);



  font-size: 10px;



  line-height: 1.4;



}







.zp-global-search-person {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 9px;

  border: 1px solid var(--zp-border);

  border-radius: 11px;

  background: rgba(255,255,255,.025);

}



.zp-global-search-person:hover {

  border-color: rgba(89,166,255,.34);

  background: rgba(89,166,255,.06);

}



.zp-global-search-person-avatar {

  flex: 0 0 auto;

}



.zp-global-search-person-main {

  min-width: 0;

  flex: 1;

}



.zp-global-search-person-name {

  margin: 0;

  overflow: hidden;

  color: var(--zp-text);

  font-size: 12px;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.zp-global-search-person-meta {

  margin-top: 2px;

  overflow: hidden;

  color: var(--zp-text-muted);

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.zp-global-search-media {

  color: inherit;

  text-decoration: none;

}



.zp-global-search-media:focus-visible {

  outline: 2px solid var(--zp-primary);

  outline-offset: 2px;

}



.zp-global-search-media-thumbnail {

  display: block;

  object-fit: cover;

  overflow: hidden;

}





.zp-global-search-media-preview {

  position: fixed;

  z-index: 2100;

  width: min(300px, calc(100vw - 24px));

  padding: 8px;

  border: 1px solid var(--zp-border-strong);

  border-radius: 12px;

  background: rgba(7,16,24,.98);

  box-shadow: 0 18px 50px rgba(0,0,0,.42);

  pointer-events: none;

}



.zp-global-search-media-preview[hidden] {

  display: none;

}



.zp-global-search-media-preview-image {

  display: block;

  width: 100%;

  max-height: 320px;

  object-fit: contain;

  border-radius: 8px;

  background: var(--zp-surface-2);

}



.zp-global-search-media-preview-info {

  padding: 8px 4px 2px;

  min-width: 0;

}



.zp-global-search-media-preview-name {

  overflow: hidden;

  color: var(--zp-text);

  font-size: 12px;

  font-weight: 750;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.zp-global-search-media-preview-meta {

  margin-top: 3px;

  color: var(--zp-text-muted);

  font-size: 10px;

  line-height: 1.3;

}





.zp-global-search-media-icon {

  display: grid;

  place-items: center;

  color: var(--zp-text-soft);

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

}





.zp-global-search-person-link {

  position: relative;

  color: inherit;

  text-decoration: none;

  border-radius: 5px;

}



.zp-global-search-person-link:hover {

  color: var(--zp-primary-hover);

}



.zp-global-search-person-link:focus-visible {

  outline: 2px solid var(--zp-primary);

  outline-offset: 3px;

}





.zp-global-search-tooltip {

  position: fixed;

  z-index: 2000;

  transform: translate(-50%, -100%);

  padding: 6px 9px;

  border: 1px solid var(--zp-border-strong);

  border-radius: 7px;

  background: rgba(7,16,24,.97);

  box-shadow: 0 8px 24px rgba(0,0,0,.30);

  color: var(--zp-text-soft);

  font-size: 10px;

  font-weight: 600;

  line-height: 1.2;

  white-space: nowrap;

  pointer-events: none;

}



.zp-global-search-tooltip[hidden] {

  display: none;

}








/* ============================================================

   7. HEADER ACTIONS

   ============================================================ */



.zp-header-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;



  gap: 8px;

}



.zp-icon-button {

  position: relative;



  width: 42px;

  height: 42px;



  display: grid;

  place-items: center;



  border:

    1px solid transparent;



  border-radius: 999px;



  background: var(--zp-surface-2);

  color: var(--zp-text-soft);



  cursor: pointer;



  transition:

    background var(--zp-transition),

    color var(--zp-transition),

    border-color var(--zp-transition);

}



.zp-icon-button:hover {

  background: var(--zp-surface-3);

  color: var(--zp-text);

}



/* ==========================================================

   SHARED PROFILE / ACCOUNT HEADER

   ========================================================== */



.zp-account {

  position: relative;

}



.zp-preview-profile {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 5px 10px 5px 5px;

  border: 1px solid var(--zp-border);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.028);

  color: inherit;

  cursor: pointer;

}



.zp-preview-profile:hover {

  background: rgba(255, 255, 255, 0.05);

}



.zp-preview-profile-copy {

  display: grid;

  line-height: 1.15;

}



.zp-preview-profile-name {

  font-size: 12px;

  font-weight: 750;

}



.zp-preview-profile-tier {

  margin-top: 3px;

  color: var(--zp-text-muted);

  font-family: "SFMono-Regular", Consolas, monospace;

  font-size: 9px;

  letter-spacing: 0.07em;

  text-transform: uppercase;

}



.zp-account-menu {

  position: absolute;

  top: calc(100% + 10px);

  right: 0;

  z-index: 300;

  width: 220px;

  display: none;

  padding: 8px;

  border: 1px solid var(--zp-border);

  border-radius: 14px;

  background: rgba(12, 23, 34, 0.98);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(18px);

}



.zp-account-menu[data-open="true"] {

  display: grid;

}



.zp-account-menu a,

.zp-account-menu button {

  width: 100%;

  padding: 10px;

  border: 0;

  border-radius: 9px;

  background: transparent;

  color: var(--zp-text-soft);

  text-align: left;

  cursor: pointer;

}



.zp-account-menu a:hover,

.zp-account-menu button:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--zp-text);

}



@media (max-width: 780px) {

  .zp-preview-profile-copy {

    display: none;

  }

}





.zp-notification-dot {

  position: absolute;

  top: 2px;

  right: 1px;



  min-width: 18px;

  height: 18px;

  padding: 0 5px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  border-radius: 999px;



  background: var(--zp-danger);

  color: #ffffff;



  border: 2px solid var(--zp-surface);



  font-size: 9px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0;



  box-sizing: border-box;

  pointer-events: none;

}



.zp-notification-dot:empty,

.zp-notification-dot[hidden] {

  display: none;

}





/* ============================================================

   8. LEFT NAVIGATION

   ============================================================ */



.zp-nav {

  position: sticky;

  top: calc(var(--zp-header-height) + 22px);



  display: flex;

  flex-direction: column;



  gap: 6px;

}



/* ZOOPEM LEFT NAV READABILITY — 2026-09-15 */

.zp-nav-section-title {

  margin:

    18px 12px

    8px;



  color: var(--zp-text-muted);



  font-size: 14px;

  font-weight: 700;



  letter-spacing: 0.08em;

  text-transform: uppercase;

}





.zp-nav-section-toggle {



  width: 100%;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 10px;



  padding: 6px 8px;



  border: 0 !important;



  border-radius: 10px;



  background: transparent !important;



  box-shadow: none !important;



  color: var(--zp-text-muted);



  font-family: inherit;



  font-size: 14px;



  font-weight: 700;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  text-align: left;



  cursor: pointer;



  appearance: none;



  -webkit-appearance: none;



}



.zp-nav-section-toggle::-moz-focus-inner {



  border: 0;



  padding: 0;



}



.zp-nav-section-toggle:hover {



  background: rgba(255, 255, 255, 0.035) !important;



  color: var(--zp-text-soft);



}



.zp-nav-section-heading {



  display: flex;



  align-items: center;



  gap: 9px;



  min-width: 0;



}





/* ZOOPEM LEFT NAV SECTION LABEL EXPLICIT SIZE */



.zp-nav-section-heading > span:not(.zp-nav-section-icon) {



  font-size: 15px !important;



  line-height: 1.3;



  font-weight: 700;



  letter-spacing: 0.06em;



}





.zp-nav-section-icon {



  width: 28px;



  height: 28px;



  flex: 0 0 28px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  border-radius: 9px;



  color: #fff;



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);



}



.zp-nav-section-icon svg {



  width: 15px;



  height: 15px;



  fill: none;



  stroke: currentColor;



  stroke-width: 1.9;



  stroke-linecap: round;



  stroke-linejoin: round;



}



.zp-nav-group[data-group="social"] .zp-nav-section-icon {



  background: linear-gradient(135deg, #2f80ed, #65a8ff);



}



.zp-nav-group[data-group="tools"] .zp-nav-section-icon {



  background: linear-gradient(135deg, #875cff, #bb79ff);



}



.zp-nav-group[data-group="business"] .zp-nav-section-icon {



  background: linear-gradient(135deg, #ff8a34, #ffbd5a);



}



.zp-nav-group[data-group="account"] .zp-nav-section-icon {



  background: linear-gradient(135deg, #12b8ad, #42ddd0);



}



.zp-nav-section-toggle:hover {



  color: var(--zp-text-soft);



}



.zp-nav-section-toggle:focus-visible {



  outline: 2px solid var(--zp-primary);



  outline-offset: 4px;



  border-radius: 6px;



}



.zp-nav-section-chevron {



  flex: 0 0 auto;



  font-size: 16px;



  line-height: 1;



  font-weight: 700;



  color: var(--zp-text-muted);



}



.zp-nav-group-items {



  display: flex;



  flex-direction: column;



  gap: 6px;



}



.zp-nav-group-items[hidden] {



  display: none !important;



}



.zp-nav-item {

  display: flex;

  align-items: center;



  gap: 12px;



  min-height: 46px;



  padding: 10px 12px;



  border-radius: var(--zp-radius-md);



  color: var(--zp-text-soft);



  transition:

    background var(--zp-transition),

    color var(--zp-transition);

}



.zp-nav-item:hover {

  background: var(--zp-surface);

  color: var(--zp-text);

}



.zp-nav-item[data-active="true"] {

  background: var(--zp-primary-soft);

  color: var(--zp-primary);



  font-weight: 700;

}



.zp-nav-item[data-state="locked"] {

  opacity: 0.78;

}



.zp-nav-icon svg {

  width: 17px;

  height: 17px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}



/* ============================================================



   ZOOPEM PRIMARY NAVIGATION ICON COLORS



   ============================================================ */





.zp-nav-item[data-nav-id="home"] .zp-nav-icon {



  color: #4fc3ff;



}





.zp-nav-item[data-nav-id="feed"] .zp-nav-icon {



  color: #a970ff;



}





.zp-messages-unread-badge {



  margin-left: auto;



  min-width: 20px;



  height: 20px;



  padding: 0 6px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  flex: 0 0 auto;



  border-radius: 999px;



  background: #ff4d67;



  color: #ffffff;



  font-size: 10px;



  font-weight: 800;



  line-height: 1;



  box-sizing: border-box;



}







.zp-messages-unread-badge[hidden] {



  display: none;



}







.zp-nav-item[data-nav-id="messages"] .zp-nav-icon {



  color: #45e0b4;



}





.zp-nav-item[data-nav-id="notifications"] .zp-nav-icon {



  color: #ffad38;



}





.zp-nav-item[data-nav-id="z-connect"] .zp-nav-icon {



  color: #ff5fa5;



}





.zp-nav-item[data-nav-id="home"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="feed"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="messages"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="notifications"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="z-connect"] .zp-nav-icon svg {



  filter:

    drop-shadow(

      0 0 4px

      currentColor

    );



}





.zp-nav-item[data-active="true"] .zp-nav-icon svg {



  stroke-width: 2;



}







.zp-nav-icon {

  width: 22px;



  display: grid;

  place-items: center;



  flex: 0 0 auto;

}









/* ============================================================



   ZOOPEM TOOLS NAVIGATION ICON COLORS



   ============================================================ */





.zp-nav-item[data-nav-id="media-center"] .zp-nav-icon {



  color: #9b6cff;



}





.zp-nav-item[data-nav-id="events"] .zp-nav-icon {



  color: #ff9f43;



}





.zp-nav-item[data-nav-id="contacts"] .zp-nav-icon {



  color: #42d9e8;



}





.zp-nav-item[data-nav-id="search"] .zp-nav-icon {



  color: #59e391;



}





.zp-nav-item[data-nav-id="media-center"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="events"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="contacts"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="search"] .zp-nav-icon svg {



  filter:

    drop-shadow(

      0 0 4px

      currentColor

    );



}







/* ============================================================



   ZOOPEM BUSINESS + ACCOUNT NAVIGATION ICON COLORS



   ============================================================ */





.zp-nav-item[data-nav-id="businesses"] .zp-nav-icon {

  color: #ff9f43;

}





.zp-nav-item[data-nav-id="quick-connect"] .zp-nav-icon {

  color: #8f63ff;

}





.zp-nav-item[data-nav-id="profile"] .zp-nav-icon {

  color: #4ea7ff;

}





.zp-nav-item[data-nav-id="membership"] .zp-nav-icon {

  color: #9a68ff;

}





.zp-nav-item[data-nav-id="appearance"] .zp-nav-icon {

  color: #ff63c4;

}





.zp-nav-item[data-nav-id="privacy"] .zp-nav-icon {

  color: #48dc8b;

}





.zp-nav-item[data-nav-id="security"] .zp-nav-icon {

  color: #ff6464;

}





.zp-nav-item[data-nav-id="settings"] .zp-nav-icon {

  color: #4f95ff;

}





.zp-nav-item[data-nav-id="businesses"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="quick-connect"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="profile"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="membership"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="appearance"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="privacy"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="security"] .zp-nav-icon svg,

.zp-nav-item[data-nav-id="settings"] .zp-nav-icon svg {

  filter:

    drop-shadow(

      0 0 4px

      currentColor

    );

}







.zp-nav-item[data-nav-id="customize"] .zp-nav-icon {

  color: #45d8e8;

}



.zp-nav-item[data-nav-id="customize"] .zp-nav-icon svg {

  filter:

    drop-shadow(

      0 0 4px

      currentColor

    );

}



/* ============================================================

   ZOOPEM NESTED NAVIGATION SUBMENU

   ============================================================ */





/* ============================================================

   ZOOPEM MEDIA CENTER ACCORDION CHEVRON

   ============================================================ */



.zp-nav-media-chevron {

  flex: 0 0 auto;

  margin-left: auto;

  color: var(--zp-text-muted);

  font-size: 16px;

  line-height: 1;

  font-weight: 700;

}



.zp-nav-item[aria-expanded="true"]

.zp-nav-media-chevron {

  color: var(--zp-primary);

}





.zp-nav-submenu {

  display: flex;

  flex-direction: column;

  gap: 4px;

  margin:

    2px 0

    4px 22px;

  padding-left: 12px;

  border-left:

    1px solid

    rgba(145,169,196,.18);

}



.zp-nav-submenu[hidden] {

  display: none !important;

}







.zp-nav-subitem {

  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 34px;

  padding: 7px 10px;

  border-radius: 9px;

  color: var(--zp-text-muted);

  font-size: 14px;

  transition:

    background var(--zp-transition),

    color var(--zp-transition);

}



.zp-nav-subitem:hover {

  background: var(--zp-surface);

  color: var(--zp-text);

}



.zp-nav-subitem[data-active="true"] {

  background: var(--zp-primary-soft);

  color: var(--zp-primary);

  font-weight: 700;

}





/* ============================================================

   ZOOPEM MEDIA SUBMENU COLOR ICONS

   ============================================================ */



.zp-nav-subitem-icon[data-event-icon="coordinators"] {



  background: linear-gradient(135deg, #0f766e, #38bdf8);



}







.zp-nav-subitem-icon {

  width: 22px;

  height: 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 22px;

  border-radius: 7px;

  color: #ffffff;

  font-size: 11px;

  font-weight: 800;

  line-height: 1;

  box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.12),

    0 3px 9px rgba(0,0,0,.16);

}



.zp-nav-subitem-icon[data-media-icon="photos"] {

  background:

    linear-gradient(

      135deg,

      #3b82f6,

      #60a5fa

    );

}



.zp-nav-subitem-icon[data-media-icon="videos"] {

  background:

    linear-gradient(

      135deg,

      #f97316,

      #fb923c

    );

}



.zp-nav-subitem-icon[data-media-icon="albums"] {

  background:

    linear-gradient(

      135deg,

      #7c3aed,

      #a78bfa

    );

}



.zp-nav-subitem-icon[data-media-icon="favorites"] {

  background:

    linear-gradient(

      135deg,

      #db2777,

      #f472b6

    );

}



.zp-nav-subitem-icon[data-media-icon="shared"] {

  background:

    linear-gradient(

      135deg,

      #0f9f95,

      #2dd4bf

    );

}







/* ============================================================



   ZOOPEM Z CONNECT SUBMENU COLOR ICONS



   ============================================================ */







.zp-nav-subitem-icon[data-zconnect-icon="discover"] {



  background: linear-gradient(135deg, #2563eb, #22d3ee);



}







.zp-nav-subitem-icon[data-zconnect-icon="connections"] {



  background: linear-gradient(135deg, #0f9f95, #2dd4bf);



}







.zp-nav-subitem-icon[data-zconnect-icon="followers"] {



  background: linear-gradient(135deg, #16a34a, #4ade80);



}







.zp-nav-subitem-icon[data-zconnect-icon="following"] {



  background: linear-gradient(135deg, #4f46e5, #818cf8);



}







.zp-nav-subitem-icon[data-zconnect-icon="requests"] {



  background: linear-gradient(135deg, #d97706, #fbbf24);



}







.zp-nav-subitem-icon[data-zconnect-icon="blocked"] {



  background: linear-gradient(135deg, #dc2626, #f87171);



}











/* ============================================================

   ZOOPEM EVENTS SUBMENU COLOR ICONS

   ============================================================ */



.zp-nav-subitem-icon[data-event-icon="overview"] {



  background: linear-gradient(135deg, #0f766e, #2dd4bf);



}







.zp-nav-subitem-icon[data-event-icon="calendar"] {

  background: linear-gradient(135deg, #2563eb, #60a5fa);

}



.zp-nav-subitem-icon[data-event-icon="budget"] {

  background: linear-gradient(135deg, #059669, #34d399);

}



.zp-nav-subitem-icon[data-event-icon="guests"] {

  background: linear-gradient(135deg, #7c3aed, #a78bfa);

}



.zp-nav-subitem-icon[data-event-icon="seating"] {

  background: linear-gradient(135deg, #ea580c, #fb923c);

}



.zp-nav-subitem-icon[data-event-icon="communications"] {

  background: linear-gradient(135deg, #0891b2, #22d3ee);

}



.zp-nav-subitem-icon[data-event-icon="checklist"] {

  background: linear-gradient(135deg, #16a34a, #4ade80);

}



.zp-nav-subitem-icon[data-event-icon="notes-special-needs"] {

  background: linear-gradient(135deg, #db2777, #f472b6);

}



.zp-nav-subitem-icon[data-event-icon="tasks"] {

  background: linear-gradient(135deg, #4f46e5, #818cf8);

}





.zp-nav-subitem-icon {

  width: 18px;

  display: grid;

  place-items: center;

  flex: 0 0 18px;

  font-size: 12px;

}



.zp-nav-subitem-label {

  min-width: 0;

  flex: 1;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}





.zp-nav-label {

  min-width: 0;



  font-size: 15px;



  line-height: 1.35;



  font-weight: 500;



  flex: 1;



  overflow: hidden;



  white-space: nowrap;

  text-overflow: ellipsis;

}



.zp-lock-indicator {

  flex: 0 0 auto;



  color: var(--zp-warning);



  font-size: 12px;

}





/* ============================================================

   9. PAGE HEADER

   ============================================================ */



.zp-page-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;



  gap: 20px;



  margin-bottom: 18px;

}



.zp-page-title {

  margin: 0;



  font-size: clamp(24px, 3vw, 34px);

  line-height: 1.2;

}



.zp-page-subtitle {

  margin:

    6px 0 0;



  color: var(--zp-text-muted);

}



.zp-page-actions {

  display: flex;

  flex-wrap: wrap;



  gap: 8px;

}





/* ============================================================

   10. MODULE GRID

   ============================================================ */



.zp-module-grid {

  display: grid;



  grid-template-columns:

    repeat(12, minmax(0, 1fr));



  gap: 18px;

}



.zp-module {

  min-width: 0;



  grid-column: span 12;



  background: var(--zp-surface);



  border:

    1px solid var(--zp-border);



  border-radius: var(--zp-radius-lg);



  box-shadow: var(--zp-shadow-sm);



  overflow: hidden;

}



.zp-module[data-size="small"] {

  grid-column: span 4;

}



.zp-module[data-size="medium"] {

  grid-column: span 6;

}



.zp-module[data-size="large"] {

  grid-column: span 8;

}



.zp-module[data-size="full"] {

  grid-column: span 12;

}



.zp-module-header {

  display: flex;

  align-items: center;

  justify-content: space-between;



  gap: 12px;



  padding:

    16px 18px;



  border-bottom:

    1px solid var(--zp-border);

}



.zp-module-title {

  margin: 0;



  font-size: 16px;

  font-weight: 750;

}



.zp-module-actions {

  display: flex;

  align-items: center;



  gap: 6px;

}



.zp-module-body {

  padding: 18px;

}



.zp-module-footer {

  padding:

    12px 18px;



  border-top:

    1px solid var(--zp-border);



  background: var(--zp-surface-2);

}





/* ============================================================

   11. CUSTOMIZATION STATES

   ============================================================ */



.zp-module[data-customizing="true"] {

  outline:

    2px dashed var(--zp-primary);



  outline-offset: -5px;

}



.zp-module-drag-handle {

  cursor: grab;

  user-select: none;

}



.zp-module-drag-handle:active {

  cursor: grabbing;

}



.zp-module[data-dragging="true"] {

  opacity: 0.6;



  transform: scale(0.995);

}



.zp-customize-toolbar {

  display: flex;

  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 16px;



  padding: 12px;



  background: var(--zp-surface);



  border:

    1px solid var(--zp-border);



  border-radius: var(--zp-radius-lg);

}





/* ============================================================

   12. MEMBERSHIP / FEATURE GATING

   ============================================================ */



.zp-feature-locked {

  position: relative;



  background: var(--zp-lock-bg);



  border-color: var(--zp-lock-border);

}



.zp-feature-lock-panel {

  display: flex;

  align-items: flex-start;



  gap: 12px;



  padding: 16px;



  border:

    1px solid var(--zp-lock-border);



  border-radius: var(--zp-radius-md);



  background: var(--zp-lock-bg);

}



.zp-feature-lock-icon {

  width: 34px;

  height: 34px;



  display: grid;

  place-items: center;



  flex: 0 0 auto;



  border-radius: 999px;



  background: rgba(180, 83, 9, 0.12);



  color: var(--zp-warning);

}



.zp-feature-lock-content {

  min-width: 0;

  flex: 1;

}



.zp-feature-lock-title {

  margin: 0 0 4px;



  font-weight: 750;

}



.zp-feature-lock-text {

  margin: 0;



  color: var(--zp-text-soft);



  font-size: 14px;

}





/* ============================================================

   13. BUTTONS

   ============================================================ */



.zp-button {

  min-height: 40px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  gap: 8px;



  padding:

    8px 15px;



  border:

    1px solid transparent;



  border-radius: 10px;



  font-weight: 700;



  cursor: pointer;



  transition:

    background var(--zp-transition),

    border-color var(--zp-transition),

    color var(--zp-transition),

    transform var(--zp-transition);

}



.zp-button:active {

  transform: translateY(1px);

}



.zp-button-primary {

  background: var(--zp-primary);

  color: #ffffff;

}



.zp-button-primary:hover {

  background: var(--zp-primary-hover);

}



.zp-button-secondary {

  background: var(--zp-surface);

  border-color: var(--zp-border);

  color: var(--zp-text);

}



.zp-button-secondary:hover {

  background: var(--zp-surface-2);

}



.zp-button-ghost {

  background: transparent;

  color: var(--zp-text-soft);

}



.zp-button-ghost:hover {

  background: var(--zp-surface-3);

  color: var(--zp-text);

}



.zp-button-danger {

  background: var(--zp-danger);

  color: #ffffff;

}





/* ============================================================

   14. BADGES

   ============================================================ */



.zp-badge {

  display: inline-flex;

  align-items: center;



  min-height: 24px;



  padding:

    3px 8px;



  border-radius: 999px;



  background: var(--zp-surface-3);

  color: var(--zp-text-soft);



  font-size: 12px;

  font-weight: 700;

}



.zp-badge-primary {

  background: var(--zp-primary-soft);

  color: var(--zp-primary);

}



.zp-badge-success {

  background: rgba(21, 128, 61, 0.12);

  color: var(--zp-success);

}



.zp-badge-warning {

  background: rgba(180, 83, 9, 0.12);

  color: var(--zp-warning);

}





/* ============================================================

   15. FORM CONTROLS

   ============================================================ */



.zp-field {

  display: grid;

  gap: 7px;

}



.zp-label {

  font-size: 14px;

  font-weight: 700;

}



.zp-input,

.zp-select,

.zp-textarea {

  width: 100%;



  border:

    1px solid var(--zp-border);



  border-radius: 10px;



  background: var(--zp-surface);

  color: var(--zp-text);



  outline: none;



  transition:

    border-color var(--zp-transition),

    box-shadow var(--zp-transition);

}



.zp-input,

.zp-select {

  min-height: 42px;



  padding:

    8px 12px;

}



.zp-textarea {

  min-height: 120px;



  padding:

    10px 12px;



  resize: vertical;

}



.zp-input:focus,

.zp-select:focus,

.zp-textarea:focus {

  border-color: var(--zp-primary);



  box-shadow:

    0 0 0 3px var(--zp-primary-soft);

}





/* ============================================================

   16. RIGHT RAIL

   ============================================================ */



.zp-right-stack {

  position: sticky;

  top: calc(var(--zp-header-height) + 22px);



  display: grid;



  gap: 16px;

}



.zp-rail-card {

  padding: 16px;



  background: var(--zp-surface);



  border:

    1px solid var(--zp-border);



  border-radius: var(--zp-radius-lg);



  box-shadow: var(--zp-shadow-sm);

}



.zp-rail-title {

  margin:

    0 0 12px;



  font-size: 15px;

  font-weight: 750;

}





/* ============================================================

   17. AVATARS

   ============================================================ */



.zp-avatar {

  width: 40px;

  height: 40px;



  display: grid;

  place-items: center;



  overflow: hidden;



  border-radius: 999px;



  background: var(--zp-primary-soft);

  color: var(--zp-primary);



  font-weight: 800;



  flex: 0 0 auto;

}



.zp-avatar img {

  width: 100%;

  height: 100%;



  object-fit: cover;

}





/* ============================================================

   18. EMPTY / LOADING STATES

   ============================================================ */



.zp-empty-state {

  padding: 32px 20px;



  text-align: center;



  color: var(--zp-text-muted);

}



.zp-loading {

  display: inline-flex;

  align-items: center;



  gap: 8px;



  color: var(--zp-text-muted);

}



.zp-skeleton {

  min-height: 18px;



  border-radius: 6px;



  background:

    linear-gradient(

      90deg,

      var(--zp-surface-2),

      var(--zp-surface-3),

      var(--zp-surface-2)

    );



  background-size: 220% 100%;



  animation:

    zp-skeleton 1.4s linear infinite;

}



@keyframes zp-skeleton {

  from {

    background-position: 200% 0;

  }



  to {

    background-position: -20% 0;

  }

}





/* ============================================================

   19. VISIBILITY UTILITIES

   ============================================================ */



.zp-hidden {

  display: none !important;

}



.zp-visually-hidden {

  position: absolute !important;



  width: 1px !important;

  height: 1px !important;



  padding: 0 !important;

  margin: -1px !important;



  overflow: hidden !important;



  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;



  border: 0 !important;

}





/* ============================================================

   20. TABLET

   ============================================================ */



@media (max-width: 1180px) {

  .zp-body {

    grid-template-columns:

      220px

      minmax(0, 1fr);

  }



  .zp-right-rail {

    display: none;

  }



  .zp-header {

    grid-template-columns:

      180px

      minmax(220px, 1fr)

      auto;

  }



  .zp-module[data-size="small"] {

    grid-column: span 6;

  }



  .zp-module[data-size="large"] {

    grid-column: span 12;

  }

}









/* ZOOPEM MOBILE NAVIGATION DRAWER */



.zp-mobile-nav-toggle {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 38px;

  padding: 0 11px;

  border: 1px solid var(--zp-border);

  border-radius: 999px;

  background: var(--zp-surface-2);

  color: var(--zp-text-soft);

  font: inherit;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;

}



.zp-mobile-nav-toggle:hover {

  background: var(--zp-surface-3);

  color: var(--zp-text);

}



.zp-mobile-nav-close {

  display: none;

}



.zp-mobile-nav-backdrop {

  display: none;

}



@media (max-width: 780px) {



  .zp-mobile-nav-toggle {

    display: inline-flex;

  }



  .zp-left-nav {

    display: block !important;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1200;

    width: min(285px, 86vw);

    height: 100dvh;

    max-height: none;

    padding: 12px;

    overflow-y: auto;

    overflow-x: hidden;

    background:

      linear-gradient(

        180deg,

        rgba(10,21,32,.99),

        rgba(12,25,38,.99)

      );

    border-right: 1px solid var(--zp-border);

    box-shadow: 20px 0 60px rgba(0,0,0,.42);

    transform: translateX(-105%);

    transition: transform 180ms ease;

  }



  .zp-left-nav[data-mobile-open="true"] {

    transform: translateX(0);

  }



  .zp-mobile-nav-close {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 40px;

    margin-bottom: 10px;

    padding: 0 10px;

    border: 1px solid var(--zp-border);

    border-radius: 10px;

    background: rgba(255,255,255,.025);

    color: var(--zp-text-soft);

    font: inherit;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

  }



  .zp-mobile-nav-close span:first-child {

    font-size: 20px;

    line-height: 1;

  }



  .zp-mobile-nav-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1100;

    display: block;

    background: rgba(3,8,14,.72);

    backdrop-filter: blur(5px);

  }



  .zp-mobile-nav-backdrop[hidden] {

    display: none;

  }



  body[data-zp-mobile-nav-open="true"] {

    overflow: hidden;

  }

}



/* ============================================================

   21. MOBILE

   ============================================================ */



@media (max-width: 780px) {

  :root {

    --zp-header-height: auto;

  }



  .zp-header {

    position: sticky;



    grid-template-columns:

      1fr

      auto;



    gap: 12px;



    height: auto;



    padding:

      10px 14px;

  }



  .zp-brand-name {

    font-size: 18px;

  }



  .zp-search {

    grid-column:

      1 / -1;



    order: 3;



    max-width: none;

  }



  .zp-body {

    display: block;



    padding: 14px;

  }



  .zp-left-nav {

    display: none;

  }



  .zp-right-rail {

    display: none;

  }



  .zp-page-header {

    display: block;

  }



  .zp-page-actions {

    margin-top: 12px;

  }



  .zp-module-grid {

    display: block;

  }



  .zp-module {

    margin-bottom: 14px;

  }



  .zp-module[data-size="small"],

  .zp-module[data-size="medium"],

  .zp-module[data-size="large"],

  .zp-module[data-size="full"] {

    width: 100%;

  }

}





/* ============================================================

   FORM SELECT DROPDOWN COLORS

   ============================================================ */



select {

  color-scheme: dark;

}



select option {

  background: #132232;

  color: #eef6ff;

}





/* ============================================================

   22. REDUCED MOTION

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;



    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;



    transition-duration: 0.01ms !important;

  }

}




/* ============================================================

   23. USER PAGE DENSITY PREFERENCES

   ============================================================ */



/**

 * Comfortable is the normal/default Zoopem spacing.

 */

html[data-zp-density="comfortable"] .zp-body {

  gap: 22px;

}



html[data-zp-density="comfortable"] .zp-module-body {

  padding: 18px;

}



html[data-zp-density="comfortable"] .zp-module-header {

  padding: 16px 18px;

}



html[data-zp-density="comfortable"] .zp-rail-card {

  padding: 16px;

}



html[data-zp-density="comfortable"] .zp-nav-item {

  min-height: 46px;

}





/**

 * Compact reduces vertical space throughout the consumer shell.

 */

html[data-zp-density="compact"] .zp-body {

  gap: 14px;

  padding-top: 14px;

  padding-bottom: 14px;

}



html[data-zp-density="compact"] .zp-module-grid {

  gap: 12px;

}



html[data-zp-density="compact"] .zp-module-body {

  padding: 12px 14px;

}



html[data-zp-density="compact"] .zp-module-header {

  padding: 11px 14px;

}



html[data-zp-density="compact"] .zp-module-footer {

  padding: 9px 14px;

}



html[data-zp-density="compact"] .zp-rail-card {

  padding: 11px 12px;

}



html[data-zp-density="compact"] .zp-right-stack {

  gap: 10px;

}



html[data-zp-density="compact"] .zp-nav {

  gap: 3px;

  padding: 7px;

}



html[data-zp-density="compact"] .zp-nav-item {

  min-height: 35px;

  padding-top: 6px;

  padding-bottom: 6px;

}



html[data-zp-density="compact"] .zp-nav-section-title {

  margin-top: 10px;

  margin-bottom: 5px;

}



html[data-zp-density="compact"] .zp-page-banner {

  padding: 13px 15px;

  margin-bottom: 11px;

}



html[data-zp-density="compact"] .zp-customize-toolbar {

  padding: 9px 11px;

  margin-bottom: 10px;

}



html[data-zp-density="compact"] .zp-customizer-panel {

  padding: 10px;

}



html[data-zp-density="compact"] .zp-customizer-list {

  gap: 5px;

}



html[data-zp-density="compact"] .zp-customizer-item {

  padding: 7px 9px;

}



html[data-zp-density="compact"] .zp-feed-card {

  padding: 12px;

}



html[data-zp-density="compact"] .zp-feed-copy {

  margin-top: 9px;

  margin-bottom: 9px;

}



html[data-zp-density="compact"] .zp-marketing-content {

  padding: 14px 16px;

}






/* ============================================================

   24. USER SUPPORTING-MODULE COLUMN PREFERENCES

   ============================================================ */



/**

 * One-column supporting layout.

 */

html[data-zp-supporting-columns="1"] .zp-supporting-grid {

  grid-template-columns: 1fr !important;

}



/**

 * Two-column supporting layout.

 */

html[data-zp-supporting-columns="2"] .zp-supporting-grid {

  grid-template-columns:

    repeat(2, minmax(0, 1fr)) !important;

}





/* ============================================================

   25. CUSTOMIZATION VISIBILITY FEEDBACK

   ============================================================ */



/**

 * Elements hidden by user preferences should disappear entirely.

 */

[data-zp-right-rail][hidden],

[data-zp-marketing-type][hidden] {

  display: none !important;

}





/**

 * Add a subtle transition when preference-driven areas change.

 */

.zp-supporting-grid,

.zp-right-stack,

.zp-marketing-banner,

.zp-rail-card {

  transition:

    opacity var(--zp-transition),

    transform var(--zp-transition),

    grid-template-columns var(--zp-transition);

}







/* ZOOPEM MOBILE NAVIGATION CONTRAST FIX */



@media (max-width: 780px) {



  .zp-left-nav {

    display: block !important;

    z-index: 10001 !important;

    opacity: 1 !important;

    filter: none !important;

    isolation: isolate;

    background: #0b1723 !important;

    border-right: 1px solid rgba(145,169,196,.28) !important;

    box-shadow: 24px 0 70px rgba(0,0,0,.60) !important;

  }



  .zp-left-nav .zp-nav {

    position: static !important;

    top: auto !important;

    opacity: 1 !important;

    filter: none !important;

  }



  .zp-left-nav .zp-nav-item {

    opacity: 1 !important;

    color: var(--zp-text-soft) !important;

  }



  .zp-left-nav .zp-nav-item[data-active="true"] {

    color: var(--zp-primary) !important;

  }



  .zp-left-nav .zp-nav-section-toggle {

    opacity: 1 !important;

    color: #aebdca !important;

  }



  .zp-left-nav .zp-nav-section-title {

    opacity: 1 !important;

    color: #91a4b7 !important;

  }



  .zp-mobile-nav-backdrop {

    z-index: 10000 !important;

    background: rgba(3,8,14,.76) !important;

    backdrop-filter: none !important;

  }



}







/* ZOOPEM MOBILE BACKDROP BOUNDARY FIX */



@media (max-width: 780px) {



  .zp-mobile-nav-backdrop {

    left: min(285px, 86vw) !important;

    right: 0 !important;

    top: 0 !important;

    bottom: 0 !important;

    width: auto !important;

    pointer-events: auto !important;

  }



  .zp-left-nav {

    pointer-events: auto !important;

  }



  .zp-left-nav *,

  .zp-left-nav a,

  .zp-left-nav button {

    pointer-events: auto !important;

  }



}



/* ============================================================

   ZOOPEM SHARED MODAL SYSTEM

   ============================================================ */



.zp-modal {

  position: fixed;

  inset: 0;

  z-index: 5100;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

}



.zp-modal[hidden] {

  display: none;

}



.zp-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(2,7,13,.84);

  backdrop-filter: blur(8px);

}



.zp-modal-panel {

  position: relative;

  z-index: 1;

  width: min(460px, 94vw);

  overflow: hidden;

  border: 1px solid var(--zp-border);

  border-radius: 16px;

  background:

    linear-gradient(

      145deg,

      rgba(15,27,40,.99),

      rgba(20,34,49,.99)

    );

  box-shadow:

    0 28px 90px rgba(0,0,0,.55);

}



.zp-modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--zp-border);

}



.zp-modal-header strong {

  font-size: 14px;

}



.zp-modal-close {

  width: 32px;

  height: 32px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--zp-border);

  border-radius: 9px;

  background: rgba(255,255,255,.035);

  color: var(--zp-text-soft);

  font-size: 20px;

  line-height: 1;

  cursor: pointer;

}



.zp-modal-close:hover {

  border-color: rgba(115,151,196,.45);

  background: rgba(255,255,255,.065);

  color: var(--zp-text);

}



.zp-modal-body {

  display: grid;

  gap: 8px;

  padding: 16px;

}



.zp-modal-success-icon {

  width: 48px;

  height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 12px;

  border: 1px solid rgba(72,215,197,.36);

  border-radius: 14px;

  background:

    linear-gradient(

      135deg,

      rgba(72,215,197,.18),

      rgba(89,166,255,.12)

    );

  color: #7ce6d8;

  font-size: 22px;

  font-weight: 800;

  box-shadow: 0 10px 28px rgba(0,0,0,.18);

}



.zp-modal-copy {

  display: grid;

  gap: 6px;

}



.zp-modal-copy > strong {

  color: var(--zp-text);

  font-size: 13px;

}



.zp-modal-copy p {

  margin: 0;

  color: var(--zp-text-soft);

  font-size: 11px;

  line-height: 1.5;

}



.zp-modal-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  padding: 0 16px 16px;

}



@media (max-width: 520px) {

  .zp-modal {

    padding: 14px;

  }



  .zp-modal-panel {

    width: 100%;

  }



  .zp-modal-actions {

    flex-direction: column-reverse;

  }



  .zp-modal-actions .zp-button {

    width: 100%;

  }

}



/* ============================================================



   ZOOPEM SOCIAL PRESENCE SYSTEM



   ============================================================ */



.zp-presence {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

}



.zp-presence-dot {

  width: 10px;

  height: 10px;

  flex: 0 0 10px;

  border-radius: 999px;

  border: 2px solid rgba(15,27,40,.95);

  box-shadow: 0 0 0 1px rgba(255,255,255,.08);

}



.zp-presence-dot[data-presence="online"] {

  background: #22c55e;

  box-shadow:

    0 0 0 1px rgba(34,197,94,.22),

    0 0 10px rgba(34,197,94,.34);

}



.zp-presence-dot[data-presence="away"] {

  background: #f59e0b;

  box-shadow:

    0 0 0 1px rgba(245,158,11,.22),

    0 0 10px rgba(245,158,11,.24);

}



.zp-presence-dot[data-presence="dnd"] {

  background: #ef4444;

  box-shadow:

    0 0 0 1px rgba(239,68,68,.22),

    0 0 10px rgba(239,68,68,.24);

}



.zp-presence-dot[data-presence="offline"] {

  background: #64748b;

  box-shadow:

    0 0 0 1px rgba(100,116,139,.20);

}



.zp-presence-label {

  color: var(--zp-text-soft);

  font-size: 11px;

  line-height: 1.2;

}



/* ============================================================

   ZOOPEM SHARED Z CONNECT RAIL

   ============================================================ */



.zp-zconnect-rail-row {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 8px 0;

}





.zp-zconnect-avatar-wrap {



  position: relative;



  width: 40px;

  height: 40px;



  flex: 0 0 40px;



}





.zp-zconnect-avatar-wrap > .zp-avatar {



  width: 100%;

  height: 100%;



}





.zp-zconnect-online-badge {



  position: absolute;



  right: -1px;

  bottom: -1px;



  z-index: 2;



  pointer-events: none;



}





.zp-zconnect-rail-row + .zp-zconnect-rail-row {

  border-top: 1px solid var(--zp-border);

}



.zp-zconnect-rail-copy {

  min-width: 0;

  flex: 1;

}



.zp-zconnect-rail-name {

  overflow: hidden;

  color: var(--zp-text);

  font-size: 12px;

  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.zp-zconnect-rail-handle {

  margin-top: 2px;

  overflow: hidden;

  color: var(--zp-text-muted);

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.zp-zconnect-rail-action {

  flex: 0 0 auto;

  padding: 6px 9px;

  font-size: 10px;

  white-space: nowrap;

}



.zp-zconnect-rail-status {

  padding: 14px 0;

  color: var(--zp-text-muted);

  font-size: 11px;

  line-height: 1.45;

}



.zp-zconnect-rail-view-all {

  display: inline-flex;

  margin-top: 9px;

  color: var(--zp-primary);

  font-size: 10px;

  font-weight: 700;

  text-decoration: none;

}



.zp-zconnect-rail-view-all:hover {

  text-decoration: underline;

}



.zp-zconnect-rail-member-row {

  transition:

    opacity 220ms ease,

    transform 220ms ease;

}



.zp-zconnect-rail-member-row[data-zp-entering="true"] {

  opacity: 0;

  transform: translateY(7px);

}



.zp-zconnect-rail-member-row[data-zp-leaving="true"] {

  opacity: 0;

  transform: translateY(-7px);

}



@media (prefers-reduced-motion: reduce) {

  .zp-zconnect-rail-member-row {

    transition: none;

  }



  .zp-zconnect-rail-member-row[data-zp-entering="true"],

  .zp-zconnect-rail-member-row[data-zp-leaving="true"] {

    transform: none;

  }

}