/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: dark;
  --bg: #090a0d;
  --text: #fffaf2;
  --muted: rgba(255, 250, 242, 0.72);
  --line: rgba(255, 255, 255, 0.34);
  --accent: #ffbf69;
  --choice: rgba(6, 8, 12, 0.42);
  --choice-active: rgba(255, 191, 105, 0.24);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #0a0b0f;
  color: var(--text);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* System font stacks per interface language; no webfonts are loaded. */
html:lang(ja) body { font-family: Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif; }
html:lang(ko) body { font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; }
html:lang(zh-Hant) body { font-family: Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif; }
html:lang(ar) body { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif; }
html:lang(ru) body { font-family: Arial, "Segoe UI", Roboto, "Noto Sans", sans-serif; }

/* Right-to-left interfaces: text layers flip, the phone stage does not. The
   sprite, the emoji bursts and the draggable status box are positioned in
   pixels inside an LTR canvas, so they keep their own direction; only the
   layers that carry text read right to left. */
[dir="rtl"] .phone,
[dir="rtl"] .v3CharacterLayer,
[dir="rtl"] .v3EmojiLayer,
[dir="rtl"] .v3CharacterStatus,
[dir="rtl"] .coverTileVisual {
  direction: ltr;
}
[dir="rtl"] .v3DialogueLayer,
[dir="rtl"] .v3InteractionLayer,
[dir="rtl"] .v3SceneCard,
[dir="rtl"] .v3TurnError,
[dir="rtl"] .coverTileCaption,
[dir="rtl"] .landingSheet,
[dir="rtl"] .landingAccountMenu,
[dir="rtl"] .storyLibrary,
[dir="rtl"] .createShell {
  direction: rtl;
  text-align: start;
}
[dir="rtl"] .v3Bubble.lead { -webkit-margin-end: auto; margin-inline-end: auto; }
[dir="rtl"] .v3Bubble.player { -webkit-margin-start: auto; margin-inline-start: auto; }

button {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    linear-gradient(120deg, rgba(255, 191, 105, 0.12), transparent 34%),
    linear-gradient(240deg, rgba(93, 214, 194, 0.11), transparent 32%),
    var(--bg);
}

.phone {
  position: relative;
  width: min(100%, 430px);
  height: min(calc(100svh - 40px), 932px);
  min-height: 620px;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: #050609;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.52);
  isolation: isolate;
}

.phone.continueAnywhere {
  cursor: pointer;
}

.continueSurface {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.continueSurface:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.92);
  outline-offset: -3px;
}

.phone.continueAnywhere .storyPanel {
  pointer-events: none;
}

.prologueShell {
  background: #000;
}

.prologuePhone {
  background: #000;
}

.prologueView {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: max(42px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  overflow-y: auto;
  background: #000;
}

.prologueBackgroundImage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.prologueView.hasBackgroundImage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 28%, rgba(0, 0, 0, 0.86) 68%, rgba(0, 0, 0, 0.98) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34));
}

.prologueView.hasBackgroundImage {
  justify-content: flex-end;
  background: #000;
}

.prologueView.hasBackgroundImage .prologueCopy,
.prologueView.hasBackgroundImage > button {
  position: relative;
  z-index: 2;
}

.prologueCopy {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.prologueCopy > span {
  color: rgba(255, 191, 105, 0.82);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.prologueCopy p {
  margin: 0;
  color: rgba(255, 250, 242, 0.92);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.85;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.prologueView > button {
  width: 100%;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: transparent;
  color: #fffaf2;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.prologueView > button:hover,
.prologueView > button:focus-visible {
  border-color: rgba(255, 191, 105, 0.9);
  background: rgba(255, 191, 105, 0.1);
  outline: none;
}

.visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #050609;
}

.visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.visualMissing {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 34px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10, 18, 22, 0.92), rgba(5, 6, 9, 0.98)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px);
}

.visualMissing span {
  color: #78f1df;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.visualMissing strong {
  max-width: 260px;
  color: #fffaf2;
  font-size: 20px;
  line-height: 1.25;
}

.visualMissing p {
  max-width: 280px;
  margin: 0;
  color: rgba(255, 250, 242, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.visualMissing pre {
  width: min(86%, 330px);
  max-height: 220px;
  margin: 4px 0 0;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(120, 241, 223, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 250, 242, 0.78);
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
}

.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.58), transparent 36%);
  pointer-events: none;
}

.topBar {
  position: absolute;
  z-index: 4;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.topBarGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.staleBadge {
  position: absolute;
  z-index: 4;
  top: calc(max(14px, env(safe-area-inset-top)) + 50px);
  right: 14px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 191, 105, 0.72);
  border-radius: 999px;
  background: rgba(45, 25, 4, 0.78);
  color: #ffd39a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: none;
}

.iconButton {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.44);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.iconButton:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.92);
  outline-offset: 2px;
}

.storyPanel {
  position: absolute;
  z-index: 3;
  top: auto;
  left: 20px;
  right: 20px;
  bottom: max(24px, 12%);
  height: min(34%, 320px);
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 12px;
  overflow: hidden;
  padding: 4px 2px;
  background: transparent;
  transform: none;
}

.storyContent {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.storyContent > :first-child {
  margin-top: auto;
}

.storyContent::-webkit-scrollbar {
  display: none;
}

.sceneObservation {
  align-self: stretch;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(93, 214, 194, 0.92);
  background: linear-gradient(90deg, rgba(6, 8, 12, 0.58), rgba(6, 8, 12, 0.18));
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 2px #000;
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.sceneObservation p {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.sceneObservation p {
  font-size: 16px;
  line-height: 1.5;
}

.sceneObservation p + p {
  margin-top: 5px;
}

.decisionContext {
  flex: 0 0 auto;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.dialogues {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}

.dialogue {
  min-width: 0;
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.96),
    1px -1px 0 rgba(0, 0, 0, 0.96),
    -1px 1px 0 rgba(0, 0, 0, 0.96),
    1px 1px 0 rgba(0, 0, 0, 0.96),
    0 4px 12px rgba(0, 0, 0, 0.98);
}

.dialogue strong {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 5px;
  padding-left: 8px;
  border-left: 3px solid var(--character-color, var(--accent));
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}

.speakerName {
  color: var(--character-color, #fff);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--character-color, #fff) 58%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 0 2px #000;
}

.dialogue p {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.dialogue.sceneIntro {
  padding: 12px 14px;
  border-left: 3px solid rgba(255, 191, 105, 0.92);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(90deg, rgba(6, 8, 12, 0.72), rgba(6, 8, 12, 0.3));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dialogue.sceneIntro p {
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.characterNameHighlight {
  color: var(--character-color, var(--accent));
  font-weight: 900;
  text-shadow:
    0 0 9px color-mix(in srgb, var(--character-color, var(--accent)) 62%, transparent),
    -1px -1px 0 rgba(0, 0, 0, 0.96),
    1px -1px 0 rgba(0, 0, 0, 0.96),
    -1px 1px 0 rgba(0, 0, 0, 0.96),
    1px 1px 0 rgba(0, 0, 0, 0.96);
}

.choices {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.choices button,
.endingView button {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--choice);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 2px #000;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.choices button:focus-visible,
.choices button:hover {
  outline: 2px solid rgba(255, 191, 105, 0.95);
  outline-offset: 2px;
  background: var(--choice-active);
}

.choiceText {
  display: block;
  max-width: 100%;
  color: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.endingView {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.endingBadge {
  display: inline-flex;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--accent);
  font-size: 13px;
}

h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: 0;
}

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

@media (max-width: 520px) {
  .shell {
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .storyPanel {
    left: 20px;
    right: 20px;
    bottom: max(24px, 12%);
    height: min(36%, 340px);
  }
}

@media (max-height: 760px) {
  .prologueView {
    justify-content: flex-start;
  }

  .prologueCopy p {
    font-size: 15px;
    line-height: 1.7;
  }

  .storyPanel {
    height: 38%;
    gap: 10px;
  }

  .dialogue p {
    font-size: 16px;
    line-height: 1.45;
  }

  .choices {
    gap: 7px;
  }

  .choices button {
    min-height: 48px;
    padding: 10px 14px;
  }

  .choiceText {
    font-size: 15px;
  }
}

@media (max-height: 640px) {
  .storyPanel {
    bottom: max(12px, 8%);
    height: 46%;
  }
}

.createShell {
  min-height: 100svh;
  padding: 28px;
  background:
    linear-gradient(120deg, rgba(255, 191, 105, 0.09), transparent 28%),
    linear-gradient(240deg, rgba(93, 214, 194, 0.09), transparent 26%),
    #090a0d;
}

.createHeader {
  width: min(1280px, 100%);
  margin: 0 auto 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.createHeader h1,
.stageHeading h2,
.plotDetail h3 {
  margin: 0;
  letter-spacing: 0;
}

.createHeader h1 {
  font-size: 34px;
  line-height: 1.08;
}

.createIconButton,
.toolButton,
.segmentControl button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.createIconButton {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.createLayout {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.stepRail {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  padding: 4px 0;
  background: linear-gradient(180deg, rgba(21, 24, 22, 0.98), rgba(21, 24, 22, 0.82));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.stageActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.createIconButton.small {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
}

.stepItem {
  min-height: 50px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 250, 242, 0.68);
  background: rgba(255, 255, 255, 0.04);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.stepItem:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.stepItem.ready {
  color: #fff;
  border-color: rgba(93, 214, 194, 0.46);
  background: rgba(93, 214, 194, 0.1);
}

.stepItem.active {
  color: #fff;
  border-color: rgba(255, 191, 105, 0.86);
  background: rgba(255, 191, 105, 0.14);
  box-shadow: inset 0 -2px 0 rgba(255, 191, 105, 0.78);
}

.stepItem.ready.active {
  border-color: rgba(93, 214, 194, 0.85);
  background: rgba(93, 214, 194, 0.16);
  box-shadow: inset 0 -2px 0 rgba(93, 214, 194, 0.82);
}

.stepIcon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}

.createMain {
  min-width: 0;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.stageBand {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.stageHeading {
  min-width: 0;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stageHeading .stageNote {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.7;
}

.stageHeading h2 {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.2;
}

.stageIndex {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.toolButton {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
}

.toolButton:disabled,
.createIconButton:disabled,
.segmentControl button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

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

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

.storySampleList.withTopGap {
  margin-top: 12px;
}

.storySampleEditor {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(6, 8, 12, 0.42);
}

.storySampleEditor.selected {
  border-color: rgba(255, 191, 105, 0.8);
  background: rgba(255, 191, 105, 0.08);
}

.storySampleHeader,
.storySampleHeader > div,
.storySampleActions {
  display: flex;
  align-items: center;
}

.storySampleHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.storySampleHeader > div,
.storySampleActions {
  gap: 8px;
}

.storySampleHeader strong {
  font-size: 15px;
}

.storySampleHeader span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 191, 105, 0.15);
  color: #ffbf69;
  font-size: 11px;
  font-weight: 900;
}

.storySampleEditor textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  max-height: 65vh;
  resize: vertical;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  outline: none;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 250, 242, 0.9);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
}

.storySampleEditor textarea:focus {
  border-color: rgba(56, 189, 176, 0.78);
  box-shadow: 0 0 0 2px rgba(56, 189, 176, 0.12);
}

.plotCard {
  min-width: 0;
  min-height: 154px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(6, 8, 12, 0.42);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.plotCard.selected {
  border-color: rgba(255, 191, 105, 0.8);
  background: rgba(255, 191, 105, 0.12);
}

.plotCard span,
.fileStatus span,
.jsonEditor span {
  color: rgba(255, 250, 242, 0.64);
  font-size: 12px;
  font-weight: 800;
}

.plotCard strong {
  display: block;
  margin: 8px 0;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.plotCard p,
.plotDetail p {
  margin: 0;
  color: rgba(255, 250, 242, 0.74);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.plotDetail {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.plotDetail.withTopGap {
  margin-top: 12px;
}

.plotDetail h3 {
  font-size: 17px;
  line-height: 1.25;
}

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

.plotActGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.plotAct {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.plotAct span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.plotAct p {
  margin-top: 7px;
}

.beatList span {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 250, 242, 0.78);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.editorTools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.segmentControl {
  min-height: 36px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.18);
}

.segmentControl button {
  min-width: 64px;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.segmentControl button.active {
  background: rgba(93, 214, 194, 0.18);
}

.jsonEditor {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.jsonEditor span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.jsonEditor textarea {
  width: 100%;
  height: 420px;
  resize: vertical;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: #fff;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  outline: none;
}

.jsonEditor textarea:focus {
  border-color: rgba(255, 191, 105, 0.78);
}

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

.checkStageBand {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.checkStatusStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkPhaseBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.checkPhaseStep {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.checkPhaseStep + .checkPhaseStep::before {
  margin-right: 4px;
  color: var(--line);
  content: "→";
}

.checkPhaseStep .checkPhaseDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px;
}

.checkPhaseStep.done {
  color: #75e6c8;
}

.checkPhaseStep.done .checkPhaseDot {
  border-color: rgba(76, 214, 180, 0.5);
}

.checkPhaseStep.active {
  border-color: rgba(255, 191, 105, 0.6);
  background: rgba(255, 191, 105, 0.1);
  color: #ffbf69;
}

.checkPhaseStep.active .checkPhaseDot {
  border-color: rgba(255, 191, 105, 0.7);
}

.checkPhaseDetail {
  color: var(--muted);
  font-family: var(--font-mono), monospace;
  font-size: 11px;
}

.checkPhaseBar.idle .checkPhaseStep.active {
  border-color: rgba(76, 214, 180, 0.42);
  background: rgba(76, 214, 180, 0.1);
  color: #75e6c8;
}

/* Shared step bar: every LLM-backed action renders one of these. */
.storyPhaseBar {
  margin-bottom: 12px;
}

.checkPhaseBar.failed {
  border-color: rgba(255, 108, 108, 0.55);
  background: rgba(255, 79, 79, 0.08);
}

.checkPhaseBar.failed .checkPhaseStep.active {
  border-color: rgba(255, 108, 108, 0.6);
  background: rgba(255, 79, 79, 0.12);
  color: #ff9f9f;
}

.checkPhaseBar.failed .checkPhaseStep.active .checkPhaseDot {
  border-color: rgba(255, 108, 108, 0.7);
}

.checkPhaseBar.failed .checkPhaseDetail {
  color: #ffd1d1;
  overflow-wrap: anywhere;
}

.storyPhaseRetry {
  min-height: 32px;
  margin-left: auto;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.checkRunSummary {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.26);
}

.checkRunSummary header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.checkRunSummary header div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.checkRunSummary header span {
  color: var(--muted);
  font-size: 12px;
}

.checkRunSummary .runVerdict {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}

.checkRunSummary .runVerdict.pass,
.checkRunSummary td.pass {
  border-color: rgba(76, 214, 180, 0.42);
  color: #75e6c8;
}

.checkRunSummary .runVerdict.warn,
.checkRunSummary td.warn {
  border-color: rgba(242, 191, 114, 0.42);
  color: #f2bf72;
}

.checkRunSummary .runVerdict.fail,
.checkRunSummary td.fail {
  border-color: rgba(240, 128, 128, 0.42);
  color: #f08080;
}

.checkRunMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.checkRunMetric {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.checkRunMetric span {
  color: var(--muted);
  font-size: 12px;
}

.checkRunMetric strong {
  font-size: 20px;
  line-height: 1.2;
}

.checkRunMetric em {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.checkRunAssessment {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.checkRunNodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.checkRunNodes span {
  color: var(--muted);
}

.checkRunNodes code {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono), monospace;
}

.checkRunSkipped {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(242, 191, 114, 0.36);
  border-radius: 10px;
  background: rgba(242, 191, 114, 0.08);
}

.checkRunSkipped strong {
  color: #f2bf72;
  font-size: 13px;
}

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

.checkRunSkipped li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.checkRunSkipped code {
  font-family: var(--font-mono), monospace;
}

.checkRunSkipped span {
  color: var(--muted);
}

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

.checkRunRounds li {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
}

.checkRunRoundHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkRunRoundHeader span:first-child {
  color: inherit;
  font-family: var(--font-mono), monospace;
}

.checkRunRoundAssessment {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.checkRunHistory summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.checkRunHistory table {
  width: 100%;
  margin-top: 9px;
  border-collapse: collapse;
  font-size: 12px;
}

.checkRunHistory th,
.checkRunHistory td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.checkRunHistory th {
  color: var(--muted);
  font-weight: 500;
}

.pendingUnifiedDiff {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(76, 214, 180, 0.32);
  border-radius: 12px;
  background: rgba(9, 20, 19, 0.72);
}

.pendingUnifiedDiff header div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.pendingUnifiedDiff header strong {
  color: #75e6c8;
}

.pendingUnifiedDiff header span,
.pendingUnifiedDiff summary {
  color: var(--muted);
  font-size: 12px;
}

.pendingUnifiedDiffWarnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #f2bf72;
  font-size: 12px;
}

.pendingUnifiedDiff details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.26);
}

.pendingUnifiedDiff summary {
  padding: 9px 11px;
  cursor: pointer;
  font-family: var(--font-mono), monospace;
}

.pendingUnifiedDiff pre {
  max-height: 360px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-top: 1px solid var(--line);
  color: #d7e5e1;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre;
}

.statusPill {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 250, 242, 0.72);
}

.statusPill.ready {
  border-color: rgba(93, 214, 194, 0.5);
  background: rgba(93, 214, 194, 0.1);
  color: #fffaf2;
}

.statusPill span {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 250, 242, 0.62);
}

.statusPill strong {
  font-size: 12px;
  font-weight: 900;
  color: #fffaf2;
}

.assetSummary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

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

.assetActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.sceneGenerateAction {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(93, 214, 194, 0.34);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.08);
}

.sceneGenerateButtons {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.sceneImageModelSelect {
  min-width: 220px;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.sceneImageModelSelect > span {
  color: rgba(255, 250, 242, 0.82);
  font-size: 11px;
  font-weight: 800;
}

.sceneImageModelSelect select {
  min-height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(93, 214, 194, 0.42);
  border-radius: 7px;
  background: rgba(2, 8, 10, 0.72);
  color: #fff;
  font: inherit;
}

.sceneImageModelSelect small {
  color: rgba(255, 250, 242, 0.52);
  font-size: 10px;
  line-height: 1.35;
}

.sceneGenerateAction .toolButton.primary {
  flex: 0 0 auto;
  border-color: rgba(93, 214, 194, 0.62);
  background: rgba(93, 214, 194, 0.16);
  color: #fff;
}

.sceneGenerateAction > span {
  color: rgba(255, 250, 242, 0.66);
  font-size: 12px;
  line-height: 1.45;
}

.characterRefs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}

.characterRefsIntro {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(240, 179, 90, 0.36);
  border-radius: 8px;
  background: rgba(240, 179, 90, 0.08);
}

.characterRefsIntro strong {
  color: #fffaf2;
  font-size: 13px;
}

.characterRefsIntro span {
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
}

.characterRef {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.characterRef.ready {
  border-color: rgba(93, 214, 194, 0.55);
}

.characterRefPrompt {
  display: block;
  min-width: 0;
  padding: 10px 10px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.characterRefPrompt label {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 250, 242, 0.58);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.characterRefPrompt textarea {
  width: 100%;
  min-height: 88px;
  padding: 8px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  outline: none;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 250, 242, 0.82);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
}

.characterRefPrompt textarea:focus {
  border-color: rgba(93, 214, 194, 0.72);
  box-shadow: 0 0 0 2px rgba(93, 214, 194, 0.12);
}

.characterRefPromptActions {
  min-height: 34px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.characterRefPromptActions small {
  color: rgba(255, 250, 242, 0.5);
  font-size: 10px;
}

.toolButton.compact {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

.characterRef img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}

.characterRefEmptyUpload {
  width: 100%;
  min-height: 240px;
  padding: 24px;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(93, 214, 194, 0.07);
  color: #5dd6c2;
  cursor: pointer;
}

.characterRefEmptyUpload:hover:not(:disabled),
.characterRefEmptyUpload:focus-visible {
  background: rgba(93, 214, 194, 0.13);
  outline: 2px solid rgba(93, 214, 194, 0.65);
  outline-offset: -2px;
}

.characterRefEmptyUpload strong {
  color: #fffaf2;
  font-size: 15px;
}

.characterRefEmptyUpload span {
  color: rgba(255, 250, 242, 0.6);
  font-size: 12px;
}

.characterRefEmptyUpload.static {
  cursor: default;
}

.characterRefMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 10px;
}

.characterRefMeta span,
.characterRefMeta strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
}

.characterRefMeta span {
  overflow: hidden;
  color: rgba(255, 250, 242, 0.78);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characterRefMeta strong {
  color: #fff;
}

.characterRefMeta > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.characterRefMeta .characterUploadButton {
  width: auto;
  min-height: 44px;
  white-space: nowrap;
}

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

.assetMeter {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.assetMeter > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assetMeter span {
  color: rgba(255, 250, 242, 0.64);
  font-size: 12px;
  font-weight: 900;
}

.assetMeter strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.assetProgressTrack {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.assetProgressTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5dd6c2, #ffbf69);
  transition: width 220ms ease;
}

.sceneGenerationPanel {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.sceneGenerationHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sceneGenerationHeader span {
  display: block;
  margin-bottom: 2px;
  color: #5dd6c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sceneGenerationHeader h3 {
  margin: 0;
  font-size: 15px;
}

.sceneGenerationHeader > strong {
  color: #fff;
  font-size: 13px;
}

.sceneGenerationRows {
  max-height: 520px;
  overflow-y: auto;
}

.sceneGenerationRow {
  width: 100%;
  min-height: 62px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  background: transparent;
  color: rgba(255, 250, 242, 0.82);
}

.sceneGenerationPrompt {
  grid-column: 1 / -1;
  display: none;
  margin: -2px 10px 10px;
  padding: 11px 12px;
  border: 1px solid rgba(93, 214, 194, 0.26);
  border-radius: 10px;
  background: rgba(6, 18, 21, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.sceneGenerationRow:hover .sceneGenerationPrompt,
.sceneGenerationRow:focus-within .sceneGenerationPrompt {
  display: block;
}

.sceneGenerationPrompt strong {
  display: block;
  margin-bottom: 5px;
  color: #5dd6c2;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sceneGenerationPrompt p {
  max-height: 168px;
  margin: 0;
  overflow-y: auto;
  color: rgba(255, 250, 242, 0.8);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sceneGenerationRow:last-child {
  border-bottom: 0;
}

.sceneGenerationPreviewButton {
  min-width: 0;
  min-height: 61px;
  padding: 9px 12px;
  border: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(112px, auto);
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.sceneGenerationPreviewButton:not(:disabled) {
  cursor: pointer;
}

.sceneGenerationPreviewButton:not(:disabled):hover,
.sceneGenerationPreviewButton:not(:disabled):focus-visible,
.sceneGenerationRerollButton:not(:disabled):hover,
.sceneGenerationRerollButton:not(:disabled):focus-visible {
  background: rgba(93, 214, 194, 0.09);
  outline: none;
}

.sceneGenerationPreviewButton:disabled {
  opacity: 1;
  cursor: default;
}

.sceneGenerationRerollButton {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 250, 242, 0.72);
  cursor: pointer;
}

.sceneGenerationRerollButton:disabled {
  color: rgba(255, 250, 242, 0.28);
  cursor: not-allowed;
}

.sceneGenerationIdentity,
.sceneGenerationResult {
  min-width: 0;
}

.sceneGenerationIdentity small {
  display: block;
  color: rgba(255, 250, 242, 0.46);
  font-size: 10px;
}

.sceneGenerationIdentity b {
  display: block;
  overflow: hidden;
  color: #fffaf2;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sceneGenerationStages {
  display: inline-flex;
  gap: 6px;
}

.sceneGenerationStages em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 250, 242, 0.46);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.sceneGenerationStages em.active {
  background: rgba(255, 191, 105, 0.14);
  color: #ffbf69;
}

.sceneGenerationStages em.done {
  background: rgba(93, 214, 194, 0.12);
  color: #5dd6c2;
}

.sceneGenerationResult {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: rgba(255, 250, 242, 0.66);
}

.sceneGenerationResult strong {
  font-size: 11px;
  white-space: nowrap;
}

.sceneGenerationRow.completed .sceneGenerationResult {
  color: #5dd6c2;
}

.sceneGenerationRow.retrying .sceneGenerationResult {
  color: #ffbf69;
}

.sceneGenerationRow.failed .sceneGenerationResult {
  color: #ff7e79;
}

.scenePreviewBackdrop,
.v2ConfirmBackdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.v2ConfirmDialog {
  width: min(460px, 100%);
  padding: 22px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 14px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  background: #111514;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.v2ConfirmDialog h2,
.v2ConfirmDialog p {
  margin: 0;
}

.v2ConfirmDialog p {
  color: rgba(255, 250, 242, 0.72);
  line-height: 1.65;
}

.v2ConfirmDialog .stageActions {
  margin-top: 6px;
  justify-content: flex-end;
}

.scenePreviewDialog {
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid rgba(93, 214, 194, 0.42);
  border-radius: 12px;
  background: #111514;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.scenePreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.scenePreviewHeader span {
  color: rgba(255, 250, 242, 0.48);
  font-size: 10px;
}

.scenePreviewHeader h3 {
  margin: 2px 0 0;
  font-size: 14px;
}

.scenePreviewDialog > img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 118px);
  object-fit: contain;
  background: #050706;
}

.treeStageGrid {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.treeStageCard {
  position: relative;
  min-width: 0;
  min-height: 116px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  overflow: hidden;
}

.treeStageCard.disabled {
  opacity: 0.55;
}

.treeStageCard.ready {
  border-color: rgba(93, 214, 194, 0.44);
  background: rgba(93, 214, 194, 0.1);
}

.treeStageCard.selected {
  border-color: rgba(255, 191, 105, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 191, 105, 0.24);
}

.treeStageMain {
  width: 100%;
  min-height: 116px;
  padding: 12px 48px 12px 12px;
  border: 0;
  display: block;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.treeStageMain:disabled {
  cursor: not-allowed;
}

.treeStageRefresh {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  cursor: pointer;
}

.treeStageRefresh:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.treeStageCard span,
.treeStageDetailHeader span,
.treeNodeMiniHeader span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.treeStageCard strong,
.treeStageDetailHeader strong,
.treeNodeMiniHeader strong {
  display: block;
  margin-top: 7px;
  font-size: 16px;
}

.treeStageCard p {
  margin: 8px 0 0;
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.graphActionGrid {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.graphActionCard {
  min-width: 0;
  min-height: 124px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 6px;
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: #fffaf2;
  text-align: left;
  cursor: pointer;
}

.graphActionCard:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.graphActionCard.ready {
  border-color: rgba(93, 214, 194, 0.46);
  background: rgba(93, 214, 194, 0.09);
}

.graphActionCard span,
.graphPanelHeader span,
.graphNode span,
.graphNodeDetail .treeStageDetailHeader span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.graphActionCard strong {
  font-size: 15px;
  line-height: 1.25;
}

.graphActionCard p {
  margin: 0;
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.graphActionCard em {
  min-height: 20px;
  color: rgba(93, 214, 194, 0.9);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.graphPanel,
.graphNodeDetail {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.34);
}

.graphPanelHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.graphPanelHeader strong {
  display: block;
  margin-top: 5px;
  color: #fffaf2;
  font-size: 14px;
}

.graphLinkControls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.graphLinkControls > span {
  color: rgba(216, 255, 248, 0.78);
  font-size: 11px;
  font-weight: 800;
}

.graphConnectionComposer {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: flex-end;
  border: 1px solid rgba(93, 214, 194, 0.34);
  border-radius: 8px;
  background: rgba(8, 39, 48, 0.72);
}

.graphConnectionComposer label {
  min-width: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.graphConnectionComposer label > span {
  color: rgba(216, 255, 248, 0.76);
  font-size: 11px;
  font-weight: 900;
}

.graphConnectionComposer select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(93, 214, 194, 0.4);
  border-radius: 7px;
  background: #0d2028;
  color: #fffaf2;
}

.graphConnectionComposer select:disabled {
  opacity: 0.48;
}

.graphConnectionArrow {
  padding-bottom: 9px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}

.graphConnectionComposer > small {
  grid-column: 1 / -1;
  color: rgba(255, 250, 242, 0.58);
  font-size: 11px;
}

.graphFlowCanvas {
  margin-top: 12px;
  height: min(78vh, 900px);
  min-height: 620px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.16);
}

.graphFlowCanvas .react-flow {
  background: rgba(9, 24, 38, 0.48);
}

.flowGraphNode {
  position: relative;
  width: 220px;
  min-width: 0;
  min-height: 98px;
  padding: 10px 36px 10px 10px;
  border: 1px solid rgba(93, 214, 194, 0.34);
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  background: rgba(9, 42, 54, 0.92);
  color: #fffaf2;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.flowGraphNode .react-flow__handle {
  width: 8px;
  height: 8px;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.flowGraphNode.transition {
  border-color: rgba(255, 191, 105, 0.36);
  background: rgba(54, 39, 18, 0.92);
}

.flowGraphNode.placeholder {
  border-style: dashed;
  opacity: 0.82;
}

.flowGraphNode.selected {
  border-color: rgba(255, 191, 105, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 191, 105, 0.22);
}

.flowGraphNode.connectionMode {
  cursor: crosshair;
}

.flowGraphNode.connectionMode:hover {
  border-color: rgba(93, 214, 194, 0.78);
}

.flowGraphNode.connectionSource {
  border-color: rgba(255, 191, 105, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 191, 105, 0.2), 0 8px 24px rgba(0, 0, 0, 0.24);
}

.flowGraphNode.connectionTarget {
  border-color: rgba(93, 214, 194, 0.98);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.22), 0 8px 24px rgba(0, 0, 0, 0.24);
}

.flowGraphNode span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.flowGraphNode strong {
  color: #fffaf2;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.flowGraphNode small {
  color: rgba(255, 250, 242, 0.56);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.flowGraphShots {
  min-width: 0;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.flowGraphShotsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flowGraphNode .flowGraphShotsHeader span,
.flowGraphShotsHeader b {
  color: rgba(255, 250, 242, 0.58);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
}

.flowGraphShot {
  min-width: 0;
  height: 26px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  grid-gap: 5px;
  gap: 5px;
  background: rgba(0, 0, 0, 0.18);
}

.flowGraphShot em {
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.flowGraphShot p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 250, 242, 0.76);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowGraphNode button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  color: #fffaf2;
  cursor: pointer;
}

.flowGraphEdgePath {
  stroke: rgba(255, 191, 105, 0.75);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.flowGraphEdgePath.potential {
  stroke: rgba(93, 214, 194, 0.64);
  stroke-dasharray: 7 6;
}

.flowGraphEdgeTools {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.flowGraphEdgeTools > button {
  min-width: 28px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid rgba(93, 214, 194, 0.32);
  border-radius: 6px;
  background: rgba(93, 214, 194, 0.1);
  color: #d8fff8;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.flowGraphEdgeTools > button:hover:not(:disabled) {
  border-color: rgba(93, 214, 194, 0.7);
  background: rgba(93, 214, 194, 0.2);
}

.flowGraphEdgeTools > button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.react-flow__edge-textbg {
  fill: rgba(7, 13, 20, 0.86);
}

.react-flow__edge-text {
  fill: rgba(255, 250, 242, 0.76);
  font-size: 10px;
  font-weight: 800;
}

.react-flow__controls,
.react-flow__minimap {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(7, 13, 20, 0.88);
}

.graphRelationStrip {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.graphRelationStrip span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 250, 242, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.graphConnectionForm {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

.graphConnectionForm span {
  color: rgba(255, 250, 242, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.graphConnectionForm input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: #fffaf2;
}

.toolButton.danger {
  border-color: rgba(248, 113, 113, 0.42);
  color: #fecaca;
}

.toolButton.danger.armed {
  background: rgba(127, 29, 29, 0.48);
}

@media (max-width: 760px) {
  .graphConnectionComposer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .graphConnectionArrow {
    display: none;
  }

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

.treeStageDetail {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.34);
}

.treeStageDetailHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.directNodeEditor .treeStageDetailHeader {
  align-items: center;
}

.directNodeEditor .treeStageDetailHeader > div:first-child {
  min-width: 0;
}

.directNodeEditor .treeStageDetailHeader .stageActions {
  flex: 0 0 auto;
}

.directNodeFields {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.directNodeFields .editableTreeField:first-child {
  grid-column: 1 / -1;
}

.editableTreeField textarea {
  min-height: 96px;
}

.nodeShotsEditor {
  margin-top: 16px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.nodeEditorSectionTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.nodeEditorSectionTitle span {
  color: #fffaf2;
  font-size: 14px;
  font-weight: 900;
}

.nodeEditorSectionTitle small {
  color: rgba(93, 214, 194, 0.72);
  font-size: 11px;
}

.nodeShotEditor {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.nodeShotEditor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nodeShotEditor > header strong {
  color: #5dd6c2;
  font-size: 12px;
}

.nodeShotEditor > header span {
  color: rgba(255, 250, 242, 0.46);
  font-size: 11px;
  font-weight: 800;
}

.dialogueLineEditor {
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: start;
}

.dialogueLineEditor > span {
  padding-top: 10px;
  color: #ffbf69;
}

.dialogueLineEditor textarea {
  min-height: 64px;
}

.dialogueLineEditor.standalone {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.treeStageNotes {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 250, 242, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.treeStageQuestion {
  margin: 10px 0 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 191, 105, 0.22);
  border-radius: 8px;
  background: rgba(255, 191, 105, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.branchTitleList {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.branchTitleItem {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 191, 105, 0.16);
  border-radius: 8px;
  background: rgba(255, 191, 105, 0.06);
}

.branchTitleItem span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.branchTitleItem strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}

.branchTitleItem p {
  margin: 6px 0 0;
  color: rgba(255, 250, 242, 0.7);
  font-size: 12px;
  line-height: 1.45;
}

.treeNodeList {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 14px;
  gap: 14px;
}

.treeNodeMini {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(93, 214, 194, 0.16);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.05);
}

.treeNodeMiniHeader {
  min-width: 0;
}

.treeFieldList {
  margin-top: 12px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.treeFieldList.compact {
  margin-top: 9px;
  gap: 6px;
}

.treeField {
  min-width: 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.treeField span {
  padding-top: 1px;
  color: rgba(255, 250, 242, 0.52);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

.treeField p,
.treeField pre {
  min-width: 0;
  margin: 0;
  color: rgba(255, 250, 242, 0.82);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.treeField pre {
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  white-space: pre-wrap;
}

.treeField.multiline {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dialogueSummary {
  min-width: 0;
  display: grid;
  grid-gap: 9px;
  gap: 9px;
}

.dialogueShotGroup {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(93, 214, 194, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.dialogueShotHeader {
  min-height: 34px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(93, 214, 194, 0.07);
}

.dialogueShotHeader strong {
  color: #5dd6c2;
  font-size: 12px;
  line-height: 1.35;
}

.dialogueShotHeader small {
  flex: 0 0 auto;
  color: rgba(255, 250, 242, 0.52);
  font-size: 11px;
  font-weight: 800;
}

.dialogueTurnList {
  margin: 0;
  padding: 2px 10px;
  list-style: none;
}

.dialogueTurnList li {
  min-width: 0;
  padding: 9px 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dialogueTurnList li:last-child {
  border-bottom: 0;
}

.dialogueTurnList b {
  color: #ffbf69;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.dialogueTurnList p,
.dialogueSummaryEmpty {
  margin: 0;
  color: rgba(255, 250, 242, 0.88);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.dialogueSummaryEmpty {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.treeNodeMini > p {
  margin: 7px 0 0;
  color: rgba(255, 250, 242, 0.72);
  font-size: 12px;
  line-height: 1.5;
}

.treeChoiceList {
  margin-top: 14px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.treeChoiceItem {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(93, 214, 194, 0.16);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.07);
}

.treeChoiceItem > strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.treeChoiceItem.editable {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.treeChoiceItem.editable textarea {
  min-height: 64px;
}

.choiceStructure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choiceStructure span {
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 250, 242, 0.5);
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .treeField {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .dialogueTurnList li {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .directNodeEditor .treeStageDetailHeader,
  .directNodeEditor .treeStageDetailHeader .stageActions,
  .directEditActions,
  .visualEditingNotice {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .directNodeEditor .treeStageDetailHeader .stageActions,
  .directEditActions .toolButton,
  .visualEditingNotice .toolButton {
    width: 100%;
  }

  .directNodeEditor .treeStageDetailHeader .toolButton,
  .directEditActions .toolButton,
  .visualEditingNotice .toolButton {
    min-height: 44px;
  }

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

  .directNodeFields .editableTreeField:first-child {
    grid-column: auto;
  }

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

  .dialogueLineEditor > span {
    padding-top: 0;
  }
}

.fileStatus {
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.fileStatus.ready {
  border-color: rgba(93, 214, 194, 0.42);
}

.fileStatus.wideStatus {
  min-height: 76px;
}

.fileStatus strong {
  color: #fff;
  font-size: 15px;
}

.settingSummary {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.bibleStepStack {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.settingSubTabs {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.settingSubTab {
  min-width: 0;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  grid-gap: 3px 8px;
  gap: 3px 8px;
  color: rgba(255, 250, 242, 0.66);
  background: rgba(0, 0, 0, 0.2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.settingSubTab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.settingSubTab.ready {
  color: #fff;
  border-color: rgba(93, 214, 194, 0.36);
  background: rgba(93, 214, 194, 0.08);
}

.settingSubTab.active {
  color: #fff;
  border-color: rgba(255, 191, 105, 0.84);
  background: rgba(255, 191, 105, 0.13);
  box-shadow: inset 0 -2px 0 rgba(255, 191, 105, 0.72);
}

.settingSubTab.ready.active {
  border-color: rgba(93, 214, 194, 0.82);
  background: rgba(93, 214, 194, 0.14);
  box-shadow: inset 0 -2px 0 rgba(93, 214, 194, 0.76);
}

.settingSubTabIndex {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.settingSubTabLabel {
  min-width: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settingSubTabState {
  color: rgba(255, 250, 242, 0.46);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.settingSubTab.ready .settingSubTabState {
  color: #5dd6c2;
}

.bibleStepStack > [role="tabpanel"] {
  min-width: 0;
}

.storyFoundationEditor {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.storyStarterUpload {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  grid-gap: 18px;
  gap: 18px;
  align-items: stretch;
}

.storyStarterDropzone {
  min-height: 320px;
  padding: 0;
  overflow: hidden;
  border: 1px dashed rgba(255, 191, 105, 0.56);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, rgba(255, 191, 105, 0.12), rgba(4, 7, 10, 0.42));
  color: #fffaf2;
  cursor: pointer;
}

.storyStarterDropzone:hover:not(:disabled) {
  border-color: rgba(93, 214, 194, 0.8);
  background: radial-gradient(circle at 50% 20%, rgba(93, 214, 194, 0.14), rgba(4, 7, 10, 0.42));
}

.storyStarterDropzone:disabled {
  cursor: wait;
  opacity: 0.7;
}

.storyStarterDropzone img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.34);
}

.storyStarterPlaceholder {
  padding: 24px;
  display: grid;
  justify-items: center;
  grid-gap: 10px;
  gap: 10px;
  text-align: center;
}

.storyStarterPlaceholder strong {
  font-size: 16px;
}

.storyStarterPlaceholder small {
  color: rgba(255, 250, 242, 0.54);
  font-size: 11px;
}

.uploadPhaseBar {
  max-width: 100%;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
}

.uploadPhaseBar .checkPhaseDetail {
  width: 100%;
  text-align: center;
}

.storyStarterCopy {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  display: grid;
  align-content: center;
  justify-items: start;
  grid-gap: 12px;
  gap: 12px;
  background: rgba(4, 7, 10, 0.34);
}

.storyStarterCopy h4,
.storyStarterCopy p {
  margin: 0;
}

.storyStarterCopy h4 {
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.15;
}

.storyStarterCopy p {
  color: rgba(255, 250, 242, 0.66);
  font-size: 13px;
  line-height: 1.7;
}

.storyStarterCopy > strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5dd6c2;
  font-size: 12px;
}

.storyStarterProfile {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.storyStarterProfile > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(93, 214, 194, 0.18);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.055);
}

.storyStarterProfile > div.wide {
  grid-column: 1 / -1;
}

.storyStarterProfile dt {
  color: #5dd6c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.storyStarterProfile dd {
  margin: 5px 0 0;
  color: rgba(255, 250, 242, 0.88);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.storyStarterMissingHooks {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 191, 105, 0.34);
  border-radius: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 191, 105, 0.07);
}

.storyStarterMissingHooks .uploadPhaseBar {
  width: 100%;
}

.storyStarterMissingHooks > strong {
  color: rgba(255, 250, 242, 0.76);
  font-size: 12px;
  line-height: 1.45;
}

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

.storyHookCard {
  position: relative;
  min-width: 0;
  min-height: 168px;
  padding: 17px 16px 14px 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: grid;
  align-content: start;
  justify-items: start;
  grid-gap: 10px;
  gap: 10px;
  background: rgba(6, 8, 12, 0.42);
  color: #fffaf2;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.storyHookCard:hover:not(:disabled),
.storyHookCard.selected {
  border-color: rgba(255, 191, 105, 0.76);
  background: rgba(255, 191, 105, 0.09);
  transform: translateY(-1px);
}

.storyHookCard:disabled {
  cursor: wait;
  opacity: 0.62;
}

.storyHookNumber {
  position: absolute;
  top: 17px;
  left: 16px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.storyHookCard p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.58;
}

.storyHookCard small {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(93, 214, 194, 0.09);
  color: rgba(93, 214, 194, 0.88);
  font-size: 10px;
  font-weight: 850;
}

.storyHookCard .storyHookDirection {
  padding: 0;
  background: transparent;
  color: rgba(255, 191, 105, 0.9);
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
}

.storyHookArc {
  display: block;
  margin: 2px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 244, 226, 0.66);
}

.storyHookCard strong {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 191, 105, 0.9);
  font-size: 11px;
}

.candidateLiveRegion {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.candidateLiveSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 12px;
}

.candidateLiveSummary strong {
  color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.candidateLiveCard {
  cursor: default;
  opacity: 1;
  overflow: hidden;
}

.candidateLiveCard.running,
.candidateLiveCard.retrying,
.candidateLiveCard.streaming {
  border-color: rgba(255, 191, 105, 0.62);
  background: linear-gradient(110deg, rgba(255, 191, 105, 0.05), rgba(255, 191, 105, 0.13), rgba(255, 191, 105, 0.05));
  background-size: 220% 100%;
  animation: candidate-live-pulse 1.8s linear infinite;
}

.candidateLiveCard.streaming p:last-of-type::after {
  margin-left: 2px;
  color: var(--accent);
  content: "▋";
  animation: candidate-live-caret 760ms steps(1, end) infinite;
}

.candidateLivePlaceholder {
  color: rgba(255, 250, 242, 0.46) !important;
  font-weight: 650 !important;
}

.candidateLiveCard.completed {
  border-color: rgba(93, 214, 194, 0.5);
  background: rgba(93, 214, 194, 0.07);
}

.candidateLiveCard.failed {
  border-color: rgba(255, 108, 108, 0.55);
  background: rgba(255, 79, 79, 0.07);
}

.candidateLiveStatus {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 11px;
  font-weight: 850;
}

.candidateLiveCard.completed .candidateLiveStatus {
  color: rgba(93, 214, 194, 0.95);
}

.candidateLiveCard.failed .candidateLiveStatus,
.candidateLiveError {
  color: #ffabab;
}

.candidateLiveError {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@keyframes candidate-live-pulse {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

@keyframes candidate-live-caret {
  50% { opacity: 0; }
}

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

.foundationGroup {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  display: grid;
  align-content: start;
  grid-gap: 12px;
  gap: 12px;
  background: rgba(4, 7, 10, 0.34);
}

.foundationGroup > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.foundationGroup h4,
.foundationGroup p {
  margin: 0;
}

.foundationGroup h4 {
  color: #fff;
  font-size: 14px;
}

.foundationGroup p {
  margin-top: 4px;
  color: rgba(255, 250, 242, 0.55);
  font-size: 11px;
  line-height: 1.45;
}

.foundationGroup > header > span {
  flex: 0 0 auto;
  color: rgba(93, 214, 194, 0.8);
  font-size: 10px;
  font-weight: 900;
}

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

.foundationChoices button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 250, 242, 0.76);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}

.foundationChoices button > span {
  color: rgba(255, 191, 105, 0.62);
  font-size: 9px;
}

.foundationChoices button:hover:not(:disabled),
.foundationChoices button.selected {
  border-color: rgba(255, 191, 105, 0.72);
  background: rgba(255, 191, 105, 0.1);
  color: #fff;
}

.foundationChoices button:disabled {
  cursor: default;
  opacity: 0.58;
}

.foundationGroup > label {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.foundationGroup > label > span {
  color: rgba(255, 250, 242, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.foundationGroup input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.foundationGroup input:focus {
  border-color: rgba(93, 214, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.11);
}

.foundationGroup.dependentDisabled {
  opacity: 0.68;
}

.foundationGenerateRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(93, 214, 194, 0.2);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.06);
}

.foundationGenerateRow > span {
  color: rgba(255, 250, 242, 0.58);
  font-size: 11px;
  line-height: 1.45;
}

.foundationActions {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foundationActions > span {
  min-width: 0;
  color: rgba(255, 250, 242, 0.58);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.storyEndingsEditor {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

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

.storyEndingCard {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  display: grid;
  grid-gap: 9px;
  gap: 9px;
  background: rgba(6, 8, 12, 0.38);
}

.storyEndingCard > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 250, 242, 0.88);
  font-size: 12px;
  font-weight: 900;
}

.storyEndingCard > span b {
  color: var(--accent);
  font-size: 10px;
}

.storyEndingCard textarea {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  resize: vertical;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 250, 242, 0.88);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  outline: none;
}

.storyEndingCard textarea:focus {
  border-color: rgba(93, 214, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.1);
}

.storyEndingCard textarea:disabled {
  opacity: 0.6;
}

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

.inspirationCard {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(6, 8, 12, 0.38);
}

.inspirationCard.selected {
  border-color: rgba(255, 191, 105, 0.78);
  background: rgba(255, 191, 105, 0.1);
}

.inspirationCardTop,
.inspirationActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inspirationCardTop span {
  color: rgba(255, 250, 242, 0.48);
  font-size: 11px;
  font-weight: 900;
}

.inspirationCardTop strong {
  color: var(--accent);
  font-size: 13px;
}

.inspirationCard h4 {
  margin: 9px 0 6px;
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
}

.inspirationCard p {
  margin: 0;
  color: rgba(255, 250, 242, 0.7);
  font-size: 13px;
  line-height: 1.55;
}

.inspirationActions {
  margin-top: 12px;
  justify-content: flex-end;
}

.bibleStepCard {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.bibleStepCard.ready {
  border-color: rgba(93, 214, 194, 0.3);
}

.bibleStepHeader {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bibleStepHeader > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.bibleStepHeader > div > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.6;
}

.bibleStepHeader h3,
.bibleStepHeader p {
  margin: 0;
}

.bibleStepHeader h3 {
  color: #fff;
  font-size: 15px;
}

.bibleStepHeader p {
  margin-top: 4px;
  color: rgba(255, 250, 242, 0.55);
  font-size: 12px;
  line-height: 1.45;
}

.settingIntro {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.settingIntroEditor {
  display: grid;
  grid-gap: 11px;
  gap: 11px;
}

.settingIntroEditor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settingIntroEditor header > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settingIntroEditor textarea {
  width: 100%;
  min-height: 96px;
  padding: 0;
  border: 0;
  resize: vertical;
  background: transparent;
  color: rgba(255, 250, 242, 0.86);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
}

.settingIntroEditor:focus-within {
  border-color: rgba(93, 214, 194, 0.68);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.1);
}

.settingIntroEditor textarea:disabled {
  opacity: 0.62;
}

.directEditForm {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.directEditForm > label,
.editableTreeField,
.nodeShotEditor > label,
.dialogueLineEditor,
.treeChoiceItem.editable > label {
  min-width: 0;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.directEditForm label > span,
.editableTreeField > span,
.nodeShotEditor label > span,
.dialogueLineEditor > span,
.treeChoiceItem.editable label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
  font-weight: 850;
}

.directEditForm textarea,
.editableTreeField textarea,
.nodeShotEditor textarea,
.dialogueLineEditor textarea,
.treeChoiceItem.editable textarea {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  resize: vertical;
  background: rgba(4, 7, 10, 0.46);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.directEditForm textarea.tall {
  min-height: 120px;
}

.directEditForm textarea:focus,
.editableTreeField textarea:focus,
.nodeShotEditor textarea:focus,
.dialogueLineEditor textarea:focus,
.treeChoiceItem.editable textarea:focus {
  border-color: rgba(93, 214, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.11);
}

.directEditActions {
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.directEditActions > span {
  color: rgba(255, 250, 242, 0.5);
  font-size: 12px;
}

.visualEditingNotice {
  margin-top: 14px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(93, 214, 194, 0.24);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  background: rgba(93, 214, 194, 0.07);
  color: #5dd6c2;
}

.visualEditingNotice.compact {
  grid-template-columns: auto minmax(0, 1fr);
}

.visualEditingNotice strong {
  color: #fffaf2;
  font-size: 13px;
}

.visualEditingNotice p {
  margin: 4px 0 0;
  color: rgba(255, 250, 242, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

.settingIntro span,
.characterMini span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.settingIntro p,
.characterMini p {
  margin: 7px 0 0;
  color: rgba(255, 250, 242, 0.76);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.characterMini {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.characterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.characterSettingEditor {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

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

.characterSettingGrid label {
  min-width: 0;
  display: grid;
  align-content: start;
  grid-gap: 7px;
  gap: 7px;
}

.characterSettingGrid label.wide {
  grid-column: 1 / -1;
}

.characterAppearancePicker {
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.characterAppearanceHeading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.characterAppearanceHeading > span {
  color: rgba(255, 250, 242, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.characterAppearanceHeading > small {
  color: rgba(255, 191, 105, 0.82);
  text-align: right;
}

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

.characterAppearanceChoice {
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 250, 242, 0.72);
  text-align: left;
  cursor: pointer;
}

.characterAppearanceChoice:hover:not(:disabled),
.characterAppearanceChoice.selected {
  border-color: rgba(93, 214, 194, 0.65);
  background: rgba(93, 214, 194, 0.09);
  color: #fffaf2;
}

.characterAppearanceChoice:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.characterAppearanceChoice > span {
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.characterAppearanceChoice strong {
  font-size: 13px;
}

.characterAppearanceChoice small {
  color: rgba(255, 250, 242, 0.56);
  font-size: 11px;
  line-height: 1.45;
}

.characterAppearanceError {
  color: #ff9b91;
  font-size: 11px;
}

.characterSettingReference {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(93, 214, 194, 0.28);
  border-radius: 10px;
  background: rgba(93, 214, 194, 0.05);
}

.characterSettingReferencePreview {
  min-height: 120px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(4, 7, 10, 0.52);
}

.characterSettingReferencePreview img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.characterSettingReferenceEmpty {
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  grid-gap: 8px;
  gap: 8px;
  color: rgba(255, 250, 242, 0.56);
  font-size: 12px;
}

.characterSettingReferenceCopy {
  min-width: 0;
  display: grid;
  justify-items: start;
  grid-gap: 8px;
  gap: 8px;
}

.characterSettingReferenceCopy > strong {
  color: #fffaf2;
  font-size: 14px;
}

.characterSettingReferenceCopy p {
  margin: 0;
  color: rgba(255, 250, 242, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

.characterSettingReferenceCopy small {
  color: rgba(255, 191, 105, 0.9);
}

.characterSettingReferenceCopy small.valid {
  color: rgba(93, 214, 194, 0.9);
}

.characterReferenceDebugUrl {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.characterReferenceDebugUrl span {
  color: rgba(255, 250, 242, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.characterReferenceDebugUrl a {
  color: rgba(116, 190, 255, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.storyStarterImageUrl {
  margin-top: 2px;
}

.characterSettingGrid label > span {
  color: rgba(255, 250, 242, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.characterSettingGrid input,
.characterSettingGrid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(4, 7, 10, 0.46);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.characterSettingGrid input {
  min-height: 44px;
  padding: 10px 11px;
}

.characterSettingGrid textarea {
  min-height: 112px;
  padding: 10px 11px;
  resize: vertical;
}

.characterSettingGrid textarea.compact {
  min-height: 132px;
}

.characterSettingGrid input:focus,
.characterSettingGrid textarea:focus {
  border-color: rgba(93, 214, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(93, 214, 194, 0.11);
}

.characterSettingGrid input:disabled,
.characterSettingGrid textarea:disabled {
  opacity: 0.58;
}

.characterSettingGrid small {
  color: rgba(255, 191, 105, 0.8);
  font-size: 11px;
  line-height: 1.4;
}

.characterSettingGrid small.valid {
  color: rgba(93, 214, 194, 0.85);
}

.characterSettingActions {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.characterSettingActions > span {
  color: rgba(255, 250, 242, 0.55);
  font-size: 12px;
  line-height: 1.45;
}

.characterMini strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.traitList {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.traitList em {
  padding: 4px 7px;
  border: 1px solid rgba(93, 214, 194, 0.22);
  border-radius: 999px;
  color: rgba(255, 250, 242, 0.82);
  background: rgba(93, 214, 194, 0.08);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.emptyState {
  min-height: 88px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(255, 250, 242, 0.66);
  font-weight: 800;
}

.streamPanel {
  margin-bottom: 12px;
  border: 1px solid rgba(93, 214, 194, 0.38);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.34);
}

.streamHeader {
  min-height: 36px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 250, 242, 0.7);
  font-size: 12px;
  font-weight: 900;
}

.streamHeader strong {
  color: #5dd6c2;
  text-transform: uppercase;
}

.streamPanel.complete {
  border-color: rgba(93, 214, 194, 0.24);
}

.streamPanel.failed {
  border-color: rgba(255, 107, 96, 0.5);
}

.streamPanel.failed .streamHeader strong {
  color: #ff8c82;
}

.streamPanel.idle .streamHeader strong {
  color: rgba(255, 250, 242, 0.45);
}

.streamPanel pre {
  height: 190px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  color: #fffaf2;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  letter-spacing: 0;
}

.checkBotStreams {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 14px;
  gap: 14px;
}

.checkBotStreams .streamPanel {
  margin-bottom: 0;
}

.checkBotStreams > .streamPanel:not(.checkBotDiagnosisPanel) pre {
  height: 150px;
}

.checkBotDiagnosisPanel {
  min-width: 0;
  background: rgba(5, 22, 22, 0.42);
}

.sampleBoxList {
  overflow: visible;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkBotStreams .checkBotDiagnosisPanel .sampleIntro,
.checkBotStreams .checkBotDiagnosisPanel .sampleBox pre {
  margin: 0;
  color: #fffaf2;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  letter-spacing: 0;
}

.checkBotStreams .checkBotDiagnosisPanel .sampleIntro {
  height: auto;
  padding: 2px 4px 4px;
  color: rgba(255, 250, 242, 0.72);
}

.sampleBox {
  border: 1px solid rgba(93, 214, 194, 0.34);
  border-radius: 8px;
  background: rgba(93, 214, 194, 0.07);
  overflow: hidden;
}

.sampleBoxHeader {
  min-height: 38px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  grid-gap: 12px;
  gap: 12px;
}

.sampleBoxHeader span {
  min-width: 74px;
  color: #f0b35a;
  font-size: 11px;
  font-weight: 900;
}

.sampleBoxHeader strong {
  color: #fffaf2;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.checkBotStreams .checkBotDiagnosisPanel .sampleBox pre {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 12px;
}

.createLog {
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 250, 242, 0.82);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.spin {
  animation: spin 0.85s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .createShell {
    padding: 18px;
  }

  .stepRail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .plotGrid,
  .inspirationGrid,
  .plotActGrid,
  .beatList,
  .fileGrid,
  .assetSummary,
  .assetMeters,
  .treeStageGrid,
  .graphActionGrid,
  .graphColumns,
  .characterGrid,
  .characterSettingGrid,
  .foundationGroups,
  .storyStarterUpload,
  .storyHookGrid,
  .storyEndingGrid {
    grid-template-columns: 1fr;
  }

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

  .storyStarterProfile > div.wide {
    grid-column: auto;
  }

  .characterSettingGrid label.wide {
    grid-column: auto;
  }

  .characterSettingReference {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .characterAppearancePicker {
    grid-column: auto;
  }

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

  .characterAppearanceHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .characterAppearanceHeading > small {
    text-align: left;
  }

  .graphEdgeChip {
    min-width: 180px;
  }

  .storySampleHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .storySampleActions {
    width: 100%;
  }

  .storySampleActions .toolButton {
    min-height: 44px;
    flex: 1 1;
  }

  .characterSettingActions {
    align-items: stretch;
    flex-direction: column;
  }

  .foundationActions {
    align-items: stretch;
    flex-direction: column;
  }

  .foundationGenerateRow {
    align-items: stretch;
    flex-direction: column;
  }

  .foundationGenerateRow .toolButton {
    justify-content: center;
  }

  .foundationActions .toolButton {
    min-height: 44px;
    width: 100%;
  }

  .characterSettingActions .toolButton {
    min-height: 44px;
    width: 100%;
  }

  .storySampleEditor textarea {
    min-height: 300px;
  }
}

@media (max-width: 560px) {
  .createShell {
    padding: 14px;
  }

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

  .settingSubTab {
    min-height: 52px;
  }

  .settingSubTab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .settingIntroEditor header {
    align-items: stretch;
    flex-direction: column;
  }

  .settingIntroEditor header .toolButton {
    min-height: 44px;
    width: 100%;
  }

  .createHeader {
    align-items: center;
  }

  .createHeader h1 {
    font-size: 26px;
  }

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

  .stageHeading {
    align-items: stretch;
    flex-direction: column;
  }

  .bibleStepHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .bibleStepHeader > .stageActions {
    width: 100%;
  }

  .bibleStepHeader > .stageActions .toolButton {
    min-height: 44px;
    white-space: nowrap;
  }

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

  .editorTools {
    align-items: stretch;
    flex-direction: column;
  }

  .segmentControl,
  .toolButton {
    width: 100%;
  }

  .segmentControl button {
    flex: 1 1;
  }

  .jsonEditor textarea {
    height: 360px;
  }

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

  .characterRefsIntro {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .sceneGenerateAction {
    align-items: stretch;
    flex-direction: column;
  }

  .sceneGenerateButtons {
    width: 100%;
    flex-direction: column;
  }

  .sceneImageModelSelect {
    width: 100%;
  }

  .sceneGenerateButtons .toolButton {
    min-height: 44px;
  }

  .sceneGenerationRow {
    min-height: 84px;
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  .sceneGenerationPreviewButton {
    min-height: 83px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
  }

  .sceneGenerationStages {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sceneGenerationResult {
    grid-column: 2;
    grid-row: 1;
  }

  .scenePreviewBackdrop,
  .v2ConfirmBackdrop {
    align-items: flex-end;
    padding: 10px;
  }

  .scenePreviewDialog {
    max-height: calc(100dvh - 20px);
  }

  .scenePreviewDialog > img {
    max-height: calc(100dvh - 98px);
  }

  .characterRefMeta {
    min-height: 52px;
  }

  .characterRefMeta .createIconButton.small {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}
.storyLibrary {
  min-height: 100vh;
  padding: 56px clamp(20px, 6vw, 88px);
  color: #f8fafc;
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.24), transparent 36%),
    radial-gradient(circle at 90% 20%, rgba(14, 165, 233, 0.16), transparent 34%),
    #090b12;
}

.storyLibraryHeader {
  max-width: 1180px;
  margin: 0 auto 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.storyLibraryHeader h1 {
  margin: 8px 0;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 0.98;
}

.storyLibraryHeader p,
.storyLibraryEmpty p {
  color: #a8b0c0;
}

.eyebrow {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.newStoryButton {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  font-weight: 800;
  cursor: pointer;
}

.newStoryButton:disabled {
  opacity: 0.65;
  cursor: wait;
}

.storyLibraryError,
.storyLibraryEmpty,
.storyGrid {
  max-width: 1180px;
  margin-inline: auto;
}

.storyLibraryError {
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 12px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.3);
}

.storyLibraryEmpty {
  min-height: 320px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 24px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: rgba(15, 23, 42, 0.45);
}

.storyLibraryEmpty h2 {
  margin: 16px 0 0;
}

.emptyStateAction {
  width: 100%;
  min-height: 152px;
  border: 1px dashed rgba(93, 214, 194, 0.45);
  color: rgba(235, 250, 247, 0.88);
  font: inherit;
  cursor: pointer;
}

.emptyStateAction strong {
  font-size: 15px;
}

.emptyStateAction span {
  color: rgba(210, 232, 227, 0.65);
  font-size: 12px;
}

.emptyStateAction:hover:not(:disabled) {
  border-color: rgba(93, 214, 194, 0.9);
  background: rgba(33, 112, 97, 0.16);
}

.emptyStateAction:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.storyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 18px;
  gap: 18px;
}

.storyCard {
  min-height: 220px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  background: rgba(17, 24, 39, 0.8);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

/* Card preview: the opening background with the lead's transparent sprite on top,
   cropped to the head and torso so the face reads at card size. */
.storyCardPreview {
  position: relative;
  margin: 14px 0 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(76, 29, 149, 0.42), rgba(15, 23, 42, 0.86));
}

.storyCardPreview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.72), rgba(3, 7, 18, 0) 58%);
}

.storyCardPreviewScene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyCardPreviewSprite {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 1;
  height: 190%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

.storyCardPreview + .storyTitleRow,
.storyCardPreview + .storyTitleEditor {
  margin-top: 14px;
}

.storyCardTop,
.storyCardActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.storyCardTop time,
.storyCard code {
  color: #7f8a9d;
  font-size: 11px;
}

.storyCard h2 {
  margin: 25px 0 8px;
  font-size: 24px;
}

.storyTitleRow,
.storyTitleEditor {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.storyTitleRow h2 {
  margin: 0 0 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.storyTitleRow button,
.storyTitleEditor button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.62);
  cursor: pointer;
}

.storyTitleEditor {
  margin-bottom: 8px;
}

.storyTitleEditor label {
  min-width: 0;
  flex: 1 1;
}

.storyTitleEditor input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(167, 139, 250, 0.65);
  border-radius: 8px;
  color: #fff;
  background: rgba(3, 7, 18, 0.72);
  font: inherit;
  font-weight: 800;
}

.storyCardActions {
  margin-top: auto;
  justify-content: flex-start;
}

.storyCardActions a,
.primaryLink {
  padding: 9px 13px;
  border-radius: 10px;
  color: #fff;
  background: rgba(124, 58, 237, 0.8);
  text-decoration: none;
  font-weight: 700;
}

.storyCardActions a:last-child {
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.7);
}

.storyStatus {
  padding: 5px 9px;
  border-radius: 999px;
  color: #fef3c7;
  background: rgba(180, 83, 9, 0.35);
  font-size: 11px;
  font-weight: 800;
}

.storyStatus.playable {
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.4);
}

.storyEditButton {
  width: auto !important;
  padding-inline: 10px;
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.prologueEditLink {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  font-size: 12px;
}

.prologueHomeLink {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

@media (max-width: 680px) {
  .storyLibrary {
    padding: 30px 16px;
  }

  .storyLibraryHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .newStoryButton {
    justify-content: center;
  }
}

/* --- 逐幕共创 v2 --- */

.newStoryActions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.newStoryButton.v2 {
  background: linear-gradient(135deg, #0f766e, #2563eb);
}

.storyModeTag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.45);
  color: #5eead4;
  background: rgba(13, 148, 136, 0.16);
  font-size: 11px;
  font-weight: 800;
}

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

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

.v2ModelPicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 250, 242, 0.72);
}

.v2ModelPicker select {
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.v2ModelPicker select option {
  color: #111;
}

.v2ModelPicker strong {
  color: #fff;
}

.characterAnalysisPicker {
  flex: 0 1 auto;
  max-width: min(100%, 420px);
}

.characterAnalysisPicker select {
  min-width: 150px;
  max-width: 240px;
}

.characterAnalysisWarning {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 8px;
  background: rgba(120, 78, 8, 0.2);
  color: #fde7a8;
  font-size: 13px;
  line-height: 1.55;
}

.characterAnalysisWarning strong {
  display: block;
  color: #ffd36d;
}

.characterAnalysisWarning ul {
  margin: 6px 0 0;
  padding-left: 19px;
}

.characterAnalysisWarning p {
  margin: 6px 0 0;
  color: rgba(255, 244, 205, 0.76);
}

.assetModelPickers {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.v2Hint {
  margin: 0 0 14px;
  color: rgba(255, 250, 242, 0.66);
  font-size: 13px;
  line-height: 1.6;
}

.v3SpriteBackgroundNotice {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(93, 214, 194, 0.42);
  border-radius: 9px;
  background: rgba(93, 214, 194, 0.09);
  color: rgba(230, 255, 250, 0.78);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.v3SpriteBackgroundNotice svg {
  flex: 0 0 auto;
  color: #5dd6c2;
}

.v3SpriteBackgroundNotice strong {
  margin-right: 8px;
  color: #b9fff3;
}

/* The same banner after a background sprite run stalled out and timed out. */
.v3SpriteBackgroundNotice.stalled {
  border-color: rgba(255, 138, 128, 0.46);
  background: rgba(255, 138, 128, 0.1);
  color: rgba(255, 233, 230, 0.82);
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.v3SpriteBackgroundNotice.stalled svg,
.v3SpriteBackgroundNotice.stalled strong {
  color: #ffb3ab;
}

.v3AssetGroupHeading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 10px;
}

.v3AssetGroupHeading.sceneBackground {
  margin-top: 20px;
}

.v3AssetGroupHeading strong {
  color: #fff;
  font-size: 14px;
}

.v3AssetGroupHeading span {
  color: rgba(255, 250, 242, 0.58);
  font-size: 12px;
}

.v3ScenePromptHint {
  margin: 8px 0 0;
  color: rgba(255, 250, 242, 0.58);
  font-size: 12px;
  line-height: 1.6;
}

.v3SpriteActions {
  margin: 0 0 16px;
}

.v3StatesEditor {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.v3StatesEditor .v2Hint {
  margin: 0;
}

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

.v3StateEditorCard {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}

.v3StateEditorCard legend {
  padding: 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.v3StateEditorCard label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.v3StateEditorCard label span {
  color: rgba(255, 250, 242, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.v3StateEditorCard textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.v3StateEditorCard textarea:focus {
  outline: none;
  border-color: rgba(255, 191, 105, 0.8);
}

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

.v3SpriteWarning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 183, 77, 0.5);
  border-radius: 12px;
  background: rgba(111, 69, 8, 0.22);
  color: #ffd89a;
  font-size: 13px;
  line-height: 1.55;
}

.v3SpriteWarning strong {
  display: block;
  margin-bottom: 5px;
}

.v3SpriteWarning ul {
  margin: 0;
  padding-left: 18px;
}

.v3SpriteGroups {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.v3SpriteGroupRow {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(132px, 164px);
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
}

.v3SpriteGroupError {
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 117, 117, 0.52);
  border-radius: 10px;
  background: rgba(115, 25, 25, 0.2);
  color: #ffd2d2;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

.v3SpriteGroupError strong {
  color: #ffb1b1;
  font-size: 13px;
}

.v3SpriteGroupError p {
  margin: 0;
  overflow-wrap: anywhere;
}

.v3SpriteGroupError span {
  color: rgba(255, 238, 228, 0.75);
}

.v3SpriteGroupError.moderation {
  border-color: rgba(255, 183, 77, 0.58);
  background: rgba(111, 69, 8, 0.24);
  color: #ffe0aa;
}

.v3SpriteGroupError.moderation strong {
  color: #ffc86e;
}

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

.v3SpriteGroupAction {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  align-content: end;
}

.v3SpriteGroupAction > span {
  color: rgba(255, 250, 242, 0.55);
  font-size: 11px;
  font-weight: 800;
}

.v3SpriteGroupAction .toolButton {
  width: 100%;
  justify-content: center;
}

.v3SpriteMissingAction {
  margin-top: -2px;
}

.v3SpriteMedia {
  position: relative;
}

.v3SpriteMedia .v2AssetPlaceholder {
  height: auto;
}

.v3SpriteLiveHint {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 191, 105, 0.45);
  border-radius: 7px;
  background: rgba(16, 13, 10, 0.84);
  color: #ffe2b8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.v3SpriteLiveHint.completed {
  border-color: rgba(93, 214, 194, 0.5);
  color: #a7f3d0;
}

.v3SpriteLiveHint.failed {
  border-color: rgba(248, 113, 113, 0.58);
  color: #fecaca;
}

.v3SpriteCard figcaption small {
  color: #fca5a5;
}

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

.v2Chain > li {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid rgba(255, 191, 105, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.v2Chain > li.ending {
  border-left-color: rgba(93, 214, 194, 0.85);
}

.v2Chain header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 6px;
}

.v2Chain header span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.v2Chain header strong {
  font-size: 14px;
  line-height: 1.45;
}

.v2Chain header small {
  color: rgba(255, 250, 242, 0.52);
  font-size: 10px;
}

.v2BeatScene {
  flex: 0 0 auto;
  margin: 0 0 6px;
  color: rgba(255, 191, 105, 0.85);
  font-size: 12px;
  line-height: 1.5;
}

.v2ChainSummary {
  margin: 0 0 8px;
  color: rgba(255, 250, 242, 0.7);
  font-size: 13px;
  line-height: 1.6;
}

/* The premise that governs the whole story, shown once at the top of beat one. */
.v2StoryPremise {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 191, 105, 0.28);
  border-radius: 10px;
  background: rgba(255, 191, 105, 0.06);
}

.v2StoryPremise .v2AiOutputField:first-child {
  margin-top: 0;
}

.v2StoryPremise .v2Hint {
  margin: 8px 0 0;
}

.v2AiOutputField {
  margin: 7px 0 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-gap: 9px;
  gap: 9px;
  color: rgba(255, 250, 242, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.v2AiOutputField > b,
.v2AiDialogueBlock > b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.v2AiOutputField.featured {
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(255, 191, 105, 0.07);
}

.v2AiOutputField.technical span {
  color: rgba(255, 250, 242, 0.56);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.v2AiDialogueBlock {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v2Chain details summary {
  cursor: pointer;
  color: rgba(255, 250, 242, 0.6);
  font-size: 12px;
  font-weight: 800;
}

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

.v2Dialogue li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
}

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

.v2ChainChoice {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(93, 214, 194, 0.92);
  font-size: 12px;
  font-weight: 800;
}

.v2CandidateGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.v2DirectionButtons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.v2CandidateCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.v2CandidateCard:hover:not(:disabled) {
  border-color: rgba(255, 191, 105, 0.75);
  background: rgba(255, 191, 105, 0.09);
  transform: translateY(-2px);
}

.v2CandidateCard:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.9);
  outline-offset: 2px;
}

.v2CandidateCard:disabled {
  cursor: wait;
  opacity: 0.55;
}

.v2CandidateCard p {
  margin: 0;
  flex: 1 1;
  color: rgba(255, 250, 242, 0.86);
  font-size: 13px;
  line-height: 1.7;
}

.v2CandidateCard .candidateDirection {
  color: rgba(255, 191, 105, 0.92);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
}

.v2AssetGrid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.v2AssetCard {
  margin: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.v2AssetCard img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.v2SceneAssetMedia {
  position: relative;
}

.v2SceneAssetMedia.hasPrompt,
.v3SpriteMedia.hasPrompt {
  cursor: help;
  border-radius: 8px;
}

.v2SceneAssetMedia.hasPrompt:focus-visible,
.v3SpriteMedia.hasPrompt:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.9);
  outline-offset: 3px;
}

.v3ScenePromptTooltip {
  position: absolute;
  z-index: 2;
  inset: 7px;
  padding: 11px 12px;
  overflow-y: auto;
  border: 1px solid rgba(255, 218, 169, 0.48);
  border-radius: 7px;
  background: rgba(13, 11, 9, 0.94);
  color: rgba(255, 250, 242, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.v2SceneAssetMedia.hasPrompt:hover .v3ScenePromptTooltip,
.v2SceneAssetMedia.hasPrompt:focus-within .v3ScenePromptTooltip,
.v3SpriteMedia.hasPrompt:hover .v3ScenePromptTooltip,
.v3SpriteMedia.hasPrompt:focus-within .v3ScenePromptTooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.v3ScenePromptTooltip strong {
  display: block;
  margin-bottom: 7px;
  color: #ffd7a0;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.v3ScenePromptTooltip p,
.v2AssetPlaceholderPrompt p {
  margin: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The empty box doubles as a preview of what the generator will be asked for. */
.v2AssetPlaceholder.withPrompt {
  justify-content: flex-start;
  padding: 12px 10px;
  overflow: hidden;
}

.v2AssetPlaceholder.withPrompt > span {
  flex-shrink: 0;
  font-weight: 800;
}

.v2AssetPlaceholderPrompt {
  width: 100%;
  min-height: 0;
  margin-top: 4px;
  padding-top: 8px;
  overflow-y: auto;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  color: rgba(255, 250, 242, 0.72);
  text-align: left;
}

.v2SceneLiveHint {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 191, 105, 0.5);
  border-radius: 7px;
  background: rgba(16, 13, 10, 0.88);
  color: #ffe2b8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.v2SceneLiveHint.completed {
  border-color: rgba(93, 214, 194, 0.5);
  color: #a7f3d0;
}

.v2SceneLiveHint.failed {
  border-color: rgba(255, 107, 96, 0.58);
  color: #ffb4ad;
}

.v2AssetPlaceholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 250, 242, 0.55);
  font-size: 12px;
}

.v2AssetCard figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
}

/* The scene line needs the full card width, so the reroll button drops to its
   own row underneath instead of competing with it for horizontal space. */
.v2AssetCard figcaption.v3SceneFigcaption {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  justify-items: stretch;
}

.v3SceneCaption {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.v3SceneCaption strong {
  color: rgba(255, 250, 242, 0.68);
  font-size: 12px;
  font-weight: 600;
}

.v3SceneCaption em {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 250, 242, 0.5);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.v2AssetCard figcaption .toolButton {
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.v2Profile {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-gap: 18px;
  gap: 18px;
  align-items: start;
}

.v2Profile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.v2Profile dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px 16px;
  gap: 10px 16px;
}

.v2Profile dl > div.wide {
  grid-column: 1 / -1;
}

.v2Profile dt {
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.v2Profile dd {
  margin: 0;
  color: rgba(255, 250, 242, 0.86);
  font-size: 13px;
  line-height: 1.6;
}

.v2Profile dd.technical {
  color: rgba(255, 250, 242, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.stepItem[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 720px) {
  .v2Profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2Profile dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .v2DirectionButtons {
    width: 100%;
  }

  .v2DirectionButtons .toolButton {
    width: auto;
    flex: 1 1;
    white-space: nowrap;
  }

  .v2AiOutputField {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.storyDeleteButton {
  margin-left: auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.16);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.storyDeleteButton:hover {
  color: #fff;
  border-color: rgba(248, 113, 113, 0.75);
  background: rgba(185, 28, 28, 0.55);
}

.storyDeleteConfirm {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.storyDeleteConfirm b {
  color: #fca5a5;
  font-weight: 800;
}

.storyDeleteConfirm button {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.storyDeleteConfirm button.danger {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(185, 28, 28, 0.7);
}

.storyDeleteConfirm button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.v2ProfileForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px 16px;
  gap: 10px 16px;
  align-content: start;
}

.v2ProfileForm label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.v2ProfileForm label.wide,
.v2ProfileFormActions,
.v2ProfileForm .v2Hint {
  grid-column: 1 / -1;
}

.v2ProfileForm label span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.v2ProfileForm input,
.v2ProfileForm textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.v2ProfileForm input:focus,
.v2ProfileForm textarea:focus {
  outline: none;
  border-color: rgba(255, 191, 105, 0.8);
}

.v2ProfileFormActions {
  display: inline-flex;
  gap: 8px;
}

.v2ProfileForm .v2Hint {
  margin: 0;
}

/* ---- v3 live runtime player ---- */

.v3Phone {
  --v3-dialogue-top: max(68px, 10%);
  --v3-dialogue-right: 20px;
  --v3-dialogue-height: 20%;
  --v3-dialogue-left: 20px;
  --v3-interaction-right: 20px;
  --v3-interaction-bottom: max(10px, env(safe-area-inset-bottom));
  --v3-interaction-left: 20px;
  --v3-interaction-height: 25%;
  --v3-character-height: 72%;
}

/* Beat transition: the new background plate appears alone with its place name, and
   the heroine plus the dialogue UI only come back after the player taps it. */
.v3SceneCard {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: none;
  background: rgba(6, 8, 14, 0.42);
  color: #fff;
  cursor: pointer;
  text-align: center;
  animation: v3SceneCardIn 240ms ease-out;
}

.v3SceneCardPlace {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

/* Opening card: her relationship slot under the place name. */
.v3SceneCardIdentity {
  margin-top: -6px;
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.v3SceneCardHint {
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  animation: v3SceneCardHintPulse 1.8s ease-in-out infinite;
}

@keyframes v3SceneCardIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes v3SceneCardHintPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.v3CharacterLayer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.v3CharacterLayer .spriteOverlay {
  --v3-sprite-x: 0px;
  --v3-sprite-y: 0px;
  position: absolute;
  left: 50%;
  bottom: var(--v3-interaction-bottom);
  transform: translate(calc(-50% + var(--v3-sprite-x)), var(--v3-sprite-y));
  width: auto;
  height: var(--v3-character-height);
  max-width: 92%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
  animation: v3SpriteIn 0.35s ease;
  cursor: -webkit-grab;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.v3CharacterLayer .spriteOverlay.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  animation: none;
}

.v3CharacterLayer .spriteOverlay:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.9);
  outline-offset: 3px;
}

.v3CharacterStatus {
  --v3-status-x: 0px;
  --v3-status-y: 0px;
  position: absolute;
  z-index: 2;
  top: calc(var(--v3-dialogue-top) + var(--v3-dialogue-height) + 12px);
  inset-inline-end: 16px;
  width: auto;
  max-width: 72%;
  transform: translate(var(--v3-status-x), var(--v3-status-y));
  padding: 6px 12px;
  border: 1px solid rgba(255, 211, 154, 0.52);
  border-radius: 999px;
  background: rgba(18, 13, 9, 0.7);
  color: #fff8eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.v3CharacterStatus.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.v3CharacterStatus:focus-visible {
  outline: 2px solid rgba(255, 191, 105, 0.9);
  outline-offset: 2px;
}

.v3CharacterStatus .v3CharacterEmotion {
  display: inline-flex;
  align-items: center;
  color: #ffd39a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.v3CharacterStatus .v3CharacterLadder {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  justify-content: center;
}

.v3CharacterStatus .v3CharacterLadder i {
  display: block;
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.v3CharacterStatus .v3CharacterLadder i.lit {
  background: #f5c58a;
}

.v3CharacterStatus .v3CharacterLadder i.half {
  background: linear-gradient(90deg, #f5c58a 0 50%, rgba(255, 255, 255, 0.22) 50% 100%);
}

/* Emoji that float up from around the sprite when a preset option pushes her. */
.v3EmojiLayer {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.v3EmojiFloat {
  position: absolute;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation-fill-mode: both;
}

/* Warming up: rise from around the sprite. */
.v3EmojiFloat.up {
  bottom: 22%;
  animation-name: v3EmojiFloat;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Going cold: drop in from the top and fade out as they fall. */
.v3EmojiFloat.down {
  top: 12%;
  animation-name: v3EmojiFall;
  animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.6);
}

@keyframes v3EmojiFall {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.6);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(1.05);
  }

  70% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--v3-emoji-sway, 0px)), 300px) scale(0.9);
  }
}

@keyframes v3EmojiFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1.05);
  }

  70% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--v3-emoji-sway, 0px)), -300px) scale(1);
  }
}

.v3DialogueLayer {
  position: absolute;
  z-index: 3;
  top: var(--v3-dialogue-top);
  right: var(--v3-dialogue-right);
  height: var(--v3-dialogue-height);
  left: var(--v3-dialogue-left);
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.v3DialogueScroll {
  width: 100%;
  height: 100%;
  -webkit-padding-end: 4px;
          padding-inline-end: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
  pointer-events: auto;
}

.v3DialogueScroll > :first-child {
  margin-top: 0;
}

.v3DialogueScroll::-webkit-scrollbar {
  display: block;
  width: 4px;
}

.v3DialogueScroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.v3ChatList {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 2px 8px 4px 10px;
}

.v3Bubble {
  position: relative;
  max-width: 84%;
  min-width: 0;
  padding: 7px 11px 8px;
  border-radius: 12px;
  color: #e9edef;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: v3BubbleIn 180ms ease-out both;
}

.v3Bubble.groupStart {
  margin-top: 7px;
}

.v3ChatList > .v3Bubble:first-child {
  margin-top: 0;
}

.v3Bubble.lead {
  align-self: flex-start;
  background: rgba(32, 44, 51, 0.94);
}

.v3Bubble.player {
  align-self: flex-end;
  background: rgba(0, 92, 75, 0.94);
}

.v3Bubble.lead.groupStart {
  border-start-start-radius: 3px;
}

.v3Bubble.player.groupStart {
  border-start-end-radius: 3px;
}

.v3Bubble.groupStart::before {
  content: "";
  position: absolute;
  top: 0;
  width: 9px;
  height: 13px;
  background: inherit;
  -webkit-backdrop-filter: inherit;
          backdrop-filter: inherit;
}

.v3Bubble.lead.groupStart::before {
  inset-inline-start: -8px;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.v3Bubble.player.groupStart::before {
  inset-inline-end: -8px;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%);
}

.v3BubbleName {
  display: block;
  margin-bottom: 2px;
  /* Pink for a female lead, blue for a male one (data-sex on the name). */
  color: #f9a8d4;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.v3BubbleName[data-sex="male"] {
  color: #7dd3fc;
}

.v3BubbleName .v3BubbleReaction {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
  font-size: 14px;
  font-style: normal;
  vertical-align: -1px;
}

.v3BubbleText {
  display: block;
  white-space: pre-wrap;
}

.v3BubbleAction {
  color: rgba(233, 237, 239, 0.68);
  font-style: italic;
  font-weight: 500;
}

.v3Bubble.player .v3BubbleAction {
  color: rgba(233, 237, 239, 0.74);
}

/* The same action styling inside the choice buttons. */
.v3InteractionLayer .choices .choiceText .v3BubbleAction {
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
  font-weight: 500;
}

.v3Bubble.streaming .v3BubbleText::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  -webkit-margin-start: 2px;
          margin-inline-start: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: v3Caret 0.9s steps(2, start) infinite;
}

@keyframes v3BubbleIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v3Caret {
  to {
    visibility: hidden;
  }
}

.v3InteractionLayer {
  position: absolute;
  z-index: 4;
  right: var(--v3-interaction-right);
  bottom: var(--v3-interaction-bottom);
  left: var(--v3-interaction-left);
  /* Keep the lower edge fixed and let the option stack grow upward. A fixed
     percentage height clipped four full-size buttons on shorter phones. */
  height: auto;
  max-height: calc(100% - var(--v3-interaction-bottom) - max(64px, env(safe-area-inset-top)));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

/* Single option: sit it around the lower third of the stage instead of on the
   very bottom edge, so it reads as a choice and not as a footer bar. */
.v3InteractionLayer[data-single-option="true"] {
  bottom: calc(var(--v3-interaction-bottom) + 22%);
}

.v3InteractionLayer .choices,
.v3InteractionLayer .choices button {
  flex-shrink: 0;
}

/* Debug badge on each option: the rung it moves her to (+1 / 0 / -1). */
.v3InteractionLayer .choices .choiceDelta {
  flex-shrink: 0;
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}
.v3InteractionLayer .choices .choiceDelta.up { background: rgba(255, 140, 120, 0.28); color: #ffd0c4; }
.v3InteractionLayer .choices .choiceDelta.down { background: rgba(120, 170, 255, 0.28); color: #cfe0ff; }

.v3InteractionLayer::-webkit-scrollbar {
  display: none;
}

.v3ChoiceLoading {
  position: relative;
  width: 100%;
  height: var(--v3-interaction-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.v3ChoiceLoading > svg {
  position: relative;
  z-index: 1;
  color: #ffd39a;
  filter: drop-shadow(0 0 10px rgba(255, 191, 105, 0.62));
}

.v3ChoiceLoadingGlow {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 191, 105, 0.24), transparent 68%);
  animation: v3LoadingGlow 1.4s ease-in-out infinite;
}

@keyframes v3LoadingGlow {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes v3SpriteIn {
  from { opacity: 0; transform: translate(calc(-50% + var(--v3-sprite-x)), calc(var(--v3-sprite-y) + 8px)); }
  to { opacity: 1; transform: translate(calc(-50% + var(--v3-sprite-x)), var(--v3-sprite-y)); }
}

.v3ModelSelect {
  max-width: 150px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  pointer-events: auto;
}

.localeSwitcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  pointer-events: auto;
}

.localeSwitcher select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 12px;
  height: 32px;
  padding: 0 8px;
  max-width: 120px;
}

.localeSwitcher.nav select {
  height: 26px;
  font-size: 11px;
  max-width: 96px;
  background: transparent;
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.18);
}

.v2CreationLocale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.localeSwitcher.flag {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
}

.localeSwitcher.flag .localeFlag {
  font-size: 21px;
  line-height: 1;
}

.localeSwitcher.flag select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.localeSwitcher.flag:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.v3ModelSelect:focus {
  outline: none;
  border-color: rgba(255, 191, 105, 0.8);
}

.choices button.v3CustomChoice {
  border-style: dashed;
  border-color: rgba(255, 191, 105, 0.7);
  color: #ffd39a;
}

.v3CustomInput {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  height: var(--v3-interaction-height);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.68);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.v3CustomInput textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 12px;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
}

.v3CustomInput textarea:focus {
  border-color: rgba(255, 191, 105, 0.9);
}

.v3CustomInputActions {
  display: grid;
  grid-template-columns: 1fr 52px;
  grid-gap: 8px;
  gap: 8px;
}

.v3CustomInputActions button {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.v3CustomInputActions button.primary {
  border-color: rgba(255, 191, 105, 0.7);
  background: rgba(255, 191, 105, 0.2);
  color: #ffe1b8;
}

.v3CustomInputActions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.v3TurnError {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(252, 165, 165, 0.5);
  background: rgba(127, 29, 29, 0.35);
  font-size: 13px;
}

.v3TurnError p {
  margin: 0;
}

.v3TurnError button {
  flex: none;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
}

@media (max-height: 760px) {
  .v3Phone {
    --v3-dialogue-top: max(64px, 9%);
  }

  .v3Bubble {
    font-size: 15px;
    line-height: 1.4;
  }
}

@media (max-height: 640px) {
  .v3Phone {
    --v3-dialogue-top: 60px;
    --v3-interaction-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Plain UI mode (see use-ui-mode.js): every animation and transition is
   switched off so a browser agent reads a settled page on the first try. */
html[data-ui="plain"] *,
html[data-ui="plain"] *::before,
html[data-ui="plain"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ---- landing (peachi.ai) ---- */

.landing {
  --landing-nav-height: 78px;
  --landing-top-height: 56px;
  --landing-gap: 10px;
  min-height: 100svh;
  padding: calc(var(--landing-top-height) + env(safe-area-inset-top)) var(--landing-gap) calc(var(--landing-nav-height) + env(safe-area-inset-bottom) + 24px);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 191, 105, 0.16), transparent 60%),
    var(--bg);
  color: var(--text);
}

/* Always floating: fixed to the viewport so the brand + filter never scroll away. */
.landingTop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--landing-top-height, 56px) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--landing-gap, 10px) + 4px) 0;
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.68), rgba(9, 10, 13, 0.52));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

.landingTopLeft {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.landingTopActions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.landingBrand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.landingBrandEmoji {
  font-size: 22px;
  line-height: 1;
}

.wallToggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.wallToggle button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.wallToggle button.active {
  background: var(--accent);
  color: #1b1206;
}

.landingError {
  margin: 6px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fecaca;
  font-size: 14px;
}

.landingEmpty {
  margin: 48px auto;
  max-width: 420px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* The client places each card in the current shortest column. Before hydration,
   this grid is a stable fallback rather than a stack of overlapping cards. */
.storyWall {
  --story-wall-columns: 2;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--story-wall-columns), minmax(0, 1fr));
  align-items: start;
  grid-column-gap: var(--landing-gap);
  column-gap: var(--landing-gap);
  grid-row-gap: var(--landing-gap);
  row-gap: var(--landing-gap);
}

.storyWall[data-masonry-ready="true"] {
  position: relative;
  display: block;
}

.storyWall[data-masonry-ready="true"] .coverTile {
  position: absolute;
}

@media (min-width: 720px) {
  .storyWall {
    --story-wall-columns: 3;
  }
  .landing {
    --landing-gap: 14px;
    padding-left: clamp(14px, 3vw, 40px);
    padding-right: clamp(14px, 3vw, 40px);
  }
}

@media (min-width: 1080px) { .storyWall { --story-wall-columns: 4; } }
@media (min-width: 1360px) { .storyWall { --story-wall-columns: 5; } }
@media (min-width: 1640px) { .storyWall { --story-wall-columns: 6; } }
@media (min-width: 1920px) { .storyWall { --story-wall-columns: 7; } }
@media (min-width: 2200px) { .storyWall { --story-wall-columns: 8; } }
@media (min-width: 2440px) { .storyWall { --story-wall-columns: 9; } }

.coverTile {
  display: block;
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #14161c;
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.coverTile:hover,
.coverTile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  outline: none;
}

.coverTile:focus-visible .coverTileVisual::after {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.coverTileVisual {
  display: block;
  position: relative;
  aspect-ratio: var(--tile-ratio, 3 / 4);
  overflow: hidden;
}

.coverTileVisual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.82), rgba(3, 7, 18, 0) 55%);
  pointer-events: none;
}

.coverTileScene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverTileSprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 96%;
  max-width: 96%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.coverTileCaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 11px;
}

.coverTileCaption h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coverTileMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.coverTileLead {
  color: #f9a8d4;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coverTileLead[data-sex="男"] {
  color: #7dd3fc;
}

.coverTilePlay {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #1b1206;
  font-weight: 700;
}

/* Sex and art style filters: the wall is server-rendered with every tile; CSS
   hides the rest, so the two filters simply intersect. */
.landing[data-sex-filter="female"] .coverTile[data-sex="男"],
.landing[data-sex-filter="male"] .coverTile[data-sex="女"],
.landing[data-art-style-filter="realistic"] .coverTile[data-art-style="卡通"],
.landing[data-art-style-filter="anime"] .coverTile[data-art-style="真实"] {
  display: none;
}

/* Bottom dock: nav bar + pull-up sheet (intro and FAQ). */
.landingBackdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.landingDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: 88svh;
  margin: 0 auto;
  max-width: 720px;
  border-radius: 22px 22px 0 0;
  background: rgba(16, 18, 24, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transition: max-height 0.25s ease;
  touch-action: pan-y;
}

.landingNav {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px calc(6px + env(safe-area-inset-bottom));
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

/* The sheet toggle grows out of the dock's top edge like a folder tab. Keeping
   it above the nav row gives the account action its own, unobstructed space. */
.landingHandle {
  --landing-tab-background: rgba(16, 18, 24, 0.98);
  position: absolute;
  top: -34px;
  inset-inline-end: 14px;
  z-index: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 35px;
  padding: 3px 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--landing-tab-background);
  color: var(--muted);
  cursor: pointer;
  box-shadow:
    0 -8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: color 0.15s ease, background 0.15s ease;
}

.landingHandle::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 3px;
  background: var(--landing-tab-background);
}

.landingHandle svg {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.landingHandle:hover {
  --landing-tab-background: rgba(28, 30, 37, 0.98);
  color: var(--text);
}

.landingDock.expanded .landingHandle {
  color: var(--text);
}

.landingDock.expanded .landingHandle svg {
  transform: rotate(180deg);
}

.landingNavButtons {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

@media (max-width: 719px) {
  .landingNavButtons > :first-child {
    justify-self: start;
  }

  .landingNavButtons > :last-child {
    justify-self: end;
    -webkit-margin-end: 28px;
            margin-inline-end: 28px;
  }
}

.landingNavButton {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.landingNavButton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

/* The create button is the one thing on the bar that should look pressable:
   a raised disc with a warm rim, a halo behind it, and a small dip on press. */
.landingNavButton.create {
  position: relative;
  width: 60px;
  height: 60px;
  margin-top: -28px;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #ffd79a 0%, var(--accent) 45%, #f09a43 100%);
  color: #2a1703;
  box-shadow:
    0 10px 24px rgba(255, 160, 70, 0.42),
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 6px rgba(150, 80, 10, 0.3) inset,
    0 0 0 4px rgba(16, 18, 24, 0.94),
    0 0 0 5px rgba(255, 191, 105, 0.28);
  justify-content: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.landingNavButton.create:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(255, 160, 70, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.55) inset,
    0 -2px 6px rgba(150, 80, 10, 0.3) inset,
    0 0 0 4px rgba(16, 18, 24, 0.94),
    0 0 0 6px rgba(255, 191, 105, 0.35);
}

.landingNavButton.create:active {
  transform: translateY(1px) scale(0.96);
}

.landingNavButton.create:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.landingNavButton.create:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .landingNavButton.create,
  .landingNavButton.create:hover,
  .landingNavButton.create:active {
    transition: none;
    transform: none;
  }
}

/* Account slot: Google sign-in when signed out, the avatar plus a small
   sign-out menu when signed in. Anchors the menu above the bar. */
.landingNavAccount {
  position: relative;
  display: flex;
  justify-content: center;
}

.landingNavButton.account,
.landingNavButton[data-action="login"] {
  text-decoration: none;
  color: var(--muted);
}

.landingNavButton[data-action="login"]:hover,
.landingNavButton.account:hover {
  color: var(--text);
}

.landingAvatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.landingAvatar.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.landingNavButton.account[aria-expanded="true"] .landingAvatar {
  border-color: var(--accent);
}

.landingAccountMenu {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 10px);
  min-width: 200px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(24, 26, 33, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.landingAccountWho {
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.landingAccountWho span {
  font-size: 12px;
  color: var(--muted);
}

.landingAccountMenu button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.landingAccountMenu button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.landingH1 {
  margin: 0;
  min-width: 0;
  font-size: clamp(11px, 1.6vw, 17px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallToggle button {
  flex: none;
}

.sexToggle button span {
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

/* Pink for women, blue for men. Selecting one fills the pill with the same
   colour and darkens the glyph, so the accent orange stays with "All". */
.sexToggle button[data-value="female"] span {
  color: #ff7ab8;
}

.sexToggle button[data-value="male"] span {
  color: #5aa9ff;
}

.sexToggle button[data-value="female"].active {
  background: #ff7ab8;
}

.sexToggle button[data-value="male"].active {
  background: #5aa9ff;
}

.sexToggle button.active span {
  color: #1b1206;
}

/* Art style pills carry lucide icons instead of glyph spans; the icon inherits
   the button colour, so only the baseline needs fixing. */
.artStyleToggle button {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
}

.artStyleToggle button svg {
  display: block;
}

/* Two filter pills plus the locale flag is a lot for a 360px header, so the
   pills tighten rather than letting the fixed row overflow. */
@media (max-width: 719px) {
  .landingTopActions {
    gap: 6px;
  }

  .wallToggle button {
    padding: 6px 8px;
  }

  .artStyleToggle button {
    padding: 6px 7px;
  }
}

.landingSheet {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom));
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
}

/* Collapsed: the sheet keeps its content in the DOM but takes no space. */
.landingDock:not(.expanded) .landingSheet {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  visibility: hidden;
}

.landingDock.expanded {
  max-height: 88svh;
}

.landingSheet h2 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.landingSheet p {
  margin: 0 0 12px;
  color: var(--muted);
}

.landingLegal {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.landingLegal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landingLegal a:hover {
  color: var(--text);
}

/* Terms of Use and Privacy Policy: a plain reading page, linked only from the
   bottom sheet so the wall itself stays uncluttered. */
.legalPage {
  min-height: 100svh;
  padding: 0 clamp(16px, 4vw, 32px) 64px;
  background: var(--bg);
  color: var(--text);
}

.legalTop {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 0 12px;
  background: rgba(9, 10, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legalBack {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

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

.legalBody {
  max-width: 720px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.65;
}

.legalBody h1 {
  margin: 28px 0 6px;
  font-size: clamp(24px, 4vw, 32px);
}

.legalDate {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
}

.legalBody h2 {
  margin: 28px 0 8px;
  font-size: 18px;
}

.legalBody p {
  margin: 0 0 12px;
  color: var(--muted);
}

.legalBody ul {
  margin: 0 0 12px;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  color: var(--muted);
}

.legalBody li {
  margin-bottom: 8px;
}

.legalFooterLink {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legalFooterLink a {
  color: var(--accent);
  text-decoration: none;
}

.landingFaq details {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0;
}

.landingFaq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.landingFaq summary::-webkit-details-marker {
  display: none;
}

.landingFaq summary::after {
  content: "+";
  color: var(--accent);
  flex: none;
}

.landingFaq details[open] summary::after {
  content: "−";
}

.landingFaq details p {
  margin: 8px 0 0;
}

/* Crawlable context below the full-screen player. The game remains the first
   viewport; readers and search engines can continue into the story summary. */
.storyLoadingTitle {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.storySeo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 240px);
  grid-gap: 28px;
  gap: 28px;
  width: min(100% - 32px, 860px);
  margin: 0 auto;
  padding: 48px 0 72px;
  color: var(--text);
}

.storySeoBack {
  grid-column: 1 / -1;
  color: var(--accent);
  text-decoration: none;
}

.storySeoCopy h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.12;
}

.storySeoCopy p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.storySeoCopy .storySeoMeta {
  color: var(--accent);
  font-size: 14px;
}

.storySeo > img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 18px;
  background: #14161c;
}

/* Lightweight, text-first search landing pages. Only the optional character
   strip loads imagery, capped at eight lazy images per page. */
.seoPage {
  min-height: 100svh;
  padding: 0 clamp(18px, 5vw, 56px) 64px;
  background:
    radial-gradient(80% 36% at 50% 0%, rgba(255, 191, 105, 0.16), transparent 70%),
    var(--bg);
  color: var(--text);
}

.seoHero,
.seoArticle,
.seoCharacters,
.seoFaq,
.seoRelated,
.seoFooter {
  width: min(100%, 920px);
  margin-inline: auto;
}

.seoHero {
  padding: 28px 0 58px;
}

.seoBrand {
  display: inline-block;
  margin-bottom: 54px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.seoHero h1 {
  max-width: 760px;
  margin: 0 0 22px;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.seoHero p {
  max-width: 720px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.7;
}

.seoCta {
  display: inline-flex;
  margin-top: 20px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #271704;
  font-weight: 800;
  text-decoration: none;
}

.seoCharacters,
.seoArticle,
.seoFaq {
  padding: 42px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.seoCharacters h2,
.seoArticle h2,
.seoFaq h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 4vw, 34px);
}

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

.seoCharacterGrid a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--text);
  text-decoration: none;
}

.seoCharacterGrid img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 14px;
  background: #14161c;
}

.seoCharacterGrid strong {
  margin-top: 5px;
  line-height: 1.3;
}

.seoCharacterGrid span,
.seoArticle p,
.seoFaq p {
  color: var(--muted);
  line-height: 1.65;
}

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

.seoArticle section:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.seoFaq details {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.seoFaq summary {
  cursor: pointer;
  font-weight: 800;
}

.seoRelated {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 36px 0;
}

.seoRelated a,
.seoHomeLinks a {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.seoFooter a {
  color: var(--accent);
  text-decoration: none;
}

.seoHomeLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 840px;
  margin: 34px auto 10px;
}

@media (max-width: 680px) {
  .storySeo {
    grid-template-columns: 1fr;
  }
  .storySeo > img {
    max-height: 300px;
  }
  .seoCharacterGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seoArticle {
    grid-template-columns: 1fr;
  }
  .seoArticle section:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Creator credit and hearts on landing tiles. */
.coverTileMeta {
  flex-wrap: wrap;
}

.coverTileBy {
  flex: 1 1 100%;
  order: -1;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coverTileHearts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: #fda4af;
  white-space: nowrap;
}

.coverTileHearts svg {
  fill: currentColor;
}

/* Username editor inside the account menu. */
.landingAccountMenu a[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

.landingAccountMenu a[role="menuitem"]:hover {
  background: rgba(255, 255, 255, 0.12);
}

.landingAccountMenu > * + * {
  margin-top: 6px;
}

.landingUsernameForm {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landingUsernameForm label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.landingUsernameForm input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

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

.landingUsernameActions {
  display: flex;
  gap: 6px;
}

.landingUsernameActions button[type="submit"] {
  background: var(--accent);
  color: #1b1206;
  font-weight: 700;
}

.landingUsernameStatus {
  margin: 0;
  font-size: 12px;
  color: #fecaca;
}

/* The API key panel sits in the same account menu as the rename form and
   borrows its button row; the key itself needs to wrap rather than widen the
   menu, and stays monospaced so a player can check what they copied. */
.landingApiKey {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landingApiKey code {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  min-height: 17px;
}

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

.landingApiKey .landingUsernameActions {
  flex-wrap: wrap;
}

/* /create: the player's own stories. */
.createPage .landingTop {
  gap: 10px;
}

.createNewButton {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #1b1206;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.createNewButton:disabled {
  opacity: 0.7;
  cursor: default;
}

.createSignIn {
  max-width: 420px;
  margin: 56px auto;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.createSignIn h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.createSignIn p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.createSignInButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #1b1206;
  font-weight: 700;
  text-decoration: none;
}

.createSummary {
  margin: 4px 0 14px;
}

.createWho {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 16px;
}

.createHearts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fda4af;
  font-weight: 600;
  font-size: 13px;
}

.createHearts svg {
  fill: currentColor;
}

.createIntro {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.myWall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: var(--landing-gap);
  gap: var(--landing-gap);
}

.myCard {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #14161c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.myCard[aria-busy="true"] {
  opacity: 0.7;
}

.myCardVisual {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0f1116;
}

.myCardVisual .coverTileScene,
.myCardVisual .coverTileSprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.myCardVisual .coverTileScene {
  object-fit: cover;
}

.myCardVisual .coverTileSprite {
  object-fit: contain;
  object-position: bottom center;
}

.myCardNoCover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.myCardBadges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
}

.myCardBadges span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
}

.myCardStatus.playable {
  background: rgba(74, 222, 128, 0.25);
  color: #bbf7d0;
}

.myCard[data-shared="true"] .myCardShared {
  background: rgba(255, 191, 105, 0.3);
  color: #ffe4b5;
}

.myCardBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.myCardBody h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.myCardMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.myCardBusy {
  color: var(--accent);
}

.myCardConfirm p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #fecaca;
}

.myCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.myCardActions a,
.myCardActions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.myCardActions a:hover,
.myCardActions button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.myCardActions button:disabled {
  opacity: 0.5;
  cursor: default;
}

.myCardActions .primary {
  background: var(--accent);
  border-color: transparent;
  color: #1b1206;
  font-weight: 700;
}

.myCardActions .danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.4);
}

.v3SceneCardCredit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.v3SceneCardHearts {
  color: #fda4af;
  font-weight: 600;
}

/* 上传阶段与选开头阶段共用的“角色身份与开场”选填输入。留空时走 10 个预制人设。 */
.customOpeningFields {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 191, 105, 0.28);
  border-radius: 12px;
  background: rgba(255, 191, 105, 0.05);
}

.customOpeningHead {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.customOpeningHead strong {
  font-size: 14px;
  color: #ffd9a0;
}

.customOpeningHead span {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 250, 242, 0.62);
}

.customOpeningField {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.customOpeningField > span {
  font-size: 12px;
  color: rgba(255, 250, 242, 0.72);
}

.customOpeningField input,
.customOpeningField textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(4, 7, 10, 0.5);
  color: #fffaf2;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.customOpeningField input:focus,
.customOpeningField textarea:focus {
  outline: none;
  border-color: rgba(93, 214, 194, 0.7);
}

.customOpeningField input:disabled,
.customOpeningField textarea:disabled {
  opacity: 0.6;
}

.customOpeningSlot {
  margin: 0;
  font-size: 12px;
  color: rgba(93, 214, 194, 0.85);
}

.customOpeningSlot[data-state="dirty"] {
  color: rgba(255, 191, 105, 0.9);
}