/**
 * 闈欐€佸厹搴曟牱寮?鈥?涓嶇粡杩?Webpack 缂栬瘧锛岄噸鍚悗绔嬪嵆鍙敤銆? * 鍗充娇 /_next/static/css/app/layout.css 鏆傛椂 404锛岄〉闈篃涓嶄細瑁稿銆? */

/* 品牌字标「野猪ins」专用字体（应用标题）：
 * 依据品牌片字标比对，最接近思源黑体 / Noto Sans SC 的 Black(900) 字重；
 * 子集只含「野猪ins」5 个字形（约 2.7KB），用 unicode-range 限定，绝不改动站点其它标题。 */
@font-face {
  font-family: "Yezhu Brand";
  src: url("/fonts/yezhu-brand-wordmark.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
  font-style: normal;
  unicode-range: U+0069, U+006E, U+0073, U+732A, U+91CE;
}

@font-face {
  font-family: "Yezhu Heading";
  src:
    local("汉仪力量黑简"),
    local("汉仪力量黑简 Regular"),
    local("HYLiLiangHeiJ"),
    local("HYLiLiangHeiJW"),
    url("/fonts/hanyi-liliang-heijian.woff2") format("woff2");
  font-display: swap;
  /* 汉仪力量黑简通常为 Regular 单字重；勿声明 100–900，否则与 font-weight:800 组合时浏览器会整段回退系统字体 */
  font-weight: 400;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

:root {
  --brand-accent: #ff2dbe;
  --brand-accent-hover: #ff2dbe;
  --brand-accent-rgb: 255, 45, 190;
  --brand-accent-muted-bg: #1a0d16;
  --brand-accent-muted-bg-hover: #261019;
  --brand-accent-muted-border: #5a1848;
  --button-border: #ff6ec7;
  /* 历史变量（部分文档/旧样式引用）；主 CTA 已改为彩虹描边 + 实心底 */
  --generate-cta-gradient: linear-gradient(
    112deg,
    #ff2dbe 0%,
    #ff5bb8 40%,
    #ff8a5c 74%,
    #ffc247 100%
  );
  --generate-cta-gradient-hover: linear-gradient(
    112deg,
    #ff44c6 0%,
    #ff6ec7 40%,
    #ff9a68 76%,
    #ffd05e 100%
  );
  --generate-cta-ink: #28010f;
  --generate-cta-ring: rgba(255, 255, 255, 0.46);
  --generate-cta-glow: rgba(255, 45, 190, 0.62);
  --generate-cta-glow-warm: rgba(255, 122, 92, 0.45);
  --generate-cta-radius: 14px;
  /* 浅色 gentle-cheetah 生成钮文案（纯黑，禁用态也不改灰字） */
  --generate-btn-ink: #101114;
  --rainbow-ring-bg: #212121;
  --rainbow-ring-bg-hover: #2a2a2a;
  /* 宸ヤ綔瀹ゅ崱鐗囩綉鏍奸粦搴曢棿璺濓紙鍗＄墖灏哄涓嶅彉锛屼粎鏀剁揣缂濋殭锛?*/
  --studio-card-grid-gap: 0.375rem;
  --font-noto-sans-sc: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui,
    sans-serif;
  /* 应用标题 / 品牌字标「野猪ins」专用字体栈（见 docs/brand-wordmark-font.md） */
  --font-brand-wordmark: "Yezhu Brand", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", system-ui, sans-serif;
  --font-heading-family: "Yezhu Heading", "汉仪力量黑简", var(--font-noto-sans-sc);
}

/*
 * 深色主题：生成按钮文字改为白色。
 * 白字需要更深的底色才够醒目，因此把渐变收成「热粉 → 品红 → 紫」，
 * 外发光保持亮粉，按钮在暗背景上依旧是最亮的 CTA。
 */
html[data-theme="dark"] {
  --generate-cta-gradient: linear-gradient(
    112deg,
    #ff2dbe 0%,
    #f01f9d 34%,
    #c4148f 68%,
    #8b1ab8 100%
  );
  --generate-cta-gradient-hover: linear-gradient(
    112deg,
    #ff44c6 0%,
    #fb2fae 34%,
    #d81ba0 68%,
    #9d24cc 100%
  );
  --generate-cta-ink: #ffffff;
  --generate-cta-ring: rgba(255, 255, 255, 0.58);
  --generate-cta-glow: rgba(255, 45, 190, 0.72);
  --generate-cta-glow-warm: rgba(180, 50, 255, 0.5);
}

html:has(body.app-body) {
  font-size: 106.25%;
}

body.app-body {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: var(--font-inter, system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* Tailwind 杩囧皬瀛楀彿绫伙紙涓?globals.css 涓€鑷达紝鍏滃簳鏈蛋 Webpack 鐨勯〉闈級 */
body.app-body .text-xs {
  font-size: 0.8125rem !important;
  line-height: 1.25rem !important;
}

body.app-body .text-sm {
  font-size: 0.9375rem !important;
  line-height: 1.375rem !important;
}

body.app-body .text-\[10px\] {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

body.app-body .text-\[11px\] {
  font-size: 0.8125rem !important;
  line-height: 1.25rem !important;
}

body.app-body .text-\[11\.5px\] {
  font-size: 0.8125rem !important;
  line-height: 1.25rem !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

.no-underline {
  text-decoration: none;
}

/* 鈹€鈹€ Auth锛堟祬鑹茬櫥褰?娉ㄥ唽锛屽鏍?yezhu-ai-ui锛?鈹€鈹€ */
.auth-shell {
  position: relative;
  display: grid;
  min-height: 100%;
  min-height: 100dvh;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  color: var(--app-fg-soft);
  font-family: var(--font-noto-sans-sc), "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 227, 255, 0.34), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(124, 99, 255, 0.14), transparent 30%),
    linear-gradient(rgba(120, 135, 141, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 135, 141, 0.055) 1px, transparent 1px),
    var(--app-bg);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px, 100% 100%;
}

.auth-shell button,
.auth-shell input {
  font: inherit;
}

.auth-shell input[type="email"],
.auth-shell input[type="password"],
.auth-shell input[type="text"],
.auth-shell input[type="tel"] {
  color-scheme: var(--app-input-scheme);
}

.auth-card {
  width: min(420px, 100%);
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  box-shadow: 0 28px 80px var(--app-shadow), inset 0 1px 0 var(--app-border-subtle);
  backdrop-filter: blur(18px);
  padding: 28px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: inherit;
}

.landing-nav-wordmark,
.studio-nav-title,
.auth-brand-name,
.auth-modal-brand-name,
.legal-doc-brand-name {
  /* 应用标题「野猪ins」按品牌片字标还原：Black(900) 字重 + 品牌字标子集字体 */
  font-family: var(--font-brand-wordmark);
  font-weight: 900;
}

.auth-brand-name {
  font-size: 19px;
  color: var(--app-fg);
}

.auth-logo {
  height: 50px;
  width: 50px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(21, 168, 208, 0.16);
}

.auth-title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--app-fg);
}

.auth-title-muted {
  font-weight: 500;
  font-size: 14px;
  color: var(--app-fg-muted);
}

.auth-subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--app-fg-muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 14px;
}

.auth-sms-code-row {
  align-items: flex-end;
  flex-wrap: wrap;
}

.auth-sms-code-row .auth-field {
  flex: 1 1 160px;
  margin-bottom: 0;
}

.auth-sms-send-btn {
  flex: 0 0 auto;
  margin-bottom: 14px;
  white-space: nowrap;
}

.auth-sms-legal {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--app-fg-muted);
}

.auth-sms-legal .auth-link {
  margin: 0 2px;
}

.auth-alt-login-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-alt-login-btn {
  width: 100%;
}

.auth-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-field label {
  color: var(--app-fg-muted);
  font-size: 13px;
  font-weight: 900;
}

.auth-field-input-wrap {
  position: relative;
}

.auth-field-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--app-border-input);
  border-radius: 12px;
  background: var(--app-input-bg);
  padding: 0 12px;
  font-size: 16px;
  color: var(--app-fg-soft);
  outline: none;
}

.auth-field-input::placeholder {
  color: var(--app-placeholder);
}

.auth-field-input-password {
  padding-right: 2.5rem;
}

.auth-field-input:focus {
  border-color: var(--app-focus-ring);
  box-shadow: 0 0 0 4px rgba(255, 45, 190, 0.18);
}

.auth-password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: var(--app-link-fg);
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--app-fg-muted);
}

.auth-checkbox-label-top {
  align-items: flex-start;
}

.auth-checkbox-label-top .auth-checkbox {
  margin-top: 0.125rem;
}

.auth-checkbox {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-input-bg);
  accent-color: var(--app-accent);
}

.auth-terms-link {
  color: var(--app-link-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--app-link-fg);
  text-decoration: none;
  cursor: pointer;
}

.auth-link:hover {
  color: var(--app-link-hover-fg);
}

.auth-link-accent {
  font-weight: 700;
  color: var(--app-link-fg);
  text-decoration: none;
}

.auth-link-accent:hover {
  color: var(--app-link-hover-fg);
}

.auth-alert {
  border-radius: 12px;
  border: 1px solid;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.auth-alert-error {
  border-color: var(--app-error-border);
  background: var(--app-error-bg);
  color: var(--app-error-fg);
}

.auth-alert-success {
  border-color: var(--app-success-border);
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.auth-shell .auth-btn-primary,
.auth-modal-overlay .auth-btn-primary {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(21, 168, 208, 0.36);
  border-radius: 12px;
  background: linear-gradient(135deg, #7ee3ff, #55cff0);
  padding: 0 14px;
  font-size: 16px;
  font-weight: 900;
  color: #123340;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(21, 168, 208, 0.24);
}

.auth-btn-primary:hover {
  filter: brightness(1.03);
}

.auth-btn-primary:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.generate-credit-badge {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.12);
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 0, 0, 0.72);
  white-space: nowrap;
  flex-shrink: 0;
}

.generate-credit-badge-on-dark {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

.generate-credit-badge-icon {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.generate-credit-badge-inline {
  margin-left: 0;
}

.ms-generate-credits .generate-credit-badge-icon {
  width: 11px;
  height: 11px;
}

/*
 * 生成 / 充值 — Uiverse Wendell47 gentle-cheetah-21（类名加前缀）
 * https://uiverse.io/Wendell47/gentle-cheetah-21
 */
.uiverse-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  /*
   * 圆角半径抽成变量：光晕容器要用「同一形状」做 clip-path 二次裁剪。
   * 改这里的圆角形态时，光晕会跟着变（.ms-generate-square 已覆盖为 0.75rem）。
   */
  --uiverse-generate-radius: 10rem;
  border-radius: var(--uiverse-generate-radius);
  width: auto;
  min-width: 8em;
  min-height: 3em;
  height: auto;
  z-index: 0;
  color: var(--generate-btn-ink);
  cursor: pointer;
  overflow: hidden;
  border: 0;
  outline: none;
  box-sizing: border-box;
  padding: 0.9375rem 1.875rem;
  margin: 0;
  background: #e8e8e8;
  box-shadow: 0 0 7px -5px rgba(0, 0, 0, 0.5);
  transition:
    background 0.02s ease,
    color 0.02s ease,
    transform 0.02s ease,
    scale 0.02s ease;
  -webkit-appearance: none;
  appearance: none;
}

.uiverse-generate-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.15;
  box-sizing: border-box;
  padding: 0;
  width: auto;
  height: auto;
}

.uiverse-generate-content .generate-credit-badge {
  margin-left: 0;
}

.uiverse-generate-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  /*
   * 光晕自身也裁成按钮的形状（胶囊）。
   * iOS Safari 对带 filter 的子层不会按父级 border-radius 裁剪（只裁到矩形外框），
   * 而光晕默认是方角矩形 → 胶囊按钮上会多出一块「矩形遮罩」，把按钮描边/圆角盖住。
   * 让光晕跟随按钮圆角后，无论裁剪是否生效都不会再露出方角。
   */
  border-radius: inherit;
  /*
   * WebKit 回归（bug 312584、319993；Safari 26.0–26.5 受影响，STP 249 已修）：
   * 父级 overflow: hidden + border-radius 的圆角裁剪对带 filter: blur() 的子层失效，
   * 只按矩形外框裁 → 胶囊两端露出「矩形尖角遮罩」。
   * 这里在「不参与旋转/缩放」的光晕容器上再用同形状的 clip-path 裁一次：
   * clip-path 在 filter 之后应用（规范顺序 filter → clip-path → mask），
   * 即使父级圆角裁剪失效，模糊光晕也不会漏到胶囊肩角。圆角用变量与按钮保持一致。
   */
  -webkit-clip-path: inset(0 round var(--uiverse-generate-radius));
  clip-path: inset(0 round var(--uiverse-generate-radius));
}

.uiverse-generate-hover > span {
  background: linear-gradient(
    90deg,
    rgba(222, 0, 75, 1) 0%,
    rgba(191, 70, 255, 1) 49%,
    rgba(0, 212, 255, 1) 100%
  );
  border-radius: 40rem;
  width: 10rem;
  height: 10rem;
  transition: width 0.4s ease, height 0.4s ease;
  filter: blur(20px);
  animation: uiverse-generate-glow-spin 3s linear infinite;
  opacity: 0.5;
}

.uiverse-generate-btn:hover:not(:disabled) {
  background: rgb(193, 228, 248);
  color: var(--generate-btn-ink);
}

.uiverse-generate-btn:hover:not(:disabled) .uiverse-generate-hover > span {
  width: 8rem;
  height: 8rem;
}

/*
 * 按下反馈必须用独立的 scale 属性，不能写成 transform: scale()：
 * 消费方会用 transform 做定位/居中（模板墙 .vp-mosaic-generate 靠 translateX(-50%) 定位；
 * 灯箱 .preset-lightbox-use 历史上也靠 translateX(-50%) 居中），而本条 :active 的优先级更高，
 * 会把那些 transform 整体覆盖掉 → 按下瞬间按钮位移、click 落到背后元素上点不动
 * （2026-10-27 场景迁移全屏播放弹窗「生成」按钮右移点不动即由此而来）。
 */
.uiverse-generate-btn:active:not(:disabled) {
  scale: 0.97;
}

.uiverse-generate-btn:focus-visible {
  outline: 2px solid var(--app-focus-ring, #fff);
  outline-offset: 2px;
}

.uiverse-generate-btn:disabled {
  cursor: not-allowed;
  background: #e4e4e4;
  box-shadow: none;
  color: var(--generate-btn-ink);
}

.uiverse-generate-btn:disabled .uiverse-generate-hover > span {
  animation: none;
  opacity: 0.12;
  filter: blur(12px);
}

.uiverse-generate-btn:disabled .generate-btn-label,
.uiverse-generate-btn:disabled .ms-generate-label,
.uiverse-generate-btn:disabled svg {
  color: var(--generate-btn-ink);
}

.uiverse-generate-btn .generate-credit-badge {
  background: rgba(0, 0, 0, 0.06);
  color: var(--generate-btn-ink);
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.uiverse-generate-btn:disabled .generate-credit-badge,
.uiverse-generate-btn:disabled .ms-generate-credits {
  color: var(--generate-btn-ink);
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.uiverse-generate-btn:hover:not(:disabled) .generate-btn-label,
.uiverse-generate-btn:hover:not(:disabled) .ms-generate-label,
.uiverse-generate-btn:hover:not(:disabled) svg {
  color: var(--generate-btn-ink);
}

.uiverse-generate-btn:hover:not(:disabled) .generate-credit-badge,
.uiverse-generate-btn:hover:not(:disabled) .ms-generate-credits {
  color: var(--generate-btn-ink);
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(0, 0, 0, 0.14);
}

@keyframes uiverse-generate-glow-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uiverse-generate-hover > span {
    animation: none;
  }
}

.uiverse-generate-btn--fluid {
  width: 100%;
  max-width: 100%;
}

/*
 * 横向拉长的生成 / 充值：光晕与底色铺满整颗按钮，避免两侧只剩灰边。
 * 适用侧栏 fluid、电商直出输入栏生成块、竖屏全宽生成条。
 */
.uiverse-generate-btn--fluid,
.ms-bar-actions .ms-generate.uiverse-generate-btn {
  background: linear-gradient(
      90deg,
      rgba(222, 0, 75, 0.14) 0%,
      rgba(191, 70, 255, 0.16) 50%,
      rgba(0, 212, 255, 0.14) 100%
    ),
    #e8e8e8;
}

.uiverse-generate-btn--fluid .uiverse-generate-hover,
.ms-bar-actions .ms-generate.uiverse-generate-btn .uiverse-generate-hover {
  align-items: stretch;
  justify-content: stretch;
}

.uiverse-generate-btn--fluid .uiverse-generate-hover > span,
.ms-bar-actions .ms-generate.uiverse-generate-btn .uiverse-generate-hover > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  filter: blur(18px);
  opacity: 0.55;
  animation: uiverse-generate-glow-spin 4s linear infinite;
}

.uiverse-generate-btn--fluid:hover:not(:disabled) .uiverse-generate-hover > span,
.ms-bar-actions
  .ms-generate.uiverse-generate-btn:hover:not(:disabled)
  .uiverse-generate-hover
  > span {
  width: 100%;
  height: 100%;
  filter: blur(14px);
  opacity: 0.75;
}

html[data-theme="dark"] .uiverse-generate-btn--fluid,
html[data-theme="dark"] .ms-bar-actions .ms-generate.uiverse-generate-btn {
  background: var(--generate-cta-gradient);
  color: var(--generate-cta-ink);
  box-shadow:
    0 0 0 1px var(--generate-cta-ring),
    0 8px 28px -6px var(--generate-cta-glow);
}

html[data-theme="dark"] .uiverse-generate-btn--fluid:hover:not(:disabled),
html[data-theme="dark"]
  .ms-bar-actions
  .ms-generate.uiverse-generate-btn:hover:not(:disabled) {
  background: var(--generate-cta-gradient-hover);
  color: var(--generate-cta-ink);
}

html[data-theme="dark"] .uiverse-generate-btn--fluid .generate-btn-label,
html[data-theme="dark"] .uiverse-generate-btn--fluid .ms-generate-label,
html[data-theme="dark"]
  .ms-bar-actions
  .ms-generate.uiverse-generate-btn
  .generate-btn-label,
html[data-theme="dark"]
  .ms-bar-actions
  .ms-generate.uiverse-generate-btn
  .ms-generate-label,
html[data-theme="dark"] .uiverse-generate-btn--fluid svg,
html[data-theme="dark"] .ms-bar-actions .ms-generate.uiverse-generate-btn svg {
  color: var(--generate-cta-ink);
}

html[data-theme="dark"] .uiverse-generate-btn--fluid .generate-credit-badge,
html[data-theme="dark"]
  .ms-bar-actions
  .ms-generate.uiverse-generate-btn
  .generate-credit-badge,
html[data-theme="dark"] .ms-bar-actions .ms-generate.uiverse-generate-btn .ms-generate-credits {
  color: var(--generate-cta-ink);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

html[data-theme="light"] .uiverse-generate-btn {
  background: #f0f0f0;
}

html[data-theme="light"] .uiverse-generate-btn--fluid,
html[data-theme="light"] .ms-bar-actions .ms-generate.uiverse-generate-btn {
  background: linear-gradient(
      90deg,
      rgba(222, 0, 75, 0.12) 0%,
      rgba(191, 70, 255, 0.14) 50%,
      rgba(0, 212, 255, 0.12) 100%
    ),
    #f0f0f0;
}

html[data-theme="light"] .uiverse-generate-btn .generate-btn-label,
html[data-theme="light"] .uiverse-generate-btn .ms-generate-label {
  color: var(--generate-btn-ink);
}

html[data-theme="light"] .uiverse-generate-btn svg {
  color: var(--generate-btn-ink);
}

html[data-theme="light"] .uiverse-generate-btn .generate-credit-badge,
html[data-theme="light"] .uiverse-generate-btn .ms-generate-credits {
  color: var(--generate-btn-ink);
}

html[data-theme="light"] .uiverse-generate-btn:disabled {
  background: #e8e8e8;
}

html[data-theme="light"] .uiverse-generate-btn--fluid:disabled,
html[data-theme="light"]
  .ms-bar-actions
  .ms-generate.uiverse-generate-btn:disabled {
  background: #ececec;
}

/*
 * 触摸设备没有 hover：光晕只保留静态渐变。
 * iOS 会把带 filter 的子层降级（模糊变弱，旋转中的胶囊 / 方角轮廓会露出来），
 * 停掉旋转既避免露出移动的形状，也省掉一个常驻动画的开销。
 * 放在按钮样式之后，压过上面 fluid / 电商直出条对 animation 的声明。
 */
@media (hover: none) {
  .uiverse-generate-btn .uiverse-generate-hover > span,
  .ms-bar-actions
    .ms-generate.uiverse-generate-btn
    .uiverse-generate-hover
    > span {
    animation: none;
  }
}

.studio-btn-primary {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.75rem;
  background: #FF2DBE;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  text-decoration: none;
}

.studio-btn-primary:hover:not(:disabled) {
  background: #FF2DBE;
}

.studio-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.auth-btn-link {
  margin-top: 14px;
}

.auth-btn-ghost {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--app-border-input);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
  text-decoration: none;
  box-shadow: 0 10px 24px var(--app-shadow);
  cursor: pointer;
}

.auth-btn-ghost:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.auth-btn-secondary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 14px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--app-fg-soft);
  text-decoration: none;
  box-shadow: 0 10px 24px var(--app-shadow);
}

.auth-btn-secondary:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.auth-text-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: var(--app-fg-muted);
  text-align: center;
  cursor: pointer;
}

.auth-text-btn:hover:not(:disabled) {
  color: var(--app-link-fg);
}

.auth-text-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--app-fg-muted);
  font-size: 13px;
}

.auth-form-message {
  min-height: 22px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--app-fg-muted);
}

.auth-form-message-error {
  color: var(--app-error-fg);
}

.auth-footer-text {
  margin: 14px 0 0;
  text-align: left;
  font-size: 13px;
  color: var(--app-fg-muted);
}

.auth-message-box {
  border-radius: 12px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-3);
  padding: 12px;
  text-align: left;
}

.auth-message-icon {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.auth-message-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--app-fg-muted);
}

.auth-message-text-center {
  text-align: center;
}

.auth-message-highlight {
  font-weight: 700;
  color: var(--app-fg);
}

.auth-message-hint {
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: var(--app-placeholder);
}

/* 登录弹窗：对齐工作室 / 落地页深色与品牌色 */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 1rem;
  color: var(--app-fg);
  font-family: var(--font-noto-sans-sc), "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
}

/* 落地页：保留首屏视频与内容，仅轻微压暗 */
.auth-modal-overlay--landing {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
}

@media (min-width: 640px) {
  .auth-modal-overlay {
    align-items: center;
    padding: 2rem 1.5rem;
  }
}

.auth-modal-overlay button,
.auth-modal-overlay input {
  font-family: inherit;
  font-size: inherit;
}

.auth-modal-overlay input[type="email"],
.auth-modal-overlay input[type="password"],
.auth-modal-overlay input[type="text"],
.auth-modal-overlay input[type="tel"] {
  color-scheme: var(--app-input-scheme);
}

.auth-modal-panel {
  position: relative;
  width: min(520px, 100%);
  border-radius: 1rem;
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  padding: 1.5rem;
  color: var(--app-fg);
  box-shadow: 0 28px 80px var(--app-shadow);
}

@media (min-width: 640px) {
  .auth-modal-panel {
    padding: 1.75rem;
  }
}

.auth-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.auth-modal-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.auth-modal-logo {
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  border-radius: 0.625rem;
}

.auth-modal-brand-name {
  display: block;
  font-size: 1.25rem;
  color: var(--app-fg);
  line-height: 1.3;
}

.auth-modal-tagline {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--app-fg-muted);
}

.auth-modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.auth-modal-close:hover {
  color: var(--app-fg);
  border-color: var(--app-border-input);
  background: var(--app-surface);
}

.auth-modal-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.auth-modal-tabs .studio-tab {
  flex: 1 1 0;
  min-width: 0;
}

.auth-modal-tabs .studio-tab .uiverse-pill-inner {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .auth-modal-tabs {
    gap: 0.5rem;
  }

  .auth-modal-tabs .studio-tab .uiverse-pill-inner {
    font-size: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.auth-modal-body {
  min-width: 0;
}

.auth-modal-overlay .auth-title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-fg);
}

.auth-modal-overlay .auth-subtitle {
  margin: 0 0 1.125rem;
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-field label {
  color: var(--app-fg-muted);
  font-weight: 600;
}

.auth-modal-overlay .auth-field-input {
  border: 1px solid var(--app-border-input);
  border-radius: 0.5rem;
  background: var(--app-input-bg);
  color: var(--app-fg);
}

.auth-modal-overlay .auth-field-input::placeholder {
  color: var(--app-placeholder);
}

.auth-modal-overlay .auth-field-input:focus {
  border-color: var(--app-focus-ring);
  box-shadow: 0 0 0 3px rgba(255, 45, 190, 0.18);
}

.auth-modal-overlay .auth-password-toggle {
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-password-toggle:hover {
  color: var(--app-link-fg);
}

.auth-modal-overlay .auth-link {
  color: var(--app-link-fg);
  font-weight: 500;
}

.auth-modal-overlay .auth-link:hover {
  color: var(--app-auth-link-hover-fg);
}

.auth-modal-overlay .auth-terms-link {
  color: var(--app-link-fg);
}

.auth-modal-overlay .auth-alert-error {
  border-color: var(--app-error-border);
  background: var(--app-error-bg);
  color: var(--app-error-fg);
}

.auth-modal-overlay .auth-alert-success {
  border-color: var(--app-success-border);
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.auth-modal-overlay .auth-btn-primary {
  min-height: 2.75rem;
  border: none;
  border-radius: 0.75rem;
  background: var(--app-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--app-on-accent);
  box-shadow: none;
}

.auth-modal-overlay .auth-btn-primary:hover:not(:disabled) {
  background: var(--app-accent);
  filter: none;
}

.auth-modal-overlay .auth-btn-ghost,
.auth-modal-overlay .auth-btn-secondary {
  border: 1px solid var(--app-border-input);
  border-radius: 0.75rem;
  background: var(--app-surface);
  color: var(--app-auth-secondary-fg);
  box-shadow: none;
}

.auth-modal-overlay .auth-btn-ghost:hover,
.auth-modal-overlay .auth-btn-secondary:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
  background: var(--brand-accent-muted-bg);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--app-fg-muted);
  font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--app-border-subtle);
}

.auth-wechat-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  text-decoration: none;
  box-sizing: border-box;
}

.auth-wechat-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #07c160;
}

/*
 * 观猹账号登录：手机号验证码表单下方的第二个入口。
 * 外观复用 .auth-btn-ghost（描边 + 表面底色 + 悬停变亮，全局 !important 描边色 #ff6ec7），
 * 这里只补齐「整行、等高、带 24px 图标」的布局，让主按钮（手机号登录）保持唯一实心 CTA。
 * 实高 2.75rem（根字号 17px 时约 46.75px）与 .auth-modal-overlay .auth-btn-primary 对齐。
 */
.auth-watcha-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 0.75rem;
  box-sizing: border-box;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

/* 官方圆形图标（96px 位图，CSS 裁圆）；图未加载时兜底露出品牌绿圆 */
.auth-watcha-icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #8bdc7e;
}

.auth-watcha-btn:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.auth-wechat-qr {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}

.auth-wechat-qr-embedded {
  min-height: 0;
  margin: 0.25rem 0 0;
}

.auth-modal-overlay .auth-wechat-qr-embedded iframe {
  display: block;
  margin: 0 auto;
}

.auth-wechat-qr-iframe {
  display: block;
  width: 300px;
  height: 400px;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  background: #fff;
  border-radius: 8px;
}

.auth-wechat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.auth-wechat-open-btn {
  width: auto;
  min-width: 10rem;
}

.auth-wechat-open-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.auth-wechat-panel {
  width: 100%;
}

.auth-wechat-caption {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.8125rem;
}

.auth-wechat-back-row {
  justify-content: center;
  margin-top: 0.75rem;
}

.auth-wechat-hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--app-fg-muted);
}

.auth-title-section {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.auth-modal-overlay .auth-text-btn {
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-text-btn:hover:not(:disabled) {
  color: var(--app-link-fg);
}

.auth-modal-overlay .auth-footer-row {
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-form-message {
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-form-message-error {
  color: var(--app-error-fg);
}

.auth-modal-overlay .auth-message-box {
  border-color: var(--app-border-subtle);
  background: var(--app-surface-3);
}

.auth-modal-overlay .auth-message-icon {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.auth-modal-overlay .auth-message-text,
.auth-modal-overlay .auth-message-hint {
  color: var(--app-fg-muted);
}

.auth-modal-overlay .auth-message-highlight {
  color: var(--app-fg);
}

.auth-modal-overlay .auth-checkbox {
  border-color: var(--app-border-input);
  background: var(--app-input-bg);
  accent-color: var(--app-accent);
}

/* 鈹€鈹€ Studio shell 鈹€鈹€ */
.studio-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-fg);
}

.studio-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.25rem;
  min-height: 6.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--app-border-subtle);
  background: var(--app-bg);
  padding: 1rem 2.25rem;
  /* 顶栏右侧控件（积分胶囊、账户头像）统一高度，避免上下错位 */
  --studio-nav-row-control-h: 2.25rem;
}

.studio-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
  min-height: var(--studio-nav-row-control-h);
}

.studio-nav .studio-credit-nav {
  align-items: center;
}

.studio-nav .studio-credit-balance {
  min-height: var(--studio-nav-row-control-h);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.studio-nav .studio-user-menu-anchor {
  display: flex;
  align-items: center;
}

.studio-nav .studio-user-menu-trigger {
  min-height: var(--studio-nav-row-control-h);
  align-items: center;
  line-height: 0;
}

.studio-nav-products {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.studio-nav-products::-webkit-scrollbar {
  display: none;
}

/* 移动顶栏产品下拉（已弃用，移动端改用与桌面相同的四按钮；保留样式供参考） */
.studio-nav-product-picker {
  display: none;
  min-width: 0;
}

.studio-mobile-menu-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.75rem;
  background: var(--app-surface-3);
  color: var(--app-fg-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.studio-mobile-menu-trigger:hover,
.studio-mobile-menu-trigger:focus-visible {
  border-color: rgba(255, 45, 190, 0.35);
  background: #161616;
  outline: none;
}

.studio-mobile-menu-trigger-leading {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 45, 190, 0.12);
  color: #ff8ee0;
}

.studio-mobile-menu-trigger-text {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
}

.studio-mobile-menu-trigger-value {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--app-fg-soft);
}

.studio-mobile-menu-trigger-chevron {
  color: var(--app-fg-muted);
}

.studio-mobile-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
}

.studio-mobile-sheet-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.58);
  cursor: default;
}

.studio-mobile-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 420px);
  border: 1px solid #2e2e2e;
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  background: var(--app-surface);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55);
  animation: studio-mobile-sheet-in 0.22s ease-out;
}

@keyframes studio-mobile-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.studio-mobile-sheet-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem 0.45rem;
  border-bottom: 1px solid #252525;
}

.studio-mobile-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-fg-soft);
}

.studio-mobile-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--app-border-subtle);
  color: var(--app-fg-subtle);
  cursor: pointer;
}

.studio-mobile-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.65rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.studio-mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.studio-mobile-menu-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.65rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: #d4d4d4;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.studio-mobile-menu-option:hover,
.studio-mobile-menu-option:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--app-fg);
  outline: none;
}

.studio-mobile-menu-option-active {
  background: rgba(255, 45, 190, 0.12);
  color: var(--app-fg);
}

.studio-mobile-menu-option-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
}

.studio-mobile-menu-option-active .studio-mobile-menu-option-icon {
  background: rgba(255, 45, 190, 0.22);
  color: #ffc4ef;
}

.studio-mobile-menu-option-label {
  display: inline-flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0.35rem;
}

.studio-mobile-menu-option-check {
  color: #ff8ee0;
}

.ms-nav-badge-inline {
  margin-left: 0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  font-size: 0.6875rem;
}

.ms-sidebar-mobile-picker {
  display: none;
  width: 100%;
}

/* Uiverse slimy-parrot-21：外层渐变描边 + 内层深色底（品牌色 #ff2dbe） */
.uiverse-pill-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.6875rem 1.5rem;
  border-radius: 14px;
  background-color: var(--app-surface-2);
  color: var(--app-fg);
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.studio-nav-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #ff2dbe 0%,
    rgba(255, 45, 190, 0) 30%
  );
  background-color: rgba(255, 45, 190, 0.2);
}

.studio-nav-product:hover,
.studio-nav-product:focus-visible {
  background-color: rgba(255, 45, 190, 0.45);
  box-shadow: 0 0 10px rgba(255, 45, 190, 0.5);
  outline: none;
}

.studio-nav-product-active {
  background-color: rgba(255, 45, 190, 0.7);
  box-shadow: 0 0 10px rgba(255, 45, 190, 0.5);
}

.studio-nav-product-active:hover,
.studio-nav-product-active:focus-visible {
  background-color: rgba(255, 45, 190, 0.78);
  box-shadow: 0 0 12px rgba(255, 45, 190, 0.58);
}

.coming-soon {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.coming-soon-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF2DBE;
}

.coming-soon-title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.coming-soon-desc {
  margin: 0 0 1.5rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--app-fg-muted);
}

.coming-soon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #FF2DBE;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #000;
}

.studio-nav-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
  color: inherit;
}

.brand-logo-img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.brand-logo-dual .brand-logo-img {
  width: 100%;
  height: 100%;
}

.brand-mark-icon {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.studio-nav-logo {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 0.625rem;
}

.studio-nav-title {
  font-size: 1.5rem;
}

.studio-nav-subtitle {
  font-size: 0.75rem;
  font-weight: 500;
}

.studio-nav-link {
  font-size: 0.9375rem;
  color: var(--app-fg-muted);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: transparent;
  cursor: pointer;
}

.studio-nav-link-accent {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #000;
  background: #FF2DBE;
  padding: 0.4375rem 0.875rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.studio-user-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.studio-user-loading {
  font-size: 0.9375rem;
  color: #666;
}

.studio-user-avatar {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  color: #FF2DBE;
  font-size: 0.8125rem;
  font-weight: 700;
}

.studio-user-avatar-glyph {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* 全站统一头像（顶栏 / 社区 / 设置） */
.user-avatar {
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  box-sizing: border-box;
}

.user-avatar-sm {
  width: 1.875rem;
  height: 1.875rem;
  font-size: 0.75rem;
}

.user-avatar-md {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.8125rem;
}

.user-avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.125rem;
}

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid;
  color: var(--community-avatar-dark-fg);
}

.user-avatar-img {
  display: block;
  object-fit: cover;
  border: 1px solid #404040;
  background: var(--app-surface-2);
}

/* 与 sm/md/lg 同元素使用时须固定尺寸，勿用 100%（在菜单 flex 里会撑满一行） */
.user-avatar-sm.user-avatar-img {
  width: 1.875rem;
  height: 1.875rem;
}

.user-avatar-md.user-avatar-img {
  width: 2.25rem;
  height: 2.25rem;
}

.user-avatar-lg.user-avatar-img {
  width: 4rem;
  height: 4rem;
}

/* 默认剪影：全站同一占比（仅 contain 缩放，不用各尺寸不同 padding） */
.user-avatar-placeholder {
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: var(--app-surface-2);
}

/* 顶栏触发按钮上的头像（不含弹窗；尺寸跟随 --studio-nav-row-control-h） */
.studio-nav .studio-user-menu-trigger .studio-user-menu-trigger-avatar.user-avatar-md,
.studio-nav .studio-user-menu-trigger .studio-user-menu-trigger-avatar.user-avatar-md.user-avatar-img,
.studio-nav .studio-user-avatar-slot.user-avatar-md {
  width: var(--studio-nav-row-control-h);
  height: var(--studio-nav-row-control-h);
}

.studio-user-menu-trigger:hover .studio-user-avatar-slot,
.studio-user-menu-trigger[aria-expanded="true"] .studio-user-avatar-slot {
  box-shadow: 0 0 0 2px rgba(255, 45, 190, 0.2);
}

.studio-user-menu-trigger:hover .user-avatar-img,
.studio-user-menu-trigger[aria-expanded="true"] .user-avatar-img {
  border-color: rgba(255, 45, 190, 0.55);
}

.studio-user-name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  color: #ccc;
}

.studio-user-menu-anchor {
  position: relative;
  min-width: 0;
}

.studio-user-menu-trigger-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.studio-user-menu-three-view-busy-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 2px solid var(--app-bg, #fff);
  background: var(--app-accent, #ff2dbe);
  animation: studio-user-menu-three-view-pulse 1.2s ease-in-out infinite;
}

@keyframes studio-user-menu-three-view-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(0.88);
  }
}

.studio-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  color: inherit;
}

.studio-user-menu-trigger:hover .studio-user-avatar,
.studio-user-menu-trigger[aria-expanded="true"] .studio-user-avatar {
  border-color: rgba(255, 45, 190, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 45, 190, 0.12);
}

.studio-user-menu-panel {
  position: fixed;
  z-index: 200;
  width: min(280px, calc(100vw - 24px));
}

.studio-user-menu-card {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 640px);
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

/* 滚动在内层，外层圆角裁剪，避免滚动条顶出卡片 */
.studio-user-menu-card-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-input) transparent;
}

.studio-user-menu-card-scroll::-webkit-scrollbar {
  width: 6px;
}

.studio-user-menu-card-scroll::-webkit-scrollbar-track {
  margin: 0.375rem 0;
  background: transparent;
}

.studio-user-menu-card-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--app-border-input);
}

.studio-user-menu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border-bottom: 1px solid #252525;
}

.studio-user-menu-header-only {
  border-bottom: 0;
  padding-bottom: 0.625rem;
}

.studio-user-menu-liveness {
  padding: 0 1rem 0.875rem;
  border-bottom: 1px solid #252525;
}

.studio-user-menu-liveness-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
}

.studio-user-menu-liveness-ui > p:last-of-type {
  display: none;
}

.studio-user-menu-three-view {
  margin-top: 0.75rem;
}

.studio-user-menu-three-view-label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
}

.studio-user-menu-three-view-picker .liveness-status-action {
  text-align: center;
}

.studio-user-menu-meta {
  min-width: 0;
  flex: 1;
}

.studio-user-menu-name-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.studio-user-menu-name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg);
  min-width: 0;
  flex: 1;
}

.studio-user-menu-vip-badge {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 45, 190, 0.45);
  background: rgba(255, 45, 190, 0.14);
  padding: 0.0625rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: #ff2dbe;
}

.studio-user-menu-email {
  margin: 0.125rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #666;
}

.studio-user-menu-storage {
  padding: 0.75rem 1rem 0.875rem;
  border-bottom: 1px solid var(--app-border);
}

.studio-user-menu-storage--settings {
  margin-top: 1.25rem;
  padding: 0;
  border: none;
  border-bottom: none;
}

.studio-user-menu-storage-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--app-fg-muted);
}

.studio-user-menu-storage-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-user-menu-storage-plan {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  color: var(--app-fg-muted);
}

.studio-user-menu-storage-summary {
  margin: 0.45rem 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-fg);
}

.studio-user-menu-storage-track {
  position: relative;
  height: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--app-border-subtle);
}

.studio-user-menu-storage-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ff2dbe;
  transition: width 0.25s ease;
}

.studio-user-menu-storage-track--warn .studio-user-menu-storage-fill {
  background: #e6a31a;
}

.studio-user-menu-storage-track--danger .studio-user-menu-storage-fill {
  background: #e05a5a;
}

.studio-user-menu-storage-track--loading {
  background: linear-gradient(
    90deg,
    var(--app-border-subtle) 25%,
    var(--app-border) 50%,
    var(--app-border-subtle) 75%
  );
  background-size: 200% 100%;
  animation: studio-user-menu-storage-shimmer 1.2s ease-in-out infinite;
}

@keyframes studio-user-menu-storage-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.studio-user-menu-storage-split,
.studio-user-menu-storage-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--app-fg-muted);
}

.studio-user-menu-storage-warn {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #d48a1a;
}

.studio-user-menu-storage-track--danger + .studio-user-menu-storage-split + .studio-user-menu-storage-warn,
.studio-user-menu-storage-track--danger ~ .studio-user-menu-storage-warn {
  color: #d46a6a;
}

.studio-user-menu-storage-upgrade {
  display: inline-flex;
  margin-top: 0.5rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ff2dbe;
}

.studio-user-menu-storage-upgrade:hover {
  text-decoration: underline;
}

.studio-user-menu-credits {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #252525;
}

.studio-user-menu-credits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.studio-user-menu-credits-main {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.studio-user-menu-credits-main:hover .studio-user-menu-credits-value {
  color: #FF2DBE;
}

.studio-user-menu-credits-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--app-fg);
  transition: color 0.15s;
}

.studio-user-menu-credits-label {
  font-size: 0.8125rem;
  color: var(--app-fg-muted);
}

.studio-user-menu-plan {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  color: #666;
}

.studio-user-menu-upgrade {
  font-size: 0.8125rem;
  padding: 0.375em 0.75em;
}

.studio-user-menu-upgrade-full {
  width: 100%;
  font-size: 0.875rem;
}

.studio-user-menu-list {
  padding: 0.375rem;
}

.studio-user-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  background: transparent;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #ccc;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.studio-user-menu-item:hover {
  background: var(--app-border-subtle);
  color: var(--app-fg);
}

.studio-user-menu-item-accent {
  font-weight: 600;
  color: #FF2DBE;
}

.studio-user-menu-item-accent:hover {
  color: #FF2DBE;
  background: rgba(255, 45, 190, 0.08);
}

.studio-user-menu-item-danger {
  color: #c88;
}

.studio-user-menu-item-danger:hover {
  color: #f99;
  background: rgba(200, 80, 80, 0.12);
}

.studio-user-menu-divider {
  height: 1px;
  margin: 0.25rem 0.375rem;
  background: #252525;
}

.studio-user-menu-beian {
  padding: 0.625rem 1rem 0.875rem;
  border-top: 1px solid #252525;
  font-size: 0.625rem;
  line-height: 1.45;
  color: #555;
}

.studio-user-menu-beian p {
  margin: 0;
}

/* 电脑端账户菜单：尽量一次性完整展示全部内容，避免出现上下滚动条 */

/* 视口高度偏矮（≤900px，如 1440×900 / 1366×768 笔记本）：先收紧一档间距 */
@media (min-width: 768px) and (max-height: 900px) {
  .studio-user-menu-header {
    padding: 0.625rem 1rem 0.375rem;
  }

  .studio-user-menu-liveness {
    padding: 0 1rem 0.5rem;
  }

  .studio-user-menu-card .liveness-status-card {
    padding: 0.375rem 0.625rem;
  }

  .studio-user-menu-card .liveness-status-action {
    margin-top: 0.375rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
  }

  .studio-user-menu-card .liveness-status-meta,
  .studio-user-menu-card .liveness-status-description {
    margin-top: 0.375rem;
  }

  .studio-user-menu-storage {
    padding: 0.375rem 1rem 0.5rem;
  }

  .studio-user-menu-storage-summary {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  .studio-user-menu-storage-upgrade {
    margin-top: 0.375rem;
  }

  .studio-user-menu-appearance {
    padding: 0 1rem 0.5rem;
  }

  .studio-user-menu-appearance-label {
    margin-bottom: 0.375rem;
  }

  .studio-user-menu-list {
    padding: 0.25rem;
  }

  .studio-user-menu-item {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
  }

  .studio-user-menu-card .theme-switcher--menu {
    gap: 0.3125rem;
  }

  .studio-user-menu-card .theme-switcher--menu .theme-switcher-option {
    min-height: 2.625rem;
    padding: 0.375rem 0.3rem;
  }

  .studio-user-menu-card [aria-label="备案信息"] {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .studio-user-menu-card [aria-label="备案信息"] p + p {
    margin-top: 0.25rem;
  }
}

/* 更矮（≤820px，如 1280×720）：再压缩一档，确保持有「管理后台」的菜单也无需滚动 */
@media (min-width: 768px) and (max-height: 820px) {
  .studio-user-menu-header {
    padding-bottom: 0.3125rem;
  }

  .studio-user-menu-liveness {
    padding-bottom: 0.375rem;
  }

  .studio-user-menu-card .liveness-status-action {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .studio-user-menu-list {
    padding: 0.1875rem;
  }

  .studio-user-menu-divider {
    margin: 0.1875rem 0.375rem;
  }

  .studio-user-menu-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .studio-user-menu-card .theme-switcher--menu {
    gap: 0.25rem;
  }

  .studio-user-menu-card .theme-switcher--menu .theme-switcher-option {
    min-height: 2.5rem;
  }

  .studio-user-menu-storage-split,
  .studio-user-menu-storage-hint {
    margin-top: 0.3rem;
  }
}

.studio-user-menu-beian p + p {
  margin-top: 0.2rem;
}

.studio-user-menu-beian a {
  color: #666;
  text-decoration: none;
}

.studio-user-menu-beian a:hover {
  color: var(--app-fg-muted);
  text-decoration: underline;
}

.studio-credit-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.studio-credit-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-3);
  border-radius: 999px;
  padding: 0.4375rem 0.875rem;
  cursor: pointer;
  color: #ccc;
  font-size: 0.875rem;
}

.studio-credit-balance:hover {
  border-color: #444;
  background: var(--app-surface-2);
}

.studio-credit-value {
  font-weight: 600;
  color: var(--app-fg);
}

.studio-credit-label {
  color: var(--app-fg-muted);
  font-size: 0.8125rem;
}

/* 彩虹描边胶囊：顶栏「会员」（Uiverse ShadowShahriar/nervous-goat-3 MIT） */
.studio-credit-upgrade {
  --rainbow-ring-radius: 12px;
  --rainbow-ring-width: 3px;
  appearance: none;
  position: relative;
  border: 0;
  background-color: var(--rainbow-ring-bg, #212121);
  font-family: inherit;
  color: var(--app-fg);
  z-index: 0;
  border-radius: var(--rainbow-ring-radius);
  box-sizing: border-box;
  cursor: pointer;
}

.studio-credit-upgrade::after {
  --m-i: linear-gradient(#000, #000);
  --m-o: content-box, padding-box;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--rainbow-ring-width);
  border-radius: var(--rainbow-ring-radius);
  background-image: conic-gradient(
    #488cfb,
    #29dbbc,
    #ddf505,
    #ff9f0e,
    #ff2dbe,
    #655adc,
    #488cfb
  );
  -webkit-mask-image: var(--m-i), var(--m-i);
  mask-image: var(--m-i), var(--m-i);
  -webkit-mask-origin: var(--m-o);
  mask-origin: var(--m-o);
  -webkit-mask-clip: var(--m-o);
  mask-clip: var(--m-o);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  filter: hue-rotate(0);
  animation: studio-credit-upgrade-hue linear 500ms infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 1;
}

.studio-credit-upgrade:hover::after {
  animation-play-state: running;
}

@keyframes studio-credit-upgrade-hue {
  to {
    filter: hue-rotate(1turn);
  }
}

.studio-credit-upgrade:active {
  --rainbow-ring-width: 4px;
}

.studio-credit-upgrade {
  padding: 0.5em 1.125em;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .studio-credit-upgrade::after {
    animation: none;
  }
}

/* 顶栏登录：实心胶囊，与彩虹边框「会员」区分 */
.studio-nav-login {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.4375rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--app-fg);
  color: var(--app-bg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.studio-nav-login:hover {
  opacity: 0.9;
}

.studio-nav-login:active {
  transform: scale(0.98);
}

/* 电脑端：顶栏右侧（会员 / 登录 / 积分 / 头像）略放大；手机端见 max-width: 767px，不覆盖 */
@media (min-width: 768px) {
  .studio-nav {
    --studio-nav-row-control-h: 3rem;
  }

  .studio-nav-right {
    gap: 1.125rem;
  }

  .studio-credit-nav {
    gap: 0.625rem;
  }

  .studio-nav .studio-credit-balance {
    padding: 0.5rem 1.125rem;
    font-size: 1rem;
    gap: 0.5rem;
  }

  .studio-nav .studio-credit-balance svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .studio-nav .studio-credit-label {
    font-size: 0.9375rem;
  }

  .studio-credit-upgrade {
    font-size: 1rem;
    padding: 0.55em 1.35em;
    --rainbow-ring-radius: 14px;
  }

  .studio-nav-login {
    font-size: 1rem;
    padding: 0.5625rem 1.375rem;
    min-height: var(--studio-nav-row-control-h);
    box-sizing: border-box;
  }

  /* 访客占位头像 + 已登录头像，与积分 / 会员 / 登录同高 */
  .studio-nav .studio-user-menu-trigger .studio-user-avatar {
    width: var(--studio-nav-row-control-h);
    height: var(--studio-nav-row-control-h);
    font-size: calc(var(--studio-nav-row-control-h) * 0.38);
  }

  .studio-nav .studio-user-menu-trigger .studio-user-avatar-glyph {
    width: calc(var(--studio-nav-row-control-h) * 0.46);
    height: calc(var(--studio-nav-row-control-h) * 0.46);
  }

  .studio-nav .studio-user-menu-trigger .studio-user-menu-trigger-avatar.user-avatar-md,
  .studio-nav .studio-user-menu-trigger .studio-user-menu-trigger-avatar.user-avatar-md.user-avatar-img,
  .studio-nav .studio-user-avatar-slot.user-avatar-md {
    width: var(--studio-nav-row-control-h);
    height: var(--studio-nav-row-control-h);
    font-size: calc(var(--studio-nav-row-control-h) * 0.38);
  }
}

.billing-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.75);
  padding: 1.5rem 0.75rem;
}

.billing-modal-panel {
  container-type: inline-size;
  container-name: billing-modal;
  width: 100%;
  max-width: min(96vw, 92rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--app-bg);
  padding: 1.5rem;
  color: var(--app-fg);
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .billing-modal-overlay {
    padding: 1.5rem 1rem;
  }

  .billing-modal-panel {
    padding: 2rem;
    max-height: calc(100dvh - 3rem);
  }
}

@media (min-width: 1280px) {
  .billing-modal-overlay {
    padding: 1.25rem 1.5rem;
  }
}

/* 弹窗内四列按面板宽度切换，避免视口够宽但弹窗仍窄时卡片被挤裁切 */
.billing-modal-pricing .pricing-plans-grid {
  grid-template-columns: minmax(0, 1fr);
}

@container billing-modal (min-width: 40rem) {
  .billing-modal-pricing .pricing-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container billing-modal (min-width: 68rem) {
  .billing-modal-pricing .pricing-plans-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.billing-modal-panel .pricing-mini-card {
  overflow: visible;
}

.billing-modal-panel .pricing-estimate-text {
  flex-wrap: wrap;
  row-gap: 0.125rem;
}

.billing-modal-panel .pricing-estimate-scenario {
  flex-shrink: 1;
  min-width: 0;
  line-height: 1.35;
}

/* 首次付款 · 电商直出引导：小卡片居中，避免沿用定价弹窗全宽/底 sheet */
.first-payment-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 0.75rem
    max(1rem, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.first-payment-celebration-card {
  position: relative;
  width: min(17.5rem, 86vw);
  max-height: min(92dvh, 24.5rem);
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--app-bg);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}

.first-payment-celebration-art {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: min(38dvh, 13.5rem);
  padding: 0.625rem 0.75rem 0;
  background: radial-gradient(
    120% 80% at 50% 100%,
    rgba(255, 45, 190, 0.08),
    transparent 55%
  );
}

.first-payment-celebration-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(38dvh, 13.5rem);
  object-fit: contain;
}

.first-payment-celebration-foot {
  flex-shrink: 0;
  padding: 0.625rem 0.875rem 0.875rem;
}

.first-payment-celebration-foot .first-payment-celebration-cta {
  width: 100%;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.first-payment-celebration-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.first-payment-celebration-close:hover {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

@media (min-width: 640px) {
  .first-payment-celebration-card {
    width: min(18.5rem, 88vw);
    max-height: min(92dvh, 26rem);
  }

  .first-payment-celebration-art,
  .first-payment-celebration-art img {
    max-height: min(40dvh, 15rem);
  }
}

.billing-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.billing-modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.billing-modal-close:hover {
  color: var(--app-fg);
  border-color: rgba(255, 255, 255, 0.2);
}

.billing-modal-scroll {
  min-width: 0;
}

@media (max-width: 639px) {
  .billing-modal-overlay {
    align-items: flex-end;
    justify-content: stretch;
    overflow: hidden;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
  }

  .billing-modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: min(96dvh, 100%);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .billing-modal-header {
    position: relative;
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
    padding: 0.85rem 3.25rem 0.75rem 1rem;
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--app-bg);
  }

  .billing-modal-header-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
  }

  .billing-modal-close--mobile {
    position: absolute;
    top: max(0.85rem, env(safe-area-inset-top, 0px));
    right: 1rem;
  }

  .billing-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .billing-modal-panel .billing-interval-toggle {
    width: min(100%, 15rem);
  }

  .billing-modal-panel .billing-yearly-discount-banner {
    padding: 0 0.25rem;
    text-align: center;
    line-height: 1.45;
  }

  .billing-modal-panel .pricing-plan-card {
    grid-template-rows: auto;
    height: auto;
    gap: 0.85rem;
  }

  .billing-modal-panel .pricing-plan-header,
  .billing-modal-panel .pricing-price-block,
  .billing-modal-panel .pricing-plan-mini-slot {
    min-height: 0;
  }

  .billing-modal-panel .pricing-plan-blurb {
    min-height: 0;
  }

  .billing-modal-panel
    .pricing-plan-badge:not(.pricing-plan-badge--featured):not(
      .pricing-plan-badge--title-inline
    ) {
    top: 0.65rem;
    right: 0.65rem;
    max-width: calc(100% - 1.3rem);
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }

  .billing-modal-panel .pricing-plans-grid {
    margin-top: 1.5rem;
    gap: 0.75rem;
  }

  .billing-modal-panel .pricing-mini-card-stack {
    min-height: 6.5rem;
  }
}

.billing-interval-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  isolation: isolate;
}

.billing-interval-indicator {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc((100% - 0.5rem) / 2);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateX(calc(var(--billing-interval-index, 0) * 100%));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.billing-interval-option {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.375rem 1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s ease;
}

.billing-interval-option:hover {
  color: rgba(255, 255, 255, 0.85);
}

.billing-interval-option-active {
  color: #000;
}

.billing-interval-option-active:hover {
  color: #000;
}

.pricing-plans-grid {
  align-items: stretch;
}

.pricing-plan-card {
  display: grid;
  grid-template-rows: 5.5rem 4.75rem minmax(7.25rem, auto) auto;
  gap: 1.25rem 0;
  height: 100%;
}

@media (min-width: 768px) {
  .pricing-plans-grid {
    grid-template-rows: auto auto auto auto;
  }

  .pricing-plan-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

.pricing-plan-header {
  min-height: 5.5rem;
}

.pricing-plan-title-row {
  min-height: 1.75rem;
}

@media (min-width: 640px) {
  .pricing-plan-title-row {
    min-height: 2rem;
  }
}

.pricing-plan-blurb {
  display: -webkit-box;
  min-height: 2.75rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
}

.pricing-plan-mini-slot {
  display: flex;
  align-items: stretch;
  min-height: 7.25rem;
}

.pricing-plan-cta {
  display: flex;
  align-items: center;
}

.pricing-plan-features {
  align-self: start;
}

.pricing-mini-card {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  overflow: hidden;
}

.pricing-mini-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-mini-card-stack {
  --mini-card-top-height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 7.25rem;
}

.pricing-mini-card-top {
  flex: 0 0 var(--mini-card-top-height);
  width: 100%;
  height: var(--mini-card-top-height);
  min-height: var(--mini-card-top-height);
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

.pricing-mini-card-credits {
  margin: 0;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  box-sizing: border-box;
}

.pricing-mini-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.375rem 0.625rem 0.4375rem;
  box-sizing: border-box;
}

.pricing-mini-card-ultimate .pricing-mini-card-top {
  background: rgba(255, 255, 255, 0.05);
  border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0;
}

.pricing-mini-card-top .ultimate-tier-slider {
  width: 100%;
  flex: 1;
  justify-content: center;
  padding: 0 0.625rem;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-mini-card-ultimate .ultimate-tier-rail {
  padding: 0 0.5rem;
}

.pricing-mini-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.pricing-scenario-estimates {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-scenario-estimate {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.25rem;
}

.pricing-scenario-estimate .pricing-estimate-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.pricing-scenario-estimate .pricing-estimate-icon svg {
  width: 0.625rem;
  height: 0.625rem;
}

.pricing-scenario-estimate .pricing-estimate-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25;
}

.pricing-estimate-scenario {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.48);
}

.pricing-estimate-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.pricing-scenario-estimate-highlight .pricing-estimate-scenario {
  color: rgba(255, 45, 190, 0.72);
}

.pricing-scenario-estimate-highlight .pricing-estimate-count {
  color: rgba(255, 45, 190, 0.88);
}

.pricing-scenario-estimate-highlight .pricing-estimate-count strong {
  color: #FF2DBE;
}

.pricing-estimate-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

.pricing-estimate-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

.pricing-estimate-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.pricing-estimate-text strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.pricing-price-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
}

.pricing-plan-credits {
  flex-shrink: 0;
  padding-bottom: 0.2em;
  white-space: nowrap;
}

.pricing-price-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 4.75rem;
}

.pricing-price-value {
  display: inline-block;
  animation: pricing-value-in 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-billing-hint {
  min-height: 1.25rem;
  overflow: hidden;
}

.pricing-billing-hint-inner {
  display: inline-block;
  animation: pricing-hint-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pricing-value-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pricing-hint-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .billing-interval-indicator,
  .pricing-price-value,
  .pricing-billing-hint-inner {
    animation: none;
    transition: none;
  }
}

.ultimate-tier-slider {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
}

.ultimate-tier-slider-embedded {
  padding: 0;
}

.ultimate-tier-rail {
  position: relative;
  height: 1.25rem;
  padding: 0 0.375rem;
  touch-action: none;
  cursor: pointer;
  user-select: none;
}

.ultimate-tier-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.375rem;
  right: 0.375rem;
  height: 0.1875rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.ultimate-tier-rail-fill {
  position: absolute;
  top: 50%;
  left: 0.375rem;
  height: 0.1875rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 45, 190, 0.55), #FF2DBE);
  pointer-events: none;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ultimate-tier-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ultimate-tier-tick {
  position: absolute;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--app-surface-2);
  transform: translate(-50%, -50%);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ultimate-tier-tick-active {
  border-color: rgba(255, 45, 190, 0.45);
  background: rgba(255, 45, 190, 0.35);
}

.ultimate-tier-thumb {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid var(--app-bg);
  background: #FF2DBE;
  box-shadow:
    0 0 0 1px rgba(255, 45, 190, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition:
    left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s ease,
    box-shadow 0.18s ease;
  cursor: grab;
  z-index: 2;
}

.ultimate-tier-thumb:focus-visible {
  outline: 2px solid rgba(255, 45, 190, 0.8);
  outline-offset: 2px;
}

.ultimate-tier-thumb-dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 0 0 3px rgba(255, 45, 190, 0.18),
    0 3px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ultimate-tier-stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.ultimate-tier-stop {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.125rem;
  border: 0;
  background: transparent;
  padding: 0.125rem 0;
  cursor: pointer;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.18s ease;
}

.ultimate-tier-stop:hover {
  color: rgba(255, 255, 255, 0.68);
}

.ultimate-tier-stop-active {
  color: rgba(255, 45, 190, 0.92);
}

.ultimate-tier-stop-value {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ultimate-tier-stop-unit {
  font-size: 0.5625rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .ultimate-tier-rail-fill,
  .ultimate-tier-thumb,
  .ultimate-tier-tick {
    transition: none;
  }
}

.studio-user-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.studio-user-logout:hover {
  color: var(--app-fg);
}

.studio-body {
  display: flex;
  min-height: 0;
  flex: 1;
}

.studio-sidebar {
  display: flex;
  width: 340px;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--app-border-subtle);
  background: var(--app-bg);
}

.studio-sidebar-header {
  border-bottom: 1px solid var(--app-border-subtle);
  padding: 1rem 1.25rem;
}

.studio-sidebar-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 1rem;
}

.studio-sidebar-footer {
  border-top: 1px solid var(--app-border-subtle);
  padding: 1rem;
}

/* 宸ヤ綔鍙?/ 鐖嗘鐢熸垚椤靛乏鏍忓瓧鍙?*/
.studio-sidebar .studio-label {
  font-size: 13px;
}

.studio-sidebar .ratio-btn {
  font-size: 0.875rem;
}

.studio-sidebar .uiverse-generate-btn {
  font-size: 18px;
}

/* AI口播 / 场景迁移侧栏：贴近 Uiverse 预览（居中胶囊 + 可见旋转光晕，非整条灰带） */
.studio-sidebar-footer .uiverse-generate-btn.uiverse-generate-btn--fluid {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

.studio-sidebar-footer .uiverse-generate-hover > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.studio-sidebar-footer .uiverse-generate-btn:hover:not(:disabled) .uiverse-generate-hover > span {
  width: 100%;
  height: 100%;
}

.studio-sidebar .studio-preview-slot-label {
  font-size: 12px;
}

.studio-sidebar .studio-preview-slot-name {
  font-size: 13px;
}

.studio-sidebar .studio-preview-slot-badge {
  font-size: 12px;
}

.studio-sidebar .vp-gen-preset-en {
  font-size: 0.9375rem;
}

.studio-sidebar .vp-gen-preset-zh {
  font-size: 13px;
}

.studio-sidebar .vp-gen-change {
  font-size: 13px;
}

.studio-sidebar .vp-gen-upload-title {
  font-size: 1rem;
}

.studio-sidebar .vp-gen-upload-hint,
.studio-sidebar .vp-gen-upload-filename {
  font-size: 13px;
}

.studio-sidebar-footer p,
.studio-sidebar-footer button:not(.uiverse-generate-btn) {
  font-size: 13px;
}

.studio-sidebar .asset-verify-title {
  font-size: 0.875rem;
}

.studio-sidebar .asset-verify-desc,
.studio-sidebar .asset-verify-meta {
  font-size: 0.8125rem;
}

.studio-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  background: var(--app-bg);
}

.studio-main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.studio-title {
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #FF2DBE;
}

.studio-card {
  border-radius: 0.75rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
}

.studio-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--app-fg);
  outline: none;
}

.studio-input:focus {
  border-color: #FF2DBE;
}

.studio-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(
    to bottom right,
    #ff2dbe 0%,
    rgba(255, 45, 190, 0) 30%
  );
  background-color: rgba(255, 45, 190, 0.2);
}

.studio-tab .uiverse-pill-inner {
  min-height: 2.875rem;
  padding: 0.625rem 1.375rem;
  font-size: 1.0625rem;
}

.studio-tab:hover,
.studio-tab:focus-visible {
  background-color: rgba(255, 45, 190, 0.45);
  box-shadow: 0 0 10px rgba(255, 45, 190, 0.5);
  outline: none;
}

.studio-tab-active {
  background-color: rgba(255, 45, 190, 0.7);
  box-shadow: 0 0 10px rgba(255, 45, 190, 0.5);
}

.studio-tab-active:hover,
.studio-tab-active:focus-visible {
  background-color: rgba(255, 45, 190, 0.78);
  box-shadow: 0 0 12px rgba(255, 45, 190, 0.58);
}

.studio-tab-active::after {
  content: none;
}

@keyframes studio-tab-active-shine {
  0%,
  72%,
  100% {
    background-position: 120% 0, 0 0, 0 0;
  }
  38% {
    background-position: -35% 0, 0 0, 0 0;
  }
}

.studio-tab-active .studio-tab-badge {
  background: #ff2dbe;
  color: var(--app-bg);
}

.studio-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--app-border-subtle);
  padding: 1.25rem 1.5rem;
}

.studio-header-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.studio-header--with-back {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.studio-header--with-back .studio-tab-back {
  margin: 0;
  padding-left: 0;
}

.admin-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-fg);
}

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--app-border-subtle);
  padding: 1.0625rem 1.5rem;
}

.admin-body {
  display: flex;
  min-height: 0;
  flex: 1;
}

.admin-content {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.admin-sidebar {
  display: flex;
  width: 18rem;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--app-border-subtle);
  background: var(--app-surface-4);
  padding: 0.75rem;
  transition: width 0.2s ease;
}

.admin-sidebar-collapsed {
  width: 3.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.admin-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.admin-sidebar-brand {
  min-width: 0;
}

.admin-sidebar-toggle {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.admin-sidebar-toggle:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.admin-sidebar-collapsed .admin-sidebar-head {
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.75rem;
}

.admin-sidebar-collapsed .admin-sidebar-brand,
.admin-sidebar-collapsed .admin-nav-item span,
.admin-sidebar-collapsed .admin-nav-chevron {
  display: none;
}

.admin-sidebar-collapsed .admin-nav-item {
  justify-content: center;
  padding: 0.5625rem 0.375rem;
}

.admin-sidebar-nav,
.admin-nav-group,
.admin-nav-children {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-nav-group-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.admin-nav-group-row .admin-nav-item {
  flex: 1;
  min-width: 0;
}

.admin-nav-chevron {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.admin-nav-chevron:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--app-fg-muted);
  cursor: pointer;
  font-size: 0.9375rem;
  padding: 0.5625rem 0.625rem;
  text-align: left;
}

.admin-nav-item:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.admin-nav-item-active {
  background: var(--app-border-subtle);
  color: var(--app-fg);
}

.admin-nav-item-current {
  color: var(--app-fg-soft);
}

.admin-nav-child {
  padding-left: 2rem;
}

/* 后台侧栏「待处理」角标：社区审核 / 私人定制有待审核内容时显示数字提醒 */
.admin-nav-badge {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--app-accent, #ff2dbe);
  color: var(--app-on-accent, #101114);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 侧栏收起后只剩图标：角标叠在图标右上角，提醒依然可见 */
.admin-sidebar-collapsed .admin-nav-item {
  position: relative;
}

.admin-sidebar-collapsed .admin-nav-item .admin-nav-badge {
  position: absolute;
  top: 0.1875rem;
  right: 0.1875rem;
  display: inline-flex;
  min-width: 1rem;
  height: 1rem;
  margin-left: 0;
  padding: 0 0.25rem;
  font-size: 0.625rem;
}

.admin-test-terminal {
  color-scheme: dark;
  background: var(--app-media-bg);
  color: #9cdc9c;
  caret-color: #9cdc9c;
}

.admin-test-terminal-placeholder {
  color: #888888;
}

.admin-control-outline {
  border: 1px solid var(--app-border-input);
}

.admin-control-outline:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
}

.admin-control-outline-danger:hover:not(:disabled) {
  border-color: var(--app-error-fg);
}

/* 鍚庡彴鍚勭鐞嗛〉宸︿晶鍒楄〃鏍忓瓧鍙?*/
aside.panel-sidebar {
  font-size: 0.9375rem;
}

aside.panel-sidebar .studio-search-input {
  font-size: 0.875rem;
}

aside.panel-sidebar .text-sm {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

aside.panel-sidebar .text-xs {
  font-size: 0.875rem !important;
  line-height: 1.375rem !important;
}

aside.panel-sidebar .text-\[11px\] {
  font-size: 0.875rem !important;
}

aside.panel-sidebar .text-\[10px\] {
  font-size: 0.8125rem !important;
}

.admin-nav-children-hidden,
.admin-sidebar-collapsed .admin-nav-children {
  display: none;
}

.preset-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  background: transparent;
  padding: 0;
  text-align: left;
}

@media (hover: hover) {
  .preset-card:hover:not(.preset-card-selected) {
    border-color: #444;
  }
}

.preset-card-selected,
.preset-card-selected:hover,
.preset-card-selected:focus-within {
  border-color: #FF2DBE;
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.35);
}

.preset-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.preset-card:hover .preset-card-actions,
.preset-card:focus-within .preset-card-actions {
  opacity: 1;
  pointer-events: auto;
}

.preset-card-fullscreen {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  height: 28px;
  width: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  opacity: 0;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    transform 0.28s ease;
}

.preset-card-actions .preset-card-fullscreen {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

.preset-card:hover .preset-card-fullscreen,
.preset-card:focus-within .preset-card-fullscreen {
  opacity: 1;
}

.preset-card-fullscreen:hover {
  border-color: #555;
  color: var(--app-fg);
  background: rgba(0, 0, 0, 0.85);
}

@media (hover: none) {
  .preset-card-fullscreen {
    opacity: 1;
  }

  .preset-card-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 我的作品 / 生成相册卡片：右上角操作与模板墙一致（hover 或聚焦露出；已收藏常显；触屏常显） */
@media (hover: hover) {
  .preset-card .history-card-action-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .preset-card:hover .history-card-action-btn,
  .preset-card:focus-within .history-card-action-btn,
  .preset-card .history-card-action-btn:focus-visible,
  .preset-card .history-card-like-on {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) {
  .preset-card .history-card-action-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/*
 * 模板全屏预览：中间大图 + 底部模板条。
 * 必须挂到 body（见 PresetVideoModal / ViralPresetVideoModal 的 createPortal）：
 * 工作台 .studio-body 在手机上有 overflow + 惯性滚动，position:fixed 会被困在顶栏下方，
 * 音频/关闭按钮会被顶栏挡住。历史作品弹窗已按同样原因挂到 body。
 * 高度用 svh：iOS Safari 的 100vh 含地址栏背后区域，矮屏上垂直居中会裁掉顶部按钮。
 */
.preset-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  /* 刘海/底部安全区即使 backdrop 盖不到，也保持深色，避免露出底下顶栏 */
  background: #000;
}

.preset-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

/* 音频 / 关闭叠在预览视频左上角、右上角，宽屏时不会贴屏幕边缘 */
.preset-lightbox-hero-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.preset-lightbox-hero-controls .preset-lightbox-sound,
.preset-lightbox-hero-controls .preset-lightbox-close {
  pointer-events: auto;
}

.preset-lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 8px;
  cursor: pointer;
}

.preset-lightbox-hero {
  position: relative;
  aspect-ratio: 4 / 5;
  /*
   * 高度同时受「视口」和「宽度上限 × 5/4」约束：
   * 若只限制 max-width，高度仍是固定值，盒子会被拉成过高的长条（4:5 失效），
   * 视频完整显示（contain）时上下会留出大片黑边。加上第三项后，
   * 宽度被夹住时高度同步收缩，盒子始终保持 4:5。
   */
  height: min(72vh, 72svh, calc(100svh - 12.5rem), calc(min(92vw, 26rem) * 5 / 4));
  width: auto;
  max-width: min(92vw, 26rem);
  overflow: hidden;
  border-radius: 1rem;
  /* 播放视频时用 contain 完整显示画面，上下留出的黑边用纯黑更接近播放器效果 */
  background: #000;
  cursor: default;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.preset-lightbox-close {
  position: relative;
  z-index: 2;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  /* 按钮叠在视频上，半透明底 + 轻模糊，浅色模式下图标仍用白字 */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

.preset-lightbox-close:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.85);
}

.preset-lightbox-sound {
  position: relative;
  z-index: 2;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

.preset-lightbox-sound:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.85);
}

/*
 * 底部「生成」按钮绝对定位在 hero 底部居中。
 * 水平居中用 left/right:0 + margin auto（不依赖 transform）：
 * 基座按下时会整体 scale(0.97)，居中若靠 translateX(-50%) 会与缩放复合出约 2px 位移；
 * 更早的版本里基座把 transform 整个覆盖成 scale()，按钮会右移半个身位、click 落到背后点不动。
 */
.preset-lightbox-use.uiverse-generate-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

.preset-lightbox-use:hover {
  transform: translateY(-1px);
}

.preset-lightbox-use:active {
  transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
  .preset-lightbox-use:hover,
  .preset-lightbox-use:active {
    transform: none;
  }
}

.preset-lightbox-strip {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  overflow-x: auto;
  padding: 10px 16px 18px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

.preset-lightbox-strip-inner {
  display: flex;
  width: max-content;
  gap: 10px;
  margin: 0 auto;
}

.preset-lightbox-thumb {
  display: flex;
  width: 76px;
  flex-shrink: 0;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.preset-lightbox-thumb-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.55rem;
  border: 2px solid transparent;
  /* 深色底：iPhone 截帧前不要露出浅色模式的白块 */
  background: #1a1a1a;
}

.preset-lightbox-thumb-active .preset-lightbox-thumb-media,
.preset-lightbox-thumb-active:hover .preset-lightbox-thumb-media,
.preset-lightbox-thumb:focus-visible .preset-lightbox-thumb-media {
  border-color: #FF2DBE;
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.35);
}

@media (hover: hover) {
  .preset-lightbox-thumb:not(.preset-lightbox-thumb-active):hover
    .preset-lightbox-thumb-media {
    border-color: #444;
  }
}

.preset-lightbox-thumb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #ddd;
}

.preset-lightbox-thumb-active .preset-lightbox-thumb-name {
  color: var(--app-fg);
}

.preset-lightbox-hero-wide {
  aspect-ratio: 16 / 10;
  max-width: min(92vw, 36rem);
  /* 同上：宽度被夹住时高度同步收缩，保持 16:10 */
  height: min(72vh, 72svh, calc(100svh - 12.5rem), calc(min(92vw, 36rem) * 10 / 16));
}

.preset-lightbox-hero-square {
  aspect-ratio: 1 / 1;
  max-width: min(92vw, 24rem);
  /* 同上：宽度被夹住时高度同步收缩，保持 1:1 */
  height: min(72vh, 72svh, calc(100svh - 12.5rem), calc(min(92vw, 24rem)));
}

.vp-mosaic-card:hover .preset-card-fullscreen,
.vp-mosaic-card:focus-within .preset-card-fullscreen {
  opacity: 1;
}

@media (max-width: 767px) {
  .preset-lightbox-hero-controls {
    top: 8px;
    left: 8px;
    right: 8px;
  }

  .preset-lightbox-sound,
  .preset-lightbox-close {
    height: 44px;
    width: 44px;
  }

  .preset-lightbox-stage {
    /* 矮屏不要垂直居中：内容一高，顶上的按钮会被裁掉且滚不回去 */
    align-items: flex-start;
    overflow-y: auto;
    padding: 8px 12px 6px;
  }

  .preset-lightbox-hero {
    /* 移动端用 svh，给顶栏按钮和底栏小图留空，保持 4:5 不被拉成长条 */
    height: min(
      56svh,
      calc(100svh - 13.5rem),
      calc(min(92vw, 26rem) * 5 / 4)
    );
  }

  .preset-lightbox-thumb {
    width: 64px;
  }

}

/*
 * 我的作品详情弹窗
 * 手机上必须铺满「看得见的屏幕」（svh），操作栏钉在底部。
 * 不能用 flex 垂直居中：内容一高，顶上的按钮会被裁掉且滚不回去。
 * 部分 WebView 里 position:fixed 会被父级 overflow 困住，组件会挂到 body。
 */
.history-video-modal {
  position: fixed;
  inset: 0;
  /* 高于 .vp-guide(70)，否则生成完成后的「下载」引导会挡住关闭按钮；低于 .preset-lightbox(80) */
  z-index: 75;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.history-video-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.history-video-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

.history-video-modal-head {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.5rem;
}

.history-video-modal-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.history-video-modal-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.history-video-modal-meta {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #888;
}

.history-video-modal-toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.history-video-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.history-video-modal-actions--head {
  display: none;
}

.history-video-modal-actions--foot {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  padding: 0.625rem 0.75rem 0.75rem;
  border-top: 1px solid #333;
  background: rgba(12, 12, 12, 0.94);
}

.history-video-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #333;
  border-radius: 0.5rem;
  background: #1a1a1a;
  color: #ccc;
  font-size: 0.75rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.history-video-modal-btn:hover:not(:disabled) {
  border-color: #555;
  color: #fff;
}

.history-video-modal-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.history-video-modal-btn-active {
  border-color: rgba(255, 45, 190, 0.5);
  background: rgba(255, 45, 190, 0.1);
  color: #ff2dbe;
}

.history-video-modal-btn-danger:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* 历史弹窗「重新生成」：次要生成动作，用品牌色描边 + 更大字号强调，但不抢主 CTA */
.history-video-modal-btn-generate {
  border-color: rgba(255, 45, 190, 0.55);
  background: rgba(255, 45, 190, 0.12);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 0.42rem 0.8rem;
}

.history-video-modal-btn-generate:hover:not(:disabled) {
  border-color: rgba(255, 45, 190, 0.85);
  background: rgba(255, 45, 190, 0.24);
  color: #ffffff;
}

.history-video-modal-close {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #333;
  border-radius: 0.5rem;
  background: #1a1a1a;
  color: #888;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.history-video-modal-close:hover {
  border-color: #555;
  color: #fff;
}

.history-video-modal-error {
  flex-shrink: 0;
  margin: 0 0.75rem 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: #fca5a5;
}

.history-video-modal-body {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.75rem;
}

.history-video-modal-stage {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-video-modal-frame {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 1px solid #333;
  border-radius: 0.75rem;
  background: #000;
}

.history-video-modal-frame img,
.history-video-modal-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-video-modal-empty {
  display: flex;
  min-height: 12.5rem;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
}

.history-video-modal-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #444;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
}

.history-video-modal-nav-prev {
  left: 0.5rem;
}

.history-video-modal-nav-next {
  right: 0.5rem;
}

.history-video-modal-versions {
  display: flex;
  width: 100%;
  max-height: 9rem;
  flex-shrink: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 0.75rem;
  background: #141414;
}

.history-video-modal-versions-head {
  border-bottom: 1px solid #333;
  padding: 0.5rem 0.75rem;
}

.history-video-modal-versions-head p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
}

.history-video-modal-versions-list {
  margin: 0;
  max-height: 7.5rem;
  overflow-y: auto;
  padding: 0.5rem;
  list-style: none;
}

.history-video-modal-segments {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0;
}

/* 手机：整页可纵向滚，视频限高，避免操作栏被播放器挤出视口 */
@media (max-width: 639px) {
  .history-video-modal-panel {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .history-video-modal-body {
    flex: 0 0 auto;
    min-height: 0;
  }

  .history-video-modal-stage {
    flex: 0 0 auto;
    align-items: center;
  }

  .history-video-modal-frame {
    width: 100%;
    height: auto;
    max-height: min(calc(100svh - 12rem), 52svh);
  }

  .history-video-modal-frame.is-vertical {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    max-height: min(calc(100svh - 12rem), 58svh);
  }

  .history-video-modal-frame:not(.is-vertical) {
    aspect-ratio: 16 / 9;
  }

  .history-video-modal-actions--foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 640px) {
  .history-video-modal {
    align-items: center;
    padding: 1rem;
  }

  .history-video-modal-panel {
    height: auto;
    max-height: 95vh;
    max-width: 64rem;
    overflow: visible;
    padding: 0;
  }

  .history-video-modal-head {
    padding: 0 0.25rem 0.75rem;
  }

  .history-video-modal-actions--head {
    display: flex;
  }

  .history-video-modal-actions--foot {
    display: none;
  }

  .history-video-modal-body {
    flex: none;
    flex-direction: row;
    min-height: 0;
    padding: 0;
  }

  .history-video-modal-stage {
    display: block;
    min-height: 0;
  }

  .history-video-modal-frame.is-vertical {
    width: auto;
    height: auto;
    max-height: calc(95vh - 8rem);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }

  .history-video-modal-frame:not(.is-vertical) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .history-video-modal-versions {
    width: 13rem;
    max-height: none;
  }

  .history-video-modal-versions-list {
    max-height: calc(95vh - 10rem);
  }

  .history-video-modal-segments {
    padding: 0.75rem 0.25rem 0;
  }
}

/*
 * 模板全屏播放：已知封面媒体真实比例时启用（JS 读取视频宽高后写入 --r）。
 * 盒子比例直接贴合媒体：不裁剪、无黑边，并在舞台允许的范围内尽量放大。
 * 宽度 = min(92vw, 可用高度 × 比例)，高度由 aspect-ratio 自动得出且 ≤ 可用高度，
 * 两个方向的约束都不会破坏比例。
 */
.preset-lightbox-hero-fit {
  height: auto;
  aspect-ratio: var(--r, 4 / 5);
  width: min(
    92vw,
    calc(min(72vh, 72svh, calc(100svh - 12.5rem)) * var(--r, 0.8))
  );
  max-width: none;
}

@media (max-width: 767px) {
  .preset-lightbox-hero-fit {
    width: min(
      92vw,
      calc(min(56svh, calc(100svh - 13.5rem)) * var(--r, 0.8))
    );
  }
}

.upload-zone {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 2px dashed var(--app-border-input);
  background: var(--app-surface);
  padding: 2.5rem 1rem;
  text-align: center;
}

.upload-zone:hover {
  border-color: #555;
  background: var(--app-surface-2);
}

.ratio-toggle {
  display: flex;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface);
  padding: 0.25rem;
}

.ratio-btn {
  flex: 1;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
}

.ratio-btn-active {
  background: var(--app-border-input);
  color: var(--app-fg);
}

.studio-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}

.studio-field {
  margin-bottom: 0.75rem;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

.studio-search-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.studio-search-input {
  padding-left: 2.25rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
}

.studio-loading {
  display: flex;
  height: 12rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #666;
}

.studio-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  border-radius: 0.75rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--app-fg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: min(92vw, 36rem);
  /* 保证鼠标能停在提示上：父级若关了点击，这里仍要能悬停、选中编号 */
  pointer-events: auto;
}

/* 错误提示：红色描边一眼可辨；悬停不消失（JS 层已暂停自动关闭） */
.studio-toast--error {
  border-color: rgba(239, 68, 68, 0.45);
}

.studio-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.studio-toast-message {
  margin: 0;
  white-space: pre-line;
}

/* 请求编号单独一行展示，点击编号可整段选中复制 */
.studio-toast-request-id {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  color: var(--app-fg-muted, #aaa);
}

.studio-toast-request-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #f87171;
  user-select: all;
}

.studio-toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--app-fg-muted, #aaa);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.studio-toast-close:hover {
  color: var(--app-fg, #fafafa);
  background: rgba(255, 255, 255, 0.08);
}

.gen-progress-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 45, 190, 0.25);
  background: linear-gradient(
    135deg,
    rgba(255, 45, 190, 0.08) 0%,
    rgba(26, 26, 26, 0.95) 100%
  );
}

.gen-progress-banner-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.gen-progress-banner-copy {
  min-width: 0;
}

.gen-progress-banner-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-fg);
}

.gen-progress-banner-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--app-fg-muted);
}

.studio-tab-label,
.ms-nav-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.studio-tab-badge,
.ms-nav-badge {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: #FF2DBE;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--app-bg);
}

.studio-nav-link-muted {
  display: none;
  font-size: 0.9375rem;
  color: var(--app-fg-muted);
}

.studio-nav-link-muted:hover {
  color: var(--app-fg);
}

.studio-nav-subtitle {
  display: none;
  color: var(--app-fg);
}

@media (min-width: 640px) {
  .preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-nav-link-muted.sm-inline-block {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .studio-nav-subtitle.md-inline {
    display: inline;
  }
  .studio-nav-link-muted.md-inline {
    display: inline;
  }
}

.studio-card video,
.studio-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .preset-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 鈹€鈹€ Media library popover 鈹€鈹€ */
.media-upload-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 2px dashed var(--app-border-input);
  background: var(--app-surface);
  padding: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ccc;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.media-upload-trigger:hover:not(:disabled) {
  border-color: #555;
  background: var(--app-surface-2);
}

.media-upload-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.media-popover {
  position: fixed;
  z-index: 50;
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.media-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0.5rem;
}

/* 媒体库仅保留「上传记录」：标题沿用原选中 Tab 的胶囊外观 */
.media-popover-title {
  border-radius: 9999px;
  background: #fff;
  color: #000;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.media-popover-close {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  background: var(--app-border-strong);
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.media-popover-close:hover {
  background: var(--app-border-input);
  color: var(--app-fg);
}

.media-popover-body {
  padding: 0 0.75rem 0.75rem;
}

.media-popover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

.media-popover-upload-tile {
  display: flex;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.625rem;
  border: 1.5px dashed #444;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.media-popover-upload-tile:hover:not(:disabled) {
  border-color: #666;
  background: #252525;
}

.media-popover-upload-tile:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.media-popover-upload-label {
  font-size: 0.75rem;
  color: var(--app-fg-muted);
}

.media-popover-video-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.625rem;
  border: 2px solid transparent;
  background: var(--app-surface);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s;
}

@media (hover: hover) {
  .media-popover-video-tile:hover:not(.media-popover-video-tile-selected) {
    border-color: #444;
  }
}

.media-popover-video-tile-selected,
.media-popover-video-tile-selected:hover,
.media-popover-video-tile-selected:focus-within {
  border-color: #FF2DBE;
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.35);
}

.media-popover-video-tile-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.media-popover-delete-btn {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 30;
  display: flex;
  height: 1.625rem;
  width: 1.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.72);
  color: #ccc;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}

.media-popover-video-tile:hover .media-popover-delete-btn,
.media-popover-delete-btn:focus-visible {
  opacity: 1;
}

.media-popover-delete-btn:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(127, 29, 29, 0.85);
  color: #fecaca;
}

.media-popover-delete-btn:disabled {
  cursor: not-allowed;
}

.media-popover-video-tile-processing,
.media-popover-video-tile-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  cursor: default;
}

.media-popover-video-thumb {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.media-popover-video-placeholder {
  height: 100%;
  width: 100%;
  background: var(--app-surface);
}

.media-popover-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.media-popover-duration-badge {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 2;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.72);
  color: #f5f5f5;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.media-popover-gen-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  padding: 1rem 0.375rem 0.25rem;
  font-size: 0.5625rem;
  color: #ccc;
}

.media-popover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.media-popover-error {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #f87171;
}

.studio-preview-trigger {
  display: block;
  cursor: pointer;
  transition: opacity 0.15s;
}

.studio-preview-trigger:hover:not(:disabled) {
  opacity: 0.92;
}

.studio-preview-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.studio-preview-badge {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.25rem 0.625rem;
  font-size: 13px;
  color: var(--app-fg);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.studio-preview-empty {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
}

/* 鈹€鈹€ Dual preview (template + video) 鈹€鈹€ */
.studio-dual-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.studio-preview-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}

.studio-preview-slot-interactive {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.studio-preview-slot-interactive:hover:not(:disabled) {
  border-color: #444;
}

.studio-preview-slot-interactive:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.studio-preview-slot-video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.studio-preview-slot-empty {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
}

.studio-preview-slot-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  padding: 1.25rem 0.375rem 0.375rem;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.studio-preview-slot-name {
  position: absolute;
  left: 0.375rem;
  right: 0.375rem;
  bottom: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-fg);
  pointer-events: none;
}

.studio-preview-slot-badge {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.15rem 0.375rem;
  font-size: 9px;
  color: var(--app-fg);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.asset-verify-banner {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  border-radius: 0.625rem;
  border: 1px solid var(--app-border-strong);
  padding: 0.75rem;
  font-size: 0.75rem;
}

.asset-verify-banner-pending {
  background: var(--app-surface);
  color: #ccc;
}

.asset-verify-banner-success {
  background: rgba(255, 45, 190, 0.06);
  border-color: rgba(255, 45, 190, 0.25);
  color: #ddd;
}

.asset-verify-banner-error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

.asset-verify-banner-info {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.2);
  color: #d4d4d4;
}

.asset-verify-title {
  font-weight: 600;
  color: var(--app-fg-soft);
}

.asset-verify-desc {
  margin-top: 0.2rem;
  line-height: 1.45;
  color: #999;
}

.asset-verify-meta {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #777;
  word-break: break-all;
}

.asset-verify-meta code {
  color: #FF2DBE;
}

.media-popover-verify-badge {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  z-index: 2;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 9px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.media-popover-verify-badge-passed {
  background: rgba(255, 45, 190, 0.85);
  color: var(--app-surface-4);
}

.media-popover-verify-badge-failed {
  background: rgba(248, 113, 113, 0.9);
  color: var(--app-fg);
}

.media-popover-verify-badge-skipped,
.media-popover-verify-badge-not_required {
  background: rgba(251, 191, 36, 0.85);
  color: var(--app-surface-4);
}

/* 鈹€鈹€ 宸ュ叿绫伙細灏忓睆榛樿闅愯棌锛屸墺640px 鏄剧ず 鈹€鈹€ */
.sm-inline {
  display: none;
}

@media (min-width: 640px) {
  .sm-inline {
    display: inline;
  }
}

/* 鐢佃剳绔粯璁や笉鏄剧ず濯掍綋搴撻伄缃╋紱涓嬫柟 max-width 瑙勫垯浼氬湪灏忓睆瑕嗙洊 */
.media-popover-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

/* 鈹€鈹€ 绉诲姩绔€傞厤锛堜粎 <768px锛屼笉褰卞搷鐢佃剳绔級鈹€鈹€ */
@media (max-width: 767px) {
  .admin-body {
    flex-direction: column;
  }

  .admin-sidebar,
  .admin-sidebar-collapsed {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--app-border-subtle);
    padding: 0.75rem;
  }

  .admin-sidebar-head,
  .admin-sidebar-toggle,
  .admin-nav-chevron {
    display: none;
  }

  .admin-sidebar-collapsed .admin-nav-item {
    justify-content: flex-start;
    width: auto;
    padding: 0.5625rem 0.625rem;
  }

  .admin-sidebar-collapsed .admin-nav-item span {
    display: inline;
  }

  .admin-sidebar-nav,
  .admin-nav-group,
  .admin-nav-children {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-nav-item,
  .admin-nav-group-row .admin-nav-item {
    width: auto;
    flex: 0 0 auto;
  }

  .admin-nav-child {
    padding-left: 0.625rem;
  }

  .admin-nav-children,
  .admin-nav-children-hidden,
  .admin-sidebar-collapsed .admin-nav-children {
    display: flex;
  }

  /* 移动端侧栏横向铺开：角标跟随文字排布，不再叠在图标上 */
  .admin-sidebar-collapsed .admin-nav-item .admin-nav-badge {
    position: static;
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    padding: 0 0.375rem;
    font-size: 0.75rem;
  }

  /* 移动端子菜单强制展开，只在子项上显示角标，避免与父级汇总角标重复。
     选择器要与上一条「移动端收起态角标」规则同等特异性并放在其后，
     否则会被 display:inline-flex 覆盖，导致移动端 + 收起态出现两个角标。 */
  .admin-nav-group-row .admin-nav-item .admin-nav-badge-aggregate {
    display: none;
  }

  /* Auth锛氭墜鏈轰笂涔熶繚鎸佸眳涓紝鍙暐鏀剁揣杈硅窛 */
  .auth-shell {
    padding: 24px 16px;
  }

  .auth-card {
    padding: 28px 22px;
  }

  /* 16px 閬垮厤 iOS 鑱氱劍杈撳叆妗嗘椂鑷姩鏀惧ぇ椤甸潰 */
  .auth-field-input,
  .studio-input,
  .studio-search-input,
  select.studio-select {
    font-size: 16px;
  }

  /* Studio shell锛氭暣椤电旱鍚戞粴鍔紝椤舵爮鍥哄畾 */
  .studio-shell {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 顶栏两行：第一行品牌 + 账户，第二行四个产品入口并排 */
  .studio-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.625rem;
    row-gap: 0.75rem;
    padding: 1rem 1.125rem 1.125rem;
    height: auto;
    min-height: 5.25rem;
    align-items: center;
    --studio-nav-row-control-h: 2.5rem;
  }

  .studio-nav-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
    align-self: center;
    min-height: var(--studio-nav-row-control-h);
  }

  /* 行内 Logo 与右侧积分/头像同高，避免第一行视觉中线不一致 */
  .studio-nav-brand .themed-brand-mark-dual {
    width: var(--studio-nav-row-control-h) !important;
    height: var(--studio-nav-row-control-h) !important;
  }

  .studio-nav-logo {
    width: var(--studio-nav-row-control-h);
    height: var(--studio-nav-row-control-h);
  }

  .studio-nav-title {
    line-height: var(--studio-nav-row-control-h);
  }

  .studio-nav-right {
    grid-column: 2;
    grid-row: 1;
    gap: 0.5rem;
    flex-shrink: 0;
    justify-self: end;
    align-self: center;
  }

  .studio-nav-products {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.375rem;
    overflow: visible;
  }

  .studio-nav-products .studio-nav-product {
    min-width: 0;
    width: 100%;
    border-radius: 12px;
  }

  .studio-nav-products .uiverse-pill-inner {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.35rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
  }

  .studio-nav-product-picker {
    display: none;
  }

  .studio-nav-title {
    font-size: 1.3125rem;
  }

  /* 绗竴琛岃吘鍦版柟锛屼笉褰卞搷鐢佃剳绔?*/
  .studio-user-name {
    display: none;
  }

  .studio-nav .studio-credit-label {
    font-size: 0.75rem;
  }

  .studio-nav .studio-credit-balance {
    padding-left: 0.625rem;
    padding-right: 0.75rem;
    gap: 0.25rem;
  }

  .studio-user-logout {
    padding: 0.375rem;
    gap: 0;
    font-size: 0;
  }

  .studio-user-logout svg {
    width: 1rem;
    height: 1rem;
  }

  .studio-body {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 渚ф爮鏀逛负椤堕儴鍏ㄥ锛屼笉鍐嶅崰鍥哄畾渚ф爮瀹藉害 */
  .studio-sidebar {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--app-border-subtle);
  }

  .studio-sidebar-header {
    padding: 0.75rem 1rem;
  }

  /* 移动端收紧表单节奏，让首屏露出更多内容 */
  .studio-sidebar-content {
    flex: none;
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
    overflow: visible;
  }

  .studio-sidebar .studio-field {
    margin-bottom: 0.5rem;
  }

  .studio-sidebar .studio-label {
    margin-bottom: 0.25rem;
  }

  .studio-sidebar .upload-zone {
    padding: 1.5rem 0.75rem;
  }

  /* 生成按钮在移动端吸底，便于单手触达 */
  .studio-sidebar-footer {
    position: sticky;
    bottom: 0;
    z-index: 12;
    padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: var(--app-bg);
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.45);
  }

  .studio-sidebar-footer .uiverse-generate-btn.uiverse-generate-btn--fluid {
    max-width: none;
  }

  /* 鍏ㄥ鍚庡弻棰勮骞舵帓锛屾洿鐪佺旱鍚戠┖闂?*/
  .studio-dual-preview {
    grid-template-columns: 1fr 1fr;
  }

  .studio-main {
    flex: 1 0 auto;
    min-height: 0;
  }

  /* 二级 Tab（模板 / 生成相册）随 .studio-body 一起滚，不与顶栏产品入口脱节 */
  .studio-header {
    padding: 0.75rem 1rem;
    position: static;
    z-index: auto;
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
  }

  .studio-header.studio-header--with-back {
    padding: 0.375rem 1rem 0.625rem;
  }

  .studio-header-nav {
    gap: 0.375rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .studio-header-nav::-webkit-scrollbar {
    display: none;
  }

  .studio-tab:not(.studio-workspace-tab) .uiverse-pill-inner {
    font-size: 0.9375rem;
    min-height: 2.625rem;
    padding: 0.5625rem 1rem;
  }

  .studio-main-scroll {
    overflow: visible;
    padding: 1rem 0.875rem 1.5rem;
  }

  /* 鎼滅储妗嗗皬灞忔媺婊″搴︼紙瑕嗙洊缁勪欢鍐呰仈 maxWidth锛?*/
  .studio-search-wrap > div {
    max-width: none !important;
    margin-left: 0 !important;
  }

  .studio-toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
    width: auto;
    max-width: none;
    transform: none;
    text-align: center;
  }

  /* 濯掍綋搴擄細灏忓睆鏀逛负搴曢儴寮瑰眰锛屽拷鐣?JS 瀹氫綅 */
  .media-popover-backdrop {
    display: block;
  }

  .media-popover {
    top: auto !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem;
    width: auto !important;
    max-height: min(70dvh, 480px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .media-popover-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

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

/* ── AI 口播页（/studio）：移动端放大「已选模板 + 上传视频」预览区 ───────────
 * 手机上原先是并排两个 16:9 小格（390px 宽时只有约 171×96），模板画面和用户
 * 自己上传的视频都看不清。这里保持并排，把两格改成与模板卡片一致的 4:5 竖版：
 * 宽度不变、高度约翻倍（390px 宽约 171×213），一眼就能确认「选中的模板」和
 * 「自己的视频」是否对味，也顺带避免 16:9 横向裁掉竖屏短片的上下内容。
 * 极窄屏（≤379px）仍是单列 16:9 大图，本来就够大，不在本次放大范围内；
 * 横屏时屏幕高度本来就紧张，也保持原来的紧凑排版。
 */
@media (min-width: 380px) and (max-width: 767px) and (orientation: portrait) {
  .studio-dual-preview {
    grid-template-columns: 1fr 1fr;
  }

  .studio-preview-slot {
    aspect-ratio: 4 / 5;
  }
}

/* 平板竖屏 / 大屏手机：侧栏变全宽后给预览区限宽并居中，避免竖版格子被拉得过高 */
@media (min-width: 540px) and (max-width: 767px) and (orientation: portrait) {
  .studio-dual-preview {
    max-width: 30rem;
    margin-inline: auto;
  }
}

/* 预览格变大后，格内文案 / 图标同步放大一档，触屏上更易读 */
@media (max-width: 767px) {
  .studio-sidebar .studio-preview-slot-label {
    padding: 1.5rem 0.5rem 0.5rem;
    font-size: 12px;
  }

  .studio-sidebar .studio-preview-slot-name {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 1.5rem;
    font-size: 15px;
  }

  .studio-sidebar .studio-preview-slot-badge {
    right: 0.4rem;
    top: 0.4rem;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    font-size: 12px;
  }

  .studio-sidebar .studio-preview-slot-badge svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .studio-preview-slot-empty svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .studio-preview-slot-empty p:first-of-type {
    font-size: 0.9375rem;
  }

  /* 提示语保持原字号：窄屏（380–390px）下再放大一档会折成「…最长 2 分 / 钟」 */
  .studio-preview-slot-empty p + p {
    margin-top: 0.25rem;
  }
}

/* 极窄屏：模板网格单列，媒体库两列，产品入口横向滑动 */
@media (max-width: 379px) {
  .preset-grid {
    grid-template-columns: 1fr;
  }

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

  .studio-dual-preview {
    grid-template-columns: 1fr;
  }

}

/* 鈹€鈹€ Viral Presets 鍏ㄥ睆椹禌鍏嬪 鈹€鈹€ */
.studio-shell-viral-presets {
  background: #000;
}

.studio-shell-viral-presets .studio-nav {
  background: #000;
  border-bottom-color: var(--app-surface-2);
}

.vp-gallery {
  flex: 1;
  min-height: 0;
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 28px;
  background: #000;
}

.vp-hero {
  padding: 1.75rem 1rem 1.25rem;
  text-align: center;
}

.vp-hero-title {
  margin: 0 0 0.65rem;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #FF2DBE;
}

.vp-hero-subtitle {
  margin: 0 auto 1.1rem;
  max-width: 36rem;
  padding: 0 0.5rem;
  font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--app-fg-muted);
}

.vp-tag-cloud-shell {
  --vp-tag-cloud-collapsed-max: 6.125rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.vp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.vp-tag-cloud-toggle {
  display: none;
}

.vp-tag-cloud-toggle-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.vp-tag-cloud-toggle-icon-open {
  transform: rotate(180deg);
}

.vp-tag-cloud-skeleton {
  pointer-events: none;
}

.vp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 4px;
  background: #000;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--app-fg);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.vp-tag:hover {
  border-color: rgba(255, 45, 190, 0.65);
  color: #FF2DBE;
}

.vp-tag-active,
.vp-tag-active:hover {
  border-color: #FF2DBE;
  background: linear-gradient(135deg, #FF2DBE 0%, #FF2DBE 48%, #FF2DBE 100%);
  color: #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(255, 45, 190, 0.28);
}

.vp-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.28rem;
  border-radius: 2px;
  background: #FF2DBE;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #000;
}

.vp-tag-active .vp-tag-badge {
  background: #000;
  color: #FF2DBE;
}

.vp-filter-empty {
  margin: 2rem 1rem 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--app-fg-muted);
}

.vp-masonry {
  display: block;
  columns: 2;
  column-gap: 2px;
  padding: 0 2px;
}

.vp-masonry > * {
  break-inside: avoid;
  margin-bottom: 2px;
}

/*
 * 行优先瀑布流（JS 按断点分栏后启用）：
 * 覆盖上面的 CSS columns 报纸式竖排（先填满左栏再填右栏会导致
 * 移动端/桌面端阅读顺序错乱），改为每栏一个纵向 flex 容器，
 * 使「从左到右、从上到下」的视觉顺序与列表排序一致。
 * 双类名 .vp-masonry.vp-masonry-flex 保证优先级高于各断点下的 .vp-masonry。
 */
.vp-masonry.vp-masonry-flex {
  columns: auto;
  display: flex;
  align-items: flex-start;
}

.vp-masonry-flex > .vp-masonry-col {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-mosaic-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--app-surface-4);
}

/*
 * 下面三种 tile 比例只是「封面元数据就绪前」的占位比例：
 * 模板墙卡片在拿到封面视频 / 图片的真实宽高后，会用 JS 内联 aspect-ratio 覆盖这里，
 * 让卡片盒子跟随封面原生比例，避免 object-fit: cover 把横屏封面裁切放大。
 */
.vp-mosaic-card-wide {
  aspect-ratio: 16 / 10;
}

.vp-mosaic-card-square {
  aspect-ratio: 1 / 1;
}

.vp-mosaic-card-tall {
  aspect-ratio: 9 / 16;
}

.vp-mosaic-hit {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.vp-mosaic-media {
  position: relative;
  height: 100%;
  width: 100%;
}

.vp-scene-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 生成页侧栏等固定高度的预览框：contain 完整显示整段画面，不裁切横屏封面 */
.vp-scene-media-contain {
  object-fit: contain;
}

.vp-mosaic-media .preset-card-fullscreen {
  z-index: 4;
}

.vp-mosaic-card .vp-scene-fade {
  opacity: 0;
}

.vp-mosaic-overlay,
.vp-mosaic-name,
.vp-mosaic-generate {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vp-mosaic-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: none;
}

.vp-mosaic-name {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 1rem 1.1rem 3.2rem;
  pointer-events: none;
  text-align: center;
}

.vp-mosaic-name-en {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--app-fg);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.vp-mosaic-name-zh {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--app-fg);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.vp-mosaic-generate.uiverse-generate-btn {
  font-size: 15px;
  width: 7.5em;
  height: 2.85em;
  min-height: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  margin: 0;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.28s ease;
}

@media (hover: hover) {
  .vp-mosaic-card:hover .vp-mosaic-overlay,
  .vp-mosaic-card:hover .vp-mosaic-name,
  .vp-mosaic-card:hover .vp-mosaic-generate,
  .vp-mosaic-card:focus-within .vp-mosaic-overlay,
  .vp-mosaic-card:focus-within .vp-mosaic-name,
  .vp-mosaic-card:focus-within .vp-mosaic-generate {
    opacity: 1;
  }

  .vp-mosaic-card:hover .vp-mosaic-generate,
  .vp-mosaic-card:focus-within .vp-mosaic-generate {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.vp-mosaic-generate:active {
  transform: translateX(-50%) translateY(3px);
}

.vp-mosaic-card-selected {
  outline: 2px solid #FF2DBE;
  outline-offset: 0;
}

@media (min-width: 768px) {
  .vp-masonry {
    columns: 3;
  }
}

@media (min-width: 1024px) {
  .vp-masonry {
    columns: 4;
  }

  .vp-hero {
    padding-top: 2.25rem;
  }
}

@media (min-width: 1440px) {
  .vp-masonry {
    columns: 5;
  }
}

@media (max-width: 767px) {
  .vp-gallery {
    padding-bottom: 22px;
  }

  .vp-hero {
    padding-top: 1.25rem;
  }

  .vp-tag-cloud-shell[data-collapsible="true"]:not([data-expanded="true"])
    .vp-tag-cloud {
    max-height: var(--vp-tag-cloud-collapsed-max);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );
  }

  .vp-tag-cloud-shell[data-collapsible="true"][data-expanded="true"]
    .vp-tag-cloud {
    max-height: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .vp-tag-cloud-shell[data-collapsible="true"] .vp-tag-cloud-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.65rem auto 0;
    padding: 0.42rem 0.85rem;
    /* 与 .vp-tag 一致：背景/边框跟随主题变量，浅色模式为浅色胶囊、粉色文字 */
    border: 1px solid var(--app-border-input);
    border-radius: 4px;
    background: var(--app-bg);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--app-link-fg);
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease;
  }

  .vp-tag-cloud-shell[data-collapsible="true"] .vp-tag-cloud-toggle:hover {
    border-color: var(--app-focus-ring);
    background: rgba(255, 45, 190, 0.08);
  }

  .vp-mosaic-card {
    border-radius: 3px;
  }

  .vp-mosaic-name-en {
    font-size: 1.05rem;
  }

  .vp-mosaic-name-zh {
    font-size: 1.08rem;
  }
}

@media (max-width: 379px) {
  .vp-masonry {
    columns: 2;
  }

  .vp-mosaic-name {
    padding: 0.5rem 0.5rem 2.5rem;
  }

  .vp-mosaic-name-en {
    font-size: 0.9rem;
  }

  .vp-mosaic-name-zh {
    font-size: 0.92rem;
  }

  .vp-mosaic-generate {
    bottom: 10px;
    /* 手机卡片窄：略收内边距，但「生成」字号保持醒目 */
    padding: 0.46rem 0.9rem;
    font-size: 0.9375rem;
  }
}

/* 鈹€鈹€ Viral Presets 鐢熸垚璇︽儏 鈹€鈹€ */
.vp-gen-media-row {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.vp-gen-preset {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-media-bg);
}

.vp-gen-preset-media {
  height: 140px;
  /* contain 显示时左右会露出留白，用媒体系背景色而不是透明，避免透出边框/底色 */
  background: var(--app-media-bg);
}

/*
 * 生成页侧栏预览用 contain 完整显示封面：封面比例与 140px 高的预览框不一致时
 * 会露出留白。.vp-scene 自带 --app-surface-4 浅色底（动态封面用），这里改成透明，
 * 让外层 .vp-gen-preset 的 --app-media-bg（纯黑，与灯箱播放器一致）透出来。
 */
.vp-gen-preset-media .vp-scene {
  background: transparent;
}

.vp-gen-preset-copy {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.35rem 0.65rem 0.45rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  pointer-events: none;
}

.vp-gen-preset-en {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vp-gen-preset-zh {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-media-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-gen-change {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  padding: 0.2rem 0.55rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-media-fg);
  text-decoration: none;
}

.vp-gen-change:hover {
  background: rgba(0, 0, 0, 0.82);
}

.vp-gen-upload {
  position: relative;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 2px dashed var(--app-border-input);
  background: var(--app-surface);
  text-align: center;
}

.vp-gen-upload-compact {
  min-height: 132px;
  padding: 1.1rem 0.75rem;
}

.vp-gen-upload-hero {
  width: 100%;
  min-height: 12rem;
  padding: 2rem 1rem;
}

.vp-gen-upload:hover,
.vp-gen-upload-active {
  border-color: #FF2DBE;
  background: rgba(255, 45, 190, 0.04);
}

.vp-gen-upload-filled {
  border-style: solid;
  border-color: var(--app-border-strong);
  padding: 0;
}

.vp-gen-upload-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
}

.vp-gen-upload-hero .vp-gen-upload-preview {
  min-height: 18rem;
  max-height: 28rem;
}

.vp-gen-upload-clear {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  height: 1.6rem;
  width: 1.6rem;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--app-media-fg);
  cursor: pointer;
}

.vp-gen-upload-filename {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  font-size: 13px;
  color: var(--app-media-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-gen-upload-title {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-fg-soft);
}

.vp-gen-upload-hint {
  margin: 0.3rem 0 0;
  font-size: 13px;
  color: var(--app-fg-muted);
}

.vp-gen-upload-hint-tip {
  color: var(--app-accent);
}

/*
 * 双人模板：两张图片并排上传（每格上方一个小标签「图片 1 · 主体 A」/「图片 2 · 主体 B」）。
 * 单图模板仍用原来的 hero 上传框，这里的样式不影响 .vp-gen-upload-* 的既有行为。
 */
.vp-gen-upload-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.vp-gen-upload-slot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.vp-gen-upload-slot-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--app-fg-soft);
}

/* 双人小格子比单图的 hero 框矮一些，避免侧栏被两个上传框挤满 */
.vp-gen-upload-slot .vp-gen-upload-compact {
  min-height: 120px;
  flex: 1;
  padding: 0.9rem 0.5rem;
}

.vp-gen-upload-slot .vp-gen-upload-title {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.vp-gen-upload-slot .vp-gen-upload-hint {
  margin-top: 0.25rem;
  font-size: 11px;
  line-height: 1.35;
}

.vp-gen-upload-slot .vp-gen-upload-preview {
  min-height: 120px;
}

/* 双人模板：上传位标签行 + 位置示意浮窗（桌面移入 / 手机点按钮） */
.vp-gen-upload-slot-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.vp-gen-upload-slot--two-person .vp-gen-upload-slot-label {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.vp-two-person-layout-popover-trigger {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: transparent;
  padding: 0.1rem 0;
  font-size: 11px;
  line-height: 1.2;
  color: var(--app-link-fg);
  cursor: pointer;
}

.vp-two-person-layout-popover-trigger:hover {
  text-decoration: underline;
}

.vp-two-person-layout-missing {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--app-fg-muted);
}

.vp-two-person-layout-popover {
  pointer-events: none;
  position: fixed;
  z-index: 85;
  width: 10.5rem;
  overflow: hidden;
  border-radius: 0.55rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.vp-two-person-layout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
  touch-action: manipulation;
}

.vp-two-person-layout-popover--tap {
  pointer-events: auto;
}

.vp-two-person-layout-popover-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 1;
  display: flex;
  height: 1.65rem;
  width: 1.65rem;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.vp-two-person-layout-popover-close:active {
  background: rgba(0, 0, 0, 0.72);
}

.vp-two-person-layout-popover-img {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: contain;
  background: var(--app-surface-2);
}

@media (hover: hover) and (pointer: fine) {
  .vp-two-person-layout-popover-trigger {
    opacity: 0.85;
  }
}

/* 后台双人模板：主体 A/B 位置示意图（小预览即可，不占满屏） */
.admin-two-person-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.admin-two-person-layout-slot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.admin-two-person-layout-slot-head {
  margin: 0;
}

.admin-two-person-layout-slot-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--app-fg-soft);
}

.admin-two-person-layout-slot-tag {
  margin: 0.1rem 0 0;
  font-size: 9px;
  line-height: 1.3;
  color: var(--app-fg-muted);
}

.admin-two-person-layout-thumb {
  display: flex;
  height: 4.25rem;
  max-height: 4.25rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.4rem;
  border: 1px dashed var(--app-border-input);
  background: var(--app-surface-2);
}

.admin-two-person-layout-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-two-person-layout-placeholder {
  padding: 0 0.35rem;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  color: var(--app-fg-muted);
}

.admin-two-person-layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0;
}

.admin-two-person-layout-btn {
  display: inline-flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border-radius: 0.35rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface);
  padding: 0.25rem 0.4rem;
  font-size: 10px;
  color: var(--app-link-fg);
}

.admin-two-person-layout-btn:disabled {
  opacity: 0.6;
}

.admin-two-person-layout-btn-muted {
  flex: 0 0 auto;
  color: var(--app-fg-muted);
}

.vp-gen-workspace {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0 2rem;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

.vp-gen-workspace-hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
}

.vp-gen-main {
  background: #080808;
}

.vp-gen-main-scroll {
  background-color: #080808;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

.vp-gen-workspace-content {
  min-height: 100%;
}

@media (max-width: 767px) {
  .vp-gen-preset-media {
    height: 120px;
  }

  .vp-gen-upload-hero {
    min-height: 14rem;
  }

  /* 竖屏：模板预览更宽，上传区相对窄 */
  @media (orientation: portrait) {
    .vp-gen-media-row {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: 0.5rem;
      align-items: stretch;
    }

    .vp-gen-media-row .vp-gen-preset {
      display: flex;
      min-height: 0;
      flex-direction: column;
    }

    .vp-gen-media-row .vp-gen-preset-media {
      height: auto;
      flex: 1;
      min-height: 9rem;
      aspect-ratio: 4 / 5;
    }

    .vp-gen-media-row .vp-gen-preset-copy {
      padding: 1.1rem 0.5rem 0.4rem;
    }

    .vp-gen-media-row .vp-gen-preset-zh {
      font-size: 12px;
    }

    .vp-gen-media-row .vp-gen-upload-hero {
      min-height: 9rem;
      height: 100%;
      padding: 0.75rem 0.4rem;
    }

    .vp-gen-media-row .vp-gen-upload-hero .vp-gen-upload-preview {
      min-height: 100%;
      max-height: none;
      aspect-ratio: 4 / 5;
    }

    .vp-gen-media-row .vp-gen-upload-title {
      margin-top: 0.4rem;
      font-size: 0.8125rem;
    }

    .vp-gen-media-row .vp-gen-upload-hint {
      margin-top: 0.15rem;
      font-size: 10px;
      line-height: 1.3;
    }

    /* 双人模板：竖屏上传格很窄，两张图改成上下排列，不然每格挤成几十像素 */
    .vp-gen-media-row .vp-gen-upload-pair {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.4rem;
      height: 100%;
    }

    .vp-gen-media-row .vp-gen-upload-slot {
      min-height: 0;
      gap: 0.2rem;
    }

    .vp-gen-media-row .vp-gen-upload-slot-label {
      font-size: 10px;
      line-height: 1.2;
    }

    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-compact {
      min-height: 0;
      flex: 1;
      padding: 0.5rem 0.35rem;
    }

    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-title {
      margin-top: 0.2rem;
      font-size: 10px;
    }

    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-hint {
      margin-top: 0.1rem;
      font-size: 9px;
      line-height: 1.25;
    }

    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-preview {
      min-height: 0;
      max-height: none;
      flex: 1;
      aspect-ratio: 4 / 5;
    }

    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-clear {
      top: 0.25rem;
      right: 0.25rem;
      height: 1.3rem;
      width: 1.3rem;
    }

    /* 文件名在窄格里放不下，隐藏（预览图本身已能辨认） */
    .vp-gen-media-row .vp-gen-upload-slot .vp-gen-upload-filename {
      display: none;
    }
  }

  .vp-gen-workspace {
    padding: 0.5rem 0 1.5rem;
    background-size: 22px 22px;
  }

  .vp-gen-main-scroll {
    background-size: 22px 22px;
  }
}

/* 鈹€鈹€ Viral Presets 鍔ㄦ€佸皝闈?鈹€鈹€ */
.vp-scene {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--app-surface-4);
}

.vp-scene-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
  pointer-events: none;
}

.vp-figure {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 2.25rem;
  transform: translateX(-50%);
}

.vp-figure::before,
.vp-figure::after {
  content: "";
  display: block;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.45);
}

.vp-figure::before {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
}

.vp-figure::after {
  width: 1.85rem;
  height: 2.4rem;
  margin-top: 0.2rem;
  border-radius: 1.1rem 1.1rem 0.4rem 0.4rem;
}

.vp-figure-center {
  bottom: 28%;
}

.vp-figure-gold::before,
.vp-figure-gold::after {
  background: rgba(255, 214, 10, 0.85);
}

.vp-figure-toy::before,
.vp-figure-toy::after {
  background: var(--app-surface-2);
}

.vp-figure-moon::before,
.vp-figure-moon::after {
  background: rgba(245, 245, 247, 0.92);
}

.vp-figure-ink::before,
.vp-figure-ink::after {
  background: var(--app-surface-4);
}

.vp-figure-cold::before,
.vp-figure-cold::after {
  background: #64d2ff;
  box-shadow: 0 0 18px #64d2ff;
}

.vp-figure-bleach::before,
.vp-figure-bleach::after {
  background: #fff;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.8);
}

/* RACE TRACK */
.vp-scene-race-track {
  background: linear-gradient(var(--app-surface-2), #0b0b0b);
}

.vp-race-asphalt {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 46%, #222 46%, #222 54%, transparent 54%),
    repeating-linear-gradient(
      90deg,
      var(--app-surface) 0 12px,
      #1c1c1c 12px 24px
    );
}

.vp-race-lines {
  position: absolute;
  inset: 18% 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 28px,
    #ffd60a 28px 46px
  );
  transform: perspective(220px) rotateX(58deg);
  animation: vp-race-move 0.7s linear infinite;
  opacity: 0.9;
}

.vp-race-car {
  position: absolute;
  left: 38%;
  bottom: 30%;
  width: 3.4rem;
  height: 1.15rem;
  border-radius: 0.4rem;
  background: #ff3b30;
  box-shadow: 0 0 24px rgba(255, 59, 48, 0.45);
}

.vp-race-car::after {
  content: "";
  position: absolute;
  right: -1.4rem;
  top: 0.15rem;
  width: 1.6rem;
  height: 0.85rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent);
}

.vp-race-blur {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: vp-race-streak 1.1s linear infinite;
}

@keyframes vp-race-move {
  from { background-position: 0 0; }
  to { background-position: 74px 0; }
}

@keyframes vp-race-streak {
  from { transform: translateX(-40%); }
  to { transform: translateX(40%); }
}

/* Superstar */
.vp-scene-superstar {
  background: radial-gradient(circle at 50% 20%, #3a2a00, var(--app-bg) 70%);
}

.vp-star-crowd {
  position: absolute;
  inset: 42% 0 0;
  background:
    radial-gradient(circle at 12% 40%, #222 0 8px, transparent 9px),
    radial-gradient(circle at 28% 70%, var(--app-surface-2) 0 10px, transparent 11px),
    radial-gradient(circle at 48% 50%, #222 0 9px, transparent 10px),
    radial-gradient(circle at 70% 75%, var(--app-surface-2) 0 11px, transparent 12px),
    radial-gradient(circle at 88% 45%, #222 0 8px, transparent 9px);
}

.vp-star-screen {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 10%;
  height: 38%;
  border: 3px solid #222;
  background: var(--app-surface-4);
  box-shadow: 0 0 40px rgba(255, 214, 10, 0.25);
}

.vp-star-phones {
  position: absolute;
  inset: 48% 8% 8%;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, #ffd60a 0 2px, transparent 3px),
    radial-gradient(circle at 62% 25%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 78% 70%, #fff 0 2px, transparent 3px);
  animation: vp-twinkle 1.4s ease-in-out infinite;
}

.vp-star-spot {
  position: absolute;
  left: 20%;
  top: 0;
  width: 60%;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255, 214, 10, 0.28), transparent);
}

@keyframes vp-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Bullet time */
.vp-scene-bullet-time {
  background: radial-gradient(circle at 50% 45%, #2a1f4d, #07070c 72%);
}

.vp-bt-ring {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 78%;
  height: 38%;
  border: 2px dashed rgba(124, 92, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(62deg);
  animation: vp-spin 4s linear infinite;
}

.vp-bt-shards {
  position: absolute;
  inset: 18% 12%;
  background:
    linear-gradient(32deg, transparent 48%, rgba(255, 255, 255, 0.55) 49%, transparent 51%),
    linear-gradient(-18deg, transparent 46%, rgba(124, 92, 255, 0.7) 48%, transparent 52%);
  animation: vp-freeze 2.8s ease-in-out infinite;
}

@keyframes vp-spin {
  to { transform: translate(-50%, -50%) rotateX(62deg) rotate(360deg); }
}

@keyframes vp-freeze {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

/* ORBIT 360 */
.vp-scene-orbit-360 {
  background: radial-gradient(circle at 50% 70%, #16324a, #07090c 68%);
}

.vp-orbit-floor {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 16%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 200, 250, 0.18), transparent 70%);
}

.vp-orbit-ring {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 72%;
  height: 34%;
  border: 2px solid rgba(90, 200, 250, 0.75);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg);
}

.vp-orbit-cam {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem;
  border-radius: 999px;
  background: #5ac8fa;
  box-shadow: 0 0 12px #5ac8fa;
  animation: vp-orbit 3.2s linear infinite;
}

@keyframes vp-orbit {
  from { transform: rotateX(66deg) rotate(0deg) translateX(5.4rem); }
  to { transform: rotateX(66deg) rotate(360deg) translateX(5.4rem); }
}

/* Tracking */
.vp-scene-tracking {
  background: #07140a;
}

.vp-track-box {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 3.6rem;
  height: 5.2rem;
  transform: translate(-50%, -20%);
  border: 1px solid #32d74b;
  box-shadow: 0 0 0 1px rgba(50, 215, 75, 0.2);
  animation: vp-lock 1.6s ease-in-out infinite;
}

.vp-track-box::before,
.vp-track-box::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid #32d74b;
}

.vp-track-box::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.vp-track-box::after {
  right: -2px;
  bottom: -2px;
  border-left: 0;
  border-top: 0;
}

.vp-track-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#32d74b, #32d74b) 18% 28% / 22% 1px no-repeat,
    linear-gradient(#32d74b, #32d74b) 62% 72% / 28% 1px no-repeat;
  opacity: 0.7;
}

.vp-track-hud {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #32d74b;
}

@keyframes vp-lock {
  0%, 100% { transform: translate(-50%, -20%) scale(1); }
  50% { transform: translate(-50%, -20%) scale(1.06); }
}

/* EARTH ZOOM */
.vp-scene-earth-zoom {
  background: #02040a;
}

.vp-earth-space {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 40% 8%, #fff, transparent),
    radial-gradient(1px 1px at 78% 22%, #fff, transparent),
    radial-gradient(1px 1px at 88% 60%, #fff, transparent),
    radial-gradient(1px 1px at 20% 70%, #fff, transparent);
}

.vp-earth-globe {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 30%, #7ec8ff, transparent 28%),
    radial-gradient(circle at 60% 55%, #1d6b3a 0 18%, transparent 19%),
    radial-gradient(circle at 30% 62%, #1d6b3a 0 14%, transparent 15%),
    #0a84ff;
  box-shadow: 0 0 40px rgba(10, 132, 255, 0.45);
  animation: vp-zoom 3.6s ease-in-out infinite;
}

.vp-earth-clouds {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.18), transparent 40%);
}

@keyframes vp-zoom {
  0%, 100% { transform: translate(-50%, -50%) scale(0.72); }
  50% { transform: translate(-50%, -50%) scale(1.18); }
}

/* ACTION FIGURE */
.vp-scene-action-figure {
  background: linear-gradient(#2a2118, #12100e);
}

.vp-toy-card {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 10%;
  bottom: 16%;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, #ff9f0a, #c77700);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.vp-toy-window {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  height: 58%;
  border-radius: 0.35rem;
  background: rgba(230, 245, 255, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.vp-toy-label {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 10%;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--app-surface-2);
}

/* 2000'S PAPARAZZI */
.vp-scene-paparazzi-2000s {
  background: #1a1410;
  filter: contrast(1.25) saturate(0.7);
}

.vp-papa-grain {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.08) 0 1px,
    transparent 1px 3px
  );
}

.vp-papa-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.85), transparent 36%);
  animation: vp-flash 1.5s steps(2, end) infinite;
}

.vp-papa-date {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #ff2dbe;
}

@keyframes vp-flash {
  0%, 70% { opacity: 0.15; }
  80% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* MOONWALK */
.vp-scene-moonwalk {
  background: radial-gradient(circle at 70% 18%, #3a3a48, #09090b 68%);
}

.vp-moon-ground {
  position: absolute;
  inset: 58% 0 0;
  background:
    radial-gradient(circle at 30% 20%, #3a3a3c 0 12px, transparent 13px),
    radial-gradient(circle at 70% 50%, #2c2c2e 0 18px, transparent 19px),
    #1c1c1e;
}

.vp-moon-earth {
  position: absolute;
  right: 14%;
  top: 14%;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #5ac8fa, #0a84ff);
  box-shadow: 0 0 16px rgba(10, 132, 255, 0.5);
}

.vp-moon-dust {
  position: absolute;
  left: 28%;
  bottom: 22%;
  width: 3rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(229, 229, 234, 0.25);
  animation: vp-dust 1.8s ease-in-out infinite;
}

@keyframes vp-dust {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(-10px); opacity: 0.7; }
}

/* Flash comic */
.vp-scene-flash-comic {
  background: repeating-conic-gradient(from 0deg, #ffd60a 0 8deg, var(--app-surface-4) 8deg 16deg);
}

.vp-flash-burst {
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle, #fff 0 12%, #ffd60a 13% 28%, transparent 42%);
}

.vp-flash-word {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 1.35rem;
  font-weight: 900;
  color: #ff2dbe;
  text-shadow: 2px 2px 0 var(--app-surface-4);
}

/* Comic */
.vp-scene-comic {
  background: #f4e7c5;
}

.vp-comic-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--app-surface-4) 1px, transparent 1.2px);
  background-size: 8px 8px;
  opacity: 0.28;
}

.vp-comic-panel {
  position: absolute;
  inset: 8%;
  border: 4px solid var(--app-surface-4);
  box-shadow: 6px 6px 0 var(--app-surface-4);
}

/* Fragments */
.vp-scene-fragments {
  background: #120818;
}

.vp-frag {
  position: absolute;
  background: linear-gradient(135deg, #bf5af2, #5e5ce6);
  opacity: 0.75;
}

.vp-frag.a {
  left: 12%;
  top: 16%;
  width: 42%;
  height: 28%;
  clip-path: polygon(0 20%, 100% 0, 80% 100%, 10% 90%);
  animation: vp-frag 3s ease-in-out infinite;
}

.vp-frag.b {
  right: 8%;
  top: 28%;
  width: 38%;
  height: 34%;
  clip-path: polygon(20% 0, 100% 18%, 70% 100%, 0 80%);
  animation: vp-frag 3s ease-in-out 0.4s infinite;
}

.vp-frag.c {
  left: 22%;
  bottom: 18%;
  width: 48%;
  height: 26%;
  clip-path: polygon(0 0, 90% 10%, 100% 100%, 12% 80%);
  animation: vp-frag 3s ease-in-out 0.8s infinite;
}

@keyframes vp-frag {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -8px); }
}

/* Cold vision */
.vp-scene-cold-vision {
  background: #041018;
}

.vp-cold-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(100, 210, 255, 0.08) 0 2px,
    transparent 2px 6px
  );
  animation: vp-scan 2.4s linear infinite;
}

.vp-cold-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.75);
}

@keyframes vp-scan {
  from { background-position: 0 0; }
  to { background-position: 0 24px; }
}

/* Overexposed */
.vp-scene-overexposed {
  background: linear-gradient(#fff6d8, #cfc4a4);
}

.vp-over-sun {
  position: absolute;
  left: 18%;
  top: 8%;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.85);
}

.vp-over-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 45%);
  animation: vp-bloom 2.2s ease-in-out infinite;
}

@keyframes vp-bloom {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 鈹€鈹€ Marketing Studio 鈹€鈹€ */
.ms-layout {
  display: flex;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.ms-sidebar {
  display: flex;
  width: 15.5rem;
  flex-shrink: 0;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(165deg, rgba(255, 45, 190, 0.07) 0%, transparent 42%),
    linear-gradient(180deg, #131313 0%, #0c0c0c 100%);
  padding: 0.875rem 0.625rem;
  transition: width 0.2s ease;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

.ms-sidebar-collapsed {
  width: 3.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ms-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0.375rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ms-sidebar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
}

.ms-sidebar-brand-mark {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: linear-gradient(145deg, rgba(255, 45, 190, 0.28), rgba(255, 45, 190, 0.08));
  color: #ff6fd4;
  box-shadow:
    0 0 0 1px rgba(255, 45, 190, 0.22),
    0 6px 16px rgba(255, 45, 190, 0.12);
}

.ms-sidebar-brand-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0f0f0;
  letter-spacing: 0.02em;
}

.ms-sidebar-toggle {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-fg);
}

.ms-sidebar-collapsed .ms-sidebar-head {
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.75rem;
}

.ms-sidebar-collapsed .ms-sidebar-brand-text,
.ms-sidebar-collapsed .ms-nav-item-label,
.ms-sidebar-collapsed .ms-nav-item-text,
.ms-sidebar-collapsed .ms-sidebar-section-title {
  display: none;
}

.ms-sidebar-collapsed .ms-sidebar-projects-label {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.ms-sidebar-collapsed .ms-nav-item {
  justify-content: center;
  padding: 0.4375rem 0.375rem;
}

.ms-sidebar-nav,
.ms-sidebar-projects {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.ms-sidebar-projects {
  flex: 1;
  min-height: 0;
  margin-top: 0.25rem;
}

.ms-sidebar-divider {
  flex-shrink: 0;
  height: 1px;
  margin: 0.625rem 0.5rem 0.75rem;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent
  );
}

.ms-sidebar-projects-label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 0.5rem;
}

.ms-sidebar-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c5c5c;
}

.ms-sidebar-projects-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.125rem;
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-input) transparent;
}

.ms-sidebar-projects-scroll::-webkit-scrollbar {
  width: 4px;
}

.ms-sidebar-projects-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--app-border-input);
}

.ms-nav-item-mobile-only {
  display: none;
}

.ms-sidebar-add {
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 45, 190, 0.12);
  color: #ff8ee0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.ms-sidebar-add:hover {
  background: rgba(255, 45, 190, 0.22);
  color: var(--app-fg);
  transform: scale(1.04);
}

.ms-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: #a3a3a3;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.4375rem 0.5rem;
  text-align: left;
  transition:
    color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

.ms-nav-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--app-fg-muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.ms-nav-item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-nav-item:hover {
  color: var(--app-fg-soft);
  background: rgba(255, 255, 255, 0.04);
}

.ms-nav-item:hover .ms-nav-icon {
  background: rgba(255, 45, 190, 0.1);
  color: #ffb8eb;
}

.ms-nav-item-active {
  color: var(--app-fg);
  background: rgba(255, 45, 190, 0.1);
  box-shadow: inset 3px 0 0 #ff2dbe;
}

.ms-nav-item-active .ms-nav-icon {
  background: rgba(255, 45, 190, 0.22);
  color: #ff9ce8;
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.25);
}

.ms-nav-item-active:hover {
  color: var(--app-fg);
  background: rgba(255, 45, 190, 0.14);
}

.ms-nav-item-active:hover .ms-nav-icon {
  background: rgba(255, 45, 190, 0.28);
  color: #ffc4ef;
}

.ms-nav-item-active .ms-nav-badge {
  background: #ff2dbe;
  color: var(--app-bg);
}

.ms-nav-muted {
  color: #666;
  margin-top: 0.125rem;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ms-nav-muted:hover {
  color: var(--app-fg-subtle);
  border-color: rgba(255, 45, 190, 0.25);
  background: rgba(255, 45, 190, 0.06);
}

.ms-nav-muted .ms-nav-icon {
  background: transparent;
  color: #666;
}

.ms-nav-muted:hover .ms-nav-icon {
  color: #ff8ee0;
}

.ms-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.5rem 3rem;
}

.ms-panel {
  max-width: 72rem;
  margin: 0 auto;
}

.ms-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}

.ms-hero-badge {
  margin: 0 0 0.75rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-fg-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 0.3125rem 0.75rem;
}

.ms-hero-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 44rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
  /* 留出阴影扩散空间，避免被 overflow 裁切 */
  overflow: visible;
  padding: 0.625rem 1.5rem 1.75rem;
}

.ms-hero-stage {
  --ms-hero-scale: 0.77;
  position: relative;
  flex: 1;
  height: 13.25rem;
  touch-action: pan-y;
  user-select: none;
  overflow: visible;
}

.ms-hero-card > * {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-hero-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(7.5rem * var(--ms-hero-scale));
  height: calc(10.5rem * var(--ms-hero-scale));
  margin-left: calc(-3.75rem * var(--ms-hero-scale));
  overflow: hidden;
  border: 0;
  border-radius: 0.875rem;
  padding: 0;
  background: transparent;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.45s ease, opacity 0.45s ease, width 0.45s ease, height 0.45s ease, margin-left 0.45s ease;
}

.ms-hero-slot-0 {
  width: calc(9.25rem * var(--ms-hero-scale));
  height: calc(13rem * var(--ms-hero-scale));
  margin-left: calc(-4.625rem * var(--ms-hero-scale));
  z-index: 5;
  transform: translateX(0) translateY(-50%) scale(1);
  opacity: 1;
  cursor: default;
}

.ms-hero-slot-0.ms-hero-card-link {
  cursor: pointer;
}

.ms-hero-slot-m1 {
  z-index: 3;
  transform: translateX(calc(-6.4rem * var(--ms-hero-scale))) translateY(-50%) scale(0.88);
  opacity: 0.78;
}

.ms-hero-slot-m1:hover,
.ms-hero-slot-1:hover,
.ms-hero-slot-m2:hover,
.ms-hero-slot-2:hover {
  opacity: 1;
}

.ms-hero-slot-1 {
  z-index: 3;
  transform: translateX(calc(6.4rem * var(--ms-hero-scale))) translateY(-50%) scale(0.88);
  opacity: 0.78;
}

.ms-hero-slot-m2 {
  z-index: 1;
  transform: translateX(calc(-11.2rem * var(--ms-hero-scale))) translateY(-50%) scale(0.72);
  opacity: 0.55;
}

.ms-hero-slot-2 {
  z-index: 1;
  transform: translateX(calc(11.2rem * var(--ms-hero-scale))) translateY(-50%) scale(0.72);
  opacity: 0.55;
}

.ms-hero-slot-hidden {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) translateY(-50%) scale(0.5);
}

.ms-slide-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ms-slide-label {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 0.8rem);
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  /* 叠在海报图上，与页面主题色解耦：浅色模式下勿用 --app-fg（深色字） */
  background: rgba(8, 12, 16, 0.62);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding: 0.28rem 0.55rem;
  pointer-events: none;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ms-scene-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
  font-size: 0.75rem;
  padding: 0.75rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ms-hero-card {
    transition: none;
  }
}

.ms-hero-title {
  position: relative;
  z-index: 1;
  margin: 0.25rem auto 1rem;
  max-width: 38rem;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.ms-composer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.35rem;
  max-width: 60rem;
  margin: 0 auto 0.875rem;
}

.ms-composer-sized {
  width: max-content;
  max-width: min(100%, calc(100vw - 2rem));
  grid-template-columns: auto auto;
}

.ms-composer-sized .ms-bar {
  flex: 0 0 auto;
}

body.ms-resizing {
  cursor: nwse-resize;
  user-select: none;
}

.ms-mode-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.25rem;
  width: calc(4.25rem + 0.9rem + 2px);
  /* 涓嶅弬涓庢拺楂樿繖涓€琛岋紝楂樺害鍙窡鍙宠竟鎻愮ず璇嶆璧?*/
  height: 0;
  min-height: 100%;
  overflow: hidden;
  padding: 0.45rem 0.4rem;
  border: 1px solid var(--app-border);
  border-radius: 1.25rem;
  background: var(--app-surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.ms-bar {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.75rem;
  /* 60rem 鐢熸垚鏍忓噺鍘诲乏杈规ā寮忓崱鐗囧拰闂磋窛锛岀獥鍙ｆ洿绐勬椂鎸夊睆骞曟敹 */
  min-width: min(54.75rem, calc(100vw - 7.25rem));
  flex: 1;
  position: relative;
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 1.25rem;
  background: var(--app-surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.ms-bar-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  z-index: 5;
}

.ms-bar-resizing {
  border-color: var(--brand-accent-muted-border);
}

.ms-bar-top {
  display: flex;
  min-width: 0;
  flex: 1;
  min-height: 0;
}

.ms-bar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 0.65rem;
  min-width: 0;
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid #222;
}

.ms-bar-toolbar {
  --ms-toolbar-chip-bg: #1c1c1c;
  --ms-toolbar-chip-bg-hover: var(--app-border);
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ms-bar-toolbar-sep {
  display: none;
  flex-shrink: 0;
  align-self: center;
  width: 1px;
  height: 1.125rem;
  background: var(--app-border-input);
}

@media (min-width: 769px) {
  .ms-bar-toolbar-sep {
    display: block;
  }
}

.ms-chip-style {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-chip-truncate {
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-params-chip {
  max-width: min(100%, 14rem);
  height: 2.125rem;
  min-height: 2.125rem;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0.35rem;
  justify-content: space-between;
}

.ms-bar-chip-row-params .ms-params-summary {
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-bar-chip-row-params .ms-params-tag {
  font-size: 0.75rem;
}

.ms-params-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.28rem;
  min-width: 0;
}

.ms-params-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: inherit;
  line-height: 1.2;
}

.ms-params-tag + .ms-params-tag::before {
  content: "·";
  margin-right: 0.28rem;
  opacity: 0.45;
}

.ms-chip-truncate-wrap {
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-params-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  width: min(16.5rem, calc(100vw - 2rem));
  padding: 0.65rem;
  border: 1px solid #2e2e2e;
  border-radius: 0.9rem;
  background: var(--app-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ms-params-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.35rem 0;
}

.ms-params-row + .ms-params-row {
  border-top: 1px solid #222;
}

.ms-params-label {
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
}

.ms-params-row-duration {
  align-items: start;
}

.ms-params-row-duration .ms-params-control {
  min-width: 0;
}

.ms-params-duration {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.ms-params-duration-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FF2DBE;
}

.ms-params-duration-range {
  width: 100%;
  accent-color: #FF2DBE;
  cursor: pointer;
}

.ms-params-duration-range-placeholder {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--app-border-strong);
  cursor: default;
}

.ms-params-duration-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

.ms-params-row-resolution .ms-params-pills {
  flex-wrap: nowrap;
}

.ms-params-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ms-params-pill {
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface-2);
  color: #ccc;
  font-size: 0.875rem;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
}

.ms-params-pill-on {
  border-color: #FF2DBE;
  color: #FF2DBE;
  background: var(--brand-accent-muted-bg);
}

.ms-params-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface-2);
  color: #ccc;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 0.45rem;
}

.ms-params-qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ms-params-qty button:disabled {
  opacity: 0.35;
  cursor: default;
}

.ms-bar-resize {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  z-index: 4;
  pointer-events: none;
}

@media (pointer: fine) {
  .ms-bar-resize {
    pointer-events: auto;
  }
}

.ms-bar-resize-icon {
  display: block;
  pointer-events: none;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 1.35;
  stroke-linecap: round;
}

.ms-bar-resize-xy:hover .ms-bar-resize-icon,
.ms-bar-resizing .ms-bar-resize-icon {
  stroke: #FF2DBE;
}

.ms-bar-resize-x {
  top: 0.9rem;
  right: 0;
  bottom: 1.5rem;
  width: 0.7rem;
  cursor: ew-resize;
}

.ms-bar-resize-y {
  left: 0.9rem;
  right: 1.5rem;
  bottom: 0;
  height: 0.7rem;
  cursor: ns-resize;
}

.ms-bar-resize-xy {
  right: 0.28rem;
  bottom: 0.28rem;
  width: 1.15rem;
  height: 1.15rem;
  cursor: nwse-resize;
}

.ms-bar-resize-xy .ms-bar-resize-icon {
  width: 100%;
  height: 100%;
}

.ms-mode {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 4.25rem;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--app-fg-muted, #777);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.45rem 0.25rem;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ms-mode:not(.ms-mode-active):hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--app-fg-soft, #aaa);
}

.ms-mode-active {
  background: rgba(255, 45, 190, 0.16);
  border-color: rgba(255, 45, 190, 0.55);
  color: var(--app-fg, #fff);
  box-shadow:
    0 0 0 1px rgba(255, 45, 190, 0.22),
    0 6px 16px rgba(255, 45, 190, 0.2);
}

.ms-mode-active svg {
  color: #ff2dbe;
}

.ms-bar-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  position: relative;
  border-radius: 0.75rem;
}

.ms-bar-main-drag {
  outline: 1px dashed #FF2DBE;
  outline-offset: 2px;
  background: var(--brand-accent-muted-bg);
}

.ms-bar-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.ms-ref-thumb {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.ms-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 1px solid var(--app-border-strong);
}

.ms-ref-remove {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--app-border-input);
  border-radius: 999px;
  background: var(--app-surface-4);
  color: #ccc;
  padding: 0;
}

.ms-ref-remove:hover {
  color: var(--app-fg);
  border-color: #555;
}

.ms-bar-input {
  width: 100%;
  min-height: 4.5rem;
  flex: 1;
  margin: 0;
  padding: 0;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--app-fg);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  outline: none;
}

.ms-bar-input::placeholder {
  color: #666;
}

.ms-bar-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ms-bar-chip-row-primary {
  flex: 0 0 auto;
}

.ms-bar-chip-row-params {
  flex: 1 1 auto;
  min-width: 0;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 2.125rem;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid #2c2c2c;
  border-radius: 0.5rem;
  background: #181818;
  color: #c8c8c8;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 0.625rem;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.ms-bar .ms-chip-btn:hover:not(:disabled),
.ms-bar .ms-chip-menu-trigger:hover {
  border-color: #3a3a3a;
  background: var(--app-border-subtle);
  color: #eee;
}

.ms-chip-model {
  color: #ff8ee0;
  border-color: rgba(255, 45, 190, 0.35);
  background: rgba(255, 45, 190, 0.08);
}

.ms-chip-btn,
.ms-chip-menu-trigger,
.ms-qty button {
  cursor: pointer;
}

.ms-chip-btn {
  background: var(--app-surface-2);
  color: #ccc;
}

.ms-chip-on {
  border-color: rgba(255, 45, 190, 0.55);
  color: #ffb8ec;
  background: rgba(255, 45, 190, 0.1);
}

/* 生成栏工具条：参考图/风格/模型/参数等 chip 无边框 + 浅底；人物·产品在 .ms-bar-actions 仍带边框 */
.ms-bar-toolbar .ms-chip {
  border: none;
  background: var(--ms-toolbar-chip-bg);
}

.ms-bar-toolbar .ms-chip-btn {
  background: var(--ms-toolbar-chip-bg);
}

.ms-bar-toolbar .ms-chip-btn:hover:not(:disabled),
.ms-bar-toolbar .ms-chip-menu-trigger:hover {
  border-color: transparent;
  background: var(--ms-toolbar-chip-bg-hover);
  color: #eee;
}

.ms-bar-toolbar .ms-chip-model {
  border: none;
  background: #221a20;
}

.ms-bar-toolbar .ms-chip-model:hover {
  background: #2a1f28;
}

.ms-bar-toolbar .ms-chip-on {
  border: none;
  color: #ffb8ec;
  background: rgba(255, 45, 190, 0.12);
}

.ms-bar-toolbar .ms-chip-menu-trigger[aria-expanded="true"] {
  border: none;
  background: rgba(255, 45, 190, 0.12);
  color: #ffb8ec;
}

.ms-chip-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.ms-chip-menu-wrap {
  position: relative;
}

.ms-chip-menu-trigger {
  font: inherit;
}

.ms-chip-menu-trigger[aria-expanded="true"] {
  border-color: #FF2DBE;
}

.ms-chip-caret {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.16s ease;
}

.ms-chip-caret-open {
  transform: rotate(180deg);
}

.ms-chip-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  min-width: 13.5rem;
  padding: 0.35rem;
  border: 1px solid #2e2e2e;
  border-radius: 0.9rem;
  background: var(--app-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ms-chip-menu-right {
  left: auto;
  right: 0;
}

.ms-chip-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: #ddd;
  text-align: left;
  padding: 0.5rem 0.55rem;
}

.ms-chip-menu-item:hover {
  background: var(--app-border-subtle);
  color: var(--app-fg);
}

.ms-chip-menu-item-on {
  background: var(--brand-accent-muted-bg);
  color: #FF2DBE;
}

.ms-chip-menu-item-on:hover {
  background: var(--brand-accent-muted-bg-hover);
  color: #FF2DBE;
}

.ms-chip-menu-check {
  display: inline-flex;
  width: 0.875rem;
  height: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}

.ms-chip-menu-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ms-chip-menu-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.ms-chip-menu-hint {
  margin-top: 0.15rem;
  color: var(--app-fg-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
}

/* 电商直出：竖屏下 chip 下拉改为底部抽屉，避免被生成栏与滚动区域遮挡 */
.ms-chip-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.ms-chip-sheet-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.58);
  cursor: default;
}

.ms-chip-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 640px);
  border: 1px solid #2e2e2e;
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  background: var(--app-surface);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55);
  animation: ms-chip-sheet-in 0.22s ease-out;
}

@keyframes ms-chip-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.ms-chip-sheet-panel.ms-params-menu,
.ms-chip-sheet-panel.ms-chip-menu,
.ms-chip-sheet-panel.ms-aspect-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  box-shadow: none;
  padding: 0;
}

.ms-chip-sheet-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem 0.45rem;
  border-bottom: 1px solid #252525;
}

.ms-chip-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-fg-soft);
}

.ms-chip-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--app-border-subtle);
  color: var(--app-fg-subtle);
  cursor: pointer;
}

.ms-chip-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.65rem 0.75rem 0.5rem;
}

.ms-chip-sheet-panel.ms-chip-menu .ms-chip-sheet-body {
  padding-top: 0.35rem;
}

.ms-chip-sheet-body > .ms-aspect-menu-head {
  display: none;
}

.ms-chip-sheet-done {
  flex-shrink: 0;
  margin: 0.35rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  min-height: 2.75rem;
  border: 1px solid var(--brand-accent-muted-border);
  border-radius: 999px;
  background: var(--brand-accent-muted-bg);
  color: #ff8ee0;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

/* 画面比例：双列网格 + 比例示意图标 */
.ms-aspect-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 35;
  pointer-events: auto;
  width: min(15.5rem, calc(100vw - 2rem));
  padding: 0.55rem 0.55rem 0.65rem;
  border: 1px solid #2e2e2e;
  border-radius: 0.85rem;
  background: var(--app-surface-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ms-aspect-menu-right {
  left: auto;
  right: 0;
}

.ms-aspect-menu-head {
  margin: 0 0 0.45rem 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
}

.ms-aspect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.55rem;
  background: var(--app-surface);
}

.ms-aspect-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0.45rem 0.55rem;
  border: 0;
  background: transparent;
  color: #ddd;
  cursor: pointer;
  text-align: left;
}

.ms-aspect-cell:nth-child(odd) {
  border-right: 1px solid #252525;
}

.ms-aspect-cell:nth-child(n + 3) {
  border-top: 1px solid #252525;
}

.ms-aspect-cell:hover {
  background: var(--app-border-subtle);
  color: var(--app-fg);
}

.ms-aspect-cell-on {
  background: #252525;
  color: var(--app-fg);
}

.ms-aspect-cell-on:hover {
  background: var(--app-border-strong);
}

.ms-aspect-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--app-fg-subtle);
}

.ms-aspect-cell-on .ms-aspect-icon {
  color: #ccc;
}

.ms-aspect-cell-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ms-params-aspect {
  padding: 0.35rem 0 0.15rem;
  border-top: 1px solid #222;
}

.ms-params-aspect .ms-aspect-menu-head {
  margin-bottom: 0.5rem;
}

.ms-params-aspect .ms-aspect-grid {
  width: 100%;
}

.ms-params-aspect-flush {
  padding-top: 0;
  border-top: 0;
}

.ms-params-row-qty {
  padding-top: 0.5rem;
  border-top: 1px solid #222;
}

.ms-params-qty-labeled {
  gap: 0.5rem;
  min-width: 7.5rem;
  padding: 0 0.55rem;
}

.ms-params-qty-value {
  display: inline-flex;
  min-width: 3.25rem;
  align-items: baseline;
  justify-content: center;
  gap: 0.12rem;
  font-weight: 600;
  white-space: nowrap;
}

.ms-qty-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  min-width: 0;
}

.ms-qty-label {
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #777;
  line-height: 1.2;
}

.ms-qty {
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.ms-qty-value {
  display: inline-flex;
  min-width: 3.25rem;
  align-items: baseline;
  justify-content: center;
  gap: 0.12rem;
  text-align: center;
  white-space: nowrap;
}

.ms-qty-value-num {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f0f0f0;
  font-variant-numeric: tabular-nums;
}

.ms-qty-value-suffix {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-fg-muted);
}

.ms-qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.ms-qty button:disabled {
  opacity: 0.35;
  cursor: default;
}

.ms-bar-actions {
  --ms-action-size: 4.75rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: flex-end;
  justify-content: flex-end;
  gap: 0.5rem;
  width: auto;
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  z-index: 5;
  padding: 0.1rem 0;
}

.ms-bar-actions .ms-asset {
  box-sizing: border-box;
  display: flex;
  align-self: stretch;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  width: var(--ms-action-size);
  height: var(--ms-action-size);
  min-width: var(--ms-action-size);
  min-height: var(--ms-action-size);
  max-width: var(--ms-action-size);
}

.ms-bar-actions .ms-asset-btn {
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem 0.35rem 0.45rem;
  text-align: center;
  line-height: 1.2;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #1c1c1c 0%, #151515 100%);
}

.ms-bar-actions .ms-asset-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.08rem;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  flex-shrink: 0;
}

.ms-bar-actions .ms-asset-label-main {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #e8e8e8;
}

.ms-bar-actions .ms-asset-label-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--app-fg-muted);
}

.ms-bar-actions .ms-asset-plus {
  align-self: center;
  flex-shrink: 0;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 0.45rem;
}

.ms-bar-actions .ms-asset-thumb {
  flex: 0 1 auto;
  align-self: center;
  width: 2.1rem;
  height: 2.1rem;
  max-width: 72%;
  max-height: 46%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 0.45rem;
  object-fit: cover;
}

.ms-bar-actions .ms-generate.uiverse-generate-btn {
  box-sizing: border-box;
  align-self: center;
  font-size: calc(var(--ms-action-size) / 8);
  width: var(--ms-action-size);
  height: var(--ms-action-size);
  min-width: 0;
  min-height: 0;
  max-width: var(--ms-action-size);
  padding: 0;
  flex: 0 0 auto;
}

/* 输入栏「生成 / 充值」：方角块，与人物 / 产品格一致（侧栏 fluid 仍用 Uiverse 圆胶囊） */
.ms-bar-actions .ms-generate.ms-generate-square.uiverse-generate-btn {
  --uiverse-generate-radius: 0.75rem;
  border-radius: var(--uiverse-generate-radius);
}

.ms-bar-actions .ms-generate .uiverse-generate-content {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.2em;
  line-height: 1.05;
}

.ms-bar-actions .ms-generate-square .ms-generate-icon {
  align-self: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.ms-bar-actions .ms-generate-square .ms-generate-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
}

.ms-bar-actions .ms-generate-square .ms-generate-credits {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.0625rem 0.25rem;
  line-height: 1.05;
}

.ms-asset {
  position: relative;
}

.ms-asset-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface-2);
  color: #ddd;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.375rem 0.5rem;
}

.ms-asset-btn-filled {
  border-color: #3a3a3a;
}

.ms-asset-plus {
  display: inline-flex;
  height: 1.125rem;
  width: 1.125rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--app-border-strong);
}

.ms-asset-thumb {
  height: 1.125rem;
  width: 1.125rem;
  border-radius: 0.25rem;
  object-fit: cover;
}

.ms-asset-clear {
  position: absolute;
  right: -0.35rem;
  top: -0.35rem;
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--app-border-input);
  color: var(--app-fg);
  cursor: pointer;
}

.ms-generate.uiverse-generate-btn:disabled {
  /* 提交中：弱化光晕与底色，文案保持黑色 */
  cursor: wait;
  filter: none;
}

.ms-generate-label {
  flex-shrink: 0;
}

.ms-generate-credits {
  margin-left: 0;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}

.ms-explore {
  position: relative;
  z-index: 2;
  width: 100%;
}

.ms-route-loading {
  pointer-events: none;
  user-select: none;
}

.ms-route-loading-hint {
  margin: 1rem 0 0;
  color: var(--app-fg-muted);
  font-size: 0.875rem;
  text-align: center;
}

.ms-recreate-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 2rem;
  color: #ccc;
  font-size: 0.9375rem;
}

.ms-explore-title {
  margin: 0 0 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-explore-view-head .ms-project-back {
  margin: 0 0 0.375rem;
  padding-left: 0;
}

.ms-explore-view-head .ms-explore-title {
  margin-bottom: 0.625rem;
}

.ms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.ms-filter {
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-fg-subtle);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4375rem 0.875rem;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}

.ms-filter:hover {
  color: var(--app-fg);
  border-color: rgba(255, 45, 190, 0.45);
  background: rgba(255, 45, 190, 0.08);
}

.ms-filter-active {
  background: #FF2DBE;
  border-color: #FF2DBE;
  color: #000;
}

.ms-filter-active:hover {
  background: #FF2DBE;
  border-color: #FF2DBE;
  color: #000;
}

.ms-empty {
  color: #666;
  font-size: 0.875rem;
  padding: 3rem 0;
  text-align: center;
}

.ms-cat-block {
  margin-bottom: 1.75rem;
}

.ms-cat-block:last-child {
  margin-bottom: 0;
}

.ms-cat-heading {
  margin: 0 0 0.75rem;
  color: var(--app-fg-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

.ms-card {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.875rem;
  background: var(--app-surface);
}

.ms-card-selected {
  border-color: #FF2DBE;
}

.ms-card.ms-card-spotlight {
  z-index: 2;
  border-color: #ff2dbe;
  outline: 2px solid rgba(255, 45, 190, 0.95);
  outline-offset: 3px;
  animation: ms-card-spotlight-pulse 2.6s ease-out;
}

@keyframes ms-card-spotlight-pulse {
  0% {
    outline-color: rgba(255, 45, 190, 1);
    box-shadow:
      0 0 0 0 rgba(255, 45, 190, 0.5),
      0 0 32px rgba(255, 45, 190, 0.45);
  }
  22% {
    outline-color: rgba(255, 45, 190, 0.85);
    box-shadow:
      0 0 0 10px rgba(255, 45, 190, 0.18),
      0 0 40px rgba(255, 45, 190, 0.55);
  }
  100% {
    outline-color: rgba(255, 45, 190, 0);
    box-shadow:
      0 0 0 0 rgba(255, 45, 190, 0),
      0 0 0 0 rgba(255, 45, 190, 0);
  }
}

.ms-card-hit {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.ms-card .ms-scene {
  aspect-ratio: 3 / 4;
}

.ms-card-meta {
  position: absolute;
  inset: auto 0 0;
  padding: 1.5rem 0.75rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.ms-card:hover .ms-card-meta {
  opacity: 1;
}

@media (hover: none) {
  .ms-card-meta {
    opacity: 1;
  }
}

.ms-card-en {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #ddd;
}

.ms-card-zh {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--app-fg);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.ms-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ms-scene-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-scene-cover {
  background: var(--app-surface);
}

.ms-scene-placeholder-neutral {
  background: var(--app-surface);
  color: var(--app-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
}

.ms-grid-loading {
  margin: 2rem 0 3rem;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
}

.ms-grid-more {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 3rem;
}

.ms-grid-more-btn {
  border: 1px solid var(--app-border-input);
  border-radius: 999px;
  background: var(--app-surface);
  color: #ddd;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.625rem 1.25rem;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.ms-grid-more-btn:hover {
  border-color: #666;
  color: var(--app-fg);
}

.ms-scene-citrus { background: #c6f021; }
.ms-scene-serum { background: linear-gradient(180deg, #f3d7c4, #c48b6a); }
.ms-scene-cream { background: #1a1420; }
.ms-scene-lifestyle { background: linear-gradient(180deg, #f6e7d4, #c9a27a); }
.ms-scene-can { background: #14301c; }
.ms-scene-unbox { background: linear-gradient(180deg, #f7e4d4, #e8b896); }
.ms-scene-bottles { background: linear-gradient(180deg, #f0d2b8, #c9845a); }
.ms-scene-breakfast { background: linear-gradient(180deg, #efe0c8, #b89462); }
.ms-scene-cereal { background: #1d3a4a; }
.ms-scene-letter { background: #2a2118; }
.ms-scene-street-can { background: linear-gradient(180deg, #7d9a6a, #2d4a28); }
.ms-scene-spin { background: #101418; }
.ms-scene-white-bg { background: #f3f3f3; }
.ms-scene-neon { background: #120818; }
.ms-scene-pour { background: #0b1016; }
.ms-scene-magazine { background: var(--app-surface-4); }
.ms-scene-kitchen { background: linear-gradient(180deg, #f4e6cf, #d2b48c); }

.ms-citrus-can {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 42%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 0.6rem 0.6rem 0.85rem 0.85rem;
  background: linear-gradient(90deg, #c81e1e, #ff3b30 40%, #9b1212);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.12);
}

.ms-citrus-brand,
.ms-citrus-sub {
  display: block;
  color: var(--app-fg);
  font-weight: 800;
  text-align: center;
}

.ms-citrus-brand {
  margin-top: 28%;
  font-size: 0.42rem;
  letter-spacing: 0.04em;
}

.ms-citrus-sub {
  font-size: 0.32rem;
  opacity: 0.85;
}

.ms-citrus-cta {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--app-surface-4);
  color: #c6f021;
  font-size: 0.4rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
}

.ms-bottle {
  position: absolute;
  bottom: 18%;
  width: 18%;
  height: 48%;
  border-radius: 0.7rem 0.7rem 0.35rem 0.35rem;
  background: linear-gradient(180deg, #f6c9a0, #d07a3a);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.ms-bottle::after {
  content: "";
  position: absolute;
  left: 30%;
  top: -12%;
  width: 40%;
  height: 16%;
  border-radius: 0.2rem;
  background: #f0d0b0;
}

.ms-bottle-a { left: 18%; }
.ms-bottle-b { left: 41%; height: 56%; }
.ms-bottle-c { left: 64%; }

.ms-cream-orb {
  position: absolute;
  inset: 22%;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff, #c9b8d4 55%, #6b4d7a);
}

.ms-life-window {
  position: absolute;
  left: 12%;
  top: 10%;
  width: 76%;
  height: 28%;
  border-radius: 0.4rem;
  background: linear-gradient(180deg, #9ec9ff, #f7d9a8);
}

.ms-life-table {
  position: absolute;
  left: 8%;
  bottom: 12%;
  width: 84%;
  height: 18%;
  border-radius: 0.3rem;
  background: #8a6238;
}

.ms-hand-can {
  position: absolute;
  left: 36%;
  top: 28%;
  width: 28%;
  height: 42%;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, #f2f2f2, #b8b8b8);
}

.ms-person {
  position: absolute;
  left: 22%;
  top: 16%;
  width: 56%;
  height: 70%;
  border-radius: 50% 50% 1.2rem 1.2rem;
  background: linear-gradient(180deg, #f3c7a6, #c47a4a);
}

.ms-person-hat::before {
  content: "";
  position: absolute;
  left: 8%;
  top: -6%;
  width: 84%;
  height: 18%;
  border-radius: 999px;
  background: #222;
}

.ms-box {
  position: absolute;
  left: 32%;
  bottom: 16%;
  width: 36%;
  height: 22%;
  border-radius: 0.25rem;
  background: var(--app-surface-4);
}

.ms-moka {
  position: absolute;
  left: 18%;
  bottom: 28%;
  width: 18%;
  height: 22%;
  border-radius: 0.2rem 0.2rem 0.4rem 0.4rem;
  background: var(--app-border-strong);
}

.ms-cereal-box {
  position: absolute;
  left: 28%;
  top: 22%;
  width: 44%;
  height: 52%;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #f2c14e, #d89a1a);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.2);
}

.ms-letter {
  position: absolute;
  inset: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d7b48a;
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.ms-spin-product {
  position: absolute;
  left: 28%;
  top: 26%;
  width: 44%;
  height: 44%;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #9ad1d4, #2c6b73);
  animation: ms-spin 6s linear infinite;
}

.ms-white-product {
  position: absolute;
  left: 30%;
  top: 28%;
  width: 40%;
  height: 44%;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #fff, #d9d9d9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.ms-neon-glow {
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 77, 141, 0.55), transparent 65%);
}

.ms-pour-bottle {
  position: absolute;
  left: 38%;
  top: 12%;
  width: 22%;
  height: 38%;
  border-radius: 0.5rem;
  background: #6ec6ff;
}

.ms-pour-stream {
  position: absolute;
  left: 47%;
  top: 48%;
  width: 5%;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(#6ec6ff, transparent);
}

.ms-mag-block {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 40%;
  height: 10%;
  background: #FF2DBE;
}

@keyframes ms-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .ms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-hero-slot-m2,
  .ms-hero-slot-2 {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .ms-layout {
    flex-direction: column;
  }

  .ms-sidebar,
  .ms-sidebar-collapsed {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--app-border-subtle);
    padding: 0.5rem 0.75rem;
    background: var(--app-bg);
    box-shadow: none;
  }

  .ms-sidebar-head,
  .ms-sidebar-toggle {
    display: none;
  }

  .ms-sidebar-mobile-picker {
    display: block;
  }

  .ms-sidebar-nav {
    display: none;
  }

  .ms-sidebar-collapsed .ms-nav-item {
    justify-content: flex-start;
    padding: 0.5625rem 0.625rem;
    width: auto;
  }

  .ms-sidebar-collapsed .ms-nav-item-label,
  .ms-sidebar-collapsed .ms-nav-item-text {
    display: inline;
  }

  .ms-sidebar-projects,
  .ms-sidebar-divider {
    display: none;
  }

  .ms-nav-item-mobile-only {
    display: inline-flex;
  }

  .ms-nav-item {
    width: auto;
    flex-shrink: 0;
  }

  .ms-main {
    padding: 1rem 0.75rem 2rem;
  }

  .ms-hero-stage {
    --ms-hero-scale: 1.18;
    height: 16.5rem;
  }

  .ms-hero-slot-m2,
  .ms-hero-slot-2 {
    opacity: 0;
    pointer-events: none;
  }

  .ms-hero-slot-m1 {
    transform: translateX(calc(-5.35rem * var(--ms-hero-scale))) translateY(-50%) scale(0.78);
  }

  .ms-hero-slot-1 {
    transform: translateX(calc(5.35rem * var(--ms-hero-scale))) translateY(-50%) scale(0.78);
  }

  .ms-hero-slot-0 {
    width: calc(9.25rem * var(--ms-hero-scale));
    height: calc(13rem * var(--ms-hero-scale));
    margin-left: calc(-4.625rem * var(--ms-hero-scale));
    transform: translateX(0) translateY(-50%) scale(1);
  }

  .ms-hero-carousel {
    margin-bottom: 2rem;
    padding-inline: 0.5rem;
    padding-bottom: 2.25rem;
  }

  .ms-hero-title {
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
  }

  .ms-composer {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .ms-composer.ms-composer-sized {
    width: 100%;
    max-width: none;
  }

  .ms-composer-sized .ms-bar {
    flex: 1 1 auto;
  }

  .ms-mode-card {
    flex-direction: row;
    align-self: stretch;
    width: 100%;
    height: auto !important;
    overflow: visible;
    padding: 0.4rem;
  }

  .ms-bar {
    flex-direction: column;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    padding: 0.75rem;
  }

  .ms-bar-resize {
    display: none;
  }

  .ms-bar-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .ms-bar-footer {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .ms-bar-toolbar {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0;
  }

  .ms-bar-toolbar-sep {
    display: none !important;
  }

  .ms-bar-chip-row-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    width: 100%;
  }

  .ms-bar-chip-row-primary .ms-chip {
    width: 100%;
    max-width: none;
  }

  .ms-bar-chip-row-primary .ms-chip-style {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ms-bar-chip-row-params {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }

  .ms-bar-chip-row-params::-webkit-scrollbar {
    display: none;
  }

  .ms-bar-chip-row-params > *,
  .ms-bar-chip-row-params .ms-chip-menu-wrap {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }

  .ms-bar-chip-row-params .ms-chip-menu-trigger {
    width: auto;
    max-width: min(72vw, 14rem);
  }

  .ms-bar-chip-row-params .ms-params-chip {
    max-width: min(72vw, 14rem);
  }

  .ms-mode {
    flex: 1;
    flex-direction: row;
    width: auto;
    padding: 0.5625rem 0.875rem;
    gap: 0.4375rem;
    font-size: 0.9375rem;
  }

  /* 仅移动端：固定小方块右对齐，勿用整行等分网格（会把按钮撑得过大） */
  .ms-bar-actions {
    --ms-action-size: 3.35rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    gap: 0.45rem;
  }

  .ms-bar-actions .ms-asset {
    width: var(--ms-action-size);
    height: var(--ms-action-size);
    min-width: var(--ms-action-size);
    min-height: var(--ms-action-size);
    max-width: var(--ms-action-size);
    aspect-ratio: 1 / 1;
  }

  .ms-bar-actions .ms-asset-btn {
    padding: 0.4rem 0.3rem 0.36rem;
    gap: 0.28rem;
  }

  .ms-bar-actions .ms-asset-plus {
    height: 1.25rem;
    width: 1.25rem;
  }

  .ms-bar-actions .ms-asset-thumb {
    width: 1.65rem;
    height: 1.65rem;
  }

  .ms-bar-actions .ms-asset-label-main {
    font-size: 0.6875rem;
  }

  .ms-bar-actions .ms-asset-label-sub {
    font-size: 0.5625rem;
  }

  .ms-bar-actions .ms-generate.uiverse-generate-btn {
    padding: 0;
  }

  /* 手机小方块放不下「图标+生成+积分」三行：隐藏图标，把空间让给更大的「生成」 */
  .ms-bar-actions .ms-generate-square .ms-generate-icon {
    display: none;
  }

  .ms-bar-actions .ms-generate-square .ms-generate-label {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
  }

  .ms-bar-actions .ms-generate-square .ms-generate-credits {
    font-size: 0.6875rem;
    padding: 0 0.2rem;
  }

  /* 触屏目标不小于 44px */
  .ms-mode {
    min-height: 2.75rem;
  }

  .ms-bar .ms-chip {
    height: 2.375rem;
    min-height: 2.375rem;
  }

  .ms-bar .ms-qty button {
    width: 2rem;
    height: 2rem;
  }

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

/* 电商直出：竖屏下提示词工具条分区排版 */
@media (max-width: 768px) and (orientation: portrait) {
  .ms-main .ms-composer {
    width: calc(100% + 1.5rem);
    max-width: none;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .ms-project {
    max-width: none;
    width: 100%;
  }

  .ms-bar {
    gap: 0.625rem;
    border-radius: 1rem;
  }

  .ms-bar-body {
    gap: 0.625rem;
  }

  .ms-bar-main {
    min-height: 5.5rem;
  }

  .ms-bar-input {
    min-height: 4.75rem;
  }

  .ms-bar-footer {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    gap: 0.65rem;
  }

  /* 竖屏 · 图片模式：生图模型 + 图片参数并排（与参考图/风格行一致） */
  .ms-composer .ms-bar-chip-row-params-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    overflow: visible;
    mask-image: none;
    padding-bottom: 0;
  }

  .ms-composer .ms-bar-chip-row-params-image > *,
  .ms-composer .ms-bar-chip-row-params-image .ms-chip-menu-wrap {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .ms-composer .ms-bar-chip-row-params-image .ms-chip-menu-trigger,
  .ms-composer .ms-bar-chip-row-params-image .ms-params-chip {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    min-height: 2.5rem;
    min-width: 0;
  }

  .ms-composer .ms-bar-chip-row-params-image .ms-chip-menu-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .ms-composer .ms-bar-chip-row-params-image .ms-params-summary {
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
  }

  /* 竖屏：上传 + 生成改为横向长条，避免小方块挤字 */
  .ms-composer .ms-bar-actions {
    --ms-action-size: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-left: 0;
    gap: 0.5rem;
    padding: 0;
  }

  .ms-composer .ms-bar-actions .ms-asset {
    flex: 1 1 6.5rem;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 3rem;
    max-width: none;
    aspect-ratio: auto;
  }

  .ms-composer .ms-bar-actions .ms-asset-btn {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    /* 与电脑端一致：背景/边框跟随主题变量，浅色模式呈浅色卡片，深色模式呈暗色 */
    background: var(--app-surface-2);
    border: 1px solid var(--app-border-input);
  }

  .ms-composer .ms-bar-actions .ms-asset-btn-filled {
    border-color: var(--app-border-input);
    background: var(--app-surface-4);
  }

  .ms-composer .ms-bar-actions .ms-asset-label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
    flex: 1;
    min-width: 0;
    text-align: left;
  }

  .ms-composer .ms-bar-actions .ms-asset-label-main {
    font-size: 0.8125rem;
    line-height: 1.25;
  }

  .ms-composer .ms-bar-actions .ms-asset-label-sub {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--app-fg-muted);
  }

  .ms-composer .ms-bar-actions .ms-asset-plus {
    flex-shrink: 0;
    height: 2rem;
    width: 2rem;
    border-radius: 0.5rem;
    background: var(--app-surface-4);
  }

  .ms-composer .ms-bar-actions .ms-asset-thumb {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    max-width: none;
    max-height: none;
    border-radius: 0.5rem;
  }

  .ms-composer .ms-bar-actions .ms-generate.uiverse-generate-btn {
    flex: 1.2 1 7.5rem;
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 3em;
    font-size: 18px;
  }

  .ms-composer .ms-bar-actions .ms-generate .uiverse-generate-content {
    flex-direction: row;
    gap: 0.5rem;
  }

  .ms-composer .ms-bar-actions .ms-generate-square .ms-generate-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
  }

  .ms-composer .ms-bar-actions .ms-generate-square .ms-generate-label {
    font-size: 1.0625rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .ms-composer .ms-bar-actions .ms-generate-square .ms-generate-credits {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 1;
  }

  /* 人物 + 产品 + 生成：上传各占半宽，生成独占一行 */
  .ms-composer .ms-bar-actions:has(.ms-asset ~ .ms-asset) .ms-asset {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .ms-composer .ms-bar-actions:has(.ms-asset ~ .ms-asset) .ms-generate.uiverse-generate-btn {
    flex: 1 1 100%;
  }

  .ms-composer .ms-bar-actions .ms-asset-clear {
    top: 0.35rem;
    right: 0.35rem;
  }
}

/* 鈹€鈹€ Marketing 鍙傝€冨浘閫夋嫨寮圭獥 鈹€鈹€ */
/* z-index 浣庝簬 .studio-toast(50)锛屽脊绐楅噷鐨勯敊璇彁绀烘墠鑳借鐪嬪埌 */
.ms-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 1.5rem;
}

.ms-picker {
  display: flex;
  width: min(44rem, 100%);
  max-height: min(80vh, 40rem);
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.ms-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-border-strong);
  padding: 0.75rem 1rem;
}

.ms-picker-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ms-picker-tab {
  border: none;
  border-radius: 9999px;
  background: transparent;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-fg-subtle);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-picker-tab:hover {
  color: var(--app-fg);
}

.ms-picker-tab-active {
  background: #fff;
  color: #000;
}

.ms-picker-tab-active:hover {
  color: #000;
}

.ms-picker-close {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  background: var(--app-border-strong);
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-picker-close:hover {
  background: var(--app-border-input);
  color: var(--app-fg);
}

.ms-picker-body {
  overflow-y: auto;
  padding: 1rem;
}

.ms-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

.ms-picker-upload-tile {
  display: flex;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.625rem;
  border: 1.5px dashed #444;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ms-picker-upload-tile:hover {
  border-color: #666;
  background: #252525;
}

.ms-picker-upload-label {
  font-size: 0.8125rem;
  color: var(--app-fg-muted);
}

.ms-picker-tile-wrap {
  position: relative;
  aspect-ratio: 1;
}

.ms-picker-tile {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 0.625rem;
  border: 2px solid transparent;
  background: var(--app-surface);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
}

.ms-picker-tile:hover:not(:disabled) {
  border-color: #555;
}

.ms-picker-tile:disabled {
  cursor: wait;
}

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

.ms-picker-tile-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.ms-picker-tile-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  padding: 1rem 0.5rem 0.375rem;
  text-align: left;
  font-size: 0.75rem;
  color: #ccc;
}

.ms-picker-like {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 10;
  display: flex;
  height: 1.625rem;
  width: 1.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.72);
  color: #ccc;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.ms-picker-tile-wrap:hover .ms-picker-like,
.ms-picker-like:focus-visible,
.ms-picker-like-on {
  opacity: 1;
}

.ms-picker-like:hover {
  border-color: #555;
  color: var(--app-fg);
}

.ms-picker-like-on {
  color: #FF2DBE;
}

.ms-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: #666;
}

@media (max-width: 640px) {
  .ms-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 鈹€鈹€ Marketing 閫夋嫨椋庢牸寮圭獥 鈹€鈹€ */
.ms-style {
  display: flex;
  width: 60rem;
  height: 40rem;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: #161616;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ms-style-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
}

.ms-style-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg);
}

.ms-style-main {
  display: flex;
  min-height: 0;
  flex: 1;
  border-top: 1px solid var(--app-border-strong);
}

.ms-style-sidebar {
  width: 13rem;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--app-border-strong);
  padding: 0.875rem 0.75rem;
}

.ms-style-section + .ms-style-section {
  margin-top: 1rem;
}

.ms-style-section-title {
  margin: 0 0 0.375rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  color: #666;
}

.ms-style-group {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.625rem;
  background: transparent;
  padding: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--app-fg-subtle);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.ms-style-group:hover {
  color: var(--app-fg);
}

.ms-style-group-active,
.ms-style-group-active:hover {
  background: var(--app-border);
  color: var(--app-fg);
}

.ms-style-content {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.875rem 1.25rem 1.25rem;
}

.ms-style-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.ms-style-group-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-fg);
}

.ms-style-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  padding: 0.375rem 0.75rem;
  color: var(--app-fg-muted);
}

.ms-style-search input {
  width: 9rem;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: #eee;
  outline: none;
}

.ms-style-search input::placeholder {
  color: #666;
}

.ms-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

/* 寮圭獥閲屽崱鐗囧悕绉板父椹绘樉绀猴紝涓嶉潬 hover */
.ms-style-grid .ms-card-meta {
  opacity: 1;
}

.ms-style-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #FF2DBE;
  color: #000;
}

@media (max-width: 768px) {
  /* 风格弹窗：固定 40rem 改为按内容自适应，超高时内部滚动 */
  .ms-style {
    height: auto;
    max-height: 92dvh;
  }

  .ms-style-main {
    flex-direction: column;
  }

  .ms-style-sidebar {
    display: flex;
    width: 100%;
  gap: 0.5rem;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--app-border-strong);
  }

  .ms-style-section + .ms-style-section {
    margin-top: 0;
  }

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

/* 鈹€鈹€ Marketing 澶嶅埢妯℃澘寮圭獥 鈹€鈹€ */
.ms-recreate {
  position: relative;
  display: flex;
  width: 62rem;
  height: 44rem;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: #161616;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ms-recreate-actions {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ms-recreate-actions .ms-recreate-close {
  position: static;
}

.ms-recreate-favorite {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  background: var(--app-border-strong);
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-recreate-favorite:hover {
  background: var(--app-border-input);
  color: var(--app-fg);
}

.ms-recreate-favorite-on {
  color: var(--app-accent);
}

.ms-card:hover .ms-card-favorite,
.ms-card-favorite:focus-visible,
.ms-card-favorite.ms-picker-like-on {
  opacity: 1;
}

.ms-recreate-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 10;
}

.ms-recreate-top {
  display: flex;
  min-height: 0;
  flex: 1.4;
}

.ms-recreate-preview {
  position: relative;
  width: 40%;
  flex-shrink: 0;
  background: #101010;
}

/* 寮圭獥宸︿笂瑙掑皝闈㈠畬鏁存樉绀猴紝涓嶈鍒?*/
.ms-recreate-preview .ms-scene-media {
  object-fit: contain;
}

.ms-recreate-preview-sound {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 10;
}

.ms-recreate-side {
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 1.25rem;
}

.ms-recreate-kicker {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--app-fg-muted);
}

.ms-recreate-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.375rem 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--app-fg);
}

.ms-recreate-cat {
  border-radius: 9999px;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-fg-subtle);
}

.ms-recreate-uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ms-recreate-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ccc;
}

.ms-recreate-req,
.ms-recreate-opt {
  border-radius: 9999px;
  padding: 0.0625rem 0.375rem;
  font-size: 0.5625rem;
  font-weight: 500;
}

.ms-recreate-req {
  background: rgba(255, 45, 190, 0.15);
  color: #FF2DBE;
}

.ms-recreate-opt {
  background: var(--app-border);
  color: var(--app-fg-muted);
}

.ms-recreate-textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface-2);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: #eee;
  outline: none;
}

.ms-recreate-textarea:focus {
  border-color: #444;
}

.ms-recreate-generate {
  margin-top: 1rem;
}

.ms-recreate-submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: #FF2DBE;
  color: #000;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.75rem;
  transition: background 0.15s;
}

.ms-recreate-submit:hover:not(:disabled) {
  background: #FF2DBE;
}

.ms-recreate-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ms-recreate-hint {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--app-fg-muted);
}

.ms-recreate-more {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--app-border-strong);
  padding: 0.875rem 1.5rem 1.25rem;
}

.ms-recreate-more-title {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--app-fg-subtle);
}

.ms-recreate-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--studio-card-grid-gap);
}

@media (max-width: 768px) {
  /* 澶嶅埢璇︽儏锛氬眳涓崱鐗囷紝涓嶅崰婊℃暣灞?*/
  .ms-picker-overlay-recreate {
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(0.625rem, env(safe-area-inset-top, 0px)) 0.625rem
      max(0.625rem, env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  .ms-recreate {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(
      100dvh - 1.25rem - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px)
    );
    min-height: 0;
    margin: 0 auto;
    border-radius: 0.875rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ms-recreate-top {
    flex: none;
    flex-direction: column;
    overflow: visible;
  }

  .ms-recreate-preview {
    width: 100%;
    height: 11.5rem;
    max-height: 30vh;
    aspect-ratio: auto;
    flex-shrink: 0;
  }

  .ms-recreate-preview .ms-scene,
  .ms-recreate-preview .ms-scene-cover {
    height: 100%;
    min-height: 0;
  }

  /* 移动端顶部改成横幅：铺满裁切，避免 9:16 封面在宽扁预览条里两侧留出灰边 */
  .ms-recreate-preview .ms-scene-media {
    object-fit: cover;
  }

  .ms-recreate-side {
    flex: none;
    overflow: visible;
    /*
     * 左右对称留白：移动端收藏 / 关闭按钮浮在顶部预览图上（不再压在表单右侧），
     * 所以不需要之前那条 padding-right: 2.5rem，否则表单整体会向左偏、右边空一大块。
     */
    padding: 0.75rem 1rem 0.875rem;
  }

  .ms-recreate-kicker {
    font-size: 0.75rem;
  }

  .ms-recreate-name {
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 1rem;
  }

  .ms-recreate-uploads {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
  }

  .ms-recreate-label {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
  }

  .ms-product-grid {
    gap: 0.4375rem;
  }

  .ms-product-tile,
  .ms-product-add {
    width: 4.5rem;
    height: 4.5rem;
  }

  .ms-recreate-textarea {
    font-size: 16px;
    min-height: 4.5rem;
    padding: 0.5rem 0.625rem;
  }

  .ms-recreate-generate {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    padding: 12px 18px;
  }

  .ms-recreate-submit {
    margin-top: 0.75rem;
    padding: 0.625rem;
    font-size: 0.8125rem;
  }

  .ms-recreate-more {
    flex: none;
    max-height: 9.5rem;
    overflow-y: auto;
    padding: 0.625rem 0.875rem 0.75rem;
  }

  .ms-recreate-more-title {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
  }

  .ms-recreate-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ms-recreate-more-grid .ms-card-meta {
    padding: 1rem 0.375rem 0.375rem;
  }

  .ms-recreate-more-grid .ms-card-zh {
    font-size: 0.875rem;
  }

  .ms-recreate-actions {
    top: 0.5rem;
    right: 0.5rem;
  }

  .ms-recreate-preview-sound {
    top: 0.5rem;
    left: 0.5rem;
  }

  .ms-recreate-actions .ms-recreate-close,
  .ms-recreate-favorite {
    height: 1.75rem;
    width: 1.75rem;
  }
}

/* 闈?UGC 妯℃澘鍙湁浜у搧鍥句笂浼狅紝鐙崰涓€琛?*/
.ms-recreate-uploads-single {
  grid-template-columns: minmax(0, 1fr);
}

/* ── 复刻模板弹窗：多产品图逐张显示（不再只露首张 + 张数） ── */
.ms-product-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.ms-product-tile {
  position: relative;
  width: 5rem;
  height: 5rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface-4);
}

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

.ms-product-tile-index {
  position: absolute;
  left: 0.3125rem;
  bottom: 0.3125rem;
  display: inline-flex;
  min-width: 1.0625rem;
  height: 1.0625rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--app-media-overlay);
  color: var(--app-media-fg);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 0.1875rem;
  pointer-events: none;
}

.ms-product-tile-remove {
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--app-media-overlay);
  color: var(--app-media-fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-product-tile-remove:hover {
  background: var(--app-focus-ring);
  color: var(--app-on-accent);
}

/* 复刻模板弹窗：产品图拖动排序（顺序 = 提交顺序 = 提示词 @product1~N） */
.ms-product-tile-sortable {
  cursor: grab;
}

.ms-product-tile-sortable:active {
  cursor: grabbing;
}

.ms-product-tile-handle {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--app-media-overlay);
  color: var(--app-media-fg);
  cursor: grab;
  /* 触屏按住把手拖动时不要触发页面滚动 */
  touch-action: none;
  transition: background 0.15s, color 0.15s;
}

.ms-product-tile-handle:hover {
  background: var(--app-focus-ring);
  color: var(--app-on-accent);
}

.ms-product-tile-handle:active {
  cursor: grabbing;
}

/* 拖动中的缩略图浮起跟随指针：不改变布局，松手才落位 */
.ms-product-tile-dragging {
  z-index: 6;
  border-color: var(--app-focus-ring);
  box-shadow: 0 14px 30px -10px var(--app-shadow);
  opacity: 0.94;
  cursor: grabbing;
  will-change: transform;
}

/* 目标缩略图：强调描边表示松手后会插到它旁边 */
.ms-product-tile-drop {
  border-color: var(--app-focus-ring);
  box-shadow: 0 0 0 2px var(--app-focus-ring);
}

.ms-product-sort-hint {
  margin: 0.375rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--app-fg-subtle);
}

.ms-product-add {
  display: flex;
  width: 5rem;
  height: 5rem;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 1px dashed var(--app-border-input);
  border-radius: 0.625rem;
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
  cursor: pointer;
  padding: 0.25rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ms-product-add:hover {
  border-color: var(--app-focus-ring);
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-product-add-plus {
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--app-border-strong);
}

.ms-product-add-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
}

.ms-product-add-count {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--app-fg-subtle);
}

/* 鈹€鈹€ Marketing 椤圭洰鍔熻兘 鈹€鈹€ */
.ms-project-modal {
  width: 22rem;
  max-width: calc(100vw - 3rem);
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  padding: 1.25rem;
}

.ms-project-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ms-project-modal-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg);
}

.ms-project-modal-input {
  width: 100%;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: var(--app-surface);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #eee;
  outline: none;
  margin-bottom: 1rem;
}

.ms-project-modal-input:focus {
  border-color: #555;
}

.ms-project {
  display: flex;
  min-height: 100%;
  max-width: 72rem;
  margin: 0 auto;
  flex-direction: column;
}

.ms-project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}

.ms-project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.625rem;
  background: transparent;
  padding: 0.375rem 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ms-project-back:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.ms-projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ms-projects-head .ms-explore-title {
  margin: 0;
}

.ms-projects-new {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 45, 190, 0.35);
  border-radius: 999px;
  background: rgba(255, 45, 190, 0.1);
  color: #ff8ee0;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ms-projects-new:hover {
  background: rgba(255, 45, 190, 0.18);
  border-color: rgba(255, 45, 190, 0.55);
  color: var(--app-fg);
}

.ms-projects-new-cta {
  margin-top: 1rem;
}

.ms-projects-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ms-projects-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.75rem;
  background: var(--app-surface);
  color: #eee;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.75rem 0.875rem;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.ms-projects-row:hover {
  border-color: #444;
  background: var(--app-surface-2);
}

.ms-projects-row-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ff8ee0;
}

.ms-projects-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-project-body {
  flex: 1;
}

.ms-project-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1rem;
  color: #555;
}

.ms-project-empty-title {
  margin: 0.75rem 0  0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg-subtle);
}

.ms-project-empty-hint {
  margin: 0;
  font-size: 0.75rem;
  color: #666;
}

/* 鈹€鈹€ 椤圭洰椤电瓫閫?/ 瑙嗗浘宸ュ叿鏍?鈹€鈹€ */
.ms-toolbar {
  position: relative;
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.ms-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 0.625rem;
  background: #161616;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ccc;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ms-toolbar-btn:hover {
  border-color: #444;
  color: var(--app-fg);
}

.ms-toolbar-btn-on {
  border-color: #555;
  color: var(--app-fg);
}

.ms-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 30;
  width: 13rem;
  border-radius: 0.75rem;
  border: 1px solid var(--app-border-input);
  background: #1e1e1e;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
  padding: 0.5rem;
}

.ms-dropdown-label {
  margin: 0.375rem 0 0.25rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #666;
}

.ms-dropdown-label:first-child {
  margin-top: 0;
}

.ms-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.4375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ccc;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.ms-dropdown-item:hover {
  background: var(--app-border);
  color: var(--app-fg);
}

.ms-dropdown-check {
  margin-left: auto;
  height: 0.875rem;
  width: 0.875rem;
  color: #FF2DBE;
}

.ms-dropdown-seg {
  display: flex;
  border-radius: 0.5rem;
  background: var(--app-surface);
  padding: 0.1875rem;
  gap: 0.1875rem;
}

.ms-dropdown-seg button {
  flex: 1;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ms-dropdown-seg button.ms-dropdown-seg-on {
  background: #2e2e2e;
  color: var(--app-fg);
}

/* 鈹€鈹€ 浣滃搧缃戞牸锛氱€戝竷娴佷笌鍗＄墖澶у皬 鈹€鈹€ */
.preset-grid.ms-history-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preset-grid.ms-history-masonry {
  display: block;
  columns: 2;
  column-gap: var(--studio-card-grid-gap);
}

.preset-grid.ms-history-masonry.ms-history-compact {
  columns: 2;
}

.preset-grid.ms-history-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--studio-card-grid-gap);
}

/* 鐎戝竷娴侀噷鍗＄墖鎭㈠鍘熷瀹介珮姣?*/
.ms-card-media-masonry {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--app-surface);
}

.ms-card-media-masonry img,
.ms-card-media-masonry video {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* 设置页 (/settings)                                                          */
/* -------------------------------------------------------------------------- */

/*
 * 版式：左侧竖向导航 + 右侧内容区，整体放在一张大圆角白面上；
 * 视觉语言来自账号设置参考稿：淡粉画布、粉色渐变主按钮、浅粉描边次级按钮、
 * 橙色警示徽标与深色主行动按钮。
 */
.settings-shell {
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  flex-direction: column;
  --settings-accent: #ff2dbe;
  --settings-accent-strong: #d00098;
  --settings-accent-ink: #8f0062;
  --settings-accent-soft: #fff3fb;
  --settings-accent-soft-2: #ffe4f6;
  --settings-ink: #16181d;
  --settings-ink-soft: #3d434c;
  --settings-muted: #6f7580;
  --settings-muted-soft: #8a909a;
  --settings-line: rgba(120, 90, 130, 0.12);
  --settings-line-strong: rgba(120, 90, 130, 0.2);
  --settings-card-radius: 1rem;
}

/* 画布：白底 + 左上淡紫 / 右上淡粉光斑（比全站画布更粉一点） */
body .settings-shell {
  background-color: #ffffff;
  background-image:
    radial-gradient(
      38% 34% at 8% 10%,
      rgba(241, 236, 255, 0.85) 0%,
      rgba(241, 236, 255, 0) 72%
    ),
    radial-gradient(
      46% 40% at 97% 3%,
      rgba(255, 226, 243, 0.95) 0%,
      rgba(255, 226, 243, 0) 74%
    ),
    radial-gradient(
      52% 46% at 50% 102%,
      rgba(255, 241, 250, 0.8) 0%,
      rgba(255, 241, 250, 0) 78%
    ),
    linear-gradient(180deg, #fffafd 0%, #ffffff 60%, #fdfbfe 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.settings-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 底部留出全站免责页脚 / 社区悬浮按钮的高度，避免遮住最后一张卡片 */
  padding: 0.75rem 0.875rem 4.5rem;
}

@media (min-width: 480px) {
  .settings-main {
    padding: 1rem 1.25rem 4.75rem;
  }
}

@media (min-width: 768px) {
  .settings-main {
    padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 5rem;
  }
}

.settings-page {
  width: 100%;
  max-width: 76.875rem;
  margin: 0 auto;
}

.settings-back-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.settings-back-link.settings-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border-color: rgba(255, 45, 190, 0.22);
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #263238;
  box-shadow: 0 10px 26px -22px rgba(126, 60, 110, 0.55);
  backdrop-filter: blur(6px);
}

.settings-back-link.settings-btn-secondary:hover:not(:disabled) {
  background: #ffffff;
  color: #101114;
}

.settings-surface {
  display: grid;
  grid-template-columns: 15.75rem minmax(0, 1fr);
  min-height: calc(100vh - 12rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.375rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 32px 80px -52px rgba(122, 60, 110, 0.55),
    0 0 0 1px rgba(120, 90, 130, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ── 左侧导航 ─────────────────────────────────────────────────────────────── */
.settings-sidebar {
  padding: 2.5rem 0.6rem 2.5rem 2.1rem;
  border-right: 1px solid var(--settings-line);
}

.settings-title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--settings-ink);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 2.1rem;
}

.settings-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--settings-ink-soft);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.settings-nav-item:hover {
  background: rgba(255, 45, 190, 0.06);
  color: var(--settings-ink);
}

.settings-nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #7c828c;
  transition: color 0.18s ease;
}

.settings-nav-item:hover .settings-nav-icon {
  color: var(--settings-accent-strong);
}

.settings-nav-item-active,
.settings-nav-item-active:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 45, 190, 0.16) 0%,
    rgba(255, 45, 190, 0.06) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  color: var(--settings-accent-strong);
  font-weight: 600;
}

.settings-nav-item-active .settings-nav-icon {
  color: var(--settings-accent-strong);
}

.settings-nav-item-active::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 3px;
  height: 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #d926b8 0%, #a855f7 100%);
  transform: translateY(-50%);
}

.settings-nav-item:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* ── 右侧内容 ─────────────────────────────────────────────────────────────── */
.settings-content {
  min-width: 0;
  padding: 2.5rem 2.5rem 3rem;
}

.settings-loading {
  padding: 2rem 0;
  font-size: 1rem;
  color: var(--settings-muted);
}

.settings-panel-head {
  margin-bottom: 1.65rem;
}

.settings-panel-title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--settings-ink);
}

.settings-panel-desc {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--settings-muted);
}

.settings-panel-body {
  min-width: 0;
}

.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}

/* ── 通用卡片 ─────────────────────────────────────────────────────────────── */
.settings-surface .settings-card {
  display: block;
  margin: 0;
  padding: 1.5rem 1.625rem;
  border: 1px solid rgba(190, 130, 175, 0.16);
  border-radius: var(--settings-card-radius);
  background: var(--app-surface);
  box-shadow:
    0 1px 2px rgba(70, 50, 70, 0.03),
    0 20px 46px -40px rgba(120, 60, 110, 0.4);
}

.settings-card-muted {
  background: var(--app-surface-4);
}

.settings-hint {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--settings-muted);
}

/* ── 头像 + 昵称卡片 ──────────────────────────────────────────────────────── */
.settings-surface .settings-card.settings-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 1rem 2rem;
  align-items: start;
}

.settings-avatar-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.settings-avatar-frame {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(120, 90, 130, 0.14),
    0 12px 28px -20px rgba(120, 60, 110, 0.5);
}

.settings-avatar-frame .user-avatar,
.settings-avatar-frame .user-avatar.user-avatar-img {
  width: 4.75rem;
  height: 4.75rem;
  border-color: transparent;
  border-radius: 999px;
}

.settings-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 上传图片：浅粉描边 + 白底（参考稿的次级按钮样式） */
.settings-avatar-actions .settings-upload-btn {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  border: 1px solid rgba(255, 45, 190, 0.28);
  border-radius: 0.65rem;
  background: #fff7fd;
  font-size: 0.9688rem;
  font-weight: 600;
  color: var(--settings-ink);
}

.settings-avatar-actions .settings-upload-btn:hover:not(:disabled) {
  border-color: rgba(255, 45, 190, 0.5);
  background: var(--settings-accent-soft);
  color: var(--settings-ink);
}

.settings-avatar-actions .settings-btn-ghost-danger {
  min-height: 2.5rem;
  border-radius: 0.65rem;
  font-size: 0.875rem;
}


.settings-field {
  margin-bottom: 1.25rem;
}

.settings-field:last-child {
  margin-bottom: 0;
}

.settings-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--settings-ink);
}

.settings-nickname-field {
  min-width: 0;
  margin: 0;
}

.settings-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.settings-input-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.settings-input-icon {
  position: absolute;
  left: 0.95rem;
  width: 1.05rem;
  height: 1.05rem;
  color: #9aa0a8;
  pointer-events: none;
}

.settings-input-wrap .settings-input.studio-input {
  height: 3rem;
  padding: 0 0.95rem 0 2.6rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 0.7rem;
  background: #ffffff;
  font-size: 1rem;
  color: var(--settings-ink);
}

.settings-input-wrap .settings-input.studio-input::placeholder {
  color: #9aa0a8;
}

.settings-input-wrap .settings-input.studio-input:focus {
  border-color: rgba(255, 45, 190, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 45, 190, 0.12);
}

.settings-surface .settings-save-btn {
  flex: 0 0 auto;
  min-width: 5.75rem;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: 0.7rem;
  font-weight: 700;
}

/* cards.css 会把设置卡片内的直接子块当成内嵌小卡片；
   新版版式在卡片内部自行排版，这里收平旧的直接子块样式。 */
.settings-surface .settings-card > .settings-avatar-field,
.settings-surface .settings-card > .settings-field {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-field-hint,
.settings-avatar-hint {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--settings-muted);
}

.settings-profile-hint {
  grid-column: 1 / -1;
  margin-top: -0.1rem;
}

.settings-field-error {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--app-error-fg);
}

.settings-field-success {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--app-success-fg);
}

.settings-vip-hint {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--settings-muted);
}

.settings-vip-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

/* ── 功能卡片（真人认证 / 三视图） ─────────────────────────────────────────── */
.settings-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settings-feature-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.settings-feature-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  color: var(--settings-accent-ink);
  background: linear-gradient(135deg, #fbe6fd 0%, #ffe4f7 100%);
}

.settings-feature-icon-warning {
  color: #b45309;
  background: #fdf0e5;
}

.settings-feature-icon-success {
  color: #0f7a3d;
  background: #e7f8ee;
}

.settings-feature-icon-brand {
  color: var(--settings-accent-ink);
  background: linear-gradient(135deg, #fbe6fd 0%, #ffe4f7 100%);
}

.settings-feature-icon-danger {
  color: #d21e4c;
  background: #ffe9ef;
}

.settings-feature-icon-neutral {
  color: #7c828c;
  background: #f3f0f7;
}

.settings-feature-text {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-feature-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--settings-ink);
}

.settings-feature-desc {
  margin-top: 0.3rem;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--settings-muted);
}

.settings-feature-hint {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--settings-muted-soft);
}

.settings-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  color: var(--settings-muted);
}

.settings-feature-meta-label {
  color: var(--settings-muted-soft);
}

.settings-feature-meta-value {
  font-weight: 600;
  color: var(--settings-ink);
}

.settings-feature-error {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--app-error-fg);
}

.settings-badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.settings-badge-warning {
  color: #b45309;
  background: #fdf0e5;
}

.settings-badge-success {
  color: #0f7a3d;
  background: #e7f8ee;
}

.settings-badge-brand {
  color: var(--settings-accent-ink);
  background: var(--settings-accent-soft-2);
}

.settings-badge-neutral {
  color: #6a7079;
  background: #f3f0f7;
}

.settings-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.settings-inline-note-success {
  border: 1px solid var(--app-success-border);
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.settings-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 0.9rem;
}

.settings-sync-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--settings-muted);
}

.settings-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 0.55rem;
  background: #ffffff;
  font-size: 0.8125rem;
  color: var(--settings-ink-soft);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.settings-sync-btn:hover:not(:disabled) {
  border-color: rgba(255, 45, 190, 0.5);
  color: var(--settings-ink);
}

.settings-sync-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 主行动按钮：真人认证（深色） / 三视图（浅粉描边） */
.settings-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.05rem;
  margin-top: 1.15rem;
  padding: 0.7rem 1rem;
  border-radius: 0.7rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.settings-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-action-dark {
  border: 1px solid #2c2a2f;
  background: #2c2a2f;
  color: #ffffff;
  box-shadow: 0 16px 30px -24px rgba(20, 15, 22, 0.9);
}

.settings-action-dark svg {
  color: #ff8fd8;
}

.settings-action-dark:hover:not(:disabled) {
  background: #171519;
  border-color: #171519;
}

.settings-action-dark:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.settings-action-soft {
  border: 1px solid #f3c9e8;
  background: linear-gradient(180deg, #fff8fe 0%, #fdf0fa 100%);
  color: var(--settings-ink);
}

.settings-action-soft svg {
  color: var(--settings-accent-strong);
}

.settings-action-soft:hover:not(:disabled) {
  border-color: #eba6dc;
  background: linear-gradient(180deg, #fff2fc 0%, #fce6f7 100%);
}

.settings-action-soft:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.settings-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.settings-picker-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 0.65rem;
  background: #ffffff;
  font-size: 0.9375rem;
  color: var(--settings-ink-soft);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.settings-picker-action:hover {
  border-color: rgba(255, 45, 190, 0.45);
  background: var(--settings-accent-soft);
}

/* ── 管理后台 / 退出登录 ──────────────────────────────────────────────────── */
.settings-surface .settings-card.settings-link-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.settings-link-card:hover {
  border-color: rgba(255, 45, 190, 0.28);
  box-shadow:
    0 1px 2px rgba(70, 50, 70, 0.03),
    0 24px 50px -40px rgba(120, 60, 110, 0.55);
}

.settings-link-card:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.settings-link-row-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  color: var(--settings-accent-ink);
  background: linear-gradient(135deg, #fbe6fd 0%, #ffe4f7 100%);
}

.settings-link-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.settings-link-row-label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--settings-ink);
}

.settings-link-row-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--settings-muted);
}

.settings-link-row-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #a7acb4;
}

.settings-surface .settings-card.settings-danger-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.settings-danger-text {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-danger-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--settings-ink);
}

.settings-danger-desc {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--settings-muted);
}

.settings-btn-danger {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 6rem;
  height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid #ffb5c6;
  border-radius: 0.6rem;
  background: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #c81e4a;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.settings-btn-danger:hover {
  border-color: #ff8fa9;
  background: #fff4f7;
}

.settings-btn-danger:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* ── 订阅与积分 ───────────────────────────────────────────────────────────── */
.settings-surface .settings-card.settings-billing-card .settings-credit-value {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 1.2;
}

.settings-surface .settings-card.settings-billing-card .settings-credit-row {
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.settings-surface .settings-card.settings-storage-card {
  padding: 1.5rem 1.625rem;
}

.settings-storage-card .studio-user-menu-storage--settings {
  margin-top: 0;
}

.settings-storage-card .studio-user-menu-storage-label {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.settings-storage-card .studio-user-menu-storage-summary {
  font-size: 0.9375rem;
}

.settings-surface .settings-card.settings-guest-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* ── 法律文档 ─────────────────────────────────────────────────────────────── */
.settings-legal-stack {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.settings-surface .settings-card.settings-legal-links-card {
  padding: 0.6rem;
}

.settings-legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-legal-links .settings-link-row {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}

.settings-legal-links .settings-link-row:hover {
  border-color: rgba(255, 45, 190, 0.16);
  background: var(--settings-accent-soft);
}

.settings-compliance-title {
  margin: 0 0 0.85rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--settings-ink);
}

.settings-surface .settings-card.settings-compliance-card .settings-compliance-title {
  margin-bottom: 0.85rem;
}

/* ── 联系客服 ─────────────────────────────────────────────────────────────── */
.settings-surface .settings-card.settings-support-content {
  padding: 1.75rem;
}

/* ── 响应式 ───────────────────────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .settings-surface {
    grid-template-columns: 13.75rem minmax(0, 1fr);
  }

  .settings-sidebar {
    padding: 2rem 0.5rem 2rem 1.6rem;
  }

  .settings-content {
    padding: 2rem 1.75rem 2.5rem;
  }

  .settings-surface .settings-card.settings-profile-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 860px) {
  .settings-surface {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-radius: 1.125rem;
  }

  .settings-sidebar {
    padding: 1.5rem 1.15rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--settings-line);
  }

  .settings-title {
    font-size: 1.5rem;
  }

  .settings-nav {
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-bottom: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav-item {
    width: auto;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9688rem;
    white-space: nowrap;
  }

  .settings-nav-item-active,
  .settings-nav-item-active:hover {
    background: linear-gradient(
      135deg,
      rgba(255, 45, 190, 0.16) 0%,
      rgba(255, 45, 190, 0.07) 100%
    );
  }

  .settings-nav-item-active::before {
    display: none;
  }

  .settings-content {
    padding: 1.5rem 1.15rem 2rem;
  }

  .settings-panel-title {
    font-size: 1.5rem;
  }

  .settings-cards {
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  .settings-main {
    padding: 0.6rem 0.6rem 4.25rem;
  }

  .settings-back-link.settings-btn-secondary {
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
  }

  .settings-surface .settings-card {
    padding: 1.15rem 1.05rem;
  }

  .settings-content {
    padding: 1.25rem 0.9rem 1.75rem;
  }

  .settings-inline {
    flex-wrap: wrap;
  }

  .settings-surface .settings-save-btn {
    width: 100%;
  }

  .settings-avatar-frame .user-avatar,
  .settings-avatar-frame .user-avatar.user-avatar-img {
    width: 4rem;
    height: 4rem;
  }

  .settings-surface .settings-card.settings-danger-card {
    flex-wrap: wrap;
  }

  .settings-btn-danger {
    width: 100%;
  }

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

/* 头像裁剪弹窗（设置页上传） */
.avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) {
  .avatar-crop-modal {
    align-items: center;
    padding: 1rem;
  }
}

.avatar-crop-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  cursor: pointer;
}

.avatar-crop-modal-panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 28rem;
  max-height: min(96dvh, 720px);
  border-width: 1px;
  border-style: solid;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}

@media (min-width: 640px) {
  .avatar-crop-modal-panel {
    border-radius: 1rem;
  }
}

.avatar-crop-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--app-border);
}

.avatar-crop-modal-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.avatar-crop-modal-title {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.avatar-crop-modal-close {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}

.avatar-crop-modal-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-crop-hint {
  width: 100%;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

.avatar-crop-hint-mobile {
  display: block;
}

.avatar-crop-hint-desktop {
  display: none;
}

@media (min-width: 640px) {
  .avatar-crop-hint-mobile {
    display: none;
  }

  .avatar-crop-hint-desktop {
    display: block;
  }
}

.avatar-crop-viewport {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  border-radius: 0.75rem;
  background: var(--app-media-bg, #0a0a0a);
}

.avatar-crop-viewport:active {
  cursor: grabbing;
}

.avatar-crop-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.88);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  pointer-events: none;
  z-index: 2;
}

.avatar-crop-image {
  position: absolute;
  max-width: none;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

.avatar-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: rgb(0 0 0 / 0.55);
  -webkit-mask: radial-gradient(
    circle at center,
    transparent 49.5%,
    #000 50%
  );
  mask: radial-gradient(circle at center, transparent 49.5%, #000 50%);
}

.avatar-crop-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-fg-muted);
}

.avatar-crop-preview-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
}

.avatar-crop-preview-label {
  font-size: 0.8125rem;
  color: var(--app-fg-muted);
  text-align: center;
}

.avatar-crop-preview-circle {
  position: relative;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
}

.avatar-crop-preview-scaler {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.avatar-crop-preview-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 20rem;
  margin-top: 1rem;
}

.avatar-crop-zoom-btn {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
  cursor: pointer;
}

.avatar-crop-zoom-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.avatar-crop-zoom-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--app-link-fg);
}

.avatar-crop-error {
  width: 100%;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--app-error-fg);
  text-align: center;
}

.avatar-crop-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--app-border);
}

.avatar-crop-btn-cancel,
.avatar-crop-btn-confirm {
  min-height: 2.75rem;
  min-width: 7rem;
}

@media (max-width: 639px) {
  .avatar-crop-modal-footer {
    flex-direction: column-reverse;
  }

  .avatar-crop-btn-cancel,
  .avatar-crop-btn-confirm {
    width: 100%;
    justify-content: center;
  }
}

.settings-btn-ghost-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: transparent;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--app-fg-muted);
  cursor: pointer;
}

.settings-btn-ghost-danger:hover:not(:disabled) {
  border-color: var(--app-error-border);
  color: var(--app-error-fg);
  background: var(--app-error-bg);
}

.settings-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--settings-ink-soft);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.settings-link-row:hover {
  color: var(--settings-ink);
}

.settings-link-row-leading {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.settings-link-danger:hover {
  color: var(--app-error-fg);
}

.settings-credit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.settings-credit-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--settings-ink);
}

.settings-credit-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--settings-muted);
}

.settings-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.settings-btn-primary,
.settings-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.7rem;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.settings-btn-primary {
  border: 1px solid rgba(255, 45, 190, 0.35);
  background: linear-gradient(135deg, #ffb3ec 0%, #ff74d4 100%);
  color: var(--settings-accent-ink);
  box-shadow: 0 14px 28px -24px rgba(255, 45, 190, 0.9);
}

.settings-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffa6e8 0%, #ff61cc 100%);
}

.settings-btn-primary:disabled,
.settings-btn-secondary:disabled,
.settings-btn-ghost-danger:disabled {
  background: var(--app-disabled-bg);
  color: var(--app-disabled-fg);
  box-shadow: none;
  cursor: not-allowed;
}

.settings-btn-secondary {
  border: 1px solid var(--settings-line-strong);
  background: #ffffff;
  color: var(--app-fg-soft);
}

.settings-btn-primary:focus-visible,
.settings-btn-secondary:focus-visible,
.settings-btn-ghost-danger:focus-visible,
.settings-link-row:focus-visible,
.settings-input:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.settings-invite-card {
  padding: 0;
  overflow: hidden;
}

.settings-invite-inner {
  padding: 1.25rem 1.25rem 1rem;
}

.settings-invite-code-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: 0.625rem;
  border: 1px solid var(--app-border-strong);
  background: linear-gradient(135deg, #161616 0%, var(--app-surface-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settings-invite-code-meta {
  min-width: 0;
  flex: 1;
}

.settings-invite-code-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
}

.settings-invite-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--app-fg);
  line-height: 1.2;
  word-break: break-all;
}

@media (min-width: 480px) {
  .settings-invite-code-value {
    font-size: 1.875rem;
  }
}

.settings-invite-copy-code {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.5625rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.settings-invite-copy-code:hover {
  border-color: #444;
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.settings-invite-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5625rem;
  border: 1px solid rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #fcd34d;
}

.settings-invite-tips {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--app-fg-muted);
}

.settings-invite-tips li + li {
  margin-top: 0.25rem;
}

.settings-invite-foot {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-4);
}

@media (min-width: 480px) {
  .settings-invite-foot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.settings-invite-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-invite-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 1.125rem;
  border-radius: 0.5625rem;
  border: none;
  background: #FF2DBE;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.settings-invite-btn-primary:hover {
  filter: brightness(1.08);
}

.settings-invite-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 1.125rem;
  border-radius: 0.5625rem;
  border: 1px solid var(--app-border-input);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg-subtle);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.settings-invite-btn-ghost:hover {
  border-color: #555;
  color: var(--app-fg);
}

.settings-invite-toast {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #86efac;
}

.settings-input.studio-input {
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
}

.settings-liveness-card {
  font-size: 1rem;
}

.settings-btn-secondary:hover:not(:disabled) {
  border-color: var(--button-border);
  color: var(--app-fg);
}

/* ── 按钮边框：统一 #ff6ec7 ── */
.auth-shell .auth-btn-primary,
.auth-btn-ghost,
.auth-btn-secondary,
.auth-btn-ghost:hover,
.auth-btn-secondary:hover,
.auth-modal-overlay .auth-btn-primary,
.auth-modal-overlay .auth-btn-ghost,
.auth-modal-overlay .auth-btn-secondary,
.auth-modal-overlay .auth-btn-ghost:hover,
.auth-modal-overlay .auth-btn-secondary:hover,
.studio-btn-primary,
.studio-nav-link,
.studio-nav-link-accent,
.settings-btn-primary,
.settings-btn-secondary,
.settings-invite-btn-primary,
.settings-invite-btn-ghost,
.settings-invite-copy-code,
.settings-invite-btn-ghost:hover,
.settings-invite-copy-code:hover,
.billing-modal-close,
.billing-modal-close:hover,
.ms-nav-item,
.ms-nav-item:hover,
.ms-nav-item-active,
.ms-nav-item-active:hover,
.ms-asset-btn,
.ms-asset-btn-filled,
.ms-toolbar-btn,
.ms-toolbar-btn:hover,
.ms-toolbar-btn-on,
.ms-grid-more-btn,
.ms-grid-more-btn:hover,
.ms-chip-btn,
.ms-chip-menu-trigger,
.ms-chip-menu-trigger[aria-expanded="true"],
.ms-chip-on,
.media-popover-delete-btn,
.media-popover-delete-btn:hover:not(:disabled),
.vp-tag,
.vp-tag:hover,
.vp-tag-active,
.vp-tag-active:hover,
.arrow-button {
  border-color: var(--button-border) !important;
}

.studio-btn-primary,
.auth-modal-overlay .auth-btn-primary,
.settings-invite-btn-primary,
.studio-nav-link-accent {
  border: 1px solid var(--button-border) !important;
}

.studio-nav-product,
.studio-nav-product:hover,
.studio-nav-product-active,
.studio-nav-product-active:hover,
.studio-tab,
.studio-tab:hover,
.studio-tab-active,
.studio-tab-active:hover {
  border: none !important;
}

.ms-bar-toolbar .ms-chip,
.ms-bar-toolbar .ms-chip-btn,
.ms-bar-toolbar .ms-chip-menu-trigger,
.ms-bar-toolbar .ms-chip-menu-trigger[aria-expanded="true"],
.ms-bar-toolbar .ms-chip-on,
.ms-bar-toolbar .ms-chip-model {
  border: none !important;
  border-color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* 社区 (/community)                                                           */
/* -------------------------------------------------------------------------- */

.community-shell {
  min-height: 100vh;
  flex-direction: column;
}

.community-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 3rem;
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}

/* 全站 AI 免责页脚高度：社区悬浮按钮需抬高，避免与文案重叠 */
:root {
  --site-ai-disclaimer-block: 2.125rem;
}

.site-ai-disclaimer {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* 免责页脚 fixed 后，主内容区预留底部空间，避免被遮挡 */
.site-layout-main {
  padding-bottom: max(
    var(--site-ai-disclaimer-block),
    calc(env(safe-area-inset-bottom, 0px) + var(--site-ai-disclaimer-block))
  );
}

/* 社区悬浮入口（各工作台底部居中，社区页本身不显示） */
.community-fab {
  position: fixed;
  left: 50%;
  bottom: max(
    calc(1.5rem + var(--site-ai-disclaimer-block)),
    calc(env(safe-area-inset-bottom, 0px) + var(--site-ai-disclaimer-block))
  );
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.375rem 0.75rem 1.125rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 45, 190, 0.5);
  background: rgba(22, 22, 22, 0.94);
  color: #fafafa;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.community-fab:hover,
.community-fab:focus-visible {
  border-color: #ff2dbe;
  background: rgba(28, 28, 28, 0.97);
  color: #fff;
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 14px 36px rgba(255, 45, 190, 0.22),
    0 10px 32px rgba(0, 0, 0, 0.5);
}

.community-fab-icon {
  width: 1.375rem;
  height: 1.375rem;
  color: #ff2dbe;
  flex-shrink: 0;
}

.community-fab-label {
  line-height: 1;
  letter-spacing: 0.03em;
}

body.ms-recreate-modal-open .community-fab {
  display: none;
}

.studio-shell-generation-album {
  flex-direction: column;
}

.generation-album-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 3rem;
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}

.generation-album-media-filters {
  margin-top: -0.375rem;
}

@media (min-width: 768px) {
  .generation-album-main {
    padding: 2rem 2rem 4rem;
  }
}

@media (min-width: 768px) {
  .community-main {
    padding: 2rem 2rem 4rem;
  }
}

.community-header {
  margin-bottom: 1.5rem;
}

.community-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--app-fg);
}

.community-subtitle {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #a3a3a3;
}

.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.125rem;
}

.community-tabs .studio-tab .uiverse-pill-inner {
  padding: 0.5625rem 1.125rem;
  font-size: 0.8125rem;
}

.community-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid #2e2e2e;
  background: linear-gradient(180deg, #161616 0%, var(--app-surface-4) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.community-toolbar-top {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .community-toolbar-top {
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
  }
}

.community-toolbar-top .community-search {
  flex: 1;
  min-width: 0;
}

.community-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid #404040;
  background: #1c1c1c;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e5e5e5;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.community-toolbar-toggle:hover {
  border-color: #666;
  background: #252525;
  color: var(--app-fg);
}

.community-toolbar-toggle.is-expanded {
  border-color: rgba(255, 45, 190, 0.35);
  background: rgba(255, 45, 190, 0.08);
  color: #ff6ed8;
}

.community-toolbar-toggle-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #ff6ed8;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: rgba(255, 45, 190, 0.15);
}

.community-toolbar-toggle-chevron {
  transition: transform 0.2s ease;
}

.community-toolbar-toggle.is-expanded .community-toolbar-toggle-chevron {
  transform: rotate(180deg);
}

.community-toolbar-filters {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.community-toolbar-filters.is-expanded {
  display: flex;
}

.community-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.625rem;
  border: 1px solid #3a3a3a;
  background: #0c0c0c;
  padding: 0 0.875rem;
  min-height: 2.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.community-search:focus-within {
  border-color: rgba(255, 45, 190, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.12);
}

.community-search-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #8a8a8a;
}

.community-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--app-fg-soft);
  outline: none;
  min-width: 0;
}

.community-search-input::placeholder {
  color: #737373;
}

.community-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #252525;
  color: #ccc;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
}

.community-search-clear:hover {
  color: var(--app-fg);
  background: var(--app-border-input);
}

.community-filter-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.community-filter-group {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem 0.75rem;
}

@media (min-width: 640px) {
  .community-filter-group {
    align-items: center;
  }
}

.community-filter-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #b3b3b3;
  padding-top: 0.375rem;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .community-filter-label {
    padding-top: 0;
  }
}

.community-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.community-filter-chip {
  border-radius: 9999px;
  border: 1px solid #404040;
  background: #1c1c1c;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e5e5e5;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}

.community-filter-chip:hover {
  border-color: #666;
  color: var(--app-fg);
  background: #252525;
}

.community-filter-chip.is-active {
  border-color: rgba(255, 45, 190, 0.55);
  background: rgba(255, 45, 190, 0.14);
  color: #ff6ed8;
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.15);
}

.community-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid #252525;
}

.community-toolbar-hint {
  font-size: 0.75rem;
  color: #a3a3a3;
  margin: 0;
  line-height: 1.5;
}

.community-toolbar-reset {
  border: 1px solid #404040;
  border-radius: 9999px;
  background: var(--app-surface-2);
  font-size: 0.75rem;
  font-weight: 500;
  color: #ff6ed8;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
}

.community-toolbar-reset:hover {
  border-color: rgba(255, 45, 190, 0.45);
  background: rgba(255, 45, 190, 0.08);
}

.community-result-count {
  font-size: 0.8125rem;
  color: #8a8a8a;
  margin: 0 0 0.75rem;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.community-card {
  border-radius: 0.875rem;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.community-card-media-link {
  display: block;
  text-decoration: none;
}

.community-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--app-media-bg);
  overflow: hidden;
}

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

.community-card-product {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.65);
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  color: #ddd;
}

.community-card-body {
  padding: 0.75rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.community-card-title-link {
  text-decoration: none;
}

.community-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-fg);
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.community-card-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: #a3a3a3;
}

.community-card-author-avatar {
  flex-shrink: 0;
}

.community-card-desc {
  font-size: 0.75rem;
  color: #999;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.community-card-actions {
  margin-top: auto;
  padding-top: 0.375rem;
  display: flex;
  gap: 0.75rem;
}

.community-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--app-fg-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.community-card-action.is-active {
  color: #ff2dbe;
}

.community-loading,
.community-loading-page,
.community-empty {
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #666;
  font-size: 0.875rem;
}

.community-banner-error {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: #fca5a5;
}

.community-load-more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.community-btn-primary,
.community-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
}

.community-btn-primary {
  border: 1px solid rgba(255, 45, 190, 0.45);
  background: rgba(255, 45, 190, 0.12);
  color: #ff2dbe;
}

.community-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.community-btn-ghost {
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  color: #ccc;
}

.community-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.community-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--app-fg-muted);
  text-decoration: none;
}

.community-back-link:hover {
  color: var(--app-fg);
}

.community-detail-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 0.25rem;
}

@media (min-width: 900px) {
  .community-detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.community-detail-media {
  border-radius: 0.875rem;
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  background: #000;
}

.community-detail-video,
.community-detail-img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}

.community-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.community-detail-badge {
  align-self: flex-start;
  border-radius: 0.375rem;
  border: 1px solid var(--app-border-input);
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--app-fg-subtle);
}

.community-detail-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--app-fg);
}

.community-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #a3a3a3;
}

.community-detail-author-avatar {
  flex-shrink: 0;
}

.community-detail-body,
.community-detail-preset {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--app-fg-subtle);
}

.community-detail-preset-link-wrap {
  display: inline;
}

.community-detail-preset-link {
  color: #e8a4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.community-detail-preset-link:hover {
  color: #ff2dbe;
}

.community-detail-preset-notice {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--app-error-fg, #f87171);
}

.community-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.community-action-btn,
.community-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  color: #ccc;
  cursor: pointer;
}

.community-action-btn.is-active {
  border-color: rgba(255, 45, 190, 0.45);
  color: #ff2dbe;
}

.community-action-btn-danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.community-icon-btn {
  padding: 0.375rem;
}

.community-share-root {
  position: relative;
}

.community-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  cursor: default;
}

.community-share-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  width: min(20rem, calc(100vw - 2rem));
  border-radius: 0.75rem;
  border: 1px solid var(--app-border-input);
  background: #161616;
  padding: 0.875rem 1rem 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.community-share-panel-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fafafa;
}

.community-share-panel-hint {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #8a8a8a;
}

.community-share-caption-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #3a3a3a;
  background: #0c0c0c;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--app-fg-soft);
  resize: vertical;
  min-height: 5rem;
  outline: none;
}

.community-share-caption-input:focus {
  border-color: rgba(255, 45, 190, 0.35);
}

.community-share-caption-count {
  margin: 0.25rem 0 0.625rem;
  text-align: right;
  font-size: 0.6875rem;
  color: #737373;
  font-variant-numeric: tabular-nums;
}

.community-share-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.community-share-channel-btn {
  border: 1px solid #404040;
  border-radius: 0.5rem;
  background: #1c1c1c;
  padding: 0.4375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e5e5e5;
  cursor: pointer;
}

.community-share-channel-btn:hover {
  border-color: rgba(255, 45, 190, 0.4);
  color: #ff6ed8;
  background: rgba(255, 45, 190, 0.08);
}

.community-share-copy-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: none;
  background: none;
  padding: 0.375rem;
  font-size: 0.75rem;
  color: #a3a3a3;
  cursor: pointer;
}

.community-share-copy-link:hover {
  color: #ff6ed8;
}

.community-modal-publish {
  max-width: 28rem;
}

.community-modal-publish textarea.community-publish-copy {
  min-height: 6rem;
  border: 1px solid #3a3a3a;
  border-radius: 0.5rem;
  background: #0c0c0c;
  padding: 0.625rem 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.community-modal-publish textarea.community-publish-copy:focus {
  border-color: rgba(255, 45, 190, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.12);
}

.community-publish-copy-count {
  display: block;
  margin-top: 0.375rem;
  text-align: right;
  font-size: 0.6875rem;
  color: #737373;
  font-variant-numeric: tabular-nums;
}

.community-share-toast {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 60;
  width: max-content;
  max-width: 16rem;
  border-radius: 0.375rem;
  background: #252525;
  border: 1px solid var(--app-border-input);
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  color: #ccc;
  line-height: 1.45;
}

.community-comments {
  margin-top: 0.5rem;
  padding: 1.25rem 1.125rem 1.5rem;
  border-radius: 0.875rem;
  border: 1px solid #2e2e2e;
  background: linear-gradient(180deg, var(--app-surface) 0%, #101010 100%);
}

.community-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fafafa;
  margin: 0 0 1rem;
}

.community-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #ff6ed8;
  background: rgba(255, 45, 190, 0.12);
  border: 1px solid rgba(255, 45, 190, 0.25);
}

.community-comment-compose-top {
  margin-bottom: 1.25rem;
}

.community-comment-compose-box {
  border-radius: 0.625rem;
  border: 1px solid #3a3a3a;
  background: #0c0c0c;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.community-comment-compose-box:focus-within {
  border-color: rgba(255, 45, 190, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 45, 190, 0.12);
}

.community-comment-input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--app-fg-soft);
  resize: vertical;
  min-height: 5rem;
  outline: none;
}

.community-comment-input::placeholder {
  color: #737373;
}

.community-comment-compose-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid #252525;
  background: var(--app-surface-4);
}

.community-comment-char-count {
  font-size: 0.75rem;
  color: #737373;
  font-variant-numeric: tabular-nums;
}

.community-comment-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.community-comment-cancel {
  border: none;
  background: none;
  font-size: 0.8125rem;
  color: #a3a3a3;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
}

.community-comment-cancel:hover {
  color: var(--app-fg);
  background: #252525;
}

.community-comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-fg);
  cursor: pointer;
  background: linear-gradient(135deg, #ff2dbe 0%, #d946ef 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transition: opacity 0.15s, transform 0.1s;
}

.community-comment-submit:hover:not(:disabled) {
  opacity: 0.95;
}

.community-comment-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.community-comment-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #404040;
  box-shadow: none;
  color: #a3a3a3;
}

.community-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.community-comment-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}

.community-comment-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.community-comment-bubble {
  border-radius: 0.625rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  padding: 0.625rem 0.875rem;
}

.community-comment-item-reply .community-comment-bubble {
  background: #151515;
  border-color: var(--app-border-strong);
}

.community-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.625rem;
  margin-bottom: 0.375rem;
}

.community-comment-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fafafa;
}

.community-comment-time {
  font-size: 0.75rem;
  color: #8a8a8a;
}

.community-comment-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #e5e5e5;
  white-space: pre-wrap;
  word-break: break-word;
}

.community-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding-left: 0.125rem;
}

.community-comment-action {
  font-size: 0.75rem;
  font-weight: 500;
  color: #a3a3a3;
  background: none;
  border: none;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  transition: color 0.15s, background 0.15s;
}

.community-comment-action:hover {
  color: #ff6ed8;
  background: rgba(255, 45, 190, 0.08);
}

.community-comment-action-muted {
  color: #737373;
}

.community-comment-action-muted:hover {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.08);
}

.community-comment-reply-compose {
  margin-top: 0.625rem;
}

.community-comment-replies-wrap {
  margin-top: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.community-comment-toggle-replies {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ff6ed8;
  background: none;
  border: none;
  padding: 0.3125rem 0.5rem;
  margin-left: 0.125rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.community-comment-toggle-replies:hover {
  color: #ff2dbe;
  background: rgba(255, 45, 190, 0.08);
}

.community-comment-toggle-replies svg {
  transition: transform 0.2s ease;
}

.community-comment-toggle-replies.is-expanded svg {
  transform: rotate(180deg);
}

.community-comment-replies {
  list-style: none;
  margin: 0.875rem 0 0 0.375rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--app-border-input);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 移动端：限制嵌套回复缩进，避免正文被挤成竖条 */
@media (max-width: 767px) {
  .community-comments {
    padding: 1rem 0.75rem 1.25rem;
    overflow-x: clip;
  }

  .community-comment-list {
    gap: 1rem;
  }

  .community-comment-item {
    gap: 0.625rem;
  }

  .community-comment-replies {
    margin-left: 0;
    padding-left: 0.625rem;
    border-left-width: 1px;
  }

  /* 更深层回复不再叠加缩进，改用分隔线区分 */
  .community-comment-replies .community-comment-replies {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-border-strong);
  }

  .community-comment-item-reply > .user-avatar {
    display: none;
  }

  .community-comment-item-reply {
    gap: 0;
  }

  .community-comment-action {
    white-space: nowrap;
  }

  .community-comment-toggle-replies {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

.community-comments-loading {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.community-empty-hint {
  font-size: 0.875rem;
  color: #8a8a8a;
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.community-field-error {
  font-size: 0.75rem;
  color: #f87171;
  margin-top: 0.375rem;
}

.community-modal-backdrop {
  position: fixed;
  inset: 0;
  /* 须压在 .history-video-modal(75) 之上（从历史预览里「分享到社区」） */
  z-index: 86;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.75);
}

.community-modal {
  width: 100%;
  max-width: 26rem;
  border-radius: 0.875rem;
  border: 1px solid var(--app-border-input);
  background: #161616;
  padding: 1rem 1.125rem 1.125rem;
}

.community-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.community-modal-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-fg);
}

.community-modal-hint {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--app-fg-muted);
  margin-bottom: 0.875rem;
}

.community-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.community-field-label {
  font-size: 0.75rem;
  color: var(--app-fg-subtle);
}

.community-input {
  width: 100%;
}

.community-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.community-modal-success {
  font-size: 0.875rem;
  color: #ccc;
  line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* 微信内置浏览器：全站引导在外部浏览器打开                                        */
/* -------------------------------------------------------------------------- */

html.wechat-in-app-browser,
html.wechat-in-app-browser body {
  overflow: hidden;
  height: 100%;
}

.wechat-open-in-browser-gate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1.5rem 2rem;
  color: var(--app-fg);
  font-family: var(--font-noto-sans-sc), "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--app-bg);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.wechat-open-in-browser-arrow {
  position: absolute;
  top: 0.35rem;
  right: 0.75rem;
  width: 5.5rem;
  height: 4.5rem;
  color: var(--app-fg);
  opacity: 0.95;
}

.wechat-open-in-browser-bubble {
  margin-top: 4.5rem;
  max-width: 18rem;
  padding: 1.1rem 1.35rem;
  text-align: center;
  border: 2px dashed var(--app-border-input);
  border-radius: 999px;
  background: var(--app-surface);
}

.wechat-open-in-browser-title {
  margin: 0;
  color: var(--app-fg);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.wechat-open-in-browser-hints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: auto;
  padding-bottom: 2.5rem;
}

.wechat-open-in-browser-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-fg-soft);
}

.wechat-open-in-browser-hint-menu {
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--app-border-input);
  border-radius: 999px;
}

.wechat-open-in-browser-dots {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wechat-open-in-browser-dots span {
  width: 0.35rem;
  height: 0.35rem;
  background: var(--app-fg);
  border-radius: 999px;
}

.wechat-open-in-browser-hint-action {
  gap: 0.65rem;
  min-width: 12rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
  background: var(--app-surface-2);
  border-radius: 0.65rem;
}

.wechat-open-in-browser-globe {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--app-fg-soft);
  border-radius: 999px;
}

.chunk-load-recovery {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 99999;
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-border-input);
  border-radius: 10px;
  background: var(--app-surface);
  color: var(--app-fg-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 8px 32px var(--app-shadow);
}

.chunk-load-recovery-link {
  color: var(--app-link-fg);
}

.chunk-load-recovery-button {
  margin-left: 8px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--app-accent);
  border-radius: 6px;
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-weight: 600;
  cursor: pointer;
}

.chunk-load-recovery-button:focus-visible,
.chunk-load-recovery-link:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.studio-shell-viral-presets,
.studio-shell-viral-presets .studio-nav,
.vp-gallery {
  background-color: var(--app-bg);
}

.studio-shell-viral-presets .studio-nav {
  border-bottom-color: var(--app-border-subtle);
}

.vp-tag {
  border-color: var(--app-border-input);
  background: var(--app-bg);
  color: var(--app-fg);
}

.vp-tag:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-link-fg);
}

.vp-tag-active,
.vp-tag-active:hover {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.vp-tag-badge {
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.vp-tag-active .vp-tag-badge {
  background: var(--app-on-accent);
  color: var(--app-accent);
}

.vp-mosaic-overlay {
  background: var(--app-media-overlay);
}

.vp-mosaic-name-en,
.vp-mosaic-name-zh,
.vp-mosaic-media .preset-card-fullscreen,
.vp-mosaic-media .preset-card-fullscreen:hover {
  color: var(--app-media-fg);
}

.studio-credit-upgrade {
  background-color: var(--app-surface);
  color: var(--app-fg);
}

.studio-credit-upgrade:hover {
  background-color: var(--app-surface-2);
}

.studio-credit-balance {
  color: var(--app-fg-soft);
}

.studio-credit-balance:hover {
  border-color: var(--app-border-input);
}

.studio-user-name,
.studio-user-menu-item {
  color: var(--app-fg);
}

.studio-user-menu-email,
.studio-user-menu-liveness-label,
.studio-user-menu-storage-label,
.studio-user-menu-storage-plan,
.studio-user-menu-storage-split,
.studio-user-menu-storage-hint,
.studio-user-menu-plan,
.studio-user-menu-beian,
.studio-user-menu-beian a {
  color: var(--app-fg-muted);
}

.studio-user-menu-card {
  box-shadow: 0 16px 48px var(--app-shadow);
}

.studio-user-menu-header,
.studio-user-menu-liveness,
.studio-user-menu-storage,
.studio-user-menu-credits,
.studio-user-menu-beian {
  border-color: var(--app-border);
}

.studio-user-menu-divider {
  background: var(--app-border);
}

.studio-mobile-sheet-overlay {
  background: var(--app-overlay);
}

.studio-mobile-sheet {
  border-color: var(--app-border-input);
  box-shadow: 0 -16px 48px var(--app-shadow);
}

.studio-mobile-sheet-head {
  border-color: var(--app-border);
}

.studio-mobile-menu-trigger:hover,
.studio-mobile-menu-trigger:focus-visible,
.studio-mobile-menu-option:hover,
.studio-mobile-menu-option:focus-visible {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.studio-mobile-menu-option {
  color: var(--app-fg-soft);
}

.studio-mobile-menu-option-icon {
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.billing-modal-overlay {
  background: var(--app-overlay);
}

.billing-modal-panel {
  border-color: var(--app-border-input);
  background: var(--app-bg);
  color: var(--app-fg);
}

.billing-modal-header {
  border-color: var(--app-border);
}

.billing-modal-scroll {
  background: var(--app-bg);
}

.billing-modal-close {
  border-color: var(--app-border-input);
  background: var(--app-surface-3);
  color: var(--app-fg-muted);
}

.billing-modal-close:hover {
  border-color: var(--app-focus-ring);
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.billing-interval-toggle {
  border-color: var(--app-border-input);
  background: var(--app-surface-3);
}

.billing-interval-indicator {
  background: var(--app-fg);
}

.billing-interval-option {
  color: var(--app-fg-muted);
}

.billing-interval-option:hover {
  color: var(--app-fg);
}

.billing-interval-option-active,
.billing-interval-option-active:hover {
  color: var(--app-bg);
}

.pricing-mini-card {
  border-color: var(--app-border);
  background: var(--app-surface-3);
}

.pricing-mini-card-credits,
.pricing-mini-card-ultimate .pricing-mini-card-top {
  border-color: var(--app-border);
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.pricing-mini-card-divider,
.pricing-mini-card-top .ultimate-tier-slider {
  border-color: var(--app-border);
}

.pricing-estimate-scenario,
.pricing-estimate-text {
  color: var(--app-fg-muted);
}

.pricing-estimate-count,
.pricing-estimate-icon {
  color: var(--app-fg-subtle);
}

.pricing-estimate-icon {
  border-color: var(--app-border-input);
  background: var(--app-surface-4);
}

.pricing-estimate-text strong {
  color: var(--app-fg);
}

.pricing-scenario-estimate-highlight .pricing-estimate-scenario,
.pricing-scenario-estimate-highlight .pricing-estimate-count,
.pricing-scenario-estimate-highlight .pricing-estimate-count strong {
  color: var(--app-link-fg);
}

.ultimate-tier-rail::before {
  background: var(--app-border-input);
}

.ultimate-tier-tick {
  border-color: var(--app-border-input);
}

.ultimate-tier-stop {
  color: var(--app-fg-muted);
}

.ultimate-tier-stop:hover,
.ultimate-tier-stop-active {
  color: var(--app-link-fg);
}

.studio-nav-product:focus-visible,
.studio-credit-balance:focus-visible,
.studio-credit-upgrade:focus-visible,
.studio-nav-login:focus-visible,
.studio-user-menu-trigger:focus-visible,
.studio-user-menu-item:focus-visible,
.vp-tag:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* AI 口播工作台：语义表面、状态色与固定媒体前景 */
.gen-progress-banner {
  background: linear-gradient(
    135deg,
    rgba(255, 45, 190, 0.08) 0%,
    var(--app-surface-2) 100%
  );
}

.gen-progress-banner-icon {
  color: var(--app-link-fg);
}

.upload-zone:hover,
.media-upload-trigger:hover:not(:disabled),
.studio-preview-slot-interactive:hover:not(:disabled) {
  border-color: var(--app-border-input);
}

.media-upload-trigger {
  color: var(--app-fg-soft);
}

.media-popover {
  background: var(--app-surface-2);
  box-shadow: 0 25px 50px -12px var(--app-shadow);
}

.media-popover-title {
  background: var(--app-fg);
  color: var(--app-bg);
}

.media-popover-upload-tile {
  border-color: var(--app-border-input);
}

.media-popover-upload-tile:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
  background: var(--app-surface);
}

.media-popover-body > button {
  border-color: var(--app-border-input);
  background: var(--app-surface);
  color: var(--app-fg-soft);
}

.media-popover-body > button:hover:not(:disabled) {
  color: var(--app-fg);
}

.media-popover-empty,
.media-popover-empty p {
  color: var(--app-fg-muted);
}

.media-popover-error {
  color: var(--app-error-fg);
}

.media-popover-delete-btn,
.media-popover-gen-label,
.studio-preview-badge,
.studio-preview-slot-name,
.studio-preview-slot-badge,
.vp-gen-change,
.vp-gen-upload-clear,
.vp-gen-upload-filename,
.vp-gen-preset-zh {
  color: var(--app-media-fg);
}

.asset-verify-banner-pending {
  color: var(--app-fg-soft);
}

.asset-verify-banner-success {
  border-color: var(--app-success-border);
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.asset-verify-banner-error {
  border-color: var(--app-error-border);
  background: var(--app-error-bg);
  color: var(--app-error-fg);
}

.asset-verify-banner-info {
  border-color: var(--app-warning-border);
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.asset-verify-desc,
.asset-verify-meta {
  color: var(--app-fg-muted);
}

.asset-verify-meta code {
  color: var(--app-link-fg);
}

.media-popover-verify-badge-passed,
.media-popover-verify-badge-failed,
.media-popover-verify-badge-skipped,
.media-popover-verify-badge-not_required {
  color: var(--app-on-accent);
}

.studio-sidebar .ratio-btn,
.studio-sidebar .studio-label,
.studio-loading {
  color: var(--app-fg-muted);
}

.studio-sidebar .ratio-btn-active {
  color: var(--app-fg);
}

.video-trim-timeline > div > button {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.video-trim-timeline > div > button:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
  background: var(--app-surface);
}

.video-trim-timeline button[aria-label="播放选中片段"] svg {
  fill: currentColor;
}

.video-trim-timeline > div > span {
  color: var(--app-fg-soft);
}

.face-verify-qr-code > div > p {
  color: var(--app-fg-muted);
}

/* 电商直出：双主题语义表面与固定媒体前景 */
.ms-sidebar {
  border-right-color: var(--app-border-subtle);
  background:
    linear-gradient(165deg, rgba(255, 45, 190, 0.07) 0%, transparent 42%),
    linear-gradient(180deg, var(--app-surface-3) 0%, var(--app-bg) 100%);
  box-shadow: inset -1px 0 0 var(--app-border-subtle);
}

.ms-sidebar-brand-mark {
  color: var(--app-link-fg);
}

.ms-sidebar-brand-text {
  color: var(--app-fg);
}

.ms-sidebar-toggle,
.ms-nav-icon {
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.ms-sidebar-toggle:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-nav-item {
  color: var(--app-fg-muted);
}

.ms-nav-item:hover {
  background: var(--app-surface-2);
  color: var(--app-fg);
}

.ms-project-back:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-nav-item:hover .ms-nav-icon,
.ms-nav-item-active .ms-nav-icon,
.ms-nav-item-active:hover .ms-nav-icon {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-nav-item-active,
.ms-nav-item-active:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-fg);
}

.ms-nav-badge,
.ms-nav-item-active .ms-nav-badge {
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.ms-mode {
  color: var(--app-fg-muted);
}

.ms-mode:not(.ms-mode-active):hover {
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.ms-mode-active {
  background: var(--brand-accent-muted-bg, rgba(255, 45, 190, 0.12));
  border-color: var(--brand-accent-muted-border, rgba(255, 45, 190, 0.45));
  color: var(--app-fg);
  box-shadow:
    0 0 0 1px var(--brand-accent-muted-border, rgba(255, 45, 190, 0.18)),
    0 4px 14px rgba(255, 45, 190, 0.14);
  font-weight: 700;
}

.ms-mode-active svg {
  color: var(--app-accent);
}

.ms-bar-footer {
  border-top-color: var(--app-border);
}

.ms-bar-toolbar {
  --ms-toolbar-chip-bg: var(--app-surface-2);
  --ms-toolbar-chip-bg-hover: var(--app-surface-4);
}

.ms-bar-input {
  border-radius: 0.35rem;
  background: var(--app-input-bg);
  color: var(--app-fg);
}

.ms-bar-input::placeholder,
.ms-style-search input::placeholder {
  color: var(--app-placeholder);
}

.ms-chip,
.ms-chip-btn {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.ms-bar .ms-chip-btn:hover:not(:disabled),
.ms-bar .ms-chip-menu-trigger:hover {
  border-color: var(--app-border-input);
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-bar-toolbar .ms-chip,
.ms-bar-toolbar .ms-chip-btn {
  background: var(--ms-toolbar-chip-bg);
  color: var(--app-fg-soft);
}

.ms-bar-toolbar .ms-chip-btn:hover:not(:disabled),
.ms-bar-toolbar .ms-chip-menu-trigger:hover {
  background: var(--ms-toolbar-chip-bg-hover);
  color: var(--app-fg);
}

.ms-chip-model,
.ms-bar-toolbar .ms-chip-model,
.ms-chip-on,
.ms-bar-toolbar .ms-chip-on,
.ms-bar-toolbar .ms-chip-menu-trigger[aria-expanded="true"] {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-bar-toolbar .ms-chip-model:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-chip-menu,
.ms-params-menu,
.ms-chip-sheet,
.ms-aspect-menu {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  box-shadow: 0 18px 40px var(--app-shadow);
}

.ms-chip-menu-item {
  color: var(--app-fg-soft);
}

.ms-chip-menu-item:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-chip-menu-item-on,
.ms-chip-menu-item-on:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-params-row + .ms-params-row,
.ms-params-aspect,
.ms-params-row-qty,
.ms-chip-sheet-head {
  border-color: var(--app-border);
}

.ms-params-label,
.ms-params-duration-ticks,
.ms-aspect-menu-head,
.ms-qty-label {
  color: var(--app-fg-muted);
}

.ms-params-duration-value {
  color: var(--app-link-fg);
}

.ms-params-duration-range {
  accent-color: var(--app-accent);
}

.ms-params-pill,
.ms-params-qty,
.ms-qty {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.ms-params-pill-on {
  border-color: var(--app-accent);
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-aspect-grid {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
}

.ms-aspect-cell {
  color: var(--app-fg-soft);
}

.ms-aspect-cell:nth-child(odd),
.ms-aspect-cell:nth-child(n + 3) {
  border-color: var(--app-border);
}

.ms-aspect-cell:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-aspect-cell-on,
.ms-aspect-cell-on:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-aspect-cell-on .ms-aspect-icon {
  color: var(--app-link-fg);
}

.ms-chip-sheet-close {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.ms-chip-sheet-done {
  color: var(--app-link-fg);
}

.ms-ref-remove {
  border-color: var(--app-border-input);
  background: var(--app-surface-4);
  color: var(--app-fg-soft);
}

.ms-ref-remove:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.ms-asset-btn,
.ms-bar-actions .ms-asset-btn {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.ms-asset-btn-filled {
  border-color: var(--app-border-input);
}

.ms-bar-actions .ms-asset-label-main {
  color: var(--app-fg-soft);
}

.ms-asset-plus {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.ms-asset-clear {
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-4);
  color: var(--app-fg-soft);
}

.ms-grid-more-btn {
  background: var(--app-surface);
  color: var(--app-fg-soft);
}

.ms-grid-more-btn:hover {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.ms-empty,
.ms-grid-loading,
.ms-recreate-loading {
  color: var(--app-fg-muted);
}

.ms-filter-active,
.ms-filter-active:hover {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.ms-card-en,
.ms-card-zh,
.ms-picker-tile-label,
.ms-picker-like {
  color: var(--app-media-fg);
}

.ms-picker-like-on {
  color: var(--app-accent);
}

.ms-scene-media {
  filter: none;
}

.ms-chip-sheet-overlay,
.ms-picker-overlay {
  background: var(--app-overlay);
}

.ms-picker,
.ms-style,
.ms-recreate {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  box-shadow: 0 25px 50px -12px var(--app-shadow);
}

.ms-picker-header,
.ms-style-main,
.ms-style-sidebar,
.ms-recreate-more {
  border-color: var(--app-border);
}

.ms-picker-tab {
  color: var(--app-fg-muted);
}

.ms-picker-tab:hover {
  color: var(--app-fg);
}

.ms-picker-tab-active,
.ms-picker-tab-active:hover {
  background: var(--app-fg);
  color: var(--app-bg);
}

.ms-picker-close {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.ms-picker-close:hover {
  background: var(--app-border-subtle);
  color: var(--app-fg);
}

.ms-picker-upload-tile {
  border-color: var(--app-border-input);
  color: var(--app-fg-soft);
}

.ms-picker-upload-tile:hover {
  border-color: var(--app-focus-ring);
  background: var(--app-surface-4);
}

.ms-picker-upload-tile svg,
.ms-picker-empty,
.ms-picker-empty p {
  color: var(--app-fg-muted);
}

.ms-picker-tile:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
}

.ms-style-section-title {
  color: var(--app-fg-muted);
}

.ms-style-group {
  color: var(--app-fg-muted);
}

.ms-style-group:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.ms-style-group-active,
.ms-style-group-active:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-fg);
}

.ms-style-search {
  border-color: var(--app-border-input);
  background: var(--app-input-bg);
  color: var(--app-fg-muted);
}

.ms-style-search input {
  color: var(--app-fg-soft);
}

.ms-style-search:focus-within {
  border-color: var(--app-focus-ring);
}

.ms-style-check,
.ms-recreate-submit {
  color: var(--app-on-accent);
}

.ms-recreate-preview {
  background: var(--app-media-bg);
}

.ms-recreate-cat {
  border-color: var(--app-border-input);
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.ms-recreate-label {
  color: var(--app-fg-soft);
}

.ms-recreate-req {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.ms-recreate-opt {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.ms-recreate-textarea {
  border-color: var(--app-border-input);
  background: var(--app-input-bg);
  color: var(--app-fg-soft);
}

.ms-recreate-textarea:focus {
  border-color: var(--app-focus-ring);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-sheet-head {
  border-color: var(--app-border);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-sheet-close {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option {
  color: var(--app-fg-soft);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option:hover,
.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option:focus-visible {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option-active {
  background: var(--brand-accent-muted-bg);
  color: var(--app-fg);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option-icon {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option-active .studio-mobile-menu-option-icon,
.studio-mobile-sheet[aria-label="营销工作室页面导航"] .studio-mobile-menu-option-check {
  color: var(--app-link-fg);
}

.ms-route-loading .ms-card {
  background-color: var(--app-skeleton);
}

.ms-bar-input:focus-visible,
.ms-recreate-textarea:focus-visible,
.ms-style-search input:focus-visible,
.ms-nav-item:focus-visible,
.ms-sidebar-toggle:focus-visible,
.ms-chip-btn:focus-visible,
.ms-chip-menu-trigger:focus-visible,
.ms-chip-menu-item:focus-visible,
.ms-params-pill:focus-visible,
.ms-params-qty button:focus-visible,
.ms-aspect-cell:focus-visible,
.ms-asset-btn:focus-visible,
.ms-asset-clear:focus-visible,
.ms-product-add:focus-visible,
.ms-product-tile-remove:focus-visible,
.ms-product-tile-handle:focus-visible,
.ms-ref-remove:focus-visible,
.ms-picker-tab:focus-visible,
.ms-picker-close:focus-visible,
.ms-picker-upload-tile:focus-visible,
.ms-style-group:focus-visible,
.ms-grid-more-btn:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}


/* ── /studio 模板列表「加载更多」行（视觉同 .ms-grid-more） ── */
.preset-grid-more {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 3rem;
}

.preset-grid-more-btn {
  border: 1px solid var(--app-border-input);
  border-radius: 999px;
  background: var(--app-surface);
  color: #ddd;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.625rem 1.25rem;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.preset-grid-more-btn:hover {
  border-color: #666;
  color: var(--app-fg);
}

.preset-grid-more-btn:focus-visible {
  outline: 2px solid #FF2DBE;
  outline-offset: 2px;
}

.preset-grid-more-loading {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 视觉：浅色渐变画布 + 极简顶栏 + 「视觉特效」首屏展示条
   （放在文件末尾，覆盖前面的旧主题规则）
   ══════════════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="light"] {
  /* 品牌渐变：标题、导航高亮、按钮共用 */
  --brand-gradient-text: linear-gradient(
    96deg,
    #7c3aed 0%,
    #b23bd8 48%,
    #e81e8c 100%
  );
  --brand-gradient-underline: linear-gradient(
    90deg,
    #7c3aed 0%,
    #c026d3 55%,
    #f59e0b 100%
  );
  --brand-gradient-pill: linear-gradient(
    104deg,
    #934afc 0%,
    #b94bdc 52%,
    #e93ac0 100%
  );
  /* 浅色画布：白底 + 左侧淡紫光斑 / 左上角淡紫 / 右上淡粉 */
  --page-gradient:
    radial-gradient(
      36% 34% at 15% 20%,
      rgba(231, 229, 253, 0.98) 0%,
      rgba(231, 229, 253, 0) 66%
    ),
    radial-gradient(
      30% 32% at 0% 0%,
      rgba(238, 237, 253, 0.9) 0%,
      rgba(238, 237, 253, 0) 72%
    ),
    radial-gradient(
      42% 46% at 87% 7%,
      rgba(252, 238, 250, 1) 0%,
      rgba(252, 238, 250, 0) 80%
    );
}

/* ── 全站画布：浅色渐变 ──
   用 body 提升优先级，压过下面「透明子区域」与旧版 #f2f4f4 兜底规则 */
body .studio-shell {
  background-color: #ffffff;
  background-image: var(--page-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 直接铺在画布上的区域改为透明，让渐变透出来（卡片/表单仍是白面） */
.studio-main,
.studio-sidebar,
.vp-gallery,
.vp-gen-main,
.vp-gen-main-scroll,
.studio-shell-viral-presets,
.studio-shell-viral-presets .studio-nav {
  background-color: transparent;
}

/* 场景迁移生成页主体：去掉旧版深底网格，与 AI 口播等 studio-main 一致 */
.vp-gen-main,
.vp-gen-main-scroll {
  background-image: none;
}

/* 电商直出左侧菜单栏：去掉旧的白/粉底色渐变，直接沿用页面新渐变 */
.ms-sidebar,
.ms-sidebar-collapsed {
  background: transparent;
  box-shadow: none;
}

.studio-shell-viral-presets .studio-nav {
  border-bottom-color: transparent;
}

/* ── 顶栏：无边框浅底 + 文字产品入口 ── */
.studio-nav {
  min-height: 6.25rem;
  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.25rem, 2.75vw, 2.5rem)
    clamp(0.5rem, 1vw, 0.75rem);
  border-bottom: 0;
  background: transparent;
  column-gap: clamp(1rem, 2.5vw, 2rem);
}

.studio-nav-brand {
  gap: 0.7rem;
}

.studio-nav-title {
  font-size: 1.375rem;
  letter-spacing: 0.005em;
  color: #1c2430;
}

.studio-nav-products {
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.studio-nav-product,
.studio-nav-product:hover,
.studio-nav-product:focus-visible,
.studio-nav-product-active,
.studio-nav-product-active:hover,
.studio-nav-product-active:focus-visible {
  background: none;
  box-shadow: none;
}

.studio-nav-product {
  position: relative;
  padding: 0.375rem 0 0.75rem;
  border-radius: 0;
}

.studio-nav-product .uiverse-pill-inner {
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #1c2430;
  transition: color 0.18s ease;
}

.studio-nav-product:hover .uiverse-pill-inner {
  color: var(--brand-accent);
}

.studio-nav-product-active .uiverse-pill-inner,
.studio-nav-product-active:hover .uiverse-pill-inner {
  background-image: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.studio-nav-product-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  background-image: var(--brand-gradient-underline);
  transform: translateX(-50%);
}

.studio-header {
  background: transparent;
  border-bottom-color: transparent;
}

/* 工作台二级 Tab（模板 / 生成相册）：与顶栏选中项同款渐变字 + 下划线，无胶囊底 */
.studio-header-nav .studio-workspace-tab,
.studio-header-nav .studio-workspace-tab:hover,
.studio-header-nav .studio-workspace-tab:focus-visible,
.studio-header-nav .studio-workspace-tab.studio-tab-active,
.studio-header-nav .studio-workspace-tab.studio-tab-active:hover,
.studio-header-nav .studio-workspace-tab.studio-tab-active:focus-visible {
  background: none;
  background-color: transparent;
  box-shadow: none;
}

.studio-header-nav .studio-workspace-tab {
  position: relative;
  padding: 0.375rem 0 0.75rem;
  border-radius: 0;
}

.studio-header-nav .studio-workspace-tab .uiverse-pill-inner {
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #1c2430;
  transition: color 0.18s ease;
}

.studio-header-nav .studio-workspace-tab:hover .uiverse-pill-inner,
.studio-header-nav .studio-workspace-tab:focus-visible .uiverse-pill-inner {
  color: var(--brand-accent);
}

.studio-header-nav .studio-workspace-tab.studio-tab-active .studio-tab-text,
.studio-header-nav
  .studio-workspace-tab.studio-tab-active:hover
  .studio-tab-text {
  background-image: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.studio-header-nav .studio-workspace-tab.studio-tab-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  background-image: var(--brand-gradient-underline);
  transform: translateX(-50%);
}

.studio-header-nav .studio-workspace-tab:not(.studio-tab-active)::after {
  content: none;
}

.studio-header-nav .studio-workspace-tab.studio-tab-active .studio-tab-badge {
  -webkit-text-fill-color: var(--app-bg);
  color: var(--app-bg);
  background-image: linear-gradient(104deg, #934afc 0%, #e93ac0 100%);
}

.studio-header-current-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.375rem 0 0.75rem;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.studio-header-current-text {
  background-image: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.studio-header-current-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  background-image: var(--brand-gradient-underline);
  transform: translateX(-50%);
}

.studio-header-current-title .studio-tab-badge {
  -webkit-text-fill-color: var(--app-bg);
  color: var(--app-bg);
  background-image: linear-gradient(104deg, #934afc 0%, #e93ac0 100%);
}

/* ── 顶栏右侧：会员（文字） / 登录（渐变胶囊） / 访客头像 ── */
.studio-nav-right {
  gap: 1.25rem;
}

.studio-credit-upgrade,
.studio-credit-upgrade:hover,
.studio-credit-upgrade:active {
  padding: 0.25rem 0;
  border-radius: 0;
  background: none;
  color: #1c2430;
  font-size: 1rem;
  font-weight: 600;
}

.studio-credit-upgrade::after {
  display: none;
}

.studio-credit-upgrade:hover {
  color: var(--brand-accent);
}

.studio-nav-login {
  min-height: 2.5rem;
  padding: 0.55rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  background-image: var(--brand-gradient-pill);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(168, 85, 247, 0.22);
}

.studio-nav-login:hover {
  opacity: 1;
  filter: brightness(1.05);
}

.studio-nav .studio-user-menu-trigger-guest {
  gap: 0;
  padding: 0.25rem;
}

.studio-nav .studio-user-menu-trigger-guest .studio-user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.studio-nav .studio-user-menu-trigger-guest .studio-user-avatar-glyph {
  width: 1.3125rem;
  height: 1.3125rem;
  color: transparent;
}

.studio-nav .studio-user-menu-trigger-guest .studio-user-name {
  display: none;
}

.studio-nav .studio-user-menu-trigger-guest:hover .studio-user-avatar,
.studio-nav .studio-user-menu-trigger-guest[aria-expanded="true"] .studio-user-avatar {
  border-color: transparent;
  box-shadow: none;
}

/* ── 首页 hero：渐变标题 ── */
.vp-hero {
  padding: clamp(1.25rem, 3vw, 4rem) 1rem clamp(1.25rem, 2vw, 2rem);
}

.vp-hero-title {
  width: fit-content;
  margin: 0 auto 0.8rem;
  font-size: clamp(2.5rem, 4.1vw, 5.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.045em;
  background-image: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vp-hero-subtitle {
  margin: 0 auto;
  padding: 0 0.5rem;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #6d727a;
}

/* 高对比度模式：渐变文字 / 渐变胶囊退回系统色，避免「白字白底」 */
@media (forced-colors: active) {
  .studio-nav-login {
    border: 1px solid ButtonText;
    background-image: none;
    background-color: ButtonFace;
    color: ButtonText;
  }

  .studio-nav-product-active .uiverse-pill-inner,
  .studio-nav-products
    .studio-nav-product-active
    .uiverse-pill-inner,
  .vp-hero-title {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }

  .studio-nav-product-active::after {
    background-image: none;
    background-color: CanvasText;
  }

  .studio-header-nav .studio-workspace-tab.studio-tab-active .studio-tab-text,
  .studio-header-current-text {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }

  .studio-header-nav .studio-workspace-tab.studio-tab-active::after,
  .studio-header-current-title::after {
    background-image: none;
    background-color: CanvasText;
  }
}

/* ── 移动端：顶栏两行 ── */
@media (max-width: 767px) {
  .studio-nav {
    min-height: 0;
    padding: 0.875rem 1rem 0.75rem;
    row-gap: 0.7rem;
  }

  .studio-nav-brand {
    gap: 0.55rem;
  }

  .studio-nav-title {
    font-size: 1.1875rem;
  }

  .studio-nav-products {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    overflow: visible;
  }

  .studio-nav-products .studio-nav-product {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    padding: 0.2rem 0 0.75rem;
    border-radius: 0;
  }

  .studio-nav-products .studio-nav-product::after {
    left: 50%;
    bottom: 0.15rem;
    width: 1.6rem;
    transform: translateX(-50%);
  }

  .studio-nav-products .uiverse-pill-inner {
    width: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.9375rem;
  }

  /* 手机端再次声明渐变文字：上面的 background: transparent 会盖掉桌面高亮规则 */
  .studio-nav-products
    .studio-nav-product-active
    .uiverse-pill-inner,
  .studio-nav-products
    .studio-nav-product-active:hover
    .uiverse-pill-inner {
    background-image: var(--brand-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .studio-header-nav .studio-workspace-tab,
  .studio-header-current-title {
    padding: 0.2rem 0 0.75rem;
  }

  .studio-header-nav .studio-workspace-tab.studio-tab-active::after,
  .studio-header-current-title::after {
    width: 1.6rem;
    bottom: 0.15rem;
  }

  .studio-header-nav .studio-workspace-tab .uiverse-pill-inner,
  .studio-header-current-text {
    font-size: 0.9375rem;
  }

  .studio-nav-right {
    gap: 0.65rem;
  }

  .studio-credit-upgrade,
  .studio-credit-upgrade:hover,
  .studio-credit-upgrade:active {
    font-size: 0.875rem;
  }

  .studio-nav-login {
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 6px 14px rgba(168, 85, 247, 0.2);
  }

  .vp-hero {
    padding-top: 1.25rem;
  }

  .vp-hero-title {
    margin-bottom: 0.65rem;
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .vp-hero-subtitle {
    font-size: 0.9375rem;
  }
}

/* 预览视频真正播放出画面后才淡入：移动端自动播放被系统拦截时只显示封面图，
   不会再露出原生播放按钮。 */
.lazy-cover-video {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lazy-cover-video.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lazy-cover-video {
    transition: none;
  }
}

/* ── 模板素材防另存为 ─────────────────────────────────────────────────────
 * 模板视频 / 图片不允许右键另存为：右键菜单与拖拽保存由组件层
 * onContextMenu / onDragStart 拦截（见 src/lib/client/media-protection.ts），
 * 这里补 CSS 层——关掉 WebKit 的长按菜单（iOS「存储图像」）与原生拖拽，
 * 并禁止长按选中媒体。只挂在模板媒体容器 / 媒体元素上，用户自己的作品、
 * 社区内容、营销幻灯片不受影响。
 */
.media-no-save,
.media-no-save img,
.media-no-save video,
.media-no-save canvas {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 封面加载骨架 / 失败兜底（LazyCoverMedia） ─────────────────────────────
 * 衍生封面（.cover.webp / .preview-hd.mp4 / 按需生成接口）404 时卡片会长时间
 * 没有画面；骨架层在媒体真正出画前铺满卡片，浅色页面上也能看出「正在加载」
 * 而不是白屏。骨架位于媒体下方：媒体后续以绝对定位铺在它上面。
 */
.lazy-cover-media-skeleton,
.lazy-cover-media-placeholder,
.lazy-cover-media-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.lazy-cover-media-skeleton {
  pointer-events: none;
  background-color: var(--app-skeleton-strong, rgba(138, 152, 160, 0.34));
}

/* 扫光用 ::after + transform 做，走合成层而不是每帧重绘背景（首屏几十张卡片也不卡） */
.lazy-cover-media-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    var(--app-skeleton-shine, rgba(255, 255, 255, 0.66)) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: translateX(-100%);
  animation: lazy-cover-media-shimmer 1.6s ease-in-out infinite;
}

@keyframes lazy-cover-media-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* 调用方传入的失败兜底（内置插画 / 强调色渐变 + 名称）统一居中排版 */
.lazy-cover-media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    var(--app-skeleton-strong, rgba(138, 152, 160, 0.34)),
    var(--app-skeleton, rgba(138, 152, 160, 0.2))
  );
  color: var(--app-fg-muted);
  padding: 0.75rem;
  text-align: center;
}

.lazy-cover-media-fallback-name {
  position: relative;
  z-index: 1;
  max-width: 92%;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  word-break: break-word;
}

/* 场景迁移模板：兜底是深色径向渐变，名称用白字 */
.vp-scene-fallback {
  color: var(--app-media-fg);
}

.vp-scene-fallback .lazy-cover-media-fallback-name {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* 电商直出模板：兜底是强调色浅色渐变 / 内置插画，名称用深色 */
.ms-scene-fallback {
  color: var(--app-fg-soft);
}

@media (prefers-reduced-motion: reduce) {
  .lazy-cover-media-skeleton::after {
    display: none;
    animation: none;
  }
}

/* ── 首次访问新手引导（游客）：半透明遮罩 + 「点击」提示 + 箭头指向第一个模板 ──
 * 遮罩拆成上下左右四块，围出卡片位置的「空洞」：空洞内不盖任何元素，
 * 所以用户点高亮的模板卡片能正常触发（而不是被整层遮罩挡住）。
 * 遮罩本身点一下即收起引导；桌面端提示气泡在卡片右侧（箭头朝左），
 * 手机端在卡片下方（箭头朝上），位置由 FirstVisitTemplateGuide 计算。
 */
html.vp-guide-open .vp-gallery {
  overflow-y: hidden;
}

html.vp-guide-open {
  overscroll-behavior: none;
}

.vp-guide {
  position: fixed;
  inset: 0;
  z-index: 70; /* 高于顶栏 / 媒体弹层，低于模板全屏弹窗（80）与登录弹窗（120） */
  pointer-events: none;
}

.vp-guide-mask {
  position: absolute;
  background: rgba(12, 15, 22, 0.6);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: vp-guide-fade-in 0.2s ease-out both;
}

/* 演示步骤的透明拦截层：盖住高亮区域，点它只收起引导，不触发目标（「生成」不会真扣积分） */
.vp-guide-blocker {
  position: absolute;
  border-radius: 12px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 高亮环：让「该点哪里」更醒目，纯装饰不吃指针事件 */
.vp-guide-ring {
  position: absolute;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(12, 15, 22, 0.35),
    0 0 24px rgba(255, 45, 190, 0.45);
  pointer-events: none;
  animation:
    vp-guide-fade-in 0.2s ease-out both,
    vp-guide-ring-pulse 2.4s ease-in-out 0.2s infinite;
}

/* 提示气泡 */
.vp-guide-hint {
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
  padding: 0.875rem 1rem 0.9375rem;
  background: #ffffff;
  color: #1c2430;
  box-shadow:
    0 20px 45px -18px rgba(10, 14, 20, 0.55),
    0 2px 6px rgba(10, 14, 20, 0.18);
  animation: vp-guide-pop 0.22s ease-out both;
}

.vp-guide-hint::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

/* 气泡在卡片右侧：箭头朝左，指向卡片 */
.vp-guide-hint[data-placement="right"]::before {
  left: -16px;
  top: calc(var(--vp-guide-arrow-offset, 28px) - 8px);
  border-left-width: 0;
  border-right-width: 16px;
  border-right-color: #fff;
}

/* 气泡在卡片下方：箭头朝上 */
.vp-guide-hint[data-placement="below"]::before {
  top: -16px;
  left: calc(var(--vp-guide-arrow-offset, 28px) - 8px);
  border-top-width: 0;
  border-bottom-width: 16px;
  border-bottom-color: #fff;
}

/* 气泡在卡片上方：箭头朝下 */
.vp-guide-hint[data-placement="above"]::before {
  bottom: -16px;
  left: calc(var(--vp-guide-arrow-offset, 28px) - 8px);
  border-bottom-width: 0;
  border-top-width: 16px;
  border-top-color: #fff;
}

.vp-guide-hint-cta {
  margin: 0;
  font-family: "Times New Roman", Times, "Songti SC", "SimSun", serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #ff2dbe;
}

.vp-guide-hint-desc {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5b6672;
}

.vp-guide-skip {
  position: absolute;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(12, 15, 22, 0.55);
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.vp-guide-skip:hover {
  background: rgba(12, 15, 22, 0.75);
  border-color: rgba(255, 255, 255, 0.78);
}

.vp-guide-skip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes vp-guide-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes vp-guide-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vp-guide-ring-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* 手机 / 平板：气泡更紧凑、跳过按钮贴安全区 */
@media (max-width: 767px) {
  .vp-guide-hint {
    border-radius: 13px;
    padding: 0.8125rem 0.9375rem 0.875rem;
  }

  .vp-guide-hint-cta {
    font-size: 1.25rem;
  }

  .vp-guide-skip {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding: 0.5625rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-guide-mask,
  .vp-guide-ring,
  .vp-guide-hint {
    animation: none;
  }
}

/* 新手引导「下载」步骤：历史卡片上的下载按钮默认 hover 才显示，引导期间固定露出 */
html.vp-download-guide .history-download-btn {
  opacity: 1 !important;
  pointer-events: auto;
}

/* ── 电商直出：轮播图下方「私人定制」入口 + 留资弹窗 ── */

.ms-hero-cta {
  display: flex;
  justify-content: center;
  margin: 0 0 0.625rem;
}

.ms-hero-customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5625rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--brand-accent-muted-border, rgba(255, 45, 190, 0.45));
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.44),
      rgba(255, 255, 255, 0)
    ),
    var(--brand-accent-muted-bg, rgba(255, 45, 190, 0.12));
  color: var(--app-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 16px rgba(255, 45, 190, 0.1);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.ms-hero-customize:hover {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-on-accent);
  box-shadow: 0 10px 26px rgba(255, 45, 190, 0.3);
  transform: translateY(-1px);
}

.ms-hero-customize:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(255, 45, 190, 0.2);
}

.ms-hero-customize:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ms-hero-customize {
    transition: none;
  }
}

.ms-inquiry-overlay {
  z-index: 60;
}

.ms-inquiry {
  box-sizing: border-box;
  width: min(30rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border-radius: 1rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  box-shadow: 0 25px 50px -12px var(--app-shadow);
  padding: 1.5rem;
  text-align: left;
}

.ms-inquiry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ms-inquiry-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--app-fg);
}

.ms-inquiry-sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--app-fg-muted);
}

.ms-inquiry-close {
  flex-shrink: 0;
}

.ms-inquiry-close:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ms-inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ms-inquiry-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ms-inquiry-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-fg-soft);
}

.ms-inquiry-req {
  margin-left: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-error-fg);
}

.ms-inquiry-opt {
  margin-left: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--app-fg-muted);
}

.ms-inquiry-input,
.ms-inquiry-textarea {
  box-sizing: border-box;
  width: 100%;
  border-radius: 0.625rem;
  border: 1px solid var(--app-border-input);
  background: var(--app-input-bg);
  color: var(--app-fg);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.625rem 0.75rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ms-inquiry-textarea {
  min-height: 5.5rem;
  resize: vertical;
  font-family: inherit;
}

.ms-inquiry-input::placeholder,
.ms-inquiry-textarea::placeholder {
  color: var(--app-placeholder);
}

.ms-inquiry-input:focus,
.ms-inquiry-textarea:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(255, 45, 190, 0.18);
}

.ms-inquiry-input-error,
.ms-inquiry-input-error:focus {
  border-color: var(--app-error-fg);
  box-shadow: none;
}

.ms-inquiry-error {
  margin: 0;
  font-size: 0.75rem;
  color: var(--app-error-fg);
}

.ms-inquiry-counter {
  align-self: flex-end;
  font-size: 0.6875rem;
  color: var(--app-fg-muted);
  font-variant-numeric: tabular-nums;
}

.ms-inquiry-form-error {
  margin: 0;
  border-radius: 0.625rem;
  border: 1px solid var(--app-error-border);
  background: var(--app-error-bg);
  color: var(--app-error-fg);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ms-inquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}

.ms-inquiry-submit:hover:not(:disabled) {
  filter: brightness(1.06);
}

.ms-inquiry-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ms-inquiry-submit:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.ms-inquiry-privacy {
  margin: 0;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--app-fg-muted);
}

.ms-inquiry-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
  text-align: center;
}

.ms-inquiry-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  background: var(--app-success-bg);
  color: var(--app-success-fg);
}

.ms-inquiry-success-title {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--app-fg);
}

.ms-inquiry-success-text {
  margin: 0 0 0.75rem;
  max-width: 20rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--app-fg-muted);
}

.ms-inquiry-done {
  width: auto;
  min-width: 8rem;
  padding: 0 0.5rem;
}

body.ms-inquiry-modal-open .community-fab {
  display: none;
}

@media (max-width: 480px) {
  .ms-inquiry {
    padding: 1.25rem;
  }

  .ms-inquiry-title {
    font-size: 1.125rem;
  }
}