* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #111820;
  color: #e8edf2;
  font: 14px "Microsoft YaHei", Arial, sans-serif;
}

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

button {
  border: 1px solid #36546b;
  background: #172532;
  color: #e8edf2;
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 10px;
  cursor: pointer;
}

button.primary {
  background: #1f6f8b;
  border-color: #3ca0c3;
}

button:hover {
  border-color: #6dbbd1;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #34495a;
  background: #0f1a24;
  color: #e8edf2;
  border-radius: 6px;
  padding: 8px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

h1,
h2,
h3 {
  margin: 0 0 10px;
}

h2,
h3,
.brand strong {
  color: #f4d992;
}

.hidden {
  display: none !important;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0d141c;
}

.login-card {
  width: min(460px, 100%);
  display: grid;
  gap: 12px;
  border: 1px solid #263745;
  border-radius: 8px;
  padding: 18px;
  background: #111b25;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

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

.login-brand img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.login-brand strong {
  display: block;
  color: #f4d992;
  font-size: 22px;
}

.login-brand span {
  color: #8ea0ad;
}

#app {
  display: grid;
  grid-template-columns: var(--author-left-width, 270px) 6px minmax(520px, 1fr) 6px var(--author-right-width, 330px);
  height: 100vh;
}

#left,
#right {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #0d141c;
  padding: 12px;
}

#left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-workbench { flex: 0 0 auto; }
.chapter-tree-title { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; }
.chapter-tree-title span { color: #718695; font-size: 11px; font-weight: 400; }

#left {
  border-right: 0;
}

#right {
  border-left: 0;
}

.resize-handle {
  width: 6px;
  min-width: 6px;
  cursor: col-resize;
  background: #172532;
  border-left: 1px solid #263745;
  border-right: 1px solid #263745;
}

.resize-handle:hover,
body.resizing .resize-handle {
  background: #1f6f8b;
}

#center {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
}

#center.empty-workspace {
  grid-template-rows: 1fr;
}

#center.empty-workspace #studioTabs,
#center.empty-workspace .tab-panel {
  display: none;
}

.empty-workspace {
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px dashed #36546b;
  border-radius: 10px;
  color: #8ea0ad;
  text-align: center;
  background: rgba(23, 37, 50, 0.42);
}

.empty-workspace > div { max-width: 320px; padding: 24px; }
.empty-workspace strong { display: block; color: #f4d992; font-size: 16px; }
.empty-workspace p { margin: 10px 0 0; line-height: 1.75; }

.brand {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.brand strong {
  font-size: 20px;
}

.auth-panel,
.claim-box,
.notice-panel {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid #263745;
  border-radius: 8px;
  background: #101922;
}

.auth-panel label,
.claim-box label {
  display: grid;
  gap: 5px;
}

.notice-panel h3 {
  margin: 0;
}

.notice-panel ul {
  margin: 0;
  padding-left: 18px;
  color: #b4c0ca;
  font-size: 12px;
  line-height: 1.7;
}

.text-button {
  border-color: transparent;
  background: transparent;
  color: #8ea0ad;
  min-height: 28px;
  padding: 4px 0;
  text-align: left;
}

.text-button:hover {
  color: #e8edf2;
  border-color: transparent;
}

.muted {
  color: #8ea0ad;
  font-size: 13px;
}

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

.row > * {
  min-width: 0;
}

.wrap {
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.action-grid,
.publish-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-grid .wide {
  grid-column: 1 / -1;
}

.save-status {
  grid-column: 1 / -1;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #2b3f4d;
  border-radius: 6px;
  color: #9caebc;
  background: #0f1a24;
  font-size: 12px;
  text-align: center;
}

.save-status.dirty {
  color: #f4d992;
  border-color: rgba(244, 217, 146, 0.42);
}

.save-status.saving {
  color: #62bad6;
  border-color: rgba(98, 186, 214, 0.42);
}

.save-status.saved {
  color: #83b69e;
  border-color: rgba(131, 182, 158, 0.38);
}

.save-status.error {
  color: #d98585;
  border-color: rgba(217, 133, 133, 0.42);
}

.publish-box {
  margin: 12px 0 18px;
  padding: 10px;
  border: 1px solid #263745;
  border-radius: 8px;
  background: #101922;
}

#chapterTree {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  padding-right: 3px;
}

.tree-item {
  border: 1px solid #263745;
  background: #121d28;
  border-radius: 6px;
  padding: 8px;
  text-align: left;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  align-items: start;
}

.tree-item.active {
  border-color: #62bad6;
  background: #173044;
  font-weight: 800;
  box-shadow: inset 3px 0 0 #f4d992;
}

.chapter-node[draggable="true"] { cursor: grab; }
.chapter-node[draggable="true"]:active { cursor: grabbing; }
.chapter-node.chapter-dragging { opacity: .45; transform: scale(.985); }
.chapter-node.chapter-drag-over { border-color: #f4d992; box-shadow: 0 0 0 2px rgba(244, 217, 146, .25); }

.tree-check {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
  border: 1px solid #516b7d;
  border-radius: 4px;
  color: transparent;
  font-size: 11px;
}

.tree-item.active .tree-check {
  border-color: #f4d992;
  background: #f4d992;
  color: #111820;
}

.tree-title {
  display: block;
}

.tree-item small {
  display: block;
  color: #8ea0ad;
  margin-top: 3px;
}

#studioTabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #263745;
  padding-bottom: 8px;
  overflow-x: auto;
}

.tab-btn {
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}

.tab-btn.active {
  background: #1f6f8b;
  border-color: #62bad6;
}

.tab-panel {
  display: none;
  min-height: 0;
  overflow: auto;
}

.tab-panel.active {
  display: block;
}

#segmentConfigPanel.active,
#modeYuewenPanel.active,
#modeYuetuPanel.active,
#modeYueyouPanel.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* 悦图采用独立工作区滚动：幕次列表与正文分别滚动，页面本身保持稳定。 */
#modeYuetuPanel.active {
  overflow: hidden;
}

#modeYuetuPanel.active > .panel {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#yuetuConfigArea {
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel {
  border: 1px solid #2b3f4d;
  background: #121b24;
  border-radius: 8px;
  padding: 12px;
}

.work-package-panel {
  margin-top: 12px;
}

.work-package-heading,
.work-package-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.work-package-heading {
  justify-content: space-between;
}

.work-package-heading h3,
.work-package-heading p {
  margin: 0;
}

.work-package-heading p {
  margin-top: 4px;
}

.work-package-rule {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgba(91, 192, 222, .45);
  border-radius: 999px;
  color: #91d7ed;
  font-size: 12px;
}

.work-package-controls {
  margin-top: 12px;
  flex-wrap: wrap;
}

.work-package-file {
  flex: 1 1 320px;
}

.work-package-result {
  min-height: 38px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #2b3f4d;
  border-radius: 6px;
  background: #0f1820;
  line-height: 1.55;
}

.work-package-result.ok {
  color: #a7e0b0;
  border-color: rgba(86, 180, 110, .45);
}

.work-package-result.error {
  color: #ff9c9c;
  border-color: rgba(255, 120, 120, .45);
}

.work-package-chapters {
  margin: 5px 0 0;
  padding-left: 20px;
  color: #c7d5df;
}

.segment-base-panel {
  flex: 0 0 auto;
}

.mode-panel-layout {
  display: grid;
  grid-template-rows: minmax(360px, 1fr) auto;
  gap: 12px;
  min-height: 100%;
}

.mode-panel-layout.compact {
  min-height: auto;
  grid-template-rows: minmax(260px, 42vh) auto;
}

.segment-config-layout {
  display: grid;
  gap: 12px;
}

.stage-config-layout {
  display: grid;
  grid-template-columns: minmax(240px, 36%) minmax(320px, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.stage-editor-inline {
  min-height: 180px;
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  background: #101922;
  padding: 12px;
}

.yuetu-stage-config {
  margin-bottom: 12px;
}

.yuetu-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(420px, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}

.yuetu-frame-column,
.yuetu-current-frame {
  min-width: 0;
  min-height: 0;
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  background: #101922;
}

.yuetu-current-frame:not(.is-overlay-layout) .yuetu-overlay-field {
  display: none;
}

.yuetu-current-frame.is-overlay-free .yuetu-overlay-anchor-field,
.yuetu-current-frame:not(.is-overlay-free) .yuetu-overlay-free-field {
  display: none;
}

.yuetu-current-frame:not(.has-yuetu-rotation) .yuetu-rotation-field {
  display: none;
}

.yuetu-frame-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.yuetu-frame-column-head {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #2b3f4d;
}

.yuetu-frame-column-head strong {
  color: #f4d992;
}

.yuetu-frame-column #yuetuFrameList {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.yuetu-frame-column #yuetuFrameList .scene-card {
  flex: 0 0 auto;
}

.yuetu-frame-toolbar {
  margin-top: 10px;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #2b3f4d;
}

.yuetu-frame-toolbar button {
  flex: 1 1 96px;
}

.yuetu-multi-select-hint {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  margin: 0;
  padding: 24px;
  border: 1px dashed #3d5668;
  border-radius: 7px;
  color: #b9c9d5;
  text-align: center;
}

.yuetu-current-frame.is-multi-select > :not(.yuetu-multi-select-hint) {
  display: none !important;
}

.yuetu-current-frame {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  height: 100%;
  overflow: hidden;
}

.yuetu-frame-fields {
  flex: 0 0 auto;
}

.yuetu-editor-layout {
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden;
}

.yuetu-editor-layout .rich-editor {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.yueyou-base-card {
  display: block;
  margin-bottom: 12px;
}

.yueyou-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(360px, 1fr);
  gap: 12px;
  align-items: start;
}

.yueyou-scene-sidebar {
  min-width: 0;
}

.yueyou-scene-toolbar {
  gap: 8px;
  margin-bottom: 10px;
}

.yueyou-scene-toolbar button {
  flex: 1 1 86px;
}

.yueyou-scene-main {
  min-height: 360px;
}

.yueyou-form-section {
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  background: #101922;
  padding: 10px 12px;
}

.yueyou-form-section + .yueyou-form-section {
  margin-top: 10px;
}

.yueyou-form-section summary {
  cursor: pointer;
  color: #f4d992;
  font-weight: 700;
  margin-bottom: 10px;
}

.yueyou-summary-card {
  border: 1px solid rgba(244, 217, 146, 0.24);
  border-radius: 8px;
  background: rgba(244, 217, 146, 0.07);
  padding: 10px 12px;
  color: #b4c0ca;
  font-size: 12px;
}

.yueyou-summary-card strong {
  color: #f4d992;
  margin-right: 8px;
}

.yueyou-summary-card p {
  margin: 5px 0 0;
}

.yueyou-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #3a5060;
  color: #e8edf2;
  background: #162637;
}

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

.mode-section-head h3 {
  margin-bottom: 4px;
}

.mode-price-field {
  display: block;
  max-width: 240px;
}

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

.form-grid.two {
  grid-template-columns: 1fr 1fr;
}

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

.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metadata-panel {
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: rgba(14, 25, 35, .56);
}

.metadata-panel summary {
  cursor: pointer;
  color: #f4d992;
  font-weight: 700;
}

.metadata-fields {
  margin-top: 12px;
}

.metadata-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-width: 0;
  padding: 7px 9px 9px;
  border: 1px solid #34495a;
  border-radius: 6px;
}

.metadata-audience legend {
  padding: 0 4px;
  color: #b4c0ca;
  font-size: 12px;
}

.metadata-audience label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  color: #c8d4dc;
  font-size: 12px;
}

.metadata-audience input { width: auto; }

.yuetu-mode-section-head {
  align-items: center;
  gap: 12px;
}

.yuetu-mode-title-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.yuetu-mode-title-row h3,
.yuetu-mode-title-row .muted {
  margin: 0;
}

.yuetu-mode-title-row .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yuetu-frame-fields {
  gap: 8px;
}

.yuetu-frame-fields label {
  min-width: 0;
}

.yuetu-template-field {
  grid-column: auto;
}

.yuetu-media-path-field {
  grid-column: span 3;
}

.yuetu-current-frame .stage-editor-inline {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.yuetu-current-frame {
  gap: 8px;
  padding: 10px;
}

.yuetu-frame-header-actions {
  gap: 6px;
}

.font-size-input {
  width: 64px;
  min-width: 64px;
}

.inline-check {
  width: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-check input {
  width: auto;
}

.compact-select {
  max-width: 150px;
}

#editor,
.rich-editor {
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: #f3ead8;
  color: #3d2d18;
  border-radius: 8px;
  padding: 34px 44px;
  font-size: 18px;
  line-height: 1.8;
  outline: none;
  font-family: "Microsoft YaHei", sans-serif;
}

#editor p,
.rich-editor p {
  margin: 0 0 1em;
  text-indent: 2em;
}

#editor p.intro,
.rich-editor p.intro {
  padding: 17px 25px 17px 34px;
  border-left: 5px solid #4f8b82;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(191, 219, 208, 0.44), rgba(232, 239, 222, 0.18));
  color: #285b55;
  text-indent: 0;
  font-weight: 600;
  font-style: italic;
}

#editor p.emphasis,
.rich-editor p.emphasis {
  padding: 11px 17px;
  border-left: 5px solid #b45b39;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(228, 174, 137, 0.32), rgba(248, 225, 198, 0.16));
  color: #793722;
  text-indent: 0;
  font-weight: 700;
}

#editor .text-format-intro,
.rich-editor .text-format-intro {
  display: inline;
  padding: 0 0.18em;
  border-bottom: 3px double rgba(64, 125, 114, 0.74);
  background: rgba(192, 223, 211, 0.42);
  color: #275e57;
  font-weight: 600;
  font-style: italic;
}

#editor .text-format-emphasis,
.rich-editor .text-format-emphasis {
  display: inline;
  padding: 0 0.18em;
  border-bottom: 2px solid rgba(174, 75, 43, 0.78);
  background: rgba(235, 170, 131, 0.3);
  color: #863a24;
  font-weight: 700;
}

#editor .text-format-normal,
.rich-editor .text-format-normal {
  font-weight: 400;
  background: transparent;
  border-bottom: 0;
}

#editor .kw,
.rich-editor .kw {
  color: #27804e;
  font-weight: 800;
  border-bottom: 2px solid rgba(39, 128, 78, 0.72);
}

#editor .kw.kw-image,
.rich-editor .kw.kw-image {
  color: #b72b2b;
  border-bottom-color: rgba(183, 43, 43, 0.78);
}

#editor .kw.kw-video,
.rich-editor .kw.kw-video {
  color: #0f4fbd;
  border-bottom-color: rgba(15, 79, 189, 0.78);
}

#editor .kw.kw-other,
.rich-editor .kw.kw-other {
  color: #27804e;
  border-bottom-color: rgba(39, 128, 78, 0.78);
}

#editor details,
.rich-editor details {
  margin: 14px 0;
  padding: 10px 14px;
  background: rgba(80, 70, 45, 0.12);
  border-radius: 6px;
}

#editor summary,
.rich-editor summary {
  cursor: pointer;
  font-weight: 700;
  color: #0f4f75;
}

.compact-rich-editor {
  min-height: 180px;
  max-height: 280px;
  padding: 18px 22px;
  font-size: 15px;
}

.toolbar-panel {
  min-height: auto;
}

.effect-list,
.rpg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.effect-row {
  display: grid;
  grid-template-columns: 160px 120px 140px 110px 90px;
  gap: 8px;
  align-items: end;
  border: 1px solid #263745;
  background: #101a24;
  border-radius: 8px;
  padding: 10px;
}

.rpg-row {
  display: grid;
  grid-template-columns: 120px 90px 120px 1fr 130px 130px 110px 100px 90px;
  gap: 8px;
  align-items: end;
  border: 1px solid #263745;
  background: #101a24;
  border-radius: 8px;
  padding: 10px;
  overflow: auto;
}

.effect-row label,
.rpg-row label {
  font-size: 12px;
  color: #9caebc;
}

.rpg-row textarea {
  min-height: 54px;
}

.rpg-row input[type="checkbox"] {
  width: auto;
}

#resultBox {
  margin-top: 12px;
  min-height: 240px;
  max-height: 520px;
  overflow: auto;
  background: #0f1a24;
  color: #dce9f1;
  border: 1px solid #34495a;
  border-radius: 8px;
  padding: 12px;
  white-space: pre-wrap;
}

#toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #1f6f8b;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.2s;
  z-index: 20;
}

#toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* 素材库：固定工具栏 + 可滚动网格 + 固定操作坞 */
#right.asset-library {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.asset-library-header,
.asset-action-dock { flex: 0 0 auto; }
.asset-library-header h2 { margin: 0 0 8px; }
.asset-toolbar-row { display: grid; grid-template-columns: minmax(92px, .7fr) minmax(0, 1.3fr); gap: 7px; }
.asset-upload-row { grid-template-columns: minmax(0, 1fr) auto; margin-top: 7px; }
.asset-upload-row input[type="file"] { min-width: 0; font-size: 11px; }
.asset-upload-row button { min-width: 64px; padding-inline: 10px; }
.asset-library-hint { margin-top: 7px; line-height: 1.45; }
.asset-grid-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 1px 2px 2px; }
.asset-action-dock { position: relative; isolation: isolate; z-index: 50; pointer-events: auto; padding: 9px; border: 1px solid #355066; border-radius: 9px; background: linear-gradient(180deg, #142432, #0e1923); box-shadow: 0 -8px 22px rgba(0, 0, 0, .18); }
.asset-action-summary { min-width: 0; display: grid; gap: 2px; margin-bottom: 8px; }
.asset-action-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8edf2; font-size: 12px; }
.asset-action-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8ea0ad; font-size: 11px; }
.asset-action-dock .asset-action-buttons { position: relative; z-index: 51; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; pointer-events: auto; }
.asset-action-dock .asset-action-buttons button { position: relative; isolation: isolate; z-index: 52; min-width: 0; min-height: 30px; padding: 6px 4px; font-size: 11px; pointer-events: auto; cursor: pointer; }
.asset-action-buttons .danger { color: #ffc4c4; background: #3a2428; border-color: #6b4249; }

/* 素材库预览卡片 */
#assetGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--asset-thumb-size, 120px), 1fr));
  gap: 10px;
  margin-top: 0;
}

.asset-size-control {
  display: grid;
  gap: 5px;
  color: #b4c0ca;
  font-size: 12px;
}

.asset-size-control input {
  padding: 0;
}

.asset-item {
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  background: #121d28;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.asset-item:hover {
  border-color: #62bad6;
  background: #192c3a;
}

.asset-item.selected {
  border-color: #f4d992;
  box-shadow: 0 0 0 2px rgba(244, 217, 146, 0.3);
  background: #1a2f42;
}

.asset-item.bound {
  border-color: #5a9b6f;
  background: linear-gradient(135deg, #121d28 0%, #1a2d1f 100%);
}

.asset-item.bound::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5a9b6f, #83b69e);
}

.asset-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.asset-preview {
  height: calc(var(--asset-thumb-size, 120px) * 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1118;
  overflow: hidden;
}

.asset-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.asset-preview .video-preview,
.asset-preview .audio-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2535 0%, #0f1825 100%);
}

.asset-preview .play-icon,
.asset-preview .audio-icon {
  font-size: 28px;
  opacity: 0.8;
}

.asset-preview .video-label,
.asset-preview .audio-label {
  font-size: 10px;
  color: #8ea0ad;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-preview .file-icon {
  font-size: 32px;
  opacity: 0.6;
}

.asset-preview .file-label {
  font-size: 10px;
  color: #8ea0ad;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-name {
  padding: 6px 8px;
  font-size: 11px;
  color: #b4c0ca;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #2b3f4d;
}

.asset-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.asset-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}

.asset-preview-card {
  position: relative;
  width: min(920px, 92vw);
  max-height: 88vh;
  display: grid;
  gap: 12px;
  border: 1px solid #3a5060;
  border-radius: 10px;
  background: #101922;
  padding: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

#assetPreviewBody {
  display: grid;
  place-items: center;
  min-height: 220px;
  max-height: 72vh;
  overflow: auto;
  background: #071019;
  border-radius: 8px;
}

#assetPreviewBody img,
#assetPreviewBody video {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

#assetPreviewCaption {
  color: #b4c0ca;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.bound-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #5a9b6f;
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 拖放区域高亮 */
.asset-path.drop-zone-active {
  border-color: #f4d992 !important;
  background: rgba(244, 217, 146, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(244, 217, 146, 0.3);
}

/* 视频/音频弹出层 */
.asset-video-popup,
.asset-audio-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.audio-player-card {
  background: #121d28;
  border: 1px solid #3a5060;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.audio-player-card audio {
  width: 300px;
}

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 章节节点样式 */
.chapter-node {
  padding: 8px 10px;
  border: 1px solid #263745;
  border-radius: 6px;
  background: #121d28;
  cursor: pointer;
  margin-bottom: 6px;
}

.chapter-node:hover {
  border-color: #62bad6;
}

.chapter-node.active {
  border-color: #f4d992;
  background: #1a2f42;
}

.chapter-node strong {
  color: #e8edf2;
}

.segment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 12px;
}

.segment-node {
  padding: 3px 8px;
  background: #0f1a24;
  border: 1px solid #34495a;
  border-radius: 4px;
  font-size: 12px;
  color: #9caebc;
  cursor: pointer;
}

.segment-node:hover {
  border-color: #62bad6;
  color: #e8edf2;
}

.segment-node.active {
  background: #1f6f8b;
  border-color: #62bad6;
  color: white;
}

/* 悦游场景卡片 */
#yueyouSceneList,
#yuetuFrameList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.scene-card {
  border: 1px solid #2b3f4d;
  border-radius: 8px;
  background: #121d28;
  overflow: hidden;
  transition: all 0.2s ease;
}

.scene-card:hover {
  border-color: #62bad6;
}

.scene-card.active {
  border-color: #f4d992;
  box-shadow: 0 0 0 2px rgba(244, 217, 146, 0.16);
}

.scene-card.selected {
  border-color: #62bad6;
  box-shadow: inset 3px 0 0 #62bad6;
}

.scene-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.scene-card.drag-over {
  border-color: #f4d992;
  box-shadow: 0 0 0 2px rgba(244, 217, 146, 0.3);
}

.scene-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #0f1a24;
  border-bottom: 1px solid #2b3f4d;
  font-size: 12px;
}

.scene-drag-handle {
  cursor: grab;
  color: #5a6a78;
  font-size: 14px;
}

.scene-drag-handle:hover {
  color: #8ea0ad;
}

.scene-type-icon {
  font-size: 16px;
}

.scene-type-label {
  color: #b4c0ca;
  font-weight: 500;
}

.scene-number {
  margin-left: auto;
  color: #6a7a88;
  font-size: 11px;
}

.scene-card-preview {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1118;
  overflow: hidden;
}

.yuetu-hover-schematic {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #f3ecdd;
  transition: opacity .16s ease;
}

.scene-card:hover .yuetu-hover-schematic { opacity: 1; }
.yuetu-hover-schematic .schematic-media { min-width: 0; min-height: 0; background: linear-gradient(135deg, #39596b, #172631); }
.yuetu-hover-schematic.is-image-led .schematic-media { background: radial-gradient(circle at 45% 35%, #385666, #09111a 74%); }
.yuetu-hover-schematic .schematic-media::after { content: '图'; display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255,255,255,.72); font-size: 12px; }
.yuetu-hover-schematic.is-video .schematic-media::after { content: '▶'; font-size: 16px; }
.yuetu-hover-schematic .schematic-text { display: grid; align-content: center; gap: 4px; padding: 7px; background: #f7f1e5; }
.yuetu-hover-schematic .schematic-text i { display: block; height: 3px; border-radius: 99px; background: #8b7a60; opacity: .72; }
.yuetu-hover-schematic .schematic-text i:nth-child(2) { width: 76%; }
.yuetu-hover-schematic .schematic-text i:nth-child(3) { width: 58%; }
.yuetu-schematic-layout-top-image { grid-template-rows: 56% 44%; }
.yuetu-schematic-layout-bottom-image { grid-template-rows: 44% 56%; }
.yuetu-schematic-layout-bottom-image .schematic-text { order: 1; }
.yuetu-schematic-layout-bottom-image .schematic-media { order: 2; }
.yuetu-schematic-layout-left-image { grid-template-columns: 52% 48%; }
.yuetu-schematic-layout-right-image { grid-template-columns: 48% 52%; }
.yuetu-schematic-layout-right-image .schematic-text { order: 1; }
.yuetu-schematic-layout-right-image .schematic-media { order: 2; }
.yuetu-schematic-layout-overlay { display: block; position: relative; }
.yuetu-schematic-layout-overlay .schematic-text { position: absolute; inset: 0; z-index: 1; }
.yuetu-schematic-layout-overlay .schematic-media { position: absolute; z-index: 2; right: 10%; bottom: 8%; width: 38%; height: 52%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.yuetu-schematic-layout-fullscreen-bg { grid-template: 1fr / 1fr; }
.yuetu-schematic-layout-fullscreen-bg .schematic-media { grid-area: 1 / 1; }
.yuetu-schematic-layout-fullscreen-bg .schematic-text { grid-area: 1 / 1; align-self: end; margin: 8px; background: rgba(247,241,229,.84); }

.scene-card-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.scene-card-preview .video-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a2535 0%, #0f1825 100%);
}

.scene-card-preview .play-icon-small {
  font-size: 24px;
  opacity: 0.7;
}

.scene-card-preview .no-media {
  color: #5a6a78;
  font-size: 12px;
}

.scene-card-info {
  padding: 6px 8px;
  font-size: 11px;
  color: #8ea0ad;
  min-height: 36px;
}

.scene-text-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-speaker {
  display: block;
  margin-top: 4px;
  color: #b4c0ca;
}

.scene-card-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid #2b3f4d;
}

.btn-small {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
  min-height: auto;
}

.btn-danger {
  border-color: #8b3a3a;
  color: #d98585;
}

.btn-danger:hover {
  background: #2a1a1a;
}

/* 悦游场景编辑器弹窗 */
.scene-editor-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  padding: 20px;
}

.scene-editor-card {
  width: min(600px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #111b25;
  border: 1px solid #3a5060;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.scene-editor-card.inline {
  width: 100%;
  max-height: none;
  border-radius: 8px;
}

.scene-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2b3f4d;
}

.scene-editor-header.inline {
  padding: 0 0 12px;
  background: transparent;
}

.scene-editor-header h3 {
  margin: 0;
  color: #f4d992;
}

.popup-close-btn {
  background: transparent;
  border: 1px solid #3a5060;
  color: #8ea0ad;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0;
  min-height: auto;
}

.popup-close-btn:hover {
  background: #1a2a38;
  color: #e8edf2;
}

.scene-editor-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scene-editor-card.inline .scene-editor-body {
  padding: 0;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  color: #b4c0ca;
  font-size: 13px;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-with-btn {
  display: flex;
  gap: 8px;
}

.input-with-btn input {
  flex: 1;
}

.input-with-btn button {
  min-width: 60px;
}

.media-preview-box {
  height: 100px;
  border: 1px dashed #3a5060;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6a78;
  font-size: 12px;
}

.dialogue-fields {
  padding: 12px;
  background: #0f1820;
  border-radius: 8px;
  border: 1px solid #2b3f4d;
}

.dialogue-fields h4 {
  margin: 0 0 12px;
  color: #b4c0ca;
  font-size: 13px;
}

.dialogue-fields.hidden {
  display: none;
}

.rich-import-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.asset-action-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 9, 14, 0.72);
  backdrop-filter: blur(4px);
}

.asset-action-card {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid #3a5060;
  border-radius: 10px;
  background: #111b25;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.asset-action-card h3 { margin: 0 0 10px; }
.asset-action-card p { margin: 0 0 16px; color: #b4c0ca; line-height: 1.6; }
.asset-action-card input { width: 100%; margin-bottom: 16px; }
.asset-action-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.asset-action-buttons .danger { background: #9b4047; border-color: #bd5a62; }

.rich-import-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 14, 0.72);
  backdrop-filter: blur(4px);
}

.rich-import-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #111b25;
  border: 1px solid #3a5060;
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.rich-import-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #2b3f4d;
}

.rich-import-head h3 {
  margin: 0 0 6px;
}

.rich-import-head .muted {
  margin: 0;
  line-height: 1.6;
}

.rich-import-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

.rich-import-body label {
  display: grid;
  gap: 6px;
  color: #b4c0ca;
  font-size: 13px;
}

#richTextImportInput {
  min-height: 260px;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
}

.rich-import-result {
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid #2b3f4d;
  border-radius: 6px;
  background: #0f1820;
  line-height: 1.6;
  white-space: pre-wrap;
}

.rich-import-result.ok {
  color: #a7e0b0;
  border-color: rgba(86, 180, 110, 0.45);
  background: rgba(86, 180, 110, 0.08);
}

.rich-import-result.warn {
  color: #f4d992;
  border-color: rgba(244, 217, 146, 0.45);
  background: rgba(244, 217, 146, 0.08);
}

.rich-import-result.error {
  color: #ff9c9c;
  border-color: rgba(255, 120, 120, 0.45);
  background: rgba(255, 120, 120, 0.08);
}

.rich-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid #2b3f4d;
  background: #0d141c;
}

.scene-editor-footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #2b3f4d;
  background: #0d141c;
}

.scene-editor-card.inline .scene-editor-footer {
  padding: 12px 0 0;
  background: transparent;
}

.btn-primary {
  background: #1f6f8b;
  border-color: #3ca0c3;
}

.btn-secondary {
  background: #172532;
  border-color: #36546b;
}

.btn-cancel {
  background: transparent;
  border-color: #3a5060;
  color: #8ea0ad;
}

.chroma-key-card {
  width: min(980px, calc(100vw - 36px));
  max-height: min(780px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid #40596b;
  border-radius: 14px;
  background: #101b25;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.chroma-key-heading { display: flex; justify-content: space-between; gap: 18px; padding: 18px 22px 12px; border-bottom: 1px solid #2b3f4d; }
.chroma-key-heading h3 { margin: 0; color: #e9f3f8; }
.chroma-key-heading p { margin: 7px 0 0; color: #91a7b7; font-size: 13px; }
.chroma-key-close { align-self: flex-start; width: 32px; height: 32px; padding: 0; border-radius: 8px; font-size: 24px; line-height: 1; color: #b8c8d4; background: transparent; }
.chroma-key-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 22px; }
.chroma-key-previews h4 { margin: 0 0 8px; color: #c9d8e2; font-size: 13px; font-weight: 600; }
.chroma-canvas-wrap { min-height: 180px; display: grid; place-items: center; overflow: hidden; border: 1px solid #334b5b; border-radius: 9px; background: #080e14; }
.chroma-canvas-wrap.checkerboard { background-color: #d5dde0; background-image: linear-gradient(45deg, #aebdc5 25%, transparent 25%), linear-gradient(-45deg, #aebdc5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aebdc5 75%), linear-gradient(-45deg, transparent 75%, #aebdc5 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.chroma-canvas-wrap canvas { display: block; max-width: 100%; max-height: 330px; cursor: crosshair; }
.chroma-key-controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 22px 18px; }
.chroma-key-controls label { display: flex; align-items: center; gap: 7px; color: #bdced9; font-size: 13px; }
.chroma-key-controls input[type="color"] { width: 34px; height: 31px; padding: 2px; }
.chroma-key-controls input[type="text"] { width: 86px; }
.chroma-key-controls select { min-width: 132px; }

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

@media (max-width: 1000px) {
  #app {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  body {
    overflow: auto;
  }

  #left,
  #right,
  #center {
    overflow: visible;
  }

  .resize-handle {
    display: none;
  }

  .form-grid.two,
  .form-grid.three,
  .form-grid.four,
  .yuetu-workbench,
  .yueyou-layout,
  .effect-row,
  .rpg-row {
    grid-template-columns: 1fr;
  }

  .yuetu-media-path-field,
  .yuetu-template-field {
    grid-column: auto;
  }
  
  #assetGrid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}