@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root {
  color-scheme: light;
  --bg: #F2EDE4;
  --bg-card: #FAF7F2;
  --bg-dark: #2C2016;
  --text-primary: #2C2016;
  --text-secondary: #7A6E5A;
  --text-muted: #B8A88A;
  --border: #E0D5C4;
  --accent: #C4783A;
  --accent-light: #FBF0E6;
  --color-bg-primary: #F2EDE4;
  --color-bg-card: #FAF7F2;
  --color-bg-dark: #2C2016;
  --color-text-primary: #2C2016;
  --color-text-secondary: #7A6E5A;
  --color-text-muted: #B8A88A;
  --color-border: #E0D5C4;
  --color-accent: #C4783A;
  --font-body: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hero: "Lora", Georgia, serif;
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --subtle: var(--color-text-muted);
  --paper: var(--color-bg-primary);
  --paper-warm: var(--color-bg-primary);
  --surface: var(--color-bg-card);
  --surface-solid: var(--color-bg-card);
  --line: var(--color-border);
  --line-strong: #cfc3ad;
  --green: var(--color-accent);
  --mint: #efe5d4;
  --sky: #efe7d8;
  --clay: var(--color-accent);
  --honey: #b9945d;
  --dark: var(--color-bg-dark);
  --shadow: 0 22px 52px rgba(61, 53, 37, 0.13);
  --shadow-soft: 0 10px 28px rgba(61, 53, 37, 0.08);
  --radius: 8px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hover: 0 6px 20px rgba(0,0,0,0.10);
  --spacing-section: 80px;
  --spacing-inner: 24px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--color-bg-primary);
}

body::before {
  display: none;
}

body,
button,
input,
select {
  font-family: var(--font-body);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(33, 107, 89, 0.28);
  outline-offset: 3px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-width: 220px;
}

.brandMark {
  width: 38px;
  height: 38px;
  border: 2px solid var(--dark);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--mint) 0 50%, transparent 50%),
    linear-gradient(135deg, transparent 0 48%, var(--honey) 48% 56%, var(--clay) 56% 100%);
  box-shadow: 4px 4px 0 var(--dark);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 17px;
  line-height: 1.05;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.navLinks {
  justify-self: center;
  display: flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.76);
  padding: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.navItem {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 14px;
  color: #40575b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: background-color 180ms ease, color 180ms ease;
}

.navItem:hover,
.navItem.isActive {
  background: var(--mint);
  color: var(--green);
}

.topActions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.statusPill,
.quietBadge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(251, 247, 240, 0.7);
  padding: 0 11px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.statusPill.isReady {
  border-color: rgba(33, 107, 89, 0.22);
  background: rgba(240, 249, 244, 0.92);
  color: var(--green);
}

.topButton,
.primaryButton,
.secondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 24px;
  padding: 10px 22px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, background-color 180ms ease;
}

.topButton,
.primaryButton {
  border: none;
  background: var(--color-bg-dark);
  color: #F5F0E8;
  box-shadow: 0 12px 26px rgba(61, 53, 37, 0.18);
}

.secondaryButton {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: transparent;
  color: var(--color-text-primary);
}

.dangerButton {
  border-color: rgba(196, 120, 58, 0.42);
  color: var(--color-accent);
}

.dangerButton:hover {
  background: var(--color-accent);
  color: #fff7ed;
}

.topButton:hover,
.primaryButton:hover,
.secondaryButton:hover,
.releaseButton:hover,
.petCard:hover {
  transform: translateY(-2px);
}

.topButton:active,
.primaryButton:active,
.secondaryButton:active,
.releaseButton:active {
  transform: translateY(0) scale(0.98);
}

button:disabled,
.releaseButton.disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.appShell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 72px;
}

.pageView {
  display: none;
  animation: pageIn 240ms var(--ease) both;
}

.pageView.isActive {
  display: block;
}

.homeHero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100vh - 132px);
  overflow: hidden;
  border: 1px solid rgba(22, 38, 41, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(247, 251, 247, 0.86), rgba(255, 248, 239, 0.42)),
    #eff8f3;
  box-shadow: var(--shadow);
}

.heroBackdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.desktopWindow {
  position: absolute;
  border: 1px solid rgba(22, 38, 41, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 250, 0.72);
  box-shadow: var(--shadow-soft);
}

.desktopWindow::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: rgba(33, 107, 89, 0.18);
}

.windowOne {
  top: 12%;
  right: 10%;
  width: min(520px, 44vw);
  height: 190px;
}

.windowTwo {
  right: 22%;
  bottom: 18%;
  width: min(330px, 30vw);
  height: 136px;
}

.windowThree {
  left: 8%;
  bottom: 15%;
  width: min(260px, 26vw);
  height: 116px;
}

.desktopShelf {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 12%;
  height: 1px;
  background: rgba(22, 38, 41, 0.18);
}

.companionFigure,
.mockPet {
  position: absolute;
  border: 3px solid var(--dark);
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 36% 45%, #f6d568 0 6px, #1e2d32 7px 9px, transparent 10px),
    radial-gradient(circle at 64% 45%, #f6d568 0 6px, #1e2d32 7px 9px, transparent 10px),
    linear-gradient(180deg, #2d3437 0 54%, #fbf2df 55% 100%);
  box-shadow: 4px 5px 0 rgba(22, 38, 41, 0.16);
  animation: petBreathe 3.7s var(--ease) infinite;
}

.companionFigure {
  right: 18%;
  bottom: 12%;
  width: 128px;
  height: 140px;
}

.heroContent {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: clamp(40px, 7vw, 86px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-family: var(--font-hero);
  font-weight: 400;
  margin-bottom: 22px;
  max-width: 900px;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.18;
}

.heroLead,
.pageIntro p,
.sectionCopy p {
  max-width: 720px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.72;
}

.heroActions,
.formActions,
.assetLinks,
.petActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trustBand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0 44px;
}

.trustBand div,
.flowRail article,
.studioPanel,
.previewPanel,
.libraryToolbar,
.petCard,
.priceCard,
.releaseCard,
.installNotes {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.trustBand div {
  padding: 18px;
}

.trustBand span,
.flowRail span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--mint);
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.trustBand strong,
.trustBand p {
  display: block;
}

.trustBand strong {
  margin-bottom: 8px;
  font-size: 18px;
}

.trustBand p,
.flowRail p,
.priceCard p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.62;
}

.sectionBand {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 28px;
  align-items: start;
  padding: 38px 0 58px;
}

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

.flowRail article {
  min-height: 176px;
  padding: 18px;
}

.flowRail strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.pageIntro {
  padding: 80px 0 30px;
}

.centeredIntro {
  display: grid;
  justify-items: center;
  text-align: center;
}

.centeredIntro p {
  margin-inline: auto;
}

.studioGrid {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
  gap: 18px;
  padding-bottom: 42px;
}

.studioPanel,
.previewPanel,
.libraryToolbar,
.priceCard {
  padding: 22px;
}

.sectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.formGrid {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.fieldPair {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 12px;
}

label {
  display: grid;
  gap: 8px;
  color: #324b50;
  font-size: 13px;
  font-weight: 900;
}

input,
select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(22, 38, 41, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  padding: 0 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input:focus,
select:focus {
  border-color: rgba(33, 107, 89, 0.48);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(33, 107, 89, 0.13);
}

.fileDrop {
  cursor: pointer;
}

.fileDrop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.fileVisual {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  border: 1px dashed rgba(33, 107, 89, 0.4);
  border-radius: var(--radius);
  background: rgba(241, 248, 244, 0.84);
  padding: 12px;
  transition: transform 180ms var(--ease), background-color 180ms ease, border-color 180ms ease;
}

.fileDrop:hover .fileVisual {
  transform: translateY(-2px);
  border-color: rgba(33, 107, 89, 0.62);
  background: rgba(236, 247, 241, 0.96);
}

.filePreview {
  width: 86px;
  height: 86px;
  overflow: hidden;
  border: 1px solid rgba(22, 38, 41, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, #e1efe9 25%, transparent 25%),
    linear-gradient(-45deg, #e1efe9 25%, transparent 25%),
    #fffdf7;
  background-size: 18px 18px;
  background-position: 0 0, 0 9px;
}

.filePreview.hasImage {
  background-size: cover;
  background-position: center;
}

.fileVisual strong,
.fileVisual small,
.toggleLine strong,
.toggleLine small {
  display: block;
}

.fileVisual strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.fileVisual small,
.toggleLine small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}

.toggleLine {
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
}

.toggleLine input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 2px;
  accent-color: var(--green);
}

.desktopStage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-card);
}

.desktopStage::before {
  content: "";
  position: absolute;
  inset: auto 28px 34px;
  height: 1px;
  background: rgba(22, 38, 41, 0.16);
}

.stageWindow {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(22, 38, 41, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.74);
}

.stageWindow span {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 46px;
  height: 8px;
  border-radius: 999px;
  background: rgba(33, 107, 89, 0.18);
}

.stageA {
  top: 54px;
  left: 42px;
  width: min(300px, 42%);
  height: 116px;
}

.stageB {
  right: 42px;
  bottom: 92px;
  width: min(250px, 36%);
  height: 104px;
}

#petCanvas {
  position: relative;
  z-index: 2;
  width: min(390px, 78%);
  aspect-ratio: 192 / 208;
  image-rendering: pixelated;
}

.basePreview {
  position: absolute;
  z-index: 3;
  width: min(290px, 62%);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-card);
  image-rendering: pixelated;
  box-shadow: var(--shadow);
}

.assetLinks {
  min-height: 38px;
  margin-top: 14px;
}

.assetLinks a,
.petActions a,
.petActions button,
.releaseButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(33, 107, 89, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  padding: 0 12px;
  color: var(--green);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  transition: transform 180ms var(--ease), background-color 180ms ease;
}

.progressList {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.progressList li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(22, 38, 41, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  padding: 10px;
  color: #50666c;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
}

.progressCopy {
  min-width: 0;
}

.progressCopy strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: 850;
}

.progressCopy details {
  margin-top: 4px;
}

.progressCopy summary {
  width: max-content;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.progressCopy pre {
  max-height: 130px;
  overflow: auto;
  margin: 8px 0 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(245, 240, 232, 0.72);
  padding: 9px;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.progressList li span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--mint);
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.progressList .emptyState {
  display: block;
  color: var(--muted);
}

.progressList li.error {
  border-color: var(--color-border);
  background: rgba(251, 247, 240, 0.82);
  color: var(--color-text-secondary);
}

.progressList li.error span {
  background: #B8A88A;
  color: #FBF7F0;
}

.libraryToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px;
}

.libraryToolbar strong,
.libraryToolbar span {
  display: block;
}

.libraryToolbar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.petGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 40px;
}

.libraryPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: -18px 0 42px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.libraryPagination[hidden] {
  display: none;
}

.libraryEmpty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(33, 107, 89, 0.32);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.petCard {
  display: grid;
  gap: 12px;
  padding: 12px;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, border-color 180ms ease;
}

.petCard.ready {
  border-color: rgba(33, 107, 89, 0.28);
}

.petCard.failed {
  border-color: rgba(201, 111, 89, 0.28);
}

.petCardButton {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.petThumb {
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid rgba(22, 38, 41, 0.1);
  border-radius: var(--radius);
  background: #edf6f0;
}

.petThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.petMeta {
  min-width: 0;
}

.petMeta strong,
.petMeta span,
.petMeta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.petMeta strong {
  margin-bottom: 5px;
  font-size: 16px;
}

.petMeta span,
.petMeta small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.installGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 18px;
  align-items: stretch;
  padding-bottom: 46px;
}

.desktopMock {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(238, 248, 241, 0.92), rgba(248, 249, 253, 0.88)),
    #eef8f1;
  box-shadow: var(--shadow);
}

.mockWindow {
  position: absolute;
  border: 1px solid rgba(22, 38, 41, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.82);
  box-shadow: var(--shadow-soft);
}

.mockWindow.large {
  top: 74px;
  left: 58px;
  width: min(380px, 58%);
  height: 150px;
}

.mockWindow.small {
  right: 58px;
  bottom: 120px;
  width: min(260px, 38%);
  height: 108px;
}

.mockPet {
  left: calc(50% - 48px);
  bottom: 75px;
  width: 96px;
  height: 104px;
}

.mockDock {
  position: absolute;
  inset: auto 40px 50px;
  height: 1px;
  background: rgba(22, 38, 41, 0.18);
}

.installPanel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.releaseGrid {
  display: grid;
  gap: 10px;
}

.releaseCard {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.releaseCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.releaseCard strong,
.releaseCard span {
  display: block;
}

.releaseCard span,
.releaseCard p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.releaseCard p {
  margin-bottom: 0;
  line-height: 1.5;
}

.releaseState {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.releaseState.missing {
  color: #9f4934;
}

.installNotes {
  padding: 16px;
  box-shadow: none;
}

.installNotes strong {
  display: block;
  margin-bottom: 10px;
}

.installNotes ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.pricingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 44px;
}

.priceCard {
  min-height: 310px;
  padding: 22px;
}

.priceCard.featured {
  border-color: rgba(22, 38, 41, 0.7);
  box-shadow: 6px 6px 0 var(--dark);
}

.priceCard > span {
  color: var(--clay);
  font-size: 12px;
  font-weight: 950;
}

.priceCard ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  color: #445a60;
  list-style: none;
  font-weight: 850;
}

.priceCard li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--green);
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes petBreathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-5px) scaleY(1.025);
  }
}

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

@media (max-width: 1040px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .navLinks {
    order: 3;
    grid-column: 1 / -1;
    justify-self: stretch;
    overflow-x: auto;
  }

  .navItem {
    flex: 1 0 auto;
  }

  .sectionBand,
  .studioGrid,
  .installGrid {
    grid-template-columns: 1fr;
  }

  .trustBand,
  .petGrid,
  .pricingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .appShell,
  .topbar {
    width: min(100% - 20px, 1180px);
  }

  .topActions {
    justify-self: end;
  }

  .statusPill {
    display: none;
  }

  .brand {
    min-width: 0;
  }

  .brand small {
    display: none;
  }

  .homeHero {
    min-height: 76vh;
  }

  .heroContent {
    padding: 34px 20px;
  }

  h1 {
    font-size: clamp(42px, 16vw, 64px);
  }

  .heroLead,
  .pageIntro p,
  .sectionCopy p {
    font-size: 16px;
  }

  .trustBand,
  .flowRail,
  .fieldPair,
  .fileVisual,
  .petGrid,
  .pricingGrid {
    grid-template-columns: 1fr;
  }

  .studioPanel,
  .previewPanel,
  .priceCard,
  .libraryToolbar {
    padding: 16px;
  }

  .sectionHeader,
  .libraryToolbar {
    display: grid;
  }

  .desktopStage {
    min-height: 340px;
  }

  .stageWindow,
  .windowTwo,
  .windowThree {
    display: none;
  }

  .windowOne {
    right: 20px;
    top: 34%;
    width: 62vw;
    height: 120px;
  }

  .companionFigure {
    right: 34px;
    bottom: 14%;
    width: 94px;
    height: 104px;
  }

  #petCanvas {
    width: 94%;
  }

  .desktopMock {
    min-height: 330px;
  }

  .mockWindow {
    display: none;
  }
}

/* Final centered Hero override. */
.homeHero {
  display: block;
  min-height: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero {
  text-align: center;
  padding: 60px 20px 48px;
  max-width: 560px;
  margin: 0 auto;
}

.hero-pet-preview {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
}

.hero-pet {
  position: absolute;
  left: 16px;
  bottom: 6px;
  width: 88px;
  height: 96px;
  border: 3px solid var(--color-bg-dark);
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 35% 44%, #f7d66d 0 6px, #2c2416 7px 9px, transparent 10px),
    radial-gradient(circle at 65% 44%, #f7d66d 0 6px, #2c2416 7px 9px, transparent 10px),
    linear-gradient(180deg, #34302a 0 54%, #fbf7f0 55% 100%);
  box-shadow: 0 12px 22px rgba(61, 53, 37, 0.12);
  animation: heroPetBreathe 3.7s var(--ease) infinite;
}

.hero-pet::before,
.hero-pet::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 32px;
  height: 34px;
  border: 3px solid var(--color-bg-dark);
  background: #34302a;
}

.hero-pet::before {
  left: 7px;
  border-radius: 70% 30% 50% 40%;
  transform: rotate(-22deg);
}

.hero-pet::after {
  right: 7px;
  border-radius: 30% 70% 40% 50%;
  transform: rotate(22deg);
}

.hero-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: none;
}

.hero-title {
  max-width: none;
  margin: 0 0 14px;
  color: var(--color-text-primary);
  font-family: "Lora", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
}

.hero-title em {
  color: var(--color-accent);
  font-style: italic;
}

.hero-sub {
  margin: 0 0 28px;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-ctas .primaryButton {
  padding: 10px 22px;
  border: none;
  border-radius: 24px;
  background: var(--color-bg-dark);
  color: #F5F0E8;
}

.hero-ctas .secondaryButton {
  padding: 10px 22px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: transparent;
  color: var(--color-text-primary);
}

@keyframes heroPetBreathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-5px) scaleY(1.025);
  }
}

/* Homepage flow cards. */
.storyBand {
  display: block;
  padding: 12px 0 58px;
}

.flowRail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.flowRail article {
  min-height: 176px;
  border: 0.5px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: none;
}

.flowRail span {
  display: block;
  min-width: 0;
  height: auto;
  margin-bottom: 18px;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: "Lora", serif;
  font-size: 22px;
  font-weight: 400;
}

.flowRail strong {
  margin-bottom: 10px;
  color: var(--color-text-primary);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.flowRail p {
  color: var(--color-text-secondary);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

@media (max-width: 1040px) {
  .flowRail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .flowRail {
    grid-template-columns: 1fr;
  }
}

/* Studio and pricing visual polish. */
.studioPanel,
.previewPanel,
.priceCard {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.studioPanel .sectionHeader h2,
.previewPanel .sectionHeader h2,
.priceCard h2 {
  color: var(--color-text-primary);
  font-family: "Lora", serif;
  font-weight: 400;
}

.previewPanel #previewTitle {
  font-style: italic;
}

.previewPanel #previewTitle[data-preview-state="idle"],
.previewPanel #previewTitle[data-preview-state="running"] {
  color: var(--color-text-muted);
}

.previewPanel #previewTitle[data-preview-state="ready"] {
  color: var(--color-accent);
}

.previewPanel #previewTitle[data-preview-state="review"] {
  color: #B8A88A;
}

.desktopStage {
  border-color: var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-card);
}

.progressList li span {
  background: var(--color-accent);
  color: #F5F0E8;
}

.progressList .emptyState,
.progressList li:has(+ li) span {
  background: var(--color-border);
  color: var(--color-text-secondary);
}

.priceCard {
  min-height: 310px;
  box-shadow: var(--shadow-soft);
}

.priceCard.featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.priceCard li::before {
  background: var(--color-accent);
}

/* Polished studio and install layouts. */
.studioGrid {
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  gap: 20px;
  align-items: start;
}

.studioPanel,
.previewPanel,
.installPanel,
.installNotes,
.releaseCard {
  border: 1px solid rgba(221, 212, 192, 0.92);
  background:
    linear-gradient(180deg, rgba(251, 247, 240, 0.96), rgba(251, 247, 240, 0.9)),
    var(--color-bg-card);
  box-shadow: 0 12px 30px rgba(61, 53, 37, 0.06);
}

.studioPanel,
.previewPanel {
  padding: 28px;
}

.studioPanel {
  min-height: auto;
}

.previewPanel {
  display: grid;
  gap: 18px;
}

.studioPanel .sectionHeader,
.previewPanel .sectionHeader,
.installPanel .sectionHeader {
  align-items: flex-start;
}

.studioPanel .sectionHeader h2,
.previewPanel .sectionHeader h2,
.installPanel .sectionHeader h2 {
  max-width: 520px;
  margin: 6px 0 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
}

.previewPanel .sectionHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  gap: 20px;
}

#animationSelect {
  min-height: 42px;
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.72);
  font-size: 14px;
}

.formGrid {
  gap: 18px;
  margin-top: 24px;
}

.fieldPair {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 14px;
}

label {
  color: #40575b;
  font-size: 13px;
  font-weight: 850;
}

input,
select {
  border-color: rgba(221, 212, 192, 0.98);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.78);
}

.fileVisual {
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 126px;
  border: 1px dashed rgba(196, 120, 58, 0.32);
  border-radius: 16px;
  background: rgba(251, 247, 240, 0.72);
}

.filePreview {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(196, 120, 58, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(184, 168, 138, 0.16) 25%, transparent 25%),
    #fffbf5;
  background-size: 18px 18px;
  background-position: 0 0, 0 9px;
}

.fileVisual strong {
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 850;
}

.toggleLine {
  border: 1px solid rgba(221, 212, 192, 0.82);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.58);
  padding: 12px;
}

.toggleLine input {
  accent-color: var(--color-accent);
}

.formActions {
  margin-top: 2px;
}

.desktopStage {
  min-height: 360px;
  margin-top: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(251, 247, 240, 0.95), rgba(245, 240, 232, 0.82)),
    var(--color-bg-card);
}

.stageWindow {
  border-color: rgba(221, 212, 192, 0.9);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.72);
  box-shadow: 0 10px 24px rgba(61, 53, 37, 0.06);
}

.stageA {
  top: 50px;
  left: 56px;
  width: min(300px, 44%);
  height: 92px;
}

.stageB {
  right: 56px;
  bottom: 72px;
  width: min(280px, 40%);
  height: 96px;
}

#petCanvas {
  width: min(330px, 62%);
}

.basePreview {
  width: min(260px, 54%);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(61, 53, 37, 0.1);
}

.assetLinks {
  min-height: 0;
  margin-top: 0;
}

.assetLinks a {
  min-height: 38px;
  border-color: rgba(196, 120, 58, 0.22);
  background: rgba(255, 253, 247, 0.68);
  color: var(--color-accent);
  font-weight: 850;
}

.progressList {
  gap: 8px;
  margin-top: 0;
}

.progressList li {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 54px;
  border-color: rgba(221, 212, 192, 0.76);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.62);
  padding: 10px 12px;
  color: #40575b;
  font-size: 13px;
  font-weight: 750;
}

.progressList li span {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-family: "Lora", serif;
  font-size: 13px;
  font-weight: 400;
}

.progressCopy {
  align-self: center;
}

.installGrid {
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 0.92fr);
  gap: 24px;
  align-items: start;
}

.desktopMock {
  min-height: 520px;
  border-color: rgba(221, 212, 192, 0.85);
  border-radius: 20px;
  background:
    radial-gradient(circle at 28% 22%, rgba(196, 120, 58, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(251, 247, 240, 0.96), rgba(245, 240, 232, 0.82));
  box-shadow: 0 16px 36px rgba(61, 53, 37, 0.08);
}

.desktopMock::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 32px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

.desktopMock::after {
  content: "";
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 52px;
  height: 1px;
  background: rgba(61, 53, 37, 0.18);
}

.mockWindow {
  border-color: rgba(221, 212, 192, 0.86);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.72);
}

.mockWindow.large {
  top: 76px;
  left: 72px;
  width: min(410px, 56%);
  height: 132px;
}

.mockWindow.small {
  right: 72px;
  bottom: 130px;
  width: min(300px, 40%);
  height: 104px;
}

.mockPet {
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  width: 88px;
  height: 96px;
}

.mockDock {
  inset: auto 64px 54px;
  background: rgba(61, 53, 37, 0.18);
}

.installPanel {
  gap: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.releaseGrid {
  gap: 12px;
}

.releaseCard {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: start;
  padding: 18px;
  border-radius: 16px;
}

.releaseCardHeader {
  display: block;
}

.releaseCard p {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.releaseButton,
.releaseState {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.releaseState.missing {
  color: var(--color-text-muted);
}

.releaseNotify {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.releaseNotify input {
  min-height: 42px;
  border-color: var(--color-border);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.72);
  color: var(--color-text-primary);
  font-size: 13px;
}

.releaseNotify input::placeholder {
  color: var(--color-text-muted);
}

.installNotes {
  border-radius: 16px;
  padding: 20px;
}

.installNotes ol {
  gap: 10px;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 650;
}

.libraryEmptyWarm {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 340px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(196, 120, 58, 0.08), transparent 32%),
    var(--color-bg-card);
  padding: 46px 24px;
  box-shadow: 0 14px 32px rgba(61, 53, 37, 0.06);
}

.libraryEmptyWarm strong {
  color: var(--color-text-primary);
  font-family: "Lora", serif;
  font-size: 28px;
  font-weight: 400;
}

.libraryEmptyWarm p {
  max-width: 360px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.emptyPetIllustration {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.92), rgba(245, 240, 232, 0.84)),
    var(--color-bg-card);
  box-shadow: inset 0 0 0 1px var(--color-border), 0 18px 32px rgba(61, 53, 37, 0.08);
}

.emptyPetIllustration::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  height: 54px;
  border: 3px solid var(--color-bg-dark);
  border-radius: 44% 44% 38% 38%;
  background:
    radial-gradient(circle at 34% 42%, var(--color-accent) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 42%, var(--color-accent) 0 4px, transparent 5px),
    linear-gradient(180deg, #3d3525 0 58%, #fbf7f0 59% 100%);
}

.emptyPetIllustration::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 17px;
  height: 1px;
  background: rgba(61, 53, 37, 0.16);
}

@media (max-width: 1040px) {
  .studioGrid,
  .installGrid {
    grid-template-columns: 1fr;
  }

  .previewPanel .sectionHeader {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .studioPanel,
  .previewPanel {
    padding: 18px;
  }

  .fieldPair,
  .fileVisual {
    grid-template-columns: 1fr;
  }

  .desktopStage {
    min-height: 300px;
  }

  .assetLinks {
    display: grid;
  }
}

/* Reference alignment: PetDex warm product system. */
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

body,
button,
input,
select {
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:focus-visible {
  outline: 2px solid rgba(196, 120, 58, 0.34);
  outline-offset: 3px;
}

.topbar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 48px;
  border-bottom: 0.5px solid var(--border);
  background: rgba(242, 237, 228, 0.92);
  backdrop-filter: blur(16px);
}

.brand {
  gap: 10px;
  min-width: 210px;
}

/* M1: 杩欐潯鏃犲獟浣撴煡璇㈢殑 .brand 瑙勫垯鍦ㄥ墠闈?@media(max-width:700px) 鐨?
   min-width:0 涔嬪悗锛屼細鎶婄Щ鍔ㄧ min-width 閲嶆柊鎾戝洖 210锛屼娇 header grid
   瀹戒簬瑙嗗彛銆佹暣椤垫í鍚戞孩鍑猴紙fixed 瀹犵墿灞傞殢涔嬭鎾戝埌 ~459锛夈€傚湪绐勫睆閲嶆柊
   褰掗浂锛岃 topbar 鏀惰繘瑙嗗彛銆乶av 琛岄潬鑷韩 overflow-x 鍐呴儴妯悜婊氬姩銆?*/
@media (max-width: 700px) {
  .brand {
    min-width: 0;
  }
}

.brandMark {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 55%, #FAF7F2 0 4px, transparent 5px),
    radial-gradient(circle at 38% 40%, #FAF7F2 0 3px, transparent 4px),
    radial-gradient(circle at 62% 40%, #FAF7F2 0 3px, transparent 4px),
    var(--accent);
  box-shadow: none;
}

.brand strong {
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
}

.brand small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

.navLinks {
  gap: 4px;
  border: 0.5px solid var(--border);
  border-radius: 24px;
  background: var(--bg-card);
  padding: 4px;
  box-shadow: none;
}

.navItem {
  min-height: 32px;
  border-radius: 20px;
  padding: 6px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
}

.navItem:hover {
  color: var(--text-primary);
}

.navItem.isActive {
  background: var(--bg-dark);
  color: var(--bg-card);
}

.statusPill {
  min-height: 30px;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 400;
}

.statusPill.isReady {
  border-color: rgba(66, 126, 85, 0.28);
  background: rgba(244, 249, 240, 0.7);
  color: #427e55;
}

.topButton,
.primaryButton,
.secondaryButton,
.releaseButton,
.releaseNotify button {
  min-height: 40px;
  border-radius: 24px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease, background-color 160ms ease;
}

.topButton,
.primaryButton,
.releaseNotify button {
  border: none;
  background: var(--bg-dark);
  color: var(--bg-card);
}

.secondaryButton,
.releaseButton {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
}

.appShell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.pageView {
  min-height: calc(100vh - 68px);
}

.homeHero {
  background: var(--bg);
}

.hero {
  max-width: 680px;
  padding: 72px 48px 56px;
}

.hero-pet-preview {
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
}

.hero-pet {
  left: 20px;
  bottom: 9px;
  width: 60px;
  height: 66px;
  border: 0;
  border-radius: 44% 44% 40% 40%;
  background:
    radial-gradient(circle at 34% 42%, var(--accent) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 42%, var(--accent) 0 3px, transparent 4px),
    linear-gradient(180deg, #3d3525 0 58%, #FAF7F2 59% 100%);
  box-shadow: none;
}

.hero-pet::before,
.hero-pet::after {
  top: -12px;
  width: 21px;
  height: 24px;
  border: 0;
  background: #3d3525;
}

.hero-pet::before {
  left: 7px;
}

.hero-pet::after {
  right: 7px;
}

.hero-eyebrow {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.hero-title {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(36px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.2;
}

.hero-title em {
  color: var(--accent);
  font-style: italic;
}

.hero-sub {
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.hero-social-proof {
  margin: 0 0 32px;
  color: var(--text-muted);
  font-size: 13px;
}

.hero-social-proof span {
  color: var(--accent);
  font-weight: 500;
}

.hero-note {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.caseGallery {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 48px 84px;
  position: relative;
}

.caseGallery::before {
  content: "";
  position: absolute;
  inset: 0 24px 40px;
  border-radius: 24px;
  background: radial-gradient(120% 80% at 10% 0%, rgba(232, 195, 106, 0.05) 0%, transparent 55%),
              radial-gradient(120% 80% at 100% 100%, rgba(46, 124, 120, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.galleryHeader span {
  display: block;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0;
}

.galleryHeader h2 {
  margin: 0 0 32px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.caseGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.caseCard {
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 4px 16px rgba(20, 20, 20, 0.04);
  transition: border-color 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}

.caseCard:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 20, 20, 0.06), 0 10px 28px rgba(20, 20, 20, 0.08);
}

.caseCardFeatured {
  border-color: rgba(190, 150, 70, 0.45);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 6px 20px rgba(190, 150, 70, 0.10);
}

.caseImage {
  display: grid;
  place-items: center;
  height: 180px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
}

/* Reset the legacy big-italic-circle span style 鈥?it was used by an older overlay variant.
   The current markup uses .caseSideTag chips instead, so we neutralise the default. */
.caseImage span {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
}

.caseCompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
  gap: 0;
  padding: 0;
  background: linear-gradient(135deg, #F5F0E8 0%, #ECF1F4 100%);
}

.caseCompareSide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 180px;
  overflow: hidden;
}

.caseCompareSide.casePhoto {
  background: #F8F4EC;
}

.caseCompareSide.caseSprite {
  background: #E8FFFE;
  border-left: 0.5px solid var(--border);
}

.caseCompareSide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.casePhotoDoubao img {
  object-position: 58% 46%;
}

.casePhotoNaiju img {
  object-position: 56% 50%;
}

.casePhotoXiaoyin img {
  object-position: 52% 50%;
}

.casePhotoMarni img {
  object-position: 58% 46%;
}

.casePhotoXiaoheibai img {
  object-position: 50% 48%;
}

.casePhotoLingjie img {
  object-position: 52% 50%;
}

.caseCompareSide.caseSprite img {
  object-fit: contain;
  padding: 12px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.caseCard:hover .caseCompareSide img {
  transform: scale(1.04);
}

.caseSideTag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.caseSideTagSprite {
  background: rgba(46, 124, 120, 0.78);
}

.caseBadgeGold {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E8C36A 0%, #C99A3E 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.caseCat {
  background: #FDF5EC;
}

.caseDog {
  background: #F0F4F8;
}

.caseRabbit {
  background: #F5F0F8;
}

.caseBody {
  padding: 14px 16px 16px;
}

.caseBody strong,
.caseCreate strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.caseBody p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.animTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.animTags span {
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  padding: 3px 9px;
  font-size: 10.5px;
  line-height: 1.5;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.animTags span:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.caseCreate {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border-style: dashed;
  cursor: pointer;
  grid-column: 1 / -1;
  padding: 24px;
}

.caseCreate small {
  color: var(--text-muted);
  font-size: 11px;
}

.casePlus {
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
}

.storyBand {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-card);
  padding: 64px 48px;
}

.flowHeader,
.flowRail {
  max-width: 960px;
  margin-inline: auto;
}

.flowHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.flowHeader h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
}

.flowHeader p {
  max-width: 300px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}

.flowRail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.flowRail article {
  position: relative;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.flowRail article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  right: -12px;
  width: 24px;
  height: 0.5px;
  background: var(--border);
}

.flowRail span {
  margin-bottom: 12px;
  color: var(--border);
  font-family: "Lora", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
}

.flowRail strong {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.flowRail p {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.pageIntro,
.studioGrid,
.libraryToolbar,
.petGrid,
.pricingGrid,
.installGrid {
  max-width: 1100px;
  margin-inline: auto;
}

.pageIntro {
  padding: 48px 48px 30px;
}

.pageIntro h1 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(40px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.15;
}

.pageIntro p {
  max-width: 520px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.centeredIntro {
  text-align: center;
}

.centeredIntro p {
  margin-inline: auto;
}

.studioGrid {
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  padding: 0 48px 64px;
}

.studioPanel,
.previewPanel,
.priceCard,
.libraryToolbar {
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: none;
}

.studioPanel,
.previewPanel {
  padding: 28px;
}

.sectionHeader h2,
.studioPanel .sectionHeader h2,
.previewPanel .sectionHeader h2,
.installPanel .sectionHeader h2,
.priceCard h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

.previewPanel .sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.previewPanel #previewTitle {
  color: var(--text-primary);
  font-size: 28px;
  font-style: italic;
}

.previewPanel #previewTitle[data-preview-state="idle"],
.previewPanel #previewTitle[data-preview-state="running"] {
  color: var(--text-muted);
}

.previewPanel #previewTitle[data-preview-state="ready"] {
  color: var(--accent);
}

.previewPanel #previewTitle[data-preview-state="review"] {
  color: var(--text-muted);
}

label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

input,
select {
  min-height: 42px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
}

input:focus,
select:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: none;
}

.fieldPair {
  grid-template-columns: 1fr;
}

.fileVisual {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: auto;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  padding: 20px;
}

.fileDrop:hover .fileVisual {
  border-color: var(--accent);
  background: transparent;
}

.filePreview {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, var(--text-muted) 0 4px, transparent 5px),
    var(--bg);
}

.fileVisual strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}

.fileVisual small,
.toggleLine small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
}

.toggleLine {
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  padding: 12px;
}

.toggleLine strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}

.toggleLine input {
  accent-color: var(--accent);
}

#animationSelect {
  width: auto;
  min-width: 150px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-secondary);
}

.desktopStage {
  min-height: 240px;
  border: 0.5px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
}

.desktopStage::before,
.stageWindow {
  display: none;
}

#petCanvas {
  width: min(300px, 64%);
}

.basePreview {
  border: 0.5px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: none;
}

.assetLinks a,
.petActions a,
.petActions button {
  min-height: 30px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.progressList {
  gap: 8px;
}

.progressList li,
.progressList .progressStep {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 44px;
  align-items: center;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 400;
}

.progressList .progressCircle,
.progressList li span.progressCircle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
}

.progressList .isDone .progressCircle {
  border-color: var(--accent-light);
  background: var(--accent-light);
  color: var(--accent);
}

.progressList .isActive .progressCircle {
  border-color: var(--bg-dark);
  background: var(--bg-dark);
  color: var(--bg-card);
}

.progressList .isReview .progressCircle,
.progressList li.error span.progressCircle {
  border-color: var(--text-muted);
  background: var(--text-muted);
  color: var(--bg-card);
}

.progressList .emptyState {
  display: block;
  color: var(--text-muted);
}

.progressCopy strong {
  color: var(--text-primary);
  font-weight: 500;
}

.progressCopy summary {
  color: var(--text-secondary);
  font-weight: 400;
}

.progressCopy pre {
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.libraryToolbar {
  margin-bottom: 16px;
  padding: 0 48px;
  border: 0;
  background: transparent;
}

.libraryToolbar strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.petGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0 48px 64px;
}

.libraryEmptyWarm {
  grid-column: 1 / -1;
  min-height: 360px;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: none;
}

.libraryEmptyWarm strong {
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.emptyPetIllustration {
  background: var(--bg);
  box-shadow: inset 0 0 0 0.5px var(--border);
}

.emptyPetIllustration svg {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  fill: var(--accent);
  opacity: 0.88;
}

.petCard {
  display: block;
  padding: 0;
}

.petCardButton {
  display: block;
}

.petThumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 160px;
  border: 0;
  border-bottom: 0.5px solid var(--border);
  border-radius: 0;
  background: var(--bg);
}

.petThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.petMeta {
  display: block;
  padding: 12px 14px;
}

.petMeta strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.petMeta span,
.petMeta small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.petActions {
  padding: 0 14px 14px;
}

.installGrid {
  display: block;
  padding: 0 48px 64px;
}

.installPanel {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.installPanel .sectionHeader {
  display: none;
}

.releaseGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 32px;
}

.releaseCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-template-columns: none;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: none;
  padding: 24px;
}

.releaseCardMain {
  grid-row: 1 / span 2;
  min-height: 320px;
  align-content: start;
  background: var(--bg-dark);
  color: var(--bg-card);
  padding: 32px;
}

.releaseCardSmall {
  min-height: 0;
}

.releaseCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.releaseCard strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.releaseCardMain strong {
  color: var(--bg-card);
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.releaseCard span,
.releaseCard p {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.releaseCardMain span,
.releaseCardMain p {
  color: rgba(250, 247, 242, 0.62);
}

.releaseCard p {
  margin: 12px 0 18px;
}

.releaseState {
  grid-column: auto;
  grid-row: auto;
  align-self: flex-start;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 400;
}

.releaseCardMain .releaseState {
  border-color: rgba(250, 247, 242, 0.2);
  color: rgba(250, 247, 242, 0.48);
}

.releaseState.missing {
  color: var(--text-muted);
}

.releaseNotify {
  display: flex;
  grid-column: auto;
  gap: 8px;
  margin-top: 0;
}

.releaseNotify input {
  min-height: 38px;
  border-radius: 20px;
  font-size: 13px;
}

.releaseCardMain .releaseNotify {
  display: grid;
  margin-top: 28px;
}

.releaseCardMain .releaseNotify input {
  border-color: rgba(250, 247, 242, 0.2);
  background: rgba(250, 247, 242, 0.08);
  color: var(--bg-card);
}

.releaseCardMain .releaseNotify input::placeholder {
  color: rgba(250, 247, 242, 0.42);
}

.releaseCardMain .releaseNotify button {
  background: var(--accent);
  color: #fff;
}

.releaseNotify button {
  white-space: nowrap;
  padding-inline: 16px;
}

.installNotes {
  max-width: 1100px;
  margin: 0 auto;
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  padding: 28px;
  box-shadow: none;
}

.installNotes strong {
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
}

.installNotes ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.installNotes li {
  position: relative;
  min-height: 52px;
  padding: 4px 0 20px 48px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  counter-increment: install-step;
}

.installNotes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 0;
  width: 0.5px;
  background: var(--border);
}

.installNotes li::before {
  content: counter(install-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.pricingGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0 48px 64px;
}

.priceCard {
  min-height: 0;
  padding: 28px;
}

.priceCard.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.priceCard > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

.priceCard p,
.priceCard ul {
  color: var(--text-secondary);
  font-weight: 400;
}

.priceCard li::before {
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 1040px) {
  .topbar {
    grid-template-columns: 1fr auto;
    padding: 14px 24px;
  }

  .caseGrid,
  .petGrid,
  .flowRail,
  .pricingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studioGrid,
  .releaseGrid {
    grid-template-columns: 1fr;
  }

  .releaseCardMain {
    grid-row: auto;
  }

  .flowRail article::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .topbar {
    padding: 12px 16px;
  }

  .hero {
    padding: 56px 20px 44px;
  }

  .caseGallery,
  .storyBand,
  .pageIntro,
  .studioGrid,
  .petGrid,
  .installGrid,
  .pricingGrid,
  .libraryToolbar {
    padding-left: 20px;
    padding-right: 20px;
  }

  .caseGrid,
  .petGrid,
  .flowRail,
  .pricingGrid {
    grid-template-columns: 1fr;
  }

  .flowHeader {
    display: grid;
  }

  .flowHeader p {
    max-width: none;
    text-align: left;
  }

  .previewPanel .sectionHeader,
  .releaseNotify {
    display: grid;
  }

  .desktopStage {
    min-height: 260px;
  }
}

/* studio-progress-fix.css equivalent: stable progress states and preview title. */
.preview-status-title {
  color: var(--accent) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 28px !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.preview-status-title.pending {
  color: var(--text-muted) !important;
}

.progressList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progressList .progress-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 46px;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px 14px;
  color: var(--text-secondary);
}

.progressList .progress-item .progressCircle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.progressList .progress-item[data-status="done"] .progressCircle {
  border-color: var(--accent-light);
  background: var(--accent-light);
  color: var(--accent);
}

.progressList .progress-item[data-status="active"] .progressCircle {
  border-color: var(--bg-dark);
  background: var(--bg-dark);
  color: var(--bg-card);
}

.progressList .progress-item[data-status="error"] {
  border-color: rgba(163, 58, 58, 0.38);
  background: #fff5f1;
  color: #7b2d2d;
}

.progressList .progress-item[data-status="error"] .progressCircle {
  border-color: #a33a3a;
  background: #a33a3a;
  color: var(--bg-card);
}

.progressList .progress-item[data-status="pending"] .progressCircle {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

.progressList .progress-item[data-status="done"] {
  color: var(--text-muted);
}

.progressList .progress-item[data-status="active"] {
  border-color: rgba(44, 32, 22, 0.28);
  color: var(--text-primary);
}

.progressList .progressCopy strong {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
}

.progressList .progressCopy details {
  margin-top: 4px;
}

.progressList .progressCopy summary {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
}

.progressList .progressCopy pre {
  max-height: 130px;
  overflow: auto;
  margin: 8px 0 0;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 9px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* Keep the generating state readable without disturbing prototype/tier layouts. */
.previewPanel .studioStateGenerating {
  align-content: start;
}

.previewPanel .studioStateGenerating .sectionHeader {
  align-items: start;
}

.previewPanel .studioStateGenerating .sectionHeader > div {
  min-width: 0;
}

.previewPanel .studioStateGenerating #previewTitle {
  max-width: 14ch;
  line-height: 1.14;
}

.previewPanel .studioStateGenerating #animationSelect {
  width: 220px;
  min-width: 220px;
  justify-self: end;
}

.previewPanel .studioStateGenerating .desktopStage {
  min-height: 420px;
  padding: 20px 20px 24px;
}

.previewPanel .studioStateGenerating .basePreview {
  position: absolute;
  inset: auto;
  width: min(320px, 72%);
  max-height: 300px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.previewPanel .studioStateGenerating #petCanvas {
  width: min(320px, 72%);
}

.previewPanel .studioStateGenerating .assetLinks {
  min-height: 0;
  margin-top: 14px;
}

.previewPanel .studioStateGenerating .progressList {
  margin-top: 14px;
}

.previewPanel .studioStateGenerating .progressList .progress-item {
  align-items: start;
}

.previewPanel .studioStateGenerating .progressCopy {
  min-height: 24px;
}

.previewPanel .studioStateGenerating .progressCopy pre {
  max-height: 160px;
}

@media (max-width: 700px) {
  .previewPanel .studioStateGenerating .sectionHeader {
    display: grid;
    grid-template-columns: 1fr;
  }

  .previewPanel .studioStateGenerating #animationSelect {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .previewPanel .studioStateGenerating .desktopStage {
    min-height: 320px;
  }
}

/* Visual system normalization. */
.topbar,
.navbar,
header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
  background: rgba(255,252,248,0.88);
  backdrop-filter: blur(12px);
}

.studioGrid {
  display: grid;
  grid-template-columns: 340px minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
}

.studioPanel,
.previewPanel,
.caseCard,
.priceCard,
.releaseCard,
.libraryToolbar,
.petCard,
.prototypeCard,
.prototypePreview,
.tierCard,
.successPanel,
.card {
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.2s;
}

.caseCard:hover,
.priceCard:hover,
.releaseCard:hover,
.petCard:hover,
.prototypeCard:hover,
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.topButton,
.primaryButton,
.secondaryButton,
.releaseButton,
.btn,
.btn-primary,
.btn-secondary {
  min-height: 40px;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-weight: 500;
}

.primaryButton,
.btn-primary {
  border: 0;
  background: #2C2825;
  color: #fff;
}

.secondaryButton,
.btn-secondary {
  border: 1.5px solid #2C2825;
  background: transparent;
  color: #2C2825;
}

.primaryButton:hover,
.btn-primary:hover {
  opacity: 0.85;
}

.petGrid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.petCard,
.pet-card {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
}

.petThumb,
.pet-card img,
.pet-card .image {
  display: grid;
  place-items: center;
  height: 160px;
  background: #00FFFF;
  padding: 16px;
}

.petThumb img,
.pet-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.petMeta,
.pet-card .info {
  padding: 12px 14px;
  background: #fff;
}

@media (max-width: 768px) {
  .studioGrid {
    grid-template-columns: 1fr;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  padding: 20px;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: none;
  color: #888;
  cursor: pointer;
  font-size: 18px;
}

body.modal-open {
  overflow: hidden;
}

.petCard,
.petCardButton {
  cursor: pointer;
}

#modal-pet-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: #00FFFF;
  padding: 16px;
}

#modal-pet-preview:empty {
  display: none;
}

#modal-pet-preview img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  image-rendering: pixelated;
}

#modal-pet-info h2 {
  margin: 0 34px 8px 0;
  color: var(--text-primary);
  font-family: var(--font-hero);
  font-size: 30px;
  font-weight: 400;
}

#modal-pet-info p {
  margin: 0 0 16px;
  color: var(--text-secondary);
}

#modal-pet-info dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

#modal-pet-info dl div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
}

#modal-pet-info dt {
  color: var(--text-muted);
}

#modal-pet-info dd {
  margin: 0;
  color: var(--text-primary);
}

#modal-pet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* Library thumbnail guard: asset background is preserved but framed softly. */
.gallery-card-img {
  position: relative;
  background: #FAF7F2 !important;
  overflow: hidden;
}

.gallery-card-img img {
  mix-blend-mode: normal;
  background: #FAF7F2;
}

.petHoverMask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(44, 32, 22, 0.42);
  color: #FAF7F2;
  opacity: 0;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.petCard:hover .petHoverMask,
.petCard:focus-within .petHoverMask {
  opacity: 1;
}

.notFoundPage {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: var(--bg);
  padding: 32px;
}

.notFoundCard {
  display: grid;
  justify-items: center;
  max-width: 460px;
  border: 0.5px solid var(--border);
  border-radius: 24px;
  background: var(--bg-card);
  padding: 48px 32px;
  text-align: center;
}

.notFoundPaw {
  position: relative;
  width: 82px;
  height: 82px;
  margin-bottom: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 58%, var(--accent) 0 13px, transparent 14px),
    radial-gradient(circle at 30% 34%, var(--accent) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 26%, var(--accent) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 34%, var(--accent) 0 7px, transparent 8px),
    var(--bg);
  box-shadow: inset 0 0 0 0.5px var(--border);
}

.notFoundCard h1 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.15;
}

.notFoundCard p {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.checkoutIntro h1,
.successHeader h1 {
  font-style: italic;
}

.prototypeFlow,
.tierGrid,
.successPanel {
  max-width: 1100px;
  margin: 0 auto;
}

.prototypeFlow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 0 48px 64px;
}

.prototypeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.prototypeCard,
.prototypePreview,
.tierCard,
.successPanel,
.paymentDialog {
  border: 0.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}

.prototypeCard {
  display: grid;
  gap: 14px;
  align-content: start;
  border-width: 1px;
  padding: 14px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms ease;
}

.prototypeCard:hover,
.prototypeCard.isSelected {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.prototypeCard.isSelected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 120, 58, 0.32);
}

.prototypeImageWrap {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg);
}

.prototypeImageWrap img,
.prototypeStage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.prototypeVariant0 img,
.prototypeStage img.prototypeVariant0 {
  transform: translateX(-2px) rotate(-1deg);
}

.prototypeVariant1 img,
.prototypeStage img.prototypeVariant1 {
  transform: translateY(-3px) scale(1.02);
}

.prototypeVariant2 img,
.prototypeStage img.prototypeVariant2 {
  transform: translateX(3px) rotate(1.5deg) scale(0.98);
}

.prototypeCard strong {
  font-size: 15px;
  font-weight: 500;
}

.prototypePreview {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 24px;
}

.prototypePreview .sectionHeader p,
.prototypeHint {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.prototypeStage {
  display: grid;
  place-items: center;
  min-height: 230px;
  border: 0.5px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}

.prototypeStage img {
  animation: prototypeIdlePreview 1.8s ease-in-out infinite alternate;
}

.tierGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0 48px 64px;
}

.tierCard {
  position: relative;
  display: grid;
  gap: 22px;
  align-content: space-between;
  min-height: 360px;
  padding: 28px;
}

.tierCard.recommended {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.tierAccentButton {
  border-color: var(--accent);
  color: var(--accent);
}

.recommendBadge {
  position: absolute;
  top: 18px;
  right: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  padding: 5px 11px;
  font-size: 12px;
}

.tierEyebrow {
  color: var(--accent);
  font-size: 12px;
}

.tierCard h2 {
  margin: 8px 0 10px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
}

.tierCard p,
.tierCard li,
.successHeader p,
.upgradeBox p,
.paymentDialog p {
  color: var(--text-secondary);
  line-height: 1.65;
}

.tierCard ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tierCard li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(44, 32, 22, 0.28);
  padding: 24px;
}

.modalOverlay[hidden] {
  display: none;
}

.paymentDialog {
  width: min(430px, 100%);
  padding: 28px;
}

.paymentDialog h2 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.paymentActions,
.successActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.paymentActions {
  margin-top: 22px;
}

.successPanel {
  display: grid;
  gap: 22px;
  max-width: 720px;
  padding: 36px;
}

.successHeader span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
}

.petCodeBox {
  display: grid;
  gap: 10px;
}

.petCodeDisplay {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px solid rgba(196, 120, 58, 0.42);
  border-radius: 18px;
  background: #fff8ef;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: 0;
}

.petCodeBox > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.petCodeBox input {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.successNotice {
  border: 0.5px solid rgba(196, 120, 58, 0.34);
  border-radius: 16px;
  background: var(--accent-light);
  color: var(--accent);
  padding: 16px;
  line-height: 1.6;
}

.upgradeBox {
  border-top: 0.5px solid var(--border);
  padding-top: 20px;
}

.clientCodeLine {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
  border-top: 0.5px solid var(--border);
  padding-top: 18px;
  color: var(--text-secondary);
  font-size: 14px;
}

.clientCodeLine input {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
}

.upgradeBox strong {
  color: var(--text-primary);
  font-weight: 500;
}

body.hasModal {
  overflow: hidden;
}

@keyframes prototypeIdlePreview {
  from {
    translate: -4px 0;
  }

  to {
    translate: 4px 0;
  }
}

@media (max-width: 1040px) {
  .prototypeFlow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .prototypeFlow,
  .tierGrid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .prototypeGrid,
  .tierGrid {
    grid-template-columns: 1fr;
  }

  .petCodeBox > span {
    grid-template-columns: 1fr;
  }

  .clientCodeLine {
    grid-template-columns: 1fr;
  }
}

/* Studio layout stabilization: scoped overrides for the workbench only. */
:root {
  --studio-left: 360px;
  --studio-gap: 32px;
  --radius-card: 14px;
  --transition-panel: 0.2s ease;
}

#page-studio .pageIntro {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

#studio-inner,
.studioGrid {
  display: grid;
  grid-template-columns: var(--studio-left) minmax(0, 1fr);
  gap: var(--studio-gap);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

#studio-inner .studioPanel,
#studio-inner .previewPanel {
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

#studio-inner .studioPanel {
  padding: 24px;
}

#studio-inner .previewPanel {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  min-height: 320px;
  overflow: hidden;
  padding: 24px;
  transition: all var(--transition-panel);
}

#studio-inner .studio-phase,
#studio-inner .studioState {
  width: 100%;
  min-width: 0;
  opacity: 1;
  transition: opacity var(--transition-panel);
}

#studio-inner .studioState[style*="display: none"] {
  opacity: 0;
}

#studio-inner .studioStateEmpty {
  display: grid;
  min-height: 272px;
  place-content: center;
  color: #bbb;
  text-align: center;
  padding: 40px;
}

#studio-inner .studioStateEmpty .studioStateTitle {
  color: #2C2825;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}

#studio-inner .studioStateEmpty p {
  max-width: 46ch;
  margin: 10px auto 0;
  color: #888;
  font-size: 14px;
  line-height: 1.6;
}

#studio-inner .desktopStage,
#studio-inner .prototypeStage {
  min-height: 320px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-card);
  background: #F0FFFE;
  overflow: hidden;
}

#studio-inner .basePreview,
#studio-inner .prototypeStage img,
#studio-inner .studioTierHeader img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  background: #F0FFFE;
}

#studio-inner .sectionHeader {
  gap: 16px;
  margin-bottom: 18px;
}

#studio-inner .prototypeFlow,
#studio-inner .studioPrototypeFlow {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0;
}

#studio-inner .prototypeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#studio-inner .studioTierGrid,
#studio-inner .tierGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}

#studio-inner .successPanel,
#studio-inner .prototypePreview,
#studio-inner .tierCard,
#studio-inner .prototypeCard {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

#studio-inner .progressList {
  margin: 16px 0 0;
  padding: 0;
  gap: 8px;
}

#studio-inner .progressList .progress-item {
  border-radius: 10px;
  padding: 9px 12px;
  color: #888;
}

#studio-inner .progressCopy,
#studio-inner .progressCopy strong,
#studio-inner .progressCopy summary {
  color: inherit;
  font-size: 13px;
}

#studio-inner .progressList .progress-item[data-status="active"] {
  color: #2C2825;
  font-weight: 500;
}

#studio-inner .progressList .progress-item[data-status="done"] {
  color: #8D8172;
}

@media (max-width: 768px) {
  #page-studio .pageIntro {
    padding: 32px 20px 0;
  }

  #studio-inner,
  .studioGrid {
    grid-template-columns: 1fr;
    max-width: 640px;
    padding: 24px 20px 56px;
  }

  #studio-inner .prototypeGrid,
  #studio-inner .studioTierGrid,
  #studio-inner .tierGrid {
    grid-template-columns: 1fr;
  }
}

/* Surgical studio state layout: scoped to #page-studio only. */
#page-studio #studio-inner {
  position: relative;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}

#page-studio #studio-inner .previewPanel {
  position: relative;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
}

#page-studio #studio-inner .studioState {
  flex: 1 1 auto;
  min-height: 372px;
}

#page-studio #studio-inner .studioStateEmpty,
#page-studio #studio-inner .studioStateGenerating,
#page-studio #studio-inner .studioStatePrototype,
#page-studio #studio-inner .studioStateTier,
#page-studio #studio-inner .studioStateDone {
  display: flex;
  min-height: 372px;
  flex-direction: column;
}

#page-studio #studio-inner .studioState[style*="display: none"] {
  display: none !important;
}

#page-studio #studio-inner .studioStatePrototype {
  gap: 18px;
}

#page-studio #studio-inner .studioStatePrototype .studioStateTitle {
  margin: 0;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
}

#page-studio #studio-inner .studioPrototypeFlow,
#page-studio #studio-inner .prototypeFlow {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

#page-studio #studio-inner .studioPrototypeChooser {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

#page-studio #studio-inner .prototypeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#page-studio #studio-inner .prototypeCard {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1.5px solid #e0d8cc;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  box-shadow: none;
  transform: none;
}

#page-studio #studio-inner .prototypeCard:hover {
  border-color: #2c2118;
  box-shadow: none;
  transform: none;
}

#page-studio #studio-inner .prototypeCard.isSelected {
  border: 2px solid #2c2118;
  box-shadow: none;
}

#page-studio #studio-inner .prototypeCard.isSelected::after {
  content: "鉁?;
  position: absolute;
  top: 6px;
  right: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #2c2118;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

#page-studio #studio-inner .prototypeImageWrap {
  aspect-ratio: 1;
  border-radius: 10px;
  background: #E8FFFE;
}

#page-studio #studio-inner .prototypeImageWrap img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

#page-studio #studio-inner .prototypeCard strong {
  overflow: hidden;
  color: #2c2118;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-studio #studio-inner .prototypePreview {
  display: none !important;
}

#page-studio #studio-inner #confirmPrototypeButton {
  align-self: flex-end;
  width: auto;
  min-width: 150px;
}

#page-studio #studio-inner .studioStateTier {
  overflow: hidden;
  border: 1px solid #e0d8cc;
  border-radius: 14px;
  background: #fff;
}

#page-studio #studio-inner .studioTierHeader {
  display: flex;
  min-height: 156px;
  flex: 0 0 40%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #E8FFFE;
  padding: 16px;
  text-align: center;
}

#page-studio #studio-inner .studioTierHeader img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #E8FFFE;
  object-fit: contain;
  padding: 0;
}

#page-studio #studio-inner .studioTierEyebrow {
  margin: 0 0 4px;
  color: #8d8172;
  font-size: 12px;
}

#page-studio #studio-inner .studioTierName {
  margin: 0;
  color: #2c2118;
  font-size: 30px;
  line-height: 1.05;
}

#page-studio #studio-inner .studioTierGrid,
#page-studio #studio-inner .tierGrid {
  display: grid;
  flex: 1 1 60%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  background: #fff;
}

#page-studio #studio-inner .tierCard {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid #e0d8cc;
  border-radius: 10px;
  padding: 14px;
  box-shadow: none;
  cursor: pointer;
}

#page-studio #studio-inner .tierCard:hover,
#page-studio #studio-inner .tierCard.recommended {
  border-color: #2c2118;
  background: #faf8f4;
  box-shadow: none;
  transform: none;
}

#page-studio #studio-inner .tierCard h2 {
  margin: 6px 0;
  font-family: "Lora", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
}

#page-studio #studio-inner .tierCard ul {
  gap: 7px;
}

#page-studio #studio-inner .tierCard li {
  font-size: 12px;
  line-height: 1.45;
}

#page-studio #studio-inner .tierCard .secondaryButton {
  margin-top: auto;
  padding: 8px 12px;
}

#page-studio #studio-inner .tierFootnote {
  margin: 0;
  padding: 0 16px 16px;
  background: #fff;
  font-size: 12px;
}

#page-studio #studio-inner .studioStateGenerating {
  gap: 14px;
  padding: 0;
}

#page-studio #studio-inner .studioStateGenerating .sectionHeader {
  margin: 0;
}

#page-studio #studio-inner .studioStateGenerating #previewTitle {
  font-size: 14px;
  font-weight: 500;
}

#page-studio #studio-inner .studioStateGenerating .desktopStage {
  min-height: 190px;
  flex: 0 0 190px;
}

#page-studio #studio-inner .studioStateGenerating .progressList {
  margin: 0;
}

#page-studio #studio-inner .studioStateGenerating .assetLinks {
  margin-top: auto;
}

#page-studio #studio-inner .modalOverlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(44, 32, 22, 0.18);
  padding: 20px;
}

#page-studio #studio-inner .modalOverlay[hidden] {
  display: none !important;
}

#page-studio #studio-inner .paymentDialog {
  width: min(360px, 100%);
  border-radius: 14px;
  padding: 24px;
}

#page-studio #studio-inner .paymentDialog h2 {
  font-size: 24px;
  line-height: 1.15;
}

body.hasModal:has(#page-studio #paymentModal:not([hidden])) {
  overflow: auto;
}

@media (max-width: 768px) {
  #page-studio #studio-inner {
    grid-template-columns: 1fr;
  }

  #page-studio #studio-inner .previewPanel {
    min-height: 420px;
  }

  #page-studio #studio-inner .prototypeGrid,
  #page-studio #studio-inner .studioTierGrid,
  #page-studio #studio-inner .tierGrid {
    grid-template-columns: 1fr;
  }
}

/* Install and pricing pages: warm card system, scoped only to these pages. */
#page-install,
#page-pricing {
  background: #f5f0e8;
}

#page-install .installGrid {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 32px;
}

#page-install .installPanel {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#page-install .installPanel .sectionHeader {
  display: none;
}

#page-install .releaseGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: none;
  margin: 0;
}

#page-install .releaseCard,
#page-install .releaseCardMain,
#page-install .releaseCardSmall {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr) auto;
  min-height: 0;
  align-items: center;
  gap: 16px;
  border: 1px solid #e0d8cc;
  border-radius: 14px;
  background: #fff;
  color: #2c2118;
  box-shadow: 0 2px 10px rgba(44, 33, 24, .07);
  padding: 20px 24px;
}

#page-install .releaseCardHeader {
  display: contents;
}

#page-install .releaseCardHeader > div {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 100px;
  gap: 3px;
}

#page-install .releaseCard strong,
#page-install .releaseCardMain strong {
  color: #2c2118;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

#page-install .releaseCard span,
#page-install .releaseCard p,
#page-install .releaseCardMain span,
#page-install .releaseCardMain p {
  color: #7a6b5c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

#page-install .releaseCard p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

#page-install .releaseState {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  border: 0;
  border-radius: 0;
  color: #b0a090;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

#page-install .releaseButton,
#page-install .releaseNotify button {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  border: 0;
  border-radius: 8px;
  background: #2c2118;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
}

#page-install .releaseNotify {
  display: flex;
  grid-column: 2 / 4;
  gap: 8px;
  margin: 0;
}

#page-install .releaseNotify input {
  min-height: 36px;
  border: 1px solid #e0d8cc;
  border-radius: 8px;
  background: #faf8f4;
  color: #2c2118;
  font-size: 12px;
}

#page-install .releaseNotify input::placeholder {
  color: #b0a090;
}

#page-install .installNotes {
  max-width: none;
  margin: 16px 0 0;
  border: 1px solid #e0d8cc;
  border-radius: 10px;
  background: #faf8f4;
  box-shadow: none;
  color: #7a6b5c;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.8;
}

#page-install .installNotes strong {
  margin-bottom: 8px;
  color: #2c2118;
  font-size: 13px;
  font-weight: 500;
}

#page-install .installNotes ol {
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #7a6b5c;
  list-style: decimal;
}

#page-install .installNotes li {
  min-height: 0;
  padding: 0;
  color: #7a6b5c;
  font-size: 13px;
  line-height: 1.8;
}

#page-install .installNotes li::before,
#page-install .installNotes li::after {
  content: none;
}

#page-pricing .pricingGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 24px;
  max-width: 1140px;
  margin: 40px auto 0;
  padding: 0 32px 64px;
}

#page-pricing .priceCard {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  border: 1px solid #e0d8cc;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf9 0%, #fffaf2 100%);
  box-shadow: 0 14px 36px rgba(44, 33, 24, .08);
  padding: 28px 24px 24px;
}

#page-pricing .priceCard:hover {
  box-shadow: 0 18px 44px rgba(44, 33, 24, .1);
  transform: translateY(-2px);
}

#page-pricing .priceCard.featured {
  border-color: #d7b489;
  background: linear-gradient(180deg, #fffaf2 0%, #fff4e7 100%);
  box-shadow: 0 18px 44px rgba(196, 120, 58, .16);
}

#page-pricing .priceCard > span:not(.recommended-badge) {
  margin-bottom: 10px;
  color: #9c7650;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#page-pricing .priceCard h2 {
  margin: 0 0 10px;
  color: #2c2118;
  font-family: "Lora", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

#page-pricing .planPrice {
  margin-bottom: 14px;
  color: #2c2118;
  font-family: "Lora", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
}

#page-pricing .priceCard p {
  /* 鎻忚堪鍘嬫垚 2 琛屽悗锛宮in-height 鎸?14*1.8*2 鈮?50px 閿佸簳锛屼繚璇?3 寮犲崱鐨勫垎鍓茬嚎瀵归綈銆?
     bullet 鏁?4 / 4 / 4 宸插榻? ul 涓嶅啀 flex 鎾戦珮, 鐢?.planButton margin-top: auto 鎶婃寜閽《鍒板簳銆?*/
  min-height: 50px;
  margin: 0 0 18px;
  color: #6f614f;
  font-size: 14px;
  line-height: 1.8;
}

#page-pricing .priceCard ul {
  flex: 0 0 auto;
  margin: 0 0 20px;
  border-top: 1px solid #e0d8cc;
  padding: 18px 0 0;
  color: #7a6b5c;
  list-style: none;
}

#page-pricing .priceCard li {
  color: #7a6b5c;
  font-size: 13px;
  line-height: 1.9;
  padding-left: 18px;
  position: relative;
}

#page-pricing .priceCard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c4783a;
}

#page-pricing .planButton {
  width: 100%;
  margin-top: auto;
  border: 0;
  border-radius: 12px;
  background: #2c2118;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 14px;
}

#page-pricing .recommended-badge {
  position: absolute;
  top: 0;
  right: 18px;
  border-radius: 0 0 10px 10px;
  background: #d4622a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
}

@media (max-width: 900px) {
  #page-pricing .pricingGrid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 720px) {
  #page-install .installGrid {
    padding: 32px 20px;
  }

  #page-install .releaseCard,
  #page-install .releaseCardMain,
  #page-install .releaseCardSmall {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #page-install .releaseButton,
  #page-install .releaseNotify button {
    justify-self: start;
  }

  #page-install .releaseNotify {
    grid-column: auto;
    flex-direction: column;
  }
}


/* ================================================================
   DESIGN OPTIMIZATION 鈥?2026-05-10
   Scoped refinements: #page-studio 路 #page-install 路 #page-pricing
   ================================================================ */

/* 鈹€鈹€ 0. Fix teal (#E8FFFE / #F0FFFE) 鈫?warm throughout studio 鈹€鈹€ */
#studio-inner .desktopStage,
#studio-inner .prototypeStage,
#studio-inner .prototypeImageWrap,
#studio-inner .studioTierHeader {
  background: #f5efe6 !important;
}

#studio-inner .basePreview,
#studio-inner .prototypeStage img,
#studio-inner .studioTierHeader img {
  background: #f5efe6 !important;
}

#pet-modal-img-area {
  background: #f5efe6 !important;
}

/* 鈹€鈹€ 1. Studio: page intro 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#page-studio .pageIntro p {
  color: #7a6e5a;
  font-size: 14px;
  line-height: 1.7;
}

/* 鈹€鈹€ 2. Studio: empty state illustration 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#page-studio #studio-inner .studioStateEmpty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 36px 24px;
}

.studioEmptyIllo {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border: 0.5px solid #e0d8cc;
  border-radius: 22px;
  background: #f5efe6;
  flex-shrink: 0;
}

.studioEmptyPetShape {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  width: 42px;
  height: 46px;
  border: 2px solid #2c2016;
  border-radius: 44% 44% 40% 40%;
  background:
    radial-gradient(circle at 34% 42%, #c4783a 0 3px, transparent 4px),
    radial-gradient(circle at 66% 42%, #c4783a 0 3px, transparent 4px),
    linear-gradient(180deg, #3d3525 0 56%, #faf7f2 57% 100%);
  animation: emptyPetBreathe 3s ease-in-out infinite;
}

.studioEmptyPetShape::before,
.studioEmptyPetShape::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 13px;
  height: 15px;
  border: 2px solid #2c2016;
  background: #3d3525;
}

.studioEmptyPetShape::before {
  left: 5px;
  border-radius: 70% 30% 50% 40%;
  transform: rotate(-22deg);
}

.studioEmptyPetShape::after {
  right: 5px;
  border-radius: 30% 70% 40% 50%;
  transform: rotate(22deg);
}

@keyframes emptyPetBreathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-5px); }
}

#page-studio #studio-inner .studioStateEmpty .studioStateTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #2c2016 !important;
  margin: 0 0 6px !important;
}

#page-studio #studio-inner .studioStateEmpty p {
  max-width: 220px;
  color: #7a6e5a;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.studioEmptyTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}

.studioEmptyTags span {
  border: 0.5px solid #e0d8cc;
  border-radius: 6px;
  background: #faf7f0;
  color: #b8a88a;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 400;
}

/* 鈹€鈹€ 3. Studio: generating state 鈥?readable preview title 鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#page-studio #studio-inner .studioStateGenerating #previewTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #c4783a !important;
  line-height: 1.3;
}

#page-studio #studio-inner .studioStateGenerating #previewTitle.pending {
  color: #b8a88a !important;
}

/* 鈹€鈹€ 4. Studio: tier header 鈥?warm tone 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#page-studio #studio-inner .studioTierHeader {
  background: #f5efe6 !important;
}

/* 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
   INSTALL PAGE
   鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */

#page-install {
  background: #f2ede4;
}

/* Hero two-column */
.installHero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 48px 40px;
}

.installEyebrow {
  display: block;
  color: #b8a88a;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.installHeroText h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
  color: #2c2016;
  line-height: 1.2;
  margin: 0 0 14px;
}

.installHeroText p {
  color: #7a6e5a;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 380px;
}

/* CSS desktop mock illustration */
.installMock {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0.5px solid #c8bfad;
  border-radius: 18px;
  overflow: hidden;
  background: #2c2016;
  box-shadow: 0 24px 52px rgba(44, 32, 22, 0.18), 0 4px 12px rgba(44, 32, 22, 0.1);
}

.installMockTitlebar {
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
}

.installMockTitlebar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.installMockTitlebar span:nth-child(1) { background: rgba(255, 95, 87, 0.6); }
.installMockTitlebar span:nth-child(2) { background: rgba(255, 189, 46, 0.6); }
.installMockTitlebar span:nth-child(3) { background: rgba(39, 201, 63, 0.6); }

.installMockBody {
  display: grid;
  grid-template-columns: 50px 1fr;
  height: calc(100% - 28px);
}

.installMockSide {
  background: rgba(255, 255, 255, 0.04);
  border-right: 0.5px solid rgba(255, 255, 255, 0.06);
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.installMockSide::before,
.installMockSide::after {
  content: '';
  display: block;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
}

.installMockSide::after {
  height: 24px;
  background: rgba(196, 120, 58, 0.32);
}

.installMockCanvas {
  position: relative;
  background: linear-gradient(155deg, #3a3020 0%, #261e0f 100%);
}

.installMockShelf {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.1);
}

.installMockPetFigure {
  position: absolute;
  left: 50%;
  bottom: calc(18% + 5px);
  transform: translateX(-50%);
  width: 30px;
  height: 34px;
  border: 1.5px solid rgba(250, 247, 242, 0.5);
  border-radius: 44% 44% 40% 40%;
  background:
    radial-gradient(circle at 34% 42%, rgba(196, 120, 58, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 42%, rgba(196, 120, 58, 0.9) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(61, 53, 37, 0.95) 0 56%, rgba(250, 247, 242, 0.2) 57% 100%);
  animation: mockPetFloat 3.2s ease-in-out infinite;
}

.installMockPetFigure::before,
.installMockPetFigure::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 11px;
  height: 12px;
  border: 1.5px solid rgba(250, 247, 242, 0.45);
  background: rgba(61, 53, 37, 0.9);
}

.installMockPetFigure::before {
  left: 3px;
  border-radius: 70% 30% 50% 40%;
  transform: rotate(-22deg);
}

.installMockPetFigure::after {
  right: 3px;
  border-radius: 30% 70% 40% 50%;
  transform: rotate(22deg);
}

@keyframes mockPetFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-4px); }
}

/* Downloads section */
.installDownloads {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px 32px;
}

/* Override old single-column release grid */
#page-install .installDownloads .releaseGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Reset old 3-col card layout, use vertical flex card instead */
#page-install .installDownloads .releaseCard,
#page-install .installDownloads .releaseCardMain,
#page-install .installDownloads .releaseCardSmall {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: flex-start !important;
  gap: 10px !important;
  border: 0.5px solid #e0d8cc !important;
  border-radius: 16px !important;
  background: #faf7f0 !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(44, 32, 22, 0.06) !important;
  min-height: 170px;
}

#page-install .installDownloads .releaseCardMain {
  background: #2c2016 !important;
  border-color: #2c2016 !important;
}

#page-install .installDownloads .releaseCardHeader {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

#page-install .installDownloads .releaseCardHeader > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-column: auto !important;
  grid-row: auto !important;
}

#page-install .installDownloads .releaseCard strong,
#page-install .installDownloads .releaseCardSmall strong {
  color: #2c2016 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
}

#page-install .installDownloads .releaseCardMain strong {
  color: #faf7f0 !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

#page-install .installDownloads .releaseCard span,
#page-install .installDownloads .releaseCardSmall span {
  color: #7a6e5a !important;
  font-size: 12px !important;
}

#page-install .installDownloads .releaseCardMain span {
  color: rgba(250, 247, 242, 0.5) !important;
}

#page-install .installDownloads .releaseState {
  display: inline-flex !important;
  align-self: flex-start;
  border: 0.5px solid #e0d8cc !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #b8a88a !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  white-space: nowrap;
}

#page-install .installDownloads .releaseCardMain .releaseState {
  border-color: rgba(250, 247, 242, 0.18) !important;
  color: rgba(250, 247, 242, 0.38) !important;
}

#page-install .installDownloads .releaseCard p,
#page-install .installDownloads .releaseCardSmall p {
  color: #7a6e5a !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 1;
}

#page-install .installDownloads .releaseCardMain p {
  color: rgba(250, 247, 242, 0.55) !important;
}

#page-install .installDownloads .releaseButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #2c2016 !important;
  color: #faf7f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 18px !important;
  text-decoration: none !important;
  cursor: pointer;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  transition: opacity 0.15s ease;
}

#page-install .installDownloads .releaseButton:hover {
  opacity: 0.82;
  transform: none !important;
}

#page-install .installDownloads .releaseCardMain .releaseButton {
  background: rgba(250, 247, 242, 0.12) !important;
  border: 0.5px solid rgba(250, 247, 242, 0.2) !important;
}

#page-install .installDownloads .releaseNotify {
  display: grid !important;
  gap: 8px !important;
  width: 100%;
  margin: 0 !important;
  grid-column: auto !important;
}

#page-install .installDownloads .releaseNotify input {
  min-height: 36px !important;
  border: 0.5px solid #e0d8cc !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #2c2016 !important;
  font-size: 13px !important;
  padding: 0 12px !important;
}

#page-install .installDownloads .releaseCardMain .releaseNotify input {
  border-color: rgba(250, 247, 242, 0.2) !important;
  background: rgba(250, 247, 242, 0.08) !important;
  color: #faf7f0 !important;
}

#page-install .installDownloads .releaseNotify input::placeholder {
  color: #b8a88a !important;
}

#page-install .installDownloads .releaseCardMain .releaseNotify input::placeholder {
  color: rgba(250, 247, 242, 0.35) !important;
}

#page-install .installDownloads .releaseNotify button {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #c4783a !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

#page-install .installDownloads .libraryEmpty {
  grid-column: 1 / -1;
  padding: 36px 24px;
  border: 0.5px dashed #e0d8cc;
  border-radius: 16px;
  background: #faf7f0;
  color: #7a6e5a;
  font-size: 14px;
  text-align: center;
  line-height: 1.65;
}

/* Install guide steps */
.installGuide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px 64px;
}

.installGuide h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #2c2016;
  margin: 0 0 24px;
}

.installGuideSteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.installGuideStep {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.installGuideNum {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0.5px solid #c4783a;
  border-radius: 50%;
  color: #c4783a;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 1px;
}

.installGuideStep strong {
  display: block;
  color: #2c2016;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.3;
}

.installGuideStep p {
  color: #7a6e5a;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
   PRICING PAGE
   鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */

/* Pricing intro 鈥?replaces old pageIntro centeredIntro */
.pricingIntro {
  text-align: center;
  padding: 48px 48px 0;
  max-width: 580px;
  margin: 0 auto;
}

.pricingEyebrow {
  display: block;
  color: #b8a88a;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pricingIntro h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 400;
  color: #2c2016;
  margin: 0 0 14px;
  line-height: 1.2;
}

.pricingIntro p {
  color: #7a6e5a;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* Trust bar */
.pricingTrust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0 48px 44px;
  color: #b8a88a;
  font-size: 12px;
}

/* Pricing grid top spacing now from pricingIntro, not pageIntro */
#page-pricing .pricingGrid {
  margin-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Recommended badge 鈥?more prominent */
#page-pricing .recommended-badge {
  position: absolute;
  top: -1px;
  right: 14px;
  border-radius: 0 0 8px 8px;
  background: #c4783a !important;
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Plan price 鈥?Lora serif display size */
#page-pricing .planPrice {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  color: #2c2016;
  margin: 6px 0 10px;
  line-height: 1;
}

/* planButton 鈥?properly styled */
#page-pricing .planButton {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  padding-top: 16px;
  border: 0.5px solid #2c2016 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #2c2016 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#page-pricing .planButton:hover {
  background: #2c2016 !important;
  color: #faf7f0 !important;
}

#page-pricing .priceCard.featured .planButton {
  border-color: #c4783a !important;
  background: #c4783a !important;
  color: #fff !important;
}

#page-pricing .priceCard.featured .planButton:hover {
  background: #b06c30 !important;
  border-color: #b06c30 !important;
}

/* Price cards 鈥?flex column so button sticks to bottom */
#page-pricing .priceCard {
  display: flex !important;
  flex-direction: column !important;
}

#page-pricing .priceCard ul {
  flex: 0 0 auto !important;
}

/* 鈹€鈹€ Responsive 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
@media (max-width: 1040px) {
  .installHero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 32px 32px;
  }

  .installGuideSteps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #page-install .installDownloads .releaseGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .installHero,
  .installDownloads,
  .installGuide {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricingIntro {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricingTrust {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 鈹€鈹€ Studio grid: equal-width columns, wider container 鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#page-studio #studio-inner,
#page-studio .studioGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  max-width: 1060px !important;
  gap: 28px !important;
}

/* Studio empty state: use available vertical space better */
#page-studio #studio-inner .studioStateEmpty {
  min-height: 440px !important;
  justify-content: center;
}


/* ================================================================
   STUDIO PROPORTION FIX v2 鈥?2026-05-10
   Revert to fixed-width form column; fix petCodeDisplay overflow.
   ================================================================ */

/* Form column fixed at 390px; preview takes remaining space */
#page-studio #studio-inner,
#page-studio .studioGrid {
  grid-template-columns: 390px minmax(0, 1fr) !important;
  max-width: 980px !important;
  gap: 24px !important;
}

/* petCodeDisplay: no word-wrap, sensible font size */
#page-studio .petCodeDisplay {
  font-size: clamp(22px, 3.8vw, 42px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 20px !important;
  letter-spacing: 0.04em !important;
}

/* Generating state: bigger canvas stage */
#page-studio #studio-inner .studioStateGenerating .desktopStage {
  min-height: 220px !important;
  flex: 0 0 220px !important;
}

/* Progress items: tighter vertical rhythm */
#page-studio #studio-inner .progressList .progress-item {
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* Prototype state: confirm button full-width, aligned bottom */
#page-studio #studio-inner #confirmPrototypeButton {
  width: 100% !important;
  align-self: stretch !important;
  margin-top: auto !important;
}

/* Tier header: compact centred layout */
#page-studio #studio-inner .studioTierHeader {
  min-height: 120px !important;
  padding: 12px 16px !important;
}

#page-studio #studio-inner .studioTierHeader img {
  width: 64px !important;
  height: 64px !important;
}

#page-studio #studio-inner .studioTierName {
  font-size: 22px !important;
}

/* Success panel: prevent stretching on wide viewports */
#page-studio #studio-inner .successPanel {
  max-width: 100% !important;
  padding: 24px !important;
}

/* Petcode input row */
#page-studio .petCodeBox > span {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

/* clientCodeLine: keep on one line */
#page-studio .clientCodeLine {
  grid-template-columns: auto minmax(120px, 1fr) !important;
  gap: 10px !important;
  font-size: 13px !important;
}

@media (max-width: 900px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   STUDIO TYPOGRAPHY NORMALIZATION 鈥?2026-05-10
   All state headings capped at 20-22px; body copy 12-14px.
   ================================================================ */

/* Prototype state: title was clamp(32,4vw,46px) 鈫?20px italic */
#page-studio #studio-inner .studioStatePrototype .studioStateTitle {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #2c2016 !important;
  margin: 0 0 14px !important;
}

/* Generating state: sectionHeader grid so title never wraps */
#page-studio #studio-inner .studioStateGenerating .sectionHeader {
  display: grid !important;
  grid-template-columns: 1fr 148px !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

#page-studio #studio-inner .studioStateGenerating #previewTitle {
  font-size: 14px !important;
  font-style: italic !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

#page-studio #studio-inner .studioStateGenerating #animationSelect {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  font-size: 12px !important;
}

/* Tier card: price heading 26px, list items keep-all (no mid-word wrap) */
#page-studio #studio-inner .tierCard h2 {
  font-size: 26px !important;
  line-height: 1.1 !important;
  margin: 4px 0 8px !important;
}

#page-studio #studio-inner .tierCard li {
  font-size: 12px !important;
  line-height: 1.55 !important;
  word-break: keep-all !important;
}

#page-studio #studio-inner .tierCard .secondaryButton {
  min-height: 36px !important;
  font-size: 13px !important;
}

/* Tier header: compact */
#page-studio #studio-inner .studioTierHeader {
  padding: 10px 16px !important;
  min-height: 96px !important;
  gap: 8px !important;
}

#page-studio #studio-inner .studioTierName {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

#page-studio #studio-inner .studioTierEyebrow {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}

/* Success state: title 22px italic, not huge bold h2 */
#page-studio #studio-inner #doneTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  margin: 4px 0 2px !important;
  color: #2c2016 !important;
}

/* Pet code display: 28px max, always one line */
#page-studio .petCodeDisplay {
  font-size: clamp(16px, 2vw, 28px) !important;
  min-height: 64px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.08em !important;
  padding: 0 20px !important;
}

/* Client code line: keep horizontal */
#page-studio .clientCodeLine {
  grid-template-columns: auto minmax(100px, 1fr) !important;
  font-size: 12px !important;
  gap: 8px !important;
}

#page-studio .clientCodeLine input {
  font-size: 13px !important;
}

/* Success summary subtitle */
#page-studio #successSummary {
  font-size: 13px !important;
  color: #7a6e5a !important;
  margin: 0 0 16px !important;
}

/* successNotice: normal size */
#page-studio .successNotice {
  font-size: 13px !important;
  padding: 12px 16px !important;
}


/* ================================================================
   STUDIO LOCKED-HEIGHT SYSTEM 鈥?2026-05-10
   Both panels stretch to equal height. Preview scrolls internally.
   Form pins actions to bottom. All states live in the same 560px box.
   ================================================================ */

/* Grid: stretch both columns to equal height */
#page-studio #studio-inner,
#page-studio .studioGrid {
  align-items: stretch !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  max-width: 1120px !important;
  gap: 24px !important;
}

/* Both panels: same min-height, equal card feel */
#page-studio #studio-inner .studioPanel,
#page-studio #studio-inner .previewPanel {
  min-height: 560px !important;
  box-sizing: border-box !important;
}

/* Form panel: flex column so buttons pin to bottom */
#page-studio #studio-inner .studioPanel {
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
}

#page-studio #studio-inner .studioPanel .sectionHeader {
  flex-shrink: 0 !important;
}

#page-studio #studio-inner #petForm {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

#page-studio #studio-inner .formActions {
  margin-top: auto !important;
  padding-top: 10px !important;
}

/* Preview panel: flex column, overflow scrolls */
#page-studio #studio-inner .previewPanel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 24px !important;
}

/* All states: fill available height */
#page-studio #studio-inner .studioState {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Generating state: compact stage + steps to fit in 560px */
#page-studio #studio-inner .studioStateGenerating {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#page-studio #studio-inner .studioStateGenerating .desktopStage {
  min-height: 330px !important;
  flex: 0 0 330px !important;
}

#page-studio #studio-inner .studioStateGenerating #petCanvas {
  width: min(420px, 86%) !important;
  max-height: 310px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .progressList {
  flex: 0 0 auto !important;
  min-height: 168px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .progressList .progress-item {
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s ease,
    background-color 0.22s ease !important;
}

#page-studio #studio-inner .progressList .progress-item.isRolledOut {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-block: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}

/* Empty state: centred within the full panel height */
#page-studio #studio-inner .studioStateEmpty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 24px !important;
  text-align: center !important;
}

/* Preview / Payment states */
#page-studio #studio-inner .studioStatePreview,
#page-studio #studio-inner .studioStatePay {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

#page-studio #studio-inner .freePreviewStage {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.85fr) !important;
  gap: 22px !important;
  align-items: center !important;
  flex: 1 !important;
}

#page-studio #studio-inner .previewImageShell {
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 1 !important;
  min-height: 280px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: #f5efe6 !important;
}

#page-studio #studio-inner #freePreviewImage {
  width: min(88%, 360px) !important;
  height: auto !important;
  max-height: 360px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .previewDesc,
#page-studio #studio-inner .retryNote,
#page-studio #studio-inner .payInline p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#page-studio #studio-inner .previewActions,
#page-studio #studio-inner .paymentActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#page-studio #studio-inner .payInline {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 18px !important;
  min-height: 100% !important;
  border: 1px solid var(--accent) !important;
  border-radius: 16px !important;
  background: var(--accent-light) !important;
  padding: 28px !important;
}

#page-studio #studio-inner .payPlanHeader {
  display: grid !important;
  grid-template-columns: 92px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
}

#page-studio #studio-inner #paySelectedPreview {
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
}

#page-studio #studio-inner #payTitle {
  margin: 0 !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

#page-studio #studio-inner #payPetName,
#page-studio #studio-inner #payTierName {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Prototype state */
#page-studio #studio-inner .studioStatePrototype {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#page-studio #studio-inner .studioPrototypeFlow,
#page-studio #studio-inner .prototypeFlow {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
}

#page-studio #studio-inner .studioPrototypeChooser {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 12px !important;
}

#page-studio #studio-inner .prototypeGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
}

#page-studio #studio-inner .prototypeImageWrap {
  aspect-ratio: 1 !important;
}

#page-studio #studio-inner #confirmPrototypeButton {
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-top: auto !important;
}

/* Tier state */
#page-studio #studio-inner .studioStateTier {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid #e0d8cc !important;
}

#page-studio #studio-inner .studioTierHeader {
  flex-shrink: 0 !important;
  min-height: 90px !important;
}

#page-studio #studio-inner .studioTierGrid,
#page-studio #studio-inner .tierGrid {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 12px !important;
  align-items: stretch !important;
}

#page-studio #studio-inner .tierCard {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .tierCard ul {
  flex: 1 !important;
}

#page-studio #studio-inner .tierFootnote {
  flex-shrink: 0 !important;
  padding: 0 12px 12px !important;
}

/* Done/Success state: compact, fits 560px */
#page-studio #studio-inner .studioStateDone {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

#page-studio #studio-inner .successPanel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 14px !important;
  padding: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-studio #studio-inner .successHeader {
  flex-shrink: 0 !important;
}

#page-studio .petCodeDisplay {
  flex-shrink: 0 !important;
  min-height: 60px !important;
  font-size: clamp(16px, 2vw, 26px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.08em !important;
  padding: 0 16px !important;
}

#page-studio .petCodeBox {
  flex-shrink: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

#page-studio .petCodeBox > span {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
}

#page-studio .successNotice {
  flex-shrink: 0 !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
}

#page-studio .successActions {
  flex-shrink: 0 !important;
  gap: 8px !important;
}

#page-studio .upgradeBox {
  flex-shrink: 0 !important;
  padding-top: 12px !important;
  border-top: 0.5px solid #e0d8cc !important;
}

#page-studio .clientCodeLine {
  flex-shrink: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  border-top: 0.5px solid #e0d8cc !important;
  padding-top: 12px !important;
  font-size: 12px !important;
  margin-top: auto !important;
}

/* Mobile: single column */
@media (max-width: 900px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  #page-studio #studio-inner .freePreviewStage,
  #page-studio #studio-inner .payPlanHeader {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .previewImageShell {
    min-height: 220px !important;
  }
}


/* ================================================================
   DESIGN-SPEC IMPLEMENTATION 鈥?2026-05-11
   Reference: petdex-flow-demo.html + DESIGN-SPEC.md
   All colors via CSS variables. Scoped to #page-studio.
   ================================================================ */

/* 鈹€鈹€ 杩涘害鏉?slot 灏哄鍙橀噺 鈹€鈹€ */
#page-studio {
  --progress-item-h: 52px;
  --progress-gap: 8px;
  --progress-slot: calc(var(--progress-item-h) + var(--progress-gap));
}

/* 鈹€鈹€ 0. 缃戞牸锛氬彸渚ч瑙堝尯鏇村 鈹€鈹€ */
#page-studio #studio-inner,
#page-studio .studioGrid {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

/* 鈹€鈹€ 1. 瀹犵墿鍥剧墖瀹瑰櫒锛氭殩鑹诧紙娌跨敤 2026-05-10 #f5efe6锛屼笉瑕嗗啓锛夆攢鈹€ */

/* 鈹€鈹€ genSubHint 鎻愮ず灏忓瓧 鈹€鈹€ */
#page-studio #studio-inner .genSubHint {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin: 2px 0 0 !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* 鈹€鈹€ 2. Generating锛氭洿楂?canvas锛屽～婊￠潰鏉?鈹€鈹€ */
#page-studio #studio-inner .studioStateGenerating .desktopStage {
  min-height: 360px !important;
  flex: 0 0 360px !important;
}
#page-studio #studio-inner .studioStateGenerating #petCanvas {
  width: min(88%, 360px) !important;
  max-height: 340px !important;
}

/* 鈹€鈹€ 3. 杩涘害鏉?Viewport scroll锛圖ESIGN-SPEC 搂鍏級鈹€鈹€ */
/* Viewport 瀹瑰櫒锛氬彧闇插嚭 4 琛?*/
#page-studio #studio-inner .progressViewport {
  max-height: calc(4 * var(--progress-slot) - var(--progress-gap)) !important;
  overflow: hidden !important;
  position: relative !important;
  flex: 0 0 auto !important;
}
/* 鍒楄〃鏁翠綋涓婄Щ瀹炵幇 scroll 鏁堟灉 */
#page-studio #studio-inner .progressList {
  transform: translateY(calc(-1 * var(--progress-offset, 0) * var(--progress-slot))) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* 姣忚鍥哄畾楂樺害锛坴iewport 鏂规涓嶆姌鍙?height锛?/
#page-studio #studio-inner .progressList .progress-item {
  height: var(--progress-item-h) !important;
  min-height: var(--progress-item-h) !important;
  overflow: hidden !important;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease !important;
}
/* 瑙嗗彛澶栫殑琛岋細淇濈暀楂樺害锛屼粎闄嶄綆涓嶉€忔槑搴?*/
#page-studio #studio-inner .progressList .progress-item.isRolledOut {
  height: var(--progress-item-h) !important;
  min-height: var(--progress-item-h) !important;
  padding-block: 10px !important;
  overflow: hidden !important;
  opacity: 0.18 !important;
  border-width: 1px !important;
  pointer-events: none !important;
}

/* 杩涘害姝ラ锛氭部鐢ㄥ師濮嬫殩鑹叉柟妗堬紝浠呰ˉ鍏?running pulse 鍔ㄦ晥 */
#page-studio #studio-inner .progress-item[data-status="active"] .progressCircle {
  animation: pdxProgressPulse 1.2s ease infinite !important;
}
@keyframes pdxProgressPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
/* 闅愯棌閿欒璇︽儏灞曞紑鍖猴紙閬垮厤鑻辨枃 API 鏃ュ織鏆撮湶涓轰贡鐮侊級*/
#page-studio .progressList details {
  display: none !important;
}

/* 鈹€鈹€ 4. Preview phase锛氬ぇ鍥?+ 鍨傜洿灞呬腑鍐呭 鈹€鈹€ */
#page-studio #studio-inner .freePreviewStage {
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 0.88fr) !important;
  align-items: center !important;
  gap: 20px !important;
}
#page-studio #studio-inner .previewImageShell {
  min-height: 340px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
}
#page-studio #studio-inner #freePreviewImage {
  max-width: 85% !important;
  max-height: 85% !important;
  object-fit: contain !important;
  width: auto !important;
}
#page-studio #studio-inner .freePreviewStage > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}
#page-studio #studio-inner #previewConfirmTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
#page-studio #studio-inner .previewDesc {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
#page-studio #studio-inner .previewActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
#page-studio #studio-inner .retryNote {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* 鈹€鈹€ 5. Exhausted box锛圖ESIGN-SPEC 搂鍗佷簩锛屾鍚戞枃妗堬級鈹€鈹€ */
.exhaustedBox {
  background: linear-gradient(135deg, var(--accent-light), #FFF8F0);
  border: 1.5px solid rgba(196, 120, 58, .3);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.exhaustedBox .exhaustedMsg {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.5;
}
.exhaustedBox .exhaustedNote {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
.exhaustedActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.exhaustedActions button {
  width: 100%;
  min-height: 40px !important;
  font-size: 13px !important;
}
/* 璀︾ず鎸夐挳鏍峰紡锛堟绾ч€夐」锛?/
.exhaustedActions .secondaryButton {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: rgba(196, 120, 58, .4) !important;
}

/* 鈹€鈹€ 6. Tier-select phase 鈹€鈹€ */
/* 鐘舵€侀潰鏉匡細閫忔槑鑳屾櫙锛堟挙閿€鏃т唬鐮佺殑 #fff 瑕嗗啓锛?/
#page-studio #studio-inner .studioStateTier {
  background: transparent !important;
}
/* Header 鍖猴細mint 鑳屾櫙 */
#page-studio #studio-inner .studioTierHeader {
  background: var(--mint) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
}
#page-studio #studio-inner .studioTierHeader img {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius) !important;
  object-fit: contain !important;
  background: #f5efe6 !important;
  border: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
#page-studio #studio-inner .studioTierEyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
}
#page-studio #studio-inner .studioTierName {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin: 2px 0 0 !important;
  line-height: 1.1 !important;
}
/* 濂楅鍗★細閫忔槑鑳屾櫙铻嶅叆闈㈡澘锛堥潪绾櫧锛?/
#page-studio #studio-inner .tierCard {
  padding: 16px !important;
  gap: 8px !important;
  min-height: 0 !important;
  border: 1.5px solid var(--border) !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}
#page-studio #studio-inner .tierCard h2 {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 2px 0 6px !important;
  color: var(--text-primary) !important;
}
#page-studio #studio-inner .tierCard ul {
  flex: 1 !important;
  gap: 6px !important;
}
#page-studio #studio-inner .tierCard li {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}
#page-studio #studio-inner .tierCard button {
  margin-top: auto !important;
  min-height: 40px !important;
  font-size: 13px !important;
}
/* 鎺ㄨ崘鍗★紙advanced锛夛細accent-light 鑳屾櫙 + 娣辫壊杈规 + 椤堕儴褰╂潯 */
#page-studio #studio-inner .tierCard.recommended {
  background: var(--accent-light) !important;
  border-color: var(--bg-dark) !important;
}
#page-studio #studio-inner .tierCard.recommended::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #E8A060);
  border-radius: 0;
}
/* 鎺ㄨ崘 badge */
#page-studio #studio-inner .recommendBadge {
  position: absolute !important;
  top: -1px !important;
  right: 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 0 0 7px 7px !important;
  letter-spacing: 0 !important;
}
/* 鎺ㄨ崘鍗℃寜閽敤娣辫壊涓绘寜閽牱寮?*/
#page-studio #studio-inner .tierAccentButton {
  background: var(--bg-dark) !important;
  color: #F5F0E8 !important;
  border: none !important;
}
#page-studio #studio-inner .tierFootnote {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  padding: 0 12px 12px !important;
}

/* 鈹€鈹€ 7. Payment phase锛圖ESIGN-SPEC 搂鍗佷竴锛夆攢鈹€ */
#page-studio #studio-inner .studioStatePay {
  padding: 0 !important;
}
/* 澶嶇敤 tierHeader 椋庢牸鐨?payPlanHeader */
#page-studio #studio-inner .payPlanHeader {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--mint) !important;
  padding: 14px 16px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  grid-template-columns: unset !important;
}
#page-studio #studio-inner #paySelectedPreview {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius) !important;
  object-fit: contain !important;
  background: #f5efe6 !important;
  border: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
#page-studio #studio-inner #payPetName {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin: 2px 0 0 !important;
  line-height: 1.1 !important;
}
#page-studio #studio-inner #payTierName {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
}
#page-studio #studio-inner #payTitle {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
#page-studio #studio-inner .payInline {
  flex: 1 !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  align-self: center !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  border-top: none !important;
  gap: 12px !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#page-studio #studio-inner .payInline p {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}
#page-studio #studio-inner .epayQrPanel {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 14px !important;
  justify-items: center !important;
  padding: 16px !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}
#page-studio #studio-inner .epayQrPanel[hidden] {
  display: none !important;
}
#page-studio #studio-inner .epayQrPanel h3 {
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
#page-studio #studio-inner .epayQrBox {
  width: min(240px, 100%) !important;
  max-width: 240px !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  padding: 12px !important;
  border: 3px solid #0ea5e9 !important;
  border-radius: 14px !important;
  background: #fff !important;
}
#page-studio #studio-inner .epayQrBox img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
#page-studio #studio-inner .epayCountdown {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, 0.06) !important;
}
#page-studio #studio-inner .epayCountdown span,
#page-studio #studio-inner .epayCountdown small {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
#page-studio #studio-inner .epayCountdown strong {
  color: var(--text-primary) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
#page-studio #studio-inner #epayReloadButton {
  min-height: 36px !important;
  padding: 7px 14px !important;
}
#page-studio #studio-inner .payOrderCard {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  font-size: 12px !important;
}
#page-studio #studio-inner .payOrderCard[hidden] {
  display: none !important;
}
#page-studio #studio-inner .payOrderCard div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}
#page-studio #studio-inner .payOrderCard span {
  color: var(--text-muted) !important;
}
#page-studio #studio-inner .payOrderCard strong {
  min-width: 0 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
  color: var(--text-primary) !important;
}
#page-studio #studio-inner .payOrderCard p {
  margin-top: 4px !important;
}
#page-studio #studio-inner .paymentActions {
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}
#page-studio #studio-inner .paymentActions .primaryButton {
  width: 100% !important;
}
/* "杩斿洖淇敼" 鍋氭垚灏忓瓧閾炬帴 */
#page-studio #studio-inner #cancelPaymentButton {
  min-height: 0 !important;
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  box-shadow: none !important;
  align-self: center !important;
}
#page-studio #studio-inner #cancelPaymentButton:hover {
  transform: none !important;
  color: var(--text-secondary) !important;
}

/* 鈹€鈹€ 8. Prototype / confirming phase 鈹€鈹€ */
#page-studio #studio-inner #prototypeTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
#page-studio #studio-inner .prototypeCard img {
  background: #f5efe6 !important;
  object-fit: contain !important;
}

/* 鈹€鈹€ 9. Done phase锛圖ESIGN-SPEC 搂鍗佷笁锛夆攢鈹€ */
/* 鏁翠綋灞呬腑 */
#page-studio #studio-inner .successPanel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 !important;
  gap: 12px !important;
  padding: 20px 16px !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* 瀹犵墿鍥鹃瑙堬細120脳120 鏆栬壊瀹瑰櫒 */
.donePreviewThumb {
  width: 120px;
  height: 120px;
  background: #f5efe6;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.donePreviewThumb img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}
/* 瀹犵墿鍚嶏細Lora */
#page-studio #studio-inner #doneTitle {
  font-family: 'Lora', Georgia, serif !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
/* 濂楅鏍囩 */
#page-studio #studio-inner #successSummary {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}
/* 瀹犵墿鐮佹樉绀猴細monospace + mint 鑳屾櫙 */
#page-studio .petCodeDisplay {
  width: 100% !important;
  flex-shrink: 0 !important;
  min-height: 56px !important;
  background: var(--mint) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace !important;
  font-size: clamp(14px, 1.8vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 16px !important;
}
/* 瀹犵墿鐮佸鍒惰 */
#page-studio .petCodeBox {
  width: 100% !important;
  flex-shrink: 0 !important;
  display: grid !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  text-align: left !important;
}
#page-studio .petCodeBox > span {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
}
/* 鎻愮ず鏂囧瓧 */
#page-studio .successNotice {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
  padding: 8px 12px !important;
  background: var(--mint) !important;
  border-radius: var(--radius) !important;
  width: 100% !important;
  text-align: center !important;
}
/* 涓嬭浇鎸夐挳琛?*/
#page-studio .successActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
#page-studio .upgradeBox {
  flex-shrink: 0 !important;
  width: 100% !important;
  text-align: center !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}
#page-studio .clientCodeLine {
  display: none !important;
}

/* 鈹€鈹€ 鍝嶅簲寮?鈹€鈹€ */
@media (max-width: 900px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  #page-studio #studio-inner .freePreviewStage,
  #page-studio #studio-inner .payPlanHeader {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #page-studio #studio-inner .tierGrid,
  #page-studio #studio-inner .studioTierGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   INSTALL PAGE 鈥?release cards redesign (2026-05-15)
   Visual hierarchy: Windows as primary recommendation, macOS as
   a calmer paired secondary row. Inline platform SVG icons.
   These rules override the earlier .installDownloads block.
   ================================================================ */

/* Reset the grid: stack groups vertically, generous breathing room. */
#page-install .installDownloads .releaseGrid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 20px !important;
  max-width: none !important;
  margin: 0 !important;
}

#page-install .installDownloads .releaseGroup {
  display: block;
}

#page-install .installDownloads .releaseGroupLabel {
  display: block;
  margin: 0 0 10px 4px;
  color: #b8a88a;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-install .installDownloads .releaseGroupCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Wipe the old card shape so our flex template wins. */
#page-install .installDownloads .releaseCard,
#page-install .installDownloads .releaseCardMain,
#page-install .installDownloads .releaseCardSmall {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 18px !important;
  border: 0.5px solid #e0d8cc !important;
  border-radius: 16px !important;
  background: #faf7f0 !important;
  color: #2c2016 !important;
  padding: 22px !important;
  box-shadow: 0 1px 4px rgba(44, 32, 22, 0.04) !important;
  min-height: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

#page-install .installDownloads .releaseCard:hover {
  box-shadow: 0 6px 18px rgba(44, 32, 22, 0.08) !important;
  transform: translateY(-1px);
}

/* Primary (Windows) card 鈥?bigger, warmer, dark surface. */
#page-install .installDownloads .releaseCard--primary,
#page-install .installDownloads .releaseCardMain {
  background: linear-gradient(155deg, #2f2317 0%, #1f1610 100%) !important;
  border-color: #1f1610 !important;
  color: #faf7f0 !important;
  padding: 28px !important;
  box-shadow: 0 10px 26px rgba(44, 32, 22, 0.16) !important;
}

#page-install .installDownloads .releaseCard--primary:hover,
#page-install .installDownloads .releaseCardMain:hover {
  box-shadow: 0 14px 32px rgba(44, 32, 22, 0.22) !important;
}

/* Platform icon block. */
#page-install .installDownloads .releaseCardIcon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(44, 32, 22, 0.05);
  color: #2c2016;
  flex-shrink: 0;
}

#page-install .installDownloads .releaseCard--primary .releaseCardIcon {
  width: 52px;
  height: 52px;
  background: rgba(250, 247, 242, 0.1);
  color: #faf7f0;
}

#page-install .installDownloads .releaseCardBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Header: title + maybe-badge. */
#page-install .installDownloads .releaseCardHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100%;
  gap: 12px !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#page-install .installDownloads .releaseCardHeader > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
}

#page-install .installDownloads .releaseCard strong,
#page-install .installDownloads .releaseCardSmall strong {
  color: #2c2016 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
}

#page-install .installDownloads .releaseCard--primary strong,
#page-install .installDownloads .releaseCardMain strong {
  color: #faf7f0 !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.25;
}

#page-install .installDownloads .releaseCard span,
#page-install .installDownloads .releaseCardSmall span {
  color: #7a6e5a !important;
  font-size: 12px !important;
}

#page-install .installDownloads .releaseCard--primary span,
#page-install .installDownloads .releaseCardMain span {
  color: rgba(250, 247, 242, 0.55) !important;
}

/* Recommended badge 鈥?only on the primary card. */
#page-install .installDownloads .releaseRecommended {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #c4783a;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Body paragraph. */
#page-install .installDownloads .releaseCard p,
#page-install .installDownloads .releaseCardSmall p {
  color: #7a6e5a !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#page-install .installDownloads .releaseCard--primary p,
#page-install .installDownloads .releaseCardMain p {
  color: rgba(250, 247, 242, 0.62) !important;
  font-size: 13.5px !important;
}

/* Foot row: size chip + state + button. */
#page-install .installDownloads .releaseCardFoot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

#page-install .installDownloads .releaseSize {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.06);
  color: #7a6e5a !important;
  font-size: 11px !important;
  letter-spacing: 0.01em;
}

#page-install .installDownloads .releaseCard--primary .releaseSize,
#page-install .installDownloads .releaseCardMain .releaseSize {
  background: rgba(250, 247, 242, 0.1);
  color: rgba(250, 247, 242, 0.7) !important;
}

#page-install .installDownloads .releaseState {
  display: inline-flex !important;
  align-self: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #b8a88a !important;
  padding: 0 !important;
  font-size: 11px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
}

#page-install .installDownloads .releaseCard--primary .releaseState,
#page-install .installDownloads .releaseCardMain .releaseState {
  color: rgba(250, 247, 242, 0.45) !important;
}

/* Download button 鈥?push to the right of the foot row. */
#page-install .installDownloads .releaseButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 36px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #2c2016 !important;
  color: #faf7f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  cursor: pointer;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#page-install .installDownloads .releaseButton:hover {
  background: #1a120a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 32, 22, 0.16);
  opacity: 1 !important;
}

#page-install .installDownloads .releaseCard--primary .releaseButton,
#page-install .installDownloads .releaseCardMain .releaseButton {
  background: #c4783a !important;
  color: #fff !important;
  border: 0 !important;
  min-height: 42px;
  padding: 0 24px !important;
  font-size: 14px !important;
}

#page-install .installDownloads .releaseCard--primary .releaseButton:hover,
#page-install .installDownloads .releaseCardMain .releaseButton:hover {
  background: #b06c30 !important;
  box-shadow: 0 6px 16px rgba(196, 120, 58, 0.32);
}

/* Notify form (unavailable releases). */
#page-install .installDownloads .releaseNotify {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  width: 100%;
  margin: 4px 0 0 !important;
  grid-column: auto !important;
}

#page-install .installDownloads .releaseNotify input {
  flex: 1 1 200px;
  min-height: 36px !important;
  border: 0.5px solid #e0d8cc !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #2c2016 !important;
  font-size: 13px !important;
  padding: 0 12px !important;
}

#page-install .installDownloads .releaseCard--primary .releaseNotify input,
#page-install .installDownloads .releaseCardMain .releaseNotify input {
  border-color: rgba(250, 247, 242, 0.2) !important;
  background: rgba(250, 247, 242, 0.08) !important;
  color: #faf7f0 !important;
}

#page-install .installDownloads .releaseNotify input::placeholder {
  color: #b8a88a !important;
}

#page-install .installDownloads .releaseCard--primary .releaseNotify input::placeholder,
#page-install .installDownloads .releaseCardMain .releaseNotify input::placeholder {
  color: rgba(250, 247, 242, 0.35) !important;
}

#page-install .installDownloads .releaseNotify button {
  margin-left: 0;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #c4783a !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 18px !important;
  cursor: pointer;
}

@media (max-width: 720px) {
  #page-install .installDownloads .releaseGroupCards {
    grid-template-columns: 1fr;
  }

  #page-install .installDownloads .releaseCard,
  #page-install .installDownloads .releaseCardMain,
  #page-install .installDownloads .releaseCardSmall {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }

  #page-install .installDownloads .releaseCard--primary,
  #page-install .installDownloads .releaseCardMain {
    padding: 24px !important;
  }

  #page-install .installDownloads .releaseCardIcon {
    display: none;
  }
}

/* ============================================================
   UX-WORKBENCH: 宸ヤ綔鍙?v2 鈥?绮剧畝閲嶅啓
   ============================================================ */

/* --- Empty state 閰嶉鎻愮ず琛?--- */
.emptyQuotaLine {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  text-align: center;
  letter-spacing: 0.01em;
}
.emptyQuotaLine strong {
  color: var(--text-secondary, #5c4f3d);
  font-weight: 600;
}

/* --- Generating: header 琛?--- */
.genHeader {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.genHeader #previewTitle {
  font-size: 22px !important;
  font-style: italic;
  color: var(--text-primary, #2c2016) !important;
}
.genTimePill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #9e8e78);
  background: var(--bg, #f5f0e8);
  border: 1px solid var(--border, #e4ddd2);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.02em;
}
#genSubHint {
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  margin: 0 0 28px;
}

/* --- Milestone track --- */
.genMilestones {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
.genMilestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  width: 64px;
}
.genMilestone span {
  font-size: 11px;
  color: var(--text-muted, #9e8e78);
  text-align: center;
  line-height: 1.3;
  transition: color 0.25s;
}
.genMilestoneIcon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #ddd6cc);
  background: var(--bg-card, #faf7f2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #c0b0a0);
  transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
}
.genMilestoneIcon svg { width: 16px; height: 16px; }

/* Active milestone */
.genMilestone[data-status="active"] .genMilestoneIcon {
  border-color: var(--accent, #8b6914);
  background: var(--accent, #8b6914);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(139, 105, 20, 0.10);
}
.genMilestone[data-status="active"] span { color: var(--text-primary, #2c2016); font-weight: 600; }

/* Done milestone */
.genMilestone[data-status="done"] .genMilestoneIcon {
  border-color: #7ab87a;
  background: #7ab87a;
  color: #fff;
}
.genMilestone[data-status="done"] span { color: var(--text-secondary, #5c4f3d); }

/* Connector lines */
.genMilestoneLine {
  flex: 1;
  height: 1.5px;
  background: var(--border, #e4ddd2);
  margin-top: 17px; /* aligns with center of the 36px icon */
  transition: background 0.3s;
  min-width: 12px;
}
.genMilestoneLine.done { background: #7ab87a; }

/* Current description */
.genCurrentDesc {
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  text-align: center;
  min-height: 18px;
  margin: 0 0 4px;
  transition: opacity 0.2s;
}

/* --- Prototype secondary row (鎹竴鎵?+ note) --- */
.prototypeSecondaryRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}
.linkButton {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
  white-space: nowrap;
}
.linkButton:hover {
  color: var(--text-secondary, #5c4f3d);
  text-decoration-color: currentColor;
}
.prototypeSecondaryRow .retryNote {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  margin: 0;
}

/* --- History section --- */
.genHistorySection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e8e0d5);
}
.genHistoryToggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  padding: 2px 0;
  transition: color 0.15s;
}
.genHistoryToggle:hover { color: var(--text-secondary, #5c4f3d); }
.genHistoryChevron {
  width: 14px; height: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.genHistoryToggle[aria-expanded="true"] .genHistoryChevron { transform: rotate(180deg); }
.genHistoryList {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.genHistoryBatch {
  background: var(--bg, #f5f0e8);
  border: 1px solid var(--border, #e4ddd2);
  border-radius: 10px;
  padding: 10px 12px;
}
.genHistoryBatchTitle {
  font-size: 11px;
  color: var(--text-muted, #9e8e78);
  margin: 0 0 8px;
}
.genHistoryBatchStrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.genHistoryThumb {
  all: unset;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  display: block;
}
.genHistoryThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.genHistoryThumb:hover { border-color: var(--accent, #8b6914); }

/* ============================================================
   UX-WORKBENCH v3 琛ヤ竵
   ============================================================ */

/* --- panelQuotaLine: previewPanel 椤堕儴閰嶉鎻愮ず --- */
.panelQuotaLine {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  text-align: center;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border, #ede5d8);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.panelQuotaLine strong { color: var(--text-secondary, #5c4f3d); font-weight: 600; }
.panelQuotaLine.exhausted { color: #b86630; }
.panelQuotaLine.exhausted strong { color: #b86630; }

/* --- 浠樿垂纭寮圭獥 --- */
.payConfirmOverlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 32, 18, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.payConfirmOverlay[hidden] { display: none; }

/* 鍏憡绯荤粺 鈥?nav 鍠囧彮 icon + 绾㈢偣 + 寮圭獥 */
.announcementBell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 0.5px solid var(--border, #e4ddd2);
  background: transparent;
  color: var(--text, #2c2012);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.announcementBell:hover { background: rgba(44, 32, 18, 0.06); }
.announcementBell:active { transform: scale(0.94); }
.announcementBell[hidden] { display: none; }
.announcementBellIcon {
  display: block;
  pointer-events: none;
}
.announcementBellBadge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e85d4c;
  box-shadow: 0 0 0 2px var(--bg, #faf7f2);
}
.announcementBellBadge[hidden] { display: none; }
@keyframes announcementBellPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.announcementBell:not([hidden]) .announcementBellBadge:not([hidden]) {
  animation: announcementBellPulse 1.6s ease-in-out infinite;
}

.announcementOverlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 32, 18, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.announcementOverlay[hidden] { display: none; }
.announcementCard {
  position: relative;
  background: var(--bg-card, #faf7f2);
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 18px;
  padding: 28px 26px 24px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(44, 32, 18, 0.18);
}
.announcementClose {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8a7a66);
  font-size: 16px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.announcementClose:hover { background: rgba(44, 32, 18, 0.06); }
.announcementEyebrow {
  font-size: 12px;
  color: var(--text-muted, #8a7a66);
  margin: 0 0 6px 0;
  letter-spacing: 0.04em;
}
.announcementTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 14px 0;
  color: var(--text, #2c2012);
  line-height: 1.35;
}
.announcementBody {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text, #2c2012);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 16px;
}
.announcementBody a {
  color: #ad6b3b;
  text-decoration: underline;
}
.announcementMeta {
  font-size: 11.5px;
  color: var(--text-muted, #8a7a66);
  margin: 0 0 18px 0;
}
.announcementActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.announcementActions .primaryButton {
  padding: 8px 22px;
  font-size: 14px;
}
@media (max-width: 480px) {
  .announcementCard {
    padding: 22px 18px 18px;
    border-radius: 14px;
  }
  .announcementTitle { font-size: 18px; }
  .announcementBody { font-size: 13.5px; max-height: 55vh; }
}
/* 鍏憡澶氭潯骞跺瓨锛氬垪琛ㄩ潰鏉?+ 鎶樺彔/灞曞紑 + 缃《锛堢函鏂板锛屼笉鏀逛笂鏂圭幇鏈夌被锛?/
.announcementList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 16px;
  padding-right: 4px;
  /* 鑷畾涔夋粴鍔ㄦ潯:涓庢殩鑹插熀璋冧竴鑷?*/
  scrollbar-width: thin;
  scrollbar-color: rgba(173, 107, 59, 0.35) transparent;
}
.announcementList::-webkit-scrollbar { width: 6px; }
.announcementList::-webkit-scrollbar-thumb {
  background: rgba(173, 107, 59, 0.35);
  border-radius: 3px;
}
.announcementList::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 107, 59, 0.55);
}
.announcementItem {
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card, #faf7f2);
  flex: 0 0 auto;
}
.announcementItem.unread {
  background: rgba(173, 107, 59, 0.06);
  border-color: rgba(173, 107, 59, 0.35);
}
.announcementItemHeader {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text, #2c2012);
}
.announcementItemTitle {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-primary, #2c2016);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.announcementPin {
  font-size: 12px;
  flex: 0 0 auto;
}
.announcementUnreadDot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8413a;
  flex: 0 0 auto;
  order: -1;
  margin-right: 0;
}
.announcementCaret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-top: 9px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted, #8a7a66);
  transition: transform 0.18s ease;
}
.announcementItem.collapsed .announcementCaret {
  transform: rotate(-90deg);
}
.announcementItemBody {
  padding: 0 14px 12px;
}
.announcementItem.collapsed .announcementItemBody {
  display: none;
}
/* 鍒楄〃鍐呯殑 body 浜ょ粰 .announcementList 鏁翠綋婊氬姩锛屼笉鍚勮嚜婊氬姩/鐣欑櫧 */
.announcementItemBody .announcementBody {
  max-height: none;
  overflow: visible;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.announcementItemBody .announcementMeta {
  margin: 0;
}
@media (max-width: 480px) {
  .announcementItemTitle { font-size: 15px; }
}
.payConfirmCard {
  background: var(--bg-card, #faf7f2);
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 20px;
  padding: 32px 28px 28px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(44, 32, 18, 0.14);
}
.payConfirmTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-primary, #2c2016);
  margin: 0 0 10px;
}
.payConfirmDesc {
  font-size: 14px;
  color: var(--text-secondary, #5c4f3d);
  line-height: 1.6;
  margin: 0 0 24px;
}
.payConfirmDesc strong { color: var(--accent, #8b6914); }
.payConfirmActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payConfirmActions .primaryButton { width: 100%; }
.payConfirmActions .secondaryButton { width: 100%; }

.authOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 231, 171, 0.42), transparent 30%),
    rgba(44, 32, 18, 0.44);
  backdrop-filter: blur(8px);
}
.authOverlay[hidden] { display: none; }
.authCard {
  width: min(420px, 100%);
  border: 1px solid rgba(139, 105, 20, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, #fffaf1 0%, #f4eadb 100%);
  box-shadow: 0 24px 80px rgba(44, 32, 18, 0.22);
  padding: 28px;
}
.authCard h3 {
  margin: 0 0 8px;
  font-family: "Lora", Georgia, serif;
  color: var(--text-primary, #2c2016);
  font-size: 24px;
  font-weight: 500;
}
.authCard p {
  margin: 0 0 18px;
  color: var(--text-secondary, #5c4f3d);
  line-height: 1.6;
}
.authCard label {
  display: grid;
  gap: 7px;
  color: var(--text-secondary, #5c4f3d);
  font-size: 13px;
}
.authCard input {
  width: 100%;
  border: 1px solid rgba(139, 105, 20, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-primary, #2c2016);
  font: inherit;
  padding: 12px 14px;
  outline: none;
}
.authCard input:focus {
  border-color: rgba(139, 105, 20, 0.5);
  box-shadow: 0 0 0 4px rgba(139, 105, 20, 0.1);
}
.authRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.authActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.authMessage {
  min-height: 22px;
  margin: 12px 0 0 !important;
  font-size: 13px;
}
.authMessage[data-tone="success"] { color: #2f7d46; }
.authMessage[data-tone="error"] { color: #b44b32; }
.topButton.authButton.isLoggedIn {
  border-color: rgba(47, 125, 70, 0.35);
  background: rgba(47, 125, 70, 0.08);
  color: #2f7d46;
}
body.authModalOpen { overflow: hidden; }

.accountOverlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
  background: rgba(44, 32, 18, 0.36);
  backdrop-filter: blur(8px);
}
.accountOverlay[hidden] { display: none; }
.accountCard {
  width: min(440px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(139, 105, 20, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, #fffaf1 0%, #f5ead9 100%);
  box-shadow: 0 24px 80px rgba(44, 32, 18, 0.24);
  padding: 24px;
}
.accountHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.accountEyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(92, 79, 61, 0.72);
}
.accountHead h3 {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary, #2c2016);
}
.accountHead p {
  margin: 6px 0 0;
  color: var(--text-secondary, #5c4f3d);
  overflow-wrap: anywhere;
}
.accountIconButton {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(44, 32, 18, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-primary, #2c2016);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.accountQuota {
  display: grid;
  gap: 4px;
  margin: 20px 0 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(47, 125, 70, 0.08);
  border: 1px solid rgba(47, 125, 70, 0.18);
}
.accountQuota span,
.accountQuota small {
  color: var(--text-secondary, #5c4f3d);
}
.accountQuota strong {
  font-size: 38px;
  line-height: 1;
  color: #2f7d46;
}
.accountQuotaHint {
  margin: -6px 0 16px;
  color: var(--text-secondary, #5c4f3d);
  font-size: 13px;
  line-height: 1.55;
}
.accountActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.accountModalOpen { overflow: hidden; }

@media (max-width: 560px) {
  .authCard { padding: 22px; }
  .authRow,
  .authActions {
    grid-template-columns: 1fr;
  }
  .accountOverlay {
    justify-content: center;
    padding: 16px;
  }
  .accountCard {
    max-height: calc(100vh - 32px);
    padding: 20px;
  }
  .accountActions {
    grid-template-columns: 1fr;
  }
}

/* --- 鍊欓€夋爣棰樹笉鏂滀綋 --- */
#page-studio #studio-inner .studioStatePrototype .studioStateTitle {
  font-style: normal !important;
}

/* --- 璧板疇鍔ㄧ敾鑸炲彴 --- */
.walkingGenStage {
  text-align: center;
  padding: 16px 0 8px;
  overflow: hidden;
}
.walkingGenHint {
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  margin: 8px 0 0;
}

/* --- 濂楅閫夋嫨锛氶瑙堝浘鏀惧ぇ --- */
#page-studio #studio-inner .studioTierHeader {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 120px !important;
  padding: 16px 0 20px !important;
}
.tierPreviewLarge {
  width: 96px !important;
  height: 96px !important;
  border-radius: 14px !important;
  object-fit: cover;
  border: 1px solid var(--border, #e4ddd2);
  flex-shrink: 0;
}
.studioTierHeaderText {
  flex: 1;
  min-width: 0;
}
.studioTierSub {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  margin: 4px 0 0;
}

/* --- done state 甯冨眬 --- */
#page-studio .successTop {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}
#page-studio .donePreviewThumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, #e4ddd2);
  background: #f0ede8;
}
#page-studio .donePreviewThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#page-studio .successHeader {
  flex: 1;
}
#page-studio .successHeader .studioStateTitle {
  font-size: 18px !important;
  margin: 0 0 4px !important;
}
#page-studio .petCodeSection {
  background: var(--bg, #f5f0e8);
  border: 1px solid var(--border, #e4ddd2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: center;
}
#page-studio .petCodeSection .petCodeDisplay {
  font-size: clamp(18px, 3vw, 28px) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-studio .successNotice {
  font-size: 11px;
  color: var(--text-muted, #9e8e78);
  margin: 0 0 10px;
}
.petCodeCopyRow {
  display: flex;
  gap: 8px;
  align-items: center;
}
.petCodeInputLine {
  flex: 1;
  min-width: 0;
  font-size: 13px !important;
  font-family: monospace;
  background: var(--bg-card, #faf7f2) !important;
}
#page-studio .successActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#page-studio .successActions .primaryButton { flex: 1; }
#page-studio .successActions .secondaryButton { flex: 1; }

/* --- 鍘嗗彶鍒楄〃闄愰珮 --- */
.genHistoryList {
  max-height: 280px;
  overflow-y: auto;
}

/* --- prototypeRetryNote 鏍峰紡鍜岄棿璺?--- */
#page-studio #studio-inner #prototypeRetryNote {
  margin: 4px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted, #9e8e78);
}

/* ============================================================
   UX-WORKBENCH v4 琛ヤ竵
   ============================================================ */

/* 鏂囦欢鍚嶆埅鏂?*/
.fileTitleTruncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.fileTextWrap {
  min-width: 0;
  overflow: hidden;
}

#page-studio #studio-inner .fileVisual {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  min-height: 96px !important;
  height: 96px !important;
  overflow: hidden !important;
  padding: 12px 14px !important;
}

#page-studio #studio-inner .filePreview {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
}

#page-studio #studio-inner .fileTextWrap {
  min-width: 0 !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .fileTitleTruncate,
#page-studio #studio-inner .fileVisual small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#page-studio #studio-inner .fileTitleTruncate {
  white-space: nowrap !important;
}

#page-studio #studio-inner .fileVisual small {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
}

/* panelQuotaLine hidden when not needed */
.panelQuotaLine[hidden] { display: none; }

/* emptyGenNote锛氬鐢?retryNote 鍗冲彲锛屾棤闇€棰濆鏍峰紡 */
#emptyGenNote { margin-top: 16px; text-align: center; }

/* M1-5: 宸ヤ綔鍙扮┖鐘舵€侀厤棰濊閲岀殑銆岀偣杩欓噷璐拱濂楅銆嶅叆鍙ｃ€傜嫭鍗犱竴琛岋紙闅旇
   鏄剧ず锛夛紝骞惰ˉ瓒冲瀭鐩?padding 鎶婄偣鍑诲尯鍋氬埌 ~36px 楂樷€斺€斿師鏈彧鏈変竴琛?
   鏂囧瓧 ~17px 楂橈紝鐪熸満鎵嬫寚瀹规槗鐐瑰亸銆傛暣琛屽彲鐐广€?*/
.emptyQuotaBuyLink {
  display: block;
  margin-top: 2px;
  padding: 9px 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  pointer-events: auto;
}
.emptyQuotaBuyLink[hidden] { display: none; }

/* tierSingleOption锛氬椁愰〉搴曢儴鍗曟閫夐」锛屾俯鍜屼綆璋?*/
.tierSingleOption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
}
.tierSingleOption .linkButton {
  font-size: 12px;
}

/* 濂楅鎸夐挳鏂囨锛堣瀹冨姩璧锋潵锛夊瓧鍙蜂繚鎸佷竴鑷?*/
#page-studio #studio-inner .tierCard button { font-size: 14px; }

/* ============================================================
   UX-WORKBENCH v5 - 甯冨眬绮句慨
   ============================================================ */

/* Done state: 宸﹀浘鍙冲瓧 */
#page-studio .doneHeader {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
#page-studio .donePreviewThumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, #e4ddd2);
  background: #f0ede8;
}
#page-studio .donePreviewThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#page-studio .doneHeaderText {
  flex: 1;
  min-width: 0;
}
#page-studio .doneHeaderText .studioStateTitle {
  font-size: 20px !important;
  margin: 0 0 4px !important;
}
#page-studio .doneSummary {
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  margin: 0 0 8px;
}
#page-studio #upgradeBox { margin: 0; }
#page-studio .upgradeBox button { font-size: 13px; }

/* 鍘嗗彶鏃堕棿鎴虫寜閽潯 */
.genHistoryBar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e8e0d5);
  flex-wrap: nowrap;
  min-width: 0;
}
.genHistoryBarLabel {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  white-space: nowrap;
  flex-shrink: 0;
}
.genHistoryBtns {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
}
.genHistoryTimeBtn {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #5c4f3d);
  background: var(--bg, #f5f0e8);
  border: 1px solid var(--border, #e4ddd2);
  border-radius: 6px;
  padding: 4px 10px;
  transition: background 0.15s, border-color 0.15s;
}
.genHistoryTimeBtn:hover,
.genHistoryTimeBtn.isActive {
  background: var(--bg-card, #faf7f2);
  border-color: var(--accent, #8b6914);
  color: var(--accent, #8b6914);
}

/* Tier header: 鍑忓皯绌虹櫧 */
#page-studio #studio-inner .studioTierHeader {
  min-height: auto !important;
  padding: 12px 0 16px !important;
  gap: 14px;
}
#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 72px !important;
  height: 72px !important;
}

/* Tier single option 鍙 */
.tierSingleOption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 2px;
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  border-top: 1px solid var(--border, #e8e0d5);
  margin-top: 6px;
}
.tierSingleOption .linkButton { font-size: 12px; }

/* Generating: genSubHint 鍦?sectionHeader 閲屼笉鍗曠嫭鍗犺 */
#page-studio #studio-inner .studioStateGenerating .genSubHint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
}
#page-studio #studio-inner .studioStateGenerating .sectionHeader {
  margin-bottom: 16px;
}
/* milestone track 绉诲埌 stage 涓嬫柟 */
#page-studio #studio-inner .genMilestones {
  margin-top: 16px;
}

/* ============================================================
   UX-WORKBENCH v6 - 鏈€缁堢簿淇?
   ============================================================ */

/* emptyGenNote: 搴曢儴杈圭紭锛屽缁堟樉绀猴紝灏忓瓧灞呬腑 */
.emptyQuotaFooter {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #b0a080);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.emptyQuotaFooter a {
  pointer-events: auto;
}
/* previewPanel 闇€瑕?relative 鎵嶈兘璁?footer absolute 瀹氫綅 */
#page-studio #studio-inner .previewPanel {
  position: relative;
}
/* empty state 琛ヤ笅鍐呰竟璺濓紝閬垮厤鏂囧瓧瑕嗙洊 */
#page-studio #studio-inner .studioStateEmpty {
  padding-bottom: 40px;
}

/* Tier grid: 3 cards */
#page-studio #studio-inner .studioTierGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
/* 楼1 鍗曟鍗★細瑙嗚涓婃洿杞汇€佽竟妗嗚櫄绾?*/
#page-studio #studio-inner .tierCardSingle {
  border-style: dashed !important;
  opacity: 0.88;
}
#page-studio #studio-inner .tierCardSingle h2 {
  font-size: 28px !important;
}
/* Tier header compact */
#page-studio #studio-inner .studioTierHeader {
  min-height: auto !important;
  padding: 12px 0 14px !important;
  border-bottom: 1px solid var(--border, #e8e0d5);
  margin-bottom: 16px;
}
#page-studio #studio-inner .studioTierHeaderText .studioTierSub {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  margin: 2px 0 0;
}
#page-studio #studio-inner .studioTierName {
  font-size: 20px !important;
  margin: 4px 0 0 !important;
}

/* Done state: 涓ゆ爮澶у浘鍙虫枃瀛?*/
#page-studio .successPanel {
  display: grid !important;
  grid-template-columns: 2fr 3fr !important;
  min-height: 400px;
  gap: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  padding: 0 !important;
}
#page-studio .doneImageCol {
  background: var(--bg, #f5f0e8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}
#page-studio .doneImageCol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  display: block;
}
#page-studio .doneImageCol img[hidden] {
  display: none !important;
}
#page-studio .doneImagePlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-studio .doneImagePlaceholder[hidden] {
  display: none !important;
}
#page-studio .doneContentCol {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
#page-studio .doneContentTop .studioStateTitle {
  font-size: 20px !important;
  margin: 0 0 4px !important;
}
#page-studio .doneSummary {
  font-size: 13px;
  color: var(--text-muted, #9e8e78);
  margin: 0;
}
#page-studio .doneContentCol .petCodeDisplay {
  font-size: clamp(16px, 2.5vw, 26px) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}
#page-studio .doneContentCol .successActions {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
#page-studio .doneContentCol .successNotice {
  font-size: 11px;
  color: var(--text-muted, #9e8e78);
  margin: 0;
}
#page-studio .doneContentCol .upgradeBox {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e8e0d5);
}

/* Generating: milestone 绱у噾 */
#page-studio #studio-inner .genMilestones {
  margin-top: 12px;
  padding: 0 4px;
}

/* History bar: 绋嶅ぇ瀛?*/
.genHistoryTimeBtn {
  font-size: 11px !important;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   UX-WORKBENCH v7 - 鏈€缁堟敹灏?
   ============================================================ */

/* Done state: 寮哄埗涓ゅ垪锛堣鐩?flex 鑰佽鍒欙級 */
#page-studio #studio-inner .studioStateDone .successPanel {
  display: grid !important;
  grid-template-columns: 2fr 3fr !important;
  flex-direction: unset !important;
  min-height: 380px;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 14px;
  overflow: hidden;
}
#page-studio #studio-inner .doneImageCol {
  background: var(--bg, #f5f0e8);
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  overflow: hidden;
}
#page-studio #studio-inner .doneImageCol img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
#page-studio #studio-inner .doneContentCol {
  padding: 20px 18px;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  overflow-y: auto;
}
#page-studio #studio-inner .doneContentTop .studioStateTitle { font-size: 18px !important; margin: 0 0 2px !important; }
#page-studio #studio-inner .doneSummary { font-size: 12px; color: var(--text-muted, #9e8e78); margin: 0; }
/* 瀹犵墿鐮佸潡 */
.doneCodeBlock { display: flex; flex-direction: column; gap: 6px; }
.doneCodeBlock .petCodeDisplay { font-size: clamp(14px, 2vw, 22px) !important; padding: 8px 12px !important; margin: 0 !important; }
.doneCodeRow { display: flex; gap: 6px; align-items: center; }
.doneCodeInput { flex: 1; min-width: 0; font-size: 12px !important; font-family: monospace; }
.doneCodeBlock .successNotice { font-size: 11px; color: var(--text-muted, #9e8e78); margin: 0; }
/* 涓嬭浇鎸夐挳锛氱珫鎺掔揣鍑?*/
#page-studio #studio-inner .successActions { display: flex; flex-direction: column; gap: 6px; }
#page-studio #studio-inner .successActions .primaryButton,
#page-studio #studio-inner .successActions .secondaryButton { font-size: 13px; padding: 10px 12px; }
/* upgradeBox */
#page-studio #studio-inner .upgradeBox { padding-top: 8px; border-top: 1px solid var(--border, #e8e0d5); margin: 0; }
#page-studio #studio-inner .upgradeBox .secondaryButton { font-size: 12px; width: 100%; }
/* 鏌ョ湅鍔ㄤ綔 */
.doneAnimSelect { display: flex; align-items: center; gap: 8px; }
.doneAnimSelect select { flex: 1; }

/* Prototype buttons: 骞舵帓 */
.protoActionsRow {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.protoRetryBtn { flex: 0 0 auto; white-space: nowrap; }
.protoConfirmBtn { flex: 1; }

/* emptyGenNote: 鍜?retryNote 淇濇寔涓€鑷寸殑瀛椾綋椋庢牸 */
.emptyQuotaFooter {
  font-size: 12px;
  color: var(--text-muted, #9e8e78);
  text-align: center;
  letter-spacing: 0.01em;
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* ================================================================
   UX-WORKBENCH v10 鈥?correction pass after visual QA
   ================================================================ */

/* Studio intro: keep title and supporting copy on the same left edge. */
#page-studio .pageIntro {
  max-width: 900px !important;
  padding: 42px 24px 0 !important;
  text-align: left !important;
}

#page-studio .pageIntro h1,
#page-studio .pageIntro p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#page-studio .pageIntro p {
  max-width: 720px !important;
  white-space: normal !important;
  line-height: 1.7 !important;
}

/* Empty state quota: anchor it to the preview panel center instead of drifting left. */
#page-studio #studio-inner .studioStateEmpty {
  position: relative !important;
  padding-bottom: 54px !important;
}

#page-studio #emptyGenNote {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  width: max-content !important;
  max-width: min(92vw, 520px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  text-align: center !important;
  color: var(--text-muted, #9e8e78) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

#page-studio #emptyGenNoteText {
  display: block;
  /* 涓嶅啀寮哄埗 nowrap: 绐勫睆 / 寮卞瓧浣?fallback 鏃?nowrap 浼氳Е鍙戝鎬殑瀛楃鏇挎崲
     鍜屾按骞宠鍒? 璁╂枃妗堢湅鐫€鍍忎贡鐮? 鍏佽鑷劧 wrap 鍚屾椂淇濈暀灞呬腑. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#page-studio #emptyGenBuyLink {
  pointer-events: auto !important;
}

/* Candidate selection: restore the stable 3 x 2 chooser structure. */
#page-studio #studio-inner .studioStatePrototype {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 22px !important;
  overflow: visible !important;
}

#page-studio #studio-inner .studioStatePrototype #prototypeTitle {
  margin: 0 !important;
  text-align: left !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(18px, 2.1vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

#page-studio #studio-inner .studioPrototypeFlow,
#page-studio #studio-inner .prototypeFlow,
#page-studio #studio-inner .studioPrototypeChooser {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#page-studio #studio-inner .prototypeGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

#page-studio #studio-inner .prototypeCard {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
  padding: 10px !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 12px !important;
  background: var(--bg-card, #fffaf3) !important;
  color: var(--text-primary, #2c2016) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#page-studio #studio-inner .prototypeCard:not(.isSelected) {
  opacity: 1 !important;
  filter: none !important;
}

#page-studio #studio-inner .prototypeCard:hover {
  border-color: rgba(196, 120, 58, 0.55) !important;
  box-shadow: 0 8px 22px rgba(44, 32, 22, 0.08) !important;
  transform: translateY(-1px) !important;
}

#page-studio #studio-inner .prototypeCard.isSelected {
  border-color: var(--accent, #c4783a) !important;
  box-shadow: 0 0 0 3px rgba(196, 120, 58, 0.22) !important;
  transform: none !important;
}

#page-studio #studio-inner .prototypeImageWrap {
  aspect-ratio: 1 !important;
  border-radius: 10px !important;
  background: #f5efe6 !important;
}

#page-studio #studio-inner .prototypeCard strong {
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--text-primary, #2c2016) !important;
}

#page-studio #studio-inner .protoHistoryAbove {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
}

#page-studio #studio-inner .genHistoryBtns {
  justify-content: flex-start !important;
}

#page-studio #studio-inner .genHistoryTimeBtn {
  max-width: 112px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}

#page-studio #studio-inner .protoBottomBar {
  display: grid !important;
  gap: 10px !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border, #e0d8cc) !important;
}

#page-studio #studio-inner #prototypeRetryNote {
  min-height: 16px !important;
  margin: 0 !important;
  text-align: center !important;
  color: var(--text-muted, #9e8e78) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-studio #studio-inner .protoActionsRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#page-studio #studio-inner .protoConfirmBtn,
#page-studio #studio-inner .protoRetryBtn {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

#page-studio #studio-inner .protoConfirmBtn {
  min-width: 0 !important;
}

#page-studio #studio-inner .protoRetryBtn {
  min-width: 142px !important;
}

#page-studio #studio-inner .protoConfirmBtn:not(:disabled) {
  opacity: 1 !important;
}

#prototypeGrid.shake {
  animation: protoShake 0.45s ease;
}

/* Tier selection: confirmed image card is compact, then 2 paid cards.
   The single exploration card only appears in generation-replenish mode. */
#page-studio #studio-inner .studioStateTier {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#page-studio #studio-inner .studioTierHeader {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 126px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 14px !important;
  background: var(--mint, #f1e7d6) !important;
  text-align: left !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .studioTierHeader {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  border: 1px solid rgba(44, 32, 22, 0.08) !important;
  border-radius: 12px !important;
  background: #f8f2ea !important;
  object-fit: contain !important;
  padding: 6px !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge[hidden] {
  display: none !important;
}

#page-studio #studio-inner .studioTierHeaderText {
  min-width: 0 !important;
  max-width: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 84px !important;
  text-align: left !important;
}

#page-studio #studio-inner .studioTierEyebrow {
  margin: 0 0 5px !important;
  color: var(--text-muted, #8d8172) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

#page-studio #studio-inner .studioTierName {
  margin: 0 !important;
  color: var(--text-primary, #2c2016) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(21px, 2.4vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

#page-studio #studio-inner .studioTierSub {
  margin: 6px 0 0 !important;
  color: var(--text-secondary, #5c4f3d) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#page-studio #studio-inner .studioTierGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .studioTierGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-studio #studio-inner .tierCard[hidden] {
  display: none !important;
}

#page-studio #studio-inner .tierCard {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 276px !important;
  padding: 17px 18px !important;
  overflow: visible !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 14px !important;
  background: var(--bg-card, #fffaf3) !important;
  box-shadow: none !important;
}

#page-studio #studio-inner .tierCard.recommended {
  border-color: var(--bg-dark, #2c2016) !important;
  background: #fff8ef !important;
  box-shadow: inset 0 3px 0 var(--accent, #c4783a) !important;
}

#page-studio #studio-inner .tierCard.recommended::before {
  display: none !important;
}

#page-studio #studio-inner .tierCardSingle {
  opacity: 1 !important;
  border-style: dashed !important;
}

#page-studio #studio-inner .tierCard h2 {
  margin: 4px 0 0 !important;
  color: var(--text-primary, #2c2016) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(27px, 3vw, 34px) !important;
  font-weight: 500 !important;
}

#page-studio #studio-inner .tierCard ul {
  display: grid !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-studio #studio-inner .tierCard li {
  color: var(--text-secondary, #5c4f3d) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#page-studio #studio-inner .tierCard button {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: auto !important;
  font-size: 13px !important;
}

#page-studio #studio-inner .recommendBadge {
  top: 12px !important;
  right: 14px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}

#page-studio #studio-inner .tierFootnote {
  margin: 0 !important;
  padding: 0 4px !important;
  color: var(--text-muted, #9e8e78) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* Done state: revert to the earlier left-image / right-copy structure,
   with cleaner type and a designed delivery block. */
#page-studio #studio-inner .studioStateDone {
  display: flex !important;
  flex-direction: column !important;
}

#page-studio #studio-inner .studioStateDone .successPanel {
  display: grid !important;
  grid-template-columns: minmax(230px, 0.84fr) minmax(0, 1.16fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 360px !important;
  height: 360px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 14px !important;
  background: var(--bg-card, #fffaf3) !important;
  box-shadow: none !important;
  text-align: left !important;
}

#page-studio #studio-inner .doneImageCol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 310px !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 0 !important;
  background: var(--bg, #f5f0e8) !important;
}

#page-studio #studio-inner .doneImageCol img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 18px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .doneImageCol .doneActionCanvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg, #f5f0e8) !important;
  image-rendering: pixelated !important;
}

#page-studio #studio-inner .doneImagePlaceholder[hidden] {
  display: none !important;
}

#page-studio #studio-inner .doneContentCol {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 18px 18px !important;
  overflow: hidden !important;
  text-align: left !important;
}

#page-studio #studio-inner #doneTitle {
  margin: 0 0 3px !important;
  color: var(--text-primary, #2c2016) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#page-studio #studio-inner .doneSummary {
  margin: 0 !important;
  color: var(--text-muted, #8d8172) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#page-studio #studio-inner .doneCodeBlock {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
}

#page-studio #studio-inner .doneCodeBlock .petCodeDisplay {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(196, 120, 58, 0.24) !important;
  border-radius: 12px !important;
  background: var(--mint, #f1e7d6) !important;
  color: var(--text-primary, #2c2016) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: clamp(16px, 1.7vw, 21px) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#page-studio #studio-inner .doneCodeRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px !important;
  gap: 8px !important;
  width: 100% !important;
}

#page-studio #studio-inner .doneCodeInput {
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--accent, #c4783a) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  text-align: center !important;
}

#page-studio #studio-inner #copyPetCodeButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  text-align: center !important;
}

#page-studio #studio-inner .doneCodeBlock .successNotice {
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(196, 120, 58, 0.18) !important;
  border-radius: 10px !important;
  background: #fff8ef !important;
  color: var(--text-muted, #8d8172) !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

#page-studio #studio-inner .doneDeliveryGroup {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 12px !important;
  background: #faf7f2 !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .doneAnimSelect {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border, #e0d8cc) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

#page-studio #studio-inner .doneAnimSelect[hidden] {
  display: none !important;
}

#page-studio #studio-inner .doneAnimSelect label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

#page-studio #studio-inner .doneAnimSelect select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-primary, #2c2016) !important;
  font-size: 13px !important;
  padding: 0 38px 0 14px !important;
}

#page-studio #studio-inner .doneActionCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg, #f5f0e8) !important;
  image-rendering: pixelated !important;
}

#page-studio #studio-inner .doneActionCanvas[hidden] {
  display: none !important;
}

#page-studio #studio-inner .successActions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px !important;
}

#page-studio #studio-inner .successActions button {
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
}

#page-studio #studio-inner .doneDlPack {
  border-color: transparent !important;
  background: var(--bg-dark, #2c2016) !important;
  color: #f5f0e8 !important;
}

#page-studio #studio-inner .doneDlClient {
  border: 1px solid var(--border, #e0d8cc) !important;
  background: #fff !important;
  color: var(--text-primary, #2c2016) !important;
}

#page-studio #studio-inner .upgradeBox {
  margin: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border, #e0d8cc) !important;
}

#page-studio #studio-inner .upgradeBox .secondaryButton {
  width: 100% !important;
  min-height: 40px !important;
  font-size: 12px !important;
}

@media (max-width: 980px) {
  #page-studio #studio-inner .prototypeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #page-studio #studio-inner .studioStateTier.isGenReplenish .studioTierGrid {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .studioStateDone .successPanel {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .doneImageCol {
    min-height: 260px !important;
    max-height: 360px !important;
  }
}

@media (max-width: 720px) {
  #page-studio .pageIntro {
    padding: 34px 20px 0 !important;
  }

  #page-studio #studio-inner .studioStatePrototype {
    padding: 18px !important;
  }

  #page-studio #studio-inner .prototypeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-studio #studio-inner .studioTierHeader {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 104px !important;
    padding: 14px !important;
  }

  #page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
    width: 72px !important;
    height: 72px !important;
  }

  #page-studio #studio-inner .studioTierGrid,
  #page-studio #studio-inner .studioStateTier.isGenReplenish .studioTierGrid {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .tierCard {
    min-height: auto !important;
  }
}

@media (max-width: 520px) {
  #page-studio #studio-inner .protoActionsRow,
  #page-studio #studio-inner .successActions,
  #page-studio #studio-inner .doneCodeRow {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .protoRetryBtn {
    min-width: 0 !important;
  }

  #page-studio #studio-inner .studioTierHeader {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
    width: 80px !important;
    height: 80px !important;
  }

  #page-studio #studio-inner .doneContentCol {
    padding: 18px 16px !important;
  }

  #page-studio #studio-inner .doneAnimSelect {
    grid-template-columns: 1fr !important;
    padding: 8px 10px !important;
  }
}

/* Final QA balance: keep the flow compact, but restore the accepted large candidate cards. */
#page-studio #studio-inner .studioStatePrototype {
  gap: 12px !important;
  padding: 22px !important;
}

#page-studio #studio-inner .prototypeGrid {
  column-gap: 12px !important;
  row-gap: 10px !important;
}

#page-studio #studio-inner .prototypeCard {
  gap: 8px !important;
  min-height: 0 !important;
  padding: 10px !important;
}

#page-studio #studio-inner .prototypeImageWrap {
  aspect-ratio: 1 !important;
}

#page-studio #studio-inner .prototypeCard strong {
  line-height: 1.2 !important;
}

#page-studio #studio-inner .protoBottomBar {
  gap: 8px !important;
  padding-top: 10px !important;
}

#page-studio #studio-inner .protoHistoryAbove {
  min-height: 20px !important;
}

@media (min-width: 981px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    align-items: start !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    max-width: 1120px !important;
    gap: 24px !important;
    padding-top: 24px !important;
  }

  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel {
    height: 532px !important;
    min-height: 532px !important;
    max-height: 532px !important;
  }

  #page-studio #studio-inner .studioPanel {
    padding: 28px 24px !important;
  }

  #page-studio #studio-inner .previewPanel {
    padding: 20px 22px !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: auto !important;
    min-height: 532px !important;
    max-height: none !important;
  }

  #page-studio #studio-inner .studioPanel .sectionHeader {
    margin-bottom: 14px !important;
  }

  #page-studio #studio-inner .formGrid {
    gap: 14px !important;
  }

  #page-studio #studio-inner .fieldPair {
    gap: 12px !important;
  }
}

#page-studio #studio-inner .studioTierHeader {
  flex: 0 0 auto !important;
  min-height: 108px !important;
  padding: 14px 18px !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 78px !important;
  height: 78px !important;
}

#page-studio #studio-inner .tierCard {
  min-height: 276px !important;
  padding: 17px 18px !important;
}

#page-studio #studio-inner .studioTierGrid {
  gap: 12px !important;
}

#page-studio #studio-inner .doneDeliveryGroup {
  padding: 9px !important;
}

@media (max-width: 980px) {
  #page-studio #studio-inner {
    grid-template-columns: 1fr !important;
  }

  #page-studio #studio-inner .previewPanel {
    order: -1 !important;
  }

  #page-studio #studio-inner .studioPanel {
    order: 1 !important;
  }

  #page-studio #studio-inner .studioStatePrototype {
    padding: 18px !important;
  }
}

@media (max-width: 520px) {
  #page-studio #studio-inner .protoActionsRow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #page-studio #studio-inner .protoConfirmBtn,
  #page-studio #studio-inner .protoRetryBtn {
    min-width: 0 !important;
    padding-inline: 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  #page-studio #studio-inner .prototypeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #page-studio #studio-inner .prototypeCard {
    padding: 7px !important;
  }

  #page-studio #studio-inner .studioTierHeader {
    min-height: auto !important;
  }
}

/* UX-WORKBENCH v11: compact candidate parity and direct-pay flow polish. */
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
  padding: 12px 18px 14px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioStatePrototype {
  gap: 9px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle {
  margin: 0 0 2px !important;
  min-height: 0 !important;
  color: var(--text-primary, #2c2016) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioPrototypeFlow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeFlow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioPrototypeChooser {
  gap: 9px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 630px !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard {
  gap: 7px !important;
  min-height: 0 !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: #fffaf3 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap {
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
  background: #f4efe7 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap img {
  width: 100% !important;
  height: 100% !important;
  padding: 4px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  transform: none !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard strong {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow {
  grid-template-columns: minmax(0, 1fr) minmax(176px, 0.78fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 630px !important;
  margin-top: 0 !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoConfirmBtn,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoRetryBtn {
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove {
  min-height: 18px !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 630px !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  width: 100% !important;
  max-width: 630px !important;
  margin-inline: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--border, #e0d8cc) !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeRetryNote {
  min-height: 14px !important;
  font-size: 12px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .sectionHeader {
  margin-bottom: 14px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
  min-height: 0 !important;
  height: clamp(278px, 32vw, 360px) !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview {
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestones {
  margin-top: 14px !important;
}

@media (min-width: 1180px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    max-width: 1120px !important;
    gap: 24px !important;
  }

  #page-studio #studio-inner .previewPanel {
    padding-inline: 22px !important;
  }
}

@media (min-width: 981px) and (max-width: 1179px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 600px !important;
  }
}

@media (max-width: 980px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 620px !important;
  }
}

@media (max-width: 720px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    padding: 12px !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    max-width: 430px !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    max-width: 430px !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
    max-width: 430px !important;
  }
}

@media (max-width: 420px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard {
    padding: 7px !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard strong,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoConfirmBtn,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoRetryBtn {
    font-size: 12px !important;
  }
}

/* UX-WORKBENCH v13: align prototype columns and normalize title scale. */
@media (min-width: 981px) {
  #page-studio #studio-inner:has(.previewPanel[data-studio-state="prototype"]),
  #page-studio .studioGrid:has(.previewPanel[data-studio-state="prototype"]) {
    align-items: stretch !important;
  }

  #page-studio #studio-inner:has(.previewPanel[data-studio-state="prototype"]) .studioPanel {
    align-self: stretch !important;
    height: auto !important;
    min-height: 532px !important;
    max-height: none !important;
  }
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle,
#page-studio #studio-inner #doneTitle {
  font-family: "Lora", Georgia, serif !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* UX-WORKBENCH v14: library/install flow alignment after accepted studio version. */
#page-library .pageIntro,
#page-install .installHero,
#page-install .installDownloads,
#page-install .installGuide {
  max-width: 1120px !important;
}

#page-library .pageIntro {
  padding-bottom: 18px !important;
}

#page-library .pageIntro h1,
#page-install .installHeroText h1 {
  letter-spacing: 0 !important;
}

#page-library .libraryToolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: 1120px !important;
  margin: 0 auto 18px !important;
  padding: 0 48px !important;
}

#page-library .libraryToolbar strong {
  color: #5c4f3d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#page-library .petGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 48px 56px !important;
  gap: 16px !important;
}

#page-library .petCard {
  border: 1px solid #e0d8cc !important;
  border-radius: 8px !important;
  background: #fffaf3 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#page-library .petCardButton {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  align-items: stretch !important;
}

#page-library .petThumb {
  height: 174px !important;
  background: #f4efe7 !important;
  border-bottom: 1px solid #e0d8cc !important;
}

#page-library .petThumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 12px !important;
  image-rendering: auto !important;
}

#page-library .petThumbPlaceholder {
  display: grid;
  place-items: center;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border: 1px dashed #d6caba;
  border-radius: 8px;
  color: #9e8e78;
  font-size: 13px;
}

#page-library .petMeta {
  display: grid !important;
  gap: 5px !important;
  padding: 12px 14px 10px !important;
}

#page-library .petMeta strong {
  color: #2c2016 !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-library .petMeta span,
#page-library .petMeta small {
  color: #7a6e5a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-library .petActions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 0 14px 14px !important;
}

#page-library .petActions:empty {
  display: none !important;
}

#page-library .petActions button,
#page-library .petActions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  border: 1px solid #e0d8cc !important;
  border-radius: 8px !important;
  background: #faf7f0 !important;
  color: #2c2016 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#page-library .petActions button:hover,
#page-library .petActions a:hover {
  border-color: #c4783a !important;
  color: #c4783a !important;
}

#page-library .libraryEmptyWarm {
  border-radius: 8px !important;
  min-height: 320px !important;
}

#pet-modal-overlay {
  background: rgba(44, 32, 22, 0.42) !important;
  z-index: 1000 !important;
}

#pet-modal-card {
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  border: 1px solid #e0d8cc !important;
  border-radius: 8px !important;
  background: #fffaf3 !important;
  box-shadow: 0 18px 42px rgba(44, 32, 22, 0.18) !important;
}

#pet-modal-img-area {
  height: 214px !important;
  background: #f4efe7 !important;
  border-bottom: 1px solid #e0d8cc !important;
}

#pet-modal-img {
  max-width: 86% !important;
  max-height: 184px !important;
  padding: 4px !important;
  image-rendering: auto !important;
}

#pet-modal-name {
  color: #2c2016 !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#pet-modal-date,
#pet-modal-tier {
  color: #7a6e5a !important;
}

#pet-modal-code {
  border: 1px solid #e0d8cc !important;
  background: #f5efe6 !important;
  color: #2c2016 !important;
  letter-spacing: 0.04em !important;
}

#pet-modal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#pet-modal-actions button {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

#page-install .installHero {
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1fr) !important;
  gap: 34px !important;
  padding: 42px 48px 26px !important;
}

#page-install .installHeroText p {
  max-width: 430px !important;
}

#page-install .installMock {
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(44, 32, 22, 0.14) !important;
}

#page-install .installDownloads {
  padding-bottom: 28px !important;
}

#page-install .installDownloadsHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

#page-install .installDownloadsHead h2 {
  margin: 0;
  color: #2c2016;
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

#page-install .installDownloadsHead .installEyebrow {
  margin-bottom: 7px;
}

#page-install .installDownloadsHead .secondaryButton {
  flex-shrink: 0;
}

#page-install .installDownloads .releaseGrid {
  gap: 14px !important;
}

#page-install .installDownloads .releaseGroupLabel {
  margin-left: 0 !important;
}

#page-install .installDownloads .releaseCard,
#page-install .installDownloads .releaseCardMain,
#page-install .installDownloads .releaseCardSmall {
  border-radius: 8px !important;
  padding: 18px !important;
  gap: 14px !important;
}

#page-install .installDownloads .releaseCard--primary,
#page-install .installDownloads .releaseCardMain {
  padding: 22px !important;
}

#page-install .installDownloads .releaseCard--primary strong,
#page-install .installDownloads .releaseCardMain strong {
  font-size: 20px !important;
}

#page-install .installDownloads .releaseButton {
  border-radius: 8px !important;
  white-space: nowrap !important;
}

#page-install .installGuide {
  padding-bottom: 48px !important;
}

#page-install .installGuideSteps {
  gap: 14px !important;
}

#page-install .installGuideStep {
  min-height: 116px;
  padding: 16px;
  border: 1px solid #e0d8cc;
  border-radius: 8px;
  background: #faf7f0;
}

#page-install .installGuideNum {
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  .navLinks {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .navLinks::-webkit-scrollbar {
    display: none !important;
  }

  #page-library .libraryToolbar,
  #page-library .petGrid,
  #page-install .installHero,
  #page-install .installDownloads,
  #page-install .installGuide {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #page-library .petGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-install .installHero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

@media (max-width: 640px) {
  #page-library .libraryToolbar,
  #page-install .installDownloadsHead {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #page-library .petGrid {
    grid-template-columns: 1fr !important;
  }

  #page-library .petThumb {
    height: 190px !important;
  }

  #page-install .installHero,
  #page-install .installDownloads,
  #page-install .installGuide {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #page-install .installHero {
    padding-top: 28px !important;
  }

  #page-install .installHeroVisual {
    display: none !important;
  }

  #page-install .installDownloads .releaseCard,
  #page-install .installDownloads .releaseCardMain,
  #page-install .installDownloads .releaseCardSmall {
    grid-template-columns: 1fr !important;
  }

  #page-install .installDownloads .releaseCardFoot {
    align-items: stretch !important;
  }

  #page-install .installDownloads .releaseButton {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #page-install .installGuideSteps {
    grid-template-columns: 1fr !important;
  }

  #pet-modal-actions {
    grid-template-columns: 1fr !important;
  }
}

/* UX-WORKBENCH v15: lock non-candidate workbench height and soften studio copy. */
#page-studio {
  --studio-workbench-h: 532px;
  --studio-title-warm: #9a7442;
  --studio-title-soft: #7b5d36;
}

@media (min-width: 981px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    align-items: stretch !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    max-width: 1120px !important;
    gap: 24px !important;
  }

  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel {
    height: var(--studio-workbench-h) !important;
    min-height: var(--studio-workbench-h) !important;
    max-height: var(--studio-workbench-h) !important;
    overflow: hidden !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: auto !important;
    min-height: var(--studio-workbench-h) !important;
    max-height: none !important;
  }

  #page-studio #studio-inner .previewPanel:not([data-studio-state="prototype"]) .studioState {
    height: 100% !important;
  }
}

#page-studio #studio-inner .fileVisual {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] {
  padding: 18px 22px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .sectionHeader {
  margin-bottom: 10px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
  height: 348px !important;
  min-height: 348px !important;
  flex: 0 0 348px !important;
  margin-top: 0 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestones {
  margin-top: 12px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle,
#page-studio #studio-inner #previewTitle,
#page-studio #studio-inner #doneTitle,
#page-studio #studio-inner .studioPanel .sectionHeader h2,
#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-warm) !important;
  font-family: "Noto Serif SC", "Lora", "Songti SC", "Microsoft YaHei", serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle {
  font-size: clamp(18px, 1.8vw, 21px) !important;
  line-height: 1.22 !important;
}

#page-studio #studio-inner .studioStateTier {
  height: 100% !important;
  gap: 12px !important;
}

#page-studio #studio-inner .studioTierHeader {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 96px !important;
  padding: 13px 16px !important;
  border-radius: 10px !important;
  background: #faf4e9 !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 70px !important;
  height: 70px !important;
  padding: 5px !important;
  border-radius: 10px !important;
}

#page-studio #studio-inner .studioTierHeaderText {
  min-height: 0 !important;
  max-width: none !important;
  justify-content: center !important;
}

#page-studio #studio-inner .studioTierEyebrow {
  margin-bottom: 4px !important;
  color: var(--studio-title-soft) !important;
  font-size: 11.5px !important;
}

#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-soft) !important;
  font-size: clamp(19px, 1.9vw, 23px) !important;
  line-height: 1.18 !important;
}

#page-studio #studio-inner .studioTierSub {
  margin-top: 5px !important;
  color: #655844 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-studio #studio-inner .studioTierGrid {
  flex: 1 1 auto !important;
  gap: 12px !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .tierCard {
  min-height: 0 !important;
  padding: 15px 16px !important;
  gap: 8px !important;
  border-radius: 10px !important;
}

#page-studio #studio-inner .tierCard h2 {
  font-size: clamp(24px, 2.5vw, 30px) !important;
  line-height: 1.05 !important;
}

#page-studio #studio-inner .tierCard ul {
  flex: 0 0 auto !important;
  align-content: start !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
}

#page-studio #studio-inner .tierCard li {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

#page-studio #studio-inner .tierCard button {
  min-height: 40px !important;
}

@media (max-width: 980px) {
  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
    height: clamp(280px, 48vw, 348px) !important;
    min-height: clamp(280px, 48vw, 348px) !important;
    flex-basis: clamp(280px, 48vw, 348px) !important;
  }
}

/* UX-WORKBENCH v17: progress motion, compact candidate/tier balance. */
#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .sectionHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] #previewTitle {
  font-size: 21px !important;
  line-height: 1.16 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genSubHint {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.42 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
  position: relative !important;
  height: 386px !important;
  min-height: 386px !important;
  flex: 0 0 386px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 14px;
  border: 1px solid rgba(154, 116, 66, 0.14);
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 46%, transparent 72%),
    radial-gradient(circle at 50% 62%, rgba(154, 116, 66, 0.13), transparent 36%);
  transform: translateX(-65%);
  animation: petdexStageSweep 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] #petCanvas,
#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview {
  z-index: 3 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview:not([hidden]) {
  animation: petdexPreviewBreath 1.9s ease-in-out infinite;
}

#page-studio #studio-inner .genCurrentDesc {
  flex: 0 0 auto !important;
  margin: 8px 0 0 !important;
  min-height: 18px !important;
  color: #806a48 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestones {
  margin-top: 8px !important;
}

#page-studio #studio-inner .genMilestoneIcon {
  position: relative;
}

#page-studio #studio-inner .genMilestone[data-status="active"] .genMilestoneIcon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgba(154, 116, 66, 0.3);
  animation: petdexPulseRing 1.35s ease-out infinite;
}

#page-studio #studio-inner .genMilestoneLine.done {
  background: linear-gradient(90deg, #9a7442, #78a66a) !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
  padding: 13px 18px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioStatePrototype {
  gap: 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle {
  font-size: 20px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
  width: min(100%, 570px) !important;
  max-width: 570px !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard {
  padding: 7px !important;
  gap: 5px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap {
  aspect-ratio: 1.06 / 1 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap img {
  padding: 5px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard strong {
  font-size: 12.5px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  width: min(100%, 570px) !important;
  max-width: 570px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow {
  gap: 9px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoConfirmBtn,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoRetryBtn {
  min-height: 38px !important;
  font-size: 12.5px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove {
  flex-basis: 16px !important;
  min-height: 16px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  padding-top: 6px !important;
}

#page-studio #studio-inner .studioStateTier {
  gap: 10px !important;
}

#page-studio #studio-inner .studioTierHeader {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  min-height: 88px !important;
  padding: 11px 14px !important;
  gap: 12px !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 66px !important;
  height: 66px !important;
}

#page-studio #studio-inner .studioTierName {
  font-size: 20px !important;
  line-height: 1.18 !important;
}

#page-studio #studio-inner .studioTierSub {
  max-width: 42em !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

#page-studio #studio-inner .studioTierGrid {
  gap: 11px !important;
}

#page-studio #studio-inner .tierCard {
  min-height: 272px !important;
  padding: 14px 16px !important;
  gap: 8px !important;
}

#page-studio #studio-inner .tierCard h2 {
  font-size: 25px !important;
}

#page-studio #studio-inner .tierCard li {
  font-size: 11.5px !important;
  line-height: 1.38 !important;
}

#page-studio #studio-inner .tierCard button {
  min-height: 38px !important;
}

#page-studio #studio-inner .tierFootnote {
  margin-top: 2px !important;
  font-size: 11.5px !important;
}

@keyframes petdexStageSweep {
  0% { transform: translateX(-65%); opacity: 0.15; }
  42% { opacity: 0.75; }
  100% { transform: translateX(65%); opacity: 0.18; }
}

@keyframes petdexPreviewBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.015); }
}

@keyframes petdexPulseRing {
  0% { transform: scale(0.9); opacity: 0.65; }
  100% { transform: scale(1.28); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage::after,
  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview:not([hidden]),
  #page-studio #studio-inner .genMilestone[data-status="active"] .genMilestoneIcon::after {
    animation: none !important;
  }
}

/* Account dropdown: keep auth in the right corner without pushing the center nav. */
@media (min-width: 1041px) {
  .topbar {
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
  }

  .brand {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .navLinks {
    grid-column: 2 !important;
    justify-self: center !important;
    order: 0 !important;
  }

  .topActions {
    grid-column: 3 !important;
    justify-self: end !important;
  }
}

.accountMenuHost {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topButton.authButton {
  gap: 8px;
  width: 132px;
  max-width: 132px;
  padding-left: 14px !important;
  padding-right: 14px !important;
  white-space: nowrap;
}

.authButtonLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topButton.authButton::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease, margin-top 160ms ease;
}

.topButton.authButton[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.authOverlay,
.accountOverlay {
  position: absolute !important;
  inset: auto 0 auto auto !important;
  top: calc(100% + 10px) !important;
  z-index: 10050 !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.authOverlay[hidden],
.accountOverlay[hidden] {
  display: none !important;
}

.authOverlay {
  width: min(420px, calc(100vw - 32px));
}

.accountOverlay {
  width: min(560px, calc(100vw - 32px));
}

.authCard,
.accountCard {
  width: 100% !important;
  border: 1px solid rgba(154, 116, 66, 0.18) !important;
  border-radius: 16px !important;
  background: #fffaf1 !important;
  box-shadow: 0 18px 48px rgba(44, 32, 18, 0.18) !important;
}

.authCard {
  padding: 18px !important;
}

.authCard h3,
.accountHead h3 {
  font-size: 20px !important;
}

.authCard p {
  margin-bottom: 14px !important;
  font-size: 13px;
}

.authRow {
  grid-template-columns: 1fr !important;
}

.authPasswordField {
  position: relative;
  display: block;
}

.authPasswordField input {
  padding-right: 64px !important;
}

.authInlineButton,
.authTextButton {
  border: 0;
  background: transparent;
  color: #7c5c2f;
  cursor: pointer;
  font: inherit;
}

.authInlineButton {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 7px;
}

.authInlineButton:hover,
.authTextButton:hover {
  background: rgba(154, 116, 66, 0.1);
}

.authActions {
  grid-template-columns: 1fr 1fr !important;
}

.authDemoFillButton {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  border: 1px dashed rgba(154, 116, 66, 0.34);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-primary, #2c2016);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.authDemoFillButton:hover {
  border-style: solid;
  background: rgba(196, 120, 58, 0.08);
}

.authTextButton {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 8px;
}

.accountCard {
  max-height: min(720px, calc(100vh - 92px)) !important;
  padding: 18px !important;
}

.accountQuota {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px 12px !important;
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

.accountQuota span {
  align-self: end;
}

.accountQuota strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 30px !important;
  line-height: 1 !important;
  text-align: right;
}

.accountQuota small {
  grid-column: 1;
  line-height: 1.25;
}

.accountSecurity {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(154, 116, 66, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.46);
}

.accountSecurity summary {
  cursor: pointer;
  color: var(--text-primary, #2c2016);
  font-size: 13px;
  font-weight: 700;
}

.accountPasswordGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
  align-items: end;
}

.accountSecurity label span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary, #5c4f3d);
  font-size: 12px;
}

.accountSecurity input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(154, 116, 66, 0.22);
  border-radius: 10px;
  background: #fffaf1;
  color: var(--text-primary, #2c2016);
  font: inherit;
  padding: 8px 10px;
}

.accountSecurityActions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.accountSecurityActions .secondaryButton {
  min-width: 88px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.accountSecurityMessage {
  min-width: 0;
  color: var(--text-secondary, #5c4f3d);
  font-size: 12px;
  line-height: 1.35;
}

.accountSecurityMessage[data-tone="success"] {
  color: #287a42;
}

.accountSecurityMessage[data-tone="error"] {
  color: #9b3a24;
}

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

.accountSection {
  min-width: 0;
  border: 1px solid rgba(154, 116, 66, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  padding: 12px;
}

.accountSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-secondary, #5c4f3d);
  font-size: 12px;
}

.accountSectionHead strong {
  color: var(--text-primary, #2c2016);
  font-size: 13px;
}

.accountMiniList {
  display: grid;
  gap: 7px;
}

.accountMiniItem {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  background: rgba(250, 247, 242, 0.78);
}

.accountMiniItem div {
  min-width: 0;
}

.accountSectionDownloads {
  grid-column: 1 / -1;
}

.accountDownloadItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 14px;
  align-items: center;
}

.accountDownloadCopy {
  min-width: 0;
}

.accountMiniItem strong,
.accountMiniItem span,
.accountMiniItem small {
  display: block;
}

.accountMiniItem strong {
  overflow: hidden;
  color: var(--text-primary, #2c2016);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountMiniItem span,
.accountMiniItem small,
.accountEmpty {
  color: var(--text-secondary, #5c4f3d);
  font-size: 12px;
  line-height: 1.35;
}

/* 右侧分类小标签("艺术相册"等)不能被左侧长文案挤换行成两行(2026-06-10 owner 实测排版乱)。
   固定不收缩 + 不换行, 让它始终一行。 */
.accountMiniItem small {
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}

.accountEmpty {
  margin: 0;
}

.accountCodeButton,
.accountMiniActions button {
  border: 1px solid rgba(154, 116, 66, 0.22);
  border-radius: 8px;
  background: #fffaf1;
  color: var(--text-primary, #2c2016);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.accountCodeButton {
  max-width: 100%;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
}

.accountMiniActions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: none;
}

.accountMiniActions button {
  min-height: 32px;
  white-space: nowrap;
}

.accountPager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
  color: var(--text-secondary, #5c4f3d);
  font-size: 12px;
}

.accountPager button {
  border: 1px solid rgba(154, 116, 66, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.82);
  color: var(--text-primary, #2c2016);
  cursor: pointer;
  font: inherit;
  padding: 4px 8px;
}

.accountPager button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.accountQuotaHint {
  margin: 12px 0 !important;
}

@media (max-width: 900px) {
  .authOverlay,
  .accountOverlay {
    position: fixed !important;
    top: 70px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
  }

  .accountSectionGrid {
    grid-template-columns: 1fr;
  }

  .accountDownloadItem {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    align-items: stretch;
  }

  .accountMiniActions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .accountPasswordGrid {
    grid-template-columns: 1fr;
  }

  .accountSecurityActions {
    align-items: flex-start;
    flex-direction: column;
  }

  .accountSecurityActions .secondaryButton {
    width: 100%;
  }
}

@media (max-width: 560px) {
  #page-studio #emptyGenNote {
    width: min(92%, 360px) !important;
    max-width: 360px !important;
  }

  #page-studio #emptyGenNoteText {
    white-space: normal;
  }
}

/* UX-WORKBENCH v16: keep every desktop studio flow on one accepted workbench size. */
#page-studio {
  --studio-workbench-h: 640px;
  --studio-title-warm: #9a7442;
  --studio-title-soft: #73572f;
}

@media (min-width: 981px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    align-items: stretch !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    max-width: 1120px !important;
    gap: 24px !important;
  }

  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: var(--studio-workbench-h) !important;
    min-height: var(--studio-workbench-h) !important;
    max-height: var(--studio-workbench-h) !important;
    overflow: hidden !important;
  }

  #page-studio #studio-inner .previewPanel .studioState,
  #page-studio #studio-inner .previewPanel .studio-phase,
  #page-studio #studio-inner .previewPanel:not([data-studio-state="prototype"]) .studioState {
    height: 100% !important;
    min-height: 0 !important;
  }
}

#page-studio #studio-inner .fileVisual {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  padding: 12px 14px !important;
}

#page-studio #studio-inner .filePreview {
  width: 72px !important;
  height: 72px !important;
}

#page-studio #studio-inner .studioPanel .sectionHeader h2,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle,
#page-studio #studio-inner #previewTitle,
#page-studio #studio-inner #doneTitle,
#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-warm) !important;
  font-family: "Noto Serif SC", "Lora", "Songti SC", "Microsoft YaHei", serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
  padding: 14px 18px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioStatePrototype {
  justify-content: start !important;
  gap: 9px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioPrototypeFlow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeFlow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioPrototypeChooser {
  min-height: 0 !important;
  gap: 9px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
  flex: 0 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  margin-inline: auto !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard {
  gap: 7px !important;
  padding: 8px !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap {
  aspect-ratio: 1 / 1 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow {
  flex: 0 0 auto !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoConfirmBtn,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoRetryBtn {
  min-height: 40px !important;
  padding-inline: 12px !important;
  font-size: 13px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove {
  flex: 0 0 18px !important;
  min-height: 18px !important;
  padding-top: 0 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  flex: 0 0 auto !important;
  padding-top: 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] {
  padding: 18px 22px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .sectionHeader {
  margin-bottom: 10px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
  height: 432px !important;
  min-height: 432px !important;
  flex: 0 0 432px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestones {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
}

#page-studio #studio-inner .studioStateTier {
  height: 100% !important;
  min-height: 0 !important;
  gap: 12px !important;
  overflow: hidden !important;
  justify-content: start !important;
}

#page-studio #studio-inner .studioTierHeader {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 100px !important;
  padding: 13px 16px !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 72px !important;
  height: 72px !important;
  padding: 5px !important;
}

#page-studio #studio-inner .studioTierHeaderText {
  justify-content: center !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-soft) !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
}

#page-studio #studio-inner .studioTierSub {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-studio #studio-inner .studioTierGrid {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  gap: 12px !important;
  align-items: start !important;
}

#page-studio #studio-inner .tierCard {
  min-height: 300px !important;
  padding: 16px 18px !important;
  gap: 10px !important;
}

#page-studio #studio-inner .tierCard h2 {
  font-size: 29px !important;
  line-height: 1.05 !important;
}

#page-studio #studio-inner .tierCard ul {
  gap: 6px !important;
}

#page-studio #studio-inner .tierCard li {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

#page-studio #studio-inner .tierCard button {
  min-height: 40px !important;
  margin-top: 8px !important;
}

#page-studio #studio-inner .studioStateDone,
#page-studio #studio-inner .studioStateDone .successPanel {
  height: 100% !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .studioStateDone .successPanel {
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr) !important;
}

#page-studio #studio-inner .doneImageCol {
  min-height: 0 !important;
}

#page-studio #studio-inner .doneContentCol {
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px !important;
}

#page-studio #studio-inner .doneDeliveryGroup {
  margin-top: 0 !important;
}

#page-library .petGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1120px !important;
  gap: 14px !important;
}

#page-library .petThumb {
  display: grid !important;
  place-items: center !important;
  height: clamp(196px, 17vw, 224px) !important;
  overflow: hidden !important;
}

#page-library .petThumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px !important;
}

@media (max-width: 900px) {
  #page-library .petGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-library .petGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
    height: clamp(280px, 48vw, 420px) !important;
    min-height: clamp(280px, 48vw, 420px) !important;
    flex-basis: clamp(280px, 48vw, 420px) !important;
  }
}

/* UX-WORKBENCH v18: final acceptance overrides. Keep this block last. */
#page-studio {
  --studio-workbench-h: 532px;
  --studio-stage-h: 332px;
  --studio-title-warm: #9a7442;
  --studio-title-soft: #73572f;
}

@media (min-width: 981px) {
  #page-studio #studio-inner,
  #page-studio .studioGrid {
    max-width: 1120px !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel {
    height: var(--studio-workbench-h) !important;
    min-height: var(--studio-workbench-h) !important;
    max-height: var(--studio-workbench-h) !important;
    overflow: hidden !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: auto !important;
    min-height: var(--studio-workbench-h) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page-studio #studio-inner .previewPanel:not([data-studio-state="prototype"]) .studioState,
  #page-studio #studio-inner .previewPanel:not([data-studio-state="prototype"]) .studio-phase {
    height: 100% !important;
    min-height: 0 !important;
  }
}

#page-studio #studio-inner .fileVisual {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  min-height: 112px !important;
  max-height: 112px !important;
  height: 112px !important;
  padding: 12px 14px !important;
}

#page-studio #studio-inner .filePreview {
  width: 72px !important;
  height: 72px !important;
}

#page-studio #studio-inner .studioPanel .sectionHeader h2,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle,
#page-studio #studio-inner #previewTitle,
#page-studio #studio-inner #doneTitle,
#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-warm) !important;
  font-family: "Noto Serif SC", "Lora", "Songti SC", "Microsoft YaHei", serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] {
  padding: 16px 20px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .sectionHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] #previewTitle {
  max-width: none !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genSubHint {
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genTimePill {
  min-width: 74px !important;
  padding: 5px 9px !important;
  text-align: center !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
  position: relative !important;
  height: var(--studio-stage-h) !important;
  min-height: var(--studio-stage-h) !important;
  flex: 0 0 var(--studio-stage-h) !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  border: 1px solid rgba(154, 116, 66, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 44%, transparent 70%),
    radial-gradient(circle at 50% 62%, rgba(154, 116, 66, 0.13), transparent 36%);
  transform: translateX(-65%);
  pointer-events: none;
  animation: petdexStageSweep 2.4s ease-in-out infinite;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] #petCanvas,
#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview {
  z-index: 3 !important;
  width: min(350px, 76%) !important;
  max-height: 300px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview:not([hidden]) {
  animation: petdexPreviewBreath 1.9s ease-in-out infinite !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genCurrentDesc {
  margin: 7px 0 0 !important;
  min-height: 16px !important;
  color: #806a48 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestones {
  flex: 0 0 auto !important;
  margin: 7px 0 0 !important;
  padding-inline: 2px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestoneIcon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestoneIcon svg {
  width: 15px !important;
  height: 15px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="generating"] .genMilestone span {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

#page-studio #studio-inner .genMilestone[data-status="active"] .genMilestoneIcon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(154, 116, 66, 0.3);
  border-radius: 999px;
  animation: petdexPulseRing 1.35s ease-out infinite;
}

#page-studio #studio-inner .genMilestoneLine.done {
  background: linear-gradient(90deg, #9a7442, #78a66a) !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
  padding: 14px 18px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .studioStatePrototype {
  gap: 9px !important;
  justify-content: start !important;
  overflow: visible !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] #prototypeTitle {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeCard {
  gap: 7px !important;
  padding: 8px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap {
  aspect-ratio: 1 / 1 !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeImageWrap img {
  padding: 6px !important;
  object-fit: contain !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoBottomBar {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  margin-inline: auto !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoActionsRow {
  gap: 10px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoConfirmBtn,
#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoRetryBtn {
  min-height: 40px !important;
  font-size: 13px !important;
}

#page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .protoHistoryAbove {
  flex-basis: 18px !important;
  min-height: 18px !important;
}

#page-studio #studio-inner .studioStateTier {
  gap: 10px !important;
  justify-content: start !important;
  overflow: hidden !important;
  /* 鐖?flex column 宸茬粡 align-items: stretch (榛樿), 浣?closePayment 鍚?
     鍥炲埌 tier-select 鍋跺彂鏌愪簺 reflow 璺緞涓?.studioStateTier 娌¤鎷変几鍒?
     panel 鍏ㄥ, 瀵艰嚧 header / grid 鍙栧埌涓€涓瀬绐勫搴? 澶撮儴鏂囧瓧鐩存帴琚帇
     鎴?1 瀛楀绔栨帓. 鏄惧紡 width:100% 鍏滃簳, 璁╀换浣曡矾寰勪笅閮芥嬁鍒?panel 瀹藉害. */
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

#page-studio #studio-inner .studioTierHeader {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  min-height: 88px !important;
  padding: 11px 14px !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* studioTierGrid 鍚屾牱瑕佺粦姝诲叏瀹? 閬垮厤鍙栧埌 0 / auto 鏃跺鎴?1-2 鍒楃獎缃戞牸 */
#page-studio #studio-inner .studioTierGrid {
  width: 100% !important;
  min-width: 0 !important;
}

#page-studio #studio-inner .studioTierHeader img.tierPreviewLarge {
  width: 66px !important;
  height: 66px !important;
  padding: 5px !important;
}

#page-studio #studio-inner .studioTierHeaderText {
  justify-content: center !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .studioTierName {
  color: var(--studio-title-soft) !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
}

#page-studio #studio-inner .studioTierSub {
  max-width: 42em !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

#page-studio #studio-inner .studioTierGrid {
  flex: 1 1 auto !important;
  gap: 11px !important;
  align-items: start !important;
}

#page-studio #studio-inner .tierCard {
  min-height: 286px !important;
  padding: 14px 16px !important;
  gap: 8px !important;
}

#page-studio #studio-inner .tierCard h2 {
  font-size: 25px !important;
  line-height: 1.05 !important;
}

#page-studio #studio-inner .tierCard ul {
  gap: 5px !important;
}

#page-studio #studio-inner .tierCard li {
  font-size: 11.5px !important;
  line-height: 1.38 !important;
}

#page-studio #studio-inner .tierCard button {
  min-height: 38px !important;
  margin-top: 6px !important;
}

#page-studio #studio-inner .tierFootnote {
  margin-top: -2px !important;
  font-size: 11.5px !important;
}

#page-studio #studio-inner .payInline {
  height: 100% !important;
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  min-width: 0 !important;
  align-self: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 12px !important;
  overflow: auto !important;
}

#page-studio #studio-inner .payPlanHeader {
  min-height: 74px !important;
  padding: 10px 12px !important;
}

#page-studio #studio-inner .payInline p {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

#page-studio #studio-inner .payMethodSelector {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#page-studio #studio-inner .payMethodButton {
  display: grid !important;
  gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
}

#page-studio #studio-inner .payMethodButton span {
  font-size: 13px !important;
  font-weight: 800 !important;
}

#page-studio #studio-inner .payMethodButton small {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

#page-studio #studio-inner .payMethodButton.isSelected {
  border-color: var(--accent) !important;
  background: rgba(112, 160, 111, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(112, 160, 111, 0.18) !important;
}

/* 寰俊鏀粯鏆傛湭鎺ュ叆: 缃伆 + 涓嶅彲鐐?+ 鏂囨"鏆備笉鏀寔". 涓嶅垹鎸夐挳, 鍚庣画鎺ュ叆
   鏃跺彧闇€绉婚櫎 .isDisabled / disabled / aria-disabled 鍗冲彲鎭㈠. */
#page-studio #studio-inner .payMethodButton.isDisabled,
#page-studio #studio-inner .payMethodButton[disabled],
#page-studio #studio-inner .payMethodButton[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background: #f3efe7 !important;
  color: #9a8e7a !important;
  pointer-events: auto !important; /* 淇濈暀 hover/title 鎻愮ず */
}
#page-studio #studio-inner .payMethodButton.isDisabled small,
#page-studio #studio-inner .payMethodButton[disabled] small {
  color: #b08f6a !important;
}
#page-studio #studio-inner .payMethodButton.isDisabled:hover,
#page-studio #studio-inner .payMethodButton[disabled]:hover {
  background: #f3efe7 !important;
  border-color: #e0d8cc !important;
}

#page-studio #studio-inner .epayQrPanel {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

#page-studio #studio-inner .epayQrPanel h3 {
  font-size: 15px !important;
}

#page-studio #studio-inner .epayQrBox {
  width: min(180px, 58vw) !important;
  max-width: 180px !important;
  padding: 8px !important;
  border-width: 2px !important;
}

#page-studio #studio-inner .epayCountdown {
  padding: 7px !important;
  gap: 2px !important;
}

#page-studio #studio-inner .epayCountdown strong {
  font-size: 22px !important;
}

#page-studio #studio-inner #epayReloadButton {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
}

#page-studio #studio-inner .payOrderCard {
  gap: 4px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

#page-studio #studio-inner .payOrderCard div {
  gap: 10px !important;
}

#page-studio #studio-inner .paymentActions button {
  min-height: 36px !important;
  font-size: 12.5px !important;
}

#page-studio #studio-inner .studioStateDone,
#page-studio #studio-inner .studioStateDone .successPanel {
  height: 100% !important;
  min-height: 0 !important;
}

#page-studio #studio-inner .studioStateDone .successPanel {
  display: grid !important;
  grid-template-columns: minmax(246px, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 0 !important;
}

#page-studio #studio-inner .doneImageCol {
  min-height: 0 !important;
  height: 100% !important;
}

#page-studio #studio-inner .doneImageCol img {
  object-fit: contain !important;
  padding: 16px !important;
}

#page-studio #studio-inner .doneContentCol {
  justify-content: center !important;
  gap: 9px !important;
  padding: 16px !important;
}

#page-studio #studio-inner .doneContentTop {
  gap: 3px !important;
}

#page-studio #studio-inner .doneSummary,
#page-studio #studio-inner .successNotice {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

#page-studio #studio-inner .doneCodeBlock {
  gap: 7px !important;
}

#page-studio #studio-inner .petCodeDisplay {
  padding: 8px 12px !important;
  font-size: 22px !important;
}

#page-studio #studio-inner .doneDeliveryGroup {
  margin-top: 0 !important;
  gap: 8px !important;
}

#page-studio #studio-inner .doneAnimSelect select {
  min-height: 40px !important;
  height: 40px !important;
  font-size: 12.5px !important;
}

#page-studio #studio-inner .successActions {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: 8px !important;
}

#page-studio #studio-inner .successActions button {
  min-height: 38px !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
}

@media (max-width: 980px) {
  #page-studio #studio-inner .studioPanel,
  #page-studio #studio-inner .previewPanel,
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage {
    height: clamp(280px, 48vw, 332px) !important;
    min-height: clamp(280px, 48vw, 332px) !important;
    flex-basis: clamp(280px, 48vw, 332px) !important;
  }
}

@media (max-width: 640px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="prototype"] .prototypeGrid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-studio #studio-inner .successActions,
  #page-studio #studio-inner .paymentActions {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .desktopStage::after,
  #page-studio #studio-inner .previewPanel[data-studio-state="generating"] .basePreview:not([hidden]),
  #page-studio #studio-inner .genMilestone[data-status="active"] .genMilestoneIcon::after {
    animation: none !important;
  }
}

/* 鈺愨晲鈺?PAY PAGE REDESIGN 20260521 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?
   鏀粯椤垫帓鐗堥噸鍋氥€傚師鍒?
   - 妗岄潰绔伐浣滃彴楂樺害涓嶅彉(缁ф壙 .previewPanel 鐨?560px / overflow:hidden),
     涓嶅儚鏃?payment-ui-rework 鎶婂畠鏀规垚 auto銆?
   - 鏀粯鍐呭闈犵揣鍑戞帓鐗堟斁杩涘浐瀹氶珮搴?涓嶅啀鍑虹幇 payInline 鍐呴儴婊氳疆銆?
   - 绮剧畝鍐椾綑淇℃伅:闅愯棌璁㈠崟鍗°€佷粙缁嶆枃瀛椼€佺缉鐣ュ浘銆侀噸澶嶇殑濂楅鍚嶆爣绛俱€?
   - 淇℃伅灞傜骇:鏍囬 鈫?鏀粯鏂瑰紡 鈫?浜岀淮鐮?鍊掕鏃?鈫?涓绘寜閽?鈫?鍙栨秷閾炬帴銆?
   绾?CSS,涓嶆敼 HTML;selector 甯?[data-studio-state="pay"] 鎶珮鐗瑰紓鎬?
   纭繚瑕嗙洊鏂囦欢鍓嶉儴鐨勬棫 pay 瑙勫垯銆?*/
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .studioStatePay {
  padding: 0 !important;
  justify-content: center !important;
}

/* 鍗＄墖瀹瑰櫒:鍥哄畾楂樺害鍐呬笉婊氬姩,鍐呭灞呬腑 */
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payInline {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: center !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(154, 116, 66, 0.20) !important;
  border-radius: 16px !important;
  background: var(--accent-light) !important;
}
/* 鍚勫垎鍖烘寜鑷劧楂樺害鎺掑竷,绂佹鏀剁缉(閬垮厤鏍囬鍖鸿鍘嬪瀵艰嚧閲嶅彔) */
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payInline > * {
  flex: 0 0 auto !important;
}

/* 鏍囬鍖?鍗曞眰,鍘绘帀缂╃暐鍥句笌閲嶅濂楅鍚?*/
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payPlanHeader {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  grid-template-columns: none !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #paySelectedPreview,
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payTierName,
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payIntroText,
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payOrderCard {
  display: none !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payPetName {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payTitle {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--text-primary) !important;
  text-align: center !important;
}

/* 鏀粯鏂瑰紡:涓ゅ垪绱у噾 */
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payMethodSelector {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payMethodButton {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payMethodButton span {
  font-size: 13px !important;
  font-weight: 700 !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payMethodButton small {
  font-size: 10.5px !important;
  color: var(--text-muted) !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payMethodButton.isSelected {
  border-color: var(--accent) !important;
  background: rgba(154, 116, 66, 0.07) !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important;
}

/* 浜岀淮鐮侀潰鏉?鏆栬壊杈规(鍘绘帀绐佸厐鐨勮摑鑹?,绱у噾 */
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayQrPanel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px !important;
  border: 1px solid rgba(154, 116, 66, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
/* 璁㈠崟杩樺湪鍒涘缓/qrImageUrl 娌℃嬁鍒版椂, JS 浼氱粰 .epayQrPanel 鍔?hidden 灞炴€?
   浣嗕笂闈?display:flex !important 浼氱洊鎺?[hidden] 鐨?display:none, 蹇呴』
   鏄惧紡鍐嶅姞涓€鏉″悓鏍峰叿浣撳害鐨勮鐩? 鍚﹀垯鐢ㄦ埛鍦?"姝ｅ湪鍒涘缓鏀粯璁㈠崟..." 闃舵浼?
   鐪嬪埌涓€涓┖ panel + 鐮村浘鍗犱綅銆?*/
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayQrPanel[hidden] {
  display: none !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayQrPanel h3 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayQrBox {
  width: 130px !important;
  max-width: 130px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 6px !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #epayQrHint {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: var(--text-secondary) !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayCountdown {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 6px !important;
  width: 100% !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(154, 116, 66, 0.06) !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayCountdown span {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayCountdown strong {
  font-size: 18px !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayCountdown small {
  flex-basis: 100% !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
/* "閲嶆柊鎵撳紑鏀粯椤甸潰" 鏀舵垚灏忓瓧閾炬帴 */
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #epayReloadButton {
  min-height: 0 !important;
  padding: 2px 6px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* 鎿嶄綔鍖?涓绘寜閽叏瀹?鍙栨秷璁㈠崟涓哄皬瀛楅摼鎺?*/
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] .paymentActions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #confirmPaymentButton {
  width: 100% !important;
  min-height: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#page-studio #studio-inner .previewPanel[data-studio-state="pay"] #cancelPaymentButton {
  align-self: center !important;
  min-height: 0 !important;
  padding: 3px 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* 绉诲姩绔?宸ヤ綔鍙版湰灏?auto 楂樺害(鈮?80 濯掍綋宸插鐞?,
   浠呮斁瀹藉崱鐗囧搴︿笌杈硅窛,鍐呭鑷劧娴佸紡鎺掑紑 */
@media (max-width: 700px) {
  #page-studio #studio-inner .previewPanel[data-studio-state="pay"] .payInline {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    padding: 16px 14px !important;
  }
  #page-studio #studio-inner .previewPanel[data-studio-state="pay"] #payTitle {
    font-size: 17px !important;
  }
  #page-studio #studio-inner .previewPanel[data-studio-state="pay"] .epayQrBox {
    width: 160px !important;
    max-width: 160px !important;
  }
}
/* 鈺愨晲鈺?END PAY PAGE REDESIGN 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */

/* 鈹€鈹€鈹€ 绉诲姩绔?UI 淇锛堚墹700px锛?026-05-21 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
   鏂囦欢涓鏈夊ぇ閲忓悓鍚?selector 鍦ㄥ涓?sprint 涓疮绉弽澶嶉噸璁?
   `.studioTierHeader` / `.successPanel` 鐨?grid-template-columns锛屽叾涓?
   涓€閮ㄥ垎琚祻瑙堝櫒瑙ｆ瀽涓烘棤濯掍綋瑙勫垯锛堝祵濂楃粨鏋勮剢寮憋級锛岃鐩栦簡宸叉湁鐨?520/640
   max-width override銆傜粺涓€鍦ㄦ枃浠舵湯灏剧敤 700 max-width 鏀跺彛涓€娆★紝閬垮厤鍘?
   patch 涓銆?*/

/* M0-1: tier-select hero 鏍囬琚帇鎴愮珫鎺?
   鍘熷洜锛?studioTierHeader 榛樿鏄?grid `70px 1fr`锛屽乏鍒椾负 .tierPreviewLarge
   棰勭暀 70px銆傝 IMG 鍦?tier-select 鐘舵€佷笅 hidden, 浣?hidden 鍏冪礌浠?grid
   涓Щ闄ゅ悗, 涓嬩竴椤?(.studioTierHeaderText) 浼氬幓鍗犵涓€鍒?70px 鈫?鏍囬涓枃
   姣忓瓧涓€琛? 涔嬪墠鍙湪 鈮?00px 淇簡, 妗岄潰绔?(鐜扮綉鎴浘 2026-05-26) 鍚屾牱浼?
   瑙﹀彂. 鍏ㄥ眬缁熶竴: img 闅愯棌鏃?header 鍒囧洖鍗曞垪, 鏂囧瓧鍗犳弧鍏ㄥ. */
.studioTierHeader:has(img.tierPreviewLarge[hidden]),
#page-studio #studio-inner .studioTierHeader:has(img.tierPreviewLarge[hidden]) {
  grid-template-columns: 1fr !important;
}

@media (max-width: 700px) {
  #page-studio #studio-inner .studioTierHeader,
  .studioTierHeader {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #page-studio #studio-inner .studioTierHeader img.tierPreviewLarge,
  .studioTierHeader img.tierPreviewLarge {
    justify-self: start !important;
    width: 64px !important;
    height: 64px !important;
  }
}

/* M0-2: done 椤点€屼笅杞?.petpack銆嶆寜閽鍘嬫垚绔栨潯
   鍘熷洜锛?studioStateDone .successPanel 榛樿 grid `2fr 3fr`锛屽湪 375px
   瑙嗗彛涓嬪彸鍒楀唴瀹?.doneContentCol 鍙墿 ~225px锛屽唴閮ㄣ€屽熀纭€闄即鐗堛€嶆爣棰樸€?
   .doneCodeRow 澶嶅埗鎸夐挳銆?successActions 涓嬭浇鎸夐挳閮借鎸ゆ垚绔栨潯銆?
   Mobile 涓嬫敼涓哄崟鍒楀爢鍙狅紝鍥惧垪闄愰珮銆佸唴瀹瑰垪姝ｅ父閾哄紑銆?*/
@media (max-width: 700px) {
  #page-studio #studio-inner .studioStateDone .successPanel,
  .studioStateDone .successPanel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #page-studio #studio-inner .doneImageCol,
  .doneImageCol {
    min-height: 0 !important;
    max-height: 280px !important;
  }

  #page-studio #studio-inner .doneCodeRow,
  .doneCodeRow {
    flex-wrap: wrap !important;
  }
}

/* M0-3: mobile 涓诲鑸 5 涓?tab銆屽畾鍒舵柟妗堛€嶆孩鍑哄睆澶栵紙375px 瑙嗗彛涓?
   scrollWidth=418, clientWidth=342锛夛紝.navLinks 鏄í鍚?overflow:auto
   浣?scrollbar 鍦?鈮?00px 宸茶闅愯棌锛岀敤鎴锋病鏈変换浣曡瑙夋彁绀恒€?
   鍔?mask-image 鍙宠竟娓愰殣 + scroll-snap锛氬彸渚ф笎闅愬憡璇夌敤鎴锋湁鏇村 tab锛?
   婊戝姩鍚庡惛闄勫榻愩€?*/
@media (max-width: 700px) {
  .navLinks {
    scroll-snap-type: x proximity !important;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 22px),
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 22px),
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
  }

  .navLinks > * {
    scroll-snap-align: start !important;
  }
}

/* M1-7: logo銆孭etDex Studio銆嶅湪 鈮?00px 瑙嗗彛琚帇鎴?PetDex / Studio
   涓よ锛?brand strong display:block 浣嗗唴閮ㄦ枃瀛椾粛浼氭崲琛岋級锛屽悓鏃?topbar
   鍙充晶 .topButton.authButton 鏄‖缂栫爜 width:132px銆佸姞涓?.topActions 鍐?
   鐨勩€屽紑濮嬬敓鎴愩€峵opButton 鍏?~240px锛屾尋鎺?brand 鐨勫彲鐢ㄥ搴︺€?
   淇硶锛?
   - .brand strong 寮哄埗 nowrap 涓嶈鏂囧瓧鍐呴儴鎹㈣
   - .brand small 宸插湪 line 1230 hide锛岃繖閲屽啀鍔犱竴閬撲繚闄?
   - mobile 涓嬫斁瀹?.topButton.authButton 鐨勫浐瀹氬搴﹂檺鍒讹紝璁╁畠鎸夊唴瀹?
     鑷€傚簲锛涘悓鏃?topButton 鐨勫唴杈硅窛鍜屽瓧鍙峰井缂╋紝缁?brand 璁╁嚭绌洪棿 */
@media (max-width: 700px) {
  .brand strong {
    white-space: nowrap !important;
  }

  .brand small {
    display: none !important;
  }

  .topActions .topButton {
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
  }

  .topButton.authButton {
    width: auto !important;
    max-width: 100px !important;
    padding-left: 12px !important;
    padding-right: 10px !important;
  }

  /* label 鍦?mobile 涓婇檺 60px锛岄厤鍚堟寜閽?max-width 100锛岄伩鍏?long-email
     鏃舵妸 .topActions 鎾戣秴 200锛屾尋鎺?brand 璁?"PetDex Studio" 鍙堟崲琛屻€?
     绠楄处锛歷iewport 375 - padding 32 = 343 鍙敤銆?
     brand 鈮?145 + gap 18 + topActions 鈮?200 = 363锛堝惈灏?buffer锛夈€?*/
  .authButtonLabel {
    max-width: 60px !important;
  }
}

/* M2-1: 棣栭〉銆屼笂浼犫啋鐢熸垚鈫掗獙鏀垛啋闄即銆? 姝ラ .flowRail 鍦?鈮?00px 琚?
   styles.css:3299 璁炬垚鍗曞垪锛? 姝ョ珫鎺掓垚 4 琛屻€佹妸棣栭〉鎷夊緱寰堥珮锛堢害
   3762px锛夈€傛敼鎴?2脳2 缃戞牸锛? 姝ヤ袱琛屾斁涓嬶紝棣栭〉鏄庢樉鍙樼煭銆?
   杩炴帴妯嚎 .flowRail article::after 鍦?鈮?00px 宸?display:none锛?脳2
   涓嬫棤闇€妯嚎锛屼笉鐢ㄩ澶栧鐞嗐€?*/
@media (max-width: 700px) {
  .flowRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
  }
}
/* M2-4: 宸ヤ綔鍙版爣棰樺湪 鈮?00px 鍋忓ぇ鈥斺€旈〉澶?.pageIntro h1銆岀敓鎴愬伐浣滃彴銆?
   40px銆佷笂浼犺〃鍗?.sectionHeader h2銆屼笂浼犲疇鐗╃収鐗囥€?2px锛屽湪 375 绐勫睆
   涓嬪崰澶楂樺害銆傚悇鏀朵竴妗ｃ€傜姸鎬佸尯 .studioStateTitle 宸叉槸 18px銆佸悎鐞嗭紝
   涓嶅姩銆傞€夋嫨鍣ㄧ壒寮傚害瀵归綈涓鍚屽悕瑙勫垯浠ョ‘淇濊鐩栥€?*/
@media (max-width: 700px) {
  #page-studio .pageIntro h1 {
    font-size: 26px !important;
  }

  #page-studio #studio-inner .studioPanel .sectionHeader h2 {
    font-size: 18px !important;
  }
}

/* M2-6: 鈮?00px 椤舵爮鍙充晶璐﹀彿鎸夐挳 #authStatusButton 鍗充娇缁?M1-7 鏀剁獎锛?
   鐧诲綍鍚庝粛瑕佹樉绀轰竴鎴偖绠便€佸拰銆屽紑濮嬬敓鎴愩€嶆寜閽?+ brand 鎶㈡í鍚戠┖闂淬€?
   绉诲姩绔敹鎴愬渾褰㈠浘鏍囨寜閽細闅愯棌鏂囧瓧鏍囩鍜屼笅鎷夊皬绠ご锛岀敤 ::before 鏄剧ず
   涓€涓瀛楁瘝锛坉ata-initial 鐢?updateAuthStatus 鍐欏叆鈥斺€旂櫥褰曞悗鍙栭偖绠?
   棣栧瓧姣嶃€佹湭鐧诲綍涓恒€岀櫥銆嶏級銆?isLoggedIn 鐨勭豢鑹叉€佷粛鍖哄垎鐧诲綍涓庡惁銆?
   鏈潡浣嶇疆鍦?M1-7 涔嬪悗锛岀瓑鐗瑰紓搴︿笅闈?cascade 鍚庣疆鍙栬儨銆?*/
@media (max-width: 700px) {
  .topButton.authButton {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }

  .topButton.authButton .authButtonLabel {
    display: none !important;
  }

  .topButton.authButton::after {
    display: none !important;
  }

  .topButton.authButton::before {
    content: attr(data-initial);
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}

/* Making 闃舵娴佸紡棰勮锛氱粷瀵瑰畾浣嶅厖婊?desktopStage锛屽彔鍦?canvas / basePreview
   涓婃柟锛沜yan key 鐢卞墠绔?canvas 杞负閫忔槑 alpha锛岄湶鍑?grid 鐨勭函鑹茶儗鏅€?*/
.desktopStage { position: relative; }
.makingPreviewSheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
  background-color: #f1ece1;
  border-radius: 12px;
}

/* makingFrameStrip锛氬崟琛屽睍绀哄綋鍓嶅畬鎴愬姩浣滅殑鎵€鏈夊抚, 浠?qa/contact-sheet.png
   椋庢牸 鈥斺€?甯х揣鍑戞í鎺掋€佹瘡甯т笅鏍?00/01.../0N銆傚悗绔?frames/<rowId>/0X.png 宸?
   鍋?cyan key 閫忔槑鍖?+ 192x208 瑙勬暣鍖? 鍓嶇涓嶅垏涓嶆煋鑹? 鐩存帴 N 寮?background
   涓€瀛楁憜寮€銆傛暣 strip 鍒囨崲鍔ㄤ綔鏃?fade-out 鈫?fade-in, 甯у叆鍦?stagger,
   鍏ュ満鍚庢暣寮?strip 杞诲井 breathing 鍒堕€犲懠鍚告劅銆?*/
.makingFrameStrip {
  position: absolute;
  inset: 0;
  z-index: 6;
  background-color: #f3ede1;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 1;
  transition: opacity 220ms ease;
  animation: stripBreathing 3200ms ease-in-out infinite;
}
.makingFrameStrip[hidden] { display: none; }
.makingFrameStrip.makingFrameStrip--switching {
  opacity: 0;
  animation: none;
}
@keyframes stripBreathing {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.makingFrameStrip .makingFrameStripLabel {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
}
.makingFrameStrip .stripLabelName {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}
.makingFrameStrip .stripLabelMeta {
  font-size: 12px;
  color: #8c8579;
  letter-spacing: 0.04em;
}

/* 甯х綉鏍? JS 鎸夊抚鏁板姩鎬佽缃?columns (濮嬬粓鍗曡, 涓嶈 6 甯ц繕鏄?8 甯?,
   鏁翠綋鍨傜洿姘村钩灞呬腑, 姣忔牸 1:1 aspect, contain 娓叉煋 192脳208 閫忔槑甯с€?
   鍏抽敭: grid-auto-flow: column 鏄惧紡澹版槑鍒楁祦, 绂佹 grid 鍦?cell 瀹逛笉涓嬫椂
   fallback 鍒?wrap; stripFrame 涔熶笉瑕佸啀璁?max-width, 璁?grid 1fr 鑷繁
   鍒嗛厤姣忓抚绛夊 鈥?6 甯?6 鍒椼€? 甯?8 鍒? panel 绐勬椂甯ц嚜鍔ㄧ缉灏忎笉浼氭崲琛屻€?*/
.makingFrameStrip .makingFrameStripCells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));  /* JS 浼氳鐩栨垚 frameCount */
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  gap: 0 12px;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.makingFrameStrip .stripFrame {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 192 / 208;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition: opacity 320ms ease, transform 320ms ease;
}
.makingFrameStrip .stripFrame.stripFrame--ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* label 鍦?single strip 妯″紡涓嬮殣钘?(JS 璁?hidden), CSS 鍏滃簳闃叉紡 */
.makingFrameStrip .makingFrameStripLabel[hidden] { display: none; }

/* 绱у噾 viewport: 384px desktopStage. 鍚屾牱淇濇寔鍗曡, 甯у鐢?grid 1fr 绛夊垎銆?*/
@media (max-width: 540px) {
  .makingFrameStrip { padding: 10px 6px; gap: 6px; }
  .makingFrameStrip .makingFrameStripCells { gap: 0 6px; }
}

/* 濂楅鍗℃拺婊″伐浣滃彴楂樺害: studio panel 鍦?tier-select 闃舵鐨勫彲瑙嗗尯楂樺害鍥哄畾,
   涓ゅ紶 楼9.9 / 楼29.9 濂楅鍗′箣鍓?min-height 360px 鎾戜笉婊? 涓嬮潰鐣欏ぇ绌虹櫧銆?
   璁?tier grid flex 鎾戞弧, tier card flex column space-between 鎶?header /
   feature list / 閫夋嫨鎸夐挳涓夊潡鑷姩鍒嗗竷, list flex grow + center 涓嶆尋鍦ㄩ《閮ㄣ€?*/
#page-studio #studio-inner .studioTierGrid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-content: stretch !important;
  align-items: stretch !important;
}
#page-studio #studio-inner .tierCard {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 20px !important;
  padding: 28px 30px !important;
}
#page-studio #studio-inner .tierCard > div:first-child {
  flex: 0 0 auto !important;
}
#page-studio #studio-inner .tierCard ul {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
}
#page-studio #studio-inner .tierCard li,
#page-studio #studio-inner .tierCard p {
  line-height: 1.85 !important;
}
#page-studio #studio-inner .tierCard > button {
  flex: 0 0 auto !important;
  margin-top: 4px !important;
}

/* tier-select 瀛楀彿鏀舵暃: 涓婃柟鏍囬 "绔嬪嵆寮€濮?.." 20px銆佽鏄?12px,
   鍗＄墖 楼9.9 涔嬪墠 25px 鐪嬭捣鏉ユ瘮鏍囬澶с€佽窡鏁翠綋涓嶅崗璋? 鍒楄〃琛岄珮 1.85
   鏄惧緱 li 瀛楀彿琚斁澶с€傜粺涓€鏀舵垚: h2 21px(鏇存帴杩戜笂鏂?20px)銆乪yebrow
   13px銆乴i 12.5px / line-height 1.5銆乫ootnote 12px銆傝鍗＄墖鍐呭瓧闃?
   璺熷崱鐗囧鏍囬鍖哄懠搴斻€?*/
#page-studio #studio-inner .studioTierEyebrow {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
}
#page-studio #studio-inner .tierCard h2 {
  font-size: 21px !important;
  margin: 6px 0 4px !important;
  line-height: 1.1 !important;
}
#page-studio #studio-inner .tierCard .tierEyebrow {
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
#page-studio #studio-inner .tierCard ul {
  gap: 10px !important;
}
#page-studio #studio-inner .tierCard li,
#page-studio #studio-inner .tierCard p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
#page-studio #studio-inner .tierFootnote {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* ============================
 * A2 鏂扮敤鎴峰紩瀵兼诞灞?
 * ============================ */
.onboardingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 32, 18, 0.46);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: onboardingFadeIn 0.24s ease-out;
}
.onboardingOverlay[hidden] { display: none; }
@keyframes onboardingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.onboardingCard {
  position: relative;
  background: var(--bg-card, #faf7f2);
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 20px;
  padding: 30px 28px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 16px 44px rgba(44, 32, 18, 0.22);
  animation: onboardingSlideUp 0.32s ease-out;
}
@keyframes onboardingSlideUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.onboardingSkip {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8a7a66);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.onboardingSkip:hover { background: rgba(44, 32, 18, 0.06); color: var(--text, #2c2012); }
.onboardingEyebrow {
  font-size: 12px;
  color: #ad6b3b;
  margin: 0 0 10px 0;
  letter-spacing: 0.04em;
}
.onboardingTitle {
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 10px 0;
  color: var(--text, #2c2012);
  line-height: 1.35;
}
.onboardingBody {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text, #2c2012);
  margin: 0 0 22px 0;
}
.onboardingFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.onboardingDots {
  display: flex;
  gap: 6px;
}
.onboardingDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(44, 32, 18, 0.18);
  transition: width 0.2s ease, background 0.2s ease;
}
.onboardingDot.isActive {
  width: 18px;
  border-radius: 4px;
  background: #ad6b3b;
}
.onboardingActions {
  display: flex;
  gap: 8px;
}
.onboardingActions .primaryButton,
.onboardingActions .secondaryButton {
  padding: 8px 18px;
  font-size: 13.5px;
}
@media (max-width: 480px) {
  .onboardingCard { padding: 24px 20px 18px; border-radius: 16px; }
  .onboardingTitle { font-size: 19px; }
  .onboardingBody { font-size: 13.5px; }
}

/* ============================
 * A5 install 椤碉細骞冲彴 tab + 鎴浘鍗犱綅
 * ============================ */
/* A5 瀹夎鎸囧崡锛氶檺瀹?+ 瀛楀彿璺?#page-install 鍏跺畠鍒嗗尯淇濇寔涓€鑷?*/
.installPlatform {
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 8px 48px 48px;
}
.installPlatformHead {
  margin-bottom: 18px;
}
.installPlatformHead h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #2c2016;
  margin: 8px 0;
}
.installPlatformHead .installEyebrow {
  margin-bottom: 7px;
}
.installPlatformHead p {
  color: var(--text-muted, #8a7a66);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
}
@media (max-width: 900px) {
  .installPlatform { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .installPlatform { padding-left: 16px; padding-right: 16px; }
}
.installPlatformTabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(44, 32, 18, 0.05);
  border-radius: 12px;
  margin-bottom: 18px;
}
.installPlatformTab {
  background: transparent;
  border: 0;
  padding: 8px 22px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--text-muted, #8a7a66);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.installPlatformTab:hover { color: var(--text, #2c2012); }
.installPlatformTab.isActive {
  background: var(--bg-card, #faf7f2);
  color: var(--text, #2c2012);
  box-shadow: 0 2px 6px rgba(44, 32, 18, 0.08);
}
.installPlatformPanel { display: none; }
.installPlatformPanel.isActive { display: block; }
.installPlatformSteps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  counter-reset: install-step;
}
.installPlatformSteps > li {
  counter-increment: install-step;
  position: relative;
  padding: 20px 22px 20px 64px;
  background: var(--bg-card, #faf7f2);
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 14px;
}
.installPlatformSteps > li::before {
  content: counter(install-step);
  position: absolute;
  left: 18px;
  top: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ad6b3b;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.installPlatformSteps > li strong {
  display: block;
  font-size: 15.5px;
  margin-bottom: 6px;
  color: var(--text, #2c2012);
}
.installPlatformSteps > li p {
  margin: 0 0 10px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text, #2c2012);
}
.installPlatformSteps > li p:last-child { margin-bottom: 0; }
.installPlatformSteps code {
  background: rgba(44, 32, 18, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.installPlatformWarning {
  border-left: 3px solid #d97706 !important;
}
.installPlatformWarning::before {
  background: #d97706 !important;
}
.installCommand {
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  background: #1f1810;
  color: #f0e8db;
  border-radius: 10px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  overflow-x: auto;
  line-height: 1.6;
  user-select: all;
}
.installCommand code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
}
.installScreenshotPlaceholder {
  margin-top: 10px;
  background: repeating-linear-gradient(
    45deg,
    rgba(44, 32, 18, 0.04),
    rgba(44, 32, 18, 0.04) 10px,
    rgba(44, 32, 18, 0.07) 10px,
    rgba(44, 32, 18, 0.07) 20px
  );
  border: 1px dashed rgba(44, 32, 18, 0.2);
  border-radius: 10px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #8a7a66);
  font-size: 12.5px;
}
.installScreenshotPlaceholder span { opacity: 0.7; }
@media (max-width: 640px) {
  .installPlatformSteps > li { padding: 16px 18px 16px 56px; }
  .installPlatformSteps > li::before { left: 14px; top: 18px; width: 26px; height: 26px; font-size: 13px; }
  .installScreenshotPlaceholder { height: 96px; }
}

/* ============================
 * 浣滃搧搴撳垎鍖猴紙鍏紑 + 鎴戠殑锛屼綔鍝佸簱椤靛唴涓や釜鍖哄潡锛?
 * 闄愬 1120 璺?#page-library .petGrid 涓€鑷达紝閬垮厤涓や釜鍒嗗尯涓€绐勪竴瀹?
 * ============================ */
.libraryBlock {
  max-width: 1120px;
  margin: 28px auto 0;
  padding: 0 48px;
}
.libraryBlock:first-of-type { margin-top: 10px; }
.libraryBlockHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border, #e4ddd2);
}
.libraryBlockHead h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  color: var(--text, #2c2012);
}
.libraryBlockHint {
  font-size: 12.5px;
  color: var(--text-muted, #8a7a66);
  font-weight: 400;
}
.libraryBlockActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 鍏紑浣滃搧 grid锛? 鍒楋紝澶嶇敤棣栭〉 caseCard 鑺傚锛?80px 鍥?+ caseBody锛?*/
.libraryPublicGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .libraryBlock { padding: 0 24px; }
  .libraryPublicGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .libraryBlock { padding: 0 16px; }
  .libraryPublicGrid { grid-template-columns: 1fr; }
}
.publicShowcaseLoading,
.publicShowcaseEmpty {
  grid-column: 1 / -1;
  padding: 36px 20px;
  text-align: center;
  color: var(--text-muted, #8a7a66);
  font-size: 13.5px;
}
.publicShowcaseCard {
  padding: 0;
  overflow: hidden;
}
.publicShowcaseButton {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.publicShowcaseButton:focus-visible {
  outline: 2px solid #ad6b3b;
  outline-offset: 2px;
}
/* 鍏紑浣滃搧鍗＄墖楂樺害璺熼椤?caseCard 涓€鑷达細caseImage 174px锛岄伩鍏嶆瘮 petCard (174px) 楂?*/
.publicShowcaseCard .caseImage.caseCompare {
  height: 174px;
}
.publicShowcaseCard .caseCompareSide {
  height: 174px;
}

/* ============================
 * A6 FAQ 椤甸潰
 * ============================ */
#page-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.faqHero {
  margin: 0 0 24px 0;
}
.faqHero .installEyebrow {
  display: inline-block;
  margin-bottom: 6px;
}
.faqHero h1 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  margin: 4px 0 10px 0;
  color: var(--text, #2c2012);
}
.faqHero p {
  color: var(--text-muted, #8a7a66);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.faqHero strong { color: var(--text, #2c2012); }
.faqList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faqItem {
  background: var(--bg-card, #faf7f2);
  border: 0.5px solid var(--border, #e4ddd2);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.faqItem[open] {
  border-color: rgba(173, 107, 59, 0.4);
}
.faqItem summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text, #2c2012);
  position: relative;
  transition: background 0.16s ease;
  line-height: 1.45;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary:hover { background: rgba(44, 32, 18, 0.03); }
.faqItem summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-muted, #8a7a66);
  line-height: 1;
}
.faqItem[open] summary::after {
  content: "鈭?;
  color: #ad6b3b;
}
.faqBody {
  padding: 0 18px 16px 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text, #2c2012);
}
.faqBody p { margin: 0 0 8px 0; }
.faqBody p:last-child { margin-bottom: 0; }
.faqBody strong { color: var(--text, #2c2012); }
.faqBody a {
  color: #ad6b3b;
  text-decoration: underline;
}
.faqBody code {
  background: rgba(44, 32, 18, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.faqBody .installCommand {
  margin: 8px 0;
  padding: 10px 12px;
  background: #1f1810;
  color: #f0e8db;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  overflow-x: auto;
}
.faqBody .installCommand code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
}
@media (max-width: 640px) {
  .faqHero h1 { font-size: 24px; }
  .faqItem summary { font-size: 13.5px; padding: 12px 38px 12px 14px; }
  .faqItem summary::after { right: 14px; }
  .faqBody { padding: 0 14px 14px 14px; font-size: 13px; }
}

/* === 濂楅鍗″唴閮ㄦ帓鐗堜紭鍖?(2026-05-24)
   涓嶅姩鍗＄墖灏哄 / 缃戞牸 / 杈规 / 鎺ㄨ崘 badge锛屽彧璋冧笁娈靛眰绾э細
   浠锋牸澶撮儴 鈹€鈹€鈫?鏉冪泭娓呭崟 鈹€鈹€鈫?CTA锛岃涓绘娓呮櫚銆侀棿璺濆潎鍖€ === */
#page-studio #studio-inner .tierCard {
  padding: 22px 20px 18px !important;
  gap: 0 !important;
}

/* 绗竴娈碉細eyebrow + 浠锋牸锛屼笅鏂硅櫄绾垮垎闅斾笌鏉冪泭鍖烘媺寮€ */
#page-studio #studio-inner .tierCard > div:first-of-type {
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px dashed rgba(44, 32, 22, 0.10) !important;
}

#page-studio #studio-inner .tierCard .tierEyebrow {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--accent, #c4783a) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

#page-studio #studio-inner .tierCard h2 {
  margin: 0 !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary, #2c2016) !important;
}

#page-studio #studio-inner .tierCard.recommended h2 {
  font-size: 32px !important;
}

/* 绗簩娈碉細鏉冪泭娓呭崟 鈥?鍦嗙偣鏀圭粷瀵瑰畾浣嶏紝闀胯鎶樿鏃跺渾鐐瑰榻愮涓€琛?*/
#page-studio #studio-inner .tierCard ul {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#page-studio #studio-inner .tierCard li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 16px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary, #5c4f3d) !important;
}

#page-studio #studio-inner .tierCard li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  left: 2px !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--accent, #c4783a) !important;
}

/* 楼1 鎺㈢储鍗★細鍦嗙偣涔熻窡杈规涓€鏍峰急鍖?*/
#page-studio #studio-inner .tierCardSingle li::before {
  background: var(--text-muted, #9e8e78) !important;
}

/* 绗笁娈碉細CTA 鈥?涓庡垪琛ㄤ箣闂寸粰 18px 鍛煎惛锛屾寜閽粺涓€楂樺害/瀛楀彿 */
#page-studio #studio-inner .tierCard button {
  margin-top: 18px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 10px !important;
}

/* === 3 鍗″満鏅揣鍑戠増 (鍗曞崱 ~210px锛宺eplenish + cleanBuy 璺緞) ===
   闀挎潈鐩婇」蹇呴』鎶樿锛屾墍浠ラ潬"鍒楄〃鏁翠綋楂樺害瀵归綈 + 缂╁瓧鍙?鍑忓皯瑙嗚涔辨劅 */
#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard {
  padding: 18px 14px 16px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard > div:first-of-type {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard .tierEyebrow {
  font-size: 11px !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.03em !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard h2 {
  font-size: 26px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard.recommended h2 {
  font-size: 27px !important;
}

/* 楂樼骇鐗堜环鏍间笅鏂逛环鍊奸敋瀹? 楼29.9 浠锋牸 路 瀹炰韩 楼39.8 鏉冪泭, 璁╃敤鎴蜂竴鐪肩湅鍒颁拱灏辫禋 */
#page-studio #studio-inner .tierCard .tierValueAnchor {
  display: block;
  margin-top: 4px;
  color: #c4783a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard ul {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 7px !important;
  align-content: unset !important;
}

/* 宸ヤ綔鍙?tier 鍗? bullets 鐭€岀揣鍑? 搴曢儴绌洪殭浜ょ粰 .bonusBullet (margin-top:auto)
   濉埌 ul 搴? 楼1 / 楼9.9 鏃?bonus, 璁?button (margin-top:auto) 鎾戝埌鍗″簳;
   min-height 鏀跺埌 240 闃叉 4 鐭?bullet 鏃跺崱杩囩煯. */
#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard {
  min-height: 240px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard li {
  padding-left: 13px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* 楂樼骇鐗堣禒鍒镐寒涓€鐐? 鍑告樉 "涔伴珮绾х増鍔犺禒 楼9.9 鍩虹鐗堝埜" 鐨勬牳蹇冨崠鐐?
   涓嶅啀 margin-top:auto 椤跺埌 ul 搴? 閬垮厤璺熷叾浠栧崱鐨勬渶鍚庝竴鏉?bullet 妯悜閿欎綅 */
#page-studio #studio-inner .tierCard li.bonusBullet,
#page-pricing .priceCard li.bonusBullet {
  color: #c4783a !important;
  font-weight: 600 !important;
}
#page-studio #studio-inner .tierCard li.bonusBullet strong,
#page-pricing .priceCard li.bonusBullet strong {
  color: #c4783a !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard li::before {
  top: 6px !important;
  left: 1px !important;
  width: 4px !important;
  height: 4px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .tierCard button {
  margin-top: 12px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

#page-studio #studio-inner .studioStateTier.isGenReplenish .recommendBadge {
  top: 8px !important;
  right: 10px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
}

/* 3 鍗″垪甯冨眬闂磋窛鏀剁獎涓€鐐癸紝璁╁崟鍗＄◢瀹戒竴浜?*/
#page-studio #studio-inner .studioStateTier.isGenReplenish .studioTierGrid {
  gap: 10px !important;
}

/* ===== 鍔ㄤ綔鍒嗕韩鍗?modal (share card) ===== */
.shareCardOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 14, 8, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shareCardOverlay[hidden] { display: none; }

.shareCardCard {
  position: relative;
  background: #fffdf8;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  padding: 24px 24px 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.shareCardClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(53, 37, 25, 0.08);
  color: #352519;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.shareCardClose:hover { background: rgba(53, 37, 25, 0.16); }

.shareCardBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shareCardStatus {
  font-size: 13px;
  color: #8a7053;
  text-align: center;
  min-height: 18px;
}

.shareCardPreview {
  width: 100%;
  background: #f7eedb;
  border-radius: 14px;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
}

.shareCardPreview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  background: #fffdf8;
}

.shareCardMobileHint {
  margin: 0;
  font-size: 12px;
  color: #8a7053;
  text-align: center;
}

.shareCardActions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.shareCardActions button {
  flex: 1;
  padding: 12px 16px;
}

.shareCardActions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* done 鐘舵€佸垎浜崱鎸夐挳璺熺幇鏈?secondary button 瑙嗚涓€鑷? 涓嶆姠涓?CTA */
.doneShareCard { /* 鍗犱綅 hook, 蹇呰鏃跺崟鐙皟鏍峰紡 */ }

@media (max-width: 480px) {
  .shareCardOverlay { padding: 12px; }
  .shareCardCard { padding: 18px 14px 14px; border-radius: 16px; }
  .shareCardActions button { padding: 10px 12px; font-size: 14px; }
}

/* ===== Pet art album studio ===== */
#page-art-album {
  padding: 0 0 64px;
}

#page-art-album .artAlbumStudio,
#page-art-album .artAlbumTemplates {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

#page-art-album .artAlbumStudio {
  padding-top: 28px;
}

#page-art-album .artAlbumStudioLead {
  display: block;
  margin-bottom: 16px;
}

#page-art-album .artAlbumStudioCopy {
  display: grid;
  gap: 12px;
}

#page-art-album .artAlbumStudioLead h1,
#page-art-album .artAlbumPanelHead h2,
#page-art-album .artAlbumSectionHead h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-hero);
  font-weight: 500;
  letter-spacing: 0;
}

#page-art-album .artAlbumStudioLead h1 {
  max-width: 760px;
  font-size: 42px;
  line-height: 1.08;
}

#page-art-album .artAlbumStudioLead p,
#page-art-album .artAlbumSectionHead p,
#page-art-album .artAlbumCheckoutMessage,
#page-art-album .artAlbumQrHint {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

#page-art-album .artAlbumStudioLead p {
  max-width: 520px;
  font-size: 15px;
}

#page-art-album .artAlbumEyebrow {
  display: inline-flex;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

#page-art-album .artAlbumStudioGrid {
  display: grid;
  --art-album-stage-height: clamp(390px, 34vw, 480px);
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

#page-art-album .artAlbumPreviewPane {
  min-width: 0;
  min-height: var(--art-album-stage-height);
  height: var(--art-album-stage-height);
  display: grid;
  border: 1px solid rgba(44, 32, 22, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.74);
  padding: 10px;
  box-shadow: 0 18px 50px rgba(44, 32, 22, 0.09);
}

#page-art-album .artAlbumPreviewPane[data-state="generating"],
#page-art-album .artAlbumPreviewPane[data-state="ready"] {
  height: auto;
  min-height: var(--art-album-stage-height);
  overflow: visible;
}

#page-art-album .artAlbumHeroBoard {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(44, 32, 22, 0.13);
  border-radius: 8px;
  background: #fffaf2;
  padding: 8px;
}

#page-art-album .artAlbumHeroBoard[hidden] {
  display: none;
}

#page-art-album .artAlbumHeroBoard::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  pointer-events: none;
}

#page-art-album .artAlbumHeroPreviewGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  height: 100%;
}

#page-art-album .artAlbumHeroStyleCard {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(44, 32, 22, 0.11);
  border-radius: 6px;
  background: var(--bg-card);
}

#page-art-album .artAlbumPreviewOpen {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

#page-art-album .artAlbumPreviewOpen:focus-visible {
  outline: 2px solid rgba(180, 112, 58, 0.78);
  outline-offset: -2px;
}

#page-art-album .artAlbumHeroStyleCard .artAlbumPreviewOpen {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#page-art-album .artAlbumHeroStyleCard img {
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

#page-art-album .artAlbumHeroStyleCard span {
  position: absolute;
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.84);
  color: #fffaf2;
  font-size: 10px;
  font-weight: 900;
}

#page-art-album .artAlbumHeroStyleCard strong,
#page-art-album .artAlbumHeroStyleCard small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-art-album .artAlbumHeroStyleCard strong {
  padding: 6px 7px 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.2;
}

#page-art-album .artAlbumHeroStyleCard small {
  padding: 2px 7px 7px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.2;
}

#page-art-album .artAlbumHeroCaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.84);
  color: #fffaf2;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

#page-art-album .artAlbumSectionHead h2 {
  font-size: 30px;
  line-height: 1.14;
}

#page-art-album .artAlbumTemplateJump {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  text-decoration: none;
  font-size: 13px;
}

#page-art-album .artAlbumCheckoutCard {
  min-height: var(--art-album-stage-height);
  height: var(--art-album-stage-height);
  overflow: hidden;
  border: 1px solid rgba(44, 32, 22, 0.15);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 12px;
  box-shadow: 0 14px 36px rgba(44, 32, 22, 0.12);
  display: grid;
  align-content: start;
}

/* 结账模式: 进入支付/生成/完成态后, 左侧创作台固定高度且 overflow:hidden, 若还堆着
   01 套系 + 02 上传 + 大二维码就会溢出被裁切, 套系那条线被压乱(2026-06-10 owner 实测)。
   这里隐藏创作步骤与"上传/重新上传"主按钮, 让订单 + 支付二维码独占干净一列;
   保留"清空"作为取消/重来出口。 */
#page-art-album .artAlbumCheckoutCard[data-mode="payment"] .artAlbumStepBlock,
#page-art-album .artAlbumCheckoutCard[data-mode="generating"] .artAlbumStepBlock,
#page-art-album .artAlbumCheckoutCard[data-mode="ready"] .artAlbumStepBlock,
#page-art-album .artAlbumCheckoutCard[data-mode="payment"] #artAlbumPayButton,
#page-art-album .artAlbumCheckoutCard[data-mode="generating"] #artAlbumPayButton,
#page-art-album .artAlbumCheckoutCard[data-mode="ready"] #artAlbumPayButton {
  display: none;
}

#page-art-album .artAlbumPanelHead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

#page-art-album .artAlbumPanelHead h2 {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.16;
}

#page-art-album .artAlbumPanelHint {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

#page-art-album .artAlbumFreePreviewDownload {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

#page-art-album .artAlbumFreePreviewDownload:hover {
  text-decoration: underline;
}

#page-art-album .artAlbumStepBlock {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

#page-art-album .artAlbumStepBlock h3 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 13px;
}

#page-art-album .artAlbumStepNumber {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

#page-art-album .artAlbumSuiteToggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-art-album .artAlbumSuiteButton {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fffaf2;
  padding: 7px 13px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#page-art-album .artAlbumSuiteButton:hover {
  transform: translateY(-1px);
}

#page-art-album .artAlbumSuiteButton strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.2;
}

#page-art-album .artAlbumSuiteButton span {
  font-size: 12px;
  line-height: 1.2;
}

#page-art-album .artAlbumSuiteButton span:not(:empty)::before {
  content: "·";
  margin-right: 5px;
  color: var(--text-secondary);
  opacity: 0.6;
}

#page-art-album .artAlbumSuiteButton.isSelected {
  border-color: rgba(196, 120, 58, 0.66);
  background: #fff2df;
  box-shadow: inset 0 0 0 1px rgba(196, 120, 58, 0.16);
}

#page-art-album .artAlbumPhotoInput {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#page-art-album .artAlbumUploadBox {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 66px;
  border: 1px dashed rgba(44, 32, 22, 0.28);
  border-radius: 8px;
  background: #fffaf2;
  padding: 8px;
  cursor: pointer;
}

#page-art-album .artAlbumUploadBox img {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
  background: #efe5d4;
}

#page-art-album .artAlbumUploadBox img[hidden] {
  display: block;
  visibility: hidden;
}

#page-art-album .artAlbumUploadBox span {
  display: grid;
  gap: 5px;
}

#page-art-album .artAlbumUploadBox strong {
  color: var(--text-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

#page-art-album .artAlbumUploadBox small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#page-art-album .artAlbumUploadActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  gap: 8px;
}

#page-art-album .artAlbumUploadActions > #artAlbumPayButton {
  flex: 1 1 auto;
}

#page-art-album .artAlbumUploadActions > .artAlbumClearButton {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 注入的购买/下载区整行换到上传+清空这一行的下方 */
#page-art-album .artAlbumUploadActions > .artAlbumCheckoutActions,
#page-art-album .artAlbumUploadActions > .artAlbumDownloadActions {
  flex-basis: 100%;
}

#page-art-album .artAlbumUploadActions .primaryButton {
  min-height: 34px;
  justify-content: center;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

#page-art-album .artAlbumWorkbenchPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(44, 32, 22, 0.13);
  border-radius: 8px;
  background: #fffaf2;
  padding: 12px;
}

#page-art-album .artAlbumWorkbenchPanel[hidden] {
  display: none;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"],
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] {
  grid-template-rows: auto auto minmax(0, 1fr);
  height: auto;
  overflow: visible;
}

#page-art-album .artAlbumWorkbenchHead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

#page-art-album .artAlbumWorkbenchHead h2 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-family: var(--font-hero);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

#page-art-album .artAlbumWorkbenchBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: #fff2df;
  color: var(--accent);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#page-art-album .artAlbumResultGrid {
  display: grid;
  grid-template-columns: minmax(112px, 0.55fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] .artAlbumResultGrid {
  display: none;
}

#page-art-album .artAlbumSourceFrame {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(44, 32, 22, 0.12);
  border-radius: 8px;
  background: #efe5d4;
}

#page-art-album .artAlbumSourceFrame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #efe5d4;
}

#page-art-album .artAlbumSourceFrame img[hidden] {
  display: none;
}

#page-art-album .artAlbumSourceFrame figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.82);
  color: #fffaf2;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

#page-art-album .artAlbumFreePreviewBox {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  border: 1px solid rgba(47, 107, 79, 0.22);
  border-radius: 8px;
  background: #f1fbf4;
  padding: 8px;
  margin: 0;
  overflow: hidden;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
  grid-template-columns: minmax(74px, 0.18fr) minmax(240px, 0.82fr);
}

#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumSourceFrame {
  align-self: start;
  aspect-ratio: 1;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumSourceFrame figcaption,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumSourceFrame figcaption,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumSourceFrame figcaption {
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  font-size: 10px;
}

#page-art-album .artAlbumFreePreviewBox[hidden] {
  display: none;
}

#page-art-album .artAlbumFreePreviewBox img {
  width: min(100%, 290px);
  height: auto;
  justify-self: center;
  min-height: 0;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  object-fit: contain;
  background: #e1eddf;
  box-shadow: 0 14px 30px rgba(44, 32, 22, 0.12);
}

#page-art-album .artAlbumFreePreviewBox[data-ready="false"] img {
  opacity: 0.72;
  filter: saturate(0.84);
}

#page-art-album .artAlbumFreePreviewBox div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#page-art-album .artAlbumFreePreviewBox strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.25;
}

#page-art-album .artAlbumFreePreviewBox small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

#page-art-album .artAlbumPreviewPlaceholder {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 0;
  border: 1px dashed rgba(44, 32, 22, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--text-secondary);
  text-align: center;
  padding: 12px;
}

#page-art-album .artAlbumPreviewPlaceholder[hidden] {
  display: none;
}

#page-art-album .artAlbumPreviewPlaceholder strong {
  color: var(--text-primary);
  font-size: 14px;
}

#page-art-album .artAlbumPreviewPlaceholder span {
  font-size: 12px;
}

#page-art-album .artAlbumOrderBox {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(196, 120, 58, 0.22);
  border-radius: 8px;
  background: #fff7ed;
  padding: 7px 8px;
  margin: 0;
}

#page-art-album .artAlbumOrderBox[hidden] {
  display: none;
}

#page-art-album .artAlbumOrderBox div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 12px;
}

#page-art-album .artAlbumOrderBox strong {
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

#page-art-album .artAlbumOrderBox p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

#page-art-album .artAlbumCheckoutMessage {
  min-height: 18px;
  font-size: 12px;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"] .artAlbumCheckoutMessage {
  min-height: 0;
  margin: -3px 0 0;
  font-size: 0;
}

#page-art-album .artAlbumCheckoutMessage[data-tone="success"] {
  color: #2f6b4f;
}

#page-art-album .artAlbumCheckoutMessage[data-tone="error"] {
  color: #a44728;
}

#page-art-album .artAlbumQrPanel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
}

#page-art-album .artAlbumQrPanel[hidden] {
  display: none;
}

#page-art-album .artAlbumQrPanel h3 {
  margin: 0;
  font-size: 14px;
  grid-column: 2;
  grid-row: 1;
}

#page-art-album .artAlbumQrBox {
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  padding: 8px;
  grid-row: 1 / span 2;
}

#page-art-album .artAlbumQrBox img {
  width: min(112px, 28vw);
  aspect-ratio: 1;
  object-fit: contain;
}

#page-art-album .artAlbumQrHint {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
}

#page-art-album .artAlbumCheckoutActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
}

#page-art-album .artAlbumCheckoutActions .primaryButton,
#page-art-album .artAlbumCheckoutActions .secondaryButton {
  min-height: 34px;
  width: 100%;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
}

#page-art-album .artAlbumCheckoutActions [hidden] {
  display: none;
}

#page-art-album .artAlbumDownloadActions {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

#page-art-album .artAlbumDownloadActions[hidden] {
  display: none;
}

#page-art-album .artAlbumDownloadActions .primaryButton {
  min-height: 36px;
  justify-content: center;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  text-decoration: none;
}

#page-art-album .artAlbumWallpaperSize {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

#page-art-album .artAlbumProgress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

#page-art-album .artAlbumProgress[hidden] {
  display: none;
}

#page-art-album .artAlbumProgressStep {
  display: grid;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

#page-art-album .artAlbumProgressStep span {
  height: 4px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.12);
}

#page-art-album .artAlbumProgressStep.isDone span {
  background: var(--accent);
}

#page-art-album .artAlbumProgressStep strong {
  font-weight: 800;
}

#page-art-album .artAlbumResultSet {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

#page-art-album .artAlbumResultSet[hidden] {
  display: none;
}

#page-art-album .artAlbumResultCard {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  animation: artAlbumCardIn 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--index, 0) * 35ms);
}

#page-art-album .artAlbumResultCard img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  object-fit: cover;
  background: #efe5d4;
  box-shadow: 0 8px 18px rgba(44, 32, 22, 0.08);
}

#page-art-album .artAlbumResultOpen {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  text-align: left;
}

#page-art-album .artAlbumResultOpen:focus-visible {
  outline: 2px solid rgba(196, 120, 58, 0.9);
  outline-offset: 3px;
}

#page-art-album .artAlbumResultOpen img {
  display: block;
  transition: transform 180ms var(--ease), box-shadow 180ms ease;
}

#page-art-album .artAlbumResultOpen:hover img {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(44, 32, 22, 0.13);
}

#page-art-album .artAlbumResultPending {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(44, 32, 22, 0.1);
  border-radius: 7px;
  background: linear-gradient(135deg, #efe5d4 0%, #fff7ec 45%, #e7dbc8 100%);
}

#page-art-album .artAlbumResultPending::before {
  content: none;
}

#page-art-album .artAlbumResultPending span {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(196, 120, 58, 0.22);
  border-top-color: rgba(196, 120, 58, 0.72);
  border-radius: 999px;
  animation: artAlbumSpin 1.4s linear infinite;
}

#page-art-album .artAlbumResultCard figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
}

#page-art-album .artAlbumResultCard figcaption span {
  color: var(--accent);
  font-weight: 900;
}

#page-art-album .artAlbumResultCard figcaption strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-art-album .artAlbumResultCard figcaption a {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

@keyframes artAlbumCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes artAlbumShimmer {
  to {
    transform: translateX(120%);
  }
}

@keyframes artAlbumSpin {
  to {
    transform: rotate(360deg);
  }
}

.artAlbumLightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(18, 13, 9, 0.72);
  padding: 24px;
}

.artAlbumLightbox[hidden] {
  display: none;
}

.artAlbumLightboxDialog {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: min(92vw, 520px);
  max-height: 92vh;
}

.artAlbumLightboxDialog img {
  justify-self: center;
  max-width: 100%;
  max-height: min(78vh, 780px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 8px;
  background: #efe5d4;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.artAlbumLightboxClose,
.artAlbumLightboxNav {
  position: absolute;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 250, 242, 0.3);
  background: rgba(44, 32, 22, 0.72);
  color: #fffaf2;
  cursor: pointer;
}

.artAlbumLightboxClose {
  right: -10px;
  top: -10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}

.artAlbumLightboxNav {
  top: 46%;
  width: 38px;
  height: 54px;
  border-radius: 8px;
  font-size: 34px;
}

.artAlbumLightboxNav.isPrev {
  left: -52px;
}

.artAlbumLightboxNav.isNext {
  right: -52px;
}

.artAlbumLightboxBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 250, 242, 0.22);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.92);
  padding: 10px 12px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.artAlbumLightboxBar div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.artAlbumLightboxBar strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artAlbumLightboxBar span {
  color: var(--text-secondary);
  font-size: 12px;
}

.artAlbumLightboxBar a {
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--text-primary);
  color: #fffaf2;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  #page-art-album .artAlbumResultCard,
  #page-art-album .artAlbumResultPending::before,
  #page-art-album .artAlbumResultPending span {
    animation: none;
  }
}

#page-art-album .artAlbumTemplates {
  padding-top: 34px;
}

#page-art-album .artAlbumSectionHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-bottom: 16px;
}

#page-art-album .artAlbumSectionActions {
  display: flex;
  align-items: end;
  gap: 12px;
}

#page-art-album .artAlbumSectionHead p {
  max-width: 320px;
  text-align: right;
  font-size: 13px;
}

#page-art-album .artAlbumTemplateGrid {
  display: grid;
  gap: 24px;
}

#page-art-album .artAlbumStyleCard {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(44, 32, 22, 0.12);
  border-radius: 8px;
  background: var(--bg-card);
  scroll-snap-align: start;
}

#page-art-album .artAlbumStyleImage {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #efe5d4;
}

#page-art-album .artAlbumStyleImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms var(--ease);
}

#page-art-album .artAlbumStyleCard:hover .artAlbumStyleImage img {
  transform: scale(1.035);
}

#page-art-album .artAlbumStyleIndex {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(44, 32, 22, 0.86);
  color: #fffaf2;
  font-size: 11px;
  font-weight: 900;
}

#page-art-album .artAlbumStyleBody {
  padding: 9px 10px 10px;
}

#page-art-album .artAlbumStyleBody span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

#page-art-album .artAlbumStyleBody h3 {
  margin: 4px 0 2px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
}

#page-art-album .artAlbumStyleBody p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

#page-art-album .artAlbumStyleCard.isCompact .artAlbumStyleBody p {
  display: none;
}

#page-art-album .artAlbumSuiteGroup {
  display: grid;
  gap: 12px;
}

#page-art-album .artAlbumSuiteGroup + .artAlbumSuiteGroup {
  margin-top: 2px;
}

#page-art-album .artAlbumSuiteGroupHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

#page-art-album .artAlbumSuiteGroupHead strong {
  color: var(--text-primary);
  font-family: var(--font-hero);
  font-size: 20px;
  font-weight: 500;
}

#page-art-album .artAlbumSuiteGroupHead span {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: right;
}

#page-art-album .artAlbumSuiteGroupGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1040px) {
  #page-art-album .artAlbumStudioGrid,
  #page-art-album .artAlbumStudioLead {
    grid-template-columns: 1fr;
  }

  #page-art-album .artAlbumPreviewPane,
  #page-art-album .artAlbumCheckoutCard {
    min-height: auto;
    height: auto;
  }

  #page-art-album .artAlbumPreviewPane {
    aspect-ratio: auto;
  }

  #page-art-album .artAlbumHeroPreviewGrid {
    min-height: 360px;
  }
}

@media (max-width: 700px) {
  #page-art-album {
    padding-bottom: 42px;
  }

  #page-art-album .artAlbumStudio,
  #page-art-album .artAlbumTemplates {
    width: min(100% - 32px, 1180px);
  }

  #page-art-album .artAlbumStudio {
    padding-top: 20px;
  }

  #page-art-album .artAlbumStudioLead h1 {
    font-size: 34px;
  }

  #page-art-album .artAlbumStudioLead p {
    font-size: 14px;
  }

  #page-art-album .artAlbumStudioGrid {
    gap: 14px;
  }

  #page-art-album .artAlbumPreviewPane,
  #page-art-album .artAlbumCheckoutCard {
    padding: 12px;
  }

  #page-art-album .artAlbumHeroPreviewGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    height: auto;
    min-height: 0;
  }

  #page-art-album .artAlbumHeroStyleCard img {
    height: auto;
  }

  #page-art-album .artAlbumHeroCaption {
    left: 16px;
    bottom: 16px;
  }

  #page-art-album .artAlbumSectionHead {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  #page-art-album .artAlbumSectionActions {
    display: grid;
    justify-items: start;
  }

  #page-art-album .artAlbumSectionHead h2 {
    font-size: 26px;
  }

  #page-art-album .artAlbumSectionHead p {
    text-align: left;
  }

  #page-art-album .artAlbumSuiteToggle {
    gap: 6px;
  }

  #page-art-album .artAlbumProgress {
    grid-template-columns: 1fr;
  }

  #page-art-album .artAlbumResultSet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artAlbumLightbox {
    padding: 14px;
  }

  .artAlbumLightboxDialog {
    width: min(100%, 430px);
  }

  .artAlbumLightboxNav {
    top: auto;
    bottom: 72px;
    width: 36px;
    height: 42px;
    font-size: 28px;
  }

  .artAlbumLightboxNav.isPrev {
    left: 8px;
  }

  .artAlbumLightboxNav.isNext {
    right: 8px;
  }

  .artAlbumLightboxBar {
    padding: 9px 10px;
  }

  #page-art-album .artAlbumDownloadActions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #page-art-album .artAlbumCheckoutActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-art-album .artAlbumWorkbenchPanel {
    min-height: 480px;
    height: auto;
    overflow: visible;
  }

  #page-art-album .artAlbumWorkbenchPanel[data-state="generating"],
  #page-art-album .artAlbumWorkbenchPanel[data-state="ready"] {
    min-height: 0;
  }

  #page-art-album .artAlbumResultGrid {
    grid-template-columns: 1fr;
    grid-template-rows: 170px minmax(260px, auto);
  }

  #page-art-album .artAlbumQrPanel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  #page-art-album .artAlbumQrPanel h3,
  #page-art-album .artAlbumQrHint,
  #page-art-album .artAlbumQrBox {
    grid-column: auto;
    grid-row: auto;
  }

  #page-art-album .artAlbumQrBox img {
    width: min(190px, 66vw);
  }

  #page-art-album .artAlbumUploadBox {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 96px;
  }

  #page-art-album .artAlbumUploadBox img {
    width: 76px;
    height: 76px;
  }

  #page-art-album .artAlbumSuiteGroupHead {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3px;
  }

  #page-art-album .artAlbumSuiteGroupHead span {
    text-align: left;
  }

  #page-art-album .artAlbumSuiteGroupGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Art album UI closure: keep controls in the left rail and images in the right rail. */
#page-art-album .artAlbumStudioGrid {
  align-items: start;
}

#page-art-album .artAlbumPreviewPane {
  height: auto;
  padding: 12px;
}

#page-art-album .artAlbumPreviewPane[data-state="selected"],
#page-art-album .artAlbumPreviewPane[data-state="uploading"],
#page-art-album .artAlbumPreviewPane[data-state="preview"],
#page-art-album .artAlbumPreviewPane[data-state="payment"] {
  min-height: 0;
}

#page-art-album .artAlbumCheckoutCard {
  height: auto;
  overflow: visible;
}

#page-art-album .artAlbumWorkbenchPanel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"],
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] {
  grid-template-rows: minmax(0, 1fr);
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"] .artAlbumWorkbenchHead,
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] .artAlbumWorkbenchHead {
  display: none;
}

#page-art-album .artAlbumResultGrid {
  grid-template-columns: minmax(176px, 220px) minmax(220px, 320px);
  justify-content: start;
  align-items: start;
  gap: 16px;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
  grid-template-columns: minmax(176px, 220px) minmax(220px, 320px);
}

#page-art-album .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumSourceFrame {
  width: 100%;
  aspect-ratio: 4 / 5;
}

#page-art-album .artAlbumFreePreviewBox {
  width: min(100%, 320px);
}

#page-art-album .artAlbumFreePreviewBox img {
  width: min(100%, 240px);
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

#page-art-album .artAlbumPreviewPlaceholder {
  width: min(100%, 320px);
  aspect-ratio: 2 / 3;
}

#page-art-album .artAlbumPreviewPlaceholder[data-state="loading"] {
  border-style: solid;
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.86), rgba(239, 229, 212, 0.54));
}

#page-art-album .artAlbumCheckoutMessage,
#page-art-album .artAlbumCheckoutActions,
#page-art-album .artAlbumDownloadActions,
#page-art-album .artAlbumProgress {
  margin-top: 8px;
}

#page-art-album .artAlbumCheckoutActions[hidden] {
  display: none;
}

#page-art-album .artAlbumDownloadActions {
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}

#page-art-album .artAlbumProgress {
  grid-template-columns: 1fr;
}

#page-art-album .artAlbumProgressStep {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

#page-art-album .artAlbumResultCard img {
  object-fit: contain;
}

#page-art-album .artAlbumResultPending span {
  width: 18px;
  height: 18px;
  border-width: 2px;
  animation-duration: 1.8s;
}

.accountArtAlbumItem {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.accountArtAlbumHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.accountArtAlbumActions button,
.accountArtAlbumActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fffaf2;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 700px) {
  #page-art-album .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  #page-art-album .artAlbumFreePreviewBox,
  #page-art-album .artAlbumPreviewPlaceholder {
    width: 100%;
  }
}

/* Art album final UX pass: left rail owns all actions, right rail only shows images. */
#page-art-album .artAlbumStudioGrid {
  --art-album-stage-height: clamp(500px, 34vw, 560px);
  align-items: stretch;
}

#page-art-album .artAlbumCheckoutCard,
#page-art-album .artAlbumPreviewPane {
  height: var(--art-album-stage-height);
  min-height: var(--art-album-stage-height);
  overflow: hidden;
}

#page-art-album .artAlbumPreviewPane[data-state="catalog"],
#page-art-album .artAlbumPreviewPane[data-state="selected"],
#page-art-album .artAlbumPreviewPane[data-state="uploading"],
#page-art-album .artAlbumPreviewPane[data-state="preview"],
#page-art-album .artAlbumPreviewPane[data-state="payment"],
#page-art-album .artAlbumPreviewPane[data-state="generating"],
#page-art-album .artAlbumPreviewPane[data-state="ready"] {
  height: var(--art-album-stage-height);
  min-height: var(--art-album-stage-height);
  overflow: hidden;
}

#page-art-album .artAlbumCheckoutCard {
  display: flex;
  flex-direction: column;
  /* 固定高度内整体垂直居中: 内容比卡矮时上下留白均分, 不再忽上忽下/底部空带 */
  justify-content: center;
}

#page-art-album .artAlbumPreviewPane {
  display: grid;
  padding: 12px;
}

#page-art-album .artAlbumPreviewPane[data-state="selected"],
#page-art-album .artAlbumPreviewPane[data-state="uploading"],
#page-art-album .artAlbumPreviewPane[data-state="preview"],
#page-art-album .artAlbumPreviewPane[data-state="payment"] {
  width: min(100%, 430px);
  justify-self: start;
  background: rgba(255, 250, 242, 0.86);
}

#page-art-album .artAlbumPreviewPane[data-state="catalog"],
#page-art-album .artAlbumPreviewPane[data-state="generating"],
#page-art-album .artAlbumPreviewPane[data-state="ready"] {
  width: 100%;
  justify-self: stretch;
}

#page-art-album .artAlbumHeroBoard,
#page-art-album .artAlbumWorkbenchPanel {
  height: 100%;
  min-height: 0;
}

#page-art-album .artAlbumHeroPreviewGrid {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

#page-art-album .artAlbumHeroStyleCard {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

#page-art-album .artAlbumHeroStyleCard img {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

#page-art-album .artAlbumWorkbenchPanel,
#page-art-album .artAlbumWorkbenchPanel[data-state="generating"],
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  max-height: 100%;
}

#page-art-album .artAlbumWorkbenchPanel[hidden] {
  display: none;
}

#page-art-album .artAlbumWorkbenchHead,
#page-art-album .artAlbumSourceFrame {
  display: none !important;
}

#page-art-album .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
  display: grid;
  grid-template-columns: minmax(220px, 340px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 0;
  height: 100%;
  min-height: 0;
}

#page-art-album .artAlbumPreviewPlaceholder,
#page-art-album .artAlbumPreviewPlaceholder[data-state="loading"] {
  width: min(100%, 360px);
  height: min(100%, 480px);
  max-height: 100%;
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  border-radius: 8px;
}

#page-art-album .artAlbumFreePreviewBox {
  width: min(100%, 360px);
  height: min(100%, 480px);
  max-height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: center;
  justify-self: center;
  padding: 8px;
}

#page-art-album .artAlbumFreePreviewBox img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}

#page-art-album .artAlbumFreePreviewBox div {
  padding-top: 2px;
}

#page-art-album .artAlbumResultSet {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
}

#page-art-album .artAlbumResultCard {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  gap: 4px;
}

#page-art-album .artAlbumResultOpen,
#page-art-album .artAlbumResultPending {
  min-height: 0;
}

#page-art-album .artAlbumResultCard img,
#page-art-album .artAlbumResultPending {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

#page-art-album .artAlbumResultPending {
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.88), rgba(239, 229, 212, 0.7));
}

#page-art-album .artAlbumResultPending span {
  width: 14px;
  height: 14px;
  border-width: 2px;
  animation-duration: 2.4s;
}

#page-art-album .artAlbumResultCard figcaption {
  min-height: 20px;
  height: 20px;
  font-size: 10px;
  overflow: hidden;
}

#page-art-album .artAlbumCheckoutActions {
  grid-template-columns: 1fr;
  margin-top: 0;
}

#page-art-album .artAlbumCheckoutActions .secondaryButton,
#page-art-album #artAlbumCheckButton {
  display: none !important;
}

#page-art-album .artAlbumDownloadActions {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

#page-art-album .artAlbumDownloadActions .artAlbumWallpaperSize {
  display: none;
}

#page-art-album .artAlbumUploadActions:has(.artAlbumCheckoutActions:not([hidden])),
#page-art-album .artAlbumUploadActions:has(.artAlbumDownloadActions:not([hidden])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-art-album .artAlbumUploadActions .artAlbumCheckoutActions .primaryButton,
#page-art-album .artAlbumUploadActions .artAlbumDownloadActions .primaryButton {
  width: 100%;
}

#page-art-album .artAlbumProgress {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#page-art-album .artAlbumProgress[hidden] {
  display: none;
}

#page-art-album .artAlbumProgressStep {
  display: none;
}

@media (max-width: 980px) {
  #page-art-album .artAlbumStudioGrid {
    --art-album-stage-height: auto;
    grid-template-columns: 1fr;
  }

  #page-art-album .artAlbumCheckoutCard,
  #page-art-album .artAlbumPreviewPane {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #page-art-album .artAlbumHeroBoard,
  #page-art-album .artAlbumWorkbenchPanel {
    height: auto;
    min-height: 0;
  }

  #page-art-album .artAlbumHeroPreviewGrid,
  #page-art-album .artAlbumResultSet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    height: auto;
    overflow: visible;
  }

  #page-art-album .artAlbumResultCard img,
  #page-art-album .artAlbumResultPending,
  #page-art-album .artAlbumHeroStyleCard img {
    aspect-ratio: 2 / 3;
    height: auto;
  }

  #page-art-album .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
    height: auto;
    min-height: 360px;
  }
}

/* Restore the art-album page title breathing room after the compact workbench pass. */
#page-art-album .artAlbumStudio {
  padding-top: 40px;
}

#page-art-album .artAlbumStudioLead {
  margin-bottom: 28px;
}

#page-art-album .artAlbumStudioCopy {
  gap: 14px;
}

#page-art-album .artAlbumStudioLead h1 {
  max-width: 980px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.06;
}

#page-art-album .artAlbumStudioLead p {
  max-width: 680px;
  font-size: 17px;
}

@media (max-width: 980px) {
  #page-art-album .artAlbumStudio {
    padding-top: 28px;
  }

  #page-art-album .artAlbumStudioLead {
    margin-bottom: 22px;
  }

  #page-art-album .artAlbumStudioLead h1 {
    font-size: clamp(36px, 8vw, 52px);
  }
}

/* Art album brand unification pass: align density with the desktop pet workbench. */
#page-art-album .artAlbumStudio {
  padding-top: 28px;
}

#page-art-album .artAlbumStudioLead {
  margin-bottom: 18px;
}

#page-art-album .artAlbumStudioCopy {
  gap: 8px;
}

#page-art-album .artAlbumStudioLead h1 {
  max-width: 760px;
  font-family: var(--font-hero);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 560;
  line-height: 1.14;
  letter-spacing: 0;
}

#page-art-album .artAlbumStudioLead p {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.65;
}

#page-art-album .artAlbumStudioGrid {
  --art-album-stage-height: clamp(500px, 32vw, 540px);
  gap: 16px;
}

#page-art-album .artAlbumCheckoutCard,
#page-art-album .artAlbumPreviewPane {
  border: 1px solid rgba(44, 32, 22, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.92);
  box-shadow: 0 14px 36px rgba(44, 32, 22, 0.08);
}

#page-art-album .artAlbumCheckoutCard {
  padding: 14px;
  gap: 4px;
}

#page-art-album .artAlbumPanelHead h2,
#page-art-album .artAlbumWorkbenchHead h2,
#page-art-album .artAlbumSuiteGroupHead strong {
  font-family: var(--font-hero);
  font-size: 18px;
  font-weight: 560;
  line-height: 1.2;
}

#page-art-album .artAlbumStepBlock {
  padding: 6px 10px;
  gap: 6px;
  margin-bottom: 2px;
}

#page-art-album .artAlbumStepBlock h3,
#page-art-album .artAlbumSuiteButton strong,
#page-art-album .artAlbumUploadBox strong {
  font-size: 13px;
}

#page-art-album .artAlbumSuiteButton span,
#page-art-album .artAlbumUploadBox small,
#page-art-album .artAlbumCheckoutMessage,
#page-art-album .artAlbumWallpaperSize,
#page-art-album .artAlbumProgress {
  font-size: 12px;
}

#page-art-album .artAlbumUploadActions .primaryButton,
#page-art-album .artAlbumCheckoutActions .primaryButton,
#page-art-album .artAlbumCheckoutActions .secondaryButton,
#page-art-album .artAlbumDownloadActions .primaryButton {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

#page-art-album .artAlbumPreviewPane,
#page-art-album .artAlbumPreviewPane[data-state="selected"],
#page-art-album .artAlbumPreviewPane[data-state="uploading"],
#page-art-album .artAlbumPreviewPane[data-state="preview"],
#page-art-album .artAlbumPreviewPane[data-state="payment"],
#page-art-album .artAlbumPreviewPane[data-state="generating"],
#page-art-album .artAlbumPreviewPane[data-state="ready"] {
  width: 100%;
  justify-self: stretch;
  padding: 14px;
  overflow: hidden;
}

#page-art-album .artAlbumWorkbenchPanel,
#page-art-album .artAlbumWorkbenchPanel[data-state="selected"],
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"],
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"],
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"],
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

#page-art-album .artAlbumWorkbenchPanel[hidden] {
  display: none;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumWorkbenchHead,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumWorkbenchHead,
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumWorkbenchHead,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumWorkbenchHead {
  display: flex !important;
  padding-bottom: 8px;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"] .artAlbumWorkbenchHead,
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] .artAlbumWorkbenchHead {
  display: none !important;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumSourceFrame {
  display: grid !important;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
}

#page-art-album .artAlbumWorkbenchPanel[data-state="generating"] .artAlbumSourceFrame,
#page-art-album .artAlbumWorkbenchPanel[data-state="ready"] .artAlbumSourceFrame {
  display: none !important;
}

#page-art-album .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
#page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
  display: grid;
  grid-template-columns: minmax(132px, 0.44fr) minmax(0, 0.9fr);
  align-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

#page-art-album .artAlbumPreviewPlaceholder,
#page-art-album .artAlbumPreviewPlaceholder[data-state="loading"],
#page-art-album .artAlbumFreePreviewBox {
  width: 100%;
  height: 100%;
  max-height: none;
  margin-inline: 0;
  aspect-ratio: auto;
}

#page-art-album .artAlbumFreePreviewBox {
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 8px;
}

#page-art-album .artAlbumFreePreviewBox img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--art-album-aspect, 2 / 3);
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(44, 32, 22, 0.1);
}

#page-art-album .artAlbumFreePreviewBox strong {
  font-size: 13px;
}

#page-art-album .artAlbumFreePreviewBox small {
  font-size: 11px;
}

#page-art-album .artAlbumResultSet {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(var(--art-album-cols, 5), minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  overflow: hidden;
}

#page-art-album .artAlbumResultCard,
#page-art-album .artAlbumResultOpen {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

#page-art-album .artAlbumResultOpen,
#page-art-album .artAlbumResultPending,
#page-art-album .artAlbumResultCard img {
  aspect-ratio: var(--art-album-aspect, 2 / 3);
}

#page-art-album .artAlbumResultCard img,
#page-art-album .artAlbumResultPending {
  max-width: 100%;
  object-fit: contain;
}

#page-art-album .artAlbumHeroPreviewGrid {
  grid-template-columns: repeat(var(--art-album-cols, 5), minmax(0, 1fr));
}

@media (max-width: 980px) {
  #page-art-album .artAlbumStudio {
    padding-top: 24px;
  }

  #page-art-album .artAlbumStudioLead h1 {
    font-size: clamp(26px, 5.2vw, 34px);
  }

  #page-art-album .artAlbumStudioGrid {
    --art-album-stage-height: auto;
    grid-template-columns: 1fr;
  }

  #page-art-album .artAlbumCheckoutCard,
  #page-art-album .artAlbumPreviewPane {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #page-art-album .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="selected"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="uploading"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="preview"] .artAlbumResultGrid,
  #page-art-album .artAlbumWorkbenchPanel[data-state="payment"] .artAlbumResultGrid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 180px) minmax(280px, auto);
  }

  #page-art-album .artAlbumResultSet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    height: auto;
    overflow: visible;
  }
}