/*
 * 天下AI v22 — merge-safe visual layer for public/merchant.html
 *
 * Load this file after every existing <style> block in merchant.html.
 * It does not change IDs, form names, data-* selectors, URLs, cookies or API calls.
 */

html,
body {
  overscroll-behavior-x: none;
}

:root {
  --tx22-bg: #060608;
  --tx22-surface: #0d0e12;
  --tx22-surface-raised: #111218;
  --tx22-ink: #f4f5f7;
  --tx22-muted: #9da1aa;
  --tx22-faint: #6f737d;
  --tx22-line: rgb(255 255 255 / 10%);
  --tx22-line-strong: rgb(255 255 255 / 18%);
  --tx22-signal: #ff6b35;
  --tx22-signal-deep: #e65322;
  --tx22-blue: #8ca8ff;
  --tx22-success: #50b997;
  --tx22-warning: #e0a354;
  --tx22-danger: #ff6e65;
  --tx22-radius: 8px;
  --tx22-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tx22-shadow: 0 28px 80px rgb(0 0 0 / 38%);
  color-scheme: dark;
}

html,
body,
body[data-page] {
  background:
    radial-gradient(ellipse at 74% 0%, rgb(56 86 145 / 14%), transparent 32%),
    var(--tx22-bg) !important;
  color: var(--tx22-ink) !important;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif !important;
}

body::before,
body::after {
  display: none !important;
}

body *::selection {
  background: rgb(255 107 53 / 82%);
  color: #fff;
}

body button:focus-visible,
body a:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible {
  outline: 3px solid var(--tx22-blue) !important;
  outline-offset: 3px !important;
}

body [hidden] {
  display: none !important;
}

body * {
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
}

/* Shell */

html body header {
  border-color: var(--tx22-line) !important;
  background: rgb(6 6 8 / 96%) !important;
}

html body header .brand {
  background: transparent !important;
  color: var(--tx22-ink) !important;
}

html body header .brand svg {
  filter: invert(1);
}

html body header .brand span {
  color: var(--tx22-ink) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

html body header .brand small {
  color: var(--tx22-faint) !important;
  letter-spacing: 0.12em;
}

html body header .globalStudioSearch,
html body header .points-pill,
html body header .badge,
html body header #notificationButton,
html body header #profileTrigger {
  border-color: var(--tx22-line) !important;
  background: rgb(255 255 255 / 3%) !important;
  color: var(--tx22-muted) !important;
}

html body header .globalStudioSearch:focus-within {
  border-color: var(--tx22-line-strong) !important;
}

html body header .globalStudioSearch input {
  color: var(--tx22-ink) !important;
}

html body header .globalStudioSearch input::placeholder {
  color: var(--tx22-faint) !important;
}

html body header .points-pill {
  min-height: 40px !important;
  padding-inline: 12px !important;
  cursor: pointer !important;
}

html body header .points-pill strong {
  color: var(--tx22-ink) !important;
}

html body header .points-pill i {
  background: var(--tx22-signal) !important;
}

html body nav {
  border-color: var(--tx22-line) !important;
  background: #050506 !important;
}

html body nav button {
  border-radius: 6px !important;
  color: var(--tx22-muted) !important;
}

html body nav button:hover {
  background: rgb(255 255 255 / 4%) !important;
  color: var(--tx22-ink) !important;
}

html body nav button[aria-current="page"] {
  background: rgb(255 255 255 / 7%) !important;
  color: var(--tx22-ink) !important;
}

html body nav button[aria-current="page"]::before {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: -1px;
  width: 1px;
  background: var(--tx22-signal);
  content: "";
}

html body #workspace {
  background: transparent !important;
}

html body .eyebrow {
  color: var(--tx22-signal) !important;
  letter-spacing: 0.1em !important;
  font-weight: 650 !important;
}

html body .card {
  border-color: var(--tx22-line) !important;
  border-radius: var(--tx22-radius) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
}

/* Auth modal keeps every current ID and submit handler. */

html body #auth {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface) !important;
  box-shadow: var(--tx22-shadow) !important;
}

html body #auth .authVisual {
  background:
    radial-gradient(ellipse at 62% 42%, rgb(224 237 255 / 38%), transparent 38%),
    #08090d !important;
  border-right: 1px solid var(--tx22-line) !important;
}

html body #authForm h1,
html body #auth .authVisual h2 {
  color: var(--tx22-ink) !important;
  font-weight: 320 !important;
  letter-spacing: -0.04em !important;
}

html body #authForm .field,
html body #emailPanel .field {
  color: var(--tx22-muted) !important;
}

html body #authForm input {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-ink) !important;
}

html body #auth .emailTabs button,
html body #auth .authProviderButton,
html body #auth .emailBack,
html body #auth .link {
  border-color: var(--tx22-line) !important;
  background: transparent !important;
  color: var(--tx22-muted) !important;
}

html body #auth .emailTabs button[aria-pressed="true"] {
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body #auth .primary {
  border-color: var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

/* Home */

html body[data-page="home"] .homeHero {
  position: relative;
  overflow: clip;
  padding-top: 52px !important;
}

html body[data-page="home"] .homeHero::before {
  display: block !important;
  position: absolute;
  z-index: -1;
  top: -120px;
  right: -4%;
  width: min(76vw, 1120px);
  height: 560px;
  background:
    radial-gradient(ellipse at 62% 45%, rgb(241 247 255 / 72%), rgb(140 169 218 / 28%) 16%, rgb(61 90 145 / 14%) 35%, transparent 64%),
    linear-gradient(112deg, transparent 15%, rgb(76 106 166 / 18%) 44%, transparent 75%);
  filter: blur(28px);
  opacity: 0.56;
  content: "";
}

html body[data-page="home"] .homeHello {
  max-width: 1180px !important;
  color: transparent !important;
  font-family: "Noto Sans SC", sans-serif !important;
  font-size: 112px !important;
  font-weight: 230 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
  background: linear-gradient(180deg, #fff 0%, #dfe4ea 32%, #788290 47%, #f7f9fa 55%, #b3bbc4 70%, #636d7a 100%) !important;
  background-clip: text !important;
  filter: drop-shadow(0 20px 45px rgb(80 119 185 / 12%));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html body[data-page="home"] .homeHello em {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html body[data-page="home"] .homeSub {
  color: var(--tx22-muted) !important;
  max-width: 650px !important;
}

html body[data-page="home"] .homeCreateForm,
html body[data-page="home"] .homeFeature,
html body[data-page="home"] .communityCard {
  border: 1px solid var(--tx22-line) !important;
  border-radius: var(--tx22-radius) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
}

html body[data-page="home"] .homeQuickPrompt textarea {
  color: var(--tx22-ink) !important;
}

html body[data-page="home"] .homeModeTabs,
html body[data-page="home"] .homeOption {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-muted) !important;
}

html body[data-page="home"] .homeModeTabs button[aria-pressed="true"],
html body[data-page="home"] .homeOption[aria-pressed="true"] {
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body[data-page="home"] .homeGo {
  border: 1px solid var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body[data-page="home"] .communityGrid {
  column-gap: 14px !important;
}

html body[data-page="home"] .communityCard:hover {
  border-color: var(--tx22-line-strong) !important;
  transform: translateY(-2px) !important;
}

html body[data-page="home"] .communityMedia {
  background: #030304 !important;
}

html body[data-page="home"] .communityBody strong {
  color: var(--tx22-ink) !important;
  font-weight: 450 !important;
}

html body[data-page="home"] .homePlazaTabs button[aria-pressed="true"],
html body[data-page="home"] .filterBtn[aria-pressed="true"] {
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

/* Short-film page, including the JS-generated batches. */

html body #shortfilmView {
  color: var(--tx22-ink) !important;
}

html body #shortfilmView .tx22-creation-switch {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 22px;
  padding: 3px;
  border: 1px solid var(--tx22-line);
  border-radius: 999px;
  background: #08090c;
}

html body #shortfilmView .tx22-creation-switch button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tx22-muted);
  font-size: 12px;
}

html body #shortfilmView .tx22-creation-switch button[aria-pressed="true"] {
  background: var(--tx22-ink);
  color: var(--tx22-bg);
  font-weight: 650;
}

html body #shortfilmView .tx22-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.72fr);
  gap: 20px;
  align-items: start;
}

html body #shortfilmView .tx22-preview-column,
html body #shortfilmView .tx22-image-results {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tx22-line);
  border-radius: var(--tx22-radius);
  background: #0a0b0f;
}

html body #shortfilmView .tx22-column-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--tx22-line);
}

html body #shortfilmView .tx22-column-head h2,
html body #shortfilmView .tx22-composer-head h2 {
  color: var(--tx22-ink);
  font-size: 22px;
  font-weight: 350;
  letter-spacing: -0.03em;
}

html body #shortfilmView .tx22-column-head p {
  margin-top: 4px;
  color: var(--tx22-faint);
  font-size: 10px;
}

html body #shortfilmView .tx22-prototype-note {
  color: var(--tx22-faint);
  font-size: 9px;
  white-space: nowrap;
}

html body #shortfilmView .tx22-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

html body #shortfilmView .tx22-composer-head > span,
html body #shortfilmView .tx22-field-label,
html body #shortfilmView .tx22-field-block > span {
  color: var(--tx22-faint);
  font-size: 10px;
  font-weight: 550;
}

html body #shortfilmView .tx22-fieldset,
html body #shortfilmView .tx22-field-block {
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

html body #shortfilmView .tx22-fieldset legend,
html body #shortfilmView .tx22-field-block > span {
  display: block;
  margin-bottom: 8px;
}

html body #shortfilmView .tx22-aspect-group,
html body #shortfilmView .tx22-count-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

html body #shortfilmView .tx22-count-group {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html body #shortfilmView .tx22-multi-upload {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px dashed var(--tx22-line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--tx22-muted);
  font-size: 11px;
}

html body #shortfilmView .image-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

html body #shortfilmView .reference-slot {
  display: grid;
  min-height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--tx22-line-strong);
  border-radius: 5px;
  background: rgb(255 255 255 / 2%);
  color: var(--tx22-faint);
  font-size: 10px;
}

html body #shortfilmView .reference-slot.has-image {
  border-style: solid;
}

html body #shortfilmView .reference-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #shortfilmView .tx22-submit-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tx22-line);
}

html body #shortfilmView .tx22-image-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

html body #shortfilmView .tx22-image-aspects {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

html body #shortfilmView .tx22-image-aspects button {
  min-height: 42px;
  border: 1px solid var(--tx22-line);
  border-radius: 5px;
  background: transparent;
  color: var(--tx22-muted);
  font-size: 10px;
}

html body #shortfilmView .tx22-image-aspects button[aria-pressed="true"] {
  border-color: var(--tx22-ink);
  background: var(--tx22-ink);
  color: var(--tx22-bg);
}

html body #shortfilmView .tx22-image-panel .sfModeBar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

html body #shortfilmView .shortfilmHero {
  padding: 46px 0 34px !important;
  border: 0 !important;
  background: transparent !important;
}

html body #shortfilmView .shortfilmHero h1 {
  color: var(--tx22-ink) !important;
  font-size: 64px !important;
  font-weight: 250 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.06em !important;
}

html body #shortfilmView .shortfilmHero p,
html body #shortfilmView .shortfilmHeroMeta {
  color: var(--tx22-muted) !important;
}

html body #shortfilmView .shortfilmHeroMeta span {
  border-color: var(--tx22-line) !important;
  background: transparent !important;
}

html body #shortfilmView .shortfilmWorks {
  display: grid !important;
  gap: 18px !important;
}

html body #shortfilmView .shortfilmGroup {
  overflow: hidden !important;
  border: 1px solid var(--tx22-line) !important;
  border-radius: var(--tx22-radius) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
}

html body #shortfilmView .shortfilmGroupHead {
  border-color: var(--tx22-line) !important;
  background: #0a0b0f !important;
}

html body #shortfilmView .shortfilmGroupHead h2,
html body #shortfilmView .sfStageInfo h3 {
  color: var(--tx22-ink) !important;
  font-weight: 350 !important;
}

html body #shortfilmView .shortfilmGroupHead p,
html body #shortfilmView .sfStagePrompt,
html body #shortfilmView .sfStageMeta,
html body #shortfilmView .sfResultMeta {
  color: var(--tx22-muted) !important;
}

html body #shortfilmView .sfBatchStage {
  border: 0 !important;
  border-bottom: 1px solid var(--tx22-line) !important;
  border-radius: 0 !important;
  background: #07080b !important;
}

html body #shortfilmView .sfStageMedia {
  background: #030304 !important;
}

html body #shortfilmView .sfStageMedia[data-stage-aspect="9:16"] {
  max-height: min(66vh, 680px) !important;
  margin-inline: auto !important;
  aspect-ratio: 9 / 16 !important;
}

html body #shortfilmView .sfStageMedia[data-stage-aspect="16:9"] {
  aspect-ratio: 16 / 9 !important;
}

html body #shortfilmView .sfStageMedia[data-stage-aspect="mixed"] {
  aspect-ratio: 16 / 9 !important;
}

html body #shortfilmView .sfStageMedia .sfResultPoster {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body #shortfilmView .sfStageKicker {
  color: var(--tx22-signal) !important;
  letter-spacing: 0.08em !important;
}

html body #shortfilmView .sfStageBar,
html body #shortfilmView .shortfilmGroupMeta {
  border-color: var(--tx22-line) !important;
}

html body #shortfilmView .sfCardButton,
html body #shortfilmView .sfDownloadAll {
  border-color: var(--tx22-line) !important;
  background: transparent !important;
  color: var(--tx22-muted) !important;
}

html body #shortfilmView .sfCardButton.primary {
  border-color: var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

/* Real source ratios stay intact. The renderer should set --media-ratio. */
html body .jobCover.portrait,
html body .sfThumb[data-aspect="9:16"] {
  aspect-ratio: 9 / 16 !important;
}

html body .jobCover.wide,
html body .sfThumb[data-aspect="16:9"] {
  aspect-ratio: 16 / 9 !important;
}

html body .jobCover img,
html body .jobCover video,
html body .sfResultMedia img,
html body .sfResultMedia video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #030304 !important;
}

html body .sfThumb[data-aspect="9:16"] .sfResultMedia {
  aspect-ratio: 9 / 16 !important;
}

html body .sfThumb[data-aspect="16:9"] .sfResultMedia {
  aspect-ratio: 16 / 9 !important;
}

html body #shortfilmView .sfFilmStrip,
html body #shortfilmView .shortfilmGrid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 14px !important;
  overflow: visible !important;
}

html body #shortfilmView .sfFilmStrip[data-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body #shortfilmView .sfFilmStrip[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body #shortfilmView .sfFilmStrip[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body #shortfilmView .sfFilmStrip[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body #shortfilmView .sfFilmStrip[data-count="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html body #shortfilmView .sfThumb {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--tx22-line) !important;
  border-radius: 5px !important;
  background: #08090c !important;
}

html body #shortfilmView .sfThumb.selected {
  border-color: rgb(255 255 255 / 42%) !important;
}

html body #shortfilmView .sfResultStatus[data-state="queued"],
html body #shortfilmView .jobStatus[data-state="queued"] {
  color: #c7cad2 !important;
}

html body #shortfilmView .sfResultStatus[data-state="running"],
html body #shortfilmView .jobStatus[data-state="running"] {
  color: var(--tx22-blue) !important;
}

html body #shortfilmView .sfResultStatus[data-state="succeeded"],
html body #shortfilmView .jobStatus[data-state="succeeded"] {
  color: var(--tx22-success) !important;
}

html body #shortfilmView .sfResultStatus[data-state="failed"],
html body #shortfilmView .jobStatus[data-state="failed"] {
  color: var(--tx22-danger) !important;
}

html body #shortfilmView .shortfilmComposer {
  border: 1px solid var(--tx22-line) !important;
  border-radius: var(--tx22-radius) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
}

html body #shortfilmView .sfModeBar,
html body #shortfilmView .sfSettingGroup {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
}

html body #shortfilmView .sfModeBar button[aria-pressed="true"],
html body #shortfilmView .sfToolRow button[aria-pressed="true"] {
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body #shortfilmView #shortfilmPrompt {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-ink) !important;
}

html body #shortfilmView #shortfilmGenerate {
  border: 1px solid var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body #shortfilmView #shortfilmGenerate:disabled {
  border-color: var(--tx22-line) !important;
  background: rgb(255 255 255 / 10%) !important;
  color: var(--tx22-faint) !important;
}

/* Library keeps real portrait/landscape media. */

html body .library.tx-glass-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .library .tx-page-header h1 {
  color: var(--tx22-ink) !important;
  font-size: 64px !important;
  font-weight: 250 !important;
  letter-spacing: -0.06em !important;
}

html body .library .sectionHead .sub,
html body .library .countCard span {
  color: var(--tx22-muted) !important;
}

html body .library .countCard strong {
  color: var(--tx22-ink) !important;
  font-weight: 350 !important;
}

html body .libraryToolsRow,
html body .libraryTools,
html body .librarySearchWrap {
  border-color: var(--tx22-line) !important;
  background: transparent !important;
}

html body .libraryTools .filterBtn[aria-pressed="true"] {
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body .librarySearchWrap {
  border: 1px solid var(--tx22-line) !important;
  background: rgb(255 255 255 / 3%) !important;
}

html body .librarySearch {
  color: var(--tx22-ink) !important;
}

html body .jobs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 16px !important;
  align-items: start !important;
}

html body .jobCard {
  min-width: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tx22-ink) !important;
  box-shadow: none !important;
}

html body .jobCover {
  overflow: hidden !important;
  border: 1px solid var(--tx22-line) !important;
  border-radius: 5px !important;
  background: #030304 !important;
}

html body .jobCard h2,
html body .jobCard h3,
html body .jobCard b {
  color: var(--tx22-ink) !important;
  font-weight: 450 !important;
}

html body .jobCard p,
html body .jobCard small,
html body .jobMeta {
  color: var(--tx22-muted) !important;
}

html body .jobCard .jobStatus,
html body .jobCard .status,
html body .jobCard [data-status] {
  border: 1px solid var(--tx22-line) !important;
  background: rgb(255 255 255 / 4%) !important;
}

html body .jobCard[data-status="succeeded"] :is(.jobStatus, .status) {
  border-color: rgb(80 185 151 / 26%) !important;
  color: var(--tx22-success) !important;
}

html body .jobCard[data-status="running"] :is(.jobStatus, .status) {
  border-color: rgb(140 168 255 / 26%) !important;
  color: var(--tx22-blue) !important;
}

html body .jobCard[data-status="queued"] :is(.jobStatus, .status) {
  color: #c7cad2 !important;
}

html body .jobCard[data-status="failed"] :is(.jobStatus, .status),
html body .jobCard[data-status="canceled"] :is(.jobStatus, .status) {
  border-color: rgb(255 110 101 / 26%) !important;
  color: var(--tx22-danger) !important;
}

/* Wallet and dialogs */

html body .walletLayout .card,
html body .paylog,
html body .rechargeDialog,
html body .securityDialog,
html body #communityDialog,
html body #communityShareDialog {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface) !important;
  color: var(--tx22-ink) !important;
  box-shadow: var(--tx22-shadow) !important;
}

html body dialog::backdrop {
  background: rgb(5 5 7 / 76%) !important;
}

html body dialog input,
html body dialog textarea,
html body dialog select {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-ink) !important;
}

html body dialog .primary,
html body dialog .credit {
  border-color: var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body #supportFab {
  border-color: var(--tx22-line-strong) !important;
  background: var(--tx22-surface-raised) !important;
  color: var(--tx22-ink) !important;
}

@media (max-width: 1280px) {
  html body[data-page="home"] .homeHello {
    font-size: 92px !important;
  }

  html body .jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  html body header {
    background: rgb(6 6 8 / 98%) !important;
  }

  html body[data-page="home"] .homeHello {
    font-size: 66px !important;
  }

  html body #shortfilmView .shortfilmHero h1,
  html body .library .tx-page-header h1 {
    font-size: 50px !important;
  }

  html body .jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #shortfilmView .tx22-creation-switch {
    display: flex;
    width: 100%;
  }

  html body #shortfilmView .tx22-creation-switch button {
    flex: 1;
  }

  html body #shortfilmView .tx22-create-grid {
    grid-template-columns: 1fr;
  }

  html body #shortfilmView .sfFilmStrip,
  html body #shortfilmView .shortfilmGrid {
    grid-template-columns: none !important;
    grid-auto-columns: 176px !important;
    grid-auto-flow: column !important;
    gap: 9px !important;
    padding: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: inline proximity;
  }

  html body #shortfilmView .sfThumb {
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  html body[data-page="home"] .homeHello {
    font-size: 48px !important;
  }

  html body #shortfilmView .shortfilmHero h1,
  html body .library .tx-page-header h1 {
    font-size: 42px !important;
  }

  html body .library .libraryToolsRow {
    display: grid !important;
    gap: 9px !important;
  }

  html body .library .libraryTools {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  html body .librarySearchWrap {
    width: 100% !important;
  }

  html body .jobs {
    gap: 22px 9px !important;
  }

  html body #shortfilmView .tx22-image-aspects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html body #shortfilmView .tx22-count-group {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body header .points-pill {
    min-width: 40px !important;
  }
}

@media (max-width: 359px) {
  html body .jobs {
    grid-template-columns: 1fr !important;
  }
}

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

/* Integrated real image job states and multi-reference controls. */

html body #shortfilmView .reference-slot {
  position: relative;
  grid-template-rows: minmax(88px, 1fr) auto auto;
  place-items: stretch;
}

html body #shortfilmView .reference-slot img {
  min-height: 88px;
  max-height: 150px;
}

html body #shortfilmView .reference-meta {
  padding: 5px 6px 2px;
  color: var(--tx22-muted);
  font-size: 9px;
}

html body #shortfilmView .reference-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 2px 5px 5px;
}

html body #shortfilmView .reference-actions button {
  min-height: 28px;
  border: 1px solid var(--tx22-line);
  border-radius: 4px;
  background: #111218;
  color: var(--tx22-muted);
  font-size: 9px;
}

html body #shortfilmView .reference-actions button:hover {
  border-color: var(--tx22-line-strong);
  color: var(--tx22-ink);
}

html body #shortfilmView .tx22-image-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tx22-line);
  border-radius: 6px;
  background: var(--tx22-surface-raised);
}

html body #shortfilmView .tx22-image-card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #030304;
}

html body #shortfilmView .tx22-image-card-media a,
html body #shortfilmView .tx22-image-card-media img {
  display: block;
  width: 100%;
  height: 100%;
}

html body #shortfilmView .tx22-image-card-media img {
  object-fit: contain;
}

html body #shortfilmView .tx22-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--tx22-muted);
  text-align: center;
  font-size: 11px;
}

html body #shortfilmView .tx22-image-placeholder > span {
  width: min(140px, 70%);
  height: 3px;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(90deg, var(--tx22-signal) var(--progress, 0%), rgb(255 255 255 / 8%) 0);
}

html body #shortfilmView .tx22-image-card[data-status="failed"] .tx22-image-placeholder {
  color: var(--tx22-danger);
}

html body #shortfilmView .tx22-image-card-copy {
  display: grid;
  gap: 6px;
  padding: 10px;
}

html body #shortfilmView .tx22-image-card-copy strong {
  overflow: hidden;
  color: var(--tx22-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #shortfilmView .tx22-image-card-copy small {
  color: var(--tx22-faint);
  font-size: 9px;
  line-height: 1.5;
}

html body #shortfilmView .tx22-image-card-copy .secondary-button {
  width: max-content;
  min-height: 32px;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid var(--tx22-line);
  border-radius: 5px;
  background: transparent;
  color: var(--tx22-muted);
  font-size: 9px;
  text-decoration: none;
}

@media (max-width: 620px) {
  html body #shortfilmView .tx22-image-wall {
    grid-template-columns: 1fr;
  }

  html body #shortfilmView .image-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Final cascade lock for the live Pearl v3 DOM.
 *
 * emerald-mist-v21 still contains several ID-heavy !important rules. The
 * selectors below intentionally match or exceed that specificity and are kept
 * last so v22 remains the visible theme without deleting legacy features.
 */

html body,
html body[data-page] {
  background-color: var(--tx22-bg) !important;
  background-image:
    radial-gradient(ellipse at 74% 0%, rgb(56 86 145 / 14%), transparent 32%),
    linear-gradient(180deg, #060608 0%, #07070a 58%, #060608 100%) !important;
  background-attachment: scroll !important;
  color: var(--tx22-ink) !important;
}

html body::before,
html body::after {
  display: none !important;
}

html body header#siteHeader#siteHeader.pearl-header {
  border-color: var(--tx22-line) !important;
  background: rgb(6 6 8 / 96%) !important;
  box-shadow: none !important;
}

html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch,
html body header#siteHeader#siteHeader.pearl-header .points-pill,
html body header#siteHeader#siteHeader.pearl-header .badge,
html body header#siteHeader#siteHeader.pearl-header #notificationButton,
html body header#siteHeader#siteHeader.pearl-header #profileTrigger {
  border-color: var(--tx22-line) !important;
  background: rgb(255 255 255 / 3%) !important;
  color: var(--tx22-muted) !important;
  box-shadow: none !important;
}

html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch:focus-within,
html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch:hover {
  border-color: var(--tx22-line-strong) !important;
  background: rgb(255 255 255 / 5%) !important;
  box-shadow: 0 0 0 3px rgb(140 168 255 / 10%) !important;
}

html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch input {
  color: var(--tx22-ink) !important;
}

html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch input::placeholder {
  color: var(--tx22-faint) !important;
}

html body header#siteHeader#siteHeader.pearl-header .points-pill i {
  border-color: var(--tx22-signal) !important;
  background: var(--tx22-signal) !important;
  box-shadow: 0 0 10px rgb(255 107 53 / 34%) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell {
  background: transparent !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
  border-right: 1px solid var(--tx22-line) !important;
  background: #050506 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .navTitle {
  color: var(--tx22-faint) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand {
  background: transparent !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand:hover,
html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand):hover {
  background: rgb(255 255 255 / 4%) !important;
  color: var(--tx22-ink) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) {
  border-radius: 6px !important;
  color: var(--tx22-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button[aria-current="page"]:not(.pearl-sidebar-brand) {
  background: rgb(255 255 255 / 7%) !important;
  color: var(--tx22-ink) !important;
  box-shadow: inset 0 0 0 1px var(--tx22-line) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .txv21-sidebar-credit {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-page="home"] .pearl-home-v3 {
  background: transparent !important;
  color: var(--tx22-ink) !important;
}

html body[data-page="home"] .pearl-home-v3::before,
html body[data-page="home"] .pearl-home-v3::after {
  background: rgb(56 86 145 / 10%) !important;
  opacity: 0.8 !important;
}

html body[data-page="home"] .pearl-hero {
  height: auto !important;
  min-height: 0 !important;
  padding: 52px 0 34px !important;
}

html body[data-page="home"] .pearl-kicker {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--tx22-signal) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-page="home"] .pearl-hero h2 {
  color: transparent !important;
  background: linear-gradient(180deg, #fff 0%, #dfe4ea 32%, #788290 47%, #f7f9fa 55%, #b3bbc4 70%, #636d7a 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(72px, 6.8vw, 112px) !important;
  font-weight: 230 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
}

html body[data-page="home"] .pearl-hero p {
  color: var(--tx22-muted) !important;
}

html body[data-page="home"] .pearl-composer {
  border: 1px solid var(--tx22-line) !important;
  border-radius: var(--tx22-radius) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-page="home"] .pearl-composer::after {
  box-shadow: inset 0 1px rgb(255 255 255 / 6%) !important;
}

html body[data-page="home"] .pearl-mode-switch,
html body[data-page="home"] .pearl-prompt-shell,
html body[data-page="home"] .pearl-control,
html body[data-page="home"] .pearl-count-option,
html body[data-page="home"] .pearl-reference-zone,
html body[data-page="home"] .pearl-guest-collection {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-muted) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-page="home"] .pearl-mode-switch button[aria-pressed="true"],
html body[data-page="home"] .pearl-count-option[aria-pressed="true"],
html body[data-page="home"] .pearl-cta {
  border-color: var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
}

html body[data-page="home"] .pearl-prompt-title {
  color: var(--tx22-signal) !important;
}

html body[data-page="home"] .pearl-prompt-shell textarea {
  color: var(--tx22-ink) !important;
}

html body[data-page="home"] .pearl-prompt-shell textarea::placeholder,
html body[data-page="home"] .pearl-prompt-shell small,
html body[data-page="home"] .pearl-guest-hint {
  color: var(--tx22-faint) !important;
}

html body[data-page="home"] .pearl-curated-head h2,
html body[data-page="home"] .pearl-curated-more {
  color: var(--tx22-ink) !important;
}

html body[data-page="home"] .pearl-curated-line {
  background: linear-gradient(90deg, transparent, var(--tx22-line-strong), transparent) !important;
}

html body #auth.pearl-auth-overlay {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface) !important;
  box-shadow: var(--tx22-shadow) !important;
}

html body #auth.pearl-auth-overlay .authVisual {
  border-color: var(--tx22-line) !important;
  background:
    radial-gradient(ellipse at 62% 42%, rgb(224 237 255 / 16%), transparent 38%),
    #08090d !important;
}

html body #auth.pearl-auth-overlay #authForm input,
html body #auth.pearl-auth-overlay .emailTabs button,
html body #auth.pearl-auth-overlay .authProviderButton,
html body #auth.pearl-auth-overlay .emailBack {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-ink) !important;
}

html body .walletLayout .balanceCard,
html body .walletLayout .rechargeCard,
html body .paylog,
html body .rechargeDialog,
html body .securityDialog {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface) !important;
  box-shadow: none !important;
}

html body #rechargeCodeCard,
html body #rechargeCodeCard .rechargeCodeContact,
html body #rechargeCodeCard .rechargeCodeTier {
  border-color: var(--tx22-line) !important;
  background: var(--tx22-surface-raised) !important;
  color: var(--tx22-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #rechargeCodeCard .rechargeCodeHead h2,
html body #rechargeCodeCard .rechargeCodeTier strong,
html body #rechargeCodeCard .rechargeRedeemForm label {
  color: var(--tx22-ink) !important;
}

html body #rechargeCodeCard .rechargeCodeHead p,
html body #rechargeCodeCard .rechargeCodeQrNote,
html body #rechargeCodeCard .rechargeCodeTier span,
html body #rechargeCodeCard .rechargeCodeLegacy,
html body #rechargeCodeCard .rechargeRedeemStatus {
  color: var(--tx22-muted) !important;
}

html body #rechargeCodeCard .rechargeCodeQr {
  border-color: var(--tx22-line) !important;
  background: #fff !important;
}

html body #rechargeCodeCard .rechargeRedeemRow input {
  border-color: var(--tx22-line) !important;
  background: #08090c !important;
  color: var(--tx22-ink) !important;
}

html body #rechargeCodeCard .rechargeRedeemRow button {
  border-color: var(--tx22-ink) !important;
  background: var(--tx22-ink) !important;
  color: var(--tx22-bg) !important;
  box-shadow: none !important;
}

html body .library .jobCover.imageCover {
  padding: 0 !important;
  background: #030304 !important;
  background-image: none !important;
  aspect-ratio: var(--media-ratio, 1 / 1) !important;
}

html body .library .jobImageLink,
html body .library .jobImageLink img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html body .library .jobImageLink img {
  object-fit: contain !important;
}

html body .library .jobCardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}

html body .library .jobCardActions .jobAction {
  display: grid;
  place-items: center;
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

html body .library .jobCardActions .jobAction.secondary {
  background: transparent !important;
  color: var(--tx22-muted) !important;
}

/* Image composer must stay a single vertical panel; legacy shortfilm grid rules
 * otherwise auto-place its children into multiple columns and overlap them. */
html body #shortfilmView .tx22-image-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

html body #shortfilmView .tx22-image-panel > *,
html body #shortfilmView .tx22-image-panel .tx22-composer-head,
html body #shortfilmView .tx22-image-panel .sfModeBar,
html body #shortfilmView .tx22-image-panel .sfPromptWrap,
html body #shortfilmView .tx22-image-panel .tx22-field-block,
html body #shortfilmView .tx22-image-panel .sfToolRow,
html body #shortfilmView .tx22-image-panel .sfSafety {
  width: 100% !important;
  min-width: 0 !important;
}

html body #shortfilmView .tx22-image-panel .tx22-composer-head,
html body #shortfilmView .tx22-image-panel .sfModeBar,
html body #shortfilmView .tx22-image-panel .sfToolRow {
  display: flex !important;
}

@media (max-width: 620px) {
  html body header#siteHeader#siteHeader.pearl-header {
    gap: 4px !important;
    padding-inline: 10px !important;
  }

  html body[data-page="home"] #pearlHeroTitle {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(34px, 11vw, 44px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .pearl-brand {
    width: 88px !important;
    min-width: 0 !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    transform: none !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .account {
    gap: 4px !important;
    margin-left: auto !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .points-pill {
    display: inline-flex !important;
    min-width: 54px !important;
    height: 34px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .points-pill strong {
    font-size: 12px !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .points-pill > span:last-child {
    display: none !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .badge {
    display: none !important;
  }

  html body header#siteHeader#siteHeader.pearl-header #profileTrigger {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    justify-content: center;
  }

  html body header#siteHeader#siteHeader.pearl-header #mobileNavToggle {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
}

@media (max-width: 360px) {
  html body header#siteHeader#siteHeader.pearl-header .pearl-brand {
    width: 62px !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }

  html body header#siteHeader#siteHeader.pearl-header .globalStudioSearch input::placeholder {
    color: transparent !important;
  }
}

@media (max-width: 520px) {
  html body[data-page="home"] .pearl-curated-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="home"] .pearl-curated-head .pearl-curated-line {
    display: none !important;
  }

  html body[data-page="home"] .pearl-curated-head h2,
  html body[data-page="home"] .pearl-curated-head .pearl-curated-more {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body[data-page="home"] .pearl-curated-head h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-page="home"] .pearl-curated-head .pearl-curated-more {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  html body[data-page="home"] .pearl-curated-head .pearl-curated-status {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body[data-page="home"] .pearl-curated-head .pearl-curated-loadmore {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }
}