/* PromXAI 1.4.0 — foundation bundle */

/* ===== Source: promxai-1-3-68.css ===== */

/* ===== Consolidated from main.css ===== */
:root {
  --px-bg: #070b14;
  --px-bg-elevated: #0b1020;
  --px-surface: rgba(14, 20, 36, .72);
  --px-surface-strong: rgba(17, 24, 43, .90);
  --px-surface-soft: rgba(255, 255, 255, .045);
  --px-border: rgba(161, 151, 255, .18);
  --px-border-strong: rgba(161, 151, 255, .34);
  --px-text: #f8f9ff;
  --px-muted: #9da8bd;
  --px-purple: #7c3aed;
  --px-purple-2: #8b5cf6;
  --px-pink: #c026d3;
  --px-blue: #2563eb;
  --px-danger: #ff5d7d;
  --px-glow: rgb(124 58 237 / .28);
  --px-radius: 20px;
  --px-shadow: 0 22px 60px rgba(0, 0, 0, .24);
  --px-glass-shadow: 0 18px 48px rgba(1, 4, 14, .22);
}

html[data-theme="light"] {
  --px-bg: #f6f7fb;
  --px-bg-elevated: #eef1f8;
  --px-surface: rgba(255, 255, 255, .72);
  --px-surface-strong: rgba(255, 255, 255, .92);
  --px-surface-soft: rgba(26, 31, 53, .035);
  --px-border: rgba(22, 29, 52, .10);
  --px-border-strong: rgb(124 58 237 / .24);
  --px-text: #14192b;
  --px-muted: #667085;
  --px-glow: rgb(124 58 237 / .14);
  --px-shadow: 0 18px 52px rgba(29, 38, 65, .10);
  --px-glass-shadow: 0 16px 42px rgba(29, 38, 65, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--px-text);
  background:
    radial-gradient(circle at 8% 4%, rgb(192 38 211 / .10), transparent 25rem),
    radial-gradient(circle at 92% 7%, rgb(37 99 235 / .12), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgb(124 58 237 / .09), transparent 34rem),
    var(--px-bg);
  font-family: var(--px-font-ar, Tahoma, Arial, "Segoe UI", sans-serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 4%, rgb(192 38 211 / .055), transparent 25rem),
    radial-gradient(circle at 92% 7%, rgb(37 99 235 / .065), transparent 28rem),
    var(--px-bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.screen-reader-text,
.px-skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.px-skip-link:focus { width: auto; height: auto; clip: auto; z-index: 9999; inset: 8px auto auto 8px; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111; }
.px-container { width: min(1480px, calc(100% - 40px)); margin-inline: auto; }
.px-main { min-height: 70vh; padding-block: 28px 72px; }
.px-lang-en { display: none !important; }
html[data-ui-lang="en"] .px-lang-ar { display: none !important; }
html[data-ui-lang="en"] .px-lang-en { display: inline !important; }
html[data-ui-lang="en"] body { font-family: var(--px-font-latin, "Segoe UI", Arial, sans-serif); }

.px-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; display: block; flex: 0 0 auto; overflow: visible; }
:where(a, button, input, textarea):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(124 58 237 / .22); }

/* Header */
.px-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 10px;
  background: rgba(7, 11, 20, .52);
  border-bottom: 1px solid rgba(161, 151, 255, .10);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
html[data-theme="light"] .px-header { background: rgba(247, 248, 252, .68); }
.px-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(124 58 237 / .46), rgb(192 38 211 / .32), transparent);
  pointer-events: none;
}
.px-header__inner {
  width: min(1520px, calc(100% - 36px));
  min-height: 66px;
  margin: auto;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--px-border);
  border-radius: 19px;
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.px-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.px-brand__logos, .px-theme-logo, .px-brand__fallback { display: inline-flex; align-items: center; }
.px-theme-logo--light { display: none; }
html[data-theme="light"] .px-theme-logo--dark { display: none; }
html[data-theme="light"] .px-theme-logo--light { display: inline-flex; }
.px-theme-logo-image { display: block; width: auto; max-width: 205px; max-height: 44px; object-fit: contain; }
.px-compact-logo { display: none; }
.px-compact-logo-image { width: 40px; height: 40px; object-fit: contain; }
.px-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px 14px 14px 5px; color: #fff; font-weight: 900; background: linear-gradient(145deg, var(--px-purple), var(--px-pink)); box-shadow: 0 8px 24px var(--px-glow); transform: rotate(-7deg); }
.px-brand__name { font-size: 23px; font-weight: 900; letter-spacing: -.6px; }
.px-brand__name span { background: linear-gradient(90deg, var(--px-purple), var(--px-pink), var(--px-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 800; }
.px-nav a { position: relative; padding: 10px 2px; color: var(--px-muted); transition: color .2s ease; }
.px-nav a::after { content: ""; position: absolute; inset-inline: 16%; bottom: 2px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--px-purple), var(--px-pink)); opacity: 0; transform: scaleX(.3); transition: .2s ease; }
.px-nav a:hover, .px-nav a.is-active { color: var(--px-text); }
.px-nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.px-header-search { position: relative; width: 100%; max-width: 650px; justify-self: center; }
.px-header-search > .px-icon { position: absolute; z-index: 2; inset-inline-start: 16px; top: 50%; width: 18px; height: 18px; min-width: 18px; min-height: 18px; transform: translateY(-50%); color: var(--px-muted); pointer-events: none; }
.px-header-search input { width: 100%; height: 44px; padding-inline: 45px 16px; border: 1px solid var(--px-border); border-radius: 14px; color: var(--px-text); background: var(--px-surface-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); outline: none; transition: .2s ease; }
.px-header-search input::placeholder { color: color-mix(in srgb, var(--px-muted) 86%, transparent); }
.px-header-search input:focus { border-color: var(--px-border-strong); background: var(--px-surface-strong); box-shadow: 0 0 0 3px rgb(124 58 237 / .11), 0 10px 26px rgba(4,8,20,.10); }
.px-header-actions { display: flex; align-items: center; gap: 7px; }
.px-icon-button { height: 40px; min-width: 40px; padding: 0; border: 1px solid var(--px-border); border-radius: 13px; display: inline-grid; place-items: center; color: var(--px-text); background: var(--px-surface-soft); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.px-icon-button:hover { transform: translateY(-1px); border-color: var(--px-border-strong); background: var(--px-surface-strong); }
.px-icon-button .px-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
.px-lang-toggle { width: auto; padding-inline: 10px; display: inline-flex; gap: 7px; font-size: 11px; font-weight: 900; }
.px-theme-toggle { width: 68px; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 14px; }
.px-theme-icon { width: 28px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--px-muted); transition: .2s ease; }
.px-theme-icon .px-icon { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
html[data-theme="dark"] .px-theme-icon--moon,
html[data-theme="light"] .px-theme-icon--sun { color: #fff; background: linear-gradient(145deg, var(--px-purple), var(--px-blue)); box-shadow: 0 6px 16px var(--px-glow); }
html[data-theme="light"] .px-theme-icon--sun { color: #22283a; background: linear-gradient(145deg, #fff, #efe9ff); }
.px-favorites-counter { position: relative; }
.px-favorites-counter [data-favorites-count] { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--px-purple), var(--px-pink)); font-size: 9px; font-weight: 900; }

/* Browse / homepage */
.px-home-main { padding-block: 24px 72px; }
.px-home-intro, .px-home-search { display: none !important; }
.px-mobile-filter-row { display: none; }
.px-browse-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; direction: ltr; }
.px-categories, .px-browse-content { direction: rtl; }
html[data-ui-lang="en"] .px-categories, html[data-ui-lang="en"] .px-browse-content { direction: ltr; }
.px-categories {
  position: sticky;
  top: 106px;
  align-self: start;
  max-height: calc(100vh - 125px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  scrollbar-width: thin;
}
.px-categories__head { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 12px; }
.px-categories__head h2 { margin: 0; font-size: 15px; }
.px-categories__head button { display: none; border: 0; background: none; color: var(--px-text); cursor: pointer; }
.px-category-button { width: 100%; min-height: 44px; margin: 3px 0; padding: 8px 11px; border: 0; border-radius: 12px; display: flex; align-items: center; gap: 10px; color: var(--px-muted); background: transparent; text-align: start; cursor: pointer; transition: .18s ease; }
.px-category-button:hover { color: var(--px-text); background: var(--px-surface-soft); }
.px-category-button.is-active { color: #fff; background: linear-gradient(105deg, rgb(124 58 237 / .96), rgb(37 99 235 / .82)); box-shadow: 0 9px 22px rgb(124 58 237 / .22); }
.px-browse-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.px-type-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--px-border); border-radius: 14px; background: var(--px-surface); box-shadow: var(--px-glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.px-type-tabs button { min-width: 82px; height: 38px; padding-inline: 14px; border: 0; border-radius: 10px; color: var(--px-muted); background: transparent; cursor: pointer; transition: .18s ease; }
.px-type-tabs button.is-active { color: #fff; background: linear-gradient(100deg, var(--px-purple), #622bdd); box-shadow: 0 7px 18px rgb(124 58 237 / .23); }
.px-results-meta { color: var(--px-muted); font-size: 13px; }
.px-prompt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.px-prompt-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--px-border); border-radius: 18px; background: var(--px-surface); box-shadow: 0 12px 30px rgba(0,0,0,.13); isolation: isolate; content-visibility: auto; contain-intrinsic-size: 320px 400px; }
.px-prompt-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; border-radius: inherit; pointer-events: none; transition: .24s ease; }
.px-prompt-card:hover::after { border-color: rgb(124 58 237 / .75); box-shadow: inset 0 0 0 1px rgb(192 38 211 / .28), 0 0 26px rgb(124 58 237 / .12); }
.px-prompt-card__link { position: absolute; inset: 0; }
.px-prompt-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.px-prompt-card:hover img { transform: scale(1.025); }
.px-prompt-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.30); font-size: 46px; font-weight: 900; background: radial-gradient(circle at 50% 30%, rgb(124 58 237 / .30), transparent 50%), var(--px-bg-elevated); }
.px-pro-badge, .px-featured-badge { position: absolute; top: 11px; z-index: 7; width: 64px; min-width: 64px; height: 28px; min-height: 28px; padding: 0 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; box-sizing: border-box; }
.px-pro-badge { left: 11px !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; background: linear-gradient(120deg, var(--px-purple), var(--px-pink)); box-shadow: 0 7px 18px rgb(124 58 237 / .28); letter-spacing: .25px; }
.px-featured-badge { right: 11px !important; left: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; background: linear-gradient(135deg,#d97706,#ec4899); box-shadow: 0 7px 18px rgb(217 119 6 / .22); }
.px-favorite { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 6; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(7,10,18,.48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.px-favorite .px-icon, .px-favorite svg { width: 18px; height: 18px; fill: transparent; stroke: currentColor; }
.px-favorite.is-saved { color: #ff4c8b; background: rgba(7,10,18,.72); }
.px-favorite.is-saved svg { fill: currentColor; }
.px-video-play { position: absolute; z-index: 4; inset: 50% auto auto 50%; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff; background: rgba(7,10,18,.48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate(-50%, -50%); }
.px-video-play .px-icon { width: 25px; height: 25px; }
.px-duration { position: absolute; z-index: 5; bottom: 10px; inset-inline-end: 10px; padding: 4px 8px; border-radius: 8px; color: #fff; background: rgba(7,10,18,.68); font-size: 10px; font-weight: 800; }
.px-load-more-wrap { padding-top: 28px; text-align: center; }
.px-primary-button { min-height: 46px; padding: 0 23px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: linear-gradient(105deg, var(--px-blue), var(--px-purple), var(--px-pink)); background-size: 180% 100%; box-shadow: 0 12px 28px rgb(124 58 237 / .25); font-weight: 900; cursor: pointer; transition: .2s ease; }
.px-primary-button:hover { transform: translateY(-1px); background-position: 100% 0; }
.px-primary-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.px-empty-state { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; border: 1px dashed var(--px-border); border-radius: var(--px-radius); color: var(--px-muted); background: var(--px-surface); text-align: center; }
.px-drawer-backdrop { display: none; }

/* Prompt detail */
.px-prompt-detail-v2 { padding-top: 24px; max-width: 1540px; }
.px-detail-v2-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(390px, .88fr); gap: 32px; align-items: start; direction: ltr; }
.px-visual-column, .px-prompt-column { direction: rtl; }
html[data-ui-lang="en"] .px-visual-column, html[data-ui-lang="en"] .px-prompt-column { direction: ltr; }
.px-visual-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; direction: ltr; }
.px-toolbar-button { height: 43px; min-width: 43px; padding: 0 14px; border: 1px solid var(--px-border); border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--px-text); background: var(--px-surface); box-shadow: var(--px-glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; transition: .18s ease; }
.px-toolbar-button:hover { transform: translateY(-1px); border-color: var(--px-border-strong); }
.px-toolbar-button--icon { width: 43px; padding: 0; }
.px-toolbar-button .px-icon { width: 18px; height: 18px; }
.px-toolbar-button.is-saved { color: #ff4b8b; border-color: rgba(255,75,139,.38); }
.px-toolbar-button.is-saved svg { fill: currentColor; }
.px-visual-counter { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.px-visual-sticky { position: sticky; top: 106px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 17px; align-items: start; direction: ltr; }
.px-main-visual { position: relative; min-height: 620px; max-height: calc(100vh - 145px); aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--px-border); border-radius: 22px; display: grid; place-items: center; background: var(--px-surface); box-shadow: var(--px-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.px-main-visual img, .px-main-visual video { width: 100%; height: 100%; object-fit: contain; background: rgba(0,0,0,.08); }
.px-media-placeholder { font-size: 36px; font-weight: 900; color: var(--px-muted); }
.px-visual-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: calc(100vh - 145px); overflow: auto; padding: 2px 5px 10px; scrollbar-width: thin; }
.px-visual-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; padding: 0; border: 1px solid var(--px-border); border-radius: 14px; opacity: .60; background: var(--px-surface); box-shadow: 0 7px 18px rgba(0,0,0,.07); cursor: pointer; transition: .2s ease; }
.px-visual-thumb:hover { opacity: .88; transform: translateY(-1px); }
.px-visual-thumb.is-active { opacity: 1; border-color: var(--px-purple); box-shadow: 0 0 0 2px rgb(124 58 237 / .17), 0 8px 22px rgb(124 58 237 / .14); }
.px-visual-thumb img { width: 100%; height: 100%; object-fit: cover; }
.px-thumb-play { position: absolute; inset: 50% auto auto 50%; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(7,10,18,.58); transform: translate(-50%, -50%); }
.px-thumb-play .px-icon { width: 20px; height: 20px; }
.px-prompt-column { display: flex; flex-direction: column; gap: 17px; }
.px-prompt-head, .px-prompt-copy-card, .px-related-inline { border: 1px solid var(--px-border); border-radius: 22px; background: var(--px-surface); box-shadow: var(--px-glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
.px-prompt-head { padding: 29px; }
.px-prompt-head h1 { margin: 0; font-size: clamp(28px, 3.1vw, 43px); line-height: 1.3; letter-spacing: -.6px; }
.px-project-summary { margin: 14px 0 0; color: var(--px-muted); line-height: 1.9; font-size: 15px; }
.px-primary-actions { display: grid; grid-template-columns: 1.35fr .8fr; gap: 11px; margin-top: 23px; }
.px-primary-actions .px-primary-button, .px-explain-button { height: 51px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 900; }
.px-explain-button { border: 1px solid var(--px-border); background: var(--px-surface-soft); }
.px-explain-button:hover { border-color: var(--px-border-strong); background: var(--px-surface-strong); }
.px-prompt-copy-card { padding: 20px; }
.px-prompt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid var(--px-border); border-radius: 14px; background: var(--px-surface-soft); }
.px-prompt-tabs button { height: 39px; border: 0; border-radius: 10px; color: var(--px-muted); background: transparent; cursor: pointer; }
.px-prompt-tabs button.is-active { color: var(--px-text); background: var(--px-surface-strong); box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.px-prompt-panel { display: none; }
.px-prompt-panel.is-active { display: block; }
.px-prompt-text { max-height: 410px; overflow: auto; margin-top: 15px; padding: 18px; border: 1px solid var(--px-border); border-radius: 15px; background: rgba(4,8,18,.22); scrollbar-width: thin; }
html[data-theme="light"] .px-prompt-text { background: rgba(245,247,252,.70); }
.px-prompt-text p { margin: 0; white-space: pre-wrap; color: var(--px-text); font-size: 14px; line-height: 2; }
.px-copy-button { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: linear-gradient(100deg, var(--px-purple), #642cda); font-weight: 900; cursor: pointer; }
.px-lock-box { margin-top: 15px; padding: 28px 18px; border: 1px dashed var(--px-border-strong); border-radius: 15px; color: var(--px-muted); background: var(--px-surface-soft); text-align: center; }
.px-related-inline { padding: 20px; }
.px-related-inline__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.px-related-inline h2 { margin: 0; font-size: 18px; }
.px-related-inline__head a { color: var(--px-purple-2); font-size: 13px; font-weight: 900; }
.px-related-strip { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.px-related-mini { flex: 0 0 138px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--px-border); border-radius: 15px; background: var(--px-surface-soft); scroll-snap-align: start; }
.px-related-mini img { width: 100%; height: 100%; object-fit: cover; transition: .25s ease; }
.px-related-mini:hover img { transform: scale(1.025); }

/* Digital library */
.px-page-heading { margin-bottom: 24px; }
.px-page-heading h1 { margin: 0 0 7px; font-size: clamp(28px, 4vw, 46px); }
.px-page-heading p { margin: 0; color: var(--px-muted); }
.px-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.px-library-card { overflow: hidden; border: 1px solid var(--px-border); border-radius: 18px; background: var(--px-surface); box-shadow: var(--px-glass-shadow); }
.px-library-card__cover { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; color: var(--px-muted); background: var(--px-surface-soft); }
.px-library-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: .3s ease; }
.px-library-card:hover .px-library-card__cover img { transform: scale(1.02); }
.px-library-card__body { padding: 15px; }
.px-library-card__body h2 { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.px-library-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--px-muted); font-size: 12px; }
.px-library-card__meta strong { color: var(--px-purple-2); font-size: 15px; }
.px-library-detail__grid { display: grid; grid-template-columns: minmax(280px, 520px) minmax(0, 1fr); gap: 34px; align-items: start; }
.px-library-detail__cover, .px-library-detail__content { border: 1px solid var(--px-border); border-radius: 22px; background: var(--px-surface); box-shadow: var(--px-glass-shadow); }
.px-library-detail__cover { aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; color: var(--px-muted); }
.px-library-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.px-library-detail__content { padding: 30px; }
.px-library-detail__content h1 { margin-top: 0; font-size: clamp(28px, 4vw, 46px); }
.px-library-detail__desc { color: var(--px-muted); line-height: 1.9; }
.px-library-price { margin-block: 22px; color: var(--px-purple-2); font-size: 28px; font-weight: 900; }
.px-generic-page article { padding: 24px; border: 1px solid var(--px-border); border-radius: 20px; background: var(--px-surface); }

/* Footer */
.px-footer { position: relative; margin-top: 12px; border-top: 1px solid var(--px-border); background: rgba(7,11,20,.40); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-theme="light"] .px-footer { background: rgba(255,255,255,.45); }
.px-footer::before { content: ""; position: absolute; top: -1px; inset-inline: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--px-purple), var(--px-pink), transparent); opacity: .55; }
.px-footer__inner { min-height: 116px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.px-brand--footer .px-theme-logo-image { max-height: 38px; max-width: 175px; }
.px-footer__links { display: flex; justify-content: center; gap: 22px; color: var(--px-muted); font-size: 13px; font-weight: 800; }
.px-footer__links a:hover { color: var(--px-text); }
.px-footer small { color: var(--px-muted); font-size: 12px; }

.px-toast { position: fixed; z-index: 500; bottom: 26px; left: 50%; padding: 10px 16px; border: 1px solid var(--px-border); border-radius: 13px; color: var(--px-text); background: var(--px-surface-strong); box-shadow: var(--px-shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: .2s ease; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.px-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1240px) {
  .px-header__inner { grid-template-columns: auto auto minmax(210px, 1fr) auto; gap: 16px; }
  .px-prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-detail-v2-grid { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 22px; }
  .px-visual-sticky { grid-template-columns: minmax(0, 1fr) 172px; }
  .px-main-visual { min-height: 560px; }
}

@media (max-width: 980px) {
  .px-header__inner { grid-template-columns: auto minmax(180px, 1fr) auto; }
  .px-nav { display: none; }
  .px-prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-detail-v2-grid { display: flex; flex-direction: column; }
  .px-visual-column, .px-prompt-column { width: 100%; }
  .px-visual-sticky { position: static; display: flex; flex-direction: column; }
  .px-main-visual { width: 100%; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  .px-visual-thumbs { order: 2; display: flex; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 8px; }
  .px-visual-thumb { flex: 0 0 82px; }
}

@media (max-width: 760px) {
  .px-container { width: calc(100% - 24px); }
  .px-main { padding-top: 18px; }
  .px-header { padding-block: 7px; }
  .px-header__inner { width: calc(100% - 16px); min-height: 62px; padding: 7px 8px; grid-template-columns: auto 1fr auto; gap: 9px; border-radius: 16px; }
  .px-theme-logo-image { max-width: 146px; max-height: 39px; }
  .px-brand__name { display: none; }
  .px-brand__logos.has-compact-logo .px-theme-logo { display: none !important; }
  .px-brand__logos.has-compact-logo .px-compact-logo { display: inline-flex; }
  .px-brand__logos--footer.has-compact-logo .px-theme-logo { display: inline-flex !important; }
  .px-brand__logos--footer.has-compact-logo .px-compact-logo { display: none; }
  .px-header-search { max-width: none; }
  .px-header-search input { height: 40px; font-size: 12px; }
  .px-header-actions { gap: 4px; }
  .px-icon-button { min-width: 37px; height: 37px; border-radius: 11px; }
  .px-lang-toggle { padding-inline: 7px; }
  .px-theme-toggle { width: 60px; padding: 2px; }
  .px-theme-icon { width: 26px; height: 31px; }
  .px-header-actions .px-favorites-counter { display: none; }
  .px-browse-layout { display: block; }
  .px-mobile-filter-row { display: flex; margin-bottom: 13px; }
  .px-filter-drawer-button { height: 42px; padding: 0 17px; border: 1px solid var(--px-border); border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--px-text); background: var(--px-surface); cursor: pointer; }
  .px-categories { position: fixed; z-index: 240; top: 0; bottom: 0; inset-inline-start: 0; width: min(82vw, 330px); max-height: none; padding-top: 20px; border-radius: 0 20px 20px 0; transform: translateX(-105%); transition: transform .28s ease; }
  html[dir="rtl"] .px-categories { inset-inline-start: auto; inset-inline-end: 0; border-radius: 20px 0 0 20px; transform: translateX(105%); }
  .px-drawer-open .px-categories { transform: translateX(0); }
  .px-categories__head button { display: grid; place-items: center; }
  .px-drawer-backdrop { position: fixed; z-index: 230; inset: 0; background: rgba(0,0,0,.48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .px-drawer-open .px-drawer-backdrop { display: block; }
  .px-browse-toolbar { margin-bottom: 13px; }
  .px-type-tabs { width: 100%; }
  .px-type-tabs button { flex: 1; min-width: 0; }
  .px-results-meta { display: none; }
  .px-prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .px-prompt-card { border-radius: 14px; }
  .px-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .px-library-detail__grid { display: flex; flex-direction: column; }
  .px-library-detail__cover { width: min(100%, 430px); align-self: center; }
  .px-prompt-head { padding: 22px; }
  .px-prompt-copy-card, .px-related-inline { padding: 16px; }
  .px-footer { padding-bottom: 72px; }
  .px-footer__inner { min-height: 142px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 9px; }
  
  
  
  
  .px-toast { bottom: 77px; }
}

@media (max-width: 520px) {
  .px-header__inner { grid-template-columns: auto 1fr auto; }
  .px-header-actions .px-lang-toggle { display: none; }
  .px-header-search input { padding-inline-end: 10px; }
  .px-prompt-detail-v2 { padding-top: 12px; }
  .px-visual-toolbar { gap: 6px; margin-bottom: 9px; }
  .px-toolbar-button { height: 39px; min-width: 39px; padding-inline: 10px; border-radius: 11px; }
  .px-toolbar-button--icon { width: 39px; padding: 0; }
  .px-toolbar-button span.px-lang-ar, .px-toolbar-button span.px-lang-en { display: none !important; }
  .px-main-visual { border-radius: 17px; }
  .px-primary-actions { grid-template-columns: 1fr 1fr; }
  .px-primary-actions .px-primary-button, .px-explain-button { padding-inline: 7px; font-size: 13px; }
  .px-prompt-head h1 { font-size: 27px; }
  .px-related-mini { flex-basis: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ========================================================================
   PromXAI Theme 0.4.0 — focused prompt details and locked PRO navigation
   ======================================================================== */

/* The two uploaded logo variants occupy the same visual height. */
.px-theme-logo,
.px-theme-logo--dark,
.px-theme-logo--light {
  height: 44px;
  align-items: center;
  justify-content: flex-start;
}
.px-theme-logo-image {
  width: auto !important;
  height: 44px !important;
  max-width: 230px !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
}
.px-brand--footer .px-theme-logo,
.px-brand--footer .px-theme-logo--dark,
.px-brand--footer .px-theme-logo--light { height: 38px; }
.px-brand--footer .px-theme-logo-image {
  height: 38px !important;
  max-width: 205px !important;
}

/* No large marketing heading in the digital library. */
.px-library-page > .px-page-heading { display: none !important; }
.px-library-page { padding-top: 28px; }

/* Locked PRO cards stay visible as previews but do not open their details. */
.px-prompt-card.is-locked .px-prompt-card__link { cursor: not-allowed; }
.px-card-lock {
  position: absolute;
  z-index: 7;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  color: #fff;
  background: rgba(7,11,20,.62);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Prompt pages use their own compact toolbar instead of the global header. */
.promxai-prompt-focus .px-header { display: none !important; }
.promxai-prompt-focus .px-main { padding-top: 18px; }
.promxai-prompt-focus .px-footer { margin-top: 34px; }
.px-prompt-detail-v2 {
  width: min(1560px, calc(100% - 34px));
  max-width: none;
  padding-top: 18px;
}
.px-detail-v2-grid {
  grid-template-columns: minmax(0, 1.46fr) minmax(370px, .84fr);
  gap: 28px;
}
.px-visual-sticky {
  top: 18px;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 16px;
}

/* Preserve each uploaded image's actual aspect ratio on its detail page. */
.px-main-visual {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  padding: 0;
  align-self: start;
  background:
    linear-gradient(var(--px-surface), var(--px-surface)) padding-box,
    linear-gradient(145deg, rgb(37 99 235 / .28), rgb(124 58 237 / .20), rgb(192 38 211 / .16)) border-box;
  border-color: transparent;
}
.px-main-visual img[data-main-image] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 98px);
  margin: auto;
  object-fit: contain;
  background: transparent;
}
.px-main-visual video[data-main-video] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 98px);
  margin: auto;
  object-fit: contain;
  background: #05070d;
}
.px-visual-thumbs { max-height: calc(100vh - 84px); }

/* Smaller, calmer and more distinctive prompt title. */
.px-prompt-head { padding: 25px 26px; }
.px-prompt-head h1 {
  position: relative;
  max-width: 24ch;
  margin: 0;
  padding-bottom: 14px;
  color: var(--px-text);
  font-size: clamp(24px, 2.15vw, 35px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.25px;
  text-wrap: balance;
}
.px-prompt-head h1::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 62px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--px-blue), var(--px-purple), var(--px-pink));
  box-shadow: 0 5px 18px var(--px-glow);
}
.px-project-summary {
  max-width: 60ch;
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.85;
}

/* Related PRO previews obey the same access rule. */
.px-related-mini { position: relative; }
.px-related-mini.is-locked { cursor: not-allowed; }
@media (max-width: 1240px) {
  .px-detail-v2-grid { grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr); }
  .px-visual-sticky { grid-template-columns: minmax(0, 1fr) 166px; }
  .px-main-visual { min-height: 0; }
}

@media (max-width: 980px) {
  .px-detail-v2-grid { display: flex; flex-direction: column; }
  .px-visual-sticky { position: static; display: flex; flex-direction: column; }
  .px-main-visual {
    width: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: none;
  }
  .px-visual-thumbs {
    order: 2;
    display: flex;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 760px) {
  .px-theme-logo,
  .px-theme-logo--dark,
  .px-theme-logo--light { height: 38px; }
  .px-theme-logo-image {
    height: 38px !important;
    max-width: 170px !important;
  }
  .px-prompt-detail-v2 { width: calc(100% - 20px); padding-top: 10px; }
  .px-prompt-head { padding: 20px; }
  .px-prompt-head h1 { font-size: clamp(23px, 7vw, 29px); }
}

/* ========================================================================
   PromXAI Theme 0.4.1 — compact glass gallery and categories
   ======================================================================== */

/* A single transparent visual workspace groups the toolbar, main asset and
   optional visuals without forcing the media into a fixed aspect ratio. */
.px-visual-column {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--px-border-strong) 70%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--px-surface) 82%, transparent), color-mix(in srgb, var(--px-surface-soft) 74%, transparent));
  box-shadow: 0 22px 56px rgba(3, 7, 20, .16), inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}
html[data-theme="light"] .px-visual-column {
  box-shadow: 0 18px 42px rgba(31, 42, 73, .075), inset 0 1px 0 rgba(255,255,255,.75);
}

.px-visual-toolbar {
  width: max-content;
  max-width: 100%;
  margin: 0 0 11px;
  padding: 5px;
  gap: 6px;
  border: 1px solid var(--px-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--px-surface-strong) 68%, transparent);
  box-shadow: 0 12px 30px rgba(2, 6, 18, .10), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.px-toolbar-button {
  height: 39px;
  min-width: 39px;
  padding-inline: 11px;
  border-color: color-mix(in srgb, var(--px-border) 85%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--px-surface-soft) 82%, transparent);
  box-shadow: none;
}
.px-toolbar-button:hover {
  border-color: var(--px-border-strong);
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
  box-shadow: 0 8px 18px rgb(124 58 237 / .09);
}
.px-toolbar-button--icon { padding-inline: 0; }
.px-visual-counter { margin-inline-start: 2px; }

/* Keep the image and its optional thumbnails physically adjacent. */
.px-visual-sticky {
  position: sticky;
  top: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--px-border) 88%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--px-surface-soft) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

.px-main-visual {
  flex: 0 1 auto;
  inline-size: fit-content;
  width: fit-content;
  max-width: calc(100% - 160px);
  min-width: 0;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 7px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--px-surface-strong) 68%, transparent), color-mix(in srgb, var(--px-surface-strong) 68%, transparent)) padding-box,
    linear-gradient(145deg, rgb(37 99 235 / .42), rgb(124 58 237 / .38), rgb(192 38 211 / .28)) border-box;
  box-shadow: 0 16px 38px rgba(2, 6, 18, .14), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.px-main-visual img[data-main-image],
.px-main-visual video[data-main-video] {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 128px);
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
  background: transparent;
}
.px-main-visual video[data-main-video] { background: #05070d; }

.px-visual-thumbs {
  flex: 0 0 138px;
  width: 138px;
  max-height: calc(100vh - 128px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  padding: 7px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--px-border) 90%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--px-surface-strong) 58%, transparent);
  box-shadow: 0 12px 28px rgba(2, 6, 18, .10), inset 0 1px 0 rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(16px) saturate(128%);
  backdrop-filter: blur(16px) saturate(128%);
  scrollbar-width: thin;
}
.px-visual-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--px-border) 90%, transparent);
  opacity: .68;
  background: color-mix(in srgb, var(--px-surface-soft) 78%, transparent);
  box-shadow: none;
}
.px-visual-thumb:hover { opacity: .9; transform: translateY(-1px); }
.px-visual-thumb.is-active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--px-purple) 85%, #fff 15%);
  box-shadow: 0 0 0 2px rgb(124 58 237 / .16), 0 8px 18px rgb(124 58 237 / .13);
}
.px-visual-thumb img { border-radius: inherit; }

/* Compact product categories: useful filter, not a dominant panel. */
.px-browse-layout {
  grid-template-columns: 192px minmax(0, 1fr);
  gap: 18px;
}
.px-categories {
  top: 100px;
  max-height: calc(100vh - 116px);
  padding: 9px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--px-surface) 78%, transparent);
  box-shadow: 0 14px 34px rgba(2, 6, 18, .10), inset 0 1px 0 rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
.px-categories__head { padding: 3px 6px 7px; }
.px-categories__head h2 { font-size: 13px; }
.px-category-button {
  min-height: 36px;
  margin: 1px 0;
  padding: 6px 9px;
  gap: 7px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.3;
}
.px-category-button.is-active {
  box-shadow: 0 7px 17px rgb(124 58 237 / .18);
}

@media (max-width: 1240px) {
  .px-browse-layout { grid-template-columns: 178px minmax(0, 1fr); gap: 15px; }
  .px-visual-thumbs { flex-basis: 126px; width: 126px; }
  .px-main-visual { max-width: calc(100% - 148px); }
}

@media (max-width: 980px) {
  .px-visual-column { padding: 9px; border-radius: 20px; }
  .px-visual-toolbar { margin-bottom: 8px; }
  .px-visual-sticky {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 8px;
  }
  .px-main-visual {
    width: 100%;
    max-width: 100%;
    inline-size: auto;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    max-height: none;
  }
  .px-visual-thumbs {
    order: 2;
    flex: none;
    width: 100%;
    max-height: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
  }
  .px-visual-thumb { flex: 0 0 70px; }
}

@media (max-width: 760px) {
  .px-visual-column { padding: 7px; }
  .px-visual-toolbar { width: 100%; }
  .px-toolbar-button { height: 37px; min-width: 37px; padding-inline: 9px; }
  .px-visual-sticky { border-radius: 16px; }
  .px-main-visual { padding: 5px; border-radius: 15px; }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] { border-radius: 10px; }
}

/* ========================================================================
   PromXAI Theme 0.5.0 — stable filters + refined prompt gallery
   ======================================================================== */

/* Locked PRO previews remain recognizable but are softly obscured. */
.px-card-lock {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 17px;
  background: rgba(8, 12, 23, .55);
}

/* The gallery actions are split: Back on the left, tools above thumbnails. */
.px-prompt-detail-v2 {
  width: min(1580px, calc(100% - 28px));
  padding-top: 12px;
}
.px-detail-v2-grid {
  grid-template-columns: minmax(0, 1.50fr) minmax(370px, .82fr);
  gap: 26px;
}
.px-visual-column {
  padding: 10px;
  border-radius: 22px;
}
.px-visual-sticky {
  position: sticky;
  top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 226px;
  gap: 22px;
  align-items: start;
  padding: 9px;
  direction: ltr;
}
.px-main-stack,
.px-visual-side {
  min-width: 0;
}
.px-main-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.px-back-slot {
  min-height: 38px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.px-back-button {
  height: 36px;
  min-width: 36px;
  padding-inline: 10px;
  gap: 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--px-surface-strong) 65%, transparent);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
}
.px-main-visual {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  inline-size: fit-content;
  margin-inline: auto;
  padding: 7px;
  border-radius: 19px;
}
.px-main-visual img[data-main-image],
.px-main-visual video[data-main-video] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 90px);
  object-fit: contain;
  border-radius: 13px;
}
.px-visual-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.px-side-tools {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--px-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--px-surface-strong) 66%, transparent);
  box-shadow: 0 10px 26px rgba(2,6,18,.09), inset 0 1px 0 rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(17px) saturate(132%);
  backdrop-filter: blur(17px) saturate(132%);
  direction: rtl;
}
.px-side-tools .px-toolbar-button {
  height: 34px;
  min-width: 34px;
  padding-inline: 8px;
  border-radius: 10px;
}
.px-side-tools .px-toolbar-button--icon {
  padding-inline: 0;
}
.px-side-tools .px-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
}
.px-side-tools .px-visual-counter {
  min-width: 59px;
  margin: 0;
  gap: 5px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.px-detail-lang-toggle {
  width: auto;
  gap: 4px;
  font-size: 10px;
  font-weight: 900;
}
.px-detail-theme-toggle {
  width: 62px;
  padding: 2px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.px-detail-theme-toggle .px-theme-icon {
  width: 27px;
  height: 28px;
  border-radius: 9px;
}
.px-detail-theme-toggle .px-theme-icon .px-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}
.px-visual-thumbs {
  width: 100%;
  max-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 9px;
  border-radius: 17px;
}
.px-visual-thumb {
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 12px;
  opacity: .72;
}
.px-visual-thumb:hover { opacity: .92; }
.px-visual-thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgb(124 58 237 / .18), 0 10px 22px rgb(124 58 237 / .14);
}

/* Compact category panel: secondary navigation, not a dominant card. */
.px-browse-layout {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
}
.px-categories {
  top: 96px;
  max-height: calc(100vh - 108px);
  padding: 8px;
  border-radius: 15px;
}
.px-categories__head {
  padding: 2px 5px 6px;
}
.px-categories__head h2 {
  font-size: 12.5px;
  line-height: 1.3;
}
.px-category-button {
  min-height: 33px;
  padding: 5px 8px;
  margin: 0;
  border-radius: 9px;
  font-size: 12px;
}

@media (max-width: 1260px) {
  .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1.34fr) minmax(350px, .78fr);
    gap: 20px;
  }
  .px-visual-sticky {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 18px;
  }
  .px-browse-layout {
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 980px) {
  .px-detail-v2-grid {
    display: flex;
    flex-direction: column;
  }
  .px-visual-sticky {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .px-main-stack {
    width: 100%;
  }
  .px-main-visual {
    width: 100%;
    inline-size: auto;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    max-height: none;
  }
  .px-visual-side {
    width: 100%;
    gap: 8px;
  }
  .px-side-tools {
    order: 1;
    justify-content: flex-end;
  }
  .px-visual-thumbs {
    order: 2;
    display: flex;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
  }
  .px-visual-thumb {
    flex: 0 0 82px;
  }
}

@media (max-width: 760px) {
  .px-prompt-detail-v2 {
    width: calc(100% - 14px);
    padding-top: 7px;
  }
  .px-visual-column {
    padding: 6px;
    border-radius: 17px;
  }
  .px-visual-sticky {
    padding: 6px;
    border-radius: 14px;
  }
  .px-back-slot {
    min-height: 35px;
    margin-bottom: 5px;
  }
  .px-side-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .px-side-tools::-webkit-scrollbar { display: none; }
  .px-visual-thumb { flex-basis: 76px; }
}

/* ========================================================================
   PromXAI Theme 0.6.0 — viewport gallery + reliable filters
   ======================================================================== */

/* The visual workspace remains fixed while the information/related column
   continues vertically. The main asset uses the available viewport height
   without cropping its original ratio. */
@media (min-width: 981px) {
  .promxai-prompt-focus {
    overflow-x: hidden;
  }
  .px-prompt-detail-v2 {
    width: min(1700px, calc(100% - 20px));
    padding-top: 6px;
    padding-bottom: 24px;
  }
  .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1.62fr) minmax(390px, .78fr);
    gap: 18px;
    align-items: start;
  }
  .px-visual-column {
    position: sticky;
    top: 6px;
    height: calc(100vh - 12px);
    padding: 7px;
    overflow: hidden;
  }
  .px-visual-sticky {
    position: static;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) 218px;
    gap: 24px;
    padding: 6px;
    align-items: start;
  }
  .px-main-stack {
    height: 100%;
    justify-content: flex-start;
  }
  .px-back-slot {
    min-height: 34px;
    margin-bottom: 4px;
  }
  .px-main-visual {
    width: 100%;
    height: calc(100% - 38px);
    max-width: none;
    inline-size: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
    margin: 0;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
  }
  .px-visual-side {
    height: 100%;
    gap: 16px;
    padding-top: 0;
  }
  .px-side-tools {
    flex: 0 0 auto;
  }
  .px-visual-thumbs {
    width: 100%;
    max-height: calc(100vh - 86px);
    gap: 12px;
    padding: 10px;
    overflow-y: auto;
    align-content: start;
  }
  .px-visual-thumb {
    min-height: 88px;
    border-radius: 14px;
  }
  .px-prompt-column {
    min-width: 0;
  }
}

/* Related prompts sit under the copy action and continue naturally down the
   information column: two samples per row, image only. */
.px-related-inline {
  margin-top: 14px;
}
.px-related-inline .px-related-list,
.px-related-inline [class*="related-list"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
}
.px-related-mini {
  width: 100%;
  min-width: 0;
  flex: none;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}

/* A calmer, compact category rail. */
.px-browse-layout {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
}
.px-categories {
  padding: 7px;
  border-radius: 14px;
}
.px-category-button {
  min-height: 31px;
  padding: 4px 7px;
  font-size: 11.5px;
}

/* Locked PRO cards remain recognizable without revealing a clean asset. */
@media (max-width: 1260px) and (min-width: 981px) {
  .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1.46fr) minmax(360px, .82fr);
    gap: 15px;
  }
  .px-visual-sticky {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
  }
  .px-visual-thumb { min-height: 76px; }
  .px-browse-layout { grid-template-columns: 144px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .px-related-inline .px-related-list,
  .px-related-inline [class*="related-list"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-main-visual {
    aspect-ratio: auto;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}
.px-related-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
}


/* ========================================================================
   PromXAI Theme 0.7.0 — mobile category rail + unified detail action row
   ======================================================================== */

/* The mobile-only back control lives inside the action row. */
.px-mobile-tool-back { display: none; }

@media (max-width: 760px) {
  /* Categories are now a horizontal swipe rail above All / Images / Video.
     This replaces the intrusive off-canvas drawer on phones. */
  body.px-drawer-open { overflow: auto; }
  .px-mobile-filter-row,
  .px-filter-drawer-button,
  .px-drawer-backdrop { display: none !important; }

  .px-browse-layout {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    direction: inherit;
  }
  .px-categories {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    order: 0;
    width: 100% !important;
    max-height: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 15px;
    transform: none !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .px-categories::-webkit-scrollbar { display: none; }
  .px-categories__head { display: none !important; }
  .px-category-button {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    min-height: 38px;
    margin: 0;
    padding: 7px 14px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 12.5px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .px-category-button:not(.is-active) {
    color: var(--px-muted);
    background: color-mix(in srgb, var(--px-surface-soft) 70%, transparent);
    border-color: color-mix(in srgb, var(--px-border) 78%, transparent);
  }
  .px-browse-content { order: 1; min-width: 0; }
  .px-browse-toolbar { margin: 0 0 12px; }
  .px-type-tabs { width: 100%; }

  /* Prompt detail: remove the upper back row so the hero visual starts higher. */
  .promxai-prompt-focus .px-main { padding-top: 4px; }
  .px-prompt-detail-v2 {
    width: calc(100% - 12px);
    padding-top: 4px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .px-visual-column {
    padding: 5px;
    border-radius: 18px;
  }
  .px-visual-sticky {
    padding: 5px;
    gap: 9px;
    border-radius: 16px;
  }
  .px-back-slot { display: none !important; }
  .px-main-stack { width: 100%; }
  .px-main-visual {
    width: 100%;
    max-width: 100%;
    height: calc(100svh - 128px);
    min-height: 0;
    max-height: 760px;
    padding: 4px;
    margin: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    border-radius: 12px;
  }

  /* One compact horizontal action row below the main visual.
     Direction is forced LTR so Back is always the first control on the left. */
  .px-visual-side { width: 100%; gap: 9px; }
  .px-side-tools {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    direction: ltr;
    border: 1px solid color-mix(in srgb, var(--px-border) 86%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--px-surface-strong) 62%, transparent);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .px-side-tools::-webkit-scrollbar { display: none; }
  .px-mobile-tool-back { display: inline-flex; flex: 0 0 40px; order: 0; }
  .px-side-tools .px-visual-counter { order: 1; flex: 0 0 auto; margin: 0; }
  .px-side-tools [data-share-page] { order: 2; }
  .px-side-tools [data-favorite-id] { order: 3; }
  .px-side-tools .px-detail-theme-toggle { order: 4; }
  .px-side-tools .px-detail-lang-toggle { order: 5; }
  .px-side-tools .px-toolbar-button {
    height: 40px;
    min-width: 40px;
    padding-inline: 9px;
    border-radius: 11px;
  }
  .px-side-tools .px-toolbar-button--icon { width: 40px; padding: 0; }
  .px-side-tools .px-detail-theme-toggle { min-width: 62px; }
  .px-side-tools .px-detail-lang-toggle { min-width: 58px; }

  /* References remain below the action row and are easy to swipe. */
  .px-visual-thumbs {
    order: 2;
    width: 100%;
    max-height: none;
    display: flex;
    gap: 9px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .px-visual-thumbs::-webkit-scrollbar { display: none; }
  .px-visual-thumb {
    flex: 0 0 82px;
    min-height: 82px;
    scroll-snap-align: start;
    border-radius: 12px;
  }
}

@media (max-width: 390px) {
  .px-main-visual { height: calc(100svh - 120px); }
  .px-side-tools { gap: 5px; padding: 5px; }
  .px-side-tools .px-toolbar-button { height: 38px; min-width: 38px; padding-inline: 8px; }
  .px-side-tools .px-toolbar-button--icon,
  .px-mobile-tool-back { width: 38px; flex-basis: 38px; }
  .px-side-tools .px-detail-theme-toggle { min-width: 58px; }
  .px-side-tools .px-detail-lang-toggle { min-width: 54px; }
  .px-visual-thumb { flex-basis: 78px; min-height: 78px; }
}

/* ========================================================================
   PromXAI Theme 0.8.0 — native swipe gallery for prompt details on phones
   ======================================================================== */
.px-mobile-gallery { display: none; }

@media (max-width: 760px) {
  /* The phone detail page uses one native, scroll-snap carousel containing
     the main visual, Before/After or Storyboard, and up to eight extras. */
  .px-prompt-detail-v2 .px-visual-sticky {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 3px;
  }
  .px-prompt-detail-v2 .px-main-stack,
  .px-prompt-detail-v2 .px-visual-thumbs {
    display: none !important;
  }
  
  
  
  
  
  
  
  
  
  
  
  .px-prompt-detail-v2 .px-visual-side {
    order: 1;
    width: 100%;
  }
  .px-prompt-detail-v2 .px-side-tools {
    margin-top: 0;
  }
}




/* ========================================================================
   PromXAI Theme 0.9.0 — reliable filter cards + fitted desktop detail panel
   ======================================================================== */

/* Filtering keeps the existing grid visible until the new response is ready. */
.px-browse.is-loading .px-prompt-grid {
  opacity: .58;
  pointer-events: none;
  transition: opacity .18s ease;
}

@media (min-width: 981px) {
  /* Keep the entire two-column workspace inside the viewport. */
  .px-prompt-detail-v2 {
    width: min(1480px, calc(100vw - 24px));
    max-width: 1480px;
    padding-inline: 0;
  }
  .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 410px);
    gap: 16px;
    width: 100%;
  }
  .px-visual-column,
  .px-prompt-column {
    min-width: 0;
    max-width: 100%;
  }
  .px-visual-sticky {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 13vw, 184px);
    gap: 14px;
  }

  /* The small Back control sits beside the main visual, not above it. */
  .px-main-stack {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
  }
  .px-back-slot {
    position: static;
    flex: 0 0 34px;
    width: 34px;
    min-height: 0;
    margin: 8px 0 0;
  }
  .px-back-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 11px;
    justify-content: center;
  }
  .px-back-button .px-lang-ar,
  .px-back-button .px-lang-en {
    display: none !important;
  }
  .px-back-button .px-icon {
    width: 17px;
    height: 17px;
  }
  .px-main-visual {
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 41px);
    height: 100%;
    margin: 0;
    padding: 5px;
  }
  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  /* Compact the information column so it never pushes outside the screen. */
  .px-prompt-column {
    width: 100%;
    gap: 12px;
    overflow-wrap: anywhere;
  }
  .px-prompt-head,
  .px-prompt-copy-card,
  .px-related-inline {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .px-prompt-head {
    padding: 19px 20px;
  }
  .px-prompt-head h1 {
    font-size: clamp(24px, 2.15vw, 34px);
    line-height: 1.28;
    letter-spacing: -.35px;
  }
  .px-project-summary {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.75;
  }
  .px-primary-actions {
    margin-top: 15px;
    gap: 8px;
  }
  .px-prompt-copy-card {
    padding: 14px;
  }
  .px-prompt-text {
    max-height: min(42vh, 350px);
    margin-top: 11px;
    padding: 14px;
  }
  .px-prompt-text p {
    font-size: 13px;
    line-height: 1.85;
  }
  .px-related-inline {
    padding: 14px;
  }
}


/* ========================================================================
   PromXAI Theme 0.9.1 — complete desktop image + vertical references
   ======================================================================== */

/* The prompt head and copy card form one stage so their lower edge aligns
   exactly with the visual stage. Related prompts continue below that stage. */
.px-prompt-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.px-visual-counter {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (min-width: 981px) {
  .px-prompt-detail-v2 {
    --px-detail-stage-height: clamp(560px, calc(100svh - 52px), 860px);
  }

  .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 404px);
    gap: 16px;
    align-items: start;
  }

  /* Visual and prompt stages now share one exact height. */
  .px-visual-column,
  .px-prompt-stage {
    height: var(--px-detail-stage-height);
    min-height: 0;
  }

  .px-visual-sticky {
    top: 10px;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
  }

  .px-main-stack {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .px-back-slot {
    margin-top: 6px;
  }

  /* Never crop the uploaded artwork on the prompt detail page. */
  .px-main-visual {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 41px);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .px-main-visual img[data-main-image],
  .px-main-visual video[data-main-video] {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent;
  }

  /* Reference images are stacked in one vertical rail. */
  .px-visual-side {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }

  .px-side-tools {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }

  .px-side-tools .px-toolbar-button,
  .px-side-tools .px-visual-counter {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding-inline: 7px;
  }

  .px-side-tools .px-visual-counter {
    grid-column: span 2;
  }

  .px-side-tools .px-detail-theme-toggle,
  .px-side-tools .px-detail-lang-toggle {
    min-width: 0;
  }

  .px-visual-thumbs {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .px-visual-thumb {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }

  .px-visual-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Prompt stage fills the same height as the visual stage. */
  .px-prompt-column {
    gap: 14px;
  }

  .px-prompt-stage {
    flex: 0 0 var(--px-detail-stage-height);
  }

  .px-prompt-head {
    flex: 0 0 auto;
  }

  .px-prompt-copy-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .px-prompt-tabs {
    flex: 0 0 auto;
  }

  .px-prompt-panel.is-active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .px-prompt-text {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .px-copy-button {
    flex: 0 0 46px;
  }

  .px-related-inline {
    margin-top: 0;
  }
}

@media (min-width: 981px) and (max-height: 720px) {
  .px-prompt-detail-v2 {
    --px-detail-stage-height: calc(100svh - 38px);
  }

  .px-prompt-head {
    padding: 15px 17px;
  }

  .px-prompt-head h1 {
    font-size: clamp(22px, 2vw, 30px);
  }

  .px-primary-actions {
    margin-top: 10px;
  }
}


/* ========================================================================
   PromXAI Theme 0.9.2 — wider media rail, refined toolbar and gallery arrows
   ======================================================================== */
@media (min-width: 981px) {
  /* Give the reference rail more breathing room, taken from the main artwork
     area while preserving the shared visual/prompt stage height. */
  .px-prompt-detail-v2 .px-visual-sticky {
    grid-template-columns: minmax(0, 1fr) clamp(164px, 13.5vw, 184px);
    gap: 14px;
  }

  /* The back control is now a distinctive floating action at the top-left. */
  .px-prompt-detail-v2 .px-main-stack {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
  }
  .px-prompt-detail-v2 .px-back-slot {
    position: absolute;
    z-index: 12;
    top: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
    margin: 0;
  }
  .px-prompt-detail-v2 .px-back-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #7357ff 0%, #3ea7ff 58%, #ff46c8 135%);
    box-shadow: 0 12px 30px rgba(67,103,255,.32), inset 0 1px 0 rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .px-prompt-detail-v2 .px-back-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 34px rgba(67,103,255,.4), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .px-prompt-detail-v2 .px-back-button:active { transform: translateY(0) scale(.97); }
  .px-prompt-detail-v2 .px-back-button .px-icon { width: 20px; height: 20px; stroke-width: 2.2; }

  .px-prompt-detail-v2 .px-main-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
  }

  /* Previous/next controls sit on the calm margins around portrait artwork. */
  .px-gallery-arrow {
    position: absolute;
    z-index: 9;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: var(--px-text);
    background: rgba(13,18,38,.66);
    box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  html[data-theme="light"] .px-gallery-arrow {
    color: #14192d;
    border-color: rgba(31,38,74,.14);
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 28px rgba(44,53,90,.13), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .px-gallery-arrow:hover {
    border-color: rgba(111,92,255,.72);
    background: rgba(87,74,219,.78);
    color: #fff;
    box-shadow: 0 12px 30px rgba(79,77,220,.3);
  }
  .px-gallery-arrow:active { transform: translateY(-50%) scale(.94); }
  .px-gallery-arrow .px-icon { width: 20px; height: 20px; stroke-width: 2.2; }
  .px-gallery-arrow--prev { left: 16px; }
  .px-gallery-arrow--prev .px-icon { transform: rotate(180deg); }
  .px-gallery-arrow--next { right: 16px; }

  /* Balanced 3-column toolbar: counter + share, then language/theme/favorite. */
  .px-prompt-detail-v2 .px-side-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "counter counter share"
      "language theme favorite";
    gap: 8px;
    padding: 9px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(24,31,58,.62), rgba(10,14,31,.46));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.08);
  }
  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools {
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(245,247,255,.7));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 26px rgba(63,72,112,.08);
  }
  .px-prompt-detail-v2 .px-side-tools .px-mobile-tool-back { display: none !important; }
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter { grid-area: counter; }
  .px-prompt-detail-v2 .px-side-tools [data-share-page] { grid-area: share; }
  .px-prompt-detail-v2 .px-side-tools [data-favorite-id] { grid-area: favorite; }
  .px-prompt-detail-v2 .px-side-tools .px-detail-theme-toggle { grid-area: theme; }
  .px-prompt-detail-v2 .px-side-tools .px-detail-lang-toggle { grid-area: language; }
  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button,
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    min-width: 0;
    width: 100%;
    height: 42px;
    border-radius: 13px;
    padding-inline: 8px;
  }
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    justify-content: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
  }
  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button:hover {
    border-color: rgba(112,91,255,.55);
    transform: translateY(-1px);
  }

  /* Larger reference cards make the wider rail useful and easier to scan. */
  .px-prompt-detail-v2 .px-visual-thumbs {
    gap: 10px;
    padding: 9px;
    border-radius: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(116,95,255,.72) transparent;
  }
  .px-prompt-detail-v2 .px-visual-thumbs::-webkit-scrollbar { width: 6px; }
  .px-prompt-detail-v2 .px-visual-thumbs::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, #7560ff, #3ca4ff);
  }
  .px-prompt-detail-v2 .px-visual-thumb {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
  }
}

@media (max-width: 980px) {
  /* Mobile already uses native swipe navigation. */
  .px-gallery-arrow { display: none !important; }
}


/* ========================================================================
   PromXAI Theme 0.9.3 — category-aware related navigation and glass polish
   ======================================================================== */
.px-prompt-detail-v2 {
  --px-detail-line: color-mix(in srgb, var(--px-purple) 38%, transparent);
  --px-detail-line-soft: color-mix(in srgb, var(--px-blue) 22%, transparent);
}

/* Icon-only back action: never expose a translated word inside the tile. */
.px-prompt-detail-v2 .px-back-button {
  overflow: hidden;
  white-space: nowrap;
}
.px-prompt-detail-v2 .px-back-button > :not(.px-icon) { display: none !important; }

/* Premium glass prompt language selector. Arabic and English have subtly
   different active gradients while preserving one consistent component. */
.px-prompt-detail-v2 .px-prompt-tabs {
  position: relative;
  gap: 7px;
  padding: 5px;
  border-color: var(--px-detail-line);
  background: linear-gradient(145deg, rgba(20,27,49,.44), rgba(8,12,27,.26));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-tabs {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(239,243,255,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.px-prompt-detail-v2 .px-prompt-tabs button {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  color: color-mix(in srgb, var(--px-muted) 90%, var(--px-text));
  font-weight: 800;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.px-prompt-detail-v2 .px-prompt-tabs button:hover:not(.is-active) {
  color: var(--px-text);
  border-color: var(--px-detail-line-soft);
  background: color-mix(in srgb, var(--px-surface-strong) 32%, transparent);
}
.px-prompt-detail-v2 .px-prompt-tabs button[data-prompt-tab="ar"].is-active {
  color: #fff;
  border-color: rgba(255,103,220,.34);
  background: linear-gradient(110deg, rgb(124 58 237 / .88), rgb(192 38 211 / .62));
  box-shadow: 0 8px 20px rgb(124 58 237 / .18), inset 0 1px 0 rgba(255,255,255,.22);
}
.px-prompt-detail-v2 .px-prompt-tabs button[data-prompt-tab="en"].is-active {
  color: #fff;
  border-color: rgba(101,150,255,.36);
  background: linear-gradient(110deg, rgb(37 99 235 / .88), rgb(124 58 237 / .66));
  box-shadow: 0 8px 20px rgb(37 99 235 / .18), inset 0 1px 0 rgba(255,255,255,.22);
}
.px-prompt-detail-v2 .px-prompt-tabs button.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 26%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
}

/* Transparent cards and brand-coloured hairlines without neon overload. */
.px-prompt-detail-v2 .px-visual-column,
.px-prompt-detail-v2 .px-prompt-head,
.px-prompt-detail-v2 .px-prompt-copy-card,
.px-prompt-detail-v2 .px-related-inline,
.px-prompt-detail-v2 .px-side-tools,
.px-prompt-detail-v2 .px-visual-thumbs {
  border-color: var(--px-detail-line);
  background: linear-gradient(145deg, color-mix(in srgb, var(--px-surface) 74%, transparent), color-mix(in srgb, var(--px-bg-elevated) 52%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(1,4,14,.10);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-visual-column,
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-head,
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-copy-card,
html[data-theme="light"] .px-prompt-detail-v2 .px-related-inline,
html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools,
html[data-theme="light"] .px-prompt-detail-v2 .px-visual-thumbs {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(244,247,255,.54));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 16px 42px rgba(49,60,104,.075);
}
.px-prompt-detail-v2 .px-toolbar-button {
  border-color: color-mix(in srgb, var(--px-purple) 24%, transparent);
  color: color-mix(in srgb, var(--px-blue) 54%, var(--px-text));
  background: color-mix(in srgb, var(--px-surface-strong) 38%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.px-prompt-detail-v2 .px-toolbar-button:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--px-pink) 42%, var(--px-purple));
  background: linear-gradient(135deg, rgb(124 58 237 / .60), rgb(37 99 235 / .48));
  box-shadow: 0 10px 24px rgba(88,76,221,.20), inset 0 1px 0 rgba(255,255,255,.15);
}
.px-prompt-detail-v2 [data-favorite-id].is-saved {
  color: #fff;
  border-color: rgba(255,74,183,.48);
  background: linear-gradient(135deg, rgb(192 38 211 / .72), rgb(124 58 237 / .64));
}
.px-prompt-detail-v2 .px-visual-thumb {
  border-color: color-mix(in srgb, var(--px-blue) 22%, transparent);
  background: color-mix(in srgb, var(--px-surface) 58%, transparent);
}
.px-prompt-detail-v2 .px-visual-thumb.is-active {
  border-color: color-mix(in srgb, var(--px-purple) 76%, var(--px-blue));
  box-shadow: 0 0 0 2px rgb(124 58 237 / .18), 0 10px 24px rgb(37 99 235 / .14);
}

/* Category-aware related action. */
.px-related-inline__head .px-related-view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--px-purple) 30%, transparent);
  border-radius: 11px;
  color: color-mix(in srgb, var(--px-purple-2) 78%, var(--px-text));
  background: color-mix(in srgb, var(--px-surface-soft) 74%, transparent);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.px-related-inline__head .px-related-view-all:hover {
  color: #fff;
  border-color: rgba(118,99,255,.62);
  background: linear-gradient(120deg, rgb(124 58 237 / .72), rgb(37 99 235 / .58));
  transform: translateY(-1px);
}
.px-related-inline__head .px-related-view-all .px-icon { width: 15px; height: 15px; }
html[dir="rtl"] .px-related-inline__head .px-related-view-all .px-icon { transform: rotate(180deg); }

.px-prompt-detail-v2 .px-prompt-text {
  border-color: color-mix(in srgb, var(--px-blue) 24%, transparent);
  background: color-mix(in srgb, var(--px-bg) 34%, transparent);
}
.px-prompt-detail-v2 .px-copy-button {
  background: linear-gradient(105deg, var(--px-purple), var(--px-blue) 62%, var(--px-pink) 135%);
  box-shadow: 0 10px 24px rgba(77,92,222,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
.px-prompt-detail-v2 .px-copy-button:hover { filter: brightness(1.07); }

@media (max-width: 980px) {
  .px-related-inline__head .px-related-view-all { min-height: 32px; padding: 5px 9px; }
}


/* ========================================================================
   PromXAI Theme 0.9.4 — focused prompt viewport and optical logo matching
   ======================================================================== */
:root {
  --px-dark-logo-scale: 1;
  --px-light-logo-scale: 1.12;
}

/* Both theme logos occupy one geometric box. The optional scale corrects
   transparent whitespace inside the uploaded files, so equal pixel sizes
   also look equal to the eye. */
.px-brand__logos {
  min-height: 44px;
}
.px-theme-logo {
  overflow: visible;
  transform: translateZ(0);
}
.px-theme-logo-image--dark,
.px-theme-logo-image--light {
  transform-origin: center center;
  will-change: transform;
}
.px-theme-logo-image--dark { transform: scale(var(--px-dark-logo-scale)); }
.px-theme-logo-image--light { transform: scale(var(--px-light-logo-scale)); }

/* Prompt details are a focused workspace. The regular site footer is removed
   server-side; this rule is a defensive fallback for caches or overrides. */
.promxai-prompt-focus .px-footer { display: none !important; }
.promxai-prompt-focus .px-main { padding-bottom: 18px; }

@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-v2 {
    min-height: calc(100dvh - 18px);
  }
}

@media (max-width: 760px) {
  .px-brand__logos { min-height: 38px; }
  /* The bottom navigation remains the only footer-like navigation on phones. */
  .promxai-prompt-focus .px-main { padding-bottom: 82px; }
}

/* ========================================================================
   PromXAI Theme 0.9.5 — protected video UI, equal desktop workspaces,
   and refined glass colour systems for light and dark modes
   ======================================================================== */

.px-prompt-detail-v2 {
  --px-detail-glass: rgba(11, 16, 35, .58);
  --px-detail-glass-strong: rgba(15, 22, 46, .76);
  --px-detail-glass-soft: rgba(255, 255, 255, .045);
  --px-detail-stroke: rgba(139, 124, 255, .27);
  --px-detail-stroke-soft: rgba(88, 137, 255, .17);
  --px-detail-stroke-active: rgba(124, 102, 255, .64);
  --px-detail-ink: #f7f8ff;
  --px-detail-muted: #aeb8ce;
  --px-detail-shadow: 0 22px 58px rgba(0, 0, 0, .20);
  --px-detail-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .075);
  --px-detail-icon-bg: rgba(255, 255, 255, .055);
  --px-detail-icon-hover: linear-gradient(135deg, rgb(124 58 237 / .72), rgb(37 99 235 / .58));
}

html[data-theme="light"] .px-prompt-detail-v2 {
  --px-detail-glass: rgba(255, 255, 255, .76);
  --px-detail-glass-strong: rgba(255, 255, 255, .91);
  --px-detail-glass-soft: rgba(92, 104, 170, .045);
  --px-detail-stroke: rgba(89, 73, 180, .16);
  --px-detail-stroke-soft: rgba(75, 118, 224, .13);
  --px-detail-stroke-active: rgba(102, 78, 220, .48);
  --px-detail-ink: #171b31;
  --px-detail-muted: #68718a;
  --px-detail-shadow: 0 22px 58px rgba(48, 59, 111, .095);
  --px-detail-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .96);
  --px-detail-icon-bg: rgba(255, 255, 255, .64);
  --px-detail-icon-hover: linear-gradient(135deg, rgba(114, 82, 241, .88), rgba(70, 132, 255, .80));
}

/* Native video download controls and the right-click menu are disabled by
   markup/JavaScript. These declarations cover Chromium/WebKit affordances. */
video[data-no-download] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
video[data-no-download]::-webkit-media-controls-download-button {
  display: none !important;
}

/* One visual language for the focused detail workspace. */
.px-prompt-detail-v2 .px-visual-column,
.px-prompt-detail-v2 .px-prompt-column {
  border: 1px solid var(--px-detail-stroke);
  border-radius: 24px;
  color: var(--px-detail-ink);
  background:
    radial-gradient(circle at 92% 4%, rgb(37 99 235 / .075), transparent 34%),
    radial-gradient(circle at 7% 96%, rgb(192 38 211 / .045), transparent 31%),
    var(--px-detail-glass);
  box-shadow: var(--px-detail-inner-highlight), var(--px-detail-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-visual-column,
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-column {
  background:
    radial-gradient(circle at 95% 3%, rgba(92, 123, 255, .085), transparent 36%),
    radial-gradient(circle at 5% 98%, rgba(194, 81, 235, .055), transparent 30%),
    var(--px-detail-glass);
}

.px-prompt-detail-v2 .px-prompt-head,
.px-prompt-detail-v2 .px-prompt-copy-card,
.px-prompt-detail-v2 .px-related-inline,
.px-prompt-detail-v2 .px-side-tools,
.px-prompt-detail-v2 .px-visual-thumbs {
  border-color: var(--px-detail-stroke-soft);
  background: linear-gradient(145deg, var(--px-detail-glass-strong), color-mix(in srgb, var(--px-detail-glass) 72%, transparent));
  box-shadow: var(--px-detail-inner-highlight), 0 12px 30px rgba(2, 5, 20, .075);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-head,
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-copy-card,
html[data-theme="light"] .px-prompt-detail-v2 .px-related-inline,
html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools,
html[data-theme="light"] .px-prompt-detail-v2 .px-visual-thumbs {
  box-shadow: var(--px-detail-inner-highlight), 0 12px 30px rgba(57, 69, 121, .065);
}

.px-prompt-detail-v2 .px-main-visual {
  border-color: var(--px-detail-stroke-soft);
  background:
    radial-gradient(circle at 50% 45%, rgb(37 99 235 / .09), transparent 46%),
    color-mix(in srgb, var(--px-detail-glass-strong) 66%, transparent);
  box-shadow: var(--px-detail-inner-highlight), 0 16px 38px rgba(0, 0, 0, .105);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-main-visual {
  background:
    radial-gradient(circle at 50% 42%, rgba(90, 128, 255, .07), transparent 48%),
    rgba(255, 255, 255, .60);
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px rgba(48, 59, 111, .07);
}

/* Transparent, calm icon controls with a precise active/hover glow. */
.px-prompt-detail-v2 .px-toolbar-button,
.px-prompt-detail-v2 .px-gallery-arrow,
.px-prompt-detail-v2 .px-explain-button {
  border-color: var(--px-detail-stroke);
  color: color-mix(in srgb, var(--px-blue) 45%, var(--px-detail-ink));
  background: linear-gradient(145deg, var(--px-detail-icon-bg), color-mix(in srgb, var(--px-detail-glass) 70%, transparent));
  box-shadow: var(--px-detail-inner-highlight), 0 8px 20px rgba(0, 0, 0, .075);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-toolbar-button,
html[data-theme="light"] .px-prompt-detail-v2 .px-gallery-arrow,
html[data-theme="light"] .px-prompt-detail-v2 .px-explain-button {
  color: #38436e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 8px 20px rgba(55, 68, 122, .075);
}
.px-prompt-detail-v2 .px-toolbar-button:hover,
.px-prompt-detail-v2 .px-gallery-arrow:hover,
.px-prompt-detail-v2 .px-explain-button:hover {
  color: #fff;
  border-color: rgba(123, 102, 255, .66);
  background: var(--px-detail-icon-hover);
  box-shadow: 0 12px 28px rgba(81, 82, 221, .22), inset 0 1px 0 rgba(255, 255, 255, .19);
}
.px-prompt-detail-v2 .px-toolbar-button:active,
.px-prompt-detail-v2 .px-gallery-arrow:active,
.px-prompt-detail-v2 .px-explain-button:active {
  filter: brightness(.96);
}
.px-prompt-detail-v2 [data-favorite-id].is-saved {
  color: #fff;
  border-color: rgba(255, 81, 188, .52);
  background: linear-gradient(135deg, rgb(192 38 211 / .78), rgb(124 58 237 / .72));
  box-shadow: 0 11px 25px rgba(220, 51, 188, .21), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.px-prompt-detail-v2 .px-prompt-tabs {
  border-color: var(--px-detail-stroke);
  background: color-mix(in srgb, var(--px-detail-glass-soft) 85%, transparent);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-tabs {
  background: rgba(245, 247, 255, .68);
}
.px-prompt-detail-v2 .px-prompt-tabs button:not(.is-active) {
  color: var(--px-detail-muted);
}
.px-prompt-detail-v2 .px-prompt-text {
  border-color: var(--px-detail-stroke-soft);
  color: var(--px-detail-ink);
  background: color-mix(in srgb, var(--px-detail-glass-soft) 70%, transparent);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-text {
  background: rgba(248, 250, 255, .74);
}

.px-prompt-detail-v2 .px-visual-thumb {
  border-color: var(--px-detail-stroke-soft);
  background: color-mix(in srgb, var(--px-detail-glass-strong) 72%, transparent);
  box-shadow: var(--px-detail-inner-highlight), 0 8px 20px rgba(0, 0, 0, .075);
}
html[data-theme="light"] .px-prompt-detail-v2 .px-visual-thumb {
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(50, 62, 115, .065);
}
.px-prompt-detail-v2 .px-visual-thumb.is-active {
  border-color: var(--px-detail-stroke-active);
  box-shadow: 0 0 0 2px rgb(124 58 237 / .15), 0 12px 25px rgba(80, 90, 220, .15);
}

/* Slim, branded scrollbars keep both modes polished. */
.px-prompt-detail-v2 .px-prompt-column,
.px-prompt-detail-v2 .px-prompt-text,
.px-prompt-detail-v2 .px-visual-thumbs {
  scrollbar-width: thin;
  scrollbar-color: rgba(112, 92, 238, .58) transparent;
}
.px-prompt-detail-v2 .px-prompt-column::-webkit-scrollbar,
.px-prompt-detail-v2 .px-prompt-text::-webkit-scrollbar,
.px-prompt-detail-v2 .px-visual-thumbs::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.px-prompt-detail-v2 .px-prompt-column::-webkit-scrollbar-thumb,
.px-prompt-detail-v2 .px-prompt-text::-webkit-scrollbar-thumb,
.px-prompt-detail-v2 .px-visual-thumbs::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(124 58 237 / .74), rgb(37 99 235 / .62)) padding-box;
}

@media (min-width: 981px) {
  /* The visual workspace and the information workspace now have the exact
     same outer height. Only the information workspace scrolls internally. */
  .px-prompt-detail-v2 .px-detail-v2-grid {
    align-items: stretch;
  }
  .px-prompt-detail-v2 .px-visual-column,
  .px-prompt-detail-v2 .px-prompt-column {
    height: var(--px-detail-stage-height);
    min-height: 0;
  }
  .px-prompt-detail-v2 .px-prompt-column {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .px-prompt-detail-v2 .px-prompt-stage {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: calc(100% - 2px);
  }
  .px-prompt-detail-v2 .px-related-inline {
    flex: 0 0 auto;
    margin-top: 0;
  }
  .px-prompt-detail-v2 .px-visual-column {
    padding: 8px;
  }
}

@media (max-width: 980px) {
  /* On touch layouts, page scrolling stays native and the two columns return
     to content height; the established swipe gallery remains unchanged. */
  .px-prompt-detail-v2 .px-prompt-column {
    height: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ===== Consolidated from rc1.css ===== */
/*
 * PromXAI Theme 1.0 RC1
 * Stability, accessibility and responsive-media refinements.
 * The approved visual language remains unchanged.
 */

/* Clear keyboard focus without adding a permanent visual border. */
.promxai-ui :where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--px-blue) 62%, var(--px-purple));
  outline-offset: 3px;
}

/* SVG lock replaces the platform-dependent emoji used by older builds. */
.px-card-lock {
  display: inline-grid;
  place-items: center;
}
.px-card-lock .px-icon {
  width: 18px;
  height: 18px;
}

/* Browser layout work is deferred for cards well below the viewport. */
@supports (content-visibility: auto) {
  .px-prompt-card,
  .px-library-card {
    content-visibility: auto;
    contain-intrinsic-size: 320px 400px;
  }
}

/* Touch layouts use one horizontal related-content rail. This prevents a
   third card from dropping alone into a second row. */
@media (max-width: 980px) {
  .px-prompt-detail-v2 .px-related-strip {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    width: 100%;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .px-prompt-detail-v2 .px-related-strip::-webkit-scrollbar {
    display: none;
  }
  .px-prompt-detail-v2 .px-related-mini {
    flex: 0 0 clamp(132px, 42vw, 172px);
    width: auto;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Stable dimensions and less layout shifting while responsive sources load. */
.px-prompt-card__link > img,
.px-related-mini > img,
.px-visual-thumb > img {
  height: 100%;
}

/* Loading state is announced by markup/JS and remains visually calm. */
[data-promxai-browse][aria-busy="true"] [data-prompt-grid] {
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  .promxai-ui *,
  .promxai-ui *::before,
  .promxai-ui *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ===== Consolidated from rc2.css ===== */
/*
 * PromXAI Theme 1.0 RC2
 * Full mobile artwork, adaptive gallery ratio and refined glass controls.
 */

/* Shared detail-control tokens. The palette stays within PromXAI blue,
   purple and pink, with enough contrast in both appearance modes. */
.px-prompt-detail-v2 {
  --px-rc2-control-bg: rgba(10, 16, 36, .54);
  --px-rc2-control-bg-strong: rgba(13, 20, 44, .72);
  --px-rc2-control-border: rgba(132, 113, 255, .30);
  --px-rc2-control-border-soft: rgba(90, 132, 255, .20);
  --px-rc2-control-ink: #e8edff;
  --px-rc2-control-muted: #aeb9d5;
  --px-rc2-control-shadow: 0 12px 30px rgba(1, 4, 18, .18), inset 0 1px 0 rgba(255, 255, 255, .10);
  --px-rc2-control-glow: 0 14px 32px rgba(89, 76, 230, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html[data-theme="light"] .px-prompt-detail-v2 {
  --px-rc2-control-bg: rgba(255, 255, 255, .62);
  --px-rc2-control-bg-strong: rgba(255, 255, 255, .78);
  --px-rc2-control-border: rgba(105, 82, 218, .20);
  --px-rc2-control-border-soft: rgba(74, 124, 235, .15);
  --px-rc2-control-ink: #333b63;
  --px-rc2-control-muted: #6c7593;
  --px-rc2-control-shadow: 0 11px 26px rgba(45, 57, 111, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
  --px-rc2-control-glow: 0 14px 30px rgba(91, 80, 214, .16), inset 0 1px 0 rgba(255, 255, 255, .98);
}

.px-prompt-detail-v2 .px-side-tools {
  border-color: var(--px-rc2-control-border-soft);
  background:
    radial-gradient(circle at 18% 0%, rgb(192 38 211 / .08), transparent 42%),
    radial-gradient(circle at 100% 100%, rgb(37 99 235 / .12), transparent 46%),
    var(--px-rc2-control-bg);
  box-shadow: var(--px-rc2-control-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(138%);
  backdrop-filter: blur(22px) saturate(138%);
}

.px-prompt-detail-v2 .px-side-tools .px-toolbar-button,
.px-prompt-detail-v2 .px-gallery-arrow,
.px-prompt-detail-v2 .px-explain-button {
  color: var(--px-rc2-control-ink);
  border-color: var(--px-rc2-control-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .09), transparent 58%),
    var(--px-rc2-control-bg);
  box-shadow: var(--px-rc2-control-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-toolbar-button,
html[data-theme="light"] .px-prompt-detail-v2 .px-gallery-arrow,
html[data-theme="light"] .px-prompt-detail-v2 .px-explain-button {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(246, 247, 255, .48)),
    var(--px-rc2-control-bg);
}

.px-prompt-detail-v2 .px-side-tools .px-toolbar-button:hover,
.px-prompt-detail-v2 .px-side-tools .px-toolbar-button:focus-visible,
.px-prompt-detail-v2 .px-gallery-arrow:hover,
.px-prompt-detail-v2 .px-gallery-arrow:focus-visible,
.px-prompt-detail-v2 .px-explain-button:hover,
.px-prompt-detail-v2 .px-explain-button:focus-visible {
  color: #fff;
  border-color: rgba(136, 112, 255, .70);
  background: linear-gradient(135deg, rgb(124 58 237 / .88), rgb(37 99 235 / .82) 62%, rgb(192 38 211 / .70));
  box-shadow: var(--px-rc2-control-glow);
}

.px-prompt-detail-v2 [data-favorite-id].is-saved {
  color: #fff;
  border-color: rgba(255, 100, 196, .58);
  background: linear-gradient(135deg, rgb(192 38 211 / .90), rgb(124 58 237 / .86) 62%, rgb(37 99 235 / .72));
  box-shadow: 0 13px 29px rgba(218, 52, 184, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Mobile prompt gallery: the stage follows the active media's real aspect
   ratio. No viewport-height cap is used, so a tall 9:16 image is shown in
   full and the page scrolls naturally instead of cropping its lower edge. */
@media (max-width: 760px) {
  .px-prompt-detail-v2 {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .px-prompt-detail-v2 .px-visual-column {
    overflow: visible;
  }

  

  

  

  

  

  

  

  /* Dots have their own glass row and never cover artwork content. */
  

  

  

  

  .px-prompt-detail-v2 .px-side-tools {
    gap: 7px;
    padding: 7px;
    border-radius: 16px;
  }

  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button {
    min-height: 44px;
    border-radius: 13px;
  }
}

/* The fixed phone navigation uses the same glass system while maintaining
   strong readability above both dark and light content. */





/* ===== Consolidated from rc3.css ===== */
/* PromXAI Theme 1.0 RC3 — accounts and synchronized favorites */

.px-glass-panel {
  border: 1px solid var(--px-border);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 54%),
    var(--px-surface);
  box-shadow: var(--px-glass-shadow), inset 0 1px 0 rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

html[data-theme="light"] .px-glass-panel {
  border-color: rgba(111, 88, 207, .16);
  background:
    radial-gradient(circle at 0 0, rgb(124 58 237 / .065), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,249,255,.79));
  box-shadow: 0 18px 48px rgba(48,58,110,.09), inset 0 1px 0 #fff;
}

.px-system-page {
  min-height: 72vh;
  padding: 38px 0 110px;
}

.px-system-page__container {
  width: min(1180px, calc(100% - 40px));
}

.px-system-hero {
  max-width: 760px;
  margin-bottom: 24px;
}

.px-system-hero--inline {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.px-system-hero__eyebrow,
.px-account-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: #a98bff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-theme="light"] .px-system-hero__eyebrow,
html[data-theme="light"] .px-account-kicker { color: #6d38d7; }

.px-system-hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.px-system-hero p {
  margin: 10px 0 0;
  color: var(--px-muted);
  font-size: 15px;
}

.px-form-notice {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid var(--px-border);
  border-radius: 14px;
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
}

.px-form-notice.is-success {
  border-color: rgba(54, 211, 153, .35);
  color: #80e7bf;
  background: rgba(13, 79, 57, .22);
}

.px-form-notice.is-error {
  border-color: rgba(255, 93, 125, .35);
  color: #ff9caf;
  background: rgba(92, 20, 40, .22);
}

html[data-theme="light"] .px-form-notice.is-success { color: #126345; background: rgba(224, 250, 239, .9); }
html[data-theme="light"] .px-form-notice.is-error { color: #8b2038; background: rgba(255, 237, 242, .95); }

.px-account-dashboard { display: grid; gap: 18px; }

.px-account-profile {
  min-height: 150px;
  padding: 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.px-account-avatar {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 27px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--px-purple), var(--px-blue) 58%, var(--px-pink));
  box-shadow: 0 14px 35px rgb(124 58 237 / .28);
  font-size: 31px;
  font-weight: 900;
}

.px-account-profile h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); }
.px-account-profile p { margin: 3px 0 0; color: var(--px-muted); }

.px-account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.px-account-stat {
  min-height: 142px;
  padding: 22px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 15px;
  transition: transform .2s ease, border-color .2s ease;
}

.px-account-stat[href]:hover { transform: translateY(-2px); border-color: var(--px-border-strong); }
.px-account-stat__icon { grid-row: 1 / 3; width: 48px; height: 48px; border: 1px solid var(--px-border); border-radius: 16px; display: grid; place-items: center; color: #a78bfa; background: rgb(124 58 237 / .11); }
.px-account-stat strong { font-size: 24px; line-height: 1.1; }
.px-account-stat > span:last-child { color: var(--px-muted); font-size: 13px; }

.px-plan-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.px-plan-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(192 38 211 / .18), rgb(124 58 237 / .11) 45%, transparent 70%);
  pointer-events: none;
}

.px-plan-card__badge {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, var(--px-purple), var(--px-pink));
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.px-plan-card h2 { margin: 12px 0 7px; font-size: clamp(22px, 3vw, 34px); }
.px-plan-card p { max-width: 700px; margin: 0; color: var(--px-muted); }
.px-plan-card__soon { position: relative; z-index: 1; min-width: 92px; padding: 12px 16px; border: 1px solid var(--px-border-strong); border-radius: 15px; color: #c8b8ff; background: rgb(124 58 237 / .10); text-align: center; font-weight: 900; }
html[data-theme="light"] .px-plan-card__soon { color: #6d38d7; background: rgb(124 58 237 / .07); }

.px-account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.px-secondary-button {
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--px-border);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--px-text);
  background: var(--px-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-weight: 800;
  transition: .2s ease;
}
.px-secondary-button:hover { transform: translateY(-1px); border-color: var(--px-border-strong); background: var(--px-surface-strong); }
.px-secondary-button.is-danger { color: #ff9caf; border-color: rgba(255,93,125,.24); }
html[data-theme="light"] .px-secondary-button.is-danger { color: #a82e49; }

.px-auth-shell {
  width: min(640px, 100%);
  margin-inline: auto;
}

.px-auth-tabs {
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--px-border);
  border-radius: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px;
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.px-auth-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--px-muted);
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}

.px-auth-tabs button.is-active {
  color: #fff;
  background: linear-gradient(105deg, var(--px-purple), var(--px-blue), var(--px-pink));
  box-shadow: 0 9px 22px rgb(124 58 237 / .22);
}

.px-auth-panel {
  padding: 28px;
  border-radius: 24px;
}

.px-auth-panel h2 { margin: 0 0 20px; font-size: 27px; }
.px-auth-form { display: grid; gap: 15px; }
.px-auth-form > label { display: grid; gap: 7px; color: var(--px-muted); font-size: 13px; font-weight: 800; }
.px-auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 49px;
  padding: 0 14px;
  border: 1px solid var(--px-border);
  border-radius: 14px;
  color: var(--px-text);
  background: var(--px-surface-soft);
  outline: 0;
  transition: .2s ease;
}
.px-auth-form input:not([type="checkbox"]):focus { border-color: var(--px-border-strong); background: var(--px-surface-strong); box-shadow: 0 0 0 3px rgb(124 58 237 / .11); }
.px-auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--px-muted); font-size: 12px; }
.px-auth-form__row a { color: #ad91ff; font-weight: 800; }
html[data-theme="light"] .px-auth-form__row a { color: #6d38d7; }
.px-checkbox { display: inline-flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 7px !important; cursor: pointer; }
.px-checkbox input { accent-color: var(--px-purple); }
.px-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.px-favorites-total {
  min-width: 100px;
  padding: 12px 16px;
  border: 1px solid var(--px-border);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--px-muted);
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
  font-size: 11px;
}
.px-favorites-total strong { color: var(--px-text); font-size: 22px; line-height: 1; }

.px-favorites-toolbar {
  width: max-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 5px;
  border-radius: 16px;
  display: inline-flex;
  gap: 4px;
}
.px-favorites-toolbar button { min-width: 92px; height: 40px; padding-inline: 15px; border: 0; border-radius: 12px; color: var(--px-muted); background: transparent; cursor: pointer; font-weight: 800; }
.px-favorites-toolbar button.is-active { color: #fff; background: linear-gradient(105deg, var(--px-purple), var(--px-blue)); box-shadow: 0 8px 20px rgb(124 58 237 / .22); }

.px-favorites-grid { min-height: 160px; }
.px-favorites-empty {
  min-height: 330px;
  padding: 35px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.px-favorites-empty__icon { width: 70px; height: 70px; margin-bottom: 12px; border: 1px solid var(--px-border); border-radius: 23px; display: grid; place-items: center; color: #d946a8; background: rgb(192 38 211 / .09); box-shadow: 0 12px 30px rgb(192 38 211 / .10); }
.px-favorites-empty__icon .px-icon { width: 30px; height: 30px; }
.px-favorites-empty h2 { margin: 0; }
.px-favorites-empty p { max-width: 430px; margin: 7px 0 20px; color: var(--px-muted); }

.px-favorite:disabled { opacity: .65; cursor: wait; }
.px-favorites-counter.is-active,
.px-account-button.is-active { border-color: var(--px-border-strong); color: #a78bfa; background: rgb(124 58 237 / .10); }

@media (max-width: 760px) {
  .px-system-page { padding: 24px 0 105px; }
  .px-system-page__container { width: min(100% - 24px, 1180px); }
  .px-system-hero--inline { align-items: center; }
  .px-system-hero h1 { font-size: 36px; }
  .px-system-hero p { font-size: 13px; }
  .px-account-profile { padding: 18px; border-radius: 20px; }
  .px-account-avatar { width: 62px; height: 62px; border-radius: 20px; font-size: 24px; }
  .px-account-stats { gap: 10px; }
  .px-account-stat { min-height: 118px; padding: 15px; border-radius: 18px; grid-template-columns: 1fr; text-align: center; }
  .px-account-stat__icon { grid-row: auto; width: 40px; height: 40px; margin-inline: auto; border-radius: 13px; }
  .px-account-stat strong { font-size: 20px; }
  .px-plan-card { padding: 20px; border-radius: 20px; display: grid; }
  .px-plan-card__soon { width: max-content; }
  .px-account-actions { display: grid; grid-template-columns: 1fr; }
  .px-auth-panel { padding: 20px; border-radius: 20px; }
  .px-auth-form__row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .px-favorites-toolbar { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .px-favorites-toolbar button { min-width: 0; padding-inline: 8px; }
  .px-favorites-empty { min-height: 280px; padding: 25px 18px; }
}

@media (max-width: 420px) {
  .px-system-hero--inline { align-items: flex-start; }
  .px-favorites-total { min-width: 78px; padding: 10px; }
  .px-account-profile { align-items: flex-start; }
  .px-account-profile h2 { font-size: 23px; }
}


/* ===== Consolidated from rc4.css ===== */
/* PromXAI Theme 1.0 RC4 — persistent favorites, stable accounts, icon system */

.px-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.px-header-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--px-border) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--px-surface) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(5,8,18,.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="light"] .px-header-action-group {
  background: rgba(255,255,255,.62);
  border-color: rgba(117,92,220,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(72,54,140,.07);
}

.px-header-action-group .px-icon-button {
  min-width: 40px;
  height: 40px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.px-header-action-group .px-icon-button:hover,
.px-header-action-group .px-icon-button.is-active {
  border-color: color-mix(in srgb, var(--px-border-strong) 70%, transparent);
  background: linear-gradient(145deg, rgb(124 58 237 / .13), rgb(37 99 235 / .09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 7px 18px rgba(87,61,201,.10);
}

html[data-theme="light"] .px-header-action-group .px-icon-button:hover,
html[data-theme="light"] .px-header-action-group .px-icon-button.is-active {
  background: linear-gradient(145deg, rgb(124 58 237 / .10), rgb(37 99 235 / .07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px rgba(86,62,180,.08);
}

.px-favorites-counter [data-favorites-count]{
  position: absolute;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border: 2px solid color-mix(in srgb, var(--px-bg) 88%, transparent);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--px-pink), var(--px-purple));
  box-shadow: 0 5px 12px rgb(192 38 211 / .25);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.px-favorites-counter [data-favorites-count] {
  top: -5px;
  inset-inline-end: -5px;
}

[data-favorites-count][hidden] { display: none !important; }















.px-favorite {
  border-color: rgba(255,255,255,.24);
  background: rgba(11,15,28,.43);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.10);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.px-favorite:hover {
  transform: translateY(-1px);
  border-color: rgba(183,151,255,.48);
  background: rgba(44,31,84,.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 22px rgba(93,61,198,.18);
}

html[data-theme="light"] .px-favorite {
  color: #37415c;
  border-color: rgba(103,76,195,.18);
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px rgba(71,54,127,.08);
}

html[data-theme="light"] .px-favorite:hover {
  color: #6b45df;
  border-color: rgba(110,72,219,.34);
  background: rgba(255,255,255,.86);
}

.px-favorite.is-saved {
  color: #d946a8;
  border-color: rgba(255,91,159,.40);
  background: linear-gradient(145deg, rgb(192 38 211 / .16), rgb(124 58 237 / .18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 9px 23px rgb(192 38 211 / .16);
}

.px-favorite.is-syncing::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255,255,255,.24);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: px-rc4-spin .72s linear infinite;
}

.px-favorite.is-syncing .px-icon { opacity: .30; }

@keyframes px-rc4-spin { to { transform: rotate(360deg); } }

.px-auth-tabs {
  overflow: hidden;
}

.px-auth-tabs button {
  position: relative;
  min-width: 0;
}

.px-auth-tabs button:focus-visible {
  outline: 3px solid rgb(124 58 237 / .22);
  outline-offset: 2px;
}

.px-account-button.is-active,
.px-favorites-counter.is-active {
  color: #bca6ff;
}

html[data-theme="light"] .px-account-button.is-active,
html[data-theme="light"] .px-favorites-counter.is-active {
  color: #6d38d7;
}

@media (max-width: 760px) {
  .px-header-actions { gap: 4px; }
  .px-header-action-group {
    gap: 3px;
    padding: 2px;
    border-radius: 13px;
  }
  .px-header-action-group--preferences .px-lang-toggle,
  .px-header-action-group--personal .px-favorites-counter { display: none; }
  .px-header-action-group .px-icon-button { min-width: 37px; height: 37px; }
  .px-header-action-group--personal,
  .px-header-action-group--preferences {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  
}

@media (prefers-reduced-motion: reduce) {
  .px-favorite{ transition: none; }
  .px-favorite.is-syncing::after { animation-duration: 1.5s; }
}


/* ===== Consolidated from rc5.css ===== */
/**
 * PromXAI RC5 — authoritative favorites persistence.
 * Visual language remains unchanged; this file only communicates sync state.
 */
[data-favorite-id].is-syncing {
  position: relative;
  isolation: isolate;
}

[data-favorite-id].is-syncing::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: inherit;
  opacity: .65;
  pointer-events: none;
  animation: px-favorite-sync-spin .8s linear infinite;
}

@keyframes px-favorite-sync-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-favorite-id].is-syncing::after { animation: none; opacity: .35; }
}


/* ===== Consolidated from rc7.css ===== */
/* PromXAI Theme 1.0 RC7 — server-backed PRO memberships and plan UI */

.px-account-stat.is-pro {
  border-color: rgba(139, 110, 255, .34);
  background:
    radial-gradient(circle at 10% 0, rgb(124 58 237 / .18), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(12,18,34,.68));
}
.px-account-stat.is-pro .px-account-stat__icon {
  color: #f7c7ff;
  border-color: rgba(255,98,221,.27);
  background: linear-gradient(145deg, rgb(124 58 237 / .24), rgb(192 38 211 / .13));
  box-shadow: 0 10px 26px rgb(124 58 237 / .18);
}
html[data-theme="light"] .px-account-stat.is-pro {
  border-color: rgba(111, 73, 218, .23);
  background:
    radial-gradient(circle at 8% 0, rgb(124 58 237 / .11), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,245,255,.86));
}

.px-plan-card.is-active-pro {
  border-color: rgba(88, 218, 176, .28);
  background:
    radial-gradient(circle at 100% 0, rgba(49, 208, 159, .12), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(12,18,34,.7));
}
html[data-theme="light"] .px-plan-card.is-active-pro {
  border-color: rgba(34, 153, 118, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(49,208,159,.09), transparent 43%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,252,249,.88));
}
.px-plan-card__active {
  position: relative;
  z-index: 2;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(75, 220, 172, .26);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8ff1cd;
  background: rgba(26, 132, 98, .12);
  font-weight: 900;
}
.px-plan-card__active .px-icon { width: 18px; height: 18px; }
html[data-theme="light"] .px-plan-card__active { color: #157653; background: rgba(45,190,143,.09); }

.px-pro-page {
  min-height: 78vh;
  padding: 52px 0 120px;
  position: relative;
  overflow: hidden;
}
.px-pro-page::before,
.px-pro-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(38px);
  pointer-events: none;
  opacity: .4;
}
.px-pro-page::before { inset: 80px auto auto -230px; background: rgb(124 58 237 / .16); }
.px-pro-page::after { inset: auto -220px 10% auto; background: rgb(192 38 211 / .11); }
html[data-theme="light"] .px-pro-page::before { background: rgb(124 58 237 / .10); opacity: .72; }
html[data-theme="light"] .px-pro-page::after { background: rgba(26,117,255,.08); opacity: .68; }

.px-pro-container { width: min(1120px, calc(100% - 40px)); }
.px-pro-hero {
  width: min(800px, 100%);
  margin: 0 auto 30px;
  text-align: center;
}
.px-pro-hero__badge {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(216,179,255,.24);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f6d8ff;
  background: linear-gradient(100deg, rgb(124 58 237 / .2), rgb(192 38 211 / .14));
  box-shadow: 0 12px 32px rgb(124 58 237 / .14), inset 0 1px rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
}
.px-pro-hero__badge .px-icon { width: 17px; height: 17px; }
html[data-theme="light"] .px-pro-hero__badge {
  color: #6437c8;
  border-color: rgba(106,66,207,.18);
  background: linear-gradient(100deg, rgb(124 58 237 / .09), rgb(192 38 211 / .06));
}
.px-pro-hero h1 {
  margin: 18px 0 10px;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.px-pro-hero p {
  width: min(650px, 100%);
  margin: 0 auto;
  color: var(--px-muted);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.85;
}

.px-pro-notice,
.px-current-pro,
.px-pro-security {
  border-radius: 22px;
}
.px-pro-notice {
  width: min(820px, 100%);
  margin: 0 auto 22px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-color: rgba(255,174,76,.24);
  background:
    linear-gradient(135deg, rgba(255,165,52,.08), rgb(124 58 237 / .07)),
    var(--px-surface);
}
.px-pro-notice__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,180,81,.25);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #ffc47c;
  background: rgba(255,165,52,.09);
}
.px-pro-notice strong { display: block; }
.px-pro-notice p { margin: 3px 0 0; color: var(--px-muted); font-size: 13px; }
html[data-theme="light"] .px-pro-notice { border-color: rgba(191,121,20,.17); }
html[data-theme="light"] .px-pro-notice__icon { color: #9a5f0f; }

.px-current-pro {
  margin-bottom: 22px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border-color: rgba(58,215,164,.26);
  background:
    radial-gradient(circle at 100% 0, rgba(54,211,153,.12), transparent 38%),
    var(--px-surface);
}
.px-current-pro__icon {
  width: 55px;
  height: 55px;
  border: 1px solid rgba(80,226,180,.25);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #8af0ca;
  background: rgba(37,174,129,.1);
  box-shadow: 0 12px 30px rgba(28,149,110,.12);
}
.px-current-pro__icon .px-icon { width: 25px; height: 25px; }
.px-current-pro__status { color: #7fe7c0; font-size: 12px; font-weight: 900; }
.px-current-pro h2 { margin: 3px 0; font-size: 23px; }
.px-current-pro p { margin: 0; color: var(--px-muted); font-size: 13px; }
html[data-theme="light"] .px-current-pro__status,
html[data-theme="light"] .px-current-pro__icon { color: #157653; }

.px-pro-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.px-pro-plan {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  padding: 29px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.px-pro-plan::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -110px -140px auto;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(124 58 237 / .16), rgba(26,117,255,.07) 46%, transparent 70%);
}
.px-pro-plan:hover { transform: translateY(-3px); border-color: var(--px-border-strong); }
.px-pro-plan.is-featured {
  border-color: rgba(173, 105, 255, .4);
  background:
    radial-gradient(circle at 90% 0, rgb(192 38 211 / .12), transparent 42%),
    radial-gradient(circle at 0 100%, rgba(26,117,255,.1), transparent 42%),
    linear-gradient(145deg, rgb(124 58 237 / .105), rgba(10,15,29,.8));
  box-shadow: 0 26px 70px rgba(70,39,151,.23), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="light"] .px-pro-plan.is-featured {
  border-color: rgba(111,70,214,.27);
  background:
    radial-gradient(circle at 90% 0, rgb(192 38 211 / .07), transparent 42%),
    radial-gradient(circle at 0 100%, rgba(26,117,255,.055), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(246,244,255,.91));
  box-shadow: 0 25px 65px rgba(65,54,126,.13), inset 0 1px 0 #fff;
}
.px-pro-plan__recommended {
  position: absolute;
  inset: 17px auto auto 18px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, var(--px-purple), var(--px-pink));
  box-shadow: 0 9px 24px rgb(124 58 237 / .25);
  font-size: 10px;
  font-weight: 950;
}
[dir="ltr"] .px-pro-plan__recommended { inset: 17px 18px auto auto; }
.px-pro-plan__head { display: flex; align-items: center; gap: 13px; padding-inline-end: 95px; }
.px-pro-plan__icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--px-border);
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #c9b6ff;
  background: rgb(124 58 237 / .11);
}
.px-pro-plan__icon .px-icon { width: 21px; height: 21px; }
.px-pro-plan h2 { margin: 0; font-size: 24px; }
.px-pro-price {
  min-height: 100px;
  margin: 28px 0 22px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.px-pro-price strong { font-size: clamp(43px, 6vw, 66px); line-height: 1; letter-spacing: -.055em; }
.px-pro-price > span { color: #c6afff; font-size: 14px; font-weight: 900; }
.px-pro-price small { flex-basis: 100%; color: var(--px-muted); font-size: 12px; }
.px-pro-price .px-pro-price__soon { font-size: 37px; letter-spacing: -.03em; }
html[data-theme="light"] .px-pro-price > span { color: #6d38d7; }
.px-pro-features {
  margin: 0 0 27px;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}
.px-pro-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--px-muted);
  font-size: 14px;
}
.px-pro-features .px-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  color: #83edc4;
  background: rgba(48,190,143,.11);
}
html[data-theme="light"] .px-pro-features .px-icon { color: #14724f; background: rgba(48,190,143,.09); }
.px-pro-plan__cta { width: 100%; margin-top: auto; }
.px-pro-plan__cta:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.px-pro-plan__active {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  border: 1px solid rgba(61,220,169,.25);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8ff1cd;
  background: rgba(43,174,132,.1);
  font-weight: 900;
}
.px-pro-plan__active .px-icon { width: 18px; height: 18px; }
html[data-theme="light"] .px-pro-plan__active { color: #157653; }

.px-pro-security {
  margin-top: 20px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}
.px-pro-security > span { color: #a78bfa; }
.px-pro-security .px-icon { width: 19px; height: 19px; }
.px-pro-security p { margin: 0; color: var(--px-muted); font-size: 13px; }
html[data-theme="light"] .px-pro-security > span { color: #6d38d7; }

@media (max-width: 760px) {
  .px-pro-page { padding: 28px 0 112px; }
  .px-pro-container { width: min(100% - 24px, 1120px); }
  .px-pro-hero { margin-bottom: 22px; }
  .px-pro-hero h1 { margin-top: 14px; font-size: 39px; }
  .px-pro-hero p { font-size: 13px; line-height: 1.72; }
  .px-pro-plans { grid-template-columns: 1fr; gap: 14px; }
  .px-pro-plan { min-height: 510px; padding: 22px; border-radius: 22px; }
  .px-pro-plan__recommended { inset: 14px auto auto 14px; }
  [dir="ltr"] .px-pro-plan__recommended { inset: 14px 14px auto auto; }
  .px-pro-plan__head { padding-inline-end: 87px; }
  .px-pro-price { margin: 22px 0 19px; min-height: 82px; }
  .px-pro-price strong { font-size: 48px; }
  .px-current-pro { grid-template-columns: auto 1fr; padding: 17px; border-radius: 19px; }
  .px-current-pro > .px-secondary-button { grid-column: 1 / -1; width: 100%; }
  .px-pro-notice { padding: 14px; border-radius: 18px; }
  .px-pro-security { align-items: flex-start; text-align: start; border-radius: 18px; }
  .px-plan-card__active { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .px-pro-plan { transition: none; }
}


/* ===== Consolidated from rc10.css ===== */
/* PromXAI Theme RC10 - book requests and image asset protection */
.px-book-fields{margin:0 0 15px;padding:15px;border:1px solid var(--px-request-line);border-radius:17px;background:linear-gradient(135deg,rgba(39,119,255,.055),rgb(124 58 237 / .06),rgb(192 38 211 / .035))}.px-book-fields[hidden]{display:none!important}.px-book-fields p{margin:0;color:var(--px-request-text-soft);font-size:11px;line-height:1.75}.px-main-visual img[data-no-download],.px-mobile-gallery__slide img[data-no-download],.px-prompt-card img[data-no-download],.px-related-mini img[data-no-download]{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}.px-choice-card:has(input[value="book_design"]:checked) .px-choice-card__icon{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed,#c026d3)}
@media(max-width:720px){.px-book-fields{padding:12px}}

@media(max-width:720px){.px-choice-card:last-child{grid-column:auto;min-height:122px;display:grid;grid-template-columns:none;text-align:center}}


/* ===== Consolidated from v1-1.css ===== */
/* PromXAI 1.1.0 — unified visual system, request workflow polish and full prompt-image UI protection */
:root{
  --px-v110-blue:#2563eb;
  --px-v110-purple:#7c3aed;
  --px-v110-pink:#c026d3;
  --px-v110-cyan:#35d9ff;
  --px-v110-radius:22px;
  --px-v110-font:"Noto Sans Arabic","Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --px-v110-glow:0 18px 55px rgba(68,79,255,.14),0 0 0 1px rgb(124 58 237 / .05) inset;
}
html[data-theme="dark"]{
  --px-v110-bg:#080d19;
  --px-v110-bg-soft:#0d1426;
  --px-v110-glass:rgba(13,20,39,.64);
  --px-v110-glass-strong:rgba(18,27,50,.82);
  --px-v110-line:rgba(135,111,255,.26);
  --px-v110-line-soft:rgba(119,143,255,.13);
  --px-v110-text:#f6f7ff;
  --px-v110-muted:#aeb7d1;
  --px-v110-field:rgba(8,14,29,.56);
  --px-v110-shadow:0 24px 72px rgba(0,0,0,.34),0 0 42px rgba(92,62,235,.08);
}
html[data-theme="light"]{
  --px-v110-bg:#f4f6ff;
  --px-v110-bg-soft:#eef2ff;
  --px-v110-glass:rgba(255,255,255,.70);
  --px-v110-glass-strong:rgba(255,255,255,.88);
  --px-v110-line:rgba(109,79,224,.22);
  --px-v110-line-soft:rgba(73,110,199,.12);
  --px-v110-text:#151a32;
  --px-v110-muted:#68718b;
  --px-v110-field:rgba(255,255,255,.72);
  --px-v110-shadow:0 24px 68px rgba(48,65,121,.12),0 0 40px rgb(124 58 237 / .055);
}
body,.px-main,.px-system-page{font-family:var(--px-v110-font)}
.px-glass-panel, .px-header__inner, .px-header-search, .px-header-action-group, .px-prompt-stage, .px-visual-sticky, .px-visual-thumbs, .px-request-form-panel, .px-request-summary{
  border-color:var(--px-v110-line)!important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--px-v110-glass-strong) 72%,transparent),color-mix(in srgb,var(--px-v110-glass) 88%,transparent))!important;
  box-shadow:var(--px-v110-shadow)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
}
.px-icon-button,.px-toolbar-button,.px-back-button,.px-gallery-arrow,.px-detail-theme-toggle,.px-detail-lang-toggle{
  color:var(--px-v110-text)!important;
  border-color:var(--px-v110-line)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--px-v110-glass-strong) 82%,transparent),color-mix(in srgb,var(--px-v110-glass) 68%,transparent))!important;
  box-shadow:0 10px 30px rgba(47,124,255,.07),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.px-icon-button:hover,.px-toolbar-button:hover,.px-back-button:hover,.px-gallery-arrow:hover{
  color:#fff!important;
  border-color:rgba(122,98,255,.58)!important;
  background:linear-gradient(135deg,rgba(47,124,255,.78),rgb(124 58 237 / .82),rgba(255,58,215,.72))!important;
  box-shadow:0 14px 34px rgba(91,69,237,.24)!important;
}
html[data-theme="light"] .px-icon-button:hover,html[data-theme="light"] .px-toolbar-button:hover{color:#fff!important}
.px-header-search input,.px-field input,.px-field select,.px-field textarea{
  color:var(--px-v110-text)!important;
  border-color:var(--px-v110-line-soft)!important;
  background:var(--px-v110-field)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.px-field input:focus,.px-field select:focus,.px-field textarea:focus,.px-header-search input:focus{
  border-color:rgba(89,118,255,.62)!important;
  box-shadow:0 0 0 4px rgb(124 58 237 / .10),0 12px 30px rgba(47,124,255,.07)!important;
}

/* Complete easy-download protection for main and side prompt imagery. */
.px-main-visual img[data-no-download],.px-mobile-gallery__slide img[data-no-download],.px-prompt-card img[data-no-download],.px-related-mini img[data-no-download],.px-visual-thumb img[data-no-download]{
  -webkit-user-drag:none!important;
  -webkit-touch-callout:none!important;
  user-select:none!important;
}
.px-visual-thumb img[data-no-download]{pointer-events:none!important}
.px-visual-thumb,.px-visual-thumbs{-webkit-touch-callout:none!important;user-select:none!important}
.px-visual-thumb{
  border-color:var(--px-v110-line-soft)!important;
  background:color-mix(in srgb,var(--px-v110-glass-strong) 74%,transparent)!important;
  box-shadow:0 10px 28px rgba(20,31,73,.13)!important;
}
.px-visual-thumb.is-active{
  border-color:rgba(118,92,255,.76)!important;
  box-shadow:0 0 0 2px rgb(124 58 237 / .14),0 14px 34px rgba(68,74,224,.20)!important;
}

/* Request Design visual rules moved to request-design-modern.css in 1.4.15.87. */

/* ===== Consolidated from v1-1-2.css ===== */
/* PromXAI Theme 1.1.2 — design request reliability and compact review UI. */
.px-request-form [hidden]{display:none!important}
.px-request-form .px-inline-error{display:none;margin-top:7px;color:#ff7f98;font-size:11px;font-weight:750;line-height:1.55}
.px-request-form .has-error>.px-inline-error,
.px-request-form .has-error+.px-inline-error,
.px-request-form .px-inline-error:not(:empty){display:block}
.px-request-form .has-error input,
.px-request-form .has-error select,
.px-request-form .has-error textarea,
.px-request-form input.has-error,
.px-request-form select.has-error,
.px-request-form textarea.has-error{border-color:#e25576!important;box-shadow:0 0 0 3px rgba(255,100,135,.12)!important}
.px-request-form .px-upload-box.has-error{border-color:#e25576!important;box-shadow:0 0 0 3px rgba(255,100,135,.10)!important}
.px-upload-limit-note{display:block;margin-top:8px;color:var(--px-v110-muted,#8d96ad);font-size:10px;line-height:1.65}
.px-upload-limit-note strong{color:var(--px-v110-text,#eef1ff)}

.px-platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.px-platform-chip{position:relative;cursor:pointer}
.px-platform-chip input{position:absolute;opacity:0;pointer-events:none}
.px-platform-chip>span{min-height:44px;padding:9px 11px;display:grid;place-items:center;border:1px solid var(--px-v110-line-soft);border-radius:13px;color:var(--px-v110-muted);background:color-mix(in srgb,var(--px-v110-glass) 68%,transparent);font-size:10px;font-weight:780;text-align:center;transition:.2s ease}
.px-platform-chip:hover>span{border-color:rgba(113,91,255,.42);color:var(--px-v110-text)}
.px-platform-chip:has(input:checked)>span{color:#fff;border-color:transparent;background:linear-gradient(135deg,rgba(47,124,255,.88),rgb(124 58 237 / .92),rgba(255,58,215,.80));box-shadow:0 10px 26px rgb(124 58 237 / .20)}
.px-platform-grid.has-error{padding:8px;border:1px solid #e25576;border-radius:16px;box-shadow:0 0 0 3px rgba(255,100,135,.08)}

.px-phone-input{display:grid;grid-template-columns:minmax(106px,132px) minmax(0,1fr);gap:9px;direction:ltr}
.px-phone-input select,.px-phone-input input{direction:ltr;text-align:left}
.px-phone-input.has-error{padding:6px;border:1px solid #e25576;border-radius:17px;box-shadow:0 0 0 3px rgba(255,100,135,.08)}

.px-submit-progress{display:none;margin:16px 0 4px;padding:14px;border:1px solid var(--px-v110-line-soft);border-radius:16px;background:color-mix(in srgb,var(--px-v110-glass) 72%,transparent)}
.px-submit-progress.is-visible{display:block}
.px-submit-progress__track{height:8px;overflow:hidden;border-radius:999px;background:rgba(132,142,173,.15)}
.px-submit-progress__bar{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--px-v110-blue,#2563eb),var(--px-v110-purple,#7c3aed),var(--px-v110-pink,#c026d3));transition:width .18s ease}
.px-submit-progress__text{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--px-v110-muted);font-size:10px;font-weight:750}
.px-submit-progress__text strong{color:var(--px-v110-text)}
.px-request-form.is-submitting{pointer-events:none;opacity:.94}
.px-request-form.is-submitting .px-primary-button{cursor:progress}

.px-request-notice{margin:0 0 18px;padding:13px 15px;border:1px solid var(--px-v110-line-soft);border-radius:15px;color:var(--px-v110-text);background:color-mix(in srgb,var(--px-v110-glass-strong) 82%,transparent);font-size:12px;line-height:1.7}
.px-request-notice.is-error{border-color:rgba(255,100,135,.46);background:rgba(255,74,112,.08)}
.px-request-notice.is-success{border-color:rgba(55,207,153,.44);background:rgba(55,207,153,.08)}
.px-request-notice:empty{display:none}

.px-review-card{margin:18px 0;padding:18px;border:1px solid var(--px-v110-line-soft);border-radius:20px;background:linear-gradient(145deg,rgba(47,124,255,.04),rgb(124 58 237 / .065),rgba(255,58,215,.025))}
.px-review-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.px-review-card__head strong{color:var(--px-v110-text);font-size:14px}
.px-review-card__head small{color:var(--px-v110-muted);font-size:10px}
.px-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:0}
.px-review-grid>div{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--px-v110-line-soft)}
.px-review-grid dt{color:var(--px-v110-muted);font-size:10px}
.px-review-grid dd{margin:0;color:var(--px-v110-text);font-size:11px;font-weight:800;overflow-wrap:anywhere}
.px-request-actions--submit{align-items:stretch}
.px-payment-soon-button[aria-disabled="true"]{cursor:not-allowed;opacity:.72}

@media(max-width:720px){
  .px-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-review-grid{grid-template-columns:1fr}
  .px-review-grid>div{grid-template-columns:minmax(82px,.65fr) minmax(0,1.35fr)}
  .px-phone-input{grid-template-columns:112px minmax(0,1fr)}
}
@media(max-width:420px){
  .px-platform-grid{grid-template-columns:1fr 1fr}
  .px-phone-input{grid-template-columns:100px minmax(0,1fr)}
}

/* Markup-compatible overrides for the 1.1.2 request template. */
.px-form-notice{margin:0 0 18px;padding:13px 15px;border:1px solid var(--px-v110-line-soft);border-radius:15px;color:var(--px-v110-text);background:color-mix(in srgb,var(--px-v110-glass-strong) 82%,transparent);font-size:12px;line-height:1.7}
.px-form-notice.is-error{border-color:rgba(255,100,135,.46);background:rgba(255,74,112,.08)}
.px-form-notice[hidden]{display:none!important}
.px-submit-progress>span{display:block;margin-bottom:8px;color:var(--px-v110-text);font-size:11px;font-weight:800}
.px-submit-progress>i{display:block;height:8px;overflow:hidden;border-radius:999px;background:rgba(132,142,173,.15)}
.px-submit-progress>i>b{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--px-v110-blue,#2563eb),var(--px-v110-purple,#7c3aed),var(--px-v110-pink,#c026d3));transition:width .18s ease}
.px-review-card h2{margin:0 0 13px;color:var(--px-v110-text);font-size:14px}
.px-review-grid>div{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--px-v110-line-soft)}
.px-review-grid>div>span{color:var(--px-v110-muted);font-size:10px}
.px-review-grid>div>strong{color:var(--px-v110-text);font-size:11px;font-weight:800;overflow-wrap:anywhere}


/* ===== Consolidated from v1-1-3.css ===== */
/* PromXAI Theme 1.1.3 — concise conditional request brief */
.px-required-mark{color:#ef4444!important;font-style:normal;font-weight:900;margin-inline-start:4px}.px-required-note{margin:0 0 18px;color:var(--px-muted,#94a3b8);font-size:.88rem}.px-extra-details{margin:18px 0;border:1px solid rgb(124 58 237 / .2);border-radius:18px;background:rgb(124 58 237 / .035);overflow:hidden}.px-extra-details summary{display:flex;align-items:center;gap:10px;padding:16px 18px;cursor:pointer;font-weight:800;list-style:none}.px-extra-details summary::-webkit-details-marker{display:none}.px-extra-details summary:after{content:"+";margin-inline-start:auto;font-size:1.25rem}.px-extra-details[open] summary:after{content:"−"}.px-extra-details summary small{font-weight:500;color:var(--px-muted,#94a3b8)}.px-extra-details>div{padding:0 18px 18px}.px-field>span>.px-required-mark,.px-request-subsection__head strong>.px-required-mark{display:inline}.px-request-consent+.px-request-consent{margin-top:10px}.px-field>small:not(.px-inline-error){display:block;margin-top:6px;color:var(--px-muted,#94a3b8)}


/* ===== Consolidated from v1-1-4.css ===== */
/* PromXAI Theme 1.1.5 — resilient request transport + direct WhatsApp brief help. */
.px-whatsapp-help-button{
  width:100%;
  min-height:76px;
  margin:0 0 10px;
  padding:12px;
  border:1px solid rgba(37,211,102,.30);
  border-radius:15px;
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--px-text);
  background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(27,94,59,.08),rgba(17,24,39,.20));
  box-shadow:0 12px 30px rgba(9,72,35,.10);
  text-decoration:none;
  text-align:start;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.px-whatsapp-help-button:hover{
  transform:translateY(-1px);
  border-color:rgba(37,211,102,.58);
  box-shadow:0 15px 34px rgba(9,72,35,.18);
}
.px-whatsapp-help-button__icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#eafff1;
  background:linear-gradient(145deg,#25d366,#128c4a);
  box-shadow:0 9px 22px rgba(37,211,102,.25);
}
.px-whatsapp-help-button__icon .px-icon{width:24px;height:24px}
.px-whatsapp-help-button__content{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
.px-whatsapp-help-button__content strong{font-size:12.5px;font-weight:900;line-height:1.5}
.px-whatsapp-help-button__content small{color:var(--px-muted);font-size:9.5px;font-weight:650;line-height:1.65}
.px-whatsapp-help-button__badge{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  color:#9bf0ba;
  background:rgba(37,211,102,.13);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.px-whatsapp-help-button.is-disabled{opacity:.72;cursor:not-allowed}
html[data-theme="light"] .px-whatsapp-help-button{
  border-color:rgba(18,140,74,.25);
  background:linear-gradient(135deg,rgba(37,211,102,.10),rgba(255,255,255,.90));
  box-shadow:0 12px 28px rgba(18,94,55,.08);
}
html[data-theme="light"] .px-whatsapp-help-button__badge{color:#08783b;background:rgba(37,211,102,.14)}
.px-request-summary .px-payment-soon-button{margin-top:0}
@media (max-width:560px){
  .px-whatsapp-help-button{align-items:flex-start;min-height:80px}
  .px-whatsapp-help-button__badge{display:none}
}
@media (prefers-reduced-motion:reduce){
  .px-whatsapp-help-button{transition:none!important}
}


/* ===== Consolidated from v1-1-5.css ===== */
/* PromXAI Theme 1.1.6 — Explain page and free guide delivery */
.px-how-page{padding-block:28px 54px;min-height:70vh}.px-how-page__container{display:grid;gap:20px}.px-how-breadcrumb{display:flex;align-items:center;gap:10px;color:var(--px-muted);font-size:13px;padding-inline:6px}.px-how-breadcrumb a:hover{color:var(--px-text)}.px-how-breadcrumb strong{color:var(--px-text)}
.px-how-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.9fr);gap:34px;align-items:center;padding:30px;overflow:hidden}.px-how-hero:before{content:"";position:absolute;inset:auto -10% -80% 25%;height:320px;background:radial-gradient(circle,rgb(124 58 237 / .24),transparent 66%);pointer-events:none}.px-how-hero__intro,.px-how-selected,.px-how-generic-card{position:relative;z-index:1}.px-how-eyebrow{display:inline-flex;color:#c2a9ff;font-size:12px;font-weight:900;letter-spacing:.04em;margin-bottom:10px}.px-how-hero h1{margin:0;font-size:clamp(34px,4vw,58px);line-height:1.18;letter-spacing:-.03em}.px-how-hero h1 em{font-style:normal;background:linear-gradient(90deg,#55a7ff,#d960df,#ff6ba8);-webkit-background-clip:text;background-clip:text;color:transparent}.px-how-hero__intro>p{max-width:650px;margin:15px 0 0;color:var(--px-muted);font-size:16px;line-height:1.95}
.px-how-selected{display:grid;grid-template-columns:138px 1fr;gap:18px;padding:14px;border:1px solid var(--px-border);border-radius:22px;background:color-mix(in srgb,var(--px-surface) 90%,transparent);box-shadow:0 24px 65px rgba(0,0,0,.2)}.px-how-selected>img,.px-how-selected__placeholder{width:138px;aspect-ratio:4/5;border-radius:15px;object-fit:cover;background:var(--px-surface-soft);display:grid;place-items:center}.px-how-selected__placeholder .px-icon{width:36px;height:36px;color:#9b72f7}.px-how-selected__body{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.px-how-selected__body h2{margin:9px 0 10px;font-size:20px;line-height:1.5}.px-how-selected__meta{display:flex;gap:15px;align-items:center;color:var(--px-muted);font-size:13px}.px-how-selected__meta span{display:inline-flex;align-items:center;gap:6px}.px-how-selected__meta .px-icon{width:16px;height:16px}.px-how-selected__actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.px-how-selected__actions .px-primary-button,.px-how-selected__actions .px-secondary-button{min-height:42px;padding:0 15px;font-size:13px}.px-how-generic-card{min-height:190px;border:1px dashed var(--px-border-strong);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--px-muted)}.px-how-generic-card>span{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:rgb(124 58 237 / .13);color:#9b72f7;margin-bottom:12px}.px-how-generic-card .px-icon{width:28px;height:28px}.px-how-generic-card strong{color:var(--px-text);font-size:18px}.px-how-generic-card p{margin:8px 0 0}
.px-how-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}.px-how-main{display:grid;gap:18px}.px-how-sidebar{display:grid;gap:18px;position:sticky;top:110px}.px-how-tabs{display:flex;gap:10px;padding:7px;border:1px solid var(--px-border);background:var(--px-surface);border-radius:17px;width:max-content;max-width:100%}.px-how-tabs button{min-height:46px;padding:0 20px;border:0;border-radius:12px;background:transparent;color:var(--px-muted);font-weight:900;display:inline-flex;align-items:center;gap:9px;cursor:pointer}.px-how-tabs button .px-icon{width:19px;height:19px}.px-how-tabs button.is-active{color:white;background:linear-gradient(100deg,#436df5,#9f4ee8,#b832b6);box-shadow:0 10px 30px rgb(124 58 237 / .25)}
.px-how-panel{display:grid;gap:14px}.px-how-panel[hidden]{display:none!important}.px-how-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:4px 4px 0}.px-how-section-head div{font-size:24px;font-weight:950}.px-how-section-head strong{font-size:13px;color:#b79aff}.px-how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;counter-reset:how-step}.px-how-step{position:relative;min-height:260px;padding:23px 20px 20px;border:1px solid var(--px-border);border-radius:20px;background:linear-gradient(155deg,color-mix(in srgb,var(--px-surface) 94%,transparent),color-mix(in srgb,var(--px-surface-soft) 88%,transparent));overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.px-how-step:hover{transform:translateY(-3px);border-color:rgba(145,103,255,.48);box-shadow:0 18px 45px rgba(0,0,0,.18)}.px-how-step:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;inset:auto -55px -60px auto;background:radial-gradient(circle,rgb(124 58 237 / .17),transparent 70%)}.px-how-step__number{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#485ff5,#b84fe6,#f45f9d);color:white;font-weight:950;font-size:13px;box-shadow:0 8px 24px rgba(130,73,230,.28)}.px-how-step__icon{position:absolute;top:20px;left:20px;color:#a780ff}.px-how-step__icon .px-icon{width:28px;height:28px}.px-how-step h3{font-size:19px;line-height:1.55;margin:25px 0 10px}.px-how-step p{margin:0;color:var(--px-muted);line-height:1.9;font-size:14px}
.px-how-copy-card{padding:24px;scroll-margin-top:110px}.px-how-copy-card__head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.px-how-copy-card__head h2{margin:0;font-size:24px}.px-how-copy-card__head>.px-icon{width:34px;height:34px;color:#a78bfa}.px-how-copy-card .px-prompt-tabs{max-width:420px;margin-bottom:14px}.px-how-copy-card .px-prompt-text{max-height:390px;overflow:auto}.px-how-copy-note{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;color:var(--px-muted);font-size:13px}.px-how-copy-note .px-icon{flex:0 0 auto;width:18px;height:18px;color:#8e78ff}.px-how-lock{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px;border:1px solid rgb(124 58 237 / .3);border-radius:18px;background:rgb(124 58 237 / .07)}.px-how-lock>span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgb(124 58 237 / .16);color:#a78bfa}.px-how-lock .px-icon{width:23px;height:23px}.px-how-lock h3{margin:0 0 5px}.px-how-lock p{margin:0;color:var(--px-muted);line-height:1.7}
.px-how-mistakes{padding:22px}.px-how-mistakes h2{font-size:22px;margin:0 0 17px}.px-how-mistakes ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}.px-how-mistakes li{display:grid;grid-template-columns:24px 1fr;gap:9px;color:var(--px-muted);font-size:13.5px;line-height:1.7}.px-how-mistakes li>span:first-child{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(255,84,104,.15);color:#ff6578;font-weight:900}.px-how-tip{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:14px;border-radius:15px;border:1px solid rgba(177,84,221,.35);background:linear-gradient(120deg,rgba(68,105,245,.08),rgba(230,79,155,.08));color:#d7c7ff}.px-how-tip .px-icon{width:20px;height:20px;flex:0 0 auto}.px-how-tip p{margin:0;line-height:1.75;font-size:13px}
.px-how-guide-card{padding:17px;display:grid;grid-template-columns:105px 1fr;gap:15px;align-items:stretch;overflow:hidden}.px-how-guide-card>img,.px-how-guide-card__cover{width:105px;aspect-ratio:4/5;border-radius:14px;object-fit:cover;background:linear-gradient(160deg,#151c34,#39225a);display:grid;place-items:center;color:#ad83ff}.px-how-guide-card__cover .px-icon{width:35px;height:35px}.px-how-guide-card__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.px-how-guide-card__badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(236,75,150,.13);color:#ff7db9;font-weight:900;font-size:11px}.px-how-guide-card.is-ready .px-how-guide-card__badge{background:rgba(49,196,132,.13);color:#5de0a8}.px-how-guide-card h2{margin:8px 0 7px;font-size:17px;line-height:1.45}.px-how-guide-card p{margin:0 0 12px;color:var(--px-muted);font-size:12.5px;line-height:1.7}.px-how-guide-card .px-primary-button,.px-how-guide-card .px-secondary-button{min-height:40px;padding:0 13px;font-size:12px}.px-how-guide-card__library-link{font-size:11.5px;color:#bca8ff;margin-top:9px;text-decoration:underline;text-underline-offset:3px}
.px-how-help{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px}.px-how-help__icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(73,109,245,.2),rgba(225,78,157,.18));color:#b78aff;border:1px solid rgba(137,93,255,.38)}.px-how-help__icon .px-icon{width:29px;height:29px}.px-how-help h2{margin:0 0 5px;font-size:22px}.px-how-help p{margin:0;color:var(--px-muted);line-height:1.7}.px-how-help__actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.px-how-help__actions .px-primary-button,.px-how-help__actions .px-secondary-button{min-height:44px;padding:0 16px}
.px-library-card__actions{display:flex;gap:8px;padding:0 12px 12px}.px-library-card__actions .px-library-download-button{width:100%;min-height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(100deg,#436df5,#9f4ee8,#b832b6);color:white;font-weight:900;font-size:13px}.px-library-card__actions .px-icon{width:17px;height:17px}.px-library-detail__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
html[data-theme="light"] .px-how-step,html[data-theme="light"] .px-how-selected{box-shadow:0 14px 34px rgba(26,36,70,.07)}html[data-theme="light"] .px-how-step:after{opacity:.55}
@media(max-width:1180px){.px-how-hero{grid-template-columns:1fr}.px-how-layout{grid-template-columns:1fr}.px-how-sidebar{position:static;grid-template-columns:1fr 1fr}.px-how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.px-how-page{padding-block:16px 88px}.px-how-breadcrumb{overflow:auto;white-space:nowrap}.px-how-hero{padding:20px;border-radius:20px}.px-how-hero h1{font-size:34px}.px-how-hero__intro>p{font-size:14px}.px-how-selected{grid-template-columns:92px 1fr;gap:12px;padding:11px}.px-how-selected>img,.px-how-selected__placeholder{width:92px}.px-how-selected__body h2{font-size:15px;margin:6px 0}.px-how-selected__actions{grid-column:1/-1}.px-how-selected__actions a{flex:1}.px-how-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.px-how-tabs button{padding:0 8px;font-size:12px}.px-how-section-head div{font-size:20px}.px-how-steps{grid-template-columns:1fr}.px-how-step{min-height:220px}.px-how-sidebar{grid-template-columns:1fr}.px-how-copy-card{padding:17px}.px-how-copy-card__head h2{font-size:19px}.px-how-lock{grid-template-columns:auto 1fr}.px-how-lock .px-primary-button{grid-column:1/-1}.px-how-help{grid-template-columns:auto 1fr;padding:18px}.px-how-help__actions{grid-column:1/-1;justify-content:stretch}.px-how-help__actions a{flex:1}.px-how-guide-card{grid-template-columns:88px 1fr}.px-how-guide-card>img,.px-how-guide-card__cover{width:88px}}


/* ===== Consolidated from v1-1-6.css ===== */
/* PromXAI Theme 1.1.7 — legendary explain-page clarity and dual assistance CTA */
.px-how-golden-rule{margin:14px 0 18px;padding:16px 20px;display:flex;align-items:center;gap:14px;border-color:rgba(174,112,255,.34);background:linear-gradient(105deg,rgba(67,109,245,.075),rgba(156,78,232,.08),rgba(230,79,155,.065))}.px-how-golden-rule__icon{width:48px;height:48px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#426ef5,#9d4fe8 55%,#e7509d);box-shadow:0 12px 32px rgb(124 58 237 / .27)}.px-how-golden-rule__icon .px-icon{width:24px;height:24px;stroke-width:1.7}.px-how-golden-rule strong{font-size:14px;font-weight:950;color:#eadfff}.px-how-golden-rule p{margin:4px 0 0;color:var(--px-muted);font-size:13.5px;line-height:1.75}.px-how-golden-rule b{color:#b793ff;padding-inline:3px}
.px-how-step{display:flex;flex-direction:column;min-height:300px;padding:24px 21px 21px}.px-how-step__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,rgba(70,108,245,.15),rgba(228,79,157,.12));border:1px solid rgba(145,103,255,.26);color:#b99aff}.px-how-step__icon .px-icon{width:25px;height:25px;stroke-width:1.65}.px-how-step h3{margin:24px 0 10px;font-size:19.5px}.px-how-step p{font-size:13.7px;line-height:1.95}.px-how-step__action{display:block;margin-top:auto;padding-top:15px;color:#d9ceff;font-size:12.5px;line-height:1.75;font-weight:850;border-top:1px solid color-mix(in srgb,var(--px-border) 72%,transparent)}.px-how-step:hover .px-how-step__icon{color:#fff;border-color:rgba(188,144,255,.5);box-shadow:0 10px 28px rgba(103,67,210,.18)}
.px-how-help{grid-template-columns:auto minmax(260px,1fr) minmax(470px,.95fr);padding:24px;gap:20px;overflow:hidden;position:relative}.px-how-help:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;inset:auto -120px -150px auto;background:radial-gradient(circle,rgba(37,211,102,.1),transparent 68%);pointer-events:none}.px-how-help__icon{width:64px;height:64px;border-radius:21px;color:#fff;background:linear-gradient(145deg,#426ef5,#9c4fe8 58%,#e6509c);box-shadow:0 14px 38px rgba(115,69,224,.25)}.px-how-help__icon .px-icon{width:31px;height:31px;stroke-width:1.65}.px-how-help__kicker{display:inline-flex;margin-bottom:5px;color:#a78bfa;font-size:11.5px;font-weight:950}.px-how-help h2{font-size:22.5px;line-height:1.5}.px-how-help p{font-size:13.5px;max-width:690px}.px-how-help__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}.px-how-help__actions>a,.px-how-help__actions>span{min-height:68px!important;padding:10px 14px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;text-align:start}.px-how-help__actions .px-icon{width:25px;height:25px;flex:0 0 auto}.px-how-help__actions a>span,.px-how-help__actions span>span{display:flex;flex-direction:column;gap:2px;min-width:0}.px-how-help__actions strong{font-size:13px;line-height:1.45}.px-how-help__actions small{font-size:10.5px;line-height:1.5;font-weight:700;opacity:.78}.px-how-help__design{box-shadow:0 12px 28px rgb(124 58 237 / .2)}.px-whatsapp-cta{color:#eafff2;border:1px solid rgba(37,211,102,.36);background:linear-gradient(120deg,rgba(37,211,102,.17),rgba(15,86,53,.12));transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.px-whatsapp-cta .px-icon{color:#41df79}.px-whatsapp-cta:hover{transform:translateY(-2px);border-color:rgba(63,231,124,.68);box-shadow:0 12px 32px rgba(37,211,102,.13)}.px-whatsapp-cta.is-disabled{opacity:.68;cursor:not-allowed;filter:saturate(.6)}
@media(max-width:1180px){.px-how-help{grid-template-columns:auto 1fr}.px-how-help__actions{grid-column:1/-1}}
@media(max-width:720px){.px-how-golden-rule{align-items:flex-start;padding:15px}.px-how-golden-rule__icon{width:43px;height:43px}.px-how-step{min-height:0;padding:21px 19px}.px-how-step__icon{position:static;order:1;margin-top:14px}.px-how-step__number{order:0}.px-how-step h3{order:2;margin-top:16px}.px-how-step p{order:3}.px-how-step__action{order:4;margin-top:16px}.px-how-help{grid-template-columns:1fr;padding:19px}.px-how-help__icon{width:56px;height:56px}.px-how-help__actions{grid-column:auto;grid-template-columns:1fr}.px-how-help__actions>a,.px-how-help__actions>span{min-height:66px!important}.px-how-help__actions a{flex:none}}
@media(prefers-reduced-motion:reduce){.px-whatsapp-cta,.px-how-step__icon{transition:none!important}}

/* 1.1.8 — protected explain images and immediate mobile WhatsApp entry */
.px-protected-image{position:relative;display:block;overflow:hidden;border-radius:inherit;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.px-protected-image img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.px-protected-image::after{content:"";position:absolute;inset:0;z-index:2;background:transparent}
.px-mobile-whatsapp-entry{display:none}
@media (max-width:767px){
  .px-mobile-whatsapp-entry{position:fixed;right:14px;bottom:16px;z-index:9997;display:flex;align-items:center;gap:10px;min-width:196px;padding:11px 14px;border:1px solid rgba(71,215,123,.5);border-radius:18px;background:linear-gradient(135deg,rgba(15,37,28,.98),rgba(9,24,19,.98));box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 0 1px rgba(37,211,102,.08);color:#fff;text-decoration:none;backdrop-filter:blur(14px)}
  .px-mobile-whatsapp-entry__icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#25d366;color:#07130b;box-shadow:0 8px 20px rgba(37,211,102,.3)}
  .px-mobile-whatsapp-entry__icon svg{width:23px;height:23px}
  .px-mobile-whatsapp-entry span:last-child{display:flex;flex-direction:column;line-height:1.2}
  .px-mobile-whatsapp-entry strong{font-size:14px;font-weight:900}
  .px-mobile-whatsapp-entry small{margin-top:4px;color:rgba(255,255,255,.72);font-size:11px}
  body:has(.px-mobile-whatsapp-entry){padding-bottom:88px}
}


/* ===== Consolidated from v1-1-9.css ===== */
/* PromXAI Theme 1.1.9 — mobile request hero trust row and inline WhatsApp help */
.px-mobile-whatsapp-entry{display:none}

@media (max-width:767px){
  .px-request-hero__trust{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
    width:100%;
    margin-top:20px!important;
  }
  .px-request-hero__trust>span{
    min-width:0;
    width:100%;
    min-height:54px;
    padding:9px 8px!important;
    justify-content:center;
    text-align:center;
    line-height:1.45;
    white-space:normal;
    border-radius:17px!important;
  }
  .px-request-hero__trust .px-icon{
    width:19px!important;
    height:19px!important;
    flex:0 0 19px;
  }
  .px-request-hero .px-mobile-whatsapp-entry{
    position:static!important;
    inset:auto!important;
    z-index:auto;
    display:flex!important;
    width:100%;
    min-width:0;
    margin:11px 0 0;
    padding:12px 14px;
    align-items:center;
    justify-content:center;
    gap:11px;
    border:1px solid rgba(37,211,102,.42);
    border-radius:18px;
    color:#f1fff6;
    text-decoration:none;
    background:linear-gradient(135deg,rgba(37,211,102,.17),rgba(14,92,54,.11));
    box-shadow:0 10px 28px rgba(37,211,102,.10);
    backdrop-filter:none;
  }
  .px-request-hero .px-mobile-whatsapp-entry__icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:14px;
    background:#25d366;
    color:#07130b;
    box-shadow:0 8px 20px rgba(37,211,102,.24);
  }
  .px-request-hero .px-mobile-whatsapp-entry__icon svg{width:23px;height:23px}
  .px-request-hero .px-mobile-whatsapp-entry>span:last-child{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.25;
    text-align:start;
  }
  .px-request-hero .px-mobile-whatsapp-entry strong{font-size:14px;font-weight:950}
  .px-request-hero .px-mobile-whatsapp-entry small{margin-top:4px;color:rgba(255,255,255,.75);font-size:11px;line-height:1.45}
  body:has(.px-mobile-whatsapp-entry){padding-bottom:0!important}
}

html[data-theme="light"] .px-request-hero .px-mobile-whatsapp-entry,
body.px-light .px-request-hero .px-mobile-whatsapp-entry{
  color:#0d3822;
  border-color:rgba(22,164,79,.28);
  background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(255,255,255,.64));
}
html[data-theme="light"] .px-request-hero .px-mobile-whatsapp-entry small,
body.px-light .px-request-hero .px-mobile-whatsapp-entry small{color:rgba(13,56,34,.72)}


/* ===== Consolidated from v1-1-10.css ===== */
/* PromXAI Theme 1.1.10 — mobile first-step visibility and inline WhatsApp escape route */
.px-step-whatsapp-entry{display:none}

@media (max-width:767px){
  /* The first step action must remain in normal flow so it never covers the final required input. */
  .px-request-step[data-request-step="1"] .px-step-actions{
    position:static!important;
    inset:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    width:100%;
    margin:18px 0 0!important;
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .px-request-step[data-request-step="1"] .px-step-actions .px-primary-button{
    width:100%;
    min-height:54px;
    flex:1 1 100%;
  }
  .px-request-step[data-request-step="1"] [data-field-wrap="product_type"]{
    position:relative;
    z-index:1;
    margin-bottom:0;
    scroll-margin-bottom:150px;
  }
  .px-request-step[data-request-step="1"] [data-field-wrap="product_type"] input{
    display:block!important;
    position:relative;
    z-index:1;
    visibility:visible!important;
    opacity:1!important;
  }
  .px-request-step[data-request-step="1"]{
    padding-bottom:8px;
  }
  .px-step-whatsapp-entry{
    display:flex;
    width:100%;
    min-height:64px;
    margin:10px 0 0;
    padding:11px 13px;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    border:1px solid rgba(37,211,102,.42);
    border-radius:17px;
    color:#effff5;
    text-decoration:none;
    background:linear-gradient(135deg,rgba(37,211,102,.18),rgba(14,92,54,.11));
    box-shadow:0 10px 26px rgba(37,211,102,.10);
  }
  .px-step-whatsapp-entry__icon{
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex:0 0 43px;
    border-radius:14px;
    color:#06130a;
    background:#25d366;
    box-shadow:0 8px 20px rgba(37,211,102,.23);
  }
  .px-step-whatsapp-entry__icon .px-icon,
  .px-step-whatsapp-entry__icon svg{width:24px;height:24px}
  .px-step-whatsapp-entry__content{
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    text-align:start;
    line-height:1.35;
  }
  .px-step-whatsapp-entry__content strong{font-size:13px;font-weight:950}
  .px-step-whatsapp-entry__content small{margin-top:3px;color:rgba(239,255,245,.76);font-size:10.5px;line-height:1.55;font-weight:700}
  .px-step-whatsapp-entry.is-disabled{opacity:.58;cursor:not-allowed}
}

html[data-theme="light"] .px-step-whatsapp-entry,
body.px-light .px-step-whatsapp-entry{
  color:#0d3822;
  border-color:rgba(22,164,79,.28);
  background:linear-gradient(135deg,rgba(37,211,102,.13),rgba(255,255,255,.72));
}
html[data-theme="light"] .px-step-whatsapp-entry__content small,
body.px-light .px-step-whatsapp-entry__content small{color:rgba(13,56,34,.72)}


/* ===== Consolidated from v1-1-12.css ===== */
/* PromXAI Theme 1.1.12 — persistent first-step WhatsApp action + purple light-mode favorites */

/* Keep the first-step escape route visibly attached to the Next button. */
@media (max-width:767px){
  .px-request-step[data-request-step="1"] .px-step-actions + .px-step-whatsapp-entry{
    display:flex!important;
    margin-top:12px!important;
  }
  .px-request-step[data-request-step="1"] .px-step-whatsapp-entry{
    min-height:68px;
    border-radius:18px;
  }
  .px-request-step[data-request-step="1"] .px-step-whatsapp-entry:not(.is-disabled){
    border-color:rgba(37,211,102,.52);
    background:linear-gradient(135deg,rgba(37,211,102,.22),rgba(12,112,58,.14));
    box-shadow:0 12px 30px rgba(37,211,102,.13);
  }
  .px-request-step[data-request-step="1"] .px-step-whatsapp-entry.is-disabled{
    display:flex!important;
    opacity:.76;
  }
}

/* Elegant purple favorite controls in light mode — library cards and detail page. */
html[data-theme="light"] .px-favorite,
body.px-light .px-favorite,
html[data-theme="light"] [data-favorite-id],
body.px-light [data-favorite-id]{
  color:#7c3aed;
}

html[data-theme="light"] .px-favorite,
body.px-light .px-favorite{
  border-color:rgba(112,69,232,.30);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,233,255,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 9px 22px rgba(103,69,196,.13);
}

html[data-theme="light"] .px-favorite:hover,
html[data-theme="light"] .px-favorite:focus-visible,
body.px-light .px-favorite:hover,
body.px-light .px-favorite:focus-visible{
  color:#5b31d6;
  border-color:rgba(101,55,218,.54);
  background:linear-gradient(145deg,#fff,rgba(226,215,255,.96));
  box-shadow:0 11px 25px rgba(102,63,211,.20),inset 0 1px 0 #fff;
}

html[data-theme="light"] .px-prompt-detail-v2 [data-favorite-id],
body.px-light .px-prompt-detail-v2 [data-favorite-id]{
  color:#7c3aed;
  border-color:rgba(112,69,232,.30);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(238,232,255,.86));
  box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(99,67,190,.12);
}

html[data-theme="light"] [data-favorite-id].is-saved,
body.px-light [data-favorite-id].is-saved,
html[data-theme="light"] .px-prompt-detail-v2 [data-favorite-id].is-saved,
body.px-light .px-prompt-detail-v2 [data-favorite-id].is-saved{
  color:#fff;
  border-color:rgba(116,66,224,.64);
  background:linear-gradient(135deg,#7447e8 0%,#8b4ee7 55%,#d648c7 100%);
  box-shadow:0 11px 27px rgba(114,66,222,.25),inset 0 1px 0 rgba(255,255,255,.28);
}

html[data-theme="light"] [data-favorite-id].is-saved svg,
body.px-light [data-favorite-id].is-saved svg{
  fill:currentColor;
}


/* ===== Consolidated from v1-1-13.css ===== */
/* PromXAI Theme 1.1.13 — guaranteed inline WhatsApp action under first Next button */
.px-step-whatsapp-inline{display:none}

@media (max-width:767px){
  .px-request-step[data-request-step="1"] .px-step-actions--first{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    margin:18px 0 0!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .px-request-step[data-request-step="1"] .px-step-actions--first>.px-primary-button{
    width:100%!important;
    min-height:54px!important;
  }
  .px-request-step[data-request-step="1"] .px-step-whatsapp-inline{
    display:flex!important;
    width:100%!important;
    min-height:68px;
    margin:0!important;
    padding:11px 13px;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    border:1px solid rgba(37,211,102,.50);
    border-radius:18px;
    color:#effff5;
    text-decoration:none;
    background:linear-gradient(135deg,rgba(37,211,102,.23),rgba(13,111,59,.15));
    box-shadow:0 12px 30px rgba(37,211,102,.14);
    box-sizing:border-box;
  }
  .px-step-whatsapp-inline__icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:14px;
    color:#07140b;
    background:#25d366;
    box-shadow:0 8px 20px rgba(37,211,102,.28);
  }
  .px-step-whatsapp-inline__icon .px-icon,
  .px-step-whatsapp-inline__icon svg{width:25px;height:25px}
  .px-step-whatsapp-inline__content{
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    text-align:start;
    line-height:1.35;
  }
  .px-step-whatsapp-inline__content strong{font-size:13.5px;font-weight:950}
  .px-step-whatsapp-inline__content small{margin-top:3px;color:rgba(239,255,245,.82);font-size:10.5px;line-height:1.55;font-weight:700}
  .px-step-whatsapp-inline.is-disabled{display:flex!important;opacity:.72;cursor:not-allowed}

  /* Retire the older separate mobile element so there is only one WhatsApp card. */
  .px-request-step[data-request-step="1"]>.px-step-whatsapp-entry{display:none!important}
}

html[data-theme="light"] .px-step-whatsapp-inline,
body.px-light .px-step-whatsapp-inline{
  color:#0d3822;
  border-color:rgba(22,164,79,.34);
  background:linear-gradient(135deg,rgba(37,211,102,.17),rgba(255,255,255,.86));
  box-shadow:0 11px 27px rgba(31,151,77,.13),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .px-step-whatsapp-inline__content small,
body.px-light .px-step-whatsapp-inline__content small{color:rgba(13,56,34,.74)}


/* ========================================================================
   PromXAI Theme 1.2.1 — Unified Visual System
   Brand-safe dark/light palettes, living glass, typography, icons and logos.
   ======================================================================== */

:root {
  --px-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Tajawal", Tahoma, Arial, sans-serif;
  --px-font-latin: "Inter", "Segoe UI", Arial, sans-serif;
  --px-font-display: var(--px-font-ar);

  --px-brand-purple: #7c3aed;
  --px-brand-purple-bright: #9a5cff;
  --px-brand-pink: #c026d3;
  --px-brand-blue: #2563eb;
  --px-brand-cyan: #2bc8ff;
  --px-brand-gradient: linear-gradient(105deg, #2563eb 0%, #7c3aed 48%, #c026d3 100%);
  --px-brand-gradient-soft: linear-gradient(125deg, rgba(63,124,255,.20), rgb(124 58 237 / .22) 52%, rgb(192 38 211 / .16));
  --px-brand-glow: 0 18px 48px rgb(124 58 237 / .24), 0 8px 28px rgba(63,124,255,.14);

  --px-bg: #070b15;
  --px-bg-elevated: #0d1426;
  --px-bg-deep: #050812;
  --px-surface: rgba(16,24,45,.72);
  --px-surface-strong: rgba(20,29,54,.88);
  --px-surface-soft: rgba(255,255,255,.052);
  --px-surface-hover: rgba(31,42,73,.86);
  --px-glass-light: rgba(12,18,34,.58);
  --px-glass-medium: rgba(16,24,45,.72);
  --px-glass-strong: rgba(20,29,54,.90);
  --px-border: rgba(161,151,255,.18);
  --px-border-strong: rgba(158,120,255,.40);
  --px-border-vivid: rgba(126,84,255,.64);
  --px-text: #f7f8ff;
  --px-text-strong: #ffffff;
  --px-muted: #a6b1c8;
  --px-muted-2: #7f8aa4;
  --px-purple: var(--px-brand-purple);
  --px-purple-2: var(--px-brand-purple-bright);
  --px-pink: var(--px-brand-pink);
  --px-blue: var(--px-brand-blue);
  --px-cyan: var(--px-brand-cyan);
  --px-success: #20c980;
  --px-warning: #ffb454;
  --px-danger: #ff6483;
  --px-glow: rgb(124 58 237 / .27);
  --px-radius-xs: 10px;
  --px-radius-sm: 13px;
  --px-radius-md: 16px;
  --px-radius: 20px;
  --px-radius-lg: 26px;
  --px-shadow: 0 24px 70px rgba(1,4,16,.30);
  --px-shadow-soft: 0 14px 36px rgba(1,4,16,.17);
  --px-glass-shadow: 0 18px 52px rgba(1,4,16,.22), inset 0 1px 0 rgba(255,255,255,.075);
  --px-glass-shadow-hover: 0 24px 60px rgba(1,4,16,.28), 0 0 0 1px rgba(136,99,255,.12), inset 0 1px 0 rgba(255,255,255,.11);
  --px-focus-ring: 0 0 0 3px rgb(124 58 237 / .18), 0 0 0 1px rgb(124 58 237 / .62);
  --px-logo-scale: 1;
  --px-dark-logo-optical-scale: 1;
  --px-light-logo-optical-scale: 1.55;
  --px-logo-height: 44px;
  --px-logo-width: 218px;
}

html[data-theme="light"] {
  --px-bg: #f5f7fd;
  --px-bg-elevated: #edf1fa;
  --px-bg-deep: #e8edf8;
  --px-surface: rgba(255,255,255,.76);
  --px-surface-strong: rgba(255,255,255,.94);
  --px-surface-soft: rgba(43,54,91,.045);
  --px-surface-hover: rgba(255,255,255,.98);
  --px-glass-light: rgba(250,252,255,.70);
  --px-glass-medium: rgba(255,255,255,.78);
  --px-glass-strong: rgba(255,255,255,.95);
  --px-border: rgba(59,72,117,.12);
  --px-border-strong: rgb(124 58 237 / .28);
  --px-border-vivid: rgb(124 58 237 / .48);
  --px-text: #151a30;
  --px-text-strong: #0d1224;
  --px-muted: #667085;
  --px-muted-2: #8a93a8;
  --px-glow: rgb(124 58 237 / .14);
  --px-shadow: 0 24px 64px rgba(44,55,96,.12);
  --px-shadow-soft: 0 12px 32px rgba(44,55,96,.085);
  --px-glass-shadow: 0 16px 42px rgba(44,55,96,.09), inset 0 1px 0 rgba(255,255,255,.96);
  --px-glass-shadow-hover: 0 22px 52px rgba(44,55,96,.13), 0 0 0 1px rgb(124 58 237 / .09), inset 0 1px 0 rgba(255,255,255,.98);
  --px-focus-ring: 0 0 0 3px rgb(124 58 237 / .12), 0 0 0 1px rgb(124 58 237 / .52);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--px-font-ar);
}

html[data-ui-lang="en"] body,
html[data-ui-lang="en"] button,
html[data-ui-lang="en"] input,
html[data-ui-lang="en"] select,
html[data-ui-lang="en"] textarea {
  font-family: var(--px-font-latin);
}

html {
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at 88% -4%, rgb(124 58 237 / .18), transparent 30%),
    radial-gradient(circle at 10% 14%, rgba(63,124,255,.10), transparent 28%),
    radial-gradient(circle at 52% 108%, rgb(192 38 211 / .075), transparent 34%),
    var(--px-bg);
  color: var(--px-text);
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 90% -6%, rgb(124 58 237 / .11), transparent 30%),
    radial-gradient(circle at 8% 16%, rgba(63,124,255,.085), transparent 28%),
    radial-gradient(circle at 52% 108%, rgb(192 38 211 / .045), transparent 34%),
    var(--px-bg);
}

::selection { color: #fff; background: rgb(124 58 237 / .78); }

h1, h2, h3, h4, h5, h6,
.px-page-heading h1,
.px-prompt-head h1,
.px-request-hero h1,
.px-how-hero h1,
.px-pro-hero h1 {
  font-family: var(--px-font-display);
  color: var(--px-text-strong);
  font-weight: var(--px-font-weight-bold, 700);
  letter-spacing: var(--px-heading-tracking, 0);
}

p, li, label, small { line-height: 1.75; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--px-focus-ring) !important;
}

/* Unified icon language. */
.px-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  stroke-width: var(--px-icon-stroke, 1.9);
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}
.px-icon-button:hover .px-icon,
button:hover > .px-icon,
a:hover > .px-icon { transform: translateY(-.5px); }

/* Equal geometric and optical logo treatment in both themes. */
.px-brand__logos {
  position: relative;
  display: inline-grid !important;
  grid-template-areas: "logo";
  align-items: center;
  justify-items: start;
  width: var(--px-logo-width);
  min-width: var(--px-logo-width);
  height: var(--px-logo-height);
  min-height: var(--px-logo-height);
  overflow: visible;
}
.px-theme-logo,
.px-theme-logo--dark,
.px-theme-logo--light {
  grid-area: logo;
  width: var(--px-logo-width);
  height: var(--px-logo-height);
  min-height: var(--px-logo-height);
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}
.px-theme-logo--dark { display: inline-flex; }
.px-theme-logo--light { display: none; }
html[data-theme="light"] .px-theme-logo--dark { display: none; }
html[data-theme="light"] .px-theme-logo--light { display: inline-flex; }
html[data-theme="dark"] .px-theme-logo--dark { display: inline-flex; }
html[data-theme="dark"] .px-theme-logo--light { display: none; }
.px-theme-logo-image,
.px-theme-logo-image--dark,
.px-theme-logo-image--light {
  width: var(--px-logo-width) !important;
  height: var(--px-logo-height) !important;
  max-width: var(--px-logo-width) !important;
  max-height: var(--px-logo-height) !important;
  object-fit: contain !important;
  object-position: center left !important;
  transform-origin: center left;
}
/* The light artwork contains more transparent padding than the dark artwork.
   Apply an optical correction while keeping the exact same geometric box. */
.px-theme-logo-image--dark {
  transform: scale(var(--px-dark-logo-optical-scale, var(--px-logo-scale))) !important;
}
.px-theme-logo-image--light {
  transform: scale(var(--px-light-logo-optical-scale, 1.55)) !important;
}
[dir="rtl"] .px-theme-logo-image,
[dir="rtl"] .px-theme-logo-image--dark,
[dir="rtl"] .px-theme-logo-image--light { object-position: center right !important; transform-origin: center right; }
.px-brand--footer .px-brand__logos,
.px-brand__logos--footer {
  --px-logo-height: 38px;
  --px-logo-width: 188px;
}
.px-brand__fallback { height: var(--px-logo-height); }

/* Living glass header and footer. */
.px-header {
  background: var(--px-glass-light) !important;
  border-bottom-color: color-mix(in srgb, var(--px-border) 88%, transparent) !important;
  box-shadow: 0 10px 38px rgba(1,4,16,.10), inset 0 -1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
html[data-theme="light"] .px-header {
  background: rgba(249,251,255,.72) !important;
  box-shadow: 0 10px 38px rgba(42,54,94,.07), inset 0 -1px 0 rgba(255,255,255,.90);
}
.px-header::after { opacity: .74; }
.px-footer {
  background: var(--px-glass-light) !important;
  border-top-color: var(--px-border) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

/* Shared glass surfaces. */
:where(
  .px-glass-panel,
  .px-categories,
  .px-type-tabs,
  .px-library-card,
  .px-library-detail__cover,
  .px-library-detail__content,
  .px-account-profile,
  .px-account-stat,
  .px-pro-hero,
  .px-pro-plan,
  .px-pro-security,
  .px-request-hero,
  .px-request-form-panel,
  .px-request-summary,
  .px-how-panel,
  .px-how-selected,
  .px-how-step,
  .px-how-mistakes,
  .px-how-help,
  .px-how-guide-card,
  .px-prompt-detail-v2 .px-visual-column,
  .px-prompt-detail-v2 .px-prompt-head,
  .px-prompt-detail-v2 .px-prompt-copy-card,
  .px-prompt-detail-v2 .px-related-inline,
  .px-prompt-detail-v2 .px-side-tools,
  .px-prompt-detail-v2 .px-visual-thumbs
) {
  border-color: var(--px-border) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--px-glass-medium) 96%, transparent), color-mix(in srgb, var(--px-glass-light) 90%, transparent)) !important;
  box-shadow: var(--px-glass-shadow) !important;
  -webkit-backdrop-filter: blur(20px) saturate(142%);
  backdrop-filter: blur(20px) saturate(142%);
}

:where(.px-library-card, .px-account-stat, .px-pro-plan, .px-how-step, .px-prompt-card) {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
:where(.px-library-card, .px-account-stat, .px-pro-plan, .px-how-step):hover {
  transform: translateY(-3px);
  border-color: var(--px-border-strong) !important;
  box-shadow: var(--px-glass-shadow-hover) !important;
}

/* Navigation, search and compact controls. */
.px-nav { font-weight: 600; }
.px-nav a { color: var(--px-muted); }
.px-nav a:hover,
.px-nav a.is-active { color: var(--px-text-strong); }
.px-nav a::after { height: 3px; background: var(--px-brand-gradient); box-shadow: 0 0 16px rgb(124 58 237 / .38); }

.px-header-search input,
.px-field input,
.px-field select,
.px-field textarea,
.px-request-form input,
.px-request-form select,
.px-request-form textarea {
  color: var(--px-text) !important;
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-surface-soft) 92%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 22px rgba(1,4,16,.035);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] :where(
  .px-header-search input,
  .px-field input,
  .px-field select,
  .px-field textarea,
  .px-request-form input,
  .px-request-form select,
  .px-request-form textarea
) {
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 22px rgba(44,55,96,.04);
}
:where(
  .px-header-search input,
  .px-field input,
  .px-field select,
  .px-field textarea,
  .px-request-form input,
  .px-request-form select,
  .px-request-form textarea
):focus {
  border-color: var(--px-border-vivid) !important;
  background: var(--px-surface-strong) !important;
  box-shadow: var(--px-focus-ring), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
::placeholder { color: color-mix(in srgb, var(--px-muted) 82%, transparent) !important; opacity: 1; }

.px-icon-button,
.px-toolbar-button,
.px-gallery-arrow,
.px-explain-button,
.px-back-button {
  color: var(--px-text) !important;
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-glass-medium) 88%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(1,4,16,.09) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.px-icon-button:hover,
.px-toolbar-button:hover,
.px-gallery-arrow:hover,
.px-explain-button:hover,
.px-back-button:hover {
  color: #fff !important;
  border-color: rgba(142,101,255,.58) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .92), rgba(63,124,255,.84)) !important;
  box-shadow: var(--px-brand-glow) !important;
  transform: translateY(-2px);
}

/* Unified buttons. */
:where(
  .px-primary-button,
  .px-copy-button,
  .px-account-button,
  .px-pro-plan__cta,
  .px-library-download-button,
  .px-request-actions--submit button[type="submit"],
  .px-request-success__actions .px-primary-button,
  .px-how-help__design
) {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: var(--px-brand-glow), inset 0 1px 0 rgba(255,255,255,.20) !important;
  font-weight: 650;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
:where(
  .px-primary-button,
  .px-copy-button,
  .px-account-button,
  .px-pro-plan__cta,
  .px-library-download-button,
  .px-request-actions--submit button[type="submit"],
  .px-how-help__design
):hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.08);
  box-shadow: 0 22px 50px rgb(124 58 237 / .32), 0 10px 28px rgba(63,124,255,.20), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

:where(.px-secondary-button, .px-whatsapp-help-button, .px-step-whatsapp-entry, .px-step-whatsapp-inline) {
  color: var(--px-text) !important;
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-glass-medium) 90%, transparent) !important;
  box-shadow: var(--px-shadow-soft), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* WhatsApp retains its own trusted brand language. */
:where(.px-whatsapp-cta, .px-whatsapp-help-button, .px-step-whatsapp-entry, .px-step-whatsapp-inline, .px-request-mobile-whatsapp) {
  --px-whatsapp-green: #22c975;
  --px-whatsapp-deep: #159b58;
}
:where(.px-whatsapp-cta, .px-whatsapp-help-button, .px-step-whatsapp-entry, .px-step-whatsapp-inline, .px-request-mobile-whatsapp):not(.is-disabled) {
  border-color: rgba(34,201,117,.34) !important;
  background: linear-gradient(135deg, rgba(34,201,117,.17), rgba(21,155,88,.09)) !important;
}
:where(.px-whatsapp-cta, .px-whatsapp-help-button, .px-step-whatsapp-entry, .px-step-whatsapp-inline, .px-request-mobile-whatsapp):not(.is-disabled):hover {
  border-color: rgba(34,201,117,.65) !important;
  box-shadow: 0 18px 42px rgba(34,201,117,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:where(.px-whatsapp-cta, .px-whatsapp-help-button, .px-step-whatsapp-entry, .px-step-whatsapp-inline, .px-request-mobile-whatsapp) .px-icon {
  color: #2dd985 !important;
}

/* Tabs and filters. */
.px-type-tabs,
.px-prompt-tabs,
.px-how-tabs {
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-glass-medium) 92%, transparent) !important;
  box-shadow: var(--px-glass-shadow) !important;
}
.px-type-tabs button,
.px-prompt-tabs button,
.px-how-tabs button {
  color: var(--px-muted) !important;
  font-weight: 600;
}
.px-type-tabs button.is-active,
.px-prompt-tabs button.is-active,
.px-how-tabs button.is-active {
  color: #fff !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: 0 10px 26px rgb(124 58 237 / .24), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.px-category-button { font-weight: 500; }
.px-category-button:hover {
  color: var(--px-text-strong) !important;
  background: color-mix(in srgb, var(--px-surface-soft) 95%, transparent) !important;
}
.px-category-button.is-active {
  color: #fff !important;
  background: linear-gradient(105deg, #2563eb, #7c3aed 64%, #b144ff) !important;
  box-shadow: 0 12px 30px rgb(124 58 237 / .24), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Prompt cards: vivid identity without covering the artwork. */
.px-prompt-card {
  border-color: color-mix(in srgb, var(--px-border) 92%, transparent) !important;
  background: var(--px-surface) !important;
  box-shadow: 0 14px 34px rgba(1,4,16,.15), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="light"] .px-prompt-card {
  box-shadow: 0 14px 34px rgba(44,55,96,.09), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.px-prompt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(1,4,16,.22), 0 0 0 1px rgb(124 58 237 / .18) !important;
}
.px-prompt-card:hover::after {
  border-color: rgb(124 58 237 / .82) !important;
  box-shadow: inset 0 0 0 1px rgb(192 38 211 / .26), 0 0 28px rgb(124 58 237 / .18) !important;
}
.px-pro-badge {
  color: #fff !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: 0 10px 24px rgb(124 58 237 / .34), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.px-favorite,
[data-favorite-id].px-toolbar-button {
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(7,11,21,.52) !important;
}
html[data-theme="light"] .px-favorite,
html[data-theme="light"] [data-favorite-id].px-toolbar-button {
  color: #6d36db !important;
  border-color: rgb(124 58 237 / .25) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 10px 24px rgba(75,54,135,.12), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.px-favorite.is-saved,
[data-favorite-id].is-saved {
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 12px 26px rgb(124 58 237 / .30), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Library and content cards. */
.px-library-card__body h2,
.px-related-mini h3 { font-weight: 650; color: var(--px-text-strong); }
.px-library-card__meta strong,
.px-library-price { color: var(--px-purple-2) !important; }
.px-library-card__cover { background: color-mix(in srgb, var(--px-bg-elevated) 84%, transparent) !important; }

/* Prompt detail workspace. */
.px-prompt-detail-v2 {
  --px-detail-ink: var(--px-text);
  --px-detail-muted: var(--px-muted);
}
.px-prompt-head h1 { font-weight: 700 !important; line-height: 1.38; }
.px-project-summary,
.px-prompt-text { color: color-mix(in srgb, var(--px-text) 91%, var(--px-muted)) !important; }
.px-main-visual {
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-bg-deep) 94%, transparent) !important;
  box-shadow: 0 24px 64px rgba(1,4,16,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="light"] .px-main-visual {
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 22px 54px rgba(44,55,96,.10), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.px-visual-thumb.is-active {
  border-color: var(--px-border-vivid) !important;
  box-shadow: 0 0 0 2px rgb(124 58 237 / .16), 0 10px 24px rgb(124 58 237 / .15) !important;
}

/* Explain page: stronger educational hierarchy. */
.px-how-eyebrow,
.px-request-hero__eyebrow,
.px-account-kicker,
.px-pro-hero__badge {
  color: var(--px-purple-2) !important;
  font-weight: 650;
  letter-spacing: .02em;
}
.px-how-hero h1,
.px-request-hero h1,
.px-pro-hero h1 {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.18;
}
.px-how-step__number {
  color: #fff !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: 0 10px 26px rgb(124 58 237 / .28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.px-how-step__icon,
.px-how-golden-rule__icon,
.px-how-help__icon,
.px-request-summary__icon,
.px-account-stat__icon,
.px-pro-plan__icon {
  color: #fff !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: 0 12px 28px rgb(124 58 237 / .24), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.px-how-step__icon .px-icon,
.px-how-golden-rule__icon .px-icon,
.px-how-help__icon .px-icon { width: 25px; height: 25px; }
.px-how-step h3 { font-weight: 700; color: var(--px-text-strong); }
.px-how-step p,
.px-how-step__action { color: var(--px-muted); }
.px-how-golden-rule {
  border-color: rgb(124 58 237 / .32) !important;
  background: var(--px-brand-gradient-soft) !important;
  box-shadow: 0 18px 44px rgb(124 58 237 / .12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Request design: calm, premium and readable. */
.px-request-progress { color: var(--px-muted); }
.px-request-progress [aria-current="step"],
.px-request-progress .is-active {
  color: #fff !important;
  background: var(--px-brand-gradient) !important;
  box-shadow: 0 10px 26px rgb(124 58 237 / .24) !important;
}
.px-step-intro h2,
.px-request-subsection__head h3 { font-weight: 700; color: var(--px-text-strong); }
.px-request-checkbox,
.px-request-consent {
  border-color: var(--px-border) !important;
  background: color-mix(in srgb, var(--px-surface-soft) 90%, transparent) !important;
}
.px-request-checkbox:has(input:checked),
.px-request-consent:has(input:checked) {
  border-color: rgb(124 58 237 / .46) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .16), rgba(63,124,255,.10)) !important;
}

/* Account and PRO consistency. */
.px-account-avatar,
.px-pro-plan__recommended {
  background: var(--px-brand-gradient) !important;
  box-shadow: var(--px-brand-glow) !important;
}
.px-pro-plan.is-featured,
.px-pro-plan__active {
  border-color: rgb(124 58 237 / .52) !important;
  box-shadow: 0 24px 60px rgb(124 58 237 / .18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Mobile navigation and compact identity. */



@media (max-width: 980px) {
  :root {
    --px-logo-height: 37px;
    --px-logo-width: 176px;
  }
  .px-brand__logos.has-compact-logo {
    width: 42px;
    min-width: 42px;
  }
  .px-icon { stroke-width: 2; }
}

@media (max-width: 640px) {
  :root {
    --px-logo-height: 35px;
    --px-logo-width: 162px;
  }
  .px-container { width: min(100% - 24px, 1480px); }
  .px-header { background: color-mix(in srgb, var(--px-glass-strong) 92%, transparent) !important; }
  .px-how-step,
  .px-request-form-panel,
  .px-request-hero,
  .px-how-help,
  .px-how-guide-card { border-radius: 18px !important; }
  .px-primary-button,
  .px-secondary-button,
  .px-whatsapp-help-button { min-height: 48px; }
}

/* ========================================================================
   PromXAI Theme 1.2.2 — PRO preview restoration + runtime logo matching
   ======================================================================== */

/* Every premium card remains visibly premium, even for administrators or
   active PRO members. Access behavior still depends exclusively on is-locked. */
.px-prompt-card.is-pro .px-card-lock .px-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.15;
}

/* Related premium previews follow the same visual language. */

.px-related-mini.is-pro .px-card-lock {
  display: inline-grid !important;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.px-related-mini.is-pro .px-card-lock .px-icon {
  width: 17px;
  height: 17px;
}


/* ========================================================================
   PromXAI Theme 1.2.3 — membership-only PRO gate + exact logo alignment
   ======================================================================== */

/* The shared scale belongs to the wrappers, so both uploaded variants occupy
   the same geometric slot. The light image receives only a padding correction. */
.px-theme-logo,
.px-theme-logo--dark,
.px-theme-logo--light {
  transform: scale(var(--px-logo-scale, 1)) !important;
  transform-origin: center right !important;
}
[dir="ltr"] .px-theme-logo,
[dir="ltr"] .px-theme-logo--dark,
[dir="ltr"] .px-theme-logo--light { transform-origin: center left !important; }
.px-theme-logo-image--dark {
  transform: none !important;
  object-position: center right !important;
}
.px-theme-logo-image--light {
  transform: scale(var(--px-light-logo-match, 1.65)) !important;
  transform-origin: center right !important;
  object-position: center right !important;
}
[dir="ltr"] .px-theme-logo-image--dark,
[dir="ltr"] .px-theme-logo-image--light {
  object-position: center left !important;
  transform-origin: center left !important;
}
.px-brand__logos,
.px-theme-logo,
.px-theme-logo--dark,
.px-theme-logo--light {
  align-items: center !important;
  justify-content: flex-end !important;
}
[dir="ltr"] .px-brand__logos,
[dir="ltr"] .px-theme-logo,
[dir="ltr"] .px-theme-logo--dark,
[dir="ltr"] .px-theme-logo--light { justify-content: flex-start !important; }

/* Premium cards are visually branded, but only is-locked changes navigation. */
.px-prompt-card.is-pro.is-locked { cursor: pointer; }
.px-prompt-card.is-pro.is-locked .px-prompt-card__link { cursor: pointer; }
.px-prompt-card.is-pro.is-locked .px-card-lock {
  box-shadow: 0 16px 38px rgba(44,24,126,.38), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.px-pro-notice__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
.px-pro-notice small {
  display: block;
  margin-top: 5px;
  color: var(--px-muted);
}
#promxai-pro-plans { scroll-margin-top: 110px; }
@media (max-width: 700px) {
  .px-pro-notice__cta { width: 100%; justify-content: center; }
}

/* ========================================================================== 
   PromXAI Theme 1.2.5 — clearer PRO account access and prompt routing
   ========================================================================== */
.px-pro-gate-card {
  display: grid;
  grid-template-columns: minmax(180px, 270px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin: 0 0 28px;
  padding: 18px;
  overflow: hidden;
  border-color: rgba(255, 192, 76, .25);
  background:
    linear-gradient(135deg, rgba(255, 192, 76, .07), transparent 35%),
    var(--px-surface);
}
.px-pro-gate-card__preview {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: var(--px-surface-strong);
  isolation: isolate;
}
.px-pro-gate-card__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4,8,18,.04), rgba(4,8,18,.42));
  backdrop-filter: blur(4px);
}
.px-pro-gate-card__preview img {
  width: 100%;
  height: 100%;
  min-height: 235px;
  object-fit: cover;
  filter: blur(4px) brightness(.78) saturate(.84);
  transform: scale(1.035);
  user-select: none;
  pointer-events: none;
}
.px-pro-gate-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 235px; color: var(--px-muted); }
.px-pro-gate-card__placeholder .px-icon { width: 42px; height: 42px; }
.px-pro-gate-card__lock {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgb(124 58 237 / .96), rgb(192 38 211 / .92));
  box-shadow: 0 18px 45px rgb(124 58 237 / .42);
  transform: translate(-50%, -50%);
}
.px-pro-gate-card__lock .px-icon { width: 25px; height: 25px; }
.px-pro-gate-card__badge {
  position: absolute;
  inset: 14px 14px auto auto;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(120deg, var(--px-purple), var(--px-pink));
  box-shadow: 0 8px 20px rgb(124 58 237 / .30);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
}
[dir="ltr"] .px-pro-gate-card__badge { inset: 14px auto auto 14px; }
.px-pro-gate-card__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 10px; }
.px-pro-gate-card__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  color: #ffd68a;
  font-size: 12px;
  font-weight: 750;
}
html[data-theme="light"] .px-pro-gate-card__eyebrow { color: #8b5c0c; }
.px-pro-gate-card h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.35; }
.px-pro-gate-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.px-pro-gate-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid var(--px-border);
  border-radius: 999px;
  color: var(--px-muted);
  background: var(--px-surface-soft);
  font-size: 11px;
  font-weight: 650;
}
.px-pro-gate-card__meta .px-icon { width: 14px; height: 14px; color: #a78bfa; }
.px-pro-gate-card__body > p { max-width: 680px; margin: 16px 0 0; color: var(--px-muted); line-height: 1.85; }
.px-pro-gate-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.px-pro-section-head { max-width: 760px; margin: 52px auto 22px; text-align: center; }
.px-pro-section-head__eyebrow { color: #a78bfa; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
html[data-theme="light"] .px-pro-section-head__eyebrow { color: #6d38d7; }
.px-pro-section-head h2 { margin: 9px 0 0; font-size: clamp(27px, 4vw, 39px); line-height: 1.45; }
.px-pro-benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 34px; }
.px-pro-benefit { min-height: 230px; padding: 22px; }
.px-pro-benefit > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(124 58 237 / .28);
  border-radius: 16px;
  color: #d3c4ff;
  background: linear-gradient(135deg, rgba(54,124,255,.16), rgb(192 38 211 / .12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="light"] .px-pro-benefit > span { color: #6d38d7; background: linear-gradient(135deg, rgba(54,124,255,.10), rgb(192 38 211 / .08)); }
.px-pro-benefit > span .px-icon { width: 23px; height: 23px; }
.px-pro-benefit h3 { margin: 18px 0 8px; font-size: 18px; }
.px-pro-benefit p { margin: 0; color: var(--px-muted); font-size: 13px; line-height: 1.9; }

.px-pro-free-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 26px;
  padding: 20px 22px;
}
.px-pro-free-route > div {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  color: #a78bfa;
  background: rgb(124 58 237 / .12);
}
.px-pro-free-route > div .px-icon { width: 23px; height: 23px; }
.px-pro-free-route h2 { margin: 0; font-size: 19px; }
.px-pro-free-route p { margin: 5px 0 0; color: var(--px-muted); font-size: 13px; line-height: 1.75; }

@media (max-width: 920px) {
  .px-pro-benefits__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .px-pro-gate-card { grid-template-columns: 1fr; padding: 13px; gap: 15px; }
  .px-pro-gate-card__preview, .px-pro-gate-card__preview img, .px-pro-gate-card__placeholder { min-height: 220px; max-height: 290px; }
  .px-pro-gate-card__body { padding: 7px 4px 4px; }
  .px-pro-gate-card h2 { font-size: 25px; }
  .px-pro-gate-card__actions { display: grid; grid-template-columns: 1fr; }
  .px-pro-benefits__grid { grid-template-columns: 1fr; gap: 10px; }
  .px-pro-benefit { min-height: 0; }
  .px-pro-section-head { margin-top: 40px; text-align: start; }
  .px-pro-free-route { grid-template-columns: auto 1fr; padding: 17px; }
  .px-pro-free-route > a { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* ========================================================================== 
   PromXAI Theme 1.2.7 — balanced protected preview on the PRO page
   ========================================================================== */
.px-pro-gate-card {
  position: relative;
  display: grid;
  grid-template-areas: "preview body";
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  margin: 0 0 38px;
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(172,115,255,.30);
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 10%, rgba(54,124,255,.14), transparent 31%),
    radial-gradient(circle at 92% 8%, rgb(192 38 211 / .12), transparent 32%),
    linear-gradient(145deg, rgb(124 58 237 / .075), rgba(9,14,29,.80) 48%, rgba(14,20,39,.88));
  box-shadow: 0 34px 90px rgba(22,14,64,.27), inset 0 1px 0 rgba(255,255,255,.075);
  isolation: isolate;
}
[dir="ltr"] .px-pro-gate-card {
  grid-template-areas: "body preview";
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
.px-pro-gate-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.05), transparent 27%, transparent 72%, rgba(255,255,255,.025));
  pointer-events: none;
}
html[data-theme="light"] .px-pro-gate-card {
  border-color: rgba(111,70,214,.21);
  background:
    radial-gradient(circle at 12% 10%, rgba(54,124,255,.075), transparent 31%),
    radial-gradient(circle at 92% 8%, rgb(192 38 211 / .065), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,245,255,.92));
  box-shadow: 0 30px 75px rgba(63,51,122,.13), inset 0 1px 0 rgba(255,255,255,.96);
}

.px-pro-gate-card__preview {
  --px-pro-preview-ratio: 4 / 5;
  grid-area: preview;
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: var(--px-pro-preview-ratio);
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 25px;
  background: #080d1b;
  box-shadow: 0 24px 54px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.08);
  isolation: isolate;
}
.px-pro-gate-card__preview--9-16 {
  --px-pro-preview-ratio: 9 / 16;
  width: min(100%, 310px);
}
.px-pro-gate-card__preview--4-5 { --px-pro-preview-ratio: 4 / 5; }
.px-pro-gate-card__preview--1-1 { --px-pro-preview-ratio: 1 / 1; }
.px-pro-gate-card__preview--16-9 {
  --px-pro-preview-ratio: 16 / 9;
  width: min(100%, 350px);
}
html[data-theme="light"] .px-pro-gate-card__preview {
  border-color: rgba(85,67,145,.14);
  background: #e9edf8;
  box-shadow: 0 21px 42px rgba(52,43,100,.13), inset 0 1px 0 rgba(255,255,255,.82);
}
.px-pro-gate-card__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(3px) brightness(.80) saturate(.95) contrast(.98);
  transform: scale(1.025);
  user-select: none;
  pointer-events: none;
}
html[data-theme="light"] .px-pro-gate-card__preview img {
  filter: blur(3px) brightness(.88) saturate(.92) contrast(.97);
}
.px-pro-gate-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 320px;
  color: rgba(255,255,255,.32);
  background: radial-gradient(circle at 50% 38%, rgb(124 58 237 / .30), transparent 43%), #080d1b;
}
.px-pro-gate-card__placeholder .px-icon { width: 58px; height: 58px; }
.px-pro-gate-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,8,18,.04), rgba(5,8,18,.10) 48%, rgba(5,8,18,.52)),
    radial-gradient(circle at 50% 46%, transparent 0 24%, rgba(5,8,18,.05) 55%, rgba(5,8,18,.18) 100%);
  pointer-events: none;
}
html[data-theme="light"] .px-pro-gate-card__veil {
  background:
    linear-gradient(180deg, rgba(12,16,31,.02), rgba(12,16,31,.06) 48%, rgba(12,16,31,.40)),
    radial-gradient(circle at 50% 46%, transparent 0 24%, rgba(12,16,31,.035) 55%, rgba(12,16,31,.13) 100%);
}
.px-pro-gate-card__protected {
  position: absolute;
  inset: 16px auto auto 16px;
  z-index: 4;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.94);
  background: rgba(7,11,24,.58);
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  font-size: 10px;
  font-weight: 800;
}
[dir="ltr"] .px-pro-gate-card__protected { inset: 16px 16px auto auto; }
.px-pro-gate-card__protected .px-icon { width: 15px; height: 15px; color: #cbb8ff; }
.px-pro-gate-card__badge {
  position: absolute;
  inset: 16px 16px auto auto;
  z-index: 4;
  min-width: 48px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(115deg, #337dff, #7c3aed 54%, #c026d3);
  box-shadow: 0 11px 27px rgb(124 58 237 / .34), inset 0 1px 0 rgba(255,255,255,.20);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}
[dir="ltr"] .px-pro-gate-card__badge { inset: 16px auto auto 16px; }
.px-pro-gate-card__lock {
  position: absolute;
  inset: 47% auto auto 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 23px;
  color: #fff;
  background: linear-gradient(135deg, rgba(54,124,255,.96), rgb(124 58 237 / .97) 52%, rgb(192 38 211 / .92));
  box-shadow:
    0 20px 48px rgba(71,38,181,.43),
    0 0 0 7px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.27);
  transform: translate(-50%, -50%);
}
.px-pro-gate-card__lock::after {
  content: "";
  position: absolute;
  inset: -15px;
  z-index: -1;
  border: 1px solid rgba(194,166,255,.16);
  border-radius: 31px;
  background: rgb(124 58 237 / .045);
}
.px-pro-gate-card__lock .px-icon { width: 29px; height: 29px; stroke-width: 2; }
.px-pro-gate-card__preview-note {
  position: absolute;
  inset: auto 18px 18px;
  z-index: 4;
  min-height: 39px;
  padding-inline: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.90);
  background: rgba(7,11,24,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(11px) saturate(140%);
  backdrop-filter: blur(11px) saturate(140%);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.px-pro-gate-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(20px, 3vw, 38px) clamp(12px, 2vw, 26px);
}
.px-pro-gate-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 33px;
  margin-bottom: 14px;
  padding: 0 11px;
  border: 1px solid rgba(183,147,255,.20);
  border-radius: 999px;
  color: #d9caff;
  background: rgb(124 58 237 / .10);
  font-size: 11px;
  font-weight: 800;
}
.px-pro-gate-card__eyebrow .px-icon { width: 15px; height: 15px; color: #ff8ce5; }
html[data-theme="light"] .px-pro-gate-card__eyebrow {
  color: #6d38d7;
  border-color: rgba(104,69,216,.16);
  background: rgb(124 58 237 / .07);
}
.px-pro-gate-card h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(29px, 3.25vw, 43px);
  line-height: 1.28;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.px-pro-gate-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.px-pro-gate-card__meta > span {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--px-border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--px-muted);
  background: var(--px-surface-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
}
.px-pro-gate-card__meta .px-icon { width: 15px; height: 15px; color: #a78bfa; }
html[data-theme="light"] .px-pro-gate-card__meta .px-icon { color: #6d38d7; }
.px-pro-gate-card__lead {
  max-width: 700px;
  margin: 18px 0 0;
  color: var(--px-muted);
  font-size: 14px;
  line-height: 1.9;
}
.px-pro-gate-card__unlock-list {
  margin: 19px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  list-style: none;
}
.px-pro-gate-card__unlock-list li {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(113,88,188,.14);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--px-text);
  background: rgb(124 58 237 / .055);
  font-size: 12px;
  line-height: 1.55;
}
.px-pro-gate-card__unlock-list li:last-child { grid-column: 1 / -1; }
.px-pro-gate-card__unlock-list .px-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  color: #8ff1cd;
  background: rgba(37,177,131,.13);
}
html[data-theme="light"] .px-pro-gate-card__unlock-list li {
  border-color: rgba(94,72,166,.12);
  background: rgb(124 58 237 / .045);
}
html[data-theme="light"] .px-pro-gate-card__unlock-list .px-icon { color: #157653; }
.px-pro-gate-card__account-note {
  margin-top: 15px;
  padding: 12px 13px;
  border: 1px solid rgba(54,124,255,.16);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--px-muted);
  background: rgba(54,124,255,.06);
  font-size: 12px;
  line-height: 1.7;
}
.px-pro-gate-card__account-note .px-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #73a7ff;
}
.px-pro-gate-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.px-pro-gate-card__actions .px-primary-button,
.px-pro-gate-card__actions .px-secondary-button {
  min-height: 50px;
  padding-inline: 18px;
}
.px-pro-gate-card__actions .px-icon { width: 18px; height: 18px; }

@media (max-width: 980px) {
  .px-pro-gate-card,
  [dir="ltr"] .px-pro-gate-card {
    grid-template-areas: "preview body";
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    gap: 24px;
  }
  [dir="ltr"] .px-pro-gate-card {
    grid-template-areas: "body preview";
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  }
  .px-pro-gate-card__preview--9-16 { width: min(100%, 280px); }
  .px-pro-gate-card__body { padding: 20px 10px; }
  .px-pro-gate-card__unlock-list { grid-template-columns: 1fr; }
  .px-pro-gate-card__unlock-list li:last-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .px-pro-gate-card,
  [dir="ltr"] .px-pro-gate-card {
    grid-template-areas: "preview" "body";
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 11px;
    border-radius: 25px;
  }
  .px-pro-gate-card__preview {
    width: min(100%, 350px);
    border-radius: 20px;
  }
  .px-pro-gate-card__preview--9-16 { width: min(100%, 300px); }
  .px-pro-gate-card__preview--16-9 { width: 100%; }
  .px-pro-gate-card__lock { width: 66px; height: 66px; border-radius: 21px; }
  .px-pro-gate-card__lock .px-icon { width: 27px; height: 27px; }
  .px-pro-gate-card__protected { inset: 12px auto auto 12px; }
  [dir="ltr"] .px-pro-gate-card__protected { inset: 12px 12px auto auto; }
  .px-pro-gate-card__badge { inset: 12px 12px auto auto; }
  [dir="ltr"] .px-pro-gate-card__badge { inset: 12px auto auto 12px; }
  .px-pro-gate-card__preview-note { inset: auto 13px 13px; }
  .px-pro-gate-card__body { padding: 17px 7px 9px; }
  .px-pro-gate-card h2 { font-size: 27px; }
  .px-pro-gate-card__lead { font-size: 13px; }
  .px-pro-gate-card__unlock-list { grid-template-columns: 1fr; gap: 8px; }
  .px-pro-gate-card__actions { display: grid; grid-template-columns: 1fr; }
  .px-pro-gate-card__actions > * { width: 100%; justify-content: center; }
}


/* ========================================================================== 
   PromXAI Theme 1.2.8 — contextual PRO gate and account clarity
   ========================================================================== */
.px-pro-page--prompt-gate .px-pro-container {
  padding-top: clamp(22px, 3.5vw, 42px);
}
.px-pro-hero--contextual {
  position: relative;
  max-width: 850px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  padding-top: 32px;
}
.px-pro-hero--contextual h1 {
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.32;
}
.px-pro-hero--contextual p {
  max-width: 690px;
  margin-inline: auto;
}
.px-pro-hero__back {
  position: absolute;
  inset: 0 0 auto auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(175,139,255,.22);
  border-radius: 999px;
  color: var(--px-muted);
  background: rgba(14,21,39,.52);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
[dir="ltr"] .px-pro-hero__back { inset: 0 auto auto 0; }
.px-pro-hero__back .px-icon { width: 15px; height: 15px; }
[dir="rtl"] .px-pro-hero__back .px-icon { transform: scaleX(-1); }
.px-pro-hero__back:hover {
  transform: translateY(-1px);
  color: var(--px-text);
  border-color: rgba(187,151,255,.42);
  background: rgb(124 58 237 / .10);
}
html[data-theme="light"] .px-pro-hero__back {
  border-color: rgba(102,69,199,.17);
  background: rgba(255,255,255,.68);
}

.px-pro-gate-card { scroll-margin-top: 110px; }
.px-pro-gate-card__account-note.is-guest {
  border-color: rgba(54,124,255,.24);
  background: linear-gradient(115deg, rgba(54,124,255,.10), rgb(124 58 237 / .08));
}
.px-pro-gate-card__account-note.is-signed-in {
  border-color: rgba(255,184,77,.22);
  background: linear-gradient(115deg, rgba(255,184,77,.08), rgb(124 58 237 / .06));
}
.px-pro-gate-card__account-note.is-signed-in .px-icon { color: #ffc46b; }
.px-pro-gate-card__actions {
  align-items: stretch;
}
.px-pro-gate-card__actions > a {
  min-height: 48px;
  justify-content: center;
}
.px-pro-login-button {
  border-color: rgba(74,137,255,.32) !important;
  background: linear-gradient(135deg, rgba(54,124,255,.13), rgb(124 58 237 / .10)) !important;
}
.px-pro-login-button:hover {
  border-color: rgba(74,137,255,.55) !important;
  background: linear-gradient(135deg, rgba(54,124,255,.20), rgb(124 58 237 / .15)) !important;
}
.px-pro-page :where(a, button):focus-visible {
  outline: 3px solid rgba(90,145,255,.62);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .px-pro-page--prompt-gate .px-pro-container { padding-top: 15px; }
  .px-pro-hero--contextual {
    padding-top: 42px;
    margin-bottom: 18px;
    text-align: start;
  }
  .px-pro-hero--contextual h1 {
    margin-inline: 0;
    font-size: clamp(27px, 8.5vw, 36px);
  }
  .px-pro-hero--contextual p { margin-inline: 0; }
  .px-pro-hero__back {
    inset: 0 0 auto auto;
  }
  [dir="ltr"] .px-pro-hero__back { inset: 0 auto auto 0; }
  .px-pro-gate-card__actions > a { width: 100%; }
}


/* ========================================================================== 
   PromXAI Theme 1.2.9 — clearer protected preview and prompt-grid action
   ========================================================================== */
.px-pro-gate-card__preview img {
  filter: blur(.45px) brightness(.93) saturate(.98) contrast(1.01) !important;
  transform: scale(1.012);
}
html[data-theme="light"] .px-pro-gate-card__preview img {
  filter: blur(.35px) brightness(.97) saturate(.97) contrast(1.01) !important;
}
.px-pro-gate-card__veil {
  background:
    linear-gradient(180deg, rgba(5,8,18,.015), rgba(5,8,18,.035) 50%, rgba(5,8,18,.34)),
    radial-gradient(circle at 50% 47%, transparent 0 34%, rgba(5,8,18,.025) 68%, rgba(5,8,18,.09) 100%);
}
html[data-theme="light"] .px-pro-gate-card__veil {
  background:
    linear-gradient(180deg, rgba(12,16,31,.008), rgba(12,16,31,.02) 50%, rgba(12,16,31,.25)),
    radial-gradient(circle at 50% 47%, transparent 0 34%, rgba(12,16,31,.018) 68%, rgba(12,16,31,.07) 100%);
}
.px-pro-browse-button {
  border-color: rgba(137,111,255,.30) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .09), rgba(54,124,255,.055)) !important;
}
.px-pro-browse-button .px-icon {
  width: 19px !important;
  height: 19px !important;
  color: #bfaaff;
  stroke-width: 1.8;
}
.px-pro-browse-button:hover,
.px-pro-browse-button:focus-visible {
  border-color: rgba(161,125,255,.52) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .16), rgba(54,124,255,.10)) !important;
  box-shadow: 0 12px 28px rgba(74,45,155,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .px-pro-browse-button {
  border-color: rgba(104,69,216,.19) !important;
  background: linear-gradient(135deg, rgb(124 58 237 / .065), rgba(54,124,255,.045)) !important;
}
html[data-theme="light"] .px-pro-browse-button .px-icon { color: #6d38d7; }

@media (max-width: 760px) {
  .px-pro-gate-card__preview img {
    filter: blur(.35px) brightness(.95) saturate(.98) contrast(1.01) !important;
  }
}

/* ========================================================================== 
   PromXAI Theme 1.3.0 — approved 9:16 cards and frosted card actions
   ========================================================================== */
.px-prompt-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.px-prompt-card {
  aspect-ratio: 9 / 16;
  contain-intrinsic-size: 270px 480px;
  border-radius: 18px;
}
.px-prompt-card__link { z-index: 1; }
.px-prompt-card img {
  object-position: center;
}

/* PRO remains recognisable as a protected premium preview. */
.px-prompt-card.is-locked .px-prompt-card__link { cursor: pointer; }

/* Approved card treatment: only the frosted action strip appears at the
   bottom; no title, description or category overlays are added. */
.px-card-actions {
  position: absolute;
  z-index: 10;
  inset: auto 10px 10px;
  min-width: 0;
  min-height: 50px;
  padding: 6px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(8, 12, 24, .68);
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.px-prompt-card:hover .px-card-actions,
.px-prompt-card:focus-within .px-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-color: rgba(154,125,255,.30);
}
html[data-theme="light"] .px-card-actions {
  border-color: rgba(81,68,133,.15);
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 30px rgba(33,41,71,.13), inset 0 1px 0 rgba(255,255,255,.88);
}
.px-card-share,
.px-card-view {
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.px-card-share {
  width: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  cursor: pointer;
}
.px-card-share:hover,
.px-card-share:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(169,139,255,.46);
  background: rgb(124 58 237 / .20);
}
.px-card-view {
  min-width: 0;
  padding: 0 12px;
  gap: 7px;
  border: 1px solid rgba(164,130,255,.22);
  background: linear-gradient(105deg, rgba(54,124,255,.92), rgb(124 58 237 / .94), rgb(192 38 211 / .88));
  box-shadow: 0 7px 18px rgba(83,49,187,.22);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.px-card-view:hover,
.px-card-view:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(83,49,187,.30);
}
.px-card-share .px-icon,
.px-card-view .px-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.px-card-view .px-icon { width: 14px; height: 14px; }
html[dir="rtl"] .px-card-view .px-icon { transform: rotate(180deg); }
html[data-theme="light"] .px-card-share {
  color: #5f43c5;
  border-color: rgba(91,69,175,.17);
  background: rgb(124 58 237 / .07);
}

/* Duration stays readable above the persistent action area. */
.px-prompt-card .px-duration { bottom: 69px; }

/* Similar prompts return to the approved compact horizontal slider. */
.px-related-strip {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 7px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.px-related-mini {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
}

@media (min-width: 1500px) {
  .px-prompt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .px-prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .px-prompt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .px-prompt-card {
    border-radius: 15px;
    contain-intrinsic-size: 170px 302px;
  }
  /* Mobile library is cleaner without the bottom action strip.
     The whole card itself remains tappable, so opening the prompt still works
     while share/view buttons are removed from phone layout as requested. */
  .px-card-actions {
    display: none !important;
  }
  .px-card-share,
  .px-card-view {
    display: none !important;
  }
  .px-prompt-card .px-duration { bottom: 9px; inset-inline-end: 8px; }
  .px-related-mini {
    flex-basis: 104px;
    width: 104px;
    min-width: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-card-actions,
  .px-card-share,
  .px-card-view { transition: none; }
}


/* ========================================================================== 
   PromXAI Theme 1.3.1 — balanced library cards without destructive cropping
   ========================================================================== */
/* The 9:16 frame introduced in 1.3.0 made mixed-ratio uploads too narrow and
   cropped important product details. The library returns to the balanced 4:5
   browsing frame while the real prompt detail page keeps the original media
   ratio. Each card now shows the complete source image over a soft ambient
   extension, so no part of the design is discarded. */
.px-prompt-card {
  aspect-ratio: 4 / 5;
  contain-intrinsic-size: 300px 375px;
  background: #090e1b;
}
html[data-theme="light"] .px-prompt-card {
  background: #eef1f8;
}
.px-prompt-card__link {
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.px-prompt-card__ambient {
  position: absolute;
  z-index: 0;
  inset: -12%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(22px) brightness(.56) saturate(.82);
  opacity: .66;
  transform: scale(1.08);
  pointer-events: none;
}
html[data-theme="light"] .px-prompt-card__ambient {
  filter: blur(22px) brightness(.92) saturate(.72);
  opacity: .42;
}
.px-prompt-card__link > .px-prompt-card__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  transform: scale(1) !important;
  transition: transform .28s ease, filter .22s ease !important;
}
.px-prompt-card:not(.is-pro):hover .px-prompt-card__link > .px-prompt-card__image,
.px-prompt-card:not(.is-pro):focus-within .px-prompt-card__link > .px-prompt-card__image {
  transform: scale(1.012) !important;
}
/* Preserve the approved subtle premium preview treatment while preventing
   scale-based cropping of the contained image. */
/* The ambient layer stays deliberately soft and does not compete with the
   actual image or expose additional detail on protected cards. */
/* Related prompts also return to a compact, less narrow browsing shape. */
.px-related-mini {
  flex-basis: 132px;
  width: 132px;
  min-width: 132px;
  aspect-ratio: 4 / 5;
  background: var(--px-surface-soft);
}
.px-related-mini > img {
  object-fit: contain !important;
  object-position: center !important;
  background: var(--px-surface-soft);
  transform: none !important;
}
.px-related-mini:hover > img { transform: scale(1.01) !important; }

@media (max-width: 760px) {
  .px-prompt-card {
    contain-intrinsic-size: 170px 213px;
  }
  .px-related-mini {
    flex-basis: 116px;
    width: 116px;
    min-width: 116px;
  }
}

/* ==========================================================================
   PromXAI Theme 1.3.3 — hide mobile card action strip
   ========================================================================== */
/* Library cards are visual browsing covers: every image fills the same 4:5
   frame for a clean, consistent grid. The single prompt page still preserves
   and displays the original media ratio without cropping. */
.px-prompt-card {
  aspect-ratio: 4 / 5;
  contain-intrinsic-size: 300px 375px;
  background: var(--px-surface);
}
.px-prompt-card__ambient { display: none !important; }
.px-prompt-card__link > .px-prompt-card__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  transform: scale(1) !important;
  transition: transform .30s ease, filter .22s ease !important;
}
.px-prompt-card:not(.is-pro):hover .px-prompt-card__link > .px-prompt-card__image,
.px-prompt-card:not(.is-pro):focus-within .px-prompt-card__link > .px-prompt-card__image {
  transform: scale(1.018) !important;
}
/* Keep premium differentiation without reintroducing visible inner margins. */
/* Related prompts use the same full-bleed visual language. */
.px-related-mini {
  flex-basis: 132px;
  width: 132px;
  min-width: 132px;
  aspect-ratio: 4 / 5;
  background: var(--px-surface-soft);
}
.px-related-mini > img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  transform: scale(1) !important;
}
.px-related-mini:hover > img { transform: scale(1.018) !important; }

@media (max-width: 760px) {
  .px-prompt-card { contain-intrinsic-size: 170px 213px; }
  .px-related-mini {
    flex-basis: 116px;
    width: 116px;
    min-width: 116px;
  }
}



/* === 1.3.4 Prompt detail comfort and control refresh === */
@media (min-width: 981px) {
  .px-prompt-detail-v2 {
    background:
      radial-gradient(circle at 12% 8%, rgba(70, 127, 255, 0.09), transparent 28%),
      radial-gradient(circle at 88% 16%, rgb(192 38 211 / 0.08), transparent 26%),
      linear-gradient(180deg, rgba(9, 13, 25, 0.78), rgba(7, 11, 21, 0.62));
    border-radius: 32px;
  }

  html[data-theme="light"] .px-prompt-detail-v2 {
    background:
      radial-gradient(circle at 10% 8%, rgba(91, 114, 255, 0.10), transparent 28%),
      radial-gradient(circle at 88% 14%, rgba(255, 81, 177, 0.08), transparent 24%),
      linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,245,255,0.88));
  }

  .px-prompt-detail-v2 .px-visual-column,
  .px-prompt-detail-v2 .px-prompt-head,
  .px-prompt-detail-v2 .px-prompt-copy-card,
  .px-prompt-detail-v2 .px-related-inline,
  .px-prompt-detail-v2 .px-side-tools,
  .px-prompt-detail-v2 .px-visual-thumbs {
    background:
      linear-gradient(180deg, rgba(18, 26, 46, 0.56), rgba(10, 15, 28, 0.72));
    border-color: rgba(147, 172, 255, 0.13);
    box-shadow: 0 24px 48px rgba(3, 8, 20, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-visual-column,
  html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-head,
  html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-copy-card,
  html[data-theme="light"] .px-prompt-detail-v2 .px-related-inline,
  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools,
  html[data-theme="light"] .px-prompt-detail-v2 .px-visual-thumbs {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,244,255,0.90));
    border-color: rgba(155, 168, 215, 0.28);
    box-shadow: 0 18px 40px rgba(97, 112, 161, 0.12), inset 0 1px 0 rgba(255,255,255,0.86);
  }

  .px-prompt-detail-v2 .px-detail-v2-grid { gap: 28px; }
  .px-prompt-detail-v2 .px-visual-sticky { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; top: 94px; }
  .px-prompt-detail-v2 .px-main-stack { gap: 14px; }
  .px-prompt-detail-v2 .px-main-visual {
    min-height: 640px;
    max-height: calc(100vh - 124px);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(10, 16, 29, 0.82), rgba(6, 10, 18, 0.84));
    border-color: rgba(145, 171, 255, 0.14);
    box-shadow: 0 24px 54px rgba(3, 8, 20, 0.24), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-main-visual {
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(247,244,255,0.92));
    border-color: rgba(160, 170, 214, 0.24);
    box-shadow: 0 18px 40px rgba(97, 112, 161, 0.10), inset 0 1px 0 rgba(255,255,255,0.92);
  }

  .px-prompt-detail-v2 .px-visual-side {
    width: 112px;
    gap: 10px;
    align-self: stretch;
  }

  .px-prompt-detail-v2 .px-side-tools {
    position: sticky;
    top: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "counter counter"
      "share favorite"
      "theme language";
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
  }

  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button,
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    min-width: 0;
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.11);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color: rgba(255,255,255,0.94);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(4, 9, 20, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-toolbar-button,
  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    border-color: rgba(162, 172, 212, 0.28);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,244,255,0.92));
    color: #25304c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 24px rgba(97, 112, 161, 0.12);
  }

  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button:hover,
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter:hover {
    transform: translateY(-1px);
    border-color: rgba(127, 159, 255, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 0 0 1px rgba(127, 159, 255, 0.18),
      0 0 24px rgb(124 58 237 / 0.22),
      0 14px 32px rgba(4, 9, 20, 0.18);
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-toolbar-button:hover,
  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-visual-counter:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.96),
      0 0 0 1px rgba(127, 159, 255, 0.20),
      0 0 20px rgb(124 58 237 / 0.12),
      0 14px 28px rgba(97, 112, 161, 0.16);
  }

  .px-prompt-detail-v2 .px-side-tools .px-toolbar-button .px-icon,
  .px-prompt-detail-v2 .px-side-tools .px-visual-counter .px-icon {
    width: 18px;
    height: 18px;
  }

  .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    justify-content: center;
    gap: 7px;
    font-weight: 800;
    letter-spacing: .01em;
    background: linear-gradient(100deg, rgba(43, 108, 255, 0.28), rgb(192 38 211 / 0.24));
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-side-tools .px-visual-counter {
    background: linear-gradient(100deg, rgba(91, 114, 255, 0.16), rgba(255, 81, 177, 0.14));
  }

  .px-prompt-detail-v2 .px-visual-thumbs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 230px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border-radius: 24px;
  }

  .px-prompt-detail-v2 .px-visual-thumb {
    flex: 0 0 74px;
    width: 100%;
    height: 74px;
    min-height: 74px;
    border-radius: 18px;
    opacity: .80;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 20px rgba(4, 9, 20, 0.12);
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-visual-thumb {
    border-color: rgba(163, 173, 213, 0.24);
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 10px 20px rgba(97, 112, 161, 0.10);
  }

  .px-prompt-detail-v2 .px-visual-thumb:hover {
    opacity: .96;
    transform: translateY(-1px);
    border-color: rgba(127, 159, 255, 0.54);
  }

  .px-prompt-detail-v2 .px-visual-thumb.is-active {
    opacity: 1;
    border-color: rgba(127, 159, 255, 0.62);
    box-shadow: 0 0 0 2px rgb(124 58 237 / 0.14), 0 14px 28px rgba(4, 9, 20, 0.18);
  }

  .px-prompt-detail-v2 .px-thumb-play {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(10, 16, 29, 0.58);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .px-prompt-detail-v2 .px-media-hero-control {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 7;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(140deg, rgba(67, 129, 255, 0.24), rgba(255, 65, 182, 0.22));
    box-shadow: 0 20px 44px rgba(5, 10, 22, 0.24), inset 0 1px 0 rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }

  .px-prompt-detail-v2 .px-media-hero-control::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  }

  .px-prompt-detail-v2 .px-media-hero-control:hover {
    transform: translate(-50%, -50%) scale(1.03);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 0 0 1px rgba(127, 159, 255, 0.18), 0 0 28px rgb(124 58 237 / 0.24), 0 22px 48px rgba(5, 10, 22, 0.28);
  }

  .px-prompt-detail-v2 .px-media-hero-control.is-playing {
    background: linear-gradient(140deg, rgba(26, 35, 61, 0.18), rgba(26, 35, 61, 0.12));
    color: rgba(255,255,255,0.88);
  }

  .px-prompt-detail-v2 .px-media-hero-control__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
  }

  .px-prompt-detail-v2 .px-media-hero-control .px-icon {
    width: 30px;
    height: 30px;
    margin-inline-start: 3px;
  }

  .px-prompt-detail-v2 .px-prompt-head h1 {
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.22;
    text-wrap: balance;
  }

  .px-prompt-detail-v2 .px-project-summary,
  .px-prompt-detail-v2 .px-prompt-text {
    color: rgba(238, 243, 255, 0.86);
  }

  html[data-theme="light"] .px-prompt-detail-v2 .px-project-summary,
  html[data-theme="light"] .px-prompt-detail-v2 .px-prompt-text {
    color: #33415e;
  }
}


/* ========================================================================
   PromXAI Theme 1.3.5 — meigen-inspired prompt detail workspace
   ======================================================================== */
.promxai-prompt-focus .px-prompt-detail-v2 {
  --px-detail-glass: rgba(14, 20, 39, .42);
  --px-detail-glass-strong: rgba(18, 25, 46, .58);
  --px-detail-glass-soft: rgba(255, 255, 255, .07);
  --px-detail-stroke: rgb(124 58 237 / .20);
  --px-detail-stroke-soft: rgb(37 99 235 / .13);
  --px-detail-stroke-active: rgba(129, 103, 255, .44);
  --px-detail-ink: #f5f7ff;
  --px-detail-muted: #afbad2;
  --px-detail-shadow: 0 18px 44px rgba(3, 8, 24, .12);
  --px-detail-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .085);
  --px-detail-icon-bg: rgba(255, 255, 255, .08);
  --px-detail-icon-hover: linear-gradient(135deg, rgb(124 58 237 / .58), rgb(37 99 235 / .48) 54%, rgb(192 38 211 / .40));
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 {
  --px-detail-glass: rgba(255, 255, 255, .70);
  --px-detail-glass-strong: rgba(255, 255, 255, .84);
  --px-detail-glass-soft: rgba(89, 101, 168, .06);
  --px-detail-stroke: rgba(107, 85, 220, .14);
  --px-detail-stroke-soft: rgb(37 99 235 / .10);
  --px-detail-stroke-active: rgba(117, 88, 235, .34);
  --px-detail-ink: #171d31;
  --px-detail-muted: #67728c;
  --px-detail-shadow: 0 16px 38px rgba(56, 72, 123, .075);
  --px-detail-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .98);
  --px-detail-icon-bg: rgba(255, 255, 255, .62);
  --px-detail-icon-hover: linear-gradient(135deg, rgba(114, 82, 241, .84), rgba(70, 132, 255, .72) 54%, rgba(255, 76, 185, .62));
}
.promxai-prompt-focus .px-prompt-detail-v2 .px-visual-column,
.promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-column {
  background:
    radial-gradient(circle at 96% 4%, rgb(37 99 235 / .075), transparent 32%),
    radial-gradient(circle at 6% 97%, rgb(192 38 211 / .045), transparent 28%),
    var(--px-detail-glass);
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-visual-column,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-column {
  background:
    radial-gradient(circle at 96% 4%, rgb(37 99 235 / .05), transparent 31%),
    radial-gradient(circle at 6% 97%, rgb(192 38 211 / .03), transparent 26%),
    var(--px-detail-glass);
}
.promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-head,
.promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-copy-card,
.promxai-prompt-focus .px-prompt-detail-v2 .px-related-inline,
.promxai-prompt-focus .px-prompt-detail-v2 .px-side-tools,
.promxai-prompt-focus .px-prompt-detail-v2 .px-visual-thumbs {
  background: linear-gradient(145deg, var(--px-detail-glass-strong), color-mix(in srgb, var(--px-detail-glass) 72%, transparent));
  box-shadow: var(--px-detail-inner-highlight), 0 12px 30px rgba(2, 5, 20, .06);
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-head,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-prompt-copy-card,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-related-inline,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-side-tools,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-visual-thumbs {
  box-shadow: var(--px-detail-inner-highlight), 0 10px 28px rgba(57, 69, 121, .055);
}
.promxai-prompt-focus .px-prompt-detail-v2 .px-toolbar-button,
.promxai-prompt-focus .px-prompt-detail-v2 .px-gallery-arrow,
.promxai-prompt-focus .px-prompt-detail-v2 .px-explain-button,
.promxai-prompt-focus .px-prompt-detail-v2 .px-back-button,
.promxai-prompt-focus .px-prompt-detail-v2 .px-visual-counter {
  border-color: var(--px-detail-stroke);
  background: linear-gradient(145deg, var(--px-detail-icon-bg), color-mix(in srgb, var(--px-detail-glass) 68%, transparent));
  box-shadow: var(--px-detail-inner-highlight), 0 10px 24px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
.promxai-prompt-focus .px-prompt-detail-v2 .px-toolbar-button:hover,
.promxai-prompt-focus .px-prompt-detail-v2 .px-gallery-arrow:hover,
.promxai-prompt-focus .px-prompt-detail-v2 .px-explain-button:hover,
.promxai-prompt-focus .px-prompt-detail-v2 .px-back-button:hover {
  color: #fff;
  border-color: rgba(123, 102, 255, .62);
  background: var(--px-detail-icon-hover);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 0 4px rgba(108, 94, 255, .08), 0 12px 28px rgba(81, 82, 221, .18);
}
.promxai-prompt-focus .px-prompt-detail-v2 .px-main-visual {
  background:
    radial-gradient(circle at 50% 42%, rgb(37 99 235 / .07), transparent 46%),
    color-mix(in srgb, var(--px-detail-glass-strong) 62%, transparent);
  box-shadow: var(--px-detail-inner-highlight), 0 14px 36px rgba(0, 0, 0, .08);
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 .px-main-visual {
  background:
    radial-gradient(circle at 50% 42%, rgb(37 99 235 / .05), transparent 48%),
    rgba(255, 255, 255, .56);
}
@media (min-width: 981px) {
  .promxai-prompt-focus .px-prompt-detail-v2 {
    width: min(1540px, calc(100vw - 32px));
    max-width: 1540px;
    padding-top: 16px;
  }
  .promxai-prompt-focus .px-detail-v2-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(340px, .8fr);
    gap: 18px;
    align-items: stretch;
  }
  .promxai-prompt-focus .px-visual-column {
    padding: 14px;
  }
  .promxai-prompt-focus .px-prompt-column {
    gap: 14px;
  }
  .promxai-prompt-focus .px-prompt-stage {
    position: sticky;
    top: 14px;
  }
  .promxai-prompt-focus .px-visual-sticky {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(94px, 7vw, 108px);
    gap: 12px;
    align-items: stretch;
    min-height: calc(100dvh - 56px);
  }
  .promxai-prompt-focus .px-main-stack {
    position: relative;
    display: block;
    height: auto;
    min-height: calc(100dvh - 56px);
  }
  .promxai-prompt-focus .px-back-slot {
    position: absolute;
    z-index: 12;
    top: 16px;
    inset-inline-start: 16px;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  .promxai-prompt-focus .px-back-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    color: var(--px-detail-ink);
  }
  .promxai-prompt-focus .px-main-visual {
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 56px);
    height: calc(100dvh - 56px);
    padding: 12px;
    border-radius: 28px;
    overflow: hidden;
  }
  .promxai-prompt-focus .px-main-visual img[data-main-image],
  .promxai-prompt-focus .px-main-visual video[data-main-video] {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 20px;
  }
  .promxai-prompt-focus .px-gallery-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    top: 50%;
  }
  .promxai-prompt-focus .px-gallery-arrow--prev { left: 18px; }
  .promxai-prompt-focus .px-gallery-arrow--next { right: 18px; }
  .promxai-prompt-focus .px-media-hero-control {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 7;
    width: clamp(96px, 9vw, 118px);
    height: clamp(96px, 9vw, 118px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 34px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    box-shadow: 0 22px 48px rgba(5, 10, 22, 0.18), inset 0 1px 0 rgba(255,255,255,0.24);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    backdrop-filter: blur(28px) saturate(185%);
    transform: translate(-50%, -50%);
  }
  .promxai-prompt-focus .px-media-hero-control::before {
    inset: 10px;
    border-radius: 26px;
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  }
  .promxai-prompt-focus .px-media-hero-control:hover {
    transform: translate(-50%, -50%) scale(1.03);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 0 6px rgba(122, 96, 255, .08), 0 24px 52px rgba(5, 10, 22, 0.22);
  }
  .promxai-prompt-focus .px-media-hero-control__icon .px-icon {
    width: 34px;
    height: 34px;
    margin-inline-start: 3px;
  }
  .promxai-prompt-focus .px-visual-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: calc(100dvh - 56px);
  }
  .promxai-prompt-focus .px-side-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "counter share"
      "favorite theme"
      "language language";
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
  }
  .promxai-prompt-focus .px-side-tools .px-visual-counter {
    grid-area: counter;
    min-height: 48px;
    border-radius: 999px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .promxai-prompt-focus .px-side-tools [data-share-page] { grid-area: share; }
  .promxai-prompt-focus .px-side-tools [data-favorite-id] { grid-area: favorite; }
  .promxai-prompt-focus .px-side-tools .px-detail-theme-toggle { grid-area: theme; }
  .promxai-prompt-focus .px-side-tools .px-detail-lang-toggle { grid-area: language; }
  .promxai-prompt-focus .px-side-tools .px-toolbar-button.px-toolbar-button--icon,
  .promxai-prompt-focus .px-side-tools .px-detail-theme-toggle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
    justify-self: center;
    justify-content: center;
  }
  .promxai-prompt-focus .px-side-tools .px-detail-lang-toggle {
    min-height: 48px;
    border-radius: 999px;
    justify-content: center;
  }
  .promxai-prompt-focus .px-visual-thumbs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    padding: 8px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 22px;
    max-height: calc(100dvh - 150px);
    scrollbar-width: thin;
  }
  .promxai-prompt-focus .px-visual-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
    border-radius: 16px;
  }
  .promxai-prompt-focus .px-visual-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .promxai-prompt-focus .px-visual-thumb.is-active {
    border-color: rgba(114, 92, 255, .56);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 0 4px rgba(111, 92, 255, .08), 0 10px 24px rgba(7, 12, 24, .14);
  }
  .promxai-prompt-focus .px-prompt-head {
    padding: 20px 22px;
  }
  .promxai-prompt-focus .px-prompt-head h1 {
    font-size: clamp(28px, 2.45vw, 42px);
    line-height: 1.24;
    letter-spacing: -.4px;
  }
  .promxai-prompt-focus .px-project-summary {
    color: color-mix(in srgb, var(--px-detail-ink) 78%, var(--px-detail-muted));
  }
}
@media (max-width: 980px) {
  .promxai-prompt-focus .px-prompt-detail-v2 {
    --px-detail-glass: rgba(13, 19, 36, .52);
    --px-detail-glass-strong: rgba(16, 23, 42, .66);
  }
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-v2 {
    --px-detail-glass: rgba(255,255,255,.82);
    --px-detail-glass-strong: rgba(255,255,255,.90);
  }
}

/* PromXAI 1.3.13 — linked image/prompt scenes */
.px-prompt-scene-switcher{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}.px-prompt-scene-button{min-height:42px;padding:8px 10px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(255,255,255,.05);color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.px-prompt-scene-button:hover{transform:translateY(-1px);border-color:rgba(var(--px-media-rgb),.44);box-shadow:0 0 18px rgba(var(--px-media-rgb),.14)}.px-prompt-scene-button.is-active{color:#fff;border-color:transparent;background:linear-gradient(110deg,#3b82f6,#7c3aed 58%,#c026d3);box-shadow:0 10px 24px rgba(92,63,210,.22)}.px-current-scene-title{margin-bottom:12px;padding-inline:2px;font-size:13px;font-weight:800;color:rgba(226,232,240,.84)}html[data-theme="light"] .px-prompt-scene-button{background:rgba(255,255,255,.78);border-color:rgba(100,116,139,.16)}html[data-theme="light"] .px-current-scene-title{color:#475569}.px-prompt-text p{white-space:pre-wrap}@media(max-width:980px){.px-prompt-scene-switcher{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:560px){.px-prompt-scene-switcher{display:flex;overflow-x:auto;scrollbar-width:none}.px-prompt-scene-switcher::-webkit-scrollbar{display:none}.px-prompt-scene-button{flex:0 0 auto;min-width:120px}}


/* ========================================================================
   PromXAI Theme 1.3.45 — refined navy dark palette + premium airy light mode
   ======================================================================== */
:root {
  --px-bg: #0c1424;
  --px-bg-elevated: #111d31;
  --px-surface: rgba(18, 30, 51, .78);
  --px-surface-strong: rgba(23, 37, 62, .94);
  --px-surface-soft: rgba(157, 188, 255, .055);
  --px-border: rgba(132, 157, 211, .18);
  --px-border-strong: rgba(144, 124, 255, .34);
  --px-text: #f5f8ff;
  --px-muted: #aab7cd;
  --px-glow: rgba(110, 89, 245, .24);
  --px-shadow: 0 22px 60px rgba(2, 8, 20, .30);
  --px-glass-shadow: 0 18px 48px rgba(3, 10, 24, .27);
}

html[data-theme="light"] {
  --px-bg: #f7f9fd;
  --px-bg-elevated: #edf2f8;
  --px-surface: rgba(255, 255, 255, .82);
  --px-surface-strong: rgba(255, 255, 255, .97);
  --px-surface-soft: rgba(74, 98, 145, .040);
  --px-border: rgba(66, 86, 126, .12);
  --px-border-strong: rgba(123, 92, 235, .24);
  --px-text: #182033;
  --px-muted: #66738b;
  --px-glow: rgba(105, 83, 232, .12);
  --px-shadow: 0 18px 50px rgba(50, 67, 104, .09);
  --px-glass-shadow: 0 15px 40px rgba(54, 73, 112, .075);
}

body {
  background:
    radial-gradient(circle at 10% 6%, rgb(37 99 235 / .11), transparent 30rem),
    radial-gradient(circle at 90% 5%, rgb(124 58 237 / .095), transparent 31rem),
    radial-gradient(circle at 52% 102%, rgba(31, 112, 196, .08), transparent 37rem),
    linear-gradient(180deg, #101b2e 0%, #0c1526 52%, #0b1423 100%) !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 4%, rgba(76, 132, 255, .075), transparent 29rem),
    radial-gradient(circle at 93% 7%, rgba(149, 96, 244, .060), transparent 30rem),
    radial-gradient(circle at 48% 102%, rgba(128, 159, 215, .055), transparent 35rem),
    linear-gradient(180deg, #fbfcff 0%, #f5f8fc 55%, #f2f5fa 100%) !important;
}

/* Keep glass surfaces consistent with the renewed palette site-wide. */
.px-header,
.px-footer,
.px-glass-panel,
.px-card,
.px-system-card,
.px-library-toolbar,
.px-library-sidebar,
.px-prompt-card,
.px-account-card,
.px-plan-card {
  border-color: var(--px-border) !important;
}

html[data-theme="dark"] .px-header,
html[data-theme="dark"] .px-footer,
html[data-theme="dark"] .px-glass-panel {
  background: rgba(16, 27, 46, .72) !important;
  box-shadow: 0 18px 46px rgba(2, 8, 20, .20) !important;
}

html[data-theme="light"] .px-header,
html[data-theme="light"] .px-footer,
html[data-theme="light"] .px-glass-panel {
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 16px 38px rgba(61, 79, 117, .07) !important;
}


/* ========================================================================
   PromXAI Theme 1.3.46 — prompt workspace backdrop polish
   ======================================================================== */

.promxai-prompt-focus .px-main {
  background:
    radial-gradient(circle at 12% 14%, rgb(37 99 235 / .06), transparent 20%),
    radial-gradient(circle at 87% 10%, rgb(192 38 211 / .045), transparent 18%),
    radial-gradient(circle at 22% 78%, rgb(124 58 237 / .04), transparent 16%);
}

html[data-theme="light"] .promxai-prompt-focus .px-main {
  background:
    radial-gradient(circle at 12% 14%, rgb(37 99 235 / .05), transparent 21%),
    radial-gradient(circle at 87% 10%, rgb(192 38 211 / .035), transparent 18%),
    radial-gradient(circle at 22% 78%, rgb(124 58 237 / .03), transparent 16%);
}


/* PromXAI Theme 1.3.51: cache-busting global bundle; no global geometry changes. */

/* PromXAI Theme 1.3.52: cache-busting global bundle; no global geometry changes. */
/* ========================================================================
   PromXAI Theme 1.3.60 — Semantic Color Architecture
   One canonical token system for Warm Ivory Glass and Midnight Glass.
   Layout, dimensions, motion and application logic are intentionally untouched.
   ======================================================================== */
:root,
html[data-theme="dark"] {

  /* Brand primitives */
  --px-accent-blue: #2e69fa;
  --px-accent-purple: #7b4dff;
  --px-accent-violet: #a784ff;
  --px-accent-magenta: #c42bc8;
  --px-accent-cyan: #38bdf8;
  --px-accent-blue-rgb: 46 105 250;
  --px-accent-purple-rgb: 123 77 255;
  --px-accent-magenta-rgb: 196 43 200;
  --px-accent-gradient: linear-gradient(135deg, #2e69fa 0%, #7b4dff 52%, #c42bc8 100%);

  /* Midnight Glass semantic surfaces */
  --px-canvas: #142442;
  --px-canvas-subtle: #1a2d4d;
  --px-canvas-deep: #101f39;
  --px-surface-1: rgba(25, 42, 72, .76);
  --px-surface-2: rgba(31, 51, 86, .90);
  --px-surface-3: rgba(38, 61, 101, .95);
  --px-surface-muted: rgba(148, 163, 184, .055);
  --px-surface-hover-color: rgba(29, 41, 65, .92);
  --px-glass-header: rgba(25, 42, 72, .74);
  --px-glass-nav: rgba(23, 39, 67, .88);

  /* Content */
  --px-text-primary: #f7f8fd;
  --px-text-strong: #ffffff;
  --px-text-secondary: #b2bbcd;
  --px-text-tertiary: #8792a7;
  --px-text-control: #d0d7e5;
  --px-text-inverse: #ffffff;

  /* Lines, focus and elevation */
  --px-line: rgba(215, 227, 255, .14);
  --px-line-soft: rgba(215, 227, 255, .08);
  --px-line-strong: rgba(124, 58, 237, .38);
  --px-focus-color: rgba(124, 58, 237, .62);
  --px-focus-shadow: 0 0 0 3px rgba(124, 58, 237, .18), 0 0 0 1px rgba(124, 58, 237, .62);
  --px-shadow-soft: 0 12px 30px rgba(0, 0, 0, .18);
  --px-shadow-card: 0 18px 48px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .035);
  --px-shadow-card-hover: 0 24px 60px rgba(0, 0, 0, .36), 0 0 0 1px rgba(124, 58, 237, .11), inset 0 1px 0 rgba(255, 255, 255, .055);
  --px-shadow-brand: 0 12px 28px rgba(124, 58, 237, .22), inset 0 1px 0 rgba(255,255,255,.13);

  /* Semantic status colors */
  --px-success: #20c980;
  --px-success-text: #b7f4d7;
  --px-success-surface: rgba(18, 82, 59, .34);
  --px-warning: #f4b740;
  --px-danger: #ff6483;
  --px-danger-text: #ffc0ce;
  --px-danger-surface: rgba(102, 30, 51, .35);
  --px-info: #38bdf8;

  /* Compatibility aliases: all legacy components resolve here. */
  --px-bg: var(--px-canvas);
  --px-bg-elevated: var(--px-canvas-subtle);
  --px-bg-deep: var(--px-canvas-deep);
  --px-surface: var(--px-surface-1);
  --px-surface-strong: var(--px-surface-2);
  --px-surface-soft: var(--px-surface-muted);
  --px-surface-hover: var(--px-surface-hover-color);
  --px-border: var(--px-line);
  --px-border-strong: var(--px-line-strong);
  --px-border-vivid: rgba(124, 58, 237, .56);
  --px-text: var(--px-text-primary);
  --px-muted: var(--px-text-secondary);
  --px-muted-2: var(--px-text-tertiary);
  --px-purple: var(--px-accent-purple);
  --px-purple-2: var(--px-accent-violet);
  --px-pink: var(--px-accent-magenta);
  --px-blue: var(--px-accent-blue);
  --px-cyan: var(--px-accent-cyan);
  --px-brand-blue: var(--px-accent-blue);
  --px-brand-purple: var(--px-accent-purple);
  --px-brand-purple-bright: var(--px-accent-violet);
  --px-brand-pink: var(--px-accent-magenta);
  --px-brand-cyan: var(--px-accent-cyan);
  --px-brand-gradient: var(--px-accent-gradient);
  --px-glow: rgba(124, 58, 237, .22);
  --px-shadow: var(--px-shadow-card);
  --px-glass-shadow: var(--px-shadow-card);
  --px-glass-shadow-hover: var(--px-shadow-card-hover);
  --px-focus-ring: var(--px-focus-shadow);
  accent-color: var(--px-accent-purple);
}

html[data-theme="light"] {

  /* Warm Ivory Glass semantic surfaces */
  --px-canvas: #f6f1e9;
  --px-canvas-subtle: #eee6db;
  --px-canvas-deep: #e4dacd;
  --px-surface-1: rgba(255, 253, 249, .84);
  --px-surface-2: rgba(255, 255, 255, .96);
  --px-surface-3: #fffbf5;
  --px-surface-muted: rgba(84, 67, 54, .045);
  --px-surface-hover-color: rgba(255, 253, 249, .99);
  --px-glass-header: rgba(248, 244, 238, .78);
  --px-glass-nav: rgba(250, 246, 240, .91);

  --px-text-primary: #211d1a;
  --px-text-strong: #171513;
  --px-text-secondary: #685f58;
  --px-text-tertiary: #897c72;
  --px-text-control: #504842;
  --px-text-inverse: #ffffff;

  --px-line: rgba(106, 84, 67, .15);
  --px-line-soft: rgba(106, 84, 67, .095);
  --px-line-strong: rgba(124, 58, 237, .30);
  --px-focus-color: rgba(124, 58, 237, .52);
  --px-focus-shadow: 0 0 0 3px rgba(124, 58, 237, .12), 0 0 0 1px rgba(124, 58, 237, .52);
  --px-shadow-soft: 0 11px 28px rgba(74, 58, 45, .07);
  --px-shadow-card: 0 16px 42px rgba(74, 58, 45, .085), inset 0 1px 0 rgba(255, 255, 255, .92);
  --px-shadow-card-hover: 0 22px 52px rgba(74, 58, 45, .12), 0 0 0 1px rgba(124, 58, 237, .08), inset 0 1px 0 rgba(255,255,255,.96);
  --px-shadow-brand: 0 11px 26px rgba(124, 58, 237, .20), inset 0 1px 0 rgba(255,255,255,.14);

  --px-success: #1f8f65;
  --px-success-text: #155f43;
  --px-success-surface: rgba(232, 247, 239, .90);
  --px-warning: #b7791f;
  --px-danger: #be3f5c;
  --px-danger-text: #8d2941;
  --px-danger-surface: rgba(254, 238, 241, .92);
  --px-info: #2679b7;

  /* Compatibility aliases are inherited and resolve to the light tokens. */
  --px-glow: rgba(124, 58, 237, .14);
}

body {
  color: var(--px-text-primary) !important;
  background:
    radial-gradient(circle at 88% -5%, rgb(var(--px-accent-purple-rgb) / .13), transparent 31rem),
    radial-gradient(circle at 8% 12%, rgb(var(--px-accent-blue-rgb) / .08), transparent 29rem),
    radial-gradient(circle at 52% 108%, rgb(var(--px-accent-magenta-rgb) / .04), transparent 36rem),
    linear-gradient(180deg, var(--px-canvas) 0%, color-mix(in srgb, var(--px-canvas) 92%, var(--px-canvas-deep)) 56%, var(--px-canvas-deep) 100%) !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 4%, rgb(var(--px-accent-magenta-rgb) / .036), transparent 27rem),
    radial-gradient(circle at 92% 6%, rgb(var(--px-accent-blue-rgb) / .046), transparent 30rem),
    radial-gradient(circle at 50% 108%, rgba(179, 145, 112, .10), transparent 36rem),
    linear-gradient(180deg, #f8f4ee 0%, var(--px-canvas) 55%, var(--px-canvas-subtle) 100%) !important;
}

::selection { color: var(--px-text-inverse); background: rgb(var(--px-accent-purple-rgb) / .80); }
:where(a, button, input, textarea, select):focus-visible { outline: 0; box-shadow: var(--px-focus-shadow) !important; }

/* Site chrome */
.px-header {
  color: var(--px-text-primary) !important;
  background: var(--px-glass-header) !important;
  border-bottom-color: var(--px-line-soft) !important;
  box-shadow: var(--px-shadow-soft), inset 0 -1px 0 rgba(255,255,255,.025) !important;
}
.px-header__inner {
  border-color: var(--px-line) !important;
  background: linear-gradient(145deg, var(--px-surface-2), var(--px-surface-1)) !important;
  box-shadow: var(--px-shadow-card) !important;
}
.px-header::after { background: linear-gradient(90deg, transparent, rgb(var(--px-accent-blue-rgb) / .40), rgb(var(--px-accent-purple-rgb) / .48), rgb(var(--px-accent-magenta-rgb) / .32), transparent) !important; }
.px-footer {
  color: var(--px-text-secondary) !important;
  background: var(--px-glass-header) !important;
  border-top-color: var(--px-line) !important;
  box-shadow: var(--px-shadow-soft) !important;
}

/* One surface contract for all cards and panels. */
:where(
  .px-glass-panel,.px-card,.px-system-card,.px-categories,.px-type-tabs,
  .px-library-toolbar,.px-library-sidebar,.px-library-card,
  .px-library-detail__cover,.px-library-detail__content,.px-generic-page article,
  .px-account-profile,.px-account-card,.px-account-stat,.px-auth-panel,
  .px-pro-hero,.px-pro-plan,.px-plan-card,.px-pro-security,.px-pro-notice,
  .px-request-hero,.px-request-form-panel,.px-request-summary,.px-request-success,
  .px-how-panel,.px-how-selected,.px-how-step,.px-how-mistakes,.px-how-help,
  .px-how-guide-card,.px-coming-soon-dialog,.px-media-lightbox__panel,.px-toast
) {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line) !important;
  background:
    radial-gradient(circle at 96% 4%, rgb(var(--px-accent-purple-rgb) / .035), transparent 30%),
    linear-gradient(145deg, var(--px-surface-2), var(--px-surface-1)) !important;
  box-shadow: var(--px-shadow-card) !important;
}

:where(.px-prompt-card,.px-library-card,.px-related-mini,.px-how-guide-card__cover,.px-library-card__cover) {
  border-color: var(--px-line) !important;
  background-color: var(--px-canvas-subtle) !important;
  box-shadow: var(--px-shadow-soft) !important;
}
:where(.px-prompt-card,.px-library-card,.px-account-stat,.px-pro-plan,.px-how-step):hover {
  border-color: var(--px-line-strong) !important;
  background-color: var(--px-surface-hover) !important;
  box-shadow: var(--px-shadow-card-hover) !important;
}

/* Typography */
:where(h1,h2,h3,h4,.px-section-title,.px-card-title,.px-prompt-card__title) { color: var(--px-text-primary); }
:where(.px-muted,.px-subtitle,.px-description,.px-card-description,.px-project-summary,.px-current-scene-title,.px-prompt-text) { color: var(--px-text-secondary) !important; }
:where(.px-meta,.px-helper,.px-caption,.px-field small) { color: var(--px-text-tertiary) !important; }

/* Inputs */
:where(
  .px-header-search input,.px-field input,.px-field select,.px-field textarea,
  .px-request-form input,.px-request-form select,.px-request-form textarea,
  .px-auth-form input,.px-auth-form select,.px-auth-form textarea
) {
  color: var(--px-text-primary) !important;
  caret-color: var(--px-accent-purple);
  border-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-surface-2) 84%, transparent) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), var(--px-shadow-soft) !important;
}
:where(
  .px-header-search input,.px-field input,.px-field textarea,
  .px-request-form input,.px-request-form textarea,.px-auth-form input,.px-auth-form textarea
)::placeholder { color: var(--px-text-tertiary) !important; opacity: 1; }
:where(
  .px-header-search input,.px-field input,.px-field select,.px-field textarea,
  .px-request-form input,.px-request-form select,.px-request-form textarea,
  .px-auth-form input,.px-auth-form select,.px-auth-form textarea
):focus {
  border-color: var(--px-focus-color) !important;
  background: var(--px-surface-2) !important;
  box-shadow: var(--px-focus-shadow) !important;
}

/* Neutral controls */
:where(
  .px-icon-button,.px-toolbar-button,.px-secondary-button,.px-explain-button,
  .px-dialog-close,.px-related-view-all,.px-pro-hero__back,.px-pro-browse-button,
  .px-account-button,.px-auth-tabs button,.px-prompt-tabs button,
  .px-prompt-scene-button,.px-choice-card,.px-category-button,.px-type-tabs button
) {
  color: var(--px-text-control) !important;
  border-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-surface-2) 76%, transparent) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), var(--px-shadow-soft) !important;
}
:where(
  .px-icon-button,.px-toolbar-button,.px-secondary-button,.px-explain-button,
  .px-dialog-close,.px-related-view-all,.px-pro-hero__back,.px-pro-browse-button,
  .px-account-button,.px-auth-tabs button,.px-prompt-tabs button,
  .px-prompt-scene-button,.px-choice-card,.px-category-button,.px-type-tabs button
):hover {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-strong) !important;
  background: var(--px-surface-hover) !important;
  box-shadow: 0 10px 25px rgb(0 0 0 / .12), 0 0 0 3px rgb(var(--px-accent-purple-rgb) / .06) !important;
}

/* Primary and active brand actions */
:where(
  .px-primary-button,.px-copy-button,.px-submit-order,.px-pro-plan__cta,
  .px-library-download-button,.px-category-button.is-active,.px-type-tabs button.is-active,
  .px-prompt-scene-button.is-active,.px-auth-tabs button.is-active,
  [data-favorite-id].is-saved
) {
  color: var(--px-text-inverse) !important;
  border-color: transparent !important;
  background: var(--px-accent-gradient) !important;
  box-shadow: var(--px-shadow-brand) !important;
}
.px-whatsapp-cta { color: #fff !important; background: linear-gradient(135deg, #157653, #25a96b) !important; border-color: transparent !important; }

/* Navigation and compact chrome */
.px-header-action-group { border-color: var(--px-line-soft) !important; background: color-mix(in srgb, var(--px-surface-2) 58%, transparent) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), var(--px-shadow-soft) !important; }



.px-prompt-tabs,.px-prompt-scene-switcher { border-color: var(--px-line-soft) !important; background: color-mix(in srgb, var(--px-canvas) 58%, transparent) !important; }
.px-prompt-tabs button.is-active { color: var(--px-text-primary) !important; border-color: var(--px-line) !important; background: var(--px-surface-3) !important; box-shadow: var(--px-shadow-soft) !important; }
.px-favorite,[data-favorite-id].px-toolbar-button { color: var(--px-text-control) !important; border-color: var(--px-line) !important; background: color-mix(in srgb, var(--px-surface-2) 78%, transparent) !important; box-shadow: var(--px-shadow-soft) !important; }

/* Status */
.px-form-notice.is-success { color: var(--px-success-text) !important; border-color: color-mix(in srgb, var(--px-success) 24%, transparent) !important; background: var(--px-success-surface) !important; }
.px-form-notice.is-error { color: var(--px-danger-text) !important; border-color: color-mix(in srgb, var(--px-danger) 24%, transparent) !important; background: var(--px-danger-surface) !important; }

/* Media pixels never inherit the interface palette. */
:where(.px-prompt-card img,.px-library-card img,.px-related-mini img,.px-main-visual img,.px-main-visual video,.px-media35-visual img,.px-media35-visual video) {
  color: initial;
  forced-color-adjust: none;
}

/* Scrollbars follow the active theme without introducing new accent colors. */
* { scrollbar-color: color-mix(in srgb, var(--px-text-tertiary) 48%, transparent) transparent; }


/* ========================================================================
   PromXAI Theme 1.3.62 — Aurora Luxury visual polish
   One restrained brand aura, higher surface separation, and calmer contrast.
   ======================================================================== */
body {
  background:
    radial-gradient(circle at 88% -8%, rgb(var(--px-accent-purple-rgb) / .14), transparent 32rem),
    radial-gradient(circle at 7% 12%, rgb(var(--px-accent-blue-rgb) / .085), transparent 30rem),
    radial-gradient(circle at 52% 110%, rgb(var(--px-accent-magenta-rgb) / .045), transparent 38rem),
    linear-gradient(180deg, var(--px-canvas) 0%, color-mix(in srgb, var(--px-canvas) 91%, var(--px-canvas-deep)) 58%, var(--px-canvas-deep) 100%) !important;
}
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 3%, rgb(var(--px-accent-magenta-rgb) / .032), transparent 28rem),
    radial-gradient(circle at 93% 5%, rgb(var(--px-accent-blue-rgb) / .045), transparent 31rem),
    radial-gradient(circle at 49% 108%, rgba(176, 137, 101, .105), transparent 37rem),
    linear-gradient(180deg, #fbf7f1 0%, var(--px-canvas) 56%, var(--px-canvas-subtle) 100%) !important;
}

/* Cards remain luxurious without becoming neon or visually noisy. */
:where(
  .px-glass-panel,.px-card,.px-system-card,.px-categories,.px-type-tabs,
  .px-library-toolbar,.px-library-sidebar,.px-library-card,
  .px-account-profile,.px-account-card,.px-account-stat,.px-auth-panel,
  .px-pro-hero,.px-pro-plan,.px-plan-card,.px-pro-security,
  .px-request-hero,.px-request-form-panel,.px-request-summary,.px-request-success,
  .px-how-panel,.px-how-selected,.px-how-step,.px-how-mistakes,.px-how-help
) {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .025), transparent 30%),
    radial-gradient(circle at 96% 3%, rgb(var(--px-accent-purple-rgb) / .032), transparent 31%),
    linear-gradient(145deg, var(--px-surface-2), var(--px-surface-1)) !important;
}
html[data-theme="light"] :where(
  .px-glass-panel,.px-card,.px-system-card,.px-categories,.px-type-tabs,
  .px-library-toolbar,.px-library-sidebar,.px-library-card,
  .px-account-profile,.px-account-card,.px-account-stat,.px-auth-panel,
  .px-pro-hero,.px-pro-plan,.px-plan-card,.px-pro-security,
  .px-request-hero,.px-request-form-panel,.px-request-summary,.px-request-success,
  .px-how-panel,.px-how-selected,.px-how-step,.px-how-mistakes,.px-how-help
) {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .62), transparent 34%),
    radial-gradient(circle at 96% 3%, rgb(var(--px-accent-purple-rgb) / .026), transparent 31%),
    linear-gradient(145deg, var(--px-surface-2), var(--px-surface-1)) !important;
}

/* Brand gradient is reserved for primary and selected states. */
:where(.px-primary-button,.px-copy-button,.px-submit-order,.px-pro-plan__cta,[data-favorite-id].is-saved) {
  background: var(--px-accent-gradient) !important;
  box-shadow: 0 14px 32px rgb(var(--px-accent-purple-rgb) / .22), inset 0 1px 0 rgb(255 255 255 / .16) !important;
}

/* ========================================================================== 
   PromXAI Theme 1.3.62 — Premium digital library experience
   Scope: promxai_library archive and single item only.
   ========================================================================== */
.px-library62-page,
.px-library62-detail {
  --px-lib-gradient: linear-gradient(135deg, var(--px-blue) 0%, var(--px-purple) 52%, var(--px-pink) 100%);
  --px-lib-line: color-mix(in srgb, var(--px-border-strong) 66%, transparent);
  --px-lib-card: color-mix(in srgb, var(--px-surface-strong) 88%, transparent);
  --px-lib-soft: color-mix(in srgb, var(--px-surface-soft) 80%, transparent);
}

.px-library62-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 235px;
  margin-bottom: 42px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--px-border);
  border-radius: 30px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 3.4vw, 46px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--px-surface-strong) 93%, transparent), color-mix(in srgb, var(--px-surface) 76%, transparent));
  box-shadow: var(--px-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.px-library62-hero::before,
.px-library62-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.px-library62-hero::before {
  width: 330px;
  height: 330px;
  inset: -170px auto auto -80px;
  background: radial-gradient(circle, rgb(46 105 250 / .24), transparent 66%);
}
.px-library62-hero::after {
  width: 370px;
  height: 370px;
  inset: auto -130px -230px auto;
  background: radial-gradient(circle, rgb(196 43 200 / .20), transparent 68%);
}
html[data-theme="light"] .px-library62-hero::before { background: radial-gradient(circle, rgb(46 105 250 / .11), transparent 66%); }
html[data-theme="light"] .px-library62-hero::after { background: radial-gradient(circle, rgb(196 43 200 / .10), transparent 68%); }

.px-library62-hero__icon {
  position: relative;
  width: clamp(76px, 8vw, 108px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--px-border-strong) 76%, transparent);
  border-radius: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--px-lib-gradient);
  box-shadow: 0 22px 46px rgb(85 55 225 / .26), inset 0 1px 0 rgb(255 255 255 / .26);
  transform: rotate(-3deg);
}
.px-library62-hero__icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / .20);
  border-radius: 23px;
}
.px-library62-hero__icon .px-icon { width: 44%; height: 44%; stroke-width: 1.65; }

.px-library62-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--px-purple-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.px-library62-eyebrow .px-icon { width: 17px; height: 17px; }
.px-library62-hero__copy h1 {
  max-width: 820px;
  margin: 8px 0 10px;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.25;
  letter-spacing: -.035em;
}
.px-library62-hero__copy p {
  max-width: 760px;
  margin: 0;
  color: var(--px-muted);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.9;
}
.px-library62-hero__stat {
  min-width: 132px;
  padding: 21px 18px;
  border: 1px solid var(--px-border);
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--px-surface-soft) 78%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
}
.px-library62-hero__stat strong {
  font-size: 34px;
  line-height: 1;
  background: var(--px-lib-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.px-library62-hero__stat span { margin-top: 8px; color: var(--px-muted); font-size: 12px; font-weight: 800; }

.px-library62-section-head {
  margin-bottom: 21px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.px-library62-section-head h2 { margin: 4px 0 0; font-size: clamp(22px, 2.5vw, 32px); }
.px-library62-section-head__note {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--px-border);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--px-muted);
  background: var(--px-surface);
  font-size: 12px;
  font-weight: 800;
}
.px-library62-section-head__note .px-icon { width: 17px; height: 17px; color: #38c98d; }

.px-library62-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
  justify-content: start;
  gap: 24px;
}
.px-library62-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--px-border);
  border-radius: 25px;
  background: var(--px-lib-card);
  box-shadow: 0 18px 48px rgb(0 0 0 / .14);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.px-library62-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--px-purple) 62%, var(--px-border));
  box-shadow: 0 26px 62px rgb(0 0 0 / .21), 0 0 0 1px rgb(123 77 255 / .08);
}
.px-library62-card__cover-shell { padding: 12px 12px 0; }
.px-library62-card__cover-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--px-bg-elevated);
}
.px-library62-card__cover-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgb(4 7 16 / .44));
  pointer-events: none;
}
.px-library62-card__cover {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--px-bg-elevated) 88%, transparent);
}
.px-library62-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}
.px-library62-card:hover .px-library62-card__cover img { transform: scale(1.035); }
.px-library62-card__placeholder { color: var(--px-muted); }
.px-library62-card__placeholder .px-icon { width: 56px; height: 56px; }
.px-library62-card__badges {
  position: absolute;
  z-index: 3;
  inset: 12px 12px auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.px-library62-badge {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / .20);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgb(7 11 20 / .64);
  box-shadow: 0 7px 18px rgb(0 0 0 / .18);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  font-size: 10px;
  font-weight: 900;
}
.px-library62-badge--free { background: linear-gradient(135deg, #168d65, #26b67f); }
.px-library62-badge--pro { background: var(--px-lib-gradient); }
.px-library62-badge--kind { background: rgb(7 11 20 / .70); }
.px-library62-card__view {
  position: absolute;
  z-index: 3;
  inset: auto auto 14px 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(7 11 20 / .55);
  opacity: 0;
  transform: translateY(8px);
  transition: .25s ease;
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
}
.px-library62-card:hover .px-library62-card__view { opacity: 1; transform: none; }
.px-library62-card__view .px-icon { width: 18px; height: 18px; }
html[dir="rtl"] .px-library62-card__view .px-icon { transform: rotate(180deg); }

.px-library62-card__body { padding: 18px; }
.px-library62-card__title {
  min-height: 56px;
  display: block;
  color: var(--px-text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-library62-card__desc {
  min-height: 47px;
  margin: 8px 0 13px;
  color: var(--px-muted);
  font-size: 12px;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-library62-card__facts {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--px-border);
  border-radius: 11px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: var(--px-muted);
  background: var(--px-lib-soft);
  font-size: 10px;
  font-weight: 800;
}
.px-library62-card__facts span { display: inline-flex; align-items: center; gap: 5px; }
.px-library62-card__facts .px-icon { width: 13px; height: 13px; }
.px-library62-card__actions { margin-top: 14px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 8px; }
.px-library62-card__details,
.px-library62-card__download,
.px-library62-card__price {
  min-height: 43px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
}
.px-library62-card__details { border: 1px solid var(--px-border); color: var(--px-text); background: var(--px-surface-soft); }
.px-library62-card__details:hover { border-color: var(--px-border-strong); background: var(--px-surface-strong); }
.px-library62-card__details .px-icon { width: 15px; height: 15px; }
html[dir="rtl"] .px-library62-card__details .px-icon { transform: rotate(180deg); }
.px-library62-card__download { color: #fff; background: var(--px-lib-gradient); box-shadow: 0 11px 24px rgb(88 55 220 / .22); }
.px-library62-card__download:hover { filter: brightness(1.06); transform: translateY(-1px); }
.px-library62-card__download .px-icon { width: 16px; height: 16px; }
.px-library62-card__price { color: var(--px-purple-2); background: var(--px-surface-soft); }

/* Single library item */
.px-library62-detail { max-width: 1450px; padding-top: 22px; }
.px-library62-breadcrumb {
  min-height: 43px;
  margin-bottom: 18px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--px-muted);
  font-size: 11px;
  font-weight: 800;
}
.px-library62-breadcrumb a:hover { color: var(--px-text); }
.px-library62-breadcrumb .px-icon { width: 14px; height: 14px; opacity: .55; }
html[dir="rtl"] .px-library62-breadcrumb .px-icon { transform: rotate(180deg); }

.px-library62-detail__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 48px);
  border: 1px solid var(--px-border);
  border-radius: 32px;
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--px-surface-strong) 94%, transparent), color-mix(in srgb, var(--px-surface) 82%, transparent));
  box-shadow: var(--px-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.px-library62-detail__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  inset: -250px -210px auto auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(123 77 255 / .17), transparent 66%);
  pointer-events: none;
}
.px-library62-detail__cover-column { display: grid; gap: 15px; justify-items: center; }
.px-library62-detail__cover-stage {
  position: relative;
  width: min(100%, 350px);
  padding: 12px 18px 18px 12px;
  perspective: 1200px;
}
.px-library62-detail__cover-stage::before {
  content: "";
  position: absolute;
  inset: 18px 7px 8px 27px;
  border-radius: 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--px-purple) 30%, #111), color-mix(in srgb, var(--px-pink) 18%, #090c14));
  box-shadow: 18px 25px 52px rgb(0 0 0 / .31);
  transform: rotateY(-5deg) translateZ(-1px);
}
.px-library62-detail__cover {
  position: relative;
  z-index: 1;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 18px 12px 12px 18px;
  display: grid;
  place-items: center;
  background: var(--px-bg-elevated);
  box-shadow: 0 28px 58px rgb(0 0 0 / .26), inset -7px 0 12px rgb(0 0 0 / .16);
  transform: rotateY(-3deg);
  transform-origin: right center;
}
.px-library62-detail__cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(90deg, rgb(255 255 255 / .11), transparent);
  pointer-events: none;
}
.px-library62-detail__cover img { width: 100%; height: 100%; object-fit: contain; }
.px-library62-detail__placeholder { color: var(--px-muted); }
.px-library62-detail__placeholder .px-icon { width: 72px; height: 72px; }
.px-library62-detail__cover-badges {
  position: absolute;
  z-index: 4;
  inset: 26px 32px auto auto;
  display: flex;
  gap: 7px;
}
.px-library62-detail__cover-note {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--px-border);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--px-muted);
  background: var(--px-surface-soft);
  font-size: 11px;
  font-weight: 800;
}
.px-library62-detail__cover-note .px-icon { width: 17px; height: 17px; color: #39cb8f; }

.px-library62-detail__content { max-width: 790px; }
.px-library62-detail__content > .px-library62-eyebrow {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--px-border);
  border-radius: 12px;
  background: var(--px-surface-soft);
}
.px-library62-detail__content h1 {
  margin: 16px 0 13px;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.25;
  letter-spacing: -.045em;
}
.px-library62-detail__desc { max-width: 760px; color: var(--px-muted); font-size: clamp(14px, 1.25vw, 17px); line-height: 2; }
.px-library62-detail__desc p { margin: 0; }
.px-library62-detail__facts {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.px-library62-detail__facts > div {
  min-height: 96px;
  padding: 13px 11px;
  border: 1px solid var(--px-border);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon small" "icon strong";
  align-items: center;
  column-gap: 9px;
  background: var(--px-lib-soft);
}
.px-library62-detail__fact-icon { grid-area: icon; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--px-purple-2); background: color-mix(in srgb, var(--px-purple) 11%, var(--px-surface-strong)); }
.px-library62-detail__fact-icon .px-icon { width: 18px; height: 18px; }
.px-library62-detail__facts small { grid-area: small; color: var(--px-muted); font-size: 10px; }
.px-library62-detail__facts strong { grid-area: strong; font-size: 12px; }
.px-library62-detail__price { margin-top: 23px; color: var(--px-purple-2); font-size: 30px; font-weight: 900; }
.px-library62-detail__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.px-library62-detail__download,
.px-library62-detail__back {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
}
.px-library62-detail__download { min-width: 245px; border: 0; color: #fff; background: var(--px-lib-gradient); box-shadow: 0 16px 34px rgb(82 54 220 / .27); }
.px-library62-detail__download:hover { transform: translateY(-2px); filter: brightness(1.06); }
.px-library62-detail__download:disabled { opacity: .55; cursor: not-allowed; }
.px-library62-detail__back { border: 1px solid var(--px-border); color: var(--px-text); background: var(--px-surface-soft); }
.px-library62-detail__back:hover { border-color: var(--px-border-strong); background: var(--px-surface-strong); }
.px-library62-detail__download .px-icon,
.px-library62-detail__back .px-icon { width: 19px; height: 19px; }
html[dir="rtl"] .px-library62-detail__back .px-icon { transform: rotate(180deg); }
.px-library62-detail__trust { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 9px 18px; color: var(--px-muted); font-size: 11px; font-weight: 800; }
.px-library62-detail__trust > span { display: inline-flex; align-items: center; gap: 6px; }
.px-library62-detail__trust .px-icon { width: 15px; height: 15px; color: var(--px-purple-2); }

.px-library62-benefits {
  margin-top: 28px;
  padding: clamp(23px, 3vw, 38px);
  border: 1px solid var(--px-border);
  border-radius: 27px;
  background: var(--px-surface);
  box-shadow: var(--px-glass-shadow);
}
.px-library62-benefits__head { margin-bottom: 20px; }
.px-library62-benefits__head h2 { margin: 5px 0 0; font-size: clamp(22px, 2.7vw, 34px); }
.px-library62-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.px-library62-benefits__grid article {
  min-height: 160px;
  padding: 22px;
  border: 1px solid var(--px-border);
  border-radius: 18px;
  background: var(--px-lib-soft);
}
.px-library62-benefits__grid article > .px-icon { width: 30px; height: 30px; color: var(--px-purple-2); }
.px-library62-benefits__grid h3 { margin: 15px 0 5px; font-size: 16px; }
.px-library62-benefits__grid p { margin: 0; color: var(--px-muted); font-size: 12px; line-height: 1.85; }

html[data-theme="light"] .px-library62-card,
html[data-theme="light"] .px-library62-hero,
html[data-theme="light"] .px-library62-detail__hero,
html[data-theme="light"] .px-library62-benefits {
  box-shadow: 0 18px 48px rgb(75 57 42 / .09);
}
html[data-theme="light"] .px-library62-detail__cover-stage::before {
  background: linear-gradient(90deg, #d8c9bc, #bcaea1);
  box-shadow: 18px 25px 46px rgb(93 70 49 / .18);
}
html[data-theme="light"] .px-library62-detail__cover { border-color: rgb(92 70 50 / .14); box-shadow: 0 24px 48px rgb(89 66 45 / .16), inset -7px 0 12px rgb(80 58 39 / .08); }

@media (max-width: 1050px) {
  .px-library62-hero { grid-template-columns: auto minmax(0, 1fr); }
  .px-library62-hero__stat { grid-column: 1 / -1; width: 100%; min-height: 70px; grid-template-columns: auto auto; justify-content: center; gap: 10px; }
  .px-library62-hero__stat span { margin: 0; }
  .px-library62-detail__hero { grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); gap: 30px; }
  .px-library62-detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .px-library62-page, .px-library62-detail { padding-top: 12px; }
  .px-library62-hero { min-height: 0; margin-bottom: 28px; padding: 24px 20px; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; border-radius: 24px; }
  .px-library62-hero__icon { width: 62px; border-radius: 20px; }
  .px-library62-hero__icon::after { inset: 6px; border-radius: 15px; }
  .px-library62-hero__copy h1 { font-size: 25px; }
  .px-library62-hero__copy p { font-size: 12px; }
  .px-library62-hero__stat { min-height: 58px; padding: 12px; }
  .px-library62-hero__stat strong { font-size: 26px; }
  .px-library62-section-head { align-items: start; }
  .px-library62-section-head__note { display: none; }
  .px-library62-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .px-library62-card { border-radius: 18px; }
  .px-library62-card__cover-shell { padding: 7px 7px 0; }
  .px-library62-card__cover-link { border-radius: 13px; }
  .px-library62-card__badges { inset: 8px 8px auto; }
  .px-library62-badge { min-height: 24px; padding: 0 7px; border-radius: 8px; font-size: 8px; }
  .px-library62-card__body { padding: 11px; }
  .px-library62-card__title { min-height: 46px; font-size: 13px; line-height: 1.65; }
  .px-library62-card__desc { display: none; }
  .px-library62-card__facts { margin-top: 8px; padding: 7px; gap: 5px 8px; font-size: 8px; }
  .px-library62-card__facts span:nth-child(2) { display: none; }
  .px-library62-card__actions { margin-top: 9px; grid-template-columns: 1fr; }
  .px-library62-card__details { display: none; }
  .px-library62-card__download, .px-library62-card__price { min-height: 38px; font-size: 10px; }
  .px-library62-card__view { display: none; }

  .px-library62-breadcrumb { margin-bottom: 8px; padding-inline: 4px; white-space: nowrap; overflow: hidden; }
  .px-library62-detail__hero { padding: 20px 15px 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 25px; }
  .px-library62-detail__cover-stage { width: min(86vw, 330px); }
  .px-library62-detail__cover { transform: none; }
  .px-library62-detail__cover-stage::before { transform: none; }
  .px-library62-detail__cover-badges { inset: 23px 28px auto auto; }
  .px-library62-detail__content { width: 100%; }
  .px-library62-detail__content h1 { margin-top: 13px; font-size: 31px; }
  .px-library62-detail__desc { font-size: 13px; }
  .px-library62-detail__facts { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .px-library62-detail__facts > div { min-height: 84px; padding: 10px; }
  .px-library62-detail__actions { display: grid; grid-template-columns: 1fr; }
  .px-library62-detail__download, .px-library62-detail__back { width: 100%; min-height: 51px; }
  .px-library62-detail__trust { justify-content: center; }
  .px-library62-benefits { margin-top: 16px; padding: 20px 14px; border-radius: 22px; }
  .px-library62-benefits__grid { grid-template-columns: 1fr; }
  .px-library62-benefits__grid article { min-height: 0; padding: 18px; }
}

@media (max-width: 430px) {
  .px-library62-grid { grid-template-columns: 1fr; }
  .px-library62-card { max-width: 340px; width: 100%; justify-self: center; }
  .px-library62-card__desc { display: -webkit-box; }
  .px-library62-card__facts span:nth-child(2) { display: inline-flex; }
}

/* ================================================================
   PromXAI Theme 1.3.63 — Library category dock + headerless detail
   Scope: promxai_library archive and single only.
   ================================================================ */

.px-library63-page {
  padding-top: clamp(18px, 2.8vw, 34px);
  padding-bottom: clamp(70px, 8vw, 112px);
}

.px-library63-filter-dock {
  width: min(100%, 720px);
  margin: 0 auto clamp(34px, 4.4vw, 58px);
  padding: 8px;
  border: 1px solid var(--px-border);
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  background: color-mix(in srgb, var(--px-surface) 88%, transparent);
  box-shadow: var(--px-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.px-library63-filter {
  min-width: 0;
  min-height: 76px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 17px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--px-muted);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.px-library63-filter:hover {
  color: var(--px-text);
  border-color: var(--px-border);
  background: var(--px-surface-soft);
  transform: translateY(-1px);
}

.px-library63-filter.is-active {
  color: #fff;
  border-color: rgb(255 255 255 / .13);
  background: var(--px-lib-gradient);
  box-shadow: 0 12px 28px rgb(76 56 220 / .25), inset 0 1px 0 rgb(255 255 255 / .18);
}

.px-library63-filter__icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: currentColor;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.px-library63-filter.is-active .px-library63-filter__icon {
  background: rgb(255 255 255 / .14);
}

.px-library63-filter__icon .px-icon {
  width: 18px;
  height: 18px;
}

.px-library63-section-head {
  margin-bottom: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.px-library63-section-head h2 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.035em;
}

.px-library62-card[hidden] {
  display: none !important;
}

.px-library63-filter-empty {
  width: min(100%, 560px);
  min-height: 190px;
  margin: 18px auto 0;
  padding: 30px;
  border: 1px dashed var(--px-border-strong);
  border-radius: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--px-muted);
  text-align: center;
  background: var(--px-surface-soft);
}

.px-library63-filter-empty[hidden] {
  display: none !important;
}

.px-library63-filter-empty > .px-icon {
  width: 38px;
  height: 38px;
  color: var(--px-purple-2);
}

/* Single library item: no site header, direct information surface. */


.px-library63-detail {
  max-width: 1450px;
  padding-top: clamp(14px, 2vw, 24px);
  padding-bottom: clamp(76px, 8vw, 112px);
}

.px-library63-toolbar {
  width: 100%;
  min-height: 48px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  direction: ltr;
}

.px-library63-toolbar__back,
.px-library63-toolbar__button {
  border: 1px solid var(--px-border);
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface) 88%, transparent);
  box-shadow: 0 10px 28px rgb(0 0 0 / .10), inset 0 1px 0 rgb(255 255 255 / .055);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.px-library63-toolbar__back {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  direction: var(--px-direction, rtl);
  font-size: 12px;
  font-weight: 900;
}

html[dir="rtl"] .px-library63-toolbar__back {
  direction: rtl;
}

html[dir="ltr"] .px-library63-toolbar__back {
  direction: ltr;
}

html[dir="rtl"] .px-library63-toolbar__back .px-icon {
  transform: rotate(180deg);
}

.px-library63-toolbar__back .px-icon {
  width: 17px;
  height: 17px;
}

.px-library63-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.px-library63-toolbar__button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.px-library63-toolbar__button .px-icon {
  width: 19px;
  height: 19px;
}

.px-library63-toolbar__back:hover,
.px-library63-toolbar__button:hover {
  color: var(--px-purple-2);
  border-color: color-mix(in srgb, var(--px-purple) 45%, var(--px-border));
  background: var(--px-surface-strong);
  transform: translateY(-1px);
}

.px-library63-toolbar__button.is-liked,
.px-library63-toolbar__button[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--px-lib-gradient);
  box-shadow: 0 12px 28px rgb(82 54 220 / .27);
}

.px-library63-toolbar__button.is-liked .px-icon,
.px-library63-toolbar__button[aria-pressed="true"] .px-icon {
  fill: currentColor;
}

.px-library63-detail__hero {
  margin-top: 0;
}

.px-library63-detail__actions {
  margin-top: 26px;
}

.px-library63-detail__actions .px-library62-detail__download {
  min-width: min(100%, 330px);
}

html[data-theme="light"] .px-library63-filter-dock,
html[data-theme="light"] .px-library63-toolbar__back,
html[data-theme="light"] .px-library63-toolbar__button {
  box-shadow: 0 14px 36px rgb(75 57 42 / .09), inset 0 1px 0 rgb(255 255 255 / .72);
}

@media (max-width: 760px) {
  .px-library63-page {
    padding-top: 12px;
  }

  .px-library63-filter-dock {
    width: 100%;
    margin-bottom: 30px;
    padding: 6px;
    border-radius: 20px;
    gap: 4px;
  }

  .px-library63-filter {
    min-height: 66px;
    padding: 8px 3px;
    border-radius: 14px;
    gap: 5px;
    font-size: 10px;
  }

  .px-library63-filter__icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .px-library63-filter__icon .px-icon {
    width: 16px;
    height: 16px;
  }

  .px-library63-section-head {
    margin-bottom: 16px;
    align-items: start;
  }

  .px-library63-section-head h2 {
    font-size: 27px;
  }

  .px-library63-detail {
    padding-top: 10px;
  }

  .px-library63-toolbar {
    margin-bottom: 9px;
  }

  .px-library63-toolbar__back {
    min-height: 40px;
    padding-inline: 12px;
    border-radius: 13px;
    font-size: 11px;
  }

  .px-library63-toolbar__button {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .px-library63-detail__hero {
    padding-top: 17px;
  }
}

@media (max-width: 390px) {
  .px-library63-filter {
    font-size: 9px;
  }

  .px-library63-toolbar__back span {
    display: none;
  }

  .px-library63-toolbar__back {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
}

/* PromXAI Theme 1.3.64 — premium digital library template refresh */
.px-library64-page {
  max-width: 1500px;
  padding-top: 14px;
}

.px-library64-head {
  margin-bottom: 18px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 16px;
  border-radius: 30px;
  border: 1px solid var(--px-border);
  background:
    radial-gradient(circle at top right, rgb(105 72 255 / .15), transparent 32%),
    radial-gradient(circle at bottom left, rgb(255 49 202 / .09), transparent 26%),
    color-mix(in srgb, var(--px-surface) 86%, transparent);
  box-shadow: 0 24px 48px rgb(8 12 24 / .14);
}
.px-library64-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--px-purple-2);
  font-size: 11px;
  font-weight: 900;
  background: color-mix(in srgb, var(--px-purple) 10%, var(--px-surface-strong));
  border: 1px solid color-mix(in srgb, var(--px-purple) 22%, var(--px-border));
}
.px-library64-head__intro h2 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
}
.px-library64-head__intro p {
  max-width: 900px;
  margin: 0;
  color: var(--px-muted);
  font-size: 15px;
  line-height: 2;
}
.px-library64-head__meta {
  display: grid;
  gap: 12px;
  align-content: stretch;
}
.px-library64-stat {
  min-height: 76px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  border: 1px solid var(--px-border);
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
  color: var(--px-text);
}
.px-library64-stat strong {
  display: block;
  min-width: 64px;
  font-size: 28px;
  line-height: 1;
  color: var(--px-purple-2);
}
.px-library64-stat > .px-icon {
  width: 22px;
  height: 22px;
  color: var(--px-purple-2);
}
.px-library64-stat span {
  color: var(--px-muted);
  font-size: 13px;
  font-weight: 800;
}
.px-library64-filter-dock {
  margin-top: 0;
  margin-bottom: 12px;
}
.px-library64-filter {
  min-width: 150px;
  gap: 10px;
}
.px-library64-filter__label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 900;
}
.px-library64-filter__count {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface-strong) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--px-border) 92%, transparent);
}
.px-library64-filter.is-active .px-library64-filter__count {
  color: #fff;
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .16);
}
.px-library64-subtitle {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.px-library64-subtitle p {
  margin: 0;
  color: var(--px-muted);
  font-size: 14px;
  text-align: center;
}
.px-library64-grid {
  gap: 18px;
}
.px-library64-card {
  display: grid;
  grid-template-rows: auto 1fr;
}
.px-library64-card__cover-shell { padding: 14px 14px 0; }
.px-library64-card__cover-link { border-radius: 18px; }
.px-library64-card__cover { aspect-ratio: 9 / 14; }
.px-library64-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.px-library64-card__topline {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.px-library64-card__kind,
.px-library64-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}
.px-library64-card__kind {
  color: var(--px-purple-2);
  background: color-mix(in srgb, var(--px-purple) 8%, var(--px-surface-strong));
  border: 1px solid color-mix(in srgb, var(--px-purple) 18%, var(--px-border));
}
.px-library64-card__status {
  color: var(--px-muted);
  background: color-mix(in srgb, var(--px-surface-strong) 88%, transparent);
  border: 1px solid var(--px-border);
}
.px-library64-card__summary {
  margin: 0 0 8px;
  color: var(--px-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
}
.px-library64-card__chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.px-library64-card__chips span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--px-muted);
  font-size: 10px;
  font-weight: 900;
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
  border: 1px solid var(--px-border);
}

.px-library64-detail {
  max-width: 1450px;
  padding-top: 18px;
}
.px-library64-detail__hero,
.px-library64-detail__samples,
.px-library64-detail__benefits {
  border: 1px solid var(--px-border);
  background:
    radial-gradient(circle at top right, rgb(114 82 255 / .12), transparent 26%),
    radial-gradient(circle at bottom left, rgb(255 50 210 / .08), transparent 24%),
    color-mix(in srgb, var(--px-surface) 92%, transparent);
  box-shadow: 0 24px 52px rgb(10 14 28 / .16);
}
.px-library64-detail__hero {
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: 36px;
  padding: 28px;
  border-radius: 32px;
}
.px-library64-detail__visual-column {
  display: grid;
  align-content: start;
  gap: 14px;
}
.px-library64-toolbar {
  margin-bottom: 6px;
}
.px-library64-detail__cover-stage {
  width: min(100%, 360px);
  margin-inline: auto;
}
.px-library64-detail__cover {
  box-shadow: 0 34px 58px rgb(11 15 28 / .26), inset -8px 0 14px rgb(255 255 255 / .02);
}
.px-library64-detail__cover-note {
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--px-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  background: color-mix(in srgb, var(--px-surface-strong) 80%, transparent);
  border: 1px solid var(--px-border);
}
.px-library64-detail__cover-note .px-icon {
  width: 18px;
  height: 18px;
  color: #39cb8f;
}
.px-library64-detail__content h1 {
  margin: 14px 0 12px;
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: 1.08;
}
.px-library64-detail__quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.px-library64-detail__quick-meta > span {
  min-height: 48px;
  padding: 8px 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border-radius: 18px;
  border: 1px solid var(--px-border);
  background: color-mix(in srgb, var(--px-surface-strong) 84%, transparent);
}
.px-library64-detail__quick-meta strong {
  color: var(--px-muted);
  font-size: 11px;
  font-weight: 800;
}
.px-library64-detail__quick-meta em {
  color: var(--px-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.px-library64-detail__desc {
  max-width: 860px;
  margin-top: 18px;
  font-size: 15px;
}
.px-library64-detail__fact-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.px-library64-detail__fact-grid > div {
  min-height: 94px;
  padding: 12px;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon small"
    "icon strong";
  align-items: center;
  border-radius: 18px;
  border: 1px solid var(--px-border);
  background: color-mix(in srgb, var(--px-surface-strong) 86%, transparent);
}
.px-library64-detail__price { margin-top: 20px; }
.px-library64-detail__actions {
  align-items: center;
}
.px-library64-detail__ghost-action {
  min-width: 220px;
  min-height: 56px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid var(--px-border);
  color: var(--px-text);
  font-size: 14px;
  font-weight: 900;
  background: color-mix(in srgb, var(--px-surface-soft) 92%, transparent);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.px-library64-detail__ghost-action:hover {
  transform: translateY(-1px);
  border-color: var(--px-border-strong);
  background: color-mix(in srgb, var(--px-surface-strong) 92%, transparent);
}
html[dir="rtl"] .px-library64-detail__ghost-action .px-icon { transform: rotate(180deg); }
.px-library64-detail__trust { margin-top: 18px; }
.px-library64-detail__samples,
.px-library64-detail__benefits {
  margin-top: 18px;
  padding: 24px;
  border-radius: 30px;
}
.px-library64-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
}
.px-library64-section-head h2 {
  margin: 6px 0 0;
  font-size: clamp(24px, 2.7vw, 38px);
}
.px-library64-section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--px-muted);
  font-size: 14px;
  line-height: 1.9;
}
.px-library64-sample-grid,
.px-library64-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.px-library64-sample-card,
.px-library64-benefit-card {
  min-height: 190px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--px-border);
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
}
.px-library64-sample-card__icon,
.px-library64-benefit-card__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--px-purple-2);
  background: color-mix(in srgb, var(--px-purple) 12%, var(--px-surface-strong));
  border: 1px solid color-mix(in srgb, var(--px-purple) 20%, var(--px-border));
}
.px-library64-sample-card__icon .px-icon,
.px-library64-benefit-card__icon .px-icon {
  width: 22px;
  height: 22px;
}
.px-library64-sample-card h3,
.px-library64-benefit-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.px-library64-sample-card p,
.px-library64-benefit-card p {
  margin: 0;
  color: var(--px-muted);
  font-size: 13px;
  line-height: 1.9;
}
html[data-theme="light"] .px-library64-head,
html[data-theme="light"] .px-library64-detail__hero,
html[data-theme="light"] .px-library64-detail__samples,
html[data-theme="light"] .px-library64-detail__benefits {
  box-shadow: 0 24px 46px rgb(87 63 37 / .12);
}

@media (max-width: 1180px) {
  .px-library64-head {
    grid-template-columns: 1fr;
  }
  .px-library64-detail__hero {
    grid-template-columns: 1fr;
  }
  .px-library64-detail__fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .px-library64-page,
  .px-library64-detail {
    padding-top: 10px;
  }
  .px-library64-head {
    padding: 22px 18px;
    border-radius: 24px;
  }
  .px-library64-head__intro h2 {
    font-size: 28px;
  }
  .px-library64-head__intro p,
  .px-library64-subtitle p {
    font-size: 13px;
  }
  .px-library64-head__meta {
    grid-template-columns: 1fr;
  }
  .px-library64-filter {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
  }
  .px-library64-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-library64-detail__hero,
  .px-library64-detail__samples,
  .px-library64-detail__benefits {
    padding: 18px;
    border-radius: 24px;
  }
  .px-library64-section-head {
    align-items: start;
    flex-direction: column;
  }
  .px-library64-sample-grid,
  .px-library64-benefit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .px-library64-filter-dock {
    gap: 8px;
  }
  .px-library64-filter {
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 16px;
    justify-content: start;
  }
  .px-library64-filter__label {
    font-size: 12px;
  }
  .px-library64-filter__count {
    margin-inline-start: auto;
  }
  .px-library64-grid {
    grid-template-columns: 1fr;
  }
  .px-library64-card {
    max-width: 360px;
    width: 100%;
    justify-self: center;
  }
  .px-library64-card__summary {
    font-size: 11px;
  }
  .px-library64-card__chips span {
    font-size: 9px;
  }
  .px-library64-detail__content h1 {
    font-size: 34px;
  }
  .px-library64-detail__quick-meta {
    display: grid;
    grid-template-columns: 1fr;
  }
  .px-library64-detail__fact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .px-library64-detail__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .px-library64-detail__ghost-action,
  .px-library64-detail__actions .px-library62-detail__download {
    width: 100%;
  }
  .px-library64-toolbar {
    margin-bottom: 10px;
  }
}

@media (max-width: 560px) {
  .px-library64-head {
    padding: 18px 14px;
  }
  .px-library64-head__intro h2 {
    font-size: 24px;
  }
  .px-library64-stat {
    min-height: 66px;
    padding: 14px;
    border-radius: 18px;
  }
  .px-library64-stat strong {
    min-width: 54px;
    font-size: 24px;
  }
  .px-library64-filter {
    flex: 1 1 100%;
  }
  .px-library64-detail__fact-grid {
    grid-template-columns: 1fr;
  }
  .px-library64-sample-card,
  .px-library64-benefit-card {
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }
}

/* PromXAI Theme 1.3.65 — focused Books / Templates / Bundles library */
.px-library65-page {
  max-width: 1540px;
  padding-top: 24px;
  padding-bottom: 44px;
}

.px-library65-filters {
  width: min(100%, 720px);
  margin: 0 auto 24px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--px-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--px-surface) 88%, transparent);
  box-shadow: 0 14px 34px rgb(5 9 20 / .14);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.px-library65-filter {
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--px-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.px-library65-filter:hover {
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface-strong) 88%, transparent);
}
.px-library65-filter.is-active {
  color: #fff;
  border-color: rgb(255 255 255 / .12);
  background: linear-gradient(135deg, #6e35ed, #8d3df4 54%, #bc31d7);
  box-shadow: 0 10px 24px rgb(96 49 224 / .28);
}
.px-library65-filter .px-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.px-library65-filter small {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: rgb(255 255 255 / .07);
  font-size: 9px;
  line-height: 1;
}
.px-library65-filter.is-active small { background: rgb(255 255 255 / .16); }

.px-library65-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.px-library65-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--px-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--px-surface) 92%, transparent);
  box-shadow: 0 16px 40px rgb(0 0 0 / .12);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.px-library65-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--px-purple) 48%, var(--px-border));
  box-shadow: 0 24px 52px rgb(0 0 0 / .18), 0 0 0 1px rgb(122 76 255 / .06);
}
.px-library65-card[hidden] { display: none !important; }
.px-library65-card__visual {
  position: relative;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--px-bg-elevated);
}
.px-library65-card__cover {
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: color-mix(in srgb, var(--px-bg-elevated) 92%, transparent);
}
.px-library65-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 68%, rgb(5 8 17 / .2));
}
.px-library65-card__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform .38s cubic-bezier(.2,.75,.2,1);
}
.px-library65-card:hover .px-library65-card__cover img { transform: scale(1.025); }
.px-library65-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--px-muted);
}
.px-library65-card__placeholder .px-icon { width: 50px; height: 50px; }
.px-library65-card__badges {
  position: absolute;
  z-index: 3;
  inset: 10px 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.px-library65-badge {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  background: rgb(7 10 20 / .66);
  box-shadow: 0 8px 18px rgb(0 0 0 / .16);
  font-size: 9px;
  font-weight: 900;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.px-library65-badge .px-icon { width: 13px; height: 13px; }
.px-library65-badge.is-free { background: linear-gradient(135deg, #16865f, #24aa76); }
.px-library65-badge.is-pro { background: linear-gradient(135deg, #7a38ef, #d62dbd); }
.px-library65-badge.is-paid { background: linear-gradient(135deg, #6041c7, #2b65de); }
.px-library65-card__like {
  position: absolute;
  z-index: 4;
  inset: auto auto 10px 10px;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(7 10 20 / .58);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.px-library65-card__like:hover { transform: translateY(-1px); }
.px-library65-card__like.is-liked {
  color: #fff;
  background: linear-gradient(135deg, #7a38ef, #d62dbd);
}
.px-library65-card__like .px-icon { width: 17px; height: 17px; }
.px-library65-card__like.is-liked .px-icon { fill: currentColor; }
.px-library65-card__body { padding: 14px; }
.px-library65-card__title {
  min-height: 52px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--px-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.75;
}
.px-library65-card__footer {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--px-border) 78%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.px-library65-card__action {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--px-purple) 25%, var(--px-border));
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--px-purple-2);
  background: color-mix(in srgb, var(--px-purple) 7%, var(--px-surface-soft));
  font-size: 9px;
  font-weight: 900;
}
.px-library65-card__action .px-icon { width: 13px; height: 13px; }
html[dir="rtl"] .px-library65-card__action .px-icon { transform: rotate(180deg); }
.px-library65-card__state {
  max-width: 45%;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--px-muted);
  background: color-mix(in srgb, var(--px-surface-strong) 88%, transparent);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.px-library65-card__state.is-free { color: #2ab57f; }
.px-library65-card__state.is-price { color: var(--px-purple-2); }
.px-library65-empty {
  grid-column: 1 / -1;
  min-height: 230px;
  border: 1px dashed var(--px-border);
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--px-muted);
  background: color-mix(in srgb, var(--px-surface) 70%, transparent);
  text-align: center;
}
.px-library65-empty .px-icon { width: 34px; height: 34px; color: var(--px-purple-2); }

/* Focused single library item */
.px-library65-detail {
  max-width: 1450px;
  padding-top: 18px;
  padding-bottom: 44px;
}
.px-library65-detail__toolbar {
  min-height: 48px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.px-library65-detail__toolbar-actions { display: flex; align-items: center; gap: 8px; }
.px-library65-tool {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--px-border);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface) 88%, transparent);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.px-library65-tool:hover {
  transform: translateY(-1px);
  border-color: var(--px-border-strong);
  background: color-mix(in srgb, var(--px-surface-strong) 92%, transparent);
}
.px-library65-tool .px-icon { width: 16px; height: 16px; }
html[dir="rtl"] .px-library65-tool--back .px-icon { transform: rotate(180deg); }
.px-library65-tool.is-liked { color: #fff; background: linear-gradient(135deg, #7a38ef, #d62dbd); }
.px-library65-tool.is-liked .px-icon { fill: currentColor; }

.px-library65-detail__hero {
  display: grid;
  grid-template-columns: minmax(310px, 430px) minmax(0, 1fr);
  gap: 28px;
  padding: 24px;
  border: 1px solid var(--px-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 8%, rgb(112 71 255 / .11), transparent 28%),
    color-mix(in srgb, var(--px-surface) 91%, transparent);
  box-shadow: 0 22px 52px rgb(5 8 18 / .15);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.px-library65-detail__visual { min-width: 0; }
.px-library65-detail__cover-wrap {
  position: relative;
  width: min(100%, 360px);
  margin-inline: auto;
  padding: 12px;
  border: 1px solid var(--px-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--px-surface-strong) 84%, transparent);
}
.px-library65-detail__cover {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--px-bg-elevated);
  box-shadow: 0 25px 46px rgb(0 0 0 / .22);
}
.px-library65-detail__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.px-library65-detail__placeholder {
  color: var(--px-muted);
}
.px-library65-detail__placeholder .px-icon { width: 70px; height: 70px; }
.px-library65-detail__type-badge {
  position: absolute;
  z-index: 2;
  inset: 22px 22px auto auto;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgb(7 10 20 / .64);
  font-size: 10px;
  font-weight: 900;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.px-library65-detail__type-badge .px-icon { width: 14px; height: 14px; }
.px-library65-detail__thumbs {
  width: min(100%, 360px);
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.px-library65-detail__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--px-border);
  border-radius: 10px;
  background: var(--px-bg-elevated);
}
.px-library65-detail__thumb img { width: 100%; height: 100%; object-fit: cover; }

.px-library65-detail__info {
  min-width: 0;
  align-self: center;
}
.px-library65-detail__eyebrow {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--px-purple) 28%, var(--px-border));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--px-purple-2);
  background: color-mix(in srgb, var(--px-purple) 7%, var(--px-surface-soft));
  font-size: 10px;
  font-weight: 900;
}
.px-library65-detail__eyebrow .px-icon { width: 15px; height: 15px; }
.px-library65-detail__info h1 {
  margin: 16px 0 12px;
  max-width: 900px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.13;
}
.px-library65-detail__desc {
  max-width: 850px;
  color: var(--px-muted);
  font-size: 15px;
  line-height: 2;
}
.px-library65-detail__desc p { margin: 0; }
.px-library65-detail__tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.px-library65-detail__tags > span {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--px-border);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--px-muted);
  background: color-mix(in srgb, var(--px-surface-strong) 84%, transparent);
  font-size: 10px;
  font-weight: 900;
}
.px-library65-detail__tags .px-icon { width: 14px; height: 14px; }
.px-library65-detail__tags .is-free { color: #2ab57f; }
.px-library65-detail__tags .is-pro { color: var(--px-purple-2); }
.px-library65-detail__facts {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.px-library65-detail__facts > div {
  min-height: 78px;
  padding: 13px;
  border: 1px solid var(--px-border);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: color-mix(in srgb, var(--px-surface-strong) 84%, transparent);
}
.px-library65-detail__facts small { color: var(--px-muted); font-size: 9px; font-weight: 800; }
.px-library65-detail__facts strong { color: var(--px-text); font-size: 12px; line-height: 1.5; }
.px-library65-detail__actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, .8fr);
  gap: 9px;
}
.px-library65-detail__primary,
.px-library65-detail__secondary {
  min-height: 54px;
  padding: 0 18px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 900;
}
.px-library65-detail__primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #2b6df4, #7b42ed 52%, #c52fc5);
  box-shadow: 0 14px 30px rgb(82 52 219 / .26);
}
.px-library65-detail__primary:disabled { opacity: .62; cursor: not-allowed; }
.px-library65-detail__secondary {
  border: 1px solid var(--px-border);
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface-soft) 92%, transparent);
}
.px-library65-detail__primary .px-icon,
.px-library65-detail__secondary .px-icon { width: 17px; height: 17px; }
html[dir="rtl"] .px-library65-detail__secondary .px-icon { transform: rotate(180deg); }
.px-library65-detail__trust {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
}
.px-library65-detail__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--px-muted);
  font-size: 10px;
  font-weight: 800;
}
.px-library65-detail__trust .px-icon { width: 15px; height: 15px; color: var(--px-purple-2); }

.px-library65-section {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--px-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--px-surface) 90%, transparent);
  box-shadow: 0 15px 38px rgb(5 8 18 / .1);
}
.px-library65-section__head {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.px-library65-section__head h2 { margin: 0; font-size: clamp(20px, 2.3vw, 30px); }
.px-library65-section__head > span,
.px-library65-section__head > a { color: var(--px-purple-2); font-size: 11px; font-weight: 900; }
.px-library65-section__head > span .px-icon { width: 22px; height: 22px; }
.px-library65-samples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.px-library65-samples figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--px-border);
  border-radius: 14px;
  background: var(--px-bg-elevated);
}
.px-library65-samples img { width: 100%; height: 100%; object-fit: cover; }
.px-library65-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.px-library65-about-grid > div {
  min-height: 130px;
  padding: 16px;
  border: 1px solid var(--px-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
}
.px-library65-about-grid strong { color: var(--px-text); font-size: 14px; }
.px-library65-about-grid p { margin: 8px 0 0; color: var(--px-muted); font-size: 11px; line-height: 1.9; }
.px-library65-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.px-library65-related-card {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--px-border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--px-text);
  background: color-mix(in srgb, var(--px-surface-strong) 82%, transparent);
}
.px-library65-related-card > div {
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border-radius: 9px;
  background: var(--px-bg-elevated);
}
.px-library65-related-card img { width: 100%; height: 100%; object-fit: contain; }
.px-library65-related-card strong {
  font-size: 11px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html[data-theme="light"] .px-library65-card,
html[data-theme="light"] .px-library65-detail__hero,
html[data-theme="light"] .px-library65-section,
html[data-theme="light"] .px-library65-filters {
  box-shadow: 0 18px 38px rgb(88 65 38 / .1);
}

@media (max-width: 1280px) {
  .px-library65-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .px-library65-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-library65-detail__hero { grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 20px; padding: 18px; }
  .px-library65-detail__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-library65-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-library65-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .px-library65-page { padding-top: 14px; }
  .px-library65-filters {
    width: 100%;
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    justify-content: start;
    scrollbar-width: none;
  }
  .px-library65-filters::-webkit-scrollbar { display: none; }
  .px-library65-filter { min-width: 112px; }
  .px-library65-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .px-library65-card { border-radius: 15px; }
  .px-library65-card__visual { margin: 6px 6px 0; border-radius: 11px; }
  .px-library65-card__body { padding: 10px; }
  .px-library65-card__title { min-height: 45px; font-size: 12px; }
  .px-library65-card__footer { margin-top: 9px; padding-top: 8px; }
  .px-library65-card__action { min-height: 31px; padding-inline: 8px; font-size: 8px; }
  .px-library65-card__state { font-size: 8px; }
  .px-library65-detail__hero { grid-template-columns: 1fr; padding: 14px; border-radius: 22px; }
  .px-library65-detail__cover-wrap { width: min(100%, 330px); }
  .px-library65-detail__info h1 { font-size: 32px; }
  .px-library65-detail__actions { grid-template-columns: 1fr; }
  .px-library65-about-grid { grid-template-columns: 1fr; }
  .px-library65-section { padding: 14px; border-radius: 18px; }
}
@media (max-width: 520px) {
  .px-library65-grid { grid-template-columns: 1fr 1fr; }
  .px-library65-card__badges { inset: 7px 7px auto; gap: 4px; }
  .px-library65-badge { min-height: 24px; padding-inline: 7px; font-size: 8px; }
  .px-library65-card__like { width: 31px; height: 31px; inset: auto auto 7px 7px; }
  .px-library65-card__like .px-icon { width: 15px; height: 15px; }
  .px-library65-card__action .px-icon { display: none; }
  .px-library65-card__state { max-width: 50%; }
  .px-library65-detail__toolbar { align-items: stretch; }
  .px-library65-tool { min-height: 38px; padding-inline: 10px; }
  .px-library65-tool span { display: none; }
  .px-library65-detail__facts { grid-template-columns: 1fr 1fr; }
  .px-library65-samples { grid-template-columns: 1fr; }
  .px-library65-related-grid { grid-template-columns: 1fr; }
}

/* PromXAI Theme 1.3.66 — centered adaptive library grid */
.px-library65-filters {
  width: min(100%, 860px);
}

.px-library65-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
  justify-content: center;
  justify-items: center;
  align-items: stretch;
  gap: 18px;
}

.px-library65-card {
  width: 100%;
  max-width: 280px;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.px-library65-card__body {
  min-height: 132px;
  display: flex;
  flex-direction: column;
}

.px-library65-card__title {
  min-height: 52px;
  max-height: 52px;
}

.px-library65-card__footer {
  margin-top: auto;
}

html[data-theme="light"] .px-library65-card {
  border-color: color-mix(in srgb, var(--px-text) 15%, var(--px-border));
  box-shadow: 0 18px 38px rgb(88 65 38 / .13), 0 0 0 1px rgb(91 69 48 / .025);
}

html[data-theme="light"] .px-library65-card__visual {
  border: 1px solid color-mix(in srgb, var(--px-text) 10%, var(--px-border));
}

html[data-theme="light"] .px-library65-filter:not(.is-active) {
  border-color: color-mix(in srgb, var(--px-text) 7%, transparent);
}

@media (max-width: 1280px) {
  .px-library65-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: center;
  }
}

@media (max-width: 1040px) {
  .px-library65-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
  }
}

@media (max-width: 780px) {
  .px-library65-filters {
    width: 100%;
  }

  .px-library65-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: stretch;
    gap: 10px;
  }

  .px-library65-card {
    max-width: none;
  }

  .px-library65-card__body {
    min-height: 116px;
  }

  .px-library65-card__title {
    min-height: 45px;
    max-height: 45px;
  }
}

/* ========================================================================== 
   PromXAI Theme 1.3.68 — homepage-only adaptive complete-image grid
   Fixes mixed source ratios without changing archives or detail pages.
   ========================================================================== */
.home .px-browse-content {
  min-width: 0;
}

/* Five calm cards on supported desktop widths. This is deliberately scoped
   to the front page so the prompt archive keeps its previously approved
   browsing treatment. */
.home .px-prompt-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start;
  justify-content: stretch;
}

.home .px-prompt-grid > .px-prompt-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  aspect-ratio: 9 / 16 !important;
  contain-intrinsic-size: 214px 380px;
  background: #080d18;
}

html[data-theme="light"] .home .px-prompt-grid > .px-prompt-card {
  background: #eceff5;
}

.home .px-prompt-card__link {
  overflow: hidden;
  isolation: isolate;
  background: inherit;
}

/* The soft extension uses the same artwork only as a background fill. It is
   shown for mixed-ratio uploads so the real image remains fully visible
   without the large blank strips caused by object-fit: contain. */
.home .px-prompt-card__ambient {
  position: absolute;
  z-index: 0;
  inset: -14%;
  display: block !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(24px) brightness(.46) saturate(.86);
  opacity: .74;
  transform: scale(1.12);
  pointer-events: none;
}

html[data-theme="light"] .home .px-prompt-card__ambient {
  filter: blur(24px) brightness(.88) saturate(.72);
  opacity: .58;
}

.home .px-prompt-card.is-native-916 .px-prompt-card__ambient {
  opacity: 0;
}

.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;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: scale(1) !important;
  transition: filter .22s ease, opacity .22s ease !important;
}

/* Native 9:16 artwork naturally fills the full frame and therefore matches
   the successful left-most card from the user's screenshot. */
.home .px-prompt-card.is-native-916 .px-prompt-card__link > .px-prompt-card__image {
  object-fit: cover !important;
}

.home .px-prompt-card:not(.is-pro):hover .px-prompt-card__link > .px-prompt-card__image,
.home .px-prompt-card:not(.is-pro):focus-within .px-prompt-card__link > .px-prompt-card__image {
  transform: scale(1) !important;
}
.home .px-prompt-card.is-native-916.is-pro .px-prompt-card__ambient {
  opacity: 0;
}

.home .px-prompt-grid > .px-empty-state,
.home .px-prompt-grid > [data-empty-state] {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 1179px) and (min-width: 1050px) {
  .home .px-prompt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 1049px) and (min-width: 761px) {
  .home .px-prompt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  .home .px-prompt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .home .px-prompt-grid > .px-prompt-card {
    border-radius: 15px;
    contain-intrinsic-size: 170px 302px;
  }
}

@media (max-width: 360px) {
  .home .px-prompt-grid {
    gap: 8px !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.3.119 — prompt-card CTA centering polish
   ======================================================================== */
.px-card-view {
  justify-content: center;
  text-align: center;
  padding-inline: 14px 16px;
  gap: 9px;
}

.px-card-view .px-lang-ar,
.px-card-view .px-lang-en {
  flex: 0 1 auto;
  text-align: center;
}

.px-card-view .px-icon {
  width: 16px;
  height: 16px;
  opacity: .95;
}

html[dir="rtl"] .px-card-view {
  padding-inline: 16px 14px;
}


/* ========================================================================
   PromXAI Theme 1.3.120 — robust prompt-card action layout
   ======================================================================== */
.px-card-actions {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px;
  padding: 5px;
}

.px-card-share {
  width: 34px;
}

.px-card-view {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-inline: 5px;
  gap: 4px;
  overflow: hidden;
  justify-content: center;
}

.px-card-view__label {
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}

.px-card-view__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}

.px-card-view__icon .px-icon {
  width: 12px;
  height: 12px;
  opacity: 1;
}

html[data-theme="light"] .px-card-view__icon {
  background: rgb(255 255 255 / .22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .75);
}

html[dir="rtl"] .px-card-view__icon .px-icon {
  transform: rotate(180deg);
}


/* ========================================================================
   PromXAI Theme 1.3.121 — category balance + card action polish
   ======================================================================== */
.px-browse-layout {
  grid-template-columns: 242px minmax(0, 1fr);
  gap: 22px;
}

.px-categories {
  padding: 15px 13px;
}

.px-categories__head {
  padding: 4px 8px 13px;
}

.px-category-button {
  min-height: 48px;
  padding: 8px 10px 8px 12px;
  gap: 8px;
}

.px-category-button__label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.px-category-button__label .px-lang-ar,
.px-category-button__label .px-lang-en {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.px-category-button__line {
  flex: 1 1 18px;
  min-width: 10px;
  max-width: 34px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(148 163 184 / 0), rgb(148 163 184 / .26), rgb(148 163 184 / 0));
}

.px-category-button__count {
  flex: 0 0 auto;
  min-width: 30px;
  height: 30px;
  padding-inline: 7px;
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--px-text);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.px-category-button.is-active .px-category-button__count {
  color: #fff;
  border-color: rgb(255 255 255 / .20);
  background: rgb(255 255 255 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
}

html[data-theme="light"] .px-category-button__count {
  border-color: rgb(107 114 128 / .10);
  background: rgb(255 255 255 / .72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 6px 16px rgba(106, 116, 148, .08);
}

html[data-theme="light"] .px-category-button__line {
  background: linear-gradient(90deg, rgb(148 163 184 / 0), rgb(148 163 184 / .34), rgb(148 163 184 / 0));
}

.px-card-actions {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
}

.px-card-share,
.px-card-view {
  height: 39px;
  border-radius: 12px;
}

.px-card-share {
  width: 36px;
  border: 1px solid rgb(255 255 255 / .16);
  background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .05));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 8px 20px rgba(9, 14, 29, .18);
}

.px-card-share:hover,
.px-card-share:focus-visible {
  border-color: rgb(169 139 255 / .48);
  background: linear-gradient(180deg, rgb(124 58 237 / .22), rgb(37 99 235 / .18));
}

.px-card-share .px-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.05;
}

html[data-theme="light"] .px-card-share {
  color: #5f43c5;
  border-color: rgba(91, 69, 175, .15);
  background: linear-gradient(180deg, #ffffff, #f3f6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 20px rgba(70, 82, 118, .10);
}

.px-card-view {
  padding-inline: 8px 10px;
  gap: 8px;
  justify-content: space-between;
}

html[dir="rtl"] .px-card-view {
  padding-inline: 10px 8px;
}

.px-card-view__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.px-card-view__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.px-card-view__icon .px-icon {
  width: 12px;
  height: 12px;
}

.px-pro-badge {
  border-color: rgb(255 255 255 / .22);
  box-shadow: 0 8px 20px rgb(124 58 237 / .28), inset 0 1px 0 rgb(255 255 255 / .14);
}

.px-prompt-card.is-pro .px-card-lock {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border-color: rgb(255 255 255 / .34);
  background: linear-gradient(145deg, rgba(50, 112, 255, .82), rgba(124, 58, 237, .84) 58%, rgba(192, 38, 211, .72));
  box-shadow: 0 12px 28px rgba(30, 18, 88, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
}

html[data-theme="light"] .px-prompt-card.is-pro .px-card-lock {
  border-color: rgba(124, 58, 237, .16);
  background: linear-gradient(145deg, #ffffff, #eef2ff);
  color: #6f39df;
  box-shadow: 0 10px 24px rgba(85, 98, 138, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html[data-theme="light"] .px-prompt-card.is-pro .px-card-lock .px-icon {
  stroke: currentColor;
}


/* ========================================================================
   Legacy compact category rail.
   Grid-column ownership moved to home-card-stability.css in 1.4.15.66 so
   this older section no longer declares a competing six-card layout.
   ======================================================================== */
@media (min-width: 1180px) {
  .home .px-browse-layout {
    grid-template-columns: 176px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .home .px-categories {
    padding: 12px 10px !important;
    border-radius: 17px !important;
  }

  .home .px-categories__head {
    padding: 3px 6px 10px !important;
  }

  .home .px-categories__head h2 {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }

  .home .px-category-button {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    min-height: 42px !important;
    padding: 6px 7px !important;
    gap: 7px !important;
  }

  .home .px-category-button__line {
    display: none !important;
  }

  .home .px-category-button__label {
    min-width: 0 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-wrap: nowrap !important;
  }

  .home .px-category-button__label .px-lang-ar,
  .home .px-category-button__label .px-lang-en {
    display: block !important;
    overflow: visible !important;
    white-space: nowrap !important;
    -webkit-line-clamp: unset !important;
  }

  .home .px-category-button__count {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

}

@media (max-width: 1179px) and (min-width: 1050px) {
  .home .px-browse-layout {
    grid-template-columns: 164px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home .px-categories {
    padding: 10px 8px !important;
  }

  .home .px-category-button {
    min-height: 40px !important;
    padding: 6px !important;
  }

  .home .px-category-button__label {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.3.124 — show one category language at a time
   ======================================================================== */
.px-categories .px-category-button__label .px-lang-en {
  display: none !important;
}

.px-categories .px-category-button__label .px-lang-ar {
  display: block !important;
}

html[data-ui-lang="en"] .px-categories .px-category-button__label .px-lang-ar {
  display: none !important;
}

html[data-ui-lang="en"] .px-categories .px-category-button__label .px-lang-en {
  display: block !important;
}

.px-categories .px-category-button__label .px-lang-ar,
.px-categories .px-category-button__label .px-lang-en {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
}


/* ===== Source: header-stability-1-3-100.css ===== */
/* PromXAI Theme 1.3.100 — keep the public header in one fixed visual position in AR and EN. */
.px-header .px-header__inner{
  direction:rtl!important;
}
.px-header .px-brand,
.px-header .px-nav,
.px-header .px-header-search,
.px-header .px-header-actions{
  min-width:0;
}
/* The overall skeleton never mirrors. Only the language inside text controls changes. */
html[data-ui-lang="ar"] .px-header .px-nav,
html[data-ui-lang="ar"] .px-header .px-header-search{direction:rtl;text-align:right}
html[data-ui-lang="en"] .px-header .px-nav,
html[data-ui-lang="en"] .px-header .px-header-search{direction:ltr;text-align:left}
.px-header .px-header-actions{direction:rtl!important}
.px-header .px-brand{direction:ltr!important}
html[data-ui-lang="ar"] .px-header-search input{direction:rtl;text-align:right}
html[data-ui-lang="en"] .px-header-search input{direction:ltr;text-align:left}


/* PromXAI 1.4.0 stable design-token aliases. */
:root {
  --px-canvas: var(--px-bg);
  --px-panel: var(--px-surface);
  --px-panel-strong: var(--px-surface-strong);
  --px-line-soft: var(--px-border);
  --px-line-strong: var(--px-border-strong);
  --px-text-primary: var(--px-text);
  --px-text-secondary: var(--px-muted);
  --px-accent-blue: var(--px-blue);
  --px-accent-purple: var(--px-purple);
  --px-accent-pink: var(--px-pink);
}


/* ========================================================================
   PromXAI Theme 1.4.15.23 — balanced mobile browse spacing
   Applies to the real browse routes (front page, prompt archive and category
   archive): a small header gap, compact category rail and a close type row.
   ======================================================================== */
@media (max-width: 760px) {
  body.home .px-home-main {
    padding-top: 8px !important;
  }

  body.post-type-archive-promxai_prompt .px-browse,
  body.tax-promxai_category .px-browse {
    padding-top: 8px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-layout {
    gap: 5px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-categories {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    gap: 5px !important;
    border-radius: 12px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 10px !important;
    gap: 5px !important;
    border-radius: 10px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button__line {
    display: none !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button__label {
    font-size: 12.5px !important;
    line-height: 1 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button__count {
    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    font-size: 10.5px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-toolbar {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-type-tabs {
    padding: 2px !important;
    border-radius: 12px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-type-tabs button {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 8px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }
}


/* ========================================================================
   PromXAI Theme 1.4.15.27 — mobile browse density, account navigation and
   professional favorites-card layout. These rules are intentionally scoped.
   ======================================================================== */
@media (max-width: 760px) {
  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-home-main,
  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse {
    padding-top: 9px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-categories {
    margin: 0 0 5px !important;
    padding: 3px !important;
    gap: 4px !important;
    min-height: 0 !important;
    border-radius: 13px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 5px 11px !important;
    border-radius: 11px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button__label {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-category-button__count {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-browse-toolbar {
    margin: 0 0 7px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-type-tabs {
    padding: 3px !important;
    border-radius: 13px !important;
  }

  :is(body.home, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-type-tabs button {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 8px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
  }
}

/* Account dashboard: three navigation choices, logout on its own row. */
.px-account-actions--navigation {
  width: min(100%, 900px);
  margin-inline: auto;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
}

.px-account-actions--navigation > a {
  width: 100%;
  min-width: 0;
}

.px-account-actions--navigation .px-account-logout {
  grid-column: 1 / -1;
  width: min(100%, 280px);
  justify-self: center;
}

.px-account-stat__icon {
  font-size: 0 !important;
}

.px-account-stat__icon::before,
.px-account-stat__icon::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  .px-account-actions--navigation {
    grid-template-columns: 1fr;
  }
  .px-account-actions--navigation .px-account-logout {
    grid-column: auto;
    width: 100%;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.0-RC5 — brighter navy glass polish
   Dark mode only. No layout or behavior changes.
   ======================================================================== */
html[data-theme="dark"] body,
html:not([data-theme]) body {
  background:
    radial-gradient(circle at 8% 4%, rgba(90, 145, 255, .17), transparent 26rem),
    radial-gradient(circle at 92% 3%, rgba(194, 108, 255, .12), transparent 28rem),
    radial-gradient(circle at 50% 104%, rgba(92, 157, 255, .09), transparent 34rem),
    linear-gradient(180deg, #1a3053 0%, #162847 46%, #142441 100%) !important;
}

html[data-theme="dark"] .px-prompt-card,
html[data-theme="dark"] .px-phone-home-card__link,
html[data-theme="dark"] .px-library74-card,
html[data-theme="dark"] .px-library-card,
html[data-theme="dark"] .px-library62-card,
html[data-theme="dark"] .px-home-promo-card,
html[data-theme="dark"] .px-main-visual,
html[data-theme="dark"] .px-related-mini {
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 10px 24px rgba(4, 8, 20, .12), inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .home .px-prompt-grid > .px-prompt-card,
html[data-theme="dark"] body.home .px-phone-home-card__link {
  background: linear-gradient(180deg, rgba(17, 29, 52, .74), rgba(13, 23, 42, .66)) !important;
}

html[data-theme="dark"] :where(.px-prompt-card__image, .px-phone-home-card__image, .px-library74-card__image, .px-library-card img, .px-main-visual img, .px-main-visual video) {
  outline: 1px solid rgba(255,255,255,.09);
  outline-offset: -1px;
  border-radius: inherit;
}

@media (max-width:760px) {
  html[data-theme="dark"] body.home .px-phone-home-card__link {
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 12px 26px rgba(3, 9, 24, .14), inset 0 1px 0 rgba(255,255,255,.06);
  }
}


/* ========================================================================
   PromXAI Theme 2.0.0-RC6 — polished card float, light-mode card edges,
   and softer loading placeholders.
   ======================================================================== */
html[data-theme="light"] .px-prompt-card,
html[data-theme="light"] .px-library74-card,
html[data-theme="light"] .px-library-card,
html[data-theme="light"] .px-library62-card,
html[data-theme="light"] .px-main-visual,
html[data-theme="light"] .px-related-mini {
  border: 1px solid rgba(115, 132, 170, .12) !important;
  box-shadow: 0 14px 32px rgba(86, 103, 143, .10), 0 2px 8px rgba(86, 103, 143, .05) !important;
}

html[data-theme="dark"] .px-prompt-card,
html[data-theme="dark"] .px-library74-card,
html[data-theme="dark"] .px-library-card,
html[data-theme="dark"] .px-library62-card,
html[data-theme="dark"] .px-main-visual,
html[data-theme="dark"] .px-related-mini {
  box-shadow: 0 16px 34px rgba(4, 8, 20, .14), 0 0 18px rgba(96, 130, 255, .05), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.px-prompt-card__placeholder,
body.home .px-phone-home-card__link:has(.px-prompt-card__placeholder),
body.home .px-phone-home-card__placeholder {
  position: relative;
  overflow: hidden;
  color: color-mix(in srgb, var(--px-muted) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--px-surface) 92%, white 4%), color-mix(in srgb, var(--px-surface) 98%, black 2%)) !important;
}

.px-prompt-card__placeholder::before,
body.home .px-phone-home-card__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 48%, transparent 100%);
  transform: translateX(-100%);
  animation: pxShimmer 1.35s linear infinite;
}

@keyframes pxShimmer {
  100% { transform: translateX(100%); }
}


/* 2.0.0-RC7 — SVG intrinsic-size firewall for first paint / cache refresh. */
.px-icon {
  width: var(--px-icon-size, 1em);
  height: var(--px-icon-size, 1em);
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  vertical-align: middle;
  stroke-width: var(--px-icon-stroke, 1.9);
}


/* 2.0.16 — presentation-level media download guard.
   Controlled download buttons remain functional; direct image/video browser
   callouts, drag and selection are suppressed on media explicitly marked by
   PromXAI. This is UX hardening, not DRM. */
.promxai-ui img[data-no-download],
.promxai-ui video[data-no-download],
.promxai-ui .px-engine-proof img,
.promxai-ui .px-pro-v2 img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}


/* ========================================================================
   2.0.21-test77 — Global logout confirmation
   Must be available on Home, Library, Favorites and every secondary page.
   ======================================================================== */
html.px-logout-dialog-open,
body.px-logout-dialog-open{
  overflow:hidden !important;
}
.px-logout-confirm{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:2147483646 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  pointer-events:auto !important;
  isolation:isolate !important;
}
.px-logout-confirm[hidden]{
  display:none !important;
}
.px-logout-confirm__backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:rgb(2 8 23 / .66) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
.px-logout-confirm__panel{
  position:relative !important;
  z-index:1 !important;
  width:min(420px,calc(100vw - 36px)) !important;
  margin:0 !important;
  padding:24px !important;
  border:1px solid rgb(136 153 255 / .22) !important;
  border-radius:22px !important;
  display:grid !important;
  justify-items:center !important;
  gap:12px !important;
  color:#f8fbff !important;
  text-align:center !important;
  background:linear-gradient(145deg,rgb(18 37 75 / .98),rgb(13 25 55 / .98)) !important;
  box-shadow:0 28px 80px rgb(0 0 0 / .38),inset 0 1px 0 rgb(255 255 255 / .08) !important;
}
.px-logout-confirm__icon{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  background:linear-gradient(135deg,#258fea,#645de9 58%,#b94ed2) !important;
}
.px-logout-confirm__icon .px-icon{
  width:22px !important;
  height:22px !important;
}
.px-logout-confirm__panel h2{
  margin:0 !important;
  color:#fff !important;
  font-size:21px !important;
  line-height:1.2 !important;
}
.px-logout-confirm__panel p{
  margin:0 !important;
  color:rgb(226 235 255 / .78) !important;
  font-size:12px !important;
  line-height:1.7 !important;
}
.px-logout-confirm__actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
  margin-top:5px !important;
}
.px-logout-confirm__actions :is(button,a){
  min-height:44px !important;
  border-radius:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:inherit !important;
  font-size:11px !important;
  font-weight:850 !important;
  text-decoration:none !important;
  cursor:pointer !important;
}
.px-logout-confirm__cancel{
  border:1px solid rgb(150 174 225 / .18) !important;
  color:#e8efff !important;
  background:rgb(255 255 255 / .055) !important;
}
.px-logout-confirm__confirm{
  border:1px solid rgb(255 255 255 / .12) !important;
  color:#fff !important;
  background:linear-gradient(135deg,#258fea,#655de9 55%,#bc4dcd) !important;
}
html[data-theme="light"] .px-logout-confirm__backdrop{
  background:rgb(12 28 55 / .38) !important;
}
html[data-theme="light"] .px-logout-confirm__panel{
  color:#173552 !important;
  background:linear-gradient(145deg,#fff,#eef5ff) !important;
  border-color:rgb(63 92 137 / .16) !important;
  box-shadow:0 28px 70px rgb(25 48 86 / .20),inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .px-logout-confirm__panel h2{
  color:#102e4c !important;
}
html[data-theme="light"] .px-logout-confirm__panel p{
  color:#59708a !important;
}
html[data-theme="light"] .px-logout-confirm__cancel{
  color:#24425f !important;
  border-color:rgb(58 85 124 / .14) !important;
  background:#f2f6fc !important;
}


/* Shared icon-origin animation used by canonical desktop rails. */
@keyframes pxIconOrbitGlow {
  0%   { transform:rotate(0deg); opacity:.16; }
  45%  { opacity:.58; }
  100% { transform:rotate(360deg); opacity:.16; }
}
@keyframes pxIconPulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgb(64 184 255 / .00), 0 8px 18px rgb(28 104 210 / .12); }
  50%     { box-shadow:0 0 0 5px rgb(70 189 255 / .09), 0 8px 24px rgb(91 85 235 / .20); }
}


/* ========================================================================
   2.0.21-test80 — Unified floating icon motion
   The light lives INSIDE the icon; no rotating outline and no rail-edge beam.
   ======================================================================== */
@keyframes pxRailIconFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-1.5px) scale(1.015); }
}
@keyframes pxRailIconInnerGlow {
  0%,100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .10),
      inset 0 0 0 1px rgb(104 193 255 / .10),
      0 5px 14px rgb(17 69 143 / .12);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .18),
      inset 0 0 18px rgb(74 190 255 / .13),
      inset 0 0 0 1px rgb(135 104 255 / .18),
      0 7px 18px rgb(63 82 205 / .16);
  }
}