/*
 * JUZO 剧造 · 产品界面规范（片场手稿）。
 * 与官网同一套语言：纸底、墨字、细线分层、小圆角；朱红只留给「动作」，选中和悬停用墨与纸色。
 * Tailwind 工具类都在 @layer 内，这里的无层规则天然优先；页面级样式写在层外，用 :root 前缀抬优先级。
 */

/* ── 设计 token ── */
:root {
  /* 字重：正文 400，强调 500，只有页面标题和关键数字用 600。 */
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --font-weight-extrabold: 600;
  --font-weight-black: 600;

  /* Adobe Clean 只有 Bold 一个字重，标题里的西文都被它带粗，统一回界面字体。 */
  --font-heading: var(--font-ui);

  /* 字号：工作台是高密度工具，比营销页收一档。 */
  --text-sm: .8125rem;
  --text-sm--line-height: 1.54;
  --text-lg: .9375rem;
  --text-lg--line-height: 1.5;
  --text-xl: 1.0625rem;
  --text-xl--line-height: 1.45;
  --text-2xl: 1.25rem;
  --text-2xl--line-height: 1.4;
  --text-3xl: 1.5rem;
  --text-3xl--line-height: 1.35;
  --text-4xl: 1.75rem;
  --text-4xl--line-height: 1.3;

  --type-page-size: 1.25rem;
  --type-page-line: 1.75rem;
  --type-section-size: .9375rem;
  --type-section-line: 1.375rem;
  --type-card-size: .875rem;
  --type-card-line: 1.25rem;
  --type-label-size: .8125rem;
  --type-label-line: 1.25rem;

  /* 圆角：官网按钮 6px、卡片直角感，产品侧统一到 4 / 6 / 8 / 10。 */
  --radius: .375rem;
  --radius-2xl: .625rem;
  --radius-3xl: .75rem;
  --creator-radius-sm: .25rem;
  --creator-radius-md: .375rem;
  --creator-radius-lg: .5rem;
  --creator-radius-xl: .625rem;

  /* 状态色并回主题：去掉高饱和的翠绿、天蓝、紫，只保留明度层次。 */
  --color-emerald-50: oklch(97.5% .012 168); --color-emerald-100: oklch(95% .022 168); --color-emerald-200: oklch(90% .04 168); --color-emerald-300: oklch(82% .06 168); --color-emerald-400: oklch(72% .075 168); --color-emerald-500: oklch(60% .08 168); --color-emerald-600: oklch(52% .075 168); --color-emerald-700: oklch(45% .065 168); --color-emerald-800: oklch(38% .055 168); --color-emerald-900: oklch(31% .045 168); --color-emerald-950: oklch(22% .03 168);
  --color-green-50: var(--color-emerald-50); --color-green-100: var(--color-emerald-100); --color-green-200: var(--color-emerald-200); --color-green-300: var(--color-emerald-300); --color-green-400: var(--color-emerald-400); --color-green-500: var(--color-emerald-500); --color-green-600: var(--color-emerald-600); --color-green-700: var(--color-emerald-700); --color-green-800: var(--color-emerald-800); --color-green-900: var(--color-emerald-900); --color-green-950: var(--color-emerald-950);
  --color-teal-50: var(--color-emerald-50); --color-teal-100: var(--color-emerald-100); --color-teal-200: var(--color-emerald-200); --color-teal-300: var(--color-emerald-300); --color-teal-400: var(--color-emerald-400); --color-teal-500: var(--color-emerald-500); --color-teal-600: var(--color-emerald-600); --color-teal-700: var(--color-emerald-700); --color-teal-800: var(--color-emerald-800); --color-teal-900: var(--color-emerald-900); --color-teal-950: var(--color-emerald-950);
  --color-amber-50: oklch(97.5% .014 82); --color-amber-100: oklch(95% .028 82); --color-amber-200: oklch(90% .05 82); --color-amber-300: oklch(83% .075 82); --color-amber-400: oklch(75% .095 80); --color-amber-500: oklch(66% .1 78); --color-amber-600: oklch(56% .095 75); --color-amber-700: oklch(48% .08 72); --color-amber-800: oklch(40% .065 70); --color-amber-900: oklch(33% .05 68); --color-amber-950: oklch(23% .035 66);
  --color-yellow-50: var(--color-amber-50); --color-yellow-100: var(--color-amber-100); --color-yellow-200: var(--color-amber-200); --color-yellow-300: var(--color-amber-300); --color-yellow-400: var(--color-amber-400); --color-yellow-500: var(--color-amber-500); --color-yellow-600: var(--color-amber-600); --color-yellow-700: var(--color-amber-700); --color-yellow-800: var(--color-amber-800); --color-yellow-900: var(--color-amber-900); --color-yellow-950: var(--color-amber-950);
  --color-orange-50: oklch(97% .012 35); --color-orange-100: oklch(94% .025 35); --color-orange-200: oklch(89% .045 34); --color-orange-300: oklch(81% .075 33); --color-orange-400: oklch(71% .115 32); --color-orange-500: oklch(61% .145 31); --color-orange-600: oklch(53% .15 30); --color-orange-700: oklch(46% .135 29); --color-orange-800: oklch(39% .11 28); --color-orange-900: oklch(32% .085 28); --color-orange-950: oklch(22% .055 28);
  --color-red-50: oklch(97% .012 18); --color-red-100: oklch(94% .025 18); --color-red-200: oklch(89% .05 18); --color-red-300: oklch(80% .085 18); --color-red-400: oklch(69% .13 18); --color-red-500: oklch(59% .16 18); --color-red-600: oklch(51% .165 18); --color-red-700: oklch(45% .145 18); --color-red-800: oklch(38% .115 18); --color-red-900: oklch(32% .09 18); --color-red-950: oklch(22% .06 18);
  --color-rose-50: var(--color-red-50); --color-rose-100: var(--color-red-100); --color-rose-200: var(--color-red-200); --color-rose-300: var(--color-red-300); --color-rose-400: var(--color-red-400); --color-rose-500: var(--color-red-500); --color-rose-600: var(--color-red-600); --color-rose-700: var(--color-red-700); --color-rose-800: var(--color-red-800); --color-rose-900: var(--color-red-900); --color-rose-950: var(--color-red-950);
  --color-sky-50: oklch(97.5% .008 245); --color-sky-100: oklch(95% .016 245); --color-sky-200: oklch(90% .03 245); --color-sky-300: oklch(82% .045 245); --color-sky-400: oklch(72% .06 245); --color-sky-500: oklch(61% .07 245); --color-sky-600: oklch(52% .07 245); --color-sky-700: oklch(45% .065 245); --color-sky-800: oklch(38% .055 245); --color-sky-900: oklch(31% .045 245); --color-sky-950: oklch(22% .03 245);
  --color-blue-50: var(--color-sky-50); --color-blue-100: var(--color-sky-100); --color-blue-200: var(--color-sky-200); --color-blue-300: var(--color-sky-300); --color-blue-400: var(--color-sky-400); --color-blue-500: var(--color-sky-500); --color-blue-600: var(--color-sky-600); --color-blue-700: var(--color-sky-700); --color-blue-800: var(--color-sky-800); --color-blue-900: var(--color-sky-900); --color-blue-950: var(--color-sky-950);
  --color-cyan-50: var(--color-sky-50); --color-cyan-100: var(--color-sky-100); --color-cyan-200: var(--color-sky-200); --color-cyan-300: var(--color-sky-300); --color-cyan-400: var(--color-sky-400); --color-cyan-500: var(--color-sky-500); --color-cyan-600: var(--color-sky-600); --color-cyan-700: var(--color-sky-700); --color-cyan-800: var(--color-sky-800); --color-cyan-900: var(--color-sky-900); --color-cyan-950: var(--color-sky-950);
  --color-indigo-50: var(--color-sky-50); --color-indigo-100: var(--color-sky-100); --color-indigo-200: var(--color-sky-200); --color-indigo-300: var(--color-sky-300); --color-indigo-400: var(--color-sky-400); --color-indigo-500: var(--color-sky-500); --color-indigo-600: var(--color-sky-600); --color-indigo-700: var(--color-sky-700); --color-indigo-800: var(--color-sky-800); --color-indigo-900: var(--color-sky-900); --color-indigo-950: var(--color-sky-950);
  --color-violet-50: oklch(97.5% .008 325); --color-violet-100: oklch(95% .016 325); --color-violet-200: oklch(90% .028 325); --color-violet-300: oklch(82% .04 325); --color-violet-400: oklch(72% .055 325); --color-violet-500: oklch(60% .065 325); --color-violet-600: oklch(51% .065 325); --color-violet-700: oklch(44% .06 325); --color-violet-800: oklch(37% .05 325); --color-violet-900: oklch(30% .04 325); --color-violet-950: oklch(21% .028 325);
  --color-purple-50: var(--color-violet-50); --color-purple-100: var(--color-violet-100); --color-purple-200: var(--color-violet-200); --color-purple-300: var(--color-violet-300); --color-purple-400: var(--color-violet-400); --color-purple-500: var(--color-violet-500); --color-purple-600: var(--color-violet-600); --color-purple-700: var(--color-violet-700); --color-purple-800: var(--color-violet-800); --color-purple-900: var(--color-violet-900); --color-purple-950: var(--color-violet-950);
  --color-fuchsia-50: var(--color-violet-50); --color-fuchsia-100: var(--color-violet-100); --color-fuchsia-200: var(--color-violet-200); --color-fuchsia-300: var(--color-violet-300); --color-fuchsia-400: var(--color-violet-400); --color-fuchsia-500: var(--color-violet-500); --color-fuchsia-600: var(--color-violet-600); --color-fuchsia-700: var(--color-violet-700); --color-fuchsia-800: var(--color-violet-800); --color-fuchsia-900: var(--color-violet-900); --color-fuchsia-950: var(--color-violet-950);
  --color-pink-50: var(--color-violet-50); --color-pink-100: var(--color-violet-100); --color-pink-200: var(--color-violet-200); --color-pink-300: var(--color-violet-300); --color-pink-400: var(--color-violet-400); --color-pink-500: var(--color-violet-500); --color-pink-600: var(--color-violet-600); --color-pink-700: var(--color-violet-700); --color-pink-800: var(--color-violet-800); --color-pink-900: var(--color-violet-900); --color-pink-950: var(--color-violet-950);

  --cat-character: var(--color-sky-600);
  --cat-scene: var(--color-emerald-600);
  --cat-prop: var(--color-violet-600);
}

/* 手机输入框保持 16px，否则 iOS 聚焦时会放大页面。 */
@media (width >= 48rem) {
  :root {
    --text-base: .875rem;
    --text-base--line-height: 1.57;
  }
}

/* 官网、登录页和指南沿用原有的展示字体与字阶。 */
.juzoSite,
.juzoNav,
.juzoFooter,
.juzoAuth {
  --font-heading: "Adobe Clean", "Inter Variable", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* ── 微信扫码入口 ── */
.juzoWechatDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0 12px;
  color: var(--juzo-muted);
  font-size: 12px;
}
.juzoWechatDivider::before,
.juzoWechatDivider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--juzo-line);
}
.juzoWechatButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--juzo-line);
  border-radius: 7px;
  background: var(--juzo-panel);
  color: var(--juzo-text);
  font-size: 13px;
  font-weight: 500;
}
.juzoWechatEntry .juzoWechatButton { width: 100%; height: 43px; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 400; }
.juzoWechatButton svg { color: var(--juzo-success); }
.juzoWechatButton:hover:not(:disabled) { background: var(--juzo-soft); }
.juzoWechatButton:disabled { opacity: .6; cursor: default; }
.juzoWechatBindRow { display: flex; flex-wrap: wrap; gap: 8px; max-width: 28rem; }
.juzoWechatBindRow input {
  flex: 1 1 180px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--juzo-line);
  border-radius: 7px;
  background: transparent;
  color: var(--juzo-text);
  font-size: 13px;
}

/* ── 排版基线 ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root :is(h1, h2, h3, h4, h5, h6, .creator-page-title, .creator-section-title) {
  letter-spacing: 0;
}

/* 中文不需要负字距；紧排只留给西文展示字。 */
.tracking-tight,
.tracking-tighter,
[class*="tracking-[-"] {
  letter-spacing: 0;
}

/* 低于 11px 的中文在普通屏幕上难以辨认；画布节点尺寸固定，节点内的小字不动。 */
:is(.text-\[7px\], .text-\[8px\], .text-\[9px\], .text-\[10px\]):not(.react-flow__node *) {
  font-size: 11px;
  line-height: 1.4;
}

/* 西文小标题沿用官网的宽字距写法，但工作台里收小一些。 */
:is(.text-\[9px\], .text-\[10px\])[class*="tracking-[."]:not(.react-flow__node *) {
  font-size: 10px;
  letter-spacing: .1em;
}

/* 零散的大字号归到同一字阶，页面主标题不超过 22px，区块标题 15px。 */
:root :is(.text-\[38px\], .text-\[34px\], .text-\[30px\]) {
  font-size: 22px;
  line-height: 1.35;
}

:root :is(.text-\[28px\], .text-\[26px\], .text-\[24px\], .text-\[22px\]) {
  font-size: 20px;
  line-height: 1.4;
}

:root :is(.text-\[21px\], .text-\[20px\], .text-\[19px\], .text-\[18px\]) {
  font-size: 15px;
  line-height: 1.5;
}

:is(table, [data-slot="table"]),
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: color-mix(in srgb, var(--juzo-action) 22%, transparent);
}

/* ── 滚动条 ── */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--juzo-muted) 38%, transparent) transparent;
}

/* ── 阴影：纸面不靠投影分层，只有真正浮起来的层才有柔和阴影 ── */
.shadow,
.shadow-xs,
.shadow-sm,
.shadow-md {
  --tw-shadow: 0 0 #0000;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl,
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="context-menu-content"],
[data-slot="hover-card-content"],
[data-slot="command"] {
  --tw-shadow: 0 1px 2px color-mix(in srgb, var(--juzo-text) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--juzo-text) 22%, transparent);
}

/* 悬停不做位移或缩放，只变颜色，保持工具的稳定感。 */
[class*="hover:-translate-y"]:hover,
[class*="hover:translate-y"]:hover,
[class*="hover:scale-"]:hover {
  translate: none;
  scale: none;
}

/* ── 按钮 ── */
:root [data-slot="button"],
:root button.bg-primary,
:root a.bg-primary {
  letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* 主按钮禁用时不再是发灰的粉红，退回纸色。 */
:root .bg-primary:is(:disabled, [aria-disabled="true"], [data-disabled]) {
  background-color: var(--juzo-soft);
  color: var(--juzo-muted);
  opacity: 1;
}

/* 胶囊按钮和标签收成小圆角矩形，开关、单选、头像和状态圆点保持圆形。 */
:root button.rounded-full:not([role="switch"], [role="radio"], [data-kaki-minimized-drag-handle]),
:root a.rounded-full,
:root [data-slot="badge"],
:root span.rounded-full[class*="px-"],
:root div.rounded-full[class*="px-"] {
  border-radius: var(--creator-radius-sm);
}

:root button.rounded-full:not([role="switch"], [role="radio"], [data-kaki-minimized-drag-handle]):is(.px-3, .px-4, .px-5, .px-6, [class*="h-"]) {
  border-radius: var(--creator-radius-md);
}

:root [data-slot="badge"] {
  font-weight: 500;
}

/* 焦点：一条清楚的朱红细线，替代发散的光晕。 */
:root :is(button, a, [role="button"], [role="tab"], [role="menuitem"]):focus-visible {
  outline: 2px solid var(--juzo-action);
  outline-offset: 1px;
  --tw-ring-shadow: 0 0 #0000;
}

/* ── 输入控件 ── */
:root [data-slot="input"],
:root [data-slot="textarea"],
:root [data-slot="select-trigger"],
:root select {
  background-color: var(--juzo-panel);
  border-color: var(--juzo-line);
  transition: border-color .15s ease;
}

:root [data-slot="input"]:hover:not(:disabled, :focus-visible),
:root [data-slot="textarea"]:hover:not(:disabled, :focus-visible),
:root [data-slot="select-trigger"]:hover:not(:disabled, :focus-visible),
:root select:hover:not(:disabled, :focus-visible) {
  border-color: var(--juzo-edge);
}

:root [data-slot="input"]:focus-visible,
:root [data-slot="textarea"]:focus-visible,
:root [data-slot="select-trigger"]:focus-visible,
:root select:focus-visible {
  border-color: var(--juzo-text);
  outline: none;
  --tw-ring-shadow: 0 0 #0000;
}

:root :is(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--juzo-muted) 78%, transparent);
}

/* ── 面板、弹层 ── */
[data-slot="dialog-overlay"],
[data-slot="alert-dialog-overlay"],
[data-slot="sheet-overlay"] {
  background: color-mix(in srgb, #191d1b 42%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-slot="tooltip-content"] {
  border-radius: var(--creator-radius-sm);
  background: var(--juzo-text);
  color: var(--juzo-bg);
  font-weight: 400;
}

[data-slot="tooltip-content"] svg {
  display: none;
}

[data-slot="dropdown-menu-item"],
[data-slot="select-item"],
[data-slot="context-menu-item"] {
  border-radius: var(--creator-radius-sm);
}

/* 暖色渐变面板（余额卡等）回到纸面，不再出现粉色雾。 */
:root [class*="from-primary/"],
:root [class*="from-orange-"][class*="bg-gradient"],
:root [class*="from-amber-"][class*="bg-gradient"] {
  background-image: none;
  background-color: var(--juzo-panel);
}

/* 图标底块：红底方块堆在一起很吵，非按钮的图标底统一成细线。 */
:root span.bg-primary:not(.rounded-full):has(> svg:only-child),
:root span[class*="from-primary"]:has(> svg:only-child),
:root :is(.bg-primary\/5, .bg-primary\/9, .bg-primary\/10, .bg-primary\/15):is(.text-primary):has(> svg:only-child) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--juzo-line);
  color: var(--juzo-text);
}

/* 区块标题前的红色竖条不再需要，标题靠字重和留白就够了。 */
:root .rounded-\[3px\].bg-primary:has(+ :is(h1, h2, h3, h4)),
:root .h-3.w-0\.5.rounded-full.bg-primary:empty {
  display: none;
}

/* 分段筛选：选中是纸色底 + 墨字，朱红只留给真正的操作；画布节点的「生成」按钮是操作，不在此列。 */
:root button.inline-flex.h-9.shrink-0.bg-primary.shadow-sm:not(.font-semibold),
:root button.rounded-full.bg-primary.text-primary-foreground:not([aria-label], .font-semibold) {
  background: var(--juzo-wash);
  color: var(--juzo-text);
  font-weight: 500;
}

:root button.inline-flex.h-9.shrink-0.bg-primary.shadow-sm:not(.font-semibold) > span {
  background: transparent;
  color: var(--juzo-muted);
}

/* ── 外框：去掉嵌入式圆角和外边距，工作区与导航轨之间只有一条细线 ── */
@media (width >= 48rem) {
  :root [data-slot="sidebar-inset"] {
    margin: 0;
    border-inline-start: 1px solid var(--juzo-line);
    border-radius: 0;
    --tw-shadow: 0 0 #0000;
  }
}

:root [data-app-header] {
  border-bottom-color: var(--juzo-line);
}

:root [data-header-context] > span {
  font-weight: 500;
}

/* 导航轨：选中是一道朱红刻度加纸色底，不再是红框。 */
[data-sidebar="menu-button"] {
  color: var(--juzo-muted);
  transition: background-color .15s ease, color .15s ease;
}

[data-sidebar="menu-button"]:hover {
  color: var(--juzo-text);
}

[data-sidebar="menu-button"][data-active="true"] {
  position: relative;
  overflow: visible;
  background-color: var(--juzo-wash);
  color: var(--juzo-text);
  box-shadow: none;
  outline: none;
  font-weight: 500;
}

[data-sidebar="menu-button"][data-active="true"]::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: -8px;
  width: 2px;
  background: var(--juzo-action);
}

[data-sidebar="menu-button"][data-active="true"] svg {
  color: var(--juzo-action);
}

/* 控制台入口缩成顶栏里的小标记，不再像一颗悬浮在页面上的按钮。 */
:root [data-kaki-minimized-drag-handle] {
  width: 32px;
  height: 32px;
  border-color: var(--juzo-line);
  border-radius: var(--creator-radius-md);
  background: var(--juzo-panel);
  --tw-shadow: 0 0 #0000;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root [data-kaki-minimized-drag-handle] > img {
  width: 18px;
  height: 18px;
}

:root .fixed:has(> [data-kaki-minimized-drag-handle]) {
  top: 12px;
}

/* 窄屏顶栏放不下，挪到左下角，不压住搜索。 */
@media (width < 48rem) {
  :root .fixed:has(> [data-kaki-minimized-drag-handle]) {
    top: auto;
    bottom: 16px;
    left: 16px;
    translate: 0;
  }
}

/* 充值页窄屏底部固定着价格栏，控制台入口和生成记录抬到它上面，不挡金额和支付按钮。 */
@media (width <= 760px) {
  :root body:has(.v4-mobile-bar) .fixed:has(> [data-kaki-minimized-drag-handle]),
  :root body:has(.v4-mobile-bar) .fixed.bottom-4.end-4 {
    bottom: 81px;
  }
}

/* 顶栏积分：充值是文字链，不和页面主操作抢注意力。 */
:root [data-header-actions] a.rounded-full.bg-primary {
  height: auto;
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--juzo-action);
  font-weight: 500;
}

:root [data-header-actions] a.rounded-full.bg-primary:hover {
  background: transparent;
  color: var(--juzo-hover);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 生成记录：同一套细线按钮。 */
:root button.fixed.bottom-4.end-4.rounded-full {
  border-color: var(--juzo-line);
  border-radius: var(--creator-radius-md);
  --tw-shadow: 0 1px 2px color-mix(in srgb, var(--juzo-text) 8%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--juzo-text) 22%, transparent);
}

/* ── 页面骨架 ── */
.creator-page-icon {
  display: none;
}

:root .creator-toolbar-surface {
  border-color: transparent;
  background: transparent;
  padding: 0;
}

:root .creator-section-count,
:root .creator-status-badge {
  border-radius: var(--creator-radius-sm);
  font-weight: 400;
}

:root .creator-section-count {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--juzo-line);
  color: var(--juzo-muted);
  font-variant-numeric: tabular-nums;
}

/* ── 作品卡：有封面像海报，没封面是一张带取景框的纸 ── */
:root :is(.drama-card, .home-creation-card, .asset-project-card, .cp-card.project-card-surface) {
  border-color: var(--juzo-line);
  border-radius: var(--creator-radius-lg);
  transition: border-color .15s ease;
}

:root :is(.drama-card, .home-creation-card, .asset-project-card, .cp-card.project-card-surface):hover {
  border-color: var(--juzo-edge);
}

:root :is(.drama-card, .home-creation-card, .asset-project-card) .project-card-title,
:root .cp-card.project-card-surface .project-card-title,
:root .cp-card.project-card-surface .cp-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

:root :is(.drama-card, .home-creation-card, .asset-project-card) .project-card-meta,
:root .cp-card.project-card-surface .cp-sub {
  font-size: 12px;
}

/* 遮罩只压住文字所在的下半部分，封面本身保持干净。 */
:root .drama-card > div > div.absolute.inset-0,
:root .drama-card > div.absolute.inset-0,
:root .home-creation-veil {
  background: linear-gradient(transparent 42%, rgb(15 13 12 / .45) 66%, rgb(15 13 12 / .86));
}

:root .cp-card.project-card-surface .cp-body,
:root .asset-project-content {
  background: linear-gradient(transparent, rgb(15 13 12 / .5) 42%, rgb(15 13 12 / .86));
}

:root .drama-metadata > span,
:root .home-creation-kind {
  border-radius: var(--creator-radius-sm);
  padding: 2px 6px;
  background: rgb(15 13 12 / .62);
  font-size: 11px;
  font-weight: 400;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 一屏十几张卡不该有十几个红按钮：默认是细线，悬停这张卡时才亮起朱红。 */
:root .project-card-info-button,
:root .project-card-open-button,
:root .asset-project-card .project-card-secondary {
  min-height: 28px;
  border: 1px solid rgb(255 255 255 / .34);
  border-radius: var(--creator-radius-sm);
  padding: 3px 10px;
  background: transparent;
  color: rgb(255 255 255 / .94);
  font-size: 12px;
  font-weight: 400;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

:root .project-card-info-button:hover,
:root .asset-project-card .project-card-secondary:hover {
  border-color: rgb(255 255 255 / .72);
  background: rgb(255 255 255 / .1);
}

:root :is(.drama-card, .home-creation-card, .asset-project-card, .cp-card.project-card-surface):is(:hover, :focus-within) .project-card-open-button,
:root .project-card-open-button:hover {
  border-color: var(--juzo-action);
  background: var(--juzo-action);
  color: var(--juzo-onAction);
}

:root :is(.drama-card, .home-creation-card, .asset-project-card, .cp-card.project-card-surface) button[aria-label^="项目菜单"],
:root :is(.drama-card, .home-creation-card, .asset-project-card, .cp-card.project-card-surface) button[aria-label^="编辑项目"] {
  width: 26px;
  height: 26px;
  border-radius: var(--creator-radius-sm);
  background: rgb(15 13 12 / .5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 无封面：官网 FIG.01 同款的三分取景线，文字改回墨色。 */
:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder),
:root .asset-project-card:has(.asset-project-collage-placeholder) {
  --juzoFrameLine: color-mix(in srgb, var(--juzo-line) 62%, transparent);
  background: var(--juzo-panel);
  color: var(--juzo-text);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface) .project-card-placeholder,
:root .asset-project-collage-placeholder {
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), var(--juzoFrameLine) calc(33.33% - .5px), var(--juzoFrameLine) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.67% - .5px), var(--juzoFrameLine) calc(66.67% - .5px), var(--juzoFrameLine) calc(66.67% + .5px), transparent calc(66.67% + .5px)) 0 0 / 100% 54%,
    linear-gradient(transparent calc(50% - .5px), var(--juzoFrameLine) calc(50% - .5px), var(--juzoFrameLine) calc(50% + .5px), transparent calc(50% + .5px)) 0 0 / 100% 54%,
    linear-gradient(var(--juzoFrameLine), var(--juzoFrameLine)) 0 54% / 100% 1px,
    var(--juzo-panel) !important;
  background-repeat: no-repeat !important;
  color: color-mix(in srgb, var(--juzo-muted) 70%, transparent) !important;
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) :is(.project-card-placeholder, .projectCardPlaceholderBody) > svg {
  opacity: .5;
  transform: translateY(-22px) scale(.8);
}

:root .project-card-placeholder .projectCardPlaceholderBody > span {
  display: none;
}

:root .drama-card:has(.project-card-placeholder) > div > div.absolute.inset-0,
:root .home-creation-card:has(.project-card-placeholder) .home-creation-veil,
:root .cp-card.project-card-surface:has(.project-card-placeholder) .cp-body,
:root .asset-project-card:has(.asset-project-collage-placeholder) .asset-project-content {
  background: transparent;
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) :is(.project-card-title, .cp-title, .project-card-meta, .cp-sub),
:root .asset-project-card:has(.asset-project-collage-placeholder) :is(.project-card-title, .project-card-meta) {
  color: var(--juzo-text);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) :is(.project-card-meta, .cp-sub),
:root .asset-project-card:has(.asset-project-collage-placeholder) .project-card-meta {
  color: var(--juzo-muted);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) :is(.project-card-info-button, .project-card-open-button),
:root .asset-project-card:has(.asset-project-collage-placeholder) :is(.project-card-info-button, .project-card-open-button, .project-card-secondary) {
  border-color: var(--juzo-line);
  color: var(--juzo-text);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) .project-card-info-button:hover,
:root .asset-project-card:has(.asset-project-collage-placeholder) :is(.project-card-info-button, .project-card-secondary):hover {
  border-color: var(--juzo-edge);
  background: var(--juzo-soft);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder):is(:hover, :focus-within) .project-card-open-button,
:root .asset-project-card:has(.asset-project-collage-placeholder):is(:hover, :focus-within) .project-card-open-button {
  border-color: var(--juzo-action);
  color: var(--juzo-onAction);
}

:root :is(.drama-card, .home-creation-card, .cp-card.project-card-surface):has(.project-card-placeholder) button[aria-label^="项目菜单"],
:root .asset-project-card:has(.asset-project-collage-placeholder) button[aria-label^="项目菜单"] {
  background: transparent;
  color: var(--juzo-muted);
}

:root .drama-card:has(.project-card-placeholder) .drama-metadata > span,
:root .home-creation-card:has(.project-card-placeholder) .home-creation-kind {
  background: var(--juzo-soft);
  color: var(--juzo-text);
}

/* 封面还没加载时先显示深色底，不会出现从白到黑的灰雾。 */
:root :is(.drama-card, .home-creation-card) .project-card-cover,
:root .cp-card.project-card-surface > .project-card-cover,
:root .prism-item-trigger {
  background: #24211f;
}

:root :is(.drama-card, .home-creation-card) .project-card-cover:has(.project-card-placeholder),
:root .cp-card.project-card-surface > .project-card-cover:has(.project-card-placeholder) {
  background: transparent;
}

/* 其他带黑色遮罩的预览框也一样：没有图时铺深色底，不出现灰雾。 */
:root :has(> .absolute.inset-0.bg-gradient-to-t[class*="from-black/"]):not(.project-card-surface *, :has(img, video)) > .absolute.inset-0.bg-gradient-to-t[class*="from-black/"] {
  background-color: #24211f;
}

/* 新建入口：虚线占位，悬停时才亮起朱红。 */
:root button.border-dashed.bg-primary\/5 {
  border-color: var(--juzo-line);
  background: transparent;
}

:root button.border-dashed.bg-primary\/5:hover {
  border-color: var(--juzo-edge);
  background: var(--juzo-panel);
}

:root button.border-dashed.bg-primary\/5 > span:first-child {
  width: 36px;
  height: 36px;
  border-radius: var(--creator-radius-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--juzo-line);
  color: var(--juzo-text);
}

:root button.border-dashed.bg-primary\/5:hover > span:first-child {
  background: var(--juzo-action);
  box-shadow: none;
  color: var(--juzo-onAction);
}

:root button.border-dashed.bg-primary\/5 > span:nth-child(2) {
  font-size: 14px;
  font-weight: 500;
}

/* 资产库：角色卡的随机彩色占位换成统一的片场深色，分区切换和其他页一样用纸色选中。 */
:root [style*="radial-gradient(120%"] {
  background: #24211f !important;
}

:root .as-h1 > svg {
  display: none;
}

:root .as-tabcard.on {
  border-color: var(--juzo-edge);
}

:root .as-tabcard.on .as-tabcard-ic {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--juzo-line);
  color: var(--juzo-text);
}

:root .as-tabcard.on .as-tabcard-name,
:root .as-tabcard.on .as-tabcard-n {
  background: transparent;
  color: var(--juzo-text);
}

:root .as-newproj {
  color: var(--juzo-text);
}

/* 短剧工作流步骤条：像场记单一样的扁平列表，当前步才有纸色底。 */
:root .creator-workflow-step {
  min-height: 44px;
  border-color: transparent;
  border-radius: var(--creator-radius-md);
  padding: 6px 10px;
  transition: background-color .15s ease;
}

:root .creator-workflow-step[data-state="done"] {
  border-color: transparent;
  background: transparent;
}

:root .creator-workflow-step[data-state="active"] {
  border-color: transparent;
  background: var(--juzo-wash);
}

:root button:hover > .creator-workflow-step:not([data-state="locked"], [data-state="active"]) {
  background: color-mix(in srgb, var(--juzo-wash) 60%, transparent);
}

:root .creator-workflow-step > span:first-child {
  width: 24px;
  height: 24px;
  background: transparent;
  box-shadow: none;
  color: var(--juzo-muted);
}

:root .creator-workflow-step[data-state="active"] > span:first-child {
  color: var(--juzo-action);
}

:root .creator-workflow-step .font-semibold {
  font-weight: 400;
}

:root .creator-workflow-step[data-state="active"] .font-semibold {
  color: var(--juzo-text);
  font-weight: 500;
}

:root button:has(> .creator-workflow-step) > span.absolute {
  border-left-width: 1px;
  border-left-style: solid;
  border-color: var(--juzo-line);
}

:root button:has(> .creator-workflow-step) > span.z-10 {
  width: 18px;
  height: 18px;
  margin-inline: 3px;
  border-width: 1px;
  border-color: var(--juzo-line);
  background: var(--juzo-bg);
  color: var(--juzo-muted);
}

:root button:has(> .creator-workflow-step[data-state="done"]) > span.z-10 {
  border-color: var(--juzo-success);
  color: var(--juzo-success);
}

:root button:has(> .creator-workflow-step[data-state="active"]) > span.z-10 {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
}

:root button:has(> .creator-workflow-step) > span.z-10 svg {
  width: 11px;
  height: 11px;
}

/* 资产详情窄屏：左右叠成一列后两行被压扁，左栏的生成区溢出到资料区下面点不到。改成整列滚动，资料区自带固定高度。 */
@media (width <= 860px) {
  .m2-scope .m2-body {
    grid-auto-rows: max-content;
    overflow-y: auto;
  }

  .m2-scope .m2-stage {
    max-height: 32dvh;
  }

  .m2-scope .m2-stage > img {
    object-fit: contain;
  }

  .m2-scope .m2-chat {
    flex: none;
  }

  .m2-scope .m2-thread {
    flex: none;
    max-height: 240px;
  }

  .m2-scope .bb-right {
    grid-template-rows: auto minmax(0, 1fr);
    height: min(640px, 80dvh);
  }

  /* 导航按 offsetTop 跳转和高亮，要以资料区自身为基准，不被上方的左栏高度带偏。 */
  .m2-scope .bb-content {
    position: relative;
  }

  .m2-scope .bb-nav-label {
    display: none;
  }

  .m2-scope .bb-navitem {
    width: auto;
  }
}

/* 镜头详情窄屏：右栏定宽 360px 会把左栏（生成视频）挤成细缝。改成上下叠放，整列滚动。 */
@media (width <= 720px) {
  [aria-label="镜头详情"] > .flex-1:has(> .w-\[360px\]) {
    flex-direction: column;
    overflow-y: auto;
  }

  [aria-label="镜头详情"] > .flex-1:has(> .w-\[360px\]) > .flex-1 {
    flex: none;
    overflow: visible;
  }

  [aria-label="镜头详情"] > .flex-1 > .w-\[360px\] {
    width: auto;
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

/*
 * 剪辑页放不下三栏时（工作区不足 780×520，判断在 juzoNarrowLayout.ts）：上下叠放，面板保持能用的高度。
 * 页头跟着内容一起滚（外层 creator-workflow-shell 负责滚动），矮窗口和手机横屏也有地方放内容。
 * 顺序是素材库、监视器、时间线、属性，改时间线时还能看到画面；窗口 600px 起素材库和监视器并排。
 */
.creator-workflow-shell > :has(> .juzoEditStack) {
  height: auto;
}

.juzoEditStack {
  overflow: clip visible;
}

.juzoEditStack > * {
  flex: none;
}

/* 属性面板的固定节点，只负责换位置，不参与布局。 */
.juzoEditProps {
  display: contents;
}

.juzoEditStack > .juzoEditProps > * {
  flex: none;
  min-height: 180px;
}

.juzoEditPanes {
  grid-auto-rows: max-content;
}

.juzoEditPanes > :nth-child(1) {
  height: 280px;
}

.juzoEditPanes > :nth-child(2) {
  overflow: visible;
}

/* 监视器高度写在行内样式里，只有 !important 能盖。改由宽度决定高度，横版项目不留上下黑边；叠放时再矮一点，才能和时间线同屏。 */
.juzoMonitorBox {
  width: min(100%, calc(min(44vh, 400px) * var(--juzoMonitorRatio))) !important;
  height: auto !important;
}

.juzoEditStack .juzoMonitorBox {
  width: min(100%, calc(min(36vh, 320px) * var(--juzoMonitorRatio))) !important;
}

.juzoEditStack .juzoTimelineHint {
  flex-direction: column;
  align-items: flex-start;
}

@media (width >= 600px) {
  .juzoEditPanes {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  /* 高度跟监视器对齐，素材多了在面板内滚动，不把这一行撑高。 */
  .juzoEditPanes > :nth-child(1) {
    height: 0;
    min-height: 100%;
  }
}

/* 分镜列表镜组卡片第二行：左边资产和待处理事项，右边时长、状态和操作。 */
.juzoShotFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}

/* 左边先按 360px 起算，资产和事项多时在左边内部换行，右边操作留在同一行。 */
.juzoShotLeft {
  display: flex;
  flex: 1 1 360px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  padding-left: 25px;
}

.juzoShotLeft > [data-band="resources"] {
  margin-left: 0;
}

.juzoShotFoot > [data-band="actions"] {
  margin-left: auto;
}

/* 待处理事项收成一组琥珀色文字，一个圆点起头，事项之间用间隔点分开；没有事项时整组不占位。换行后行首的间隔点落在组外，被裁掉。 */
.juzoShotIssues {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  min-width: 0;
  padding: 2px;
  overflow: hidden;
  color: var(--color-amber-600);
  font-size: 11.5px;
}

.dark .juzoShotIssues {
  color: var(--color-amber-400);
}

.juzoShotIssues:empty {
  display: none;
}

.juzoShotIssues::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: -8px;
  border-radius: 50%;
  background: currentColor;
}

.juzoShotIssue {
  position: relative;
  padding: 1px 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.juzoShotIssue + .juzoShotIssue::before {
  content: "·";
  position: absolute;
  left: -10px;
  opacity: 0.55;
}

button.juzoShotIssue:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
}

.juzoShotIssueQuiet {
  color: var(--muted-foreground);
}

/* 顶栏工作区按钮：放在积分旁边，宽屏显示工作区名，窄屏只留图标。 */
.juzoWorkspacePill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 220px;
  padding: 0 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.juzoWorkspacePill:hover,
.juzoWorkspacePill[data-state="open"] {
  background: var(--accent);
}

.juzoWorkspaceIcon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--muted);
}

.juzoWorkspaceName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width < 1280px) {
  .juzoWorkspacePill {
    padding-right: 6px;
  }

  .juzoWorkspaceName {
    display: none;
  }
}

.juzoWorkspaceMenu {
  width: 288px;
}

.juzoWorkspaceItemIcon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}

/* 批量出视频确认框和详情页「这次发给模型什么」：每组实际要发的参考图缩略图，首帧和多视图带角标。 */
.juzoPlanThumbs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.juzoPlanThumb {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--muted);
}

.juzoPlanThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.juzoPlanThumbTag {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 4px;
  border-top-left-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
}


/* ── 分镜页、镜头详情、剪辑审核：入口和版面收口（2026-11-08，补丁见 juzoWorkflowPolish.ts） ── */
/* 分镜列表标题行：第一行标题 + 主按钮，第二行左筛选、右工具。只调顺序，不改各按钮自身的行为。 */
:root .juzoBoardHead > .juzoBoardPrimary { order: 1; width: auto; flex: none; }
:root .juzoBoardHead::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
:root .juzoBoardHead > .juzoBoardFilter { order: 3; }
:root .juzoBoardHead > .juzoBoardTool { order: 4; }
:root .juzoBoardHead > .juzoCheckWrap { margin-left: auto; }
:root .juzoBoardHead > .juzoBoardTool.isQuiet { border-color: transparent; background: transparent; color: var(--juzo-muted); }
:root .juzoBoardHead > .juzoBoardTool.isQuiet { padding-inline: 8px; }
/* 搜索框可以收窄，笔记本宽度下第二行也放得下。 */
:root .juzoBoardHead > div.juzoBoardFilter { flex: 1 1 110px; max-width: 200px; min-width: 96px; }
:root .juzoBoardHead > div.juzoBoardFilter input { width: 100%; min-width: 0; }
:root .juzoBoardHead > .juzoBoardTool.isQuiet:hover { color: var(--juzo-text); background: var(--juzo-soft); }

.juzoCheckWrap { position: relative; display: inline-flex; }
.juzoCheckEntry {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--juzo-action); border-radius: 8px; background: var(--juzo-panel);
  color: var(--juzo-action); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.juzoCheckEntry:hover { background: color-mix(in srgb, var(--juzo-action) 8%, var(--juzo-panel)); }
.juzoCheckEntry:disabled { opacity: .5; }
.juzoCheckEntry small { margin-left: 2px; color: var(--juzo-muted); font-size: 12px; font-weight: 400; }
.juzoCheckGuide {
  position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 320px;
  display: grid; gap: 6px; padding: 14px 16px 12px;
  border: 1px solid var(--juzo-line); border-radius: 12px; background: var(--juzo-panel);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--juzo-text) 45%, transparent);
  color: var(--juzo-text); font-size: 12.5px; line-height: 1.6; white-space: normal;
}
.juzoCheckGuide::before {
  content: ""; position: absolute; top: -7px; right: 36px; width: 12px; height: 12px; transform: rotate(45deg);
  border-left: 1px solid var(--juzo-line); border-top: 1px solid var(--juzo-line); background: var(--juzo-panel);
}
.juzoCheckGuide > b { font-size: 13.5px; font-weight: 600; }
.juzoCheckGuide > span { color: var(--juzo-muted); }
.juzoCheckGuideActions { display: flex; gap: 8px; margin-top: 4px; }
.juzoCheckGuideActions button { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--juzo-text); font-size: 12.5px; font-weight: 600; }
.juzoCheckGuideActions button.isPrimary { background: var(--juzo-action); color: var(--juzo-onAction); }
.juzoCheckGuideActions button:not(.isPrimary):hover { background: var(--juzo-soft); }

/* 镜头详情：集名标签用纸色，分区导航吸在头部下面。 */
.juzoDrawerEpisode { padding: 2px 8px; border-radius: 7px; background: var(--juzo-soft); color: var(--juzo-text); font-size: 11.5px; font-weight: 500; }
.juzoDrawerNav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--juzo-line); background: var(--juzo-bg); }
.juzoDrawerNav.isEmpty { display: none; }
.juzoDrawerNav button { height: 28px; padding: 0 12px; border-radius: 999px; color: var(--juzo-muted); font-size: 12.5px; font-weight: 500; }
.juzoDrawerNav button:hover { color: var(--juzo-text); background: var(--juzo-soft); }
.juzoDrawerNav button[aria-current="true"] { color: var(--juzo-text); background: var(--juzo-selected); }
.juzoFrameEntry {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border: 1px solid var(--juzo-action); border-radius: 7px; color: var(--juzo-action); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.juzoFrameEntry:hover { background: color-mix(in srgb, var(--juzo-action) 8%, transparent); }
.juzoFrameEntry:not([data-frame-check="none"]) { border-color: var(--juzo-line); color: var(--juzo-text); }

/* 剪辑审核标题行：标题区可以收窄，副标题截断，主按钮留在同一行。 */
:root .juzoEditHead > .min-w-0 { flex: 1 1 64px; }
/* 「交付」只是分组小字，窄屏时让位给按钮。 */
@media (max-width: 1439px) { :root .juzoEditHead > span[style*="margin-inline-start"] { display: none; } }
.juzoSmartEdit { position: relative; display: inline-flex; }
.juzoSmartEditButton {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px;
  border: 1px solid var(--juzo-action); border-radius: 7px; background: var(--juzo-panel); color: var(--juzo-action); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.juzoSmartEditButton:hover, .juzoSmartEditButton.isOpen { background: color-mix(in srgb, var(--juzo-action) 8%, var(--juzo-panel)); }
.juzoSmartEditMenu {
  position: absolute; z-index: 45; top: calc(100% + 8px); right: 0; width: 330px; display: grid; padding: 6px;
  border: 1px solid var(--juzo-line); border-radius: 12px; background: var(--juzo-panel);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--juzo-text) 45%, transparent);
}
.juzoSmartEditMenu > button { display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px; text-align: left; }
.juzoSmartEditMenu > button:hover, .juzoSmartEditMenu > button:focus-visible { background: var(--juzo-soft); outline: none; }
.juzoSmartEditMenu b { color: var(--juzo-text); font-size: 13px; font-weight: 600; }
.juzoSmartEditMenu button span { color: var(--juzo-muted); font-size: 12px; line-height: 1.5; }
.juzoSmartEditFoot { margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--juzo-line); color: var(--juzo-muted); font-size: 11.5px; }
.juzoSmartEditHint {
  position: absolute; z-index: 45; top: calc(100% + 8px); right: 0; width: 300px; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--juzo-line); border-radius: 10px; background: var(--juzo-panel); color: var(--juzo-text); font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--juzo-text) 45%, transparent);
}
.juzoSmartEditHint button { margin-left: auto; color: var(--juzo-muted); font-size: 14px; }

/* 角色卡绑定行：平台登记胶囊已去掉，操作列按按钮实际宽度排，不再固定 82px */
.role-card-bindings .role-card-binding-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
.role-card-bindings .role-card-binding-actions { width: auto; }
.role-card-bindings .role-card-media-action:disabled { opacity: 0.5; cursor: not-allowed; }

/* 主图放大层用的是弹窗内容容器，去掉弹窗默认的居中、宽高和底色，铺满整个窗口。 */
[data-slot="dialog-content"].m2-lightbox {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 4vh 4vw;
  overflow: hidden;
  z-index: 120;
  translate: none;
  transform: none;
  animation: none;
  border: 0;
  border-radius: 0;
  background: #000000d1;
  box-shadow: none;
}

/* 资产详情左栏：设定图微调固定在左栏底部，窗口矮或转面图多时上方内容滚动，生成按钮一直可见。 */
@media (width > 860px) {
  .m2-scope .m2-left {
    overflow-y: auto;
  }

  .m2-scope .m2-chat {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex: 1 0 auto;
  }

  /* 上传面板展开时微调区回到正常位置，免得盖住面板。 */
  .m2-scope .m2-left:has([id^="assetViewUpload:"]) .m2-chat {
    position: static;
  }

  .m2-scope .m2-thread {
    max-height: 160px;
  }
}

/* 窗口较矮时主图降低高度并完整显示，左栏内容尽量不用滚动。 */
@media (width > 860px) and (height <= 800px) {
  .m2-scope .m2-stage {
    aspect-ratio: auto;
    height: 150px;
  }

  .m2-scope .m2-stage > img {
    object-fit: contain;
  }
}

/* 全站原生下拉：浏览器自带箭头贴着右边框，也没有属性能调位置。统一换成背景箭头，留出右边距，最小高度 32px，和同行的按钮、组件下拉对齐；表单和门户页本来更高的不变。原生下拉的样式分散在各页面，这里用 !important 一次覆盖。 */
:root select:not([multiple]):not([size]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 32px !important;
  padding-inline-end: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px 12px !important;
}

.juzoFirstRecharge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.juzoFirstRechargeTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--juzo-text);
  font-size: 18px;
}

.juzoFirstRechargeText {
  margin: 8px 0 0;
  color: var(--juzo-muted);
  font-size: 13px;
}

.juzoFirstRechargeTag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--juzo-wash);
  color: var(--juzo-text);
  font-size: 12px;
  font-weight: 400;
}

.juzoFirstRechargeTagDone {
  color: #2f7a5b;
}

.juzoFirstRechargeAction {
  flex: none;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--juzo-action);
  color: #fff;
  font-size: 14px;
}

.juzoFirstRechargeMeter {
  flex: none;
  width: 240px;
}

.juzoFirstRechargeMeter p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoFirstRechargeMeter strong {
  color: var(--juzo-text);
}

.juzoFirstRechargeBar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--juzo-wash);
}

.juzoFirstRechargeBar i {
  display: block;
  height: 100%;
  background: var(--juzo-action);
}

.juzoFirstRechargeHint {
  margin-top: 4px;
  color: var(--juzo-text);
  font-size: 13px;
}

.juzoFirstRechargeLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  color: var(--juzo-muted);
  font-size: 12px;
}

@media (max-width: 640px) {
  .juzoFirstRecharge {
    flex-direction: column;
    align-items: stretch;
  }

  .juzoFirstRechargeMeter {
    width: 100%;
  }
}

/* 画布编辑页顶栏的项目按钮和切换菜单：点开才浮出，不占画布。 */
.juzoCanvasSwitchPill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 28px;
  max-width: 260px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  cursor: pointer;
}

.juzoCanvasSwitchPill:hover,
.juzoCanvasSwitchPill[data-state="open"] {
  background: var(--accent);
}

.juzoCanvasSwitchPill svg,
.juzoCanvasSwitchAction svg,
.juzoCanvasSwitchSearch svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.juzoCanvasSwitchPill small,
.juzoCanvasSwitchRow small,
.juzoCanvasSwitchAction small {
  flex: none;
  color: var(--muted-foreground);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.juzoCanvasSwitchName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.juzoCanvasSwitchSlash {
  color: var(--muted-foreground);
  font-size: 13px;
}

@media (width < 768px) {
  .juzoCanvasSwitchPill .juzoCanvasSwitchName,
  .juzoCanvasSwitchPill small,
  .juzoCanvasSwitchSlash {
    display: none;
  }
}

@media (width < 640px) {
  .juzoCanvasSwitchPill {
    display: none;
  }
}

.juzoCanvasSwitchMenu {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  font-size: 13px;
}

.juzoCanvasSwitchSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 8px 8px 4px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--muted-foreground);
}

.juzoCanvasSwitchSearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 13px;
}

.juzoCanvasSwitchSearch:focus-within {
  border-color: var(--ring);
}

.juzoCanvasSwitchLabel {
  padding: 6px 16px 2px;
  color: var(--muted-foreground);
  font-size: 11px;
}

.juzoCanvasSwitchList {
  display: flex;
  flex-direction: column;
  max-height: min(336px, calc(100dvh - 280px));
  padding: 2px 8px 6px;
  overflow: auto;
}

.juzoCanvasSwitchRow,
.juzoCanvasSwitchAction {
  display: flex;
  flex: none;
  align-items: center;
  width: 100%;
  border-radius: 6px;
  text-align: start;
  cursor: pointer;
}

.juzoCanvasSwitchRow {
  gap: 10px;
  padding: 6px 8px;
}

.juzoCanvasSwitchAction {
  gap: 8px;
  padding: 7px 8px;
}

.juzoCanvasSwitchAction > span {
  flex: 1;
}

.juzoCanvasSwitchRow:hover,
.juzoCanvasSwitchRow:focus-visible,
.juzoCanvasSwitchRow[aria-current="true"],
.juzoCanvasSwitchAction:hover,
.juzoCanvasSwitchAction:focus-visible {
  outline: 0;
  background: var(--accent);
}

.juzoCanvasSwitchAction:disabled {
  opacity: 0.5;
  cursor: default;
}

.juzoCanvasSwitchRow[aria-current="true"] .juzoCanvasSwitchName {
  font-weight: 600;
}

.juzoCanvasSwitchThumb {
  flex: none;
  width: 52px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--accent);
}

.juzoCanvasSwitchThumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.juzoCanvasSwitchText {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.juzoCanvasSwitchText .juzoCanvasSwitchName {
  font-weight: 500;
}

.juzoCanvasSwitchActions {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}

.juzoCanvasSwitchTop {
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.juzoCanvasSwitchBack {
  width: auto;
  margin: 6px 8px 0;
  font-weight: 600;
}

.juzoCanvasSwitchEmpty {
  padding: 16px 8px;
  color: var(--muted-foreground);
  text-align: center;
}

/* 画布列表页侧栏的「AI 短剧项目」分组，行样式沿用文件夹列表。 */
.juzoCanvasProjectNav {
  max-height: 40vh;
  margin-bottom: 24px;
}

/* 画布送去剪辑、剪辑从画布导入：选中用墨线加纸色底，朱红只留给确认按钮。 */
.juzoEditDialog {
  gap: 10px;
}

.juzoEditLabel {
  margin-top: 4px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoEditLabelRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.juzoEditLabelRow small {
  font-size: 11px;
}

.juzoEditChoices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.juzoEditChoice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--juzo-line);
  border-radius: 8px;
  cursor: pointer;
}

.juzoEditChoice:hover,
.juzoEditChoice[aria-checked="true"] {
  background: var(--juzo-wash);
}

.juzoEditChoice[aria-checked="true"] {
  border-color: var(--juzo-text);
}

.juzoEditChoice small {
  padding-left: 22px;
  color: var(--juzo-muted);
  font-size: 11px;
}

.juzoEditChoiceHead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.juzoEditChoiceHead strong {
  font-weight: 500;
}

.juzoEditRadio {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--juzo-muted);
  border-radius: 50%;
}

.juzoEditChoice[aria-checked="true"] .juzoEditRadio {
  border: 4px solid var(--juzo-text);
}

.juzoEditField {
  width: calc(100% - 22px);
  height: 30px;
  margin: 4px 0 0 22px;
  padding: 0 8px;
  border: 1px solid var(--juzo-line);
  border-radius: 6px;
  background: var(--background);
  color: var(--juzo-text);
  font-size: 12px;
}

.juzoEditClips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.juzoEditClips li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--juzo-line);
  border-radius: 8px;
  background: var(--background);
  cursor: grab;
}

.juzoEditClips li:hover,
.juzoEditClips li:focus-visible,
.juzoEditClips li[data-dragging] {
  background: var(--juzo-wash);
}

.juzoEditGrip {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--juzo-muted);
}

.juzoEditIndex {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--juzo-line);
  border-radius: 50%;
  font-size: 11px;
}

.juzoEditThumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 36px;
  overflow: hidden;
  border-radius: 4px;
  background: #1d1f1c;
  color: rgb(255 255 255 / 55%);
}

.juzoEditThumb img,
.juzoEditThumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.juzoEditThumb svg {
  width: 18px;
  height: 18px;
}

.juzoEditClipText {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.juzoEditClipText strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.juzoEditClipText small,
.juzoEditNote {
  color: var(--juzo-muted);
  font-size: 11px;
}

.juzoEditTag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--juzo-line);
  border-radius: 999px;
  background: var(--juzo-wash);
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 400;
}

.juzoEditChipLink {
  display: inline-flex;
  border-radius: 999px;
  cursor: pointer;
}

.juzoEditChipLink:hover > span {
  text-decoration: underline;
}

.canvasNodePreviewHeader > .juzoEditChipLink {
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.juzoEditSourceLink {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--juzo-line);
  text-underline-offset: 2px;
}

.juzoEditSourceLink:hover {
  color: var(--juzo-text);
}

.juzoEditRemove {
  flex: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--juzo-muted);
}

.juzoEditRemove:hover {
  background: var(--juzo-wash);
  color: var(--juzo-text);
}

.juzoEditRemove:disabled {
  opacity: .35;
}

.juzoEditActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.juzoEditCanvasSelect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--juzo-line);
  border-radius: 6px;
  font-size: 11px;
}

.juzoEditCanvasSelect select {
  max-width: 220px;
  background: transparent;
  color: var(--juzo-text);
  font-size: 11px;
}

.juzoEditCanvasSelect small {
  color: var(--juzo-muted);
  font-size: 10px;
  white-space: nowrap;
}

.juzoEditPickerBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.juzoEditPickerBar > small {
  margin-left: auto;
  color: var(--juzo-muted);
  font-size: 10px;
}

.juzoEditFilter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: var(--muted);
}

.juzoEditFilter button {
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--juzo-muted);
  font-size: 11px;
}

.juzoEditFilter button[aria-checked="true"] {
  background: var(--background);
  color: var(--juzo-text);
}

.juzoEditGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 52vh;
  margin-top: 12px;
  overflow-y: auto;
}

.juzoEditCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 8px;
  overflow: hidden;
  border: 1px solid var(--juzo-line);
  border-radius: 8px;
  background: var(--background);
  text-align: start;
}

.juzoEditCard:hover,
.juzoEditCard[aria-checked="true"] {
  background: var(--juzo-wash);
}

.juzoEditCard[aria-checked="true"] {
  border-color: var(--juzo-text);
}

.juzoEditCard:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.juzoEditCard .juzoEditThumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.juzoEditCard strong,
.juzoEditCard small {
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.juzoEditCard strong {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
}

.juzoEditCard small {
  color: var(--juzo-muted);
  font-size: 10px;
}

.juzoEditCheck {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 4px;
  background: rgb(0 0 0 / 35%);
}

.juzoEditCard[aria-checked="true"] .juzoEditCheck {
  border-color: var(--juzo-text);
  background: var(--juzo-text);
  box-shadow: inset 0 0 0 3px var(--background);
}

.juzoEditEmpty {
  grid-column: 1 / -1;
  padding: 32px 8px;
  color: var(--juzo-muted);
  font-size: 12px;
  text-align: center;
}

/* 剧本正文弹窗的分集目录：「资料」标签原站按深色主题配色，浅色主题下几乎看不见；第二行说明去掉额外透明；标题方块按内容放宽，「剧本设定」不再折行。 */
.juzoReferenceTag {
  color: var(--color-violet-700);
  background: color-mix(in oklab, var(--color-violet-500) 14%, transparent);
  font-size: 10px;
  line-height: 1.2;
}
.dark .juzoReferenceTag {
  color: var(--color-violet-200);
  background: color-mix(in oklab, var(--color-violet-400) 22%, transparent);
}
.juzoEpisodeMeta {
  color: var(--muted-foreground);
  font-size: 10.5px;
}
.juzoEpisodeBadge {
  width: auto;
  min-width: 2rem;
  padding: 0 .5rem;
  white-space: nowrap;
}