/* Shell */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #fbfaf8;
  border-right: 1px solid var(--border-muted);
  display: flex;
  flex-direction: column;
  padding: 22px 10px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  padding: 2px 10px 22px;
}
.brand .name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.03em;
}
.brand .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent;
  padding: 10px 12px; border-radius: var(--radius);
  color: var(--on-variant); cursor: pointer; text-align: left;
  font-weight: 500; font-size: 13px;
}
.nav button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
.nav button { position: relative; }
.nav button:hover { background: rgba(242, 109, 33, 0.06); color: var(--primary); }
.nav button.active {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  box-shadow: none;
}
.nav button.active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border-muted); background: var(--surface-white);
  color: var(--on-surface); padding: 10px 16px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 500; font-size: 13px;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
  font-weight: 600; letter-spacing: 0.04em;
  font-size: 14px; /* 设计宪法：橙底白字 ≥14px */
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* 登录门：全屏遮罩，打开时拦截背后所有点击（勿再退回 max-width:360 卡片内联） */
.login-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  margin: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  background: rgba(246, 244, 240, 0.94);
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overscroll-behavior: contain;
}
.login-gate.is-open { display: flex; }
.login-gate:not(.is-open) { pointer-events: none; }
/* 打开时锁住背后页面滚动与点击 */
body.login-gate-open {
  overflow: hidden !important;
  touch-action: none;
}
body.login-gate-open .app {
  pointer-events: none !important;
  user-select: none;
}
body.login-gate-open .login-gate,
body.login-gate-open .login-gate * {
  pointer-events: auto !important;
  user-select: auto;
}
.login-card {
  width: min(380px, 92vw); padding: 28px;
  border: 1px solid var(--border-muted); border-radius: 12px;
  background: var(--surface-white);
  box-shadow: 0 8px 32px rgba(33, 31, 28, 0.08);
}
.login-card h2 {
  font-family: var(--font-serif); margin: 0 0 16px; font-size: 20px; font-weight: 600; color: var(--on-surface);
}
.login-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.login-tabs .btn { flex: 1; font-size: 13px; }
.login-tabs .btn.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--border-muted); border-radius: 8px;
  background: var(--surface-taupe); font-size: 13px; color: var(--on-surface);
}
.login-card input:focus { outline: none; border-color: var(--primary); }
.login-hint { font-size: 12px; color: var(--on-variant); margin: 10px 0 0; line-height: 1.5; }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 18px; font-size: 14px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.topbar {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--border-muted);
  background: var(--paper-bg);
}

/* 合规：低调一行，不抢主视觉（对比竞品大红条） */
.legal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px var(--gutter);
  border-bottom: 1px solid rgba(138, 122, 116, 0.12);
  background: transparent;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}
.legal-strip-text {
  flex: 1;
  min-width: 0;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legal-strip-link {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  color: var(--on-variant);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.75;
}
.legal-strip-link:hover { color: var(--primary); opacity: 1; }
.login-legal {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 14px 0 0;
}
.legal-inline {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 1px;
  font-size: inherit;
  color: var(--on-variant);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-inline:hover { color: var(--primary); }
.legal-modal { max-width: 440px; }
.legal-modal-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-variant);
  max-height: min(52vh, 360px);
  overflow: auto;
  margin: 0 0 4px;
}
.legal-modal-body p { margin: 0 0 10px; }
.legal-modal-body p:last-child { margin-bottom: 0; }
.legal-modal-body ul {
  margin: 0 0 10px;
  padding-left: 1.15em;
}
.legal-modal-body li { margin: 0 0 4px; }
.charge-legal {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.topbar .title {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
}
.topbar .meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--on-variant); }
.balance {
  padding: 5px 10px; background: var(--surface-taupe); border-radius: 999px;
  font-weight: 500; color: var(--on-surface); border: 1px solid var(--border-muted);
}
.content { flex: 1; padding: 28px clamp(16px, 3vw, 36px) 72px; overflow: auto; }
.page-stage { max-width: 1180px; }
.page-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.sec-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-variant);
}

/* ── S1 Wall · 即梦式统一意图条 ── */
.intent-bar {
  background: transparent; border: 0;
  border-radius: 0; padding: 0 0 8px; margin-bottom: 22px;
}
.intent-bar-v2 { padding: 0; }
.intent-bar-v2 .vf-scenario-layout { margin-top: 8px; margin-bottom: 16px; }
.intent-bar-v2 .create-intent-layout {
  margin: 2px 0 14px;
  gap: 10px;
}
.intent-bar-v2 .create-intent-layout .vf-intent-group {
  padding: 10px 12px;
}
.intent-bar-v2 .create-intent-layout .vf-intent-group h2 { font-size: 13px; }
.intent-bar-v2 .create-intent-layout .vf-intent-cards { gap: 8px; margin-top: 8px; }
.intent-bar-v2 .create-intent-layout .vf-intent-card {
  min-height: 58px;
  padding: 8px 10px;
  align-items: center;
  background: var(--surface-white);
}
.intent-bar-v2 .create-intent-layout .vf-intent-card em {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}
.intent-bar-v2 .create-intent-layout .vf-icon { width: 18px; height: 18px; flex-basis: 18px; }
.intent-composer {
  background: var(--surface-white);
  border: 1px solid var(--border-muted);
  border-radius: 14px;
  padding: 6px 6px 6px 4px;
}
.intent-composer:focus-within { border-color: var(--primary); }
.composer-field {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
}
.composer-attach {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--on-variant);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.composer-attach:hover,
.composer-attach.has { color: var(--primary); background: var(--primary-tint); }
.composer-plus {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.composer-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.intent-composer textarea,
.intent-bar .intent-composer textarea {
  display: block;
  flex: 1;
  min-width: 0;
  width: auto;
  min-height: 40px;
  max-height: 112px;
  margin: 0;
  padding: 8px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: none;
  color: var(--on-surface);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
}
.intent-composer textarea:focus,
.intent-bar .intent-composer textarea:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.composer-go {
  flex: 0 0 auto;
  height: 40px;
  min-width: 80px;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.intent-modes {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.intent-mode {
  border: 1px solid var(--border-muted); background: var(--surface-taupe);
  color: var(--on-variant); padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.intent-mode.active {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600;
}
.intent-quick {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.iq-chip {
  border: 1px solid var(--border-muted); background: #fff;
  color: var(--on-surface); padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.iq-chip:hover { border-color: var(--primary); color: var(--primary); }
.iq-chip.highlight {
  background: var(--primary-tint); border-color: transparent; color: var(--primary); font-weight: 600;
}
/* 视频墙：生成 / 剪辑 主轨按钮略加重 */
.video-primary-tabs button {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 108px;
}
.video-primary-tabs button strong { font-size: 13px; font-weight: 600; }
.video-primary-tabs button em { font-size: 11px; font-style: normal; color: var(--text-muted); font-weight: 400; }
.video-primary-tabs button.active em { color: var(--primary); opacity: 0.85; }
.video-primary-tabs button.is-primary { border-color: var(--border-muted); }
.me-tabs { margin-bottom: 12px; }

/* 动起来 / 去水印：常用入口高亮（平涂，零 UI 渐变 · 宪法） */
.iq-chip.iq-motion {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
  box-shadow: none;
}
.iq-chip.iq-clean {
  background: #e8f4f0;
  border-color: #2a6b5c;
  color: #2a6b5c;
  font-weight: 700;
}
.iq-chip.iq-motion:hover { border-color: var(--primary-hover); color: var(--primary-hover); background: var(--primary-tint); }
.iq-chip.iq-clean:hover { border-color: #1e4f45; color: #1e4f45; }
.hint-accent {
  display: inline-block; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 11px;
}
.hint-accent.motion {
  background: var(--primary-tint); color: var(--primary);
}
.hint-accent.clean {
  background: #e8f4f0; color: #2a6b5c;
}
.chip.chip-motion {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.intent-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end;
}
.intent-row-3 {
  grid-template-columns: 84px minmax(0, 1fr) 88px;
  align-items: stretch;
  gap: 10px;
}
.intent-composer .intent-upload { margin-top: 0; min-height: 72px; }
.intent-composer .btn-gen { margin-top: 0; }
.intent-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 0; margin: 20px 0 0; border: 1px dashed var(--border-muted);
  border-radius: 10px; background: var(--surface-taupe); cursor: pointer;
  font-size: 11px; color: var(--on-variant); text-align: center; padding: 6px 4px;
}
.intent-upload:hover, .intent-upload.has { border-color: var(--primary); color: var(--primary); }
.intent-upload .iu-icon { font-size: 18px; font-weight: 600; line-height: 1; }
.intent-upload .iu-text { font-size: 11px; line-height: 1.2; }
.intent-text { min-width: 0; display: flex; flex-direction: column; }
.intent-lab, .intent-bar label.intent-lab {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; color: var(--on-variant); margin-bottom: 4px;
}
.intent-bar label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; color: var(--on-variant); margin-bottom: 6px;
}
.intent-bar label.intent-upload { margin: 20px 0 0; }
.intent-bar textarea {
  width: 100%; min-height: 52px; max-height: 120px; border: 1px solid var(--border-muted);
  border-radius: 10px; padding: 10px 12px; background: var(--surface-taupe);
  resize: vertical; color: var(--on-surface); font-size: 13px; line-height: 1.45;
}
.intent-bar textarea:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); background: #fff; }
.intent-bar .composer-attach {
  display: flex;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-variant);
}
.intent-bar .intent-composer textarea,
.intent-bar .intent-composer textarea:focus {
  min-height: 40px;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
.btn-gen {
  min-width: 88px; margin-top: 20px; padding: 0 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; align-self: stretch;
}
.intent-hint {
  margin: 8px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.45;
}
.wall-motion .tpl-thumb { aspect-ratio: 3/4; }
.slot-video-name {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 8px; font-size: 11px; text-align: center;
  color: var(--primary); font-weight: 600; word-break: break-all;
}
.motion-quality-tip { font-size: 12px; }
.free-bar {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end;
  background: var(--surface-taupe); border: 1px solid var(--border-muted);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.free-bar label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-variant); margin-bottom: 8px;
}
.free-bar textarea {
  width: 100%; min-height: 56px; border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-white);
  resize: vertical; color: var(--on-surface);
}
.free-bar textarea:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); }
.sec-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.sec-row h2 {
  margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.03em;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border-muted); background: var(--surface-white);
  color: var(--on-variant); padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }

.wall-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 16px;
}
.wall-search { display: block; }
.wall-search-lab {
  display: block; font-size: 11px; font-weight: 600; color: var(--on-variant); margin-bottom: 6px;
}
.wall-search input {
  width: 100%; border: 1px solid var(--border-muted); border-radius: 10px;
  padding: 10px 12px; background: var(--surface-white); font-size: 14px; color: var(--on-surface);
}
.wall-search input:focus {
  outline: 2px solid var(--primary-tint); border-color: var(--primary);
}
.wall-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.wall-recent .tpl-thumb { aspect-ratio: 3/4; }

.crease-picks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.crease-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--border-muted); background: #fff; border-radius: 10px;
  padding: 8px 8px 7px; text-align: left; cursor: pointer; color: var(--on-surface);
}
.crease-pick:hover { border-color: var(--primary); }
.crease-pick.active {
  border-color: var(--primary); background: var(--primary-tint);
}
.crease-pick .crease-ico { color: var(--on-variant); display: block; line-height: 0; }
.crease-pick.active .crease-ico { color: var(--primary); }
.crease-pick strong { font-size: 13px; font-weight: 600; }
.crease-pick em { font-size: 11px; font-style: normal; color: var(--on-variant); }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 22px 16px;
}
.tpl-card {
  background: transparent; border: 0;
  border-radius: 0; overflow: visible; cursor: pointer;
  text-align: left; padding: 0; width: 100%; max-width: 180px; font: inherit; color: inherit;
  box-shadow: none;
}
.tpl-card:hover { border-color: transparent; box-shadow: none; transform: none; }
.tpl-card:active { transform: scale(0.99); }
.tpl-thumb {
  aspect-ratio: 3/4; background: var(--surface-taupe);
  position: relative; overflow: hidden; width: 100%; max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-muted);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tpl-card:hover .tpl-thumb {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(33, 31, 28, 0.1);
}
.tpl-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  display: block;
}
/* 动效预览：静态封面在下，视频叠上；未加载时不占带宽 */
.tpl-thumb .tpl-preview-fallback,
.tpl-thumb .tpl-preview-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tpl-thumb .tpl-preview-fallback { z-index: 1; }
.tpl-thumb .tpl-preview-fallback.is-hidden { opacity: 0; pointer-events: none; }
.tpl-thumb .tpl-preview-video {
  z-index: 2; opacity: 0; background: #1a1614;
  transition: opacity 0.2s ease;
}
.tpl-thumb .tpl-preview-video.is-playing { opacity: 1; }
.tpl-badge-play {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px; pointer-events: none;
}
/* 常用生图区：动起来 / 去水印卡片描边强调 */
.tpl-card.tpl-accent-motion .tpl-thumb {
  border-color: rgba(242, 109, 33, 0.4);
}
.tpl-card.tpl-accent-clean .tpl-thumb {
  border-color: rgba(46, 110, 96, 0.35);
}
.hot.hot-motion { background: var(--primary); }
.hot.hot-clean { background: #2a6b5c; }
.meta-accent.meta-motion { color: var(--primary); font-weight: 600; }
.meta-accent.meta-clean { color: #2a6b5c; font-weight: 600; }
.wall-common .tpl-card.tpl-accent-motion .tpl-thumb,
.wall-common .tpl-card.tpl-accent-clean .tpl-thumb {
  aspect-ratio: 3/4;
}
.tpl-thumb .ph {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--text-muted); font-size: 12px; padding: 16px; text-align: center;
}
/* 风格化占位：没有真实封面图时也不「灰一块」 */
.tpl-thumb .cover-mock {
  width: 100%; height: 100%; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 12px 12px; text-align: left;
}
.cover-mock .cm-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 15px;
  line-height: 1.35; letter-spacing: 0.02em; color: inherit;
}
.cover-mock .cm-sub {
  font-size: 11px; opacity: 0.75; line-height: 1.4; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cover-mock .cm-foot {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55;
}
.cover-mock .cm-badge {
  position: absolute; right: 10px; bottom: 12px;
  width: 42%; aspect-ratio: 3/4; border-radius: 6px;
  background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* 主题色板 · 平涂（宪法：零 UI 渐变；原 linear-gradient 已废） */
.skin-xhs-pink { background: #f0b8a8; color: #4a2c24; }
.skin-xhs-white { background: #f5f0ea; color: #3d342e; }
/* 浅色单主题：原 dark 改为暖深灰面，非全站暗色模式 */
.skin-xhs-dark { background: #ebe6dc; color: #3d3832; }
.skin-xhs-dark .cm-badge { background: rgba(242,109,33,0.12); border-color: rgba(242,109,33,0.28); color: #C94F0C; }
.skin-xhs-case { background: #e8d5c8; color: #3a2e28; }
.skin-xhs-talk { background: #e8eef2; color: #2a353c; }
.skin-med { background: #e4ebe8; color: #2a3d38; }
.skin-modern { background: #efe4dc; color: #3d2e28; }
.skin-gf { background: #ebe4dc; color: #3d342e; }
.skin-gf .cm-badge { background: rgba(242,109,33,0.1); border-color: rgba(242,109,33,0.25); }
.skin-scene { background: #dfe5df; color: #2e3530; }
.skin-ref { background: #e8e2ef; color: #322a40; }
.skin-default { background: #ebe6dc; color: #3d3832; }
.skin-l1 {
  background: #f1ebe3;
  color: var(--on-surface);
}
.tpl-thumb .ph.l1-ph {
  gap: 10px; padding: 20px 16px;
}
.tpl-thumb .ph.l1-ph b {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--on-surface);
}
.tpl-thumb .ph.l1-ph span { font-size: 12px; color: var(--text-muted); }
.wall-l1 .tpl-thumb { aspect-ratio: 16/10; }
.wall-hot .tpl-thumb,
.wall-l2 .tpl-thumb { aspect-ratio: 3/4; }
.tpl-play-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 4;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(246, 244, 240, 0.92);
  color: #3d3832;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  border: 1px solid rgba(33, 31, 28, 0.08);
}
.tpl-example-badge {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 4;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(33, 31, 28, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.hot {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(242, 109, 33, 0.25);
}
.tpl-body { padding: 10px 2px 0; }
.tpl-body strong {
  display: block; font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  margin-bottom: 4px; letter-spacing: -0.02em;
}
.tpl-body em {
  font-style: normal; font-size: 12px; font-weight: 400; color: var(--on-variant);
  line-height: 1.45; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-meta {
  margin-top: 8px; display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--on-variant);
}
.tpl-meta .pts {
  background: var(--primary-tint); padding: 3px 9px; border-radius: 999px;
  color: var(--primary); font-weight: 600;
}
.sec-row h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wall-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 16px;
  color: var(--on-variant); border: 1px dashed var(--border-muted); border-radius: var(--radius);
}

/* ── S2 Studio · 左表单 | 中结果 | 右相关模板 ── */
.studio {
  display: grid;
  /* 左功能区加宽 · 中舞台为主 · 右栏略收 */
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) minmax(220px, 260px);
  gap: 0;
  min-height: calc(100vh - 100px);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-white);
}
.studio-form {
  border-right: 1px solid var(--border-muted);
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--paper-bg);
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.studio-related {
  border-left: 1px solid var(--border-muted);
  background: var(--surface-taupe);
  padding: 14px 12px 20px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  transition: min-width 0.2s ease, width 0.2s ease;
}
/* 放大：右栏约 2–3 倍宽，多列大图选模板 */
.studio.is-related-expanded {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(480px, min(720px, 52vw));
}
.studio.is-related-expanded .studio-related {
  box-shadow: -8px 0 24px rgba(40, 30, 20, 0.06);
  z-index: 2;
}
/* 右栏标题整条可点展开/收起（不要单独「放大」丑按钮） */
.rel-head-hit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: var(--surface-white);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.rel-head-hit:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.rel-head-hit h3 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
.rel-head-hint {
  display: block;
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  font-weight: 400;
}
.rel-chev {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0.55;
  margin-top: 2px;
}
/* 左侧：换模板入口 */
.tpl-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tpl-browse-link:hover { opacity: 0.85; }
.tpl-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-muted);
  font-size: 10px;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
  pointer-events: none;
}
.rel-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rel-grid .rel-card { margin-bottom: 12px; }
.rel-grid-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.rel-grid-wide .rel-card { margin-bottom: 0; }
.rel-grid-wide .rel-thumb { max-height: 260px; }
/* 展开为多列后，分节标题/空态说明必须整行占满：否则它会占掉左上角第一格，
   看起来像「左上角缺一张卡」（模板展开两列/三列时的缺格 bug）。 */
.rel-grid-wide > .rel-section-lab,
.rel-grid-wide > .sub,
.rel-grid-wide > p {
  grid-column: 1 / -1;
  align-self: start;
  margin: 0 0 2px;
}
@media (min-width: 1400px) {
  .studio.is-related-expanded {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(560px, min(780px, 55vw));
  }
  .rel-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.studio-related h3 {
  margin: 0 0 4px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-variant);
}
.studio-related .sub {
  margin: 0 0 12px; font-size: 11px; color: var(--text-muted); line-height: 1.4;
}
.studio-related .rel-section-lab {
  margin: 10px 0 8px; font-size: 11px; font-weight: 600; color: var(--primary);
}
/* 大图卡片：所有子风格通用，便于看清版式/字号感 */
.rel-card {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; text-align: left; border: 1px solid var(--border-muted);
  background: var(--surface-white); border-radius: var(--radius);
  padding: 0; margin-bottom: 12px; cursor: pointer; font: inherit; color: inherit;
  overflow: hidden;
}
.rel-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(27,28,28,.06); }
.rel-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.rel-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 220px;
  border-radius: 0;
  background: var(--surface-taupe);
  overflow: hidden;
  display: block;
  position: relative;
}
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rel-thumb .cover-mock { max-height: 220px; }
.rel-thumb .cm-title { font-size: 14px; }
.rel-thumb .cm-badge { width: 36%; }
.rel-card .rel-body {
  padding: 10px 12px 12px;
}
.rel-card strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.rel-card em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.35; }
.rel-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.preview-note {
  margin: 0 0 12px; padding: 10px 12px; background: var(--surface-taupe);
  border: 1px dashed var(--border-muted); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--on-variant); line-height: 1.45;
}
.preview-note b { color: var(--primary); font-weight: 600; }
.back-link {
  border: 0; background: 0; color: var(--primary); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 0; margin-bottom: 12px; text-align: left;
}
.studio-form h1 {
  margin: 0 0 6px; font-family: var(--font-serif); font-size: 22px; font-weight: 600;
}
.studio-form .desc {
  margin: 0 0 18px; font-size: 12px; color: var(--on-variant); line-height: 1.5;
}
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--on-variant); margin-bottom: 6px;
}
.field textarea, .field select, .field input[type="text"] {
  width: 100%; border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface-taupe); color: var(--on-surface);
}
.field textarea { min-height: 88px; resize: vertical; }
.field textarea:focus, .field select:focus, .field input:focus {
  outline: 2px solid var(--primary-tint); border-color: var(--primary); background: #fff;
}
.ratio-row, .batch-row { display: flex; gap: 6px; flex-wrap: wrap; }
.seg {
  min-width: 48px; padding: 8px 10px; border: 1px solid var(--border-muted);
  background: var(--surface-white); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 11px; font-weight: 500; color: var(--on-variant);
  text-align: center;
}
.seg.active { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.upload-slot {
  width: 100px; height: 100px; border: 1px dashed var(--border-muted);
  border-radius: var(--radius); display: grid; place-items: center;
  background: var(--surface-taupe); cursor: pointer; font-size: 11px; color: var(--text-muted);
  text-align: center; padding: 8px; position: relative; overflow: hidden;
}
button.upload-slot {
  appearance: none;
  font: inherit;
  color: inherit;
}
.upload-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.upload-slot img { width: 100%; height: 100%; object-fit: cover; }
.upload-slot.has-file { border-style: solid; border-color: var(--primary); }
/* 槽位容器：删除按钮浮在右上角 */
.slot-wrap { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.slot-clear {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  width: 24px; height: 24px; border: 0; border-radius: 999px;
  background: rgba(33, 31, 28, 0.72); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.slot-clear:hover { background: var(--primary); }
.slot-clear:active { transform: scale(0.95); }
.form-actions { margin-top: auto; padding-top: 16px; }
.form-hint { margin-top: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* 小红书封面 OCR 面板 */
.cover-ocr-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-white);
}
.cover-ocr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.cover-ocr-head strong { font-size: 13px; }
.cover-title-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--paper-bg);
}
.cover-title-input:focus {
  outline: 2px solid var(--primary-tint);
  border-color: var(--primary);
  background: #fff;
}
.cover-ocr-raw {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--on-variant);
}
.cover-ocr-raw pre {
  margin: 6px 0 0;
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 8px;
  background: var(--surface-taupe);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.45;
}
.upload-slot .slot-badge.cover-ref {
  background: #e8f4ff; color: #1a5f9e;
}
.upload-slot .slot-badge.cover-person {
  background: #f3e8ff; color: #6b3fa0;
}
.slots-cover .upload-slot.slot-cover-ref {
  border-color: #8eb8e0;
}
.slots-cover .upload-slot.slot-cover-person {
  border-color: #c4a0e8;
}

.studio-result {
  padding: 16px 18px;
  display: flex; flex-direction: column;
  background: var(--paper-bg);
  max-height: calc(100vh - 100px);
  overflow: auto;
  min-width: 0;
}
.studio-result .result-empty {
  max-width: 280px;
  margin: 0 auto;
  min-height: 160px;
}
.result-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.result-head strong {
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
}
.result-head span { font-size: 13px; color: var(--on-variant); font-weight: 400; }

/* 右栏：小结果区，不撑满 */
.result-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 16px; min-height: 200px;
}
.result-empty .icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--surface-taupe);
  display: grid; place-items: center; color: var(--text-muted); margin-bottom: 12px;
  font-size: 20px;
}
.result-empty b { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.result-empty p { margin: 0; font-size: 13px; color: var(--on-variant); max-width: 240px; line-height: 1.5; }

.result-running { margin-top: 8px; }
.result-slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.result-slot {
  background: var(--surface-white); border: 1px solid var(--border-muted);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.result-slot img, .result-slot video {
  width: 100%; height: 200px; object-fit: cover; background: var(--surface-taupe); display: block;
}
.result-slot .result-slot-lab {
  font-size: 11px; color: var(--text-muted); padding: 6px 8px; border-top: 1px solid var(--border-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-slot .result-slot-ops {
  display: flex; gap: 4px; padding: 6px 8px;
}
.result-slot .result-slot-ops button {
  flex: 1; border: 1px solid var(--border-muted); background: transparent;
  color: var(--on-variant); font-size: 11px; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.result-slot .result-slot-ops button:hover { color: var(--primary); background: var(--primary-tint); }
.result-slot-ph {
  height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-muted); background: var(--surface-taupe); font-size: 12px;
}
.result-slot-ph.is-error { color: var(--destructive); }
.result-slot-ph.is-running { color: var(--primary); }
.result-head .dl-all {
  border: 1px solid var(--border-muted); background: transparent; color: var(--on-variant);
  font-size: 11px; cursor: pointer; padding: 3px 10px; border-radius: 6px; margin-left: 8px;
}
.result-head .dl-all:hover { color: var(--primary); background: var(--primary-tint); }
.run-status {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--primary);
  font-weight: 500; margin-bottom: 14px;
}
.run-status .spin {
  width: 14px; height: 14px; border: 2px solid var(--primary-tint);
  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skel-row {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.skel {
  width: 140px; aspect-ratio: 3/4; border-radius: var(--radius-sm);
  background: var(--surface-taupe);
  border: 1px solid var(--border-muted);
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.result-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.result-slot {
  width: min(148px, 30%);
  background: var(--surface-white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.result-slot img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: var(--surface-taupe);
}
.result-slot-ph {
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-taupe);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 10px;
}
.result-slot-ph.is-running {
  color: var(--primary);
}
.result-slot-ph.is-error {
  background: #f7ece8;
  color: #9a3b2f;
  animation: none;
}
.result-slot-ph .spin {
  width: 14px; height: 14px; border: 2px solid var(--primary-tint);
  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
}
.result-slot-ph em { font-style: normal; font-size: 12px; line-height: 1.35; font-weight: 400; }
.result-slot-lab {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--on-variant);
  border-top: 1px solid var(--border-muted);
}

.result-grid {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-content: flex-start;
}
.shot {
  width: min(200px, 42%);
  background: var(--surface-white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  overflow: hidden;
}
.shot img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface-taupe);
}
.shot .ops {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  border-top: 1px solid var(--border-muted);
  align-items: center;
}
.shot .ops button,
.shot .ops .chip,
.shot .ops .result-dl {
  border: 0; background: transparent; color: var(--on-variant);
  font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 10px; border-radius: 8px;
}
.shot .ops .result-dl {
  display: inline-block;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
.shot .ops button:hover,
.shot .ops .chip:hover { color: var(--primary); background: var(--primary-tint); }

.continues {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.continues .lab {
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text-muted); margin-right: 4px;
}
.continues .chip { font-size: 13px; font-weight: 500; padding: 6px 12px; }

.ops-more { position: relative; display: inline-flex; }
.ops-more-toggle {
  font-size: 13px; font-weight: 500;
}
.ops-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 148px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(33, 31, 28, 0.08);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-more-menu[hidden] { display: none; }
.ops-more-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--on-variant);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ops-more-item:hover { background: var(--bg-subtle); color: var(--text-primary, #211F1C); }

/* Modal */
.overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(27, 28, 28, 0.35);
  align-items: center; justify-content: center; padding: 20px;
}
.overlay.open { display: flex; }
.modal {
  width: min(400px, 100%); background: var(--paper-bg);
  border: 1px solid var(--border-muted); border-radius: 12px; padding: 22px;
}
.modal h3 {
  margin: 0 0 8px; font-family: var(--font-serif); font-size: 18px; font-weight: 600;
}
.modal p { margin: 0 0 16px; font-size: 13px; color: var(--on-variant); line-height: 1.5; }
.cost-row {
  display: flex; justify-content: space-between; padding: 12px 14px;
  background: var(--surface-taupe); border-radius: var(--radius-sm);
  margin-bottom: 10px; font-size: 14px;
}
.cost-row b { color: var(--primary); font-weight: 600; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--on-surface); color: #fff; padding: 10px 14px 10px 18px; border-radius: 999px;
  font-size: 13px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px);
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast .toast-text { flex: 1; line-height: 1.35; }
.toast .toast-action {
  flex-shrink: 0; border: 0; border-radius: 999px; padding: 5px 12px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.toast .toast-action:hover { background: var(--primary-hover); }

/* login-gate full-screen overlay: see top rule; card styles on .login-card */
.turnstile-slot { min-height: 0; margin: 0 0 12px; min-height: 65px; display: flex; align-items: center; justify-content: center; }
.turnstile-slot:empty { display: none; min-height: 0; margin: 0; }
.turnstile-slot iframe { max-width: 100%; }

/* multi slots */
.slots-row { display: flex; flex-wrap: wrap; gap: 10px; }
.slots-row.multi .upload-slot { width: 96px; height: 96px; }
.upload-slot b { font-size: 11px; font-weight: 600; color: var(--on-variant); }
/* 轨迹参考槽：短标签，防 @图1 / 长文案叠字 */
.slots-traj .upload-slot {
  width: 112px; height: 120px; padding: 6px 6px 8px;
  overflow: hidden;
}
.slots-traj .slot-badge.traj {
  position: absolute; left: 4px; top: 4px; z-index: 2;
  /* 勿 ellipsis 裁掉「前/后」导致少一个字 */
  max-width: none; overflow: visible; white-space: nowrap;
  font-size: 10px; font-weight: 600; padding: 2px 6px; background: rgba(255,255,255,.94);
  line-height: 1.2;
}
.slots-traj .upload-slot.slot-traj {
  /* 角标「@变化前」完整露出 */
  overflow: visible;
}
.slots-traj .upload-slot.slot-traj.has-file {
  overflow: hidden;
}
.slots-traj .upload-slot.slot-traj.has-file .slot-badge.traj {
  max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis;
}
.slots-traj .slot-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 6px 8px; line-height: 1.35; font-size: 11px;
  max-height: 100%; overflow: hidden; text-align: center;
}
.slots-traj .slot-empty-line { color: var(--text-muted); font-size: 11px; }
.slots-traj .slot-empty b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text); }
.slots-traj .slot-badge.traj { pointer-events: none; }
.slots-traj .slot-cap {
  font-size: 10px; line-height: 1.2; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slots-traj .slot-pick-work { font-size: 11px !important; padding: 5px 6px !important; }
.traj-panel { margin-top: 4px; }
.traj-panel .batch-row { margin-bottom: 2px; }
.shot-open { display: block; cursor: zoom-in; }
.shot-open img { width: 100%; display: block; }
.shot-stage-lab {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--on-variant);
  text-align: center;
}
.shot-stage-lab.is-anchor { color: var(--primary); }
.shot-anchor { box-shadow: 0 0 0 2px var(--primary-tint); border-radius: 10px; }

/* 中间预览 · 形态选择摘要（简笔叠线已关，仍展示左侧所选形态） */
.traj-morph-summary {
  grid-column: 1 / -1;
  background: var(--primary-tint, #FDEEE1) !important;
  border-color: rgba(242, 109, 33, 0.35) !important;
}
.traj-morph-summary .traj-morph-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--on-variant, #756E66);
}

/* 轨迹 · 2D 简笔（默认关闭，样式保留备以后关键点版） */
.traj-sketch-host {
  position: relative;
}
.traj-sketch-host img {
  display: block; width: 100%; height: auto;
}
.traj-eye-sketch {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.traj-crease-line {
  stroke: var(--primary, #F26D21);
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  filter: drop-shadow(0 0 0.4px rgba(255,255,255,.9));
}
.traj-nose-tip {
  stroke-width: 0.7;
}
.traj-lid-hint {
  stroke: rgba(117, 110, 102, 0.45);
  stroke-width: 0.35;
  stroke-dasharray: 1.2 1.1;
  stroke-linecap: round;
}
.traj-sketch-badge {
  position: absolute; left: 8px; top: 8px; z-index: 3;
  font-size: 10px; font-weight: 600; color: var(--primary, #F26D21);
  background: rgba(255,255,255,.92); border: 1px solid rgba(242,109,33,.35);
  border-radius: 999px; padding: 2px 8px; pointer-events: none;
  letter-spacing: 0.02em;
}
.traj-sketch-host.has-sketch em {
  position: relative; z-index: 3;
}

/* lists */
.list-page h2 {
  margin: 0 0 16px; font-family: var(--font-serif); font-size: 22px; font-weight: 600;
}
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--surface-white); border: 1px solid var(--border-muted); border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-muted);
}
.data-table th {
  background: var(--surface-taupe); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--on-variant);
}
.data-table code { font-size: 11px; color: var(--text-muted); }
.work-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.work-card {
  border: 1px solid var(--border-muted); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-white);
}
.work-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.work-card video { width: 100%; aspect-ratio: 1; object-fit: contain; background: #111; }
.work-card .ops {
  display: flex; gap: 8px; padding: 8px; font-size: 12px;
}
.work-card .ops button {
  border: 0; background: transparent; color: var(--primary); cursor: pointer; font-weight: 500;
}
/* 工作窗口 · 购物袋 */
.workbag-page .intent-hint { max-width: 640px; }
.workbag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.workbag-card {
  position: relative;
  display: flex;
  background: var(--surface-white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius);
  overflow: hidden;
}
.workbag-card .wb-main {
  flex: 1; display: flex; gap: 12px; padding: 0;
  border: 0; background: transparent; text-align: left;
  cursor: pointer; font: inherit; color: inherit; min-width: 0;
}
.workbag-card .wb-main:hover { background: rgba(242, 109, 33, 0.04); }
.wb-thumb {
  width: 88px; min-height: 88px; flex-shrink: 0;
  background: var(--surface-taupe); position: relative; overflow: hidden;
}
.wb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-thumb .ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 12px; color: var(--text-muted); padding: 8px; text-align: center;
}
.wb-badge {
  position: absolute; left: 6px; top: 6px;
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px;
  background: #fff; color: var(--on-variant); border: 1px solid var(--border-muted);
}
.wb-badge.run { background: var(--primary); color: #fff; border-color: var(--primary); }
.wb-badge.done { color: var(--primary); border-color: var(--primary); }
.wb-body { padding: 12px 8px 12px 0; min-width: 0; }
.wb-body strong { display: block; font-size: 13px; margin-bottom: 4px; }
.wb-body em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }
.wb-body p { margin: 6px 0 0; font-size: 12px; color: var(--on-variant); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-del {
  position: absolute; right: 6px; top: 6px;
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--on-variant); cursor: pointer;
  font-size: 16px; line-height: 1;
}
.wb-del:hover { color: var(--primary); }
.nav button.has-badge .label { color: var(--primary); font-weight: 600; }
.linkish {
  border: 0; background: transparent; color: var(--primary);
  cursor: pointer; font-size: 12px; font-weight: 500; padding: 0;
}
.linkish:hover { text-decoration: underline; }

.rel-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.recent-strip { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-muted); }
.recent-lab { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.recent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-thumb {
  width: 56px; height: 56px; padding: 0; border: 1px solid var(--border-muted);
  border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-taupe);
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-thumb:hover { border-color: var(--primary); }
.center-idle { padding: 8px 4px 16px; }
.center-hint { font-size: 12px; color: var(--on-variant); line-height: 1.45; margin: 0 0 12px; }
.center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.center-card {
  border: 1px solid var(--border-muted); border-radius: 10px; overflow: hidden;
  padding: 0; background: var(--surface-white); cursor: pointer; text-align: center;
  font: inherit; color: inherit;
}
.center-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.center-card span {
  display: block; font-size: 11px; padding: 6px; color: var(--primary); font-weight: 500;
}
.center-card:hover { border-color: var(--primary); }

/* 2D 局部控制画板（与预览同层） */
.mask-board { padding: 4px 0 12px; }

/* @ 点名槽位（像多参） */
.field-prompt-at { position: relative; }
.at-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.at-lab {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 2px;
}
.at-chip {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-muted);
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
}
.at-chip:hover { border-color: var(--primary); background: #fffaf6; }
.at-chip.has { border-color: #6b8f71; color: #3d6b45; }
.at-menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 200px;
  overflow: auto;
}
.at-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.at-menu-item:hover,
.at-menu-item.active { background: #f5f1ea; }
.at-menu-item b { font-size: 13px; color: var(--primary); }
.at-menu-item span { font-size: 11px; color: var(--text-muted); }

.shot-meta {
  margin: 0;
  padding: 4px 8px 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

/* 设置冲突红色提示 */
.conflict-box {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid #e07a6a;
  border-radius: 8px;
  background: #fff5f3;
}
.conflict-title {
  font-size: 12px;
  font-weight: 700;
  color: #c23b2a;
  margin-bottom: 6px;
}
.conflict-box ul {
  margin: 0;
  padding-left: 18px;
}
.conflict-box li {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.conflict-box li.conflict-error { color: #b3261e; font-weight: 600; }
.conflict-box li.conflict-warn { color: #a14a12; }
.match-light-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f5f1ea;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--on-variant);
  cursor: pointer;
}
.match-light-row input { margin-top: 2px; }
.match-light-row b { color: var(--primary); }

/* 换脸槽位：一眼分清目标 / 参考 */
.slots-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.slots-swap .upload-slot {
  flex: 1 1 140px;
  min-height: 160px;
  position: relative;
}
.slot-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-muted);
  color: var(--primary);
}
.slot-badge.face { color: var(--primary); border-color: var(--primary); }
.slot-cap {
  display: block;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  color: var(--on-variant);
  background: rgba(253,252,248,.9);
}
.slot-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  padding: 0 2px;
}
.upload-slot.slot-body { border-color: #6b8f71; }
.upload-slot.slot-face { border-color: var(--primary); }

/* 结果页：回显本次精修说明 */
.edit-brief-box {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: #fffaf6;
}
.edit-brief-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  align-items: baseline; margin-bottom: 8px;
}
.edit-brief-head b { font-size: 13px; color: var(--primary); }
.edit-brief-head span { font-size: 11px; color: var(--text-muted); }
.edit-brief-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.edit-brief-pre {
  margin: 0;
  padding: 10px;
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11.5px;
  line-height: 1.45;
  background: #f5f1ea;
  border-radius: 6px;
  color: #2c2a27;
}
.edit-brief-tip {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 部位/皮肤状态清单（主路径） */
.rl-board { max-width: 100%; }
.rl-head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-taupe, #f5f1ea);
  border-radius: 10px;
  border: 1px solid var(--border-muted);
}
.rl-photo img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--border-muted);
}
.rl-photo span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}
.rl-intro b { font-size: 14px; color: var(--primary); }
.rl-intro p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--on-variant);
  line-height: 1.45;
}
.rl-count { font-size: 12px !important; }
.rl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rl-scroll {
  max-height: min(52vh, 480px);
  overflow: auto;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: #fff;
}
.rl-group { padding: 8px 10px 4px; }
.rl-group-title {
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.rl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rl-table th {
  text-align: left;
  font-weight: 600;
  color: var(--on-variant);
  padding: 6px 6px;
  border-bottom: 1px solid var(--border-muted);
  position: sticky;
  top: 0;
  background: #faf8f4;
  z-index: 1;
}
.rl-table td {
  padding: 6px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  vertical-align: middle;
}
.rl-row.is-on { background: rgba(242, 109, 33, 0.04); }
.rl-name b { font-weight: 600; white-space: nowrap; }
.rl-check label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  color: var(--on-variant);
}
.rl-input {
  width: 100%;
  min-width: 72px;
  padding: 6px 8px;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  background: var(--surface-taupe, #f5f1ea);
  font-size: 12px;
}
.rl-input:disabled { opacity: 0.45; }
.rl-level select {
  padding: 5px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-muted);
  background: #fff;
  font-size: 12px;
}
@media (max-width: 900px) {
  .rl-head { grid-template-columns: 1fr; }
  .rl-photo img { width: 96px; height: 120px; }
}
.mask-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.mask-lab { font-size: 12px; font-weight: 600; color: var(--primary); margin-right: 4px; }
.mask-brush { font-size: 11px; color: var(--on-variant); display: inline-flex; align-items: center; gap: 6px; }
.mask-brush input { width: 90px; }
.mask-viewport {
  max-width: 100%;
  max-height: min(58vh, 520px);
  overflow: auto;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: #e8e2d6;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.wire-reg-lab { margin-left: 6px; }
.mask-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.mask-stage img {
  display: block;
  max-width: 400px;
  height: auto;
  user-select: none;
  pointer-events: none;
}
.mask-stage canvas {
  cursor: crosshair;
  touch-action: none;
}
.mask-hint {
  margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.45;
  max-width: 560px;
}
.board-modes {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.board-modes .chip.active,
.mask-toolbar .chip.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.is-hidden-layer { display: none !important; }
.is-hidden-photo {
  position: absolute !important;
  left: 0; top: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important;
  pointer-events: none !important;
  z-index: 0;
}
/* 底图 canvas（裁切后的原图或纸色） */
#wireCanvas,
#wireCanvas.wire-base-canvas {
  display: block;
  position: relative;
  z-index: 1;
  background: #f4f0e8;
  pointer-events: none;
}
/* 线条层 */
#simCanvas,
#simCanvas.wire-line-canvas {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: crosshair;
  background: transparent !important;
}
#maskCanvas {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  opacity: 0.55;
}
#maskCanvas {
  z-index: 2;
}
.mask-stage { position: relative; display: inline-block; }
.compare-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.compare-cell {
  background: var(--surface-taupe); border-radius: 8px; overflow: hidden;
}
.compare-cell span {
  display: block; font-size: 11px; font-weight: 600; padding: 6px 8px;
  color: var(--on-variant); background: rgba(255,255,255,.7);
}
.compare-cell img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.shot-wide { width: 100% !important; max-width: 100%; }
@media (max-width: 600px) {
  .compare-row { grid-template-columns: 1fr; }
}

/* —— 精修版本条 —— */
.ver-strip { margin: 10px 0 12px; }
.ver-lab { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; }
.ver-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ver-thumb {
  width: 56px; border: 1px solid var(--border-muted); border-radius: 8px;
  padding: 0; background: #fff; cursor: pointer; overflow: hidden;
}
.ver-thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.ver-thumb span {
  display: block; text-align: center; font-size: 10px; font-weight: 600;
  padding: 2px 0; color: var(--on-variant);
}
.ver-thumb.is-latest { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-tint); }
.ver-thumb:hover { border-color: var(--primary); }
.fw-right-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* —— 形态示意 · FaceWorkspace（本地贴图，无旋转）—— */
.fw-board .fw-host { padding: 8px 0 4px; }
.fw-root { display: flex; flex-direction: column; gap: 10px; }
.fw-status {
  font-size: 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-taupe); color: var(--on-variant); line-height: 1.4;
}
.fw-status.ok { background: #e8f5ec; color: #2d6a45; }
.fw-status.err { background: #fdecea; color: var(--primary); }
.fw-qa {
  font-size: 12px; padding: 8px 10px; border-radius: 8px; line-height: 1.45;
  border: 1px solid var(--border-muted);
}
.fw-qa.ok { background: #e8f5ec; color: #2d6a45; border-color: #c6e6d0; }
.fw-qa.warn { background: #fff8e8; color: #8a5a12; border-color: #f0d9a0; }
.fw-qa.err { background: #fdecea; color: var(--primary); border-color: #f0c4be; }
.fw-qa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.fw-qa-hint { font-size: 11px; opacity: 0.9; }
.fw-head3d {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px; border-radius: 10px; background: var(--surface-taupe, #f3efe9);
  border: 1px solid var(--border-muted);
}
.fw-head3d-hint { font-size: 11px; color: var(--text-muted); }
.fw-head3d-prog { width: 100%; }
.fw-head3d-bar {
  height: 6px; border-radius: 4px; background: #e5ddd4; overflow: hidden;
}
.fw-head3d-bar > i {
  display: block; height: 100%; width: 0; background: var(--primary, var(--primary));
  transition: width 0.35s ease;
}
.fw-head3d-stage { font-size: 11px; color: var(--on-variant); margin-top: 4px; }
.fw-head3d-done { font-size: 12px; color: #2d6a45; }
.fw-head3d-done a { color: var(--primary); }
.fw-head-studio { width: 100%; margin-top: 8px; }
.hs-root { display: flex; flex-direction: column; gap: 10px; }
.hs-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hs-tier { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-muted); background: #fff; }
.hs-status {
  font-size: 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-taupe); color: var(--on-variant);
}
.hs-status.ok { background: #e8f5ec; color: #2d6a45; }
.hs-status.err { background: #fdecea; color: var(--primary); }
.hs-stage {
  display: flex; justify-content: center; background: #f3efe9;
  border: 1px solid var(--border-muted); border-radius: 10px; padding: 8px;
}
.hs-stage canvas { max-width: 100%; border-radius: 8px; display: block; }
.hs-sliders { display: flex; flex-direction: column; gap: 8px; }
.hs-slider-lab { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.hs-slider-top {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--on-variant); margin-bottom: 4px;
}
.hs-slider-row input[type="range"] { width: 100%; accent-color: var(--primary); }
.hs-views {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.hs-views figure { margin: 0; text-align: center; }
.hs-views img { width: 100%; border-radius: 8px; border: 1px solid var(--border-muted); }
.hs-views figcaption { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.hs-hint { font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.45; }
.fw-parts, .fw-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fw-preset-lab { width: 100%; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.fw-canvas-wrap {
  display: flex; justify-content: center; background: #f3efe9;
  border: 1px solid var(--border-muted); border-radius: 10px; padding: 10px;
  max-height: 520px; overflow: auto;
}
.fw-canvas-wrap canvas { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.fw-sliders { display: flex; flex-direction: column; gap: 8px; }
.fw-slider-row { }
.fw-slider-top {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--on-variant); margin-bottom: 4px;
}
.fw-slider-row input[type="range"] { width: 100%; accent-color: var(--primary); }
.fw-hint {
  font-size: 11px; color: var(--text-muted); line-height: 1.45; margin: 0;
}

.points-card {
  max-width: 560px; padding: 28px; border: 1px solid var(--border-muted);
  border-radius: 12px; background: var(--surface-white);
}
.points-card .big {
  font-family: var(--font-serif); font-size: 40px; font-weight: 600; color: var(--primary);
}
.points-card .lab { font-size: 12px; color: var(--on-variant); margin-bottom: 12px; }
.points-card p { font-size: 13px; color: var(--on-variant); line-height: 1.5; margin: 0 0 16px; }

/* 充值套餐（Waffo 网页结账） */
.pay-sec-title {
  margin: 20px 0 4px; padding-top: 18px; border-top: 1px solid var(--border-muted);
  font-size: 14px; font-weight: 600;
}
.pay-plans {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.pay-plan {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-muted); border-radius: 10px;
  background: var(--surface-white);
  transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
.pay-plan:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-tint); }
.pay-plan:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pay-plan.is-popular { border-color: var(--primary); }
.pay-plan:disabled { cursor: not-allowed; opacity: 0.55; }
.pay-plan.is-loading { cursor: progress; }
.pay-plan-tag {
  position: absolute; top: -1px; right: -1px; padding: 2px 8px;
  border-radius: 0 10px 0 8px; background: var(--primary);
  font-size: 11px; font-weight: 500; color: #fff;
}
.pay-plan-name { font-size: 13px; font-weight: 500; }
.pay-plan-price { font-size: 20px; font-weight: 600; color: var(--primary); }
.pay-plan-points { font-size: 12px; color: var(--on-variant); }
.pay-plan-points em { margin-left: 4px; font-style: normal; color: var(--primary); }
.pay-plan-off { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .studio { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
  .studio-related { display: none; }
  /* 窄屏：放大时右栏改浮层，避免挤没中间台 */
  .studio.is-related-expanded {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }
  .studio.is-related-expanded .studio-related {
    display: block;
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    width: min(92vw, 720px);
    max-height: none;
    z-index: 40;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  }
}

/* 首页：案例过程 / 对比（单图 + 阶段条，减请求、人脸可对齐） */
.home-feature { margin: 8px 0 32px; }
.home-feature h2 { margin: 0 0 6px; font-size: 22px; }
.home-motion .wall-hot { margin-bottom: 4px; }
.home-case-parts { margin: 0 0 14px; }
.recent-toggle-row { margin: 8px 0 14px; justify-content: flex-start; }
.recent-open-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: var(--surface-white);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 600;
}
.recent-open-btn:hover,
.recent-open-btn.is-open {
  border-color: var(--primary);
  color: var(--primary);
}
/* 跟本页「生图与动作」同一套墙：固定列宽，禁止 1fr 拉满整行 */
.wall-case,
.wall-recent {
  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
  justify-content: start;
}
.home-case-head { margin-top: 8px; }
.home-case-head h2 { font-size: 16px; font-weight: 600; }
.page-stage > .wall-parts { margin: 0 0 14px; }
.feat-row .wall-empty { grid-column: 1 / -1; }
.feat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
  gap: 22px 16px;
  justify-content: start;
}
.feat-card {
  border: 0; border-radius: 0; overflow: visible;
  background: transparent; cursor: pointer; text-align: left; padding: 0;
  width: 100%; max-width: 180px; font: inherit; color: inherit;
  display: flex; flex-direction: column;
}
.feat-card:hover { border-color: transparent; box-shadow: none; }
.feat-card .feat-hero,
.feat-card .feat-compare-stitch {
  border-radius: 12px;
  border: 1px solid var(--border-muted);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.feat-card:hover .feat-hero,
.feat-card:hover .feat-compare-stitch {
  box-shadow: var(--shadow-card);
}
.feat-card .feat-body {
  flex: 0 0 auto;
  padding: 10px 2px 0;
}
.feat-card .feat-body strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.feat-card .feat-body em {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--on-variant);
  margin-bottom: 6px;
}
.feat-card .feat-body .pts {
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 500;
}
/* 单主图 + 底部阶段标签：绝对铺满，避免横图/竖图撑不开 */
.feat-hero {
  position: relative; aspect-ratio: 3/4; width: 100%; max-width: 100%; overflow: hidden; background: #1a1614;
  flex: 0 0 auto;
}
.feat-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* 默认偏上，避免 9:16 竖图在缩略框里裁到后脑/肩 */
  object-position: 50% 14%;
}
.feat-stage-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: nowrap; gap: 3px;
  padding: 8px 8px 9px;
  background: rgba(33, 31, 28, 0.52);
  overflow-x: auto;
}
.feat-stage-bar span {
  flex: 0 0 auto;
  background: rgba(255,255,255,.92); color: #4a3228;
  font-size: 10.5px; font-weight: 500; padding: 2px 6px; border-radius: 999px;
  white-space: nowrap;
}
.feat-stages {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  background: #2a2420;
}
.feat-stages span {
  background: #efe6dc;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 9px; font-weight: 700; color: #5a4038; padding: 4px 2px;
}
.feat-stages span:nth-child(2) { background: #ead3c6; }
.feat-stages span:nth-child(3) { background: #e4c8b8; }
.feat-stages span:nth-child(4) { background: #e8dfd4; }
.feat-stages span:nth-child(5) { background: #ddd6d0; }
/* 旧轮播样式保留（若别处仍引用） */
.feat-carousel {
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: #1a1614;
}
.feat-carousel-track {
  display: flex; height: 100%; width: max-content;
  animation: feat-slide 12s linear infinite;
}
.feat-slide {
  position: relative; flex: 0 0 auto; height: 100%; width: 168px;
}
.feat-card .feat-slide { width: 100%; min-width: 100%; }
.feat-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block;
}
.feat-slide span {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
}
@keyframes feat-slide {
  0%, 12% { transform: translateX(0); }
  16%, 28% { transform: translateX(-100%); }
  32%, 44% { transform: translateX(-200%); }
  48%, 60% { transform: translateX(-300%); }
  64%, 76% { transform: translateX(-400%); }
  80%, 100% { transform: translateX(-500%); }
}
.feat-card:hover .feat-carousel-track { animation-play-state: paused; }
.feat-compare i {
  display: flex; align-items: flex-end; justify-content: center;
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff; padding: 6px;
  background-size: cover; background-position: 50% 14%; position: relative;
}
.feat-compare i:first-child { background: #b79a86; }
.feat-compare i:last-child { background: #d8b8a4; }
.feat-compare-img i { background-size: cover; background-position: 50% 14%; }
.feat-compare-img i em {
  font-style: normal; background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
}
/* 前后对比：与过程卡同 4:5，半幅绝对铺满，避免横图留空 */
.feat-compare-stitch {
  display: flex; gap: 2px; aspect-ratio: 4/5; width: 100%;
  background: #1a1614; overflow: hidden; flex: 0 0 auto;
}
.feat-compare-stitch .feat-half {
  flex: 1 1 50%; position: relative; min-width: 0; height: 100%;
  overflow: hidden; background: #2a2420;
}
.feat-compare-stitch .feat-half img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block;
}
.feat-compare-stitch .feat-half em {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  font-style: normal; background: rgba(0,0,0,.55); color: #fff;
  padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700;
}
/* 无图时的占位对比也统一比例 */
.feat-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  aspect-ratio: 4/5; width: 100%; background: #2a2420; flex: 0 0 auto;
}
.traj-stages { flex-wrap: wrap; }
.traj-stages .seg { font-size: 11px; padding: 6px 8px; }
.traj-variants .seg.is-dim,
.traj-tpl-card.is-dim { opacity: .48; cursor: not-allowed; }
.traj-pkgs .seg { font-size: 12px; }
/* 轨迹右栏 · 变体模板样例 */
.traj-related .traj-tpl-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.traj-tpl-card {
  display: block; width: 100%; text-align: left; border: 1px solid var(--border-muted);
  border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; padding: 0;
  color: inherit; font: inherit;
}
.traj-tpl-card.is-on { box-shadow: 0 0 0 2px var(--primary); border-color: var(--primary); }
.traj-tpl-pic {
  height: 88px; background: #e8dcd2; display: flex; align-items: flex-end; padding: 8px;
}
.traj-tpl-pic.traj-tpl-diagram {
  height: auto; min-height: 72px; padding: 0; background: #F6F4F0; position: relative;
  display: block;
}
.traj-tpl-pic.traj-tpl-diagram .traj-var-diagram {
  display: block; width: 100%; height: auto;
}
.traj-tpl-tag {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 10px; background: rgba(255,255,255,.94); padding: 2px 7px; border-radius: 6px;
  color: var(--on-variant); border: 1px solid var(--border-muted);
}
.traj-tpl-tag.on {
  color: var(--primary); border-color: rgba(242,109,33,.4); background: #FDEEE1; font-weight: 600;
}
.traj-tpl-body { padding: 8px 10px 10px; }
.traj-tpl-body strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.traj-tpl-body em { font-style: normal; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* 中间 · 形态简笔画（与右侧术式分类分开） */
.traj-morph-gallery {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border-muted); background: #fff;
}
.traj-morph-gallery-title {
  font-size: 12px; font-weight: 600; margin-bottom: 10px; color: var(--text);
}
.traj-morph-gallery-title span {
  font-weight: 400; font-size: 11px; color: var(--text-muted);
}
.traj-morph-row { margin-bottom: 10px; }
.traj-morph-row:last-child { margin-bottom: 0; }
.traj-morph-row-lab {
  font-size: 11px; color: var(--text-muted); margin-bottom: 6px;
}
.traj-morph-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.traj-morph-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--border-muted); border-radius: 10px; background: #FBFAF8;
  padding: 6px 4px 8px; cursor: pointer; font: inherit; color: inherit;
}
.traj-morph-opt.is-on {
  border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: #FDEEE1;
}
.traj-morph-opt span {
  font-size: 11px; font-weight: 500; color: var(--on-variant);
}
.traj-morph-opt.is-on span { color: var(--primary); font-weight: 600; }
.traj-morph-mini { width: 100%; height: auto; display: block; border-radius: 6px; }

/* 案例过程 · 中间预览（锚点 + 阶段计划，非 2D 线稿） */
.traj-center {
  padding: 8px 4px 16px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.traj-center-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.traj-center-head strong { font-size: 14px; font-weight: 600; }
.traj-center-head span { font-size: 12px; color: var(--text-muted); }
.traj-center-explain {
  margin: 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--on-variant);
  background: #f3efe6; border: 1px solid var(--border-muted); border-radius: 10px; padding: 10px 12px;
}
.traj-center-body {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 16px; align-items: start;
}
.traj-anchor-frame {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-muted); background: #ebe6dc;
}
.traj-anchor-frame img {
  display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 18%;
}
.traj-anchor-frame em {
  display: block; font-style: normal; font-size: 11px; padding: 8px 10px;
  color: var(--on-variant); background: #fff;
}
.traj-anchor-empty {
  border: 1px dashed var(--border-muted); border-radius: 12px; padding: 28px 16px;
  text-align: center; background: #f7f4ee; color: var(--on-variant);
}
.traj-anchor-empty span { display: block; font-size: 22px; margin-bottom: 8px; opacity: .5; }
.traj-anchor-empty b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.traj-anchor-empty p { margin: 0; font-size: 12px; }
.traj-plan-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.traj-plan-meta div {
  background: #fff; border: 1px solid var(--border-muted); border-radius: 8px; padding: 8px 10px;
}
.traj-plan-meta em {
  display: block; font-style: normal; font-size: 10px; color: var(--text-muted); margin-bottom: 2px;
}
.traj-plan-meta b { font-size: 12px; font-weight: 600; }
.traj-plan-lab { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.traj-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.traj-plan-chip {
  font-size: 11px; padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--border-muted); background: #fff; color: var(--on-variant);
}
.traj-plan-chip.is-current {
  border-color: var(--primary); color: var(--primary-hover); background: var(--primary-tint); font-weight: 600;
}
.traj-steps {
  margin: 0 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--on-variant);
}
.traj-center-tip {
  margin: 0; font-size: 11px; line-height: 1.5; color: var(--text-muted);
}
@media (max-width: 900px) {
  .traj-center-body { grid-template-columns: 1fr; }
  .traj-plan-meta { grid-template-columns: 1fr; }
}
.feat-body { padding: 10px 2px 0; }
.feat-body strong { display: block; font-size: 15px; margin-bottom: 3px; line-height: 1.3; }
.feat-body em { font-style: normal; font-size: 12px; color: var(--on-variant); line-height: 1.4; display: block;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-body .pts { color: var(--primary); font-weight: 600; font-size: 11px; margin-top: 6px; }
.tpl-body strong { font-size: 15px; }
.tpl-body em { font-size: 12px; min-height: 0; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: 0; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; padding: 10px 12px; z-index: 20;
  }
  .brand { padding: 0 8px 0 0; }
  .nav { flex-direction: row; flex: 1; overflow-x: auto; }
  .nav button { white-space: nowrap; padding: 8px 10px; }
  .nav button span.label { display: none; }
  .studio { grid-template-columns: 1fr; }
  .studio-form { border-right: 0; border-bottom: 1px solid var(--border-muted); max-height: none; }
  .studio-result { max-height: none; }
  .shot { width: calc(50% - 8px); }
  .intent-row, .intent-row-3 { grid-template-columns: 1fr; }
  .composer-field { align-items: center; }
  .intent-bar label.intent-upload { min-height: 64px; margin: 0; flex-direction: row; gap: 8px; }
  .btn-gen, .composer-go { min-height: 44px; margin-top: 0; }
  .free-bar { grid-template-columns: 1fr; }
  .feat-row,
  .wall-case,
  .wall-recent { grid-template-columns: repeat(auto-fill, minmax(160px, 180px)); }
  .nav button.active::before { display: none; }
}

/* 参考仿剪 / 视频时间线台 WO-VID-PLAN-UI */
.clip-page { max-width: 920px; }
.clip-studio { max-width: 1200px; margin: 0 auto; padding: 0 8px 32px; }
.clip-studio-grid {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr minmax(240px, 300px);
  gap: 12px;
  align-items: start;
}
@media (max-width: 960px) {
  .clip-studio-grid { grid-template-columns: 1fr; }
}
.clip-col { min-width: 0; }
.clip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .clip-grid { grid-template-columns: 1fr; } }
.clip-card { background: var(--surface, #fff); border: 1px solid var(--border-muted, #e8e4dc); border-radius: 14px; padding: 14px 16px; }
.clip-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.clip-lab { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--text-muted, #6b6560); }
.clip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.clip-meta { margin: 10px 0; padding: 10px 12px; background: var(--bg-muted, #f6f4f0); border-radius: 10px; font-size: 12px; line-height: 1.5; }
.clip-err { color: #c0392b; font-size: 13px; margin: 8px 0; }
.form-input.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.4; }
.clip-result { margin-top: 14px; }
.clip-empty-hint {
  padding: 28px 16px; text-align: center; color: var(--text-muted, #8a7a74);
  font-size: 13px; line-height: 1.55; background: var(--surface-taupe, #f6f3f2);
  border-radius: 10px; border: 1px dashed var(--border-muted);
}
.clip-seg-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; margin-top: 8px; }
.clip-seg-item {
  display: flex; gap: 8px; align-items: flex-start; text-align: left;
  border: 1px solid var(--border-muted); background: #fff; border-radius: 10px;
  padding: 8px 10px; cursor: pointer; font: inherit; color: inherit;
}
.clip-seg-item:hover { border-color: var(--primary); }
.clip-seg-item.active { border-color: var(--primary); background: var(--primary-tint, #FDEEE1); box-shadow: 0 0 0 1px var(--primary); }
.clip-seg-idx {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-taupe); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.clip-seg-item.active .clip-seg-idx { background: var(--primary); color: #fff; }
.clip-seg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clip-seg-body b { font-size: 12px; font-weight: 600; }
.clip-seg-body em { font-size: 11px; font-style: normal; color: var(--text-muted); }
.clip-seg-body i { font-size: 11px; font-style: normal; color: var(--on-variant, #56423d); opacity: 0.9; }
.clip-timeline {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 12px;
  min-height: 72px; align-items: stretch;
}
.clip-tl-cell {
  flex: 0 0 auto; border: 1px solid var(--border-muted); background: var(--surface-taupe, #f6f3f2);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
.clip-tl-cell strong { font-size: 13px; color: var(--primary); }
.clip-tl-cell span { font-size: 11px; font-weight: 600; }
.clip-tl-cell em { font-size: 10px; font-style: normal; color: var(--text-muted); }
.clip-tl-cell.active { border-color: var(--primary); background: var(--primary-tint, #FDEEE1); }
.clip-bottom-bar {
  margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--border-muted);
  border-radius: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.clip-edit-head { font-size: 13px; margin-bottom: 6px; }
.clip-sb-preview { margin-top: 10px; }
.clip-sb-preview img { width: 100%; border-radius: 10px; border: 1px solid var(--border-muted); display: block; margin-bottom: 6px; }
.iq-clip { border-color: var(--primary) !important; }