/* HI CHUYAN · 即梦式：空态居中 · 满态时间线 · 统一胶囊编辑器 */
:root {
  --bg: #0c0c0e;
  --panel: #16161a;
  --panel-2: #1c1c22;
  --line: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.12);
  --text: #f5f4f0;
  --muted: #888880;
  --faint: #6a6a64;
  /* 动作渐变：金 → 粉 → 紫 → 青（柔光参考） */
  --brand: #22d3ee;
  --brand-rgb: 34, 211, 238;
  --brand-gold: #ffd445;
  --brand-pink: #ffb4d0;
  --brand-lavender: #cbb6ff;
  --brand-cyan: #22d3ee;
  --brand-blue: #4aa0ff;
  --brand-grad: linear-gradient(115deg, #ffe08a 0%, #ffb7c8 36%, #cbb6ff 68%, #9be8ff 100%);
  --brand-grad: linear-gradient(115deg in oklab, #ffe08a 0%, #ffb7c8 36%, #cbb6ff 68%, #9be8ff 100%);
  --brand-grad-hover: linear-gradient(115deg, #ffebb0 0%, #ffc6d6 36%, #d6c4ff 68%, #b4f0ff 100%);
  --brand-grad-hover: linear-gradient(115deg in oklab, #ffebb0 0%, #ffc6d6 36%, #d6c4ff 68%, #b4f0ff 100%);
  --brand-grad-compact: linear-gradient(135deg, #ffe08a 0%, #ffb4d0 48%, #9be8ff 100%);
  --brand-grad-compact: linear-gradient(135deg in oklab, #ffe08a 8%, #ffb4d0 48%, #9be8ff 100%);
  --brand-grad-soft: linear-gradient(115deg in oklab, rgba(255, 224, 138, 0.32), rgba(255, 183, 200, 0.24), rgba(203, 182, 255, 0.22), rgba(155, 232, 255, 0.28));
  --points-star-grad: linear-gradient(115deg, #8fd6ff 0%, #dcc6ff 48%, #ffe6c4 100%);
  --points-star-grad: linear-gradient(115deg in oklab, #8fd6ff 0%, #dcc6ff 48%, #ffe6c4 100%);
  --ok: #22d3ee;
  --warn: #f5c542;
  --err: #ff6b7a;
  --font: "MiSans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --rail: 56px;
  --session: 240px;
  /* 原 880，宽度 +30% ≈ 1144 */
  --composer-w: min(1144px, calc(100% - 48px));
  /*
   * 全站液态玻璃 —— 与首页 .home-mini-bar / .glass-surface--fallback 统一
   * 半透白 + 高 blur + 内高光；工具条圆角适中，不要拉满胶囊 999px
   */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.16);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-border-strong: rgba(255, 255, 255, 0.34);
  --glass-blur: blur(12px) saturate(1.8) brightness(1.2);
  --glass-blur-strong: blur(18px) saturate(1.85) brightness(1.18);
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
  --glass-shadow-strong:
    0 10px 36px rgba(0, 0, 0, 0.28),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 20px 2px rgba(255, 255, 255, 0.08);
  --glass-radius: 14px;
  --glass-radius-sm: 10px;
  /* 首页长输入条可仍用大圆角；工具条壳用 --tb-radius，不再强制 999 */
  --glass-radius-pill: 999px;
  /* 工具条壳 / 内嵌按钮：首页同款玻璃 + 适中圆角（非胶囊） */
  --tb-bg: rgba(255, 255, 255, 0.1);
  --tb-border: rgba(255, 255, 255, 0.22);
  --tb-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
  --tb-blur: blur(12px) saturate(1.8) brightness(1.2);
  --tb-radius: 20px; /* 工具条外壳：圆角适中，勿 999 */
  --tb-pad: 5px 7px;
  --tb-gap: 2px;
  /* 内嵌钮默认透明；悬停微亮；选中/按下才有底 —— 避免条里一排小色块显乱 */
  --tb-btn-bg: transparent;
  --tb-btn-bg-hover: rgba(255, 255, 255, 0.12);
  --tb-btn-bg-on: rgba(255, 255, 255, 0.16);
  --tb-btn-radius: 10px;
  --tb-btn-h: 30px;
  /* GooeyNav linear-ease（reactbits） */
  --gooey-ease: linear(
    0,
    0.068,
    0.19 2.7%,
    0.804 8.1%,
    1.037,
    1.199 13.2%,
    1.245,
    1.27 15.8%,
    1.274,
    1.272 17.4%,
    1.249 19.1%,
    0.996 28%,
    0.949,
    0.928 33.3%,
    0.926,
    0.933 36.8%,
    1.001 45.6%,
    1.013,
    1.019 50.8%,
    1.018 54.4%,
    1 63.1%,
    0.995 68%,
    1.001 85%,
    1
  );
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.ico { display: block; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 细滚动条 */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-button { display: none; }

.layout {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  height: 100vh;
  overflow: hidden;
}
/* 生成页会话栏已由「项目」替代，始终隐藏。工作流页仍用 .show-sessions 显示画布项目列表。 */
#sessionPanel {
  display: none !important;
}
body.view-chat #sessionFoldBtn {
  display: none !important;
}
/* 生成页：显示独立对话列表 */
.layout.show-sessions {
  grid-template-columns: var(--rail) var(--session) 1fr;
}
.layout.show-sessions.sessions-collapsed {
  grid-template-columns: var(--rail) 1fr;
}
.layout:not(.show-sessions) .session {
  display: none;
}
.layout.show-sessions.sessions-collapsed .session {
  display: none !important;
}
.session-fold {
  display: none;
  position: fixed;
  left: calc(var(--rail) + var(--session) - 1px);
  top: 16px;
  z-index: 28;
  width: 20px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: #17171a;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  place-items: center;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.16);
}
.layout.show-sessions .session-fold { display: grid; }
.layout.show-sessions.sessions-collapsed .session-fold {
  left: var(--rail);
  color: rgba(255, 255, 255, 0.55);
}
.session-fold:hover { color: rgba(255, 255, 255, 0.88); background: #1d1d22; }
.session-fold svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.16s ease;
}
.layout.sessions-collapsed .session-fold svg { transform: rotate(180deg); }

/* ── 窄轨 ── */
.rail {
  height: 100vh;
  background: #09090b;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 14px; z-index: 30;
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; align-items: center; }
.rail-item {
  width: 46px; border: none; background: transparent; color: var(--faint);
  border-radius: 11px; padding: 7px 2px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.2;
}
.rail-item .ri {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px;
}
.rail-item:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.rail-item.on { color: var(--text); }
.rail-item.on .ri { background: rgba(255,255,255,0.08); color: #e8ecf5; }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.user-guest .rail-bottom { gap: 14px; }
.rail-login-btn {
  appearance: none;
  width: 44px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
}
.rail-login-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.rail-menu-btn {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rail-menu-btn:hover { color: rgba(255, 255, 255, 0.88); }
.rail-menu-ico {
  display: block;
  width: 16px;
  height: 11px;
  position: relative;
}
.rail-menu-ico::before,
.rail-menu-ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.rail-menu-ico::before {
  top: 0;
  box-shadow: 0 4.75px 0 currentColor;
}
.rail-menu-ico::after { bottom: 0; }
body:not(.user-authed) .rail-points,
body:not(.user-authed) .rail-avatar {
  display: none !important;
}
body.user-authed .rail-login-btn,
body.user-authed .rail-menu-btn {
  display: none !important;
}
body.user-guest .rail-auth-only,
body.user-guest #railLoginBtn,
body.user-guest #railLogoutBtn {
  display: none !important;
}
.rail-points {
  width: 44px;
  padding: 6px 3px 5px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #ececef;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
.rail-points-gem {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  background: none;
  border-radius: 0;
  flex: none;
}
.rail-points-gem svg,
.rail-points-gem::before { display: none; content: none; }
.points-star,
.rail-points-gem img,
.points-gem-img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
  opacity: 1;
}
.rail-points strong {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-points small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: var(--points-star-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rail-points:hover { background: rgba(255, 255, 255, 0.08); }
.rail-bottom,
.rail-account {
  overflow: visible;
}
.rail-account {
  position: relative;
  z-index: 80;
}
.rail-avatar {
  width: 36px;
  height: 36px;
}
.user-guest .rail-avatar {
  width: 36px;
  border-radius: 50%;
}
.rail-account::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 14px;
  height: 52px;
}
.rail-flyout {
  position: absolute;
  left: calc(100% + 10px);
  bottom: -8px;
  z-index: 90;
  width: 276px;
  padding: 12px 10px 10px;
  border-radius: 18px;
  background: #232328;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.rail-flyout-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 4px 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.rail-flyout-head img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rail-flyout-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-flyout-who strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-flyout-who small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}
.rail-flyout-home {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.rail-flyout-logout {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font: 500 13px/1.2 "MiSans", "PingFang SC", sans-serif;
  cursor: pointer;
  text-align: left;
}
.rail-flyout-logout:hover { background: rgba(255, 255, 255, 0.1); }
.rail-account:hover .rail-flyout,
.rail-account:focus-within .rail-flyout,
.rail-account.rail-account-open .rail-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.rail-flyout-list { display: flex; flex-direction: column; gap: 2px; }
.rail-flyout-row { position: relative; }
.rail-flyout-item {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font: 400 13px/1.2 "MiSans", "PingFang SC", sans-serif;
  cursor: pointer;
  text-align: left;
}
.rail-flyout-item:hover,
.rail-flyout-row:hover > .rail-flyout-item {
  background: rgba(255, 255, 255, 0.08);
}
.rail-flyout-chevron {
  color: rgba(255, 255, 255, 0.38);
  font-size: 16px;
  line-height: 1;
}
.rail-flyout-sub {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  width: 268px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: #2c2c31;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.rail-flyout-sub--qual {
  width: 300px;
}
.rail-flyout-row:hover .rail-flyout-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.rail-sub-kicker {
  margin: 0 0 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.rail-sub-line {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.65;
}
.rail-sub-line strong { color: #fff; font-weight: 600; }
.rail-qual-body {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.9;
}
.rail-qual-body a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
}
.rail-qual-body a:hover { color: rgba(255, 255, 255, 0.88); }
.rail-ghs {
  width: 14px;
  height: 14px;
  margin: 0 3px -2px 0;
  vertical-align: middle;
  display: inline-block;
}
.rail-sub-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-grad);
  color: #071018;
  font: 650 12.5px/1.2 "MiSans", "PingFang SC", sans-serif;
  cursor: pointer;
}

body.view-home #topChrome,
body.view-chat #topChrome,
body.view-canvas #topChrome,
body.view-assets #topChrome,
body.view-social #topChrome,
#topChrome {
  display: none !important;
}
/* 左下角连通状态已隐藏：无实际操作入口，闪烁干扰 */
.status-dot,
#cfgPill {
  display: none !important;
}
.status-dot-legacy {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  flex-shrink: 0;
  cursor: default;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}
.status-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-sizing: border-box;
}
/* 畅通：实心 ↔ 空心（描边）循环闪烁 */
.status-dot.ok::before {
  background: var(--brand);
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 6px rgba(var(--brand-rgb), 0.5);
  animation: status-dot-blink 1.2s ease-in-out infinite;
}
@keyframes status-dot-blink {
  0%,
  45% {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 6px rgba(var(--brand-rgb), 0.55);
  }
  55%,
  100% {
    background: transparent;
    border-color: var(--brand);
    box-shadow: 0 0 4px rgba(var(--brand-rgb), 0.28);
  }
}
/* 未连通：实心红，不闪烁 */
.status-dot.warn::before,
.status-dot.bad::before {
  background: #f05555;
  border: 1.5px solid #f05555;
  box-shadow: 0 0 6px rgba(240, 85, 85, 0.5);
  animation: none;
}
.status-dot.bad { cursor: default; }
/* 减弱动效偏好：保持实心绿 */
@media (prefers-reduced-motion: reduce) {
  .status-dot.ok::before {
    animation: none;
    background: var(--brand);
    border-color: var(--brand);
  }
}
/* 悬停文案：网络畅通 / 网站暂时无法连接 */
.status-dot[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(20, 20, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8ecf5;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.status-dot[data-tip]:hover::after {
  opacity: 1;
}

/* ── 会话侧栏（对齐参考：开始创作 / 最近 / ⋯菜单） ── */
.session {
  height: 100vh;
  background: #141416;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.session-top {
  padding: 18px 14px 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
}
.session-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(245, 247, 250, 0.95);
  margin: 0;
  letter-spacing: 0.02em;
}
.session-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 12px;
  padding: 11px 12px;
  background: transparent;
  color: rgba(230, 234, 242, 0.92);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease;
  text-align: left;
}
.session-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.session-nav-btn.on {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.session-nav-btn.on .session-nav-ico {
  border-color: rgba(212, 175, 98, 0.45);
  background: rgba(212, 175, 98, 0.12);
}
.session-item.is-default .session-pin-badge {
  /* 默认会话星标略偏金，与普通置顶区分一点 */
  opacity: 0.95;
}
.session-nav-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.session-nav-ico-new::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(230, 234, 242, 0.9);
  border-radius: 2px;
  box-sizing: border-box;
}
.session-nav-ico-new::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1.5px;
  background: rgba(230, 234, 242, 0.9);
  box-shadow: 0 -3px 0 rgba(230, 234, 242, 0.9), 0 3px 0 rgba(230, 234, 242, 0.55);
}
.session-nav-ico-chat::before {
  content: "";
  width: 14px;
  height: 11px;
  border: 1.5px solid rgba(230, 234, 242, 0.9);
  border-radius: 6px 6px 6px 2px;
  box-sizing: border-box;
}
.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-empty {
  color: var(--faint);
  font-size: 0.78rem;
  text-align: center;
  padding: 28px 8px;
}
.session-empty-hint {
  font-size: 0.72rem;
  opacity: 0.8;
}
.session-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  border-radius: 8px;
  padding: 2px 4px 2px 2px;
  transition: background 0.12s ease;
  position: relative;
}
.session-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.session-item.on {
  background: rgba(34, 211, 238, 0.08);
}
.session-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 4px 8px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.session-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px; /* 方形微圆角，非圆形 */
  background: #1a1a20;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 0.6rem;
}
.session-thumb video,
.session-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #121218;
}
.session-thumb-default {
  object-fit: contain !important;
  padding: 6px;
  box-sizing: border-box;
  background: #1c1c22 !important;
  opacity: 0.85;
}
/* 无预览：低调的「图片缺失」占位，不抢眼 */
.session-thumb-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.22);
  background: #16161c;
}
.session-thumb-empty svg {
  display: block;
  opacity: 0.9;
}
.session-section-lab {
  font-size: 0.75rem;
  color: rgba(140, 148, 160, 0.9);
  padding: 12px 8px 6px;
  flex-shrink: 0;
}
.session-thumb-ico {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
}
.session-meta {
  min-width: 0;
  flex: 1;
}
.session-meta .t {
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(235, 238, 245, 0.95);
}
/*
 * 置顶标记：放在标题与「⋯」之间
 * - 不压缩略图、不跟标题抢省略号
 * - 柔和暖金，低饱和，避免刺眼
 */
.session-pin-badge {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
  opacity: 0.85;
}
.session-pin-badge::before {
  content: "★";
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  /* 哑光香槟金，偏暖、不荧光 */
  color: rgba(196, 168, 110, 0.88);
  text-shadow: 0 0 10px rgba(180, 150, 90, 0.12);
}
.session-item.on .session-pin-badge::before,
.session-item:hover .session-pin-badge::before {
  color: rgba(210, 180, 120, 0.95);
}
.session-more {
  position: relative;
  flex-shrink: 0;
}
.session-more-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(180, 188, 200, 0.75);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.session-item:hover .session-more-btn,
.session-item.on .session-more-btn,
.session-more.open .session-more-btn {
  opacity: 1;
}
.session-more-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.session-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 132px;
  padding: 6px;
  border-radius: var(--glass-radius);
  z-index: 40;
}
.session-more-menu.hidden {
  display: none;
}
.session-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(235, 238, 245, 0.95);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}
.session-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.session-more-item.danger {
  color: #f0a8b0;
}
.sm-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
  position: relative;
  display: inline-block;
}
.sm-pin {
  border: 1.5px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  width: 10px;
  height: 10px;
  margin: 2px;
}
.sm-rename {
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.sm-rename::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-40deg);
}
.sm-del {
  border: 1.5px solid currentColor;
  border-top: none;
  border-radius: 0 0 2px 2px;
  height: 11px;
  margin-top: 3px;
}
.sm-del::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}
.session-rename-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #121216;
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
}
/* 兼容旧 class */
.session-new {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
}

/* ── 主区 ── */
.main {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  background: var(--bg);
  position: relative;
}
.view { display: none; height: 100%; }
.view.on { display: flex; flex-direction: column; }

/* 灵感首页：上半视频+居中编辑器，下半灵感/技能（下沉，不挡视频） */
#viewHome {
  position: relative;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  /* 在「上移 6cm」基础上，编辑区再下移 2.5cm */
  padding-top: max(8vh, calc(28vh - 6cm + 2.5cm));
  padding-bottom: 0;
}
.home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.home-bg-video {
  display: block;
  width: 100%;
  height: 100%;
  /* 背景需覆盖容器：窄屏按高度等比裁切，避免编辑区下方露黑。 */
  object-fit: cover;
  object-position: center top;
  transform: none;
  /* 提亮主体；压暗交给 vignette 遮罩 */
  filter: brightness(0.92) saturate(1.06) contrast(1.02);
}
.home-bg-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 压边角 vignette + 底部强黑色渐隐，避免视频底边硬切 */
  background:
    radial-gradient(
      ellipse 78% 68% at 50% 38%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.1) 42%,
      rgba(0, 0, 0, 0.32) 78%,
      rgba(0, 0, 0, 0.48) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 12, 0.1) 0%,
      rgba(8, 8, 12, 0.04) 32%,
      rgba(8, 8, 12, 0.18) 55%,
      rgba(0, 0, 0, 0.45) 72%,
      rgba(0, 0, 0, 0.78) 86%,
      rgba(0, 0, 0, 0.94) 100%
    );
}
/* 额外一层专管底部：更长过渡，彻底抹掉清晰切边 */
.home-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(42vh, 360px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 28%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.82) 74%,
    #000 100%
  );
}
/* 居中后的编辑框（恢复 22:20 前：满宽 1144 + 正常高度） */
.home-center {
  position: relative;
  z-index: 1;
  width: min(1144px, calc(100% - 40px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px 0;
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: center;
}

/* 火箭 FAB：右下角；配色/光泽对齐 logo 星（金→青→蓝） */
.home-rocket {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 45;
  width: 52px;
  height: 68px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: end center;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.86);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
  pointer-events: none;
  /* logo 同款外发光：金 + 青蓝 */
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 10px rgba(245, 197, 66, 0.35))
    drop-shadow(0 0 16px rgba(34, 211, 238, 0.28))
    drop-shadow(0 0 20px rgba(37, 99, 235, 0.18));
}
.home-rocket.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* 悬停：放大 50% + 蓄力抖动（冲击前震感） */
.home-rocket.on:hover {
  transform: translateY(-8px) scale(1.5);
  transform-origin: 50% 85%;
  filter:
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 16px rgba(46, 239, 255, 0.45))
    drop-shadow(0 0 28px rgba(46, 239, 255, 0.28));
}
.home-rocket.on:hover .home-rocket-svg {
  animation: homeRocketCharge 0.18s linear infinite;
  transform-origin: 50% 70%;
}
.home-rocket.on:hover .home-rocket-flame {
  opacity: 1;
  width: 20px;
  height: 30px;
  margin-left: -10px;
  animation: homeRocketFlameCharge 0.14s ease-in-out infinite;
}
.home-rocket.on:hover .hr-body-glow {
  opacity: 0.85;
}
.home-rocket.on:active {
  transform: translateY(-4px) scale(1.35);
  transition-duration: 0.08s;
}
.home-rocket.on:active .home-rocket-svg {
  animation: none;
}
.home-rocket-svg {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 46px;
  display: block;
  overflow: visible;
}
/* 蓄力微抖：小幅位移 + 倾角，像引擎点火前震动 */
@keyframes homeRocketCharge {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(-1.6px, 0.8px) rotate(-2.2deg);
  }
  30% {
    transform: translate(1.8px, -0.6px) rotate(2deg);
  }
  45% {
    transform: translate(-1.2px, -1px) rotate(-1.4deg);
  }
  60% {
    transform: translate(1.4px, 0.9px) rotate(1.8deg);
  }
  75% {
    transform: translate(-0.9px, 0.4px) rotate(-1deg);
  }
  90% {
    transform: translate(1px, -0.5px) rotate(0.8deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes homeRocketFlameCharge {
  0%, 100% {
    opacity: 0.85;
    transform: scaleY(0.9) scaleX(0.95) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.35) scaleX(1.12) translateY(3px);
  }
}
/* 填充由 SVG 渐变负责；描边轻描白以贴 logo 玻璃边 */
.home-rocket .hr-body {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.55;
}
.home-rocket .hr-body-glow {
  fill: url(#hrBodyGrad);
  opacity: 0.4;
}
.home-rocket .hr-fin {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.45;
}
.home-rocket .hr-nozzle {
  stroke: rgba(125, 211, 252, 0.35);
  stroke-width: 0.4;
}
/* 尾焰：柠檬金 → 电青 */
.home-rocket-flame {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 22px;
  margin-left: -8px;
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(ellipse at 50% 0%, #fff6d0 0%, #ffd240 22%, #22d3ee 42%, transparent 62%),
    radial-gradient(ellipse at 50% 35%, rgba(46, 239, 255, 0.85) 0%, rgba(91, 155, 255, 0.4) 42%, transparent 72%),
    radial-gradient(ellipse at 50% 70%, rgba(91, 155, 255, 0.4) 0%, transparent 70%);
  filter: blur(0.5px);
  opacity: 0.95;
  pointer-events: none;
  transform-origin: 50% 0%;
  animation: homeRocketFlame 0.55s ease-in-out infinite;
  z-index: 0;
}
@keyframes homeRocketFlame {
  0%, 100% {
    opacity: 0.75;
    transform: scaleY(0.78) scaleX(0.92) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.18) scaleX(1.05) translateY(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-rocket-flame,
  .home-rocket.on:hover .home-rocket-svg,
  .home-rocket.on:hover .home-rocket-flame {
    animation: none !important;
  }
  .home-rocket {
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
  .home-rocket.on:hover {
    transform: translateY(-4px) scale(1.25);
  }
}
@media (max-width: 720px) {
  .home-rocket {
    right: 14px;
    bottom: 16px;
    width: 46px;
    height: 60px;
  }
  .home-rocket-svg {
    width: 30px;
    height: 40px;
  }
}
.home-center .hero {
  margin-bottom: 22px;
}
.hero {
  text-align: center;
  margin-bottom: 22px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* 白色标题；小 logo 倒 8 字（∞）穿插环绕 + 拖尾速度模糊 */
.hero-title {
  margin: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 横向几乎贴字；纵向给 ∞ 上下叶留空 */
  padding: 1.35em 0.2em;
  /* 半宽 ≈ 从「Hi」到中心 / 中心到「发生」 */
  --orbit-rx: 4.7em;
  --orbit-ry: 0.95em;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  overflow: visible;
  isolation: isolate;
}
.hero-title-text {
  position: relative;
  z-index: 1;
}
/*
 * display:contents → 子 logo 直接参与标题 stacking，
 * 才能在动画里用 z-index 穿到文字前/后（真正「穿插」）
 */
.hero-logo-swarm {
  display: contents;
}
/* 倒 8 字穿梭：匀速丝滑 + 辉光 */
.hero-logo,
.hero-logo-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  object-fit: contain;
  display: block;
  background: transparent;
  pointer-events: none;
  user-select: none;
  /* 全程 linear，无忽快忽慢 */
  animation: heroLogoFig8 3.2s linear infinite;
  will-change: transform;
  transform-origin: center center;
}
.hero-logo {
  width: 13px;
  height: 13px;
  z-index: 2;
  filter:
    brightness(1.22)
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 5px rgba(56, 189, 248, 0.95))
    drop-shadow(0 0 11px rgba(245, 197, 66, 0.65))
    drop-shadow(0 0 18px rgba(34, 211, 238, 0.5));
}
.hero-logo-trail {
  z-index: 1;
}
/* 正 delay = 滞后于主星，残影在飞行后方 */
.hero-logo-trail--1 {
  width: 12px;
  height: 12px;
  animation-delay: 0.1s;
  opacity: 0.24;
  filter:
    brightness(1.08)
    blur(0.55px)
    drop-shadow(0 0 3px rgba(56, 189, 248, 0.35));
}
.hero-logo-trail--2 {
  width: 11px;
  height: 11px;
  animation-delay: 0.19s;
  opacity: 0.12;
  filter:
    brightness(1.05)
    blur(1px)
    drop-shadow(0 0 4px rgba(34, 211, 238, 0.2));
}
/*
 * 倒下的 8（∞）：参数均匀采样 + linear
 * x=4.7em·sin(t), y=0.95em·sin(2t)
 */
@keyframes heroLogoFig8 {
  0% { transform: translate(-50%, -50%) translate(0.000em, 0.000em) rotate(22.0deg) scale(1.000); z-index: 3; }
  3.125% { transform: translate(-50%, -50%) translate(0.917em, 0.364em) rotate(20.8deg) scale(1.004); z-index: 3; }
  6.25% { transform: translate(-50%, -50%) translate(1.799em, 0.672em) rotate(17.2deg) scale(1.008); z-index: 3; }
  9.375% { transform: translate(-50%, -50%) translate(2.611em, 0.878em) rotate(10.5deg) scale(1.011); z-index: 3; }
  12.5% { transform: translate(-50%, -50%) translate(3.323em, 0.950em) rotate(0.0deg) scale(1.014); z-index: 3; }
  15.625% { transform: translate(-50%, -50%) translate(3.908em, 0.878em) rotate(-15.6deg) scale(1.017); z-index: 3; }
  18.75% { transform: translate(-50%, -50%) translate(4.342em, 0.672em) rotate(-36.8deg) scale(1.018); z-index: 3; }
  21.875% { transform: translate(-50%, -50%) translate(4.610em, 0.364em) rotate(-62.4deg) scale(1.020); z-index: 3; }
  25% { transform: translate(-50%, -50%) translate(4.700em, 0.000em) rotate(-90.0deg) scale(1.020); z-index: 3; }
  28.125% { transform: translate(-50%, -50%) translate(4.610em, -0.364em) rotate(-117.6deg) scale(1.020); z-index: 3; }
  31.25% { transform: translate(-50%, -50%) translate(4.342em, -0.672em) rotate(-143.2deg) scale(1.018); z-index: 3; }
  34.375% { transform: translate(-50%, -50%) translate(3.908em, -0.878em) rotate(-164.4deg) scale(1.017); z-index: 3; }
  37.5% { transform: translate(-50%, -50%) translate(3.323em, -0.950em) rotate(-180.0deg) scale(1.014); z-index: 3; }
  40.625% { transform: translate(-50%, -50%) translate(2.611em, -0.878em) rotate(169.5deg) scale(1.011); z-index: 3; }
  43.75% { transform: translate(-50%, -50%) translate(1.799em, -0.672em) rotate(162.8deg) scale(1.008); z-index: 3; }
  46.875% { transform: translate(-50%, -50%) translate(0.917em, -0.364em) rotate(159.2deg) scale(1.004); z-index: 3; }
  50% { transform: translate(-50%, -50%) translate(0.000em, -0.000em) rotate(158.0deg) scale(1.000); z-index: 0; }
  53.125% { transform: translate(-50%, -50%) translate(-0.917em, 0.364em) rotate(159.2deg) scale(0.996); z-index: 0; }
  56.25% { transform: translate(-50%, -50%) translate(-1.799em, 0.672em) rotate(162.8deg) scale(0.992); z-index: 0; }
  59.375% { transform: translate(-50%, -50%) translate(-2.611em, 0.878em) rotate(169.5deg) scale(0.989); z-index: 0; }
  62.5% { transform: translate(-50%, -50%) translate(-3.323em, 0.950em) rotate(180.0deg) scale(0.986); z-index: 0; }
  65.625% { transform: translate(-50%, -50%) translate(-3.908em, 0.878em) rotate(-164.4deg) scale(0.983); z-index: 0; }
  68.75% { transform: translate(-50%, -50%) translate(-4.342em, 0.672em) rotate(-143.2deg) scale(0.982); z-index: 0; }
  71.875% { transform: translate(-50%, -50%) translate(-4.610em, 0.364em) rotate(-117.6deg) scale(0.980); z-index: 0; }
  75% { transform: translate(-50%, -50%) translate(-4.700em, 0.000em) rotate(-90.0deg) scale(0.980); z-index: 0; }
  78.125% { transform: translate(-50%, -50%) translate(-4.610em, -0.364em) rotate(-62.4deg) scale(0.980); z-index: 0; }
  81.25% { transform: translate(-50%, -50%) translate(-4.342em, -0.672em) rotate(-36.8deg) scale(0.982); z-index: 0; }
  84.375% { transform: translate(-50%, -50%) translate(-3.908em, -0.878em) rotate(-15.6deg) scale(0.983); z-index: 0; }
  87.5% { transform: translate(-50%, -50%) translate(-3.323em, -0.950em) rotate(-0.0deg) scale(0.986); z-index: 0; }
  90.625% { transform: translate(-50%, -50%) translate(-2.611em, -0.878em) rotate(10.5deg) scale(0.989); z-index: 0; }
  93.75% { transform: translate(-50%, -50%) translate(-1.799em, -0.672em) rotate(17.2deg) scale(0.992); z-index: 0; }
  96.875% { transform: translate(-50%, -50%) translate(-0.917em, -0.364em) rotate(20.8deg) scale(0.996); z-index: 0; }
  100% { transform: translate(-50%, -50%) translate(-0.000em, -0.000em) rotate(22.0deg) scale(1.000); z-index: 3; }
}
.hero-logo-trail {
  animation-name: heroLogoFig8Trail;
}
@keyframes heroLogoFig8Trail {
  0% { transform: translate(-50%, -50%) translate(0.000em, 0.000em) rotate(22.0deg) scale(1.000); z-index: 2; }
  3.125% { transform: translate(-50%, -50%) translate(0.917em, 0.364em) rotate(20.8deg) scale(1.000); z-index: 2; }
  6.25% { transform: translate(-50%, -50%) translate(1.799em, 0.672em) rotate(17.2deg) scale(1.000); z-index: 2; }
  9.375% { transform: translate(-50%, -50%) translate(2.611em, 0.878em) rotate(10.5deg) scale(1.000); z-index: 2; }
  12.5% { transform: translate(-50%, -50%) translate(3.323em, 0.950em) rotate(0.0deg) scale(1.000); z-index: 2; }
  15.625% { transform: translate(-50%, -50%) translate(3.908em, 0.878em) rotate(-15.6deg) scale(1.000); z-index: 2; }
  18.75% { transform: translate(-50%, -50%) translate(4.342em, 0.672em) rotate(-36.8deg) scale(1.000); z-index: 2; }
  21.875% { transform: translate(-50%, -50%) translate(4.610em, 0.364em) rotate(-62.4deg) scale(1.000); z-index: 2; }
  25% { transform: translate(-50%, -50%) translate(4.700em, 0.000em) rotate(-90.0deg) scale(1.000); z-index: 2; }
  28.125% { transform: translate(-50%, -50%) translate(4.610em, -0.364em) rotate(-117.6deg) scale(1.000); z-index: 2; }
  31.25% { transform: translate(-50%, -50%) translate(4.342em, -0.672em) rotate(-143.2deg) scale(1.000); z-index: 2; }
  34.375% { transform: translate(-50%, -50%) translate(3.908em, -0.878em) rotate(-164.4deg) scale(1.000); z-index: 2; }
  37.5% { transform: translate(-50%, -50%) translate(3.323em, -0.950em) rotate(-180.0deg) scale(1.000); z-index: 2; }
  40.625% { transform: translate(-50%, -50%) translate(2.611em, -0.878em) rotate(169.5deg) scale(1.000); z-index: 2; }
  43.75% { transform: translate(-50%, -50%) translate(1.799em, -0.672em) rotate(162.8deg) scale(1.000); z-index: 2; }
  46.875% { transform: translate(-50%, -50%) translate(0.917em, -0.364em) rotate(159.2deg) scale(1.000); z-index: 2; }
  50% { transform: translate(-50%, -50%) translate(0.000em, -0.000em) rotate(158.0deg) scale(1.000); z-index: 0; }
  53.125% { transform: translate(-50%, -50%) translate(-0.917em, 0.364em) rotate(159.2deg) scale(1.000); z-index: 0; }
  56.25% { transform: translate(-50%, -50%) translate(-1.799em, 0.672em) rotate(162.8deg) scale(1.000); z-index: 0; }
  59.375% { transform: translate(-50%, -50%) translate(-2.611em, 0.878em) rotate(169.5deg) scale(1.000); z-index: 0; }
  62.5% { transform: translate(-50%, -50%) translate(-3.323em, 0.950em) rotate(180.0deg) scale(1.000); z-index: 0; }
  65.625% { transform: translate(-50%, -50%) translate(-3.908em, 0.878em) rotate(-164.4deg) scale(1.000); z-index: 0; }
  68.75% { transform: translate(-50%, -50%) translate(-4.342em, 0.672em) rotate(-143.2deg) scale(1.000); z-index: 0; }
  71.875% { transform: translate(-50%, -50%) translate(-4.610em, 0.364em) rotate(-117.6deg) scale(1.000); z-index: 0; }
  75% { transform: translate(-50%, -50%) translate(-4.700em, 0.000em) rotate(-90.0deg) scale(1.000); z-index: 0; }
  78.125% { transform: translate(-50%, -50%) translate(-4.610em, -0.364em) rotate(-62.4deg) scale(1.000); z-index: 0; }
  81.25% { transform: translate(-50%, -50%) translate(-4.342em, -0.672em) rotate(-36.8deg) scale(1.000); z-index: 0; }
  84.375% { transform: translate(-50%, -50%) translate(-3.908em, -0.878em) rotate(-15.6deg) scale(1.000); z-index: 0; }
  87.5% { transform: translate(-50%, -50%) translate(-3.323em, -0.950em) rotate(-0.0deg) scale(1.000); z-index: 0; }
  90.625% { transform: translate(-50%, -50%) translate(-2.611em, -0.878em) rotate(10.5deg) scale(1.000); z-index: 0; }
  93.75% { transform: translate(-50%, -50%) translate(-1.799em, -0.672em) rotate(17.2deg) scale(1.000); z-index: 0; }
  96.875% { transform: translate(-50%, -50%) translate(-0.917em, -0.364em) rotate(20.8deg) scale(1.000); z-index: 0; }
  100% { transform: translate(-50%, -50%) translate(-0.000em, -0.000em) rotate(22.0deg) scale(1.000); z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-trail { display: none !important; }
  .hero-logo {
    position: static !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 8px;
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 1px 6px rgba(56, 189, 248, 0.3));
  }
  .hero-title { padding: 0; }
}
/* 侧栏首页：仅 logo；缩小 10% 后与「项目」图标同一中轴 */
.rail-item-home {
  width: 46px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 8px 0;
  overflow: visible;
  background: transparent !important;
}
.rail-item-home:hover {
  background: transparent !important;
}
.rail-item-home .ri-logo,
.rail-item-home.on .ri-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  background: transparent !important;
  border-radius: 0;
  flex: none;
}
.rail-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  background: transparent;
  transform: none;
  filter: none;
}
.rail-item-home.on .rail-logo,
.rail-item-home:not(.on) .rail-logo {
  width: 32px;
  height: 32px;
  opacity: 1;
  transform: none;
  filter: none;
}
.hero h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #f5f4f0;
  text-shadow: 0 2px 28px rgba(0,0,0,0.4);
}
/* 恢复正常高度，去掉过度压缩 */
#viewHome .composer.glass-composer {
  padding: 16px 0.3cm 12px 16px;
}
#viewHome .composer-main {
  min-height: 96px;
}
#viewHome .composer textarea {
  min-height: 88px !important;
  font-size: 0.95rem;
  line-height: 1.45;
}
#viewHome .composer-bar {
  min-height: 44px;
  padding-top: 8px;
}
#viewHome .composer-bar > .send-btn,
#viewHome .mic-btn {
  width: 38px;
  height: 38px;
}
#viewHome .pill-dd {
  height: 28px;
  padding: 3px 8px 3px 10px;
  font-size: 0.7rem;
}
#viewHome .pill-dd select {
  font-size: 0.7rem;
}

/* ── 首页下滑：简略输入条（与首页编辑框同款液态玻璃） ── */
.home-mini-dock {
  position: fixed;
  left: calc(var(--rail, 56px) + 50%);
  bottom: 22px;
  transform: translateX(-50%);
  /* 高于 .home-explore / .home-center（均为 z-index:1），避免被图墙挡住 */
  z-index: 60;
  width: min(560px, calc(100vw - var(--rail, 56px) - 40px));
  pointer-events: none;
}
.home-mini-dock.hidden { display: none !important; }
.home-mini-bar {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  /* 对齐 .glass-surface--fallback 液态玻璃 */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  cursor: text;
  font: inherit;
  text-align: left;
  isolation: isolate;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.15s ease;
}
.home-mini-bar:hover {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.28),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 20px 2px rgba(255, 255, 255, 0.08);
}
.home-mini-bar:active { transform: scale(0.985); }
.home-mini-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.home-mini-go {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.home-mini-ph {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-mini-ph.has-text {
  color: rgba(255, 255, 255, 0.9);
}
@supports not (backdrop-filter: blur(10px)) {
  .home-mini-bar {
    background: rgba(20, 22, 30, 0.78);
  }
}

/* 展开：底部原地变大；质感对齐精简条 liquid glass（半透白 + 高 blur），不压成黑块
 * 仅 home-glass-pinned；顶部首页 / 生成页编辑器不动 */
#composerGlass.home-glass-pinned {
  position: fixed !important;
  left: calc(var(--rail, 56px) + (100vw - var(--rail, 56px)) / 2);
  bottom: 20px;
  transform: translateX(-50%);
  width: min(880px, calc(100vw - var(--rail, 56px) - 48px)) !important;
  max-width: calc(100vw - var(--rail, 56px) - 48px);
  z-index: 62;
  margin: 0 !important;
  animation: homeGlassExpandIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  /* 与 .home-mini-bar / glass-surface--fallback 同款液态玻璃 */
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.8) brightness(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.18) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px 2px rgba(255, 255, 255, 0.07);
}
#composerGlass.home-glass-pinned.glass-surface--fallback,
#composerGlass.home-glass-pinned.glass-surface--svg {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.8) brightness(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.18) !important;
}
@supports not (backdrop-filter: blur(10px)) {
  #composerGlass.home-glass-pinned,
  #composerGlass.home-glass-pinned.glass-surface--fallback {
    background: rgba(22, 24, 32, 0.72) !important;
  }
}
@keyframes homeGlassExpandIn {
  from {
    opacity: 0.55;
    transform: translateX(-50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

body.home-composer-pinned #composerGlass.home-glass-pinned .composer.glass-composer {
  padding: 16px 0.3cm 12px 16px;
  background: transparent !important;
}
body.home-composer-pinned #composerGlass.home-glass-pinned .composer-main {
  min-height: 74px;
}
body.home-composer-pinned #composerGlass.home-glass-pinned textarea {
  min-height: 70px !important;
  /* 精简条同款：近白字 + 轻阴影，靠 blur 提对比而不是黑底 */
  color: rgba(255, 255, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  font-weight: 500;
  caret-color: #fff;
}
body.home-composer-pinned #composerGlass.home-glass-pinned textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45);
  text-shadow: none;
  font-weight: 400;
}
/* 钉住时原位置占位，避免图墙上跳；滚动回顶后会 unpin 恢复真实编辑框 */
.home-composer-spacer {
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}
.home-composer-spacer.hidden { display: none !important; }

/* ── 首页灵感 / 技能：下沉全宽，不贴编辑框 ── */
.home-explore {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  /* 在「上移 6cm」基础上，灵感墙再下移 5cm */
  margin-top: max(4vh, calc(min(32vh, 280px) - 6cm + 5cm));
  padding: 0 0 48px;
  box-sizing: border-box;
  /* 下半段轻压暗，避免整页过黑 */
  background: linear-gradient(180deg, transparent 0%, rgba(6, 6, 10, 0.35) 56px, rgba(6, 6, 10, 0.72) 140px);
}
.hex-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 6px;
  padding: 0 6px 0 calc(6px + 0.5cm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
.hex-tab-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  padding: 7px 2px 8px;
}
.hex-tab-src svg { display: block; flex: none; }
.hex-tab-src .hex-tab-pin { color: #e60023; }
/* 技能 Tab：tab 不动；仅环廊画布可上移溢出 */
.home-explore.is-skills .hex-tabs {
  margin-bottom: 0;
}
.home-explore.is-skills {
  overflow: visible;
}
.hex-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border-radius: 0;
  padding: 8px 2px 8px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  transition: color 0.15s ease;
}
.hex-tab:hover { color: rgba(255, 255, 255, 0.75); }
.hex-tab.on {
  color: #fff;
  background: transparent;
  border-color: transparent;
}
.hex-tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-grad);
  border-radius: 1px;
}
.hex-panel { display: none; }
.hex-panel.on { display: block; }
.hex-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  padding: 40px 16px;
  font-size: 0.88rem;
}

/*
 * 灵感墙：JS 瀑布流密排（消灭行对齐黑洞）
 * - 列宽固定偏好，变宽加列
 * - Banner 左上跨 2 列，2:1
 * - 图与图 gap 极小，紧密相接
 */
.hex-wall {
  width: 100%;
  /* 左右黑边在原 20px 基础上再缩 70% → 约 6px */
  padding: 0 6px;
  box-sizing: border-box;
  /* 圆角只打在指定两张图的单个角上，墙体不裁切 */
  border-radius: 0;
  overflow: visible;
}
.hex-masonry {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  /* 高度由 layoutHexMasonry 写入 */
  min-height: 120px;
  box-sizing: border-box;
}
.hex-load-more {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hex-wall { padding: 0 4px; }
}
/* Banner / 卡片默认 2px；仅标注的两张图各保留一个 17px 角 */
.hex-banner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #0a0a0e;
  border-radius: 2px;
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .hex-banner { border-radius: 2px; }
}
/* 左上那张：仅左上角 17px，其余三角 2px */
.hex-banner.hex-corner-tl,
.hex-card.hex-corner-tl {
  border-radius: 17px 2px 2px 2px;
}
/* 右上那张：仅右上角 17px，其余三角 2px */
.hex-banner.hex-corner-tr,
.hex-card.hex-corner-tr {
  border-radius: 2px 17px 2px 2px;
}
/* 极端单卡同时是左上+右上 */
.hex-banner.hex-corner-tl.hex-corner-tr,
.hex-card.hex-corner-tl.hex-corner-tr {
  border-radius: 17px 17px 2px 2px;
}
.hex-banner-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hex-banner-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: #0a0a0e;
  overflow: hidden;
}
.hex-banner-slide img,
.hex-banner-slide video.hex-banner-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hex-banner-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  text-align: left;
  pointer-events: none;
}
.hex-banner-cap strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.hex-banner-cap span {
  font-size: 0.72rem;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hex-banner-cap .hex-banner-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
  color: #121216;
}
.hex-banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hex-banner:hover .hex-banner-nav { opacity: 1; }
.hex-banner-prev { left: 10px; }
.hex-banner-next { right: 10px; }
.hex-banner-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.hex-banner-dots button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.hex-banner-dots button.on {
  background: #fff;
  width: 14px;
  border-radius: 99px;
}

/* 普通图卡：四角 2px（几乎直角）；墙体只裁左上/右上大圆角 */
.hex-card {
  position: absolute;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  border: none;
  background: #0a0a0e;
  cursor: pointer;
  display: block;
  padding: 0;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
  /* React Bits GlareHover 参数 */
  --gh-angle: -30deg;
  --gh-duration: 800ms;
  --gh-size: 300%;
  --gh-rgba: rgba(255, 255, 255, 0.32);
  isolation: isolate;
}
@media (max-width: 560px) {
  .hex-card { border-radius: 2px; }
}
.hex-card:hover {
  transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-color: transparent;
}
.hex-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  border-radius: inherit;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
/* 灵感卡光泽扫过（React Bits GlareHover → 纯 CSS） */
.hex-card::before,
.inspire-pin-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    var(--gh-angle, -30deg),
    hsla(0, 0%, 0%, 0) 58%,
    var(--gh-rgba, rgba(255, 255, 255, 0.32)) 70%,
    hsla(0, 0%, 0%, 0) 82%,
    hsla(0, 0%, 0%, 0) 100%
  );
  background-size: var(--gh-size, 300%) var(--gh-size, 300%), 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% -100%, 0 0;
  transition: background-position var(--gh-duration, 800ms) ease;
}
.hex-card:hover::before,
.inspire-pin-card:hover::before {
  background-position: 100% 100%, 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .hex-card::before,
  .inspire-pin-card::before {
    display: none;
  }
}
.hex-card-cap { display: none; }

/* ══════════════════════════════════════════════
 * 技能探索：仅 AccordionGallery（DriftWall 已移除）
 * ══════════════════════════════════════════════ */
.hex-skills.skills-explore,
.skills-explore {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 24px;
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
}
/* 手风琴：全宽；高度拉到视口下方（红线一带） */
.sk-accordion-wrap {
  margin: 0.6cm 0 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
.sk-accordion-host {
  width: 100%;
  max-width: 100%;
  min-height: clamp(360px, 42vh, 520px);
}
.sk-accordion-host .accordion-gallery {
  width: 100%;
}
#hexPanelSkills {
  margin: 0;
  padding: 0;
  overflow: visible;
}
.sk-featured-head,
.sk-section-title,
.sk-section-sub {
  display: none !important;
}
.sk-styles,
.sk-featured,
.sk-drift-host {
  display: none !important;
}
.home-explore.is-skills .hex-skills.skills-explore {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 16px;
}
.home-source-hub {
  padding: 28px 8px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.home-source-lead {
  margin: 0;
  color: #8a8a90;
  font-size: 14px;
  line-height: 22px;
}
.home-source-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(920px, 100%);
}
.home-source-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 16px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#17171a, #17171a) padding-box,
    linear-gradient(135deg, rgba(255,224,138,.4), rgba(255,180,208,.3) 42%, rgba(203,182,255,.32) 70%, rgba(155,232,255,.42)) border-box;
  color: #eee;
  text-align: left;
  cursor: pointer;
}
.home-source-card:hover {
  background:
    linear-gradient(#1c1c20, #1c1c20) padding-box,
    var(--brand-grad) border-box;
}
.home-source-card svg { color: #ddd; }
.home-source-card .home-source-pin { color: #e60023; }
.home-source-card strong {
  font-size: 15px;
  font-weight: 650;
  color: #f4f4f6;
}
.home-source-card em {
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  color: #8a8a90;
}
@media (max-width: 720px) {
  .home-source-row { grid-template-columns: 1fr 1fr; }
}
/* 旧扇形 DOM 兼容（若仍残留） */
.sk-arc {
  position: relative;
  width: 100%;
  max-width: none;
  user-select: none;
  touch-action: pan-x;
  cursor: grab;
}
.sk-arc:active {
  cursor: grabbing;
}
.sk-arc-stage {
  position: relative;
  height: clamp(300px, 34vw, 400px);
  min-height: 280px;
  width: 100%;
  perspective: 2200px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}
.sk-arc-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.sk-arc-card {
  --off: 0;
  --abs: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  /* 中心卡稍大；侧卡靠位移铺满宽度 */
  width: min(300px, 28vw);
  height: min(340px, 32vw);
  min-width: 200px;
  min-height: 240px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  background: #12141c;
  transform-style: preserve-3d;
  /*
   * 扇形铺满：每档横向约 14～16vw，|off|=3 时已近半屏
   * 配合 rotateY 形成宽扇，不再挤在中间
   */
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--off) * 15.5vw))
    translateZ(calc(var(--abs) * -56px))
    rotateY(calc(var(--off) * -22deg))
    scale(calc(1 - var(--abs) * 0.06));
  opacity: calc(1 - min(var(--abs) * 0.14, 0.55));
  transition:
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.2s ease;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}
.sk-arc-card[data-arc-off="0"],
.sk-arc-card.is-center {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--brand-rgb, 56, 189, 248), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 1;
}
.sk-arc-card[aria-hidden="true"] {
  pointer-events: none;
}
.sk-arc-cover {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 40%),
    var(--cover) center / cover no-repeat,
    #1a1c24;
}
.sk-arc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 20%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.82) 100%
  );
  pointer-events: none;
}
.sk-arc-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  z-index: 1;
}
.sk-arc-badge {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.sk-arc-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.sk-arc-desc {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}
/* 左右箭头已移除 */
.sk-arc-nav {
  display: none !important;
}
.sk-arc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.sk-arc-dot {
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.sk-arc-dot.on {
  width: 16px;
  background: rgba(255, 255, 255, 0.85);
}

/* ── 下方风格网格：撑满全宽 ── */
.sk-styles {
  width: 100%;
}
.sk-styles-grid {
  display: grid;
  width: 100%;
  /* 大屏 5～6 列，小屏自适应，真正铺满 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
@media (min-width: 1400px) {
  .sk-styles-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .sk-styles-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 780px) and (max-width: 1099px) {
  .sk-styles-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 779px) {
  .sk-styles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sk-arc-stage {
    height: 280px;
  }
  .sk-arc-card {
    width: min(220px, 56vw);
    height: min(260px, 66vw);
    min-width: 160px;
    min-height: 200px;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--off) * 22vw))
      translateZ(calc(var(--abs) * -48px))
      rotateY(calc(var(--off) * -20deg))
      scale(calc(1 - var(--abs) * 0.07));
  }
}
@media (min-width: 1600px) {
  /* 超宽屏：扇形步进再拉开，避免中间一坨 */
  .sk-arc-card {
    width: min(320px, 18vw);
    height: min(360px, 20vw);
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--off) * 14vw))
      translateZ(calc(var(--abs) * -64px))
      rotateY(calc(var(--off) * -20deg))
      scale(calc(1 - var(--abs) * 0.05));
  }
}
.sk-style-card {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(22, 24, 32, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: #fff;
  text-align: left;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.sk-style-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: rgba(28, 30, 40, 0.82);
}
.sk-style-card.is-smart {
  border-color: rgba(140, 120, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(140, 120, 255, 0.25),
    0 10px 32px rgba(80, 60, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.sk-style-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(245, 247, 252, 0.95);
  padding: 0 2px;
  letter-spacing: 0.01em;
}
.sk-style-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background:
    var(--cover) center / cover no-repeat,
    linear-gradient(145deg, #2a2d3a, #15171f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Smart Style 占位艺术 */
.sk-smart-art {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  background:
    radial-gradient(120% 100% at 20% 20%, rgba(180, 160, 255, 0.55), transparent 55%),
    linear-gradient(135deg, #6b5cff 0%, #9b7bff 42%, #c4b5fd 100%);
}
.sk-smart-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.sk-smart-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 72%;
}
.sk-smart-bars i {
  display: block;
  height: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}
.sk-smart-bars i:nth-child(1) { width: 88%; }
.sk-smart-bars i:nth-child(2) { width: 70%; }
.sk-smart-bars i:nth-child(3) { width: 52%; }

/* 兼容旧 class（若别处仍引用） */
.hex-skill {
  cursor: pointer;
  color: inherit;
}
.hex-skill-ico { display: none; }
.hex-skill-name { display: none; }
.hex-skill-desc { display: none; }
.home-center .composer-hint { width: 100%; }
/* 首页不再显示编辑框下方状态提示（如「请输入提示词」） */
#runHint,
.composer-hint.glass-hint {
  display: none !important;
}

/* ── Glass Surface（reactbits 风格）── */
.glass-surface {
  --glass-frost: 0.08;
  --glass-saturation: 1.35;
  --filter-id: url(#homeGlassFilter);
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  border-radius: 24px;
  overflow: visible;
  transition: opacity 0.26s ease-out;
}
/* 液态玻璃背景层仍按圆角裁切（不影响伸出的发送钮） */
.glass-surface--svg,
.glass-surface--fallback {
  isolation: isolate;
}
.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}
.glass-surface__content {
  width: 100%;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 0;
  overflow: visible;
}

/* Chrome：SVG 位移折射 + 饱和 */
.glass-surface--svg {
  background: hsl(0 0% 0% / var(--glass-frost, 0.08));
  backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1.35));
  -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1.35));
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, 0.38),
    inset 0 0 12px 4px rgba(255, 255, 255, 0.12),
    0 4px 16px rgba(17, 17, 26, 0.12),
    0 8px 28px rgba(17, 17, 26, 0.16),
    0 20px 56px rgba(17, 17, 26, 0.22),
    inset 0 4px 16px rgba(17, 17, 26, 0.06),
    inset 0 8px 24px rgba(17, 17, 26, 0.06);
}

/* Safari / Firefox / 对话页：reactbits GlassSurface fallback 液态玻璃 */
.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
}
@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(20, 22, 30, 0.72);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.08);
  }
}

/* 玻璃壳内的 composer：透明底，由外层玻璃负责质感 */
.glass-surface .composer.glass-composer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 24px;
  /* 右侧 2mm：发送钮永远距玻璃右缘约 2 毫米 */
  padding: 16px 2mm 12px 16px;
  position: relative;
  overflow: visible;
}
.glass-surface .composer.glass-composer::before {
  display: none;
}
.glass-composer .composer-bar {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.glass-composer .pill-dd {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glass-composer .pill-dd.accent {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.glass-composer .pill-dd select { color: inherit; }
.glass-composer .pill-dd.accent select { color: #fff; }
.glass-composer textarea {
  color: #f8f9fc;
}
.glass-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.glass-composer .slot {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}
.glass-composer .slot:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
}
.glass-composer .dur-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.glass-hint {
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  margin-top: 14px !important;
}

/* workspace: 左主栏(时间线+编辑器) + 右灵感 */
.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  /* 允许切换球溢出边缘仍可点；不要裁掉左下 */
  overflow: visible;
}

.work-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  z-index: 1; /* 切换球 z-index:200 叠在上方可点 */
}

/* 左侧主栏：时间线 + 编辑器；满态宽度收敛，右侧空间全部给灵感 */
.work-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 左主栏吃满红线以左；右侧灵感占红线以右整段 */
.workspace.filled .work-main {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  position: relative;
}

.work-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 空态：主区垂直居中，问候 + 编辑器；隐藏灵感栏 */
.workspace.empty .work-body {
  flex: 1;
  min-height: 0;
}
.workspace.empty .work-main {
  justify-content: center;
  align-items: center;
}
.workspace.empty .inspire-panel,
/* 空会话：资产栏一律不显示（含上一会话打开后残留 open 状态） */
.workspace.empty .assets-drawer,
.workspace.empty .assets-drawer.open {
  display: none !important;
}
.workspace.empty .work-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 12px;
  flex: 0 0 auto;
  overflow: visible;
}
.workspace.empty .empty-hero {
  text-align: center;
  margin-bottom: 28px;
}
.workspace.empty .empty-hero h1,
.workspace.empty .empty-hero h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}
.workspace.empty .empty-hero p {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 0.84rem;
}
.workspace.empty .timeline { display: none !important; }
.workspace.empty .composer-dock {
  position: relative;
  width: 100%;
  max-width: var(--composer-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 48px;
  flex-shrink: 0;
  background: transparent;
}

/* 满态：时间线（右移 1.6cm）+ 左栏底编辑器 + 右灵感 */
.workspace.filled .empty-hero { display: none !important; }
.workspace.filled .work-body {
  flex: 1;
  min-height: 0;
}
.workspace.filled .work-scroll {
  /*
   * 右上角筛选条 + 左偏移。
   * 底部留白由 .tl-bottom-spacer + --composer-clearance 共同保证：
   * 滚到底时最后一条完整在输入框上方（图2），框下是空白。
   */
  --composer-clearance: max(260px, min(340px, 32vh));
  padding: 56px 16px 24px calc(28px + 1.6cm);
  scroll-padding-bottom: var(--composer-clearance);
  box-sizing: border-box;
}
/* 时间线底部真实占位（比 padding 在 flex 滚动里更稳） */
.timeline .tl-bottom-spacer {
  width: 100%;
  height: var(--composer-clearance, 280px);
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}
/*
 * 大屏：资产收起后对话文本不要跟着贴到最右边
 * 预留与资产栏同宽的右侧空位，气泡/卡片保持原位；窄屏再吃满自适应
 */
@media (min-width: 1100px) {
  body:not(.display-lovart) .workspace.filled:not(.drawer-open) .work-scroll {
    padding-right: max(16px, min(380px, 34vw));
  }
  /* 输入框：始终在 work-main 内水平居中，不再用不对称 padding 往右顶 */
  body:not(.display-lovart) .workspace.filled:not(.drawer-open) .composer-dock {
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
    box-sizing: border-box;
  }
}
/* 小屏：资产收起后仍可用满宽 */
@media (max-width: 1099px) {
  body:not(.display-lovart) .workspace.filled:not(.drawer-open) .work-scroll {
    padding-right: 16px;
  }
}

/* 回到最新：相对 composer-dock，贴在编辑框上方外侧并留 12px 间距 */
.tl-jump-latest {
  position: absolute;
  left: 50%;
  /* 整个 dock 顶边之上，不进入输入框区域 */
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  z-index: 15;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.15s ease;
  pointer-events: auto;
}
.tl-jump-latest:hover {
  transform: translateX(-50%) translateY(-2px);
}
.tl-jump-latest:active {
  transform: translateX(-50%) translateY(0);
}
.tl-jump-latest.hidden {
  display: none !important;
}
.tl-jump-ico {
  display: grid;
  place-items: center;
  animation: tlJumpBounce 1.5s ease-in-out infinite;
}
@keyframes tlJumpBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.workspace.empty .tl-jump-latest {
  display: none !important;
}

/* 更早内容占位（懒加载哨兵，非真实内容） */
.tl-load-older {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 20px;
  max-width: min(420px, 100%);
  pointer-events: none;
  opacity: 0.55;
}
.tl-ph-block {
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: tlPhShimmer 1.4s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.tl-ph-block.is-short {
  height: 36px;
  width: 55%;
  align-self: flex-end;
  border-radius: 16px;
}
.tl-ph-block.is-media {
  height: 180px;
  width: min(240px, 70%);
  background: #0c0c10;
  animation: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@keyframes tlPhShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* 满态编辑器：浮在时间线之上；在对话主栏内水平居中（勿被资产栏「挤到右边」） */
.workspace.filled .composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 主栏内居中 */
  justify-content: flex-end;
  /* 左右对称边距；宽度由内部 glass 限长 */
  padding: 10px 16px 16px;
  background: transparent !important;
  box-shadow: none;
  pointer-events: none; /* 空白处不挡滚动 */
  overflow: visible; /* 允许 jump 按钮溢出到 dock 上方 */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/*
 * 输入框上方：不要任何渐隐/遮罩伪元素
 * 全宽 dock::before 与 glass::before 都会在编辑框外留下横线或圆角灰块
 */
.workspace.filled .composer-dock::before,
.workspace.filled .composer-dock::after,
.workspace.filled .composer-dock .glass-surface--chat::before,
.workspace.filled .composer-dock .glass-surface--chat::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}
.workspace.filled .composer-dock .glass-surface--chat {
  pointer-events: auto;
  position: relative;
  z-index: 1;
  flex-shrink: 1;
  min-width: 0;
  margin: 0 auto; /* 配合 dock 居中 */
  /*
   * 宽度 ≤1144，且不超过主栏可用宽（资产打开时 work-main 已变窄）
   */
  width: min(var(--composer-w, 1144px), 100%);
  max-width: min(1144px, 100%);
  /* 必须 visible：发送/麦克风 absolute 钉在右下，hidden 会裁切且无法点击 */
  overflow: visible;
  box-sizing: border-box;
  /* 去掉会在壳外晕开的大阴影（易被看成「外面一条痕迹」） */
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14) !important;
}

/* 右侧灵感：宽度到红线位置（约占主区 30%） */
.inspire-panel {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 420px);
  min-width: 280px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 14, 0.72);
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}
.inspire-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 14px 10px;
  flex-shrink: 0;
}
.inspire-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}
.inspire-status {
  margin-top: 2px;
  font-size: 0.64rem;
  color: var(--faint);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspire-status.is-mine {
  color: rgba(var(--brand-rgb), 0.9);
}
.inspire-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inspire-pin-link {
  appearance: none;
  font: inherit;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.15s ease;
}
.inspire-pin-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.inspire-pin-link.on {
  color: #fff;
  border-color: rgba(230, 0, 35, 0.55);
  background: rgba(230, 0, 35, 0.18);
}
/* 连接账号面板 */
.inspire-connect-panel {
  flex-shrink: 0;
  margin: 0 10px 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 42vh;
  overflow-y: auto;
}
.inspire-connect-panel.hidden { display: none !important; }
.inspire-connect-tip {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.inspire-connect-label {
  font-size: 0.62rem;
  color: var(--faint);
  margin-top: 2px;
}
.inspire-connect-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 0.68rem;
  font-family: ui-monospace, monospace;
  resize: vertical;
}
.inspire-connect-input:focus {
  outline: 1px solid rgba(230, 0, 35, 0.5);
  border-color: rgba(230, 0, 35, 0.45);
}
.inspire-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.inspire-connect-save {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  background: #e60023;
  color: #fff;
}
.inspire-connect-save:hover { filter: brightness(1.06); }
.inspire-connect-steps {
  margin: 4px 0 0;
  font-size: 0.6rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.38);
}
.inspire-connect-steps a { color: rgba(255, 180, 190, 0.85); }
/* 灵感搜索（Pinterest） */
.inspire-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
  flex-shrink: 0;
}
.inspire-search {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.74rem;
  outline: none;
}
.inspire-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.inspire-search:focus {
  border-color: rgba(230, 0, 35, 0.55);
  background: rgba(255, 255, 255, 0.09);
}
.inspire-search-btn {
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: 0.15s ease;
}
.inspire-search-btn:hover {
  background: #e60023;
  border-color: transparent;
  color: #fff;
}

.inspire-body {
  flex: 1 1 auto;
  min-height: 0;
  height: 0; /* 配合 flex 占满剩余高度，才能内部滚动 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* Pinterest 图流：固定 4 列卡片网格，正常比例，禁止堆叠压扁 */
.inspire-pin-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  column-count: unset;
  column-gap: normal;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.inspire-pin-grid .inspire-empty,
.inspire-pin-grid .inspire-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--faint);
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 28px 12px;
}
.inspire-load-more {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 14px 8px 8px;
}
.inspire-load-more.done {
  color: rgba(255, 255, 255, 0.28);
}
.inspire-load-more.hidden { display: none; }
.inspire-pin-card {
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a1e;
  cursor: pointer;
  display: block;
  position: relative;
  color: inherit;
  /* 固定卡片比例，避免图被压成细条堆叠 */
  aspect-ratio: 3 / 4;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  --gh-angle: -30deg;
  --gh-duration: 800ms;
  --gh-size: 300%;
  --gh-rgba: rgba(255, 255, 255, 0.32);
}
.inspire-panel,
.inspire-body {
  overflow-x: hidden;
}
.inspire-pin-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.inspire-pin-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0a0a0c;
  border: 0;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.inspire-pin-card .pin-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 16px 6px 5px;
  font-size: 0.55rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.inspire-masonry { display: none !important; }
.inspire-empty {
  column-span: all;
  text-align: center;
  color: var(--faint);
  font-size: 0.78rem;
  padding: 24px 8px;
}
.inspire-card {
  break-inside: avoid;
  margin: 0 0 8px;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #141418;
  cursor: pointer;
  position: relative;
  display: block;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  --gh-angle: -30deg;
  --gh-duration: 800ms;
  --gh-size: 300%;
  --gh-rgba: rgba(255, 255, 255, 0.32);
}
.inspire-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.inspire-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    var(--gh-angle, -30deg),
    hsla(0, 0%, 0%, 0) 58%,
    var(--gh-rgba, rgba(255, 255, 255, 0.32)) 70%,
    hsla(0, 0%, 0%, 0) 82%,
    hsla(0, 0%, 0%, 0) 100%
  );
  background-size: var(--gh-size, 300%) var(--gh-size, 300%), 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% -100%, 0 0;
  transition: background-position var(--gh-duration, 800ms) ease;
}
.inspire-card:hover::before {
  background-position: 100% 100%, 0 0;
}
.inspire-card img,
.inspire-card video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  background: #0a0a0c;
  position: relative;
  z-index: 0;
}
.inspire-card .inspire-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: 0.58rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.inspire-card .inspire-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  color: #fff;
  pointer-events: none;
  opacity: 0.9;
}
@media (max-width: 980px) {
  .inspire-panel {
    display: none !important;
  }
  .workspace.filled .work-main {
    flex: 1;
    width: 100%;
    max-width: 100%;
  }
  .workspace.filled .work-scroll {
    --composer-clearance: max(240px, min(320px, 30vh));
    padding: 24px 20px 20px calc(20px + 1.6cm);
    scroll-padding-bottom: var(--composer-clearance);
  }
  .workspace.filled .composer-dock {
    padding: 10px 16px 16px;
    align-items: center;
  }
}
/* 对话页玻璃编辑器宽度 */
.workspace .glass-surface--chat {
  width: 100%;
  max-width: 100%;
}
/* 满态：与新对话同宽上限 1144，不随主栏/资产拉开 */
.workspace.filled .glass-surface--chat {
  width: min(1144px, 100%);
  max-width: 1144px;
  min-width: 0;
  align-self: flex-start;
  overflow: hidden;
  box-sizing: border-box;
}
.workspace.filled .composer.glass-composer {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.workspace.filled .composer-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.workspace.filled .composer-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  flex-wrap: nowrap !important;
  overflow: visible;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}
.workspace.filled .bar-left,
.workspace.filled .ofs-track.bar-left {
  flex-wrap: nowrap !important;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* 渐隐仅由 .ofs-wrap.ofs-overflow 控制，未溢出时完整显示每个 pill */
}
.workspace.filled .bar-left::-webkit-scrollbar,
.workspace.filled .ofs-track.bar-left::-webkit-scrollbar {
  display: none;
  height: 0;
}
.workspace.filled .bar-left .pill-dd,
.workspace.filled .bar-left .pill-media {
  flex-shrink: 0;
}
.workspace.filled .composer-bar .ofs-wrap {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  grid-column: 1;
}
.workspace.filled .composer-bar .bar-right {
  position: relative !important;
  grid-column: 2;
  justify-self: end;
  margin: 0 !important;
  right: auto !important;
  bottom: auto !important;
}
.workspace.empty .composer-dock .glass-surface--chat {
  width: var(--composer-w);
  max-width: 100%;
}
/* 对话编辑器：高透明玻璃，无黑底，滚动内容可透出 */
.workspace .glass-surface--chat.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(14px) saturate(1.45) brightness(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.45) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
}
.workspace .glass-surface--chat.glass-surface--svg {
  background: hsl(0 0% 100% / 0.03) !important;
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, 0.22),
    0 4px 20px rgba(0, 0, 0, 0.1);
}
.workspace .glass-surface--chat .composer.glass-composer {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.workspace .glass-surface--chat .composer.glass-composer::before {
  display: none !important;
}
/* 满态：进一步压低内部控件底色，避免“黑块” */
.workspace.filled .glass-surface--chat .composer.glass-composer {
  background: transparent !important;
}
.workspace.filled .glass-composer .pill-dd {
  background: rgba(255, 255, 255, 0.08);
}
.workspace.filled .glass-composer .slot {
  background: rgba(255, 255, 255, 0.06);
}
.workspace.filled .glass-composer textarea {
  background: transparent;
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
/* Lovart 右栏更窄：编辑器锁栏宽；overflow 保持 visible 以便发送钮可点 */
body.display-lovart .workspace.filled .composer-dock {
  padding-left: 10px;
  padding-right: 10px;
  overflow: visible;
}
body.display-lovart .workspace.filled .glass-surface--chat,
body.display-lovart .workspace.filled .composer.glass-composer,
body.display-lovart .workspace.filled .glass-surface__content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
/* composer-main 需可排引用行，勿裁切子项高度 */
body.display-lovart .workspace.filled .composer-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.display-lovart .workspace.filled .glass-composer textarea {
  max-height: 120px;
}

/* ── 胶囊编辑器（统一） ── */
.composer {
  width: var(--composer-w);
  max-width: 100%;
  background: #18181d;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 12px 14px 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
/* 对话页满态：内容跟玻璃壳，壳本身已限为 --composer-w */
.workspace.filled .composer.glass-composer {
  width: 100%;
  max-width: 100%;
}
.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,0.12),
    rgba(140,150,180,0.2),
    rgba(180,170,200,0.16),
    rgba(255,255,255,0.08)
  );
  background-size: 240% 240%;
  animation: borderFlow 16s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}
.composer:focus-within::before { opacity: 1; }
@keyframes borderFlow {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
.composer > * { position: relative; z-index: 1; }

.composer-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 74px;
}
.ref-stack {
  display: flex;
  flex-wrap: nowrap; /* 多图参考横排 */
  gap: 6px;
  flex-shrink: 0;
  max-width: min(280px, 42vw);
  overflow-x: auto;
  scrollbar-width: none;
}
.ref-stack::-webkit-scrollbar { display: none; }
.ref-stack:empty { display: none; }
/* 多图（3 张）横排一排 */
.ref-stack.ref-stack--row {
  flex-wrap: nowrap;
  max-width: none;
}
.ref-stack.ref-stack--row .slot {
  width: 48px;
  height: 48px;
}
.ref-stack .ref-placeholder {
  display: none;
}

.slot {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--faint);
  font-size: 0.54rem;
  text-align: center;
  padding: 3px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.slot:hover {
  border-color: rgba(220,225,235,0.35);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}
.slot.has-file {
  border-style: solid;
  border-color: rgba(220,225,235,0.35);
}
.slot img, .slot video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.slot .slot-ico { width: 16px; height: 16px; color: var(--muted); }
.slot .lab {
  position: absolute; left: 2px; bottom: 2px; z-index: 2;
  font-size: 0.5rem; background: rgba(0,0,0,0.72); color: #fff;
  padding: 1px 3px; border-radius: 3px; max-width: calc(100% - 4px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot .clr {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 10px;
  cursor: pointer; display: none; place-items: center; padding: 0; line-height: 1;
}
.slot.has-file .clr { display: grid; }

.composer textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 70px;
  max-height: 160px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 4px 10px 4px 2px; /* 右侧给滚动条留缝 */
  align-self: stretch;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  /* Firefox：更醒目的滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  transition: scrollbar-color 0.2s ease;
}
.composer textarea:hover,
.composer textarea:focus {
  scrollbar-color: rgba(var(--brand-rgb), 0.75) rgba(255, 255, 255, 0.06);
}
/* WebKit：高亮滚动条（文字多溢出时） */
.composer textarea::-webkit-scrollbar {
  width: 7px;
}
.composer textarea::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
  border-radius: 99px;
}
.composer textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.38)
  );
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  min-height: 28px;
}
.composer textarea:hover::-webkit-scrollbar-thumb,
.composer textarea:focus::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--brand-rgb), 0.65),
    rgba(var(--brand-rgb), 0.9)
  );
  border-color: rgba(var(--brand-rgb), 0.45);
  box-shadow:
    0 0 10px rgba(var(--brand-rgb), 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.composer textarea::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    rgba(var(--brand-rgb), 0.85),
    rgba(var(--brand-rgb), 1)
  );
}
/* 首页编辑区高度：在上方 #viewHome 规则中统一控制（-20%），勿再加高 */
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:read-only {
  opacity: 0.75;
  cursor: default;
}

/* 屏幕阅读器隐藏但保留 form 值 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── 画幅+分辨率合并 pill（即梦风格）── */
.pill-media {
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible;
  flex-shrink: 0 !important; /* 绝不被父级挤扁截断 */
}
.media-pill-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 9px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.media-pill-btn:hover {
  color: #fff;
}
.media-pill-shape {
  display: block;
  width: 16px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease;
}
.media-pill-btn:hover .media-pill-shape {
  border-color: rgba(255, 255, 255, 0.9);
}
.media-pill-text {
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 即梦风格弹出面板 */
.media-panel {
  position: fixed;
  z-index: 10000;
  width: min(300px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px) saturate(1.7) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(1.1);
  color: rgba(255, 255, 255, 0.92);
  animation: mediaPanelIn 0.16s ease-out;
  overflow: hidden;
}
.media-panel--params {
  width: min(312px, calc(100vw - 24px));
}
@keyframes mediaPanelIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.media-panel.media-panel--up {
  animation-name: mediaPanelInUp;
}
@keyframes mediaPanelInUp {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mp-section + .mp-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mp-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
/* 比例：PDF 同一行均匀排布，不换行挤乱 */
.mp-aspects {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 8px 6px;
}
.mp-aspects--row {
  justify-content: space-between;
}
.mp-aspect {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.mp-aspect:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.mp-aspect.on {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.mp-aspect .mp-shape {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  box-sizing: border-box;
  background: transparent;
  flex-shrink: 0;
}
.mp-aspect.on .mp-shape {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.mp-aspect .mp-lab {
  font-size: 0.58rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 分辨率：PDF 大按钮；4 档用 2×2，避免横向挤爆 */
.mp-res {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 8px;
}
.mp-res--grid4 {
  grid-template-columns: 1fr 1fr;
}
.mp-res-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  overflow: hidden;
}
.mp-res-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.mp-res-btn.on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.mp-res-main {
  white-space: nowrap;
}
.mp-res-btn .mp-res-sub {
  display: none; /* PDF 大按钮只显示 480P/720P 文案，不挤最长边 */
}
/* 选择生成数量：与分辨率同系玻璃条，不改整体面板风格 */
.mp-count-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 4px;
}
.mp-count-btn {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.mp-count-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.mp-count-btn.on {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* 多图 batch：一排等宽，每格画幅跟任务 aspect（--tl-ar，如 3/4、16/9） */
.tl-card--batch .tl-batch-grid,
.tl-card--batch .tl-result-grid--batch {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 10px;
  /* 竖图列略窄，横图列略宽；上限随列数伸缩 */
  width: min(100%, calc(var(--cols, 4) * var(--batch-col-w, 148px) + (var(--cols, 4) - 1) * 10px));
  max-width: 100%;
  align-self: flex-start;
  align-items: start;
}
.tl-batch-slot {
  min-width: 0;
  width: 100%;
}
.tl-batch-slot .load-card.tl-batch-load-card,
.tl-batch-slot .load-card {
  width: 100%;
  max-width: 100%;
  --tl-w: 100%;
  aspect-ratio: var(--tl-ar, 3 / 4);
  margin: 0;
}
.tl-batch-slot .tl-media-tile {
  width: 100%;
  max-width: none;
  aspect-ratio: var(--tl-ar, 3 / 4);
  border-radius: 12px;
  overflow: hidden;
}
.tl-result-grid--batch {
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) !important;
  max-width: min(100%, calc(var(--cols, 4) * var(--batch-col-w, 148px) + (var(--cols, 4) - 1) * 10px));
  gap: 10px;
  align-items: start;
}
.tl-result-grid--batch .tl-media-tile {
  aspect-ratio: var(--tl-ar, 3 / 4);
  width: 100%;
  max-width: none;
  border-radius: 12px;
  overflow: hidden;
}
.tl-media-tile.is-empty {
  aspect-ratio: var(--tl-ar, 3 / 4);
  background: #121218;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(160, 170, 185, 0.55);
  font-size: 0.78rem;
}

.mp-res-btn .mp-spark {
  color: var(--brand);
  font-size: 0.7rem;
  margin-left: 2px;
}

/* 底栏：左侧 pills 自适应，右侧发送钮 flex 右对齐 */
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  min-height: 40px;
  position: relative;
}
.bar-left {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-right: 0;
}

/* ── 横向菜单溢出：渐隐边缘 + 轻量圆形 chevron（叠在轨道上，不另占一块丑按钮） ── */
.ofs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.ofs-wrap.ofs-overflow {
  /* 给右侧圆形钮留一点点击空，但不挤出一整块黑按钮 */
  padding-right: 0;
}
.ofs-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: inherit;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.ofs-track::-webkit-scrollbar {
  display: none;
  height: 0;
}
/* 右侧内容渐隐 */
.ofs-wrap.ofs-overflow:not(.ofs-at-end) .ofs-track {
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
}
/* 滑到末尾时左侧也可渐隐（回看） */
.ofs-wrap.ofs-overflow.ofs-at-end:not(.ofs-at-start) .ofs-track {
  mask-image: linear-gradient(270deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 calc(100% - 36px), transparent 100%);
}
.ofs-wrap.ofs-overflow:not(.ofs-at-end):not(.ofs-at-start) .ofs-track {
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28px,
    #000 calc(100% - 36px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28px,
    #000 calc(100% - 36px),
    transparent 100%
  );
}

/* 溢出控件：贴在轨道右缘的透明热区 + 小圆 chip */
.ofs-nudge {
  appearance: none;
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(235, 240, 250, 0.92);
  display: none;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ofs-wrap.ofs-overflow .ofs-nudge {
  display: grid;
}
.ofs-wrap.ofs-at-end .ofs-nudge {
  right: auto;
  left: -2px;
}
/* 渐隐遮罩层（与背景融合，不是实心黑块） */
.ofs-nudge-fade {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(18, 20, 28, 0.55) 0%,
    rgba(18, 20, 28, 0.15) 70%,
    transparent 100%
  );
  opacity: 0.9;
}
.ofs-nudge-chip {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.ofs-nudge:hover .ofs-nudge-chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ofs-nudge:active .ofs-nudge-chip {
  transform: scale(0.96);
}
.ofs-nudge-svg {
  display: block;
  transition: transform 0.18s ease;
}
.ofs-wrap.ofs-at-end .ofs-nudge-svg {
  transform: rotate(180deg);
}
/* 兼容旧 class 名 */
.ofs-nudge-ico {
  display: none;
}
/* 输入栏左侧 pills（grid 第 1 列：占满剩余，不抢 bar-right） */
.composer-bar .ofs-wrap {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.composer-bar .ofs-track.bar-left {
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 会话顶栏筛选胶囊 */
#sessionFilters.ofs-track,
.chat-filter-bar.ofs-track {
  gap: 0;
  max-width: min(100%, 420px);
}
.ofs-wrap:has(#sessionFilters),
.ofs-wrap:has(.chat-filter-bar) {
  max-width: 100%;
}
/* 结果卡底栏操作 */
.tl-result-actions.ofs-track {
  gap: 8px;
  max-width: 100%;
}
/* 选中工具条由 JS 按节点 getBoundingClientRect 贴图定位，不再用 ofs 外壳 */
.lovart-sel-shell {
  display: none !important;
}
.pill-dd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px 3px 10px;
  height: 28px;
  color: var(--muted);
  font-size: 0.7rem;
  flex-shrink: 0;
  position: relative;
}
.pill-dd.hidden { display: none !important; }
.pill-dd.accent {
  background: rgba(255,255,255,0.06);
  border-color: rgba(220,225,235,0.16);
  color: #dce0ea;
}
.pill-dd select {
  border: none; outline: none; background: transparent; color: inherit;
  font-size: 0.7rem; font-weight: 500; max-width: 120px; cursor: pointer;
  /* 隐藏原生下拉，改用自定义菜单（可向上展开） */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.pill-dd.accent select { color: #e8ecf5; }

/* 自定义 pill 菜单：与 composer 液态玻璃同款（半透明 + blur） */
.pill-menu {
  position: fixed;
  z-index: 9999;
  min-width: 76px;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  border-radius: 16px;
  /* 对齐 glass-surface--fallback / 文本编辑框 */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    0 2px 16px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.75) brightness(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.75) brightness(1.15);
  scrollbar-width: thin;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.92);
}
@supports not (backdrop-filter: blur(10px)) {
  .pill-menu {
    background: rgba(28, 30, 40, 0.78);
  }
}
.pill-menu.pill-menu--down {
  transform-origin: top center;
  animation: pillMenuInDown 0.14s ease-out;
}
.pill-menu.pill-menu--up {
  transform-origin: bottom center;
  animation: pillMenuInUp 0.14s ease-out;
  box-shadow:
    0 -10px 36px rgba(0, 0, 0, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 2px rgba(255, 255, 255, 0.06);
}
@keyframes pillMenuInDown {
  from { opacity: 0; transform: scaleY(0.94) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
@keyframes pillMenuInUp {
  from { opacity: 0; transform: scaleY(0.94) translateY(4px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
.pill-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 500;
  text-align: left;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  gap: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.pill-menu-item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
/* 选中：玻璃高亮，不用实心蓝块 */
.pill-menu-item.on {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.pill-menu-item .check {
  width: 12px;
  opacity: 0;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.95);
}
.pill-menu-item.on .check { opacity: 1; }
.dur-btn {
  width: 15px; height: 15px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: var(--text); cursor: pointer;
  font-size: 0.7rem; display: grid; place-items: center; padding: 0;
}
.dur-btn:hover { background: rgba(255,255,255,0.12); }
#durLabel {
  min-width: 24px; text-align: center; font-size: 0.7rem;
  color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums;
}
/* 发送钮：默认仅描边；可发送时悬停 Gooey 白底填充（reactbits GooeyNav） */
.send-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  box-shadow: none;
  transition:
    color 0.32s var(--gooey-ease, ease),
    border-color 0.28s ease,
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.28s ease,
    opacity 0.15s ease;
}
/* Gooey 液态白填充：由中心 scale 0 → 1 */
.send-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.38s var(--gooey-ease, ease),
    opacity 0.32s var(--gooey-ease, ease);
}
.send-btn .ico {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
  transition: color 0.28s var(--gooey-ease, ease);
}
/* 旧 specular 高光层关闭，改由 gooey 接管 */
.send-btn .specular-send__shine {
  display: none;
}
/* 可发送 + 悬停：Gooey 填充展开，图标变深 */
.send-btn:not(:disabled):hover {
  color: #121216;
  border-color: transparent;
  background: transparent;
  transform: scale(1.06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
.send-btn:not(:disabled):hover::after {
  opacity: 1;
  transform: scale(1);
}
.send-btn:not(:disabled):active {
  transform: scale(0.96);
}
.send-btn:not(:disabled):active::after {
  transform: scale(0.96);
  opacity: 1;
}
/* 不可发送：更细更淡的描边，无悬停填充 */
.send-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.32);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  transform: none;
}
.send-btn:disabled::after {
  opacity: 0;
  transform: scale(0);
  transition: none;
}
/*
 * 发送钮：在 .bar-right 内，与 mic 并排，始终可见
 * 用 grid 两列：左 pills 占满剩余、右 mic/send 固定。
 * 比 flex 更稳——模式切换首帧不会把比例 pill 裁在按钮下。
 */
#viewHome .composer-bar,
#viewChat .composer-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  column-gap: 10px;
  row-gap: 0;
  width: 100%;
  min-height: 44px;
  padding-top: 8px;
  padding-right: 0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}
#viewHome .composer-bar > .ofs-wrap,
#viewChat .composer-bar > .ofs-wrap,
#viewHome .composer-bar > .bar-left,
#viewChat .composer-bar > .bar-left {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
#viewHome .composer-bar .bar-left,
#viewChat .composer-bar .bar-left {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 4px;
}
#viewHome .composer-bar .bar-left::-webkit-scrollbar,
#viewChat .composer-bar .bar-left::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#viewHome .composer-bar .bar-left .pill-dd,
#viewHome .composer-bar .bar-left .pill-media,
#viewChat .composer-bar .bar-left .pill-dd,
#viewChat .composer-bar .bar-left .pill-media {
  flex-shrink: 0;
}
#viewHome .composer-bar .bar-right,
#viewChat .composer-bar .bar-right {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin: 0 !important;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  height: 40px;
  z-index: 5;
  justify-self: end;
}
/* 首页：略贴右（用户微调过） */
#viewHome .composer-bar .bar-right {
  margin-right: -1.0cm !important;
}

/*
 * 生成/对话页 mic+send：
 * grid 右列固定；pills 过多时左侧横滑 + 渐隐，绝不叠到 mic/send 下。
 */
#viewChat .composer.glass-composer {
  position: relative !important;
  padding-right: 12px !important;
  overflow: visible;
}
#viewChat .composer-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}
#viewChat .composer-bar .bar-left {
  max-width: 100%;
  padding-right: 2px;
}
/* 空/满态统一：按钮在 grid 右列 */
#viewChat .workspace.empty .composer-bar .bar-right,
#viewChat .workspace.filled .composer-bar .bar-right {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}
#viewChat .workspace.filled .glass-surface--chat .composer.glass-composer {
  /* 勿 hidden：否则右下角发送钮可能点不到 */
  overflow: visible;
}
#viewChat .workspace.filled .composer-dock {
  overflow-x: visible;
}
/* 溢出时给 track 右侧留出 chevron，避免盖住最后一个 pill 文字 */
#viewHome .composer-bar .ofs-wrap.ofs-overflow .ofs-track,
#viewChat .composer-bar .ofs-wrap.ofs-overflow .ofs-track {
  padding-right: 30px;
  box-sizing: border-box;
}
#viewHome .composer-bar .bar-right .send-btn,
#viewChat .composer-bar .bar-right .send-btn,
#viewChat .workspace.empty .composer-bar .bar-right .send-btn,
#viewChat .workspace.filled .composer-bar .bar-right .send-btn,
#viewSocial .wx-composer-bar .send-btn {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 0;
  flex-shrink: 0;
  transform: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.62);
  box-shadow: none;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
}
/* 彻底隐藏时长 range，避免当「滑竿条」露出来 */
.sel-duration-range,
input.sel-duration-range,
.pill-dur .sel-duration-range,
.sr-only.sel-duration-range {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* 可发送默认：略清晰的描边（含 bar-right 内发送钮） */
#viewHome .composer-bar .send-btn:not(:disabled),
#viewChat .composer-bar .send-btn:not(:disabled),
#viewSocial .wx-composer-bar .send-btn:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.78);
  color: #fff;
}
#viewHome .composer-bar .send-btn:not(:disabled):hover,
#viewChat .composer-bar .send-btn:not(:disabled):hover,
#viewSocial .wx-composer-bar .send-btn:not(:disabled):hover {
  color: #121216;
  border-color: transparent;
  background: transparent;
  transform: scale(1.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}
#viewHome .composer-bar .send-btn:not(:disabled):active,
#viewChat .composer-bar .send-btn:not(:disabled):active,
#viewSocial .wx-composer-bar .send-btn:not(:disabled):active {
  transform: scale(0.96);
}
#viewHome .composer-bar .send-btn:not(:disabled):hover::after,
#viewChat .composer-bar .send-btn:not(:disabled):hover::after,
#viewSocial .wx-composer-bar .send-btn:not(:disabled):hover::after {
  opacity: 1;
  transform: scale(1);
}
#viewHome .composer-bar .send-btn:disabled,
#viewChat .composer-bar .send-btn:disabled,
#viewSocial .wx-composer-bar .send-btn:disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 1;
  box-shadow: none;
  transform: none;
}

/* 时长滑杆 */
.pill-dur-slider {
  gap: 8px !important;
  padding: 3px 10px !important;
  min-width: 120px;
}
.pill-dur-slider .sel-duration-range {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  cursor: pointer;
}
.pill-dur-slider .sel-duration-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  border: none;
}
.pill-dur-slider .sel-duration-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.pill-dur-slider .dur-label {
  min-width: 28px;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: inherit;
  font-weight: 600;
}
.composer-hint {
  text-align: center;
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--faint);
  width: var(--composer-w);
}
.workspace.filled .composer-hint { display: none; }

/* ── 时间线（左栏内流式，不居中；与编辑器同左偏移） ── */
.timeline {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* 末卡空隙由 .tl-bottom-spacer 承担 */
  padding-bottom: 0;
  align-items: stretch;
}
.tl-day {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
.tl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 预览/加载卡一律左对齐 */
  gap: 12px;
  width: 100%;
}
.tl-card > .tl-head {
  width: 100%;
  align-self: stretch;
}

/* Agent 对话气泡（参考：认真思考中 → 思考完成 → 正文） */
.tl-card--chat {
  gap: 6px;
  max-width: min(720px, 100%);
}
.tl-card--chat.tl-card--user {
  align-items: flex-end;
  align-self: flex-end;
  margin-left: auto;
}
.tl-card--chat.tl-card--assistant {
  align-items: flex-start;
  width: 100%;
  max-width: min(640px, 100%);
}
.tl-chat-bubble {
  max-width: min(560px, 92%);
  padding: 6px 11px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.42;
  word-break: break-word;
  white-space: pre-wrap;
}
/*
 * 用户气泡：外层只负责玻璃+padding，内层 .tl-bubble-clip 裁 2 行。
 * 根因：line-clamp 与 padding 在同一节点时，第 3 行字顶会渗进 padding 成「白点」。
 * 展示文已由 JS 截到约 2 行；内层再封死高度，双保险。
 */
.tl-chat-bubble.user {
  --ub-lh: 1.4;
  --ub-pad-y: 8px;
  color: rgba(255, 255, 255, 0.96) !important;
  border-radius: 10px;
  white-space: normal;
  display: block; /* 勿在带 padding 的节点上用 -webkit-box */
  overflow: hidden !important;
  cursor: default;
  line-height: var(--ub-lh) !important;
  box-sizing: border-box !important;
  padding: var(--ub-pad-y) 11px !important;
  max-width: min(640px, 94%);
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  /* 外层高度 = 内层 2 行 + 上下 padding，绝不给第 3 行留缝 */
  max-height: calc(var(--ub-lh) * 2 * 1em + var(--ub-pad-y) * 2) !important;
}
.tl-chat-bubble.user .tl-bubble-clip,
.tl-result-title .tl-bubble-clip {
  margin: 0;
  padding: 0 !important;
  border: 0;
  line-height: var(--ub-lh, 1.4);
  max-height: calc(var(--ub-lh, 1.4) * 2 * 1em) !important;
  overflow: hidden !important;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  /* 无 padding 的内层做 line-clamp，才不会渗第 3 行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
}
.tl-user-row .tl-chat-bubble.user {
  max-width: min(480px, 78vw);
}
.tl-chat-bubble.assistant {
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  max-width: 100%;
  border-radius: 0;
}

/* 思考中：认真思考中 · 后缀横向轮播（结束后整块移除） */
.agent-think-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(210, 218, 230, 0.88);
  padding: 2px 0;
  max-width: min(560px, 96%);
  flex-wrap: nowrap;
}
.agent-think-row.is-active {
  color: rgba(180, 210, 255, 0.95);
}
.agent-think-row.is-done {
  color: rgba(160, 170, 185, 0.85);
  gap: 8px;
  flex-wrap: wrap;
}
.agent-think-prefix {
  letter-spacing: 0.02em;
  color: rgba(200, 215, 240, 0.92);
  flex-shrink: 0;
  white-space: nowrap;
}
.agent-think-sep {
  color: rgba(160, 180, 210, 0.45);
  flex-shrink: 0;
}
.agent-think-roll {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.35em;
  overflow: hidden;
  min-width: 0;
}
.agent-think-roll-text {
  display: inline-block;
  color: rgba(170, 195, 230, 0.88);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.agent-think-roll-text.is-out {
  opacity: 0;
  transform: translateY(-7px);
}
.agent-think-roll-text.is-in {
  animation: thinkRollIn 0.28s ease-out;
}
@keyframes thinkRollIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.agent-think-text {
  letter-spacing: 0.02em;
}
.tl-card--thinking {
  min-height: 28px;
  animation: thinkPanelIn 0.22s ease-out;
}
@keyframes thinkPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.agent-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(120, 180, 255, 0.25);
  border-top-color: #7eb6ff;
  border-right-color: #9ad0ff;
  animation: agent-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes agent-spin {
  to { transform: rotate(360deg); }
}
.agent-think-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(160, 170, 185, 0.55);
  position: relative;
  flex-shrink: 0;
  opacity: 0.85;
}
.agent-think-check::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid rgba(180, 190, 205, 0.9);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.agent-reply-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-done-pill {
  border: none;
  background: transparent;
  color: rgba(150, 160, 175, 0.9);
  font-size: 0.82rem;
  padding: 0;
  cursor: default;
  letter-spacing: 0.02em;
}
.agent-done-pill::after {
  content: " ›";
  opacity: 0.7;
}
.agent-reply-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: min(680px, 100%);
}
/* Agent 富文本：首尾段落在外，中间重点收进一个色块 */
.agent-reply-body .md-rich {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-reply-body .md-p {
  margin: 0;
  color: rgba(235, 238, 245, 0.9);
  line-height: 1.7;
  font-size: 0.94rem;
}
/* 中间重点：单一玻璃色块，列表/小标题都装里面 */
.agent-reply-body .md-panel {
  margin: 2px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-reply-body .md-panel .md-p {
  font-size: 0.9rem;
  color: rgba(220, 226, 236, 0.88);
}
.agent-reply-body .md-h {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(248, 250, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-reply-body .md-h::before {
  content: "";
  width: 3px;
  height: 0.85em;
  border-radius: 99px;
  flex-shrink: 0;
  background: var(--brand-grad);
}
/* 列表在 panel 内：无第二层底色 */
.agent-reply-body .md-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}
.agent-reply-body .md-list > li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 14px;
  color: rgba(220, 226, 236, 0.9);
  font-size: 0.9rem;
  line-height: 1.6;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.agent-reply-body .md-list > li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.agent-reply-body .md-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.55);
}
.agent-reply-body .md-list.is-ol {
  counter-reset: mdol;
}
.agent-reply-body .md-list.is-ol > li {
  counter-increment: mdol;
  padding-left: 1.75rem;
}
.agent-reply-body .md-list.is-ol > li::before {
  content: counter(mdol) ".";
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  top: 0.7em;
  left: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(34, 211, 238, 0.85);
  transform: none;
}
.agent-reply-body .md-li-title {
  font-weight: 600;
  color: rgba(245, 248, 255, 0.96);
  margin-bottom: 4px;
  line-height: 1.45;
}
.agent-reply-body .md-li-body {
  color: rgba(200, 208, 220, 0.88);
  font-size: 0.88rem;
  line-height: 1.65;
}
.agent-reply-body .md-li-label {
  display: inline;
  font-weight: 600;
  color: rgba(230, 236, 248, 0.98);
  margin-right: 2px;
}
.agent-reply-body .md-li-label::after {
  content: "：";
  font-weight: 500;
  color: rgba(160, 175, 195, 0.75);
}
.agent-reply-body strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
}
.agent-reply-body em {
  font-style: normal;
  color: rgba(210, 220, 235, 0.92);
}
.agent-reply-body .md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(220, 230, 245, 0.92);
}
.agent-reply-body .md-phrase {
  color: rgba(200, 215, 235, 0.95);
}
.agent-reply-err {
  font-size: 0.82rem;
  color: #f0a0a8;
  opacity: 0.95;
}
.agent-reply-foot {
  font-size: 0.75rem;
  color: rgba(140, 150, 165, 0.75);
  margin-top: 2px;
}
.agent-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 2px;
}
.agent-suggest-lab,
.tl-suggest-lab {
  font-size: 0.8rem;
  color: rgba(150, 160, 175, 0.85);
}
/* 纯聊天建议：无下划线 */
.agent-suggest-chip {
  border: none;
  background: transparent;
  color: rgba(160, 190, 255, 0.95);
  border-radius: 0;
  padding: 0;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.agent-suggest-chip:hover {
  color: #d4e4ff;
  background: transparent;
  opacity: 1;
}
/* 结果卡建议：与重新编辑/再次生成/⋯ 同一行，在 ⋯ 前面 */
.tl-job-suggest {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  width: auto;
  flex-shrink: 0;
  z-index: 5;
}
.tl-suggest-toggle.tl-act {
  gap: 5px;
  padding: 0 8px;
}
/* 建议展开：仅该钮轻亮，不整条发色 */
.tl-job-suggest.is-open .tl-suggest-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* + 号：完整字形，不被圆形裁切 */
.tl-suggest-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: rgba(200, 215, 240, 0.95);
  transform: translateY(-0.5px);
}
.tl-job-suggest.is-open .tl-suggest-plus {
  transform: translateY(-0.5px) rotate(45deg);
  color: #eef4ff;
}
.tl-suggest-ico {
  display: none !important; /* 旧圆圈+已弃用 */
}
.tl-suggest-toggle-lab {
  opacity: 0.95;
}
/* 数量：无彩色，细描边圆标，与按钮灰阶一致 */
.tl-suggest-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(175, 185, 205, 0.88);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  flex-shrink: 0;
}
.tl-job-suggest.is-open .tl-suggest-count {
  color: rgba(210, 220, 240, 0.95);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}
/* 展开面板：默认藏在按钮旁；打开后 JS 挂到 body + fixed，紧贴「建议」按钮 */
.tl-suggest-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 100080;
  width: min(280px, 72vw);
  padding: 10px;
  border-radius: var(--glass-radius);
  box-sizing: border-box;
  max-height: min(360px, 50vh);
  overflow-y: auto;
}
/* 挂到 body 后的浮层 */
body > .tl-suggest-panel {
  position: fixed !important;
  margin: 0;
}
.tl-suggest-panel[hidden] {
  display: none !important;
}
.tl-suggest-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.tl-suggest-lab {
  font-size: 0.72rem;
  color: rgba(160, 170, 185, 0.88);
  font-weight: 500;
}
.tl-suggest-close {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(160, 175, 200, 0.85);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.tl-suggest-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.tl-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl-suggest-chip {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  color: rgba(200, 215, 245, 0.95);
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tl-suggest-chip:hover {
  color: #eef4ff;
}
.tl-suggest-chip-txt {
  flex: 1;
  min-width: 0;
}
.tl-suggest-chip-go {
  flex-shrink: 0;
  opacity: 0.65;
  font-size: 0.85em;
}
/* 兼容旧 class */
.tl-suggest-link {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: rgba(165, 195, 255, 0.92);
  cursor: pointer;
}
/* Agent 操作：重新生成 / 引用 / 更多→删除 */
.agent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
/* 圆角约为原胶囊的 ~20%（999→约 8–10px） */
.agent-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(210, 218, 230, 0.92);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.agent-act-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.agent-act-btn.agent-act-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 1rem;
  border-radius: 8px;
}
.tl-result-bar .tl-more-btn.agent-act-btn {
  border-radius: 8px;
}
.agent-act-regen {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  position: relative;
  opacity: 0.85;
}
.agent-act-regen::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 1px;
  border: 3px solid transparent;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
  transform: rotate(-20deg);
  opacity: 0.9;
}
.agent-act-quote {
  font-family: "MiSans", "PingFang SC", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
}
.agent-act-dots {
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.9;
}
.agent-more-wrap {
  position: relative;
}
.agent-more-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  min-width: 120px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(28, 30, 38, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 20;
}
.agent-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(230, 235, 245, 0.95);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.84rem;
  cursor: pointer;
  text-align: left;
}
.agent-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.agent-more-item.danger {
  color: #f0a8b0;
}
.agent-act-trash {
  width: 12px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-top: none;
  border-radius: 0 0 2px 2px;
  position: relative;
  opacity: 0.9;
  display: inline-block;
}
.agent-act-trash::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.agent-act-trash::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -7px;
  width: 6px;
  height: 3px;
  border: 1.5px solid currentColor;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

/* 输入区引用条：正常文档流，独占一行，绝不与 textarea 叠字 */
#composerChat.has-quote {
  overflow: visible !important;
}
#composerChat .composer-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}
/* 引用占满第一行；下方 ref-stack + textarea 并排 */
.agent-quote-bar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 2;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px 7px 12px;
  min-height: 32px;
  height: auto;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8f9fc;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  pointer-events: auto;
  box-shadow: none;
  order: -1;
}
.agent-quote-bar.hidden {
  display: none !important;
}
.agent-quote-ico {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  line-height: 1;
}
.agent-quote-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(200, 210, 225, 0.78);
  font-size: inherit;
  font-family: inherit;
}
.agent-quote-x {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(248, 249, 252, 0.7);
  width: 22px;
  height: 22px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 3;
  font-family: inherit;
}
.agent-quote-x:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8f9fc;
  border-color: rgba(255, 255, 255, 0.28);
}
#composerChat.has-quote #promptChat {
  /* 不再用 padding 给绝对定位腾位 */
  padding-top: 4px !important;
  color: #f8f9fc;
  flex: 1;
  min-width: 0;
}
#composerChat .composer-main > #promptChat,
#composerChat .composer-main > .ref-stack {
  position: relative;
  z-index: 1;
}

/* 用户气泡 · 重新编辑在气泡左侧，与气泡垂直居中，仅悬停显示 */
.tl-card--chat.tl-card--user {
  align-items: flex-end;
  width: auto;
  max-width: min(560px, 92%);
  margin-left: auto;
}
.tl-user-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}
/* max-width 已在上方 .tl-user-row .tl-chat-bubble.user 统一声明 */
.agent-reedit-btn {
  flex-shrink: 0;
  order: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(200, 210, 225, 0.9);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl-card--user:hover .agent-reedit-btn,
.tl-user-row:hover .agent-reedit-btn,
.agent-reedit-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.agent-reedit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.agent-reedit-ico {
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
  opacity: 0.9;
}
.agent-reedit-ico::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 6px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
}

.tl-card--tool-pending {
  opacity: 0.9;
}
.agent-fail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e07078;
  flex-shrink: 0;
}
.tl-card--assistant.is-fail .agent-think-text {
  color: rgba(240, 170, 176, 0.95);
}

/* 结果卡 · 对齐参考排版 */
.tl-card--result {
  gap: 8px;
  max-width: min(960px, 100%);
}
.tl-result-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 2;
}
/*
 * 正确排版（图2）：提示词约 2 行 + …
 * 元信息紧贴 … 后面（同一行内联），不要单独成行、也不要被 flex 顶到最右侧。
 */
.tl-result-headline {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(245, 247, 250, 0.92);
  display: block; /* 内联流：title + meta 紧挨 */
  /* 必须 visible：否则「详细信息」浮层被 max-height 裁掉，只剩 help 光标 */
  overflow: visible;
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 100%;
  max-height: none;
}
.tl-result-title {
  --ub-lh: 1.45;
  font-weight: 500;
  color: rgba(245, 247, 250, 0.92);
  display: inline; /* 与 meta 同一行流，… 后立刻接元信息 */
  overflow: visible;
  width: auto;
  max-width: none;
  max-height: none !important;
  cursor: default;
  line-height: 1.45;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
}
/* 标题内 clip：内联，不再撑满整行把 meta 挤走 */
.tl-result-title .tl-bubble-clip {
  display: inline !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal;
  word-break: break-word;
  vertical-align: baseline;
}
/* 元信息：紧贴 …（约半个字间距） */
.tl-result-meta-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-left: 0.35em; /* 紧挨 …，不要大空隙 */
  max-width: none;
  white-space: nowrap;
  line-height: 1.45;
  vertical-align: baseline;
}
.tl-result-meta-inline {
  display: inline;
  font-weight: 400;
  font-size: 0.82rem;
  color: rgba(160, 170, 185, 0.9);
  white-space: nowrap;
}
.tl-result-meta-row .tl-detail-tip {
  display: inline-flex;
  vertical-align: baseline;
}
.tl-info-i {
  font-style: normal;
  opacity: 0.75;
  font-size: 0.85em;
}

/* 媒体网格（单图也用，多图可扩） */
.tl-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
/* 单图：随主栏变宽，避免中间一大片空（有资产栏时仍可用到约半宽） */
.tl-result-grid:has(.tl-media-tile:only-child) {
  grid-template-columns: minmax(220px, min(480px, 100%));
}
.workspace.drawer-open .tl-result-grid:has(.tl-media-tile:only-child) {
  grid-template-columns: minmax(220px, min(420px, 100%));
}
.tl-media-tile {
  position: relative;
  display: block;
  width: 100%;
  /* 默认竖图；单条结果由 JS 写入 --tl-ar（16:9 / 9:16 / 1:1…） */
  aspect-ratio: var(--tl-ar, 3 / 4);
  max-width: min(var(--tl-w, 100%), 100%);
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.tl-media-tile.landscape {
  --tl-ar: 16 / 9;
  --tl-w: 420px;
}
.tl-media-tile.portrait {
  --tl-ar: 3 / 4;
  --tl-w: 280px;
}
.tl-media-tile.square {
  --tl-ar: 1 / 1;
  --tl-w: 320px;
}
/* 单条成片：用真实画幅宽度，避免网格把 16:9 挤成竖框 */
.tl-result-grid:has(.tl-media-tile:only-child) .tl-media-tile {
  width: min(var(--tl-w, 420px), 100%);
}
.tl-media-tile img,
.tl-media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 不再展示「AI 生成」角标（含历史 DOM / Lovart） */
.tl-ai-badge {
  display: none !important;
}
/* 失败格：居中图标 + 「失败」 */
.tl-media-tile.is-fail {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 130, 130, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, rgba(255, 70, 70, 0.1), transparent 68%),
    linear-gradient(180deg, rgba(28, 22, 24, 0.95), #101014 100%);
  color: rgba(255, 190, 190, 0.92);
  cursor: default;
  overflow: hidden;
  pointer-events: none;
}
.tl-fail-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 140, 140, 0.5);
  background: rgba(255, 70, 70, 0.12);
  box-shadow: 0 0 0 6px rgba(255, 80, 80, 0.06);
  position: relative;
  flex-shrink: 0;
}
.tl-fail-mark::before,
.tl-fail-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: rgba(255, 185, 185, 0.95);
  border-radius: 1px;
}
.tl-fail-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.tl-fail-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.tl-fail-lab {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 205, 205, 0.9);
  text-align: center;
  line-height: 1;
}
.tl-media-tile .tl-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

/* 建议：见上方 .tl-job-suggest 折叠样式（单一定义） */

/*
 * 结果卡操作：无外壳胶囊，仅文字 + icon
 * 默认克制；hover / 展开仅当前钮浅底，避免整条发亮发乱
 */
.tl-result-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  max-width: 100%;
  padding: 0 !important;
  width: auto;
  box-sizing: border-box;
  /* 彻底去掉工具条壳 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.tl-result-actions.ofs-track {
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ofs-wrap:has(> .tl-result-actions) {
  overflow: visible !important;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ofs-wrap:has(> .tl-result-actions) > .ofs-nudge {
  display: none !important;
}
.tl-result-actions > * {
  flex-shrink: 0;
}
.tl-act {
  appearance: none;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(220, 228, 240, 0.78);
  padding: 0 8px;
  min-height: 28px;
  height: 28px;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
  opacity: 1;
}
.tl-act:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  opacity: 1;
}
.tl-act:active {
  background: rgba(255, 255, 255, 0.12) !important;
}
.tl-act-more {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* ⋯ 菜单打开时保持轻选中 */
.tl-more.open > .tl-act-more {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.tl-act-ico {
  width: 11px;
  height: 11px;
  position: relative;
  flex-shrink: 0;
  opacity: 0.9;
}
.tl-act-edit {
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.tl-act-edit::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-40deg);
}
.tl-act-regen {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
}
.tl-act-regen::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  border: 3px solid transparent;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
  transform: rotate(-25deg);
}
.tl-result-actions .tl-more {
  position: relative;
}

/* 详细信息：悬停浮层（父级不得 overflow:hidden，否则被裁成「只有 ? 光标」） */
.tl-detail-tip {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: baseline;
  white-space: nowrap;
  z-index: 40;
}
.tl-detail-trigger {
  cursor: pointer; /* 不用 help，避免变成系统 ? 号 */
  font-size: 0.78rem;
  color: rgba(155, 175, 210, 0.92);
  user-select: none;
  white-space: nowrap;
}
.tl-detail-tip:hover .tl-detail-trigger,
.tl-detail-tip:focus-within .tl-detail-trigger {
  color: #d4e4ff;
}
.tl-detail-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 100060;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 20px));
  padding: 12px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  background: rgba(28, 30, 38, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* 避免被其它层盖住 */
  isolation: isolate;
}
.tl-detail-tip .tl-detail-pop {
  display: none !important;
}
.tl-detail-tip:hover .tl-detail-trigger,
.tl-detail-tip:focus-within .tl-detail-trigger {
  color: #d4e4ff;
}
/* 结果卡允许详情浮层溢出 */
.tl-card--result {
  overflow: visible !important;
}
.tl-card--result .tl-result-head {
  overflow: visible !important;
  z-index: 8;
}
.tl-card--result .tl-result-meta-row {
  overflow: visible !important;
  position: relative;
  z-index: 30;
}
.tl-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.tl-detail-row .k {
  color: rgba(170, 178, 192, 0.88);
  flex-shrink: 0;
}
.tl-detail-row .v {
  color: rgba(240, 242, 248, 0.95);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
body > .tl-detail-pop.is-open {
  position: fixed !important;
  z-index: 10120 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  max-width: min(320px, calc(100vw - 20px));
}
.tl-prompt {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  word-break: break-word;
}
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tl-tag {
  font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
}
.tl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.tl-status.running { color: #c8d0e0; }
.tl-status.done { color: var(--ok); }
.tl-status.failed { color: var(--err); }

/* 进行中进度 */
.tl-prog {
  max-width: 360px;
  margin: 2px 0 4px;
}
.tl-prog-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.tl-prog-track > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #a8b4c8, #d8dee8);
  transition: width 0.45s ease;
}
.tl-prog-row {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.7rem;
  color: var(--faint);
}
.tl-prog-row .pct {
  font-variant-numeric: tabular-nums;
  color: #c8d0e0;
  font-weight: 600;
}

/* 成片预览：一律左对齐；画幅用 --tl-ar / --tl-w（由 JS 按 3:4、4:3、16:9… 写入） */
.tl-media {
  position: relative;
  display: block;
  border: none;
  padding: 0;
  background: #0a0a0c;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  /* 真实画幅 */
  aspect-ratio: var(--tl-ar, 16 / 9);
  width: min(var(--tl-w, 400px), 88vw);
  max-width: 100%;
  margin: 0;
  align-self: flex-start;
}
.tl-media.portrait {
  /* fallback 若未注入变量 */
  --tl-ar: 3 / 4;
  --tl-w: 280px;
}
.tl-media.landscape {
  --tl-ar: 16 / 9;
  --tl-w: 420px;
}
.tl-media.square {
  --tl-ar: 1 / 1;
  --tl-w: 320px;
}
.tl-media.is-image,
.tl-media.is-video {
  /* 与上面一致；避免旧规则把 4:3 压成 16:9 居中 letterbox */
  max-height: min(72vh, 640px);
}
.tl-media.is-audio {
  aspect-ratio: auto;
  width: min(360px, 88vw);
  height: auto;
  padding: 16px 14px 12px;
  cursor: default;
  background: rgba(255, 255, 255, 0.04);
}
.tl-media.is-audio audio {
  display: block;
  width: 100%;
  margin-top: 8px;
}
.tl-media video,
.tl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  background: #0a0a0c;
}
.tl-media.is-image img {
  /* 画幅盒已正确，cover 铺满，避免 contain 在宽盒内「假居中」 */
  object-fit: cover;
}
.tl-media .tl-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.tl-media .tl-vbadge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.tl-media .tl-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.48);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tl-media .tl-play .ico { margin-left: 2px; }
.tl-media:hover .tl-play {
  transform: translate(-50%, -50%) scale(1.05);
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.85);
}
.tl-media .tl-dur {
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* 标题 + 标签 + 时间 + 操作：紧贴时间，自适应不拉满留白 */
.tl-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  margin-bottom: 10px;
  width: fit-content;
  max-width: 100%;
}
.tl-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.tl-title {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(320px, 42vw);
  flex-shrink: 1;
}
.tl-head .tl-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  flex-shrink: 0;
  margin: 0;
}
.tl-head .tl-tag {
  font-size: 0.64rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  white-space: nowrap;
}
.tl-time {
  font-size: 0.7rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 操作：⋯ 菜单（再次生成 / 重新编辑 / 下载 / 删除） */
.tl-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}
.tl-actions .btn {
  appearance: none;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  transition: 0.15s ease;
  white-space: nowrap;
}
.tl-actions .btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.tl-more {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tl-more-btn {
  appearance: none;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: 999px;
  width: 30px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: 0.15s ease;
  line-height: 1;
}
.tl-more-btn:hover,
.tl-more.open .tl-more-btn {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.tl-more-dots {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transform: translateY(-1px);
  user-select: none;
}
.tl-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  border-radius: 12px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: studioDialogIn 0.14s ease-out;
}
.tl-more-menu.hidden {
  display: none !important;
}
.tl-more-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.tl-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.tl-more-item .ico {
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--muted);
}
.tl-more-item:hover .ico {
  color: var(--text);
  opacity: 1;
}
.tl-more-item.danger {
  color: #f0a0a8;
}
.tl-more-item.danger .ico {
  color: #f0a0a8;
}
.tl-more-item.danger:hover {
  background: rgba(224, 112, 120, 0.12);
}
/* 旧结构兜底 */
.tl-prompt { font-size: 0.86rem; color: rgba(255,255,255,0.78); }
.tl-err {
  font-size: 0.76rem;
  color: #ffb4bc;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
}
.tl-err-policy {
  max-width: 420px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #2a2a2e;
  color: #ececef;
  font-family: inherit;
  line-height: 1.55;
}
.tl-err-policy strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tl-err-policy p {
  margin: 0;
  font-size: 13px;
  color: #b8b8be;
}

/* 生成中 loading：Grainient 色系 CSS 底 + WebGL Grainient（无激光/极光扫光） */
/* https://reactbits.dev/backgrounds/grainient */
.load-card {
  position: relative;
  display: block;
  width: min(var(--tl-w, 400px), 88vw);
  max-width: 100%;
  aspect-ratio: var(--tl-ar, 16 / 9);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  align-self: flex-start;
  margin: 0;
}
.load-card.portrait {
  --tl-ar: 3 / 4;
  --tl-w: 280px;
}
.load-card.landscape {
  --tl-ar: 16 / 9;
  --tl-w: 420px;
}
.load-card.square {
  --tl-ar: 1 / 1;
  --tl-w: 320px;
}
/* CSS 色粉底：对齐 Grainient 默认色，无 blob/激光 sheen */
.load-grain-css,
.load-aurora-css {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 20% 80%, rgba(255, 146, 200, 0.55), transparent 55%),
    radial-gradient(ellipse 75% 65% at 85% 25%, rgba(91, 154, 255, 0.6), transparent 55%),
    radial-gradient(ellipse 70% 60% at 45% 40%, rgba(119, 255, 210, 0.35), transparent 50%),
    linear-gradient(165deg, #5b9aff 0%, #a878ff 42%, #ff92c8 78%, #77ffd2 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 160% 160%;
  animation: loadGrainShift 8s ease-in-out infinite alternate;
}
/* 细颗粒噪点，接近 Grainient grain，非激光扫光 */
.load-grain-css::after,
.load-aurora-css::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes loadGrainShift {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 20%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%, 100% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .load-grain-css,
  .load-aurora-css {
    animation: none;
  }
}
/* 旧极光 blob / 激光 sheen：彻底禁用 */
.load-aurora-blob,
.load-aurora-sheen {
  display: none !important;
  animation: none !important;
}
/* Grainient WebGL host（React Bits） */
.grainient-host,
.aurora-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.grainient-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.grainient-host.has-webgl ~ .load-grain-css,
.grainient-host.has-webgl ~ .load-aurora-css,
.load-card:has(.grainient-host.has-webgl) .load-grain-css,
.load-card:has(.grainient-host.has-webgl) .load-aurora-css,
.lovart-node-loading:has(.grainient-host.has-webgl) .load-grain-css,
.lovart-node-loading:has(.grainient-host.has-webgl) .load-aurora-css {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease;
}
.grainient-host canvas,
.grainient-container canvas,
.aurora-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}
.aurora-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
/* 兼容旧 class（若缓存残留） */
.line-waves-host,
.line-waves-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.load-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  background: transparent;
  z-index: 1;
}
/* 底部进度条 */
.load-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 34px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.load-bar > i {
  display: block;
  height: 100%;
  width: var(--p, 8%);
  min-width: 6%;
  max-width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff8a4c, #c084fc, #7dd3fc);
  background-size: 200% 100%;
  animation: loadBarShine 1.6s linear infinite;
  transition: width 0.45s ease;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.45);
}
.load-caption {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 3;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.88);
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
}
/* 高光随进度方向从左往右扫（原先 0→200% 视觉上像往左走） */
@keyframes loadBarShine {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}
/* 旧 loading / strands 兜底隐藏 */
.strands-wrap,
.load-aurora,
.load-sweep { display: none !important; }

/* ── 资产：铺满主内容区（红线框），卡片随浏览器自适应放大 ── */
.page-pad {
  padding: 28px 24px 48px;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
/* 资产页：取消居中窄栏，吃满主区宽度 */
#viewAssets .page-pad {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 22px clamp(16px, 2.2vw, 36px) 40px;
}
.assets-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
  width: 100%;
}
.assets-head h2 { margin: 0; font-size: 1.15rem; }
.muted { margin: 4px 0 0; color: var(--faint); font-size: 0.82rem; }
.assets-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 资产页模块切换：生成记录 / 主体 */
.assets-modules {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.assets-module {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 11px;
  cursor: pointer;
  transition: 0.15s ease;
}
.assets-module:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.assets-module.on {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.assets-module-panel.hidden { display: none !important; }
.assets-module-panel.on { display: block; }
.assets-page .subjects-tabs { margin-bottom: 14px; }
.search-input {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 12px; color: var(--text);
  font-size: 0.8rem; min-width: 180px;
}
.search-input:focus { outline: 1px solid rgba(200,210,230,0.3); }

/* 筛选按钮：默认收起面板，点击展开 */
.assets-filter-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.15s ease;
  white-space: nowrap;
}
.assets-filter-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.assets-filter-toggle.open {
  color: #121216;
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}
.assets-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}
.assets-filter-toggle.open .assets-filter-dot {
  background: #ea580c;
  box-shadow: none;
}

/* 类型 / 时间筛选（默认 .hidden，点按钮展开） */
.assets-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: assetsFilterIn 0.18s ease;
}
.assets-filters.hidden { display: none !important; }
@keyframes assetsFilterIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.assets-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.assets-filter-label {
  font-size: 0.68rem;
  color: var(--faint);
  margin-right: 4px;
  min-width: 2em;
}
.assets-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.15s ease;
}
.assets-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
.assets-chip.on {
  color: #121216;
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}
.assets-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.assets-sort select {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.72rem;
  padding: 4px 28px 4px 11px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.assets-sort select:focus { outline: 1px solid rgba(200, 210, 230, 0.3); }

/* 按日分组流：全宽 */
.assets-feed {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
}
.assets-day {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.assets-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, var(--bg) 70%, transparent);
}
.assets-day-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}
.assets-day-count {
  font-size: 0.72rem;
  color: var(--faint);
}
.assets-load-more {
  display: flex;
  justify-content: center;
  padding: 2px 0 12px;
}
.assets-load-more .btn {
  min-width: 112px;
}
.assets-load-more .btn:disabled {
  cursor: wait;
  opacity: 0.58;
}
/* 通用瀑布（其它页兜底） */
.masonry {
  column-count: 5;
  column-gap: 8px;
}
/* 资产瀑布：按真实画幅高度堆叠，避免横版视频被格子撑出大块黑底 */
#viewAssets .assets-day .masonry,
#viewAssets .masonry {
  display: block;
  column-count: 4;
  column-gap: 14px;
  width: 100%;
}
@media (min-width: 1400px) {
  #viewAssets .assets-day .masonry,
  #viewAssets .masonry { column-count: 5; column-gap: 16px; }
}
@media (min-width: 1800px) {
  #viewAssets .assets-day .masonry,
  #viewAssets .masonry { column-count: 6; column-gap: 18px; }
}
@media (max-width: 1100px) {
  #viewAssets .assets-day .masonry,
  #viewAssets .masonry { column-count: 3; }
}
@media (max-width: 900px) {
  #viewAssets .assets-day .masonry,
  #viewAssets .masonry { column-count: 2; column-gap: 12px; }
  .assets-sort { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  #viewAssets .assets-day .masonry,
  #viewAssets .masonry { column-count: 2; column-gap: 10px; }
}
#viewAssets .card {
  break-inside: avoid;
  display: block;
  vertical-align: top;
  margin: 0 0 14px;
  width: 100%;
  height: auto;
  padding: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(255,224,138,.35), rgba(255,180,208,.28) 42%, rgba(203,182,255,.3) 70%, rgba(155,232,255,.38)) border-box;
  transition: box-shadow .2s ease;
}
#viewAssets .card:hover {
  transform: none;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--brand-grad) border-box;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#viewAssets .card-thumb {
  aspect-ratio: auto !important;
  height: auto;
  line-height: 0;
  background: transparent;
}
#viewAssets .card-thumb.portrait,
#viewAssets .card-thumb.landscape,
#viewAssets .card-thumb.square {
  aspect-ratio: auto !important;
}
/* No image/video means no intrinsic height: keep placeholders and their actions visible. */
#viewAssets .card-no-preview .card-thumb {
  height: 104px;
  min-height: 104px;
  line-height: 20px;
}
#viewAssets .card-no-preview .card-del {
  opacity: 1;
  pointer-events: auto;
}
#viewAssets .asset-broken-icon { color: #9297a3; opacity: .8; }
#viewAssets .card-thumb .card-play {
  background: linear-gradient(135deg, #ffffff30, #c5d9ef16);
  border: 1px solid #ffffff55;
  color: #fff;
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: inset 0 1px 0 #ffffff40, 0 2px 8px #0003;
}
#viewAssets .card-thumb .card-play .ico { filter: drop-shadow(0 1px 2px #0009); }
#viewAssets .card-thumb img,
#viewAssets .card-thumb video {
  width: 100%;
  height: auto !important;
  aspect-ratio: var(--tl-ar, 3/4);
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: top;
  background: transparent;
}
#viewAssets .card-thumb.landscape img,
#viewAssets .card-thumb.landscape video {
  aspect-ratio: var(--tl-ar, 16/9);
}
#viewAssets .card-thumb.square img,
#viewAssets .card-thumb.square video {
  aspect-ratio: var(--tl-ar, 1/1);
}
#viewAssets .card-body {
  padding: 8px 10px 9px;
  line-height: 1.4;
}
#viewAssets .card-body .t {
  display: none; /* 资产页不展示提示词 */
}
#viewAssets .card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
#viewAssets .card-body .s {
  font-size: 0.68rem;
  margin-top: 0;
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--faint);
}
#viewAssets .card-body .badge {
  margin-top: 0;
  flex-shrink: 0;
}
#viewAssets .card-play {
  width: 42px;
  height: 42px;
}

.card {
  break-inside: avoid; margin: 0 0 8px; width: 100%;
  text-align: left; border: 1px solid var(--line); background: var(--panel);
  border-radius: 10px; overflow: hidden; cursor: pointer; color: inherit;
  padding: 0; display: block; transition: 0.15s ease;
}
.card:hover { border-color: rgba(220,225,235,0.28); transform: translateY(-1px); }
.card-thumb {
  width: 100%; background: #0a0a0c; display: block; position: relative; overflow: hidden;
}
.card-thumb.portrait { aspect-ratio: var(--tl-ar, 3/4); }
.card-thumb.landscape { aspect-ratio: var(--tl-ar, 16/9); }
.card-thumb.square { aspect-ratio: var(--tl-ar, 1/1); }
.card-thumb video,
.card-thumb img,
.card-thumb .ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-thumb .ph {
  display: grid; place-items: center; color: var(--faint); font-size: 0.7rem;
  position: absolute; inset: 0; background: linear-gradient(160deg, #15151a, #0a0a0c);
}
.card-thumb .ph-audio {
  color: rgba(255, 255, 255, 0.55);
}
.card-thumb .card-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-grad); border: 0; color: #121216;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.card-thumb .card-play .ico { margin-left: 1px; }
.card-thumb .card-vbadge {
  position: absolute; top: 6px; left: 6px;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; pointer-events: none;
}
.card-thumb .card-kind {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.58);
  color: #f4f4f0;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
/* 资产页删除：右上角，默认淡、hover 显 */
.card-thumb .card-del {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.card:hover .card-thumb .card-del,
.card:focus-within .card-thumb .card-del,
.card-thumb .card-del:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.card-thumb .card-del:hover {
  background: rgba(220, 60, 70, 0.88);
  border-color: rgba(255, 160, 160, 0.45);
}
.card-thumb .card-del:focus-visible {
  outline: 2px solid rgba(255, 120, 120, 0.7);
  outline-offset: 1px;
}
/* 触屏无法 hover：始终可点 */
@media (hover: none) {
  .card-thumb .card-del {
    opacity: 0.92;
    pointer-events: auto;
  }
}
.card-body { padding: 6px 8px 8px; }
.card-body .t {
  font-weight: 600; font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.card-body .s {
  margin-top: 0; font-size: 0.6rem; color: var(--faint);
  font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge {
  display: inline-block; margin-top: 0; font-size: 0.62rem;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.05); color: var(--muted);
  line-height: 1.2;
}
.badge.done { color: var(--ok); background: rgba(var(--brand-rgb), 0.12); }
.badge.failed { color: var(--err); background: rgba(255,107,122,0.12); }
.badge.running { color: #c8d0e0; background: rgba(200,210,230,0.1); }
.empty { color: var(--faint); padding: 28px 8px; text-align: center; font-size: 0.88rem; }

/* lightbox：左图 + 右详情 + 底片条（对齐 Wan） */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,4,6,0.94);
  display: flex; flex-direction: column;
  backdrop-filter: blur(16px);
  cursor: zoom-out;
}
/* 预览页 logo：先按侧栏几何落位，避免打开时从 0,0 再跳一次 */
.lb-home-logo {
  position: fixed;
  top: 21px;
  left: 10px;
  z-index: 90; /* 高于 .lightbox(80)，保证在遮罩之上且可点 */
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: block;
  color: #fff;
  /* 禁止 scale：点击/hover 缩放会造成「错位」感 */
  transform: none !important;
  transition: none;
  line-height: 0;
  overflow: visible;
}
.lb-home-logo:hover,
.lb-home-logo:active,
.lb-home-logo:focus {
  background: transparent;
  transform: none !important;
  outline: none;
}
.lb-home-logo .rail-logo,
.lb-home-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* 与侧栏 .rail-logo 完全一致 */
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.28));
}
.lightbox.hidden ~ .lb-home-logo,
.lightbox.hidden .lb-home-logo {
  /* 由 .lightbox.hidden 时整层隐藏；logo 在 lightbox 内 */
  visibility: inherit;
}
.lightbox.hidden .lb-home-logo {
  /* lightbox 隐藏时不占事件 */
  pointer-events: none;
}
.lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 8;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.08);
  color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.lb-close:hover { background: rgba(255,255,255,0.14); }

/* 上排：媒体 | 详情 */
.lb-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 48px 20px 12px;
  box-sizing: border-box;
  cursor: zoom-out;
}
.lb-main:has(.lb-detail:not(.hidden)) {
  /* 有右侧详情时：左媒体自适应，右栏固定宽 */
  padding-right: 16px;
}
.lb-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-height: 0;
  cursor: zoom-out;
}
.lb-main:has(.lb-detail:not(.hidden)) .lb-body {
  justify-content: center;
  padding-right: 8px;
}
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  max-height: min(72vh, calc(100vh - 160px));
  cursor: default;
}
.lb-body video,
.lb-stage video,
.lb-stage .lb-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(900px, 100%);
  max-height: min(72vh, calc(100vh - 160px));
  border-radius: 14px;
  background: #000;
  box-shadow:
    0 20px 64px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.08);
  object-fit: contain;
  cursor: default;
}
.lb-main:has(.lb-detail:not(.hidden)) .lb-body video,
.lb-main:has(.lb-detail:not(.hidden)) .lb-stage video,
.lb-main:has(.lb-detail:not(.hidden)) .lb-stage .lb-image {
  max-width: min(640px, 52vw);
  max-height: min(78vh, calc(100vh - 150px));
}
.lb-stage .lb-image { object-fit: contain; }
.lb-meta { display: none !important; }
.lb-title, .lb-sub { display: none; }

.lb-side-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  cursor: default;
}
.lb-icon-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.lb-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transform: scale(1.04);
}
.lb-icon-btn:active { transform: scale(0.96); }
.lb-icon-btn .ico { display: block; }

/* 右侧详情栏（参考红框区域大小） */
.lb-detail {
  flex: 0 0 min(380px, 36vw);
  width: min(380px, 36vw);
  max-width: 420px;
  min-width: 300px;
  margin: 0;
  /* 避开右上角关闭按钮，略下移 */
  margin-top: 48px;
  margin-right: 20px;
  margin-bottom: 8px;
  padding: 22px 18px 16px;
  border-radius: 16px;
  background: rgba(18, 18, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  cursor: default;
  z-index: 5;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  /* 高度贴近主图区域（红框），仍不挡住 X */
  max-height: min(72vh, calc(100vh - 168px));
  min-height: min(62vh, calc(100vh - 200px));
  align-self: center;
}
.lb-detail.hidden { display: none !important; }
.lb-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 14px;
}
.lb-detail-head { margin-bottom: 18px; }
/* 主标题：作品名（不再显示 Community） */
.lb-detail-author {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  line-height: 1.35;
}
.lb-detail-title {
  display: none;
}
.lb-detail-title.hidden { display: none !important; }
.lb-detail-meta.hidden { display: none !important; }
.lb-detail-section {
  position: relative;
  margin-bottom: 14px;
}
.lb-detail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.lb-detail-prompt {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-height: none;
  overflow: visible;
  padding-right: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.lb-detail-copy {
  position: static;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  flex-shrink: 0;
}
.lb-detail-copy:hover { background: rgba(255, 255, 255, 0.12); }
.lb-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.lb-detail-tags span {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.lb-detail-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}
.lb-detail-use {
  width: 100%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  color: #0a0e18;
  background: var(--brand-grad);
  background-size: 140% 140%;
  box-shadow:
    0 4px 18px rgba(46, 239, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.lb-detail-use:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 6px 22px rgba(46, 239, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lb-detail-use:active { transform: scale(0.985); }

/* 底部片条 */
.lb-film {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: min(960px, calc(100% - 48px));
  margin: 0 auto 18px;
  padding: 0 4px;
  cursor: default;
  z-index: 5;
}
/* 灵感预览：片条宽 70% 再 +10% → 77%；整体往左 3cm */
.lightbox.lb-explore .lb-film {
  max-width: none;
  width: calc((100% - 48px) * 0.77);
  margin: 6px auto 22px;
  gap: 10px;
  padding: 10px 4px;
  box-sizing: border-box;
  transform: translateX(-5cm); /* 原 -3cm，再左移 2cm */
}
.lightbox.lb-explore .lb-thumb {
  width: 108px;
  height: 72px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.lightbox.lb-explore .lb-nav {
  width: 40px;
  height: 40px;
}
/* 关闭钮始终在详情栏之上 */
.lightbox.lb-explore .lb-close {
  z-index: 20;
}

/* 灵感预览右下角：帮助（低调半透明，不刺眼） */
.lb-help-btn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 12;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 24, 0.55);
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lb-help-btn.hidden { display: none !important; }
.lb-help-btn:hover {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(28, 28, 36, 0.72);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lb-help-btn:active { transform: scale(0.96); }
.lb-help-btn svg { display: block; opacity: 0.92; }

/* 帮助面板：更宽、更短、审美卡片；背景深 + 强模糊 */
.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  display: grid;
  place-items: center;
  padding: 28px 20px;
  box-sizing: border-box;
}
.help-overlay.hidden { display: none !important; }
.help-sheet {
  width: min(720px, 100%);
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(28, 28, 36, 0.96), rgba(14, 14, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.help-sheet-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.help-sheet-h h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.help-sheet-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  line-height: 1.5;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-sheet { max-height: min(82vh, 640px); }
}
.help-card {
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.help-card-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  background: rgba(var(--brand-rgb, 56, 189, 248), 0.12);
  margin-bottom: 10px;
}
.help-card h3 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}
.help-card p { margin: 0; color: rgba(255, 255, 255, 0.72); }
.help-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: rgba(255, 255, 255, 0.72);
}
.help-card li { margin-bottom: 4px; }
.help-contact {
  margin: 0 0 6px !important;
}
.help-contact a {
  color: var(--brand, #38bdf8);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.help-contact a:hover { text-decoration: underline; }
.help-muted {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.45;
  margin: 0 !important;
}
.help-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.help-keys kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.75);
}
.help-full-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand, #38bdf8);
  text-decoration: none;
}
.help-full-link:hover { text-decoration: underline; }
/* 灵感模式：主图与右侧栏垂直居中 */
.lightbox.lb-explore .lb-main {
  padding: 16px 16px 8px;
  align-items: center;
}
.lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-body video,
.lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-stage video,
.lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-stage .lb-image {
  max-width: min(420px, 36vw);
  max-height: min(64vh, calc(100vh - 200px));
}
.lightbox.lb-explore .lb-side-actions {
  display: none !important;
}

/* 灵感 coverflow：统一轮（一气呵成） */
.lb-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-height: min(64vh, calc(100vh - 200px));
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  --lb-dur: 0.72s;
  /* 顺滑连贯：先加速后长缓出，像惯性轮 */
  --lb-ease: cubic-bezier(0.22, 0.82, 0.2, 1);
}

/*
 * 统一 coverflow 轮：所有卡同一套 slot 位姿，只动 transform/opacity/filter
 * 无主/侧分轨、无结束硬切图
 */
.lb-wheel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  perspective: 1600px;
  transform-style: preserve-3d;
}
.lightbox.lb-explore .lb-wheel.is-on {
  display: block;
}
/* 探索模式：侧 peeks + 舞台图让位给统一轮 */
.lightbox.lb-explore .lb-peeks {
  display: none !important;
}
.lightbox.lb-explore .lb-stage .lb-image {
  opacity: 0 !important;
  pointer-events: none !important;
  /* 仍占位撑开布局 */
  visibility: hidden;
}
.lightbox.lb-explore .lb-stage video:not(.hidden) {
  position: relative;
  z-index: 5;
}

.lb-wcard {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 0;
  border: none;
  /* 圆角：不用 preserve-3d，否则 overflow 裁切失效会露直角 */
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0e;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center center;
  transform-style: flat;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity, filter;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  /* 一气呵成：位姿 + 尺寸同步过渡（同一条 ease/duration） */
  transition:
    transform var(--lb-dur) var(--lb-ease),
    opacity var(--lb-dur) var(--lb-ease),
    filter var(--lb-dur) var(--lb-ease),
    width var(--lb-dur) var(--lb-ease),
    height var(--lb-dur) var(--lb-ease),
    box-shadow var(--lb-dur) var(--lb-ease);
}
.lb-wheel.lb-wheel-snap .lb-wcard {
  transition: none !important;
}
.lb-wcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  /* 跟卡同圆角，保证裁切在像素上可见 */
  border-radius: inherit;
}
/* 主卡：尺寸由 JS 按图比例写入 → 铺满无黑边，圆角=图圆角 */
.lb-wcard[data-slot="0"] {
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  /* 回退（图未解码时） */
  width: min(420px, 36vw);
  height: min(64vh, calc(100vh - 200px));
}
.lb-wcard[data-slot="0"] img {
  object-fit: cover;
  border-radius: inherit;
  background: #000;
}
/* 水印贴主图右下角（卡=图边界，无 letterbox 错位） */
body.wm-on .lb-wcard[data-slot="0"]::after {
  content: "CHUYAN";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lb-wcard.is-empty {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
.lb-wcard.is-loading {
  background: #12121a;
}
.lb-wcard.is-loading img {
  opacity: 0.35;
}
.lb-deck.lb-spinning .lb-wcard {
  pointer-events: none;
  cursor: default;
}

/* —— 槽位位姿：相对中心 translate + scale + rotateY + blur —— */
/* 远左 -3（退场 / 进场） */
.lb-wcard[data-slot="-3"] {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: translate3d(-50%, -50%, 0) translate3d(calc(-1 * min(52vw, 560px)), 0, -80px) scale(0.72) rotateY(28deg);
  z-index: 1;
}
/* 左远 -2 */
.lb-wcard[data-slot="-2"] {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: translate3d(-50%, -50%, 0) translate3d(calc(-1 * min(40vw, 420px)), 0, -40px) scale(0.88) rotateY(22deg);
  z-index: 2;
}
/* 左近 -1 */
.lb-wcard[data-slot="-1"] {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: translate3d(-50%, -50%, 0) translate3d(calc(-1 * min(28vw, 300px)), 0, -12px) scale(0.96) rotateY(14deg);
  z-index: 4;
}
/* 中心 0：主图（宽高：JS 按图比例；回退见上方 .lb-wcard[data-slot="0"]） */
.lb-wcard[data-slot="0"] {
  opacity: 1;
  filter: none;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1) rotateY(0deg);
  z-index: 10;
  box-shadow:
    0 20px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: default;
}
/* 右近 +1 */
.lb-wcard[data-slot="1"] {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: translate3d(-50%, -50%, 0) translate3d(min(28vw, 300px), 0, -12px) scale(0.96) rotateY(-14deg);
  z-index: 4;
}
/* 右远 +2 */
.lb-wcard[data-slot="2"] {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: translate3d(-50%, -50%, 0) translate3d(min(40vw, 420px), 0, -40px) scale(0.88) rotateY(-22deg);
  z-index: 2;
}
/* 远右 +3 */
.lb-wcard[data-slot="3"] {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: translate3d(-50%, -50%, 0) translate3d(min(52vw, 560px), 0, -80px) scale(0.72) rotateY(-28deg);
  z-index: 1;
}

/* 悬停：近侧可点时略抬起（spin 时禁用） */
.lb-wcard[data-slot="-1"]:hover,
.lb-wcard[data-slot="1"]:hover {
  opacity: 0.88;
  filter: blur(0.4px) saturate(0.95) brightness(0.9);
}
.lb-wcard[data-slot="-2"]:hover,
.lb-wcard[data-slot="2"]:hover {
  opacity: 0.5;
  filter: blur(1.8px) saturate(0.8) brightness(0.7);
}
.lb-deck.lb-spinning .lb-wcard:hover {
  /* 保持 slot 关键帧，不因 hover 打断连贯 */
  opacity: inherit;
  filter: inherit;
}

@media (max-width: 1100px) {
  .lb-wcard[data-slot="-2"],
  .lb-wcard[data-slot="2"],
  .lb-wcard[data-slot="-3"],
  .lb-wcard[data-slot="3"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .lb-wcard[data-slot="-1"],
  .lb-wcard[data-slot="1"] {
    width: clamp(72px, 12vw, 100px);
    height: clamp(120px, 20vw, 168px);
  }
}
@media (max-width: 780px) {
  .lightbox.lb-explore .lb-wheel {
    display: none !important;
  }
  .lightbox.lb-explore .lb-stage .lb-image {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lb-wcard {
    transition: none !important;
  }
}
.lb-peeks {
  display: none;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
  transition:
    transform var(--lb-dur) var(--lb-ease),
    opacity var(--lb-dur) var(--lb-ease);
  opacity: 1;
  will-change: transform, opacity;
}
.lightbox.lb-explore .lb-peeks {
  display: flex;
  pointer-events: auto;
  z-index: 1;
  opacity: 1;
}
.lightbox.lb-explore .lb-peeks--left {
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 10px;
  gap: 8px;
  transform-origin: right center;
}
.lightbox.lb-explore .lb-peeks--right {
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 10px;
  gap: 8px;
  transform-origin: left center;
}
.lightbox.lb-explore .lb-stage {
  z-index: 2;
  flex-shrink: 0;
  position: relative;
  display: grid;
  place-items: center;
  /* 舞台本身不整体 fade，由双图层交叉 */
  opacity: 1;
  transform: none;
  transition: none;
}
/* 双图层叠在同一格：旧缩小 / 新放大 */
.lightbox.lb-explore .lb-stage .lb-image {
  grid-area: 1 / 1;
  max-width: min(420px, 36vw);
  max-height: min(64vh, calc(100vh - 200px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  box-shadow:
    0 20px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform var(--lb-dur) var(--lb-ease),
    opacity var(--lb-dur) var(--lb-ease);
}
.lightbox.lb-explore .lb-stage .lb-image.is-front {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
}
.lightbox.lb-explore .lb-stage .lb-image.is-fly {
  position: relative;
  z-index: 3;
  pointer-events: none;
}
/* 飞入层初始：邻侧小图位（下一张从右 / 上一张从左） */
.lightbox.lb-explore .lb-stage .lb-image.is-fly.from-right {
  opacity: 0.3;
  transform: translate3d(32%, 0, 0) scale(0.52) rotateY(12deg);
  transition: none;
}
.lightbox.lb-explore .lb-stage .lb-image.is-fly.from-left {
  opacity: 0.3;
  transform: translate3d(-32%, 0, 0) scale(0.52) rotateY(-12deg);
  transition: none;
}
/* 交叉运行中：旧主图缩到邻位，新图从邻位长大 */
.lb-deck.lb-cf-run .lb-image.is-front.to-left {
  transform: translate3d(-30%, 0, 0) scale(0.48) rotateY(-8deg);
  opacity: 0.35;
  z-index: 1;
}
.lb-deck.lb-cf-run .lb-image.is-front.to-right {
  transform: translate3d(30%, 0, 0) scale(0.48) rotateY(8deg);
  opacity: 0.35;
  z-index: 1;
}
.lb-deck.lb-cf-run .lb-image.is-fly.to-center {
  transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
  opacity: 1;
  z-index: 3;
  transition:
    transform var(--lb-dur) var(--lb-ease),
    opacity var(--lb-dur) var(--lb-ease);
}
/*
 * 小图与主图同拍 soft 换图：槽内旧图 100%→30%，新图 30%→100%
 * 退入位 near 暂藏（front 缩小顶替）
 */
.lb-peek .lb-peek-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.62s cubic-bezier(0.4, 0, 0.2, 1);
}
.lb-peek .lb-peek-img.out {
  opacity: 0.3;
}
.lb-peek.lb-peek-xfade {
  position: relative;
}
.lb-peek .lb-peek-xfade-in {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.62s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.lb-peek .lb-peek-xfade-in.on {
  opacity: 1;
}
.lb-peek.lb-peek-sub {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: none !important;
  transition:
    opacity var(--lb-dur, 0.62s) var(--lb-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--lb-dur, 0.62s) !important;
}
.lb-deck.lb-cf-run .lb-peeks--left,
.lb-deck.lb-cf-run .lb-peeks--right {
  transform: none !important;
  opacity: 1 !important;
}
.lb-deck.lb-spinning {
  pointer-events: none;
}
/* 轮转中：尺寸/模糊/倾角跟主图同拍 */
.lb-deck.lb-spinning .lb-peek {
  transition:
    width var(--lb-dur) var(--lb-ease),
    height var(--lb-dur) var(--lb-ease),
    opacity var(--lb-dur) var(--lb-ease),
    filter var(--lb-dur) var(--lb-ease),
    transform var(--lb-dur) var(--lb-ease),
    box-shadow var(--lb-dur) var(--lb-ease) !important;
}

.lb-peek {
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0e;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    filter 0.35s ease,
    width 0.35s ease,
    height 0.35s ease;
  transform-style: preserve-3d;
}
.lb-peek img,
.lb-peek video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* 加载中：骨架 shimmer，隐藏未完成的 img，避免浏览器「裂图」图标 */
.lb-peek.is-loading {
  background:
    linear-gradient(
      110deg,
      #0a0a0e 0%,
      #0a0a0e 38%,
      #1a1a24 50%,
      #0a0a0e 62%,
      #0a0a0e 100%
    );
  background-size: 200% 100%;
  animation: lb-peek-shimmer 1.1s ease-in-out infinite;
}
.lb-peek.is-loading > img.lb-peek-img,
.lb-peek.is-loading > img:not(.lb-peek-xfade-in) {
  opacity: 0 !important;
}
/* soft 换图：旧图始终 100% 可见；新层在背后解码，不压暗不闪黑 */
.lb-peek.lb-peek-xfade > img.lb-peek-img {
  opacity: 1 !important;
}
.lb-peek.lb-peek-xfade > .lb-peek-xfade-in {
  opacity: 0 !important;
  pointer-events: none;
}
/* 加载失败：纯色占位，绝不露出浏览器 broken-image */
.lb-peek.lb-peek-err {
  background: #12121a;
  animation: none;
}
.lb-peek.lb-peek-err > img {
  opacity: 0 !important;
  visibility: hidden !important;
}
.lb-peek.lb-peek-err::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.06), transparent 55%),
    #12121a;
  pointer-events: none;
}
@keyframes lb-peek-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* depth=1 靠近主图；depth=2 更远更淡更糊；略带 3D 倾角 */
.lb-peeks--left .lb-peek[data-depth="1"] {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(16deg) scale(0.98);
}
.lb-peeks--left .lb-peek[data-depth="2"] {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(22deg) scale(0.94);
}
.lb-peeks--right .lb-peek[data-depth="1"] {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(-16deg) scale(0.98);
}
.lb-peeks--right .lb-peek[data-depth="2"] {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(-22deg) scale(0.94);
}
.lb-peeks--left .lb-peek[data-depth="1"]:hover {
  opacity: 0.9;
  filter: blur(0.4px) saturate(0.95) brightness(0.88);
  transform: perspective(800px) rotateY(10deg) scale(1.04);
}
.lb-peeks--left .lb-peek[data-depth="2"]:hover {
  opacity: 0.55;
  filter: blur(1.6px) saturate(0.8) brightness(0.7);
  transform: perspective(800px) rotateY(16deg) scale(1.02);
}
.lb-peeks--right .lb-peek[data-depth="1"]:hover {
  opacity: 0.9;
  filter: blur(0.4px) saturate(0.95) brightness(0.88);
  transform: perspective(800px) rotateY(-10deg) scale(1.04);
}
.lb-peeks--right .lb-peek[data-depth="2"]:hover {
  opacity: 0.55;
  filter: blur(1.6px) saturate(0.8) brightness(0.7);
  transform: perspective(800px) rotateY(-16deg) scale(1.02);
}

/*
 * Coverflow 轮转关键帧（与 --lb-dur 同拍）
 * next：L2 退场 / 旧 L1→L2 / R2→R1 / 新卡从更远进 R2
 * prev：镜像
 */
/* —— NEXT：左 L2 退场 —— */
.lb-deck.lb-cf-next:not(.lb-cf-run) .lb-peeks--left .lb-peek.lb-peek-exit {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(22deg) scale(0.94);
}
.lb-deck.lb-cf-next.lb-cf-run .lb-peeks--left .lb-peek.lb-peek-exit {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: perspective(800px) rotateY(30deg) scale(0.82) translate3d(-28px, 0, 0);
}
/* —— NEXT：旧 L1 → L2（morph 从 near 缩到 far） —— */
.lb-deck.lb-cf-next:not(.lb-cf-run) .lb-peeks--left .lb-peek.lb-peek-morph-from-1 {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(16deg) scale(0.98);
}
.lb-deck.lb-cf-next.lb-cf-run .lb-peeks--left .lb-peek.lb-peek-morph-from-1 {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(22deg) scale(0.94);
}
/* —— NEXT：R2 → R1（far 放大成 near） —— */
.lb-deck.lb-cf-next:not(.lb-cf-run) .lb-peeks--right .lb-peek.lb-peek-morph-to-1,
.lb-deck.lb-cf-next:not(.lb-cf-run) .lb-peeks--right .lb-peek[data-depth="2"].lb-peek-morph-to-1 {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(-22deg) scale(0.94);
}
.lb-deck.lb-cf-next.lb-cf-run .lb-peeks--right .lb-peek.lb-peek-morph-to-1,
.lb-deck.lb-cf-next.lb-cf-run .lb-peeks--right .lb-peek[data-depth="2"].lb-peek-morph-to-1 {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(-16deg) scale(0.98);
}
/* —— NEXT：新卡从更远进入 R2 —— */
.lb-deck.lb-cf-next:not(.lb-cf-run) .lb-peeks--right .lb-peek.lb-peek-enter {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: perspective(800px) rotateY(-30deg) scale(0.82) translate3d(28px, 0, 0);
}
.lb-deck.lb-cf-next.lb-cf-run .lb-peeks--right .lb-peek.lb-peek-enter {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(-22deg) scale(0.94) translate3d(0, 0, 0);
}

/* —— PREV：右 R2 退场 —— */
.lb-deck.lb-cf-prev:not(.lb-cf-run) .lb-peeks--right .lb-peek.lb-peek-exit {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(-22deg) scale(0.94);
}
.lb-deck.lb-cf-prev.lb-cf-run .lb-peeks--right .lb-peek.lb-peek-exit {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: perspective(800px) rotateY(-30deg) scale(0.82) translate3d(28px, 0, 0);
}
/* —— PREV：旧 R1 → R2 —— */
.lb-deck.lb-cf-prev:not(.lb-cf-run) .lb-peeks--right .lb-peek.lb-peek-morph-from-1 {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(-16deg) scale(0.98);
}
.lb-deck.lb-cf-prev.lb-cf-run .lb-peeks--right .lb-peek.lb-peek-morph-from-1 {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(-22deg) scale(0.94);
}
/* —— PREV：L2 → L1 —— */
.lb-deck.lb-cf-prev:not(.lb-cf-run) .lb-peeks--left .lb-peek.lb-peek-morph-to-1,
.lb-deck.lb-cf-prev:not(.lb-cf-run) .lb-peeks--left .lb-peek[data-depth="2"].lb-peek-morph-to-1 {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(22deg) scale(0.94);
}
.lb-deck.lb-cf-prev.lb-cf-run .lb-peeks--left .lb-peek.lb-peek-morph-to-1,
.lb-deck.lb-cf-prev.lb-cf-run .lb-peeks--left .lb-peek[data-depth="2"].lb-peek-morph-to-1 {
  width: clamp(88px, 11vw, 132px);
  height: clamp(148px, 18.5vw, 220px);
  opacity: 0.62;
  filter: blur(1.2px) saturate(0.85) brightness(0.72);
  transform: perspective(800px) rotateY(16deg) scale(0.98);
}
/* —— PREV：新卡从更左进入 L2 —— */
.lb-deck.lb-cf-prev:not(.lb-cf-run) .lb-peeks--left .lb-peek.lb-peek-enter {
  width: clamp(40px, 5vw, 64px);
  height: clamp(68px, 9vw, 108px);
  opacity: 0;
  filter: blur(5px) saturate(0.55) brightness(0.4);
  transform: perspective(800px) rotateY(30deg) scale(0.82) translate3d(-28px, 0, 0);
}
.lb-deck.lb-cf-prev.lb-cf-run .lb-peeks--left .lb-peek.lb-peek-enter {
  width: clamp(56px, 7vw, 88px);
  height: clamp(96px, 12vw, 148px);
  opacity: 0.32;
  filter: blur(3.2px) saturate(0.7) brightness(0.55);
  transform: perspective(800px) rotateY(22deg) scale(0.94) translate3d(0, 0, 0);
}

/* 轮转临时节点不抢 hover 样式 */
.lb-deck.lb-spinning .lb-peek:hover {
  /* 保持当前关键帧，禁用静态 hover 放大 */
  /* 具体 transform 由上面 run 规则覆盖 */
}

/* 无对应项时占位，保持对称构图 */
.lb-peek.lb-peek--empty {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
  background: transparent;
}
@media (max-width: 1100px) {
  .lb-peek[data-depth="2"] { display: none; }
  .lb-peeks--left .lb-peek[data-depth="1"],
  .lb-peeks--right .lb-peek[data-depth="1"] {
    width: clamp(72px, 12vw, 100px);
    height: clamp(120px, 20vw, 168px);
  }
}
@media (max-width: 780px) {
  .lightbox.lb-explore .lb-peeks { display: none !important; }
  .lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-body video,
  .lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-stage video,
  .lightbox.lb-explore .lb-main:has(.lb-detail:not(.hidden)) .lb-stage .lb-image {
    max-width: min(560px, 88vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.lb-explore .lb-stage,
  .lb-peeks,
  .lb-peek {
    transition: none !important;
  }
}
.lb-film.hidden { display: none !important; }
.lb-nav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 24, 0.72);
  color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.lb-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.lb-nav:disabled {
  opacity: 0.28;
  cursor: default;
}
.lb-thumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 4px;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  padding: 0;
  overflow: hidden;
  background: #121218;
  cursor: pointer;
  position: relative;
  opacity: 0.72;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lb-thumb img,
.lb-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.lb-thumb .lb-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  pointer-events: none;
}
.lb-thumb .lb-thumb-play .ico { width: 14px; height: 14px; }
.lb-thumb:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}
.lb-thumb.on {
  opacity: 1;
  border-color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.4);
  transform: scale(1.06);
}

@media (max-width: 900px) {
  .lb-main {
    flex-direction: column;
    padding: 48px 12px 8px;
    overflow-y: auto;
  }
  .lb-body { padding: 0; }
  .lb-main:has(.lb-detail:not(.hidden)) .lb-body video,
  .lb-main:has(.lb-detail:not(.hidden)) .lb-stage video,
  .lb-main:has(.lb-detail:not(.hidden)) .lb-stage .lb-image,
  .lb-body video,
  .lb-stage video,
  .lb-stage .lb-image {
    max-width: calc(100vw - 32px);
    max-height: min(48vh, 420px);
  }
  .lb-detail {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    max-height: none;
    align-self: stretch;
    margin-top: 10px;
  }
  .lb-side-actions {
    top: auto;
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
    border-radius: 999px;
    padding: 4px 8px;
  }
  .lb-film {
    max-width: calc(100% - 16px);
    margin-bottom: 14px;
    gap: 6px;
  }
  .lb-thumb { width: 64px; height: 44px; }
  .lb-nav { width: 32px; height: 32px; }
}

/* buttons / modal / toast */
.btn {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 999px; padding: 6px 11px;
  font-weight: 600; font-size: 0.76rem;
  text-decoration: none; color: var(--text); transition: 0.15s ease;
}
.btn.sm { padding: 5px 10px; font-size: 0.72rem; }
.btn.primary {
  background: linear-gradient(135deg, #e8ecf5, #a8b4c8); color: #121216;
}
.btn.ghost { background: transparent; border: 1px solid var(--line-2); }
.btn.ghost:hover { background: rgba(255,255,255,0.04); }

.modal {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(0,0,0,0.65); display: grid; place-items: center;
  padding: 16px; backdrop-filter: blur(6px);
}
body.settings-open .rail-flyout {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.sheet {
  width: min(400px, 100%); background: #1a1a20;
  border: 1px solid var(--line-2); border-radius: 18px; padding: 18px;
}
.sheet-h { display: flex; justify-content: space-between; align-items: center; }
.sheet-h h2 { margin: 0; font-size: 1rem; }
.x { border: none; background: transparent; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.field {
  display: flex; flex-direction: column; gap: 5px; margin: 10px 0;
  font-size: 0.8rem; color: var(--muted);
}
.field input, .field select {
  background: #0d0d10; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; color: var(--text);
}
.field small { color: var(--faint); }
.check { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; margin-bottom: 10px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 6px; }
.log {
  margin-top: 10px; padding: 8px; border-radius: 8px; background: #0a0a0c;
  font-size: 0.72rem; white-space: pre-wrap; font-family: ui-monospace, monospace; color: var(--muted);
}
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 120;
  transform: translate(-50%, -50%);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.toast:not(.hidden) {
  visibility: visible;
  animation: toast-pop 1.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.toast.hidden {
  display: block !important; /* 保留节点以播动画；用 visibility/opacity 隐藏 */
  opacity: 0;
  visibility: hidden;
  animation: none;
}
@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@media (max-width: 900px) {
  .layout.show-sessions { grid-template-columns: var(--rail) 1fr; }
  .layout.show-sessions .session { display: none; }
  .session-fold { display: none !important; }
}
@media (max-width: 700px) {
  .layout { grid-template-columns: 1fr; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; height: 56px; width: 100%;
    flex-direction: row; justify-content: space-around; padding: 4px;
    border-right: none; border-top: 1px solid var(--line);
  }
  .rail-item span:last-child { display: none; }
  .rail-nav { flex-direction: row; flex: 1; justify-content: space-evenly; }
  .rail-bottom { flex-direction: row; }
  .rail-flyout {
    left: 8px;
    bottom: calc(100% + 10px);
  }
  .rail-flyout-sub {
    left: 0;
    bottom: calc(100% + 8px);
    width: min(280px, calc(100vw - 24px));
  }
  .rail-account::after { display: none; }
  .main { height: calc(100vh - 56px); padding-bottom: 0; }
  .view.on { height: calc(100vh - 56px); }
}

/* ═══════════════════════════════════════════
   PDF 产品能力扩展 — 一律套用现有液态玻璃质感
   （不换皮：复用 glass-surface / pill-dd / media-panel）
   ═══════════════════════════════════════════ */

/* bar-right 规则见上方 composer-bar 段 */

/* 麦克风：与发送钮同系 —— 单层描边圆，不要底+边「双圆」 */
.mic-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.mic-btn .ico {
  display: block;
  position: relative;
  z-index: 1;
}
/* 去掉可能叠出的内圆伪元素 */
.mic-btn::before,
.mic-btn::after {
  content: none !important;
  display: none !important;
}
.mic-btn:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.mic-btn.listening {
  border-color: rgba(var(--brand-rgb), 0.9);
  background: rgba(var(--brand-rgb), 0.18);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.2);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  50% { box-shadow: 0 0 0 5px rgba(var(--brand-rgb), 0.12); }
}
/* 对话/生成页：与 send 同尺寸，避免一粗一细 */
#viewChat .composer-bar .bar-right .mic-btn,
#viewHome .composer-bar .bar-right .mic-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
}

.dur-pill-btn,
.auto-pill-btn,
.at-pill-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
}
.dur-pill-btn .dur-clock {
  opacity: 0.85;
  flex-shrink: 0;
}
.auto-pill-btn:hover,
.dur-pill-btn:hover,
.at-pill-btn:hover { color: #fff; }
.at-pill-btn .at-pill-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Agent 技能：只显示「技能」文案 */
.pill-at[data-kind="skill"] .at-pill-btn .ico { display: none; }
/* 图片生成引用：只保留一个 @，隐藏前置图标 */
.pill-at[data-kind="ref"] .at-pill-btn .ico { display: none; }
.pill-at[data-kind="ref"] .at-pill-btn .at-pill-text {
  font-size: 0.78rem;
  font-weight: 600;
}

.dur-panel .dur-panel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.dur-panel-range {
  flex: 1;
  accent-color: rgba(var(--brand-rgb), 0.9);
}
.dur-panel-val {
  min-width: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fff;
}
.dur-panel-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.auto-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.auto-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
}
.auto-switch input { accent-color: var(--brand); }

/* 参考图超过 7 张 */
.ref-stack .ref-overflow-hide { display: none !important; }
.ref-more-btn {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.ref-more-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
.slot[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.62rem;
  background: rgba(20, 22, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  z-index: 5;
  pointer-events: none;
}
.ref-all-sheet { max-width: 720px; width: min(720px, 92vw); }
.ref-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
  padding: 4px;
}
/* ── 右上角：积分 + 头像 ── */
.top-chrome {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 积分位数变长时整体变宽，不挤到头像/互相重叠 */
  width: auto;
  max-width: calc(100vw - var(--rail, 56px) - 16px);
  flex-wrap: nowrap;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  pointer-events: none;
}
.top-chrome.hidden { display: none !important; }
/* 首页：灵感内容上顶时提前移走 VIP/积分/头像，避免与图墙叠在一起 */
.top-chrome.home-chrome-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
}
.top-chrome.home-chrome-away > * {
  pointer-events: none;
}
.top-chrome > * { pointer-events: auto; }
/* 登录后：资产等列表页右侧留空，避免与固定顶栏重叠
 * 首页编辑框不在此列：需在「已扣除左侧菜单」的主区内真正居中
 * 积分文案变长（如 30667积分）时预留更宽 */
body.user-authed .page-pad,
body.user-authed .assets-head {
  padding-right: max(16px, 280px);
}
body.user-authed #viewHome .home-center {
  padding-right: 20px;
  padding-left: 20px;
}
body.user-authed .assets-head-actions {
  margin-right: 0;
}

/* ── 画布页（对齐生成：左项目 + 右工作区） ── */
/* 画布页不显示右上角积分 / 头像 */
/* 积分/头像：仅首页 + 资产；生成 / 画布隐藏 */
body.view-chat #topChrome,
body.view-canvas #topChrome {
  display: none !important;
}
/* 能力工作台：账户信息收进顶栏右侧，对齐 RunningHub */
body.view-social #topChrome:not(.hidden) {
  top: 10px;
  right: 16px;
  z-index: 80;
  gap: 8px;
}
/* 智能工作流侧栏：与「生成」会话栏同宽同结构 */
body.view-canvas .layout.show-sessions:not(.sessions-collapsed) {
  grid-template-columns: var(--rail) var(--session) 1fr;
}
body.view-canvas:not(.workflow-projects-open) #layout.layout.show-sessions:not(.sessions-collapsed){grid-template-columns:var(--rail) 0 minmax(0,1fr)!important}
body.view-canvas:not(.workflow-projects-open) #canvasProjectPanel{visibility:hidden;overflow:hidden;min-width:0!important;width:0!important}
body.view-canvas:not(.workflow-projects-open) #sessionFoldBtn{display:none!important}
#viewCanvas.view.on {
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  flex: 1;
  min-height: 0;
}
.canvas-projects-panel.hidden { display: none !important; }
.canvas-projects-panel {
  /* 继承 .session 样式，仅微调背景与生成栏一致 */
  background: transparent;
}
/* 无顶栏后 iframe 铺满 */
.canvas-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.canvas-stage-bar { display: none !important; }
/* 旧折叠轨（已废弃，保留隐藏避免残留） */
.canvas-projects-rail {
  display: none !important;
  position: fixed;
  left: var(--rail, 56px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 28px;
  padding: 14px 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: rgba(14,14,17,0.94);
  color: var(--muted, #9aa0b0);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  cursor: pointer;
  writing-mode: horizontal-tb;
  box-shadow: 4px 0 16px rgba(0,0,0,0.25);
}
.canvas-projects-rail:hover {
  color: var(--text);
  background: rgba(24,24,30,0.98);
}
.canvas-projects-rail.hidden { display: none !important; }
body:not(.view-canvas) .canvas-projects-rail { display: none !important; }
.canvas-workspace {
  position: absolute;
  inset: 0;
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
}
.canvas-empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
}
.canvas-empty-card {
  text-align: center;
  max-width: 360px;
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
/* 仅保留新建按钮：无文案、无边框壳，降低信息暴露 */
.canvas-empty-card--btn-only {
  padding: 0;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
.canvas-empty-card--btn-only .btn {
  min-width: 140px;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
}
.canvas-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.canvas-stage.hidden { display: none !important; }
.canvas-stage-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,12,16,0.85);
  backdrop-filter: blur(12px);
}
.canvas-stage-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #e8ecf5);
}
.canvas-stage-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.canvas-engine-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  background: #0c0c10;
  display: block;
}
.director-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #090909;
}
.director-overlay.hidden { display: none !important; }
.director-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* 液态玻璃：通用类 + 同类浮层/胶囊统一 */
.glass-chrome,
.glass-pill {
  background: var(--tb-bg) !important;
  border: 1px solid var(--tb-border) !important;
  backdrop-filter: var(--tb-blur) !important;
  -webkit-backdrop-filter: var(--tb-blur) !important;
  box-shadow: var(--tb-shadow) !important;
}
@supports not (backdrop-filter: blur(10px)) {
  .glass-chrome,
  .glass-pill {
    /* 无 blur 时也保持半透，勿退回实黑 */
    background: rgba(40, 44, 56, 0.78) !important;
  }
}

/*
 * 工具条壳：与首页 home-mini-bar 同款液态玻璃
 * 圆角用 --tb-radius（约 20px），不是胶囊 999
 * 不含编辑文本框 / glass-surface--chat
 * 不含 .tl-result-actions（结果卡操作改为无壳文字链）
 */
.ui-toolbar-capsule,
.lovart-toolbar,
.lovart-sel-bar,
.glass-chrome.lovart-sel-bar {
  background: var(--tb-bg) !important;
  border: 1px solid var(--tb-border) !important;
  backdrop-filter: var(--tb-blur) !important;
  -webkit-backdrop-filter: var(--tb-blur) !important;
  box-shadow: var(--tb-shadow) !important;
  border-radius: var(--tb-radius) !important;
}
@supports not (backdrop-filter: blur(10px)) {
  .ui-toolbar-capsule,
  .lovart-toolbar,
  .lovart-sel-bar {
    background: rgba(20, 22, 30, 0.78) !important;
  }
}

/* 适合玻璃的浮层 / 气泡（非工具条内按钮） */
.tl-jump-latest,
.tl-suggest-panel,
.tl-suggest-chip,
.tl-more-menu,
.tl-detail-pop,
.tl-chat-bubble.user,
.mode-orb-tip,
.lovart-float-tip,
.agent-quote-bar,
.agent-more-menu,
.session-more-menu,
.pill-menu,
.glass-dd-menu,
.filter-dd-menu,
.home-mini-bar {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* 仅首页迷你输入条 / 提示保留大圆角；工具条已用 --tb-radius */
.tl-jump-latest,
.mode-orb-tip,
.lovart-float-tip,
.home-mini-bar {
  border-radius: var(--glass-radius-pill) !important;
}
.chat-filter-bar {
  border-radius: 0 !important;
}
/* 用户对话气泡：紧凑小圆角（高度/行数由上方 line-clamp 规则控制） */
.tl-chat-bubble.user {
  border-radius: 10px !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
}
.tl-suggest-panel,
.tl-more-menu,
.tl-detail-pop,
.agent-more-menu,
.session-more-menu,
.pill-menu,
.glass-dd-menu,
.filter-dd-menu {
  border-radius: var(--glass-radius);
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  box-shadow: var(--glass-shadow-strong) !important;
  background: var(--glass-bg-strong) !important;
}
.tl-suggest-chip,
.agent-quote-bar {
  border-radius: var(--tb-btn-radius);
}
/* 结果操作钮：无壳文字链（高度/hover 见上方 .tl-act） */
.tl-result-actions .tl-act {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
  border-radius: 8px;
}
.tl-result-actions .tl-act:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.tl-suggest-chip:hover,
.tl-jump-latest:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-strong) !important;
}
/* 打开态建议钮：略提亮，仍属玻璃系 */
.tl-job-suggest.is-open .tl-suggest-toggle {
  background: rgba(120, 160, 255, 0.14) !important;
  border-color: rgba(160, 190, 255, 0.32) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}
/* Toast：深色玻璃，与全站统一（不再亮白胶囊） */
.toast {
  background: rgba(22, 24, 32, 0.72) !important;
  color: rgba(245, 247, 252, 0.96) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  box-shadow: var(--glass-shadow-strong) !important;
  font-weight: 550;
}
/* VIP + 积分：低调深色胶囊，文案与积分星同一套青粉金渐变 */
.user-status-bar,
.user-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  --usp-text-grad: var(--points-star-grad);
}
.usp-capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px 0 10px;
  margin: 0;
  /* 背景透明，只保留文字/积分可读性 */
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: rgba(230, 232, 240, 0.92);
  cursor: pointer;
  font: inherit;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}
.usp-capsule:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  filter: none;
}
.usp-capsule:active {
  transform: scale(0.985);
}
/* 兼容旧选择器 */
.usp-member {
  display: none;
}
/* 左侧 Member Center：偏绿渐变字 */
.usp-vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  opacity: 1;
  line-height: 1;
}
.usp-member-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0.72;
  background: var(--usp-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.usp-priority-img,
.usp-vip-img,
.usp-vip-crown,
.usp-vip-label,
.usp-vip {
  display: none !important;
}
.usp-member-text {
  display: none !important;
}
.usp-divider {
  display: none;
}
/* 中间分割线：弱白线，不抢眼 */
.usp-cap-divider {
  width: 1px;
  height: 12px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  opacity: 0.9;
}
.usp-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.points-gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
  flex-shrink: 0;
  opacity: 1;
}
.points-gem-img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
  opacity: 1;
}
.points-gem svg { display: none !important; }
#pointsVal {
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 12px;
  line-height: 1;
  opacity: 0.68;
  color: var(--brand-cyan);
  background: var(--usp-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(16em, 46vw);
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-wrap {
  flex-shrink: 0;
}
.usp-capsule:hover .points-gem-img {
  opacity: 1;
  filter: none;
}
.usp-capsule:hover .usp-vip-badge,
.usp-capsule:hover .points-gem {
  opacity: 1;
}
.usp-capsule:hover #pointsVal,
.usp-capsule:hover .usp-member-label {
  opacity: 0.85;
}
/* 兼容旧 class */
.points-pill {
  display: none;
}
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  /* 弱边框，与胶囊一致不抢眼 */
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.55);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.avatar-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(var(--brand-rgb), 0.18),
    0 0 14px rgba(var(--brand-rgb), 0.15);
}
.avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-guest .avatar-btn {
  width: 58px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.5);
}
.user-guest .rail-avatar.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.user-guest .avatar-fallback {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.avatar-fallback {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  border-radius: 16px;
  padding: 8px;
  z-index: 45;
  animation: studioDialogIn 0.16s ease-out;
}
.user-menu-head {
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.um-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.um-meta { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.um-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  cursor: pointer;
}
.um-item:hover { background: rgba(255, 255, 255, 0.06); }
.um-item.danger { color: #f0a0a8; }
.um-item.danger:hover { background: rgba(224, 112, 120, 0.12); }

.home-profile-modal {
  display: block;
  padding: 0;
  place-items: unset;
  left: var(--rail);
  background: #0b0b0d;
  z-index: 118;
}
.home-profile-modal.hidden { display: none !important; }
body.profile-open { overflow: hidden; }
body.profile-open .rail,
body.hp-preview-open .rail {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--rail);
  z-index: 200;
}
.home-profile {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow: auto;
  padding: 28px 36px 40px;
  box-sizing: border-box;
  color: #f5f4f0;
}
body.hp-preview-open .home-profile {
  overflow: hidden;
  padding: 0;
}
body.hp-preview-open .hp-main {
  visibility: hidden;
}
.hp-main {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  min-height: calc(100vh - 80px);
}
.hp-side { padding-top: 12px; }
.hp-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hp-name {
  margin: 14px 0 4px;
  font-size: 18px;
  font-weight: 650;
}
.hp-handle { margin: 0 0 10px; color: #888880; font-size: 13px; }
.hp-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #888880;
  font-size: 13px;
}
.hp-social i {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.hp-share {
  width: 100%;
  max-width: 220px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f4f0;
  font: 500 13px/1.2 inherit;
  cursor: pointer;
}
.hp-share:hover { background: rgba(255, 255, 255, 0.12); }
.hp-bio-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 14px 0 0;
}
.hp-bio {
  margin: 0;
  color: #8a8a84;
  font-size: 13px;
  line-height: 1.65;
  cursor: pointer;
  padding: 0;
}
.hp-bio:hover,
.hp-bio:focus-visible {
  color: #c8c8c2;
  outline: none;
}
.hp-bio-edit {
  position: absolute;
  right: -22px;
  top: 1px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #6f6f6a;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
.hp-bio-edit svg { display: block; }
.hp-bio-wrap:hover .hp-bio-edit,
.hp-bio-wrap:focus-within .hp-bio-edit {
  opacity: 1;
}
.hp-bio-wrap.is-editing .hp-bio,
.hp-bio-wrap.is-editing .hp-bio-edit {
  display: none;
}
.hp-bio-editor {
  margin: 0;
}
.hp-bio-editor.hidden { display: none; }
.hp-bio-editor textarea {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 62px;
  max-height: 140px;
  box-sizing: border-box;
  resize: none;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: transparent;
  color: #f2f1ed;
  font: 13px/1.65 inherit;
  outline: none;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  caret-color: #f5f4f0;
}
.hp-bio-editor textarea::placeholder { color: #6d6d68; }
.hp-bio-editor textarea:focus {
  border-bottom-color: rgba(255, 255, 255, 0.32);
}
.hp-bio-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
#hpBioCount { color: #6d6d68; font-size: 11px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.hp-bio-editor-actions { display: flex; gap: 4px; }
.hp-bio-editor-actions button {
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  font: 500 12px/1 inherit;
  cursor: pointer;
  background: transparent;
  color: #9a9a94;
}
.hp-bio-editor-actions button:hover { color: #eee; }
#hpBioSave {
  background: #f3f2ee;
  color: #161616;
}
#hpBioSave:hover { filter: brightness(0.96); }
#hpBioSave:disabled { opacity: 0.45; cursor: wait; }
.hp-feed { padding-top: 8px; }
.hp-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-tab {
  border: 0;
  background: transparent;
  color: #888880;
  padding: 0 0 10px;
  font: 500 14px/1.2 inherit;
  cursor: pointer;
}
.hp-tab.on {
  color: #f5f4f0;
  box-shadow: inset 0 -2px 0 #f5f4f0;
}
.hp-grid {
  display: block;
  column-count: 4;
  column-gap: 12px;
}
@media (max-width: 1100px) { .hp-grid { column-count: 3; } }
@media (max-width: 720px) { .hp-grid { column-count: 2; } }
.hp-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  break-inside: avoid;
  overflow: hidden;
  border: 1.5px solid transparent;
  padding: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  background:
    linear-gradient(#141418, #141418) padding-box,
    linear-gradient(135deg, rgba(255,224,138,.35), rgba(255,180,208,.28) 42%, rgba(203,182,255,.3) 70%, rgba(155,232,255,.38)) border-box;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.hp-card:hover {
  background:
    linear-gradient(#141418, #141418) padding-box,
    var(--brand-grad) border-box;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.hp-card-media {
  display: block;
  width: 100%;
  line-height: 0;
}
.hp-card img,
.hp-card video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--hp-ar, 3/4);
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  vertical-align: top;
  background: transparent;
}
.hp-card.is-video img,
.hp-card.is-video video {
  aspect-ratio: var(--hp-ar, 16/9);
}
.hp-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: var(--brand-grad);
  border: 0;
  color: #121216;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hp-card-play .ico { margin-left: 1px; display: block; }
.hp-card-kind {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.58);
  color: #f4f4f0;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.hp-empty {
  min-height: 52vh;
  display: grid;
  place-content: center;
  text-align: center;
  color: #888880;
  gap: 12px;
}
.hp-lightbox {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  background: #161618;
  color: #e8e8ea;
}
.hp-lightbox.hidden { display: none !important; }
body.hp-preview-open #profileClose { display: none !important; }
.hp-lb-main {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 28px 8px 28px 32px;
}
.hp-lb-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}
.hp-lb-image,
.hp-lb-video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 56px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  background: #101012;
}
.hp-lb-gutter {
  position: relative;
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0 28px;
}
.hp-lb-gutter::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  right: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 10%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(255, 255, 255, 0.04) 90%,
    transparent 100%
  );
}
.hp-lb-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hp-lb-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.hp-lb-close svg { width: 15px; height: 15px; display: block; }
.hp-lb-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hp-lb-arrow {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hp-lb-arrow:hover { color: rgba(255, 255, 255, 0.78); }
.hp-lb-arrow svg { width: 18px; height: 18px; display: block; }
.hp-lb-side {
  flex: 0 0 380px;
  width: 380px;
  min-height: 0;
  height: 100%;
  padding: 22px 28px 18px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hp-lb-block {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hp-lb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.hp-lb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hp-lb-user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hp-lb-who {
  min-width: 0;
}
.hp-lb-user strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #f2f2f4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-lb-who small {
  display: block;
  margin-top: 3px;
  color: #8a8a90;
  font-size: 12px;
}
.hp-lb-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hp-lb-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hp-lb-icon:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.hp-lb-icon.on { color: #ff6b8a; }
.hp-lb-icon svg { width: 18px; height: 18px; display: block; }
.hp-lb-icon.on svg path { fill: currentColor; }
.hp-lb-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  min-width: 148px;
  padding: 6px;
  border-radius: 12px;
  background: #232328;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.hp-lb-more-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font: 400 13px/1.2 inherit;
  text-align: left;
  cursor: pointer;
}
.hp-lb-more-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.hp-lb-meta {
  position: relative;
  margin: 0 0 20px;
  padding: 0 0 18px;
  color: #7a7a82;
  font-size: 12px;
  line-height: 1.55;
  flex-shrink: 0;
}
.hp-lb-meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.06) 42%,
    transparent 100%
  );
}
.hp-lb-label {
  margin: 0 0 10px;
  color: #8a8a90;
  font-size: 12px;
  flex-shrink: 0;
}
.hp-lb-prompt-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hp-lb-prompt {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  color: #c8c8ce;
  font-size: 13.5px;
  line-height: 1.78;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.hp-lb-prompt-wrap.is-clamped:not(.is-expanded)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 22, 24, 0), #161618 88%);
}
.hp-lb-prompt-wrap.is-expanded .hp-lb-prompt {
  overflow: auto;
}
.hp-lb-prompt-more {
  display: none;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #c9b8ff;
  font: 600 12px/1 inherit;
  cursor: pointer;
}
.hp-lb-prompt-wrap.is-clamped .hp-lb-prompt-more {
  display: inline-flex;
  position: relative;
  z-index: 1;
}
.hp-lb-prompt-more:hover { color: #fff; }
.hp-lb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 14px;
  background: #161618;
}
.hp-lb-action,
#hpLbRemix.hp-lb-action,
#hpLbAsRef.hp-lb-action {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 12px 10px;
  border: none;
  border-radius: 12px;
  background: var(--brand-grad);
  background-size: 140% 140%;
  color: #0a0e18;
  font: 700 0.92rem/1 inherit;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(46, 239, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.hp-lb-action:hover,
#hpLbRemix.hp-lb-action:hover,
#hpLbAsRef.hp-lb-action:hover {
  filter: brightness(1.06) saturate(1.05);
  color: #0a0e18;
  background: var(--brand-grad);
  background-size: 140% 140%;
  box-shadow:
    0 6px 22px rgba(46, 239, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hp-lb-action:active { transform: scale(0.985); }
.hp-lb-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}
.hp-lb-action svg {
  width: 16px;
  height: 16px;
  display: block;
  color: #0a0e18;
  stroke: currentColor;
}
@media (max-width: 900px) {
  .hp-lightbox {
    flex-direction: column;
    overflow: auto;
  }
  .hp-lb-main {
    padding: 16px 16px 8px;
    min-height: 48vh;
  }
  .hp-lb-image,
  .hp-lb-video { max-height: 58vh; }
  .hp-lb-gutter {
    flex: none;
    flex-direction: row;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    justify-content: space-between;
  }
  .hp-lb-gutter::after {
    top: auto;
    bottom: 0;
    left: 24px;
    right: 24px;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12) 50%,
      transparent
    );
  }
  .hp-lb-nav {
    flex: none;
    flex-direction: row;
    height: auto;
  }
  .hp-lb-side {
    flex: none;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 16px 22px 28px;
  }
  .hp-lb-prompt-wrap {
    min-height: 8em;
    max-height: 42vh;
  }
}
.hp-empty-art {
  width: 88px;
  height: 88px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 42%),
    radial-gradient(circle at 70% 70%, rgba(34,211,238,0.2), transparent 50%),
    #16161c;
}
@media (max-width: 800px) {
  .home-profile { padding: 56px 16px 24px; }
  .hp-main { grid-template-columns: 1fr; }
}

.account-sheet { width: min(420px, 100%); }
.account-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 12px;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.account-name { font-size: 1.05rem; font-weight: 600; }
.account-sub { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 4px;
}
.account-stat {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.account-stat .n { font-size: 1.05rem; font-weight: 700; }
.account-stat .l { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }

/* ── 会员订阅页（参考 Wan Membership Plans） ── */
.member-modal {
  display: block;
  padding: 0;
  place-items: unset;
  background: #0a0a0e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 120;
}
.member-modal.hidden { display: none !important; }
body.member-open { overflow: hidden; }
.member-page {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 28px 40px;
  box-sizing: border-box;
  border-radius: 0;
  font-family: var(--font);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
    #0a0a0a;
  color: #f5f4f0;
  box-shadow: none;
}
.member-close {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.member-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.member-hero {
  text-align: center;
  margin: 8px auto 22px;
  max-width: 720px;
}
.member-hero h1,
.member-hero h2 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #f5f4f0;
  background: none;
  -webkit-text-fill-color: unset;
}
.member-current {
  margin: 0;
  font-size: 13px;
  color: #888880;
  letter-spacing: 0.005em;
}
.member-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto 28px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.member-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #888880;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, background 0.15s ease;
}
.member-seg-btn:hover { color: #f5f4f0; }
.member-seg-btn.on {
  color: #0a0a0a;
  background: var(--brand-grad-compact);
  border: none;
  box-shadow: none;
}
.member-tab-panel { width: 100%; max-width: 1080px; margin: 0 auto; }
.member-tab-panel[hidden] { display: none !important; }
.member-soon {
  text-align: center;
  padding: 48px 20px;
  color: #888880;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.member-soon h3 {
  margin: 0 0 8px;
  color: #f5f4f0;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.member-soon p { margin: 0; font-size: 13px; line-height: 1.65; }
.credits-ledger {
  width: min(640px, 100%);
  margin: 0 auto;
}
.credits-ledger-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.credits-kicker {
  margin: 0 0 4px;
  color: #888880;
  font-size: 12px;
}
.credits-balance {
  margin: 0;
  color: #f5f4f0;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.credits-to-plans {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f4f0;
  font: 500 12.5px/1.2 inherit;
  cursor: pointer;
}
.credits-to-plans:hover { background: rgba(255, 255, 255, 0.14); }
.credits-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credits-empty {
  padding: 28px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #888880;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
}
.credits-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.credits-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 15px;
}
.credits-row.is-out .credits-delta { color: #fda4af; }
.credits-row.is-in .credits-delta { color: #6ee7b7; }
.credits-why {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.credits-why b {
  color: #f5f4f0;
  font-size: 13px;
  font-weight: 550;
}
.credits-why span { color: #888880; font-size: 12px; }
.credits-left { color: #888880; font-size: 12px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}
.plan-card {
  position: relative;
  background: rgba(22, 22, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-card.popular {
  border: 1.5px solid transparent;
  box-shadow:
    0 12px 40px rgba(10, 10, 10, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(165deg, rgba(255, 224, 138, 0.1) 0%, rgba(22, 22, 20, 0.96) 48%) padding-box,
    var(--brand-grad) border-box;
}
.plan-card.on:not(.popular) {
  border-color: rgba(255, 255, 255, 0.18);
}
.plan-badge {
  position: absolute;
  top: 0;
  right: 16px;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0a0a0a;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: var(--brand-grad-compact);
  box-shadow: none;
  font-family: var(--font-en, inherit);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-card .pn {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  color: #f5f4f0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.plan-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 2px 0 4px;
}
.plan-currency {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.plan-price {
  font-family: var(--font-en, inherit);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #f5f4f0;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.plan-period {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.plan-strike {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.32);
  text-decoration: line-through;
  margin-left: 4px;
}
.plan-billing {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.plan-bill-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  color: #888880;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.plan-bill-btn:hover { color: #f5f4f0; }
.plan-bill-btn.on {
  color: #0a0a0a;
  border: none;
  background: var(--brand-grad-compact);
}
.plan-cta {
  width: 100%;
  margin: 4px 0 6px;
  height: 42px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease, filter 0.15s ease;
}
.plan-cta:active { transform: scale(0.985); }
.plan-cta-grad {
  color: #0a0a0a;
  background: var(--brand-grad);
  border: none !important;
  box-shadow: none;
  outline: none;
}
.plan-cta-grad:hover { filter: brightness(1.06); }
.plan-cta-current,
.plan-cta-ghost {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
}
.plan-cta-ghost {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
}
.plan-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.plan-cta:disabled {
  opacity: 0.75;
  cursor: default;
}
.plan-credits {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}
.plan-credits-ico {
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 0.9rem;
}
.plan-credits strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.plan-credits p {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.35;
}
.plan-card .pf {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
  flex: 1;
}
.plan-card .pf li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
}
.plan-check {
  flex-shrink: 0;
  width: 14px;
  color: #22d3ee;
  font-size: 0.78rem;
  line-height: 1.35;
}
.member-foot {
  max-width: 720px;
  margin: 32px auto 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.65;
  color: #6a6a64;
}
.member-foot p { margin: 0 0 6px; }

@media (max-width: 700px) {
  .top-chrome { top: 10px; right: 10px; gap: 8px; }
  .user-status-bar,
  .user-status-pill { height: 32px; }
  .usp-capsule { height: 30px; padding: 0 10px 0 8px; gap: 8px; }
  .usp-member-label { font-size: 0.72rem; }
  #pointsVal { font-size: 0.72rem; }
  #pointsVal { font-size: 0.7rem; }
  .avatar-btn { width: 32px; height: 32px; }
}

/* ── 创作台设置（水印 / 隐私 / 协议） ── */
.settings-sheet {
  width: min(420px, 100%);
  padding: 18px 18px 16px;
  max-height: min(86vh, 640px);
  display: flex;
  flex-direction: column;
}
.settings-sheet .sheet-h { margin-bottom: 10px; flex-shrink: 0; }
.settings-group {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
}
.settings-row-title { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.settings-row-desc { font-size: 0.74rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.settings-link-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
}
.settings-link-row:last-child { border-bottom: none; }
.settings-link-row:hover { background: rgba(255, 255, 255, 0.04); }
.settings-chevron { color: var(--faint); font-size: 1.1rem; font-weight: 300; }
.settings-admin-hint {
  margin: 4px 2px 0;
  font-size: 0.74rem;
  color: var(--faint);
  line-height: 1.5;
}
.settings-admin-hint a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.settings-admin-hint a:hover { color: var(--text); }

/* iOS 风格开关 */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.switch input:checked + .switch-slider {
  background: var(--brand-grad-compact);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}

.settings-sub { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.settings-back {
  align-self: flex-start;
  border: none; background: transparent;
  color: var(--muted); font-size: 0.86rem;
  cursor: pointer; padding: 0 0 8px; margin: 0;
}
.settings-back:hover { color: var(--text); }
.settings-sub-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
}
.settings-legal {
  flex: 1;
  overflow: auto;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
  padding-right: 4px;
  max-height: min(52vh, 420px);
}
.settings-legal h4 {
  margin: 14px 0 6px;
  font-size: 0.86rem;
  color: var(--text);
  font-weight: 600;
}
.settings-legal h4:first-child { margin-top: 0; }
.settings-legal p { margin: 0 0 8px; }
.settings-legal ul { margin: 0 0 8px; padding-left: 1.2em; }
.settings-legal li { margin-bottom: 4px; }
.settings-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0.72;
}
.settings-legal a:hover { opacity: 1; border-bottom-color: rgba(255, 255, 255, 0.28); }
.settings-about { padding-right: 2px; color: #8f8f97; }
.about-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.about-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: none;
  opacity: 0.88;
}
.about-hero strong {
  display: block;
  color: #d8d8de;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.about-hero p {
  margin: 2px 0 0;
  color: #7a7a82;
  font-size: 12px;
  line-height: 1.45;
}
.about-block {
  margin: 0 0 16px;
  padding: 0 1px;
}
.about-block h4 {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #6a6a72;
}
.about-block p { margin: 0; color: #9a9aa2; font-size: 13px; line-height: 1.7; }
.about-note {
  margin-top: 8px !important;
  color: #6e6e76 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
.about-admin {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #8a8a92 !important;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  opacity: 0.78;
}
.about-admin:hover {
  background: none;
  color: #c4c4cc !important;
  opacity: 1;
}

/* 预览水印 */
.wm-host { position: relative; }
.wm-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: none;
  background:
    repeating-linear-gradient(
      -22deg,
      transparent,
      transparent 72px,
      rgba(255, 255, 255, 0.04) 72px,
      rgba(255, 255, 255, 0.04) 73px
    );
}
.wm-overlay::after {
  content: attr(data-label);
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.wm-on .wm-overlay { display: block; }
body.wm-on .lb-stage { position: relative; }
/* 非探索 / 视频：舞台水印；探索模式主图走 .lb-wcard[data-slot="0"]::after */
body.wm-on .lb-stage::after {
  content: "CHUYAN";
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
/* 探索模式舞台图已隐藏，避免双重水印 */
body.wm-on .lightbox.lb-explore .lb-stage::after {
  display: none;
}

/* 通用液态玻璃弹窗（删除确认 / 重命名等） */
.studio-dialog-sheet {
  width: min(360px, 100%);
  padding: 22px 22px 18px;
  border-radius: 22px;
  animation: studioDialogIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes studioDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.studio-dialog-sheet .sheet-h {
  margin-bottom: 2px;
}
.studio-dialog-sheet .sheet-h h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
}
.studio-dialog-sheet .x {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.15s ease, color 0.15s ease;
}
.studio-dialog-sheet .x:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.studio-dialog-msg {
  margin: 10px 0 6px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(210, 216, 228, 0.78);
}
.studio-dialog-msg.hidden { display: none; }
.studio-dialog-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 4px;
}
.studio-dialog-fields .field {
  margin: 8px 0;
}
.studio-dialog-fields .field input,
.studio-dialog-fields .field select {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.studio-dialog-fields .field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.studio-dialog-fields .field select option {
  background: #1a1a20;
  color: #e8ecf5;
}
.studio-dialog-fields .field input:focus,
.studio-dialog-fields .field select:focus {
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
  background: rgba(0, 0, 0, 0.38);
}
.studio-dialog-sheet .sheet-actions {
  margin-top: 18px;
  gap: 10px;
}
.studio-dialog-sheet .btn {
  min-width: 76px;
  padding: 9px 16px;
  font-size: 0.84rem;
  border-radius: 999px;
}
.studio-dialog-sheet .btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
}
.studio-dialog-sheet .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.studio-dialog-sheet .btn.primary:not(.danger) {
  background: linear-gradient(135deg, rgba(232, 236, 245, 0.96), rgba(168, 180, 200, 0.92));
  color: #121216;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* 危险确认按钮：酸柠动作色，不用粉色、不用 logo 渐变 */
.studio-dialog-sheet .btn.primary.danger {
  background: var(--brand-grad);
  color: #0c0c10;
  border: none;
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.22);
  font-weight: 600;
}
.studio-dialog-sheet .btn.primary.danger:hover {
  filter: brightness(1.08) saturate(1.05);
}
/* 遮罩：轻暗即可，不模糊背景 */
#studioDialog {
  z-index: 80;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 液态玻璃面板：与首页 composer / glass-surface 同系 */
.glass-sheet {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.04) 100%),
    rgba(22, 24, 32, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(32px) saturate(1.85) brightness(1.12);
  -webkit-backdrop-filter: blur(32px) saturate(1.85) brightness(1.12);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 28px 2px rgba(255, 255, 255, 0.05);
  border-radius: 22px;
}
@supports not (backdrop-filter: blur(10px)) {
  .glass-sheet {
    background: rgba(24, 26, 34, 0.92) !important;
  }
}

/*
 * 资产库：右侧窄栏（红框），宽度与 Lovart 对话栏一致
 * 会话模式：对话主栏 | 资产
 * Lovart：画布 | 对话 | 资产
 * 绝不占全屏
 */
#assetsDrawer.assets-drawer,
.assets-drawer {
  display: none;
  flex-direction: column;
  /* 与 Lovart 对话栏同宽 */
  flex: 0 0 min(380px, 34vw) !important;
  width: min(380px, 34vw) !important;
  min-width: 280px !important;
  max-width: min(420px, 38vw) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* visible：左缘 › 可探出；内部 body 自己滚 */
  overflow: visible;
  align-self: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  position: relative;
  z-index: 5;
  order: 2;
  background: #0a0a0c !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
}
#assetsDrawer.assets-drawer.open,
.assets-drawer.open {
  display: flex !important;
}
/* 打开时对话主栏让出右侧窄栏，时间线仍可见 */
.workspace.drawer-open .work-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.workspace.drawer-open .work-scroll {
  display: flex !important; /* 覆盖旧 assets-view 隐藏 */
}
/* 废弃：全屏/同栏切换 */
.work-main.assets-view .work-scroll,
.workspace.assets-view .work-scroll {
  display: block !important;
}
.work-main.assets-view,
.workspace.assets-view {
  /* no-op 兼容旧 class */
}
/* 标题 + 范围 + 搜索：同一行 */
.assets-drawer-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 10px 8px 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
  box-sizing: border-box;
}
/* › 贴资产栏左缘中线（在外面，不在标题行里） */
.assets-panel-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 14;
  width: 18px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(22, 24, 32, 0.92);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: rgba(220, 226, 236, 0.92);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.assets-panel-toggle:hover {
  color: #fff;
  background: rgba(40, 44, 56, 0.96);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) scale(1.04);
}
#assetsDrawer.assets-drawer.open .assets-panel-toggle,
.assets-drawer.open .assets-panel-toggle {
  display: grid;
}
.assets-drawer-title-row {
  display: contents;
}
/* 旧文案「收起」/ 中部胶囊轨：弃用 */
.assets-drawer-back,
.assets-drawer-close,
.assets-drawer-rail {
  display: none !important;
}
.assets-drawer-title {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.assets-drawer-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
/* 折叠后右侧窄轨：对齐画布「项目」轨，贴右缘 */
.assets-expand-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 28px;
  padding: 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: rgba(14, 14, 17, 0.94);
  color: rgba(170, 176, 192, 0.92);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  text-align: center;
}
.assets-expand-rail:hover {
  color: #fff;
  background: rgba(24, 24, 30, 0.98);
}
.assets-expand-rail.hidden {
  display: none !important;
}
/* 仅生成页显示折叠轨（具体 hidden 由 JS 控制） */
body:not(.view-chat) .assets-expand-rail {
  display: none !important;
}
/* Lovart 画布：不要侧边「资」轨，只用顶栏 资产库/对话 切换，避免混用 */
body.display-lovart .assets-expand-rail {
  display: none !important;
}
/* 资产栏展开时再保险隐藏窄轨 */
.workspace.drawer-open ~ .assets-expand-rail,
.workspace.drawer-open .assets-expand-rail {
  display: none !important;
}
/*
 * 资产类型切换：Lovart 式扁平文字条
 * 无外壳；未选中是字，选中才有浅色圆角
 */
.assets-drawer-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 2px 12px 12px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  width: auto;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.assets-drawer-tabs::-webkit-scrollbar {
  display: none;
  height: 0;
}
.assets-tab {
  appearance: none;
  border: none !important;
  background: transparent;
  color: rgba(245, 247, 252, 0.48);
  border-radius: 999px;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1;
  transition: background 0.14s ease, color 0.14s ease;
}
.assets-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}
.assets-tab.on,
.assets-tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow: none !important;
}

/*
 * 资产网格：固定卡片宽 + auto-fill
 * 会话全宽时多列小图；窄栏时 2 列，不再半屏巨图
 */
#assetsDrawerBody.assets-drawer-body,
.assets-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 4px 10px 16px;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  column-count: unset !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.assets-drawer-body:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.assets-drawer-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.assets-drawer-body:hover::-webkit-scrollbar {
  width: 3px;
  height: 0;
}
.assets-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}
.assets-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
.assets-drawer {
  scrollbar-width: none;
}
.assets-drawer::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#assetsDrawerBody .assets-masonry,
.assets-drawer-body .assets-masonry {
  display: grid !important;
  /* 4 列更小缩略图，一屏多看 */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-content: start !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 0 2px 8px;
}
/* 旧双列残留：摊平参与网格 */
#assetsDrawerBody .assets-col,
.assets-drawer-body .assets-col {
  display: contents !important;
}
.assets-drawer-empty {
  width: 100%;
  text-align: center;
  padding: 36px 12px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.8rem;
}
.assets-drawer-more {
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  padding: 10px 8px 4px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.38);
  user-select: none;
}
.assets-drawer-more.done {
  color: rgba(255, 255, 255, 0.22);
}

/* 卡片：窄栏双列，随列宽，3:4 统一 */
#assetsDrawerBody .assets-drawer-card,
.assets-drawer-body .assets-drawer-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  border-radius: 12px;
  overflow: hidden !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(#121216, #121216) padding-box,
    linear-gradient(135deg, rgba(255,224,138,.35), rgba(255,180,208,.28) 42%, rgba(203,182,255,.3) 70%, rgba(155,232,255,.38)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: block !important;
  flex: 0 0 auto !important;
  aspect-ratio: 3 / 4;
  z-index: auto !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.assets-drawer-card::before {
  content: none !important;
  display: none !important;
}
.assets-drawer-card:hover {
  border-color: transparent !important;
  background:
    linear-gradient(#121216, #121216) padding-box,
    var(--brand-grad) border-box !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: none !important;
  z-index: auto !important;
}

/* 图片/视频：铺满卡片格，cover 裁切，尺寸统一 */
#assetsDrawerBody .assets-drawer-card img,
#assetsDrawerBody .assets-drawer-card video,
.assets-drawer-body .assets-drawer-card img,
.assets-drawer-body .assets-drawer-card video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #0a0a0c;
  pointer-events: none;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  float: none !important;
  z-index: 0 !important;
}
#assetsDrawerBody .assets-drawer-card video,
.assets-drawer-body .assets-drawer-card video {
  min-height: 0 !important;
  background: #0a0a0c;
}
.assets-drawer-card .adc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: var(--brand-grad);
  border: 0;
  color: #121216;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.assets-drawer-card .adc-play .ico { margin-left: 1px; display: block; }
.assets-drawer-card .adc-lab {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.assets-drawer-card .adc-lab.on,
.assets-drawer-card:hover .adc-lab {
  opacity: 1;
}
.adc-audio {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: 88px;
  height: auto;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: rgba(var(--brand-rgb), 0.9);
  background: rgba(255, 255, 255, 0.04);
  z-index: 0;
  padding: 20px 8px;
  box-sizing: border-box;
}
/* 资产悬停预览：固定在抽屉左侧外侧，不叠在网格卡片上 */
.assets-hover-preview {
  position: fixed;
  z-index: 10050;
  width: 260px; /* 默认比旧版 200 大约 30% */
  max-width: min(360px, 34vw);
  max-height: calc(100vh - 24px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: rgba(14, 16, 22, 0.94);
  pointer-events: none;
  box-sizing: border-box;
}
.assets-hover-preview.hidden {
  display: none !important;
}
.assets-hover-preview img,
.assets-hover-preview video {
  width: 100%;
  max-height: calc(100vh - 24px);
  display: block;
  height: auto;
  object-fit: contain;
  background: #0a0a0c;
}

/* 会话内筛选条 */
.session-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 4px 12px;
  align-items: center;
}
.session-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.glass-chip-bar .assets-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.glass-chip-bar .assets-chip.on {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

/* 主体库 */
.subjects-page { max-width: 1100px; margin: 0 auto; }
.subjects-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.subjects-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.subject-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.subject-card:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}
.subject-thumb {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.04);
}
/* 底部单行：名称 + 纯图标（无圆圈、无类型文案） */
.subject-meta {
  padding: 8px 8px 8px 11px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 0;
}
.subject-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.subject-role { display: none; }
.subject-text { display: contents; }
.subject-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin: 0;
}
/* 纯图标，无底无圆 */
.subject-ico {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.subject-ico svg {
  display: block;
  pointer-events: none;
}
.subject-ico:hover {
  color: #fff;
  background: transparent;
}
.subject-ico.danger {
  color: rgba(255, 150, 158, 0.7);
}
.subject-ico.danger:hover {
  color: #ffb4ba;
  background: transparent;
}
.subject-badge {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(var(--brand-rgb), 0.75);
  background: transparent;
  border: none;
  padding: 0 2px 0 0;
  white-space: nowrap;
}
.subject-act { display: none; }
.subjects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}

/* 资产页筛选：去掉创作类型相关若有 */
.assets-filter-row[data-create-type] { display: none !important; }

/* ── Agent 自动 = 生成偏好面板 ── */
.auto-pref-panel {
  width: min(340px, calc(100vw - 24px));
  min-width: 280px;
}
.auto-pref-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.auto-pref-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-right: auto;
}
.auto-pref-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  padding: 3px;
}
.auto-pref-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.auto-pref-tab.on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.auto-pref-head .auto-switch {
  font-size: 0.68rem;
  gap: 4px;
}

/* ── 会话顶栏：右上角单条胶囊（搜索｜筛选｜资产库） ── */
.chat-topbar {
  display: block;
  position: absolute;
  top: 12px;
  right: 14px;
  left: auto;
  z-index: 40;
  pointer-events: none;
  width: auto;
  max-width: min(480px, calc(100% - 24px));
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.workspace.filled .chat-topbar,
.chat-topbar.has-jobs {
  display: block;
}
.chat-topbar .chat-filter-bar,
.workspace.filled .chat-topbar .chat-filter-bar,
.chat-topbar.has-jobs .chat-filter-bar {
  pointer-events: auto;
}
.workspace.empty .chat-topbar {
  display: block;
}
/* Lovart：筛选条放画布外侧右上（贴对话栏左边），不要嵌进对话栏里面 */
body.display-lovart .work-main > .chat-topbar {
  display: none !important;
}
body.display-lovart .lovart-stage {
  position: relative;
}
body.display-lovart .lovart-stage > .chat-topbar,
body.display-lovart .chat-topbar.is-lovart-outer {
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 45 !important;
  max-width: min(420px, calc(100% - 24px));
  pointer-events: none;
}
body.display-lovart .lovart-stage > .chat-topbar .chat-filter-bar,
body.display-lovart .chat-topbar.is-lovart-outer .chat-filter-bar {
  pointer-events: auto;
}
/* 旧：进画布中心 / 藏起来 的规则作废 */
body.display-lovart .chat-topbar.is-on-canvas {
  display: block !important;
}
/* 打开筛选菜单：仅筛选条局部压暗（非全屏） */
.chat-topbar.is-menu-open {
  z-index: 80;
}
/* 筛选条：Lovart 式扁平，无玻璃外壳 */
.chat-filter-bar {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: auto;
  min-height: 32px;
  padding: 0;
  border-radius: 0 !important;
  overflow: visible;
  width: auto;
  max-width: 100%;
  justify-content: flex-end;
  flex-wrap: nowrap;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-filter-bar.is-search-open {
  box-shadow: none !important;
}
.cfb-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin: 0 1px;
}
.cfb-search-btn,
.cfb-btn,
.cfb-tool-btn,
.cfb-assets-btn {
  appearance: none;
  border: none !important;
  background: transparent;
  color: rgba(245, 247, 252, 0.5);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.12s ease, color 0.12s ease;
  opacity: 1;
}
.cfb-search-btn {
  width: var(--tb-btn-h);
  min-width: var(--tb-btn-h);
  padding: 0;
}
.cfb-search-btn:hover,
.cfb-btn:hover,
.cfb-tool-btn:hover,
.cfb-assets-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}
.cfb-tool-btn {
  width: var(--tb-btn-h);
  min-width: var(--tb-btn-h);
  padding: 0;
}
.cfb-tool-btn.is-on {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
/* 资产库 / 对话：嵌在同一条工具条内 */
.chat-filter-bar .cfb-assets-btn,
.cfb-assets-btn {
  flex-shrink: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  gap: 5px;
  border-radius: 999px;
  color: rgba(245, 247, 252, 0.5);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
}
.cfb-assets-btn .ico {
  opacity: 0.9;
  flex-shrink: 0;
}
.cfb-assets-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: none !important;
}
.cfb-assets-btn.is-on {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: none !important;
  opacity: 1;
}
.cfb-assets-btn.is-on:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.cfb-assets-btn.hidden {
  display: none !important;
}
.cfb-source-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.cfb-source-row.hidden { display: none !important; }
.cfb-source {
  appearance: none;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 247, 252, 0.5);
  font: 500 0.78rem/1 inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.cfb-source:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}
.cfb-source.on {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.cfb-source svg { display: block; flex-shrink: 0; }
.chat-topbar.is-source-nav {
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
.chat-topbar.is-source-nav .ofs-wrap,
.chat-topbar.is-source-nav .chat-filter-bar,
#sessionFilters.is-source-open.ofs-track {
  width: max-content;
  max-width: calc(100vw - 110px);
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.chat-filter-bar.is-source-open > :not(.cfb-source-row) {
  display: none !important;
}
.chat-topbar.is-source-nav .ofs-nudge {
  display: none !important;
}
.chat-filter-bar.is-source-open .cfb-source-row {
  display: inline-flex;
  max-width: calc(100vw - 110px);
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-filter-bar.is-source-open .cfb-source-row::-webkit-scrollbar {
  display: none;
}
.gen-source-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 56px 20px 16px;
}
.gen-source-panel.hidden { display: none !important; }
.work-main.is-source .work-scroll {
  flex: 0 0 auto;
}
.work-main.is-source #timeline,
.work-main.is-source #emptyHero {
  display: none !important;
}
.gsp-pane {
  flex: 1 1 auto;
  min-height: 0;
}
.gsp-pane.hidden { display: none !important; }
#gspPin {
  display: flex;
  flex-direction: column;
}
.gsp-lead {
  margin: 4px 0 14px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}
.gsp-sub {
  margin: 18px 0 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}
.gsp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.gsp-toolbar input {
  flex: 1;
  min-width: 160px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f6;
  font: 400 13px/1 inherit;
  outline: none;
}
.gsp-btn {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 500 13px/1 inherit;
  cursor: pointer;
}
.gsp-btn.ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
}
.gsp-btn:hover { background: rgba(255, 255, 255, 0.16); }
.gsp-status { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.gsp-pin-connect-state {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 16px 72px;
  box-sizing: border-box;
  text-align: center;
}
.gsp-pin-connect-state.hidden {
  display: none !important;
}
.gsp-pin-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #e60023;
}
.gsp-pin-connect-state p {
  margin: 0;
  color: rgba(245, 247, 252, 0.58);
  font-size: 14px;
  line-height: 1.5;
}
.gsp-pin-connect-btn {
  height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.88);
  font: 500 13px/1 inherit;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.gsp-pin-connect-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Pinterest 来源：按 Lovart 的左创作栏 + 右内容库结构一比一排布。 */
#viewChat .workspace.has-pinterest-source { padding: 0; }
.work-main.source-pinterest {
  --pinterest-compose-width: max(320px, 30%);
  display: grid;
  grid-template-columns: var(--pinterest-compose-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #161616;
}
#viewChat .workspace .work-main.source-pinterest { align-items: stretch; justify-content: stretch; }
.work-main.source-pinterest .chat-topbar.is-source-nav {
  top: 8px;
  left: calc(var(--pinterest-compose-width) + 12px);
  right: auto;
  max-width: calc(100% - var(--pinterest-compose-width) - 24px);
  transform: none;
}
.work-main.source-pinterest .gen-source-panel {
  grid-column: 2;
  grid-row: 1 / 4;
  min-width: 0;
  min-height: 0;
  padding: 44px 0 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #161616;
  overflow: hidden;
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
.work-main.source-pinterest .work-scroll {
  display: none !important;
}
.work-main.source-pinterest .source-compose-hero {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  width: min(560px, calc(100% - 48px));
  margin-bottom: 28px;
}
.source-compose-hero.hidden,
.source-compose-hints.hidden {
  display: none !important;
}
.source-compose-hero h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.work-main.source-pinterest .composer-dock,
#viewChat .work-main.source-pinterest .composer-dock,
#viewChat .workspace.filled .work-main.source-pinterest .composer-dock {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  padding: 0 16px;
  box-sizing: border-box;
}
.work-main.source-pinterest .composer-dock .glass-surface--chat {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  border-radius: 24px;
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#viewChat .work-main.source-pinterest #composerDock,
#viewChat .work-main.source-pinterest #composerGlassChat,
#viewChat .work-main.source-pinterest .glass-surface__content,
#viewChat .work-main.source-pinterest #composerChat {
  width: 100% !important;
  max-width: none !important;
}
.work-main.source-pinterest .composer-main textarea {
  min-height: 58px;
  font-size: 14px;
}
#viewChat .work-main.source-pinterest #promptChat { height: 52px; min-height: 52px; }
#viewChat .work-main.source-pinterest #composerChat .composer-main { min-height: 52px; margin-bottom: 6px; }
.source-compose-tools,
.source-tool-button.source-preferences { display: none; }
.work-main.source-pinterest .source-compose-tools { position: relative; display: block; margin-right: auto; }
.work-main.source-pinterest .source-preferences { display: grid; }
.work-main.source-pinterest #barChat,
.work-main.source-pinterest #btnMicChat { display: none; }
#viewChat .work-main.source-pinterest .composer-bar { display: flex !important; min-height: 32px; padding: 0; }
#viewChat .work-main.source-pinterest .composer-bar > .ofs-wrap { display: none; }
#viewChat .work-main.source-pinterest .glass-composer { padding: 16px !important; }
#viewChat .work-main.source-pinterest .composer-bar .bar-right { height: 32px; }
.work-main.source-pinterest .composer-main { margin-bottom: 10px; }
#viewChat .work-main.source-pinterest #btnRunChat { width: 32px; height: 32px; }
.source-tool-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; padding: 0; color: #ccc; cursor: pointer; font-size: 24px; }
.source-tool-button:hover { color: #fff; }
.source-add-menu { position: absolute; left: 0; bottom: 38px; z-index: 30; width: 180px; padding: 6px; background: #262626; border: 1px solid #3b3b3b; border-radius: 12px; box-shadow: 0 8px 30px #0005; }
.source-add-menu.hidden { display: none; }
.source-add-menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: none; color: #ddd; text-align: left; cursor: pointer; }
.source-add-menu button:hover { background: #ffffff12; }
.work-main.source-pinterest .source-compose-hints {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: calc(100% - 56px);
  margin-top: 24px;
}
.source-compose-hints button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.source-compose-hints button:hover {
  color: rgba(255, 255, 255, 0.78);
}
.source-hint-icon {
  color: #6f84ff;
  font-size: 14px;
}
.source-hint-icon.pinterest {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e60023;
  color: #fff;
  font: 700 10px/1 sans-serif;
}
.cfb-source-add {
  width: 30px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
}

#gspPin {
  min-height: 0;
  overflow: hidden;
}
.gsp-pin-tabs {
  flex: 0 0 36px;
  min-height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
.gsp-pin-tabs.hidden {
  display: none !important;
}
.gsp-pin-tablist {
  display: flex;
  align-items: stretch;
  gap: 22px;
  height: 100%;
}
.gsp-pin-tab {
  appearance: none;
  position: relative;
  height: 100%;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.gsp-pin-tab.on {
  color: rgba(255, 255, 255, 0.92);
}
.gsp-pin-tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.88);
}
.gsp-pin-menu {
  position: relative;
  align-self: center;
}
.gsp-pin-menu-btn {
  appearance: none;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  cursor: pointer;
}
.gsp-pin-menu-btn:hover {
  color: #fff;
}
.gsp-pin-menu-pop {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 20;
  width: 132px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(28, 28, 31, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.gsp-pin-menu-pop.hidden {
  display: none !important;
}
.gsp-pin-menu-pop button {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
}
.gsp-pin-menu-pop button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.gsp-pin-feed {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 16px 16px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.gsp-pin-feed.hidden { display: none; }
.pin-masonry { column-count: 4; column-gap: 12px; }
body.pinterest-source-open #workspace #modeOrb,
.workspace.has-pinterest-source #btnExpandAssets { display: none !important; }
.work-main.source-pinterest .chat-filter-bar.is-source-open .cfb-source-row {
  max-width: 100%;
}
.work-main.source-pinterest .chat-topbar.is-source-nav .ofs-wrap,
.work-main.source-pinterest #sessionFilters.is-source-open.ofs-track {
  max-width: 100%;
}
.pinterest-chat-reference { position: relative; width: 64px; height: 72px; margin-bottom: 10px; }
.pinterest-chat-reference.hidden { display: none; }
.pinterest-chat-reference img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pinterest-chat-reference button { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #333; color: #fff; cursor: pointer; }
.pin-image-fallback { display: grid; place-items: center; min-height: 150px; padding: 12px; color: #999; font-size: 12px; }
.inspire-pin-card img[hidden] { display: none !important; }
.gsp-pin-feed .inspire-pin-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  height: auto;
  min-height: 90px;
  margin: 0 0 12px;
  aspect-ratio: auto;
  border-radius: 12px;
  vertical-align: top;
  background: #1a1a1c;
}
.gsp-pin-feed .inspire-pin-card img {
  width: 100%;
  height: auto;
  min-height: 90px;
  max-height: none;
  object-fit: cover;
}
.gsp-pin-feed .inspire-pin-card .pin-cap {
  display: none;
}
.pin-add {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.14s ease;
  pointer-events: none;
}
.gsp-pin-feed .inspire-pin-card:hover .pin-add,
.gsp-pin-feed .inspire-pin-card:focus-visible .pin-add {
  opacity: 1;
}
.gsp-pin-feed .inspire-pin-card.is-board {
  aspect-ratio: 4 / 3;
}
.gsp-pin-feed .inspire-pin-card.is-board img {
  height: 100%;
}
.pin-board-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  background: rgba(230, 0, 35, 0.12);
  color: #e60023;
  font: 700 28px/1 sans-serif;
}
.pin-board-cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 28px 10px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  text-align: left;
}
.pin-board-cap strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-board-cap small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}
.gsp-pin-feed .inspire-empty,
.gsp-pin-feed .inspire-error,
.gsp-pin-feed .inspire-load-more {
  column-span: all;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .work-main.source-pinterest {
    --pinterest-compose-width: max(300px, 36%);
  }
  .pin-masonry {
    column-count: 3;
  }
}
@media (max-width: 720px) {
  .work-main.source-pinterest {
    --pinterest-compose-width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: 52px;
  }
  .work-main.source-pinterest .chat-topbar.is-source-nav { left: 12px; max-width: calc(100% - 24px); }
  .work-main.source-pinterest .source-compose-hero { order: 0; margin: 16px auto; }
  .work-main.source-pinterest .composer-dock { order: 1; flex-shrink: 0; }
  .work-main.source-pinterest .source-compose-hints { order: 2; margin: 16px auto 24px; }
  .work-main.source-pinterest .gen-source-panel { order: 3; padding-top: 0; min-height: 420px; border-left: 0; border-top: 1px solid #292929; }
  .pin-masonry { column-count: 2; }
}
.gsp-connect {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.6;
}
.gsp-connect input {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.gsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.gsp-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(#141418, #141418) padding-box,
    linear-gradient(135deg, rgba(255,224,138,.35), rgba(255,180,208,.28) 42%, rgba(203,182,255,.3) 70%, rgba(155,232,255,.38)) border-box;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.gsp-card:hover {
  background:
    linear-gradient(#141418, #141418) padding-box,
    var(--brand-grad) border-box;
}
.gsp-card img,
.gsp-card video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.gsp-card span {
  display: block;
  padding: 8px 8px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsp-empty {
  grid-column: 1 / -1;
  padding: 40px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}
/* 展开后的搜索输入：嵌在整条内部 */
.cfb-search-input {
  width: 0;
  max-width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(245, 247, 252, 0.96);
  border-radius: 0;
  font-size: 0.76rem;
  line-height: 1;
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease,
    margin 0.22s ease,
    padding 0.22s ease;
}
.cfb-search-input:not(.hidden),
.chat-filter-bar.is-search-open .cfb-search-input {
  width: min(168px, 36vw);
  max-width: 168px;
  margin: 0 2px 0 0;
  padding: 0 8px 0 2px;
  opacity: 1;
  background: transparent;
}
.cfb-search-input.hidden {
  display: block !important; /* 用宽度动画，不用 display:none 以便展开过渡 */
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}
.chat-filter-bar.is-search-open .cfb-search-input.hidden {
  /* 打开时移除 hidden 语义由 class 控制，此处兜底 */
  width: min(168px, 36vw) !important;
  max-width: 168px !important;
  margin: 0 2px 0 0 !important;
  padding: 0 8px 0 2px !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.cfb-search-input::placeholder {
  color: rgba(160, 170, 185, 0.55);
}
.cfb-v2 .filter-dd {
  position: relative;
  display: inline-flex;
  z-index: 3;
}
/* 下拉：高对比不透字 + 局部遮罩 */
.cfb-v2 .filter-dd-menu,
.cfb-v2 .glass-dd-menu {
  right: 0;
  left: auto !important;
  z-index: 80 !important;
  min-width: 148px;
  padding: 6px !important;
  background: rgba(22, 24, 32, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.cfb-v2 .filter-dd.is-open {
  z-index: 90;
}
.cfb-v2 .filter-dd.is-open::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  right: -10px;
  width: 180px;
  height: 200px;
  border-radius: 16px;
  background: rgba(6, 6, 10, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}
.cfb-v2 .filter-dd.is-open .filter-dd-menu {
  z-index: 2;
}
.cfb-v2 .pill-menu-item {
  color: rgba(245, 247, 252, 0.95) !important;
  font-weight: 500;
}
.cfb-v2 .pill-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.cfb-v2 .pill-menu-item.on {
  background: rgba(100, 150, 255, 0.18) !important;
  color: #fff !important;
}
.filter-dd { position: relative; display: inline-flex; }
.filter-caret { font-size: 0.58rem; opacity: 0.65; margin-left: 1px; }
/* 绝对定位下拉，勿用 .media-panel 的 fixed */
.glass-dd-menu,
.filter-dd-menu {
  position: absolute !important;
  top: calc(100% + 8px);
  right: 0;
  left: auto !important;
  bottom: auto !important;
  min-width: 148px;
  z-index: 50;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  animation: none;
  width: auto;
}
.filter-dd-menu.hidden,
.glass-dd-menu.hidden {
  display: none !important;
}


/* ── 资产抽屉：标题行内联 ── */
.assets-scope-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  cursor: pointer;
  text-align: left;
  padding: 0 2px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.assets-scope-btn:hover { color: rgba(200, 220, 255, 0.95); }
/* 搜索挤在同一行右侧 */
.assets-drawer-head .assets-drawer-search {
  flex: 1 1 auto;
  min-width: 72px;
  padding: 0;
  margin: 0;
}
.assets-drawer-search {
  padding: 0;
}
.assets-drawer-head .assets-drawer-search input,
.assets-drawer-search input {
  width: 100%;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 0 10px;
  font-size: 0.7rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.assets-drawer-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.assets-drawer-search input:focus {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
.adc-wave { font-size: 1.4rem; }
.adc-name {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adc-audio {
  flex-direction: column;
  gap: 6px;
}

/* pill-menu 去掉显眼滚动条 */
.pill-menu {
  scrollbar-width: none;
}
.pill-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ═══════════════════════════════════════════
 * Lovart 智能画布模式：左画布 + 右对话
 * ═══════════════════════════════════════════ */
.lovart-stage {
  display: none;
  flex: 1 1 58%;
  min-width: 0;
  min-height: 0;
  position: relative;
  background: #0a0a0e;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.lovart-stage.hidden {
  display: none !important;
}
body.display-lovart .lovart-stage {
  display: flex !important;
  flex-direction: column;
}
body.display-lovart .workspace.filled .work-main {
  flex: 0 0 min(420px, 38%);
  max-width: min(440px, 42vw);
  min-width: 300px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
body.display-lovart .workspace.filled .work-body {
  flex-direction: row;
}
/* Lovart 默认不显示资产；仅手动打开 */
body.display-lovart .workspace.filled .assets-drawer:not(.open),
body.display-lovart .assets-drawer:not(.open) {
  display: none !important;
}

/*
 * Lovart + 打开资产：画布 | 资产（对话栏隐藏，与对话模式「主区|资产」同构）
 * 收起：资产栏左侧 › 侧钮（同对话模式）
 */
body.display-lovart.lovart-assets-open .work-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative;
  min-height: 0;
}
body.display-lovart.lovart-assets-open .lovart-stage,
body.display-lovart.lovart-assets-open #lovartStage {
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  order: 0 !important;
}
/* 开启资产时中间对话栏不必再占位 */
body.display-lovart.lovart-assets-open .workspace.filled .work-main,
body.display-lovart.lovart-assets-open #workMain {
  display: none !important;
}
body.display-lovart.lovart-assets-open #assetsDrawer.assets-drawer.open,
body.display-lovart.lovart-assets-open .assets-drawer.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  order: 1 !important;
  /* 与对话栏同宽 */
  flex: 0 0 min(420px, 38%) !important;
  width: min(420px, 38vw) !important;
  min-width: 300px !important;
  max-width: min(440px, 42vw) !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  background: #0a0a0c !important;
  z-index: 5;
  overflow: visible !important;
}
/* 开资产时筛选条仍在画布外侧，不塞进资产栏 */
body.display-lovart.lovart-assets-open #assetsDrawer > .chat-topbar,
body.display-lovart.lovart-assets-open .assets-drawer > .chat-topbar {
  display: none !important;
}
body.display-lovart.lovart-assets-open .lovart-stage > .chat-topbar {
  display: block !important;
}
/* Lovart 右栏对话：底部留白让内容滚到输入框上方（与图2一致） */
body.display-lovart .workspace.filled .work-scroll {
  --composer-clearance: max(240px, min(320px, 34vh));
  padding: 48px 12px 16px 14px;
  scroll-padding-bottom: var(--composer-clearance);
}
body.display-lovart .workspace.filled .composer-dock {
  padding: 6px 10px 10px;
}

/* Lovart 分栏后右侧对话变窄：时间线缩略图缩小，避免撑满栏宽 */
body.display-lovart .tl-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  max-width: min(100%, 280px);
  gap: 6px;
}
body.display-lovart .tl-result-grid:has(.tl-media-tile:only-child) {
  grid-template-columns: minmax(100px, min(var(--tl-w, 220px), 100%));
  max-width: min(var(--tl-w, 220px), 100%);
}
body.display-lovart .tl-media-tile {
  max-width: min(var(--tl-w, 220px), 100%);
  border-radius: 10px;
}
body.display-lovart .tl-card--batch .tl-batch-grid,
body.display-lovart .tl-card--batch .tl-result-grid--batch {
  width: min(100%, calc(var(--cols, 4) * var(--batch-col-w, 96px) + (var(--cols, 4) - 1) * 6px));
  gap: 6px;
}
body.display-lovart .tl-result-grid--batch {
  max-width: min(100%, calc(var(--cols, 4) * var(--batch-col-w, 96px) + (var(--cols, 4) - 1) * 6px));
}
body.display-lovart .tl-result-grid--batch .tl-media-tile,
body.display-lovart .tl-batch-slot .tl-media-tile {
  max-width: none;
  aspect-ratio: var(--tl-ar, 3 / 4);
}
body.display-lovart .load-card {
  max-width: min(100%, 160px) !important;
  --tl-w: min(100%, 160px);
}
body.display-lovart .tl-ai-badge {
  display: none !important;
}
body.display-lovart .tl-media-tile.is-fail {
  max-width: none;
}

.lovart-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 50, 70, 0.25), transparent 70%),
    #08080c;
}
.lovart-canvas-wrap.is-panning {
  cursor: grabbing;
}
.lovart-canvas-wrap.is-resizing {
  cursor: nwse-resize;
}
.lovart-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  will-change: transform;
}
.lovart-guides {
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  overflow: hidden;
}
.lovart-guide {
  position: absolute;
  pointer-events: none;
}
.lovart-guide-v {
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe08a 0%, #ffb7c8 36%, #cbb6ff 68%, #9be8ff 100%);
  box-shadow: 0 0 10px rgba(203, 182, 255, 0.38);
}
.lovart-guide-h {
  height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #ffe08a 0%, #ffb7c8 36%, #cbb6ff 68%, #9be8ff 100%);
  box-shadow: 0 0 10px rgba(203, 182, 255, 0.38);
}
.lovart-guide-v::before,
.lovart-guide-v::after,
.lovart-guide-h::before,
.lovart-guide-h::after {
  content: "";
  position: absolute;
  background: #cbb6ff;
  box-shadow: 0 0 6px rgba(155, 232, 255, 0.45);
}
.lovart-guide-v::before,
.lovart-guide-v::after {
  left: 50%;
  width: 8px;
  height: 1.5px;
  transform: translateX(-50%);
}
.lovart-guide-v::before { top: 0; }
.lovart-guide-v::after { bottom: 0; }
.lovart-guide-h::before,
.lovart-guide-h::after {
  top: 50%;
  width: 1.5px;
  height: 8px;
  transform: translateY(-50%);
}
.lovart-guide-h::before { left: 0; }
.lovart-guide-h::after { right: 0; }
.lovart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
  color: rgba(180, 190, 205, 0.55);
  text-align: center;
  padding: 24px;
}
.lovart-empty.hidden {
  display: none !important;
}
.lovart-empty-ico {
  font-size: 1.4rem;
  opacity: 0.5;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lovart-empty p {
  margin: 0;
  font-size: 0.9rem;
}
.lovart-empty-sub {
  font-size: 0.75rem !important;
  opacity: 0.7;
}

.lovart-node {
  position: absolute;
  border-radius: 16px;
  overflow: visible; /* 角点手柄伸出 */
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  height: auto;
}
.lovart-node:active {
  cursor: grabbing;
}
.lovart-node.is-selected {
  border-color: transparent;
  box-shadow: none;
}
/* 选中框：细液态玻璃描边，精致不粗 */
.lovart-node.is-selected .lovart-node-media {
  border: 1px solid rgba(200, 220, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(160, 200, 255, 0.35),
    0 0 0 3px rgba(120, 180, 255, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
/* 四角手柄：小巧液态玻璃圆点 + 外扩热区 */
.lovart-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(220, 235, 255, 0.35) 55%,
      rgba(180, 210, 255, 0.28) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px rgba(140, 190, 255, 0.25);
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  z-index: 6;
  pointer-events: auto;
  touch-action: none;
}
.lovart-handle::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}
.lovart-handle--nw { left: -5px; top: -5px; cursor: nwse-resize; }
.lovart-handle--ne { right: -5px; top: -5px; cursor: nesw-resize; }
.lovart-handle--sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.lovart-handle--se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.lovart-canvas-wrap.is-resizing {
  cursor: nwse-resize !important;
}
.lovart-canvas-wrap.is-resizing .lovart-node {
  pointer-events: none;
}
.lovart-canvas-wrap.is-resizing .lovart-handle {
  pointer-events: none;
}

/* 画布底栏上方：极轻渐隐，内容多时柔和滑入，不要大块黑罩 */
.lovart-canvas-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  pointer-events: none;
  z-index: 12;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 12, 0) 0%,
    rgba(8, 8, 12, 0.18) 55%,
    rgba(8, 8, 12, 0.42) 100%
  );
}
/* 画布右侧视图簇：图层 / 菜单 / 缩放。旧的排布·缩放长条不再出现。 */
.lovart-toolbar {
  position: absolute;
  left: auto;
  right: 14px;
  bottom: 10px;
  top: auto;
  transform: none;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  pointer-events: auto;
  max-width: none;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.lovart-toolbar [data-lovart-tool],
.lovart-toolbar .lovart-sel-sep {
  display: none !important;
}
.lovart-tool-btn {
  appearance: none;
  border: none;
  background: transparent; /* 默认无底 */
  color: rgba(245, 248, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 6px 9px;
  border-radius: var(--tb-btn-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
  min-width: 28px;
  height: var(--tb-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  gap: 4px;
  opacity: 0.92;
}
.lovart-tool-btn--ico {
  width: var(--tb-btn-h);
  min-width: var(--tb-btn-h);
  padding: 0;
}
.lovart-tool-btn--ico svg {
  display: block;
  flex-shrink: 0;
}
.lovart-tool-btn:hover {
  background: var(--tb-btn-bg-hover);
  color: #fff;
  opacity: 1;
}
.lovart-tool-btn.is-on,
.lovart-tool-btn[aria-pressed="true"] {
  background: var(--tb-btn-bg-on);
  color: #fff;
  opacity: 1;
}
/* 悬停中文提示（比原生 title 更快、更清晰） */
.lovart-tool-btn[data-tip] {
  position: relative;
}
.lovart-tool-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(18, 20, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(240, 244, 250, 0.96);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 30;
}
.lovart-tool-btn[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(18, 20, 26, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  z-index: 30;
  pointer-events: none;
}
.lovart-tool-btn[data-tip]:hover::after,
.lovart-tool-btn[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.lovart-tool-btn[data-tip]:hover::before,
.lovart-tool-btn[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
.lovart-zoom-lab {
  appearance: none;
  box-sizing: border-box;
  min-width: 3.4em;
  height: 22px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  color: rgba(200, 210, 225, 0.9);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  line-height: 1;
}
.lovart-zoom-lab:hover,
.lovart-zoom-lab[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.canvas-zoom-menu {
  width: 248px;
  padding: 6px !important;
}
.canvas-zoom-menu button {
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  gap: 16px;
}
.canvas-zoom-menu kbd {
  margin-left: auto;
  font: 12px/1 system-ui;
  color: #777;
  letter-spacing: 0.04em;
}
.canvas-zoom-sep {
  height: 1px;
  margin: 6px 8px;
  background: #ffffff14;
}
.lovart-node-media {
  width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
  /* 透亮液态玻璃框，不要实心黑底 */
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(1.65) brightness(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.65) brightness(1.1);
}
.lovart-node-media img,
.lovart-node-media video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 原比例，不裁切 */
  display: block;
  pointer-events: none;
  background: transparent;
  border-radius: inherit;
}
/* 画布生成中：与时间线同一套 Grainient loading（无激光） */
.lovart-node-media video { pointer-events:auto; }
.lovart-node-video { position:relative; }
.lovart-video-drag-surface { position:absolute;inset:0 0 56px;z-index:1;cursor:grab;touch-action:none; }
.lovart-video-drag-surface:active { cursor:grabbing; }
.lovart-node.is-loading {
  cursor: grab;
  box-shadow: none;
}
.lovart-node.is-loading .lovart-node-loading {
  position: relative;
  min-height: 140px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    rgba(20, 24, 36, 0.35);
  place-items: stretch;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.08);
}
.lovart-node.is-loading .load-grain-css,
.lovart-node.is-loading .load-aurora-css {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lovart-node.is-loading .grainient-host {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lovart-node.is-loading .load-bar {
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 30px;
  position: absolute;
}
.lovart-node.is-loading .load-caption {
  z-index: 3;
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 画布节点不再显示提示词条 */
.lovart-node-cap {
  display: none !important;
}

.lovart-sel-bar {
  position: absolute;
  z-index: 24;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--tb-gap);
  padding: var(--tb-pad);
  border-radius: var(--tb-radius);
  pointer-events: auto;
  max-width: min(560px, calc(100% - 16px));
  width: max-content;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.lovart-sel-bar::-webkit-scrollbar {
  display: none;
  height: 0;
}
.lovart-sel-bar.hidden {
  display: none !important;
}
.lovart-sel-btn {
  appearance: none;
  border: none;
  background: transparent; /* 默认干净，悬停才亮 */
  color: rgba(245, 248, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0 10px;
  border-radius: var(--tb-btn-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
  flex-shrink: 0;
  height: var(--tb-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  box-shadow: none;
  opacity: 0.92;
}
.lovart-sel-btn--ico {
  width: var(--tb-btn-h);
  min-width: var(--tb-btn-h);
  padding: 0;
  border-radius: var(--tb-btn-radius);
}
.lovart-sel-btn svg {
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
}
/* 文案已去掉：统一纯图标 + data-tip 悬浮提示 */
.lovart-sel-txt {
  display: none !important;
}
.lovart-sel-btn:hover {
  background: var(--tb-btn-bg-hover);
  color: #fff;
  opacity: 1;
}
/* 主操作 / 选中态才带底色 */
.lovart-sel-btn.is-primary {
  background: var(--tb-btn-bg-on);
  color: #fff;
  opacity: 1;
}
.lovart-sel-btn.is-primary:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lovart-sel-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 2px;
  flex-shrink: 0;
}
/* 全局悬浮提示（不裁切） */
.lovart-float-tip {
  position: fixed;
  z-index: 9999;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(16, 18, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(245, 248, 255, 0.96);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.lovart-float-tip.hidden {
  display: none !important;
}

/* ── 智能画布切换球：干净小圆，默认可拖，叠在最上层 ── */
/* 注意：不要用 inset:!important，否则 JS left/top 写不进去，球拖不动 */
#modeOrb.mode-orb,
button#modeOrb,
.mode-orb {
  position: absolute !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: none;
  pointer-events: auto !important;
  flex: none !important;
  /* 默认兜底（JS 会覆盖 left/top）；禁止 inset !important */
  top: auto;
  left: auto;
  right: 20px;
  bottom: 96px;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-user-select: none;
  user-select: none;
  filter: none !important;
  animation: none !important;
  -webkit-tap-highlight-color: transparent;
}
.mode-orb.is-dragging {
  cursor: grabbing !important;
}
/* 圆形本体（保持原设计） */
#modeOrb.mode-orb::before,
.mode-orb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    var(--brand-grad);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1.5px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mode-orb.is-lovart::before {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 2px rgba(46, 239, 255, 0.55),
    0 0 18px rgba(46, 239, 255, 0.35);
}
.mode-orb-core,
.mode-orb-ring {
  display: none !important;
}
/* 悬停涟漪：三层波纹 + 本体微脉冲，能感知但不刺眼 */
.mode-orb-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
}
.mode-orb:hover .mode-orb-wave,
.mode-orb:focus-visible .mode-orb-wave {
  animation: mode-orb-ripple 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.mode-orb:hover .mode-orb-wave--2,
.mode-orb:focus-visible .mode-orb-wave--2 {
  animation-delay: 0.45s;
}
.mode-orb:hover .mode-orb-wave--3,
.mode-orb:focus-visible .mode-orb-wave--3 {
  animation-delay: 0.9s;
}
.mode-orb.is-dragging .mode-orb-wave {
  animation: none !important;
  opacity: 0 !important;
}
@keyframes mode-orb-ripple {
  0% {
    transform: scale(0.95);
    opacity: 0.55;
    border-color: rgba(200, 230, 255, 0.55);
    box-shadow:
      0 0 0 0 rgba(34, 211, 238, 0.28),
      inset 0 0 0 0 rgba(255, 255, 255, 0);
  }
  40% {
    opacity: 0.28;
    border-color: rgba(100, 200, 255, 0.32);
  }
  100% {
    transform: scale(2.05);
    opacity: 0;
    border-color: rgba(80, 180, 255, 0);
    box-shadow:
      0 0 18px 4px rgba(34, 211, 238, 0),
      inset 0 0 12px 0 rgba(255, 255, 255, 0);
  }
}
/* 本体：悬停轻微呼吸脉冲 */
@keyframes mode-orb-pulse {
  0%,
  100% {
    transform: scale(1.06);
    filter: brightness(1.05);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mode-orb:hover .mode-orb-wave,
  .mode-orb:focus-visible .mode-orb-wave {
    animation: none;
    opacity: 0;
  }
  .mode-orb:hover::before,
  .mode-orb:focus-visible::before {
    animation: none;
  }
}
.mode-orb-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(245, 248, 255, 0.92);
  background: rgba(16, 18, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  width: max-content;
  max-width: 160px;
  z-index: 2;
}
.mode-orb:hover .mode-orb-tip,
.mode-orb:focus-visible .mode-orb-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* 本体：悬停放大 + 呼吸，涟漪负责外扩 */
.mode-orb:hover::before,
.mode-orb:focus-visible::before {
  animation: mode-orb-pulse 1.35s ease-in-out infinite;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1.5px rgba(255, 255, 255, 0.28),
    0 0 20px rgba(34, 211, 238, 0.35);
}
.mode-orb.is-lovart:hover::before,
.mode-orb.is-lovart:focus-visible::before {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 2px rgba(34, 211, 238, 0.65),
    0 0 22px rgba(34, 211, 238, 0.45);
}
.mode-orb.is-dragging::before {
  animation: none !important;
  transform: scale(1.08);
}

/* 生成页始终可显示切换球（含空会话）；其它主 tab 隐藏 */
.workspace.empty .mode-orb {
  display: none !important;
}
body.display-lovart .workspace.empty .mode-orb,
body.display-lovart .mode-orb,
body.view-chat .mode-orb,
#viewChat.on .mode-orb {
  display: block !important;
}
body.view-home .mode-orb,
body.view-assets .mode-orb,
body.view-canvas .mode-orb {
  display: none !important;
}
#viewChat:not(.on) .mode-orb {
  display: none !important;
}

/* Lovart 空会话：右侧对话栏够宽，编辑器不再挤成一条 */
body.display-lovart .workspace.empty .work-main {
  flex: 0 0 min(440px, 40vw) !important;
  width: min(440px, 40vw) !important;
  min-width: 360px !important;
  max-width: 480px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  justify-content: center;
  align-items: stretch;
}
body.display-lovart .workspace.empty .work-scroll {
  width: 100%;
  max-width: none;
  padding: 32px 20px 8px;
  align-items: center;
}
body.display-lovart .workspace.empty .composer-dock {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 16px 28px !important;
  align-items: stretch;
}
body.display-lovart .workspace.empty .composer-dock .glass-surface--chat {
  width: 100% !important;
  max-width: 100% !important;
}
body.display-lovart .workspace.empty .empty-hero {
  width: 100%;
  padding: 0 8px;
}
body.display-lovart .workspace.filled .work-main {
  min-width: 340px;
}

@media (max-width: 900px) {
  body.display-lovart .workspace.filled .work-main {
    flex: 0 0 46%;
    max-width: 46%;
    min-width: 260px;
  }
}

/* ── 登录后客服 / 反馈 ── */
.cs-fab {
  display: none !important;
}
.cs-fab-tip {
  padding: 8px 12px;
  border-radius: 12px;
  background: #2a2a32;
  color: #f4f4f6;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.cs-fab:hover .cs-fab-tip,
.cs-fab:focus-within .cs-fab-tip {
  opacity: 1;
  transform: none;
}
.cs-fab-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #2a2a32;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.cs-fab-btn:hover { background: #35353e; }
.cs-fab-btn svg { width: 22px; height: 22px; display: block; }

.fb-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}
.fb-modal.hidden { display: none !important; }
.fb-card {
  width: min(860px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 22px;
  background: #1c1c22;
  color: #f4f4f6;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fb-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.fb-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.fb-close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.fb-close svg { width: 16px; height: 16px; display: block; }
.fb-body { padding: 22px 28px 24px; }
.fb-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 22px;
  align-items: start;
}
.fb-label {
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.fb-label i { color: #e25563; font-style: normal; }
.fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fb-chip {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #2a2a32;
  color: rgba(255, 255, 255, 0.82);
  font: 400 13px/1 inherit;
  cursor: pointer;
}
.fb-chip:hover { background: #32323c; }
.fb-chip.on {
  background: #3a3a46;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.fb-desc { position: relative; }
.fb-desc textarea,
.fb-input {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #2a2a32;
  color: #f4f4f6;
  font: 400 14px/1.55 inherit;
  outline: none;
}
.fb-desc textarea {
  min-height: 128px;
  padding: 14px 14px 28px;
  resize: vertical;
}
.fb-input {
  height: 44px;
  padding: 0 14px;
}
.fb-desc textarea::placeholder,
.fb-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.fb-count {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 12px;
}
.fb-uploads {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.fb-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #2a2a32;
}
.fb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fb-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
}
.fb-add {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: #24242c;
  color: rgba(255, 255, 255, 0.45);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.fb-add:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.fb-up-count {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  padding-bottom: 6px;
}
.fb-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.fb-submit {
  min-width: 96px;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: #3a3a44;
  color: rgba(255, 255, 255, 0.38);
  font: 500 14px/1 inherit;
  cursor: not-allowed;
}
.fb-submit:not(:disabled) {
  background: #ececf1;
  color: #17171e;
  cursor: pointer;
}
.fb-submit:not(:disabled):hover { filter: brightness(1.04); }
@media (max-width: 720px) {
  .fb-row { grid-template-columns: 1fr; gap: 8px; }
  .fb-label { padding-top: 0; }
}
.composer-boot-preview{display:none}
.composer-starting #barHome{display:none!important}
.composer-starting .composer-boot-preview{display:flex;align-items:center;gap:6px;min-height:32px}
.composer-boot-preview span{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 16px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff12;color:#ddd;font-size:12px;line-height:1}