/* ========================================================================
   PromXAI Theme 2.0.21-test357 — Visual System Foundation
   One semantic palette, typography contract and icon language for every mode.
   Layout, content, media geometry and application logic remain unchanged.
   ======================================================================== */

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

  /* Brand accents: vivid for identity, not used as ordinary surface colors. */
  --px-accent-blue: #3b82f6;
  --px-accent-purple: #7a5af8;
  --px-accent-violet: #9b82ff;
  --px-accent-magenta: #c44bc2;
  --px-accent-cyan: #38bdf8;
  --px-accent-blue-rgb: 59 130 246;
  --px-accent-purple-rgb: 122 90 248;
  --px-accent-magenta-rgb: 196 75 194;

  /* Accessible action colors: white text remains readable across the gradient. */
  --px-action-blue: #2c63d4;
  --px-action-purple: #6346cf;
  --px-action-magenta: #9c3798;
  --px-accent-gradient: linear-gradient(110deg, var(--px-action-blue) 0%, var(--px-action-purple) 56%, var(--px-action-magenta) 100%);
  --px-accent-gradient-soft: linear-gradient(135deg, rgb(59 130 246 / .13), rgb(122 90 248 / .10) 55%, rgb(196 75 194 / .065));

  /* Shared typography and icon geometry. Arabic keeps natural tracking;
     English opts into compact display tracking below. Unsupported synthetic
     font weights are disabled by the foundation stylesheet. */
  --px-font-weight-regular: 400;
  --px-font-weight-medium: 500;
  --px-font-weight-semibold: 600;
  --px-font-weight-bold: 700;
  --px-heading-tracking: 0;
  --px-label-tracking: 0;
  --px-icon-sm: 16px;
  --px-icon-md: 20px;
  --px-icon-lg: 24px;
  --px-icon-stroke: 1.9;

  /* Content-category identity is vivid; filled actions use separate accessible
     shades so white labels retain at least WCAG AA contrast. */
  --px-category-image: #4f8cff;
  --px-category-image-alt: #55d7ff;
  --px-category-image-action: #2c63d4;
  --px-category-video: #e458c6;
  --px-category-video-alt: #a95cff;
  --px-category-video-action: #9c3798;
  --px-category-tools: #24c99a;
  --px-category-tools-alt: #4de0cf;
  --px-category-tools-action: #137a63;
  --px-category-commands: #8b75ff;
  --px-category-commands-alt: #5b8cff;
  --px-category-commands-action: #5d46c9;
  --px-category-news: #26bdf2;
  --px-category-news-alt: #4f8cff;
  --px-category-news-action: #176f9f;
  --px-category-library: #f3a34d;
  --px-category-library-alt: #ffd36a;
  --px-category-library-action: #9a5b0a;

  /* Midnight Sapphire canvas and deliberately opaque reading surfaces. */
  --px-canvas: #142845;
  --px-canvas-subtle: #18304f;
  --px-canvas-deep: #0f2038;
  --px-surface-1: rgb(25 48 80 / .94);
  --px-surface-2: rgb(29 55 91 / .98);
  --px-surface-3: #233f66;
  --px-surface-muted: rgb(180 201 235 / .070);
  --px-surface-hover-color: #284872;
  --px-control-surface: rgb(28 52 86 / .94);
  --px-control-hover: rgb(35 65 106 / .99);
  --px-glass-header: rgb(18 36 62 / .95);
  --px-glass-nav: rgb(22 43 72 / .97);

  /* Unified public-shell tokens: Home, Library, Favorites and tablet. */
  --px-ui-rail-bg: rgb(20 40 68 / .96);
  --px-ui-rail-soft: rgb(255 255 255 / .060);
  --px-ui-rail-hover: rgb(255 255 255 / .095);
  --px-ui-rail-line: rgb(164 190 232 / .17);
  --px-ui-rail-line-strong: rgb(151 181 229 / .31);
  --px-ui-rail-shadow: 22px 0 58px rgb(5 15 34 / .22);
  --px-ui-dock-bg: rgb(20 40 68 / .96);
  --px-ui-sort-bg: rgb(25 48 80 / .88);
  --px-ui-panel: rgb(25 48 80 / .94);
  --px-ui-panel-soft: rgb(180 201 235 / .070);

  /* Content. */
  --px-text-primary: #f7f9fd;
  --px-text-strong: #ffffff;
  --px-text-secondary: #b5c0d3;
  --px-text-soft: #b5c0d3;
  --px-text-tertiary: #8492a8;
  --px-text-control: #d5ddeb;
  --px-text-inverse: #ffffff;

  /* Separation: neutral by default, brand-colored only when active. */
  --px-line: rgb(148 164 194 / .15);
  --px-line-soft: rgb(148 164 194 / .085);
  --px-line-strong: rgb(117 139 178 / .30);
  --px-line-active: rgb(122 90 248 / .48);
  --px-focus-color: rgb(122 90 248 / .72);
  --px-focus-shadow: 0 0 0 3px rgb(122 90 248 / .16), 0 0 0 1px rgb(122 90 248 / .66);

  /* One neutral elevation system. Colored glow is a separate active-state token. */
  --px-shadow-control: 0 8px 20px rgb(0 0 0 / .16), inset 0 1px 0 rgb(255 255 255 / .045);
  --px-shadow-soft: 0 12px 30px rgb(0 0 0 / .18);
  --px-shadow-card: 0 20px 50px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .040);
  --px-shadow-card-hover: 0 26px 62px rgb(0 0 0 / .34), inset 0 1px 0 rgb(255 255 255 / .055);
  --px-shadow-panel: -16px 0 36px rgb(0 0 0 / .12), 0 26px 62px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .045);
  --px-shadow-brand: 0 12px 28px rgb(70 58 177 / .24), inset 0 1px 0 rgb(255 255 255 / .14);
  --px-glow-active: 0 0 0 3px rgb(122 90 248 / .085), 0 0 22px rgb(122 90 248 / .13);

  /* Status. */
  --px-success: #29c98a;
  --px-success-text: #bff5de;
  --px-success-surface: rgb(18 82 59 / .34);
  --px-warning: #f5b94c;
  --px-danger: #ff6687;
  --px-danger-text: #ffc4d1;
  --px-danger-surface: rgb(102 30 51 / .35);
  --px-info: #42bff2;

  /* Compatibility aliases: explicit and non-circular. */
  --px-bg: #142845;
  --px-bg-elevated: #18304f;
  --px-bg-deep: #0f2038;
  --px-panel: rgb(25 48 80 / .94);
  --px-panel-strong: rgb(29 55 91 / .98);
  --px-surface: rgb(25 48 80 / .94);
  --px-surface-strong: rgb(29 55 91 / .98);
  --px-surface-soft: rgb(180 201 235 / .070);
  --px-surface-hover: #284872;
  --px-border: rgb(148 164 194 / .15);
  --px-border-strong: rgb(117 139 178 / .30);
  --px-border-vivid: rgb(122 90 248 / .48);
  --px-text: #f7f9fd;
  --px-muted: #b5c0d3;
  --px-muted-2: #8492a8;
  --px-purple: #7a5af8;
  --px-purple-2: #9b82ff;
  --px-pink: #c44bc2;
  --px-blue: #3b82f6;
  --px-cyan: #38bdf8;
  --px-brand-blue: #3b82f6;
  --px-brand-purple: #7a5af8;
  --px-brand-purple-bright: #9b82ff;
  --px-brand-pink: #c44bc2;
  --px-brand-cyan: #38bdf8;
  --px-brand-gradient: var(--px-accent-gradient);
  --px-glow: rgb(122 90 248 / .15);
  --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);

  --px-card: rgb(25 48 80 / .96);
  --px-v110-blue: #3b82f6;
  --px-v110-purple: #7a5af8;
  --px-v110-pink: #c44bc2;
  --px-v110-cyan: #38bdf8;
  --px-v110-bg: #142845;
  --px-v110-bg-soft: #18304f;
  --px-v110-glass: rgb(25 48 80 / .92);
  --px-v110-glass-strong: rgb(29 55 91 / .98);
  --px-v110-line: rgb(122 90 248 / .25);
  --px-v110-line-soft: rgb(148 164 194 / .10);
  --px-v110-text: #f7f9fd;
  --px-v110-muted: #b5c0d3;
  --px-v110-field: rgb(18 37 64 / .86);
  --px-v110-shadow: var(--px-shadow-card);

  --px-detail-glass: rgb(25 48 80 / .92);
  --px-detail-glass-strong: rgb(29 55 91 / .98);
  --px-detail-glass-soft: rgb(180 201 235 / .070);
  --px-detail-stroke: rgb(148 164 194 / .14);
  --px-detail-stroke-soft: rgb(148 164 194 / .085);
  --px-detail-stroke-active: rgb(122 90 248 / .46);
  --px-detail-ink: #f7f9fd;
  --px-detail-muted: #b5c0d3;
  --px-detail-shadow: var(--px-shadow-card);
  --px-detail-inner-highlight: inset 0 1px 0 rgb(255 255 255 / .050);
  --px-detail-icon-bg: rgb(255 255 255 / .060);
  --px-detail-icon-hover: var(--px-accent-gradient);

  --px-139-bg: #142845;
  --px-139-bg-soft: #18304f;
  --px-139-text: #f7f9fd;
  --px-139-muted: #b5c0d3;
  --px-139-line: rgb(148 164 194 / .14);
  --px-139-glass: rgb(25 48 80 / .92);
  --px-139-glass-strong: rgb(29 55 91 / .98);

  accent-color: var(--px-accent-purple);
}


/* PromXAI 2.0.21-test256 — strict cross-browser colour-scheme contract.
   The selected PromXAI palette is author-owned. The first declaration is a
   compatibility fallback; the `only` declaration forbids the user agent from
   applying a second Auto/Force-Dark colour transform to the finished UI. */
html[data-theme="dark"],
html.px-samsung-internet[data-theme="dark"] {
  color-scheme: dark !important;
  color-scheme: only dark !important;
  background-color:#142845 !important;
}
html[data-theme="light"],
html.px-samsung-internet[data-theme="light"] {
  color-scheme: light !important;
  color-scheme: only light !important;
  background-color:#f5f7fb !important;
}

/* Device preference may select browser chrome, but it must not repaint the
   author-owned PromXAI palette. data-theme remains the site authority. */
@media (prefers-color-scheme: dark) {
  html.px-phone-ui[data-theme="dark"] {
    color-scheme: dark !important;
    color-scheme: only dark !important;
    background-color:#142845 !important;
  }
  html.px-phone-ui[data-theme="light"] {
    color-scheme: light !important;
    color-scheme: only light !important;
    background-color:#f5f7fb !important;
  }
}

html[data-theme="light"] {

  /* Slightly darker brand tones retain contrast against white. */
  --px-accent-blue: #2f6fda;
  --px-accent-purple: #684bd8;
  --px-accent-violet: #7d63e5;
  --px-accent-magenta: #a83ca3;
  --px-accent-cyan: #177fac;
  --px-accent-blue-rgb: 47 111 218;
  --px-accent-purple-rgb: 104 75 216;
  --px-accent-magenta-rgb: 168 60 163;
  --px-action-blue: #2c63d4;
  --px-action-purple: #6346cf;
  --px-action-magenta: #9c3798;
  --px-accent-gradient: linear-gradient(110deg, var(--px-action-blue) 0%, var(--px-action-purple) 56%, var(--px-action-magenta) 100%);
  --px-accent-gradient-soft: linear-gradient(135deg, rgb(47 111 218 / .080), rgb(104 75 216 / .060) 55%, rgb(168 60 163 / .040));

  /* Porcelain Ice canvas with stable white reading surfaces. */
  --px-canvas: #f5f7fb;
  --px-canvas-subtle: #eef2f7;
  --px-canvas-deep: #e7ecf3;
  --px-surface-1: rgb(255 255 255 / .94);
  --px-surface-2: #ffffff;
  --px-surface-3: #f8fafd;
  --px-surface-muted: rgb(38 54 82 / .040);
  --px-surface-hover-color: #ffffff;
  --px-control-surface: rgb(255 255 255 / .92);
  --px-control-hover: #ffffff;
  --px-glass-header: rgb(249 251 254 / .92);
  --px-glass-nav: rgb(255 255 255 / .97);

  /* Same physical shell and contrast system as dark mode. */
  --px-ui-rail-bg: rgb(255 255 255 / .95);
  --px-ui-rail-soft: rgb(31 43 69 / .045);
  --px-ui-rail-hover: rgb(31 43 69 / .075);
  --px-ui-rail-line: rgb(47 60 89 / .12);
  --px-ui-rail-line-strong: rgb(65 82 116 / .22);
  --px-ui-rail-shadow: 22px 0 54px rgb(43 56 91 / .095);
  --px-ui-dock-bg: rgb(255 255 255 / .94);
  --px-ui-sort-bg: rgb(255 255 255 / .78);
  --px-ui-panel: rgb(255 255 255 / .94);
  --px-ui-panel-soft: rgb(38 54 82 / .040);

  --px-text-primary: #0f1728;
  --px-text-strong: #0b1322;
  --px-text-secondary: #46566f;
  --px-text-soft: #46566f;
  --px-text-tertiary: #59677c;
  --px-text-control: #2b3c55;
  --px-text-inverse: #ffffff;

  --px-line: rgb(46 61 90 / .12);
  --px-line-soft: rgb(46 61 90 / .070);
  --px-line-strong: rgb(70 92 132 / .24);
  --px-line-active: rgb(104 75 216 / .38);
  --px-focus-color: rgb(104 75 216 / .62);
  --px-focus-shadow: 0 0 0 3px rgb(104 75 216 / .10), 0 0 0 1px rgb(104 75 216 / .54);

  --px-shadow-control: 0 8px 20px rgb(42 56 84 / .065), inset 0 1px 0 rgb(255 255 255 / .98);
  --px-shadow-soft: 0 10px 26px rgb(42 56 84 / .065);
  --px-shadow-card: 0 18px 44px rgb(42 56 84 / .095), inset 0 1px 0 rgb(255 255 255 / .98);
  --px-shadow-card-hover: 0 24px 54px rgb(42 56 84 / .13), inset 0 1px 0 rgb(255 255 255 / .99);
  --px-shadow-panel: -14px 0 30px rgb(63 78 110 / .055), 0 24px 56px rgb(42 56 84 / .12), inset 0 1px 0 rgb(255 255 255 / .99);
  --px-shadow-brand: 0 11px 26px rgb(76 59 174 / .18), inset 0 1px 0 rgb(255 255 255 / .16);
  --px-glow-active: 0 0 0 3px rgb(104 75 216 / .060), 0 0 18px rgb(104 75 216 / .075);

  --px-success: #197b57;
  --px-success-text: #12583f;
  --px-success-surface: rgb(229 246 237 / .96);
  --px-warning: #a96512;
  --px-danger: #b63857;
  --px-danger-text: #842741;
  --px-danger-surface: rgb(254 237 242 / .96);
  --px-info: #176f9f;

  /* Compatibility aliases. */
  --px-bg: #f5f7fb;
  --px-bg-elevated: #eef2f7;
  --px-bg-deep: #e7ecf3;
  --px-panel: rgb(255 255 255 / .94);
  --px-panel-strong: #ffffff;
  --px-surface: rgb(255 255 255 / .94);
  --px-surface-strong: #ffffff;
  --px-surface-soft: rgb(38 54 82 / .040);
  --px-surface-hover: #ffffff;
  --px-border: rgb(46 61 90 / .12);
  --px-border-strong: rgb(70 92 132 / .24);
  --px-border-vivid: rgb(104 75 216 / .38);
  --px-text: #0f1728;
  --px-muted: #46566f;
  --px-muted-2: #59677c;
  --px-purple: #684bd8;
  --px-purple-2: #7d63e5;
  --px-pink: #a83ca3;
  --px-blue: #2f6fda;
  --px-cyan: #177fac;
  --px-brand-blue: #2f6fda;
  --px-brand-purple: #684bd8;
  --px-brand-purple-bright: #7d63e5;
  --px-brand-pink: #a83ca3;
  --px-brand-cyan: #177fac;
  --px-brand-gradient: var(--px-accent-gradient);
  --px-glow: rgb(104 75 216 / .085);
  --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);

  --px-card: rgb(255 255 255 / .96);
  --px-v110-blue: #2f6fda;
  --px-v110-purple: #684bd8;
  --px-v110-pink: #a83ca3;
  --px-v110-cyan: #177fac;
  --px-v110-bg: #f5f7fb;
  --px-v110-bg-soft: #eef2f7;
  --px-v110-glass: rgb(255 255 255 / .94);
  --px-v110-glass-strong: #ffffff;
  --px-v110-line: rgb(104 75 216 / .18);
  --px-v110-line-soft: rgb(46 61 90 / .085);
  --px-v110-text: #0f1728;
  --px-v110-muted: #46566f;
  --px-v110-field: rgb(255 255 255 / .96);
  --px-v110-shadow: var(--px-shadow-card);

  --px-detail-glass: rgb(255 255 255 / .94);
  --px-detail-glass-strong: #ffffff;
  --px-detail-glass-soft: rgb(38 54 82 / .040);
  --px-detail-stroke: rgb(46 61 90 / .11);
  --px-detail-stroke-soft: rgb(46 61 90 / .070);
  --px-detail-stroke-active: rgb(104 75 216 / .34);
  --px-detail-ink: #0f1728;
  --px-detail-muted: #46566f;
  --px-detail-shadow: var(--px-shadow-card);
  --px-detail-inner-highlight: inset 0 1px 0 rgb(255 255 255 / .99);
  --px-detail-icon-bg: rgb(255 255 255 / .96);
  --px-detail-icon-hover: var(--px-accent-gradient);

  --px-139-bg: #f5f7fb;
  --px-139-bg-soft: #ffffff;
  --px-139-text: #0f1728;
  --px-139-muted: #46566f;
  --px-139-line: rgb(46 61 90 / .11);
  --px-139-glass: rgb(255 255 255 / .94);
  --px-139-glass-strong: #ffffff;

  accent-color: var(--px-accent-purple);
}

html[data-ui-lang="en"],
html:not([data-ui-lang])[lang="en"] {
  --px-heading-tracking: -.025em;
  --px-label-tracking: .035em;
}

/* Prevent legacy clipping rules from changing the document flow. */
html[data-theme] body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* test376: document background ownership moved to the canonical ambient root.
 * Theme Color System owns text/surface tokens, not a second full-page canvas. */
body {
  color: var(--px-text-primary) !important;
}
body:not(.promxai-modal-embed) {
  background: transparent !important;
}


/* Native form controls must not become a second dark theme owned by the UA. */
html[data-theme="dark"] :where(input,textarea,select,button) {
  color-scheme: only light !important;
}
html[data-theme="dark"] :where(input,textarea,select) {
  color: var(--px-text-primary);
  background-color: var(--px-control-surface);
  border-color: var(--px-line);
}

::selection {
  color: #fff;
  background: rgb(var(--px-accent-purple-rgb) / .72);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 0 !important;
  box-shadow: var(--px-focus-shadow) !important;
}

/* Header: a calm, clearly separated navigation surface. */
.px-header {
  background: var(--px-glass-header) !important;
  border-bottom-color: var(--px-line-soft) !important;
  box-shadow: 0 7px 24px rgb(0 0 0 / .075) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}

.px-header__inner {
  border-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-surface-1) 96%, transparent) !important;
  box-shadow: var(--px-shadow-soft) !important;
}

.px-header-search input,
.px-icon-button,
.px-toolbar-button,
.px-back-button,
.px-card-share,
.px-explain-button,
.px-related-view-all {
  color: var(--px-text-control) !important;
  border-color: var(--px-line) !important;
  background: var(--px-control-surface) !important;
  box-shadow: var(--px-shadow-control) !important;
}

.px-header-search input:focus,
.px-icon-button:hover,
.px-toolbar-button:hover,
.px-back-button:hover,
.px-card-share:hover,
.px-explain-button:hover,
.px-related-view-all:hover {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-strong) !important;
  background: var(--px-control-hover) !important;
}

.px-nav a { color: var(--px-text-secondary) !important; }
.px-nav a:hover,
.px-nav a.is-active { color: var(--px-text-primary) !important; }

/* Brand gradient is reserved for primary conversion actions. */
:where(
  .px-primary-button,
  .px-copy-button,
  .px-card-view,
  .px-library62-card__download,
  .px-library62-detail__download,
  .px-library65-detail__primary,
  .px-pro-browse-button,
  .px-payment-soon-button
) {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--px-accent-gradient) !important;
  box-shadow: var(--px-shadow-brand) !important;
}

:where(
  .px-primary-button,
  .px-copy-button,
  .px-card-view,
  .px-library62-card__download,
  .px-library62-detail__download,
  .px-library65-detail__primary,
  .px-pro-browse-button,
  .px-payment-soon-button
):hover {
  filter: saturate(1.02) brightness(1.035);
}

/* One stable surface, one border, one principal shadow. */
:where(
  .px-glass-panel,
  .px-categories,
  .px-library-sidebar,
  .px-library-toolbar,
  .px-account-card,
  .px-auth-panel,
  .px-plan-card,
  .px-how-panel,
  .px-request-form-panel,
  .px-request-summary
) {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line) !important;
  background: var(--px-surface-1) !important;
  box-shadow: var(--px-shadow-card) !important;
}

/* Filters: neutral by default, branded only when selected. */
:where(
  .px-category-button,
  .px-filter,
  .px-library63-filter,
  .px-library64-filter,
  .px-library65-filter,
  .px-prompt-tabs button,
  .px-prompt-scene-button
) {
  color: var(--px-text-secondary) !important;
}

:where(
  .px-category-button.is-active,
  .px-filter.is-active,
  .px-library63-filter.is-active,
  .px-library64-filter.is-active,
  .px-library65-filter.is-active
) {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--px-accent-gradient) !important;
  box-shadow: 0 10px 22px rgb(76 59 174 / .16) !important;
}

:where(.px-category-button, .px-filter, .px-library63-filter, .px-library64-filter, .px-library65-filter):not(.is-active):hover {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-strong) !important;
  background: var(--px-control-hover) !important;
}

/* Prompt detail: natural media, restrained frame, one independent information panel. */
.promxai-prompt-focus .px-prompt-detail-140 {
  color: var(--px-text-primary) !important;
  --px-139-bg: var(--px-canvas);
  --px-139-bg-soft: var(--px-canvas-subtle);
  --px-139-text: var(--px-text-primary);
  --px-139-muted: var(--px-text-secondary);
  --px-139-line: var(--px-line);
  --px-139-glass: var(--px-surface-1);
  --px-139-glass-strong: var(--px-surface-2);
}

.promxai-prompt-focus .px-media117-frame {
  border-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-surface-1) 90%, transparent) !important;
  box-shadow: 0 20px 48px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .045) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-media117-frame {
  border-color: var(--px-line) !important;
  background: var(--px-surface-2) !important;
  box-shadow: 0 18px 42px rgb(42 56 84 / .11), inset 0 1px 0 rgb(255 255 255 / .99) !important;
}

.promxai-prompt-focus :where(.px-media61-main-image, .px-media61-main-video, .px-main-visual img, .px-main-visual video) {
  filter: none !important;
  opacity: 1 !important;
}

.promxai-prompt-focus :where(.px-media35-tool, .px-media35-back, .px-gallery-arrow, .px-media35-arrow) {
  color: var(--px-text-control) !important;
  border-color: var(--px-line) !important;
  background: var(--px-control-surface) !important;
  box-shadow: var(--px-shadow-control) !important;
}

.promxai-prompt-focus :where(.px-media35-tool, .px-media35-back, .px-gallery-arrow, .px-media35-arrow):hover {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-strong) !important;
  background: var(--px-control-hover) !important;
}

.promxai-prompt-focus .px-media35-thumb:not(.is-active):not([aria-current="true"]) img {
  filter: blur(.28px) saturate(.92) brightness(.97) !important;
  opacity: .89 !important;
}

.promxai-prompt-focus .px-media35-thumb.is-active img,
.promxai-prompt-focus .px-media35-thumb[aria-current="true"] img {
  filter: none !important;
  opacity: 1 !important;
}

.promxai-prompt-focus .px-media35-thumb.is-active,
.promxai-prompt-focus .px-media35-thumb[aria-current="true"] {
  border-color: var(--px-line-active) !important;
  box-shadow: var(--px-glow-active), var(--px-shadow-soft) !important;
}

.promxai-prompt-focus .px-right-panel,
.promxai-prompt-focus .px-prompt-column {
  background: transparent !important;
}

.promxai-prompt-focus .px-prompt-stage {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line) !important;
  background: var(--px-surface-1) !important;
  box-shadow: var(--px-shadow-panel) !important;
}

.promxai-prompt-focus :where(.px-prompt-head, .px-prompt-copy-card, .px-related-inline) {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-soft) !important;
  background: color-mix(in srgb, var(--px-surface-2) 58%, transparent) !important;
  box-shadow: none !important;
}

.promxai-prompt-focus :where(.px-project-summary, .px-prompt-text p, .px-current-scene-title) {
  color: var(--px-text-secondary) !important;
}

.promxai-prompt-focus :where(.px-prompt-tabs, .px-prompt-scene-switcher, .px-prompt-text) {
  border-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-canvas-subtle) 72%, transparent) !important;
}

.promxai-prompt-focus :where(.px-prompt-tabs button, .px-prompt-scene-button).is-active,
.promxai-prompt-focus .px-prompt-scene-button[aria-current="true"] {
  color: var(--px-text-primary) !important;
  border-color: var(--px-line-active) !important;
  background: color-mix(in srgb, var(--px-surface-3) 92%, rgb(var(--px-accent-purple-rgb) / .045)) !important;
  box-shadow: var(--px-glow-active), var(--px-shadow-control) !important;
}

.promxai-prompt-focus .px-right-scroll-indicator {
  background: color-mix(in srgb, var(--px-line) 70%, transparent) !important;
}

.promxai-prompt-focus .px-right-scroll-indicator__thumb {
  background: linear-gradient(180deg, var(--px-accent-blue), var(--px-accent-purple)) !important;
  box-shadow: 0 0 10px rgb(var(--px-accent-purple-rgb) / .14) !important;
}

/* Cards: neutral chrome lets the artwork remain the brightest object. */
:where(
  .px-card,
  .px-library-card,
  .px-library62-card,
  .px-library64-card,
  .px-library65-card,
  .px-favorite-library-card
) {
  border-color: var(--px-line) !important;
  box-shadow: var(--px-shadow-soft) !important;
}

:where(
  .px-card,
  .px-library-card,
  .px-library62-card,
  .px-library64-card,
  .px-library65-card,
  .px-favorite-library-card
):hover {
  border-color: var(--px-line-strong) !important;
  box-shadow: var(--px-shadow-card-hover) !important;
}

:where(.px-pro-badge, .px-library62-badge--pro, .px-library65-card__state.is-price) {
  color: #fff !important;
  border-color: rgb(255 255 255 / .16) !important;
  background: var(--px-accent-gradient) !important;
  box-shadow: 0 8px 18px rgb(76 59 174 / .18) !important;
}

/* Form fields: stronger opacity improves long-form readability. */
:where(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  color: var(--px-text-primary);
  border-color: var(--px-line);
  background: var(--px-control-surface);
}

:where(input, textarea, select)::placeholder { color: var(--px-text-tertiary); }

:where(input, textarea, select):focus {
  border-color: var(--px-line-active) !important;
  box-shadow: var(--px-focus-shadow) !important;
}

/* Native scrollbars. */
* {
  scrollbar-color: rgb(var(--px-accent-purple-rgb) / .48) color-mix(in srgb, var(--px-canvas-subtle) 72%, transparent);
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: color-mix(in srgb, var(--px-canvas-subtle) 72%, transparent); }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--px-accent-blue-rgb) / .64), rgb(var(--px-accent-purple-rgb) / .64)) padding-box;
}

/* Mobile: more opaque surfaces, smaller shadows, and almost no ambient glow. */
@media (max-width: 760px) {
  body:not(.promxai-modal-embed) {
    background: transparent !important;
  }

  .px-header {
    background: color-mix(in srgb, var(--px-glass-header) 97%, var(--px-canvas)) !important;
    box-shadow: 0 5px 16px rgb(0 0 0 / .065) !important;
    -webkit-backdrop-filter: blur(11px) saturate(112%) !important;
    backdrop-filter: blur(11px) saturate(112%) !important;
  }

  .px-header__inner,
  :where(.px-glass-panel, .px-categories, .px-library-sidebar, .px-account-card, .px-auth-panel, .px-plan-card, .px-how-panel) {
    background: var(--px-surface-2) !important;
    box-shadow: 0 12px 28px rgb(0 0 0 / .11) !important;
    -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
    backdrop-filter: blur(10px) saturate(110%) !important;
  }

  html[data-theme="light"] :where(.px-header__inner, .px-glass-panel, .px-categories, .px-library-sidebar, .px-account-card, .px-auth-panel, .px-plan-card, .px-how-panel) {
    box-shadow: 0 10px 24px rgb(42 56 84 / .075) !important;
  }

  .promxai-prompt-focus .px-prompt-stage {
    background: var(--px-surface-2) !important;
    box-shadow: 0 15px 34px rgb(0 0 0 / .16) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-stage {
    box-shadow: 0 14px 30px rgb(42 56 84 / .095) !important;
  }

  .promxai-prompt-focus :where(.px-prompt-head, .px-prompt-copy-card, .px-related-inline) {
    background: color-mix(in srgb, var(--px-surface-1) 92%, transparent) !important;
  }

  .promxai-prompt-focus .px-media117-frame {
    box-shadow: 0 13px 30px rgb(0 0 0 / .16), inset 0 1px 0 rgb(255 255 255 / .04) !important;
  }

  :where(.px-primary-button, .px-copy-button, .px-card-view) {
    box-shadow: 0 9px 20px rgb(76 59 174 / .16) !important;
  }
}


/* test458 iPad / touch-tablet prompt-card compositor stabilization. */
html.px-touch-tablet .px-prompt-card .px-card-actions,
html.px-touch-tablet .px-header {
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

@media (prefers-reduced-motion: reduce) {
  :where(.px-primary-button, .px-copy-button, .px-card-view, .px-icon-button, .px-toolbar-button) {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :where(.px-header, .px-header__inner, .px-glass-panel, .px-right-panel__scroll, .px-prompt-stage) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.3 — real back control + seamless main-media corners
   ======================================================================== */

/* Back is a real interactive control, not a static visual. */
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
  position: relative !important;
  z-index: 120 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--px-line) 92%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--px-control-surface) 96%, transparent), color-mix(in srgb, var(--px-canvas-deep) 64%, transparent)) !important;
  box-shadow: 0 9px 20px rgb(0 0 0 / .13), inset 0 1px 0 rgb(255 255 255 / .05) !important;
  transition: transform .20s ease, border-color .20s ease, background .20s ease, box-shadow .20s ease, color .20s ease !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
  background: linear-gradient(180deg, rgb(255 255 255 / .98), rgb(244 247 252 / .96)) !important;
  box-shadow: 0 9px 20px rgb(62 79 113 / .09), inset 0 1px 0 rgb(255 255 255 / .98) !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: 15px !important;
  bottom: 7px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, var(--px-accent-blue), var(--px-accent-purple), transparent) !important;
  opacity: 0 !important;
  transform: scaleX(.42) translateY(3px) !important;
  transform-origin: center !important;
  transition: opacity .20s ease, transform .20s ease !important;
  pointer-events: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover,
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible {
  color: var(--px-text-primary) !important;
  border-color: color-mix(in srgb, var(--px-accent-blue) 42%, var(--px-line)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--px-control-hover) 94%, transparent), color-mix(in srgb, var(--px-surface-1) 94%, transparent)) !important;
  box-shadow: 0 14px 28px rgb(0 0 0 / .18), 0 0 0 1px rgb(var(--px-accent-blue-rgb) / .09), inset 0 1px 0 rgb(255 255 255 / .07) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible {
  background: linear-gradient(180deg, #ffffff, #f1f5fb) !important;
  box-shadow: 0 13px 25px rgb(64 81 116 / .12), 0 0 0 1px rgb(var(--px-accent-blue-rgb) / .06), inset 0 1px 0 #fff !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover::after,
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) translateY(0) !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor__icon {
  pointer-events: none !important;
  transition: transform .20s ease !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover .px-media61-back-anchor__icon,
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible .px-media61-back-anchor__icon {
  transform: translateX(3px) !important;
}

html[dir="ltr"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover .px-media61-back-anchor__icon,
html[dir="ltr"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible .px-media61-back-anchor__icon {
  transform: translateX(-3px) !important;
}

/* The parent frame performs the clipping, exactly like the prompt cards. */
.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--px-accent-blue) 50%, var(--px-line)) !important;
  border-radius: 30px !important;
  background: #05070b !important;
  overflow: hidden !important;
  overflow: clip !important;
  clip-path: inset(0 round 30px) !important;
  isolation: isolate !important;
  box-shadow: 0 22px 50px rgb(0 0 0 / .24), 0 0 0 1px rgb(255 255 255 / .035), 0 0 22px rgb(var(--px-accent-blue-rgb) / .10) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
  border-color: color-mix(in srgb, var(--px-accent-blue) 28%, var(--px-line)) !important;
  background: #fff !important;
  box-shadow: 0 20px 44px rgb(58 75 111 / .13), 0 0 0 1px rgb(255 255 255 / .96), 0 0 18px rgb(var(--px-accent-purple-rgb) / .055) !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before {
  display: none !important;
  content: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  border: 1px solid rgb(255 255 255 / .08) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 0 0 1px rgb(0 0 0 / .035) !important;
  pointer-events: none !important;
}

.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 29px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: hidden !important;
  transform: none !important;
  backface-visibility: visible !important;
}

@media (max-width: 760px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
    border-radius: 24px !important;
    clip-path: inset(0 round 24px) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
    clip-path: inset(0 round 23px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor__icon {
    transition: none !important;
  }
}

/* ========================================================================
   PromXAI Theme 1.4.4 — stable card CTA + glass hover + media glass frame
   ======================================================================== */

/* Stable action-bar rendering for both PHP cards and AJAX-created cards. */
.px-prompt-card .px-card-actions {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 60px !important;
  padding: 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgb(255 255 255 / .13) !important;
  background: linear-gradient(180deg, rgb(16 23 39 / .78), rgb(8 13 24 / .86)) !important;
  box-shadow: 0 14px 30px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(132%) !important;
  backdrop-filter: blur(18px) saturate(132%) !important;
}
html[data-theme="light"] .px-prompt-card .px-card-actions {
  border-color: rgb(74 93 132 / .15) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .90), rgb(243 247 253 / .88)) !important;
  box-shadow: 0 13px 28px rgb(73 89 125 / .13), inset 0 1px 0 rgb(255 255 255 / .96) !important;
}

.px-prompt-card .px-card-share,
.px-prompt-card .px-card-view {
  min-height: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
}

.px-prompt-card .px-card-share {
  width: 48px !important;
  min-width: 48px !important;
  color: #ecf4ff !important;
  border: 1px solid rgb(139 157 194 / .24) !important;
  background: linear-gradient(180deg, rgb(30 42 65 / .88), rgb(16 25 42 / .92)) !important;
  box-shadow: 0 10px 20px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .07) !important;
}
html[data-theme="light"] .px-prompt-card .px-card-share {
  color: #315a92 !important;
  border-color: rgb(77 98 139 / .16) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .98), rgb(238 243 251 / .96)) !important;
  box-shadow: 0 9px 20px rgb(76 92 127 / .11), inset 0 1px 0 rgb(255 255 255 / .98) !important;
}
.px-prompt-card .px-card-share:hover,
.px-prompt-card .px-card-share:focus-visible {
  color: #fff !important;
  border-color: rgb(94 148 232 / .42) !important;
  background: linear-gradient(180deg, rgb(40 61 96 / .96), rgb(21 35 60 / .98)) !important;
  box-shadow: 0 14px 26px rgb(10 21 42 / .24), 0 0 0 1px rgb(61 125 229 / .10), inset 0 1px 0 rgb(255 255 255 / .08) !important;
}
html[data-theme="light"] .px-prompt-card .px-card-share:hover,
html[data-theme="light"] .px-prompt-card .px-card-share:focus-visible {
  color: #234f88 !important;
  background: linear-gradient(180deg, #fff, #eaf1fb) !important;
}

.px-prompt-card .px-card-actions .px-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.px-prompt-card .px-card-share .px-icon {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
}

/* Keep the approved second-state CTA at all times. */
.px-prompt-card .px-card-view {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 14px 10px !important;
  gap: 9px !important;
  justify-content: center !important;
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / .14) !important;
  background: linear-gradient(112deg, #287ce9 0%, #5266db 47%, #7448cc 100%) !important;
  box-shadow: 0 13px 26px rgb(45 68 161 / .24), inset 0 1px 0 rgb(255 255 255 / .20) !important;
  filter: none !important;
  opacity: 1 !important;
}
.px-prompt-card .px-card-view:hover,
.px-prompt-card .px-card-view:focus-visible {
  color: #fff !important;
  background: linear-gradient(112deg, #3187f2 0%, #596ce2 47%, #7b50d4 100%) !important;
  box-shadow: 0 17px 32px rgb(45 68 161 / .30), 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .22) !important;
  filter: none !important;
}
.px-prompt-card .px-card-view__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html:not([data-ui-lang="en"]) .px-prompt-card .px-card-view__label .px-lang-ar,
html[data-ui-lang="ar"] .px-prompt-card .px-card-view__label .px-lang-ar {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html:not([data-ui-lang="en"]) .px-prompt-card .px-card-view__label .px-lang-en,
html[data-ui-lang="ar"] .px-prompt-card .px-card-view__label .px-lang-en {
  display: none !important;
}
html[data-ui-lang="en"] .px-prompt-card .px-card-view__label .px-lang-ar {
  display: none !important;
}
html[data-ui-lang="en"] .px-prompt-card .px-card-view__label .px-lang-en {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.px-prompt-card .px-card-view__icon {
  flex: 0 0 29px !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: rgb(6 16 36 / .16) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14) !important;
}
.px-prompt-card .px-card-view__icon .px-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

/* Back button: full glass border on hover, no underline. */
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor::after {
  display: none !important;
  content: none !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
  border: 1px solid rgb(255 255 255 / .11) !important;
  background: linear-gradient(180deg, rgb(19 28 46 / .54), rgb(10 17 31 / .44)) !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .055) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
  border-color: rgb(78 99 141 / .12) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .76), rgb(245 248 253 / .58)) !important;
  box-shadow: 0 9px 22px rgb(75 92 128 / .08), inset 0 1px 0 rgb(255 255 255 / .94) !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover,
.promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible {
  border-color: rgb(84 145 239 / .40) !important;
  background: linear-gradient(180deg, rgb(31 47 76 / .72), rgb(14 25 44 / .64)) !important;
  box-shadow: 0 14px 28px rgb(0 0 0 / .18), 0 0 0 1px rgb(78 140 237 / .11), inset 0 1px 0 rgb(255 255 255 / .08) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:hover,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor:focus-visible {
  border-color: rgb(69 112 191 / .24) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / .94), rgb(238 244 252 / .82)) !important;
  box-shadow: 0 13px 26px rgb(77 94 131 / .11), 0 0 0 1px rgb(69 112 191 / .06), inset 0 1px 0 rgb(255 255 255 / .98) !important;
}

/* Main prompt media: real transparent glass frame without square corners. */
.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
  padding: 6px !important;
  border: 1px solid transparent !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .075), rgb(255 255 255 / .018)) padding-box,
    linear-gradient(135deg, rgb(47 140 255 / .50), rgb(123 63 242 / .42) 54%, rgb(255 46 209 / .23)) border-box !important;
  overflow: visible !important;
  clip-path: none !important;
  isolation: isolate !important;
  box-shadow:
    0 24px 56px rgb(0 0 0 / .25),
    0 0 0 1px rgb(255 255 255 / .035),
    0 0 34px rgb(var(--px-media-rgb, 123 63 242) / .16),
    inset 0 1px 0 rgb(255 255 255 / .08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(128%) !important;
  backdrop-filter: blur(18px) saturate(128%) !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .58), rgb(255 255 255 / .18)) padding-box,
    linear-gradient(135deg, rgb(58 128 224 / .34), rgb(117 75 204 / .27) 54%, rgb(180 80 184 / .16)) border-box !important;
  box-shadow:
    0 21px 48px rgb(68 84 121 / .14),
    0 0 0 1px rgb(255 255 255 / .78),
    0 0 26px rgb(var(--px-media-rgb, 123 63 242) / .09),
    inset 0 1px 0 rgb(255 255 255 / .94) !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -12px !important;
  border-radius: 42px !important;
  background: radial-gradient(ellipse at center, rgb(var(--px-media-rgb, 123 63 242) / .20), rgb(47 140 255 / .07) 46%, transparent 72%) !important;
  filter: blur(18px) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before {
  opacity: .44 !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 6px !important;
  border-radius: 25px !important;
  border: 1px solid rgb(255 255 255 / .075) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 0 0 1px rgb(0 0 0 / .025) !important;
  pointer-events: none !important;
}
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after {
  border-color: rgb(255 255 255 / .72) !important;
}
.promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
  width: 100% !important;
  height: 100% !important;
  border-radius: 25px !important;
  clip-path: inset(0 round 25px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

@media (max-width: 760px) {
  .px-prompt-card .px-card-actions {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 56px !important;
    padding: 6px !important;
  }
  .px-prompt-card .px-card-share {
    width: 44px !important;
    min-width: 44px !important;
  }
  .px-prompt-card .px-card-share,
  .px-prompt-card .px-card-view {
    min-height: 44px !important;
    height: 44px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
    padding: 5px !important;
    border-radius: 27px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after {
    inset: 5px !important;
    border-radius: 21px !important;
  }
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
    border-radius: 21px !important;
    clip-path: inset(0 round 21px) !important;
  }
}


/* 2.0.21-test15 — shared semantic glass icon token. The class is opt-in so
 * decorative/media icons are not accidentally restyled. */
.px-ui-glass-icon{position:relative;overflow:hidden}.px-ui-glass-icon::after{content:"";position:absolute;inset:1px 1px auto;height:42%;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255 / .12),transparent);pointer-events:none;opacity:.72}.px-ui-glass-icon>.px-icon{position:relative;z-index:1}