/* 资产详情：形象库、预览与历史、提示词与生成、音色、参考图、集数、图片编辑。 */

/* Character asset workbench */
.look-sheet.asset-workbench {
  width: min(1240px, 96vw);
  height: min(760px, 92vh);
  padding: 18px 20px 20px;
}
.asset-workbench .asset-editor-head {
  height: 42px;
}
.asset-workspace {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
}
.workspace-split {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.workspace-split::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.14);
  transition: background .15s ease, width .15s ease;
}
.workspace-split:hover::after,
.asset-workspace.is-splitting .workspace-split::after {
  left: 5px;
  width: 4px;
  background: #9e4cff;
}
.asset-workspace.is-splitting {
  cursor: col-resize;
  user-select: none;
}
.look-library-panel,
.look-generation-panel {
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
  background: rgba(8,8,12,.46);
  border: 1px solid rgba(255,255,255,.065);
  overflow: hidden;
}
.look-library-panel {
  display: flex;
  flex-direction: column;
}
.look-library-head {
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.look-library-head .asset-editor-character {
  width: auto;
  min-width: 0;
  flex: 1;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.look-library-head .asset-editor-character > div:last-child {
  min-width: 0;
}
.character-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  overflow: hidden;
  background: #1c1a22;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.look-library-head .asset-editor-character strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}
.look-library-head .asset-editor-character span {
  max-width: none;
  margin-top: 3px;
  color: #9b95a6;
  font-size: 12px;
  line-height: 1.35;
}
.look-library-tools {
  height: 32px;
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.look-tool {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #8d8796;
  background: transparent;
}
.look-tool[hidden] {
  display: none;
}
#look-multi {
  width: auto;
  padding: 0 8px 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
#look-multi::after {
  content: "";
  width: 1px;
  height: 14px;
  margin-left: 5px;
  background: rgba(255,255,255,.1);
}
#look-multi.on::after {
  background: transparent;
}
.look-tool svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.look-tool:hover {
  color: #d8d2e0;
}
.look-tool.on {
  color: #fff;
  background: #6b46e5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.look-multi-bar {
  min-height: 42px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  flex-wrap: nowrap;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #c9c4d0;
  font-size: 12px;
}
.look-multi-bar[hidden] {
  display: none;
}
.look-multi-bar #look-select-all,
.look-multi-bar #look-select-rest {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #e6e1ea;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  flex: none;
  white-space: nowrap;
}
.look-multi-bar #look-select-all:hover,
.look-multi-bar #look-select-rest:hover {
  background: rgba(255,255,255,.14);
}
.look-multi-bar #look-select-all:disabled,
.look-multi-bar #look-select-rest:disabled {
  opacity: .4;
}
.asset-delete {
  color: #ffb3be;
}
.asset-actions .asset-delete:hover,
.look-multi-bar .asset-delete:hover {
  background: rgba(255,90,110,.14);
}
.asset-delete:disabled {
  opacity: .4;
}
.look-multi-bar #look-delete {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  flex: none;
  white-space: nowrap;
}
.look-multi-bar #look-gen-selected {
  min-height: 26px;
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
}
.look-multi-bar #look-gen-selected:disabled {
  opacity: .4;
}
.look-library-card.is-look-picked {
  box-shadow: inset 0 0 0 1px rgba(176,140,255,.8);
}
.look-view-switch {
  height: 26px;
  margin-left: 2px;
  padding-left: 2px;
  border-radius: 0;
  display: flex;
  gap: 2px;
  flex: none;
  background: transparent;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08);
}
.look-view-switch button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #8d8796;
}
.look-view-switch button:hover {
  color: #d8d2e0;
}
.look-view-switch button.on {
  color: #f4eeff;
  background: rgba(255,255,255,.1);
  box-shadow: none;
}
.look-view-switch svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.look-library-body {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  scrollbar-width: thin;
}
.look-flat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.look-library-card {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  color: #c6c0cc;
  text-align: left;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .16s ease, background .16s ease;
}
.look-library-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(178,132,255,.26);
}
.look-library-card.on {
  background: rgba(131,74,233,.09);
  border-color: rgba(173,117,255,.6);
  box-shadow: inset 0 0 0 1px rgba(159,94,255,.12);
}
.look-card-image {
  position: relative;
  aspect-ratio: 1.52 / 1;
  overflow: hidden;
  background: #15141a;
}
.look-card-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.look-add-child {
  position: static;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #b7a6d6;
  background: transparent;
  cursor: pointer;
}
.look-add-child svg {
  width: 13px;
  height: 13px;
  display: block;
}
.look-add-child:hover {
  color: #fff;
  background: rgba(139,92,246,.28);
}
.look-add-child:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 2px;
}
.look-card-del {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 4;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #f2eef6;
  background: rgba(12,10,16,.78);
  border: 1px solid rgba(255,255,255,.16);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.look-card-del svg {
  width: 13px;
  height: 13px;
  display: block;
}
.look-library-card:hover .look-card-del,
.look-card-del:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.look-card-del:hover {
  color: #fff;
  background: #e5484d;
  border-color: #e5484d;
}
.look-card-del:focus-visible {
  outline: 2px solid #ffb4b6;
  outline-offset: 2px;
}
.mind-meta {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8f8798;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.eps-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eps-edit {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #b9a6dc;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.eps-edit svg {
  width: 12px;
  height: 12px;
  display: block;
}
.mind-node:hover .eps-edit,
.mind-node.on .eps-edit,
.eps-edit:focus-visible {
  opacity: 1;
}
.eps-edit:hover {
  color: #fff;
  background: rgba(139,82,236,.45);
}
.eps-edit:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 1px;
}
.look-generation-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}
.look-gen-head {
  min-height: 32px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.look-gen-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.look-gen-title strong {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #f4f1f8;
  font-size: 15px;
  font-weight: 650;
}
.look-gen-title strong > .look-name {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.look-gen-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #8f8798;
  font-size: 12px;
  white-space: nowrap;
}
.current-look-state {
  height: 24px;
  padding: 0 10px;
  flex: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #70d5a9;
  background: rgba(45,142,99,.12);
  border: 1px solid rgba(77,191,140,.2);
  font-size: 12px;
  white-space: nowrap;
}
.current-look-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.current-look-state.pending,
.current-look-state.generating {
  color: #e6a44c;
  background: rgba(176,105,24,.11);
  border-color: rgba(219,147,56,.2);
}
.current-look-state.failed {
  color: #ff788e;
  background: rgba(180,44,69,.12);
  border-color: rgba(255,120,142,.2);
}
.look-current-output {
  min-height: 0;
  border-radius: 13px;
  display: flex;
  overflow: hidden;
  background: #0d0d12;
  border: 1px solid rgba(255,255,255,.055);
}
.look-current-output .stage {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.img-edit-hover {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(22,22,26,.88);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.look-current-output .stage:hover .img-edit-hover,
.img-edit-hover:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.img-edit-hover:hover {
  background: #111;
}
.look-current-output .stage > img.five-view-sheet {
  width: calc(100% - 18px);
  height: calc(100% - 14px);
  object-fit: contain;
}
.look-current-output .output-actions .btn {
  height: 28px;
  min-height: 28px;
  font-size: 12px;
}
.text-btn {
  color: #bb8aff;
  font-size: 12px;
}
.draft-hint {
  color: #6f6978;
  font-size: 12px;
}
.look-generation-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.gen-split {
  position: relative;
  height: 12px;
  margin: -11px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: row-resize;
  touch-action: none;
  z-index: 3;
}
.gen-split::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 36px;
  height: 2px;
  margin-left: -18px;
  border-radius: 2px;
  background: rgba(255,255,255,.14);
  transition: background .15s ease, width .15s ease, margin .15s ease, height .15s ease, top .15s ease;
}
.gen-split:hover::after,
.gen-split:focus-visible::after,
.look-generation-panel.is-splitting .gen-split::after {
  top: 4px;
  width: 56px;
  height: 4px;
  margin-left: -28px;
  background: #9e4cff;
}
.gen-split:focus-visible {
  outline: none;
}
.look-generation-panel.is-splitting {
  cursor: row-resize;
  user-select: none;
}
.look-generation-panel:has(.prompt-composer.collapsed) .gen-split {
  pointer-events: none;
  opacity: 0;
}
.look-current-output {
  position: relative;
}
.look-current-output .output-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
  border-top: 1px solid rgba(255,255,255,.05);
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
}
.prompt-composer {
  container: composer / inline-size;
  flex: none;
  overflow: hidden;
  border-radius: 15px;
  color: #c7c1cc;
  background: #1d1d20;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.composer-main {
  grid-template-columns: 56px minmax(0, 1fr) 54px;
}
.composer-main > .look-area {
  height: 58px;
  min-height: 58px;
  padding: 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.55;
}
.composer-collapse {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d9d4dc;
  background: rgba(255,255,255,.045);
  font-size: 15px;
  line-height: 1;
}
.composer-toolbar {
  min-height: 43px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.065);
}
.composer-options {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer-options::-webkit-scrollbar {
  display: none;
}
.composer-options select,
.composer-options button {
  height: 28px;
  padding: 0 7px;
  flex: none;
  color: #ddd8e1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
}
.composer-options select:hover,
.composer-options button:hover {
  border-radius: 7px;
  background: rgba(255,255,255,.045);
}
.gen-control {
  position: relative;
  flex: none;
}
.composer-options .gen-model-trigger,
.composer-options .gen-ratio-trigger {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px;
  color: #f3f1f5;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0;
}
.composer-options .gen-model-trigger {
  padding-left: 4px;
}
.composer-options .gen-model-trigger .gen-model-mark {
  color: #d8d4dd;
}
.composer-options .gen-ratio-trigger {
  color: #eceaf1;
  background: rgba(255,255,255,.07);
}
.composer-options .gen-model-trigger:hover,
.composer-options .gen-ratio-trigger:hover {
  background: rgba(255,255,255,.1);
}
.composer-options .gen-model-trigger[aria-expanded="true"],
.composer-options .gen-ratio-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,.12);
}
.gen-model-mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: none;
}
.gen-model-mark svg,
.gen-ratio-trigger > svg,
.gen-model-menu svg {
  width: 16px;
  height: 16px;
  display: block;
}
.gen-ratio-trigger > svg {
  width: 15px;
  height: 15px;
  color: #d9d5df;
}
.gen-model-menu,
.gen-type-menu,
.gen-popover {
  position: fixed;
  z-index: 30;
  color: #f2f0f4;
  background: #2a2a2e;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
.gen-model-menu[hidden],
.gen-type-menu[hidden],
.gen-popover[hidden] {
  display: none;
}
.gen-model-menu {
  width: 292px;
  max-height: min(380px, 64vh);
  padding: 6px;
  border-radius: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gen-model-menu button {
  width: 100%;
  height: 40px;
  padding: 0 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  color: #f4f2f6;
  background: transparent;
  font-size: 13px;
  font-weight: 550;
  text-align: left;
}
.gen-model-menu button:hover {
  background: rgba(255,255,255,.06);
}
.gen-model-menu button.on {
  background: rgba(255,255,255,.1);
}
.gen-model-menu button .tick {
  margin-left: auto;
  color: #fff;
  font-size: 12px;
}
.gen-popover {
  width: 348px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gen-pop-block[hidden] {
  display: none;
}
.gen-pop-block > span {
  display: block;
  margin-bottom: 8px;
  color: #9b97a3;
  font-size: 12px;
  font-weight: 500;
}
.quality-row,
.think-row,
.search-row {
  display: grid;
  gap: 6px;
}
.quality-row {
  grid-template-columns: repeat(4, 1fr);
}
.think-row,
.search-row {
  grid-template-columns: 1fr 1fr;
}
.quality-row button,
.think-row button,
.search-row button,
.ratio-grid button {
  border: 0;
  color: #c8c4ce;
  background: #232328;
  cursor: pointer;
}
.quality-row button {
  height: 32px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 560;
}
.quality-row button:disabled {
  opacity: .28;
  cursor: default;
}
.think-row button,
.search-row button {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 13px;
}
.think-row button svg {
  width: 14px;
  height: 14px;
}
.search-row button {
  justify-content: flex-start;
  padding-left: 14px;
}
.search-row button i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.45);
  box-sizing: border-box;
}
.search-row button.on i {
  border-color: #fff;
  box-shadow: inset 0 0 0 3px #2a2a2e, inset 0 0 0 7px #fff;
}
.quality-row button.on,
.think-row button.on,
.search-row button.on,
.ratio-grid button.on {
  color: #fff;
  background: #4a4a50;
}
.ratio-grid {
  display: grid;
  grid-template-columns: 64px repeat(5, 1fr);
  grid-template-rows: 52px 52px;
  gap: 6px;
}
.ratio-grid button {
  min-width: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1;
}
.ratio-grid button[data-ratio="auto"] {
  grid-row: 1 / span 2;
}
.ratio-grid svg {
  width: 16px;
  height: 16px;
}
.composer-options .gen-popover button,
.composer-options .gen-model-menu button {
  height: auto;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 550;
  background: #232328;
}
.composer-options .gen-model-menu button {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  color: #d9d5de;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}
.composer-options .gen-model-menu button:hover {
  background: rgba(255,255,255,.055);
}
.composer-options .gen-model-menu button.on,
.composer-options .gen-model-menu button.on:hover {
  color: #fff;
  background: rgba(150,98,255,.14);
}
.model-group {
  padding: 8px 8px 4px;
  color: #6f6a77;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.model-group:first-child {
  padding-top: 4px;
}
.gen-model-menu .gen-model-mark {
  width: 16px;
  height: 16px;
  color: #9a95a2;
}
.gen-model-menu .gen-model-mark svg {
  width: 14px;
  height: 14px;
}
.gen-model-menu button.on .gen-model-mark {
  color: #c9a8ff;
}
.model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-badge {
  height: 15px;
  padding: 0 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  flex: none;
  color: #b892ff;
  background: rgba(150,98,255,.16);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}
.model-badge.hot {
  color: #f2a65a;
  background: rgba(242,166,90,.14);
}
.model-meta {
  margin-left: auto;
  flex: none;
  color: #6f6a77;
  font-size: 12px;
  white-space: nowrap;
}
.composer-options .gen-model-menu .tick {
  margin-left: 0;
  width: 14px;
  height: 14px;
  flex: none;
  color: #c9a8ff;
}
.composer-options .gen-model-menu .tick svg {
  width: 14px;
  height: 14px;
  display: block;
}
.composer-options .ratio-grid button {
  height: 100%;
  font-size: 12px;
}
.composer-options .quality-row button {
  height: 32px;
}
.composer-options .think-row button,
.composer-options .search-row button {
  height: 36px;
}
.composer-submit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.composer-submit .text-btn {
  font-size: 12px;
}
.generation-cost {
  padding-left: 4px;
  color: #f0edf2;
  font-size: 12px;
  font-weight: 650;
}
.generate-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #111;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.generate-arrow:hover {
  transform: translateY(-1px);
}
.prompt-composer.collapsed .composer-main {
  grid-template-columns: minmax(0, 1fr) 24px;
}
.prompt-composer.collapsed .composer-main > .look-area {
  display: none;
}

@media (max-width: 900px) {
  .look-sheet.asset-workbench {
    width: 96vw;
    height: 94vh;
  }
  .asset-workspace {
    grid-template-columns: 310px minmax(0, 1fr);
  }
  .draft-hint {
    display: none;
  }
}
.look-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.look-foot .left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.role-sheet {
  width: min(460px, 92vw);
  height: auto;
}
#role-dialog {
  z-index: 60;
}
#role-dialog .look-area {
  min-height: 68px;
}
#role-dialog .role-eps-hint {
  margin: 6px 0 0;
  color: #8d8796;
  font-size: 12px;
}
#role-dialog .role-eps-grid {
  max-height: 96px;
  margin-top: 8px;
}
#role-dialog [hidden] {
  display: none;
}
.role-sheet label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 6px;
}
.role-sheet .look-area {
  min-height: 96px;
}
.char-card {
  cursor: pointer;
}

/* Full-page character editor */
body.asset-editor-page-open {
  overflow: hidden;
}
.current-look-state[hidden] {
  display: none !important;
}
.asset-page #look-dialog {
  padding: 0;
  background: radial-gradient(820px 440px at 72% 14%, rgba(89,54,153,.1), transparent 72%), #0b0b10;
  backdrop-filter: none;
}
.asset-page #look-dialog.open {
  display: block;
}
.asset-page #look-dialog .asset-workbench {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0 28px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.asset-page #look-dialog .asset-editor-head {
  width: 100%;
  height: 68px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.editor-page-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.editor-page-back {
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  flex: none;
  color: #b9b3c0;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.065);
  font-size: 12px;
}
.editor-page-back:hover {
  color: #fff;
  border-color: rgba(180,139,255,.3);
}
.asset-page #look-dialog .editor-page-brand h3 {
  margin: 4px 0 0;
  font-size: 14px;
}
.editor-role-switch {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.editor-role-switch::-webkit-scrollbar {
  display: none;
}
.editor-role-switch.is-overflowing:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 76px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 76px), transparent 100%);
}
.editor-role-switch button {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: #b7b1bf;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.editor-role-switch button:hover {
  color: #f4f0f7;
  background: rgba(255,255,255,.08);
}
.editor-role-switch button.on {
  color: #f7f2ff;
  background: rgba(132,76,237,.22);
  border-color: rgba(176,124,255,.48);
}
.editor-role-switch small {
  color: #847e8d;
  font-size: 12px;
}
.editor-role-switch button.on small {
  color: #cbb6f2;
}
.asset-page #look-dialog .asset-workspace {
  width: min(1480px, 100%);
  margin: 14px auto 0;
  grid-template-columns: minmax(360px, .7fr) minmax(0, 1.3fr);
}
.look-state-tag {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 2;
  height: 23px;
  padding: 0 8px 0 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  color: #f0a04a;
  background: rgba(22,18,16,.8);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
  box-shadow: 0 4px 12px rgba(0,0,0,.26);
  font-size: 12px;
  white-space: nowrap;
}
.look-state-tag svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.look-state-tag.ready {
  color: #7ddea8;
}
.look-state-tag.failed {
  color: #ff8b9a;
}
.asset-page #look-dialog .look-current-output .stage > img.five-view-sheet {
  width: calc(100% - 12px);
  height: calc(100% - 8px);
}
.img-edit[hidden] {
  display: none !important;
}
.img-edit {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,4,9,.72);
}
.img-edit-sheet {
  position: relative;
  width: min(1180px, calc(100vw - 36px));
  height: min(760px, calc(100vh - 36px));
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  overflow: hidden;
}
.img-edit-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.img-edit.is-cropping .img-edit-stage {
  cursor: default;
}
.img-edit.is-locked .img-edit-stage {
  cursor: default;
}
.img-edit-stage.is-panning {
  cursor: grabbing;
}
.img-edit-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 92%;
  max-height: 86%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.img-edit-cropbox {
  position: absolute;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  cursor: move;
  touch-action: none;
}
.img-edit-cropbox::before,
.img-edit-cropbox::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.img-edit-cropbox::before {
  left: 33.33%;
  right: 33.33%;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.75);
}
.img-edit-cropbox::after {
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.75);
}
.img-edit-cropbox i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #16161a;
  border-radius: 1px;
}
.img-edit-cropbox i[data-crop-handle="nw"] {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}
.img-edit-cropbox i[data-crop-handle="ne"] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}
.img-edit-cropbox i[data-crop-handle="sw"] {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}
.img-edit-cropbox i[data-crop-handle="se"] {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}
.img-edit-cropbox i[data-crop-handle="n"] {
  left: 50%;
  top: -6px;
  margin-left: -5px;
  cursor: ns-resize;
}
.img-edit-cropbox i[data-crop-handle="s"] {
  left: 50%;
  bottom: -6px;
  margin-left: -5px;
  cursor: ns-resize;
}
.img-edit-cropbox i[data-crop-handle="w"] {
  left: -6px;
  top: 50%;
  margin-top: -5px;
  cursor: ew-resize;
}
.img-edit-cropbox i[data-crop-handle="e"] {
  right: -6px;
  top: 50%;
  margin-top: -5px;
  cursor: ew-resize;
}
.img-edit-crop,
.img-edit-bar,
.img-edit-x {
  position: absolute;
  z-index: 3;
}
.img-edit-crop {
  left: 50%;
  bottom: 78px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(28,28,32,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.img-edit-crop:hover {
  background: #111;
}
.img-edit-crop:disabled {
  opacity: .4;
  cursor: default;
}
.img-edit-x {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3a3a40;
  background: rgba(255,255,255,.86);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
}
.img-edit-x svg {
  width: 14px;
  height: 14px;
}
.img-edit-x:hover {
  color: #111;
  background: #fff;
}
.img-edit-bar {
  left: 50%;
  bottom: 16px;
  height: 44px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 12px;
  transform: translateX(-50%);
  background: rgba(22,22,26,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.img-edit-bar button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #f3f3f5;
  background: transparent;
  cursor: pointer;
}
.img-edit-bar button svg {
  width: 16px;
  height: 16px;
}
.img-edit-bar button:hover {
  background: rgba(255,255,255,.1);
}
.img-edit-bar button.on {
  background: rgba(255,255,255,.16);
}
.img-edit-bar button:disabled {
  opacity: .35;
  cursor: default;
}
.img-edit-bar button:disabled:hover {
  background: transparent;
}
.img-edit-bar button[data-img-act="close"] {
  margin-left: 6px;
}
.img-edit-bar button:focus-visible,
.img-edit-crop:focus-visible,
.img-edit-x:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 2px;
}
.asset-page #look-dialog .look-current-output .output-actions {
  display: flex;
  gap: 6px;
}
.asset-page #look-dialog .look-current-output.is-empty .output-actions {
  display: none;
}
.look-current-output:not(.is-empty) #local-upload,
.look-current-output:not(.is-empty) #reverse-image {
  display: none;
}
.look-generation-live {
  width: min(360px, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #eee9f4;
  text-align: center;
}
.look-generation-live strong {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 620;
}
.look-generation-live > span:not(.look-generation-spinner):not(.look-generation-error) {
  margin-top: 6px;
  color: #8f8898;
  font-size: 12px;
}
.look-generation-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(195,157,255,.18);
  border-top-color: #b98cff;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(139,82,236,.15);
  animation: spin .9s linear infinite;
}
.look-generation-track {
  width: min(280px, 82%);
  height: 4px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.look-generation-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8650e8, #be8cff);
  box-shadow: 0 0 12px rgba(177,128,255,.42);
  transition: width .45s ease;
}
.look-generation-live small {
  margin-top: 7px;
  color: #766f80;
  font-size: 12px;
}
.look-generation-live.is-failed strong {
  color: #ff96a8;
}
.look-generation-error {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff9bad;
  background: rgba(192,48,75,.14);
  border: 1px solid rgba(255,120,142,.24);
  font-size: 20px;
  font-weight: 650;
}
.asset-page #look-dialog .look-current-output .output-actions .btn {
  height: 29px;
  min-height: 29px;
  padding: 0 11px;
  border-radius: 15px;
  color: #e7e2eb;
  background: rgba(20,18,26,.82);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
  font-size: 12px;
}
.asset-page #look-dialog .look-current-output .output-actions .btn:hover {
  color: #fff;
  border-color: rgba(183,137,255,.38);
  background: rgba(36,29,48,.9);
}
.asset-page #look-dialog .look-current-output .output-actions .upload-reverse {
  color: #e6d9ff;
  background: rgba(91,55,145,.8);
  border-color: rgba(183,137,255,.28);
}
.output-actions .upload-reverse svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -3px;
}
.output-actions .upload-reverse span {
  margin-left: 3px;
  color: #d7baff;
  font-size: 12px;
}
.image-analyze-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  height: 28px;
  padding: 0 11px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #eee7ff;
  background: rgba(29,24,40,.88);
  border: 1px solid rgba(182,139,255,.32);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  font-size: 12px;
}
.image-analyze-badge[hidden] {
  display: none;
}
.image-analyze-badge.loading::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(220,202,255,.32);
  border-top-color: #c4a2ff;
  animation: spin 1s linear infinite;
}
.look-current-output {
  flex-direction: row;
}
.look-current-output .stage {
  flex: 1;
}
.preview-side {
  position: relative;
  flex: none;
  width: 0;
}
.preview-side[hidden] {
  display: none;
}
.preview-side-head {
  display: contents;
}
.preview-side-toggle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #e7e2eb;
  background: rgba(20,18,26,.82);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.preview-side-toggle svg {
  width: 16px;
  height: 16px;
}
.preview-side-toggle .icon-collapse {
  display: none;
}
.preview-side.is-collapsed .preview-side-tabs,
.preview-side.is-collapsed .preview-side-list {
  display: none;
}
.preview-side.is-collapsed .preview-side-toggle {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 3;
}
.preview-side.is-open {
  width: 188px;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #141318;
  border-left: 1px solid rgba(255,255,255,.06);
}
.preview-side.is-open .preview-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-side.is-open .preview-side-toggle {
  width: 28px;
  height: 28px;
  flex: none;
  box-shadow: none;
  background: rgba(255,255,255,.05);
}
.preview-side.is-open .preview-side-toggle .icon-expand {
  display: none;
}
.preview-side.is-open .preview-side-toggle .icon-collapse {
  display: block;
}
.preview-side-tabs {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.preview-side-tabs button {
  height: 28px;
  padding: 0 4px;
  border-radius: 8px;
  color: #b7b0c0;
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
  font-size: 12px;
  white-space: nowrap;
}
.preview-side-tabs button.on {
  color: #f7f2ff;
  background: rgba(136,78,233,.78);
}
.preview-side-list {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  scrollbar-width: thin;
}
.preview-side-card {
  position: relative;
  flex: none;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  background: #1c1b22;
  border: 1px solid rgba(255,255,255,.08);
}
.preview-side-card.on {
  border-color: rgba(190,147,255,.95);
  box-shadow: 0 0 0 1px rgba(190,147,255,.35);
}
.preview-side-card img {
  width: 100%;
  height: 78px;
  object-fit: cover;
  object-position: top;
  background: #f3f3f3;
}
.preview-side-card span {
  display: block;
  padding: 6px 8px 7px;
  overflow: hidden;
  color: #d5cedf;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-side-card span b {
  margin-right: 4px;
  color: #d7c4ff;
  font-weight: 650;
}
.preview-side-card .preview-history-caption small {
  display: none;
}
.preview-side-card:hover .preview-history-caption,
.preview-side-card:focus-within .preview-history-caption {
  max-height: 132px;
  overflow: auto;
  line-height: 1.5;
  white-space: normal;
  text-overflow: unset;
}
.preview-side-card:hover .preview-history-caption small,
.preview-side-card:focus-within .preview-history-caption small {
  display: block;
  margin: 2px 0 4px;
  color: #9b94a6;
  font-size: 12px;
}
.preview-side-open {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
.preview-history-acts {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0 8px 8px;
  background: linear-gradient(180deg, rgba(8,8,12,.02), rgba(8,8,12,.55));
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.preview-side-card:hover .preview-history-acts,
.preview-side-card:focus-within .preview-history-acts {
  opacity: 1;
  pointer-events: auto;
}
.preview-history-acts button {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #f4f1f8;
  background: rgba(16,16,20,.78);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.preview-history-acts svg {
  width: 14px;
  height: 14px;
}
.preview-history-acts button::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(12,12,16,.94);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.preview-history-acts button:first-child::after {
  left: 0;
  transform: none;
}
.preview-history-acts button:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}
.preview-history-acts button:hover::after,
.preview-history-acts button:focus-visible::after {
  opacity: 1;
}
.preview-history-acts button:hover {
  color: #fff;
  background: rgba(40,40,48,.92);
}
.preview-history-acts button[data-history-delete]:hover {
  color: #fff;
  background: #e5484d;
  border-color: #e5484d;
}
.preview-side-empty {
  margin-top: 8px;
  color: #7e7788;
  font-size: 12px;
  text-align: center;
}
.look-current-output.is-rail-open .output-actions {
  right: 200px;
}
.look-current-output.is-empty .preview-side {
  display: none;
}

@media (max-width: 1120px) {
  .asset-page #look-dialog .asset-editor-head {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .asset-page #look-dialog .asset-workspace {
    grid-template-columns: 330px minmax(0, 1fr);
  }
}

/* Prompt editor and standalone voice library */
.composer-main {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.composer-reference-row {
  max-width: 100%;
  margin: 0;
  padding: 10px 12px 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.composer-reference-row.is-free .reference-sources,
.composer-reference-row.is-free .reference-extra::before {
  display: none;
}
.reference-sources {
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
}
.reference-source {
  position: relative;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  color: #b7b0c0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.reference-source:hover {
  color: #f3eef8;
}
.reference-source:has(input:checked) {
  color: #fff;
  background: #7c4fe0;
}
.reference-source input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.reference-extra {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.reference-extra::before {
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 4px 0 6px;
  flex: none;
  background: rgba(255,255,255,.14);
}
.reference-picks {
  display: flex;
  align-items: center;
  gap: 4px;
}
.reference-picks:empty {
  display: none;
}
.reference-pick {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: #2c2a33;
}
.reference-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.reference-pick button {
  position: absolute;
  inset: 0;
  color: #fff;
  background: rgba(8,7,12,.55);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
}
.reference-pick:hover button,
.reference-pick button:focus-visible {
  opacity: 1;
}
.reference-add {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #b8b1c0;
  background: transparent;
  border: 1px dashed rgba(255,255,255,.22);
  cursor: pointer;
}
.reference-add svg {
  width: 14px;
  height: 14px;
}
.reference-add:hover {
  color: #efe8f6;
  background: rgba(132,76,237,.1);
  border-color: rgba(176,124,255,.55);
}
.reference-add:disabled {
  opacity: .4;
  cursor: default;
}
.prompt-composer:focus-within {
  border-color: rgba(190,160,255,.38);
}
.composer-prompt-row {
  position: relative;
  min-height: 108px;
  padding: 4px 14px 10px;
}
.prompt-field {
  position: relative;
  min-width: 0;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.prompt-field > .look-area {
  width: 100%;
  height: 72px;
  min-height: 72px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  color: #f4f1f7;
  background: transparent;
  font-size: 14px;
  line-height: 1.65;
  resize: none;
  scrollbar-width: thin;
}
.prompt-field > .look-area::placeholder {
  color: #7a7482;
}
.prompt-field-foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prompt-ai-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.prompt-field-foot .text-btn {
  height: 24px;
  padding: 0;
  font-size: 12px;
  font-weight: 560;
}
.image-prompt-state {
  color: #a990d2;
  font-size: 12px;
  white-space: nowrap;
}
.image-prompt-state[hidden] {
  display: none;
}
.image-prompt-state.done {
  color: #8dd7ae;
}
.prompt-count {
  color: #8a8494;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.composer-prompt-row .composer-collapse {
  position: absolute;
  top: 2px;
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
  color: #b7b1bd;
  background: transparent;
}
.composer-prompt-row .composer-collapse svg {
  width: 14px;
  height: 14px;
  display: block;
  margin: auto;
}
.composer-prompt-row .composer-collapse:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.composer-submit .draft-hint {
  display: none;
}
.asset-match {
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: #eadcff;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(186,146,255,.32);
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}
.asset-match svg {
  width: 13px;
  height: 13px;
}
.asset-match:hover {
  background: rgba(139,92,246,.28);
}
@container composer (max-width: 540px) {
  .asset-match {
    width: 30px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  .asset-match svg {
    width: 14px;
    height: 14px;
  }
}
.generation-action {
  height: 34px;
  padding-left: 9px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(10,9,12,.32);
  border: 1px solid rgba(255,255,255,.16);
}
.generation-action .generation-cost {
  padding: 0;
  color: #e9e4ed;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.generation-action .generation-cost span {
  color: #b78bff;
}
.generation-action .generate-arrow {
  width: 30px;
  height: 30px;
  font-size: 19px;
  box-shadow: none;
}
.generation-action .generate-arrow:disabled {
  cursor: default;
  opacity: .78;
}
.generation-action .generate-arrow.is-generating::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(74,45,122,.24);
  border-top-color: #6940b5;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.prompt-composer.collapsed .composer-main {
  min-height: 0;
  padding: 6px 8px;
}
.prompt-composer.collapsed .composer-reference-row,
.prompt-composer.collapsed .prompt-field {
  display: none;
}
.prompt-composer.collapsed .composer-prompt-row {
  min-height: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
.prompt-composer.collapsed .composer-collapse {
  position: static;
  transform: rotate(180deg);
}
.composer-options .gen-type-trigger {
  height: 30px;
  gap: 2px;
  padding: 0 4px 0 8px;
  color: #e6e1ea;
  font-size: 12px;
  font-weight: 520;
}
.composer-options .gen-type-trigger svg {
  width: 14px;
  height: 14px;
  color: #8d8794;
  transition: transform .16s ease;
}
.composer-options .gen-type-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.gen-type-menu {
  width: 232px;
  max-height: min(440px, 70vh);
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
}
.gen-type-group {
  padding: 8px 8px 4px;
  color: #8d8794;
  font-size: 12px;
}
.gen-type-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,.07);
}
.gen-type-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.gen-type-text b {
  font-weight: 520;
}
.gen-type-text small {
  color: #8d8794;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-options .gen-type-menu button {
  width: 100%;
  min-height: 42px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
  color: #e4e0e8;
  background: transparent;
  font-size: 12px;
}
.composer-options .gen-type-menu button svg {
  width: 13px;
  height: 13px;
  color: #c9a8ff;
  opacity: 0;
}
.composer-options .gen-type-menu button.on svg {
  opacity: 1;
}
.composer-options .gen-type-menu button:hover {
  background: rgba(255,255,255,.055);
}
.composer-options .gen-type-menu button.on,
.composer-options .gen-type-menu button.on:hover {
  color: #fff;
  background: rgba(150,98,255,.14);
}
.reference-modal {
  position: fixed;
  inset: 0;
  z-index: 102;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(4,4,7,.68);
  backdrop-filter: blur(8px);
}
.reference-modal.open {
  display: grid;
}
.reference-sheet {
  width: min(620px, 94vw);
  max-height: 86vh;
  padding: 20px;
  border-radius: 20px;
  overflow-y: auto;
  color: #dcd7e1;
  background: linear-gradient(145deg, rgba(194,204,241,.05), transparent 36%), #17161f;
  border: 1px solid rgba(226,220,255,.11);
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}
.reference-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.reference-sheet-head > div > span {
  color: #777180;
  font-size: 12px;
  letter-spacing: .08em;
}
.reference-sheet-head h3 {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 650;
}
.reference-source-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reference-source-actions > button {
  min-height: 88px;
  padding: 14px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  color: #d7d1dc;
  text-align: left;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.075);
}
.reference-source-actions > button:hover,
.reference-source-actions > button.on {
  background: rgba(132,76,237,.09);
  border-color: rgba(176,124,255,.34);
}
.reference-source-icon {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #c49cff;
  background: rgba(139,80,244,.15);
  font-size: 16px;
}
.reference-source-actions strong {
  align-self: end;
  font-size: 12px;
  font-weight: 600;
}
.reference-source-actions small {
  align-self: start;
  margin-top: 3px;
  color: #777180;
  font-size: 12px;
}
.reference-library-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(7,7,10,.28);
  border: 1px solid rgba(255,255,255,.055);
}
.reference-library-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.reference-library-head strong {
  font-size: 12px;
}
.reference-library-head span {
  color: #777180;
  font-size: 12px;
}
.reference-asset-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.reference-asset-card {
  min-width: 0;
  padding: 4px;
  border-radius: 10px;
  color: #aaa4b1;
  text-align: left;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
}
.reference-asset-card:hover,
.reference-asset-card.on {
  color: #eee7f5;
  border-color: rgba(181,132,255,.52);
  background: rgba(132,76,237,.1);
}
.reference-asset-card.is-added {
  opacity: .45;
}
.reference-asset-card img {
  width: 100%;
  aspect-ratio: 1 / .85;
  border-radius: 7px;
  object-fit: cover;
  object-position: top;
  background: #eee;
}
.reference-asset-card span {
  display: block;
  margin: 5px 2px 1px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-sheet-foot {
  margin-top: 16px;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.reference-sheet-foot .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 16px;
  font-size: 12px;
}
.reference-sheet-foot .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.voice-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(4,4,7,.68);
  backdrop-filter: blur(8px);
}
.voice-modal.open {
  display: grid;
}
.voice-sheet {
  width: min(720px, 94vw);
  max-height: 88vh;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #dcd7e1;
  background: linear-gradient(145deg, rgba(194,204,241,.05), transparent 36%), #17161f;
  border: 1px solid rgba(226,220,255,.11);
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}
.voice-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.voice-sheet-head > div > span {
  color: #777180;
  font-size: 12px;
  letter-spacing: .08em;
}
.voice-sheet-head h3 {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 650;
}
.voice-current {
  margin-top: 16px;
  padding: 10px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
}
.voice-current-look {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: #eee;
}
.voice-current-look img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.voice-current strong {
  display: block;
  color: #e8e3ec;
  font-size: 12px;
}
.voice-current p {
  margin-top: 4px;
  color: #777180;
  font-size: 12px;
}
.voice-current-copy {
  flex: 1;
  min-width: 0;
}
.voice-switch {
  height: 28px;
  padding: 0 10px 0 4px;
  flex: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a39cab;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.voice-switch i {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #3a3842;
  transition: background .15s ease;
}
.voice-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d8d3de;
  transition: transform .15s ease, background .15s ease;
}
.voice-switch.is-on {
  color: #eadcff;
  border-color: rgba(176,124,255,.38);
}
.voice-switch.is-on i {
  background: #8b52ec;
}
.voice-switch.is-on i::after {
  background: #fff;
  transform: translateX(14px);
}
.voice-switch:disabled {
  opacity: .45;
  cursor: default;
}
.voice-tabs {
  display: flex;
  gap: 4px;
}
.voice-tabs button {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #827b8b;
  font-size: 12px;
}
.voice-tabs button.on {
  color: #eadfff;
  background: rgba(137,79,246,.18);
}
.voice-library-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.voice-library-grid button {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  color: #aaa3b1;
  text-align: left;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.055);
}
.voice-library-grid button[hidden] {
  display: none !important;
}
.voice-library-grid button:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(178,133,255,.25);
}
.voice-library-grid button.on {
  background: rgba(133,77,235,.12);
  border-color: rgba(174,121,255,.48);
}
.voice-play {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-self: center;
  color: #c096ff;
  background: rgba(135,78,235,.15);
  font-size: 12px;
}
.voice-library-grid strong {
  align-self: end;
  color: #e2dde6;
  font-size: 12px;
  font-weight: 600;
}
.voice-library-grid small {
  margin-top: 3px;
  color: #6f6978;
  font-size: 12px;
}
.voice-custom {
  margin-top: 14px;
  display: block;
}
.voice-custom > span {
  display: block;
  margin-bottom: 6px;
  color: #817b89;
  font-size: 12px;
}
.voice-custom .look-field {
  height: 36px;
}
.voice-sheet-foot {
  margin-top: 16px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.06);
}
.voice-tabs {
  margin-top: 14px;
  flex-wrap: wrap;
}
.voice-pane[hidden] { display: none; }
.voice-pane:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.voice-pane[data-voice-pane="library"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.voice-pane[data-voice-pane="library"] .voice-filters {
  flex: none;
}
.voice-pane[data-voice-pane="library"] .voice-library-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.voice-pane[data-voice-pane="library"] .voice-empty:not([hidden]) {
  flex: none;
}
.voice-pane-lead,
.voice-foot-note {
  color: #8d8796;
  font-size: 12px;
  line-height: 1.5;
}
.voice-filters {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.voice-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.voice-filter > span {
  min-width: 28px;
  color: #8d8796;
  font-size: 12px;
}
.voice-filter button {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #c9c3d0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.voice-filter button.on {
  color: #fff;
  background: rgba(124,92,255,.28);
  border-color: rgba(176,150,255,.45);
}
.voice-card {
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.voice-card:hover { border-color: rgba(178,133,255,.28); }
.voice-card.on {
  background: rgba(133,77,235,.14);
  border-color: rgba(174,121,255,.5);
}
.voice-card-copy {
  min-width: 0;
  display: grid;
}
.voice-card-copy strong {
  color: #f3eef8;
  font-size: 13px;
  font-weight: 600;
}
.voice-card-copy small,
.voice-upload-msg {
  color: #9a94a4;
  font-size: 12px;
  line-height: 1.4;
}
.voice-upload-msg { margin: 8px 0 0; }
.voice-upload-msg.is-error { color: #ff9aab; }
.voice-rec {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  color: #e4d6ff;
  background: rgba(124,92,255,.2);
  font-size: 10px;
  font-style: normal;
}
.voice-library-grid button.voice-play {
  min-height: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  grid-template-columns: none;
  border-radius: 50%;
  color: #f4f1f8;
  background: rgba(124,92,255,.85);
  border: 0;
}
.voice-library-grid button.voice-play.is-playing { background: #fff; color: #24183d; }
.voice-skeleton {
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: voice-shimmer 1s linear infinite;
}
@keyframes voice-shimmer { to { background-position: -200% 0; } }
.voice-custom { margin-top: 12px; }
.voice-custom em {
  margin-left: 8px;
  color: #8d8796;
  font-style: normal;
  font-weight: 400;
}
.voice-custom textarea { width: 100%; margin-top: 6px; }
.role-voice-note {
  margin: 4px 0 0;
  color: #8d8796;
  font-size: 12px;
  line-height: 1.5;
}
.voice-sheet-foot > div {
  display: flex;
  gap: 7px;
}
.rewrite-sheet {
  width: min(560px, 94vw);
}
.rewrite-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.rewrite-field > span {
  color: #ece7f2;
  font-size: 13px;
}
.rewrite-field > span i {
  margin-right: 4px;
  color: #e35d6a;
  font-style: normal;
}
.rewrite-field > span em {
  margin-left: 6px;
  color: #8d8796;
  font-size: 12px;
  font-style: normal;
}
.rewrite-field select,
.rewrite-field textarea {
  width: 100%;
  color: #f2eef6;
  background: #121218;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.rewrite-model {
  position: relative;
}
.rewrite-model-trigger {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #f2eef6;
  background: #121218;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  text-align: left;
}
.rewrite-model-trigger > span {
  flex: 1;
  min-width: 0;
  line-height: 1;
}
.rewrite-model-trigger > svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  color: #b7b1c0;
}
.rewrite-model-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}
.rewrite-model-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 12px;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.rewrite-model-menu[hidden] {
  display: none;
}
.rewrite-model-menu button {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  color: #eeeaf3;
  background: transparent;
  text-align: left;
}
.rewrite-model-menu button:hover {
  background: rgba(255,255,255,.05);
}
.rewrite-model-menu button.on {
  background: rgba(124,72,220,.22);
}
.rewrite-model-menu button .name {
  flex: 1;
  min-width: 0;
  line-height: 1;
}
.rewrite-model-menu .rewrite-model-mark,
.rewrite-model-menu .tick {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
}
.rewrite-model-menu .rewrite-model-mark {
  color: #cbb6ef;
}
.rewrite-model-menu .tick {
  color: #d7c4ff;
}
.rewrite-model-menu svg {
  width: 14px;
  height: 14px;
  display: block;
}
.rewrite-field textarea {
  min-height: 74px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}
.rewrite-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rewrite-presets button {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #d9d3e2;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
}
.rewrite-presets button.on {
  color: #fff;
  background: rgba(124,72,220,.28);
  border-color: rgba(190,147,255,.75);
}
.rewrite-original {
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: #121218;
  border: 1px solid rgba(255,255,255,.08);
}
.rewrite-original > span {
  color: #ece7f2;
  font-size: 13px;
}
.rewrite-original p {
  max-height: 140px;
  margin: 8px 0 0;
  overflow: auto;
  color: #b7b1c0;
  font-size: 13px;
  line-height: 1.6;
}
#rewrite-confirm b {
  margin-left: 4px;
  font-weight: 620;
}
#rewrite-confirm:disabled {
  opacity: .55;
}
.episode-editor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5,4,9,.55);
}
.episode-editor[hidden] {
  display: none;
}
.episode-editor-sheet {
  width: min(520px, 100%);
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #1c1b24;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.episode-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.episode-editor-head strong {
  font-size: 14px;
  font-weight: 600;
}
.episode-editor-head button {
  width: 28px;
  height: 28px;
  color: #9a93a4;
  font-size: 18px;
}
.episode-editor-field {
  display: block;
  margin-top: 12px;
}
.episode-editor-field span {
  color: #9a93a4;
  font-size: 12px;
}
.episode-editor-field textarea {
  width: 100%;
  min-height: 72px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  resize: vertical;
  font-size: 13px;
  line-height: 1.5;
}
.episode-editor-hint {
  margin-top: 8px;
  color: #7e7788;
  font-size: 12px;
  line-height: 1.45;
}
.episode-editor-status {
  margin-top: 8px;
  color: #cbb6ef;
  font-size: 12px;
}
.episode-editor-status.is-invalid {
  color: #ff8b9a;
}
.episode-editor-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  max-height: 196px;
  margin-top: 12px;
  overflow: auto;
  scrollbar-width: thin;
}
.episode-cell {
  height: 28px;
  border-radius: 6px;
  color: #c8c1d0;
  background: rgba(255,255,255,.04);
  font-size: 12px;
}
.episode-cell.is-on {
  color: #f4ecff;
  background: rgba(136,78,233,.78);
}
.episode-editor-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.episode-editor-foot button {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.episode-editor-foot .primary {
  color: #1a1028;
  background: #fff;
  border-color: #fff;
}
.episode-editor-foot .primary:disabled {
  opacity: .4;
}
.look-library-body.is-mind {
  padding: 0;
  overflow: hidden;
}
.mind-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(255,255,255,.012);
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mind-map.is-panning,
.mind-map.is-panning .mind-node.is-root {
  cursor: grabbing;
}
.mind-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}
.mind-links {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.mind-links path {
  fill: none;
  stroke: rgba(177,133,255,.34);
  stroke-width: 1.4;
}
.mind-links path.is-main {
  stroke: rgba(177,133,255,.55);
  stroke-width: 1.8;
}
.mind-node {
  position: absolute;
  z-index: 1;
  max-width: 172px;
  height: auto;
  min-height: 26px;
  padding: 4px 11px 5px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  transform: translate(-50%, -50%);
  color: #e7e2eb;
  background: #26242e;
  border: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mind-node:hover {
  z-index: 3;
  border-color: rgba(177,133,255,.5);
}
.mind-node.on {
  background: #2f2445;
  border-color: rgba(190,147,255,.85);
  box-shadow: 0 0 0 3px rgba(139,82,236,.2);
}
.mind-node.is-pending {
  color: #b2abbd;
  background: #1d1c23;
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
}
.mind-node.is-generating {
  border-color: rgba(240,160,74,.55);
  animation: mind-pulse 1.4s ease-in-out infinite;
}
.mind-node.is-failed {
  border-color: rgba(255,139,154,.6);
}
.mind-node.is-look-picked {
  background: rgba(131,74,233,.22);
  border-color: rgba(190,147,255,.85);
}
.mind-name {
  max-width: 148px;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  line-height: 16px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.mind-meta {
  max-width: 136px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
}
.mind-meta .eps-edit {
  width: 16px;
  height: 16px;
}
.mind-node.is-pending .mind-meta {
  color: #f0a04a;
}
.mind-node.is-failed .mind-meta {
  color: #ff8b9a;
}
.mind-node.is-generating .mind-meta {
  color: #f0c27a;
}
.mind-check {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: #8b52ec;
  box-shadow: inset 0 0 0 3px #e9dcff;
}
.mind-node.is-root {
  max-width: none;
  width: 132px;
  cursor: grab;
  height: auto;
  padding: 6px 6px 8px;
  border-radius: 14px;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: #24212c;
  border-color: rgba(172,118,255,.42);
  box-shadow: 0 12px 28px rgba(40,18,80,.35);
  white-space: normal;
}
.mind-node.is-root.on {
  border-color: rgba(190,147,255,.9);
  box-shadow: 0 0 0 3px rgba(139,82,236,.22), 0 12px 28px rgba(40,18,80,.35);
}
.mind-root-image {
  position: relative;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.55);
  background: #fff;
}
.mind-node.is-root:not(.is-ready) .mind-root-image {
  background: #3a3940;
}
.mind-root-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}
.mind-root-image svg {
  width: 26px;
  height: 26px;
}
.mind-node.is-root > .mind-name,
.mind-node.is-root > .mind-meta {
  align-self: center;
  max-width: 120px;
  text-align: center;
}
.mind-node.is-root > .mind-meta {
  margin-top: -4px;
}
.mind-node.is-root > .mind-name {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 650;
}
.mind-root-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 1px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(98,56,190,.88);
  font-size: 10px;
  font-weight: 600;
}
.mind-fold {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  min-width: 16px;
  height: 16px;
  margin: -8px 0 0 5px;
  padding: 0 4px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #e6d8ff;
  background: #3b2a5c;
  border: 1px solid rgba(177,133,255,.45);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}
.mind-fold:hover {
  background: #5a3c91;
}
.mind-add {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 6px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124,92,255,.22), 0 4px 10px rgba(0,0,0,.35);
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  cursor: pointer;
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.mind-add svg {
  width: 12px;
  height: 12px;
}
.mind-add:hover {
  background: #9478ff;
  transform: scale(1.08);
}
.mind-node.has-kids .mind-add {
  margin-left: 28px;
}
.mind-node:hover .mind-add,
.mind-node.on .mind-add,
.mind-add:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.mind-del {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f3eef8;
  background: #3a3842;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  cursor: pointer;
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.mind-node:hover .mind-del,
.mind-del:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.mind-del:hover {
  color: #fff;
  background: #e0485f;
  border-color: transparent;
}
.mind-node:has(.mind-del:hover) {
  color: #ffd6dc;
  background: rgba(224,72,95,.16);
  border-color: rgba(255,120,140,.75);
  border-style: solid;
}
.mind-voice {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 24px;
  padding: 0 3px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f4f1f8;
  background: rgba(18,15,26,.82);
  backdrop-filter: blur(6px);
  font-size: 11px;
}
.mind-voice .asset-voice-play {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.mind-voice b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mind-voice-open {
  flex: none;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: #d9c9ff;
  background: rgba(124,92,255,.28);
  font-size: 10px;
  white-space: nowrap;
}
.mind-voice-open:hover {
  color: #fff;
  background: rgba(124,92,255,.5);
}
.mind-voice.is-empty {
  justify-content: center;
  background: rgba(60,40,20,.85);
}
.mind-voice.is-empty .mind-voice-open {
  color: #ffd79a;
  background: transparent;
  font-size: 11px;
}
.preview-voice {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(16,14,22,.72);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.preview-voice svg {
  width: 15px;
  height: 15px;
  display: block;
}
.preview-voice[hidden] {
  display: none;
}
.look-current-output:not(.is-empty) .preview-voice {
  right: 132px;
}
.look-current-output.is-rail-open:not(.is-empty) .preview-voice {
  right: 324px;
}
.look-current-output:hover .preview-voice,
.preview-voice:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.preview-voice.is-on {
  opacity: 1;
  pointer-events: auto;
  background: rgba(124,92,255,.92);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.preview-voice:hover,
.preview-voice.is-on:hover {
  background: #8b5cff;
}
.mind-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  height: 30px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(22,21,28,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  cursor: default;
}
.mind-toolbar button {
  height: 22px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 7px;
  color: #ddd6e8;
  font-size: 12px;
}
.mind-toolbar button:hover {
  background: rgba(255,255,255,.08);
}
.mind-toolbar .mind-flow {
  width: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: #7a45f5;
}
.mind-toolbar .mind-flow:hover {
  background: #8d5cff;
}
.mind-toolbar .mind-flow svg {
  width: 14px;
  height: 14px;
}
.mind-toolbar span {
  min-width: 38px;
  color: #a39cae;
  font-size: 11px;
  text-align: center;
}
.mind-toolbar i {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: rgba(255,255,255,.1);
}
.mind-hint {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  overflow: hidden;
  color: #8a8392;
  background: rgba(22,21,28,.9);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
@keyframes mind-pulse {
  50% { box-shadow: 0 0 0 4px rgba(240,160,74,.14); }
}
@media (prefers-reduced-motion: reduce) {
  .mind-node.is-generating { animation: none; }
}

/* 平铺和关系图共用左右比例：默认左边 4、右边 2，仍可拖动 */
.asset-page #look-dialog.is-flat-view .asset-workspace,
.asset-page #look-dialog.is-mind-view .asset-workspace {
  grid-template-columns: minmax(320px, 4fr) minmax(220px, 2fr);
}
.is-flat-view .look-library-panel {
  background:
    radial-gradient(420px 240px at 50% 26%, rgba(122,69,245,.09), transparent 75%),
    rgba(8,8,12,.48);
}
.is-flat-view .look-library-body {
  display: grid;
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}
.flat-preview-mount {
  min-height: 0;
  overflow: hidden;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 46%),
    #0e0e13;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 32px rgba(0,0,0,.14);
}
.flat-preview-mount .look-current-output {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.flat-preview-mount .look-current-output .stage {
  width: 100%;
}
.flat-look-section {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.065);
}
.flat-look-head {
  min-height: 30px;
  padding: 0 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.flat-look-head > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.flat-look-head strong {
  color: #ded9e4;
  font-size: 12px;
  font-weight: 600;
}
.flat-look-head span {
  color: #746e7c;
  font-size: 11px;
}
.flat-add-look {
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #cbb7ed;
  background: rgba(130,76,231,.11);
  border: 1px solid rgba(177,128,255,.16);
  font-size: 11px;
}
.flat-add-look svg {
  width: 12px;
  height: 12px;
}
.flat-add-look:hover {
  color: #fff;
  background: rgba(130,76,231,.22);
  border-color: rgba(177,128,255,.3);
}
.flat-look-rail {
  min-width: 0;
  flex: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
}
.flat-look-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #efeaf6;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
}
.flat-look-arrow svg {
  width: 14px;
  height: 14px;
}
.flat-look-arrow:hover:not(:disabled) {
  color: #fff;
  background: #7c4fe0;
  border-color: transparent;
}
.flat-look-arrow:disabled {
  opacity: .28;
  cursor: default;
}
.flat-look-arrow:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 2px;
}
.is-flat-view .look-flat-grid {
  position: relative;
  min-width: 0;
  padding: 1px 2px 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(214,206,230,.72) rgba(255,255,255,.08);
}
.is-flat-view .look-flat-grid::-webkit-scrollbar {
  height: 8px;
}
.is-flat-view .look-flat-grid::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(214,206,230,.72);
}
.is-flat-view .look-flat-grid::-webkit-scrollbar-track {
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}
.is-flat-view .look-library-card {
  flex: 0 0 122px;
  width: 122px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.is-flat-view .look-card-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  padding: 6px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(to bottom, rgba(10,8,14,.84), rgba(10,8,14,.28) 70%, transparent);
  pointer-events: none;
}
.is-flat-view .look-card-status b,
.is-flat-view .look-card-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-flat-view .look-card-status b {
  color: #fff;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.is-flat-view .look-card-status span {
  display: none;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}
.is-flat-view .look-library-card:hover .look-card-status,
.is-flat-view .look-library-card:focus-within .look-card-status {
  padding-right: 30px;
  background: linear-gradient(to bottom, rgba(10,8,14,.9), rgba(10,8,14,.72) 78%, transparent);
}
.is-flat-view .look-library-card:hover .look-card-status span,
.is-flat-view .look-library-card:focus-within .look-card-status span {
  display: block;
}
.is-flat-view .look-library-card:hover .look-card-status b,
.is-flat-view .look-library-card:hover .look-card-status span,
.is-flat-view .look-library-card:focus-within .look-card-status b,
.is-flat-view .look-library-card:focus-within .look-card-status span {
  white-space: normal;
}
.is-flat-view .look-library-card.on {
  background: rgba(128,75,229,.12);
  border-color: rgba(181,135,255,.72);
  box-shadow: 0 0 0 2px rgba(137,82,237,.12);
}
.is-flat-view .look-card-image {
  aspect-ratio: 1 / 1.08;
}
.is-flat-view .look-state-tag {
  left: 6px;
  right: auto;
  bottom: 6px;
  max-width: calc(100% - 40px);
  transform: none;
}
.is-flat-view .look-add-child {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  width: auto;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #fff;
  background: rgba(124,79,224,.94);
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, background .15s ease;
}
.is-flat-view .look-add-child span {
  line-height: 1;
}
.is-flat-view .look-library-card:hover .look-add-child,
.is-flat-view .look-library-card:focus-within .look-add-child {
  opacity: 1;
  pointer-events: auto;
}
.is-flat-view .look-library-card:hover .look-state-tag,
.is-flat-view .look-library-card:focus-within .look-state-tag {
  bottom: 38px;
}
.is-flat-view .look-add-child:hover {
  background: #8d5cff;
}
.look-primary-tag {
  flex: none;
  height: 20px;
  margin-top: 1px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: #f3ebff;
  background: rgba(124,79,224,.24);
  border: 1px solid rgba(190,160,255,.34);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
}
.is-flat-view .look-generation-panel {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(126,73,231,.08), transparent 72%),
    rgba(8,8,12,.5);
}
.is-flat-view .look-gen-head {
  min-height: 42px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.is-flat-view .look-gen-title {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.is-flat-view .look-gen-title strong {
  flex: 1 1 180px;
  font-size: 15px;
}
.look-gen-eps {
  height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: #ece7f3;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  cursor: pointer;
}
.look-gen-eps span {
  margin: 0;
  color: inherit;
}
.look-gen-eps svg {
  width: 12px;
  height: 12px;
  color: #c9b6ea;
}
.look-gen-eps:hover {
  color: #fff;
  background: rgba(124,79,224,.24);
  border-color: rgba(183,146,255,.38);
}
.look-gen-eps:focus-visible {
  outline: 2px solid #b892ff;
  outline-offset: 2px;
}
.look-gen-eps.is-static {
  padding-right: 10px;
  cursor: default;
}
.is-flat-view .gen-split {
  display: none;
}
.is-flat-view .prompt-composer {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 16px;
  background: rgba(28,27,33,.92);
  border-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.12);
}
.is-flat-view .composer-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.is-flat-view .composer-reference-row {
  flex: none;
  padding: 14px 16px 10px;
}
.is-flat-view .composer-prompt-row {
  min-height: 0;
  padding: 14px 18px 16px;
  flex: 1;
  border-top: 1px solid rgba(255,255,255,.045);
}
.is-flat-view .prompt-field {
  height: 100%;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
}
.is-flat-view .prompt-field > .look-area {
  height: auto !important;
  min-height: 180px !important;
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
}
.is-flat-view .prompt-field-foot {
  flex: none;
  padding-top: 8px;
}
.is-flat-view .composer-toolbar {
  min-height: 54px;
  padding: 9px 11px;
  background: rgba(11,10,14,.2);
}
.is-flat-view .prompt-composer.collapsed {
  height: auto;
  align-self: end;
}

@media (max-width: 1120px) {
  .is-flat-view .look-library-card {
    flex-basis: 108px;
    width: 108px;
  }
}