:root {
  --bg: #05060a;
  --panel: rgba(15,18,32,.72);
  --text: #e9e9f2;
  --muted: #a6a6b8;
  --red: #ff2d2d;
  --red2: #b10f1f;
  --stroke: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --sidebar-w: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: #020309;
  overflow-x: hidden;
}

/* ===== SHELL ===== */
.zp-shell { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.zp-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  padding: 16px 10px;
  background: transparent;
  border-right: none;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  flex-shrink: 0;
}

.zp-sideZ {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,45,45,.95), rgba(28,8,10,.95));
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255,45,45,.30);
}

.zp-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: auto 0;
}

.zp-navIcon {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
}
.zp-navIcon svg { width: 20px; height: 20px; }
.zp-navIcon:hover {
  color: var(--text);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.zp-navIcon.active {
  color: var(--red);
  background: rgba(255,45,45,.12);
  border-color: rgba(255,45,45,.30);
}

.zp-sidebarSpacer { flex: 1; }

/* ===== MAIN ===== */
.zp-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 60px;
}

/* ===== LOGO HEADER ===== */
.zp-logoHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 8px;
}

.zp-logoImg {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(200,10,10,.50));
}

/* ===== TOP BAR ===== */
.zp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 24px 14px;
  position: relative;
}

.zp-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.zp-burger span {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  opacity: .9;
}

/* ===== MENU MOBILE INLINE ===== */
.zp-mobileNav {
  display: none; /* masqué sur desktop */
  position: absolute;
  left: 76px; /* juste après le burger + décalage */
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 4px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .35s ease;
  z-index: 60;
}
.zp-mobileNav.open {
  clip-path: inset(0 0% 0 0);
}
.zp-mobileNavIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.zp-mobileNavIcon svg { width: 18px; height: 18px; }
.zp-mobileNavIcon.active,
.zp-mobileNavIcon:hover { background: rgba(220,38,38,.18); color: #ef4444; border-color: rgba(220,38,38,.3); }

.zp-topLinks {
  display: flex;
  gap: 22px;
  align-items: center;
}

.zp-topLink {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 3px;
  transition: color .15s, border-color .15s;
}
.zp-topLink:hover { color: #fff; }
.zp-topLink.active {
  color: #fff;
  border-bottom-color: var(--red);
}

.zp-topLinkSearch {
  display: flex;
  align-items: center;
  gap: 5px;
}

.zp-topRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Search wrap */
.zp-searchWrap {
  max-width: 0;
  overflow: hidden;
  transition: max-width .25s ease;
}
.zp-searchWrap.open { max-width: 260px; }
.zp-searchInput {
  width: 220px;
  padding: 8px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.zp-searchInput::placeholder { color: var(--muted); }

.zp-iconBtn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.zp-iconBtn:hover { color: #fff; background: rgba(255,255,255,.09); }
.zp-iconBtn svg { width: 15px; height: 15px; }

.zp-userAvatar {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.zp-userDot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a5a, #80040f);
  border: 2px solid rgba(255,255,255,.18);
}
.zp-userBadge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ===== HERO ===== */
.zp-hero {
  margin: 0 20px 24px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  height: 540px;
  box-shadow: var(--shadow);
}

.zp-heroBg {
  position: absolute;
  inset: 0;
  background-color: #080810;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Fallback cinematic background when no poster is loaded */
  background-image:
    radial-gradient(ellipse 70% 80% at 80% 50%, rgba(80,15,15,.60), transparent 60%),
    radial-gradient(ellipse 40% 60% at 95% 40%, rgba(180,20,20,.25), transparent 55%);
}

.zp-heroOverlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(2,3,10,.96) 0%,
      rgba(2,3,10,.80) 35%,
      rgba(2,3,10,.35) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(2,3,10,.25) 0%,
      transparent 25%,
      transparent 70%,
      rgba(2,3,10,.60) 100%);
}

.zp-heroContent {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 26px 32px;
}

.zp-heroMeta { max-width: 480px; padding-top: 4px; }

/* Badges row */
.zp-heroBadges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.zp-badge-item {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.30);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
}
.zp-badge-4k {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,210,0,.55);
  background: rgba(255,200,0,.12);
  font-size: 11px;
  font-weight: 900;
  color: #ffd000;
  letter-spacing: .05em;
  line-height: 1.4;
}
.zp-badge-4k small { display: block; font-size: 9px; letter-spacing: .08em; }

.zp-heroTitle {
  margin: 0 0 10px;
  font-size: 54px;
  font-weight: 1000;
  letter-spacing: -.025em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.80);
  line-height: 1.02;
}

.zp-kpis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.zp-kpis .pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
}
.zp-stars { color: #ffc800; font-size: 15px; letter-spacing: 2px; }
.zp-score { font-weight: 900; font-size: 16px; color: #fff; }
.zp-pill-genre {
  border-color: rgba(255,45,45,.40) !important;
  background: rgba(255,45,45,.15) !important;
  color: rgba(255,180,180,.95) !important;
}

.zp-heroDesc {
  margin: 0 0 18px;
  color: rgba(233,233,242,.75);
  max-width: 52ch;
  line-height: 1.45;
  font-size: 14px;
}

.zp-heroActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.zp-btn {
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zp-btn:hover { transform: translateY(-1px); }

.zp-btnPrimary {
  border-color: rgba(255,45,45,.65);
  background: linear-gradient(135deg, #d81212, #9c0606);
  box-shadow: 0 4px 22px rgba(220,18,18,.35);
}
.zp-btnPrimary:hover {
  background: linear-gradient(135deg, #e81414, #ae0808);
  box-shadow: 0 6px 28px rgba(220,18,18,.50);
}
.zp-btnOutline {
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.20);
}
.zp-btnOutline:hover { border-color: rgba(255,255,255,.50); background: rgba(0,0,0,.35); }

.zp-heroStats {
  display: none;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
}
.zp-stat-like { color: #7cfc00; }
.zp-stat-imdb {
  color: #f5c518;
  background: rgba(0,0,0,.28);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(245,197,24,.25);
}

.zp-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.zp-cats .chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===== CONTENT ===== */
.zp-content { padding: 0 20px; }
.zp-row { margin-bottom: 28px; }

.zp-rowHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.zp-rowTitle {
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.zp-rowHeaderRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zp-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.zp-externalBtn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.zp-externalBtn:hover { color: #fff; background: rgba(255,255,255,.09); }

/* ===== CARDS ===== */
.zp-carousel {
  display: flex;
  gap: 12px;
  overflow: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

.zp-card {
  width: 158px;
  min-width: 158px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.30);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
  flex-shrink: 0;
}
.zp-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255,45,45,.40);
  box-shadow: 0 10px 32px rgba(0,0,0,.60);
}
.zp-card img {
  width: 100%;
  height: 236px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Title overlay at bottom of card */
.zp-card .cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, transparent 100%);
}
.zp-card .name {
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* "ZordFlix Original" label on first card */
.zp-card .zp-original {
  position: absolute;
  top: 8px; left: 0;
  background: rgba(5,6,10,.75);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}

/* Grid */
.zp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.zp-grid .zp-card {
  width: auto;
  min-width: 0;
}
.zp-grid .zp-card img { height: 200px; }

/* ===== CATALOG VIEWS (Movies / Series) ===== */
.zp-catalogView {
  display: none;
  padding: 0 20px 60px;
}
.zp-catalogView .zp-rowTitle {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
  padding-top: 10px;
}
.zp-catalogView .zp-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.zp-catalogView .zp-card img { height: 220px; }

/* ===== CARD OVERLAY (hover / long-press) ===== */
.zp-cardOverlay {
  position: absolute;
  inset: 0;
  background: rgba(5,6,14,.93);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.zp-card:hover .zp-cardOverlay,
.zp-cardOverlay.show { opacity: 1; pointer-events: auto; }
.zp-cardOverlay .ov-title {
  font-size: 13px; font-weight: 900; color: #fff;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zp-cardOverlay .ov-meta {
  font-size: 12px; color: #ffc800;
  margin-bottom: 8px; font-weight: 700;
}
.zp-cardOverlay .ov-desc {
  font-size: 11px; color: rgba(255,255,255,.62);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.zp-cardOverlay .ov-genre {
  font-size: 10px; color: rgba(255,130,130,.85);
  font-weight: 700;
}
/* ===== CARD WISH (heart icon) ===== */
.zp-cardWish {
  position: absolute;
  top: 7px; right: 7px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s, background .2s, border-color .2s, transform .15s;
}
.zp-card:hover .zp-cardWish { opacity: 1; }
.zp-cardWish svg { width: 14px; height: 14px; color: #fff; pointer-events: none; }
.zp-cardWish:hover { background: rgba(255,255,255,.2); transform: scale(1.12); }
.zp-cardWish.active {
  background: rgba(210,20,20,.85);
  border-color: #e63232;
  opacity: 1;
}
.zp-cardWish.active svg { fill: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .zp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zp-heroTitle { font-size: 44px; }
}
@media (max-width: 900px) {
  .zp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Bouton Détails hero (desktop caché) */
.zp-heroDetailsBtn { display: none; }

@media (max-width: 820px) {
  .zp-sidebar { display: none !important; }
  .zp-sideOverlay { display: none !important; }
  .zp-burger { display: flex; }
  .zp-mobileNav { display: flex; }
  .zp-topLinks { display: none; }

  /* Hero : cover propre par défaut */
  .zp-hero { height: auto; min-height: 260px; margin: 0 10px 20px; overflow: hidden; }
  .zp-heroOverlay { background: linear-gradient(180deg, rgba(2,3,10,.15) 0%, rgba(2,3,10,.35) 70%, rgba(2,3,10,.55) 100%); transition: background .3s; }
  .zp-heroContent { padding: 0; }

  /* Meta caché par défaut sur mobile */
  .zp-heroMeta { max-width: 100%; width: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height .4s ease, padding .3s;
    padding: 0 18px;
  }

  /* Bouton Détails : petit, en bas à droite de la cover */
  .zp-heroDetailsBtn {
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    bottom: 12px; right: 12px;
    padding: 6px 12px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
    transition: background .2s;
  }
  .zp-heroDetailsBtn:hover { background: rgba(0,0,0,.75); }

  /* Hero ouvert */
  .zp-hero.hero-open .zp-heroMeta {
    max-height: 500px;
    padding: 16px 18px 20px;
  }
  .zp-hero.hero-open .zp-heroOverlay {
    background: linear-gradient(180deg, rgba(2,3,10,.55) 0%, rgba(2,3,10,.80) 40%, rgba(2,3,10,.97) 100%);
  }
  .zp-hero.hero-open .zp-heroDetailsBtn { bottom: auto; top: 12px; right: 12px; }

  .zp-heroTitle { font-size: 26px; margin-bottom: 6px; }
  .zp-pill-genre { display: none; }
  .zp-heroDesc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .zp-kpis { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .zp-kpis .pill, .zp-pill-genre { padding: 3px 9px !important; font-size: 11px !important; }
  .zp-stars { font-size: 13px; }
  .zp-score { font-size: 14px; }
  .zp-heroActions { margin-top: 14px; }
  .zp-heroBadges { gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
  .zp-badge-item { font-size: 11px; padding: 3px 8px; }
  .zp-badge-4k { font-size: 9px; padding: 3px 7px; }
  .zp-content { padding: 0 10px; }
  .zp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-logoText { font-size: 26px; }
  .zp-logoMark { width: 44px; height: 34px; }
}

/* ===== MODAL LOGIN ===== */
.zp-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.80);
  backdrop-filter: blur(10px);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.zp-modal.open { display: flex; }
.zp-modalBox {
  background: #0d0f1e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.9);
}
.zp-modalClose {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: rgba(255,255,255,.35);
  font-size: 20px; cursor: pointer;
  line-height: 1;
}
.zp-modalClose:hover { color: #fff; }
.zp-modalTitle {
  font-size: 20px; font-weight: 900; color: #fff;
  text-align: center; margin: 0 0 6px;
}
.zp-modalSub {
  font-size: 13px; color: rgba(255,255,255,.40);
  text-align: center; margin: 0 0 22px;
}
.zp-modalInput {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  margin-bottom: 14px;
  display: block;
  box-sizing: border-box;
}
.zp-modalInputName {
  font-size: 16px;
  letter-spacing: normal;
  text-align: left;
}
.zp-modalInput:focus { border-color: rgba(255,45,45,.60); }
.zp-modalBtn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #d81212, #9c0606);
  border: none; border-radius: 12px;
  color: #fff; font-size: 15px; font-weight: 900;
  cursor: pointer; transition: all .15s;
}
.zp-modalBtn:hover { background: linear-gradient(135deg, #e81414, #b00808); }
.zp-modalBtnOut {
  width: 100%; padding: 12px; margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: rgba(255,255,255,.55); font-size: 14px; font-weight: 700;
  cursor: pointer; display: block;
}
.zp-modalBtnOut:hover { border-color: rgba(255,255,255,.40); color: #fff; }
.zp-modalError {
  color: #ff5555; font-size: 13px;
  text-align: center; min-height: 20px; margin-top: 10px;
}

/* User avatar connected state */
.zp-userDot.connected {
  background: radial-gradient(circle at 35% 30%, #5aff8a, #047a30);
}
.zp-userBadge.connected { background: #1db954; }

/* ===== CATALOG HEADER + FILTER BAR ===== */
.zp-catalogHeader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 10px;
}
.zp-filterBar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.zp-filterGroup { position: relative; }
.zp-filterBtn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.zp-filterBtn:hover, .zp-filterBtn.active { background: rgba(255,255,255,.12); color: #fff; }
.zp-filterPanel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #0d0f1e;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px;
  min-width: 180px;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.zp-filterPanel.open { display: block; }
.zp-filterCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  transition: background .12s;
}
.zp-filterCheck:hover { background: rgba(255,255,255,.07); color: #fff; }
.zp-filterCheck input { accent-color: #d81212; width: 14px; height: 14px; cursor: pointer; }
.zp-sortSelect {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.zp-sortSelect:hover { background: rgba(255,255,255,.10); }

/* ===== SEARCH VIEW ===== */
.zp-searchView {
  display: none;
  padding: 0 20px;
  opacity: 0;
  transform: translateX(-30px);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s;
}
.zp-hero { transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s; }
.zp-content { transition: opacity 0.3s ease; }
.search-mode .zp-hero { transform: translateX(110%); opacity: 0; pointer-events: none; }
.search-mode .zp-content { opacity: 0; pointer-events: none; }
.search-mode .zp-searchView { display: block; }
.search-mode-ready .zp-searchView { opacity: 1; transform: translateX(0); }

/* ===== LOGIN REQUIRED ===== */
.zp-loginRequired {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  text-align: center;
  color: rgba(255,255,255,.5);
}
.zp-loginRequired svg { opacity: .3; margin-bottom: 8px; }
.zp-loginRequired h2 { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
.zp-loginRequired p { font-size: 14px; margin: 0; max-width: 280px; line-height: 1.6; }
.zp-loginRequired .zp-btn { margin-top: 8px; }

/* ===== EMPTY STATE ===== */
.zp-listEmpty {
  text-align: center;
  color: rgba(255,255,255,.35);
  font-size: 16px;
  line-height: 1.7;
  padding: 60px 20px;
}
.zp-listEmpty span { font-size: 13px; display: block; margin-top: 6px; }

/* ===== NOTIFICATIONS PANEL ===== */
.zp-notifPanel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: #0d0f1e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.8);
  z-index: 200;
  overflow: hidden;
}
.zp-notifHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-weight: 900;
  font-size: 15px;
}
.zp-notifClear {
  background: none; border: none;
  color: rgba(255,45,45,.85);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.zp-notifClear:hover { color: #ff2d2d; }
.zp-notifList { max-height: 340px; overflow-y: auto; }
.zp-notifEmpty { text-align: center; padding: 28px 16px; color: rgba(255,255,255,.3); font-size: 14px; }
.zp-notifItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .12s;
}
.zp-notifItem:hover { background: rgba(255,255,255,.04); }
.zp-notifItem img {
  width: 36px; height: 52px;
  object-fit: cover; object-position: top;
  border-radius: 5px;
  flex-shrink: 0;
}
.zp-notifItem-info { flex: 1; min-width: 0; }
.zp-notifItem-title { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-notifItem-sub { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.zp-notifBadge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  border-radius: 999px;
  background: #d81212;
  color: #fff;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}
.zp-notifWrap { position: relative; }

/* ===== SETTINGS ===== */
.zp-settingsGroup { margin-bottom: 8px; }
.zp-settingsLabel {
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.zp-settingsSub {
  font-size: 12px; color: rgba(255,255,255,.35);
  margin: 0 0 14px;
}
.zp-langBtns { display: flex; gap: 10px; flex-wrap: wrap; }
.zp-langBtn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.65);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.zp-langBtn:hover { background: rgba(255,255,255,.10); color: #fff; }
.zp-langBtn.active {
  border-color: rgba(255,45,45,.60);
  background: rgba(255,45,45,.15);
  color: #fff;
}

/* ===== MOBILE SIDEBAR FIX ===== */
.zp-sideClose {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 16px;
  width: 32px; height: 32px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.zp-sideOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 49;
  backdrop-filter: blur(2px);
}
@media (max-width: 820px) {
  .zp-sideClose { display: flex; }
  .zp-sideOverlay.open { display: block; }
  .zp-sidebar { background: #0a0b14; border-right: 1px solid rgba(255,255,255,.08); }
}