:root {
  --ink: #fff7fb;
  --ink-soft: #d7bbc9;
  --line: #513046;
  --paper: #29152b;
  --canvas: #100915;
  --sand: #45213f;
  --lavender: #3d2039;
  --coral: #e9789d;
  --coral-deep: #bc4f78;
  --violet: #743554;
  --dark: #211122;
  --shadow: 0 24px 58px rgba(0, 0, 0, .28);
  --serif: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  --sans: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-family: var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--canvas); overflow-x: clip; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

.shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 84px; padding: 0; margin-top: 18px; border: 0; border-radius: 0; color: #f7f3eb; background: transparent; box-shadow: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-family: var(--serif); font-size: 21px; letter-spacing: -.08em; line-height: 1; }
.brand small { color: #b8c8d8; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px 13px 13px 4px; color: #17243a; background: linear-gradient(135deg, #dfc79c, #b88b55); box-shadow: 0 8px 15px rgba(7, 13, 24, .25); transform: rotate(-7deg); }
.brand-mark svg { width: 20px; height: 20px; transform: rotate(7deg); }
.brand-mark.small { width: 29px; height: 29px; }
.site-nav { display: flex; gap: 25px; margin-left: 54px; }
.site-nav a { color: #c5d0dc; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .2s ease; }
.site-nav a:hover { color: #f1d6a6; }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 47px; border: 1px solid transparent; font-size: 13px; font-weight: 800; letter-spacing: .01em; text-decoration: none; transition: transform .2s ease, background .2s ease, border .2s ease, box-shadow .2s ease; }
.header-cta { padding: 0 17px; border-color: rgba(235,219,185,.38); border-radius: 999px; color: #f3e2be; background: rgba(255,255,255,.06); box-shadow: none; }
.header-cta:hover, .button:hover { transform: translateY(-2px); }
.arrow-icon { display: inline-grid; width: 17px; height: 17px; place-items: center; }
.arrow-icon svg { width: 100%; height: 100%; }

.hero { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 68px; padding: 64px 58px 68px; margin-top: 18px; overflow: hidden; border-radius: 22px; color: #f7f8fb; background: radial-gradient(circle at 82% 8%, rgba(94,129,173,.45), rgba(27,42,65,0) 36%), linear-gradient(115deg, #18263d 0%, #223b5b 100%); box-shadow: 0 28px 60px rgba(28,42,62,.18); }
.hero::before { position: absolute; top: -90px; left: -74px; width: 300px; height: 300px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(194,157,101,.22) 0%, rgba(194,157,101,0) 70%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; padding: 17px 0 18px 28px; border-left: 2px solid #d7b67e; }
.hero-index, .section-number, .step { margin-bottom: 15px; color: #a8bad0; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.hero h1, .section-heading h2, .archive-head h2, .worlds h2, .tips h2, .closing h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.085em; }
.hero h1 { max-width: 560px; margin-bottom: 27px; color: #f5f4f1; font-size: clamp(57px, 5.6vw, 82px); line-height: .99; text-shadow: 0 8px 20px rgba(7,12,21,.17); }
h1 em, h2 em { color: #ddb77d; font-style: normal; }
.hero-copy > p:not(.hero-index) { max-width: 440px; margin-bottom: 32px; color: #d3dce7; font-size: 16px; font-weight: 520; line-height: 1.85; }
.button { padding: 0 21px; border-radius: 7px; }
.button:disabled { cursor: wait; opacity: .72; transform: none; }
.button-dark { color: #18263d; background: linear-gradient(135deg, #e1c491, #bd9157); box-shadow: 0 10px 22px rgba(7,15,27,.22); }
.button-coral { color: #fff; background: linear-gradient(135deg, #29557d, #1d3e61); box-shadow: 0 10px 20px rgba(20,48,77,.20); }
.button-soft { border-color: #cbd7e3; background: #f8fafc; color: #20344e; }
.button-light { color: var(--dark); background: #fff; }
.hero-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10.6; border: 7px solid rgba(235,242,248,.68); border-radius: 16px; background: var(--sand); box-shadow: 0 26px 72px rgba(5, 13, 26, .28); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media figcaption { position: absolute; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 13px; padding: 16px 21px; color: #fff; border-top-left-radius: 11px; background: rgba(34,34,48,.86); backdrop-filter: blur(10px); }
.hero-media figcaption span { color: #e7b5ae; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.hero-media figcaption strong { font-family: var(--serif); font-size: 15px; letter-spacing: -.04em; }

.studio { padding: 116px 42px 42px; margin-top: 24px; border-radius: 22px; background: linear-gradient(145deg, #dbe4ee 0%, #edf1f6 58%, #d7e0eb 100%); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 43px; }
.section-heading h2 { margin: 0; font-size: clamp(47px, 4.4vw, 65px); line-height: 1.08; }
.section-heading > p { max-width: 370px; margin: 0 0 7px; color: #53677e; font-size: 15px; font-weight: 600; line-height: 1.82; }
.studio-layout { display: grid; grid-template-columns: 310px 1fr; gap: 1px; overflow: hidden; border: 1px solid #dedde8; border-radius: 18px 18px 0 0; background: var(--line); box-shadow: 0 28px 76px rgba(45, 44, 68, .10); }
.pet-panel, .scene-panel { background: #fff; }
.pet-panel { padding: 36px 28px; background: linear-gradient(180deg, #e6edf5, #d4deea); }
.pet-panel h3, .scene-panel h3 { margin-bottom: 10px; font-family: var(--serif); font-size: 33px; line-height: 1.08; letter-spacing: -.075em; }
.pet-panel > p:not(.upload-message) { margin-bottom: 21px; color: #666470; font-size: 13px; font-weight: 520; line-height: 1.72; }
.step { display: block; margin-bottom: 18px; color: #547493; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.pet-choice-list { display: grid; gap: 9px; }
.pet-upload-guide { display: grid; gap: 5px; padding: 14px; border: 1px dashed rgba(255, 171, 196, .52); border-radius: 9px; background: rgba(233, 120, 157, .08); }
.pet-upload-guide strong { color: #fff7fb; font-size: 13px; font-weight: 850; }
.pet-upload-guide small { color: #d7bbc9; font-size: 10px; line-height: 1.6; }
.selected-pet { position: relative; display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px; border: 1px solid #dfdce3; border-radius: 7px; color: var(--ink); background: rgba(255,255,255,.76); text-align: left; }
.selected-pet.is-selected { border-color: #696b8b; background: #fff; box-shadow: 0 6px 15px rgba(60, 59, 82, .08); }
.selected-pet img { width: 58px; height: 58px; object-fit: cover; }
.selected-pet > span { display: grid; min-width: 0; gap: 4px; }
.selected-pet strong { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.selected-pet small { overflow: hidden; color: #74717d; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.selected-pet b { position: absolute; top: 8px; right: 8px; display: none; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: var(--dark); font-size: 10px; }
.selected-pet.is-selected b { display: grid; }
.upload-zone { display: flex; align-items: center; gap: 10px; padding: 14px 0; margin-top: 12px; border-top: 1px solid #dfdad5; border-bottom: 1px solid #dfdad5; cursor: pointer; }
.upload-zone input { display: none; }
.upload-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; color: #7b6c78; background: #e9e3e8; }
.upload-icon svg { width: 18px; height: 18px; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { margin-bottom: 3px; font-size: 12px; font-weight: 800; }
.upload-zone small, .upload-message { color: #716f7d; font-size: 10px; font-weight: 550; }
.upload-message { min-height: 28px; margin: 10px 0 0; line-height: 1.6; }
.upload-quality {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  margin-top: 12px;
  border: 1px solid rgba(233, 120, 157, .22);
  border-radius: 10px;
  color: #e4c6d3;
  background: rgba(233, 120, 157, .07);
  font-size: 10px;
  line-height: 1.55;
}
.upload-quality strong { color: #fff7fb; font-size: 11px; font-weight: 850; }
.upload-quality span { color: #d2afbf; }
.upload-quality small { color: #b98fa4; font-size: 9px; }
.upload-quality.is-error { border-color: rgba(237, 123, 123, .42); background: rgba(168, 61, 77, .12); }
.upload-quality.is-error strong { color: #ffc2c8; }
.upload-quality-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upload-quality-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-quality-level {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #ffabc4;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .04em;
}
.upload-quality-level.is-usable { color: #e7c48f; }
.upload-quality-level.is-improve { color: #ffb0bd; }

.reference-photos {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #513046;
}
.reference-photos.hidden { display: none; }
.reference-photos-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.reference-photos-head > div { display: grid; gap: 3px; }
.reference-photos-head span {
  color: #c7a8b7;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
}
.reference-photos-head strong { color: #fff7fb; font-size: 11px; font-weight: 850; }
.reference-photos-head small { flex: 0 0 auto; color: #ffabc4; font-size: 8px; font-weight: 750; }
.reference-photo-grid { display: grid; gap: 8px; }
.reference-photo-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(255, 211, 226, .15);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
}
.reference-photo-card.is-primary { border-color: rgba(255, 171, 196, .56); background: rgba(233, 120, 157, .09); }
.reference-photo-card img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; background: #45213f; }
.reference-photo-copy { display: grid; min-width: 0; align-content: center; gap: 3px; }
.reference-photo-copy strong {
  overflow: hidden;
  color: #fff7fb;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-photo-copy small { color: #c7a8b7; font-size: 8px; font-weight: 650; line-height: 1.45; }
.reference-photo-label { color: #ffabc4; font-size: 8px; font-weight: 850; letter-spacing: .04em; }
.reference-photo-label.is-secondary { color: #c7a8b7; }
.reference-photo-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
}
.reference-photo-actions button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #68405b;
  border-radius: 6px;
  color: #ffdce8;
  background: rgba(255, 255, 255, .035);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.reference-photo-actions button:hover,
.reference-photo-actions button:focus-visible { border-color: #ffabc4; background: rgba(233, 120, 157, .16); }
.reference-photo-actions button:disabled { cursor: default; opacity: .48; }
.reference-photo-actions .reference-photo-remove { color: #e9b7c8; }

.scene-panel { padding: 36px; background: #fff; }
.scene-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.scene-stage { display: grid; grid-template-columns: 92px minmax(155px, 1fr); min-width: 292px; overflow: hidden; border: 1px solid #e5e4eb; border-radius: 12px; background: #fff; box-shadow: 0 12px 25px rgba(43, 42, 62, .08); }
.scene-stage-media { position: relative; min-height: 76px; overflow: hidden; background: #211122; }
.scene-stage img { width: 100%; height: 100%; object-fit: cover; }
.scene-stage-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, rgba(31, 14, 31, .06), rgba(31, 14, 31, .38)); }
.scene-stage-media span { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 28px; padding: 4px 5px; border: 1px solid rgba(255,255,255,.36); border-radius: 5px; color: #fff7fb; background: rgba(31, 17, 34, .42); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-align: center; backdrop-filter: blur(6px); }
.scene-stage-copy { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 14px; }
.scene-stage-copy > span { overflow: hidden; color: #8b8899; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.scene-stage-copy strong { overflow: hidden; font-family: var(--serif); font-size: 18px; letter-spacing: -.06em; text-overflow: ellipsis; white-space: nowrap; }
.scene-stage-copy small { overflow: hidden; color: #8b8899; font-size: 10px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.scene-discovery { position: relative; padding: 18px 0 19px; margin-bottom: 18px; border-top: 1px solid #5a3b51; border-bottom: 1px solid #5a3b51; }
.scene-discovery-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.scene-discovery-head > div { display: grid; gap: 4px; }
.scene-discovery-head > div > span { color: #e8c8d5; font-size: 12px; font-weight: 850; }
.scene-discovery-head p { margin: 0; color: #c7a8b7; font-size: 12px; font-weight: 650; line-height: 1.5; }
.scene-discovery-head small { max-width: 230px; color: #a9899b; font-size: 10px; font-weight: 650; line-height: 1.5; text-align: right; }
.scene-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scene-filter {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #5a3b51;
  border-radius: 999px;
  color: #d7bbc9;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 800;
  touch-action: manipulation;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.scene-filter b { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #c7a8b7; background: rgba(255,255,255,.08); font-size: 9px; font-weight: 850; }
.scene-filter:hover, .scene-filter:focus-visible { border-color: #d9789a; color: #fff7fb; }
.scene-filter.is-selected { border-color: var(--coral); color: #fff7fb; background: rgba(233,120,157,.18); box-shadow: inset 0 0 0 1px rgba(255,171,196,.12); }
.scene-filter.is-selected b { color: #29152b; background: #ffabc4; }
.scene-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.scene-category-card { position: relative; display: grid; min-height: 108px; align-content: end; justify-items: start; gap: 4px; padding: 16px; border-color: rgba(255, 171, 196, .24); border-radius: 12px; color: #fff7fb; background: linear-gradient(145deg, rgba(94, 46, 72, .88), rgba(42, 25, 48, .96)); text-align: left; box-shadow: 0 10px 22px rgba(10, 3, 12, .14); }
.scene-category-card span { font-family: var(--serif); font-size: 20px; font-weight: 800; letter-spacing: -.05em; }
.scene-category-card small { color: #d7bbc9; font-size: 10px; font-weight: 750; }
.scene-category-card b { position: absolute; top: 13px; right: 13px; display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff7fb; background: rgba(255,255,255,.08); font-size: 12px; }
.scene-category-card:hover, .scene-category-card:focus-visible { border-color: #ffabc4; background: linear-gradient(145deg, rgba(143, 69, 108, .94), rgba(61, 34, 67, .98)); transform: translateY(-2px); }
.scene-more-coming { display: grid; min-height: 108px; align-content: center; justify-items: center; gap: 5px; padding: 16px; border: 1px dashed rgba(255, 171, 196, .44); border-radius: 12px; color: #d7bbc9; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(104, 79, 159, .09)); text-align: center; }
.scene-more-coming span { color: #ffabc4; font-size: 17px; line-height: 1; }
.scene-more-coming strong { color: #f5dce6; font-size: 13px; font-weight: 850; }
.scene-more-coming small { color: #bda3b3; font-size: 9px; font-weight: 700; }
.scene-category-back { min-height: 36px; padding: 0 11px; border: 1px solid #765a6b; border-radius: 999px; color: #f2dce5; background: transparent; font: inherit; font-size: 11px; font-weight: 800; touch-action: manipulation; }
.scene-category-back:hover, .scene-category-back:focus-visible { border-color: #ffabc4; color: #fff7fb; background: rgba(233,120,157,.14); }
.scene-category-active { display: grid; gap: 1px; min-width: 0; margin-left: 4px; }
.scene-category-active span { color: #c7a8b7; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.scene-category-active strong { color: #fff7fb; font-family: var(--serif); font-size: 19px; letter-spacing: -.05em; }
.scene-category-active small { color: #d7bbc9; font-size: 10px; font-weight: 700; }
.scene-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.scene-custom-cta { display: grid; grid-column: 1 / -1; gap: 5px; padding: 22px; border: 1px dashed rgba(255, 171, 196, .58); border-radius: 13px; background: linear-gradient(120deg, rgba(233, 120, 157, .13), rgba(104, 79, 159, .14)); text-align: center; }
.scene-custom-cta span { color: #d7bbc9; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.scene-custom-cta strong { color: #fff7fb; font-family: var(--serif); font-size: 21px; letter-spacing: -.04em; }
.scene-custom-cta button { justify-self: center; margin-top: 5px; padding: 8px 13px; border: 1px solid rgba(255, 171, 196, .66); border-radius: 999px; color: #fff7fb; background: rgba(255, 255, 255, .06); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.scene-custom-cta button:hover, .scene-custom-cta button:focus-visible { color: #32182f; background: #ffabc4; outline: none; }
.scene { position: relative; min-height: 0; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 1px solid rgba(255, 171, 196, .28); border-radius: 13px; color: #fff; background: linear-gradient(135deg, #211122 0%, #4b2942 50%, #211122 100%); background-size: 220% 220%; cursor: pointer; isolation: isolate; text-align: left; touch-action: manipulation; box-shadow: 0 12px 24px rgba(37,37,53,.08); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; animation: scene-image-placeholder 1.4s ease-in-out infinite; }
.scene:hover, .scene:focus-visible { border-color: #d9789a; box-shadow: 0 18px 32px rgba(12, 4, 13, .24); outline: none; transform: translateY(-3px); }
.scene.active { border-color: #ffabc4; box-shadow: inset 0 0 0 2px #fff7fb, 0 0 0 2px var(--coral), 0 15px 30px rgba(233, 120, 157, .22); transform: translateY(-2px); }
.scene > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; max-width: none; object-fit: cover; object-position: center center; opacity: 0; transform: scale(1.055); transition: opacity .25s ease, transform .7s cubic-bezier(.2,.65,.25,1); }
.scene.is-image-ready { animation: none; background: #211122; }
.scene.is-image-ready > img { opacity: 1; }
.scene.is-image-error { animation: none; background: linear-gradient(145deg, #4a263f, #211122); }
@keyframes scene-image-placeholder { 50% { background-position: 100% 100%; } }
.scene:hover > img, .scene:focus-visible > img { transform: scale(1.115); }
.scene-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(17, 8, 18, .08) 0%, rgba(17, 8, 18, .08) 38%, rgba(17, 8, 18, .62) 100%); pointer-events: none; }
.scene-index { position: absolute; top: 12px; left: 12px; z-index: 1; color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.scene-category { position: absolute; top: 9px; right: 9px; z-index: 1; max-width: calc(100% - 62px); overflow: hidden; padding: 5px 7px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff7fb; background: rgba(27, 12, 27, .28); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(7px); }
.scene-copy { position: absolute; right: 13px; bottom: 13px; left: 13px; z-index: 1; display: grid; gap: 3px; }
.scene-copy small { overflow: hidden; color: rgba(255,229,240,.82); font-size: 9px; font-weight: 750; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.scene-copy strong { overflow: hidden; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.07em; text-overflow: ellipsis; white-space: nowrap; }
.scene-copy em { display: flex; align-items: center; gap: 5px; overflow: hidden; color: rgba(255, 234, 242, .86); font-size: 10px; font-style: normal; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.scene-copy em i { display: inline-block; width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: #ffabc4; }
.scene b { position: absolute; top: 39px; right: 12px; z-index: 2; display: none; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: var(--dark); background: #fff7fb; font-size: 11px; box-shadow: 0 4px 10px rgba(0,0,0,.24); }
.scene.active b { display: grid; }
.scene-creator { padding-top: 36px; padding-bottom: 42px; }
.scene-creator-head { display: grid; gap: 11px; margin-bottom: 18px; }
.scene-creator-head > div { display: grid; gap: 5px; }
.scene-creator-head h2 { margin: 0; color: #fff7fb; font-family: var(--sans); font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -.07em; }
.scene-creator-head p { max-width: 430px; margin: 0; color: #c7a8b7; font-size: 14px; font-weight: 650; line-height: 1.65; }
.scene-creator-back { justify-self: start; min-height: 34px; padding: 0 11px; border: 1px solid #68405b; border-radius: 999px; color: #f2dce5; background: rgba(255,255,255,.035); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.scene-creator-back:hover, .scene-creator-back:focus-visible { border-color: #ffabc4; color: #fff7fb; background: rgba(233,120,157,.14); outline: none; }
.flow-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.flow-navigation .scene-creator-back,
.flow-navigation .scene-preview-back { margin: 0; }
.flow-home-link { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid rgba(255, 171, 196, .34); border-radius: 999px; color: #d7bbc9; background: rgba(255,255,255,.025); font-size: 11px; font-weight: 800; text-decoration: none; }
.flow-home-link:hover, .flow-home-link:focus-visible { border-color: #ffabc4; color: #fff7fb; background: rgba(233,120,157,.14); outline: none; }
.scene-creator-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); overflow: hidden; border: 1px solid #68405b; border-radius: 18px; background: #29152b; box-shadow: 0 18px 42px rgba(0,0,0,.24); }
.scene-creator-media { position: relative; min-height: 0; aspect-ratio: 9 / 16; overflow: hidden; background: #211122; }
.scene-creator-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(26, 11, 26, .02), rgba(26, 11, 26, .48)); pointer-events: none; }
.scene-creator-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
.scene-creator-media span { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 8px; border: 1px solid rgba(255,255,255,.32); border-radius: 7px; color: #fff7fb; background: rgba(33,17,34,.48); font-size: 10px; font-weight: 900; letter-spacing: .12em; backdrop-filter: blur(8px); }
.scene-creator-copy { display: grid; align-content: center; gap: 9px; padding: 30px; }
.scene-creator-copy > span { color: #e7a4bc; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.scene-creator-copy strong { color: #fff7fb; font-family: var(--sans); font-size: 34px; font-weight: 900; letter-spacing: -.07em; line-height: 1.05; }
.scene-creator-copy p { margin: 0; color: #f2dce5; font-size: 16px; font-weight: 700; line-height: 1.55; }
.scene-creator-copy small { color: #c7a8b7; font-size: 12px; font-weight: 650; line-height: 1.6; }
.scene-creator-controls-slot .generation-controls { margin-top: 24px; padding-top: 24px; }
.scene-creator-generate-slot { margin-top: 22px; }
.scene-creator-generate-slot .generate-bar { border-radius: 18px; }
.generation-controls { padding: 24px 0 0; margin-top: 26px; border-top: 1px solid #5a3b51; }
.generation-controls-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.generation-controls-head .step { margin: 0 0 7px; color: #ffabc4; }
.generation-controls h4 { margin: 0; color: #fff7fb; font-family: var(--serif); font-size: 24px; font-weight: 900; letter-spacing: -.06em; }
.generation-controls-head > p { max-width: 350px; margin: 0; color: #c7a8b7; font-size: 14px; font-weight: 650; line-height: 1.65; }
.generation-control-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.generation-control-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.generation-control-group legend { padding: 0; color: #e8c8d5; font-size: 12px; font-weight: 850; }
.generation-control-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.generation-control-option { min-height: 42px; padding: 0 13px; border: 1px solid #5a3b51; border-radius: 999px; color: #d7bbc9; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 800; touch-action: manipulation; white-space: nowrap; }
.generation-control-option:hover:not(:disabled) { border-color: #d9789a; color: #fff7fb; }
.generation-control-option.is-selected { border-color: var(--coral); color: #fff7fb; background: rgba(233, 120, 157, .18); box-shadow: inset 0 0 0 1px rgba(255, 171, 196, .15); }
.generation-control-option:disabled { cursor: wait; opacity: .58; }
.generation-control-summary { margin: 14px 0 0; color: #c7a8b7; font-size: 14px; font-weight: 650; line-height: 1.6; }
.generate-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 31px; color: #fff; border-radius: 0 0 18px 18px; background: linear-gradient(105deg, #18304c, #2c567b); box-shadow: 0 22px 52px rgba(29, 53, 79, .20); scroll-margin-top: 18px; }
.generate-bar .step { margin-bottom: 5px; color: #d9c394; }
.generate-bar strong { display: block; font-family: var(--serif); font-size: 24px; letter-spacing: -.06em; }
.generate-bar small { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 600; line-height: 1.6; }
.generate-bar small.is-error { color: #f1b8ad; font-weight: 700; }
.generation-progress { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 650; line-height: 1.5; }
.generation-progress i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #a9899b; }
.generation-progress[data-state="running"] i { background: #f2c876; box-shadow: 0 0 0 4px rgba(242, 200, 118, .14); animation: generation-pulse 1.3s ease-in-out infinite; }
.generation-progress[data-state="success"] i { background: #75c78e; box-shadow: 0 0 0 4px rgba(117, 199, 142, .13); }
.generation-progress[data-state="error"] { color: #ffc2c8; }
.generation-progress[data-state="error"] i { background: #ef8b97; box-shadow: 0 0 0 4px rgba(239, 139, 151, .13); }
.generation-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0; margin: 12px 0 0; list-style: none; }
.generation-timeline li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 28px; color: rgba(255,255,255,.54); font-size: 9px; font-weight: 780; line-height: 1.15; }
.generation-timeline b { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.56); font-size: 8px; }
.generation-timeline li.is-complete { color: rgba(255,255,255,.80); }
.generation-timeline li.is-complete b { border-color: rgba(117,199,142,.66); color: #e6fff0; background: rgba(117,199,142,.22); }
.generation-timeline li.is-current { color: #fff8ea; }
.generation-timeline li.is-current b { border-color: #f2c876; color: #fff8ea; background: rgba(242,200,118,.21); box-shadow: 0 0 0 3px rgba(242,200,118,.10); }
.generation-timeline[data-state="error"] li.is-current { color: #ffd2d8; }
.generation-timeline[data-state="error"] li.is-current b { border-color: #ef8b97; color: #ffe5e9; background: rgba(239,139,151,.22); box-shadow: 0 0 0 3px rgba(239,139,151,.10); }
.generation-timeline-hint { display: block; margin-top: 7px; color: rgba(255,255,255,.60); font-size: 9px; font-weight: 650; line-height: 1.55; }
.generation-credit-note { display: block; margin-top: 7px; color: rgba(255,255,255,.6); font-size: 9px; font-weight: 650; line-height: 1.55; }
.generation-credit-note.is-error { color: #ffc2c8; }
.generate-actions { display: grid; flex: 0 0 auto; gap: 8px; justify-items: stretch; }
.generate-actions > .button { width: 100%; min-height: 48px; touch-action: manipulation; }
.retry-generate { min-height: 32px; padding: 0 10px; border: 1px solid rgba(255, 225, 235, .55); border-radius: 6px; color: #fff2f6; background: rgba(33, 17, 34, .18); font-size: 10px; font-weight: 850; transition: border-color .2s ease, background .2s ease, opacity .2s ease; }
.retry-generate:hover { border-color: #fff2f6; background: rgba(33, 17, 34, .34); }
.retry-generate:disabled { cursor: wait; opacity: .7; }
.retry-generate:focus-visible { outline: 2px solid #ffabc4; outline-offset: 3px; }
@keyframes generation-pulse { 50% { transform: scale(1.18); opacity: .68; } }

.archive { padding: 124px 0; margin-top: 24px; color: #fff; background: radial-gradient(circle at 82% 6%, #46698e 0%, #213953 40%, #15263a 100%); }
.hidden { display: none; }
.archive-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 42px;
  border: 1px solid rgba(255, 171, 196, .22);
  border-radius: 18px;
  background: rgba(33, 17, 34, .58);
}
.archive-empty-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: #29152b;
  background: linear-gradient(135deg, #ffabc4, #e9789d);
  font-size: 21px;
}
.archive-empty h3 { margin: 0; color: #fff7fb; font-size: 25px; font-weight: 900; }
.archive-empty p { max-width: 430px; margin: 0; color: #d7bbc9; font-size: 14px; line-height: 1.7; }
.archive-empty .button { margin-top: 8px; }
.archive-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.archive-head .section-number { color: #bcb1c1; }
.archive-head h2 { margin: 0; font-size: clamp(45px, 4.4vw, 64px); line-height: 1.08; }
.archive-status { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 7px; color: #d7d6e2; font-size: 12px; font-weight: 700; }
.archive-status i { width: 7px; height: 7px; border-radius: 50%; background: #d8897e; }
.result-card { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr); align-items: start; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #f9f8f7; color: var(--ink); box-shadow: 0 32px 88px rgba(9, 9, 19, .28); }
.result-card.hidden { display: none; }
.result-photo { position: relative; width: 100%; aspect-ratio: 9 / 16; min-height: 0; isolation: isolate; background: #171720; }
.result-photo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.result-photo video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; background: #17151b; }
.result-photo video.hidden { display: none; }
.result-photo-chrome { position: absolute; top: 16px; right: 16px; left: 16px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; pointer-events: none; }
.result-photo-chrome span, .result-photo-chrome small { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.84); background: rgba(33,17,34,.38); backdrop-filter: blur(10px); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.result-photo-chrome small { color: rgba(255,255,255,.68); font-weight: 700; letter-spacing: .05em; }
.result-count { position: absolute; right: 0; bottom: 0; padding: 13px 17px; color: #fff; background: rgba(35,33,42,.8); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.result-mode {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: #fff;
  background: rgba(33, 17, 34, .72);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 850;
}
.result-mode.is-generated { border-color: rgba(255, 171, 196, .72); color: #fff0f5; background: rgba(142, 47, 91, .78); }
.result-content { display: flex; flex-direction: column; justify-content: center; padding: 50px 42px 42px; }
.result-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.result-scene { margin: 0; color: #a46461; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.result-intro-mark { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255,171,196,.3); border-radius: 50%; color: #ffabc4; font-size: 12px; }
.result-content h3 { margin-bottom: 15px; font-family: var(--serif); font-size: clamp(31px, 3vw, 43px); line-height: 1.12; letter-spacing: -.075em; }
.result-content > p { color: #62606c; font-size: 14px; font-weight: 520; line-height: 1.82; }
.archive-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.archive-meta span { padding: 7px 9px; color: #716d78; border: 1px solid #ddd9d7; border-radius: 4px; font-size: 10px; font-weight: 700; }
.result-trust { display: grid; gap: 8px; padding: 12px; margin-top: 14px; border: 1px solid #e8e1e4; border-radius: 10px; background: #fcfafb; }
.result-trust > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.result-trust span { color: #8b7e88; font-size: 9px; font-weight: 800; }
.result-trust strong { color: #4d3847; font-size: 10px; font-weight: 850; text-align: right; }
.result-details { display: grid; gap: 10px; padding: 14px; margin-top: 12px; border: 1px solid #e8e1e4; border-radius: 10px; background: #fcfafb; }
.result-details-head { display: grid; gap: 3px; }
.result-details-head span { color: #8b7e88; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.result-details-head strong { color: #4d3847; font-size: 14px; font-weight: 900; }
.result-details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.result-details-list > div { min-width: 0; padding: 9px; border-radius: 7px; background: rgba(255, 255, 255, .68); }
.result-details-list dt { color: #8b7e88; font-size: 9px; font-weight: 800; }
.result-details-list dd { margin: 4px 0 0; color: #4d3847; font-size: 11px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.result-details-actions { display: flex; justify-content: flex-end; }
.result-details-actions button { min-height: 32px; padding: 0 10px; color: #7b3e5a; border: 1px solid #d6b8c5; border-radius: 7px; background: transparent; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.result-details-actions button:hover:not(:disabled), .result-details-actions button:focus-visible:not(:disabled) { color: #fff; border-color: #b64f77; background: #b64f77; }
.result-details-actions button:disabled { opacity: .5; cursor: not-allowed; }
.result-actions { display: grid; gap: 10px; margin-top: 24px; }
.result-primary-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.result-primary-actions .button { width: 100%; }
.result-primary-actions .video-entry-button { border-color: rgba(255, 171, 196, .64); color: #fff7fb; background: linear-gradient(135deg, #6f315d, #3d2046); }
.result-primary-actions .video-entry-button:disabled { cursor: not-allowed; opacity: .55; }
.result-secondary-action { justify-self: start; min-height: 30px; padding: 0 2px; border: 0; color: #b47b9a; background: transparent; font-size: 10px; font-weight: 850; }
.result-secondary-action:hover, .result-secondary-action:focus-visible { color: #ffabc4; text-decoration: underline; }
.result-review { padding-top: 17px; margin-top: 18px; border-top: 1px solid #e3dfe1; }
.result-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.result-review-head strong { color: #3f3743; font-size: 12px; font-weight: 850; }
.result-review-head small { color: #8a7f88; font-size: 9px; line-height: 1.5; text-align: right; }
.result-review-actions { display: flex; gap: 8px; margin-top: 10px; }
.result-review-actions button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #d9cfd5;
  border-radius: 999px;
  color: #665864;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}
.result-review-actions button:hover, .result-review-actions button.is-selected { border-color: var(--coral); color: #8c3157; background: #fff0f5; }
.comparison-toggle {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 12px;
  margin-top: 11px;
  border: 0;
  color: #9d486d;
  background: transparent;
  font-size: 10px;
  font-weight: 850;
}
.comparison-toggle:hover { color: #6e294b; text-decoration: underline; }
.comparison-toggle.is-disabled { color: #aaa0a8; cursor: not-allowed; text-decoration: none; }
.comparison-panel { display: grid; gap: 10px; padding: 12px; margin-top: 10px; border: 1px solid #e3dfe1; border-radius: 10px; background: #faf7f9; }
.comparison-panel.hidden { display: none; }
.comparison-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.comparison-panel-head > div { display: grid; gap: 3px; }
.comparison-panel-head span { color: #837682; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.comparison-panel-head strong { color: #4d3847; font-size: 12px; font-weight: 900; }
.comparison-panel-head small { color: #9d486d; font-size: 10px; font-weight: 850; }
.comparison-stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 7px; background: #eee6eb; --comparison-split: 50%; }
.comparison-stage > img, .comparison-result-layer, .comparison-result-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparison-result-layer { right: auto; width: var(--comparison-split); overflow: hidden; border-right: 1px solid rgba(255,255,255,.78); }
.comparison-label { position: absolute; top: 8px; z-index: 2; padding: 5px 7px; border-radius: 999px; color: #fff; background: rgba(33,17,34,.7); font-size: 9px; font-weight: 850; pointer-events: none; }
.comparison-label-original { left: 8px; }
.comparison-label-result { right: 8px; }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--comparison-split); z-index: 3; width: 1px; background: rgba(255,255,255,.84); transform: translateX(-50%); pointer-events: none; }
.comparison-divider::after { position: absolute; top: 50%; left: 50%; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; color: #4d3847; background: #fff; content: "↔"; font-size: 12px; font-weight: 900; transform: translate(-50%, -50%); }
.comparison-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparison-help { margin: 0; color: #837682; font-size: 9px; line-height: 1.55; }
.result-content > small { margin-top: 16px; color: #7b7781; font-size: 10px; font-weight: 550; line-height: 1.65; }
.video-studio { margin-top: 29px; padding: 20px 18px 16px; border: 1px solid #e0dce1; border-radius: 11px; background: linear-gradient(135deg, #f5f1f4, #f6f5fa); }
.video-studio-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.video-studio-head > div { display: grid; gap: 5px; }
.video-studio-head span { color: #7d7a8a; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.video-studio-head strong { font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -.06em; }
.video-studio-head b { color: #9a6660; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.video-studio.is-running .video-studio-head b { color: #aa7c39; }
.video-studio.is-ready .video-studio-head b { color: #557c61; }
.video-studio.is-error .video-studio-head b { color: #a24d4d; }
.video-studio p { margin: 12px 0 0; color: #625f6c; font-size: 12px; font-weight: 520; line-height: 1.7; }
.video-credit-note { display: block; margin-top: 8px; color: #bd9eaf; font-size: 9px; font-weight: 700; line-height: 1.55; }
.video-credit-note.is-error { color: #ffb9c8; }
.video-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.video-retry { min-height: 42px; padding: 0 14px; border: 1px solid #b66c8e; border-radius: 6px; color: #f5d6e1; background: rgba(255,255,255,.04); font-size: 11px; font-weight: 800; }
.video-retry:hover { border-color: #ffabc4; color: #fff7fb; background: rgba(233,120,157,.12); }
.video-retry:disabled { cursor: wait; opacity: .65; }
.video-retry:focus-visible { outline: 2px solid #ffabc4; outline-offset: 3px; }
.video-studio > small { display: block; margin-top: 11px; color: #807d89; font-size: 9px; font-weight: 650; letter-spacing: .05em; }

/* 第二批：作品库、拍摄建议与账户以真实状态和可执行信息为主。 */
main[data-app-page="collection"] .collection-heading { display: grid; gap: 8px; margin-bottom: 26px; }
main[data-app-page="collection"] .collection-heading p { max-width: 360px; margin: 0; color: #d7bbc9; font-size: 13px; line-height: 1.65; }
main[data-app-page="collection"] .archive-library-empty { display: grid; justify-items: start; gap: 9px; padding: 26px; text-align: left; }
main[data-app-page="collection"] .archive-library-empty strong { color: #fff7fb; font-size: 18px; letter-spacing: -.04em; }
main[data-app-page="collection"] .archive-library-empty span { color: #c7a8b7; font-size: 12px; line-height: 1.6; }
main[data-app-page="collection"] .archive-library-empty .button { margin-top: 4px; }

main[data-app-page="tips"] .tips { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 54px; padding: 64px 58px; }
main[data-app-page="tips"] .tips-lead { max-width: 340px; margin: 16px 0 0; color: #d7bbc9; font-size: 13px; line-height: 1.75; }
main[data-app-page="tips"] .photo-tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: start; }
main[data-app-page="tips"] .photo-tips-grid article { min-height: 148px; padding: 18px 16px; border: 1px solid rgba(255, 211, 226, .18); border-radius: 13px; background: rgba(255, 255, 255, .035); }
main[data-app-page="tips"] .photo-tips-grid strong { display: block; color: #fff7fb; font-size: 16px; font-weight: 900; letter-spacing: -.04em; }
main[data-app-page="tips"] .photo-tips-grid p { margin: 10px 0 0; color: #d7bbc9; font-size: 11px; line-height: 1.7; }

.account-panel-actions { flex-wrap: wrap; }
.account-settings-title { width: 100%; color: #fff7fb; font-size: 13px; font-weight: 900; letter-spacing: -.03em; }

@media (max-width: 720px) {
  main[data-app-page="collection"] .collection-heading p { font-size: 12px; }
  main[data-app-page="tips"] .tips { grid-template-columns: 1fr; gap: 24px; padding: 42px 22px; }
  main[data-app-page="tips"] .photo-tips-grid { grid-template-columns: 1fr; }
  main[data-app-page="tips"] .photo-tips-grid article { min-height: 0; }
}

.worlds { padding: 118px 42px; margin-top: 24px; border-radius: 22px; color: #f4f6fa; background: linear-gradient(135deg, #1e334d 0%, #294766 58%, #1b2e45 100%); }
.worlds h2 { color: #f5f6f8; }
.worlds .section-number { color: #b5c6d8; }
.worlds-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 41px; }
.worlds h2 { max-width: 680px; margin: 0; font-size: clamp(42px, 4vw, 59px); line-height: 1.1; }
.worlds-grid { display: grid; grid-template-columns: 1.08fr .92fr .92fr; grid-template-rows: 225px 225px; gap: 12px; }
.world-card { position: relative; overflow: hidden; border-radius: 13px; background: var(--dark); box-shadow: 0 18px 38px rgba(45, 43, 62, .14); }
.world-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.world-card:hover img { transform: scale(1.04); }
.world-card::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(transparent, rgba(22,20,27,.72)); }
.world-card > div { position: absolute; right: 17px; bottom: 15px; left: 17px; z-index: 1; display: grid; gap: 4px; color: #fff; }
.world-card span { color: rgba(255,255,255,.82); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.world-card strong { font-family: var(--serif); font-size: 23px; letter-spacing: -.06em; }
.world-card-large { grid-row: span 2; }
.world-card-large strong { font-size: 31px; }
.world-card-wide { grid-column: span 2; }

.tips { display: grid; grid-template-columns: .88fr 1.12fr; gap: 96px; padding: 80px 70px; margin-top: 24px; border-radius: 22px; color: #f4f6fa; background: linear-gradient(135deg, #17283e, #263e5b); box-shadow: 0 22px 45px rgba(24,42,63,.17); }
.tips h2, .tips strong { color: #f5f6f8; }
.tips .section-number { color: #b5c6d8; }
.tips p { color: #c5d1dd; }
.tips li { border-color: rgba(210,224,237,.22); }
.tips h2 { margin: 0; font-size: clamp(42px, 4vw, 58px); line-height: 1.1; }
.tips ol { padding: 0; margin: 0; list-style: none; }
.tips li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); }
.tips li:last-child { border-bottom: 1px solid var(--line); }
.tips li > span { color: var(--coral); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.tips strong { font-family: var(--serif); font-size: 21px; letter-spacing: -.05em; }
.tips p { margin: 7px 0 0; color: #62606e; font-size: 13px; font-weight: 520; line-height: 1.75; }

.closing { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 76px 74px; margin-top: 38px; margin-bottom: 54px; overflow: hidden; border-radius: 18px; color: #fff; background: radial-gradient(circle at 84% 12%, #4d7297 0%, #24415f 40%, #182b42 100%); box-shadow: 0 26px 62px rgba(24, 42, 63, .24); }
.closing > p { grid-column: 1 / -1; margin: 0; color: #c8c3d6; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.closing h2 { margin: 0; font-size: clamp(42px, 4vw, 57px); line-height: 1.07; }
.closing h2 em { color: #e3998f; }
.closing .button { align-self: end; }
.site-footer { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 28px; padding-top: 22px; padding-bottom: 42px; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; color: #74727e; font-size: 11px; font-weight: 550; }
.site-footer a { color: inherit; }
.footer-business { display: grid; gap: 5px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 16px; }
.footer-links a { color: #585661; font-size: 11px; font-weight: 760; text-decoration: none; }
.footer-links a:hover { color: #8c4763; }
.mobile-bottom-nav { display: none; }

/* 页面架构：每次只呈现一个主功能页，避免把不同任务堆在同一长页面。 */
main[data-app-page] > section,
main[data-app-page] > .closing { display: none !important; }
main[data-app-page="home"] > #top { display: grid !important; animation: mobile-page-enter .2s ease-out both; }
main[data-app-page="create"] > #studio,
main[data-app-page="scene"] > #scene-creator,
main[data-app-page="generate"] > #scene-generate,
main[data-app-page="preview"] > #scene-preview,
main[data-app-page="result-preview"] > #result-preview,
main[data-app-page="video"] > #video-scene,
main[data-app-page="result"] > #archive,
main[data-app-page="collection"] > #collection,
main[data-app-page="me"] > #profile,
main[data-app-page="custom"] > #custom,
main[data-app-page="billing"] > #billing,
main[data-app-page="tips"] > #tips,
main[data-app-page="operator"] > #operator,
main[data-app-page="terms"] > #terms,
main[data-app-page="privacy"] > #privacy,
main[data-app-page="billing-rules"] > #billing-rules { display: block !important; animation: mobile-page-enter .2s ease-out both; }
main[data-app-page] > .worlds,
main[data-app-page] > .closing { display: none !important; }
main[data-app-page="home"] > .home-proof { display: block !important; animation: mobile-page-enter .2s ease-out both; }

.home-entry { align-items: stretch; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr); min-height: min(640px, calc(100vh - 146px)); padding-top: 82px; padding-bottom: 92px; }
.home-entry .hero-copy { align-self: center; max-width: 670px; }
.home-entry h1 { max-width: 760px; }
.home-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 31px; }
.home-entry-secondary { color: #ffb9ce; font-size: 13px; font-weight: 850; text-decoration: none; }
.home-entry-secondary:hover { color: #ffd7e5; }
.home-entry-guide { display: grid; align-content: center; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(221, 130, 162, .45); border-radius: 24px; color: #fff7fa; background: radial-gradient(circle at 90% 0%, rgba(247, 136, 172, .48), transparent 43%), linear-gradient(145deg, #47213d, #241425 70%); box-shadow: 0 28px 65px rgba(68, 24, 54, .2); }
.home-entry-guide > p { margin: 0 0 12px; color: #ffb9ce; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.home-entry-guide h2 { margin: 0; color: #fff8fa; font-family: var(--serif); font-size: clamp(30px, 3vw, 43px); line-height: 1.08; letter-spacing: -.06em; }
.home-entry-guide ol { display: grid; gap: 18px; padding: 0; margin: 32px 0 0; list-style: none; }
.home-entry-guide li { display: grid; grid-template-columns: 31px 1fr; gap: 12px; align-items: start; }
.home-entry-guide li > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255, 184, 208, .55); border-radius: 50%; color: #ffb9ce; font-size: 9px; font-weight: 900; }
.home-entry-guide strong, .home-entry-guide small { display: block; }
.home-entry-guide strong { color: #fff; font-size: 15px; }
.home-entry-guide small { margin-top: 4px; color: #e8c7d3; font-size: 12px; line-height: 1.65; }
.site-nav a.is-active { padding: 6px 9px; margin: -6px -9px; border-radius: 999px; color: #fff; background: #3e2036; box-shadow: inset 0 -2px 0 rgba(255,255,255,.36); }

/* 页面职责分离：场景库只负责浏览，偏好与生成分别在下一页完成。 */
main[data-app-page="create"] #studio { position: relative; overflow: hidden; padding-top: 68px; }
main[data-app-page="create"] #studio::before,
main[data-app-page="create"] #studio::after {
  position: absolute; z-index: 0; width: 210px; height: 210px; border: 1px solid rgba(255, 171, 196, .16); border-radius: 50%; content: ""; pointer-events: none;
}
main[data-app-page="create"] #studio::before { top: 18px; right: -88px; box-shadow: 0 0 0 24px rgba(233, 120, 157, .025), 0 0 0 52px rgba(233, 120, 157, .018); }
main[data-app-page="create"] #studio::after { bottom: 42px; left: -120px; width: 260px; height: 260px; border-style: dashed; }
main[data-app-page="create"] #studio > * { position: relative; z-index: 1; }
main[data-app-page="create"] #studio .section-heading { margin-bottom: 27px; }
main[data-app-page="create"] #studio .section-heading h2 { max-width: 550px; font-size: clamp(34px, 3.6vw, 51px); line-height: 1.12; }
main[data-app-page="create"] #studio .pet-panel,
main[data-app-page="create"] #studio .scene-panel-head,
main[data-app-page="create"] #studio .generation-controls,
main[data-app-page="create"] #studio > .generate-bar { display: none !important; }
main[data-app-page="create"] #studio .studio-layout { display: block; overflow: visible; border: 0; border-radius: 18px; background: transparent; box-shadow: none; }
main[data-app-page="create"] #studio .scene-panel { padding: 26px; border: 1px solid rgba(255, 171, 196, .22); border-radius: 18px; background: rgba(33, 17, 34, .72); box-shadow: 0 20px 46px rgba(0, 0, 0, .16); }
main[data-app-page="create"] #studio .scene-discovery { margin-bottom: 17px; }

.home-entry-guide { position: relative; overflow: hidden; }
.home-entry-guide::before,
.home-entry-guide::after { position: absolute; content: ""; pointer-events: none; }
.home-entry-guide::before { top: 18px; right: 20px; width: 84px; height: 84px; border: 1px solid rgba(255, 188, 211, .35); border-radius: 47% 53% 62% 38%; transform: rotate(26deg); box-shadow: -22px 24px 0 -21px rgba(255, 188, 211, .62), -44px 47px 0 -43px rgba(255, 188, 211, .36); }
.home-entry-guide::after { right: -38px; bottom: -52px; width: 180px; height: 180px; border: 1px dashed rgba(255, 188, 211, .24); border-radius: 50%; }
.home-entry-guide > * { position: relative; z-index: 1; }
.home-entry-guide h2 { max-width: 360px; }

/* P34：把内部保存机制收回程序，页面只保留温暖、清晰的创作感受。 */
.profile-care-note {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 171, 196, .25);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(233, 120, 157, .12), rgba(116, 75, 155, .12));
}
.profile-care-note::before,
.profile-care-note::after {
  position: absolute;
  border: 1px solid rgba(255, 188, 211, .22);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.profile-care-note::before { top: -40px; right: -25px; width: 118px; height: 118px; }
.profile-care-note::after { right: 24px; bottom: -36px; width: 62px; height: 62px; border-style: dashed; }
.profile-care-note > * { position: relative; z-index: 1; }
.profile-care-note-head,
.profile-care-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.profile-care-note-head > div { display: grid; gap: 4px; min-width: 0; }
.profile-care-note .step { margin: 0; color: #ffabc4; }
.profile-care-note h4 { margin: 0; color: #fff7fb; font-size: 16px; font-weight: 900; }
.profile-care-note > p { max-width: 52ch; margin: 0; color: #e2c5d2; font-size: 12px; line-height: 1.75; }
.profile-care-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(255, 171, 196, .48); border-radius: 999px; color: #ffd5e2; background: rgba(255, 255, 255, .05); font-size: 9px; font-weight: 850; }
.profile-care-actions small { max-width: 46ch; min-width: 0; color: #c7a8b7; font-size: 10px; line-height: 1.6; }
.profile-care-actions .local-data-clear { flex: 0 0 auto; }

.account-keepsake-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 171, 196, .27);
  border-radius: 13px;
  background: linear-gradient(115deg, rgba(233, 120, 157, .13), rgba(105, 62, 126, .16));
}
.account-keepsake-card::after { position: absolute; right: -18px; bottom: -24px; width: 92px; height: 92px; border: 1px dashed rgba(255, 188, 211, .26); border-radius: 50%; content: ""; pointer-events: none; }
.account-keepsake-card > * { position: relative; z-index: 1; }
.account-keepsake-card > div:first-child { display: grid; gap: 4px; }
.account-keepsake-card span { color: #ffb1c8; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.account-keepsake-card strong { color: #fff7fb; font-size: 14px; font-weight: 900; }
.account-keepsake-card small { color: #d7bbc9; font-size: 10px; line-height: 1.55; }
.account-keepsake-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.account-keepsake-actions .button { min-height: 34px; padding: 0 10px; font-size: 10px; }

main[data-app-page="me"] > #profile,
main[data-app-page="collection"] > #collection,
main[data-app-page="result"] > #archive,
main[data-app-page="custom"] > #custom,
main[data-app-page="tips"] > #tips,
main[data-app-page="scene"] > #scene-creator,
main[data-app-page="generate"] > #scene-generate {
  position: relative;
  isolation: isolate;
}
main[data-app-page="me"] > #profile::before,
main[data-app-page="collection"] > #collection::before,
main[data-app-page="result"] > #archive::before,
main[data-app-page="custom"] > #custom::before,
main[data-app-page="tips"] > #tips::before,
main[data-app-page="scene"] > #scene-creator::before,
main[data-app-page="generate"] > #scene-generate::before {
  position: absolute;
  top: 58px;
  right: -92px;
  z-index: -1;
  width: 218px;
  height: 218px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(233, 120, 157, .025), 0 0 0 49px rgba(255, 171, 196, .012);
  content: "";
  pointer-events: none;
}
main[data-app-page="me"] > #profile::after,
main[data-app-page="collection"] > #collection::after,
main[data-app-page="result"] > #archive::after,
main[data-app-page="custom"] > #custom::after,
main[data-app-page="tips"] > #tips::after,
main[data-app-page="scene"] > #scene-creator::after,
main[data-app-page="generate"] > #scene-generate::after {
  position: absolute;
  bottom: 56px;
  left: -62px;
  z-index: -1;
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(255, 171, 196, .16);
  border-radius: 49% 51% 45% 55%;
  content: "";
  transform: rotate(21deg);
  pointer-events: none;
}

@media (max-width: 720px) {
  .profile-care-note { padding: 16px; }
  .profile-care-note-head,
  .profile-care-actions,
  .account-keepsake-card { align-items: flex-start; flex-direction: column; }
  .profile-care-badge { align-self: flex-start; }
  .profile-care-actions .local-data-clear,
  .account-keepsake-actions { width: 100%; }
  .account-keepsake-actions .button { flex: 1 1 0; }
  main[data-app-page="me"] > #profile::before,
  main[data-app-page="collection"] > #collection::before,
  main[data-app-page="result"] > #archive::before,
  main[data-app-page="custom"] > #custom::before,
  main[data-app-page="tips"] > #tips::before,
  main[data-app-page="scene"] > #scene-creator::before,
  main[data-app-page="generate"] > #scene-generate::before { top: 25px; right: -126px; width: 188px; height: 188px; }
}

.scene-next-button { width: 100%; min-height: 56px; margin-top: 21px; border-radius: 14px; }
.scene-generate-slot { margin-top: 24px; }
.scene-generate-slot .generate-bar { border-radius: 18px; }
.generation-aspect-choice { display: grid; gap: 9px; margin: 20px 0 0; padding: 17px; border: 1px solid rgba(255, 171, 196, .28); border-radius: 16px; background: rgba(255,255,255,.035); }
.generation-aspect-choice legend { padding: 0 6px; color: #ffb1c8; font-size: 12px; font-weight: 850; }
.generation-aspect-choice p { margin: 0; color: #c7a8b7; font-size: 12px; font-weight: 650; line-height: 1.55; }
.generation-aspect-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.generation-aspect-option { display: grid; gap: 3px; min-height: 66px; padding: 11px; border: 1px solid #68405b; border-radius: 12px; color: #f2dce5; background: rgba(16, 6, 17, .24); font: inherit; text-align: left; cursor: pointer; }
.generation-aspect-option strong { color: #fff7fb; font-size: 14px; }
.generation-aspect-option span { color: #bd9eaf; font-size: 11px; font-weight: 650; line-height: 1.35; }
.generation-aspect-option.is-selected { border-color: #ffabc4; background: linear-gradient(135deg, rgba(233,120,157,.3), rgba(117,48,90,.3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.scene-generate.is-landscape .scene-creator-media { aspect-ratio: 16 / 9; }
.scene-generate.is-landscape .scene-creator-card { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); }
.result-photo.is-landscape { aspect-ratio: 16 / 9; }
.scene-generate-card { position: relative; }
.scene-generate-card::after { position: absolute; right: 20px; bottom: 18px; width: 38px; height: 38px; border: 1px solid rgba(255, 171, 196, .38); border-radius: 50%; content: "✦"; color: #ffb1c8; font-size: 18px; line-height: 36px; text-align: center; pointer-events: none; }
.scene-creator { position: relative; }
.scene-creator::before { position: absolute; top: 74px; right: -80px; width: 170px; height: 170px; border: 1px dashed rgba(255, 171, 196, .16); border-radius: 50%; content: ""; pointer-events: none; }
.scene-creator > * { position: relative; z-index: 1; }
html { scroll-padding-top: 108px; }

@keyframes mobile-page-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes button-spin { to { transform: rotate(360deg); } }
.generate-bar .button.is-loading::before { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; content: ""; animation: button-spin .8s linear infinite; }

@media (max-width: 920px) {
  .hero { gap: 38px; }
  .site-nav { margin-left: 0; }
  .studio-layout { grid-template-columns: 270px 1fr; }
  .scene-panel { padding: 24px; }
  .tips { gap: 55px; }
}

@media (max-width: 720px) {
  main[data-app-page] > .site-header {
    position: sticky;
    top: 10px;
    z-index: 20;
    margin-bottom: 12px;
  }
  .shell { width: min(100% - 34px, 600px); }
   .site-header { min-height: 76px; padding: 0; }
  .site-nav { display: none; }
  .header-cta { min-height: 39px; padding: 0 12px; font-size: 11px; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding: 31px 0 68px; }
  .home-entry { min-height: auto; padding-top: 28px; }
  .home-entry-guide { padding: 27px 22px; border-radius: 19px; }
  .home-entry-guide h2 { font-size: 32px; }
  .home-entry-guide ol { gap: 15px; margin-top: 25px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(47px, 13vw, 67px); }
  .hero-media { aspect-ratio: 16 / 11; }
  .section-heading, .worlds-head, .archive-head { align-items: flex-start; flex-direction: column; }
  .studio, .worlds, .tips { padding: 76px 0; }
  .section-heading { gap: 15px; }
  .section-heading > p { max-width: 550px; margin: 0; }
  .studio-layout { grid-template-columns: 1fr; }
  .pet-panel, .scene-panel { padding: 24px; }
  .scene-panel-head { flex-direction: column; }
  .scene-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .scene-category-card { min-height: 94px; padding: 13px; }
  .scene-category-card span { font-size: 18px; }
  .scene-more-coming { min-height: 94px; padding: 13px; }
  .scene-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scene-custom-cta { padding: 17px 13px; }
  .scene-custom-cta strong { font-size: 18px; }
  .scene { min-height: 0; }
  .scene > img { min-height: 0; }
  .scene-discovery-head { align-items: start; flex-direction: column; gap: 5px; }
  .scene-discovery-head small { max-width: none; text-align: left; }
  .scene-creator { padding-top: 8px; padding-bottom: 28px; }
  .scene-creator-head h2 { font-size: clamp(31px, 9vw, 40px); }
  .scene-creator-card { grid-template-columns: 1fr; }
  .scene-creator-media { min-height: 0; aspect-ratio: 9 / 16; }
  .scene-creator-copy { gap: 7px; padding: 21px 19px; }
  .scene-creator-copy strong { font-size: 30px; }
  .scene-creator-copy p { font-size: 15px; }
  .scene-creator-generate-slot { margin-top: 16px; }
  .scene-creator-generate-slot .generate-bar { padding: 22px 19px; }
  .generation-controls-head { align-items: start; flex-direction: column; gap: 10px; }
  .generation-controls-head > p { max-width: none; }
  .generation-control-list { grid-template-columns: 1fr; gap: 16px; }
  .generate-bar { align-items: stretch; flex-direction: column; }
  .generate-bar .button { width: 100%; }
  .generation-timeline { gap: 7px; }
  .generation-timeline li { grid-template-columns: 15px minmax(0, 1fr); font-size: 8px; }
  .archive-empty { padding: 28px 22px; }
  .archive-empty .button { width: 100%; }
  .archive { padding: 112px 0 96px; margin-top: 0; }
  .result-card { grid-template-columns: 1fr; }
  .result-post { grid-template-columns: 1fr; }
  .result-post .result-actions,
  .result-post .result-details,
  .result-post .version-manager,
  .result-post .result-review,
  .result-post .comparison-panel,
  .result-post .comparison-toggle,
  .result-post .video-studio,
  .result-post > #share-note { grid-column: 1; grid-row: auto; }
  .result-post .result-actions { grid-template-columns: 1fr; align-items: stretch; }
  .result-post .result-primary-actions { width: 100%; }
  .result-post .result-secondary-action { margin: 2px 0 0; }
  .result-photo, .result-photo img, .result-photo video { min-height: 0; }
  .result-content { padding: 34px 25px; }
  .result-photo-chrome { top: 12px; right: 12px; left: 12px; }
  .result-photo-chrome span, .result-photo-chrome small { padding: 6px 8px; font-size: 8px; }
  .result-review-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .result-review-head small { text-align: left; }
  .comparison-panel { padding: 10px; }
  .video-studio-head strong { font-size: 25px; }
  .worlds-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 225px 180px 180px; }
  .world-card-large { grid-column: 1 / -1; grid-row: auto; }
  .world-card-wide { grid-column: 1 / -1; }
  .tips { grid-template-columns: 1fr; gap: 40px; }
  .closing { grid-template-columns: 1fr; padding: 43px 29px; }
  .closing .button { justify-self: start; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  body { padding-bottom: 94px; }
  .mobile-bottom-nav {
    position: fixed;
    right: 14px;
    left: 14px;
    bottom: 14px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 62px;
    align-items: center;
    border: 1px solid rgba(255, 171, 196, .22);
    border-radius: 18px;
    background: rgba(33, 17, 34, .94);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 35px rgba(38, 10, 28, .42), inset 0 0 0 1px rgba(255, 255, 255, .025);
    overflow: hidden;
  }
  .mobile-bottom-nav a {
    display: grid;
    min-height: 62px;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: #c7a8b7;
    text-decoration: none;
  }
  .mobile-bottom-nav a.is-primary {
    color: #29152b;
    background: linear-gradient(135deg, #ffabc4, #e9789d);
    box-shadow: inset 0 -3px 0 rgba(104, 37, 72, .46);
  }
  .mobile-bottom-nav strong { font-size: 13px; font-weight: 900; }
  .mobile-bottom-nav small { font-size: 9px; font-weight: 700; opacity: .82; }
  .mobile-bottom-nav a:not(.is-primary):active,
  .mobile-bottom-nav a:not(.is-primary):focus-visible {
    color: #ffabc4;
  }
}

@media (max-width: 410px) {
  .shell { width: min(100% - 26px, 600px); }
  .hero h1 { font-size: 47px; }
  .scene-category-card { min-height: 88px; padding: 12px; }
  .scene-category-card span { font-size: 16px; }
  .scene { min-height: 150px; }
  .scene > img { min-height: 0; }
  .scene-copy { right: 10px; bottom: 10px; left: 10px; }
  .scene-copy strong { font-size: 18px; }
  .scene-copy em { white-space: normal; }
  .scene-stage { width: 100%; grid-template-columns: 105px minmax(0, 1fr); }
  .result-primary-actions { grid-template-columns: 1fr; }
  .result-primary-actions .button, .result-secondary-action { width: 100%; }
  .result-secondary-action { min-height: 40px; border: 1px solid #68405b; border-radius: 8px; }
  .result-trust > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .result-trust strong { text-align: left; }
  .result-details-list { grid-template-columns: 1fr; }
  .result-details-actions { justify-content: stretch; }
  .result-details-actions button { width: 100%; }
  .video-actions { align-items: stretch; flex-direction: column; }
  .video-actions .button, .video-actions .video-retry { width: 100%; }
  .worlds-grid { grid-template-columns: 1fr; grid-template-rows: 250px 180px 180px 180px; }
  .world-card-large, .world-card-wide { grid-column: auto; }
}

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

/* P1：各页面使用不同的低干扰视觉纹理，避免长页重复说明与留白。 */
main[data-app-page="me"] > #profile,
main[data-app-page="result"] > #archive,
main[data-app-page="custom"] > #custom,
main[data-app-page="tips"] > #tips,
main[data-app-page="scene"] > #scene-creator,
main[data-app-page="generate"] > #scene-generate {
  border-radius: 26px;
  background:
    radial-gradient(circle at 94% 6%, rgba(236, 132, 168, .10), transparent 20%),
    radial-gradient(circle at 4% 88%, rgba(159, 89, 137, .09), transparent 23%);
}
main[data-app-page="scene"] > #scene-creator {
  background-image:
    radial-gradient(circle at 90% 11%, rgba(236, 132, 168, .12), transparent 18%),
    linear-gradient(120deg, transparent 0 48%, rgba(255, 184, 211, .045) 48.2% 48.45%, transparent 48.65% 100%);
}
main[data-app-page="generate"] > #scene-generate {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(236, 132, 168, .12), transparent 18%),
    radial-gradient(circle at 88% 93%, rgba(116, 75, 155, .14), transparent 23%);
}

@media (max-width: 720px) {
  main[data-app-page="create"] #studio { padding: 38px 0 70px; }
  main[data-app-page="create"] #studio .section-heading { gap: 10px; margin-bottom: 21px; }
  main[data-app-page="create"] #studio .section-heading h2 { max-width: 15ch; font-size: clamp(31px, 8.4vw, 39px); line-height: 1.14; letter-spacing: -.065em; }
  main[data-app-page="create"] #studio .section-heading > p { max-width: 34ch; font-size: 13px; line-height: 1.72; }
  main[data-app-page="create"] #studio .scene-panel { padding: 15px; border-radius: 16px; }
  main[data-app-page="scene"] > #scene-creator,
  main[data-app-page="generate"] > #scene-generate { padding: 28px 17px 38px; }
  .scene-generate-slot { margin-top: 16px; }
  .scene-generate-slot .generate-bar { padding: 22px 18px; }
  .generation-aspect-options { grid-template-columns: 1fr; }
  .scene-generate.is-landscape .scene-creator-card { grid-template-columns: 1fr; }
}

/* Sweet Berry Noir / A · Modern Sans theme */
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(154, 61, 108, .22), transparent 24%),
    radial-gradient(circle at 95% 80%, rgba(116, 53, 84, .22), transparent 28%),
    var(--canvas);
}

.site-header {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.brand strong,
.hero h1, .section-heading h2, .archive-head h2, .worlds h2, .tips h2, .closing h2,
  .pet-panel h3, .scene-panel h3, .scene-stage strong, .scene-copy strong,
.generate-bar strong, .result-content h3, .video-studio-head strong, .world-card strong,
.tips strong {
  font-family: var(--sans);
}
.brand small { color: #d7a8bc; }
.brand-mark {
  color: #29152b;
  background: linear-gradient(135deg, #ffabc4, #e9789d);
}
.site-nav a { color: #d9bdca; }
.site-nav a:hover { color: #ffabc4; }
.header-cta {
  border-color: rgba(233, 120, 157, .55);
  color: #ffd9e5;
  background: rgba(233, 120, 157, .10);
}
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid rgba(255, 171, 196, .26);
  border-radius: 999px;
  color: #f5dbe6;
  background: rgba(255, 255, 255, .04);
  font-size: 11px;
  font-weight: 800;
}
.account-trigger:hover { border-color: var(--coral); background: rgba(233, 120, 157, .12); }
.account-trigger-dot { width: 7px; height: 7px; border-radius: 50%; background: #a9899b; }
.account-trigger.is-active .account-trigger-dot { background: #73c48d; box-shadow: 0 0 0 3px rgba(115, 196, 141, .13); }

.hero {
  background:
    radial-gradient(circle at 82% 8%, rgba(154, 61, 108, .52), rgba(27, 12, 28, 0) 36%),
    linear-gradient(115deg, #211122 0%, #3a1935 100%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .30);
}
.hero::before { background: radial-gradient(circle, rgba(233, 120, 157, .22) 0%, rgba(233, 120, 157, 0) 70%); }
.hero-copy { border-left-color: var(--coral); }
.hero-index, .section-number, .step { color: #e7a4bc; }
.hero h1 { color: #fff7fb; font-weight: 900; }
h1 em, h2 em { color: var(--coral); }
.hero-copy > p:not(.hero-index) { color: #e2cbd5; }
.button-dark {
  color: #29152b;
  background: linear-gradient(135deg, #ffabc4, #e9789d);
  box-shadow: 0 10px 22px rgba(120, 34, 75, .30);
}
.button-coral {
  color: #fff;
  background: linear-gradient(135deg, #d8668e, #a9416c);
  box-shadow: 0 10px 20px rgba(120, 34, 75, .28);
}
.button-soft {
  border-color: #68405b;
  color: #ffe8f0;
  background: #32152f;
}
.button-light { color: #29152b; background: #fff7fb; }
.hero-media { border-color: rgba(255, 236, 244, .72); background: var(--sand); }
.hero-media figcaption { background: rgba(33, 17, 34, .86); }
.hero-media figcaption span { color: #ffabc4; }

.studio {
  background: linear-gradient(145deg, #32182f 0%, #29152b 58%, #211122 100%);
}
.section-heading h2 { color: #fff7fb; font-weight: 900; }
.section-heading > p { color: #d0b4c1; }
.studio-layout {
  border-color: #513046;
  background: #513046;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .24);
}
.pet-panel, .scene-panel { background: #29152b; }
.pet-panel { background: linear-gradient(180deg, #32182f, #281329); }
.pet-panel h3, .scene-panel h3 { color: #fff7fb; font-weight: 900; }
.pet-panel > p:not(.upload-message) { color: #d0b4c1; }
.selected-pet {
  border-color: #5a3b51;
  color: #fff7fb;
  background: rgba(255, 255, 255, .06);
}
.selected-pet.is-selected {
  border-color: var(--coral);
  background: rgba(233, 120, 157, .12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.selected-pet small { color: #c7a8b7; }
.selected-pet b { color: #29152b; background: var(--coral); }
.upload-zone { border-color: #513046; }
.upload-icon { color: #ffabc4; background: #49203d; }
.upload-zone small, .upload-message { color: #c7a8b7; }
.scene-stage {
  border-color: #5a3b51;
  background: #32182f;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .14);
}
.scene-stage-copy > span { color: #e7a4bc; }
.scene-stage-copy strong { color: #fff7fb; }
.scene-stage-copy small { color: #c7a8b7; }
.scene {
  border-color: #5a3b51;
  background: #211122;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.scene:hover { border-color: var(--coral); }
.scene.active {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--coral), 0 9px 20px rgba(233, 120, 157, .24);
}
.scene b { color: #29152b; background: #fff7fb; }
.generate-bar {
  background: linear-gradient(105deg, #211122, #743554);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .28);
}
.generate-bar .step { color: #ffabc4; }

.archive {
  background:
    radial-gradient(circle at 82% 6%, #743554 0%, #35172f 40%, #160b18 100%);
}
.archive-head h2 { color: #fff7fb; font-weight: 900; }
.archive-head .section-number { color: #e7a4bc; }
.archive-status { color: #e8c8d5; }
.archive-status i { background: var(--coral); }
.task-center {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 16px;
  background: rgba(33, 17, 34, .58);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}
.task-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.task-center-head > div:first-child {
  display: grid;
  gap: 4px;
}
.task-center-head span {
  color: #d4adbd;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}
.task-center-head strong {
  color: #fff7fb;
  font-size: 16px;
  font-weight: 900;
}
.task-center-head p {
  margin: 1px 0 0;
  color: #bd9eaf;
  font-size: 11px;
  line-height: 1.55;
}
.task-center-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex: 0 0 auto;
  color: #bd9eaf;
  font-size: 10px;
  text-align: right;
}
.task-center-summary b {
  color: #ffabc4;
  font-size: 24px;
  line-height: 1;
}
.task-center-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 12px;
}
.task-center-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.task-center-filter,
.task-center-refresh {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(255, 211, 226, .17);
  border-radius: 999px;
  color: #caa9b9;
  background: rgba(255, 255, 255, .035);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.task-center-filter b {
  margin-left: 4px;
  color: #8e6e80;
  font-size: 9px;
}
.task-center-filter:hover,
.task-center-filter:focus-visible,
.task-center-refresh:hover,
.task-center-refresh:focus-visible {
  border-color: rgba(255, 171, 196, .56);
  color: #fff7fb;
  background: rgba(233, 120, 157, .12);
}
.task-center-filter.is-selected {
  border-color: #ffabc4;
  color: #29152b;
  background: #ffabc4;
}
.task-center-filter.is-selected b { color: #6e3451; }
.task-center-refresh {
  flex: 0 0 auto;
  border-radius: 8px;
  color: #ffabc4;
}
.task-center-filter:focus-visible,
.task-center-refresh:focus-visible {
  outline: 2px solid #ffabc4;
  outline-offset: 2px;
}
.task-center-list {
  display: grid;
  gap: 8px;
}
.task-center-empty {
  padding: 18px 12px 12px;
  border-top: 1px solid rgba(255, 211, 226, .12);
  color: #bd9eaf;
  font-size: 11px;
  line-height: 1.65;
}
.task-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 211, 226, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}
.task-item.is-running {
  border-color: rgba(228, 183, 95, .36);
  background: rgba(228, 183, 95, .06);
}
.task-item.is-failed {
  border-color: rgba(239, 130, 147, .34);
  background: rgba(239, 130, 147, .055);
}
.task-item-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #29152b;
  background: #ffabc4;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
}
.task-item.is-video .task-item-mark { background: #d8b1ff; }
.task-item-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.task-item-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.task-item-type {
  overflow: hidden;
  color: #ffabc4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-item time {
  flex: 0 0 auto;
  color: #9e7f90;
  font-size: 9px;
  font-weight: 700;
}
.task-item-title {
  overflow: hidden;
  color: #fff7fb;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-item-detail {
  overflow: hidden;
  color: #bd9eaf;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-item-progress {
  position: relative;
  overflow: hidden;
  width: min(240px, 100%);
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
}
.task-item-progress::after {
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 35%;
  border-radius: inherit;
  background: #e4b75f;
  content: "";
  animation: task-progress-sweep 1.3s ease-in-out infinite;
}
.task-item-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: #bd9eaf;
  font-size: 9px;
  font-weight: 800;
}
.task-item-status::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #856879;
  content: "";
}
.task-item.is-running .task-item-status { color: #f4d18b; }
.task-item.is-running .task-item-status::before { background: #e4b75f; }
.task-item.is-succeeded .task-item-status { color: #ffd0df; }
.task-item.is-succeeded .task-item-status::before { background: #ff8db3; }
.task-item.is-failed .task-item-status { color: #ffb4c0; }
.task-item.is-failed .task-item-status::before { background: #ef8293; }
.task-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.task-item-actions button {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(255, 171, 196, .36);
  border-radius: 7px;
  color: #fff7fb;
  background: rgba(255, 255, 255, .07);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.task-item-actions button:hover,
.task-item-actions button:focus-visible {
  border-color: #ffabc4;
  background: rgba(233, 120, 157, .19);
}
.task-item-actions .task-item-retry {
  color: #29152b;
  border-color: #ffabc4;
  background: #ffabc4;
}
.task-item-actions button:focus-visible {
  outline: 2px solid #ffabc4;
  outline-offset: 2px;
}
@keyframes task-progress-sweep {
  from { transform: translateX(0); }
  to { transform: translateX(385%); }
}
.archive-library {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 16px;
  background: rgba(33, 17, 34, .58);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}
.archive-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.archive-library-head > div { display: grid; gap: 3px; }
.archive-library-head span {
  color: #d4adbd;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}
.archive-library-head strong {
  color: #fff7fb;
  font-size: 16px;
  font-weight: 900;
}
.archive-library-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.archive-library-head small { color: #bd9eaf; font-size: 10px; white-space: nowrap; }
.archive-library-filters { display: flex; gap: 5px; }
.archive-library-filters button { min-height: 27px; border: 1px solid rgba(255, 211, 226, .16); border-radius: 7px; padding: 0 8px; color: #bd9eaf; background: rgba(255, 255, 255, .035); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.archive-library-filters button.is-active { border-color: rgba(255, 171, 196, .62); color: #fff7fb; background: rgba(233, 120, 157, .20); }
.archive-library-filters button:focus-visible { outline: 2px solid #ffabc4; outline-offset: 2px; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.archive-work {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: 320px 430px;
  padding: 8px;
  border: 1px solid rgba(255, 211, 226, .13);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.archive-work:hover { border-color: rgba(255, 171, 196, .48); transform: translateY(-1px); }
.archive-work-media {
  position: relative;
  width: 88px;
  height: 100%;
  min-height: 118px;
  overflow: hidden;
  border-radius: 7px;
  background: #160b18;
}
.archive-work-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive-work-media.is-loading::before {
  content: "正在加载作品预览…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #bd9eaf;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(145deg, rgba(118, 48, 82, .22), rgba(24, 11, 27, .78));
  z-index: 1;
}
.archive-work-media.is-loading > img { position: relative; z-index: 2; }
.archive-work-media > img[hidden] { display: none; }
.archive-work-media-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  background: linear-gradient(145deg, rgba(118, 48, 82, .40), rgba(24, 11, 27, .92));
}
.archive-work-media-fallback::before {
  content: "✦";
  color: #ffabc4;
  font-size: 20px;
}
.archive-work-media-fallback span { color: #fff7fb; font-size: 11px; font-weight: 850; }
.archive-work-media-fallback small { color: #bd9eaf; font-size: 9px; }
.archive-work-media.is-broken .archive-work-media-fallback { display: grid; }
.archive-work.is-landscape { grid-template-columns: minmax(0, 1fr); }
.archive-work.is-landscape > .archive-work-media {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.archive-work-content { display: grid; min-width: 0; align-content: start; gap: 7px; }
.archive-work-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #ffabc4;
  font-size: 10px;
  font-weight: 850;
}
.archive-work-topline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-work-topline small { flex: 0 0 auto; color: #bfa1b1; font-size: 9px; font-weight: 700; }
.archive-work strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff7fb;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.archive-work-status { display: grid; gap: 4px; }
.archive-work-status em {
  color: #bfa1b1;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}
.archive-work-status em::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: #856879;
  content: "";
}
.archive-work-status .is-generated, .archive-work-status .is-video-ready { color: #ffd0df; }
.archive-work-status .is-generated::before, .archive-work-status .is-video-ready::before { background: #ff8db3; }
.archive-work-status .is-image-running { color: #f4d18b; }
.archive-work-status .is-image-running::before { background: #e4b75f; }
.archive-work-status .is-image-failed { color: #ffb4c0; }
.archive-work-status .is-image-failed::before { background: #ef8293; }
.archive-work-status .is-video-running { color: #f4d18b; }
.archive-work-status .is-video-running::before { background: #e4b75f; }
.archive-work-status .is-video-failed { color: #ffb4c0; }
.archive-work-status .is-video-failed::before { background: #ef8293; }
.archive-work-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 1px; }
.archive-work-actions button {
  min-height: 27px;
  border-radius: 7px;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.archive-work-open {
  flex: 1;
  border: 1px solid rgba(255, 171, 196, .38);
  color: #fff7fb;
  background: rgba(255, 255, 255, .07);
}
.archive-work-open:hover, .archive-work-open:focus-visible { border-color: #ffabc4; background: rgba(233, 120, 157, .19); }
.archive-work-download { border: 1px solid rgba(255, 211, 226, .20); padding: 0 8px; color: #e9cbd8; background: rgba(255, 255, 255, .035); }
.archive-work-download:hover, .archive-work-download:focus-visible { border-color: rgba(255, 171, 196, .56); color: #fff7fb; }
.archive-work-delete {
  min-width: 86px;
  border: 1px solid rgba(255, 171, 196, .52);
  color: #fff0f5;
  background: rgba(233, 120, 157, .12);
}
.archive-work-delete:hover, .archive-work-delete:focus-visible { border-color: #ffabc4; background: rgba(233, 120, 157, .24); }
.archive-work-actions button:focus-visible { outline: 2px solid #ffabc4; outline-offset: 2px; }
.archive-library-empty { grid-column: 1 / -1; padding: 26px; border: 1px dashed rgba(255, 171, 196, .30); border-radius: 10px; color: #bd9eaf; font-size: 11px; line-height: 1.7; text-align: center; }
.collection { overflow-x: clip; padding-top: 68px; padding-bottom: 56px; }
.collection-heading { max-width: 620px; margin-bottom: 26px; }
.collection-heading .section-number { margin-bottom: 10px; }
.collection-heading h2 { margin: 0; color: #fff7fb; font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); line-height: 1.08; }
.collection-heading > p:last-child { max-width: 460px; margin: 13px 0 0; color: #cbaab9; font-size: 14px; line-height: 1.7; }
.collection-heading > .section-number,
.collection-heading > p:last-child { display: none; }
.result-card {
  gap: 28px 20px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #fff7fb;
  box-shadow: none;
}
.result-photo {
  overflow: hidden;
  border: 1px solid rgba(255, 171, 196, .20);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26);
}
.result-photo { background: #160b18; }
.result-photo-chrome span, .result-photo-chrome small { border-color: rgba(255, 171, 196, .18); color: #f7dbe5; background: rgba(33, 17, 34, .56); }
.result-photo-chrome small { color: #d4adbd; }
.result-count { background: rgba(33, 17, 34, .82); }
.result-content {
  min-width: 0;
  border: 1px solid rgba(255, 171, 196, .20);
  border-radius: 18px;
  background: linear-gradient(145deg, #32182f, #211122);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26);
}
.result-post {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 16px 20px;
}
.result-post .result-actions {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px 16px;
  margin: 0;
  border: 1px solid rgba(255, 171, 196, .20);
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(79, 35, 65, .88), rgba(47, 22, 45, .88));
}
.result-post .result-primary-actions { width: min(100%, 520px); }
.result-post .result-secondary-action { margin-left: 18px; }
.result-post .result-details { grid-column: 1; grid-row: 2; margin: 0; }
.result-post .version-manager { grid-column: 2; grid-row: 2; margin: 0; }
.result-post .result-review {
  grid-column: 1;
  grid-row: 3;
  padding: 16px;
  margin: 0;
  border: 1px solid #68405b;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.result-post .result-review-head strong { color: #fff0f5; }
.result-post .result-review-head small { color: #bd9eaf; }
.result-post .result-review-actions button { border-color: #80526a; color: #f7dbe5; background: rgba(255, 255, 255, .05); }
.result-post .result-review-actions button:hover, .result-post .result-review-actions button.is-selected { border-color: #ffabc4; color: #fff7fb; background: rgba(233, 120, 157, .18); }
.result-post .comparison-panel { grid-column: 1; grid-row: 4; margin: 0; }
.result-post .comparison-toggle { grid-column: 1; grid-row: 5; margin: 0; }
.result-post .video-studio { grid-column: 1 / -1; grid-row: 6; margin: 0; }
.result-post > #share-note { grid-column: 1 / -1; grid-row: 7; margin: 0; color: #bd9eaf; font-size: 10px; font-weight: 550; line-height: 1.65; }
.result-scene { color: #ffabc4; }
.result-intro-mark { border-color: rgba(255, 171, 196, .3); color: #ffabc4; background: rgba(255, 255, 255, .04); }
.result-content h3 { color: #fff7fb; font-weight: 900; }
.result-content > p { color: #d7bbc9; }
.archive-meta span {
  color: #e2c2d0;
  border-color: #674158;
  background: rgba(255, 255, 255, .04);
}
.result-trust {
  border-color: #674158;
  background: rgba(255, 255, 255, .04);
}
.result-trust span { color: #bd9eaf; }
.result-trust strong { color: #fff0f5; }
.result-details { border-color: #674158; background: rgba(255, 255, 255, .04); }
.result-details-head span, .result-details-list dt { color: #bd9eaf; }
.result-details-head strong, .result-details-list dd { color: #fff0f5; }
.result-details-list > div { background: rgba(33, 17, 34, .32); }
.result-details-actions button { color: #ffabc4; border-color: #80526a; }
.result-details-actions button:hover:not(:disabled), .result-details-actions button:focus-visible:not(:disabled) { color: #29152b; border-color: #ffabc4; background: #ffabc4; }
.result-content > small { color: #bd9eaf; }
.result-secondary-action { color: #d4adbd; }
.result-secondary-action:hover, .result-secondary-action:focus-visible { color: #ffabc4; }
.comparison-panel { border-color: #68405b; background: rgba(255, 255, 255, .045); }
.comparison-panel-head span { color: #d4adbd; }
.comparison-panel-head strong { color: #fff7fb; }
.comparison-panel-head small { color: #ffabc4; }
.comparison-stage { background: #160b18; }
.comparison-label { color: #fff7fb; background: rgba(33, 17, 34, .76); }
.comparison-divider::after { color: #4d3847; }
.comparison-help { color: #bd9eaf; }
.video-studio {
  border-color: #68405b;
  background: linear-gradient(135deg, #3a1b36, #29152b);
}
.video-studio-head span { color: #d4adbd; }
.video-studio-head strong { color: #fff7fb; font-weight: 850; }
.video-studio-head b { color: #ffabc4; }
.video-studio p { color: #d7bbc9; }
.video-studio > small { color: #bd9eaf; }
.video-preview {
  overflow: hidden;
  margin-top: 15px;
  border: 1px solid rgba(255, 171, 196, .26);
  border-radius: 10px;
  background: #160b18;
}
.video-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255, 171, 196, .16);
}
.video-preview-head span { color: #ffabc4; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.video-preview-head small { color: #bd9eaf; font-size: 9px; font-weight: 750; }
.video-preview video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #080609; object-fit: contain; }
.version-manager {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-top: 18px;
  border: 1px solid #68405b;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.version-manager-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.version-manager-head > div {
  display: grid;
  gap: 3px;
}
.version-manager-head span,
.version-comparison-head span {
  color: #d4adbd;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}
.version-manager-head strong,
.version-comparison-head strong {
  color: #fff7fb;
  font-size: 13px;
  font-weight: 900;
}
.version-manager-head small {
  color: #bd9eaf;
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}
.version-manager-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.version-manager-toolbar button,
.version-rename-form button,
.version-comparison-head button {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 7px;
  color: #f7dbe5;
  background: rgba(255, 255, 255, .06);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.version-manager-toolbar button:hover,
.version-manager-toolbar button:focus-visible,
.version-rename-form button:hover,
.version-rename-form button:focus-visible,
.version-comparison-head button:hover,
.version-comparison-head button:focus-visible {
  border-color: #ffabc4;
  color: #fff7fb;
  background: rgba(233, 120, 157, .18);
}
.version-manager-toolbar button.is-favorite {
  border-color: #ffabc4;
  color: #29152b;
  background: #ffabc4;
}
.version-manager-toolbar button:focus-visible,
.version-rename-form button:focus-visible,
.version-comparison-head button:focus-visible {
  outline: 2px solid #ffabc4;
  outline-offset: 2px;
}
.version-rename-form {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 9px;
  background: rgba(33, 17, 34, .5);
}
.version-manager.hidden,
.version-rename-form.hidden,
.version-comparison.hidden {
  display: none;
}
.version-rename-form label {
  color: #d4adbd;
  font-size: 9px;
  font-weight: 850;
}
.version-rename-form > div {
  display: flex;
  gap: 6px;
}
.version-rename-form input {
  min-width: 0;
  flex: 1;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid #68405b;
  border-radius: 7px;
  color: #fff7fb;
  background: #211122;
  font: inherit;
  font-size: 10px;
}
.version-rename-form input:focus {
  border-color: #ffabc4;
  outline: 2px solid rgba(255, 171, 196, .22);
  outline-offset: 1px;
}
.version-list {
  display: grid;
  gap: 6px;
}
.version-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 211, 226, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
}
.version-item.is-active {
  border-color: #ffabc4;
  background: rgba(233, 120, 157, .12);
}
.version-item-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.version-item-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.version-item-topline strong {
  color: #fff7fb;
  font-size: 10px;
  font-weight: 900;
}
.version-item-topline span {
  color: #ffabc4;
  font-size: 9px;
  font-weight: 850;
}
.version-item-name {
  overflow: hidden;
  color: #f7dbe5;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-item-meta {
  overflow: hidden;
  color: #bd9eaf;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.version-item-actions button {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(255, 171, 196, .28);
  border-radius: 6px;
  color: #d7bbc9;
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.version-item-actions button:hover,
.version-item-actions button:focus-visible {
  border-color: #ffabc4;
  color: #fff7fb;
  background: rgba(233, 120, 157, .15);
}
.version-item-actions button:focus-visible {
  outline: 2px solid #ffabc4;
  outline-offset: 2px;
}
.version-comparison {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 211, 226, .12);
}
.version-comparison-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.version-comparison-head > div {
  display: grid;
  gap: 3px;
}
.version-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.version-comparison-grid figure {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.version-comparison-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 7px;
  background: #160b18;
}
.version-comparison-grid figcaption {
  overflow: hidden;
  color: #d4adbd;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.version-comparison p {
  margin: 0;
  color: #bd9eaf;
  font-size: 9px;
  line-height: 1.5;
}

.worlds {
  background: linear-gradient(135deg, #32152f 0%, #5b284b 58%, #29152b 100%);
}
.worlds h2 { color: #fff7fb; font-weight: 900; }
.worlds .section-number { color: #ffabc4; }
.tips {
  color: #fff7fb;
  background: linear-gradient(135deg, #211122, #3a1935);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .28);
}
.tips h2, .tips strong { color: #fff7fb; }
.tips .section-number { color: #ffabc4; }
.tips p { color: #d7bbc9; }
.tips li { border-color: rgba(255, 211, 226, .20); }
.tips li > span { color: var(--coral); }
.closing {
  background:
    radial-gradient(circle at 84% 12%, #743554 0%, #3a1935 40%, #211122 100%);
  box-shadow: 0 26px 62px rgba(0, 0, 0, .32);
}
.closing > p { color: #d7bbc9; }
.closing h2 { color: #fff7fb; font-weight: 900; }
.closing h2 em { color: var(--coral); }
.site-footer p { color: #b28fa1; }

/* Life profile */
.profile {
  padding: 96px 42px 42px;
  margin-top: 24px;
  border-radius: 22px;
  color: #fff7fb;
  background:
    radial-gradient(circle at 10% 8%, rgba(233, 120, 157, .18), transparent 28%),
    linear-gradient(145deg, #32182f 0%, #29152b 60%, #211122 100%);
}
.profile-heading { margin-bottom: 38px; }
.profile-heading h2 { color: #fff7fb; }
.profile-heading > p { color: #d7bbc9; }
.profile-cloud-loading {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 420px;
  padding: 42px 24px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(71, 31, 57, .8), rgba(28, 14, 31, .88));
  box-shadow: 0 20px 48px rgba(0, 0, 0, .2);
  text-align: center;
}
.profile-cloud-loading.hidden { display: none; }
.profile-cloud-loading-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  color: #fff8fb;
  background: linear-gradient(145deg, #f18bad, #d44f84);
  box-shadow: 0 0 0 9px rgba(240, 132, 170, .08);
  animation: profile-loading-pulse 1.35s ease-in-out infinite;
}
.profile-cloud-loading-mark svg { width: 34px; height: 34px; }
.profile-cloud-loading strong { color: #fff7fb; font-size: 22px; }
.profile-cloud-loading p { max-width: 420px; margin: 10px 0 0; color: #d7bbc9; line-height: 1.7; }
.profile-cloud-loading .button { margin-top: 20px; }
.profile-cloud-loading.is-slow .profile-cloud-loading-mark {
  animation-duration: 2.1s;
  background: linear-gradient(145deg, #d889a8, #a84f79);
}
.profile-cloud-loading.is-error .profile-cloud-loading-mark { animation: none; opacity: .78; }
.profile-layout.is-loading { display: none; }
@keyframes profile-loading-pulse { 50% { transform: scale(.93); box-shadow: 0 0 0 15px rgba(240, 132, 170, .04); } }
@media (prefers-reduced-motion: reduce) { .profile-cloud-loading-mark { animation: none; } }
.profile-layout {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
}
.profile-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 17px;
  background: rgba(33, 17, 34, .76);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .20);
}
.profile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.profile-card-head .step { margin-bottom: 8px; color: #ffabc4; }
.profile-card h3 {
  margin: 0;
  color: #fff7fb;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.06em;
}
.profile-save-status, .journey-count {
  color: #d7bbc9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.profile-save-status {
  padding: 7px 9px;
  border: 1px solid #68405b;
  border-radius: 999px;
  background: rgba(233, 120, 157, .08);
}
.profile-save-status.is-saved { color: #ffabc4; border-color: rgba(233, 120, 157, .6); }
.profile-save-feedback { min-height: 18px; margin: 2px 0 0; color: #c7a8b7; font-size: 11px; font-weight: 700; line-height: 1.55; }
.profile-save-feedback[data-state="success"] { color: #ffb5cc; }
.profile-save-feedback[data-state="error"] { color: #ffc1c9; }
.profile-save-feedback[data-state="syncing"] { color: #f4d18b; }
.profile-identity {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: stretch;
  gap: 24px;
}
.profile-avatar-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  min-height: 100%;
  gap: 10px;
}
.profile-avatar {
  width: 132px;
  height: 150px;
  object-fit: cover;
  border: 4px solid rgba(255, 236, 244, .72);
  border-radius: 15px;
  background: #45213f;
}
.profile-photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #68405b;
  border-radius: 7px;
  color: #ffdce8;
  background: rgba(233, 120, 157, .10);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.profile-photo-button { font: inherit; }
.profile-reference-photos {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 171, 196, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}
.profile-reference-photos-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.profile-reference-photos-head > div { display: grid; gap: 4px; }
.profile-reference-photos-head span { color: #ffabc4; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.profile-reference-photos-head h4 { margin: 0; color: #fff7fb; font-size: 16px; }
.profile-reference-photos-head p { margin: 0; color: #c9aebb; font-size: 11px; line-height: 1.55; }
.profile-reference-count { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(255, 171, 196, .30); border-radius: 999px; background: rgba(233, 120, 157, .09); white-space: nowrap; }
.profile-reference-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.profile-reference-photo-grid .reference-photo-card { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
.profile-reference-photo-grid .reference-photo-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.profile-reference-photo-grid .reference-photo-copy { gap: 4px; }
.profile-reference-photo-grid .reference-photo-actions { display: grid; grid-template-columns: 1fr; gap: 5px; }
.profile-reference-photo-grid .reference-photo-actions button { width: 100%; min-height: 30px; font-size: 9px; }
.profile-reference-empty { padding: 18px; border: 1px dashed rgba(255, 171, 196, .28); border-radius: 10px; color: #c9aebb; font-size: 11px; line-height: 1.65; text-align: center; }
.profile-main-photo-summary {
  display: grid;
  height: 100%;
  box-sizing: border-box;
  align-content: start;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 211, 226, .2);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(233, 120, 157, .14), rgba(109, 73, 135, .16));
}
.profile-main-photo-summary span { color: #ffb8cf; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.profile-main-photo-summary strong { color: #fff6fa; font-size: 11px; line-height: 1.35; }
.profile-main-photo-summary small { color: #d6b6c4; font-size: 10px; line-height: 1.45; }
#profile-photo-input { display: none; }
.profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.profile-fields label { display: grid; gap: 6px; }
.profile-fields label span {
  color: #e1bfd0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.profile-fields input, .profile-fields textarea {
  width: 100%;
  border: 1px solid #5a3b51;
  border-radius: 8px;
  outline: none;
  color: #fff7fb;
  background: rgba(255, 255, 255, .055);
  font-size: 12px;
  line-height: 1.5;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.profile-fields input { min-height: 39px; padding: 0 11px; }
.profile-fields textarea { min-height: 78px; padding: 9px 11px; resize: vertical; }
.profile-fields input::placeholder, .profile-fields textarea::placeholder { color: #a9899b; }
.profile-fields .profile-date-input {
  position: relative;
  display: block;
}
.profile-fields input[type="date"] {
  box-sizing: border-box;
  text-align: center;
  text-align-last: center;
}
.profile-fields input[type="date"]::-webkit-datetime-edit,
.profile-fields input[type="date"]::-webkit-date-and-time-value {
  padding: 0;
  text-align: center;
}
.profile-fields .profile-date-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 48px);
  color: #a9899b;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.profile-date-input:not(.is-empty) .profile-date-placeholder { display: none; }
.profile-date-input.is-empty input[type="date"] { color: transparent; }
.profile-date-input.is-empty input[type="date"]::-webkit-datetime-edit { color: transparent; }
.profile-fields input:focus, .profile-fields textarea:focus {
  border-color: var(--coral);
  background: rgba(233, 120, 157, .08);
  box-shadow: 0 0 0 3px rgba(233, 120, 157, .12);
}
.profile-field-wide { grid-column: 1 / -1; }
.profile-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 211, 226, .14);
}
.profile-form-actions small {
  max-width: 330px;
  color: #bfa1b1;
  font-size: 10px;
  line-height: 1.7;
}
.profile-form-actions .button { flex: 0 0 auto; }
.journey-card { background: linear-gradient(145deg, rgba(58, 25, 53, .92), rgba(33, 17, 34, .90)); }
.journey-count b { margin-right: 4px; color: #ffabc4; font-size: 16px; }
.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 19px;
}
.profile-stats > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(255, 211, 226, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.profile-stats strong { color: #fff7fb; font-size: 23px; font-weight: 900; letter-spacing: -.04em; }
.profile-stats span { color: #bd9eaf; font-size: 10px; font-weight: 700; }
.profile-records { display: grid; gap: 10px; max-height: 296px; overflow: auto; padding-right: 3px; }
.profile-records::-webkit-scrollbar { width: 5px; }
.profile-records::-webkit-scrollbar-thumb { border-radius: 999px; background: #68405b; }
.profile-empty {
  display: grid;
  place-items: center;
  min-height: 182px;
  padding: 22px;
  border: 1px dashed #68405b;
  border-radius: 11px;
  color: #bd9eaf;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
.profile-record {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 211, 226, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}
.profile-record img {
  width: 76px;
  height: 62px;
  object-fit: cover;
  border-radius: 7px;
}
.profile-record-content { min-width: 0; }
.profile-record-content strong {
  display: block;
  overflow: hidden;
  color: #fff7fb;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-record-content p {
  overflow: hidden;
  margin: 4px 0 0;
  color: #c7a8b7;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-record-content small { display: block; margin-top: 5px; color: #ffabc4; font-size: 9px; font-weight: 800; }

@media (max-width: 920px) {
  .profile-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .profile { padding: 76px 0 0; }
  .profile-identity { grid-template-columns: 1fr; }
  .profile-avatar-wrap { grid-template-columns: 110px 1fr; align-items: center; }
  .profile-avatar { width: 110px; height: 110px; }
  .profile-photo-button { grid-column: 1 / -1; }
  .profile-reference-photos { padding: 12px; }
  .profile-reference-photos-head { flex-direction: column; gap: 8px; }
  .profile-reference-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-fields { grid-template-columns: 1fr; }
  .profile-field-wide { grid-column: auto; }
  .profile-form-actions { align-items: stretch; flex-direction: column; }
  .profile-form-actions .button { width: 100%; }
}

/* Bespoke scene service */
.custom-service {
  padding: 96px 42px 42px;
  margin-top: 24px;
  border-radius: 22px;
  color: #fff7fb;
  background:
    radial-gradient(circle at 92% 15%, rgba(233, 120, 157, .22), transparent 28%),
    radial-gradient(circle at 5% 92%, rgba(116, 53, 84, .28), transparent 29%),
    linear-gradient(145deg, #32182f, #211122);
}
.custom-heading { margin-bottom: 38px; }
.custom-heading h2 { color: var(--coral); }
.custom-heading > p { color: #d7bbc9; }
.custom-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.custom-form-card, .custom-process-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 17px;
  background: rgba(33, 17, 34, .78);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .20);
}
.custom-process-card { background: linear-gradient(145deg, rgba(58, 25, 53, .94), rgba(33, 17, 34, .94)); }
.custom-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.custom-card-head .step { margin-bottom: 8px; color: #ffabc4; }
.custom-card-head h3 { margin: 0; color: #fff7fb; font-size: 27px; font-weight: 900; letter-spacing: -.06em; }
.custom-pet-note, .custom-service-mark { padding: 7px 9px; border: 1px solid #68405b; border-radius: 999px; color: #d7bbc9; background: rgba(255,255,255,.04); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.custom-service-mark { color: #ffabc4; border-color: rgba(233, 120, 157, .48); }
.custom-field { display: grid; gap: 7px; }
.custom-field > span, .custom-choice > span { color: #e1bfd0; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.custom-field-wide { margin-bottom: 13px; }
.custom-field input, .custom-field textarea {
  width: 100%;
  border: 1px solid #5a3b51;
  border-radius: 8px;
  outline: none;
  color: #fff7fb;
  background: rgba(255, 255, 255, .055);
  font-size: 12px;
  line-height: 1.6;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.custom-field input { min-height: 40px; padding: 0 11px; }
.custom-field textarea { min-height: 84px; padding: 10px 11px; resize: vertical; }
.custom-field input::placeholder, .custom-field textarea::placeholder { color: #a9899b; }
.custom-field input:focus, .custom-field textarea:focus { border-color: var(--coral); background: rgba(233,120,157,.08); box-shadow: 0 0 0 3px rgba(233,120,157,.12); }
.custom-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 17px; }
.custom-choice { display: grid; gap: 9px; margin: 17px 0 0; }
.custom-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.custom-chips button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #5a3b51;
  border-radius: 999px;
  color: #d7bbc9;
  background: rgba(255,255,255,.04);
  font-size: 10px;
  font-weight: 750;
}
.custom-chips button:hover, .custom-chips button.is-selected { border-color: var(--coral); color: #fff0f5; background: rgba(233,120,157,.18); }
.custom-submit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 17px; padding-top: 21px; margin-top: 22px; border-top: 1px solid rgba(255,211,226,.14); }
.custom-submit-row small { max-width: 320px; color: #bfa1b1; font-size: 10px; line-height: 1.7; }
.custom-submit-row .button { flex: 0 0 auto; }
.custom-process-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.custom-process-list li { display: grid; grid-template-columns: 33px 1fr; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(255,211,226,.13); }
.custom-process-list li:first-child { padding-top: 0; border-top: 0; }
.custom-process-list li > span { color: #ffabc4; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.custom-process-list strong { color: #fff7fb; font-size: 13px; font-weight: 850; }
.custom-process-list p { margin: 5px 0 0; color: #c7a8b7; font-size: 10px; line-height: 1.65; }
.custom-prototype-note { margin: 17px 0 0; padding: 11px 12px; border: 1px solid rgba(255, 171, 196, .24); border-radius: 10px; color: #d7bbc9; background: rgba(255, 255, 255, .045); font-size: 10px; line-height: 1.7; }
.custom-prototype-note strong { display: block; margin-bottom: 3px; color: #ffabc4; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.custom-contact-field input { width: 100%; }
.custom-contact-field small { display: block; margin-top: 5px; color: #9f8092; font-size: 9px; line-height: 1.5; }
.custom-consent { display: flex; align-items: flex-start; gap: 7px; grid-column: 1 / -1; color: #c7a8b7; font-size: 10px; line-height: 1.6; cursor: pointer; }
.custom-consent input { flex: 0 0 auto; width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--coral); }
.custom-requests { display: grid; gap: 8px; margin-top: 12px; }
.custom-request-empty { padding: 15px; border: 1px dashed #68405b; border-radius: 10px; color: #bd9eaf; font-size: 10px; line-height: 1.7; text-align: center; }
.custom-request { display: grid; gap: 6px; padding: 11px; border: 1px solid rgba(255,211,226,.14); border-radius: 10px; background: rgba(255,255,255,.045); }
.custom-request-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.custom-request strong { overflow: hidden; color: #fff7fb; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.custom-request b { flex: 0 0 auto; color: #ffabc4; font-size: 9px; font-weight: 850; }
.custom-request p { overflow: hidden; margin: 0; color: #c7a8b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.custom-request small { color: #a9899b; font-size: 9px; }
.custom-request-boundary { display: flex; flex-wrap: wrap; gap: 5px 9px; color: #d7bbc9; font-size: 9px; font-weight: 750; line-height: 1.45; }
.custom-request-boundary span:first-child { color: #ffabc4; }

@media (max-width: 920px) {
  .custom-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .custom-service { padding: 76px 0 0; }
  .custom-field-group { grid-template-columns: 1fr; }
  .custom-submit-row { grid-template-columns: 1fr; align-items: stretch; }
  .custom-submit-row .button { width: 100%; }
}

/* Creation credits / billing */
.billing {
  padding: 96px 42px 42px;
  margin-top: 24px;
  border-radius: 22px;
  color: #fff7fb;
  background:
    radial-gradient(circle at 90% 6%, rgba(233, 120, 157, .22), transparent 28%),
    linear-gradient(145deg, #29152b 0%, #32182f 58%, #211122 100%);
}
.billing-heading { margin-bottom: 35px; }
.billing-heading h2 { color: #fff7fb; }
.billing-heading > p { color: #d7bbc9; }
.billing-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.balance-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 18px 21px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
}
.balance-card span, .balance-card small { color: #d7bbc9; font-size: 11px; font-weight: 750; }
.balance-card strong { color: #ffabc4; font-size: 34px; font-weight: 900; line-height: 1; }
.balance-card small { grid-column: 1 / -1; margin-top: 5px; font-size: 9px; font-weight: 600; }
.payment-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #68405b;
  border-radius: 999px;
  color: #d7bbc9;
  background: rgba(255, 255, 255, .04);
  font-size: 10px;
  font-weight: 800;
}
.payment-status i { width: 7px; height: 7px; border-radius: 50%; background: #d99a65; }
.payment-status.is-ready { color: #ffabc4; border-color: rgba(233, 120, 157, .6); }
.payment-status.is-ready i { background: #72c08b; }
.billing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.billing-plan {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px 19px 18px;
  border: 1px solid rgba(255, 171, 196, .18);
  border-radius: 14px;
  background: rgba(33, 17, 34, .76);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.billing-plan:hover { transform: translateY(-3px); border-color: var(--coral); background: rgba(58, 25, 53, .9); }
.billing-plan.is-featured { border-color: var(--coral); box-shadow: 0 15px 35px rgba(122, 40, 78, .20); }
.billing-plan.is-premium { border-color: rgba(223, 172, 255, .72); background: linear-gradient(155deg, rgba(81, 33, 86, .96), rgba(34, 17, 43, .94)); box-shadow: 0 17px 42px rgba(83, 32, 105, .22); }
.billing-plan.is-premium:hover { border-color: #efc6ff; background: linear-gradient(155deg, rgba(94, 38, 99, .98), rgba(38, 18, 49, .98)); }
.billing-plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #29152b;
  background: #ffabc4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}
.billing-plan-badge.is-limited { color: #331b42; background: #eed6ff; }
.billing-plan h3 { margin: 0 0 9px; color: #fff7fb; font-size: 17px; font-weight: 900; letter-spacing: -.04em; }
.billing-plan > p { min-height: 36px; margin: 0; color: #bd9eaf; font-size: 10px; line-height: 1.7; }
.billing-price { display: flex; align-items: baseline; gap: 3px; margin: 17px 0 13px; }
.billing-price strong { color: #ffabc4; font-size: 31px; font-weight: 900; letter-spacing: -.05em; }
.billing-price span { color: #d7bbc9; font-size: 10px; }
.billing-features { display: grid; gap: 7px; min-height: 70px; padding: 0; margin: 0 0 17px; list-style: none; }
.billing-features li { color: #e5cad5; font-size: 10px; line-height: 1.5; }
.billing-features li::before { margin-right: 6px; color: var(--coral); content: "✦"; }
.billing-custom-note { display: grid; gap: 5px; padding: 10px 10px 9px; margin: -4px 0 14px; border: 1px solid rgba(235, 190, 255, .27); border-radius: 9px; background: rgba(255, 240, 255, .07); }
.billing-custom-note strong { color: #f6d7ff; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.billing-custom-note span { color: #d9bfdc; font-size: 9px; line-height: 1.68; }
.billing-plan .button { width: 100%; min-height: 40px; margin-top: auto; font-size: 11px; }
.billing-plan .button:disabled { cursor: not-allowed; color: #d7bbc9; border-color: #68405b; background: rgba(255, 255, 255, .06); box-shadow: none; opacity: .68; }
.billing-history { margin-top: 20px; padding: 18px; border: 1px solid rgba(255, 171, 196, .22); border-radius: 14px; background: rgba(20, 10, 23, .5); }
.billing-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.billing-history-head > div { display: grid; gap: 4px; }
.billing-history-head span { color: #ffabc4; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.billing-history-head h3 { margin: 0; color: #fff7fb; font-size: 18px; font-weight: 900; letter-spacing: -.04em; }
.billing-history-head p { margin: 0; color: #c7a8b7; font-size: 10px; line-height: 1.65; }
.billing-history-refresh { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(255, 171, 196, .4); border-radius: 999px; color: #ffbfd1; background: rgba(255, 255, 255, .04); font-size: 10px; font-weight: 850; }
.billing-history-refresh:disabled { cursor: wait; opacity: .55; }
.billing-history-status { min-height: 17px; margin: 13px 0 9px; color: #d7bbc9; font-size: 10px; line-height: 1.55; }
.billing-history-list { display: grid; gap: 8px; }
.billing-history-empty { padding: 18px 14px; border: 1px dashed rgba(255, 171, 196, .25); border-radius: 10px; color: #bd9eaf; font-size: 11px; text-align: center; }
.billing-history-login { justify-self: start; min-height: 36px; padding: 0 14px; font-size: 10px; }
.billing-history-item { overflow: hidden; border: 1px solid rgba(255, 211, 226, .15); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.billing-history-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; width: 100%; gap: 10px; padding: 12px; border: 0; color: inherit; background: transparent; text-align: left; }
.billing-history-summary:hover { background: rgba(255, 171, 196, .06); }
.billing-history-plan, .billing-history-amount { display: grid; gap: 3px; min-width: 0; }
.billing-history-plan strong { overflow: hidden; color: #fff7fb; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.billing-history-plan small { color: #bd9eaf; font-size: 9px; }
.billing-history-amount { justify-items: end; }
.billing-history-amount strong { color: #ffcfdd; font-size: 13px; font-weight: 900; }
.billing-history-amount em { padding: 3px 6px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 850; }
.billing-history-amount .is-paid { color: #b8f0c7; background: rgba(95, 190, 124, .13); }
.billing-history-amount .is-pending { color: #ffd9a8; background: rgba(225, 159, 75, .13); }
.billing-history-amount .is-closed { color: #c7a8b7; background: rgba(255, 255, 255, .06); }
.billing-history-arrow { color: #ffabc4; font-size: 15px; line-height: 1; transition: transform .18s ease; }
.billing-history-summary[aria-expanded="true"] .billing-history-arrow { transform: rotate(180deg); }
.billing-history-detail { padding: 0 12px 13px; border-top: 1px solid rgba(255, 211, 226, .1); }
.billing-history-detail.hidden { display: none; }
.billing-history-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 13px; margin: 12px 0 9px; }
.billing-history-detail dl > div { display: grid; gap: 3px; min-width: 0; }
.billing-history-detail dt { color: #a9899b; font-size: 9px; }
.billing-history-detail dd { overflow-wrap: anywhere; margin: 0; color: #f4dce5; font-size: 10px; line-height: 1.55; }
.billing-history-detail p { margin: 0; color: #bd9eaf; font-size: 9px; line-height: 1.6; }
.billing-footnote { margin: 18px 0 0; color: #a9899b; font-size: 10px; line-height: 1.7; }
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 6, 15, .72);
  backdrop-filter: blur(12px);
}
.payment-modal.hidden { display: none; }
.payment-dialog {
  position: relative;
  width: min(100%, 440px);
  padding: 31px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 19px;
  color: #fff7fb;
  background: linear-gradient(145deg, #3a1935, #211122);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
}
.payment-dialog > .step { margin-bottom: 9px; color: #ffabc4; }
.payment-dialog h2 { margin: 0 0 9px; font-size: 27px; font-weight: 900; letter-spacing: -.06em; }
.payment-dialog p { margin: 0 0 22px; color: #d7bbc9; font-size: 12px; line-height: 1.7; }
.payment-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #d7bbc9;
  background: rgba(255, 255, 255, .08);
  font-size: 22px;
  line-height: 1;
}
.payment-close:hover { color: #fff; background: rgba(233, 120, 157, .22); }
.payment-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.payment-provider {
  display: grid;
  gap: 6px;
  min-height: 95px;
  padding: 16px;
  border: 1px solid #68405b;
  border-radius: 11px;
  color: #fff7fb;
  background: rgba(255, 255, 255, .05);
  text-align: left;
}
.payment-provider:hover { border-color: var(--coral); background: rgba(233, 120, 157, .12); }
.payment-provider strong { font-size: 15px; font-weight: 900; }
.payment-provider small { color: #c7a8b7; font-size: 10px; line-height: 1.5; }
.payment-provider-alipay strong { color: #86c9f5; }

/* Public business identity and service rules required for commercial operation. */
.legal-page {
  padding: clamp(76px, 9vw, 118px) clamp(22px, 5vw, 68px) 58px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(43, 34, 47, .07);
}
.legal-page-head { display: grid; gap: 12px; max-width: 780px; margin-bottom: 34px; }
.legal-page-head h2 { margin: 0; color: #27232d; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; letter-spacing: -.055em; }
.legal-page-head > p:last-child { margin: 0; color: #6d6873; font-size: 14px; line-height: 1.85; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.legal-grid article,
.legal-copy article { padding: 22px; border: 1px solid #ebe4e9; border-radius: 14px; background: #fcfafb; }
.legal-grid .legal-wide { grid-column: 1 / -1; }
.legal-grid h3,
.legal-copy h3 { margin: 0 0 9px; color: #352d38; font-size: 16px; }
.legal-grid p,
.legal-copy p { margin: 0; color: #66606b; font-size: 13px; line-height: 1.9; }
.legal-grid a,
.legal-copy a { color: #8c4763; }
.legal-copy { display: grid; gap: 13px; }

@media (max-width: 920px) {
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer > .brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .site-footer { grid-template-columns: 1fr; gap: 18px; padding-bottom: 116px; }
  .site-footer > .brand { grid-column: auto; }
  .footer-links { justify-content: flex-start; }
  .legal-page { padding: 70px 18px 32px; margin-top: 10px; border-radius: 16px; }
  .legal-page-head { margin-bottom: 22px; }
  .legal-page-head h2 { font-size: 32px; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-grid .legal-wide { grid-column: auto; }
  .legal-grid article,
  .legal-copy article { padding: 18px; }
}
.payment-provider-wechat strong { color: #7bd39a; }
.payment-qr-panel {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding-top: 7px;
  text-align: center;
}
.payment-qr-panel.hidden { display: none; }
.payment-qr-panel #payment-qr { display: grid; width: 220px; height: 220px; place-items: center; padding: 10px; border-radius: 10px; background: #fff; }
.payment-qr-panel #payment-qr img, .payment-qr-panel #payment-qr canvas { width: 200px !important; height: 200px !important; }
.payment-qr-panel strong { font-size: 13px; font-weight: 850; }
.payment-qr-panel small { color: #ffabc4; font-size: 10px; }
.payment-result-panel { display: grid; justify-items: center; gap: 12px; padding: 10px 0 2px; text-align: center; }
.payment-result-panel.hidden { display: none; }
.payment-result-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(129, 211, 157, .72); border-radius: 50%; color: #b8f0c7; background: rgba(95, 190, 124, .14); box-shadow: 0 0 0 8px rgba(95, 190, 124, .07); font-size: 30px; font-weight: 900; line-height: 1; }
.payment-result-title { color: #fff7fb; font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.payment-result-panel p { max-width: 300px; margin: 0; color: #d7bbc9; font-size: 12px; line-height: 1.7; }
.payment-result-balance { width: min(100%, 330px); padding: 12px 14px; border: 1px solid rgba(255, 171, 196, .3); border-radius: 12px; color: #ffcfdd; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 800; }
.payment-result-panel .button { width: min(100%, 330px); margin-top: 4px; }

/* Account center */
.account-modal {
  position: fixed;
  inset: 0;
  z-index: 31;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 6, 15, .72);
  backdrop-filter: blur(12px);
}
.account-modal.hidden { display: none; }
.account-dialog {
  position: relative;
  width: min(100%, 500px);
  max-height: min(760px, calc(100vh - 40px));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 31px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 19px;
  color: #fff7fb;
  background:
    radial-gradient(circle at 88% 0%, rgba(233, 120, 157, .22), transparent 35%),
    linear-gradient(145deg, #3a1935, #211122);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
}
.account-dialog > section > .step { margin-bottom: 9px; color: #ffabc4; }
.account-dialog h2 { margin: 0 0 10px; font-size: 29px; font-weight: 900; letter-spacing: -.07em; line-height: 1.12; }
.account-dialog p { margin: 0 0 21px; color: #d7bbc9; font-size: 12px; line-height: 1.75; }
.account-login-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.account-login-methods button {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid #68405b;
  border-radius: 11px;
  color: #c7a8b7;
  background: rgba(255, 255, 255, .045);
  text-align: left;
}
.account-login-methods button strong { color: #e2c2d0; font-size: 13px; }
.account-login-methods button small { color: #a9899b; font-size: 9px; }
.account-guest-note { display: block; margin-top: 13px; color: #a9899b; font-size: 10px; line-height: 1.65; }
.account-auth-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 4px; margin: 0 0 14px; border: 1px solid rgba(255, 211, 226, .14); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.account-auth-switch button { min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: #bd9eaf; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.account-auth-switch button.is-active { background: rgba(233, 120, 157, .22); color: #fff4f8; box-shadow: inset 0 0 0 1px rgba(255, 183, 210, .25); }
.account-auth-form:not(.hidden) { display: grid; gap: 10px; }
.account-auth-form label { display: grid; gap: 6px; color: #d7bbc9; font-size: 10px; font-weight: 800; }
.account-auth-form label.hidden { display: none; }
.account-auth-form input { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #6c425d; border-radius: 9px; outline: none; padding: 0 12px; background: rgba(15, 7, 18, .44); color: #fff7fb; font: inherit; font-size: 12px; }
.account-auth-form input:focus { border-color: #ef82ad; box-shadow: 0 0 0 3px rgba(233, 120, 157, .13); }
.account-auth-status { min-height: 17px; margin: 1px 0 0 !important; color: #bd9eaf !important; font-size: 10px !important; line-height: 1.6 !important; }
.account-auth-status.is-error { color: #ff9ebf !important; }
.account-auth-status.is-success { color: #8bd6a0 !important; }
.account-auth-form .button { width: 100%; justify-content: center; }
.account-phone-entry { width: 100%; margin-top: 10px; justify-content: center; }
.account-phone-entry.hidden, .account-phone-form.hidden { display: none; }
.account-phone-maintenance { display: grid; gap: 5px; margin-top: 11px; padding: 12px 13px; border: 1px solid rgba(255, 146, 186, .34); border-radius: 13px; background: linear-gradient(135deg, rgba(255, 139, 181, .13), rgba(94, 42, 75, .2)); color: #f4dbe6; line-height: 1.55; }
.account-phone-maintenance.hidden { display: none; }
.account-phone-maintenance strong { color: #ff9fc1; font-size: 11px; letter-spacing: .04em; }
.account-phone-maintenance span { font-size: 10px; }
.account-phone-maintenance small { color: #b99aaa; font-size: 9px; line-height: 1.6; }
.account-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 106px; gap: 8px; align-items: end; }
.account-code-row .button { min-height: 42px; padding: 0 8px; font-size: 10px; white-space: nowrap; }
.account-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 21px; }
.account-panel-head img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 3px solid rgba(255, 236, 244, .75);
  border-radius: 15px;
  background: #45213f;
}
.account-panel-head .account-avatar {
  position: relative;
  display: grid;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 222, 234, .78);
  border-radius: 18px;
  background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .44), transparent 38%), linear-gradient(145deg, #f59fbd, #df78a1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(13, 6, 15, .22);
}
.account-panel-head .account-avatar img { width: 100%; height: 100%; border: 0; border-radius: 17px; object-fit: cover; }
.account-panel-head .account-avatar.is-empty-pet-avatar > img { display: none !important; }
.account-avatar-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #ffd4e2 !important;
}
.account-avatar-empty::before, .account-avatar-empty::after { display: none !important; content: none !important; }
.account-avatar-empty[hidden] { display: none; }
.account-avatar-empty svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 3px 7px rgba(25, 8, 23, .28)); }

.pet-upload-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 80;
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 11px 17px;
  border: 1px solid rgba(255, 171, 196, .5);
  border-radius: 999px;
  color: #fff7fb;
  background: rgba(52, 25, 48, .94);
  box-shadow: 0 14px 38px rgba(13, 6, 15, .38), inset 0 0 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}
.pet-upload-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.archive-work-delete { position: relative; z-index: 2; touch-action: manipulation; pointer-events: auto; }

@media (max-width: 720px) {
  .pet-upload-toast { bottom: 112px; font-size: 11px; }
}
.account-panel-head span, .account-section-head span, .account-pet-card span { color: #ffabc4; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.account-panel-head h2 { margin: 4px 0; font-size: 23px; }
.account-panel-head p { overflow: hidden; margin: 0; color: #c7a8b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.account-overview > div { display: grid; gap: 4px; padding: 12px 10px; border: 1px solid rgba(255, 211, 226, .14); border-radius: 10px; background: rgba(255, 255, 255, .045); }
.account-overview strong { color: #fff7fb; font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.account-overview span { color: #bd9eaf; font-size: 9px; font-weight: 700; }
.account-billing-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; margin-top: 12px; border: 1px solid rgba(255, 171, 196, .22); border-radius: 11px; background: linear-gradient(135deg, rgba(233, 120, 157, .11), rgba(255, 255, 255, .035)); }
.account-billing-card > div { display: grid; gap: 3px; min-width: 0; }
.account-billing-card span { color: #ffabc4; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.account-billing-card strong { color: #fff7fb; font-size: 14px; font-weight: 850; }
.account-billing-card small { color: #c7a8b7; font-size: 9px; line-height: 1.55; }
.account-billing-card .account-link { border: 0; background: transparent; white-space: nowrap; }
.account-pet-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid rgba(255, 211, 226, .14); border-radius: 11px; background: rgba(255, 255, 255, .045); }
.account-pet-card > div { display: grid; gap: 3px; }
.account-pet-card strong { color: #fff7fb; font-size: 16px; font-weight: 850; }
.account-pet-card small { color: #c7a8b7; font-size: 10px; }
.account-link { flex: 0 0 auto; color: #ffabc4; font-size: 10px; font-weight: 800; text-decoration: none; }
.account-works { margin-top: 17px; }
.account-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.account-section-head strong { color: #fff7fb; font-size: 14px; font-weight: 850; }
.account-records { display: grid; gap: 8px; max-height: 191px; overflow: auto; }
.account-record { display: grid; grid-template-columns: 52px 1fr; gap: 9px; align-items: center; padding: 7px; border: 1px solid rgba(255, 211, 226, .12); border-radius: 9px; background: rgba(255, 255, 255, .04); }
.account-record img { width: 52px; height: 42px; object-fit: cover; border-radius: 6px; }
.account-record strong { display: block; overflow: hidden; color: #fff7fb; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-record small { display: block; margin-top: 4px; color: #c7a8b7; font-size: 9px; }
.account-empty { padding: 17px; border: 1px dashed #68405b; border-radius: 9px; color: #bd9eaf; font-size: 10px; line-height: 1.7; text-align: center; }
.account-sync-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; margin-top: 15px; border: 1px solid rgba(255, 171, 196, .25); border-radius: 11px; background: linear-gradient(115deg, rgba(233, 120, 157, .12), rgba(255, 255, 255, .03)); }
.account-sync-copy { display: grid; gap: 4px; min-width: 0; }
.account-sync-copy > span { color: #ffabc4; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.account-sync-copy strong { color: #fff7fb; font-size: 11px; line-height: 1.45; }
.account-sync-copy strong[data-state="saved"] { color: #a8e1b7; }
.account-sync-copy strong[data-state="conflict"], .account-sync-copy strong[data-state="error"] { color: #ffb1c8; }
.account-sync-copy small { color: #bd9eaf; font-size: 9px; line-height: 1.5; }
.account-sync-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.account-sync-actions .button { min-height: 34px; padding: 0 10px; font-size: 9px; white-space: nowrap; }
.account-sync-actions .button:disabled { cursor: not-allowed; opacity: .52; }
.account-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 17px; border-top: 1px solid rgba(255, 211, 226, .14); }
.account-panel-actions small { color: #a9899b; font-size: 9px; line-height: 1.6; }
.account-panel-actions .button { min-height: 37px; padding: 0 12px; font-size: 10px; }
.account-password-form { margin-top: 17px; padding: 14px; border: 1px solid rgba(255, 211, 226, .14); border-radius: 11px; background: rgba(255, 255, 255, .035); }
.account-password-form.hidden { display: none; }
.account-password-form .button-soft { width: 100%; justify-content: center; }

@media (max-width: 1040px) {
  .billing-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .billing { padding: 76px 0 0; }
  .billing-topline { align-items: stretch; flex-direction: column; }
  .billing-plans { grid-template-columns: 1fr; }
  .billing-history { padding: 14px; }
  .billing-history-head { gap: 10px; }
  .billing-history-head h3 { font-size: 16px; }
  .billing-history-head p { max-width: 220px; }
  .billing-history-detail dl { grid-template-columns: 1fr; gap: 8px; }
  .account-billing-card { align-items: flex-start; }
  .account-billing-card .account-link { padding: 3px 0; }
  .payment-choice { grid-template-columns: 1fr; }
  .account-trigger { margin-left: auto; font-size: 10px; }
  .account-dialog { padding: 25px 20px; }
  .account-login-methods { grid-template-columns: 1fr; }
  .account-code-row { grid-template-columns: minmax(0, 1fr) 98px; }
  .account-sync-card { align-items: stretch; flex-direction: column; }
  .account-sync-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-sync-actions .button { width: 100%; }
}

/* Local photo and browser-data boundary */
.local-data-note {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 171, 196, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}
.local-data-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.local-data-note-head .step { margin-bottom: 5px; color: #ffabc4; }
.local-data-note h4 { margin: 0; color: #fff7fb; font-size: 14px; font-weight: 900; }
.local-data-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 999px;
  color: #ffabc4;
  background: rgba(233, 120, 157, .09);
  font-size: 9px;
  font-weight: 850;
}
.local-data-note ul {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #d7bbc9;
  font-size: 11px;
  line-height: 1.65;
}
.local-data-note li::marker { color: #ffabc4; }
.local-data-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 13px;
  margin-top: 13px;
  border-top: 1px solid rgba(255, 211, 226, .13);
}
.local-data-actions small { color: #bfa1b1; font-size: 10px; line-height: 1.65; }
.local-data-clear, .local-data-confirm {
  min-height: 38px;
  border: 1px solid rgba(255, 171, 196, .56);
  border-radius: 8px;
  color: #ffdce8;
  background: rgba(233, 120, 157, .10);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.local-data-clear { flex: 0 0 auto; padding: 0 12px; }
.local-data-clear:hover, .local-data-clear:focus-visible { border-color: #ffabc4; background: rgba(233, 120, 157, .19); }
.local-data-clear:focus-visible, .local-data-confirm:focus-visible { outline: 3px solid rgba(255, 171, 196, .28); outline-offset: 2px; }

.local-data-modal {
  position: fixed;
  inset: 0;
  z-index: 32;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 6, 15, .72);
  backdrop-filter: blur(12px);
}
.local-data-modal.hidden { display: none; }
.local-data-dialog {
  position: relative;
  width: min(100%, 480px);
  padding: 29px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 19px;
  color: #fff7fb;
  background:
    radial-gradient(circle at 88% 0%, rgba(233, 120, 157, .20), transparent 35%),
    linear-gradient(145deg, #3a1935, #211122);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
}
.local-data-dialog > .step { display: block; margin-bottom: 9px; color: #ffabc4; }
.local-data-dialog h2 { margin: 0 0 10px; font-size: 28px; font-weight: 900; letter-spacing: -.06em; line-height: 1.12; }
.local-data-dialog > p { margin: 0; color: #d7bbc9; font-size: 12px; line-height: 1.75; }
.local-data-dialog-note {
  display: grid;
  gap: 5px;
  padding: 13px;
  margin-top: 18px;
  border: 1px solid rgba(255, 211, 226, .16);
  border-radius: 10px;
  color: #c7a8b7;
  background: rgba(255, 255, 255, .045);
  font-size: 11px;
  line-height: 1.65;
}
.local-data-dialog-note strong { color: #ffabc4; font-size: 11px; }
.local-data-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.local-data-dialog-actions .button { min-height: 39px; }
.local-data-confirm { padding: 0 15px; color: #29152b; border-color: #ffabc4; background: #ffabc4; }
.local-data-confirm:hover, .local-data-confirm:focus-visible { background: #ffd0df; }

@media (max-width: 720px) {
  .task-center { padding: 14px; border-radius: 13px; }
  .task-center-head { gap: 10px; }
  .task-center-head p { max-width: 250px; }
  .task-center-toolbar { align-items: flex-start; flex-direction: column; }
  .task-center-refresh { align-self: flex-end; }
  .task-item { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .task-item-mark { width: 30px; height: 30px; border-radius: 8px; }
  .task-item-actions { grid-column: 2; justify-content: flex-start; }
  .task-item-actions button { flex: 1; }
  .archive-library { padding: 14px; border-radius: 13px; }
  .archive-library-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .archive-library-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .archive-library-filters { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .archive-library-filters button { flex: 0 0 auto; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .archive-work { grid-template-columns: 1fr; gap: 8px; padding: 7px; }
  .archive-work > .archive-work-media { width: 100%; min-height: 0; height: auto; aspect-ratio: 9 / 16; }
  .archive-work-topline { align-items: flex-start; flex-direction: column; gap: 2px; }
  .archive-work-topline small { white-space: normal; }
  .archive-work-actions { gap: 5px; }
  .archive-work-actions button { min-height: 29px; }
  .version-manager { padding: 11px; }
  .version-manager-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .version-manager-head small { text-align: left; }
  .version-manager-toolbar button { flex: 1; }
  .version-rename-form > div { flex-wrap: wrap; }
  .version-rename-form input { flex-basis: 100%; }
  .version-rename-form button { flex: 1; }
  .version-item { grid-template-columns: 1fr; }
  .version-item-actions { justify-content: flex-start; }
  .version-item-actions button { flex: 1; }
  .local-data-actions { align-items: stretch; flex-direction: column; }
  .local-data-clear { width: 100%; }
}

@media (max-width: 410px) {
  .local-data-dialog { padding: 24px; }
  .local-data-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .local-data-dialog-actions .button, .local-data-confirm { width: 100%; }
}

/* P1：作品页移动端重排与纯净成图展示。
   主题层的双栏规则位于早期移动端规则之后，曾使手机端仍保持左右分栏。
   在最终样式层恢复单栏，让档案与版本记录各自完整呈现，不产生单侧留白。 */
.result-photo-chrome,
.result-count,
.result-mode {
  display: none;
}

@media (max-width: 720px) {
  html,
  body,
  main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .shell,
  main[data-app-page] > .site-header.shell,
  main[data-app-page="scene"] > #scene-creator.shell,
  main[data-app-page="generate"] > #scene-generate.shell,
  main[data-app-page="works"] > #archive > .shell {
    width: calc(100% - 28px) !important;
    max-width: 600px;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .archive-work,
  .scene-creator-card,
  .scene-creator-media,
  .scene-creator-media img {
    width: 100%;
    max-width: none;
  }
  .scene-creator-card {
    display: block;
    min-height: 0;
    aspect-ratio: 9 / 16;
    isolation: isolate;
  }
  /* 横版交付必须同步切换预览框，而不是只替换图片源后继续按竖版裁切。 */
  .scene-generate.is-landscape .scene-creator-card {
    aspect-ratio: 16 / 9;
  }
  .scene-generate.is-landscape .scene-creator-copy {
    min-height: 54%;
    padding-top: 62px;
  }
  .scene-creator-media {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    z-index: 0;
  }
  .scene-creator-media::after {
    background: linear-gradient(180deg, rgba(26, 11, 26, .04) 10%, rgba(26, 11, 26, .12) 42%, rgba(26, 11, 26, .82) 100%);
  }
  .scene-creator-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    min-height: 46%;
    align-content: end;
    padding: 112px 20px 20px;
    background: linear-gradient(180deg, transparent, rgba(33, 17, 34, .87) 72%, rgba(33, 17, 34, .96));
  }
  .result-post {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .result-post .result-actions,
  .result-post .result-details,
  .result-post .version-manager,
  .result-post .result-review,
  .result-post .comparison-panel,
  .result-post .comparison-toggle,
  .result-post .video-studio,
  .result-post > #share-note {
    grid-column: 1;
    grid-row: auto;
  }
  .result-post .result-details,
  .result-post .version-manager {
    margin: 0;
  }
  .result-details-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* 横版交付在手机上使用独立横向预览卡：完整 16:9 画面在上，信息在下。
   不再沿用竖版全屏叠字卡，避免横图被塞进竖框造成视觉误导。 */
@media (max-width: 720px) {
  #scene-generate.is-landscape .scene-generate-card,
  #scene-generate .scene-generate-card.is-landscape {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  #scene-generate.is-landscape .scene-generate-card .scene-creator-media,
  #scene-generate .scene-generate-card.is-landscape .scene-creator-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
  #scene-generate.is-landscape .scene-generate-card .scene-creator-media::after,
  #scene-generate .scene-generate-card.is-landscape .scene-creator-media::after {
    background: linear-gradient(180deg, rgba(26, 11, 26, .02), rgba(26, 11, 26, .20)) !important;
  }
  #scene-generate.is-landscape .scene-generate-card .scene-creator-copy,
  #scene-generate .scene-generate-card.is-landscape .scene-creator-copy {
    position: static !important;
    min-height: 0 !important;
    padding: 18px 18px 20px !important;
    background: #29152b !important;
  }
  #scene-generate.is-landscape .scene-generate-card .scene-creator-copy strong,
  #scene-generate .scene-generate-card.is-landscape .scene-creator-copy strong {
    font-size: clamp(26px, 7vw, 32px) !important;
  }

  /* 以生成页的真实画幅状态驱动按钮高亮，避免图片已切横版而旧按钮状态残留。 */
  #scene-generate.is-landscape [data-generation-aspect="portrait"] {
    border-color: #68405b !important;
    background: rgba(16, 6, 17, .24) !important;
    box-shadow: none !important;
  }
  #scene-generate.is-landscape [data-generation-aspect="landscape"] {
    border-color: #ffabc4 !important;
    background: linear-gradient(135deg, rgba(233,120,157,.3), rgba(117,48,90,.3)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  }
  #scene-generate:not(.is-landscape) [data-generation-aspect="portrait"] {
    border-color: #ffabc4 !important;
    background: linear-gradient(135deg, rgba(233,120,157,.3), rgba(117,48,90,.3)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  }
  #scene-generate:not(.is-landscape) [data-generation-aspect="landscape"] {
    border-color: #68405b !important;
    background: rgba(16, 6, 17, .24) !important;
    box-shadow: none !important;
  }
}

/* 场景选择与偏好确认只做方图浏览；最终页才显示用户所选的正式交付画幅。 */
.scene {
  aspect-ratio: 1 / 1;
}
#scene-creator .scene-creator-media {
  aspect-ratio: 1 / 1;
}

@media (max-width: 720px) {
  /* 偏好页：保留信息，但场景本体统一为 1:1。 */
  #scene-creator .scene-creator-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  #scene-creator .scene-creator-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
  #scene-creator .scene-creator-copy {
    position: static !important;
    min-height: 0 !important;
    padding: 18px !important;
    background: #29152b !important;
  }
}

/* 最终生成页：只显示清晰场景图片，横竖比例完全遵循用户选择。 */
#scene-generate .scene-generate-card {
  display: block !important;
  width: min(100%, 560px) !important;
  min-height: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  aspect-ratio: 9 / 16 !important;
  isolation: isolate;
}
#scene-generate.is-landscape .scene-generate-card,
#scene-generate .scene-generate-card.is-landscape {
  width: 100% !important;
  max-width: 920px !important;
  aspect-ratio: 16 / 9 !important;
}
#scene-generate .scene-generate-card .scene-creator-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
#scene-generate .scene-generate-card .scene-creator-media::after,
#scene-generate .scene-generate-card .scene-creator-media > span,
#scene-generate .scene-generate-card .scene-creator-copy,
#scene-generate .scene-generate-card::after {
  display: none !important;
}

/* 偏好页与场景库保持同一张 1:1 方形场景卡：说明叠在图内，不再追加成竖版长卡。 */
#scene-creator .scene-creator-card {
  position: relative !important;
  display: block !important;
  width: min(100%, 620px) !important;
  min-height: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  aspect-ratio: 1 / 1 !important;
  isolation: isolate;
}
#scene-creator .scene-creator-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  z-index: 0;
}
#scene-creator .scene-creator-media::after {
  background: linear-gradient(180deg, rgba(26, 11, 26, .04) 12%, rgba(26, 11, 26, .18) 48%, rgba(26, 11, 26, .88) 100%) !important;
}
#scene-creator .scene-creator-copy {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  min-height: 44% !important;
  align-content: end !important;
  padding: 84px 20px 20px !important;
  background: linear-gradient(180deg, transparent, rgba(33, 17, 34, .80) 40%, rgba(33, 17, 34, .96)) !important;
}

/* 偏好确认卡复用场景库的轻遮罩：保留可读性，但不再把下半部压暗成虚化效果。 */
#scene-creator .scene-preference-card .scene-creator-media::after {
  background: linear-gradient(180deg, rgba(17, 8, 18, .08) 0%, rgba(17, 8, 18, .08) 38%, rgba(17, 8, 18, .62) 100%) !important;
}
#scene-creator .scene-preference-card .scene-creator-copy {
  min-height: 0 !important;
  gap: 4px !important;
  padding: 28px 13px 13px !important;
  background: transparent !important;
}
#scene-creator .scene-preference-card .scene-creator-copy strong {
  font-family: var(--serif) !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
}
#scene-creator .scene-preference-card .scene-creator-copy p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* 方图确认页不预设画幅，必须由用户主动选择后才进入预览。 */
#scene-generate:not(.has-aspect-choice) [data-generation-aspect="portrait"],
#scene-generate:not(.has-aspect-choice) [data-generation-aspect="landscape"] {
  border-color: #68405b !important;
  background: rgba(16, 6, 17, .24) !important;
  box-shadow: none !important;
}

/* 两段式交付流程：先用方图确认场景，再进入独立的横竖版纯图片预览。 */
#scene-generate .scene-generate-card,
#scene-generate.is-landscape .scene-generate-card,
#scene-generate .scene-generate-card.is-landscape {
  width: min(100%, 620px) !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
}

/* 生成确认与交付预览是收尾任务页：不重复展示账户入口或页脚品牌。 */
main[data-app-page="generate"] > .site-footer,
main[data-app-page="preview"] > .site-footer,
main[data-app-page="result-preview"] > .site-footer {
  display: none !important;
}
main[data-app-page="generate"] > .site-header .account-trigger,
main[data-app-page="generate"] > .site-header .header-cta,
main[data-app-page="preview"] > .site-header .account-trigger,
main[data-app-page="preview"] > .site-header .header-cta,
main[data-app-page="result-preview"] > .site-header {
  display: none !important;
}
main[data-app-page="generate"] > .site-header,
main[data-app-page="preview"] > .site-header {
  justify-content: flex-start;
}

main[data-app-page="result-preview"] > .mobile-bottom-nav { display: none !important; }
.result-preview { min-height: 100dvh; padding-top: 30px; padding-bottom: 46px; }
.result-final-preview { display: grid; width: fit-content; max-width: 100%; min-height: 0; margin: 22px auto 0; place-items: center; overflow: hidden; border: 0; border-radius: 20px; background: transparent; box-shadow: none; }
.result-final-preview img, .result-final-preview video { display: block; width: auto; max-width: 100%; height: auto; max-height: 82dvh; object-fit: contain; }
.result-final-preview.is-landscape { width: min(100%, 1200px); aspect-ratio: 16 / 9; }
.result-final-preview.is-landscape img { width: 100%; max-height: none; height: auto; }
.result-preview:fullscreen { display: grid; width: 100%; max-width: none; min-height: 100dvh; padding: 12px; place-items: center; background: #080609; }
.result-preview:fullscreen .flow-navigation { position: fixed; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.result-preview:fullscreen .result-final-preview,
.result-preview:fullscreen .result-final-preview.is-landscape { width: min(100%, 177.7dvh); max-width: 100%; margin: 0; }
.result-preview:fullscreen .result-final-preview img { width: 100%; max-height: calc(100dvh - 24px); }
.result-final-preview .hidden { display: none !important; }
.result-photo.is-preview-ready { cursor: zoom-in; }
.result-photo[aria-disabled="true"] { cursor: default; }

@media (max-width: 720px) {
  .result-preview { width: calc(100% - 28px); padding-top: 18px; }
  .result-final-preview { min-height: 0; margin-top: 16px; border-radius: 16px; }
  .result-final-preview img { max-height: 82dvh; }
  .result-final-preview.is-landscape { width: 100%; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .result-preview { width: 100%; max-width: none; min-height: 100dvh; padding: 12px; }
  .result-preview .flow-navigation { margin-bottom: 10px; }
  .result-final-preview.is-landscape { width: min(100%, 177.7dvh); margin: 0 auto; }
  .result-final-preview.is-landscape img { width: 100%; max-height: calc(100dvh - 70px); }
}

/* 本次生成结果不展示历史版本；历史浏览统一收口到“作品”页。 */
main[data-app-page="result"] #version-manager { display: none !important; }

/* 作品收藏页始终以顶部全站头部开始。即使旧会话残留异常节点顺序，
   也由页面层级兜底，账户入口不会再落入底部品牌区。 */
@media (max-width: 720px) {
  main[data-app-page="collection"] {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
  }
  main[data-app-page="collection"] > .site-header {
    order: -2;
    position: sticky;
    top: 10px;
    z-index: 30;
  }
  main[data-app-page="collection"] > #collection { order: -1; }
  main[data-app-page="collection"] > .site-footer { order: 2; }
  main[data-app-page="collection"] > .mobile-bottom-nav { order: 3; }
}

/* 返回方图确认页时，无论此前选过哪种画幅，背景都必须完整铺满方卡。 */
#scene-generate .scene-generate-card .scene-creator-media,
#scene-generate.is-landscape .scene-generate-card .scene-creator-media,
#scene-generate .scene-generate-card.is-landscape .scene-creator-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.scene-preview {
  padding-top: 36px;
  padding-bottom: 48px;
}
.scene-preview-back {
  min-height: 38px;
  padding: 0 13px;
  margin-bottom: 18px;
  border: 1px solid #68405b;
  border-radius: 999px;
  color: #f2dce5;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.scene-preview-back:hover,
.scene-preview-back:focus-visible {
  border-color: #ffabc4;
  color: #fff7fb;
  background: rgba(233,120,157,.14);
  outline: none;
}
.scene-final-preview {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,171,196,.42);
  border-radius: 18px;
  aspect-ratio: 9 / 16;
  background: #211122;
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}
.scene-final-preview.is-landscape {
  width: min(100%, 920px);
  aspect-ratio: 16 / 9;
}
.scene-final-preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.scene-preview-slot { margin-top: 20px; }
.scene-preview-slot .generate-bar { border-radius: 18px; }

@media (max-width: 720px) {
  main[data-app-page="preview"] > #scene-preview { padding: 28px 17px 38px; }
  .scene-preview { padding-top: 28px; }
  .scene-final-preview,
  .scene-final-preview.is-landscape { width: 100%; border-radius: 16px; }
  .scene-preview-slot .generate-bar { padding: 22px 18px; }
}

/* P35：结果页只保留图片结果；视频特效改为独立任务页，减少信息重复。 */
main[data-app-page="video"] > .site-footer,
main[data-app-page="video"] > .mobile-bottom-nav {
  display: none !important;
}
main[data-app-page="video"] > .site-header .header-cta {
  display: none !important;
}
main[data-app-page="video"] > .site-header {
  justify-content: flex-start;
}
main[data-app-page="home"] > .site-footer {
  margin-top: 54px;
  padding-top: 12px;
}
.scene-preview .flow-navigation {
  margin-bottom: 24px;
}
.scene-preview .scene-preview-back {
  margin-bottom: 0;
}
.share-copy-feedback {
  grid-column: 1 / -1;
  padding: 17px 18px;
  border: 1px solid rgba(255, 171, 196, .34);
  border-radius: 14px;
  color: #f7dbe5;
  background: linear-gradient(135deg, rgba(84, 37, 68, .92), rgba(47, 22, 45, .92));
}
.share-copy-feedback > span {
  display: block;
  color: #ffb9ce;
  font-size: 12px;
  font-weight: 850;
}
.share-copy-feedback p {
  margin: 10px 0 7px;
  color: #fff7fb;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
  white-space: pre-wrap;
}
.share-copy-feedback small { color: #d7bbc9; font-size: 10px; line-height: 1.6; }
.video-scene {
  min-height: 100dvh;
  padding-top: 34px;
  padding-bottom: 56px;
}
.video-scene .flow-navigation { margin-bottom: 30px; }
.video-scene-intro {
  max-width: 700px;
  margin: 0 auto 22px;
  padding: 26px;
  border: 1px solid rgba(255, 171, 196, .26);
  border-radius: 20px;
  background: radial-gradient(circle at 90% 0%, rgba(247, 136, 172, .22), transparent 44%), linear-gradient(145deg, #351931, #211122 72%);
}
.video-scene-intro > span { color: #ffb9ce; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.video-scene-intro h2 { margin: 12px 0 8px; color: #fff7fb; font-size: clamp(31px, 4vw, 48px); line-height: 1.1; }
.video-scene-intro p { margin: 0; color: #d7bbc9; font-size: 13px; line-height: 1.7; }
.video-scene .video-studio { max-width: 700px; margin: 0 auto; }
@media (max-width: 720px) {
  main[data-app-page="home"] > .site-footer { margin-top: 42px; }
  .scene-preview .flow-navigation { margin-bottom: 28px; }
  .share-copy-feedback { padding: 16px; }
  .video-scene { width: calc(100% - 28px); padding-top: 24px; padding-bottom: 42px; }
  .video-scene .flow-navigation { margin-bottom: 22px; }
  .video-scene-intro { padding: 21px 19px; margin-bottom: 16px; border-radius: 18px; }
}

/* P36：品牌区始终与各功能卡片保持安全距离，不能只修首页。 */
main[data-app-page] > .site-footer {
  position: relative;
  clear: both;
  margin-top: 56px;
  padding-top: 16px;
}
@media (max-width: 720px) {
  main[data-app-page] > .site-footer {
    margin-top: 48px;
    padding-top: 14px;
  }
}


/* 独立账户页面：账户流程不再嵌在首页长页面或弹窗中。 */
body.account-route-active { min-height: 100vh; overflow-x: hidden !important; overflow-y: auto !important; background: #100814; }
body.account-route-active > main { display: block !important; min-height: 100vh; }
body.account-route-active > main > *:not(#account-modal):not(script):not(style) { display: none !important; }
body.account-route-active #account-modal.account-route-modal { position: relative; inset: auto; z-index: 1; display: flex !important; min-height: 100vh; padding: 48px 20px; box-sizing: border-box; overflow: visible; background: radial-gradient(circle at 50% 0%, rgba(121, 50, 96, .42), transparent 42%), #100814; }
body.account-route-active #account-modal.account-route-modal .account-dialog { width: min(100%, 560px); max-height: none; margin: auto; }
@media (max-width: 640px) {
  body.account-route-active #account-modal.account-route-modal { align-items: flex-start; padding: 18px 14px 32px; }
  body.account-route-active #account-modal.account-route-modal .account-dialog { margin: 0 auto; }
}


/* 已登录时，顶部入口展示账户头像与昵称。 */
.account-trigger.has-profile { gap: 8px; padding: 6px 12px 6px 7px; }
.account-trigger.has-profile .account-trigger-dot { display: none; }
.account-trigger-avatar { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 26px; overflow: hidden; place-items: center; border: 1px solid rgba(255, 222, 234, .78); border-radius: 50%; background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .44), transparent 38%), linear-gradient(145deg, #f59fbd, #df78a1); color: #fff0f6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.account-trigger-avatar.hidden { display: none; }
.account-trigger-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-trigger-avatar.is-empty-pet-avatar > img { display: none !important; }
.account-trigger-avatar .account-avatar-empty svg { width: 14px; height: 14px; filter: none; }
@media (max-width: 640px) {
  .account-trigger.has-profile { padding: 5px 9px 5px 6px; gap: 6px; }
  .account-trigger-avatar { width: 23px; height: 23px; flex-basis: 23px; }
}

/* 移动端档案页：顶部保留品牌与账户入口；资料主图和“添加参考照片”紧凑排布。 */
@media (max-width: 720px) {
  main[data-app-page="home"] .hero-copy {
    padding-left: 0;
    border-left: 0;
  }
  main[data-app-page="me"] .profile-avatar-wrap {
    grid-template-rows: auto auto;
    min-height: 0;
    align-content: start;
    align-self: start;
    gap: 12px;
  }
  main[data-app-page="me"] .profile-photo-button {
    grid-row: auto;
    margin: 0;
  }
  main[data-app-page="me"] .profile-fields input[type="date"] {
    display: block;
    box-sizing: border-box;
    inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    height: 44px;
    min-height: 44px;
    padding: 0 11px;
    font-family: var(--sans);
    /* 日期控件会沿用浏览器的较小默认字级；移动端明确提升到资料值的可读尺寸。 */
    font-size: 16px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    appearance: none;
  }
  main[data-app-page="me"] .profile-fields input[type="date"]::-webkit-datetime-edit,
  main[data-app-page="me"] .profile-fields input[type="date"]::-webkit-date-and-time-value {
    height: 42px;
    min-height: 42px;
    padding: 0;
    line-height: 42px;
    text-align: center;
  }
}

#profile-avatar[hidden] { display: none !important; }

/* 首页首屏 V2 候选：保留既有色调和双栏结构，只替换为实际创作示例与流程。 */
main[data-app-page="home"] .hero-copy .hero-index {
  margin-bottom: 17px;
  color: #ffb9ce;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}
main[data-app-page="home"] .hero h1 {
  max-width: 690px;
  font-size: clamp(38px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.065em;
}
main[data-app-page="home"] .home-entry-photo-note {
  margin: 15px 0 0;
  color: #d6afbf;
  font-size: 12px;
  line-height: 1.6;
}
main[data-app-page="home"] .home-entry-guide {
  display: block;
  padding: clamp(24px, 3vw, 34px);
}
main[data-app-page="home"] .home-entry-showcase > p {
  margin: 0 0 10px;
  color: #ffb9ce;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
}
main[data-app-page="home"] .home-entry-showcase figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 221, 233, .38);
  border-radius: 16px;
  background: #30203a;
}
main[data-app-page="home"] .home-entry-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main[data-app-page="home"] .home-entry-showcase figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 9px 13px;
  border-top-left-radius: 10px;
  color: #fff7fa;
  background: rgba(30, 16, 30, .82);
  font-size: 11px;
  font-weight: 750;
}
main[data-app-page="home"] .home-entry-guide h2 {
  margin: 23px 0 0;
  color: #fff8fa;
  font-size: clamp(25px, 2.1vw, 31px);
  line-height: 1.15;
  letter-spacing: -.05em;
}
main[data-app-page="home"] .home-entry-guide ol {
  gap: 13px;
  margin-top: 18px;
}
main[data-app-page="home"] .home-entry-guide li {
  grid-template-columns: 33px 1fr;
  gap: 11px;
}
main[data-app-page="home"] .home-entry-guide li > span {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  font-size: 10px;
}
main[data-app-page="home"] .home-entry-guide strong { font-size: 14px; }
main[data-app-page="home"] .home-entry-guide small { font-size: 11px; line-height: 1.55; }
@media (max-width: 720px) {
  main[data-app-page="home"] .hero h1 { font-size: clamp(34px, 9vw, 39px); }
  main[data-app-page="home"] .home-entry-showcase figure { aspect-ratio: 16 / 9; }
  main[data-app-page="home"] .home-entry-guide { padding: 22px; }
}

/* 首屏标题：移除首页装饰竖线；手机端统一标题层级与安全留白。 */
main[data-app-page="home"] .hero-copy { border-left: 0; }
@media (max-width: 720px) {
  main[data-app-page="home"] .hero {
    gap: 26px;
    padding: 38px 8px 58px;
  }
  main[data-app-page="home"] .hero-copy { padding: 0 2px; }
  main[data-app-page="home"] .hero h1 {
    max-width: 11.5ch;
    margin-bottom: 20px;
    font-size: clamp(40px, 10.7vw, 46px);
    line-height: 1.1;
    letter-spacing: -.06em;
    text-wrap: balance;
  }
  main[data-app-page="home"] .hero-copy > p:not(.hero-index) {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.75;
  }
  main[data-app-page="create"] #studio,
  main[data-app-page="me"] .profile,
  main[data-app-page="collection"] .collection,
  main[data-app-page="custom"] .custom-service,
  main[data-app-page="billing"] .billing {
    padding-inline: 8px;
  }
  main[data-app-page] .section-heading {
    gap: 12px;
    padding: 10px 2px 14px;
  }
  main[data-app-page] .section-heading h2 {
    max-width: 12ch;
    font-size: clamp(36px, 9.7vw, 42px);
    line-height: 1.12;
    letter-spacing: -.055em;
    text-wrap: balance;
  }
  main[data-app-page] .section-heading > p {
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.75;
  }
  main[data-app-page] .section-number {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  main[data-app-page] .scene-creator-head h2,
  main[data-app-page] .archive-head h2,
  main[data-app-page] .collection-heading h2,
  main[data-app-page] .video-scene-intro h2 {
    font-size: clamp(31px, 8.6vw, 38px);
    line-height: 1.14;
    letter-spacing: -.05em;
    text-wrap: balance;
  }
}

.account-name-wrap { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.account-name-wrap > span, .account-name-wrap > h2, .account-name-wrap > p { grid-column: 1; }
.account-name-actions { display: flex; grid-column: 2; grid-row: 1 / 4; align-self: center; gap: 8px; }
.account-display-name-toggle { min-height: 32px; padding: 0 11px; border: 1px solid #8d4869; border-radius: 8px; background: rgba(45, 15, 34, .52); color: #ffd7e5; font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.account-billing-link { display: inline-flex; align-items: center; text-decoration: none; }
.account-display-name-toggle:hover { border-color: #ec7eaa; background: rgba(110, 42, 76, .6); }
.account-display-name-form { display: grid; gap: 8px; margin: -7px 0 16px 73px; padding: 12px; border: 1px solid rgba(255, 211, 226, .16); border-radius: 11px; background: rgba(255, 255, 255, .04); }
.account-display-name-form.hidden { display: none; }
.account-display-name-form > label { color: #d7bbc9; font-size: 10px; font-weight: 850; }
.account-display-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.account-display-name-row input { min-width: 0; min-height: 38px; box-sizing: border-box; border: 1px solid #6c425d; border-radius: 8px; outline: none; padding: 0 11px; background: rgba(15, 7, 18, .44); color: #fff7fb; font: inherit; font-size: 11px; }
.account-display-name-row input:focus { border-color: #ef82ad; box-shadow: 0 0 0 3px rgba(233, 120, 157, .13); }
.account-display-name-row .button { min-height: 38px; padding: 0 12px; }

@media (max-width: 720px) {
  .account-name-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .account-name-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 4px; }
  .account-display-name-form { margin-left: 0; }
  .account-display-name-row { grid-template-columns: minmax(0, 1fr) repeat(2, auto); }
}

/* P39：失败作品不保留正常成品的空白右栏。 */
.result-card.is-failed {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}
.result-card.is-failed .result-content {
  grid-column: 1;
}
.result-card.is-failed .result-post {
  grid-template-columns: minmax(0, 1fr);
}
.result-card.is-failed .result-post .result-details,
.result-card.is-failed .result-post .result-review,
.result-card.is-failed .result-post .comparison-panel,
.result-card.is-failed .result-post .comparison-toggle,
.result-card.is-failed .result-post .version-manager {
  grid-column: 1;
  grid-row: auto;
}
.result-card.is-failed .result-post .version-manager { display: none; }

/* P39：横竖作品卡片各自按内容高度收拢；竖图必须保留完整画幅。 */
.archive-grid { align-items: start; }
.archive-work { align-self: start; }
.archive-work:not(.is-landscape) > .archive-work-media {
  height: auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
}
.archive-work.is-landscape > .archive-work-media { height: auto; }
.archive-work:not(.is-landscape) > .archive-work-media > img { object-fit: contain; }

@media (max-width: 720px) {
  .result-card.is-failed { grid-template-columns: minmax(0, 1fr); }
  .archive-work:not(.is-landscape) > .archive-work-media { height: auto; }
}

/* 首屏候选最终移动端覆盖：取消旧标题宽度上限，避免中文词组被拆断。 */
@media (max-width: 720px) {
  main[data-app-page="home"] .hero h1 {
    max-width: none;
    font-size: clamp(32px, 8.7vw, 34px);
    line-height: 1.13;
  }
}

/* 毛球星宇宙 V2 候选：对比示例与视频示例，仅用于本地候选版。 */
.brand-logo { display: block; flex: 0 0 38px; width: 38px !important; height: 38px !important; max-width: 38px !important; object-fit: contain; border-radius: 13px; transform: none; }
.home-proof { margin-top: 24px; padding: 68px 42px 48px; border: 1px solid rgba(255, 171, 196, .16); border-radius: 22px; background: linear-gradient(145deg, #32182f 0%, #29152b 58%, #211122 100%); }
.home-proof-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 32px; }
.home-proof-head h2 { max-width: 760px; margin: 0; color: #fff7fb; font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.065em; white-space: nowrap; }
.home-proof-title-line { display: inline; }
.home-proof-title-accent { color: #ffabc4; }
.home-proof-head > div > p { margin: 0 0 14px; color: #ffb9ce; font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.home-proof-head > p { max-width: 320px; margin: 0 0 4px; color: #d0b4c1; font-size: 14px; line-height: 1.8; }
.home-proof-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; }
.home-comparison-card, .home-video-card { min-width: 0; padding: 16px; border: 1px solid rgba(255, 214, 229, .15); border-radius: 16px; background: rgba(255, 255, 255, .045); }
.home-proof-media { overflow: hidden; border-radius: 12px; background: #170d1a; }
.home-proof-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; }
.home-proof-pair figure { position: relative; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 9px; background: #25152a; }
.home-proof-pair figure:first-of-type { aspect-ratio: 1 / 1; }
.home-proof-pair figure:last-of-type { aspect-ratio: 1 / 1; }
.home-proof-pair img { display: block; width: 100%; height: 100%; object-fit: cover; background: #25152a; }
.home-proof-pair figcaption { position: absolute; right: 7px; bottom: 7px; padding: 5px 7px; border-radius: 6px; color: #fff7fb; background: rgba(31, 14, 29, .82); font-size: 9px; font-weight: 800; }
.home-proof-arrow { color: #ffabc4; font-size: 22px; font-weight: 700; }
.home-proof-note { margin: 12px 2px 0; color: #d7bbc9; font-size: 11px; }
.home-video-card .home-proof-media { aspect-ratio: 16 / 9; }
.home-video-media { position: relative; }
.home-video-card video { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #0b070d; }
.home-video-fallback { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #0b070d; transition: opacity .2s ease; }
.home-video-media.is-video-ready .home-video-fallback { opacity: 0; visibility: hidden; }
.home-video-media.is-video-error video { visibility: hidden; }
.home-video-copy { display: grid; gap: 7px; padding: 14px 2px 1px; }
.home-video-copy span { color: #ffabc4; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.home-video-copy strong { color: #fff7fb; font-family: var(--serif); font-size: 24px; letter-spacing: -.05em; }
.home-video-copy p { margin: 0; color: #d0b4c1; font-size: 12px; line-height: 1.65; }
@media (max-width: 720px) {
  .home-proof { padding: 48px 18px 24px; }
  .home-proof-head { display: grid; gap: 14px; margin-bottom: 22px; }
  .home-proof-head h2 { max-width: none; font-size: clamp(20px, 5.3vw, 26px); line-height: 1.18; }
  .home-proof-head > p { max-width: 34ch; font-size: 13px; }
  .home-proof-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-proof-pair { gap: 6px; padding: 7px; }
  .home-proof-arrow { font-size: 17px; }
  .home-proof-pair figcaption { right: 4px; bottom: 4px; padding: 4px 5px; font-size: 8px; }
  .home-video-copy strong { font-size: 22px; }
}

/* 横版示例图高度收紧后，左栏改为顶部对齐，避免首屏上方产生无意义留白。 */
@media (min-width: 721px) {
  main[data-app-page="home"] .home-entry .hero-copy {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  main[data-app-page="home"] .home-entry {
    min-height: 0;
    padding-top: 58px;
    padding-bottom: 58px;
  }
}

/* 20260925 第一批核心链路候选：沿用首页的顶部对齐节奏，收紧字体并只用线条装饰。 */
main[data-app-page="me"] .profile,
main[data-app-page="create"] .studio {
  position: relative;
  isolation: isolate;
  padding-top: 66px;
  padding-bottom: 46px;
}
main[data-app-page="me"] .profile::before,
main[data-app-page="create"] .studio::before {
  position: absolute;
  top: 26px;
  right: 34px;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 171, 196, .15);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
main[data-app-page="me"] .profile::after,
main[data-app-page="create"] .studio::after {
  position: absolute;
  top: 54px;
  right: 72px;
  width: 42px;
  height: 42px;
  border: 1px dashed rgba(255, 171, 196, .20);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
main[data-app-page="me"] .profile > *,
main[data-app-page="create"] .studio > * { position: relative; z-index: 1; }
main[data-app-page="me"] .profile-heading,
main[data-app-page="create"] .studio > .section-heading {
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 30px;
}
main[data-app-page="me"] .profile-heading h2,
main[data-app-page="create"] .studio > .section-heading h2 {
  max-width: 15ch;
  font-size: clamp(34px, 3.5vw, 46px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
main[data-app-page="me"] .profile-heading h2 > span,
main[data-app-page="me"] .profile-heading h2 > em { display: block; }
main[data-app-page="me"] .profile-heading .section-number,
main[data-app-page="create"] .studio > .section-heading .section-number,
main[data-app-page="scene"] .scene-creator-head .step,
main[data-app-page="generate"] .scene-creator-head .step,
main[data-app-page="preview"] .scene-preview-head > span,
main[data-app-page="result"] .archive-head .section-number {
  margin: 0 0 8px;
  color: #ffabc4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
main[data-app-page="me"] .profile-heading > p,
main[data-app-page="create"] .studio > .section-heading > p {
  max-width: 340px;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.7;
}
main[data-app-page="me"] .profile-layout { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 14px; }
main[data-app-page="me"] .profile-card { padding: 24px; border-radius: 16px; }
main[data-app-page="me"] .profile-card-head { margin-bottom: 19px; }
main[data-app-page="me"] .profile-card h3 { font-size: 23px; letter-spacing: -.045em; }
main[data-app-page="me"] .profile-card-head .step,
main[data-app-page="me"] .profile-reference-photos-head span,
main[data-app-page="me"] .profile-care-note .step { font-size: 9px; letter-spacing: .1em; }
main[data-app-page="me"] .profile-empty { display: grid; gap: 7px; align-content: center; min-height: 170px; text-align: left; }
main[data-app-page="me"] .profile-empty-action { width: fit-content; margin-top: 3px; color: #ffabc4; font-size: 11px; font-weight: 850; text-decoration: none; }
main[data-app-page="me"] .profile-empty-action:hover { color: #fff7fb; text-decoration: underline; }

main[data-app-page="create"] .studio-layout { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); }
main[data-app-page="create"] .pet-panel,
main[data-app-page="create"] .scene-panel { padding: 28px; }
main[data-app-page="create"] .pet-panel h3,
main[data-app-page="create"] .scene-panel h3 { font-size: 26px; letter-spacing: -.045em; }
main[data-app-page="create"] .pet-panel > p:not(.upload-message),
main[data-app-page="create"] .scene-discovery-head p,
main[data-app-page="create"] .generation-controls-head > p { font-size: 12px; line-height: 1.65; }
main[data-app-page="create"] .scene-panel-head { margin-bottom: 21px; }
main[data-app-page="create"] .generation-controls { margin-top: 20px; padding-top: 20px; }
main[data-app-page="create"] .generation-controls h4 { font-family: var(--sans); font-size: 20px; letter-spacing: -.04em; }
main[data-app-page="create"] .generate-bar { margin-top: 14px; padding: 22px 26px; border-radius: 16px; }
main[data-app-page="create"] .generate-bar strong { font-size: 18px; letter-spacing: -.025em; }
main[data-app-page="create"] .generate-bar small { font-size: 11px; }

main[data-app-page="create"] .scene-showcase {
  position: relative;
  min-height: 242px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 171, 196, .32);
  border-radius: 18px;
  background: #32182f;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
}
main[data-app-page="create"] .scene-showcase::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(33, 17, 34, .72) 0%, rgba(33, 17, 34, .26) 44%, rgba(33, 17, 34, .05) 72%);
  pointer-events: none;
}
main[data-app-page="create"] .scene-showcase img {
  display: block;
  width: 100%;
  height: 242px;
  object-fit: cover;
  object-position: 38% 49%;
}
main[data-app-page="create"] .scene-showcase figcaption {
  position: absolute;
  z-index: 1;
  bottom: 22px;
  left: 24px;
  display: grid;
  gap: 5px;
  max-width: 340px;
  color: #fff7fb;
}
main[data-app-page="create"] .scene-showcase strong {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.025em;
}
main[data-app-page="create"] .scene-showcase small {
  color: #f4dce6;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.55;
}

main[data-app-page="scene"] .scene-creator,
main[data-app-page="generate"] .scene-creator { padding-top: 28px; padding-bottom: 40px; }
main[data-app-page="scene"] .scene-creator-head,
main[data-app-page="generate"] .scene-creator-head { gap: 8px; margin-bottom: 16px; }
main[data-app-page="scene"] .scene-creator-head h2,
main[data-app-page="generate"] .scene-creator-head h2 { font-size: clamp(30px, 3.3vw, 40px); letter-spacing: -.055em; }
main[data-app-page="scene"] .scene-creator-head p,
main[data-app-page="generate"] .scene-creator-head p { max-width: 460px; font-size: 13px; }
main[data-app-page="scene"] .scene-creator-card,
main[data-app-page="generate"] .scene-creator-card { border-radius: 16px; }
main[data-app-page="scene"] .scene-creator-copy,
main[data-app-page="generate"] .scene-creator-copy { align-content: start; padding: 25px; }
main[data-app-page="scene"] .scene-creator-copy strong,
main[data-app-page="generate"] .scene-creator-copy strong { font-size: 28px; letter-spacing: -.05em; }
main[data-app-page="scene"] .scene-creator-copy p,
main[data-app-page="generate"] .scene-creator-copy p { font-size: 14px; }
.scene-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}
.scene-confirm-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 171, 196, .20);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.scene-confirm-summary dt { color: #bd9eaf; font-size: 9px; font-weight: 800; }
.scene-confirm-summary dd { margin: 5px 0 0; color: #fff0f5; font-size: 12px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
main[data-app-page="preview"] .scene-preview { position: relative; padding-top: 28px; padding-bottom: 42px; }
main[data-app-page="preview"] .scene-preview::before {
  position: absolute;
  top: 76px;
  left: calc(50% - 390px);
  width: 86px;
  height: 86px;
  border: 1px dashed rgba(255, 171, 196, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
main[data-app-page="preview"] .scene-preview > * { position: relative; z-index: 1; }
.scene-preview-head { display: grid; gap: 5px; max-width: 520px; margin: 18px auto 18px; text-align: center; }
.scene-preview-head h2 { margin: 0; color: #fff7fb; font-size: clamp(27px, 3vw, 36px); font-weight: 900; letter-spacing: -.055em; }
.scene-preview-head p { margin: 0; color: #c7a8b7; font-size: 12px; font-weight: 620; line-height: 1.6; }

main[data-app-page="result"] .archive { position: relative; padding-top: 70px; padding-bottom: 76px; overflow: hidden; }
main[data-app-page="result"] .archive::before {
  position: absolute;
  top: 30px;
  right: 7vw;
  width: 138px;
  height: 138px;
  border: 1px dashed rgba(255, 171, 196, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
main[data-app-page="result"] .archive > .shell { position: relative; z-index: 1; }
main[data-app-page="result"] .archive-head { align-items: flex-start; margin-bottom: 22px; }
main[data-app-page="result"] .archive-head h2 { font-size: clamp(33px, 3.5vw, 45px); line-height: 1.12; letter-spacing: -.055em; }
main[data-app-page="result"] .archive-status { padding-top: 4px; font-size: 11px; }
main[data-app-page="result"] .task-center { padding: 15px; margin-bottom: 14px; }
main[data-app-page="result"] .task-center-head strong { font-size: 15px; }
main[data-app-page="result"] .task-center-head p { font-size: 11px; }
main[data-app-page="result"] .result-content { padding: 30px 28px; }
main[data-app-page="result"] .result-content h3 { font-size: clamp(26px, 2.7vw, 35px); letter-spacing: -.05em; }
main[data-app-page="result"] .result-content > p { font-size: 13px; line-height: 1.7; }
main[data-app-page="result"] .archive-empty { max-width: 620px; padding: 34px; border-radius: 16px; }
main[data-app-page="result"] .archive-empty h3 { font-size: 24px; letter-spacing: -.04em; }

@media (max-width: 720px) {
  main[data-app-page="me"] .profile,
  main[data-app-page="create"] .studio { padding: 42px 18px 30px; }
  main[data-app-page="me"] .profile::before,
  main[data-app-page="create"] .studio::before { top: 14px; right: 16px; width: 66px; height: 66px; }
  main[data-app-page="me"] .profile::after,
  main[data-app-page="create"] .studio::after { top: 30px; right: 38px; width: 25px; height: 25px; }
  main[data-app-page="me"] .profile-heading,
  main[data-app-page="create"] .studio > .section-heading { display: grid; gap: 11px; margin-bottom: 23px; }
  main[data-app-page="me"] .profile-heading h2,
  main[data-app-page="create"] .studio > .section-heading h2 { font-size: 31px; }
  main[data-app-page="me"] .profile-heading > p,
  main[data-app-page="create"] .studio > .section-heading > p { max-width: 34ch; margin: 0; font-size: 12px; }
  main[data-app-page="me"] .profile-layout,
  main[data-app-page="create"] .studio-layout { grid-template-columns: 1fr; }
  main[data-app-page="me"] .profile-card,
  main[data-app-page="create"] .pet-panel,
  main[data-app-page="create"] .scene-panel { padding: 20px; }
  main[data-app-page="create"] .scene-showcase { min-height: 174px; margin-bottom: 14px; border-radius: 15px; }
  main[data-app-page="create"] .scene-showcase img { height: 174px; object-position: 37% 50%; }
  main[data-app-page="create"] .scene-showcase figcaption { right: 16px; bottom: 15px; left: 16px; max-width: 290px; }
  main[data-app-page="create"] .scene-showcase strong { font-size: 14px; }
  main[data-app-page="create"] .scene-showcase small { font-size: 10px; }
  main[data-app-page="create"] .generate-bar { padding: 20px; }
  main[data-app-page="scene"] .scene-creator,
  main[data-app-page="generate"] .scene-creator { padding: 24px 17px 34px; }
  main[data-app-page="scene"] .scene-creator-head h2,
  main[data-app-page="generate"] .scene-creator-head h2 { font-size: 29px; }
  .scene-confirm-summary { grid-template-columns: 1fr; }
  main[data-app-page="preview"] .scene-preview { padding: 23px 17px 34px; }
  main[data-app-page="preview"] .scene-preview::before { display: none; }
  .scene-preview-head { margin-top: 15px; }
  .scene-preview-head h2 { font-size: 28px; }
  main[data-app-page="result"] .archive { padding-top: 42px; padding-bottom: 50px; }
  main[data-app-page="result"] .archive::before { top: 14px; right: 18px; width: 74px; height: 74px; }
  main[data-app-page="result"] .archive-head { display: grid; gap: 8px; margin-bottom: 18px; }
  main[data-app-page="result"] .archive-head h2 { font-size: 31px; }
  main[data-app-page="result"] .result-content { padding: 24px 20px; }
}

/* 第一批情绪化去模板：关系信息来自已保存资料与当前选择，不虚构故事。 */
main[data-app-page="create"] .scene-departure {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0 0 12px;
  margin: 13px 0 0;
  border-left: 1px solid rgba(255, 171, 196, .50);
  color: #f2dce5;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.45;
}
main[data-app-page="create"] .scene-index { display: none; }
main[data-app-page="create"] .scene-copy small { color: #e7a4bc; font-size: 9px; letter-spacing: .05em; }
main[data-app-page="scene"] .scene-selection-note {
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 171, 196, .48);
  color: #e7a4bc;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.45;
}
main[data-app-page="generate"] .scene-confirm-story {
  padding-left: 11px;
  margin: 12px 0 0;
  border-left: 1px solid rgba(255, 171, 196, .48);
  color: #e7a4bc;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.5;
}
main[data-app-page="result"] .result-relation {
  padding-left: 11px;
  margin: 13px 0 0;
  border-left: 1px solid rgba(255, 171, 196, .48);
  color: #e8c8d5;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.6;
}
@media (max-width: 720px) {
  main[data-app-page="create"] .scene-departure { margin-top: 11px; font-size: 10px; }
  main[data-app-page="scene"] .scene-selection-note,
  main[data-app-page="generate"] .scene-confirm-story,
  main[data-app-page="result"] .result-relation { font-size: 10px; }
}

/* 全站主标题统一：沿用首页首屏的紧凑字号、字重和行距；不改变色调与审核事实文案。 */
main[data-app-page] .section-heading h2,
main[data-app-page] .scene-creator-head h2,
main[data-app-page] .scene-preview-head h2,
main[data-app-page] .archive-head h2,
main[data-app-page] .collection-heading h2,
main[data-app-page] .video-scene-intro h2,
main[data-app-page] .worlds h2,
main[data-app-page] .tips h2,
main[data-app-page] .closing h2,
main[data-app-page] .custom-heading h2,
main[data-app-page] .billing-heading h2,
main[data-app-page] .legal-page-head h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 2.7vw, 38px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.06em;
}

main[data-app-page="collection"] .collection-heading h2 span,
main[data-app-page="collection"] .collection-heading h2 em {
  display: block;
}
main[data-app-page="collection"] .collection-heading h2 em {
  margin-top: 2px;
  color: var(--coral);
}

main[data-app-page] .section-heading,
main[data-app-page] .worlds-head,
main[data-app-page] .archive-head { align-items: flex-start; }

main[data-app-page="me"] .profile-heading h2 {
  display: grid;
  justify-items: start;
  gap: 0;
  text-align: left;
}
main[data-app-page="me"] .profile-heading h2 > span,
main[data-app-page="me"] .profile-heading h2 > em {
  display: block;
  width: 100%;
  margin: 0;
}
main[data-app-page="me"] .profile-heading h2 > em {
  color: var(--coral);
}

@media (max-width: 720px) {
  main[data-app-page] .section-heading h2,
  main[data-app-page] .scene-creator-head h2,
  main[data-app-page] .scene-preview-head h2,
  main[data-app-page] .archive-head h2,
  main[data-app-page] .collection-heading h2,
  main[data-app-page] .video-scene-intro h2,
  main[data-app-page] .worlds h2,
  main[data-app-page] .tips h2,
  main[data-app-page] .closing h2,
  main[data-app-page] .custom-heading h2,
  main[data-app-page] .billing-heading h2,
  main[data-app-page] .legal-page-head h2 {
    font-size: clamp(28px, 7.6vw, 32px);
    line-height: 1.14;
  }
}

/* 左下角只补充开始前需要准备的信息，不重复右侧三步流程，也不追加装饰元素。 */
main[data-app-page="home"] .home-entry-prep {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 185, 206, .22);
}
main[data-app-page="home"] .home-entry-prep > p {
  margin: 0 0 10px;
  color: #ffb9ce;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}
main[data-app-page="home"] .home-entry-prep > .home-entry-prep-detail {
  margin: -3px 0 12px;
  color: #dec6d1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}
main[data-app-page="home"] .home-entry-prep ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: #dec6d1;
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}
main[data-app-page="home"] .home-entry-prep li::before {
  margin-right: 8px;
  color: #ff9fbe;
  content: "✓";
}
@media (min-width: 721px) {
  main[data-app-page="home"] .home-entry-prep { margin-top: auto; }
}

/* H5 V2 P1：暗画廊品牌基线与首页主路径。 */
:root {
  --ink: #F6F0F2;
  --ink-soft: #C8BEC9;
  --line: #49374B;
  --paper: #241A28;
  --canvas: #151019;
  --sand: #2D2031;
  --lavender: #211824;
  --coral: #A75F7C;
  --coral-deep: #BC708F;
  --violet: #6F506F;
  --dark: #151019;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body { color: var(--ink); background: var(--canvas); }
.shell { width: min(1200px, calc(100% - 48px)); }
.brand strong,
.hero h1, .section-heading h2, .archive-head h2, .worlds h2, .tips h2, .closing h2,
  .pet-panel h3, .scene-panel h3, .scene-stage strong, .scene-copy strong,
.generate-bar strong, .result-content h3, .video-studio-head strong, .world-card strong,
.tips strong, .home-proof-head h2, .home-video-copy strong {
  font-family: var(--serif);
}
.brand-logo-small { width: 29px !important; height: 29px !important; flex-basis: 29px; }
.hero h1 { max-width: 640px; font-size: clamp(48px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.06em; }
.hero-copy > p:not(.hero-index) { max-width: 560px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
main[data-app-page="home"] .hero h1 { max-width: 640px; font-size: clamp(48px, 4.4vw, 56px); }
main[data-app-page="home"] .hero-copy .hero-index { color: var(--brand-blush, #E7B8C8); font-size: 12px; letter-spacing: .16em; }
main[data-app-page="home"] .home-entry-showcase figure { aspect-ratio: 1 / 1; }
main[data-app-page="home"] > .closing { display: block !important; animation: mobile-page-enter .2s ease-out both; }
main[data-app-page="faq"] > #faq { display: block !important; animation: mobile-page-enter .2s ease-out both; }
main[data-app-page="home"] .section-number { letter-spacing: .14em; }
.home-proof-head h2 { font-weight: 600; }

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 560px); }
  main[data-app-page="home"] .hero h1 { max-width: 100%; font-size: clamp(34px, 9vw, 40px); line-height: 1.12; }
  main[data-app-page="home"] .hero-copy > p:not(.hero-index) { font-size: 16px; line-height: 1.78; }
  main[data-app-page="home"] .home-entry-showcase figure { aspect-ratio: 1 / 1; }
  main[data-app-page="home"] > .closing { display: block !important; }
}