/* PromXAI 1.4.0 — shared polish bundle */

/* ===== Source: layout-stability-1-3-101.css ===== */
/*
 * PromXAI Theme 1.3.101 — fixed header geometry and unified 9:16 card rhythm.
 * Loaded last so language/theme changes cannot mirror the public header and
 * so prompt/library covers share the same physical dimensions.
 */

:root {
  --px-unified-cover-width: 196px;
  --px-unified-cover-gap: 16px;
}

/* --------------------------------------------------------------------------
   1) Public header: one physical skeleton in AR, EN, dark and light.
   Physical left-to-right order is always: actions | search | nav | brand.
   Text direction may change inside controls, but the grid never mirrors.
   -------------------------------------------------------------------------- */
.px-header .px-header__inner {
  direction: ltr !important;
  grid-template-columns: 230px minmax(260px, 1fr) 150px 205px !important;
  grid-template-areas: "actions search nav brand" !important;
  align-items: center !important;
}

.px-header .px-brand {
  grid-area: brand !important;
  width: 205px !important;
  min-width: 205px !important;
  height: 44px !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  direction: ltr !important;
  overflow: hidden;
}

.px-header .px-brand__logos,
.px-header .px-theme-logo {
  width: 100% !important;
  height: 44px !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.px-header .px-theme-logo-image {
  display: block !important;
  width: 190px !important;
  height: 44px !important;
  max-width: 190px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: right center !important;
}

.px-header .px-nav {
  grid-area: nav !important;
  width: 150px !important;
  min-width: 150px !important;
  justify-self: center !important;
  justify-content: center !important;
  direction: ltr !important;
}

.px-header .px-nav a {
  direction: inherit;
  text-align: center;
}

html[data-ui-lang="ar"] .px-header .px-nav a { direction: rtl; }
html[data-ui-lang="en"] .px-header .px-nav a { direction: ltr; }

.px-header .px-header-search {
  grid-area: search !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.px-header .px-header-actions {
  grid-area: actions !important;
  width: 230px !important;
  min-width: 230px !important;
  justify-self: start !important;
  justify-content: flex-start !important;
  direction: rtl !important;
}

.px-header .px-lang-toggle {
  width: 58px !important;
  min-width: 58px !important;
  justify-content: center !important;
}

/* Both logo assets occupy the exact same box; theme switching only changes
   visibility and never changes the brand column size or its right edge. */
.px-header .px-theme-logo--dark,
.px-header .px-theme-logo--light {
  width: 100% !important;
  height: 44px !important;
}

@media (max-width: 1100px) {
  .px-header .px-header__inner {
    grid-template-columns: 220px minmax(220px, 1fr) 190px !important;
    grid-template-areas: "actions search brand" !important;
    gap: 14px !important;
  }
  .px-header .px-nav { display: none !important; }
  .px-header .px-header-actions {
    width: 220px !important;
    min-width: 220px !important;
  }
  .px-header .px-brand {
    width: 190px !important;
    min-width: 190px !important;
  }
  .px-header .px-theme-logo-image {
    width: 176px !important;
    max-width: 176px !important;
  }
}

@media (max-width: 760px) {
  .px-header .px-header__inner {
    direction: ltr !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "actions search brand" !important;
    gap: 9px !important;
  }
  .px-header .px-brand {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
  .px-header .px-brand__logos,
  .px-header .px-theme-logo {
    width: 42px !important;
    height: 42px !important;
  }
  .px-header .px-brand__logos.has-compact-logo .px-theme-logo {
    display: none !important;
  }
  .px-header .px-brand__logos.has-compact-logo .px-compact-logo {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center;
    justify-content: center;
  }
  .px-header .px-compact-logo-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }
  .px-header .px-header-actions {
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  .px-header .px-header-actions .px-lang-toggle { display: none !important; }
}

/* --------------------------------------------------------------------------
   2) One card size for prompts and digital-library items.
   -------------------------------------------------------------------------- */
.home .px-prompt-grid,
.px-library74-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, var(--px-unified-cover-width))) !important;
  gap: var(--px-unified-cover-gap) !important;
  justify-content: center !important;
  align-items: start !important;
}

.home .px-prompt-grid > .px-prompt-card,
.px-library74-grid > .px-library74-card {
  width: var(--px-unified-cover-width) !important;
  min-width: var(--px-unified-cover-width) !important;
  max-width: var(--px-unified-cover-width) !important;
  aspect-ratio: 9 / 16 !important;
}

/* Prompt archives, favorites and any reused prompt grid follow the same 9:16
   cover language as the home page and digital library. */
.px-prompt-card {
  aspect-ratio: 9 / 16 !important;
  contain-intrinsic-size: 196px 348px !important;
}

/* Never letterbox a card. A non-9:16 upload is center-cropped in cards only;
   the full original remains available on its detail page. */
.px-prompt-card__ambient { display: none !important; }
.px-prompt-card__link > .px-prompt-card__image,
.px-prompt-card__link > img.px-prompt-card__image,
.px-prompt-card img.px-prompt-card__image,
.home .px-prompt-card__link > .px-prompt-card__image,
.home .px-prompt-card__link > img.px-prompt-card__image,
.home .px-prompt-card img.px-prompt-card__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

.px-library74-card__image,
.px-library74-card__link > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 1180px) {
  :root { --px-unified-cover-width: 184px; --px-unified-cover-gap: 14px; }
}

@media (max-width: 760px) {
  .home .px-prompt-grid,
  .px-library74-grid,
  .px-prompt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
    justify-content: stretch !important;
  }

  .home .px-prompt-grid > .px-prompt-card,
  .px-library74-grid > .px-library74-card,
  .px-prompt-grid > .px-prompt-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ===== Source: favorites-header-media-1-3-102.css ===== */
/*
 * PromXAI Theme 1.3.102
 * Unified favorites, fixed light/dark logo geometry, video-poster integrity,
 * and compact prompt-category counters.
 */

/* --------------------------------------------------------------------------
   1) Header logo: one immutable physical box in AR/EN and dark/light.
   -------------------------------------------------------------------------- */
.px-header .px-brand,
.px-header .px-brand__logos,
.px-header .px-theme-logo {
  overflow: visible !important;
}

.px-header .px-brand__logos {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 44px !important;
}

.px-header .px-theme-logo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  transform: none !important;
  transform-origin: right center !important;
}

.px-header .px-theme-logo-image--dark,
.px-header .px-theme-logo-image--light {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  width: 190px !important;
  height: 44px !important;
  max-width: 190px !important;
  max-height: 44px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: right center !important;
  transform-origin: right center !important;
}

.px-header .px-theme-logo-image--dark {
  transform: none !important;
}

/* The official light artwork has a slightly different transparent canvas.
   This small optical correction keeps its visible mark equal to the dark logo
   without changing the brand column or clipping any part of the artwork. */
.px-header .px-theme-logo-image--light {
  transform: scale(1.08) !important;
}

html[data-ui-lang="ar"] .px-header .px-theme-logo,
html[data-ui-lang="en"] .px-header .px-theme-logo,
html[data-theme="dark"] .px-header .px-theme-logo,
html[data-theme="light"] .px-header .px-theme-logo {
  justify-content: flex-end !important;
  transform-origin: right center !important;
}

@media (max-width: 1100px) {
  .px-header .px-theme-logo-image--dark,
  .px-header .px-theme-logo-image--light {
    width: 176px !important;
    max-width: 176px !important;
  }
}

@media (max-width: 760px) {
  .px-header .px-brand__logos {
    width: 42px !important;
    height: 42px !important;
  }
  .px-header .px-theme-logo {
    width: 42px !important;
    height: 42px !important;
  }
  .px-header .px-theme-logo-image--dark,
  .px-header .px-theme-logo-image--light {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
  .px-header .px-theme-logo-image--light { transform: none !important; }
}

/* --------------------------------------------------------------------------
   2) Video cards: preserve the full poster without vertical stretching.
   A blurred copy fills any spare area, so there are no empty bars.
   -------------------------------------------------------------------------- */
.px-prompt-card[data-prompt-type="video"] .px-prompt-card__link {
  background: #070b14 !important;
  isolation: isolate;
}

.px-prompt-card[data-prompt-type="video"] .px-prompt-card__ambient {
  position: absolute !important;
  z-index: 0 !important;
  inset: -10% !important;
  display: block !important;
  background-position: center !important;
  background-size: cover !important;
  filter: blur(20px) saturate(.82) brightness(.58) !important;
  opacity: .82 !important;
  transform: scale(1.08) !important;
}

.px-prompt-card[data-prompt-type="video"] .px-prompt-card__link::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,13,.08), rgba(4,7,13,.18));
  pointer-events: none;
}

.px-prompt-card[data-prompt-type="video"] .px-prompt-card__image,
.px-prompt-card[data-prompt-type="video"] img.px-prompt-card__image {
  z-index: 2 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.px-prompt-card[data-prompt-type="video"]:hover .px-prompt-card__image {
  transform: scale(1.012) !important;
}

.px-prompt-card[data-prompt-type="video"] .px-video-play,
.px-prompt-card[data-prompt-type="video"] .px-duration,
.px-prompt-card[data-prompt-type="video"] .px-pro-badge,
.px-prompt-card[data-prompt-type="video"] .px-card-lock {
  z-index: 5 !important;
}

/* --------------------------------------------------------------------------
   3) Prompt category counts.
   -------------------------------------------------------------------------- */
.px-category-button {
  display: grid !important;
  grid-template-columns: auto minmax(12px, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
}

.px-category-button__label {
  min-width: 0;
  white-space: nowrap;
}

.px-category-button__line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
  opacity: .16;
}

.px-category-button__count {
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border: 1px solid var(--px-border);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--px-muted);
  background: color-mix(in srgb, var(--px-surface) 86%, transparent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.px-category-button.is-active .px-category-button__line { opacity: .34; }
.px-category-button.is-active .px-category-button__count {
  border-color: rgba(255,255,255,.26);
  color: #fff;
  background: rgba(255,255,255,.14);
}

/* --------------------------------------------------------------------------
   4) Unified favorites: prompts + books + templates + bundles + articles.
   -------------------------------------------------------------------------- */
.px-favorites-toolbar {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 7px !important;
}

.px-favorites-toolbar button {
  min-width: 86px !important;
  flex: 0 1 auto;
}

.px-favorites-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, var(--px-unified-cover-width, 196px))) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: var(--px-unified-cover-gap, 16px) !important;
}

.px-favorites-grid > .px-prompt-card {
  width: var(--px-unified-cover-width, 196px) !important;
  min-width: var(--px-unified-cover-width, 196px) !important;
  max-width: var(--px-unified-cover-width, 196px) !important;
  aspect-ratio: 9 / 16 !important;
}

.px-favorite-library-card__kind {
  position: absolute;
  z-index: 6;
  top: 12px;
  inset-inline-end: 12px;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  background: rgba(10,14,27,.66);
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 7px 20px rgba(0,0,0,.22);
}

.px-favorite-library-card__kind .px-icon { width: 14px; height: 14px; }
.px-favorite-library-card__kind--book { background: linear-gradient(135deg, rgba(22,163,74,.88), rgba(5,150,105,.86)); }
.px-favorite-library-card__kind--template { background: linear-gradient(135deg, rgba(37,99,235,.90), rgba(14,165,233,.86)); }
.px-favorite-library-card__kind--bundle { background: linear-gradient(135deg, rgba(6,182,212,.90), rgba(37,99,235,.86)); }
.px-favorite-library-card__kind--article { background: linear-gradient(135deg, rgba(245,158,11,.92), rgba(234,88,12,.88)); }

.px-favorite-library-card__title {
  position: absolute;
  z-index: 5;
  inset-inline: 9px;
  bottom: 9px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(7,10,18,.55), rgba(7,10,18,.86));
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

@media (max-width: 760px) {
  .px-favorites-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .px-favorites-toolbar button { min-width: 0 !important; }
  .px-favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  .px-favorites-grid > .px-prompt-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ===== Source: polish-performance-1-3-103.css ===== */
/*
 * PromXAI Theme 1.3.103
 * Final optical logo lock, resilient long category names, complete video
 * posters, and instant client-side filters when the full collection is loaded.
 */

/* 1) Dark/light logos share one immutable box and one fixed right edge.
   The small optical scale is calculated from the real visible pixels by JS. */
.px-header .px-brand,
.px-header .px-brand__logos,
.px-header .px-theme-logo {
  overflow: visible !important;
}

.px-header .px-brand__logos {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
}

.px-header .px-theme-logo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 44px !important;
  display: none;
  align-items: center !important;
  justify-content: flex-end !important;
  transform: none !important;
}

html[data-theme="dark"] .px-header .px-theme-logo--dark,
html[data-theme="light"] .px-header .px-theme-logo--light {
  display: flex !important;
}

.px-header .px-theme-logo-image--dark,
.px-header .px-theme-logo-image--light {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 190px !important;
  height: 44px !important;
  max-width: 190px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: right center !important;
  transform-origin: right center !important;
}

.px-header .px-theme-logo-image--dark {
  transform: scale(1) !important;
}

.px-header .px-theme-logo-image--light {
  transform: scale(var(--px-light-logo-match, 1.55)) !important;
}

/* Keep the right edge fixed even when the document text direction changes. */
html[data-ui-lang="ar"] .px-header .px-theme-logo-image--dark,
html[data-ui-lang="ar"] .px-header .px-theme-logo-image--light,
html[data-ui-lang="en"] .px-header .px-theme-logo-image--dark,
html[data-ui-lang="en"] .px-header .px-theme-logo-image--light {
  right: 0 !important;
  left: auto !important;
  object-position: right center !important;
  transform-origin: right center !important;
}

@media (max-width: 1100px) {
  .px-header .px-theme-logo-image--dark,
  .px-header .px-theme-logo-image--light {
    width: 176px !important;
    max-width: 176px !important;
  }
}

@media (max-width: 760px) {
  .px-header .px-brand__logos,
  .px-header .px-theme-logo {
    width: 42px !important;
    height: 42px !important;
  }
  .px-header .px-theme-logo-image--dark,
  .px-header .px-theme-logo-image--light {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    transform: none !important;
  }
}

/* 2) Category rows remain elegant with short or long names. */
.px-category-button {
  grid-template-columns: minmax(0, auto) minmax(10px, 1fr) 26px !important;
  min-height: 42px !important;
  padding-block: 7px !important;
  column-gap: 8px !important;
}

.px-category-button__label {
  min-width: 0 !important;
  max-width: 145px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.px-category-button__line {
  min-width: 10px;
  align-self: center;
}

.px-category-button__count {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  flex: 0 0 26px;
  font-variant-numeric: tabular-nums;
}

/* 3) Video posters use the uncropped display derivative and remain fully
   visible in the 9:16 card. The ambient copy fills only genuine spare space. */
.px-prompt-card[data-prompt-type="video"] .px-prompt-card__link {
  overflow: hidden !important;
  background: #070b14 !important;
}

.px-prompt-card[data-prompt-type="video"] .px-prompt-card__ambient {
  display: block !important;
  inset: -12% !important;
  background-position: center center !important;
  background-size: cover !important;
  filter: blur(22px) saturate(.9) brightness(.52) !important;
  opacity: .78 !important;
}

.px-prompt-card[data-prompt-type="video"] .px-prompt-card__image,
.px-prompt-card[data-prompt-type="video"] img.px-prompt-card__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
}

.px-prompt-card[data-prompt-type="video"]:hover .px-prompt-card__image,
.px-prompt-card[data-prompt-type="video"]:focus-within .px-prompt-card__image {
  transform: scale(1.008) !important;
}

/* 4) Local filtering is instantaneous; avoid the faded loading state when
   the browser already has the complete collection. */
.px-prompt-card[hidden] { display: none !important; }


/* ===== Source: mobile-polish-1-3-104.css ===== */
/*
 * PromXAI Theme 1.3.104
 * Mobile footer logo de-duplication and library-card readability.
 */

/* --------------------------------------------------------------------------
   1) Mobile footer: render exactly one official logo for the active theme.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .px-brand--footer,
  .px-brand--footer .px-brand__logos,
  .px-brand__logos--footer {
    width: 168px !important;
    min-width: 168px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .px-brand--footer .px-brand__logos,
  .px-brand__logos--footer {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  /* The compact mark belongs to the header only. */
  .px-brand--footer .px-compact-logo,
  .px-brand__logos--footer .px-compact-logo {
    display: none !important;
  }

  /* Reset the old mobile rule that forced both theme logos to display. */
  .px-brand--footer .px-theme-logo,
  .px-brand__logos--footer .px-theme-logo,
  .px-brand--footer .px-theme-logo--dark,
  .px-brand--footer .px-theme-logo--light {
    position: absolute !important;
    inset: 0 !important;
    grid-area: 1 / 1 !important;
    width: 168px !important;
    height: 40px !important;
    min-width: 168px !important;
    min-height: 40px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html[data-theme="dark"] .px-brand--footer .px-theme-logo--dark,
  html[data-theme="dark"] .px-brand__logos--footer .px-theme-logo--dark {
    display: flex !important;
  }

  html[data-theme="light"] .px-brand--footer .px-theme-logo--light,
  html[data-theme="light"] .px-brand__logos--footer .px-theme-logo--light {
    display: flex !important;
  }

  .px-brand--footer .px-theme-logo-image,
  .px-brand__logos--footer .px-theme-logo-image {
    position: static !important;
    display: block !important;
    width: 168px !important;
    height: 40px !important;
    max-width: 168px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform-origin: center !important;
  }

  .px-brand--footer .px-theme-logo-image--dark {
    transform: scale(1) !important;
  }

  .px-brand--footer .px-theme-logo-image--light {
    transform: scale(var(--px-light-logo-match, 1.18)) !important;
  }

  .px-footer__inner {
    padding-block: 28px 24px !important;
  }
}

/* --------------------------------------------------------------------------
   2) Mobile library: preserve the complete cover and move metadata below it.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.post-type-archive-promxai_library .px-main,
  .px-library74-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .px-library74-grid {
    align-items: start !important;
    gap: 12px !important;
  }

  .px-library74-grid > .px-library74-card,
  .px-library74-card {
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: var(--px-surface-1, #101728) !important;
  }

  .px-library74-card__link {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 17px 17px 0 0 !important;
    background: #080d17 !important;
  }

  .px-library74-card__image,
  .px-library74-card__link > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Text is now a compact footer below the cover, not a panel over the image. */
  .px-library74-overlay,
  .px-library74-card:hover .px-library74-overlay,
  .px-library74-card:focus-within .px-library74-overlay {
    position: static !important;
    inset: auto !important;
    z-index: 2 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 10px 11px 11px !important;
    gap: 7px !important;
    min-height: 82px !important;
    border: 0 !important;
    border-top: 1px solid rgb(255 255 255 / .08) !important;
    border-radius: 0 0 17px 17px !important;
    color: var(--px-text-primary, #f7f9ff) !important;
    background: linear-gradient(180deg, rgb(18 27 46 / .98), rgb(11 18 32 / .99)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="light"] .px-library74-overlay,
  html[data-theme="light"] .px-library74-card:hover .px-library74-overlay,
  html[data-theme="light"] .px-library74-card:focus-within .px-library74-overlay {
    color: #172033 !important;
    border-top-color: rgb(28 42 70 / .09) !important;
    background: linear-gradient(180deg, #fff, #f6f8fc) !important;
  }

  .px-library74-overlay h2 {
    min-height: 2.85em !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: clamp(.78rem, 3.45vw, .94rem) !important;
    line-height: 1.42 !important;
    font-weight: 850 !important;
    -webkit-line-clamp: 2 !important;
  }

  .px-library74-overlay p {
    display: none !important;
  }

  .px-library74-overlay__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* The kind already appears in the colored badge above the cover. */
  .px-library74-overlay__meta .px-library74-pill--kind {
    display: none !important;
  }

  .px-library74-overlay__meta .px-library74-pill--state {
    min-height: 24px !important;
    max-width: 100% !important;
    padding: 4px 9px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* The entire cover is the primary tap target; remove the oversized CTA. */
  .px-library74-view {
    display: none !important;
  }

  .px-library74-badge {
    top: 10px !important;
    inset-inline-end: 10px !important;
    min-height: 29px !important;
    padding: 5px 9px !important;
    font-size: .70rem !important;
  }

  .px-library74-favorite {
    top: 10px !important;
    inset-inline-start: 10px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .px-library78-display-badge {
    top: 46px !important;
    inset-inline-end: 10px !important;
    min-height: 25px !important;
    padding: 4px 8px !important;
    font-size: .62rem !important;
  }
}

@media (max-width: 390px) {
  .px-library74-grid {
    gap: 9px !important;
  }

  .px-library74-overlay {
    padding-inline: 9px !important;
  }

  .px-library74-overlay h2 {
    font-size: .77rem !important;
  }
}


/* ===== Source: mobile-library-ui-1-3-105.css ===== */
/*
 * PromXAI Theme 1.3.105
 * Cleaner library badges, smaller favorites, one footer logo, and compact
 * mobile preference controls with a visible language switch.
 */

/* --------------------------------------------------------------------------
   1) One footer image only. The source is swapped by app-1-3-105.js.
   -------------------------------------------------------------------------- */
.px-brand--footer .px-footer-brand-logo {
  display: grid !important;
  place-items: center !important;
  width: 188px !important;
  height: 42px !important;
  overflow: hidden !important;
}

.px-brand--footer .px-footer-brand-logo__image {
  display: block !important;
  width: 188px !important;
  height: 42px !important;
  max-width: 188px !important;
  max-height: 42px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .px-brand--footer,
  .px-brand--footer .px-footer-brand-logo {
    width: 176px !important;
    min-width: 176px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .px-brand--footer .px-footer-brand-logo__image {
    width: 176px !important;
    height: 42px !important;
    max-width: 176px !important;
    max-height: 42px !important;
  }
}

/* --------------------------------------------------------------------------
   2) Desktop library covers stay visually clean. Editorial labels appear only
      when the visitor intentionally hovers or focuses the card.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .px-library74-card > .px-library74-badge,
  .px-library74-card > .px-library78-display-badge {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-5px) scale(.96) !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  .px-library74-card:hover > .px-library74-badge,
  .px-library74-card:hover > .px-library78-display-badge,
  .px-library74-card:focus-within > .px-library74-badge,
  .px-library74-card:focus-within > .px-library78-display-badge {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
  }

  .px-library74-card > .px-library74-badge {
    min-height: 28px !important;
    padding: 4px 9px !important;
    font-size: .68rem !important;
  }

  .px-library74-card > .px-library78-display-badge {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: .62rem !important;
  }
}

/* Small heart on every digital-library cover. */
.px-library74-favorite {
  width: 35px !important;
  height: 35px !important;
}
.px-library74-favorite .px-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Editorial badge reused inside the hover/mobile metadata row. */
.px-library74-pill--display {
  border-color: rgb(175 116 255 / .28) !important;
  color: #e8d8ff !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .22), rgb(219 39 119 / .17)) !important;
}
html[data-theme="light"] .px-library74-pill--display {
  color: #6f37b9 !important;
  border-color: rgb(124 58 237 / .18) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .10), rgb(219 39 119 / .08)) !important;
}

/* --------------------------------------------------------------------------
   3) Mobile: keep the type label on the cover, move the editorial label beside
      Free/Soon below the title, and reduce the heart footprint.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* The secondary top label no longer obscures the artwork. */
  .px-library74-card > .px-library78-display-badge {
    display: none !important;
  }

  .px-library74-card > .px-library74-badge {
    top: 9px !important;
    inset-inline-end: 9px !important;
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: .66rem !important;
  }

  .px-library74-favorite {
    top: 9px !important;
    inset-inline-start: 9px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .px-library74-overlay__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .px-library74-overlay__meta .px-library74-pill--display,
  .px-library74-overlay__meta .px-library74-pill--state {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .px-library74-overlay__meta .px-library74-pill--state:only-child {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   4) Mobile public header: one compact theme icon plus a visible AR/EN switch.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .px-header .px-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .px-header .px-header-action-group--preferences {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .px-header .px-header-action-group--preferences .px-lang-toggle {
    display: inline-flex !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 38px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: .70rem !important;
  }

  .px-header .px-header-action-group--preferences .px-lang-toggle .px-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .px-header .px-theme-toggle {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    border-radius: 12px !important;
  }

  .px-header .px-theme-toggle .px-theme-icon {
    display: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    place-items: center !important;
    border-radius: 9px !important;
  }

  /* Show the icon for the action the user can take. */
  html[data-theme="dark"] .px-header .px-theme-toggle .px-theme-icon--sun,
  html[data-theme="light"] .px-header .px-theme-toggle .px-theme-icon--moon {
    display: grid !important;
  }

  .px-header .px-theme-toggle .px-theme-icon .px-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .px-header .px-header-action-group--personal .px-favorites-counter {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .px-header .px-header__inner {
    grid-template-columns: auto minmax(0, 1fr) 38px !important;
    gap: 7px !important;
    padding-inline: 7px !important;
  }

  .px-header .px-header-action-group--personal .px-account-button,
  .px-header .px-theme-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .px-header .px-header-action-group--preferences .px-lang-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 36px !important;
    font-size: .66rem !important;
  }

  .px-header .px-header-search input {
    font-size: 11px !important;
  }
}

/* On desktop the kind/editorial labels live on the cover during hover, so the
   lower hover panel only needs the availability state and never duplicates
   the same labels twice. */
@media (min-width: 761px) {
  .px-library74-overlay__meta .px-library74-pill--kind,
  .px-library74-overlay__meta .px-library74-pill--display {
    display: none !important;
  }
}


/* PromXAI brand is always a real Home control -------------------------- */
a:is(.px-brand,.px-desktop-rail__brand,.px-account-v3__rail-brand,.px-account-v3__auth-brand) {
  position:relative;
  z-index:8;
  pointer-events:auto !important;
  cursor:pointer;
  touch-action:manipulation;
  isolation:isolate;
}
a:is(.px-brand,.px-desktop-rail__brand,.px-account-v3__rail-brand,.px-account-v3__auth-brand) > * {
  pointer-events:none;
}
a:is(.px-brand,.px-desktop-rail__brand,.px-account-v3__rail-brand,.px-account-v3__auth-brand):focus-visible {
  outline:2px solid var(--px-accent-purple);
  outline-offset:4px;
  border-radius:12px;
}