/*
 * 天下AI · Pearl Glass V3
 * Approved source: Figma page "04 · 天下AI / Pearl Glass V3 浅色珍珠玻璃".
 * This layer is intentionally additive so the existing application APIs and
 * business screens remain available while the V3 shell and phase-one pages
 * are migrated in a controlled order.
 */

:root {
  color-scheme: light;
  --pearl-page: #f7f9fc;
  --pearl-page-alt: #eef4f8;
  --pearl-ink: #252935;
  --pearl-muted: #697180;
  --pearl-faint: #8992a0;
  --pearl-iris: #7169a5;
  --pearl-blue: #6682b7;
  --pearl-white: #ffffff;
  --pearl-line: rgba(255, 255, 255, 0.96);
  --pearl-line-soft: rgba(203, 214, 226, 0.56);
  --pearl-glass: rgba(249, 251, 254, 0.62);
  --pearl-glass-soft: rgba(255, 255, 255, 0.74);
  --pearl-shadow: 0 15px 39px rgba(135, 150, 171, 0.2);
  --pearl-shadow-soft: 0 8px 24px rgba(139, 149, 169, 0.13);
  --pearl-pearl-gradient: linear-gradient(132deg, #d9d2f2 0%, #b7cbef 46%, #d8dfec 91%);
  --pearl-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
}

html,
body {
  color-scheme: light !important;
  background: var(--pearl-page) !important;
  -webkit-text-size-adjust: 100% !important;
}

body {
  color: var(--pearl-ink) !important;
  background-image:
    radial-gradient(circle at 74% -8%, rgba(172, 161, 226, 0.26), transparent 32%),
    radial-gradient(circle at 98% 34%, rgba(245, 195, 200, 0.28), transparent 30%),
    radial-gradient(circle at 4% 64%, rgba(164, 219, 235, 0.26), transparent 34%),
    linear-gradient(110deg, #f9fafc 0%, #eef4f8 48%, #f9eef0 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--pearl-font) !important;
}

body[data-auth-open="true"],
body[data-nav-open="true"] {
  overflow: hidden !important;
}

body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 38% 34% at 55% -8%, rgba(193, 181, 239, 0.24), transparent 72%),
    radial-gradient(ellipse 34% 30% at 104% 77%, rgba(249, 196, 185, 0.25), transparent 76%),
    radial-gradient(ellipse 34% 32% at -8% 58%, rgba(147, 219, 239, 0.24), transparent 76%) !important;
  filter: blur(1px);
}

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

/*
 * Opaque base underlay. Keeps browser skins / extensions from bleeding
 * wallpaper artwork through translucent glass surfaces.
 */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: #f7f9fc;
}

button,
a,
[role="button"],
.pearl-control,
.pearl-cta,
.authProviderButton {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pearl-cta,
.pearl-count-option,
.jobAction,
.sfGenerate,
.planBuy,
.credit {
  transition:
    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}

.pearl-cta:not(:disabled):active,
.pearl-count-option:not(:disabled):active,
.jobAction:not(:disabled):active,
.sfGenerate:not(:disabled):active,
.planBuy:not(:disabled):active,
.credit:not(:disabled):active {
  transform: scale(0.97) !important;
}

@keyframes p0SurfaceIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body #auth #authForm,
html body dialog.rechargeDialog[open] {
  animation: p0SurfaceIn 220ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.txSkipLink {
  position: fixed;
  z-index: 10000;
  left: 16px;
  top: 12px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--pearl-shadow-soft);
  color: var(--pearl-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.txSkipLink:focus,
.txSkipLink:focus-visible {
  transform: translateY(0);
}

html body[data-nav-open="true"] #primaryNavigation {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/*
 * Ambient-gradient cascade guard.
 * The legacy workbench layer targets `body[data-page="home"]` with
 * attribute-level specificity to neutralize the pearl ambient gradients
 * (background-image: none and ::before display: none). Restore the approved
 * lilac / peach / sky ambience with matching-or-higher specificity so the
 * pearl surface keeps its soft color wash on the home page.
 */
html body[data-page="home"] {
  background-image:
    radial-gradient(circle at 74% -8%, rgba(172, 161, 226, 0.26), transparent 32%),
    radial-gradient(circle at 98% 34%, rgba(245, 195, 200, 0.28), transparent 30%),
    radial-gradient(circle at 4% 64%, rgba(164, 219, 235, 0.26), transparent 34%),
    linear-gradient(110deg, #f9fafc 0%, #eef4f8 48%, #f9eef0 100%) !important;
}

html body[data-page="home"]::before {
  display: block !important;
}

body,
button,
input,
textarea,
select {
  font-family: var(--pearl-font) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(113, 105, 165, 0.72) !important;
  outline-offset: 3px !important;
}

[hidden] {
  display: none !important;
}

body #auth[hidden],
body #auth.pearl-auth-overlay[hidden],
body #auth [hidden],
body #workspace[hidden],
body #homeView[hidden],
body #inviteDialog[hidden] {
  display: none !important;
}

.txVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pearlNarrowCopy {
  display: none;
}

/* Global shell */
body header,
body header.pearl-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 80 !important;
  height: 74px !important;
  padding: 0 max(24px, calc((100vw - 1294px) / 2)) !important;
  display: flex !important;
  align-items: center !important;
  background:
    linear-gradient(169deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 252, 0.76) 50%, rgba(255, 255, 255, 0.86)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 6px 20px rgba(139, 149, 169, 0.07) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
}

body header .brand,
body header .pearl-brand {
  width: auto !important;
  min-width: 175px !important;
  height: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}

body header .pearl-brand img {
  display: block !important;
  width: 175px !important;
  height: auto !important;
}

body header .pearl-brand > span,
body header .pearl-brand > small,
body header .pearl-brand > svg {
  display: none !important;
}

body header .globalStudioSearch,
body .tx-announcement,
body .authBackdrop {
  display: none !important;
}

body header .account {
  position: relative !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body header .points-pill {
  height: 38px !important;
  padding: 0 12px !important;
  gap: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: #4a5f86 !important;
  backdrop-filter: blur(8px);
}

body header .points-pill i {
  width: 7px !important;
  height: 7px !important;
  background: var(--pearl-blue) !important;
  box-shadow: 0 0 0 3px rgba(102, 130, 183, 0.12) !important;
}

body header .points-pill strong,
body header .points-pill span {
  color: #4a5f86 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body header .badge {
  border: 0 !important;
  background: transparent !important;
  color: var(--pearl-muted) !important;
  padding: 0 !important;
  font-size: 12px !important;
}

body header .guestLoginButton {
  height: 38px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  background:
    linear-gradient(123deg, rgba(255, 255, 255, 0.8), rgba(239, 242, 248, 0.64) 50%, rgba(255, 255, 255, 0.78));
  box-shadow: var(--pearl-shadow-soft);
  color: var(--pearl-ink);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(7px);
}

body header .guestLoginButton:hover {
  background: rgba(255, 255, 255, 0.9);
}

body header .notificationButton,
body header .profileTrigger {
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(123deg, rgba(255, 255, 255, 0.76), rgba(239, 242, 248, 0.62) 50%, rgba(255, 255, 255, 0.76)) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  backdrop-filter: blur(7px);
}

body header .notificationButton {
  width: 38px !important;
}

body header .profileTrigger {
  min-width: 92px !important;
  max-width: 240px !important;
  height: 38px !important;
  padding: 3px 10px 3px 4px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

body header .profileTrigger > #userName {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--pearl-ink) !important;
  font-size: 11px !important;
}

body header .accountAvatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #d8d1f3, #b8ccef 52%, #c9e4ec) !important;
  color: #343246 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
}

body header .profileMenu,
body header .notificationPanel {
  top: 52px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 253, 0.97) !important;
  box-shadow: 0 24px 70px rgba(91, 104, 126, 0.2) !important;
  color: var(--pearl-ink) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  padding: 8px !important;
}

body header .profileMenuItem,
body header .notificationItem {
  height: 38px !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  color: #4f5969 !important;
  font-size: 12px !important;
  font-weight: 550 !important;
}

body header .profileMenuItem:hover,
body header .notificationItem:hover {
  background: rgba(214, 219, 233, 0.42) !important;
  color: var(--pearl-ink) !important;
}

body header .profileMenuTop {
  border-bottom-color: rgba(148, 160, 178, 0.16) !important;
}

body header .profileMenuTop strong {
  color: var(--pearl-ink) !important;
  font-size: 13px !important;
}

body header .profileMenuTop small {
  color: var(--pearl-faint) !important;
  font-size: 10px !important;
}

body header .profileMenuItem.danger {
  color: #b3525c !important;
}

body header .profileMenuItem.danger:hover {
  background: rgba(255, 226, 229, 0.55) !important;
  color: #9c3f49 !important;
}

body header .menuToggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--pearl-shadow-soft);
  color: var(--pearl-muted);
  font-size: 20px;
  line-height: 1;
  backdrop-filter: blur(7px);
}

body[data-guest="true"] header .points-pill {
  display: none !important;
}

/* Primary navigation */
body #workspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 74px 0 0 !important;
}

body #workspace > nav {
  position: fixed !important;
  z-index: 81 !important;
  top: 0 !important;
  left: 50% !important;
  bottom: auto !important;
  width: auto !important;
  height: 74px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

body #workspace > nav .navTitle,
body #workspace > nav .recentChats,
body #workspace > nav .recentChatsTitle,
body #workspace > nav .navBadge,
body #workspace > nav .navCount,
body #workspace > nav [data-page="plans"] {
  display: none !important;
}

body #workspace > nav .pearlMobileMenuOnly {
  display: none !important;
}

body #workspace > nav button {
  position: relative !important;
  height: 74px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}

body #workspace > nav button > svg {
  display: none !important;
}

body #workspace > nav button > span {
  margin: 0 !important;
}

body #workspace > nav button:hover {
  background: transparent !important;
  color: var(--pearl-ink) !important;
}

body #workspace > nav button[aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-ink) !important;
  font-weight: 700 !important;
}

body #workspace > nav button[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 20px;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(113, 105, 165, 0.62), transparent);
}

body[data-page="home"] main {
  max-width: none !important;
}

body[data-page="home"] #workspace {
  padding-bottom: 0 !important;
}

body[data-page="home"] #homeView {
  padding: 0 !important;
}

body #homeView > :not(.pearl-home-v3) {
  display: none !important;
}

body #museHint:empty {
  display: none !important;
}

/* Phase-one home */
.pearl-home-v3 {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 74px);
  overflow: hidden;
  color: var(--pearl-ink);
}

.pearl-home-v3::before,
.pearl-home-v3::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(46px);
}

.pearl-home-v3::before {
  width: 560px;
  height: 420px;
  right: -170px;
  top: 660px;
  background: rgba(249, 194, 188, 0.32);
}

.pearl-home-v3::after {
  width: 620px;
  height: 480px;
  left: -210px;
  top: 230px;
  background: rgba(156, 220, 238, 0.27);
}

.pearl-home-inner {
  width: min(1200px, calc(100vw - 64px));
  margin: 0 auto;
  padding-bottom: 86px;
}

.pearl-hero {
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.pearl-kicker,
.pearl-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.97);
  border-radius: 999px;
  background:
    linear-gradient(143deg, rgba(255, 255, 255, 0.8), rgba(231, 237, 247, 0.7) 48%, rgba(248, 250, 252, 0.78));
  box-shadow: 0 6px 20px rgba(139, 149, 169, 0.07);
  color: var(--pearl-iris);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}

.pearl-hero h2 {
  margin: 0;
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.055em;
  color: transparent;
  background: linear-gradient(157deg, #242936 0%, #605c7c 46%, #6a86a3 92%);
  background-clip: text;
  -webkit-background-clip: text;
  text-wrap: balance;
}

.pearl-hero p {
  margin: 0;
  color: var(--pearl-muted);
  font-size: 16px;
  line-height: 1.65;
}

.pearl-composer {
  position: relative;
  width: min(1020px, 100%);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1.15px solid rgba(255, 255, 255, 0.99);
  border-radius: 27px;
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.56), rgba(241, 245, 251, 0.45) 47%, rgba(236, 231, 245, 0.43));
  box-shadow: var(--pearl-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.pearl-composer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.66);
}

.pearl-composer-top,
.pearl-composer-controls,
.pearl-mode-switch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.pearl-composer-top {
  min-height: 42px;
  justify-content: space-between;
  gap: 16px;
}

.pearl-mode-switch {
  gap: 10px;
}

.pearl-mode-switch button,
.pearl-control,
.pearl-cta,
.pearl-curated-more,
.pearl-guest-collection button {
  border: 1px solid rgba(255, 255, 255, 0.96);
  background:
    linear-gradient(123deg, rgba(255, 255, 255, 0.78), rgba(239, 242, 248, 0.66) 48%, rgba(255, 255, 255, 0.78));
  box-shadow: var(--pearl-shadow-soft);
  color: var(--pearl-ink);
  backdrop-filter: blur(7px);
}

.pearl-mode-switch button {
  height: 40px;
  min-width: 128px;
  padding: 0 22px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
}

.pearl-mode-switch button[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient);
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow: var(--pearl-shadow-soft), inset 0 1px 1px rgba(255, 255, 255, 0.62);
  color: #2c3343;
}

.pearl-guest-hint {
  color: var(--pearl-muted);
  font-size: 12px;
}

body:not([data-guest="true"]) .pearl-guest-hint {
  display: none !important;
}

.pearl-prompt-shell {
  position: relative;
  z-index: 1;
  min-height: 122px;
  padding: 17px 20px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  border: 1.05px solid rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  background:
    linear-gradient(156deg, rgba(255, 255, 255, 0.74), rgba(245, 247, 250, 0.65) 47%, rgba(236, 239, 250, 0.63));
  box-shadow: 0 13px 31px rgba(135, 148, 165, 0.08);
  backdrop-filter: blur(8px);
}

.pearl-prompt-shell textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--pearl-ink) !important;
  text-align: left;
  font-family: var(--pearl-font) !important;
  font-size: 16px !important;
  font-weight: 450;
  line-height: 1.7 !important;
  letter-spacing: 0;
}

.pearl-prompt-title {
  display: block;
  margin-bottom: 2px;
  color: var(--pearl-iris);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-align: left;
}

.pearl-prompt-shell textarea:placeholder-shown {
  text-align: center;
}

.pearl-prompt-shell textarea::placeholder {
  color: rgba(105, 113, 128, 0.9);
  font-weight: 400;
}

.pearl-prompt-shell:focus-within {
  border-color: rgba(113, 105, 165, 0.4);
  box-shadow: 0 0 0 3px rgba(113, 105, 165, 0.08), 0 13px 31px rgba(135, 148, 165, 0.1);
}

.pearl-prompt-shell small {
  color: var(--pearl-muted);
  text-align: center;
  font-size: 12px !important;
  line-height: 1.5;
}

.pearl-composer-controls {
  min-height: 45px;
  padding: 4px;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid rgba(220, 225, 232, 0.72);
  border-radius: 10px;
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.66), rgba(235, 239, 246, 0.48) 47%, rgba(249, 250, 253, 0.52));
  backdrop-filter: blur(7px);
}

.pearl-control {
  flex: 0 0 auto;
  height: 38px !important;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1 !important;
}

.pearl-count-options {
  flex: 0 0 auto;
  height: 38px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--pearl-shadow-soft);
}

.pearl-count-option {
  width: 29px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pearl-muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.pearl-count-option[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient);
  color: #2c3343;
  font-weight: 750;
}

.pearl-count-option:hover {
  color: var(--pearl-ink);
  background: rgba(255, 255, 255, 0.78);
}

.pearl-cost {
  min-width: 42px;
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--pearl-ink);
  font-size: 12px;
  font-weight: 750;
  box-shadow: var(--pearl-shadow-soft);
}

.pearl-cost::before {
  content: "◈";
  color: var(--pearl-iris);
  font-size: 11px;
}

.pearl-reference-zone {
  position: relative;
  z-index: 1;
  min-height: 96px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(240, 245, 251, 0.52) 52%, rgba(246, 240, 248, 0.55));
  box-shadow: 0 9px 24px rgba(135, 148, 165, 0.08);
}

.pearl-reference-preview {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(113, 105, 165, 0.35);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--pearl-iris);
  cursor: pointer;
}

.pearl-reference-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pearl-reference-preview span {
  font-size: 28px;
  line-height: 1;
}

.pearl-reference-preview small {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 5px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--pearl-muted);
  font-size: 8px;
}

.pearl-reference-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.pearl-reference-copy strong {
  color: var(--pearl-ink);
  font-size: 12px;
}

.pearl-reference-copy small {
  color: var(--pearl-muted);
  font-size: 10px;
  line-height: 1.5;
}

.pearl-reference-remove {
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #9b4f59;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.pearl-control:hover:not(:disabled),
.pearl-mode-switch button:hover,
.pearl-curated-more:hover {
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, 0.9);
}

.pearl-control:disabled {
  opacity: 0.72;
  color: #5d6675;
}

.pearl-spacer {
  flex: 1;
}

.pearl-cta {
  min-width: 156px;
  height: 42px !important;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--pearl-pearl-gradient);
  box-shadow: var(--pearl-shadow-soft), inset 0 1px 1px rgba(255, 255, 255, 0.62);
  color: #2c3343;
  font-size: 13px;
  font-weight: 750;
}

.pearl-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.05) brightness(1.02);
}

.pearl-cta:disabled {
  opacity: 0.78;
  color: #4f5868;
  filter: saturate(0.7);
}

.pearl-composer-message {
  min-height: 18px;
  margin: -4px 0 0;
  color: var(--pearl-muted);
  font-size: 11px;
}

.pearl-composer-message:empty {
  display: none;
}

.pearl-curated {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 30px 0 0;
}

.pearl-curated-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
}

.pearl-curated-head h2 {
  margin: 0;
  color: var(--pearl-ink);
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pearl-curated-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(138, 151, 169, 0.18), rgba(138, 151, 169, 0.06));
}

.pearl-curated-more,
.pearl-curated-head > a {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pearl-iris);
  font-size: 13px;
  text-decoration: none;
  backdrop-filter: none;
}

.pearl-curated-grid.communityGrid,
.pearl-curated-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px;
  margin-top: 20px;
  align-items: start;
}

.pearl-curated-grid .communityCard {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  color: var(--pearl-ink);
}

.pearl-curated-grid .communityMedia {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 215 / 244;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(104deg, rgba(221, 233, 245, 0.9), rgba(191, 207, 230, 0.9) 31%, rgba(235, 216, 225, 0.9) 61%, rgba(247, 236, 232, 0.9));
  box-shadow: 0 9px 26px rgba(143, 154, 173, 0.12);
}

.pearl-curated-grid .communityMedia video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pearl-curated-grid .communityBody {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: transparent !important;
}

.pearl-curated-grid .communityBody > strong {
  color: var(--pearl-ink);
  font-size: 13px;
  line-height: 1.45;
}

.pearl-curated-grid .communityBody > p {
  display: none;
}

.pearl-curated-grid .communityMeta {
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--pearl-muted);
  font-size: 11px;
}

.pearl-curated-grid .communityCreator::before {
  display: none;
}

.pearl-featured-pill,
.pearl-curated-grid .featuredPill {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--pearl-iris);
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.pearl-card-skeleton,
.pearl-curated-grid .communityCardSkeleton {
  min-height: 283px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.26)),
    linear-gradient(104deg, #dce8f2, #cfd7ec 42%, #f0dfe6);
  background-size: 220% 100%, 100% 100%;
  animation: pearlSkeleton 1.8s linear infinite;
}

@keyframes pearlSkeleton {
  to {
    background-position: -220% 0, 0 0;
  }
}

.pearl-guest-collection {
  position: relative;
  grid-column: 1 / -1;
  min-height: 210px;
  padding: 28px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(237, 243, 249, 0.42) 54%, rgba(245, 235, 244, 0.44));
  box-shadow: var(--pearl-shadow-soft);
  backdrop-filter: blur(18px);
}

.pearl-guest-collection::before {
  content: "▶";
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding-left: 2px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(225, 216, 246, 0.72) 52%, rgba(210, 229, 243, 0.68));
  box-shadow:
    0 10px 24px rgba(128, 118, 165, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  color: #7169a5;
  font-size: 13px;
}

.pearl-guest-collection strong {
  display: block;
  color: var(--pearl-ink);
  font-size: 18px;
}

.pearl-guest-collection p {
  max-width: 520px;
  margin: 8px auto 18px;
  color: var(--pearl-muted);
  font-size: 12px;
  line-height: 1.7;
}

.pearl-guest-collection button {
  height: 40px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.pearl-load-error {
  grid-column: 1 / -1;
  padding: 28px;
  border-radius: 16px;
  border: 1px dashed rgba(105, 113, 128, 0.24);
  background: rgba(255, 255, 255, 0.38);
  color: var(--pearl-muted);
  text-align: center;
  font-size: 12px;
}

/* Auth modal */
body #auth.pearl-auth-overlay {
  position: fixed !important;
  z-index: 110 !important;
  inset: 74px 0 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 74px) !important;
  margin: 0 !important;
  padding: 30px 24px 36px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  justify-items: center !important;
  padding-top: 34px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 82% 77%, rgba(245, 190, 186, 0.32), transparent 35%),
    radial-gradient(circle at 17% 70%, rgba(159, 219, 237, 0.28), transparent 35%),
    rgba(244, 247, 251, 0.64) !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  backdrop-filter: blur(26px) saturate(1.08);
  overscroll-behavior: contain;
}

body #auth .authVisual {
  display: none !important;
}

body #auth #authForm {
  position: relative;
  width: min(510px, calc(100vw - 32px));
  min-height: 0;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  background: rgba(248, 250, 253, 0.8) !important;
  border: 1.15px solid rgba(255, 255, 255, 0.99);
  border-radius: 24px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.56), rgba(241, 245, 251, 0.46) 47%, rgba(236, 231, 245, 0.44)) !important;
  box-shadow: var(--pearl-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.64);
  color: var(--pearl-ink) !important;
  backdrop-filter: blur(26px) saturate(1.05);
}

body #auth #authForm::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.64);
}

body #auth #authForm > * {
  position: relative;
  z-index: 1;
}

body #auth .authModalBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 27px;
}

body #auth .authModalBrand img {
  display: block;
  width: 142px;
  height: auto;
}

body #auth .authModalMark {
  display: none !important;
}

body #auth .authModalBrand strong {
  display: none;
}

body #auth #authTitle {
  margin: 0;
  padding-right: 48px;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.045em;
  color: var(--pearl-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

body #auth .authLead {
  margin: -7px 0 0;
  color: var(--pearl-muted);
  font-size: 13px;
  line-height: 1.62;
}

body #auth .field {
  margin: 0;
  gap: 7px;
  color: var(--pearl-ink);
  font-size: 12px;
  font-weight: 650;
}

body #auth .field input,
body #auth .field select,
dialog.rechargeDialog .field input {
  font-size: 16px !important;
}

body #auth .field input,
body #auth .field select {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(220, 227, 235, 0.8);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.66), rgba(221, 230, 241, 0.39) 48%, rgba(253, 253, 255, 0.57));
  color: var(--pearl-ink);
  font-size: 13px;
  box-shadow: 0 8px 22px rgba(139, 149, 169, 0.06);
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(221, 230, 241, 0.42) 48%, rgba(253, 253, 255, 0.62)) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--pearl-ink) !important;
}

body #auth .field input::placeholder {
  color: var(--pearl-muted);
}

body #auth .passwordControl button {
  color: var(--pearl-muted);
}

body #auth #passwordLoginFields {
  display: grid;
  gap: 14px;
}

body #auth #passwordActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

body #auth #passwordActions .primary,
body #auth #authForm #passwordActions .primary,
body #auth #emailSubmit,
body #auth .inviteSubmit {
  flex: 1 1 100%;
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  background: var(--pearl-pearl-gradient) !important;
  box-shadow: var(--pearl-shadow-soft), inset 0 1px 1px rgba(255, 255, 255, 0.62);
  color: #2c3343;
  font-size: 13px;
  font-weight: 750;
}

body #auth #passwordActions .link,
body #auth #authForm #passwordActions .link,
body #auth .authBack {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.64) !important;
  color: var(--pearl-muted);
  font-size: 12px;
  font-weight: 650;
  box-shadow: var(--pearl-shadow-soft);
}

body #auth .authDivider {
  margin: 10px 0 4px;
  color: var(--pearl-faint);
  font-size: 10px;
}

body #auth .authDivider::before,
body #auth .authDivider::after {
  background: rgba(120, 132, 151, 0.15);
}

body #auth .authProviders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body #auth .authProviderButton {
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--pearl-muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--pearl-shadow-soft);
  background: rgba(255, 255, 255, 0.58) !important;
  color: var(--pearl-muted) !important;
}

body #auth .authProviderButton::before {
  display: none !important;
  content: none !important;
}

body #auth .authProviderButton:not(:disabled) {
  color: var(--pearl-ink);
}

body #auth .authProviderButton:disabled {
  color: rgba(84, 95, 112, 0.72);
  opacity: 0.82;
  box-shadow: var(--pearl-shadow-soft);
  cursor: not-allowed;
}

body #auth .emailPanel,
body #auth .invitePanel {
  padding: 15px;
  display: grid;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.36);
  background-color: rgba(255, 255, 255, 0.4) !important;
}

body #auth .emailTabs {
  margin: 0;
  border-color: rgba(207, 216, 228, 0.48);
  background: rgba(255, 255, 255, 0.4);
}

body #auth .emailTabs button[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient);
  color: #2c3343;
}

body #auth .codeRow button,
body #auth .emailBack,
body #auth .inviteBack {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--pearl-ink);
}

body #auth .emailPanel .primary,
body #auth .invitePanel .primary {
  width: 100%;
}

body #auth #authError,
body #auth .emailMsg,
body #auth .inviteMessage {
  margin: 0;
  color: #a04f5b;
  font-size: 11px;
  line-height: 1.55;
}

body #auth .authFootnote,
body #auth .authLegalNote {
  margin: 0;
  color: var(--pearl-faint);
  font-size: 10px;
  line-height: 1.65;
  text-align: center;
}

body #auth .pearlAuthStatus {
  position: relative !important;
  top: auto;
  left: auto;
  transform: none;
  align-self: center;
  white-space: nowrap;
}

body #auth .pearlAuthClose {
  position: absolute;
  z-index: 4;
  right: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--pearl-shadow-soft);
  color: var(--pearl-ink);
  font-size: 18px;
  backdrop-filter: blur(7px);
}

body #auth #authForm > .pearlAuthClose {
  position: absolute !important;
  z-index: 4 !important;
  right: 18px !important;
  top: 18px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

body .invoiceLog,
body section[data-view="wallet"]:has(#openInvoiceDialog),
body #invoiceDialog,
body #workspace > nav [data-page="plans"],
body[data-page="home"] #supportFab,
body .createModeSwitch,
body [data-home-card="canvas"],
body [data-home-card="plans"] {
  display: none !important;
}

@media (max-width: 1280px) {
  body #workspace > nav button {
    padding-inline: 9px !important;
    font-size: 12px !important;
  }

  .pearl-curated-grid.communityGrid,
  .pearl-curated-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  body header {
    padding-inline: 22px !important;
  }

  body #workspace > nav {
    left: 52% !important;
  }

  body #workspace > nav button {
    padding-inline: 7px !important;
    font-size: 11px !important;
  }

  .pearl-home-inner {
    width: min(100% - 40px, 960px);
  }

  .pearl-curated-grid.communityGrid,
  .pearl-curated-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body header,
  body header.pearl-header {
    height: 61px !important;
    padding: 0 16px !important;
    gap: 11px !important;
  }

  body header .pearl-brand {
    min-width: 143px !important;
    height: 25px !important;
  }

  body header .pearl-brand img {
    width: 143px !important;
  }

  body header .account {
    gap: 8px !important;
  }

  body header .points-pill,
  body header .profileTrigger > #userName,
  body header .profileTrigger > i,
  body header #signOut,
  body header .badge {
    display: none !important;
  }

  body header .profileTrigger {
    width: 38px !important;
    padding: 4px !important;
    justify-content: center;
    border-radius: 10px !important;
  }

  body header .accountAvatar {
    width: 28px;
    height: 28px;
  }

  body header .menuToggle {
    display: grid;
    place-items: center;
  }

  body #workspace {
    padding-top: 61px !important;
  }

  body #workspace > nav {
    display: none !important;
    position: fixed !important;
    z-index: 105 !important;
    inset: 61px 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 61px);
    padding: 14px 18px 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow: auto !important;
    background:
      linear-gradient(151deg, rgba(255, 255, 255, 0.93), rgba(245, 248, 252, 0.88) 48%, rgba(255, 255, 255, 0.92)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 22px 56px rgba(116, 128, 149, 0.17) !important;
    transform: none !important;
    backdrop-filter: blur(24px) !important;
  }

  body[data-nav-open="true"] #workspace > nav {
    display: flex !important;
  }

  body #workspace > nav .navTitle {
    display: block !important;
    padding: 8px 10px 14px !important;
    color: var(--pearl-faint) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em;
  }

  body #workspace > nav button {
    width: 100% !important;
    height: 52px !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  body #workspace > nav button[aria-current="page"] {
    background: rgba(215, 220, 233, 0.36) !important;
  }

  body #workspace > nav button[aria-current="page"]::after {
    display: none;
  }

  .pearl-home-inner {
    width: calc(100% - 34px);
  }

  .pearl-hero {
    min-height: 250px;
    height: 250px;
  }

  .pearl-hero h2 {
    font-size: 30px;
  }

  .pearl-hero p {
    font-size: 13px;
  }

  .pearl-composer {
    padding: 15px;
    border-radius: 23px;
  }

  .pearl-composer-top {
    min-height: 41px;
  }

  .pearl-mode-switch button {
    height: 39px;
    min-width: 106px;
    padding: 0 16px;
    font-size: 12px;
  }

  .pearl-guest-hint {
    font-size: 10px;
  }

  .pearl-prompt-shell {
    min-height: 125px;
    padding: 14px;
    border-radius: 15px;
  }

  .pearl-prompt-shell textarea {
    min-height: 62px;
    text-align: left;
    font-size: 16px !important;
  }

  .pearl-prompt-shell small {
    text-align: left;
    font-size: 11px;
  }

  .pearl-composer-controls {
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .pearl-control {
    min-width: 0;
    padding-inline: 7px;
  }

  .pearl-spacer {
    display: none;
  }

  .pearl-cta {
    grid-column: 1 / -1;
    width: 100%;
  }

  .pearl-curated {
    padding-top: 24px;
  }

  .pearl-curated-head h2 {
    font-size: 21px;
  }

  .pearl-curated-grid.communityGrid,
  .pearl-curated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pearl-curated-grid .communityMedia {
    aspect-ratio: 170 / 188;
  }

  body #auth.pearl-auth-overlay {
    inset: 61px 0 0 !important;
    min-height: calc(100vh - 61px) !important;
    padding: 30px 16px !important;
    align-items: start;
  }

  body #auth #authForm {
    width: min(510px, calc(100vw - 32px));
    padding: 24px 20px;
    border-radius: 20px;
  }

  body #auth .pearlAuthClose {
    position: fixed !important;
    right: 16px;
    top: 74px;
  }

  body #auth .pearlAuthStatus {
    top: -44px;
  }
}

@media (max-width: 520px) {
  .pearl-home-inner {
    width: calc(100% - 32px);
  }

  .pearl-hero {
    min-height: 144px !important;
    height: 144px !important;
    padding-top: 0;
    gap: 7px;
  }

  .pearl-kicker {
    min-height: 27px;
    font-size: 10px;
  }

  .pearl-hero h2 {
    font-size: 26px;
  }

  .pearl-composer {
    padding: 15px;
  }

  .pearl-composer-top {
    align-items: flex-start;
  }

  .pearl-mode-switch {
    gap: 7px;
  }

  .pearl-mode-switch button {
    min-width: 0;
    padding-inline: 14px;
  }

  .pearl-guest-hint {
    max-width: 78px;
    padding-top: 12px;
    line-height: 1.45;
    text-align: right;
  }

  .pearl-composer-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pearl-control {
    height: 39px;
  }

  .pearl-cta {
    grid-column: 2 / 5;
    width: 100%;
  }

  .pearl-curated-head {
    gap: 8px;
  }

  .pearl-curated-head h2 {
    font-size: 20px;
  }

  .pearl-curated-more {
    font-size: 11px;
  }

  .pearl-curated-grid.communityGrid,
  .pearl-curated-grid {
    gap: 11px;
  }

  .pearl-curated-grid .communityMedia {
    border-radius: 11px;
  }

  .pearl-curated-grid .communityBody > strong {
    font-size: 12px;
  }

  .pearl-curated-grid .communityMeta {
    font-size: 9px;
  }

  body #auth #passwordActions {
    justify-content: center;
  }

  body #auth #passwordActions .primary {
    grid-column: 1 / -1;
  }

  body #auth .authProviders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body #auth .pearlAuthStatus {
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 360px) {
  body header .pearl-brand {
    min-width: 122px !important;
  }

  body header .pearl-brand img {
    width: 122px !important;
  }

  body header .account {
    gap: 5px !important;
  }

  body header .notificationButton,
  body header .profileTrigger,
  body header .menuToggle,
  body header .guestLoginButton {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }

  body header .guestLoginButton {
    width: auto !important;
    min-width: 54px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }

  .pearl-home-inner {
    width: calc(100% - 28px);
  }

  body #auth .authProviders {
    grid-template-columns: 1fr;
  }

  .pearl-hero {
    min-height: 72px !important;
    height: 72px !important;
    padding-top: 0;
    gap: 5px;
  }

  .pearl-hero .pearl-kicker {
    display: none;
  }

  .pearl-hero h2 {
    font-size: 21px;
    white-space: nowrap;
  }

  .pearl-hero p {
    font-size: 10px;
  }

  .pearl-hero .pearlWideCopy,
  .pearl-curated-head .pearlWideCopy {
    display: none;
  }

  .pearl-hero .pearlNarrowCopy,
  .pearl-curated-head .pearlNarrowCopy {
    display: inline;
  }

  .pearl-composer {
    padding: 12px;
  }

  .pearl-guest-hint {
    display: none;
  }

  .pearl-mode-switch button {
    flex: 1;
    padding-inline: 11px;
    font-size: 11px;
  }

  .pearl-mode-switch {
    width: 100%;
  }

  .pearl-prompt-shell {
    min-height: 109px;
    padding: 12px;
  }

  .pearl-prompt-shell textarea {
    min-height: 54px;
    font-size: 16px !important;
  }

  .pearl-prompt-shell small {
    font-size: 9px;
  }

  .pearl-composer-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pearl-control {
    padding-inline: 4px;
    font-size: 11px;
  }

  .pearl-composer-controls > span[aria-label="固定视频时长"] {
    grid-column: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #pearlHomeOptimize {
    display: none !important;
  }

  .pearl-cta {
    grid-column: 2 / 4;
    min-width: 0;
    height: 39px;
  }

  .pearl-curated-head h2 {
    font-size: 18px;
  }

  .pearl-curated-grid.communityGrid,
  .pearl-curated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .pearl-curated-grid .communityMedia {
    aspect-ratio: 137 / 174;
  }

  body #auth #authForm {
    padding: 21px 16px;
  }
}

@media (max-width: 520px) {
  html body .pearl-composer-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body .pearl-count-options {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
    order: 2 !important;
  }

  html body .pearl-count-option {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  html body .pearl-spacer {
    display: none !important;
  }

  html body .pearl-cost {
    order: 8 !important;
    margin-left: auto !important;
  }

  html body .pearl-cta {
    width: 100% !important;
    order: 9 !important;
  }

  html body .pearl-reference-zone {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    padding: 9px !important;
  }

  html body .pearl-reference-preview {
    width: 64px !important;
    height: 64px !important;
  }
}

@media (pointer: coarse) {
  body #auth .field input,
  body #auth .field select,
  dialog.rechargeDialog .field input {
    font-size: 16px !important;
  }

  button,
  a,
  [role="button"],
  .pearl-count-option,
  .pearl-control,
  .pearl-cta {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}

@media (hover: none) {
  .pearl-control:hover:not(:disabled),
  .pearl-mode-switch button:hover,
  .pearl-curated-more:hover,
  .pearl-guest-collection button:hover,
  .jobCard:hover,
  .communityCard:hover,
  .planCard:hover,
  .shortfilmResult:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #auth #authForm,
  html body dialog.rechargeDialog[open] {
    animation: none !important;
  }

  .pearl-cta:not(:disabled):active,
  .pearl-count-option:not(:disabled):active,
  .jobAction:not(:disabled):active,
  .sfGenerate:not(:disabled):active,
  .planBuy:not(:disabled):active,
  .credit:not(:disabled):active {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pearl-card-skeleton,
  .pearl-curated-grid .communityCardSkeleton {
    animation: none !important;
  }

  .pearl-composer *,
  .pearl-curated-grid *,
  body header * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/*
 * Cascade guard for the legacy workbench selectors. The old v15 stylesheet
 * contains several :has() based sidebar rules with very high specificity.
 * These IDs are stable V3 shell hooks and keep the approved top navigation
 * authoritative while legacy pages remain available.
 */
html body #siteHeader#siteHeader.pearl-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 80 !important;
  height: 74px !important;
  padding: 0 max(24px, calc((100vw - 1294px) / 2)) !important;
  display: flex !important;
  align-items: center !important;
  background:
    linear-gradient(169deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 252, 0.76) 50%, rgba(255, 255, 255, 0.86)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 6px 20px rgba(139, 149, 169, 0.07) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
}

html body #siteHeader#siteHeader .pearl-brand {
  width: auto !important;
  min-width: 175px !important;
  height: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #siteHeader#siteHeader .pearl-brand img {
  display: block !important;
  width: 175px !important;
  height: auto !important;
}

html body #siteHeader#siteHeader .account {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html body #siteHeader#siteHeader .points-pill {
  display: inline-flex !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: #4a5f86 !important;
}

html body[data-guest="true"] #siteHeader#siteHeader .points-pill {
  display: none !important;
}

html body #siteHeader#siteHeader #notificationButton,
html body #siteHeader#siteHeader #profileTrigger {
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(123deg, rgba(255, 255, 255, 0.76), rgba(239, 242, 248, 0.62) 50%, rgba(255, 255, 255, 0.76)) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 74px 0 0 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
  position: fixed !important;
  z-index: 81 !important;
  inset: 0 auto auto 50% !important;
  width: auto !important;
  height: 74px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  backdrop-filter: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation button {
  position: relative !important;
  width: auto !important;
  height: 74px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation button[aria-current="page"] {
  background: transparent !important;
  color: var(--pearl-ink) !important;
  font-weight: 700 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation [data-page="plans"] {
  display: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearlMobileMenuOnly {
  display: none !important;
}

@media (max-width: 860px) {
  html body #siteHeader#siteHeader.pearl-header {
    height: 61px !important;
    padding: 0 16px !important;
  }

  html body #siteHeader#siteHeader .pearl-brand {
    min-width: 143px !important;
    height: 25px !important;
  }

  html body #siteHeader#siteHeader .pearl-brand img {
    width: 143px !important;
  }

  html body #siteHeader#siteHeader .account {
    gap: 8px !important;
  }

  html body #siteHeader#siteHeader .points-pill,
  html body #siteHeader#siteHeader .profileTrigger > #userName,
  html body #siteHeader#siteHeader .profileTrigger > i,
  html body #siteHeader#siteHeader #signOut,
  html body #siteHeader#siteHeader .badge {
    display: none !important;
  }

  html body #siteHeader#siteHeader .profileTrigger {
    width: 38px !important;
    padding: 4px !important;
    justify-content: center !important;
  }

  html body #siteHeader#siteHeader .menuToggle {
    display: grid !important;
    place-items: center !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell {
    padding-top: 61px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
    display: none !important;
    inset: 61px 0 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 61px) !important;
    padding: 14px 18px 24px !important;
    flex-direction: column !important;
    overflow: auto !important;
    background:
      linear-gradient(151deg, rgba(255, 255, 255, 0.93), rgba(245, 248, 252, 0.88) 48%, rgba(255, 255, 255, 0.92)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 22px 56px rgba(116, 128, 149, 0.17) !important;
    transform: none !important;
    backdrop-filter: blur(24px) !important;
  }

  html body[data-nav-open="true"] #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
    display: flex !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation button {
    width: 100% !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearlMobileMenuOnly {
    display: flex !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation button > span:not(.navBadge):not(.navCount) {
    display: block !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .navTitle {
    display: block !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation button[aria-current="page"] {
    background: rgba(215, 220, 233, 0.36) !important;
  }
}

/*
 * Pearl Glass V3.1 · Jimeng-density shell
 * The approved Figma material stays authoritative. This final layer adds the
 * reviewed information architecture requested after phase one: a compact glass
 * side rail, persistent top-bar search, and a shared portrait-grid rhythm.
 */
:root {
  --pearl-sidebar-width: 192px;
  --pearl-topbar-height: 64px;
  --pearl-nav-row: 34px;
  --pearl-content-gap: 25px;
}

html body {
  --pearl-sidebar-width: 192px;
  --pearl-topbar-height: 64px;
}

html body #siteHeader#siteHeader.pearl-header {
  inset: 0 0 auto var(--pearl-sidebar-width) !important;
  height: var(--pearl-topbar-height) !important;
  padding: 0 30px !important;
  gap: 18px !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.95) !important;
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.88), rgba(247, 249, 253, 0.76) 52%, rgba(253, 250, 251, 0.85)) !important;
  box-shadow: 0 5px 18px rgba(135, 148, 165, 0.055) !important;
}

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

html body #siteHeader#siteHeader .globalStudioSearch {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 420px !important;
  max-width: min(420px, 44vw) !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.7), rgba(236, 241, 248, 0.58) 52%, rgba(248, 244, 251, 0.66)) !important;
  box-shadow:
    0 8px 22px rgba(139, 149, 169, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
  color: var(--pearl-muted) !important;
  transform: translate(-50%, -50%) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease !important;
}

html body #siteHeader#siteHeader .globalStudioSearch svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: rgba(105, 113, 128, 0.78) !important;
}

html body #siteHeader#siteHeader .globalStudioSearch input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--pearl-ink) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body #siteHeader#siteHeader .globalStudioSearch input::placeholder {
  color: rgba(105, 113, 128, 0.72) !important;
}

html body #siteHeader#siteHeader .globalStudioSearch:hover {
  border-color: rgba(205, 214, 228, 0.9) !important;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.84), rgba(239, 243, 249, 0.7) 52%, rgba(249, 245, 252, 0.8)) !important;
}

html body #siteHeader#siteHeader .globalStudioSearch:focus-within {
  border-color: rgba(113, 105, 165, 0.55) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 0 0 3px rgba(113, 105, 165, 0.1),
    0 10px 26px rgba(139, 149, 169, 0.13) !important;
}

html body #siteHeader#siteHeader .account {
  min-width: 0 !important;
  gap: 10px !important;
}

html body #siteHeader#siteHeader .guestLoginButton {
  min-width: 62px !important;
  height: 38px !important;
  padding: 0 17px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #siteHeader#siteHeader .notificationButton,
html body #siteHeader#siteHeader .profileTrigger {
  height: 38px !important;
}

html body #siteHeader#siteHeader .profileTrigger {
  min-width: 86px !important;
  border-radius: 10px !important;
}

html body #siteHeader#siteHeader .menuToggle {
  margin-left: -4px !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell {
  min-height: 100vh !important;
  padding: var(--pearl-topbar-height) 0 0 var(--pearl-sidebar-width) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
  inset: 0 auto 0 0 !important;
  z-index: 84 !important;
  width: var(--pearl-sidebar-width) !important;
  height: 100vh !important;
  padding: 17px 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.97) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(173deg, rgba(255, 255, 255, 0.86), rgba(247, 249, 253, 0.72) 52%, rgba(253, 249, 251, 0.8)) !important;
  box-shadow:
    8px 0 29px rgba(134, 146, 164, 0.08),
    inset -1px 0 rgba(224, 230, 238, 0.4) !important;
  transform: none !important;
  backdrop-filter: blur(22px) saturate(1.06) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand {
  position: relative !important;
  width: calc(100% - 8px) !important;
  min-width: 0 !important;
  height: 39px !important;
  margin: 0 4px 17px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand:hover {
  background: rgba(255, 255, 255, 0.52) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand img {
  display: block !important;
  width: 145px !important;
  height: auto !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .navTitle {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 10px 6px !important;
  padding: 0 !important;
  color: rgba(105, 113, 128, 0.78) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: 0.1em !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .recentChats,
html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .recentChatsTitle,
html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearlMobileMenuOnly,
html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation [data-page="plans"] {
  display: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) {
  position: relative !important;
  width: 100% !important;
  height: var(--pearl-nav-row) !important;
  min-width: 0 !important;
  flex: 0 0 var(--pearl-nav-row) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: left !important;
  transition:
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) > svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  color: #7f8390 !important;
  opacity: 0.92 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) > span:not(.navBadge):not(.navCount) {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) .navBadge,
html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) .navCount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 18px !important;
  padding: 0 6px !important;
  margin-left: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: var(--pearl-faint) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand):hover {
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  color: var(--pearl-ink) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand):active {
  transform: scale(0.985) !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button[aria-current="page"]:not(.pearl-sidebar-brand) {
  border-color: rgba(255, 255, 255, 0.96) !important;
  background:
    linear-gradient(128deg, rgba(226, 219, 246, 0.8), rgba(212, 225, 246, 0.76) 52%, rgba(224, 236, 242, 0.7)) !important;
  box-shadow:
    0 7px 18px rgba(139, 149, 169, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.76) !important;
  color: var(--pearl-ink) !important;
  font-weight: 700 !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button[aria-current="page"]:not(.pearl-sidebar-brand)::after {
  display: none !important;
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button[aria-current="page"]:not(.pearl-sidebar-brand) > svg {
  color: var(--pearl-iris) !important;
}

html body[data-page="home"] #workspace#workspace.pearl-workspace.pearl-shell {
  padding-bottom: 0 !important;
}

html body .pearl-home-v3 {
  min-height: calc(100vh - var(--pearl-topbar-height)) !important;
}

html body .pearl-home-inner,
html body .pearl-explore-v3 {
  width: min(1320px, calc(100vw - var(--pearl-sidebar-width) - 64px)) !important;
  margin-inline: auto !important;
}

html body .pearl-home-inner {
  padding-bottom: 72px !important;
}

html body .pearl-hero {
  height: 320px !important;
  min-height: 320px !important;
  gap: 14px !important;
}

html body .pearl-hero h2 {
  font-size: clamp(36px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
}

html body .pearl-hero p {
  font-size: 16px !important;
  font-weight: 400 !important;
}

html body .pearl-composer {
  width: min(1020px, 100%) !important;
  min-height: 286px !important;
  padding: 22px 24px !important;
  gap: 15px !important;
}

html body .pearl-mode-switch button,
html body .pearl-control,
html body .pearl-cta {
  font-family: var(--pearl-font) !important;
}

html body .pearl-mode-switch button {
  min-width: 128px !important;
  height: 40px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body .pearl-control {
  height: 38px !important;
  padding-inline: 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease !important;
}

html body .pearl-control:not(:disabled):active,
html body .pearl-mode-switch button:active,
html body .pearl-cta:not(:disabled):active {
  transform: translateY(0) scale(0.985) !important;
}

html body .pearl-control:disabled,
html body .pearl-cta:disabled {
  cursor: not-allowed !important;
  opacity: 0.78 !important;
  filter: saturate(0.72) !important;
}

html body .pearl-cta {
  min-width: 156px !important;
  height: 42px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

html body .pearl-curated {
  width: min(1020px, 100%) !important;
  margin-inline: auto !important;
  padding-top: 34px !important;
}

html body .pearl-curated-head {
  min-height: 38px !important;
}

html body .pearl-curated-head h2 {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

html body .pearl-curated-more,
html body .pearl-curated-head > a {
  min-height: 32px !important;
  padding: 0 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body .pearl-curated-grid.communityGrid,
html body .pearl-curated-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--pearl-content-gap) !important;
  margin-top: 20px !important;
}

html body .pearl-curated-grid .communityCard {
  position: relative !important;
  gap: 9px !important;
  outline: none !important;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease !important;
}

html body .pearl-curated-grid .communityCard:hover {
  transform: translateY(-3px) !important;
}

html body .pearl-curated-grid .communityCard:active {
  transform: translateY(-1px) scale(0.992) !important;
}

html body .pearl-curated-grid .communityCard:focus-visible {
  outline: 2px solid rgba(113, 105, 165, 0.7) !important;
  outline-offset: 5px !important;
}

html body .pearl-curated-grid .communityMedia {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 113.488372093% !important;
  aspect-ratio: 215 / 244 !important;
  border-radius: 12px !important;
  box-shadow:
    0 9px 26px rgba(143, 154, 173, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.66) !important;
  transition:
    border-color 180ms ease,
    box-shadow 220ms ease !important;
}

html body .pearl-curated-grid .communityCard:hover .communityMedia {
  border-color: rgba(245, 248, 253, 1) !important;
  box-shadow:
    0 15px 34px rgba(126, 139, 159, 0.19),
    inset 0 1px rgba(255, 255, 255, 0.72) !important;
}

html body .pearl-curated-grid .communityMedia::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 55%, rgba(36, 41, 54, 0.08)),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.22), transparent 38%);
}

html body .pearl-curated-grid .communityMedia::after {
  content: "▶";
  position: absolute;
  z-index: 2;
  left: auto !important;
  top: auto !important;
  right: 10px;
  bottom: 10px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 5px 16px rgba(54, 62, 78, 0.14);
  color: #394050;
  font-size: 8px;
  opacity: 0;
  transform: translateY(3px);
  backdrop-filter: blur(8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease !important;
}

html body .pearl-curated-grid .communityCard:hover .communityMedia::after,
html body .pearl-curated-grid .communityCard:focus-visible .communityMedia::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

html body .pearl-curated-grid .communityMedia video {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: transparent !important;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body .pearl-curated-grid .communityCard:hover .communityMedia video {
  transform: scale(1.018) !important;
}

html body .pearl-curated-grid .communityBody {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  min-height: 38px !important;
  padding: 0 !important;
  gap: 2px !important;
  background: transparent !important;
}

html body .pearl-curated-grid .communityBody > strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html body .pearl-curated-grid .communityMeta {
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

html body .pearl-curated-grid .featuredPill {
  z-index: 3 !important;
  top: 9px !important;
  left: 9px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-iris) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(10px) !important;
}

html body .pearl-guest-collection {
  min-height: 238px !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(143deg, rgba(255, 255, 255, 0.58), rgba(238, 244, 249, 0.42) 52%, rgba(248, 238, 243, 0.42)) !important;
}

html body .pearl-guest-collection strong {
  font-size: 17px !important;
  font-weight: 700 !important;
}

html body .pearl-guest-collection p {
  margin-top: 7px !important;
  font-size: 12px !important;
}

html body .pearl-guest-collection button {
  height: 38px !important;
  padding: 0 19px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition:
    transform 140ms ease,
    border-color 140ms ease !important;
}

html body .pearl-guest-collection button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(113, 105, 165, 0.28) !important;
}

/* Explore shares the same portrait-card rhythm as the approved home page. */
html body #exploreView > :not(.pearl-explore-v3) {
  display: none !important;
}

html body .pearl-explore-v3 {
  min-height: calc(100vh - var(--pearl-topbar-height));
  padding: 36px 0 76px !important;
}

html body .pearl-explore-head {
  min-height: 90px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

html body .pearl-explore-head > div {
  min-width: 0 !important;
}

html body .pearl-explore-head .pearl-kicker {
  min-height: 27px !important;
  margin-bottom: 9px !important;
  padding-inline: 16px !important;
  font-size: 10px !important;
}

html body .pearl-explore-head h1 {
  margin: 0 !important;
  color: var(--pearl-ink) !important;
  font-size: 31px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.04em !important;
}

html body .pearl-explore-head p {
  margin: 7px 0 0 !important;
  color: var(--pearl-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body .pearl-explore-note {
  padding-bottom: 5px !important;
  color: var(--pearl-faint) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

html body .pearl-explore-filter-shell {
  margin: 21px 0 22px !important;
}

html body .pearl-explore-filter-shell .exploreToolbar {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .pearl-explore-filter-shell .exploreToolbar button {
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease !important;
}

html body .pearl-explore-filter-shell .exploreToolbar button:hover {
  background: rgba(255, 255, 255, 0.52) !important;
  color: var(--pearl-ink) !important;
}

html body .pearl-explore-filter-shell .exploreToolbar button:active {
  transform: scale(0.98) !important;
}

html body .pearl-explore-filter-shell .exploreToolbar button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.96) !important;
  background: var(--pearl-pearl-gradient) !important;
  box-shadow:
    0 7px 20px rgba(139, 149, 169, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.68) !important;
  color: #2c3343 !important;
  font-weight: 700 !important;
}

html body .pearl-explore-filter-shell .exploreToolbar > span {
  margin-left: auto !important;
  color: var(--pearl-faint) !important;
  font-size: 11px !important;
}

html body #pearlExploreGrid {
  align-items: start !important;
}

html body #pearlExploreGrid .pearl-guest-collection {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1280px) {
  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
    padding-inline: 10px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) {
    padding-inline: 9px !important;
  }

  html body .pearl-curated-grid.communityGrid,
  html body .pearl-curated-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 1024px) {
  :root,
  html body {
    --pearl-sidebar-width: 176px;
  }

  html body #siteHeader#siteHeader.pearl-header {
    padding-inline: 22px !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch {
    max-width: 340px !important;
  }

  html body .pearl-home-inner,
  html body .pearl-explore-v3 {
    width: calc(100vw - var(--pearl-sidebar-width) - 40px) !important;
  }

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

@media (max-width: 860px) {
  :root,
  html body {
    --pearl-sidebar-width: 0px;
    --pearl-topbar-height: 58px;
  }

  html body #siteHeader#siteHeader.pearl-header {
    inset: 0 0 auto !important;
    height: var(--pearl-topbar-height) !important;
    padding: 0 13px !important;
    gap: 8px !important;
  }

  html body #siteHeader#siteHeader .pearl-brand {
    display: inline-flex !important;
    min-width: 127px !important;
    height: 24px !important;
    flex: 0 0 127px !important;
  }

  html body #siteHeader#siteHeader .pearl-brand img {
    display: block !important;
    width: 127px !important;
    height: auto !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 40px !important;
    height: 34px !important;
    flex: 1 1 auto !important;
    padding-inline: 10px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    transform: none !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch:focus-within {
    position: absolute !important;
    z-index: 88 !important;
    left: 12px !important;
    right: 12px !important;
    top: 11px !important;
    width: auto !important;
    max-width: none !important;
    height: 36px !important;
    transform: none !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch:focus-within input::placeholder {
    color: rgba(105, 113, 128, 0.72) !important;
  }

  html body #siteHeader#siteHeader .account {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  html body #siteHeader#siteHeader .guestLoginButton {
    min-width: 52px !important;
    height: 34px !important;
    padding-inline: 12px !important;
  }

  html body #siteHeader#siteHeader .menuToggle {
    width: 34px !important;
    height: 34px !important;
    margin-left: 0 !important;
    flex: 0 0 34px !important;
    border-radius: 9px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell {
    padding: var(--pearl-topbar-height) 0 0 !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
    display: none !important;
    z-index: 104 !important;
    inset: var(--pearl-topbar-height) auto auto 0 !important;
    width: min(288px, calc(100vw - 28px)) !important;
    height: calc(100vh - var(--pearl-topbar-height)) !important;
    max-height: none !important;
    padding: 16px 12px 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow: auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.97) !important;
    border-bottom: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    background:
      linear-gradient(164deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.91) 52%, rgba(253, 246, 250, 0.93)) !important;
    box-shadow: 24px 0 70px rgba(92, 105, 126, 0.2) !important;
    transform: none !important;
    backdrop-filter: blur(28px) saturate(1.08) !important;
  }

  html body[data-nav-open="true"] #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation {
    display: flex !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand {
    display: flex !important;
    height: 40px !important;
    margin-bottom: 18px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearl-sidebar-brand img {
    width: 146px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .navTitle {
    display: block !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) {
    width: 100% !important;
    height: 43px !important;
    flex: 0 0 43px !important;
    padding-inline: 11px !important;
    font-size: 13px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button:not(.pearl-sidebar-brand) > svg {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation .pearlMobileMenuOnly {
    display: flex !important;
  }

  html body .pearl-home-inner,
  html body .pearl-explore-v3 {
    width: calc(100% - 32px) !important;
  }

  html body .pearl-hero {
    height: 250px !important;
    min-height: 250px !important;
  }

  html body .pearl-hero h2 {
    font-size: 30px !important;
  }

  html body .pearl-composer {
    padding: 15px !important;
    border-radius: 23px !important;
  }

  html body .pearl-curated-grid.communityGrid,
  html body .pearl-curated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html body .pearl-curated-grid .communityMedia {
    padding-top: 110.588235294% !important;
    aspect-ratio: 170 / 188 !important;
  }

  html body .pearl-explore-v3 {
    padding-top: 24px !important;
  }

  html body .pearl-explore-head {
    min-height: 0 !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  html body .pearl-explore-head h1 {
    font-size: 28px !important;
  }

  html body .pearl-explore-note {
    padding: 0 !important;
    white-space: normal !important;
  }

  html body .pearl-explore-filter-shell {
    margin: 18px 0 !important;
  }

  html body .pearl-explore-filter-shell .exploreToolbar {
    gap: 6px !important;
  }

  html body .pearl-explore-filter-shell .exploreToolbar button {
    height: 36px !important;
    padding-inline: 12px !important;
    font-size: 11px !important;
  }

  html body .pearl-explore-filter-shell .exploreToolbar > span {
    display: none !important;
  }
}

@media (max-width: 520px) {
  html body .pearl-home-inner {
    width: calc(100% - 48px) !important;
  }

  html body .pearl-explore-v3 {
    width: calc(100% - 28px) !important;
  }

  html body .pearl-hero {
    height: 156px !important;
    min-height: 156px !important;
    gap: 7px !important;
  }

  html body .pearl-hero h2 {
    font-size: 26px !important;
  }

  html body .pearl-composer {
    padding: 15px !important;
  }

  html body .pearl-mode-switch button {
    min-width: 0 !important;
    padding-inline: 14px !important;
  }

  html body .pearl-curated-head h2 {
    font-size: 20px !important;
  }

  html body .pearl-curated-grid.communityGrid,
  html body .pearl-curated-grid {
    gap: 12px !important;
  }

  html body .pearl-curated-grid .communityBody > strong {
    font-size: 12px !important;
  }

  html body .pearl-curated-grid .communityMeta {
    font-size: 9px !important;
  }

  html body .pearl-explore-head p {
    font-size: 12px !important;
  }

  html body .pearl-explore-filter-shell .exploreToolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body .pearl-explore-filter-shell .exploreToolbar button {
    width: 100% !important;
    padding-inline: 4px !important;
  }

  html body .pearl-guest-collection {
    min-height: 206px !important;
    padding: 22px 18px !important;
  }
}

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

  html body #siteHeader#siteHeader .pearl-brand {
    min-width: 108px !important;
    flex-basis: 108px !important;
  }

  html body #siteHeader#siteHeader .pearl-brand img {
    width: 108px !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch {
    min-width: 30px !important;
    padding-inline: 7px !important;
  }

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

  html body #siteHeader#siteHeader .guestLoginButton {
    min-width: 46px !important;
    height: 32px !important;
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  html body #siteHeader#siteHeader .menuToggle {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  html body .pearl-home-inner {
    width: calc(100% - 32px) !important;
  }

  html body .pearl-explore-v3 {
    width: calc(100% - 24px) !important;
  }

  html body .pearl-hero {
    height: 76px !important;
    min-height: 76px !important;
  }

  html body .pearl-hero .pearl-kicker {
    display: none !important;
  }

  html body .pearl-hero h2 {
    font-size: 21px !important;
    white-space: nowrap !important;
  }

  html body .pearl-hero p {
    font-size: 10px !important;
  }

  html body .pearl-composer {
    padding: 12px !important;
  }

  html body .pearl-curated-grid.communityGrid,
  html body .pearl-curated-grid {
    gap: 9px !important;
  }

  html body .pearl-curated-grid .communityMedia {
    padding-top: 127.00729927% !important;
    aspect-ratio: 137 / 174 !important;
  }

  html body .pearl-explore-v3 {
    padding-top: 20px !important;
  }

  html body .pearl-explore-head h1 {
    font-size: 25px !important;
  }

  html body .pearl-explore-head .pearl-kicker {
    display: none !important;
  }

  html body .pearl-explore-filter-shell {
    margin: 14px 0 !important;
  }
}

html body #msg:not(:empty) {
  position: fixed !important;
  z-index: 96 !important;
  left: calc(var(--pearl-sidebar-width) + 24px) !important;
  bottom: 24px !important;
  max-width: min(440px, calc(100vw - var(--pearl-sidebar-width) - 48px)) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 11px !important;
  background: rgba(248, 250, 253, 0.9) !important;
  box-shadow: 0 12px 34px rgba(94, 107, 128, 0.18) !important;
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  backdrop-filter: blur(16px) !important;
}

html body:is([data-page="home"], [data-page="explore"]) #museHint {
  display: none !important;
}

@media (max-width: 860px) {
  html body #msg:not(:empty) {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .pearl-curated-grid .communityCard,
  html body .pearl-curated-grid .communityMedia,
  html body .pearl-curated-grid .communityMedia video,
  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button {
    transition-duration: 0.01ms !important;
  }
}

html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button[data-page="plans"] {
  display: none !important;
}

@media (min-width: 861px) {
  html body #workspace#workspace.pearl-workspace.pearl-shell > nav#primaryNavigation > button.pearlMobileMenuOnly {
    display: none !important;
  }
}

/* Final portrait-card normalization against the legacy 3:2 plaza rules. */
html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityCard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-ink) !important;
  text-align: center !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMedia {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  flex: none !important;
  aspect-ratio: 215 / 244 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(104deg, rgba(221, 233, 245, 0.9), rgba(191, 207, 230, 0.9) 31%, rgba(235, 216, 225, 0.9) 61%, rgba(247, 236, 232, 0.9)) !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMedia video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMedia::after {
  inset: auto 10px 10px auto !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityBody {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityBody > strong {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: var(--pearl-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityBody > p {
  display: none !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMeta {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityCreator {
  max-width: none !important;
  overflow: visible !important;
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMeta > span:last-child {
  color: var(--pearl-faint) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMeta > i {
  width: 3px !important;
  height: 3px !important;
  background: rgba(105, 113, 128, 0.34) !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityCreator::before {
  display: none !important;
  content: none !important;
}

html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .featuredPill {
  top: 9px !important;
  left: 9px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-iris) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  backdrop-filter: blur(10px) !important;
}

@media (max-width: 860px) {
  html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMedia {
    aspect-ratio: 170 / 188 !important;
  }
}

@media (max-width: 360px) {
  html body:is([data-page="home"], [data-page="explore"]) .pearl-curated-grid .communityMedia {
    aspect-ratio: 137 / 174 !important;
  }
}

/*
 * Stage 2 · AI short-film workbench
 * Reuses the existing batch/job API and controls, but replaces the legacy dark
 * workbench surface with the approved Pearl Glass batch timeline and dock.
 */
html body[data-page="shortfilm"] #supportFab {
  display: none !important;
}

html body[data-page="shortfilm"] .shortfilmShell {
  width: min(1200px, calc(100vw - var(--pearl-sidebar-width) - 48px)) !important;
  margin: 0 auto !important;
  padding: 22px 0 72px !important;
}

html body[data-page="shortfilm"] .shortfilmHero {
  display: none !important;
}

html body[data-page="shortfilm"] .pearl-shortfilm-head {
  width: 100% !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
}

html body[data-page="shortfilm"] .pearl-shortfilm-title {
  min-width: 0 !important;
}

html body[data-page="shortfilm"] .pearl-shortfilm-title h1 {
  margin: 0 !important;
  color: var(--pearl-ink) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
}

html body[data-page="shortfilm"] .pearl-shortfilm-title p {
  margin: 7px 0 0 !important;
  color: var(--pearl-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

html body[data-page="shortfilm"] .pearl-shortfilm-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: none !important;
}

html body[data-page="shortfilm"] .pearl-sf-queue-chip,
html body[data-page="shortfilm"] .pearl-sf-points {
  height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.97) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.76), rgba(239, 242, 248, 0.62) 52%, rgba(250, 246, 252, 0.75)) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px) !important;
}

html body[data-page="shortfilm"] .pearl-sf-queue-chip {
  min-width: 142px !important;
  border-radius: 999px !important;
}

html body[data-page="shortfilm"] .pearl-sf-queue-chip b,
html body[data-page="shortfilm"] .pearl-sf-points b {
  color: var(--pearl-iris) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-page="shortfilm"] .pearl-sf-points {
  min-width: 116px !important;
  cursor: pointer !important;
  color: var(--pearl-ink) !important;
  font-weight: 700 !important;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease !important;
}

html body[data-page="shortfilm"] .pearl-sf-points:hover {
  border-color: rgba(113, 105, 165, 0.3) !important;
  transform: translateY(-1px) !important;
}

html body[data-page="shortfilm"] .pearl-sf-points:active {
  transform: scale(0.985) !important;
}

html body[data-page="shortfilm"] .pearl-sf-stats {
  width: 100% !important;
  min-height: 65px !important;
  margin: 18px 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body[data-page="shortfilm"] .pearl-sf-stat {
  min-width: 0 !important;
  height: 65px !important;
  padding: 9px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(139deg, rgba(255, 255, 255, 0.72), rgba(245, 247, 250, 0.63) 48%, rgba(236, 239, 250, 0.61)) !important;
  box-shadow:
    0 13px 31px rgba(135, 148, 165, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(13px) !important;
}

html body[data-page="shortfilm"] .pearl-sf-stat span {
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body[data-page="shortfilm"] .pearl-sf-stat strong {
  color: var(--pearl-ink) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body[data-page="shortfilm"] .shortfilmWorks {
  display: grid !important;
  gap: 18px !important;
  margin: 0 0 20px !important;
}

html body[data-page="shortfilm"] .shortfilmEmpty {
  min-height: 220px !important;
  padding: 32px !important;
  display: grid !important;
  place-content: center !important;
  gap: 6px !important;
  border: 1px dashed rgba(113, 105, 165, 0.2) !important;
  border-radius: 21px !important;
  background:
    linear-gradient(137deg, rgba(255, 255, 255, 0.58), rgba(241, 245, 251, 0.43) 52%, rgba(247, 237, 244, 0.45)) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  text-align: center !important;
  backdrop-filter: blur(16px) !important;
}

html body[data-page="shortfilm"] .shortfilmEmpty::before {
  content: "▶";
  width: 46px;
  height: 46px;
  margin: 0 auto 8px !important;
  display: grid !important;
  place-items: center;
  padding-left: 2px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(226, 218, 246, 0.74) 52%, rgba(212, 230, 244, 0.7));
  box-shadow:
    0 10px 24px rgba(128, 118, 165, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  color: #7169a5;
  font-size: 13px;
}

html body[data-page="shortfilm"] .shortfilmEmpty strong {
  color: var(--pearl-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

html body[data-page="shortfilm"] .shortfilmEmpty span {
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

html body[data-page="shortfilm"] .shortfilmGroup {
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 18px 17px !important;
  border: 1.15px solid rgba(255, 255, 255, 0.99) !important;
  border-radius: 21px !important;
  background:
    linear-gradient(133deg, rgba(255, 255, 255, 0.6), rgba(241, 245, 251, 0.53) 48%, rgba(236, 231, 245, 0.49)) !important;
  box-shadow:
    0 15px 39px rgba(135, 150, 171, 0.13),
    inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
}

html body[data-page="shortfilm"] .shortfilmGroupHead {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body[data-page="shortfilm"] .shortfilmGroupHead > div:first-child {
  min-width: 0 !important;
}

html body[data-page="shortfilm"] .shortfilmGroupHead h2 {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--pearl-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-page="shortfilm"] .shortfilmGroupHead p {
  margin: 4px 0 0 !important;
  overflow: hidden !important;
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-page="shortfilm"] .shortfilmGroupMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  order: 3 !important;
}

html body[data-page="shortfilm"] .shortfilmGroupMeta > span {
  display: none !important;
}

html body[data-page="shortfilm"] .sfDownloadAll {
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  font-size: 10px !important;
  cursor: pointer !important;
}

html body[data-page="shortfilm"] .sfDownloadAll:hover:not(:disabled) {
  border-color: rgba(113, 105, 165, 0.3) !important;
  color: var(--pearl-ink) !important;
}

html body[data-page="shortfilm"] .sfDownloadAll:disabled {
  opacity: 0.5 !important;
  cursor: wait !important;
}

html body[data-page="shortfilm"] .pearl-sf-batch-status {
  height: 28px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.97) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  backdrop-filter: blur(8px) !important;
  order: 2 !important;
}

html body[data-page="shortfilm"] .pearl-sf-batch-status[data-tone="success"] {
  color: #287b68 !important;
}

html body[data-page="shortfilm"] .pearl-sf-batch-status[data-tone="running"] {
  color: var(--pearl-blue) !important;
}

html body[data-page="shortfilm"] .pearl-sf-batch-status[data-tone="queued"] {
  color: #8b693c !important;
}

html body[data-page="shortfilm"] .pearl-sf-batch-status[data-tone="failed"] {
  color: #a04f5b !important;
}

html body[data-page="shortfilm"] .shortfilmGrid {
  width: 100% !important;
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 19px !important;
  align-items: start !important;
  overflow: visible !important;
}

html body[data-page="shortfilm"] .shortfilmResult {
  position: relative !important;
  min-width: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pearl-ink) !important;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body[data-page="shortfilm"] .shortfilmResult:hover {
  transform: translateY(-2px) !important;
}

html body[data-page="shortfilm"] .sfResultCover {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 177 / 207 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.93) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(104deg, rgba(223, 234, 244, 0.94), rgba(191, 207, 230, 0.94) 30%, rgba(235, 216, 225, 0.94) 61%, rgba(247, 236, 232, 0.94)) !important;
  box-shadow: 0 9px 25px rgba(139, 149, 169, 0.13) !important;
}

html body[data-page="shortfilm"] .sfResultCover.wide {
  aspect-ratio: 177 / 207 !important;
}

html body[data-page="shortfilm"] .sfResultCover::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 56%, rgba(38, 43, 57, 0.15)),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.24), transparent 36%) !important;
}

html body[data-page="shortfilm"] .pearl-sf-poster {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body[data-page="shortfilm"] .sfResultCover .status {
  position: absolute !important;
  z-index: 4 !important;
  top: 9px !important;
  right: 9px !important;
  height: auto !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 4px 14px rgba(80, 91, 110, 0.1) !important;
  color: var(--pearl-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(9px) !important;
}

html body[data-page="shortfilm"] .sfResultCover .status[data-state="running"],
html body[data-page="shortfilm"] .sfResultCover .status[data-state="processing"] {
  color: var(--pearl-blue) !important;
}

html body[data-page="shortfilm"] .sfResultCover .status[data-state="failed"] {
  color: #a04f5b !important;
}

html body[data-page="shortfilm"] .pearl-sf-queued-mark {
  position: absolute !important;
  z-index: 4 !important;
  left: 9px !important;
  top: 9px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: #8b693c !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(9px) !important;
}

html body[data-page="shortfilm"] .sfResultCover .coverPlay {
  position: relative !important;
  z-index: 3 !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 22px rgba(67, 76, 94, 0.16) !important;
  color: var(--pearl-ink) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  transition:
    transform 150ms ease,
    background 150ms ease !important;
}

html body[data-page="shortfilm"] .sfResultCover .coverPlay:hover {
  transform: scale(1.06) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

html body[data-page="shortfilm"] .sfResultProgress {
  position: absolute !important;
  z-index: 4 !important;
  right: 12px !important;
  bottom: 11px !important;
  left: 12px !important;
}

html body[data-page="shortfilm"] .sfResultProgress span {
  height: 3px !important;
  background: linear-gradient(90deg, #8f88bf, #7899ca) !important;
}

html body[data-page="shortfilm"] .sfResultProgress small {
  margin-top: 4px !important;
  color: rgba(37, 41, 53, 0.7) !important;
  font-size: 9px !important;
  text-align: right !important;
}

html body[data-page="shortfilm"] .videoNodeTools {
  position: absolute !important;
  z-index: 6 !important;
  top: 9px !important;
  left: 9px !important;
  opacity: 0 !important;
  transform: translateY(-2px) !important;
  transition:
    opacity 140ms ease,
    transform 140ms ease !important;
}

html body[data-page="shortfilm"] .shortfilmResult:hover .videoNodeTools,
html body[data-page="shortfilm"] .shortfilmResult:focus-within .videoNodeTools {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

html body[data-page="shortfilm"] .videoNodeTools a,
html body[data-page="shortfilm"] .videoNodeTools button {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  color: var(--pearl-ink) !important;
  backdrop-filter: blur(8px) !important;
}

html body[data-page="shortfilm"] .pearl-sf-caption {
  min-height: 34px !important;
  padding-top: 9px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  text-align: center !important;
}

html body[data-page="shortfilm"] .pearl-sf-caption strong {
  width: 100% !important;
  overflow: hidden !important;
  color: var(--pearl-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-page="shortfilm"] .pearl-sf-caption span {
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody {
  position: absolute !important;
  z-index: 8 !important;
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  min-height: 29px !important;
  margin: 0 !important;
  padding: 4px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 9px !important;
  background: rgba(249, 250, 253, 0.78) !important;
  box-shadow: 0 8px 22px rgba(76, 87, 107, 0.14) !important;
  backdrop-filter: blur(12px) !important;
}

html body[data-page="shortfilm"] .shortfilmResult:hover .sfResultBody,
html body[data-page="shortfilm"] .shortfilmResult:focus-within .sfResultBody,
html body[data-page="shortfilm"] .shortfilmResult[data-status="queued"] .sfResultBody,
html body[data-page="shortfilm"] .shortfilmResult[data-status="failed"] .sfResultBody,
html body[data-page="shortfilm"] .shortfilmResult[data-status="canceled"] .sfResultBody {
  display: flex !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody > span {
  display: none !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody button,
html body[data-page="shortfilm"] .shortfilmResult .sfResultBody .pearl-sf-download {
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--pearl-muted) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody .jobAction {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
  font-weight: 700 !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody .sfShare {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-ink) !important;
}

html body[data-page="shortfilm"] .shortfilmResult .sfResultBody button:hover,
html body[data-page="shortfilm"] .shortfilmResult .sfResultBody .pearl-sf-download:hover {
  border-color: rgba(113, 105, 165, 0.28) !important;
  color: var(--pearl-ink) !important;
}

html body[data-page="shortfilm"] .sfResultError {
  margin: 0 !important;
  padding: 6px 2px 0 !important;
  color: #a04f5b !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

html body[data-page="shortfilm"] .shortfilmComposer {
  position: relative !important;
  z-index: 22 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  border: 1.15px solid rgba(255, 255, 255, 0.99) !important;
  border-radius: 27px !important;
  background:
    linear-gradient(154deg, rgba(255, 255, 255, 0.67), rgba(241, 245, 251, 0.55) 47%, rgba(236, 231, 245, 0.52)) !important;
  box-shadow:
    0 15px 39px rgba(135, 150, 171, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

html body[data-page="shortfilm"] .shortfilmComposer::before {
  display: none !important;
}

html body[data-page="shortfilm"] .sfModeBar {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-page="shortfilm"] .sfModeBar button {
  height: 38px !important;
  min-width: 100px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body[data-page="shortfilm"] .sfModeBar button[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient) !important;
  box-shadow:
    var(--pearl-shadow-soft),
    inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
  color: #2c3343 !important;
}

html body[data-page="shortfilm"] .sfInputRow {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 9px !important;
}

html body[data-page="shortfilm"] .sfUpload {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 68px !important;
  height: auto !important;
  min-height: 92px !important;
  align-self: stretch !important;
  border: 1px dashed rgba(113, 105, 165, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  color: var(--pearl-muted) !important;
}

html body[data-page="shortfilm"] .sfPromptWrap {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 12px 14px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(156deg, rgba(255, 255, 255, 0.72), rgba(245, 247, 250, 0.63) 50%, rgba(236, 239, 250, 0.61)) !important;
  box-shadow: 0 9px 24px rgba(135, 148, 165, 0.08) !important;
}

@media (hover: none) {
  html body[data-page="shortfilm"] .shortfilmResult .sfResultBody {
    display: flex !important;
  }
}

html body[data-page="shortfilm"] .sfPromptWrap:focus-within {
  border-color: rgba(113, 105, 165, 0.42) !important;
  box-shadow:
    0 0 0 3px rgba(113, 105, 165, 0.08),
    0 9px 24px rgba(135, 148, 165, 0.1) !important;
}

html body[data-page="shortfilm"] .sfPromptWrap textarea {
  width: 100% !important;
  min-height: 54px !important;
  max-height: 160px !important;
  padding: 0 !important;
  color: var(--pearl-ink) !important;
  font-family: var(--pearl-font) !important;
  font-size: 16px !important;
  font-weight: 450;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

html body[data-page="shortfilm"] .sfPromptWrap textarea::placeholder {
  color: rgba(105, 113, 128, 0.75) !important;
}

html body[data-page="shortfilm"] .sfPromptMeta {
  margin-top: 2px !important;
  color: var(--pearl-muted) !important;
  font-size: 11px !important;
}

html body[data-page="shortfilm"] .sfPromptMeta b {
  color: var(--pearl-muted) !important;
}

html body[data-page="shortfilm"] .sfToolRow {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 49px !important;
  padding: 5px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  border: 1px solid rgba(220, 225, 232, 0.72) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.64), rgba(235, 239, 246, 0.46) 48%, rgba(249, 250, 253, 0.5)) !important;
  backdrop-filter: blur(7px) !important;
}

html body[data-page="shortfilm"] .sfOptimize,
html body[data-page="shortfilm"] .sfSettingGroup,
html body[data-page="shortfilm"] .sfDuration,
html body[data-page="shortfilm"] .sfChannel {
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.64) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-muted) !important;
  font-size: 10px !important;
}

html body[data-page="shortfilm"] .sfOptimize {
  padding-inline: 12px !important;
}

html body[data-page="shortfilm"] .sfOptimize:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

html body[data-page="shortfilm"] .sfSettingGroup {
  padding: 3px !important;
}

html body[data-page="shortfilm"] .sfSettingGroup button {
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  color: var(--pearl-muted) !important;
  font-size: 9px !important;
  cursor: pointer !important;
}

html body[data-page="shortfilm"] .sfSettingGroup button[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
  font-weight: 700 !important;
}

html body[data-page="shortfilm"] .sfSettingGroup button:disabled {
  opacity: 0.52 !important;
  cursor: wait !important;
}

html body[data-page="shortfilm"] .sfCount {
  max-width: none !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
}

html body[data-page="shortfilm"] .sfCount::-webkit-scrollbar {
  display: none !important;
}

html body[data-page="shortfilm"] .sfDuration,
html body[data-page="shortfilm"] .sfChannel {
  padding-inline: 10px !important;
  white-space: nowrap !important;
}

html body[data-page="shortfilm"] .sfChannel.ready {
  color: #287b68 !important;
}

html body[data-page="shortfilm"] .sfChannel.offline {
  color: #a04f5b !important;
}

html body[data-page="shortfilm"] .sfGenerate {
  min-width: 138px !important;
  height: 40px !important;
  margin-left: auto !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 11px !important;
  background: var(--pearl-pearl-gradient) !important;
  box-shadow:
    0 8px 24px rgba(135, 148, 165, 0.13),
    inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
  color: #2c3343 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}

html body[data-page="shortfilm"] .sfCostBadge {
  height: 36px !important;
  min-width: 44px !important;
  margin-left: auto !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.64) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: var(--pearl-ink) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

html body[data-page="shortfilm"] .sfCostBadge::before {
  content: "◈";
  color: var(--pearl-iris);
  font-size: 11px;
}

html body[data-page="shortfilm"] .sfToolRow .sfGenerate {
  margin-left: 6px !important;
}

html body[data-page="shortfilm"] .sfGenerate:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

html body[data-page="shortfilm"] .sfGenerate:disabled {
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: var(--pearl-shadow-soft) !important;
  color: #66707f !important;
  opacity: 0.9 !important;
  cursor: not-allowed !important;
}

html body[data-page="shortfilm"] .sfSafety {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  margin: -2px 2px 0 !important;
  color: var(--pearl-faint) !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
}

@media (max-width: 1180px) {
  html body[data-page="shortfilm"] .shortfilmShell {
    width: calc(100vw - var(--pearl-sidebar-width) - 40px) !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupHead {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupMeta {
    display: flex !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupMeta > span {
    display: none !important;
  }

  html body[data-page="shortfilm"] .shortfilmGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  html body[data-page="shortfilm"] .shortfilmShell {
    width: calc(100% - 34px) !important;
    padding: 17px 0 34px !important;
  }

  html body[data-page="shortfilm"] .pearl-shortfilm-head {
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  html body[data-page="shortfilm"] .pearl-shortfilm-title h1 {
    font-size: 24px !important;
  }

  html body[data-page="shortfilm"] .pearl-shortfilm-title p {
    margin-top: 5px !important;
    font-size: 12px !important;
  }

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

  html body[data-page="shortfilm"] .pearl-sf-stats {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 15px 0 17px !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-stat {
    height: 56px !important;
    padding: 0 15px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    background: rgba(23, 26, 45, 0.9) !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-stat:not(:first-child) {
    display: none !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-stat span {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 12px !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-stat strong {
    color: #8da9db !important;
    font-size: 22px !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroup {
    padding: 14px !important;
    border-radius: 23px !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupHead > div:first-child {
    width: 100% !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupHead h2 {
    width: 100% !important;
    white-space: normal !important;
    font-size: 15px !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroupHead p {
    font-size: 11px !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-batch-status {
    display: none !important;
  }

  html body[data-page="shortfilm"] .shortfilmGrid {
    margin-top: 14px !important;
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    padding: 0 0 4px !important;
    scrollbar-width: none !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-caption {
    display: none !important;
  }

  html body[data-page="shortfilm"] .shortfilmGrid::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="shortfilm"] .shortfilmResult {
    flex: 0 0 118px !important;
    scroll-snap-align: start !important;
  }

  html body[data-page="shortfilm"] .sfResultCover,
  html body[data-page="shortfilm"] .sfResultCover.wide {
    aspect-ratio: 118 / 201 !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-caption strong {
    font-size: 12px !important;
  }

  html body[data-page="shortfilm"] .pearl-sf-caption span {
    font-size: 10px !important;
  }

  html body[data-page="shortfilm"] .shortfilmComposer {
    position: static !important;
    width: 100% !important;
    padding: 15px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 23px !important;
  }

  html body[data-page="shortfilm"] .sfModeBar,
  html body[data-page="shortfilm"] .sfInputRow,
  html body[data-page="shortfilm"] .sfToolRow,
  html body[data-page="shortfilm"] .sfSafety {
    grid-column: 1 !important;
  }

  html body[data-page="shortfilm"] .sfModeBar {
    grid-row: 1 !important;
  }

  html body[data-page="shortfilm"] .sfInputRow {
    grid-row: 2 !important;
  }

  html body[data-page="shortfilm"] .sfToolRow {
    grid-row: 3 !important;
    flex-wrap: wrap !important;
  }

  html body[data-page="shortfilm"] .sfSafety {
    grid-row: 4 !important;
  }

  html body[data-page="shortfilm"] .sfCount {
    max-width: 100% !important;
  }

  html body[data-page="shortfilm"] .sfGenerate {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 520px) {
  html body[data-page="shortfilm"] .shortfilmShell {
    width: calc(100% - 28px) !important;
  }

  html body[data-page="shortfilm"] .pearl-shortfilm-title h1 {
    font-size: 24px !important;
  }

  html body[data-page="shortfilm"] .shortfilmGroup {
    padding: 15px !important;
  }

  html body[data-page="shortfilm"] .sfModeBar {
    width: 100% !important;
  }

  html body[data-page="shortfilm"] .sfModeBar button {
    flex: 1 !important;
    min-width: 0 !important;
  }

  html body[data-page="shortfilm"] .sfPromptWrap textarea {
    min-height: 50px !important;
  }

  html body[data-page="shortfilm"] .sfOptimize {
    width: 100% !important;
  }

  html body[data-page="shortfilm"] .sfChannel {
    display: none !important;
  }
}

@media (max-width: 360px) {
  html body[data-page="shortfilm"] .shortfilmShell {
    width: calc(100% - 24px) !important;
  }

  html body[data-page="shortfilm"] .pearl-shortfilm-title h1 {
    font-size: 22px !important;
  }

  html body[data-page="shortfilm"] .shortfilmResult {
    flex-basis: 113px !important;
  }

  html body[data-page="shortfilm"] .sfResultCover,
  html body[data-page="shortfilm"] .sfResultCover.wide {
    aspect-ratio: 113 / 227 !important;
  }

  html body[data-page="shortfilm"] .sfCount .sfSettingGroup button:first-child,
  html body[data-page="shortfilm"] .sfCount .sfSettingGroup button:nth-child(2),
  html body[data-page="shortfilm"] .sfCount .sfSettingGroup button:nth-child(3) {
    display: inline-flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="shortfilm"] .shortfilmResult,
  html body[data-page="shortfilm"] .videoNodeTools,
  html body[data-page="shortfilm"] .pearl-sf-points {
    transition-duration: 0.01ms !important;
  }
}

/*
 * Stage 3 · Account & billing surfaces (wallet / plans / library / commerce)
 * Migrates the remaining legacy dark screens onto the approved Pearl Glass V3
 * language: pearl-white base, white-edge glass panels, iris / peach accents
 * and the same soft shadows. Pure additive skin — no markup or logic changes.
 */
html body[data-page="wallet"] .walletLayout,
html body[data-page="wallet"] .paylog,
html body[data-page="library"] .library,
html body[data-page="plans"] .plans {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body[data-page="wallet"] .walletLayout {
  margin-top: 34px !important;
  gap: 18px !important;
}

html body[data-page="wallet"] .balanceCard,
html body[data-page="wallet"] .rechargeCard,
html body[data-page="wallet"] .paylog,
html body[data-page="library"] .library,
html body[data-page="plans"] .planHero,
html body[data-page="plans"] .planCard,
html body[data-page="commerce"] .commerceSoon {
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  background-color: rgba(250, 252, 255, 0.92) !important;
  background-image: linear-gradient(138deg, rgba(255, 255, 255, 0.58), rgba(239, 244, 250, 0.46) 48%, rgba(238, 232, 246, 0.44)) !important;
  box-shadow: var(--pearl-shadow-soft), inset 0 1px 1px rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(22px) saturate(1.05) !important;
}

html body[data-page="wallet"] .balanceCard,
html body[data-page="wallet"] .rechargeCard {
  border-radius: 18px !important;
  padding: 32px !important;
}

html body[data-page="wallet"] .balanceCard {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background-image: linear-gradient(146deg, rgba(255, 255, 255, 0.62), rgba(240, 245, 250, 0.48) 52%, rgba(246, 240, 247, 0.46)) !important;
}

html body[data-page="wallet"] .balanceCard::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 280px;
  height: 280px;
  right: -90px;
  top: -140px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(194, 183, 235, 0.55), rgba(194, 183, 235, 0) 68%);
  filter: blur(18px);
}

html body[data-page="wallet"] .balanceCard > * {
  position: relative !important;
  z-index: 1 !important;
}

html body[data-page="wallet"] .balanceRechargeRow {
  margin-top: auto !important;
  padding-top: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

html body[data-page="wallet"] .balanceRechargeButton {
  min-width: 132px !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

html body[data-page="wallet"] .rechargeCard {
  display: none !important;
}

html body[data-page="wallet"] .rechargeCard {
  position: relative !important;
  overflow: hidden !important;
  background-image: linear-gradient(146deg, rgba(236, 230, 249, 0.86), rgba(223, 232, 247, 0.78) 52%, rgba(249, 236, 238, 0.72)) !important;
}

html body[data-page="wallet"] .balanceLine strong {
  color: var(--pearl-ink) !important;
  font-size: 64px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em !important;
}

html body[data-page="wallet"] .balanceLine span {
  color: var(--pearl-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body[data-page="wallet"] .balanceSub,
html body[data-page="wallet"] .balanceCard .hint,
html body[data-page="wallet"] .paylog .hint {
  color: var(--pearl-muted) !important;
}

html body[data-page="wallet"] .balanceDivider {
  background: rgba(148, 160, 178, 0.18) !important;
}

html body[data-page="wallet"] .rechargeMark {
  background: linear-gradient(135deg, #ffffff, #d8cdf2) !important;
  color: #373250 !important;
  box-shadow: 0 9px 24px rgba(128, 116, 174, 0.22), inset 0 1px rgba(255, 255, 255, 0.8) !important;
}

html body[data-page="wallet"] .rechargeCard h2,
html body[data-page="wallet"] .paylog h2,
html body[data-page="wallet"] .paylog .sectionHead h2 {
  color: var(--pearl-ink) !important;
}

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

html body[data-page="wallet"] .credit,
html body[data-page="wallet"] .statusButton,
html body[data-page="plans"] .planBuy,
html body[data-page="commerce"] .commerceSoon button {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 11px !important;
  background: var(--pearl-pearl-gradient) !important;
  box-shadow: var(--pearl-shadow-soft), inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
  color: #2c3343 !important;
  font-weight: 700 !important;
}

html body[data-page="wallet"] .rechargeCard .credit {
  width: 100% !important;
  height: 46px !important;
  font-size: 14px !important;
}

html body[data-page="wallet"] .paylog {
  border-radius: 18px !important;
  padding: 28px 32px !important;
  margin-top: 18px !important;
}

html body[data-page="wallet"] .paylog .sectionHead {
  border-bottom-color: rgba(148, 160, 178, 0.16) !important;
}

html body[data-page="wallet"] .orderCount {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--pearl-muted) !important;
  padding: 4px 12px !important;
}

html body[data-page="wallet"] .sub .row,
html body[data-page="wallet"] .sub .orderRow {
  min-height: 0 !important;
  padding: 12px 0 !important;
  border-bottom-color: rgba(148, 160, 178, 0.14) !important;
  transition: background 160ms ease !important;
}

html body[data-page="wallet"] .sub .row:hover,
html body[data-page="wallet"] .sub .orderRow:hover {
  background: rgba(255, 255, 255, 0.42) !important;
}

html body[data-page="wallet"] .sub .row strong,
html body[data-page="wallet"] .sub .orderRow strong {
  font-variant-numeric: tabular-nums;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: #3f4857 !important;
}

html body[data-page="wallet"] #ledgerList .orderMain {
  gap: 2px !important;
}

html body[data-page="wallet"] #ledgerList .orderAmount {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

html body[data-page="wallet"] #ledgerList .orderDate {
  font-size: 10.5px !important;
  color: var(--pearl-faint) !important;
}

html body[data-page="wallet"] #orderList .status,
html body[data-page="wallet"] #orderList .orderTag {
  min-width: 64px !important;
  height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

html body[data-page="wallet"] #orderList .status[data-state="pending"],
html body[data-page="wallet"] #orderList .status[data-state="created"] {
  border: 1px solid #e7c98d !important;
  background: #fff1d8 !important;
  color: #7a4a00 !important;
}

html body[data-page="wallet"] #orderList .status[data-state="pending_review"] {
  border: 1px solid #c9bef0 !important;
  background: #ece8ff !important;
  color: #4b3b85 !important;
}

html body[data-page="wallet"] #orderList .status[data-state="paid"],
html body[data-page="wallet"] #orderList .status[data-state="approved"],
html body[data-page="wallet"] #orderList .status[data-state="credited"],
html body[data-page="wallet"] #orderList .status[data-state="success"],
html body[data-page="wallet"] #orderList .status[data-state="succeeded"] {
  border: 1px solid #b9ddc8 !important;
  background: #e2f4e8 !important;
  color: #246b45 !important;
}

html body[data-page="wallet"] #orderList .status[data-state="rejected"],
html body[data-page="wallet"] #orderList .status[data-state="failed"] {
  border: 1px solid #efc0c7 !important;
  background: #ffe5e8 !important;
  color: #9b3540 !important;
}

html body[data-page="wallet"] #orderList .status[data-state="closed"],
html body[data-page="wallet"] #orderList .status[data-state="expired"] {
  border: 1px solid #d5dbe4 !important;
  background: #eef1f5 !important;
  color: #596273 !important;
}

html body[data-page="wallet"] .orderMain b,
html body[data-page="wallet"] .orderAmount {
  color: var(--pearl-ink) !important;
}

html body[data-page="wallet"] .orderDate,
html body[data-page="wallet"] .sub small {
  color: var(--pearl-faint) !important;
}

/* Plans */
html body[data-page="plans"] .plans {
  margin-top: 30px !important;
}

html body[data-page="plans"] .planHero {
  border-radius: 20px !important;
  padding: 34px !important;
  background-image:
    radial-gradient(circle at 86% -20%, rgba(197, 184, 241, 0.4), transparent 52%),
    linear-gradient(136deg, rgba(255, 255, 255, 0.62), rgba(239, 244, 251, 0.48) 50%, rgba(248, 240, 247, 0.48)) !important;
}

html body[data-page="plans"] .planHero .eyebrow {
  color: var(--pearl-iris) !important;
}

html body[data-page="plans"] .planHero h1 {
  color: var(--pearl-ink) !important;
  font-size: 38px !important;
}

html body[data-page="plans"] .planHero p,
html body[data-page="plans"] .planHeroMeta span {
  color: var(--pearl-muted) !important;
}

html body[data-page="plans"] .planHeroMeta strong {
  color: var(--pearl-ink) !important;
}

html body[data-page="plans"] .planTabs {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

html body[data-page="plans"] .planTabs button {
  color: var(--pearl-muted) !important;
}

html body[data-page="plans"] .planTabs button[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
}

html body[data-page="plans"] .planTabs button:disabled {
  opacity: 0.5 !important;
}

html body[data-page="plans"] .planPromise {
  color: var(--pearl-faint) !important;
}

html body[data-page="plans"] .planPromise strong {
  color: var(--pearl-ink) !important;
}

html body[data-page="plans"] .planCard {
  border-radius: 15px !important;
  padding: 20px !important;
}

html body[data-page="plans"] .planCard.featured {
  background-image: radial-gradient(circle at 88% -8%, rgba(184, 207, 239, 0.5), transparent 46%),
    linear-gradient(152deg, rgba(238, 244, 252, 0.92), rgba(255, 255, 255, 0.66) 58%, rgba(236, 232, 248, 0.72)) !important;
}

html body[data-page="plans"] .planCard.flagship {
  background-image: radial-gradient(circle at 88% -8%, rgba(245, 195, 200, 0.45), transparent 46%),
    linear-gradient(152deg, rgba(250, 240, 242, 0.94), rgba(255, 255, 255, 0.66) 58%, rgba(236, 232, 248, 0.72)) !important;
}

html body[data-page="plans"] .planCard h2,
html body[data-page="plans"] .planPrice strong,
html body[data-page="plans"] .planPoints b {
  color: var(--pearl-ink) !important;
}

html body[data-page="plans"] .planCard .audience,
html body[data-page="plans"] .planPrice span,
html body[data-page="plans"] .planPrice s,
html body[data-page="plans"] .planPoints small {
  color: var(--pearl-faint) !important;
}

html body[data-page="plans"] .planCard .tag {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--pearl-iris) !important;
}

html body[data-page="plans"] .planPoints {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

html body[data-page="plans"] .planFeatures {
  color: var(--pearl-muted) !important;
}

html body[data-page="plans"] .planFeatures li::before {
  color: #69a77f !important;
}

html body[data-page="plans"] .planCard:not(.featured):not(.flagship) .planBuy {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-ink) !important;
}

html body[data-page="plans"] .planFoot {
  color: var(--pearl-faint) !important;
}

/* Library */
html body[data-page="library"] .library {
  border-radius: 20px !important;
  padding: 30px !important;
  margin-top: 30px !important;
}

html body[data-page="library"] .library h1,
html body[data-page="library"] .sectionHead h2 {
  color: var(--pearl-ink) !important;
}

html body[data-page="library"] .countCard {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

html body[data-page="library"] .countCard strong {
  color: var(--pearl-ink) !important;
}

html body[data-page="library"] .countCard span,
html body[data-page="library"] .sectionHead .sub {
  color: var(--pearl-muted) !important;
}

html body[data-page="library"] .libraryTools .filterBtn,
html body[data-page="library"] .librarySearch {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--pearl-muted) !important;
  backdrop-filter: blur(8px) !important;
}

html body[data-page="library"] .libraryTools .filterBtn[aria-pressed="true"] {
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
  font-weight: 700 !important;
}

html body[data-page="library"] .librarySearch::placeholder {
  color: var(--pearl-faint) !important;
}

html body[data-page="library"] .jobCard {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: 0 12px 30px rgba(139, 149, 169, 0.12) !important;
  overflow: hidden !important;
}

html body[data-page="library"] .jobCover {
  border-radius: 12px !important;
  margin: 10px 10px 0 !important;
  background-image: linear-gradient(0deg, rgba(18, 20, 28, 0.55), rgba(18, 20, 28, 0.08)) !important;
}

html body[data-page="library"] .jobs {
  align-items: start !important;
}

html body[data-page="library"] .jobCard {
  align-self: start !important;
}

html body[data-page="library"] .jobCover.failed {
  background-color: #f3edf3 !important;
  background-image:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #f8eff2, #ece7f7) !important;
}

html body[data-page="library"] .jobCover.failed::after {
  display: none !important;
}

html body[data-page="library"] .jobCover.failed::before {
  content: "!";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 26px rgba(128, 118, 145, 0.16);
  color: #a05a60;
  font-size: 20px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

html body[data-page="library"] .jobTag,
html body[data-page="library"] .jobDuration {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: #39424f !important;
  backdrop-filter: blur(10px) !important;
}

html body[data-page="library"] .coverPlay {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 22px rgba(67, 76, 94, 0.18) !important;
  color: var(--pearl-ink) !important;
  font-size: 13px !important;
  backdrop-filter: blur(10px) !important;
}

html body[data-page="library"] .jobTop b {
  color: var(--pearl-ink) !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
}

html body[data-page="library"] .jobBody .status {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: var(--pearl-ink) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(139, 149, 169, 0.1) !important;
}

html body[data-page="library"] .jobBody .status[data-state="running"],
html body[data-page="library"] .jobBody .status[data-state="processing"] {
  color: #4d628a !important;
}

html body[data-page="library"] .jobBody .status[data-state="failed"] {
  color: #a05a60 !important;
}

html body[data-page="library"] .jobBody .status[data-state="succeeded"],
html body[data-page="library"] .jobBody .status[data-state="completed"] {
  color: #3d7657 !important;
}

html body[data-page="library"] .jobMeta {
  color: var(--pearl-faint) !important;
  font-size: 12px !important;
}

html body[data-page="library"] .jobAction {
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 10px !important;
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
  height: 36px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-page="library"] .jobCard {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease !important;
}

html body[data-page="library"] .jobCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(126, 139, 159, 0.16) !important;
}

html body[data-page="library"] .jobProgress {
  background: rgba(148, 160, 178, 0.16) !important;
}

html body[data-page="library"] .jobProgress span {
  background: linear-gradient(90deg, #8f88bf, #7899ca) !important;
}

@media (max-width: 560px) {
  html body[data-page="library"] .jobCover.portrait {
    aspect-ratio: 4 / 5 !important;
  }

  html body[data-page="library"] .jobCover.wide {
    aspect-ratio: 16 / 10 !important;
  }

  html body[data-page="library"] .jobs {
    gap: 14px !important;
  }
}

html body[data-page="library"] .emptyState {
  border-color: rgba(148, 160, 178, 0.28) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  color: var(--pearl-muted) !important;
}

html body[data-page="library"] .emptyState strong {
  color: var(--pearl-ink) !important;
}

/* Commerce placeholder */
html body[data-page="commerce"] .commerceSoon {
  border-radius: 20px !important;
  padding: 64px 32px !important;
}

html body[data-page="commerce"] .commerceSoonMark {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: var(--pearl-iris) !important;
}

html body[data-page="commerce"] .commerceSoon h1 {
  color: var(--pearl-ink) !important;
}

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

/* Recharge dialog */
html body dialog.rechargeDialog {
  border: 1px solid rgba(255, 255, 255, 0.97) !important;
  border-radius: 20px !important;
  background: #f4f7fb !important;
  color: var(--pearl-ink) !important;
  box-shadow: 0 34px 100px rgba(90, 103, 124, 0.28) !important;
  overscroll-behavior: contain;
}

html body dialog.rechargeDialog::backdrop {
  background: rgba(24, 28, 38, 0.35) !important;
  backdrop-filter: blur(10px) !important;
}

html body dialog.rechargeDialog .modalClose {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--pearl-muted) !important;
}

html body dialog.rechargeDialog .rechargeModalIntro {
  background: linear-gradient(156deg, rgba(255, 255, 255, 0.78), rgba(239, 244, 250, 0.62) 52%, rgba(246, 240, 248, 0.66)) !important;
  border-right-color: rgba(148, 160, 178, 0.16) !important;
}

html body dialog.rechargeDialog .rechargeModalIntro h2 {
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .rechargeModalIntro > p,
html body dialog.rechargeDialog .modalOrderNote,
html body dialog.rechargeDialog .hint,
html body dialog.rechargeDialog .paymentSafety {
  color: var(--pearl-muted) !important;
}

html body dialog.rechargeDialog .packageCard,
html body dialog.rechargeDialog .checkoutSummary div,
html body dialog.rechargeDialog .orderCodeRow {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

html body dialog.rechargeDialog .packageCard b {
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .packageCard span,
html body dialog.rechargeDialog .checkoutSummary span {
  color: var(--pearl-faint) !important;
}

html body dialog.rechargeDialog .paymentSteps li {
  color: var(--pearl-muted) !important;
}

html body dialog.rechargeDialog .paymentSteps li::before {
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
}

html body dialog.rechargeDialog .rechargeModalCheckout {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.84), rgba(241, 245, 250, 0.72) 70%) !important;
}

html body dialog.rechargeDialog .paymentBrand b,
html body dialog.rechargeDialog .orderTitleRow strong,
html body dialog.rechargeDialog .checkoutSummary strong {
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .paymentBrand small,
html body dialog.rechargeDialog .orderStatusBadge,
html body dialog.rechargeDialog .paymentModeBadge {
  color: var(--pearl-muted) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

html body dialog.rechargeDialog .qrFrame {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(101, 114, 134, 0.2), inset 0 1px rgba(255, 255, 255, 0.9) !important;
}

html body dialog.rechargeDialog .field {
  color: var(--pearl-muted) !important;
}

html body dialog.rechargeDialog .field input,
html body dialog.rechargeDialog input[type="text"] {
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .field input::placeholder {
  color: var(--pearl-faint) !important;
}

html body dialog.rechargeDialog .orderCodeRow code {
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .orderCodeRow button {
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .paymentSuccessIcon {
  background: linear-gradient(145deg, #c9eed8, #8fd2ab) !important;
  color: #123422 !important;
}

html body dialog.rechargeDialog .paymentSuccess strong {
  color: var(--pearl-ink) !important;
}

html body dialog.rechargeDialog .paymentSuccess p {
  color: var(--pearl-muted) !important;
}

/* P0 payment: one focused QR column. The QR image itself is never masked. */
html body dialog.rechargeDialog {
  width: min(460px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 32px) !important;
  border-radius: 24px !important;
  background: #f7f9fc !important;
  box-shadow: 0 28px 80px rgba(76, 89, 111, 0.22) !important;
}

html body dialog.rechargeDialog[open] {
  display: block !important;
}

html body dialog.rechargeDialog::after {
  display: none !important;
}

html body dialog.rechargeDialog .rechargeModalIntro {
  display: none !important;
}

html body dialog.rechargeDialog .rechargeModalCheckout {
  padding: 28px 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
}

html body dialog.rechargeDialog .rechargeBrandLogo {
  display: block !important;
  width: 150px !important;
  height: auto !important;
  margin: 0 auto 16px !important;
}

html body dialog.rechargeDialog .paymentBrand {
  justify-content: center !important;
  margin-bottom: 16px !important;
}

html body dialog.rechargeDialog .checkoutSummary {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

html body dialog.rechargeDialog .checkoutSummary div {
  padding: 11px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

html body dialog.rechargeDialog .checkoutSummary span {
  color: var(--pearl-faint) !important;
  font-size: 10px !important;
}

html body dialog.rechargeDialog .checkoutSummary strong {
  color: var(--pearl-ink) !important;
  font-size: 20px !important;
  font-variant-numeric: tabular-nums;
}

html body dialog.rechargeDialog .orderTitleRow {
  justify-content: center !important;
  margin: 8px 0 4px !important;
}

html body dialog.rechargeDialog .orderTitleRow strong {
  display: none !important;
}

html body dialog.rechargeDialog .orderStatusBadge {
  min-width: 64px !important;
  height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

html body dialog.rechargeDialog .orderStatusBadge[data-state="pending"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="created"] {
  border-color: #e7c98d !important;
  background: #fff1d8 !important;
  color: #7a4a00 !important;
}

html body dialog.rechargeDialog .orderStatusBadge[data-state="pending_review"] {
  border-color: #c9bef0 !important;
  background: #ece8ff !important;
  color: #4b3b85 !important;
}

html body dialog.rechargeDialog .orderStatusBadge[data-state="paid"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="approved"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="credited"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="success"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="succeeded"] {
  border-color: #b9ddc8 !important;
  background: #e2f4e8 !important;
  color: #246b45 !important;
}

html body dialog.rechargeDialog .orderStatusBadge[data-state="rejected"],
html body dialog.rechargeDialog .orderStatusBadge[data-state="failed"] {
  border-color: #efc0c7 !important;
  background: #ffe5e8 !important;
  color: #9b3540 !important;
}

html body dialog.rechargeDialog .qrFrame {
  width: min(232px, 70vw) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  margin: 12px auto 14px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(92, 104, 124, 0.16) !important;
  animation: none !important;
}

html body dialog.rechargeDialog .qrFrame::after {
  display: none !important;
}

html body dialog.rechargeDialog .qrFrame .qr {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

html body dialog.rechargeDialog .modalOrderNote,
html body dialog.rechargeDialog .paymentSafety {
  display: none !important;
}

html body dialog.rechargeDialog .orderCodeRow {
  width: 100% !important;
  max-width: 340px !important;
  margin: 8px auto 0 !important;
}

html body dialog.rechargeDialog #manualInstruction,
html body dialog.rechargeDialog #autoInstruction {
  max-width: 340px !important;
  margin: 8px auto 0 !important;
  color: var(--pearl-muted) !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

html body dialog.rechargeDialog #claimForm {
  width: 100% !important;
  max-width: 340px !important;
  margin: 12px auto 0 !important;
}

html body dialog.rechargeDialog #claim {
  width: 100% !important;
  height: 44px !important;
  margin-top: 8px !important;
  border-radius: 10px !important;
  background: var(--pearl-pearl-gradient) !important;
  color: #2c3343 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

html body dialog.rechargeDialog #orderMsg {
  max-width: 340px !important;
  margin: 10px auto 0 !important;
  text-align: center !important;
}

html body dialog.rechargeDialog #checkPayment {
  margin: 10px auto 0 !important;
}

/* Responsive */
@media (max-width: 1180px) {
  html body[data-page="library"] .jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 850px) {
  html body[data-page="wallet"] .walletLayout,
  html body[data-page="wallet"] .paylog,
  html body[data-page="library"] .library,
  html body[data-page="plans"] .plans,
  html body[data-page="commerce"] .commerceSoon {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  html body[data-page="wallet"] .walletLayout,
  html body[data-page="library"] .jobs,
  html body[data-page="plans"] .planGrid {
    grid-template-columns: 1fr !important;
  }

  html body[data-page="wallet"] .balanceCard,
  html body[data-page="wallet"] .rechargeCard,
  html body[data-page="wallet"] .paylog,
  html body[data-page="library"] .library,
  html body[data-page="plans"] .planHero {
    padding: 24px !important;
    border-radius: 16px !important;
  }

  html body[data-page="plans"] .planHero h1 {
    font-size: 29px !important;
  }
}

@media (max-width: 520px) {
  html body[data-page="wallet"] .balanceLine strong {
    font-size: 48px !important;
  }

  html body[data-page="plans"] .planHeroMeta {
    gap: 12px !important;
  }
}

@media (max-width: 360px) {
  html body #siteHeader#siteHeader {
    padding-inline: 10px !important;
    gap: 6px !important;
  }

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

  html body #siteHeader#siteHeader .pearl-brand img {
    width: 104px !important;
  }

  html body #siteHeader#siteHeader .account {
    gap: 3px !important;
  }

  html body #siteHeader#siteHeader .globalStudioSearch {
    width: 26px !important;
    min-width: 26px !important;
    padding-inline: 6px !important;
  }

  html body #siteHeader#siteHeader .notificationButton,
  html body #siteHeader#siteHeader .profileTrigger,
  html body #siteHeader#siteHeader .menuToggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }

  html body #siteHeader#siteHeader #profileTrigger {
    width: 34px !important;
    min-width: 34px !important;
    padding: 3px !important;
    justify-content: center !important;
  }

  html body #siteHeader#siteHeader #profileTrigger > #userName,
  html body #siteHeader#siteHeader #profileTrigger > i {
    display: none !important;
  }

  html body #siteHeader#siteHeader .menuToggle {
    margin-left: 0 !important;
  }

  html body[data-page="library"] .library .eyebrow,
  html body[data-page="library"] .countCard,
  html body[data-page="library"] .countCard span,
  html body[data-page="library"] .countCard strong {
    white-space: nowrap !important;
  }

  html body[data-page="library"] .countCard {
    flex: 0 0 auto !important;
  }
}