:root {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17201b;
  background: #eef3ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.authShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(320px, 1fr);
  gap: 32px;
  padding: 48px;
  color: #e9f4ee;
  background:
    radial-gradient(circle at top left, rgba(240, 207, 77, 0.18), transparent 32%),
    #0d1712;
}

.authPanel,
.authPlans {
  border: 1px solid rgba(218, 232, 222, 0.18);
  border-radius: 14px;
  background: rgba(22, 37, 31, 0.92);
  padding: 28px;
}

.authBrand {
  margin-bottom: 34px;
}

.authCopy h1 {
  margin: 0 0 10px;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 0.95;
}

.authCopy p,
.authPlans p {
  color: #9fb3a8;
  font-weight: 700;
}

.authCard {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.authTabs {
  display: flex;
  gap: 10px;
}

.authTabs button,
.planCard {
  border: 1px solid rgba(218, 232, 222, 0.28);
  border-radius: 10px;
  background: #1a2b23;
  color: #e9f4ee;
  padding: 12px 16px;
  font-weight: 900;
}

.authTabs button.active {
  background: #f0cf4d;
  color: #101b15;
}

.fullWidth {
  width: 100%;
}

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

.planCard strong,
.planCard span {
  display: block;
  color: #fffdf4;
  font-size: 1.4rem;
}

.accountBadge {
  margin: 0;
  color: #9fb3a8;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .authShell {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

.appShell {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(39, 93, 73, 0.08), transparent 36%),
    #eef3ef;
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  padding: 20px 14px;
  color: #e9f4ee;
  background: #16251f;
}

.appShell.sidebarHidden {
  grid-template-columns: minmax(0, 1fr);
}

.appShell.sidebarHidden .sidebar {
  display: none;
}

.sidebarToggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(240, 207, 77, 0.55);
  border-radius: 6px;
  color: #101b15;
  background: #f0cf4d;
  font-weight: 900;
  cursor: pointer;
}

.sidebarToggle.inside {
  margin-left: auto;
}

.sidebarToggle.floating {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 12px;
}

.sidebarHidden .topbar {
  padding-left: 58px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
}

.brandMark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #17201b;
  background: #e8c55b;
  font-weight: 900;
}

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

.brand strong {
  font-size: 15px;
  line-height: 1.2;
}

.brand span {
  margin-top: 2px;
  color: #93a99f;
  font-size: 12px;
}

.stageNav {
  display: grid;
  gap: 6px;
}

.stageButton {
  display: grid;
  grid-template-columns: 18px 1fr 9px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 8px;
  color: #c8d8d0;
  background: transparent;
  text-align: left;
  font-size: 14px;
}

.stageButton:hover,
.stageButton.active {
  color: #fff;
  background: #243830;
}

.stageButton.active {
  box-shadow: inset 3px 0 0 #e8c55b;
}

.statusDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #52665e;
}

.statusDot.needs-review {
  background: #d9903d;
}

.statusDot.approved {
  background: #55c08c;
}

.sidebarFooter {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.ghostButton,
.primaryButton,
.approveButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  font-weight: 750;
  font-size: 13px;
}

.ghostButton {
  color: #dce9e3;
  background: #22362e;
}

.ghostButton.danger {
  color: #ffd6c8;
}

.primaryButton {
  color: #132019;
  background: #e8c55b;
  box-shadow: 0 10px 22px rgba(92, 74, 22, 0.14);
}

.primaryButton:hover {
  background: #f0cf6e;
}

.primaryButton.isLoading {
  cursor: wait;
  opacity: 0.9;
}

.primaryButton.isLoading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(19, 32, 25, 0.25);
  border-top-color: #132019;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

.primaryButton.wide {
  width: 100%;
}

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

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

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

.storyWorkflowTabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: fit-content;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.storyWorkflowTab {
  border: 1px solid rgba(239, 210, 76, 0.35);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 900;
  cursor: pointer;
}

.storyWorkflowTab.selected {
  background: var(--accent);
  color: #07110d;
  border-color: var(--accent);
}

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

.storyTemplateChooser,
.storyTemplateGroup {
  display: grid;
  gap: 12px;
}

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

.storyTemplateHeader strong {
  color: var(--text);
  font-size: 15px;
}

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

.savedTemplateHeader {
  margin-top: 2px;
}

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

.storyTemplatePill {
  display: inline-grid;
  gap: 2px;
  min-height: 46px;
  max-width: 220px;
  align-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(239, 210, 76, 0.32);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 900;
  text-align: left;
}

.storyTemplatePill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyTemplatePill small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.storyTemplatePill:hover,
.storyTemplatePill.selected {
  border-color: var(--accent);
  color: #07110d;
  background: var(--accent);
}

.storyTemplatePill:hover small,
.storyTemplatePill.selected small {
  color: rgba(7, 17, 13, 0.72);
}

.storyTemplatePill.saved {
  max-width: 260px;
}

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

.chapterBookPanel {
  min-width: 0;
}

.chapterBookActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.chapterBookTextarea {
  min-height: 92px;
}

.chapterOutlineList {
  display: grid;
  gap: 14px;
}

.chapterOutlineCard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.chapterCardTop {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.chapterNumber {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #07110d;
  font-weight: 950;
  font-size: 1.1rem;
}

.chapterBookStatusPill {
  border: 1px solid rgba(239, 210, 76, 0.35);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.chapterMetaRow {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(220px, 1fr);
  gap: 12px;
}

.chapterManuscriptOutput {
  min-height: 520px;
}

.storyIdeasToolbar,
.storyIdeaHeader,
.ideaLoaderStrip {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.storyIdeasToolbar h3 {
  margin: 0;
  color: var(--text);
}

.storyIdeasBoard {
  display: grid;
  gap: 14px;
}

.storyIdeaSplitLayout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(460px, 1.22fr);
  gap: 14px;
  align-items: start;
}

.storyIdeaListPane,
.storyIdeaDetailPane {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.storyIdeaBatchBox {
  display: grid;
  gap: 8px;
}

.storyIdeaBatchBox textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
}

.storyIdeaListSort {
  display: grid;
  gap: 6px;
}

.storyIdeaListSort > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.storyIdeaListSort > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sortChip {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 10px;
}

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

.storyIdeaNameItem {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.storyIdeaNameItem.selected {
  border-color: rgba(232, 197, 91, 0.95);
  background: rgba(232, 197, 91, 0.13);
}

.storyIdeaListNumber {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: #101b15;
  background: var(--accent);
  font-weight: 950;
}

.storyIdeaListText {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.storyIdeaListText strong,
.storyIdeaListText small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.storyIdeaListChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.storyIdeaListChips span {
  max-width: min(150px, 100%);
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid rgba(232, 197, 91, 0.22);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.storyIdeaDetailHeader > div:first-child {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.storyIdeaDetailHeader h3 {
  margin: 0;
  color: var(--text);
}

.storyIdeaNumber.small {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.storyIdeaDetailForm {
  display: grid;
  gap: 12px;
}

.storyIdeaReferenceToggle {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 850;
}

.storyIdeaSection {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

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

.storyIdeaSectionHeader h3 {
  margin: 0;
  color: var(--text);
}

.storyIdeaDraftGrid {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.storyIdeaDraftTop {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.5fr) minmax(120px, 0.25fr);
  gap: 10px;
}

.storyIdeaCard {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.storyIdeaNumber {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  color: #101b15;
  background: var(--accent);
  font-weight: 900;
}

.storyIdeaMain {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.storyIdeaTitleInput,
.storyIdeaTextInput {
  width: 100%;
}

.storyIdeaHeader {
  justify-content: stretch;
}

.storyIdeaHeader .storyIdeaTitleInput {
  flex: 1 1 auto;
}

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

.storyIdeaLengthField {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(160px, 1fr);
  gap: 10px;
}

.storyIdeaChipGroup {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.storyIdeaChipGroup > span,
.ideaLoaderStrip > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.chipRail {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: visible;
  padding-bottom: 0;
}

.ideaChip {
  flex: 0 1 auto;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(232, 197, 91, 0.22);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
  font-weight: 850;
}

.ideaChip.selected {
  color: #101b15;
  background: var(--accent);
}

.chipAddRow {
  display: flex;
  gap: 7px;
  align-items: center;
}

.chipAddRow input {
  min-height: 34px;
  max-width: 190px;
}

.ideaLoaderStrip {
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.ideaLoaderStrip .chipRail {
  flex: 1 1 auto;
}

.storyIdeaSelect {
  flex: 1 1 320px;
  min-width: 220px;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

.storyIdeaTableWrap {
  width: 100%;
}

.storyIdeaTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 7px;
}

.storyIdeaTable th {
  padding: 0 4px 2px;
  color: var(--muted);
  text-align: left;
  font-size: 11px;
  font-weight: 900;
}

.storyIdeaTable td {
  min-width: 0;
  padding: 7px 4px;
  vertical-align: top;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
}

.storyIdeaTable td:first-child {
  width: 30px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 0 0 8px;
}

.storyIdeaTable td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 8px 8px 0;
}

.storyIdeaTable th:nth-child(1) {
  width: 30px;
}

.storyIdeaTable th:nth-child(2) {
  width: 30px;
}

.storyIdeaTable th:nth-child(3) {
  width: 18%;
}

.storyIdeaTable th:nth-child(4) {
  width: 17%;
}

.storyIdeaTable th:nth-child(5),
.storyIdeaTable th:nth-child(6),
.storyIdeaTable th:nth-child(10) {
  width: 9%;
}

.storyIdeaTable th:nth-child(7),
.storyIdeaTable th:nth-child(8),
.storyIdeaTable th:nth-child(9) {
  width: 8%;
}

.storyIdeaTable th:nth-child(11) {
  width: 58px;
}

.storyIdeaTable input,
.storyIdeaTable textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 7px;
  font-size: 12px;
}

.storyIdeaTable textarea {
  resize: vertical;
}

.storyIdeaSortButton {
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.storyIdeaLengthInline {
  display: grid;
  gap: 7px;
}

.storyIdeaRowActions {
  display: grid;
  gap: 5px;
}

.storyIdeaRowActions .ghostActionButton {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 11px;
}

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

.storyIdeaSuggestion {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.storyIdeaSuggestion strong {
  color: var(--text);
}

.storyIdeaSuggestion p {
  margin: 0;
  color: var(--muted);
}

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

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

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

.compactChipLine span {
  padding: 5px 8px;
  border: 1px solid rgba(232, 197, 91, 0.22);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.compactChipLine.selectedOnly {
  gap: 4px;
}

.compactChipLine.selectedOnly span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  background: rgba(232, 197, 91, 0.12);
}

.chipRemoveButton {
  display: inline-grid;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.chipRemoveButton:hover {
  color: var(--text);
  background: rgba(232, 197, 91, 0.22);
}

.compactCheckbox {
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
}

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

.buttonRow {
  display: grid;
  grid-template-columns: minmax(150px, 0.44fr) minmax(220px, 1fr);
  gap: 10px;
}

.buttonRow.compact {
  grid-template-columns: repeat(2, minmax(150px, auto));
}

.ghostActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #cddbd4;
  border-radius: 8px;
  color: #285440;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ghostActionButton:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.templateTools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 13px;
}

.templateTools .field {
  margin-bottom: 0;
}

.mainArea {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(28, 43, 36, 0.12);
  background: rgba(248, 251, 248, 0.82);
  backdrop-filter: blur(12px);
}

.projectTitle {
  width: min(520px, 100%);
  padding: 0;
  border: 0;
  color: #17201b;
  background: transparent;
  font-size: 27px;
  font-weight: 850;
  line-height: 1.1;
}

.workspaceTitle {
  margin: 0;
  color: #17201b;
  font-size: 27px;
  font-weight: 850;
  line-height: 1.1;
}

.projectTitle:focus {
  outline: 2px solid rgba(55, 123, 95, 0.25);
  outline-offset: 4px;
}

.topbar p {
  margin: 6px 0 0;
  color: #5d6f66;
  font-size: 14px;
}

.topbarActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.savedState {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #476359;
  font-size: 13px;
  white-space: nowrap;
}

.workspace {
  padding: 18px;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
}

.editorPane {
  min-width: 0;
}

.stageFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 43, 36, 0.12);
}

.continueButton {
  min-width: 132px;
}

.videoPageRenderActions {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.imagePlanActions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.imagePlanActions .continueButton {
  min-width: 132px;
  padding-inline: 18px;
}

.videoPageRenderActions .continueButton {
  min-width: 132px;
}

.videoExportMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.videoExportMenu button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.videoExportMenu button:hover {
  border-color: var(--accent);
  color: #07110d;
  background: var(--accent);
}

.videoExportRangeField {
  display: grid;
  gap: 3px;
  min-width: 150px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.videoExportRangeField input {
  width: 150px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 850;
}

.imageActionMenu {
  right: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: max-content;
  max-width: min(420px, calc(100vw - 48px));
}

.imageActionMenu button {
  min-width: 78px;
}

.textOnlyActionLink {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.textOnlyActionLink:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.backButton {
  min-width: 96px;
}

.stageGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.76fr) minmax(460px, 1.24fr);
  gap: 18px;
}

.panel,
.reviewPanel {
  border: 1px solid rgba(28, 43, 36, 0.12);
  border-radius: 8px;
  background: #fbfdfb;
  box-shadow: 0 18px 44px rgba(32, 47, 40, 0.08);
}

.panel {
  padding: 18px;
  min-width: 0;
}

.fullPanel {
  min-height: calc(100vh - 120px);
  min-width: 0;
  overflow: hidden;
}

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

.panelHeader div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.panelHeader h2 {
  margin: 0;
  color: #17201b;
  font-size: 17px;
  line-height: 1.2;
}

.panelHeader span {
  color: #6b7d73;
  font-size: 12px;
  font-weight: 700;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
  color: #4c5f56;
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field textarea,
.field select,
.profileRow input,
.profileRow select,
.profileRow textarea,
.sceneRow input,
.sceneRow textarea {
  width: 100%;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  color: #17201b;
  background: #fff;
  font-size: 14px;
}

.field input,
.field select,
.profileRow input,
.profileRow select,
.sceneRow input {
  min-height: 38px;
  padding: 0 11px;
}

.field textarea,
.profileRow textarea,
.sceneRow textarea,
.storyOutput {
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.5;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.profileRow input:focus,
.profileRow select:focus,
.profileRow textarea:focus,
.sceneRow input:focus,
.sceneRow textarea:focus,
.storyOutput:focus {
  border-color: #679d83;
  outline: 3px solid rgba(89, 141, 115, 0.18);
}

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

.storyOutput {
  width: 100%;
  min-height: 620px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  color: #17201b;
  background: #fff;
  font-size: 15px;
}

.toolbarRow {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.toolbarRow > .mutedText {
  min-width: 0;
  max-width: 760px;
}

.toolbarRow .field {
  width: min(360px, 100%);
  margin: 0;
}

.sceneSetupPanel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

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

.sceneSetupHeader > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.sceneSetupHeader strong {
  color: var(--text);
  font-size: 20px;
}

.sceneSetupHeader span,
.locationListHeader span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.scenePaceControl {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(140px, 190px) minmax(130px, 170px) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.scenePaceControl > div:first-child,
.scenePaceControl label,
.scenePacePreview {
  display: grid;
  gap: 4px;
}

.scenePaceControl strong {
  color: var(--text);
}

.scenePaceControl span,
.scenePaceControl label span,
.scenePacePreview span {
  color: var(--muted);
  font-size: 13px;
}

.scenePaceControl input {
  width: 100%;
}

.scenePacePreview {
  padding: 8px 10px;
  border: 1px solid rgba(235, 205, 76, 0.35);
  border-radius: 8px;
  background: rgba(235, 205, 76, 0.1);
}

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

.compactLocationList {
  display: grid;
  gap: 8px;
}

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

.locationListHeader strong {
  color: var(--text);
}

.artStylePicker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.artStyleOption {
  height: 156px;
  min-height: 0;
  display: grid;
  grid-template-rows: 54px auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 11px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  color: #17201b;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.artStyleOption:hover,
.artStyleOption.selected {
  border-color: #f0cf4d;
  box-shadow: 0 0 0 2px rgba(240, 207, 77, 0.22);
}

.artStyleOption span:not(.artIcon):not(.iconHead):not(.iconBody):not(.iconAccent):not(.iconGround) {
  font-size: 13px;
  font-weight: 900;
}

.artStyleOption small {
  display: -webkit-box;
  max-height: 46px;
  overflow: hidden;
  color: #63756b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.artIcon {
  position: relative;
  width: 68px;
  height: 54px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 27, 0.12);
  border-radius: 8px;
  background: #eff7f2;
}

.artIcon > span {
  position: absolute;
  display: block;
}

.iconHead {
  width: 20px;
  height: 20px;
  left: 24px;
  top: 9px;
  border-radius: 999px;
  background: #f7d58c;
}

.iconBody {
  width: 28px;
  height: 20px;
  left: 20px;
  top: 28px;
  border-radius: 10px 10px 5px 5px;
  background: #62c58f;
}

.iconAccent {
  width: 12px;
  height: 12px;
  right: 10px;
  top: 10px;
  border-radius: 999px;
  background: #f0cf4d;
}

.iconGround {
  width: 50px;
  height: 5px;
  left: 9px;
  bottom: 5px;
  border-radius: 999px;
  background: rgba(23, 32, 27, 0.16);
}

.artIcon-cartoon-3d {
  background: radial-gradient(circle at 35% 24%, #ffffff 0 10%, #aae8ce 42%, #548fbd 100%);
}

.artIcon-cartoon-3d .iconHead,
.artIcon-cartoon-3d .iconBody {
  box-shadow: 4px 5px 0 rgba(15, 31, 26, 0.22);
}

.artIcon-cartoon-2d {
  background: linear-gradient(135deg, #f7e8a5, #a8dfc3);
}

.artIcon-cartoon-2d .iconHead,
.artIcon-cartoon-2d .iconBody {
  border: 3px solid #18251f;
  box-shadow: none;
}

.artIcon-flash-web-cartoon {
  background: linear-gradient(180deg, #73d7d2 0 48%, #b98972 48% 100%);
}

.artIcon-flash-web-cartoon .iconHead {
  left: 22px;
  top: 12px;
  width: 28px;
  height: 28px;
  border: 3px solid #111;
  border-radius: 999px;
  background: #f2eadc;
}

.artIcon-flash-web-cartoon .iconHead::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 13px;
  left: -5px;
  top: -7px;
  border-radius: 18px 20px 3px 3px;
  background: #090909;
  transform: rotate(-7deg);
}

.artIcon-flash-web-cartoon .iconBody {
  left: 25px;
  top: 39px;
  width: 22px;
  height: 20px;
  border: 3px solid #111;
  border-radius: 5px;
  background: #f0b84d;
}

.artIcon-flash-web-cartoon .iconAccent {
  left: 31px;
  top: 25px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #111;
  box-shadow: 10px 1px 0 #111;
}

.artIcon-comic {
  background:
    radial-gradient(circle, rgba(24, 37, 31, 0.2) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #ffe45e, #ff7b57);
  background-size: 12px 12px, auto;
}

.artIcon-comic .iconHead,
.artIcon-comic .iconBody {
  border: 3px solid #111;
}

.artIcon-comic .iconAccent {
  width: 18px;
  height: 10px;
  transform: rotate(-18deg);
  border-radius: 2px;
  background: #fff;
}

.artIcon-anime {
  background: linear-gradient(145deg, #f9c6df, #9ed6ff);
}

.artIcon-anime .iconHead {
  width: 24px;
  height: 24px;
  left: 22px;
  border-radius: 50% 50% 46% 46%;
}

.artIcon-anime .iconAccent {
  width: 20px;
  height: 4px;
  left: 24px;
  top: 20px;
  border-radius: 999px;
  background: #1a2220;
}

.artIcon-block-toy-style {
  background: #e9f1ee;
}

.artIcon-block-toy-style .iconHead,
.artIcon-block-toy-style .iconBody,
.artIcon-block-toy-style .iconAccent {
  border-radius: 3px;
}

.artIcon-block-toy-style .iconHead {
  background: #f3cf56;
}

.artIcon-voxel-game-style {
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1px),
    linear-gradient(135deg, #7ccf64 0 45%, #9b7246 45% 100%);
  background-size: 12px 12px, 12px 12px, auto;
}

.artIcon-voxel-game-style .iconHead,
.artIcon-voxel-game-style .iconBody,
.artIcon-voxel-game-style .iconAccent {
  border-radius: 0;
}

.artIcon-brick-figure-style {
  background: linear-gradient(135deg, #d94f42, #f4d45a);
}

.artIcon-brick-figure-style .iconHead {
  border-radius: 7px;
}

.artIcon-brick-figure-style .iconHead::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  left: 4px;
  top: -5px;
  border-radius: 4px 4px 0 0;
  background: inherit;
}

.artIcon-brick-figure-style .iconBody {
  border-radius: 4px;
  background: #2f7ed8;
}

.artIcon-child-like-drawing {
  border-style: dashed;
  background: #fff8df;
}

.artIcon-child-like-drawing .iconHead {
  border: 3px solid #25322b;
  background: transparent;
}

.artIcon-child-like-drawing .iconBody {
  border: 3px solid #e8564a;
  background: transparent;
  transform: rotate(-5deg);
}

.artIcon-child-like-drawing .iconAccent {
  width: 18px;
  height: 18px;
  border: 3px solid #f0cf4d;
  background: transparent;
}

.artIcon-crazy-doodle-style {
  border: 3px solid #111;
  background: #fff;
  transform: rotate(-2deg);
}

.artIcon-crazy-doodle-style::after {
  content: "Hi";
  position: absolute;
  right: 6px;
  top: 6px;
  color: #f04d16;
  font-size: 11px;
  font-weight: 900;
  transform: rotate(8deg);
}

.artIcon-crazy-doodle-style .iconHead {
  left: 18px;
  top: 11px;
  width: 24px;
  height: 23px;
  border: 4px solid #050505;
  border-radius: 6px 12px 5px 10px;
  background: #b87a16;
  box-shadow:
    -5px -5px 0 -2px #050505,
    6px -7px 0 -3px #050505,
    10px -2px 0 -4px #050505;
}

.artIcon-crazy-doodle-style .iconBody {
  left: 15px;
  top: 34px;
  width: 32px;
  height: 24px;
  border: 4px solid #050505;
  border-radius: 3px;
  background: #ef4b16;
  transform: rotate(3deg);
}

.artIcon-crazy-doodle-style .iconAccent {
  left: 43px;
  top: 16px;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #050505;
  transform: rotate(-28deg);
}

.artIcon-stickman-style-2 {
  background: #eef5f2;
}

.artIcon-stickman-style-2 .iconHead {
  border: 3px solid #13221b;
  background: transparent;
}

.artIcon-stickman-style-2 .iconBody {
  width: 4px;
  height: 22px;
  left: 32px;
  top: 29px;
  border-radius: 999px;
  background: #13221b;
}

.artIcon-stickman-style-2 .iconAccent {
  width: 34px;
  height: 3px;
  left: 17px;
  top: 35px;
  transform: rotate(-14deg);
  border-radius: 999px;
  background: #13221b;
}

.artIcon-custom-style {
  background: linear-gradient(135deg, #1b2a24, #62c58f);
}

.artIcon-custom-style .iconHead,
.artIcon-custom-style .iconBody,
.artIcon-custom-style .iconAccent {
  background: rgba(255, 255, 255, 0.82);
}

.selectedArtPreview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #d7e1dc;
  border-radius: 8px;
  background: #f7faf8;
}

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

.selectedArtPreview strong {
  color: #17201b;
}

.selectedArtPreview span {
  color: #63756b;
  font-size: 13px;
  font-weight: 700;
}

.uploadField {
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbf9;
}

.customStylePanel {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbf9;
}

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

.uploadHeader small {
  color: #74867d;
  font-size: 12px;
  font-weight: 700;
}

.uploadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #cddbd4;
  border-radius: 8px;
  color: #285440;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.uploadButton input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mutedText {
  margin: 0;
  color: #63756b;
  font-size: 14px;
}

.statusMessage {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  color: #4f6359;
  background: #f8fbf9;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.statusMessage.compactStatus {
  margin: -2px 0 13px;
  padding: 8px 10px;
}

.listStack,
.sceneTable {
  display: grid;
  gap: 12px;
}

.profileRow {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(130px, auto);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #dfe8e3;
  border-radius: 8px;
  background: #f7faf8;
}

.avatarPlaceholder {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 8px;
  color: #17201b;
  background: linear-gradient(145deg, #cfe6db, #f2d97b);
  font-size: 24px;
  font-weight: 900;
}

.avatarPlaceholder.imageAvatar {
  overflow: hidden;
  padding: 0;
  background: #0d1512;
}

.avatarPlaceholder.imageAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileBody {
  display: grid;
  gap: 8px;
}

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

.profileMetaGrid label {
  display: grid;
  gap: 6px;
}

.profileBody span {
  color: #62746b;
  font-size: 12px;
  font-weight: 800;
}

.inlineStatus {
  display: block;
  color: #62746b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.profileActions {
  display: grid;
  gap: 8px;
}

.characterReferencePanel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
}

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

.characterReferencePanel strong {
  color: #17201b;
  font-size: 13px;
}

.characterReferencePanel span,
.characterReferencePanel p {
  margin: 3px 0 0;
  color: #62746b;
  font-size: 12px;
  line-height: 1.45;
}

.characterReferencePanel img {
  width: min(240px, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #dce6e1;
  border-radius: 8px;
}

.candidateChooser {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

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

.candidateChooserHeader > strong {
  color: #17201b;
  font-size: 13px;
}

.candidateChooserHeader > span {
  color: #62746b;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.candidateScrollControls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.iconScrollButton {
  min-width: 0;
  width: 38px;
  height: 38px;
  padding: 0;
}

.candidateScroller {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.candidateScroller:focus {
  outline: 2px solid rgba(232, 197, 91, 0.45);
  outline-offset: 3px;
}

.candidateGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.candidateOption {
  display: grid;
  gap: 6px;
  flex: 0 0 128px;
  padding: 8px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  color: #17201b;
  background: #f8fbf9;
  text-align: left;
  scroll-snap-align: start;
}

.candidateOption.selected {
  border-color: #e8c55b;
  box-shadow: 0 0 0 2px rgba(232, 197, 91, 0.3);
}

.candidateOption img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.candidateOption span {
  color: inherit;
  font-size: 12px;
  font-weight: 850;
}

.imageGenerateButton.loading {
  opacity: 0.86;
}

.buttonSpinner,
.loadingSpinner {
  display: inline-block;
  border-radius: 999px;
  border: 2px solid rgba(232, 197, 91, 0.28);
  border-top-color: #e8c55b;
  animation: spin 0.85s linear infinite;
}

.buttonSpinner {
  width: 14px;
  height: 14px;
}

.loadingSpinner {
  width: 34px;
  height: 34px;
}

.imageLoadingState {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed #dce6e1;
  border-radius: 8px;
  background: rgba(232, 197, 91, 0.08);
  text-align: center;
}

.imageLoadingState strong {
  color: #17201b;
}

.imageLoadingState p {
  margin: 0;
}

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

.approveButton {
  padding: 0 12px;
  border: 1px solid #cddbd4;
  color: #2d5c49;
  background: #fff;
}

.approveButton.approved {
  border-color: transparent;
  color: #102017;
  background: #bce5ce;
}

.approveAllScenesButton.ready {
  border-color: #77d39a;
  color: #102017;
  background: #77d39a;
  box-shadow: 0 0 0 3px rgba(119, 211, 154, 0.18);
}

.approveAllScenesButton.loading {
  opacity: 0.9;
}

.sceneReadinessBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #dfe8e3;
  border-radius: 8px;
  background: rgba(232, 197, 91, 0.08);
}

.sceneReadinessBanner.go {
  border-color: rgba(119, 211, 154, 0.78);
  background: rgba(119, 211, 154, 0.16);
}

.sceneReadinessIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #102017;
  background: #e8c55b;
  font-size: 14px;
  font-weight: 950;
}

.sceneReadinessBanner.go .sceneReadinessIcon {
  background: #77d39a;
}

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

.sceneReadinessBanner strong {
  color: #f6f8f4;
  font-size: 18px;
  font-weight: 950;
}

.sceneReadinessBanner span {
  margin-top: 3px;
  color: #a7b8ae;
  font-size: 14px;
  font-weight: 750;
}

.sceneRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 136px;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe8e3;
  border-radius: 8px;
  background: #fff;
}

.sceneIndex {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: #1b2b24;
  background: #e8f0eb;
  font-weight: 900;
}

.sceneFields {
  display: grid;
  gap: 8px;
}

.sceneFields label {
  display: grid;
  gap: 6px;
}

.sceneFields label span {
  color: #62746b;
  font-size: 12px;
  font-weight: 850;
}

.sceneMeta {
  display: grid;
  gap: 9px;
  align-content: start;
}

.sceneMeta label {
  display: grid;
  gap: 6px;
  color: #62746b;
  font-size: 12px;
  font-weight: 800;
}

.timingBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 8px;
  color: #1f5b43;
  background: #dff3e7;
  font-size: 12px;
  font-weight: 850;
}

.timingBadge.warning {
  color: #74440f;
  background: #ffe3b8;
}

.announcementBar {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(300px, 1.05fr) minmax(420px, 1.5fr) 130px minmax(230px, 0.9fr);
  align-items: center;
  gap: 14px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(28, 43, 36, 0.12);
  background: #22352d;
  color: #edf8f2;
}

.sidebar .announcementBar {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: #101d18;
}

.sidebar .announcementTitle {
  align-items: flex-start;
}

.sidebar .announcementTitle > span {
  width: 30px;
  height: 30px;
}

.sidebar .announcementTitle strong {
  font-size: 13px;
}

.sidebar .announcementTitle small {
  font-size: 11px;
}

.announcementTitle,
.costHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcementTitle > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: #1a2b23;
  background: #e8c55b;
  font-size: 12px;
  font-weight: 900;
}

.timestampBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #17201b;
  background: #e8c55b;
  font-size: 12px;
  font-weight: 900;
}

.imageControlGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.imageControlGrid .field {
  margin: 0;
}

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

.splitPromptStack > div,
.promptDetail {
  padding: 10px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbf9;
}

.collapsedPromptStack {
  margin-top: 10px;
  gap: 6px;
}

.promptDetail {
  padding: 0;
  overflow: hidden;
}

.promptDetail summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.promptDetail summary::-webkit-details-marker {
  display: none;
}

.promptExpandIcon {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #17201b;
  background: #e8c55b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.promptDetail[open] .promptExpandIcon {
  font-size: 0;
}

.promptDetail[open] .promptExpandIcon::before {
  content: "-";
  font-size: 18px;
}

.splitPromptStack strong {
  display: block;
  margin-bottom: 0;
  color: #17201b;
  font-size: 13px;
}

.splitPromptStack textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 9px;
  color: #25362f;
  background: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.promptDetail textarea {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
}

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

.announcementTitle strong {
  font-size: 14px;
}

.announcementTitle small {
  margin-top: 2px;
  color: #aebfb7;
  font-size: 12px;
}

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

.sidebar .announcementMetrics,
.sidebar .modelSelectors,
.sidebar .approvalSummary {
  grid-template-columns: 1fr;
}

.sidebar .modelSelectors {
  gap: 7px;
}

.sidebar .modelSelectors select {
  width: 100%;
}

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

.modelSelectors label {
  display: grid;
  gap: 4px;
  color: #bdd0c7;
  font-size: 11px;
  font-weight: 850;
}

.modelSelectors select {
  min-height: 34px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #eef8f2;
  background: #1a2b24;
  font-size: 12px;
  font-weight: 760;
}

.metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar .metric {
  min-height: 46px;
  padding: 7px 8px;
}

.sidebar .metric span,
.sidebar .metric small {
  font-size: 11px;
}

.sidebar .metric strong {
  font-size: 13px;
}

.metric span,
.totalLine span {
  color: #bdd0c7;
  font-size: 13px;
  font-weight: 760;
}

.metric strong,
.totalLine strong {
  color: #fff;
  font-size: 15px;
}

.metric small {
  grid-column: 1 / -1;
  color: #aabdb4;
  font-size: 12px;
}

.creditPill {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 54px;
  align-content: center;
  border-radius: 8px;
  color: #16251f;
  background: #e8c55b;
}

.sidebar .creditPill {
  min-height: 46px;
}

.sidebar .creditPill strong {
  font-size: 19px;
}

.creditPill span {
  font-size: 11px;
  font-weight: 850;
}

.creditPill strong {
  font-size: 23px;
  line-height: 1;
}

.creditPill small {
  max-width: 100%;
  color: rgba(16, 37, 31, 0.72);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

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

.approvalSummary {
  display: grid;
  gap: 7px;
}

.progressRow {
  display: grid;
  gap: 5px;
}

.progressRow div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d7e7df;
  font-size: 12px;
}

.progressTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.progressTrack span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #72d29d;
}

.noteStack {
  gap: 14px;
}

.noteItem {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
}

.noteItem strong {
  display: block;
  font-size: 13px;
}

.noteItem p {
  margin: 3px 0 0;
  color: #66786f;
  font-size: 12px;
  line-height: 1.45;
}

.previewBox {
  padding: 16px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f7faf8;
}

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

.previewBox p {
  margin: 0;
  color: #53665d;
  line-height: 1.6;
}

.previewBox pre {
  max-height: 520px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: #25362f;
  font-size: 13px;
  line-height: 1.5;
}

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

.promptCard {
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
}

.imageFrame {
  display: grid;
  aspect-ratio: 16 / 10;
  place-items: center;
  border-radius: 8px;
  color: #1a2c24;
  background:
    linear-gradient(135deg, rgba(232, 197, 91, 0.66), rgba(86, 154, 124, 0.28)),
    #e7f0eb;
  font-weight: 900;
}

.generatedSceneFrame {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

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

.fullViewHint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 6px;
  color: #101b15;
  background: #f0cf4d;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 140ms ease;
}

.generatedSceneFrame:hover .fullViewHint,
.generatedSceneFrame:focus-visible .fullViewHint {
  opacity: 1;
}

.imageViewerBackdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 7, 4, 0.92);
}

.imageViewer {
  display: grid;
  width: min(96vw, 1500px);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(240, 207, 77, 0.52);
  border-radius: 8px;
  background: #0b1711;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.imageViewerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  color: #f6f7ec;
  border-bottom: 1px solid rgba(220, 230, 225, 0.16);
}

.imageViewerClose {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  color: #101b15;
  background: #f0cf4d;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.imageViewerCanvas {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 12px;
  background: #050b07;
}

.imageViewerCanvas img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 76px);
  object-fit: contain;
}

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

.sceneImageActions span {
  color: #9dac9f;
  font-size: 13px;
  line-height: 1.4;
}

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

.sceneImageSwap select,
.sceneImageSwap button {
  min-height: 38px;
}

.sceneImageSwap select {
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(220, 230, 225, 0.22);
  border-radius: 6px;
  color: #f6f7ec;
  background: #0a150f;
}

.sceneQuickRemix {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(220, 230, 225, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.sceneQuickRemix.active {
  border-color: rgba(232, 197, 91, 0.58);
  background: rgba(232, 197, 91, 0.1);
}

.sceneQuickRemixHeader,
.sceneQuickRemixControls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sceneQuickRemixHeader {
  justify-content: space-between;
}

.sceneQuickRemixHeader strong {
  color: #f6f7ec;
  font-size: 13px;
}

.sceneQuickRemixControls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(220, 230, 225, 0.16);
  border-radius: 999px;
  color: #dce6e1;
  background: rgba(10, 21, 15, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.sceneQuickRemixControls input {
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
}

.sceneQuickRemixControls .ghostActionButton {
  min-height: 34px;
  padding: 6px 10px;
}

.sceneQuickRemixDirection {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(220, 230, 225, 0.18);
  border-radius: 8px;
  color: #f6f7ec;
  background: rgba(6, 14, 10, 0.84);
  font-size: 13px;
  line-height: 1.35;
  resize: vertical;
}

.sceneQuickRemixDirection::placeholder {
  color: rgba(220, 230, 225, 0.54);
}

.secondaryImageControls {
  margin-top: 12px;
}

.consistencyPanel {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(220, 230, 225, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

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

.consistencyGroup + .consistencyGroup {
  padding-top: 14px;
  border-top: 1px solid rgba(220, 230, 225, 0.14);
}

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

.consistencyGroupHeader strong {
  color: var(--text);
}

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

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

.characterConsistencyCard {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}

.characterConsistencyCard > button {
  grid-column: 1 / -1;
}

.characterConsistencyCard.missing {
  border-color: rgba(255, 181, 157, 0.38);
}

.characterConsistencyPreview {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  color: #101b15;
  background: var(--accent);
  font-weight: 900;
}

.characterConsistencyPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.characterConsistencyCard strong {
  color: var(--text);
}

.characterConsistencyCard small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

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

.consistencyHeader h3 {
  margin: 0 0 4px;
  color: #f6f7ec;
  font-size: 18px;
}

.consistencyHeader p {
  margin: 0;
  color: #9dac9f;
  line-height: 1.4;
}

.consistencyHeader > span {
  color: #f0cf4d;
  font-weight: 900;
  white-space: nowrap;
}

.locationMasterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.locationMasterCard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(220, 230, 225, 0.16);
  border-radius: 8px;
  background: rgba(7, 20, 14, 0.46);
}

.locationMasterPreview {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 207, 77, 0.35), rgba(112, 184, 142, 0.2));
  color: #f6f7ec;
  font-weight: 900;
}

.locationMasterPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locationMasterCard strong {
  display: block;
  color: #f6f7ec;
  font-size: 16px;
}

.locationMasterCard small {
  display: block;
  margin-top: 4px;
  color: #9dac9f;
  line-height: 1.35;
}

.promptCard h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.promptCard p {
  margin: 0;
  color: #5d6f66;
  font-size: 13px;
  line-height: 1.5;
}

.timeline {
  display: flex;
  gap: 8px;
  min-height: 140px;
  padding: 14px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #f8fbf9, #f8fbf9 38px, #eef4f1 39px);
}

.timelineClip {
  display: grid;
  align-content: center;
  min-width: 112px;
  padding: 12px;
  border-radius: 8px;
  color: #142019;
  background: #dbeee4;
}

.timelineClip span {
  margin-top: 6px;
  color: #567164;
  font-size: 12px;
}

.pageStrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.pageTile {
  display: grid;
  gap: 8px;
  min-height: 132px;
  align-content: end;
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
}

.pageTile span {
  color: #6b7d73;
  font-size: 12px;
  font-weight: 800;
}

.emptyState {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed #c7d7cf;
  border-radius: 8px;
  color: #66786f;
  background: #f8fbf9;
  font-size: 14px;
  text-align: center;
}

.outputChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.voiceChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.outputChoice,
.voiceChoice,
.templateCard {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.outputChoice.selected,
.voiceChoice.selected,
.templateCard.selected {
  border-color: #72aa90;
  background: #f1faf5;
  box-shadow: inset 3px 0 0 #4e9f79;
}

.outputChoice span,
.voiceChoice span,
.templateCard strong {
  color: #17201b;
  font-size: 16px;
  font-weight: 850;
}

.outputChoice small,
.voiceChoice small,
.templateCard span {
  color: #64766d;
  font-size: 13px;
  line-height: 1.45;
}

.voiceChoice input {
  width: 18px;
  height: 18px;
  accent-color: #f0cf4d;
}

.voiceModePanel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.voiceProviderHeader {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.voiceProviderSettings {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.voiceSourcePanel {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.voiceSourcePanel p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.voiceStudioToolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.8fr);
  gap: 14px;
  align-items: end;
}

.voiceProgress {
  display: grid;
  gap: 4px;
  min-height: 78px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1512;
}

.voiceProgress strong {
  color: var(--text);
  font-size: 20px;
}

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

.voiceProgress div {
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.voiceProgress i {
  display: block;
  height: 100%;
  background: var(--accent-2);
}

.voiceCleanupRuleNote {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  background: rgba(240, 201, 90, 0.06);
  font-size: 12px;
  line-height: 1.5;
}

.voiceChunkList {
  display: grid;
  gap: 10px;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 4px;
}

.voiceChunk {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.voiceChunk.ready {
  box-shadow: inset 3px 0 0 var(--accent-2);
}

.generatedVoiceChunk.ready {
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent-2));
}

.voiceChunk.recording {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.voiceChunkHeader,
.voiceChunkHeader > div,
.voiceChunkActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voiceChunkHeader {
  justify-content: space-between;
}

.voiceChunkHeader > div:first-child {
  min-width: 0;
  flex-wrap: wrap;
}

.voiceChunkHeader strong {
  color: var(--text);
}

.voiceChunkHeader small,
.voiceChunk p {
  color: var(--muted);
}

.voiceChunk audio {
  width: 100%;
}

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

.videoGlobalControls {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) auto minmax(160px, 0.7fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.videoGlobalControls .field {
  margin: 0;
}

.videoGlobalControls .field select {
  min-height: 40px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
}

.videoGlobalControls .bookOverlayToggle {
  min-height: 40px;
  padding: 8px 12px;
}

.videoRenderActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.videoRenderActions span {
  color: var(--muted);
  font-size: 13px;
}

.videoTimeline .timelineClip.ready {
  box-shadow: inset 0 -3px 0 var(--accent-2);
}

.videoTimeline {
  max-width: 100%;
  min-height: 118px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}

.videoTimeline .timelineClip {
  flex: 0 0 132px;
  flex-grow: 0 !important;
  min-width: 132px;
}

.videoCanvasEditor {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: calc(100vh - 180px);
}

.videoMusicPanel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

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

.videoMusicHeader strong {
  color: var(--text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 950;
}

.videoMusicHeader span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.videoMusicHeader audio {
  width: min(280px, 40vw);
  height: 34px;
}

.videoMusicGrid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 12px;
  align-items: start;
}

.videoMusicColumn,
.musicMiniSection {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.musicStepLabel {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.videoMusicPanel select,
.videoMusicPanel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font-weight: 850;
}

.videoMusicPanel select {
  min-height: 46px;
  padding: 8px 12px;
}

.videoMusicPanel textarea {
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
}

.musicCompactRow,
.musicGenerateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.musicCompactRow {
  justify-content: space-between;
}

.musicVolumeControl {
  display: grid;
  flex: 1 1 220px;
  gap: 4px;
}

.musicVolumeControl span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.musicUploadButton {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.musicUploadButton input {
  display: none;
}

.musicSuggestionChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 86px;
  overflow: auto;
}

.compactMusicStatus {
  margin: 0;
  font-size: 13px;
}

.videoSfxPanel {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.45fr) auto auto auto minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.videoSfxPanel > div {
  display: grid;
  gap: 2px;
}

.videoSfxPanel strong {
  color: var(--text);
  font-size: 15px;
}

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

.sfxGlobalVolume {
  min-width: 150px;
}

.sfxLibraryNote {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoThumbnailPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

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

.videoThumbnailHeader strong {
  display: block;
  color: var(--text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 950;
}

.videoThumbnailHeader span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

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

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

.thumbnailIdeaCard.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(239, 211, 80, 0.22);
}

.thumbnailIdeaTop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

.thumbnailIdeaNumber {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #06100b;
  background: var(--accent);
  font-weight: 950;
}

.thumbnailIdeaCard input,
.thumbnailIdeaCard textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font-weight: 850;
}

.thumbnailIdeaCard input {
  min-height: 40px;
  padding: 8px 10px;
}

.thumbnailIdeaCard textarea {
  min-height: 118px;
  padding: 10px;
  resize: vertical;
}

.thumbnailPreview {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  font-weight: 900;
}

.thumbnailPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnailPreview span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #06100b;
  background: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.thumbnailPreview.empty span {
  position: static;
  color: var(--muted);
  background: transparent;
}

.thumbnailRationale,
.thumbnailStatus {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

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

.thumbnailDownloadLink {
  text-decoration: none;
}

.youtubeDescriptionPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.amazonBookDescriptionPanel {
  margin: 18px 0;
}

.youtubeDescriptionTextarea {
  width: 100%;
  min-height: 230px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.45;
  resize: vertical;
}

.youtubeTagsBlock {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.videoThumbnailHeader.compactHeader strong {
  font-size: clamp(18px, 1.6vw, 24px);
}

.youtubeTagsTextarea {
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  resize: vertical;
}

.youtubeTagsTextarea.overLimit {
  border-color: #ff7b7b;
  box-shadow: 0 0 0 2px rgba(255, 123, 123, 0.18);
}

.youtubeDescriptionTextarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.youtubeTagsTextarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.youtubeDescriptionMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.youtubeDescriptionMeta .overLimitText {
  color: #ff9c9c;
}

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

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

  .videoMusicHeader audio {
    width: 100%;
  }

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

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

.videoFilmstrip {
  display: flex;
  gap: 8px;
  max-width: 100%;
  min-height: 156px;
  padding: 10px 12px 58px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(245, 248, 246, 0.96);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
  scrollbar-width: thin;
}

.videoTransitionInline {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  align-self: center;
}

.videoTransitionAddButton {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(10, 21, 17, 0.2);
  border-radius: 999px;
  color: #07110d;
  background: var(--accent);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.videoTransitionInline.open .videoTransitionAddButton {
  box-shadow: 0 0 0 3px rgba(241, 211, 80, 0.25);
}

.videoTransitionAllToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #07110d;
  font-size: 11px;
  font-weight: 950;
}

.videoTransitionAllToggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.videoTransitionPopover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 24;
  display: flex;
  width: max-content;
  max-width: min(78vw, 540px);
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%);
}

.transitionMenuLabel {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.transitionChipGroup {
  display: flex;
  align-items: center;
  gap: 6px;
}

.transitionChip,
.transitionMiniInput {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 12px;
  font-weight: 850;
}

.transitionChip {
  padding: 7px 10px;
  cursor: pointer;
}

.transitionChip:hover,
.transitionChip.selected {
  border-color: var(--accent);
  color: #07110d;
  background: var(--accent);
}

.transitionMiniInput {
  width: 58px;
  padding: 5px 7px;
}

.videoFilmstripItem {
  display: grid;
  grid-template-rows: 54px auto auto;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  text-align: left;
}

.videoFilmstripScene {
  display: grid;
  flex: 0 0 118px;
  gap: 5px;
  align-self: stretch;
}

.filmstripSfxControls {
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(10, 21, 17, 0.14);
  border-radius: 7px;
  background: rgba(7, 17, 13, 0.08);
}

.filmstripSfxControls select {
  width: 100%;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--bg);
  font-size: 11px;
  font-weight: 850;
}

.videoFilmstripItem.selected {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.videoFilmstripItem.audioReady {
  box-shadow: inset 0 -3px 0 var(--accent-2);
}

.videoFilmstripItem.selected.audioReady {
  box-shadow:
    inset 0 -3px 0 var(--accent-2),
    0 0 0 2px rgba(240, 207, 77, 0.18);
}

.filmstripThumb {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #050907;
}

.filmstripThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videoFilmstripItem strong {
  color: inherit;
  font-size: 13px;
  line-height: 1;
}

.videoFilmstripItem small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}

.videoEditorShell {
  display: contents;
}

.videoEditorToolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  width: 100%;
  max-width: min(100%, 1320px);
  min-height: 92px;
  gap: 7px;
  align-items: center;
  align-content: center;
  justify-self: center;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 28px;
  color: #0a1511;
  background: rgba(247, 250, 246, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  scrollbar-width: thin;
}

.videoToolbarRow {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-wrap: wrap;
}

.videoToolbarRowSecondary {
  flex-wrap: wrap;
  row-gap: 6px;
}

.videoToolbarRowPrimary .videoToolbarLayerSection {
  flex: 1 1 auto;
  min-width: 0;
}

.videoToolbarSection {
  display: flex;
  min-width: 0;
  min-height: 34px;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(13, 25, 20, 0.14);
  border-radius: 0;
  background: transparent;
}

.videoToolbarSection h3 {
  display: none;
}

.videoToolbarSceneInfo {
  flex: 1 1 160px;
  max-width: 210px;
  padding-left: 0;
}

.videoToolbarSceneInfo strong {
  display: block;
  overflow: hidden;
  color: #0a1511;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoToolbarSceneInfo small {
  color: rgba(10, 21, 17, 0.62);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.videoToolbarStatus {
  display: none;
}

.videoToolbarHint {
  padding: 7px 10px;
  color: rgba(10, 21, 17, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.videoToolbarActions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.videoEditorToolbar label,
.videoEditorToolbar .compactControlField,
.videoEditorToolbar .videoLayerEditor label span {
  color: rgba(10, 21, 17, 0.72);
}

.videoEditorToolbar input[type="range"] {
  width: 64px;
  height: 18px;
}

.paceStepper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.videoEditorToolbar .paceStepButton {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
}

.paceNumberInput {
  width: 74px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(10, 21, 17, 0.18);
  border-radius: 7px;
  color: #0a1511;
  background: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.videoEditorToolbar .compactLayerTextInput {
  width: 116px;
  min-height: 32px;
  padding: 6px 8px;
  border-color: rgba(10, 21, 17, 0.18);
  color: #0a1511;
  background: #ffffff;
  font-size: 11px;
}

.videoEditorToolbar .bookOverlayToggle {
  min-height: 32px;
  padding: 5px 8px;
  color: #0a1511;
  background: rgba(10, 21, 17, 0.05);
}

.videoEditorToolbar .videoLayerChip {
  min-height: 28px;
  padding: 5px 8px;
  color: #0a1511;
  background: rgba(10, 21, 17, 0.06);
}

.videoEditorToolbar .videoLayerChip.selected {
  background: var(--accent);
  color: #07100c;
}

.videoEditorToolbar .iconToolButton {
  border-color: rgba(10, 21, 17, 0.18);
  color: #0a1511;
  background: #f8faf8;
}

.videoEditorToolbar .videoBackgroundControls {
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.canvasRenderActions {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.canvasRenderActions .primaryButton,
.canvasRenderActions .ghostActionButton {
  min-height: 34px;
  padding: 7px 12px;
  border-color: rgba(10, 21, 17, 0.24);
  color: #0a1511;
  background: #f8faf8;
  font-size: 12px;
}

.videoEditorToolbar .primaryButton,
.videoEditorToolbar .ghostActionButton,
.videoEditorToolbar .ghostActionButton:disabled,
.videoEditorToolbar .primaryButton:disabled {
  color: #0a1511;
  background: #f8faf8;
  opacity: 1;
}

.videoEditorToolbar .primaryButton {
  background: var(--accent);
}

.videoEditorToolbar .ghostActionButton:disabled,
.videoEditorToolbar .primaryButton:disabled {
  color: rgba(10, 21, 17, 0.52);
  background: rgba(10, 21, 17, 0.08);
}

.videoAiToolGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

.videoAiToolGrid .ghostActionButton {
  min-height: 32px;
  padding: 6px 9px;
  border-color: rgba(10, 21, 17, 0.24);
  color: #0a1511;
  background: #f8faf8;
  font-size: 10px;
}

.videoAiToolGrid .ghostActionButton.iconOnlyMini {
  min-width: 32px;
  width: 32px;
  padding: 4px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.videoEditorToolbar .videoLayerEditor,
.videoEditorToolbar .videoBackgroundControls,
.videoEditorToolbar .toolbarPositionControls {
  display: flex;
  grid-template-columns: none;
  align-items: center;
}

.videoEditorToolbar .videoLayerEditor {
  flex: 1 1 420px;
  max-width: min(100%, 720px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.videoEditorToolbar .videoLayerStrip {
  display: flex;
  max-width: 170px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
}

.videoEditorToolbar .videoBackgroundHeader {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.videoEditorToolbar .videoBackgroundHeader strong,
.videoEditorToolbar .toolbarPositionControls label span {
  display: none;
}

.videoEditorToolbar .videoBackgroundHeader .compact {
  min-height: 32px;
  padding: 5px 8px;
  color: #0a1511;
  border-color: rgba(10, 21, 17, 0.24);
}

.videoEditorToolbar .videoColorSwatches {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: min(360px, 34vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
}

.videoEditorToolbar .videoColorSwatch {
  flex: 0 0 26px;
}

.videoEditorToolbar .compactControlField select,
.videoEditorToolbar .field select {
  min-height: 34px;
  max-width: 126px;
  padding: 7px 30px 7px 10px;
  color: #0a1511;
  background-color: #ffffff;
  font-size: 12px;
}

.videoEditorToolbar .videoPageQuickActions {
  flex: 0 0 auto;
}

.videoEditorToolbar .videoMotionSection {
  flex: 0 0 auto;
  margin-left: 0;
  padding-left: 8px;
}

.videoEditorToolbar .videoMotionSection select {
  max-width: 96px;
}

.videoEditorToolbar .motionIntensityField input {
  width: 58px;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid rgba(10, 21, 17, 0.18);
  border-radius: 7px;
  color: #0a1511;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.videoEditorToolbar .compactCaptionLayerEditor {
  flex: 0 1 auto;
  max-width: 360px;
  gap: 8px;
}

.videoEditorToolbar .compactCaptionLayerEditor .videoToolbarHint {
  padding: 0;
  color: rgba(10, 21, 17, 0.64);
  background: transparent;
  white-space: nowrap;
}

.videoEditorToolbar .compactOverlayLayerEditor {
  flex: 1 1 auto;
  max-width: min(620px, 48vw);
  gap: 8px;
  overflow: visible;
}

.videoEditorToolbar .compactImageLayerEditor {
  flex: 0 1 520px;
  max-width: min(520px, 100%);
}

.videoEditorToolbar .compactTextLayerEditor {
  flex: 0 1 470px;
  max-width: min(470px, 100%);
}

.videoEditorToolbar .compactOverlayLayerEditor strong {
  max-width: 86px;
  overflow: hidden;
  color: rgba(10, 21, 17, 0.68);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoEditorToolbar .compactOverlayLayerEditor .compactLayerTextInput {
  width: 82px;
}

.videoEditorToolbar .compactOverlayLayerEditor label {
  flex: 0 0 auto;
  min-width: 54px;
}

.videoEditorToolbar .compactOverlayLayerEditor label span {
  display: none;
}

.videoEditorToolbar .videoLayerMetaControls,
.videoEditorToolbar .videoLayerOrderButtons {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  gap: 5px;
  align-items: center;
}

.videoEditorToolbar .videoLayerMetaControls {
  flex: 0 0 auto;
}

.videoEditorToolbar .compactTextLayerEditor .videoLayerMetaControls {
  flex: 0 0 auto;
}

.videoEditorToolbar .videoLayerOrderButtons {
  flex-wrap: nowrap;
}

.videoEditorToolbar .compactTextLayerEditor .videoLayerOrderButtons,
.videoEditorToolbar .compactImageLayerEditor .videoLayerOrderButtons {
  margin-left: auto;
}

.videoEditorToolbar .compactLayerButton {
  min-width: 32px;
  min-height: 30px;
  padding: 5px 5px;
  font-size: 9px;
}

.videoPrecisionControl {
  display: flex !important;
  flex: 0 0 auto;
  min-width: 0 !important;
  gap: 4px !important;
  align-items: center;
}

.videoEditorToolbar .videoPrecisionControl span {
  display: none;
}

.videoEditorToolbar .videoPrecisionControl input[type="range"] {
  width: 46px;
}

.videoPrecisionNumber {
  width: 38px;
  min-height: 30px;
  padding: 4px 5px;
  border: 1px solid rgba(10, 21, 17, 0.18);
  border-radius: 7px;
  color: #0a1511;
  background: #ffffff;
  font-size: 11px;
  font-weight: 850;
}

.videoCanvasWorkspace {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: center;
  min-height: min(62vh, 720px);
}

.videoCanvasHeader,
.videoCanvasBottomBar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(100%, 1320px);
  justify-self: center;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.videoCanvasHeader div {
  display: grid;
  gap: 2px;
  text-align: center;
}

.videoCanvasNavCluster {
  display: flex !important;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

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

.quickPreviewButton {
  min-height: 36px;
  padding: 6px 12px;
  white-space: nowrap;
}

.canvasPlayButton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  min-width: 92px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  color: #07110d;
  background: var(--accent);
  box-shadow: 0 8px 22px rgba(241, 211, 80, 0.22);
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.canvasPlayButton .playProgressFill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--play-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f8e98d);
  transition: width 90ms linear;
}

.canvasPlayButton .playProgressLabel {
  position: relative;
  z-index: 1;
}

.canvasPlayButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.canvasPlayButton.isPlaying {
  background: #fffdf7;
  color: #07110d;
  box-shadow: inset 0 0 0 2px rgba(241, 211, 80, 0.7), 0 8px 22px rgba(241, 211, 80, 0.18);
}

.videoCanvasHeader strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.miniNavButton {
  min-width: 42px;
  min-height: 36px;
  padding: 6px 10px;
}

.videoCanvasFrameWrap {
  position: relative;
  display: grid;
  min-height: min(58vh, 640px);
  padding: 18px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #07100c;
  background-size: 28px 28px;
}

.videoCanvasFrame {
  width: min(100%, 1120px);
  max-width: 100%;
  max-height: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.videoCanvasBottomBar .compactAudioSlot audio {
  width: min(340px, 100%);
}

.videoCanvasBottomBar .compactAudioSlot {
  justify-items: center;
}

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

.videoApplyAllToggle {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.videoApplyAllToggle span {
  white-space: nowrap;
}

.videoCanvasSceneText {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.videoSceneList {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}

.videoSceneCard {
  display: grid;
  grid-template-columns: minmax(320px, 720px) minmax(280px, 1fr);
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.videoFramePreview {
  position: relative;
  display: grid;
  width: 100%;
  max-width: min(720px, 100%);
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: min(54vh, 420px);
  overflow: hidden;
  justify-self: center;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #050907;
}

.videoFramePreview.draggable {
  cursor: grab;
}

.videoFramePreview.dragging {
  cursor: grabbing;
}

.videoFramePreview img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

.videoFramePreview img[data-select-video-layer] {
  pointer-events: auto;
  cursor: grab;
}

.videoFramePreview.videoCanvasFrame {
  width: min(100%, 1120px);
  max-width: 100%;
  max-height: none;
}

.videoLiveCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: min(calc(100% - 36px), 1120px);
  max-width: calc(100% - 36px);
  aspect-ratio: 16 / 9;
  height: auto;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #000;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.videoLiveCanvas[hidden] {
  display: none;
}

.videoFramePreview.isPlaybackHidden {
  opacity: 0;
  pointer-events: none;
}

.quickPreviewButton.isPlaying {
  background: var(--accent);
  color: #07110d;
}

.videoFramePreview.showSafeGuides::before,
.videoFramePreview.showSafeGuides::after {
  position: absolute;
  inset: 8%;
  z-index: 5;
  content: "";
  pointer-events: none;
  border: 1px dashed rgba(241, 211, 80, 0.8);
  border-radius: 4px;
}

.videoFramePreview.showSafeGuides::after {
  inset: 14% 7%;
  border-color: rgba(255, 255, 255, 0.55);
}

.videoFramePreview .videoImageOverlayWrap,
.videoFramePreview .videoTextOverlayLayer,
.videoFramePreview .videoSubtitlePreview {
  position: absolute;
  z-index: 3;
  max-width: none;
  user-select: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.videoFramePreview .videoImageOverlayWrap {
  height: auto;
  transform-origin: center center;
}

.videoFramePreview .videoImageOverlayLayer {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.videoFramePreview .videoTextOverlayLayer {
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: clamp(12px, 1.6vw, 22px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.videoInlineTextEditor {
  display: block;
  min-width: 100%;
  outline: 0;
  cursor: text;
  user-select: text;
  white-space: pre-wrap;
}

.videoInlineTextEditor:empty::before {
  color: rgba(255, 255, 255, 0.65);
  content: attr(data-placeholder);
}

.videoFramePreview .dragging {
  cursor: grabbing;
}

.videoCanvasValueHud {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  padding: 6px 9px;
  border: 1px solid rgba(241, 211, 80, 0.72);
  border-radius: 999px;
  color: #fffdf7;
  background: rgba(5, 9, 7, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.videoCanvasValueHud[hidden] {
  display: none;
}

.activeVideoLayer {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lockedVideoLayer {
  cursor: not-allowed !important;
  outline-style: dashed;
}

.videoLayerResizeHandle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 4;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #101815;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  cursor: nwse-resize;
  touch-action: none;
}

.pageResizeHandle {
  right: 12px;
  bottom: 12px;
}

.removeBackgroundPreview {
  mix-blend-mode: multiply;
}

.videoPreviewBackdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 7, 5, 0.86);
}

.videoPreviewReader {
  display: grid;
  width: min(1100px, 96vw);
  max-height: 94vh;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.videoPreviewPlayer {
  width: 100%;
  max-height: 72vh;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #000;
}

.videoSubtitlePreview {
  position: absolute;
  min-width: 120px;
  max-width: 92%;
  padding: 4px 8px;
  border-radius: 8px;
  color: #fffdf7;
  background: transparent;
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  -webkit-text-stroke: 1.15px rgba(0, 0, 0, 0.98);
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.96),
    1.5px 0 1.5px rgba(0, 0, 0, 0.94),
    -1.5px 0 1.5px rgba(0, 0, 0, 0.94),
    0 -1.5px 1.5px rgba(0, 0, 0, 0.9);
  overflow-wrap: anywhere;
  transform: translate(-50%, -50%);
}

.videoSubtitlePreview .captionResizeHandle {
  right: -9px;
  bottom: -9px;
}

.videoCaptionTextContent {
  display: block;
}

.videoCaptionWord {
  display: inline-block;
  padding: 0 2px;
  border-radius: 5px;
  opacity: 1;
}

.videoCaptionWord.active {
  color: var(--accent);
  background: transparent;
  opacity: 1;
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.98);
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.98),
    1.5px 0 1.5px rgba(0, 0, 0, 0.95),
    -1.5px 0 1.5px rgba(0, 0, 0, 0.95);
}

.videoSceneControls {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.videoBackgroundControls {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.videoBackgroundHeader,
.videoColorPicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.videoBackgroundHeader {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.videoBackgroundHeader .secondaryButton {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.videoColorPicker input {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
}

.videoColorPicker strong {
  color: var(--text);
  font-size: 12px;
}

.videoColorSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.videoColorSwatch {
  position: relative;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26);
}

.videoColorSwatch.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(240, 207, 77, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.26);
}

.videoColorSwatch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.videoSceneHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.videoSceneHeader div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.videoSceneTitleBlock {
  min-width: 0;
}

.videoSceneTitleLine {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.videoSceneHeader strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.compactVideoControls {
  align-items: end;
}

.videoSceneControls audio {
  width: 100%;
}

.videoLayerToolbar {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: center;
}

.iconToolButton {
  display: inline-grid;
  min-width: 34px;
  min-height: 28px;
  place-items: center;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

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

.videoLayerStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.videoLayerChip {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 850;
}

.videoLayerChip.selected {
  color: #101815;
  border-color: var(--accent);
  background: var(--accent);
}

.videoLayerChip.hiddenLayer {
  opacity: 0.58;
  text-decoration: line-through;
}

.videoSceneTopControls {
  display: grid;
  grid-template-columns: minmax(210px, 0.68fr) minmax(360px, 1fr);
  gap: 10px;
  align-items: center;
}

.videoPositionControls {
  gap: 8px;
  align-items: end;
}

.videoPositionControls label {
  gap: 3px;
}

.videoPositionControls span {
  font-size: 10px;
  line-height: 1;
}

.videoPositionControls input {
  height: 18px;
}

.videoCompactControlGrid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.58fr);
  gap: 8px;
  align-items: end;
}

.videoLayerEditor {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.videoLayerEditor strong {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.videoLayerEditor label {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.videoLayerEditor label span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.videoLayerEditor input[type="range"] {
  width: 100%;
  height: 18px;
  accent-color: var(--accent);
}

.compactLayerTextInput {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--input);
  font-size: 13px;
  font-weight: 800;
}

.miniToggle {
  min-height: 34px;
  padding: 6px 8px;
}

.compactLayerButton {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.videoLayerOrderButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.videoEditorToolbar .videoLayerOrderButtons {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.videoEditorToolbar .compactLayerButton {
  min-height: 32px;
  padding: 5px 6px;
  font-size: 10px;
}

.compactControlField {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.compactControlField select {
  min-height: 40px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
}

.compactCaptionToggle {
  min-height: 40px;
  padding: 8px 10px;
  align-self: end;
}

.compactCaptionToggle input {
  width: 22px;
  height: 22px;
}

.compactAudioSlot {
  display: grid;
  min-width: 0;
  align-self: end;
}

.compactAudioSlot audio {
  width: 100%;
  height: 34px;
}

.compactStatus {
  margin: 0;
  padding: 10px;
  font-size: 12px;
}

.compactAudioTextRow {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.compactSceneText {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1180px) {
  .videoEditorShell {
    display: contents;
  }

  .videoEditorToolbar {
    position: sticky;
    top: 0;
    max-height: none;
  }

  .videoToolbarSceneInfo,
  .videoToolbarSection:first-child {
    max-width: 210px;
  }

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

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

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

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

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

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

@media (max-width: 760px) {
  .videoEditorToolbar {
    width: 100%;
    justify-self: stretch;
    border-radius: 8px;
  }

  .videoCanvasHeader,
  .videoCanvasBottomBar {
    grid-template-columns: 1fr;
  }

  .videoCanvasNextControls {
    justify-content: stretch;
  }

  .videoCanvasNextControls .ghostActionButton,
  .videoCanvasNextControls .videoApplyAllToggle {
    flex: 1 1 auto;
    justify-content: center;
  }

  .videoCanvasHeader div {
    text-align: left;
  }

  .videoFilmstripItem {
    flex-basis: 88px;
  }

  .videoCompactControlGrid,
  .compactAudioTextRow,
  .videoGlobalControls,
  .videoBackgroundControls,
  .videoPositionControls,
  .videoLayerEditor {
    grid-template-columns: 1fr;
  }

  .videoColorSwatches {
    justify-content: flex-start;
  }
}

.voiceChunkNumber {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #101815;
  background: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.voiceChunk p {
  margin: 0;
  line-height: 1.55;
}

.voiceChunk audio {
  width: 100%;
  height: 38px;
}

.voiceTrimSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(98, 197, 143, 0.28);
  border-radius: 6px;
  background: rgba(98, 197, 143, 0.08);
}

.voiceTrimSummary strong {
  color: var(--accent-2);
  font-size: 12px;
}

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

.compactUpload {
  min-height: 38px;
  padding: 8px 12px;
}

.compactPreview pre {
  max-height: 260px;
}

@media (max-width: 900px) {
  .voiceSourcePanel,
  .voiceStudioToolbar {
    grid-template-columns: 1fr;
  }

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

  .voiceChunkActions {
    width: 100%;
    flex-wrap: wrap;
  }
}

.projectDashboard {
  display: grid;
  gap: 22px;
}

.projectDashboardHero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border);
}

.dashboardEyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.projectDashboardHero h2 {
  margin: 4px 0 2px;
  color: var(--text);
  font-size: 34px;
  line-height: 1.05;
}

.projectDashboardHero p,
.projectDashboardSectionHeader span {
  margin: 0;
  color: var(--muted);
}

.dashboardNewButton {
  min-width: 150px;
  padding: 0 18px;
}

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

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

.importBookUploadCard {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 164px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: pointer;
}

.importBookUploadCard:hover {
  border-color: rgba(240, 201, 90, 0.5);
}

.importBookUploadCard > span {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 4px;
  color: #101815;
  background: var(--accent);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.importBookUploadCard strong,
.importedPageHeader strong {
  color: var(--text);
}

.importBookUploadCard small,
.importBookStatus span,
.importedPageHeader label {
  color: var(--muted);
  font-size: 11px;
}

.importBookUploadCard small {
  line-height: 1.45;
}

.importBookUploadCard b {
  margin-top: auto;
  color: var(--accent);
  font-size: 11px;
}

.importBookUploadCard input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.importBookStatus div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1512;
}

.importBookStatus strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importBookStatus span {
  font-size: 10px;
  text-transform: uppercase;
}

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

.importedPageCard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.importedPageImage {
  position: relative;
  display: grid;
  min-height: 150px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  color: var(--muted);
  background: #0a100e;
}

.importedPageImage img {
  width: 100%;
  height: 100%;
  max-height: 210px;
  object-fit: contain;
}

.miniFileButton {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(245, 213, 74, 0.65);
  border-radius: 8px;
  color: #07100d;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.miniFileButton svg,
.iconActionButton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.miniFileButton input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

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

.importedPageHeader,
.importedPageHeader > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.importedPageHeader {
  justify-content: space-between;
}

.importedPageHeader label {
  font-weight: 750;
}

.importedPageHeader > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ghostActionButton.compact {
  min-height: 34px;
  padding-inline: 10px;
}

.iconActionButton {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.miniSwapControl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.miniSwapControl input {
  width: 64px;
  min-height: 34px;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

.importBuildHelp {
  margin: 5px 0 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

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

.projectDashboardStat {
  display: grid;
  gap: 5px;
  min-height: 112px;
  align-content: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.projectDashboardStat span,
.projectDashboardStat small {
  color: var(--muted);
}

.projectDashboardStat span {
  font-size: 12px;
  font-weight: 800;
}

.projectDashboardStat strong {
  color: var(--text);
  font-size: 27px;
}

.projectDashboardStat small {
  font-size: 11px;
  line-height: 1.35;
}

.projectDashboardSection {
  display: grid;
  gap: 12px;
}

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

.projectDashboardSectionHeader h3 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 18px;
}

.projectDashboardSectionHeader span {
  font-size: 12px;
}

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

.projectCard {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.projectCard.archived {
  opacity: 0.72;
}

.projectCardTop,
.projectCardActions,
.projectProgressRow > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.projectFormatBadge {
  padding: 4px 7px;
  border: 1px solid rgba(240, 201, 90, 0.28);
  border-radius: 5px;
  color: var(--accent);
  background: rgba(240, 201, 90, 0.08);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.projectCardMenuButton {
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

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

.projectCardTitle h3 {
  max-width: 100%;
  overflow: hidden;
  margin: 0 0 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectCardTitle span,
.projectProgressRow span,
.projectNextStep span {
  color: var(--muted);
  font-size: 11px;
}

.projectProgressRow {
  display: grid;
  gap: 7px;
}

.projectProgressRow strong {
  color: var(--accent-2);
  font-size: 12px;
}

.projectProgressTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
}

.projectProgressTrack i {
  display: block;
  height: 100%;
  background: var(--accent-2);
}

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

.projectAssetSummary span {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 11px;
}

.projectAssetSummary strong {
  color: var(--text);
}

.projectNextStep {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-left: 3px solid var(--accent);
  background: rgba(240, 201, 90, 0.06);
}

.projectNextStep strong {
  color: var(--text);
  font-size: 13px;
}

.projectCardActions {
  align-items: stretch;
}

.projectCardActions .primaryButton {
  flex: 1;
}

.projectCardActions .ghostActionButton {
  min-width: 0;
  padding: 0 9px;
}

.projectDashboardEmpty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  text-align: center;
}

.projectDashboardEmpty strong {
  color: var(--text);
  font-size: 18px;
}

.projectDashboardEmpty .primaryButton {
  margin-top: 8px;
  padding: 0 16px;
}

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

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

@media (max-width: 760px) {
  .projectDashboardHero {
    align-items: stretch;
    flex-direction: column;
  }

  .projectDashboardStats,
  .projectCardGrid,
  .importBookOptions,
  .importBookStatus {
    grid-template-columns: 1fr;
  }

  .projectCardActions {
    flex-wrap: wrap;
  }

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

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

.nextStepPanel {
  padding: 16px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbf9;
}

.nextStepPanel h3 {
  margin: 0 0 8px;
}

.nextStepPanel p {
  margin: 0 0 14px;
  color: #53665d;
}

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

.bookPageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.bookWideTextPanel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

.bookCoverPanel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

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

.bookCoverHeader > div {
  display: grid;
  gap: 3px;
}

.bookCoverHeader strong {
  color: var(--text);
  font-size: 15px;
}

.bookCoverHeader span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.bookCoverGrid {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.bookCoverPreview {
  position: relative;
  display: grid;
  width: min(100%, 340px);
  min-height: 260px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #08110d;
}

.bookCoverPreview.empty {
  background: linear-gradient(145deg, #102019, #314339);
}

.bookCoverPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bookCoverPreview span {
  color: var(--muted);
  font-weight: 900;
}

.bookCoverPreview .thumbnailDownloadLink {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(24, 38, 31, 0.94);
}

.bookCoverControls {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.bookCoverGeneratedBank {
  display: grid;
  gap: 8px;
}

.bookCoverGeneratedBank > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.bookCoverGeneratedBank > div {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 2px 8px;
}

.bookCoverGeneratedOption {
  display: grid;
  flex: 0 0 112px;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.bookCoverGeneratedOption.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 197, 91, 0.28);
}

.bookCoverGeneratedOption img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

.bookCoverGeneratedOption small,
.bookCoverGeneratedOption em {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookCoverGeneratedOption small {
  color: var(--text);
}

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

.bookWideTextHeader > div {
  display: grid;
  gap: 3px;
}

.bookWideTextHeader strong {
  color: var(--text);
  font-size: 15px;
}

.bookWideTextHeader span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

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

.bookWideTextControls label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.bookWideTextControls label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.bookWideTextControls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.bookWideTextControls .bookColorControl {
  grid-template-columns: 1fr 42px;
  align-items: center;
}

.chapterBookImageControls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
}

.chapterBookImageControls .field {
  margin: 0;
}

.bookPageCard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
}

.bookPageCard p {
  margin: 0;
  color: #5d6f66;
  font-size: 13px;
  line-height: 1.45;
}

.bookPagePreview {
  position: relative;
  display: grid;
  gap: 8px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 8px;
  background: #edf5f0;
}

.bookPagePreview .imageSlot,
.bookPagePreview .textSlot {
  display: grid;
  place-items: center;
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.bookPagePreview .imageSlot {
  color: #1a2b24;
  background: linear-gradient(135deg, #cfe6db, #f2d97b);
}

.bookPageImageSlot {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #0d1512;
}

.bookPageImageSlot.draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.bookPageImageSlot.draggable.dragging {
  cursor: grabbing;
}

.bookPageImageSlot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bookPageImageSlot .imageSlot {
  width: 100%;
  height: 100%;
}

.dragImageHint {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  color: #101b15;
  background: rgba(240, 207, 77, 0.9);
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.bookPageImageSlot.draggable:hover .dragImageHint,
.bookPageImageSlot.draggable.dragging .dragImageHint {
  opacity: 1;
}

.bookPagePreview .textSlot {
  color: #385247;
  background: #fff;
  border: 1px solid #dce6e1;
}

.bookPagePreview.classic-picturebook {
  grid-template-rows: 1fr 0.28fr;
}

.bookPagePreview.split-reader {
  grid-template-columns: 1fr 1fr;
}

.bookPagePreview.comic-panels {
  grid-template-rows: 1fr 1fr;
}

.bookPagePreview.chapter-book {
  display: block;
  aspect-ratio: 0.72 / 1;
  padding: 16px;
  color: #17201b;
  background: #fffdf6;
  border: 1px solid #d7ccb8;
  font-family: Georgia, "Times New Roman", serif;
}

.bookPagePreview.chapter-book .bookPageImageSlot {
  width: 42%;
  height: 32%;
  float: right;
  margin: 0 0 10px 14px;
  border: 1px solid #cfc6b5;
  border-radius: 2px;
  background: #f7f2e8;
}

.bookPagePreview.chapter-book .bookPageImageSlot.spot-left {
  float: left;
  width: 38%;
  height: 32%;
  margin: 0 14px 10px 0;
}

.bookPagePreview.chapter-book .bookPageImageSlot.spot-top {
  float: none;
  width: 72%;
  height: 28%;
  margin: 0 auto 12px;
}

.bookPagePreview.chapter-book .bookPageImageSlot.spot-bottom {
  float: none;
  width: 72%;
  height: 28%;
  margin: 12px auto 0;
}

.bookPagePreview.chapter-book .bookPageImageSlot:not(.draggable) {
  display: none;
}

.bookPagePreview.chapter-book .bookPageImageSlot img {
  filter: grayscale(1) contrast(1.05);
}

.bookPagePreview.chapter-book .chapterBookPageFlow {
  height: 100%;
}

.bookPagePreview.chapter-book .chapterBookPageFlow.spot-bottom + *,
.bookPagePreview.chapter-book .chapterBookPageFlow.spot-top + * {
  clear: both;
}

.bookPagePreview.text-overlay-mode {
  display: block;
  padding: 10px;
}

.bookPagePreview.text-overlay-mode .bookPageImageSlot {
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.bookTextLayer {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.55em 0.7em;
  border-radius: 5px;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: pre-wrap;
}

.editableTextLayer {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.editableTextLayer.dragging {
  cursor: grabbing;
}

.editableTextLayer.resizing {
  cursor: nwse-resize;
}

.editableTextLayer span {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bookInlineTextEditor {
  cursor: text;
  outline: 0;
  user-select: text;
}

.bookInlineTextEditor:focus {
  outline: 2px dashed currentColor;
  outline-offset: -2px;
}

.bookInlineTextEditor:empty::before {
  color: currentColor;
  content: attr(data-placeholder);
  opacity: 0.55;
}

.editableTextLayer small {
  position: absolute;
  left: 5px;
  bottom: 3px;
  display: block;
  font-size: 8px;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
}

.editableTextLayer:hover small,
.editableTextLayer.dragging small {
  opacity: 0.65;
}

.bookTextResizeHandle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 3px;
  color: inherit;
  background: transparent;
  cursor: nwse-resize;
  opacity: 0.55;
  touch-action: none;
}

.bookTextResizeHandle:hover,
.editableTextLayer.resizing .bookTextResizeHandle {
  opacity: 1;
}

.bookPageControl,
.bookPageAdjustments label {
  display: grid;
  gap: 5px;
}

.bookPageTextEditor {
  display: grid;
  gap: 5px;
}

.bookPageTextEditor > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.bookPageControl span,
.bookPageAdjustments span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.bookPageControl select,
.bookPageTextEditor textarea {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: #0d1512;
}

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

.bookPageAdjustments input {
  width: 100%;
  accent-color: var(--accent);
}

.bookOverlayToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.bookOverlayToggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.bookTextLayerControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1512;
}

.bookTextLayerControls label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.bookTextLayerControls span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.bookTextLayerControls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.bookTextLayerControls .bookColorControl {
  grid-template-columns: 1fr 42px;
  align-items: center;
}

.bookColorControl input[type="color"] {
  width: 42px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  cursor: pointer;
}

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

.bookTextMoveControls .ghostActionButton {
  min-width: 0;
  padding: 7px 9px;
  font-size: 11px;
}

.bookPreviewBackdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(2, 7, 4, 0.94);
}

.bookPreviewReader {
  display: grid;
  width: min(100%, 1180px);
  height: calc(100dvh - 24px);
  min-width: 0;
  max-height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0b120f;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.bookPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.bookPreviewHeader > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.bookPreviewHeader strong {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.bookPreviewStage {
  --preview-page-size: min(620px, calc(100dvh - 190px), calc((100vw - 210px) / 2));
  display: grid;
  min-height: 0;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
}

.bookPreviewSpread {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, var(--preview-page-size));
  justify-content: center;
  gap: 8px;
}

.bookPreviewSpread .bookPreviewPage:first-child {
  border-radius: 4px 1px 1px 4px;
  box-shadow: -12px 16px 36px rgba(0, 0, 0, 0.3);
}

.bookPreviewSpread .bookPreviewPage:last-child {
  border-radius: 1px 4px 4px 1px;
  box-shadow: 12px 16px 36px rgba(0, 0, 0, 0.3);
}

.bookPreviewArrow {
  display: grid;
  width: 44px;
  height: 60px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #101b15;
  background: var(--accent);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.bookPreviewArrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.bookPreviewPage {
  position: relative;
  display: grid;
  width: var(--preview-page-size);
  height: var(--preview-page-size);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  justify-self: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(20, 35, 28, 0.2);
  border-radius: 4px;
  background: #f7f2e8;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.35);
}

.bookPreviewPage.classic-picturebook {
  grid-template-rows: minmax(0, 3fr) minmax(105px, 1fr);
}

.bookPreviewPage.split-reader {
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
}

.bookPreviewPage.comic-panels {
  grid-template-rows: minmax(0, 3fr) minmax(105px, 1fr);
  border: 7px solid #111;
}

.bookPreviewPage.chapter-book {
  display: block;
  padding: 26px 30px;
  aspect-ratio: 0.72 / 1;
  color: #17201b;
  background: #fffdf6;
  border-color: #d7ccb8;
  font-family: Georgia, "Times New Roman", serif;
}

.chapterBookPageFlow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #17201b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 1.7vw, 16px);
  line-height: 1.48;
  text-align: left;
}

.chapterBookPageFlow p {
  margin: 0;
  white-space: pre-wrap;
}

.chapterBookSpotArt {
  overflow: hidden;
  border: 1px solid #cfc6b5;
  border-radius: 2px;
  background: #f7f2e8;
}

.chapterBookSpotArt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

.chapterBookSpotArt.middle,
.chapterBookSpotArt.right {
  float: right;
  width: 42%;
  height: 34%;
  margin: 0 0 12px 16px;
}

.chapterBookSpotArt.left {
  float: left;
  width: 38%;
  height: 34%;
  margin: 0 16px 12px 0;
}

.chapterBookSpotArt.top {
  width: 74%;
  height: 28%;
  margin: 0 auto 14px;
}

.chapterBookSpotArt.bottom {
  width: 74%;
  height: 28%;
  margin: 14px auto 0;
}

.chapterBookPageNumber {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #756f64;
  font-size: 0.85em;
  font-weight: 800;
}

.bookPreviewPage.text-overlay-mode {
  display: block;
}

.bookPreviewPage.text-overlay-mode .bookPreviewImage {
  width: 100%;
  height: 100%;
}

.previewTextLayer {
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}

.previewTextLayer p {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.bookOverlayPageNumber {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 5px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 3px;
  color: #17201b;
  background: rgba(255, 253, 247, 0.78);
  font-size: 10px;
  font-weight: 900;
}

.bookPreviewImage {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  color: #53665d;
  background: #dfe8e3;
  font-weight: 800;
}

.bookPreviewImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bookPreviewText {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: center;
  padding: 12px 18px 16px;
  color: #17201b;
  background: #fffdf7;
}

.bookPreviewText p {
  max-height: 100%;
  overflow: auto;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 2.1vh, 21px);
  line-height: 1.5;
  white-space: pre-wrap;
}

.bookPreviewText > span {
  position: absolute;
  right: 8px;
  bottom: 4px;
  color: #718078;
  font-size: 10px;
  font-weight: 800;
}

.bookPreviewStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px 13px;
  border-top: 1px solid var(--border);
  scrollbar-color: var(--accent) #111b16;
}

.bookPreviewThumbnail {
  position: relative;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  color: var(--text);
  background: #18251f;
  cursor: pointer;
}

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

.bookPreviewThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bookPreviewThumbnail > span {
  display: grid;
  height: 100%;
  place-items: center;
  font-weight: 900;
}

.bookPreviewThumbnail small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 3px;
  color: #101b15;
  background: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

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

.adminKpi {
  display: grid;
  gap: 5px;
  min-height: 108px;
  align-content: center;
  padding: 16px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #fff;
}

.adminKpi span {
  color: #65776e;
  font-size: 12px;
  font-weight: 850;
}

.adminKpi strong {
  color: #17201b;
  font-size: 28px;
  line-height: 1;
}

.adminKpi small {
  color: #61736a;
  font-size: 12px;
}

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

.dashboardPanel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  background: #f8fbf9;
}

.dashboardPanel h3 {
  margin: 0;
  color: #17201b;
  font-size: 15px;
}

.dashboardPanel .metric {
  border-color: #dce6e1;
  color: #17201b;
  background: #fff;
}

.dashboardPanel .metric span,
.dashboardPanel .metric small {
  color: #65776e;
}

.dashboardPanel .metric strong {
  color: #17201b;
}

.dashboardPanel .progressRow div:first-child {
  color: #4f6359;
}

.dashboardPanel .progressTrack {
  background: #dfe9e4;
}

.launchPricingPanel {
  grid-column: 1 / -1;
}

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

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

.launchPlanCard,
.creditRuleCard {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  color: #17201b;
  background: #fff;
}

.launchPlanCard strong,
.creditRuleCard strong {
  color: #17201b;
  font-size: 18px;
  line-height: 1;
}

.launchPlanCard span,
.creditRuleCard span {
  color: #17201b;
  font-size: 13px;
  font-weight: 850;
}

.launchPlanCard small,
.creditRuleCard small,
.launchPlanCard em {
  color: #65776e;
  font-size: 11px;
  line-height: 1.35;
}

.launchPlanCard em {
  font-style: normal;
}

.launchPlanCard .smallButton {
  width: fit-content;
  min-height: 34px;
  margin-top: 6px;
  padding: 7px 12px;
  border: 1px solid #17201b;
  border-radius: 8px;
  color: #17201b;
  background: #f0d04d;
  font-size: 12px;
  font-weight: 900;
}

.healthRow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
}

.healthDot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: #d9903d;
}

.healthDot.ok {
  background: #55c08c;
}

.healthDot.warn {
  background: #d9903d;
}

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

.healthRow strong {
  color: #17201b;
  font-size: 13px;
}

.healthRow small {
  margin-top: 3px;
  color: #65776e;
  font-size: 12px;
  line-height: 1.4;
}

.riskList {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: #52645b;
  font-size: 13px;
  line-height: 1.45;
}

.configPanel {
  margin-top: 14px;
}

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

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

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

  .sidebar .announcementMetrics,
  .sidebar .modelSelectors,
  .sidebar .approvalSummary {
    grid-template-columns: 1fr;
  }

  .modelSelectors,
  .templateGrid,
  .outputChoiceGrid,
  .adminKpiGrid,
  .adminDashboardGrid,
  .launchPlanGrid,
  .creditRuleGrid {
    grid-template-columns: 1fr;
  }
}

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

  .sidebar {
    min-height: auto;
  }

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

  .topbar,
  .topbarActions,
  .toolbarRow,
  .uploadHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .twoColumn,
  .promptGrid,
  .profileRow,
  .sceneRow,
  .templateTools,
  .buttonRow {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 12px;
  }

  .announcementBar {
    padding: 12px;
  }

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

/* Dark workspace theme and collapsible chrome overrides */
:root {
  color: #e8f0ec;
  background: #090f0d;
  --bg: #090f0d;
  --panel: #121d18;
  --panel-2: #17241e;
  --panel-3: #1d2d26;
  --border: rgba(198, 220, 210, 0.14);
  --text: #e8f0ec;
  --muted: #93a69d;
  --muted-2: #6f8379;
  --accent: #f0c95a;
  --accent-2: #62c58f;
  --danger: #ffb59d;
}

body {
  color: var(--text);
  background: var(--bg);
}

.appShell {
  background:
    radial-gradient(circle at 18% 0%, rgba(83, 151, 120, 0.17), transparent 34%),
    linear-gradient(145deg, #090f0d, #101814 52%, #0a100e);
}

.sidebar {
  background: #0b1310;
  border-right: 1px solid var(--border);
}

.brandMark,
.primaryButton,
.creditPill,
.announcementTitle > span {
  background: var(--accent);
  color: #101815;
}

.brand span,
.topbar p,
.savedState,
.panelHeader span,
.field,
.mutedText,
.metric small,
.noteItem p,
.previewBox p,
.promptCard p,
.voiceChoice small,
.timelineClip span,
.pageTile span,
.statusMessage,
.healthRow small,
.riskList,
.characterReferencePanel span,
.characterReferencePanel p,
.imageLoadingState p,
.inlineStatus,
.candidateOption span,
.candidateChooserHeader > span,
.sceneFields label span,
.dashboardPanel .metric span,
.dashboardPanel .metric small {
  color: var(--muted);
}

.stageButton:hover,
.stageButton.active,
.ghostButton,
.ghostActionButton,
.modelSelectors select {
  color: var(--text);
  background: var(--panel-3);
}

.ghostButton.danger {
  color: var(--danger);
}

.topPane {
  min-width: 0;
}

.topbar {
  border-bottom-color: var(--border);
  background: rgba(13, 22, 18, 0.86);
}

.projectTitle,
.workspaceTitle,
.panelHeader h2,
.promptCard h3,
.previewBox h3,
.nextStepPanel h3,
.dashboardPanel h3,
.templateCard strong,
.outputChoice span,
.voiceChoice span,
.bookPageCard strong,
.characterReferencePanel strong,
.imageLoadingState strong,
.candidateChooserHeader > strong,
.splitPromptStack strong,
.healthRow strong,
.dashboardPanel .metric strong,
.adminKpi strong,
.launchPlanCard strong,
.creditRuleCard strong,
.launchPlanCard span,
.creditRuleCard span {
  color: var(--text);
}

.projectTitle {
  background: transparent;
}

.panel,
.reviewPanel,
.promptCard,
.pageTile,
.bookPageCard,
.adminKpi,
.healthRow,
.launchPlanCard,
.creditRuleCard {
  border-color: var(--border);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.fullPanel,
.uploadField,
.customStylePanel,
.splitPromptStack > div,
.promptDetail,
.profileRow,
.characterReferencePanel,
.candidateOption,
.sceneRow,
.previewBox,
.nextStepPanel,
.dashboardPanel,
.templateCard,
.outputChoice,
.voiceChoice,
.statusMessage,
.artStyleOption,
.selectedArtPreview {
  border-color: var(--border);
  background: var(--panel-2);
}

.field input,
.field textarea,
.field select,
.profileRow input,
.profileRow select,
.profileRow textarea,
.sceneRow input,
.sceneRow textarea,
.splitPromptStack textarea,
.storyOutput {
  border-color: var(--border);
  color: var(--text);
  background: #0d1512;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.profileRow input:focus,
.profileRow select:focus,
.profileRow textarea:focus,
.sceneRow input:focus,
.sceneRow textarea:focus,
.splitPromptStack textarea:focus,
.storyOutput:focus {
  border-color: var(--accent-2);
  outline-color: rgba(98, 197, 143, 0.2);
}

.artStyleOption {
  color: var(--text);
}

.artStyleOption small,
.selectedArtPreview span {
  color: var(--muted);
}

.artStyleOption:hover,
.artStyleOption.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(240, 207, 77, 0.28);
}

.selectedArtPreview strong {
  color: var(--text);
}

.artIcon {
  border-color: rgba(255, 255, 255, 0.16);
}

.announcementBar {
  border-bottom-color: var(--border);
  background: #101a16;
}

.stageFooter {
  border-top-color: var(--border);
}

.metric {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.dashboardPanel .metric {
  border-color: var(--border);
  background: var(--panel);
}

.progressTrack {
  background: rgba(255, 255, 255, 0.13);
}

.dashboardPanel .progressTrack {
  background: #25362f;
}

.progressTrack span,
.healthDot.ok,
.statusDot.approved {
  background: var(--accent-2);
}

.approveButton {
  border-color: var(--border);
  color: var(--text);
  background: var(--panel);
}

.approveButton.approved,
.timingBadge {
  color: #102017;
  background: #9ee2bb;
}

.timingBadge.warning {
  color: #251806;
  background: #ffc96c;
}

.sceneIndex {
  color: #0e1713;
  background: #cfe6db;
}

.emptyState {
  border-color: var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.templateCard.selected,
.outputChoice.selected,
.voiceChoice.selected {
  border-color: var(--accent);
  background: #2d2813;
}

.bookPagePreview {
  background: #0d1512;
}

.bookPagePreview .textSlot {
  border-color: var(--border);
  color: var(--muted);
  background: var(--panel);
}

.sceneCharacterTags {
  display: grid;
  gap: 8px;
}

.sceneCharacterTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sceneCharacterTag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: #0d1512;
  cursor: pointer;
}

.sceneCharacterTag input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.sceneCharacterTag.selected {
  border-color: var(--accent);
  color: var(--text);
  background: #2d2813;
}

.sceneLocationTags {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.sceneLocationTag.selected {
  border-color: var(--accent-2);
  background: #173326;
}

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

.sceneCharacterTags small {
  color: var(--muted);
}

.characterNameApproval {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

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

.characterNameHeader > div:first-child {
  display: grid;
  gap: 3px;
}

.characterNameHeader strong {
  color: var(--text);
}

.characterNameHeader span,
.characterNameApproval > small,
.characterNameEmpty {
  color: var(--muted);
  font-size: 12px;
}

.characterNameField {
  display: flex;
  min-height: 48px;
  max-height: 126px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1512;
}

.characterNameChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 4px 5px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

.characterNameChip.approved {
  border-color: var(--accent);
  background: #2d2813;
}

.characterNameChip > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.characterNameChip .characterNameInput {
  width: clamp(92px, 12vw, 170px);
  height: 24px;
  padding: 1px 3px;
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.characterNameChip .characterNameInput:focus {
  outline: 1px solid var(--accent);
}

.characterNameChip button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.characterNameChip button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.modeToggle {
  display: flex;
  min-width: 255px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0d1512;
  cursor: pointer;
}

.modeToggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.modeToggleTrack {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #34473e;
}

.modeToggleTrack::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.modeToggle > input:checked + .modeToggleTrack {
  background: #5c5225;
}

.modeToggle > input:checked + .modeToggleTrack::after {
  background: var(--accent);
  transform: translateX(18px);
}

.modeToggle > input:focus-visible + .modeToggleTrack {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modeToggle > span:last-child {
  display: grid;
  gap: 2px;
}

.modeToggle strong {
  color: var(--text);
  font-size: 13px;
}

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

.voiceIdManager {
  grid-column: 1 / -1;
}

.voiceIdManagerGrid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(150px, 0.75fr) auto;
  gap: 10px;
}

.voiceIdManagerGrid select,
.voiceIdManagerGrid input {
  min-width: 0;
}

@media (max-width: 760px) {
  .characterNameHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .bookPreviewBackdrop {
    padding: 8px;
  }

  .bookPreviewStage {
    --preview-page-size: min(calc(100dvh - 175px), calc(100vw - 84px));
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    padding: 8px;
  }

  .bookPreviewSpread {
    grid-template-columns: var(--preview-page-size);
  }

  .bookPreviewSpread .bookPreviewPage:not(:first-child) {
    display: none;
  }

  .bookPreviewArrow {
    width: 32px;
    height: 48px;
  }

  .bookPreviewPage {
    gap: 8px;
    padding: 8px;
  }

  .bookPreviewPage.split-reader {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .bookPreviewText {
    padding: 8px 10px 12px;
  }

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

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

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

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

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