/* 公共：设计变量、顶栏、按钮、弹窗、通用内容页、底部引导条。所有页面都加载。 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font: 13px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
body.ws-page {
  overflow: hidden;
}
body.ws-page .app {
  height: 100%;
  min-height: 0;
}
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tb-left,
.tb-center,
.tb-right {
  display: flex;
  align-items: center;
}
.logo {
  display: inline-flex;
  align-items: center;
}
.logo small {
  display: block;
  font-weight: 400;
}
.tb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.steps {
  display: flex;
  align-items: center;
  gap: 6px;
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bell {
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
  color: #d5d3db;
}
.avatar {
  border-radius: 50%;
}
.page {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.page::-webkit-scrollbar {
  width: 8px;
}
.page::-webkit-scrollbar-thumb {
  background: #2a2a32;
  border-radius: 4px;
}
.meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.meta-row > div {
  color: var(--muted);
  font-size: 12px;
}
.meta-row b {
  display: block;
  color: var(--txt);
  font-weight: 560;
}
.block-title {
  font-size: 13px;
}
.card {
  border: 1px solid var(--line);
}
.card h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 6px;
}
.card h3:first-child {
  margin-top: 0;
}
.card p {
  color: #d2d0d8;
  line-height: 1.75;
}
.people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin-top: 4px;
}
.people li {
  list-style: none;
  color: #d2d0d8;
  line-height: 1.6;
}
.people b {
  color: #fff;
  font-weight: 560;
  margin-right: 6px;
}
.script summary {
  cursor: pointer;
  font-weight: 600;
}
.script p {
  margin-top: 8px;
  white-space: pre-wrap;
  color: #c8c6cf;
}
.script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.footer-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}
.hint {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:disabled {
  opacity: .4;
  cursor: default;
}
.btn.primary {
  background: #fff;
  color: #6d4aff;
  font-weight: 620;
}
.btn.primary:hover {
  background: #f3f1ff;
}
.btn.purple {
  background: var(--purple);
  color: #fff;
}
.btn.purple:hover {
  background: #6d4dff;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search {
  width: 220px;
  padding: 0 14px;
  border: 1px solid var(--line);
  outline: none;
}
select.search {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #8d8996 50%), linear-gradient(135deg, #8d8996 50%, transparent 50%);
  background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.tabs {
  display: flex;
  color: var(--muted);
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  position: relative;
}
.tabs button.on {
  color: #fff;
}
.tabs button.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.char-card {
  display: flex;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, background .15s ease;
}
.char-card img {
  width: 76px;
  height: 102px;
  object-fit: cover;
  object-position: top;
  background: #fff;
  flex: none;
}
.char-card h3 {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag {
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10px;
}
.char-card .looks {
  color: var(--muted);
  margin-top: 6px;
  font-size: 12px;
}
.char-card p {
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.55;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ep-item {
  position: relative;
  display: flex;
  gap: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s ease, background .15s ease;
  overflow: visible;
}
.ep-cover {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: #8a8694;
  flex: none;
  overflow: hidden;
}
.ep-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ep-item h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.ep-meta {
  color: var(--muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}
.ep-acts {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
}
.btn.oneclick {
  padding: 0 12px;
  font-weight: 600;
  border: 1px solid rgba(124, 92, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn.oneclick:hover {
  color: #fff;
  background: linear-gradient(135deg, #7c5cff, #9b7dff);
  border-color: #9b7dff;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35);
}
.btn.oneclick svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.oc-sheet {
  width: min(520px, 94vw);
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.oc-head {
  padding: 18px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.oc-head h2 {
  font-size: 16px;
  font-weight: 600;
}
.oc-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.oc-body {
  padding: 16px 22px 6px;
  display: grid;
  gap: 14px;
}
.oc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.oc-field .label {
  color: #b9b7c1;
  font-size: 12px;
  margin-bottom: 6px;
}
.oc-field .hint {
  color: var(--faint);
  font-size: 11px;
  margin-left: 4px;
}
.oc-field select,
.oc-field input[type="number"] {
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  border-radius: 10px;
  background: #121216;
  color: #eceaf2;
  padding: 0 10px;
}
.oc-field input.bad {
  border-color: #ff6b81;
}
.oc-field.disabled {
  opacity: .45;
  pointer-events: none;
}
.oc-v20 {
  display: grid;
  gap: 14px;
}
.oc-v20.hide {
  display: none;
}
.oc-err {
  color: #ff8095;
  font-size: 11px;
  margin-top: 4px;
}
.oc-err:empty {
  display: none;
}
.oc-switch-row {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 10px;
  background: #121216;
}
.oc-switch-row .hint {
  margin: 0;
}
.oc-switch {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: #3a3a44;
  position: relative;
  flex: none;
  transition: background .2s;
}
.oc-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.oc-switch.on::after {
  left: 18px;
}
.oc-upload {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed rgba(196,181,255,.35);
  background: rgba(124,92,255,.06);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.oc-upload b {
  color: #e4dcff;
  font-weight: 600;
}
.oc-upload:hover {
  background: rgba(124,92,255,.12);
}
.oc-file {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #121216;
  font-size: 12px;
}
.oc-file.show {
  display: flex;
}
.oc-file .ops {
  display: flex;
  gap: 6px;
}
.oc-file .ops button {
  color: #b29bff;
  padding: 2px 6px;
  border-radius: 6px;
}
.oc-file .ops button:hover {
  background: rgba(255,255,255,.06);
}
.ds-credit {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(124,92,255,.08);
  color: #c8c6cf;
  font-size: 12px;
  line-height: 1.6;
}
.ds-credit b {
  color: #fff;
  font-weight: 600;
}
.oc-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.oc-foot .btn {
  white-space: nowrap;
  flex: none;
}
.oc-foot .oc-tip {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}
.oc-foot .oc-tip.bad {
  color: #ff8095;
}
.ws {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(420px, 1fr) 280px;
  grid-template-rows: 1fr 188px;
}
.panel {
  border: 1px solid var(--line);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assets {
  grid-row: 1 / 3;
}
.assets-head,
.shot-head,
.tl-head {
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.assets-head h3 {
  font-size: 13px;
}
.search-row {
  padding: 0 12px 8px;
}
.search-row input {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  padding: 0 10px;
  outline: none;
}
.asset-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
}
.asset-tabs button {
  flex: 1;
  height: 36px;
  color: var(--muted);
  position: relative;
}
.asset-tabs button.on {
  color: #fff;
}
.asset-tabs button.on::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
}
.asset-scroll {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 16px;
}
.cat {
  margin-bottom: 14px;
}
.cat-h {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.acard {
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
}
.acard .thumb {
  aspect-ratio: 3/4;
  background: #fff;
  overflow: hidden;
}
.acard.scene .thumb,
.acard.prop .thumb {
  aspect-ratio: 1/1;
}
.acard .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
.acard .name {
  padding: 6px 7px 7px;
  font-size: 11px;
  color: #d5d3db;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.editor {
  min-height: 0;
}
.shot-head .left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chip {
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--txt-2);
}
.prompt-box {
  flex: 1;
  min-height: 0;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
}
.prompt-box textarea {
  flex: 1;
  min-height: 80px;
  resize: none;
  background: transparent;
  border: 0;
  outline: none;
  color: #e8e6ee;
  line-height: 1.65;
  font-size: 12.5px;
}
.shot-foot {
  padding: 8px 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.model-btn,
.mini {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.model-menu,
.resolution-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: 36px;
  z-index: 8;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 6px;
}
.model-menu {
  width: 278px;
}
.resolution-menu {
  width: 112px;
}
.model-menu.open,
.resolution-menu.open {
  display: block;
}
.model-option {
  width: 100%;
  min-height: 42px;
  padding: 6px 9px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.model-option .model-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.model-option small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
  font-size: 10px;
}
.model-option .cost {
  color: #c8c6cf;
  font-size: 11px;
  white-space: nowrap;
}
.draft-tag,
.model-tag {
  display: inline-flex;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  align-items: center;
  border: 1px solid rgba(124,92,255,.3);
  font-size: 10px;
  font-weight: 650;
}
.model-tag.normal {
  background: rgba(255,255,255,.07);
  border-color: var(--line);
  color: #c8c6cf;
}
.resolution-menu button {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border-radius: 7px;
  text-align: left;
  color: #d5d3db;
}
.resolution-menu button:hover,
.resolution-menu button.on {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.resolution-menu button:disabled {
  color: #66616f;
  cursor: default;
}
.draft-hint {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-top: 1px solid rgba(124,92,255,.18);
  color: #b9b3c8;
  font-size: 11px;
  flex: none;
}
.draft-hint.show {
  display: flex;
}
.mini input {
  width: 36px;
  background: transparent;
  border: 0;
  outline: none;
  text-align: center;
}
.switch {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--purple);
  position: relative;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.gen-btn {
  margin-left: auto;
  padding: 0 14px;
  font-weight: 620;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.player .stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  position: relative;
  overflow: hidden;
}
.stage-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.draft-watermark {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  background: rgba(12,10,18,.64);
  color: rgba(255,255,255,.76);
  font-size: 10px;
  backdrop-filter: blur(8px);
}
.upgrade-trigger {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 30px;
  padding: 0 12px;
  color: #fff;
  border: 1px solid rgba(196,181,255,.5);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.upgrade-trigger:hover {
  border-color: #ad99ff;
}
.player-status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.58);
  color: #e8e6ee;
  font-size: 10px;
}
.player-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.player-bar {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  color: var(--muted);
}
.timeline {
  grid-column: 2 / 4;
}
.tl-head {
  border-bottom: 1px solid var(--line);
}
.tl-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
}
.tcard {
  width: 132px;
  flex: none;
  height: 118px;
  border: 1.5px solid transparent;
  position: relative;
  cursor: pointer;
  padding: 8px;
}
.tcard .num {
  position: absolute;
  left: 8px;
  top: 8px;
  color: #bbb;
}
.tcard .dur {
  position: absolute;
  left: 8px;
  bottom: 8px;
  color: #aaa;
  font-size: 11px;
}
.tcard .state {
  position: absolute;
  right: 7px;
  top: 7px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  color: #9995a3;
  font-size: 9px;
}
.shot-row {
  width: 100%;
  padding: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
  text-align: left;
}
.shot-row .shot-no {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  display: grid;
  place-items: center;
  color: #c8c6cf;
  font-size: 11px;
}
.shot-row b {
  display: block;
  font-size: 12px;
  font-weight: 560;
}
.shot-row small {
  color: var(--muted);
  font-size: 10px;
}
.shot-state {
  color: #777280;
  font-size: 10px;
  white-space: nowrap;
}
.shot-state.draft {
  color: #bba8ff;
}
.drawer,
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 20;
}
.drawer.open,
.modal-mask.open {
  display: block;
}
.drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  padding: 16px;
  overflow: auto;
}
.modal {
  width: 420px;
  background: #1c1c20;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.toast-wrap {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
}
.toast {
  background: #2a2a30;
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  border-radius: 10px;
}
.look-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 40;
  display: none;
  place-items: center;
  padding: 24px;
}
.look-dialog.open {
  display: grid;
}
.look-sheet {
  width: min(1080px, 96vw);
  height: min(700px, 90vh);
  background: #1a1a20;
  border-radius: 20px;
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.look-sheet h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.asset-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: none;
}
.look-sheet .asset-editor-head h3 {
  margin: 5px 0 0;
  font-size: 18px;
}
.asset-editor-character {
  width: 174px;
  min-width: 0;
  padding: 0 6px;
}
.asset-editor-character strong {
  display: block;
  color: #f2eff7;
  font-size: 13px;
  font-weight: 650;
}
.asset-editor-character span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #817b8b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.look-field,
.look-area {
  width: 100%;
  border: 0;
  outline: none;
  background: #121216;
  color: #eceaf2;
  border-radius: 10px;
  padding: 8px 10px;
}
.look-field {
  height: 36px;
}
.look-area {
  min-height: 88px;
  resize: none;
}
.ref-slot {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #121216;
  display: grid;
  place-items: center;
  color: #888;
  overflow: hidden;
}
.ref-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.five-view-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #777180;
  font-size: 11px;
}
.five-view-missing img {
  width: 104px;
  height: 160px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}
.look-current-output .five-view-missing.upload-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: #303033;
}
.upload-empty-cards {
  position: relative;
  width: 170px;
  height: 82px;
}
.upload-empty-cards > span {
  position: absolute;
  top: 12px;
  width: 50px;
  height: 66px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #3a3a3d;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 12px 26px rgba(0,0,0,.3);
}
.upload-empty-cards svg {
  width: 20px;
  height: 20px;
}
.upload-empty-cards .is-left {
  left: 6px;
  color: #ead27a;
  transform: rotate(-12deg);
}
.upload-empty-cards .is-right {
  right: 6px;
  color: #dfe2bd;
  transform: rotate(12deg);
}
.upload-empty-cards .is-center {
  z-index: 1;
  top: 0;
  left: 50%;
  width: 68px;
  height: 80px;
  color: #8fcdf3;
  background: #3d3d40;
  transform: translateX(-50%);
}
.upload-empty-cards .is-center svg {
  width: 24px;
  height: 24px;
}
.upload-empty-actions {
  display: flex;
  gap: 8px;
}
.upload-empty-actions button {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e9e7ec;
  background: #3a3a3d;
  border: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 600;
}
.upload-empty-actions button:hover {
  background: #444448;
  border-color: rgba(255,255,255,.18);
}
.upload-empty-actions .is-reverse {
  color: #e8dcff;
  background: rgba(104,62,173,.72);
  border-color: rgba(186,143,255,.28);
}
.upload-empty-actions .is-reverse:hover {
  background: rgba(119,72,194,.82);
}
.upload-empty-actions .is-reverse small {
  color: #c9b2ed;
  font-size: 12px;
}
.upload-empty-actions svg {
  width: 15px;
  height: 15px;
}
.look-card-image.is-empty {
  display: grid;
  place-items: center;
  background: #45454b;
}
.look-card-empty {
  color: rgba(255,255,255,.6);
}
.look-card-empty svg {
  width: 30px;
  height: 30px;
  display: block;
}
.look-card-empty.is-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #d8c4ff;
}
.look-card-empty.is-generating i {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(205,178,255,.22);
  border-top-color: #b78bff;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
.look-card-empty.is-generating small {
  font-size: 9px;
}
.home {
  min-height: 100%;
  background: radial-gradient(520px 340px at 72% 18%, rgba(88,70,220,.22), transparent 70%), radial-gradient(460px 300px at 36% 28%, rgba(40,80,210,.16), transparent 72%), #0b0b10;
}
.rail {
  position: fixed;
  left: 12px;
  top: 148px;
  width: 58px;
  padding: 10px 0 12px;
  border-radius: 29px;
  background: rgba(28,30,38,.94);
  border: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.rail-item {
  width: 100%;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #a9a7b2;
}
.rail-item:hover {
  color: #fff;
}
.rail-item.on {
  color: #fff;
}
.rail-item span {
  font-size: 10px;
}
.home-main {
  margin-left: 84px;
  padding: 8px 28px 48px;
}
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
}
.switcher {
  height: 36px;
  border-radius: 18px;
  background: rgba(40,42,52,.78);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  padding: 3px;
}
.switcher button {
  height: 28px;
  border-radius: 14px;
  padding: 0 16px;
  color: #a9a8b0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.switcher button.on {
  color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.home-hero h1 {
  margin: 20px 0 18px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
}
.upload-card {
  width: min(920px, 100%);
  min-height: 272px;
  border-radius: 32px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(140,110,255,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 28px 28px;
}
.upload-card .lead {
  font-size: 14px;
  color: #e6e4ec;
}
.upload-card .sub {
  color: var(--muted);
  font-size: 12px;
}
.source-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  padding: 3px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.source-tabs button {
  height: 28px;
  padding: 0 14px;
  border-radius: 12px;
  color: #a9a8b0;
}
.source-tabs button.on {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.upload-pane {
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.upload-pane.on {
  display: flex;
}
.upload-pane textarea {
  width: min(680px, 100%);
  min-height: 110px;
  resize: none;
  border: 0;
  outline: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,.28);
  color: #eceaf2;
  line-height: 1.6;
}
.upload-pane textarea::placeholder {
  color: #6c6876;
}
.file-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #2a2a34;
  display: grid;
  place-items: center;
  color: #cfcdd5;
}
.creator {
  display: none;
  width: min(960px, 100%);
  gap: 14px;
  margin-top: 4px;
  align-items: stretch;
}
.home.is-filled .upload-card {
  display: none;
}
.home.is-filled .creator {
  display: flex;
}
.up-ok {
  width: 300px;
  min-height: 340px;
  flex: none;
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px 18px;
}
.up-ok .doc {
  position: relative;
  width: 48px;
  height: 48px;
}
.up-ok .close {
  position: absolute;
  top: -7px;
  right: -11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #54525c;
  color: #d7d5dd;
  font-size: 11px;
  display: grid;
  place-items: center;
}
.up-ok .ttl {
  margin-top: 14px;
  font-size: 14px;
  color: #e4e2e9;
}
.up-ok .sub {
  margin-top: 4px;
  font-size: 12px;
  color: #7b7484;
  text-align: center;
  line-height: 1.5;
}
.form-card {
  flex: 1;
  min-width: 0;
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  padding: 16px 18px 14px;
}
.form-card .group {
  margin-bottom: 10px;
}
.form-card label {
  display: block;
  height: 16px;
  font-size: 12px;
  color: #b9b7c1;
}
.control {
  height: 32px;
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid #3a3942;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  color: #e2e1e6;
}
.control select,
.control input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
}
.style-field {
  width: 100%;
  height: 40px;
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid #3a3942;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #e2e1e6;
  text-align: left;
}
.style-field:hover {
  border-color: rgba(124,92,255,.5);
}
.style-field .thumb {
  width: 22px;
  height: 28px;
  border-radius: 5px;
  flex: none;
  overflow: hidden;
}
.style-field .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-field .map {
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #c8c6cf;
  font-size: 10px;
  flex: none;
}
.style-field .chev {
  color: #8d8996;
}
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.row-3 {
  display: grid;
  grid-template-columns: 88px 88px minmax(0, 1fr);
  gap: 10px;
}
.credit-hint {
  color: #b29bff;
  font-size: 12px;
  white-space: nowrap;
}
.cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.auto-row {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(124,92,255,.08);
  border: 1px solid rgba(124,92,255,.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auto-row b {
  display: block;
  font-size: 13px;
}
.auto-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.auto-mask {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0,0,0,.62);
  display: none;
  place-items: center;
  padding: 24px;
}
.auto-mask.open {
  display: grid;
}
.auto-sheet {
  width: min(920px, 96vw);
  height: min(640px, 90vh);
  background: #17171d;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auto-head {
  padding: 18px 22px 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.auto-head h2 {
  font-size: 16px;
  font-weight: 600;
}
.auto-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.auto-steps {
  padding: 4px 22px 14px;
  display: flex;
  border-bottom: 1px solid var(--line);
}
.auto-step {
  flex: 1;
  color: #8d8996;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.auto-step i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
}
.auto-step.on {
  color: #fff;
}
.auto-step.done {
  color: #d8d5df;
}
.auto-step.done i {
  background: var(--ok);
}
.auto-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 22px;
}
.auto-script h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: #cabdff;
}
.auto-script h4:first-child {
  margin-top: 0;
}
.auto-script p {
  color: #dedbe5;
  line-height: 1.75;
  font-size: 12.5px;
  white-space: pre-wrap;
}
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.auto-card {
  border-radius: 12px;
  background: #121216;
  overflow: hidden;
  border: 1px solid transparent;
}
.auto-card.done {
  border-color: rgba(124,92,255,.28);
}
.auto-thumb {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b6674;
  font-size: 11px;
  background: #0e0e12;
}
.auto-card.wide .auto-thumb {
  aspect-ratio: 4 / 3;
}
.auto-thumb .spin {
  width: 20px;
  height: 20px;
}
.auto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.auto-meta {
  padding: 7px 9px 9px;
}
.auto-meta small {
  color: var(--muted);
  font-size: 10px;
}
.auto-meta b {
  display: block;
  font-size: 11.5px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-eps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auto-ep {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: #121216;
  border: 1px solid transparent;
}
.auto-ep.on {
  border-color: rgba(124,92,255,.5);
}
.auto-ep-cover {
  width: 120px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  opacity: .35;
}
.auto-ep.on .auto-ep-cover,
.auto-ep.done .auto-ep-cover {
  opacity: 1;
}
.auto-ep-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auto-ep-main {
  flex: 1;
  min-width: 0;
}
.auto-ep-main b {
  font-size: 13px;
  font-weight: 560;
}
.auto-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  margin: 9px 0 6px;
  overflow: hidden;
}
.auto-bar i {
  display: block;
  width: 0;
  height: 100%;
  transition: width .3s;
}
.auto-ep.done .auto-bar i {
  width: 100% !important;
  background: var(--ok);
}
.auto-ep-state {
  color: var(--muted);
  font-size: 11px;
}
.auto-ep.done .auto-ep-state {
  color: #9fe0b5;
}
.auto-foot {
  min-height: 58px;
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.auto-foot > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}
.auto-foot > span b {
  color: #fff;
}
.style-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0,0,0,.58);
  display: none;
  place-items: center;
  padding: 24px;
}
.style-mask.open {
  display: grid;
}
.style-sheet {
  width: min(980px, 96vw);
  height: min(680px, 90vh);
  background: #17171d;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.style-head {
  padding: 18px 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.style-head h2 {
  font-size: 18px;
  font-weight: 600;
}
.style-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.style-close {
  width: 28px;
  height: 28px;
  color: #b9b7c1;
}
.style-close:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.style-filters {
  padding: 14px 22px 8px;
  display: flex;
  align-items: center;
  overflow: visible;
}
.filter-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow: visible;
}
.filter-tabs button {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  color: #c8c6cf;
}
.filter-tabs button.on {
  font-weight: 600;
}
.comment-promo {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.comment-promo > button {
  position: relative;
  z-index: 1;
}
.comment-promo .promo-halo {
  display: none;
  position: absolute;
  inset: -2px;
  border-radius: 17px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 10px rgba(124, 92, 255, .4);
}
.comment-promo.is-on .promo-halo {
  display: block;
}
.comment-promo .promo-halo::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient( from 0deg, transparent 0deg 240deg, #7c5cff 280deg, #e8deff 318deg, #fff 338deg, #b29bff 352deg, transparent 360deg );
  animation: promo-halo-spin 1.7s linear infinite;
}
@keyframes promo-halo-spin { to { transform: rotate(360deg); } }
.promo-bubble {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: #2a2148;
  border: 1px solid rgba(196, 181, 255, .45);
  box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 18px rgba(124,92,255,.28);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.promo-bubble > span {
  line-height: 1.6;
}
.promo-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.promo-bubble .promo-x {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #d8d2ee;
  font-size: 10px;
  line-height: 18px;
}
.promo-bubble .promo-x:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.promo-arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #2a2148;
  border-left: 1px solid rgba(196, 181, 255, .45);
  border-top: 1px solid rgba(196, 181, 255, .45);
  transform: translateX(-50%) rotate(45deg);
}
.style-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 22px 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}
.style-card {
  border: 1px solid transparent;
  overflow: hidden;
  text-align: left;
  color: inherit;
  padding: 0;
  transition: border-color .16s, transform .16s;
}
.style-card:hover {
  transform: translateY(-2px);
}
.style-card .cover {
  height: 148px;
  position: relative;
  overflow: hidden;
}
.style-card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #7c5cff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.style-card .meta {
  padding: 10px 10px 12px;
}
.style-card .ttl {
  font-size: 13px;
  font-weight: 600;
}
.style-card .sub {
  margin-top: 4px;
  font-size: 11px;
  color: #8d8799;
  line-height: 1.4;
}
.style-card.custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 214px;
  border: 1px dashed #3a3942;
  background: transparent;
  color: #b9b7c1;
}
.style-card.custom:hover {
  border-color: var(--purple);
  color: #fff;
}
.style-card.custom .plus {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  margin-bottom: 8px;
  background: rgba(124,92,255,.18);
  color: #d8ccff;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.style-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.style-foot .pick {
  color: #c8c6cf;
  font-size: 12px;
}
.style-foot .pick b {
  color: #fff;
  font-weight: 600;
}
.custom-sheet {
  width: min(460px, 92vw);
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px 22px 16px;
}
.custom-sheet h3 {
  font-size: 16px;
  margin-bottom: 14px;
}
.custom-sheet label {
  display: block;
  color: #b9b7c1;
  font-size: 12px;
  margin: 10px 0 6px;
}
.custom-sheet input,
.custom-sheet textarea {
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 10px;
  background: #121216;
  color: #eceaf2;
  padding: 8px 10px;
}
.custom-sheet input {
  height: 36px;
}
.custom-sheet textarea {
  min-height: 96px;
  resize: none;
  line-height: 1.55;
}
.custom-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.sc,
.style-field .thumb,
.style-card .cover {
  background-size: cover;
  background-position: center;
}
.sc-ancient {
  background: linear-gradient(160deg, #3b2a16, #d4b06a);
}
.sc-cinema {
  background: linear-gradient(160deg, #241810, #e0b36a);
}
.sc-3d-modern {
  background: linear-gradient(160deg, #0d1c2c, #8fd0ff);
}
.sc-3d-ancient {
  background: linear-gradient(160deg, #14241c, #d4c07a);
}
.sc-live-hd {
  background: linear-gradient(160deg, #1a1612, #f0d2b0);
}
.sc-comic {
  background: linear-gradient(160deg, #2a1030, #ffb4e0);
}
.sc-guofeng {
  background: linear-gradient(160deg, #2a120e, #f0c07a);
}
.sc-cg-anim {
  background: linear-gradient(160deg, #12182a, #7ee0ff);
}
.sc-cel {
  background: linear-gradient(160deg, #201028, #7ec8ff);
}
.sc-halftone {
  background: linear-gradient(160deg, #3a2a10, #f7e7a0);
}
.sc-live-cold {
  background: linear-gradient(160deg, #0c1418, #8bb8c8);
}
.sc-am-real {
  background: linear-gradient(160deg, #120818, #ff6a3a);
}
.sc-cg-film {
  background: linear-gradient(160deg, #101014, #d8dce8);
}
.sc-korean {
  background: linear-gradient(160deg, #2a1820, #ffe6d8);
}
.sc-oil {
  background: linear-gradient(160deg, #2a1408, #e0a040);
}
.sc-korean-us {
  background: linear-gradient(160deg, #241820, #8ec8ff);
}
.sc-cartoon {
  background: linear-gradient(160deg, #1a2a50, #ffd24a);
}
.sc-custom {
  background: linear-gradient(160deg, #1a1624, #c8b6ff);
}
.home-projects {
  margin-top: 40px;
}
.home-projects h2 {
  font-size: 14px;
  font-weight: 560;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  color: #eceaf2;
}
.home-projects h2 a {
  color: var(--muted);
  font-weight: 400;
}
.strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.strip::-webkit-scrollbar {
  height: 0;
}
.proj {
  width: 196px;
  flex: none;
  background: #16161c;
  border-radius: 16px;
  padding: 8px 8px 12px;
  transition: transform .16s ease, background .16s ease;
}
.proj:hover {
  background: #1c1c24;
  transform: translateY(-2px);
}
.proj .thumb {
  height: 118px;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.proj .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.proj-title {
  margin-top: 10px;
  padding: 0 4px;
  color: #eceaf2;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-mid {
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-sub {
  padding: 0 4px;
  color: var(--faint);
  font-size: 11px;
  margin-top: 4px;
}
.fab {
  position: fixed;
  left: 18px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--purple);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(124,92,255,.35);
}
.flow-mask {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,.78);
  display: none;
  place-items: center;
  z-index: 30;
}
.flow-mask.open {
  display: grid;
}
.spin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.icon-round {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Tiaoyue-inspired visual refinement ===== */
:root {
  --font: "PingFang SC", -apple-system, system-ui, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --bg: #0b0b10;
  --panel: #14131b;
  --panel-2: #1a1923;
  --line: rgba(226, 224, 255, .09);
  --line-2: rgba(226, 224, 255, .18);
  --txt: #f7f6fb;
  --txt-2: #d7d4df;
  --muted: #9995a5;
  --faint: #706b7b;
  --purple: #914dff;
  --accent: #7f45f5;
  --ok: #49d6a5;
  --glow: rgba(126, 74, 255, .24);
}
body {
  background: radial-gradient(900px 540px at 66% -16%, rgba(67, 81, 150, .18), transparent 70%), radial-gradient(720px 480px at 5% 105%, rgba(105, 58, 186, .1), transparent 68%), var(--bg);
  color: var(--txt);
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(167, 117, 255, .72);
  outline-offset: 2px;
}
.topbar {
  height: 64px;
  padding: 0 22px 0 20px;
  position: relative;
  z-index: 12;
  background: linear-gradient(180deg, rgba(17, 16, 27, .95), rgba(11, 11, 16, .72));
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.logo {
  gap: 10px;
}
.logo .mark {
  width: 28px;
  height: 18px;
  border-radius: 70% 30% 70% 30%;
  background: linear-gradient(140deg, #70efff 5%, #2ca8ff 40%, #7456ff 74%, #a068ff);
  box-shadow: 0 0 18px rgba(64, 169, 255, .35);
  transform: skewX(-12deg) rotate(-8deg);
  position: relative;
}
.logo .mark::after {
  content: "";
  position: absolute;
  inset: 5px -2px -4px 2px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(112, 239, 255, .15), #4b7eff 62%, #8f4fff);
  z-index: -1;
}
.logo b {
  font-size: 16px;
  font-weight: 680;
  letter-spacing: .045em;
}
.logo small {
  margin-top: 1px;
  font-size: 8px;
  letter-spacing: .16em;
  color: #777284;
}
.tb-left,
.tb-center,
.tb-right {
  gap: 9px;
}
.tb-back {
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  color: #dfdde7;
  transition: background .18s ease, transform .18s ease;
}
.tb-back:hover {
  background: rgba(255,255,255,.075);
  transform: translateX(-1px);
}
.step {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.065);
  color: #d2cfda;
  border: 1px solid transparent;
  font-weight: 530;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.step:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateY(-1px);
}
.step.on {
  color: #fff;
  background: linear-gradient(135deg, rgba(145,77,255,.28), rgba(89,71,180,.18));
  border-color: rgba(177,137,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(82,44,170,.15);
}
.credit {
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  color: #f1e9ff;
  background: linear-gradient(135deg, rgba(145,77,255,.23), rgba(255,255,255,.07));
  border: 1px solid rgba(184,144,255,.2);
}
.bell,
.icon-round {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .18s ease, transform .18s ease;
}
.bell {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.bell:hover,
.icon-round:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-1px);
}
.avatar {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.65);
  background: linear-gradient(145deg, #67ddca, #506ce9 72%, #9b5cff);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.btn {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.07);
  color: #e4e1eb;
  font-weight: 520;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  background: rgba(255,255,255,.115);
  border-color: rgba(255,255,255,.13);
  transform: translateY(-1px);
}
.btn.primary,
.btn.purple {
  color: #fff;
  background: linear-gradient(135deg, #7d46ed, #a24fff);
  border-color: rgba(196,165,255,.36);
  box-shadow: 0 8px 24px rgba(120,61,235,.22), inset 0 1px 0 rgba(255,255,255,.2);
  font-weight: 620;
}
.btn.primary:hover,
.btn.purple:hover {
  background: linear-gradient(135deg, #8a50f4, #ad5cff);
  box-shadow: 0 10px 28px rgba(120,61,235,.32), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn:disabled,
.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Content pages */
.page {
  padding: 28px 40px 92px;
}
.meta-row {
  gap: 14px;
  margin-bottom: 28px;
}
.meta-row > div {
  padding: 15px 17px;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(194,204,241,.05), transparent 55%), rgba(20,19,27,.88);
  border: 1px solid rgba(255,255,255,.065);
}
.meta-row b {
  margin-top: 7px;
  font-size: 14px;
}
.block-title {
  margin: 25px 0 11px;
  color: #aaa6b5;
  font-weight: 550;
}
.card {
  border-radius: 20px;
  padding: 22px 24px;
  background: linear-gradient(140deg, rgba(194,204,241,.045), transparent 38%), rgba(20,19,27,.9);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 14px 45px rgba(0,0,0,.09);
}
.script {
  margin-top: 11px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(8,8,13,.42);
  border: 1px solid rgba(255,255,255,.05);
}
.script summary {
  color: #efedf4;
}
.footer-bar {
  height: 64px;
  padding: 0 34px;
  background: rgba(12,11,17,.84);
  border-top-color: rgba(255,255,255,.07);
  backdrop-filter: blur(22px);
}
.toolbar {
  margin-bottom: 20px;
}
.search {
  height: 38px;
  border-radius: 19px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.08);
}
.search:focus {
  border-color: rgba(165,118,255,.5);
  box-shadow: 0 0 0 3px rgba(126,74,255,.08);
}
.tabs {
  gap: 26px;
  margin-bottom: 20px;
}
.tabs button {
  height: 40px;
  font-weight: 530;
}
.tabs button.on::after {
  background: linear-gradient(90deg, #8d4eff, #bd81ff);
}
.char-grid {
  gap: 16px;
}
.char-card {
  min-height: 144px;
  padding: 15px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(194,204,241,.045), transparent 45%), rgba(21,20,28,.9);
  border: 1px solid rgba(255,255,255,.06);
}
.char-card:hover {
  background: linear-gradient(140deg, rgba(194,204,241,.07), rgba(25,24,34,.95));
  border-color: rgba(177,137,255,.2);
  transform: translateY(-2px);
}
.char-card img {
  border-radius: 11px;
}
.tag {
  background: rgba(150,91,255,.16);
  color: #d5c2ff;
}
.ep-wrap {
  gap: 16px;
}
.ep-item {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(194,204,241,.05), transparent 40%), rgba(21,20,28,.9);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.ep-item:hover {
  background: linear-gradient(135deg, rgba(194,204,241,.075), rgba(26,25,35,.96));
  border-color: rgba(178,139,255,.22);
  transform: translateY(-2px);
}
.ep-cover {
  border-radius: 16px;
  background: rgba(255,255,255,.055);
}
.btn.oneclick {
  color: #f1e9ff;
  background: linear-gradient(135deg, rgba(126,74,255,.38), rgba(155,85,255,.2));
  border-color: rgba(180,137,255,.48);
}

/* Dialogs and the full-auto flow: visual-only, behavior untouched */
.style-mask,
.auto-mask,
.look-dialog,
.modal-mask,
.flow-mask {
  background: rgba(5,4,9,.7);
  backdrop-filter: blur(8px);
}
.style-sheet,
.auto-sheet,
.oc-sheet,
.custom-sheet,
.modal,
.look-sheet {
  background: linear-gradient(145deg, rgba(194,204,241,.06), transparent 34%), #17161f;
  border-color: rgba(226,220,255,.11);
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045);
}
.style-sheet,
.auto-sheet {
  border-radius: 22px;
}
.style-close {
  border-radius: 50%;
  background: rgba(255,255,255,.045);
}
.filter-tabs button {
  min-height: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
}
.filter-tabs button.on {
  color: #fff;
  background: linear-gradient(135deg, #7d46ed, #a24fff);
  border-color: rgba(207,181,255,.3);
  box-shadow: 0 7px 18px rgba(116,57,227,.22);
}
.style-card {
  border-radius: 16px;
  background: rgba(9,9,14,.48);
  border-color: rgba(255,255,255,.055);
}
.style-card:hover {
  border-color: rgba(194,163,255,.25);
}
.style-card.on {
  border-color: #a768ff;
  box-shadow: 0 0 0 2px rgba(145,77,255,.14), 0 12px 34px rgba(80,39,161,.16);
}
.custom-sheet input,
.custom-sheet textarea,
.oc-field select,
.oc-field input[type="number"],
.look-field,
.look-area {
  background: rgba(7,7,11,.5);
  border: 1px solid rgba(255,255,255,.075);
}
.auto-steps {
  gap: 10px;
}
.auto-step {
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.04);
}
.auto-step.on {
  background: linear-gradient(110deg, rgba(126,74,255,.24), rgba(126,74,255,.09));
  border-color: rgba(174,129,255,.48);
  box-shadow: 0 8px 24px rgba(76,36,157,.13);
}
.auto-step.on i {
  background: linear-gradient(135deg, #7c45ed, #a656ff);
  box-shadow: 0 4px 12px rgba(122,62,239,.3);
}
.auto-step.done i {
  color: #06261c;
}
.auto-body {
  background: rgba(7,7,11,.16);
}
.auto-card,
.auto-ep {
  background: rgba(8,8,13,.52);
  border-color: rgba(255,255,255,.045);
}
.auto-card.done,
.auto-ep.on {
  border-color: rgba(168,117,255,.38);
}
.auto-bar i {
  background: linear-gradient(90deg, #7744e9, #b262ff);
}
.auto-foot {
  background: rgba(10,9,15,.3);
}
.oc-sheet {
  border-radius: 20px;
}
.oc-field select,
.oc-field input[type="number"] {
  height: 40px;
}
.oc-switch-row,
.oc-file {
  background: rgba(7,7,11,.5);
  border: 1px solid rgba(255,255,255,.055);
}
.oc-switch.on {
  background: linear-gradient(135deg, #7844e8, #a44fff);
}

/* Workspace / Seedance draft workflow: visual-only, behavior untouched */
.ws {
  gap: 12px;
  padding: 12px 14px 14px;
}
.panel {
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(194,204,241,.035), transparent 32%), rgba(17,16,23,.92);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 12px 40px rgba(0,0,0,.09);
}
.assets-head,
.shot-head,
.tl-head {
  height: 46px;
}
.search-row input,
.ref-slot {
  background: rgba(6,6,10,.48);
  border-color: rgba(255,255,255,.075);
}
.asset-tabs button.on::after {
  background: linear-gradient(90deg, #8548f2, #b66cff);
}
.acard {
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.045);
}
.acard:hover {
  border-color: rgba(174,129,255,.26);
}
.acard.on {
  border-color: #9e5cff;
  box-shadow: 0 0 0 2px rgba(145,77,255,.12);
}
.model-btn,
.mini,
.chip {
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.055);
}
.model-btn:hover,
.mini:hover,
.chip:hover {
  background: rgba(255,255,255,.09);
}
.model-menu,
.resolution-menu {
  background: #1b1924;
  border-color: rgba(226,220,255,.13);
  box-shadow: 0 20px 60px rgba(0,0,0,.48);
}
.model-option:hover,
.model-option.on {
  background: rgba(145,77,255,.13);
}
.draft-tag,
.model-tag {
  color: #ddcaff;
  background: rgba(145,77,255,.18);
  border-color: rgba(178,132,255,.32);
}
.draft-hint {
  border-top-color: rgba(157,103,255,.2);
  background: linear-gradient(90deg, rgba(126,74,255,.13), rgba(126,74,255,.035));
}
.gen-btn {
  height: 34px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #7c45ed, #a34fff);
  border: 1px solid rgba(207,181,255,.3);
  box-shadow: 0 8px 22px rgba(111,52,222,.23);
}
.gen-btn:hover {
  background: linear-gradient(135deg, #8951f2, #ae5cff);
}
.player .stage {
  background: radial-gradient(circle at 50% 38%, #14131b, #07070a 64%);
}
.upgrade-trigger {
  border-radius: 999px;
  background: rgba(58,34,102,.88);
  border-color: rgba(193,158,255,.52);
  box-shadow: 0 8px 26px rgba(0,0,0,.3), 0 0 20px rgba(126,74,255,.12);
}
.upgrade-trigger:hover {
  background: linear-gradient(135deg, #7742e6, #9f50f7);
}
.tcard {
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.045);
}
.tcard.on {
  border-color: #b778ff;
  box-shadow: 0 0 0 2px rgba(145,77,255,.11);
}
.tcard .state.draft {
  color: #d9c5ff;
  background: rgba(145,77,255,.18);
}
.shot-row:hover,
.shot-row.on {
  background: rgba(145,77,255,.09);
}
.shot-row.on {
  border-color: rgba(165,111,255,.34);
}
.drawer-panel {
  background: #15141c;
  border-left: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 1100px) {
  .home-main {
    padding-right: 26px;
  }
  .char-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ep-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ws {
    grid-template-columns: 238px minmax(360px, 1fr) 250px;
  }
  .up-ok {
    width: 250px;
  }
}

@media (max-width: 820px) {
  .topbar {
    padding: 0 14px;
  }
  .topbar .tb-center {
    display: none;
  }
  .home .tb-right .step {
    display: none;
  }
  .rail {
    top: auto;
    left: 50%;
    bottom: 12px;
    width: min(94vw, 540px);
    height: 66px;
    padding: 5px 8px;
    border-radius: 33px;
    transform: translateX(-50%);
    flex-direction: row;
    justify-content: space-between;
  }
  .rail-item {
    height: 54px;
    flex: 1;
  }
  .home-main {
    margin-left: 0;
    padding: 18px 18px 100px;
  }
  .home-hero h1 {
    text-align: center;
  }
  .creator {
    flex-direction: column;
  }
  .up-ok {
    width: 100%;
    min-height: 170px;
  }
  .row-2,
  .row-3 {
    grid-template-columns: 1fr;
  }
  .home-projects {
    margin-top: 34px;
  }
  .page {
    padding: 20px 18px 92px;
  }
  .meta-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .char-grid,
  .ep-wrap {
    grid-template-columns: 1fr;
  }
  .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .auto-steps {
    flex-direction: column;
  }
  .ws {
    display: flex;
    overflow: auto;
    flex-direction: column;
  }
  .ws .panel {
    min-height: 360px;
  }
  .assets {
    min-height: 480px !important;
  }
  .timeline {
    min-height: 190px !important;
  }
}
.footer-bar.guide-footer {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 16;
  width: min(720px, calc(100vw - 48px));
  height: auto;
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
.app:has(> .guide-footer) > .page {
  padding-bottom: 128px;
}
.asset-capsule {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  overflow: visible;
  background: linear-gradient(180deg, #f4edff, #e4d6fb);
  border: 1px solid rgba(154,116,230,.55);
  box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 0 18px rgba(176,140,255,.28);
  backdrop-filter: blur(18px);
}
@property --asset-marquee {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.asset-capsule::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient( from var(--asset-marquee), rgba(124,86,214,.22) 0deg, rgba(124,86,214,.22) 248deg, rgba(98,62,196,.7) 300deg, #fff 332deg, rgba(98,62,196,.7) 358deg, rgba(124,86,214,.22) 360deg );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: asset-marquee 5.6s linear infinite;
}
.asset-capsule > * {
  position: relative;
  z-index: 1;
}
.guide-footer .hint {
  flex: 1;
  min-width: 0;
  color: #3d2d58;
  font-size: 12px;
  white-space: nowrap;
}

@container (max-width: 640px) {
  .guide-footer .hint {
    white-space: normal;
  }
}
.guide-footer .hint svg {
  color: #6d4cae;
  flex: none;
}
.asset-capsule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.asset-capsule .btn {
  color: #3d2d58;
  background: rgba(109,76,174,.12);
  border-color: rgba(109,76,174,.22);
}
.asset-capsule .btn:hover {
  color: #2a1844;
  background: rgba(109,76,174,.2);
  border-color: rgba(109,76,174,.32);
}
.asset-capsule .btn.primary {
  color: #fff;
  background: #6b46e5;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 14px rgba(74,42,168,.2);
  font-weight: 650;
  letter-spacing: .06em;
}
.asset-capsule .btn.primary:hover {
  color: #fff;
  background: #623cd9;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 8px 16px rgba(74,42,168,.26);
}
@keyframes asset-marquee {
  to { --asset-marquee: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .asset-capsule::after {
    animation: none;
  }
}

@media (max-width: 560px) {
  .footer-bar.guide-footer {
    bottom: 14px;
  }
  .asset-capsule {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 22px;
    padding: 10px 10px 10px 14px;
  }
  .guide-footer .hint {
    white-space: normal;
  }
  .app:has(> .guide-footer) > .page {
    padding-bottom: 140px;
  }
}

/* 剧本大纲、资产库、分集视频共用的步骤顶栏 */
.flow-page .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  height: 64px;
  padding: 0 20px;
  background: #0d0d12;
  border-bottom: 0;
  backdrop-filter: none;
}
.flow-page .tb-left,
.flow-page .tb-right {
  min-width: 0;
}
.flow-page .tb-right {
  justify-content: flex-end;
}
.flow-page .tb-back {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #eceaf1;
  font-size: 18px;
}
.flow-page .tb-back:hover {
  background: rgba(255,255,255,.06);
  transform: none;
}
.flow-page .flow-title {
  overflow: hidden;
  color: #f4f2f7;
  font-size: 16px;
  font-weight: 620;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flow-page .flow-badge {
  flex: none;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: #7c5cff;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
}
.flow-page .steps {
  gap: 4px;
}
.flow-page .step-sep {
  color: #6d6878;
  font-size: 14px;
}
.flow-page .step {
  height: 44px;
  padding: 0 14px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #b7b2c0;
  transform: none;
}
.flow-page .step:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: #eeeaf4;
  transform: none;
}
.flow-page .step.on {
  color: #f7f5fa;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.flow-page .step.is-done {
  color: #d8d4e0;
}
.flow-page .step-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: inherit;
}
.flow-page .step-ico svg {
  width: 14px;
  height: 14px;
}
.flow-page .step-text {
  display: grid;
  text-align: left;
}
.flow-page .step-text strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.flow-page .step-text small {
  color: #8d8796;
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}
.flow-page .step.on .step-text small {
  color: #b7b1c2;
}
.flow-page .credit {
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}

/* 流程页底部胶囊：统一为深色玻璃 */
body.flow-page .guide-footer .asset-capsule {
  padding: 7px 7px 7px 20px;
  background: rgba(30,28,38,.82);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(1.2);
}
body.flow-page .guide-footer .asset-capsule::after {
  display: block;
  background: conic-gradient( from var(--asset-marquee), rgba(255,255,255,.04) 0deg, rgba(255,255,255,.04) 250deg, rgba(158,108,255,.55) 304deg, #d9c6ff 332deg, rgba(158,108,255,.55) 356deg, rgba(255,255,255,.04) 360deg );
}
body.flow-page .guide-footer .hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d6d2de;
}
body.flow-page .guide-footer .hint svg {
  color: #b28cff;
}
body.flow-page .guide-footer .btn {
  color: #eceaf1;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.06);
}
body.flow-page .guide-footer .btn:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}
body.flow-page .guide-footer .btn.primary {
  color: #16151a;
  background: #f4f2f7;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
body.flow-page .guide-footer .btn.primary:hover {
  color: #000;
  background: #fff;
}