/* 第 12 轮 · 甲：设计变量、外壳、共用组件、「组件规范」页。
   颜色取初恋主题；尺寸、圆角、动效取 20271。各路只用这里的变量与类，不另画一套。 */

/* ── 1. 设计变量 ─────────────────────────────────────────────── */

:root[data-g20271-chulian] {
  /* 颜色：深色作默认（index.html 默认 data-mode="dark"） */
  --r12-bg: #0e0f11;
  --r12-surface: #141518;
  --r12-surface-2: #18191c;
  --r12-surface-3: #1e1f23;
  --r12-pop-bg: #202125;
  --r12-hover: rgba(255,255,255,.06);
  --r12-pressed: rgba(255,255,255,.10);
  --r12-selected-bg: rgba(255,255,255,.14);
  --r12-seg-selected-bg: rgba(255,255,255,.14);
  --r12-ink: rgba(255,255,255,.92);
  --r12-muted: rgba(255,255,255,.60);
  --r12-faint: rgba(255,255,255,.32);
  --r12-line: rgba(255,255,255,.08);
  --r12-line-strong: rgba(255,255,255,.20);
  --r12-selected-border: rgba(255,255,255,.60);
  --r12-brand: #d6336a;
  --r12-brand-hover: #c42d5f;
  --r12-on-brand: #ffffff;
  /* 过渡用，乙、戊改完由 5850 派单删掉 */
  --r12-pink: var(--r12-brand);
  --r12-pink-hover: var(--r12-brand-hover);
  --pink: var(--r12-brand);
  --cl-spend: var(--r12-brand);
  --cl-spend-hover: var(--r12-brand-hover);
  --cl-on-spend: var(--r12-on-brand);
  /* 主控强调色：只用在主控的模式按钮和输入框焦点，不另作他用 */
  --r12-accent: #6AA4FF;
  /* 七稿 0.5：用户强调色（发送键、选中勾、焦点框、开关打开态、拖动指示线）。
     预设里不放粉色；soft 是用户气泡那种很淡的叠色，深色 24% */
  --r12-accent-user: #3377F7;
  --r12-accent-user-soft: color-mix(in srgb, var(--r12-accent-user) 24%, transparent);
  --r12-ok: #5ad69a;
  --r12-review: #b8a7ff;
  --r12-running: #6fb3ff;
  --r12-error: #ffa8a1;
  /* 七稿第二单：未读红点。和失败的浅红分开，红点更醒目 */
  --r12-dot-red: #ff5a5f;
  --r12-scrim: rgba(0,0,0,.55);
  --r12-dot: rgba(255,255,255,.05);
  --r12-shadow-pop: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --r12-shadow-dialog: 0 24px 64px rgba(0,0,0,.66), 0 4px 16px rgba(0,0,0,.4);
  --r12-glow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px -24px color-mix(in srgb, var(--r12-brand) 35%, transparent), 0 0 40px -12px rgba(255,255,255,.06);
  /* 毛玻璃：主控、顶栏、弹层共用（顶栏也用同一套） */
  --r12-glass-bg: rgba(28,28,32,.66);
  --r12-glass-blur: saturate(1.4) blur(24px);
  --r12-glass-line: rgba(255,255,255,.10);
  --r12-glass-shadow: 0 8px 32px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);

  /* 尺寸、圆角、动效 */
  /* 左侧图标栏宽：网格第一列与「顶栏中间按窗口居中」都用它，改一处就一起变 */
  --r12-rail-w: 64px;
  /* 顶栏左边离窗口左边的实际距离 = 导航栏宽 + 外壳间距（目前间距 0） */
  --r12-topbar-offset: var(--r12-rail-w);
  --r12-r-control: 10px;
  --r12-r-card: 12px;
  --r12-r-media: 6px;
  --r12-r-panel: 16px;
  --r12-r-pop: 18px;
  --r12-r-dialog: 20px;
  --r12-r-composer: 20px;
  --r12-r-pill: 999px;
  --r12-h-sm: 24px;
  --r12-h: 28px;
  --r12-h-lg: 32px;
  /* 外壳四周统一留 8；右侧栏主控统一宽 360（共用约定 1、2） */
  --r12-gutter: 8px;
  --r12-side-w: 360px;
  --r12-topbar-h: 48px;
  /* 字号四档：正文 14/22、标题 15/22、界面 13/20、小字 12/18（全站只许用这四档） */
  --r12-fs-body: 14px;
  --r12-lh-body: 22px;
  --r12-fs-title: 15px;
  --r12-lh-title: 22px;
  --r12-fs-ui: 13px;
  --r12-lh-ui: 20px;
  --r12-fs-small: 12px;
  --r12-lh-small: 18px;
  --r12-dur-1: 64ms;
  --r12-dur-2: 112ms;
  --r12-dur-3: 160ms;
  --r12-dur-4: 224ms;
  --r12-dur-5: 336ms;
  --r12-ease: cubic-bezier(.2,0,0,1);
  --r12-ease-enter: cubic-bezier(.05,.7,.1,1);
  --r12-ease-exit: cubic-bezier(.3,0,.8,.15);
  --r12-spring: linear(0, .21 7%, .56 16%, .86 27%, 1.01 40%, 1.02 48%, 1 64%, 1);
}

:root[data-g20271-chulian][data-mode='dark'] {
  color-scheme: dark;
  --r12-bg: #0e0f11;
  --r12-surface: #141518;
  --r12-surface-2: #18191c;
  --r12-surface-3: #1e1f23;
  --r12-pop-bg: #202125;
  --r12-hover: rgba(255,255,255,.06);
  --r12-pressed: rgba(255,255,255,.10);
  --r12-selected-bg: rgba(255,255,255,.14);
  --r12-seg-selected-bg: rgba(255,255,255,.14);
  --r12-ink: rgba(255,255,255,.92);
  --r12-muted: rgba(255,255,255,.60);
  --r12-faint: rgba(255,255,255,.32);
  --r12-line: rgba(255,255,255,.08);
  --r12-line-strong: rgba(255,255,255,.20);
  --r12-selected-border: rgba(255,255,255,.60);
  --r12-brand: #d6336a;
  --r12-brand-hover: #c42d5f;
  --r12-on-brand: #ffffff;
  /* 过渡用，乙、戊改完由 5850 派单删掉 */
  --r12-pink: var(--r12-brand);
  --r12-pink-hover: var(--r12-brand-hover);
  --pink: var(--r12-brand);
  --cl-spend: var(--r12-brand);
  --cl-spend-hover: var(--r12-brand-hover);
  --cl-on-spend: var(--r12-on-brand);
  /* 主控强调色：只用在主控的模式按钮和输入框焦点，不另作他用 */
  --r12-accent: #6AA4FF;
  /* 七稿 0.5：用户强调色（发送键、选中勾、焦点框、开关打开态、拖动指示线）。
     预设里不放粉色；soft 是用户气泡那种很淡的叠色，深色 24% */
  --r12-accent-user: #3377F7;
  --r12-accent-user-soft: color-mix(in srgb, var(--r12-accent-user) 24%, transparent);
  --r12-ok: #5ad69a;
  --r12-review: #b8a7ff;
  --r12-running: #6fb3ff;
  --r12-error: #ffa8a1;
  --r12-dot-red: #ff5a5f;
  --r12-scrim: rgba(0,0,0,.55);
  --r12-dot: rgba(255,255,255,.05);
  --r12-shadow-pop: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --r12-shadow-dialog: 0 24px 64px rgba(0,0,0,.66), 0 4px 16px rgba(0,0,0,.4);
  --r12-glow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px -24px color-mix(in srgb, var(--r12-brand) 35%, transparent), 0 0 40px -12px rgba(255,255,255,.06);
}

:root[data-g20271-chulian][data-mode='light'] {
  color-scheme: light;
  --r12-bg: #f6f6f7;
  --r12-surface: #ffffff;
  --r12-surface-2: #ffffff;
  --r12-surface-3: #f2f2f4;
  --r12-pop-bg: #ffffff;
  --r12-hover: rgba(17,17,26,.05);
  --r12-pressed: rgba(17,17,26,.08);
  --r12-selected-bg: rgba(17,17,26,.07);
  --r12-seg-selected-bg: #ffffff;
  --r12-selected-shadow: 0 1px 2px rgba(17,17,26,.10);
  --r12-ink: rgba(17,17,26,.92);
  --r12-muted: rgba(17,17,26,.60);
  --r12-faint: rgba(17,17,26,.32);
  --r12-line: rgba(17,17,26,.08);
  --r12-line-strong: rgba(17,17,26,.20);
  --r12-selected-border: rgba(17,17,26,.60);
  --r12-brand: #c42d5f;
  --r12-brand-hover: #b32855;
  --r12-on-brand: #ffffff;
  /* 过渡用，乙、戊改完由 5850 派单删掉 */
  --r12-pink: var(--r12-brand);
  --r12-pink-hover: var(--r12-brand-hover);
  --pink: var(--r12-brand);
  --cl-spend: var(--r12-brand);
  --cl-spend-hover: var(--r12-brand-hover);
  --cl-on-spend: var(--r12-on-brand);
  --r12-accent: #2F6FEB;
  /* 七稿 0.5：浅色下用户强调色同默认蓝，soft 约 14% */
  --r12-accent-user: #3377F7;
  --r12-accent-user-soft: color-mix(in srgb, var(--r12-accent-user) 14%, transparent);
  --r12-ok: #1f8a52;
  --r12-review: #6f5bc2;
  --r12-running: #1d5fae;
  --r12-error: #a52b2b;
  --r12-dot-red: #d92d20;
  --r12-scrim: rgba(0,0,0,.35);
  --r12-dot: rgba(17,17,26,.06);
  --r12-shadow-pop: 0 12px 32px rgba(17,17,26,.12), 0 2px 6px rgba(17,17,26,.06);
  --r12-shadow-dialog: 0 24px 64px rgba(17,17,26,.18), 0 4px 12px rgba(17,17,26,.08);
  --r12-glow: 0 1px 2px rgba(17,17,26,.06), 0 16px 40px -20px color-mix(in srgb, var(--r12-brand) 22%, transparent);
  --r12-glass-bg: rgba(255,255,255,.72);
  --r12-glass-blur: saturate(1.4) blur(24px);
  --r12-glass-line: rgba(0,0,0,.08);
  --r12-glass-shadow: 0 8px 32px rgba(17,17,26,.10), 0 1px 2px rgba(17,17,26,.06);
}

html[data-motion='reduced'] {
  --r12-dur-1: 0ms;
  --r12-dur-2: 0ms;
  --r12-dur-3: 0ms;
  --r12-dur-4: 0ms;
  --r12-dur-5: 0ms;
}

html[data-motion='reduced'] .r12-menu,
html[data-motion='reduced'] .r12-submenu,
html[data-motion='reduced'] .r12-dialog-backdrop,
html[data-motion='reduced'] .r12-dialog,
html[data-motion='reduced'] .r12-tip,
html[data-motion='reduced'] .r12-toast,
html[data-motion='reduced'] .r12-status.is-running i,
html[data-motion='reduced'] .r12-spin,
html[data-motion='reduced'] .r12-gen-fill { animation: none; }

/* 系统级「减少动态效果」：转圈和渐变流动都停，其余按上面的时长归零 */
@media (prefers-reduced-motion: reduce) {
  .r12-spin,
  .r12-gen-fill,
  .r12-status.is-running i { animation: none; }
}

/* ── 2. 外壳：网格、底色、点纹、Logo ─────────────────────────── */

body {
  background-color: var(--r12-bg);
  background-image: radial-gradient(var(--r12-dot) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-attachment: fixed;
  /* 全站正文档 14/22 */
  font-size: var(--r12-fs-body);
  line-height: var(--r12-lh-body);
}

.app-shell {
  grid-template-columns: var(--r12-rail-w) minmax(0, 1fr);
  grid-template-rows: var(--r12-topbar-h) minmax(0, 1fr);
  background: transparent;
}

.brand {
  border: 0;
  background: transparent;
  overflow: hidden;
}

#topbar,
#rail {
  border: 0;
  background: transparent;
}

#topbar {
  position: relative;
  display: grid;
  /* 左 1fr | 中间插槽自动 | 右 1fr：两侧等宽，中间插槽自然落在顶栏正中，也不会和左右重叠 */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: var(--r12-topbar-h);
  /* 左右等距，中间插槽才是真正的顶栏中心 */
  padding: 0 10px;
  /* 七稿 0.6：顶栏和背景融为一体 —— 不要毛玻璃、不要半透明底、不要投影，
     底色就是页面底色；只在内容滚到顶栏下面时出那条 1px 细线（见 .r12-topbar-line） */
  background: var(--r12-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* 顶栏线：内容滚动超过 4 才在底边中间淡入，两端渐隐；渐显渐隐各 224ms */
.r12-topbar-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--r12-line-strong) 30%, var(--r12-line-strong) 70%, transparent);
  opacity: 0;
  transition: opacity var(--r12-dur-4) var(--r12-ease);
  pointer-events: none;
}

[data-r12-topbar][data-scrolled] .r12-topbar-line { opacity: 1; }

/* 顶栏中间插槽：给戊放流程条。
   中心 = 窗口宽 / 2 —— #topbar 从导航栏右边开始，所以先把 50% 往左挪半个导航栏宽，再自身居中。
   只有会碰到左右两组时才由脚本加 margin-left 往一侧挪；还放不下加 .is-compact。 */
.r12-topbar-center {
  position: absolute;
  /* 窗口中心 → 换到顶栏自己的坐标系：减去「顶栏左边离窗口左边」的实际距离。
     这个距离 = 导航栏宽 + 外壳间距，目前间距 0，写成变量，改外壳不会把它算错 */
  left: calc(50vw - var(--r12-topbar-offset));
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

#rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 选中框离左右两边都是 8：64 宽减去 8+8，框就是 48（共用约定 1） */
  padding: var(--r12-gutter);
}

.stage {
  background: transparent;
  /* 外壳四周留 8：上 = 顶栏底 + 8，左 = 选中框右边 + 8（正好是网格第 2 列起点），右、下各 8 */
  padding: var(--r12-gutter) var(--r12-gutter) var(--r12-gutter) 0;
}

/* 页面在自己的最外层声明 data-r12-bleed 时：上、下留白归零（内容贴顶栏、贴窗口底），左右照旧。
   全能会话页这类需要内容从顶栏底边穿过去的页面用这个。 */
.stage:has(> [data-r12-bleed]) {
  padding-top: 0;
  padding-bottom: 0;
}

/* 顶栏只认这一个外框：它的高度就是 48，量「顶栏底」一律量它 */
[data-r12-topbar] {
  height: var(--r12-topbar-h);
}

/* 毛玻璃：底色、背景模糊、细边、柔光。主控、顶栏、弹层共用这一套 */
.r12-glass {
  background: var(--r12-glass-bg);
  -webkit-backdrop-filter: var(--r12-glass-blur);
  backdrop-filter: var(--r12-glass-blur);
  border: 1px solid var(--r12-glass-line);
  box-shadow: var(--r12-glass-shadow);
}

.brand-logo {
  width: 48px;
  height: 32px;
  object-fit: contain;
  border: 0;
  outline: 0;
  background: none;
  border-radius: 0;
}

.brand-logo-on-light { display: none; }
:root[data-mode='light'] .brand-logo-on-dark { display: none; }
:root[data-mode='light'] .brand-logo-on-light { display: block; }

/* 导航栏：4 项，56×56、圆角 12、图标 20、文字 12/16 */
.r12-rail-item {
  width: 48px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--r12-muted);
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-rail-item svg {
  width: 20px;
  height: 20px;
}

.r12-rail-item span {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 500;
}

.r12-rail-item:hover { background: var(--r12-hover); }

.r12-rail-item[aria-current='page'] {
  background: var(--r12-selected-bg);
  color: var(--r12-ink);
  box-shadow: var(--r12-selected-shadow, none);
}

/* 顶栏 */
/* 左组固定在第 1 列、右组固定在第 3 列：中间那一列是给绝对定位的插槽让位的空列，
   不写死的话右组会掉进中间的 auto 列、跑到窗口中间去 */
.r12-topbar-left {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 左边插槽要能放下「← 创作 / 标题 ＋」一行：插槽里的东西都可以缩，标题过长用省略号 */
.r12-topbar-left > * { min-width: 0; }

.r12-topbar-right {
  grid-column: 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.r12-topbar-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--r12-fs-title);
  line-height: var(--r12-lh-title);
  font-weight: 600;
  color: var(--r12-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12-credit-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  transition: background-color var(--r12-dur-2) var(--r12-ease);
}

.r12-credit-pill:hover { background: var(--r12-hover); }
/* 积分星跟胶囊上的数字同色，不算粉色三处；团队胶囊另有团队色覆盖 */
.r12-credit-pill svg { width: 16px; height: 16px; color: currentColor; }

.r12-tabular { font-variant-numeric: tabular-nums; }

.r12-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--r12-line-strong);
  border-radius: 50%;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 650;
}

.r12-avatar:hover { background: var(--r12-pressed); color: var(--r12-ink); }

/* ── 3. 按钮三态 ─────────────────────────────────────────────── */

/* 盖老规则：r9/r10 给所有 button 压了 min-width 24 / min-height 24 / line-height 22，
   r11-rules 又压了 align-items:center，会把 r12 组件的实际尺寸撑大（开关被撑成 32×24）。
   先把这三项归零、各行自己的行高，再各自定宽高。 */
.r12-btn,
.r12-icon-btn,
.r12-circle-btn,
.r12-seg-item,
.r12-switch,
.r12-menu-item,
.r12-rail-item,
.r12-credit-pill,
.r12-avatar,
.r12-select,
.r12-card,
.r12-step,
.r12-chip,
.r12-check,
.r12-process-head {
  min-width: 0;
  min-height: 0;
  line-height: normal;
}

/* 文字对齐：卡片、菜单项、表格单元格、表单一律左对齐（表格数字列在下文单独右对齐）；
   胶囊、导航项、图标按钮一律居中。老样式里 button 是浏览器默认的居中，这里定死。 */
.r12-card,
.r12-card-body,
.r12-card-name,
.r12-card-meta,
.r12-menu-item,
.r12-field,
.r12-table th,
.r12-table td {
  text-align: left;
}

.r12-btn,
.r12-icon-btn,
.r12-circle-btn,
.r12-seg-item,
.r12-rail-item,
.r12-chip,
.r12-avatar,
.r12-credit-pill {
  text-align: center;
}

.r12-btn {
  height: var(--r12-h);
  max-height: var(--r12-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r12-r-pill);
  background-color: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease), border-color var(--r12-dur-2) var(--r12-ease), transform var(--r12-dur-1) var(--r12-ease);
}

.r12-btn svg { width: 16px; height: 16px; }
.r12-btn.is-sm { height: var(--r12-h-sm); max-height: var(--r12-h-sm); padding: 0 10px; font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-btn.is-lg { height: var(--r12-h-lg); max-height: var(--r12-h-lg); padding: 0 16px; }

/* 紧凑按钮：通栏、面板头、卡片里一律用它 */
.r12-btn.is-dense { height: 28px; max-height: 28px; padding: 0 10px; gap: 4px; font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-btn.is-dense svg { width: 14px; height: 14px; }

.r12-btn:not(:disabled):not([aria-disabled='true']):hover { background-color: var(--r12-hover); }

.r12-btn:not(:disabled):not([aria-disabled='true']):active { transform: scale(.99); }

.r12-btn.is-quiet {
  background-color: transparent;
  color: var(--r12-muted);
}

.r12-btn.is-quiet:not(:disabled):not([aria-disabled='true']):hover { background-color: var(--r12-hover); color: var(--r12-ink); }

.r12-btn.is-primary {
  background-color: var(--r12-brand);
  color: var(--r12-on-brand);
}

.r12-btn.is-primary:not(:disabled):not([aria-disabled='true']):hover { background-color: var(--r12-brand-hover); }

.r12-btn.is-hover { background-color: var(--r12-hover); }

.r12-btn[aria-pressed='true'],
.r12-btn[aria-current]:not([aria-current='false']),
.r12-btn[aria-checked='true'],
.r12-btn[aria-selected='true'] {
  background-color: var(--r12-selected-bg);
  color: var(--r12-ink);
  font-weight: 600;
  box-shadow: var(--r12-selected-shadow, none);
}

.r12-btn:disabled,
.r12-btn[aria-disabled='true'] {
  color: var(--r12-faint);
  background-color: color-mix(in srgb, var(--r12-surface-3) 50%, transparent);
  cursor: not-allowed;
  transform: none;
}

.r12-btn.is-quiet:disabled,
.r12-btn.is-quiet[aria-disabled='true'] { background-color: transparent; }

.r12-btn.is-primary:disabled,
.r12-btn.is-primary[aria-disabled='true'] { background-color: color-mix(in srgb, var(--r12-brand) 50%, transparent); color: color-mix(in srgb, var(--r12-on-brand) 72%, transparent); }

.r12-icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--r12-muted);
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease), transform var(--r12-dur-1) var(--r12-ease);
}

.r12-icon-btn svg { width: 16px; height: 16px; }
.r12-icon-btn.is-sm { width: 24px; height: 24px; }
.r12-icon-btn:not(:disabled):not([aria-disabled='true']):hover { background-color: var(--r12-hover); color: var(--r12-ink); }
.r12-icon-btn:not(:disabled):not([aria-disabled='true']):active { transform: scale(.99); }
.r12-icon-btn[aria-pressed='true'] { background-color: var(--r12-selected-bg); color: var(--r12-ink); }
.r12-icon-btn:disabled,
.r12-icon-btn[aria-disabled='true'] { color: var(--r12-faint); cursor: not-allowed; }

.r12-circle-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--r12-surface-3);
  color: var(--r12-ink);
  transition: background-color var(--r12-dur-2) var(--r12-ease), transform var(--r12-dur-1) var(--r12-ease);
}

.r12-circle-btn svg { width: 16px; height: 16px; }

/* 发送键：只有一个正圆，图标用 grid 几何居中；深色实白底黑箭头，浅色实黑底白箭头。
   底色用实色，不借 --r12-ink（那是有 0.92 透明度的正文色）；不可点只降整个按钮的透明度。 */
.r12-send-btn {
  width: var(--r12-send-size, 32px);
  height: var(--r12-send-size, 32px);
  min-width: 0;
  min-height: 0;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0E0F11;
  transition: opacity var(--r12-dur-2) var(--r12-ease);
}

/* 浅色：黑底白箭头（#17171A = rgb(23, 23, 26)） */
:root[data-mode='light'] .r12-send-btn {
  background: #17171A;
  color: #FFFFFF;
}

.r12-send-btn svg { width: calc(var(--r12-send-size, 32px) * .5); height: calc(var(--r12-send-size, 32px) * .5); }
.r12-send-btn:disabled,
.r12-send-btn.is-disabled,
.r12-send-btn[aria-disabled='true'] { opacity: .35; cursor: not-allowed; }

/* 带费用时外面包一层：费用是按钮左边的兄弟元素，离按钮 8；圆本身不变，费用不画进圆里 */
.r12-send-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.r12-send-cost {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 停止键：同一个正圆，中间 10×10、圆角 2 的方块，几何居中；深色白圆黑块，浅色黑圆白块 */
.r12-send-btn.is-stop .r12-send-stop-mark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  /* 圆的字色就是背景色：深色白圆配黑块、浅色黑圆配白块，跟着 .r12-send-btn 一起反色 */
  background: currentColor;
}

/* 搜索胶囊：平时 28 的圆，点开变 220×28 的输入框；宽度不推挤旁边元素（绝对定位） */
.r12-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 28px;
  height: 28px;
  flex: none;
}

.r12-search[data-open] .r12-search-trigger { display: none; }

.r12-search-field {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 220px;
  height: 28px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  opacity: 0;
  transform: scale(.96);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity var(--r12-dur-3) var(--r12-ease), transform var(--r12-dur-3) var(--r12-ease);
}

.r12-search[data-open] .r12-search-field { opacity: 1; transform: none; pointer-events: auto; }

/* 从放大镜位置向右展开（默认向左）：贴左边、向右长，宽度由脚本按「这一行剩下的空间」算 */
.r12-search[data-align='left'] .r12-search-field {
  right: auto;
  left: 0;
  transform-origin: left center;
}

/* 向右展开时给整行加 r12-search-row-open：同行除了搜索本身和带 data-r12-search-keep 的按钮，
   其余（标题等）暂时让位，搜索才拿得到宽度；收起后类名去掉，标题自动回来。
   类名必须带 r12- 前缀（不带前缀的通用名会和别的路的 .is-xxx 撞）。 */
.r12-search-row-open > *:not(.r12-search):not([data-r12-search-keep]) { display: none; }

.r12-search-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  outline: none;
}

.r12-search-input::placeholder { color: var(--r12-faint); }
.r12-search-clear[hidden] { display: none; }
.r12-circle-btn:not(:disabled):not([aria-disabled='true']):hover { background-color: var(--r12-pressed); }
.r12-circle-btn:not(:disabled):not([aria-disabled='true']):active { transform: scale(.99); }
.r12-circle-btn:disabled,
.r12-circle-btn[aria-disabled='true'] { color: var(--r12-faint); background-color: color-mix(in srgb, var(--r12-surface-3) 50%, transparent); cursor: not-allowed; }

/* 分段 */
.r12-seg {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
}

.r12-seg.is-sm { height: 28px; }

.r12-seg-item {
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-seg.is-sm .r12-seg-item { height: 24px; padding: 0 10px; font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-seg-item:not(:disabled):not([aria-disabled='true']):hover { color: var(--r12-ink); }
.r12-seg-item[aria-pressed='true'] {
  background: var(--r12-seg-selected-bg);
  color: var(--r12-ink);
  font-weight: 600;
  box-shadow: var(--r12-selected-shadow, none);
}
.r12-seg-item:disabled,
.r12-seg-item[aria-disabled='true'] { color: var(--r12-faint); cursor: not-allowed; }

/* 开关：轨道 32×18、圆球 14、四边各留 2 */
.r12-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  box-shadow: inset 0 0 0 1px var(--r12-line-strong);
  transition: background-color var(--r12-dur-3) var(--r12-ease), box-shadow var(--r12-dur-3) var(--r12-ease);
}

.r12-switch-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--r12-muted);
  transition: transform var(--r12-dur-3) var(--r12-spring), background-color var(--r12-dur-3) var(--r12-ease);
}

.r12-switch[aria-checked='true'] {
  background: var(--r12-ink);
  box-shadow: none;
}

.r12-switch[aria-checked='true'] .r12-switch-knob {
  background: var(--r12-bg);
  transform: translateX(14px);
}

.r12-switch[aria-disabled='true'],
.r12-switch:disabled { opacity: .45; cursor: not-allowed; }

/* 步骤条：圆 22 + 标题 + 小字，连接线两端各留 8、对齐圆心 */
.r12-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  /* 永不超出容器：放不下时靠下面的收缩规则和小字回退处理，最后再用 clip 兜底 */
  overflow-x: clip;
  overflow-y: visible;
  container-type: inline-size;
}

.r12-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
  flex: 0 1 auto;
  min-width: 0;
}

.r12-step-dot {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--r12-line-strong);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 600;
}

.r12-step-dot svg { width: 14px; height: 14px; }

.r12-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.r12-step-text b {
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12-step-text small {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 容器放不下时先藏小字，只剩圆圈加标题（标题始终不折行） */
@container (max-width: 560px) {
  .r12-step-text small { display: none; }
}

.r12-step.is-done .r12-step-dot,
.r12-step.is-current .r12-step-dot {
  border-color: transparent;
  background: var(--r12-ink);
  color: var(--r12-bg);
}

.r12-step.is-todo { color: var(--r12-muted); }
.r12-step.is-todo .r12-step-dot { color: var(--r12-muted); }
.r12-step[aria-disabled='true'] .r12-step-text b { color: var(--r12-faint); }
.r12-step[aria-disabled='true'] { cursor: not-allowed; }

.r12-step-line {
  flex: 1 1 16px;
  height: 1px;
  min-width: 16px;
  margin: 0 8px;
  background: var(--r12-line-strong);
}

.r12-step-line.is-done { background: var(--r12-ink); }

/* ── 4. 弹层菜单 ─────────────────────────────────────────────── */

.r12-menu {
  position: fixed;
  z-index: 12000;
  /* 传进来的 width 就是外框宽：box-sizing 定死成 border-box，内边距和边框都算在里面 */
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pop);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top left;
}

.r12-menu.is-below { animation: r12-menu-in-below var(--r12-dur-3) var(--r12-ease-enter); }
.r12-menu.is-above { animation: r12-menu-in-above var(--r12-dur-3) var(--r12-ease-enter); transform-origin: bottom left; }
.r12-menu.is-closing { animation: r12-menu-out var(--r12-dur-2) var(--r12-ease-exit) forwards; }

.r12-submenu { z-index: 12001; }

.r12-menu-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-body);
  line-height: var(--r12-lh-body);
  font-weight: 400;
  text-align: left;
  transition: background-color var(--r12-dur-2) var(--r12-ease);
}

.r12-menu-item:has(small) {
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.r12-menu-item > svg { width: 16px; height: 16px; color: var(--r12-muted); }
.r12-menu-item:hover,
.r12-menu-item:focus-visible { background: var(--r12-hover); }
.r12-menu-item:focus-visible { outline: none; }
.r12-menu-item[aria-checked='true'] {
  background: var(--r12-selected-bg);
  color: var(--r12-ink);
  font-weight: 600;
  outline: none;
}
.r12-menu-item[aria-checked='true']:focus-visible { background: var(--r12-selected-bg); }
/* 鼠标打开时焦点照给，但不显示焦点底色；按方向键后再显示 */
.r12-menu[data-r12-pointer-open] .r12-menu-item:focus-visible { background: transparent; }
.r12-menu[data-r12-pointer-open] .r12-menu-item[aria-checked='true']:focus-visible { background: var(--r12-selected-bg); }
/* 选中项只留一枚右侧对勾；旧菜单自带的尾部对勾先藏掉，避免两枚 */
.r12-menu-item[aria-checked='true'] .r12-menu-tail { display: none; }
.r12-menu-item[aria-checked='true']::after {
  content: '✓';
  margin-left: auto;
  color: var(--r12-muted);
  font-size: 14px;
  line-height: 1;
}
.r12-menu-item:disabled,
.r12-menu-item[aria-disabled='true'] { color: var(--r12-faint); cursor: not-allowed; }

.r12-menu-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.r12-menu-text b {
  font-size: var(--r12-fs-body);
  line-height: var(--r12-lh-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12-menu-text small {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 400;
  color: var(--r12-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r12-menu-tail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
}

.r12-menu-tail svg { width: 16px; height: 16px; }
.r12-menu-item[aria-checked='true'] .r12-menu-text b { font-weight: 600; }

/* ── 5. 弹窗 ─────────────────────────────────────────────────── */

/* 遮罩从顶栏底边开始：顶栏不压暗、照样能点；详情弹窗只在顶栏以下居中 */
.r12-dialog-backdrop {
  position: fixed;
  inset: var(--r12-topbar-h) 0 0 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: 8px 24px;
  background: var(--r12-scrim);
  animation: r12-fade-in var(--r12-dur-3) var(--r12-ease);
}

.r12-dialog {
  width: var(--r12-dialog-w, 560px);
  max-width: calc(100vw - 48px);
  /* 最高 = 窗口高 − 顶栏高 − 16（上下各留 8） */
  max-height: calc(100vh - var(--r12-topbar-h) - 16px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--r12-line-strong);
  border-radius: var(--r12-r-dialog);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-dialog);
  color: var(--r12-ink);
  animation: r12-dialog-in var(--r12-dur-4) var(--r12-ease-enter);
}

.r12-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 20px 12px;
}

.r12-dialog-head h2 {
  flex: 1;
  min-width: 0;
  font-size: var(--r12-fs-title);
  line-height: var(--r12-lh-title);
  font-weight: 600;
}

.r12-dialog-head .r12-icon-btn { margin: -4px -4px 0 0; }

.r12-dialog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-muted);
}

.r12-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 20px;
}

.r12-dialog-foot[hidden] { display: none; }

/* 紧凑确认框（五稿一·4）：宽度随内容在 360–480 之间自适，内边距 20；
   正文 text-wrap: pretty，不许一个单字落到第二行；只有一行字时整个弹窗 ≤140 高 */
.r12-dialog.is-confirm {
  width: fit-content;
  min-width: 360px;
  max-width: 480px;
}

.r12-dialog.is-confirm .r12-dialog-head { padding-bottom: 8px; }
.r12-dialog.is-confirm .r12-dialog-body { text-wrap: pretty; }
.r12-dialog.is-confirm .r12-dialog-foot { padding-top: 12px; }

/* ── 6. 轻提示、页面提示、看大图 ─────────────────────────────── */

.r12-tip {
  position: fixed;
  z-index: 14000;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--r12-ink);
  color: var(--r12-bg);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 500;
  pointer-events: none;
  animation: r12-tip-in var(--r12-dur-3) var(--r12-ease-enter);
}

.r12-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--r12-ink);
  transform: rotate(45deg);
  border-radius: 2px;
}

.r12-tip[data-side='bottom']::after {
  top: -4px;
  bottom: auto;
}

.r12-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 14000;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 8px 14px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-pop-bg);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  box-shadow: var(--r12-shadow-pop);
  animation: r12-toast-in var(--r12-dur-3) var(--r12-ease-enter);
}

.r12-lightbox {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.86);
  animation: r12-fade-in var(--r12-dur-3) var(--r12-ease);
}

/* 大图卡：图片铺满可用区域，信息栏排在图片下面，跟图片同宽（九稿 68） */
.r12-lightbox-card {
  position: relative;
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r12-r-dialog);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-dialog);
  overflow: hidden;
  animation: r12-dialog-in var(--r12-dur-4) var(--r12-ease-enter);
}

.r12-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  margin: 12px 12px 0;
  border-radius: var(--r12-r-card);
  background: #101114;
  overflow: hidden;
}

.r12-lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 信息栏：图片下方的一条，最多两行；底色跟图片同宽，用半透明玻璃 */
.r12-lightbox-info {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  max-height: 60px;
  margin: 10px 12px 12px;
  padding: 7px 14px;
  border: 1px solid var(--r12-glass-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-glass-bg);
  -webkit-backdrop-filter: var(--r12-glass-blur);
  backdrop-filter: var(--r12-glass-blur);
  box-shadow: var(--r12-glass-shadow);
  box-sizing: border-box;
  overflow: hidden;
}

.r12-lightbox-text {
  flex: 1;
  min-width: 0;
  max-height: 44px;
  overflow: hidden;
}

.r12-lightbox-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
}

.r12-lightbox-text b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-title);
  line-height: var(--r12-lh-title);
  font-weight: 600;
  color: var(--r12-ink);
}
.r12-lightbox-text .r12-lightbox-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-muted);
}
.r12-lightbox-extra {
  height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-muted);
}
.r12-lightbox-extra .r12-chip { margin-right: 4px; }
.r12-lightbox-actions { flex: none; display: flex; align-items: center; gap: 8px; }

.r12-lightbox-count {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--r12-r-pill);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.r12-lightbox-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.r12-lightbox-nav { position: absolute; top: 50%; margin-top: -14px; z-index: 2; }
.r12-lightbox-nav.is-prev { left: 16px; }
.r12-lightbox-nav.is-next { right: 16px; }
.r12-lightbox-nav[hidden] { display: none; }

/* ── 7. 卡片、面板、表单、表格、空状态 ───────────────────────── */

.r12-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-2);
  color: var(--r12-ink);
  text-align: left;
  transition: border-color var(--r12-dur-2) var(--r12-ease), box-shadow var(--r12-dur-2) var(--r12-ease);
}

.r12-card:hover,
.r12-card.is-hover { border-color: var(--r12-line-strong); }
.r12-card:focus-visible { outline: 2px solid var(--r12-ink); outline-offset: 2px; }

.r12-card[aria-pressed='true'],
.r12-card.is-selected,
.r12-card[aria-selected='true'] {
  border-color: var(--r12-selected-border);
  box-shadow: 0 0 0 1px var(--r12-selected-border);
}

.r12-card-media {
  position: relative;
  /* 不许被压缩：卡片被放进固定高度的行/网格时，缩略图要保住宽高比，不能被压成 0 高 */
  flex: none;
  border-radius: var(--r12-r-media);
  overflow: hidden;
  background: var(--r12-surface-3);
  aspect-ratio: 4 / 3;
}

.r12-card-media.is-scene { aspect-ratio: 16 / 9; }
.r12-card-media.is-square { aspect-ratio: 1 / 1; }

/* AI 生成标识：盖在生成的图片、视频左上角，距左、上各 8；媒体宽 < 160 时不盖（脚本按重绘算一次） */
.r12-ai-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--r12-fs-small);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* 对话里主控名字旁的 AI 小标记：10/14、1px 描边、透明底、不用品牌色 */
.r12-ai-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 14px;
  padding: 0 4px;
  margin-left: 4px;
  border: 1px solid var(--r12-line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--r12-muted);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

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

.r12-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0 0 4px;
}

.r12-card-name { font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); font-weight: 600; }
.r12-card-meta { font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-muted); }

.r12-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--r12-ink);
  color: var(--r12-bg);
}

.r12-check svg { width: 12px; height: 12px; }

.r12-card[aria-pressed='true'] .r12-check,
.r12-card.is-selected .r12-check,
.r12-card[aria-selected='true'] .r12-check { display: grid; }

.r12-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-panel);
  background: var(--r12-surface);
}

.r12-panel-head {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex: none;
}

.r12-panel-head h2,
.r12-panel-head h3 {
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  color: var(--r12-ink);
  white-space: nowrap;
}

/* 标题后面跟数量：12/18 弱色 */
.r12-panel-count {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 400;
  color: var(--r12-muted);
  font-variant-numeric: tabular-nums;
}

.r12-panel-head > :last-child:not(h2):not(h3) { margin-left: auto; }

.r12-panel-head .r12-icon-btn { opacity: 0; transition: opacity var(--r12-dur-2) var(--r12-ease); }
.r12-panel:hover .r12-panel-head .r12-icon-btn,
.r12-panel:focus-within .r12-panel-head .r12-icon-btn { opacity: 1; }

.r12-panel-body { padding: 0 12px 12px; }

/* 面板收起 / 展开钮：都是 28 正圆，用左右箭头表示方向（收起：「←」左 / 「→」右；展开反过来）。
   收起后的展开钮贴着原面板那条边：距顶 8、距边 8，宿主容器要 position: relative */
.r12-panel-toggle svg { width: 16px; height: 16px; }

.r12-panel-reopen {
  position: absolute;
  top: 8px;
  z-index: 2;
}

.r12-panel-reopen[data-side='left'] { left: 8px; }
.r12-panel-reopen[data-side='right'] { right: 8px; }

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

.r12-field > span {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
}

.r12-input,
.r12-select {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  text-align: left;
}

.r12-input::placeholder { color: var(--r12-faint); }
.r12-input:focus-visible,
.r12-select:focus-visible { outline: 2px solid var(--r12-selected-border); outline-offset: -1px; }

.r12-select { justify-content: space-between; }
.r12-select svg { width: 16px; height: 16px; color: var(--r12-muted); }
.r12-select:hover { border-color: var(--r12-line-strong); }

.r12-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.r12-row > .r12-seg { flex: none; }

.r12-chip {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 500;
  white-space: nowrap;
}

.r12-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
}

.r12-table th {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--r12-line);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.r12-table td {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--r12-line);
  color: var(--r12-ink);
  white-space: nowrap;
}

.r12-table tr:last-child td { border-bottom: 0; }
.r12-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.r12-table th.is-num { text-align: right; }

/* 列表行：白面板上的选中行用 --r12-selected-bg（浅色是淡灰，不能是白） */
.r12-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 8px;
}

.r12-list-item {
  min-width: 0;
  min-height: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r12-r-control);
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  text-align: left;
  transition: background-color var(--r12-dur-2) var(--r12-ease);
}

.r12-list-item:hover { background: var(--r12-hover); }

.r12-list-item[aria-current='true'],
.r12-list-item[aria-current='page'],
.r12-list-item[aria-selected='true'] {
  background: var(--r12-selected-bg);
  color: var(--r12-ink);
  font-weight: 600;
}

/* ── 可改文字、可拉高的文本框、能放大的图、模式分段 ─────────── */

/* 可改文字：悬停浅底、点进去焦点环；内边距与负外边距等量，悬停/编辑前后文字位置一个像素都不动 */
.r12-editable {
  display: block;
  white-space: pre-wrap;
  margin: -3px -6px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: text;
  caret-color: var(--r12-ink);
  outline: none;
  overflow-wrap: anywhere;
  transition: background-color var(--r12-dur-2) var(--r12-ease), border-color var(--r12-dur-2) var(--r12-ease);
}

.r12-editable:hover { background: var(--r12-hover); }

.r12-editable:focus,
.r12-editable:focus-visible {
  background: var(--r12-surface-3);
  border-color: var(--r12-selected-border);
  outline: none;
}

.r12-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--r12-faint);
}

/* 全站去掉浏览器自带的拉伸角；要能拉高用 .r12-textarea 的圆弧把手 */
textarea { resize: none !important; } /* 盖老规则：r10 的 .pro-prompt textarea 写死了 resize: vertical，全站统一去掉浏览器拉伸角 */

.r12-textarea {
  position: relative;
  display: block;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-3);
  transition: border-color var(--r12-dur-2) var(--r12-ease);
}

.r12-textarea:focus-within { border-color: var(--r12-selected-border); }

.r12-textarea textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--r12-ink);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  outline: none;
  overflow-y: auto;
}

.r12-textarea textarea::placeholder { color: var(--r12-faint); }

/* 右下角四分之一圆弧把手：半径 = 外框圆角 − 3，线宽 1.5 */
.r12-textarea-grip {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--r12-faint);
  border-bottom: 1.5px solid var(--r12-faint);
  border-bottom-right-radius: 7px;
  cursor: ns-resize;
  touch-action: none;
}

.r12-textarea-grip:hover { border-color: var(--r12-muted); }

/* 能放大的图：只加 .r12-zoomable 这一个类就生效，放大镜是伪元素 */
.r12-zoomable { position: relative; cursor: zoom-in; }
.r12-zoomable > img { display: block; }

.r12-zoomable::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.45);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M7 10l6 0'/%3E%3Cpath d='M10 7l0 6'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--r12-dur-2) var(--r12-ease);
  pointer-events: none;
}

.r12-zoomable:hover::after { opacity: 1; }

/* 模式分段（全能 / 分模、自动 / 专家）：选中项反色 */
.r12-mode-seg {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
}

.r12-mode-seg-item {
  min-width: 0;
  min-height: 0;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-mode-seg-item svg { width: 16px; height: 16px; }
.r12-mode-seg-item:not([aria-pressed='true']):hover { background: var(--r12-hover); color: var(--r12-ink); }
.r12-mode-seg-item[aria-pressed='true'] {
  background: var(--r12-ink);
  color: var(--r12-bg);
  font-weight: 600;
}

.r12-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--r12-muted);
  text-align: center;
}

.r12-empty svg { width: 24px; height: 24px; color: var(--r12-faint); }
.r12-empty strong { font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); font-weight: 500; color: var(--r12-ink); }

/* 状态记号 */
.r12-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  font-size: var(--r12-fs-ui);
  line-height: 16px;
}

.r12-status svg { width: 16px; height: 16px; }
.r12-status.is-done { color: var(--r12-ok); }
.r12-status.is-review { color: var(--r12-review); }
.r12-status.is-running { color: var(--r12-running); }
.r12-status.is-failed { color: var(--r12-error); }
.r12-status.is-todo { color: var(--r12-faint); }
.r12-status.is-disabled { color: var(--r12-faint); }

.r12-status.is-running i {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: r12-spin 720ms linear infinite;
}

/* 细滚动条 */
.r12-scroll { scrollbar-width: thin; scrollbar-color: var(--r12-line-strong) transparent; }
.r12-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.r12-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r12-r-pill); }
.r12-scroll:hover::-webkit-scrollbar-thumb { background: var(--r12-line-strong); }
.r12-scroll::-webkit-scrollbar-track { background: transparent; }

/* 老的悬停提示改由本轮的统一提示接管 */
.r11-tip { display: none; }

/* ── 8. 「组件规范」页 ──────────────────────────────────────── */

.r12-kit {
  height: 100%;
  overflow-y: auto;
  /* 四边留白由外壳给（.stage），本页不再自带外边距 */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 10px;
  align-items: start;
}

/* 步骤条演示要一整行宽；窄容器那条固定 360，用来看缩起来的样子 */
.r12-kit-wide { grid-column: 1 / -1; }

.r12-kit-narrow {
  width: 360px;
  max-width: 100%;
  padding: 10px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
}

/* 右侧栏主控宽度演示 */
.r12-kit-side {
  width: var(--r12-side-w);
  max-width: 100%;
  padding: 12px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

/* 图标墙：9 个模型图标 + 25 个功能图标 */
.r12-kit-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.r12-kit-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  color: var(--r12-ink);
}

.r12-kit-icon svg { width: 20px; height: 20px; flex: none; }
.r12-kit-icon span { font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AI 标识演示用的媒体框 */
.r12-kit-media {
  position: relative;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r12-r-media);
  overflow: hidden;
  background: var(--r12-surface-3);
}

.r12-kit-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r12-kit-media.is-small { width: 120px; }

/* 顶栏中间插槽的演示 */
.r12-kit-center {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-pill);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
}

/* 面板收起 / 展开演示：左边是打开的面板（右上角收起钮），右边是收起后只剩展开钮的内容区 */
.r12-kit-panelrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.r12-kit-paneldemo {
  position: relative;
  width: 200px;
  height: 72px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
}

.r12-kit-panelstage {
  position: relative;
  width: 200px;
  height: 72px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
}

/* 默认（向左展开）的搜索：照真实用法摆在一条工具行的最右端，左边留够 220 */
.r12-kit-searchrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 360px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
}

/* 向右展开的搜索：这一行本身就是边界；标题在展开时让位，筛选按钮保留 */
.r12-kit-searchbound {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 420px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
}

.r12-kit-searchtitle {
  flex: 1;
  min-width: 0;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 毛玻璃演示 */
.r12-kit-glass {
  width: 320px;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: var(--r12-r-panel);
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
}

/* 能放大的图演示 */
.r12-kit-zoom {
  width: 320px;
  max-width: 100%;
  border-radius: var(--r12-r-card);
  overflow: hidden;
}

.r12-kit-zoom img { width: 100%; height: auto; }

/* 固定高 240 的可滚动卡片网格：缩略图不许被压扁 */
.r12-kit-scrollgrid {
  height: 240px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
}

.r12-kit-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r12-kit-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r12-kit-label {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
}

.r12-kit-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.r12-kit-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.r12-kit-hosts {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 8px 16px;
  min-height: 120px;
}

.r12-kit-host {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.r12-kit-host.is-dock { align-self: flex-end; }
.r12-kit-host.is-side { margin-left: auto; padding-right: 24px; }

.r12-kit-note {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
}

/* ── 8.5 生成过程：过程条、生成中占位、视频播放控件 ─────────────── */

/* 过程条：running 是转动的图标 + 标题 + 步骤行；done / stopped 收成一行，点开看全过程。
   展开、收起只切 data-open 和 aria-expanded，不重画整页。 */
.r12-process {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--r12-ink);
}

.r12-process-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r12-r-control);
}

.r12-process-title {
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* done / stopped 的那一行是 12/18 弱色 */
.r12-process[data-state='done'] .r12-process-title,
.r12-process[data-state='stopped'] .r12-process-title {
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-weight: 400;
  color: var(--r12-muted);
}

/* › 展开时转 90°，160ms */
.r12-process-chev {
  display: inline-flex;
  margin-left: 2px;
  color: var(--r12-faint);
  transition: transform var(--r12-dur-3) var(--r12-ease);
}

.r12-process-chev svg { width: 14px; height: 14px; }

/* 展开：根上有 data-open 或 is-open 都认（乙的开关只写 is-open + body.hidden） */
.r12-process[data-open] .r12-process-chev,
.r12-process.is-open .r12-process-chev { transform: rotate(90deg); }

/* 步骤一直就在 DOM 里，收起只是 hidden；
   不靠 data-open 控显隐，避免两套开关写法对不上 */
.r12-process-body { display: block; }
.r12-process-body[hidden] { display: none; }

.r12-process-thought {
  margin: 0 0 6px;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-muted);
}

.r12-process-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r12-process-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
}

.r12-process-step[data-step-state='running'] { color: var(--r12-ink); }

.r12-process-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
}

.r12-process-step-icon svg { width: 14px; height: 14px; }

/* 正在做的那一步：图标换成 14 的转圈，用强调色 */
.r12-process-step[data-step-state='running'] .r12-process-step-icon { color: var(--r12-accent); }

/* 进行中的转动图标：16 的圈，强调色，1.2 秒一圈；减少动态效果时不转（见文末） */
.r12-process-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--r12-accent);
}

.r12-spin {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--r12-accent) 30%, transparent);
  border-top-color: var(--r12-accent);
  animation: r12-spin 1.2s linear infinite;
}

.r12-process-lead .r12-spin { width: 16px; height: 16px; }

/* 生成中的占位：按成片比例画，底色是三色模糊渐变、6 秒往返流动；左上角进度角标；悬停 300ms 出提示词卡 */
.r12-gen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--r12-gen-ratio, 16 / 9);
  /* 提示词卡要弹到占位上边，所以这里不裁切；圆角交给里面的底层 */
  overflow: visible;
}

.r12-gen-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--r12-r-card);
  overflow: hidden;
  background-image: linear-gradient(135deg, #34405E, #5C5470, #2B5566);
  background-size: 200% 200%;
  animation: r12-gen-flow 6s ease-in-out infinite alternate;
}

:root[data-mode='light'] .r12-gen-fill {
  background-image: linear-gradient(135deg, #CDD6E8, #DDD3E3, #C7DDE4);
}

.r12-gen-pct {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--r12-fs-small);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 提示词卡：占位上方 8，宽 400、圆角 12、内边距 12；悬停 300ms 才出来，鼠标移开就收 */
.r12-gen-card {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--r12-dur-3) var(--r12-ease), visibility 0s var(--r12-dur-3);
}

.r12-gen:hover .r12-gen-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--r12-dur-3) var(--r12-ease) .3s, visibility 0s .3s;
}

.r12-gen-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.r12-gen-card-title {
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12-gen-prompt {
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  color: var(--r12-ink);
}

.r12-gen-meta {
  margin: 6px 0 0;
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  color: var(--r12-muted);
}

/* 视频播放控件：鼠标停在视频上才出现。左下播放/暂停 + 时间，底边 2 高进度线，右下全屏；
   控件下面衬 48 高暗色渐变，保证白字看得清。画面里没有下载、收藏、更多。 */
.r12-video {
  position: relative;
  overflow: hidden;
  border-radius: var(--r12-r-card);
  background: #000;
}

.r12-video > img,
.r12-video > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* 时长角标：不悬停时在左下角常驻，样式同 .r12-ai-badge；悬停出播放控件时它消失 */
.r12-vctl-dur {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--r12-fs-small);
  line-height: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--r12-dur-2) var(--r12-ease);
}

.r12-video:hover .r12-vctl-dur,
.r12-video:focus-within .r12-vctl-dur,
.r12-vctl-layer.is-hover .r12-vctl-dur,
.r12-vctl-layer:focus-within .r12-vctl-dur {
  opacity: 0;
  visibility: hidden;
}

/* 控件自带的外层：铺满整个媒体，自己不挡点击（pointer-events: none）。
   悬停显示认三处：外面是 .r12-video（老接法）、这层被脚本打上 is-hover（新接法，只要父级 position: relative 就生效）、
   以及键盘焦点在控件里。 */
.r12-vctl-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 用透明度藏，不用 visibility：按钮始终在布局里、可被指针找到，
   悬停后由外层把 pointer-events 打开；不悬停时点不到，也不会挡住画面。 */
.r12-vctl {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--r12-dur-3) var(--r12-ease);
}

.r12-video:hover .r12-vctl,
.r12-video:focus-within .r12-vctl,
.r12-vctl-layer.is-hover .r12-vctl,
.r12-vctl-layer:focus-within .r12-vctl {
  opacity: 1;
  pointer-events: auto;
}

.r12-vctl-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events: none;
}

.r12-vctl-play,
.r12-vctl-full {
  position: absolute;
  bottom: 10px;
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  /* 走外层 .r12-vctl 的 pointer-events：不悬停时整块点不到，悬停后才有 */
}

.r12-vctl-play { left: 10px; }
.r12-vctl-full { right: 10px; }

.r12-vctl-play svg,
.r12-vctl-full svg { width: 16px; height: 16px; }

.r12-vctl-time {
  position: absolute;
  left: 46px;
  bottom: 10px;
  height: 28px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 底边 2 高的进度线：85% 白 */
.r12-vctl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.25);
  pointer-events: none;
}

.r12-vctl-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255,255,255,.85);
  transform-origin: left center;
  transform: scaleX(0);
}

.r12-vctl.is-playing .r12-vctl-fill {
  animation: r12-vctl-progress var(--r12-vctl-dur, 5s) linear forwards;
}

.r12-vctl.is-paused .r12-vctl-fill { animation-play-state: paused; }

/* ── 上传规则（五稿上传规则补充）：拖放提示、附件条、弹窗正文 ───────── */

/* 拖到能放的目标上：1px 虚线框，颜色用强调色 */
.r12-drop-target {
  outline: 1px dashed var(--r12-accent);
  outline-offset: 2px;
}

/* 拖动时目标上方那一行「松手上传 · …」：只改位置和文字，不跟着每次 dragover 重排 */
.r12-drop-hint {
  position: fixed;
  z-index: 12000;
  padding: 6px 10px;
  border: 1px solid var(--r12-line-strong);
  border-radius: var(--r12-r-control);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  color: var(--r12-ink);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* 拖到页面别处：主控上方一行提醒，2 秒后消失 */
.r12-drop-warn {
  position: fixed;
  z-index: 12000;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid var(--r12-line-strong);
  border-radius: var(--r12-r-pill);
  background: var(--r12-pop-bg);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
  pointer-events: none;
}

.r12-drop-warn[hidden] { display: none; }

/* 附件条：类型图标、文件名、大小、移除 ×，右边「3/6」计数 */
.r12-attach-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.r12-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-width: 0;
  padding: 0 4px 0 8px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

.r12-attach svg { width: 14px; height: 14px; flex: none; color: var(--r12-muted); }
.r12-attach-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r12-attach-size { color: var(--r12-muted); font-variant-numeric: tabular-nums; }

.r12-attach-x {
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--r12-muted);
  cursor: pointer;
}

.r12-attach-x svg { width: 12px; height: 12px; color: inherit; }
.r12-attach-x:hover { background: var(--r12-hover); color: var(--r12-ink); }

.r12-attach-count {
  margin-left: auto;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
}

/* 不合格文件弹窗的正文 */
.r12-file-note-list { display: flex; flex-direction: column; gap: 4px; }
.r12-file-note-item { color: var(--r12-ink); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-file-note-rules { margin: 10px 0 0; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }

/* 规范页「拖到这里试试」 */
.r12-kit-drop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px dashed var(--r12-line-strong);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12-kit-drop-hint { color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }

/* 七稿：强调色色块 */
.r12-kit-swatch {
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--r12-line-strong);
  border-radius: 50%;
}

/* 规范页演示用的尺寸 */
.r12-kit-gen { width: 320px; max-width: 100%; }
.r12-kit-video { width: 320px; max-width: 100%; aspect-ratio: 16 / 9; }

/* ── 8.6 通知（六稿第七节）──────────────────────────────────── */

.r12-notify-bell { position: relative; }

/* 有未读时右上角一个小红点，不写数字；不用粉色、不占用强调色的四处用途 */
.r12-notify-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r12-dot-red);
  display: none;
}

[data-r12-notify-bell][data-unread] .r12-notify-dot { display: block; }

.r12-notice-panel { display: flex; flex-direction: column; min-width: 0; }

.r12-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
}

.r12-notice-head b {
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  color: var(--r12-ink);
}

.r12-notice-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}

.r12-notice-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r12-r-control);
}

.r12-notice-row:hover { background: var(--r12-hover); }
/* 未读只用底色和红点区分，不改变内边距，图标和标题与已读行左边对齐 */
.r12-notice-row.is-unread { background: var(--r12-selected-bg); }

/* 未读：左边一个小圆点 + 标题加粗 */
.r12-notice-row.is-unread::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--r12-dot-red);
}

.r12-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--r12-surface-3);
}

.r12-notice-icon svg { width: 16px; height: 16px; }

/* 图标颜色按 kind 走现有状态色 */
.r12-notice-icon[data-kind='decision'] { color: var(--r12-review); }
.r12-notice-icon[data-kind='done'] { color: var(--r12-ok); }
.r12-notice-icon[data-kind='failed'] { color: var(--r12-error); }
.r12-notice-icon[data-kind='budget'] { color: var(--r12-running); }

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

.r12-notice-title { font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); color: var(--r12-ink); }
.r12-notice-row.is-unread .r12-notice-title { font-weight: 600; }
.r12-notice-body { font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-muted); }
.r12-notice-time { font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-faint); }

.r12-notice-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--r12-line);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

/* 通知提示放右上角：顶栏下面留 8、贴着铃铛这一侧往下叠，最多 3 条。
   放右下会盖住项目底部条的发送键和首页〔看方案〕，所以不用右下角。 */
.r12-notice-stack {
  position: fixed;
  right: 16px;
  top: calc(var(--r12-topbar-h) + 8px);
  bottom: auto;
  z-index: 12500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.r12-notice-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  border: 1px solid var(--r12-line-strong);
  border-radius: var(--r12-r-card);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  color: var(--r12-ink);
  pointer-events: auto;
  animation: r12-fade-in var(--r12-dur-3) var(--r12-ease);
}

.r12-notice-toast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r12-notice-toast-main b { font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); font-weight: 600; }
.r12-notice-toast-main span { font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-muted); }
.r12-notice-toast.is-static { animation: none; }

.r12-notice-demo {
  width: 360px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pop);
  background: var(--r12-pop-bg);
}

/* ── 8.7 七稿第一单：用户强调色落点、发送键、确认层、锚定面板、免责 ── */

/* 开关打开态跟着用户强调色走（粉色不动） */
.r12-switch[aria-checked='true'] { background: var(--r12-accent-user); }

/* 发送键三种状态：28 正圆，里面白色 arrowUp；空输入灰，能发强调色，生成中变停止方块 */
.r12-send2 {
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-send2.is-ready { background: var(--r12-accent-user); color: #fff; }
.r12-send2.is-running { background: var(--r12-ink); color: var(--r12-bg); }
.r12-send2 svg { width: 16px; height: 16px; }
.r12-send2-stop { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }

/* 花钱前的确认层：贴着按钮，宽 360；总价只写在确认按钮上 */
/* 七稿 43：确认小卡只淡入、不做缩放进场。缩放 .985 会让看得见的右边比按钮短 5px，
   右对齐时量不准；宽度本身已经按 360 定位 */
.r12-menu.r12-cpop-menu { animation: r12-fade-in var(--r12-dur-3) var(--r12-ease); transform-origin: top left; }
.r12-cpop { display: flex; flex-direction: column; gap: 10px; }
.r12-cpop-title { font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-weight: 600; color: var(--r12-ink); }
.r12-cpop-list { display: flex; flex-direction: column; gap: 6px; }
.r12-cpop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); color: var(--r12-muted); }
.r12-cpop-row b { color: var(--r12-ink); font-weight: 500; }
/* 一句话的 row：整句占一行，不拆成左右两半 */
.r12-cpop-line { color: var(--r12-ink); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-cpop-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* 锚定面板：贴着按钮展开的大一点的面板 */
.r12-anchor-panel { padding: 12px; }

/* 免责一行：12 号字、18 行高、灰色 */
.r12-disclaimer {
  margin: 6px 0 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: 18px;
  text-align: center;
}

/* 七稿 0.6：不用下划线链接 */
.r12-link,
.r12-link:hover,
.r12-link:focus,
a.r12-btn,
a.r12-btn:hover { text-decoration: none; }

/* ── 9. 动效 ─────────────────────────────────────────────────── */

@keyframes r12-menu-in-below {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes r12-menu-in-above {
  from { opacity: 0; transform: translateY(4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes r12-menu-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.985); }
}

@keyframes r12-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── 10. 七稿第二单：左下角、帮助、团队、新开一页、通知红点 ─────── */

/* 样稿开关缩成左下角最底边的一条细条：只在样稿里有，不占三个图标的位置。
   条固定后不再占文档流，外壳高度改成整屏。 */
.prototype-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 900;
  width: 56px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
}

.prototype-launcher {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 6px 0 0;
  background: var(--r12-surface-3);
  color: var(--r12-faint);
  font-size: var(--r12-fs-small);
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .72;
}

.prototype-launcher:hover {
  opacity: 1;
  color: var(--r12-muted);
  background: var(--r12-surface-2);
}

/* 展开的样稿面板从细条上方弹出，内部可滚 */
.prototype-bar .prototype-panel {
  position: fixed;
  left: 8px;
  bottom: 20px;
  z-index: 901;
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

.app-shell { height: 100dvh; }

/* 导航栏底部给细条让出 14，三个图标在细条上面 */
#rail { padding-bottom: 24px; }

.r12-rail-spacer { flex: 1; min-height: 8px; }

.r12-rail-tool {
  width: 48px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--r12-muted);
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-rail-tool svg { width: 20px; height: 20px; }
.r12-rail-tool:hover { background: var(--r12-hover); color: var(--r12-ink); }
.r12-rail-tool.is-disabled { color: var(--r12-faint); opacity: .6; cursor: not-allowed; }
.r12-rail-tool.is-disabled:hover { background: transparent; color: var(--r12-faint); }

/* 新开一页：胶囊按钮（不是正圆），browserPlus 右边带一个小 ∨ */
.r12-pill-btn {
  height: 28px;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 7px 0 9px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  transition: background-color var(--r12-dur-2) var(--r12-ease), color var(--r12-dur-2) var(--r12-ease);
}

.r12-pill-btn:hover { background: var(--r12-hover); color: var(--r12-ink); }

.r12-new-page {
  width: auto;
  min-width: 0;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.r12-new-page svg { width: 20px; height: 20px; }
.r12-new-page-caret { display: inline-flex; margin-left: -3px; color: var(--r12-muted); }
.r12-new-page-caret svg { width: 12px; height: 12px; }

/* 团队色积分胶囊 + 紧跟着的个人小胶囊 */
.r12-credit-wrap { position: relative; display: inline-flex; }

.r12-credit-pill.is-team {
  background: color-mix(in srgb, var(--team-color) 18%, var(--r12-surface-3));
  color: var(--r12-ink);
}

.r12-credit-pill.is-team svg { color: var(--team-color); }

/* 「个人」那一行默认藏在胶囊旁边；打开下拉时移进面板里才显示 */
.r12-credit-pill.is-personal {
  display: none;
  position: static;
  width: 100%;
  justify-content: space-between;
  background: var(--r12-surface-3);
  border: 0;
  box-shadow: none;
}

.r12-credit-pill.is-personal b { font-weight: 600; font-variant-numeric: tabular-nums; }
.r12-credit-pill.is-personal svg { color: currentColor; }
/* 规范页那个旧的静态样例仍用 is-open */
.r12-credit-wrap.is-open .r12-credit-pill.is-personal,
.r12-credit-menu .r12-credit-pill.is-personal { display: inline-flex; }

/* 团队余额下拉：两层余额，贴着胶囊往下开 */
.r12-credit-menu { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.r12-credit-menu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.r12-credit-menu-name { color: var(--r12-ink); font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); font-weight: 600; }
.r12-credit-menu-amount { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-credit-menu-amount b { color: var(--r12-ink); font-size: var(--r12-fs-ui); font-variant-numeric: tabular-nums; }
.r12-credit-menu-note { width: 100%; text-align: right; color: var(--r12-faint); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-credit-slot { display: flex; min-width: 0; }

/* 团队面板 */
.r12-team { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.r12-team-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
}

.r12-team-tab {
  flex: 1;
  min-width: 0;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r12-r-pill);
  background: transparent;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
}

.r12-team-tab:hover { color: var(--r12-ink); }
.r12-team-tab[aria-selected='true'] { background: var(--r12-seg-selected-bg); color: var(--r12-ink); font-weight: 600; box-shadow: var(--r12-selected-shadow, none); }

.r12-team-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }

.r12-team-title { display: flex; align-items: center; gap: 8px; font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); color: var(--r12-ink); }
.r12-team-title b { font-weight: 600; }
.r12-team-view { margin-left: auto; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-team-lead { margin-top: -6px; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }

.r12-team-points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r12-r-control);
  background: color-mix(in srgb, var(--team-color, var(--r12-accent)) 14%, var(--r12-surface-2));
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

.r12-team-points b { color: var(--r12-ink); font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-variant-numeric: tabular-nums; }
.r12-team-points small { margin-left: auto; color: var(--r12-muted); }

.r12-team-section { display: flex; flex-direction: column; gap: 2px; }
.r12-team-section h4 { margin: 2px 0 2px; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); font-weight: 500; }
.r12-team-section h4 span { color: var(--r12-faint); }

.r12-team-member { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.r12-team-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; background: var(--r12-surface-3); }

/* 团队面板里的「我」一行：头像走丁的共用件 */
.r12-team-me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12-team-avatar-wrap {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--r12-surface-3);
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
}

.r12-team-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 顶栏头像：丁的 r12AvatarHtml 给的是 28 的 img；放进 28 的圆按钮里按内框裁圆 */
.account-avatar img,
.account-avatar .r12a-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.r12-team-who { display: flex; flex-direction: column; min-width: 0; line-height: var(--r12-lh-small); }
.r12-team-who b { color: var(--r12-ink); font-size: var(--r12-fs-small); font-weight: 500; }
.r12-team-who small { color: var(--r12-faint); font-size: var(--r12-fs-small); }
.r12-team-doing { margin-left: auto; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r12-muted); font-size: var(--r12-fs-small); }

.r12-team-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 34px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
}

.r12-team-project:hover { background: var(--r12-hover); }
/* 成员视角：项目只是摘要，不是按钮，不显示手形、不悬停变色 */
.r12-team-project.is-summary { cursor: default; }
.r12-team-project.is-summary:hover { background: transparent; }
.r12-team-summary-note { margin: 2px 0 4px; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-team-project-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.r12-team-project-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--r12-fs-small); font-weight: 500; }
.r12-team-project-head small { flex: none; color: var(--r12-faint); font-size: var(--r12-fs-small); }
.r12-team-bar { height: 4px; overflow: hidden; border-radius: var(--r12-r-pill); background: var(--r12-surface-3); }
.r12-team-bar i { display: block; height: 100%; border-radius: inherit; background: var(--team-color, var(--r12-accent)); }
.r12-team-pct { color: var(--r12-muted); font-size: var(--r12-fs-small); text-align: right; font-variant-numeric: tabular-nums; }

.r12-team-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--r12-line); }

.r12-team-invite { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--r12-line); border-radius: var(--r12-r-control); background: var(--r12-surface-2); }
.r12-team-invite-head { display: flex; align-items: center; justify-content: space-between; }
.r12-team-invite-head b { font-size: var(--r12-fs-ui); font-weight: 600; color: var(--r12-ink); }
.r12-team-search { display: flex; flex-direction: column; gap: 4px; color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-team-people { display: flex; flex-direction: column; gap: 2px; }
.r12-team-person { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
/* 名字占满剩余宽度，〔撤回〕〔发邀请〕贴右边，和成员行「在做」那一列对齐 */
.r12-team-person .r12-team-who { flex: 1 1 auto; }
.r12-team-person > .r12-btn { margin-left: auto; flex: none; }

/* 帮助浮层 */
.r12-help { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.r12-help-head { padding: 2px 4px 6px; color: var(--r12-ink); font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-weight: 600; }

.r12-help-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: var(--r12-r-control);
  background: transparent;
  color: var(--r12-ink);
  text-align: left;
}

.r12-help-item:hover { background: var(--r12-hover); }
.r12-help-item > svg:first-child { width: 18px; height: 18px; color: var(--r12-muted); }
.r12-help-item > svg:last-child { width: 14px; height: 14px; margin-left: auto; color: var(--r12-faint); }
.r12-help-text { display: flex; flex-direction: column; line-height: 18px; }
.r12-help-text b { font-size: var(--r12-fs-ui); font-weight: 500; }
.r12-help-text small { color: var(--r12-muted); font-size: var(--r12-fs-small); }

.r12-help-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-help-back:hover { background: var(--r12-hover); color: var(--r12-ink); }
.r12-help-back svg { width: 14px; height: 14px; }

.r12-help-rows { display: flex; flex-direction: column; gap: 2px; }
.r12-help-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--r12-line); color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-help-row b { color: var(--r12-ink); font-weight: 500; text-align: right; word-break: break-all; }
.r12-help-row.is-stack { display: block; padding: 7px 2px; }
.r12-help-row.is-stack span { display: block; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-help-row.is-stack b { display: block; margin-top: 2px; color: var(--r12-ink); font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); font-weight: 500; text-align: left; word-break: break-word; }

.r12-help-contact { display: flex; gap: 12px; align-items: flex-start; }
.r12-help-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-help-qr { width: 96px; height: 96px; padding: 6px; border-radius: 8px; background: #fff; color: #17171a; }

.r12-help-form { display: flex; flex-direction: column; gap: 10px; }
.r12-help-form .r12-field { display: flex; flex-direction: column; gap: 4px; color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-help-form textarea.r12-input { height: auto; padding: 8px 10px; resize: vertical; font-size: var(--r12-fs-ui); line-height: var(--r12-lh-ui); }
.r12-help-form-foot { display: flex; justify-content: flex-end; }

/* 帮助「使用说明」页 */
.r12-help-page { height: 100%; overflow-y: auto; padding: 8px 0; }
.r12-help-page-head { padding: 8px 4px 16px; }
.r12-help-page-head h1 { color: var(--r12-ink); font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-weight: 600; }
.r12-help-page-head p { margin-top: 4px; color: var(--r12-muted); font-size: var(--r12-fs-ui); }

/* 通知：查看全部、红点、条目里的接受/拒绝、通知页 */
.r12-notice-foot-switch { display: inline-flex; align-items: center; gap: 8px; }
.r12-notice-actions { display: inline-flex; flex: none; gap: 6px; }
.r12-notice-status { flex: none; color: var(--r12-faint); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); white-space: nowrap; }
.r12-notice-icon[data-kind='team-invite'] { color: var(--r12-accent); }

.r12-notify-page { height: 100%; max-width: 760px; margin: 0 auto; overflow-y: auto; padding: 8px 0; }
.r12-notify-page-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; }
.r12-notify-page-head h1 { color: var(--r12-ink); font-size: var(--r12-fs-title); line-height: var(--r12-lh-title); font-weight: 600; }
.r12-notice-list.is-full .r12-notice-row { padding: 12px; }

.r12-kit-notice-rows { padding: 6px; border: 1px solid var(--r12-line); border-radius: var(--r12-r-pop); background: var(--r12-pop-bg); }

/* 样稿面板里的团队视角 */
.r12-team-views { display: flex; align-items: center; gap: 4px; }
.r12-team-views button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r12-r-pill); background: var(--r12-surface-3); color: var(--r12-muted); font-size: var(--r12-fs-small); }
.r12-team-views button[aria-pressed='true'] { background: var(--r12-ink); color: var(--r12-bg); }

/* 七稿 38：第 12 轮界面的键盘焦点统一用用户强调色。老样式 styles.css / v2.css 的
   --focus 是浅粉（#e2a4b7 / #ff5c8a），只在这里覆盖，不改老文件和 --accent。 */
:root[data-g20271-chulian] { --focus: var(--r12-accent-user); }
:root[data-g20271-chulian] :focus-visible { outline-color: var(--r12-accent-user); }

/* 八稿 47：白标品牌的代码字标（初恋仍用两张图片，另外两家把图片藏起来换成这个） */
.r12-brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--r12-brand);
  color: var(--r12-on-brand);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

/* 八稿 50：经销商标志统一 28px 显示；组件规范页里的方案展示 */
.r12-brand-logo { width: 28px; height: 28px; display: block; }
.r12-brand-logo svg { display: block; width: 28px; height: 28px; }
.r12-master-logo { display: grid; place-items: center; width: 100%; height: 100%; }
.r12-master-logo svg { display: block; width: 100%; height: 100%; }
.r12-logo-group-head .r12-btn { margin-left: auto; }
.r12-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.r12-footer { margin: 8px 0 0; color: var(--r12-muted); font-size: var(--r12-fs-small); line-height: var(--r12-lh-small); }
.r12-footer a { color: var(--r12-muted); text-decoration: underline; }
.r12-footer-link { padding: 0; border: 0; background: none; color: var(--r12-muted); font: inherit; line-height: inherit; cursor: pointer; text-decoration: none; }
.r12-footer-link:hover { text-decoration: underline; }

/* 八稿 54：只有图标的按钮一律正圆；32 的图标 18，40 的图标 22 */
.r12-icon-btn.is-md { width: 32px; height: 32px; border-radius: 50%; }
.r12-icon-btn.is-md svg { width: 18px; height: 18px; }
.r12-panel-toggle { width: 32px; height: 32px; border-radius: 50%; background: transparent; }
.r12-panel-toggle svg { width: 18px; height: 18px; }
.r12-panel-reopen { position: absolute; top: 8px; }
.r12-panel-reopen[data-side='left'] { left: 8px; right: auto; }
.r12-panel-reopen[data-side='right'] { right: 8px; left: auto; }
.r12-rail-tool { width: 40px; height: 40px; border-radius: 50%; }
.r12-rail-tool svg { width: 22px; height: 22px; }

.r12-brand-logo img { width: 32px; height: 32px; object-fit: contain; display: block; }
.r12-logo-group { display: flex; flex-direction: column; gap: 8px; }
.r12-logo-group + .r12-logo-group { margin-top: 8px; }
.r12-logo-group-head { display: flex; align-items: baseline; gap: 8px; }
.r12-logo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.r12-logo-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--r12-line); border-radius: var(--r12-r-card); background: var(--r12-surface-2); }
.r12-logo-card.is-current { border-color: var(--r12-ink); }
.r12-logo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--r12-fs-small); }
.r12-logo-current { padding: 0 6px; border: 1px solid var(--r12-line-strong); border-radius: var(--r12-r-pill); color: var(--r12-ink); font-size: var(--r12-fs-small); line-height: 18px; }
.r12-logo-sizes { display: flex; align-items: flex-end; gap: 8px; min-height: 96px; }
.r12-logo-size { display: grid; place-items: center; flex: none; }
.r12-logo-size svg { display: block; width: 100%; height: 100%; }
.r12-logo-themes { display: flex; align-items: center; gap: 6px; }
.r12-logo-theme { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--r12-r-control); }
.r12-logo-theme.is-dark { background: #101214; }
.r12-logo-theme.is-light { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(17,17,26,.12); }
.r12-logo-theme svg { width: 32px; height: 32px; }
.r12-logo-lockup { display: grid; place-items: center; min-width: 0; height: 56px; padding: 0 6px; border-radius: var(--r12-r-control); background: var(--r12-surface-3); color: var(--r12-ink); }
.r12-logo-lockup svg { display: block; width: auto; max-width: 100%; height: 32px; }
.r12-logo-actions { display: flex; justify-content: flex-end; }

.r12-brand-views { display: flex; align-items: center; gap: 4px; }

/* 帮助「关于与备案」里的协议 / 隐私入口 */
.r12-help-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r12-r-control);
  background: transparent;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  text-align: left;
}

.r12-help-link:hover { background: var(--r12-hover); }
.r12-help-link svg { width: 14px; height: 14px; color: var(--r12-faint); }

.r12-legal-text { margin: 0; color: var(--r12-ink); font-size: var(--r12-fs-body); line-height: var(--r12-lh-body); }

@keyframes r12-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes r12-tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes r12-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes r12-spin {
  to { transform: rotate(360deg); }
}

/* 生成中占位的底色：6 秒往返流动，只动 background-position */
@keyframes r12-gen-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* 视频进度线：duration 秒内从头走到尾，只动 transform */
@keyframes r12-vctl-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── 九稿 0.7：图片 / 视频悬停详情浮层 ───────────────────────── */
.r12-media-info {
  position: fixed;
  z-index: 12500;
  box-sizing: border-box;
  width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pop);
  background: var(--r12-pop-bg);
  box-shadow: var(--r12-shadow-pop);
  color: var(--r12-ink);
  pointer-events: none;
}

.r12-media-info-prompt {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
}

.r12-media-info-meta {
  margin: 6px 0 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

/* ── 八稿 57：团队额度、就地分额度、团队项目里的「我还剩」────────── */

.r12-team-points {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.r12-team-quota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.r12-team-quota > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.r12-team-quota small {
  margin-left: 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  white-space: nowrap;
}

.r12-team-quota b {
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.r12-team-quota-bar {
  height: 4px;
  overflow: hidden;
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
}

.r12-team-quota-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--team-color, var(--r12-accent));
}

.r12-team-my-points {
  color: var(--r12-muted);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
}

.r12-team-my-points b {
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.r12-team-points > .r12-team-quota-note {
  margin-left: 0;
  color: var(--r12-faint);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

.r12-team-member > .r12-team-who { flex: 1 1 auto; }

/* 组长行右侧多了 28 高的〔分额度〕，上下内边距收 2px，行高仍约 32，面板不再长高 */
.r12-team-member:has(.r12-team-member-side) {
  padding-top: 2px;
  padding-bottom: 2px;
}

.r12-team-member-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 0;
}

/* 组长行沿用了 .r12-team-doing 做右列兼容，但额度块不能被旧的 170 宽省略号截掉 */
.r12-team-member-side.r12-team-doing {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.r12-team-member-points {
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.r12-team-member-points b {
  color: var(--r12-ink);
  font-weight: 500;
}

.r12-team-me-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid var(--r12-line-strong);
  border-radius: 4px;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: 1;
  font-weight: 500;
  vertical-align: 1px;
}

.r12-team-allot-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 6px 32px;
  padding: 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-control);
  background: var(--r12-surface-2);
}

.r12-team-allot-title {
  color: var(--r12-ink);
  font-size: var(--r12-fs-ui);
  line-height: var(--r12-lh-ui);
  font-weight: 600;
}

.r12-team-allot-input { width: 100%; height: 32px; }

.r12-team-allot-hint {
  margin: 0;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

.r12-team-allot-error {
  margin: 0;
  color: var(--r12-error);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
}

.r12-team-allot-error:empty { display: none; }

.r12-team-allot-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.r12-team-allot-actions .r12-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.r12-credit-menu-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--r12-muted);
  font-size: var(--r12-fs-small);
  line-height: var(--r12-lh-small);
  font-variant-numeric: tabular-nums;
}

.r12-credit-menu-sub.is-allot .r12-btn { flex: none; }

/* 九稿 67：当前品牌上传 Logo、候选主色与深浅预览 */
.r12-logo-upload-block {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-2);
}
.r12-logo-upload-block .r12-field { min-width: 180px; }
.r12-logo-upload-block input[type="file"] { padding: 4px; font-size: var(--r12-fs-small); }
.r12-logo-upload-block input[type="color"] { width: 56px; height: 28px; padding: 2px; }
.r12-logo-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.r12-logo-candidate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-pill);
  background: var(--r12-surface-3);
  color: var(--r12-ink);
  font-size: var(--r12-fs-small);
}
.r12-logo-candidate i { width: 16px; height: 16px; border-radius: 50%; }
.r12-logo-candidate.is-selected { border-color: var(--r12-on-brand); background: var(--r12-selected-bg); }
.r12-logo-candidate span { color: var(--r12-muted); }
.r12-logo-preview-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--r12-line);
  border-radius: var(--r12-r-card);
  background: var(--r12-surface-3);
}
.r12-logo-preview-head { display: flex; flex-direction: column; min-width: 0; }
.r12-logo-preview-head b { font-size: var(--r12-fs-ui); }
.r12-logo-preview-head span, .r12-logo-preview-head em { font-style: normal; font-size: var(--r12-fs-small); color: var(--r12-muted); }
.r12-logo-preview-body { display: flex; align-items: center; gap: 10px; flex: none; }
.r12-logo-preview-logo, .r12-logo-preview-mark {
  width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden;
}
.r12-logo-preview-logo img, .r12-logo-preview-logo svg,
.r12-logo-preview-mark img, .r12-logo-preview-mark svg { width: 100%; height: 100%; object-fit: contain; }
.r12-logo-upload-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* 九稿 67：装饰色变量留在样式层做兜底，具体品牌取值由品牌数据里的 brandTokens.decor 写入 */
:root {
  --signature-rose: #F2A6BF;
  --signature-coral: #FFB48F;
  --signature-lavender: #B8A7FF;
}