/*
 * PromXAI Theme 1.4.13 — Dark-Structure / Light-Palette Parity
 * Scope: single prompt pages only.
 *
 * Contract:
 * - dark mode is preserved exactly as the approved visual reference;
 * - light mode uses the same geometry, layers, radii, spacing and hierarchy;
 * - only color, opacity and shadow tint change in light mode;
 * - no left gallery slab, rail, full-height pseudo layer or stacked toolbar cards;
 * - homepage, prompt archive, library and card grid are outside this file.
 */

/* Keep real video surfaces neutral. */
.promxai-prompt-focus .px-prompt-detail-140 video[data-main-video],
.promxai-prompt-focus .px-prompt-detail-140 video[data-mobile-video] {
  background: #070a0f !important;
}

/* -------------------------------------------------------------------------
   Approved dark toolbar: one glass capsule, transparent child controls.
   ------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 16px !important;
    background: rgba(13, 20, 34, .50) !important;
    box-shadow:
      0 12px 27px rgba(0, 0, 0, .17),
      inset 0 1px 0 rgba(255, 255, 255, .075) !important;
    -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
    backdrop-filter: blur(18px) saturate(122%) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-toolbar::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-toolbar::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool::before,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool::after,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge::before {
    content: none !important;
    display: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-toolbar {
    gap: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 :where(
    .px-media35-ratio-badge,
    .px-media35-counter,
    .px-media35-tool,
    .px-detail-theme-toggle,
    .px-detail-lang-toggle,
    .px-theme-icon
  ) {
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):hover,
  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transform: translateY(-1px) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool[data-favorite-id].is-saved {
    color: #e5b8ff !important;
    border-color: transparent !important;
    background: rgba(138, 86, 205, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(202, 149, 255, .16), 0 0 15px rgba(148, 86, 208, .10) !important;
  }

  .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool[data-favorite-id].is-saved .px-icon {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* -------------------------------------------------------------------------
   Light mode: same dark-mode construction, recolored only.
   ------------------------------------------------------------------------- */
html[data-theme="light"] body.promxai-prompt-focus {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .72), transparent 31rem),
    radial-gradient(circle at 86% 14%, rgba(108, 75, 216, .045), transparent 29rem),
    linear-gradient(145deg, #ece8e0 0%, #f6f3ed 50%, #e9e5de 100%) !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-main {
  background: transparent !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 {
  --px-canvas: #f3efe8 !important;
  --px-canvas-subtle: #ece7de !important;
  --px-canvas-deep: #e4ddd2 !important;
  --px-surface-1: rgba(255, 252, 247, .78) !important;
  --px-surface-2: rgba(255, 252, 247, .94) !important;
  --px-surface-3: rgba(249, 245, 238, .88) !important;
  --px-control-surface: rgba(255, 252, 247, .64) !important;
  --px-control-hover: rgba(238, 230, 244, .80) !important;
  --px-text-primary: #20242d !important;
  --px-text-strong: #151923 !important;
  --px-text-secondary: #596273 !important;
  --px-text-tertiary: #7b8391 !important;
  --px-text-control: #394354 !important;
  --px-line: rgba(74, 63, 53, .14) !important;
  --px-line-soft: rgba(74, 63, 53, .075) !important;
  --px-line-strong: rgba(76, 82, 104, .23) !important;
  --px-139-bg: #f3efe8 !important;
  --px-139-bg-soft: #ece7de !important;
  --px-139-glass: rgba(255, 252, 247, .72) !important;
  --px-139-glass-strong: rgba(255, 252, 247, .92) !important;
}

/* Dark structure has no gallery slab. Remove every historical light-only slab/rail. */
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-shell,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-stage {
  isolation: isolate !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-shell::before,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-shell::after,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-stage::before,
html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-stage::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 761px) {
  /* Same capsule dimensions and blur as dark mode; light palette only. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group {
    padding: 3px 6px !important;
    border: 1px solid rgba(85, 72, 60, .14) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255, 253, 249, .72), rgba(244, 239, 232, .54)) !important;
    box-shadow:
      0 12px 27px rgba(76, 65, 55, .10),
      inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
    backdrop-filter: blur(18px) saturate(122%) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(
    .px-media35-ratio-badge,
    .px-media35-counter,
    .px-media35-tool,
    .px-detail-theme-toggle,
    .px-detail-lang-toggle,
    .px-theme-icon
  ) {
    color: #394354 !important;
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):hover,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:not(.px-media35-counter):focus-visible {
    color: #2c253d !important;
    background: rgba(105, 75, 159, .085) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60) !important;
    transform: translateY(-1px) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool[data-favorite-id].is-saved {
    color: #7041c5 !important;
    border-color: transparent !important;
    background: rgba(112, 65, 197, .095) !important;
    box-shadow: inset 0 0 0 1px rgba(112, 65, 197, .16), 0 0 15px rgba(112, 65, 197, .09) !important;
  }

  /* Back control: identical geometry to dark, recolored only. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
    min-width: 76px !important;
    height: var(--px-gallery-control-height) !important;
    min-height: var(--px-gallery-control-height) !important;
    padding: 0 14px !important;
    border: 1px solid rgba(85, 72, 60, .14) !important;
    border-radius: 14px !important;
    color: #465164 !important;
    background: linear-gradient(180deg, rgba(255, 253, 249, .72), rgba(244, 239, 232, .54)) !important;
    box-shadow: 0 10px 24px rgba(76, 65, 55, .09), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    backdrop-filter: blur(16px) saturate(130%) !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 {
    color: #30243f !important;
    border-color: rgba(106, 72, 169, .30) !important;
    background: linear-gradient(180deg, rgba(243, 236, 249, .90), rgba(232, 224, 242, .78)) !important;
    box-shadow: 0 12px 26px rgba(76, 65, 55, .12), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  }

  /* Main media: exact dark-mode padding/radius/clipping, light material colors. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
    padding: 6px !important;
    border: 1px solid transparent !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, rgba(255, 253, 249, .56), rgba(247, 241, 233, .28)) padding-box,
      linear-gradient(135deg, rgba(58, 124, 210, .27), rgba(112, 77, 202, .24) 54%, rgba(167, 91, 169, .15)) border-box !important;
    box-shadow:
      0 18px 42px rgba(76, 65, 55, .13),
      0 0 0 1px rgba(112, 77, 202, .055),
      0 0 24px rgba(112, 77, 202, .075) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before {
    content: none !important;
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    border: 0 !important;
    pointer-events: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 0 0 1px rgba(255, 255, 255, .30) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
    border-radius: 26px !important;
    clip-path: none !important;
    overflow: hidden !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* References: same dark-mode clarity hierarchy, recolored borders/glow. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.px-visual-thumb {
    opacity: .90 !important;
    filter: none !important;
    border-color: rgba(84, 75, 66, .17) !important;
    background: rgba(255, 252, 247, .30) !important;
    box-shadow: 0 7px 16px rgba(76, 65, 55, .07) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) img {
    transform: scale(1.012) !important;
    filter: blur(1.05px) saturate(.84) brightness(.98) contrast(.98) !important;
    opacity: .88 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] {
    opacity: 1 !important;
    filter: none !important;
    border-color: rgba(112, 77, 202, .54) !important;
    background: rgba(255, 252, 247, .72) !important;
    box-shadow:
      0 0 0 2px rgba(112, 77, 202, .15),
      0 0 0 6px rgba(112, 77, 202, .055),
      0 0 26px rgba(112, 77, 202, .16),
      0 12px 24px rgba(76, 65, 55, .10) !important;
    transform: translateY(-1px) scale(1.025) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active img,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] img {
    transform: scale(1) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Right panel: exact approved dark construction, light materials only. */
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel {
    position: relative !important;
    isolation: isolate !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::before {
    content: "" !important;
    position: absolute !important;
    z-index: -2 !important;
    inset: 34px 24px 30px 24px !important;
    border-radius: 48px !important;
    background:
      radial-gradient(circle at 18% 22%, rgba(58, 124, 210, .15), transparent 52%),
      radial-gradient(circle at 84% 76%, rgba(142, 88, 186, .12), transparent 54%) !important;
    filter: blur(38px) !important;
    opacity: .44 !important;
    pointer-events: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel::after {
    content: none !important;
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage {
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 17px 15px 19px 17px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid transparent !important;
    border-radius: var(--px-v128-radius, 32px) !important;
    background:
      linear-gradient(158deg, rgba(255, 253, 249, .94), rgba(246, 241, 233, .91)) padding-box,
      linear-gradient(145deg, rgba(58, 124, 210, .29), rgba(112, 77, 202, .25) 58%, rgba(167, 91, 169, .15)) border-box !important;
    box-shadow:
      0 30px 72px rgba(76, 65, 55, .14),
      0 12px 28px rgba(76, 65, 55, .08),
      0 0 34px rgba(112, 77, 202, .055),
      inset 0 1px 0 rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(24px) saturate(138%) !important;
    backdrop-filter: blur(24px) saturate(138%) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-panel__scroll > .px-related-inline,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-head,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-prompt-copy-card,
  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-stage > .px-related-inline {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-project-summary {
    color: #626a78 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 :where(
    .px-explain-button,
    .px-prompt-scene-switcher,
    .px-prompt-tabs > button,
    .px-prompt-text,
    .px-related-view-all
  ) {
    border-color: rgba(84, 75, 66, .14) !important;
    background: rgba(255, 252, 247, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs > button.is-active {
    border-color: rgba(112, 77, 202, .28) !important;
    background: linear-gradient(135deg, rgba(58, 124, 210, .075), rgba(112, 77, 202, .075)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 0 16px rgba(112, 77, 202, .055) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-text p {
    color: #4e5767 !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-related-mini {
    border-color: rgba(84, 75, 66, .13) !important;
    background: rgba(255, 252, 247, .54) !important;
    box-shadow: 0 10px 22px rgba(76, 65, 55, .08) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-right-scroll-indicator__thumb {
    background: linear-gradient(180deg, #3279c7, #6547bd 62%, #a052a5) !important;
    box-shadow: 0 0 8px rgba(98, 71, 184, .12) !important;
  }
}

/* -------------------------------------------------------------------------
   Mobile: preserve dark structure and recolor the same surfaces.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html[data-theme="light"] body.promxai-prompt-focus {
    background: linear-gradient(155deg, #ece8e0, #f7f4ee 52%, #e9e5de) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame {
    padding: 5px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, rgba(255, 253, 249, .56), rgba(247, 241, 233, .28)) padding-box,
      linear-gradient(135deg, rgba(58, 124, 210, .25), rgba(112, 77, 202, .21) 54%, rgba(167, 91, 169, .13)) border-box !important;
    box-shadow: 0 16px 34px rgba(76, 65, 55, .11), 0 0 18px rgba(112, 77, 202, .06) !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before {
    content: none !important;
    display: none !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) {
    border-radius: 20px !important;
    clip-path: none !important;
    overflow: hidden !important;
  }

  html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor {
    color: #465164 !important;
    border-color: rgba(85, 72, 60, .14) !important;
    background: linear-gradient(180deg, rgba(255, 253, 249, .72), rgba(244, 239, 232, .54)) !important;
    box-shadow: 0 8px 18px rgba(76, 65, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .90) !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 {
    color: #30243f !important;
    border-color: rgba(106, 72, 169, .30) !important;
    background: linear-gradient(180deg, rgba(243, 236, 249, .90), rgba(232, 224, 242, .78)) !important;
  }
}