/* 覆盖层样式汇总：模型与渠道设置面板、各库独立页面、导航增强等。
   深色为主；浅色（白天模式）由 scripts/build-theme-light.cjs 机械派生，
   新增深色规则后必须重跑该脚本，否则白天模式会残留深色块。 */
body.sp-modal-open { overflow: hidden; }

.sp-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sp-modal .sp-backdrop { position: absolute; inset: 0; background: rgba(6, 11, 14, .62); backdrop-filter: blur(3px); }
.sp-modal .sp-panel {
  position: relative; width: min(940px, calc(100vw - 48px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #0f161c; color: #dce7eb; border: 1px solid #2b3a44; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.sp-modal .sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #22303a; background: #121b22; }
.sp-modal .sp-head strong { display: block; font-size: 14px; letter-spacing: .2px; }
.sp-modal .sp-head small { display: block; margin-top: 3px; color: #7e94a1; font-size: 11px; }
.sp-modal .sp-head-actions { display: flex; align-items: center; gap: 8px; }
.sp-modal .sp-saved { color: #6fd08a; font-size: 11px; }
.sp-modal .sp-body { padding: 14px 16px; overflow-y: auto; display: grid; gap: 12px; }
.sp-modal .sp-foot { padding: 9px 16px; border-top: 1px solid #22303a; background: #101820; }
.sp-modal .sp-empty { color: #7e94a1; padding: 22px 4px; text-align: center; }

.sp-modal .sp-card { border: 1px solid #26343d; border-radius: 10px; background: #121a20; padding: 12px; }
.sp-modal .sp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-modal .sp-card-head strong { font-size: 13px; }
.sp-modal .sp-card-head small { display: block; margin-top: 2px; color: #7e94a1; font-size: 11px; }
.sp-modal .sp-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid #3a4a55; color: #8fa4b0; white-space: nowrap; }
.sp-modal .sp-badge.on { border-color: #3f6f4d; color: #82d79a; background: #12241a; }

.sp-modal .sp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-modal .sp-field { display: grid; gap: 4px; min-width: 190px; }
.sp-modal .sp-field.sp-grow { flex: 1 1 210px; }
.sp-modal .sp-field > span:first-child { color: #8fa4b0; font-size: 11px; }
.sp-modal input, .sp-modal select {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 12px;
  background: #0b1216; color: #e4eef2; border: 1px solid #2c3b45; border-radius: 7px; outline: none;
}
.sp-modal input:focus, .sp-modal select:focus { border-color: #3f7d8c; box-shadow: 0 0 0 2px rgba(63, 125, 140, .18); }
.sp-modal .sp-secret, .sp-modal .sp-model { display: flex; gap: 6px; align-items: center; }
.sp-modal .sp-secret input, .sp-modal .sp-model select { flex: 1; }

.sp-modal .sp-btn {
  padding: 7px 12px; font-size: 12px; white-space: nowrap; cursor: pointer;
  background: #17222a; color: #cfe0e7; border: 1px solid #2f4049; border-radius: 7px;
}
.sp-modal .sp-btn:hover { background: #1d2b34; border-color: #3d525d; }
.sp-modal .sp-btn:disabled { opacity: .55; cursor: default; }
.sp-modal .sp-btn.sp-primary { background: #1d5f6e; border-color: #2b7d90; color: #eafaff; }
.sp-modal .sp-btn.sp-primary:hover:not(:disabled) { background: #22707f; }
.sp-modal .sp-eye { padding: 6px 9px; font-size: 13px; line-height: 1; background: #17222a; color: #a9c0ca; border: 1px solid #2f4049; border-radius: 7px; cursor: pointer; }
.sp-modal .sp-eye:hover { background: #1d2b34; }
.sp-modal .sp-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sp-modal .sp-inline { font-size: 11px; color: #7e94a1; word-break: break-all; }
.sp-modal .sp-inline.ok { color: #6fd08a; }
.sp-modal .sp-inline.bad { color: #ff9baa; }

/* ═══ 白天模式：设置面板（跟随工作台日夜切换） ═══ */
html[data-vr-theme="light"] .sp-modal .sp-backdrop{background:rgba(60,40,44,.34)}
html[data-vr-theme="light"] .sp-modal .sp-panel{background:#fff;border-color:#f2dade;color:#2a2c31;box-shadow:0 18px 48px rgba(180,110,120,.22)}
html[data-vr-theme="light"] .sp-modal .sp-head,html[data-vr-theme="light"] .sp-modal .sp-foot{border-color:#f2dade}
html[data-vr-theme="light"] .sp-modal .sp-head{background:#fff7f8}
html[data-vr-theme="light"] .sp-modal .sp-foot{background:#fdf6f7;color:#8d9099}
html[data-vr-theme="light"] .sp-modal .sp-head strong,html[data-vr-theme="light"] .sp-modal .sp-card-head strong{color:#2a2c31}
html[data-vr-theme="light"] .sp-modal .sp-head small,html[data-vr-theme="light"] .sp-modal .sp-card-head small,html[data-vr-theme="light"] .sp-modal .sp-field>span:first-child,html[data-vr-theme="light"] .sp-modal .sp-empty{color:#8d9099}
html[data-vr-theme="light"] .sp-modal .sp-card{background:#fdf6f7;border-color:#f2dade}
html[data-vr-theme="light"] .sp-modal input,html[data-vr-theme="light"] .sp-modal select{background:#fff;border-color:#eecdd3;color:#2a2c31}
html[data-vr-theme="light"] .sp-modal input:focus,html[data-vr-theme="light"] .sp-modal select:focus{border-color:#e8452f;box-shadow:0 0 0 2px rgba(232,69,47,.14)}
html[data-vr-theme="light"] .sp-modal .sp-btn{background:#fff;border-color:#eecdd3;color:#2a2c31}
html[data-vr-theme="light"] .sp-modal .sp-btn:hover{background:#fbf0f1}
html[data-vr-theme="light"] .sp-modal .sp-btn:disabled{background:#fbf0f1;color:#b9bdc3}
html[data-vr-theme="light"] .sp-modal .sp-btn.sp-primary{background:#e8452f;border-color:#e8452f;color:#fff}
html[data-vr-theme="light"] .sp-modal .sp-btn.sp-primary:hover:not(:disabled){background:#d63a25}
html[data-vr-theme="light"] .sp-modal .sp-eye,html[data-vr-theme="light"] .sp-modal .sp-inline{color:#5d6167}
html[data-vr-theme="light"] .sp-modal .sp-inline.ok{color:#1f9d6d}
html[data-vr-theme="light"] .sp-modal .sp-inline.bad{color:#c0392b}
html[data-vr-theme="light"] .sp-modal .sp-saved{color:#1f9d6d}
html[data-vr-theme="light"] .sp-modal .sp-badge{background:#fbf0f1;border-color:#eecdd3;color:#8d9099}
html[data-vr-theme="light"] .sp-modal .sp-badge.on{background:#fff3f2;border-color:#f4c8c3;color:#d63a25}



/* 多路图片接口（内嵌在「模型与渠道设置」的图片模型卡片里） */
.xhs-iapi.xhs-iapi-inline { margin-top: 12px; padding: 12px; border: 1px solid #eecdd3; border-radius: 10px; background: #fbf0f1; grid-column: 1 / -1; }
.xhs-iapi-head { display:flex; align-items:flex-start; gap:12px; }
.xhs-iapi-head b { display:block; font-size:13px; color:#2a2c31; }
.xhs-iapi-head small { display:block; margin-top:4px; font-size:11px; line-height:1.6; color:#8d9099; }
.xhs-iapi-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.xhs-iapi-row { display:flex; gap:8px; align-items:flex-start; padding:9px; border:1px solid #f2dade; border-radius:8px; background:#fff; }
.xhs-iapi-main { flex:1; display:grid; grid-template-columns:0.85fr 1.4fr 0.85fr 0.95fr 1fr; gap:6px; }
.xhs-iapi-main input { min-width:0; padding:6px 9px; font-size:12px; border:1px solid #eecdd3; border-radius:6px; }
.xhs-iapi-main select { min-width:0; padding:6px 9px; font-size:12px; border:1px solid #eecdd3; border-radius:6px; background:#fff; }
.xhs-iapi-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.xhs-iapi-enable { font-size:11px; color:#5d6167; white-space:nowrap; }
.xhs-iapi-del { padding:3px 10px; font-size:11px; color:#d8402f; background:rgba(216,64,47,.08); border:1px solid rgba(216,64,47,.4); border-radius:6px; cursor:pointer; }
.xhs-iapi-empty { margin:0; font-size:12px; color:#8d9099; }
.xhs-iapi-foot { margin-top:10px; display:flex; align-items:center; gap:10px; }
.xhs-iapi-add, .xhs-iapi-save { padding:6px 14px; font-size:12px; border-radius:6px; cursor:pointer; }
.xhs-iapi-add { color:#e8452f; background:rgba(232,69,47,.08); border:1px solid rgba(232,69,47,.42); }
.xhs-iapi-save { color:#fff; background:#e8452f; border:1px solid #e8452f; }
.xhs-iapi-save[disabled] { opacity:.6; cursor:default; }
.xhs-iapi-msg { font-size:11px; color:#8d9099; }

/* 二创库：原图 / 生成图 左右对比 */
.vr-compare-btn { padding:5px 12px; font-size:12px; border-radius:6px; cursor:pointer; color:#e8452f; background:rgba(232,69,47,.08); border:1px solid rgba(232,69,47,.42); }
.vr-compare-mask { position:fixed; inset:0; z-index:2147483200; background:rgba(20,22,26,.72); display:flex; flex-direction:column; }
.vr-compare-head { display:flex; align-items:center; gap:12px; padding:12px 16px; color:#fff; }
.vr-compare-head b { font-size:14px; }
.vr-compare-head small { font-size:11px; opacity:.72; }
.vr-compare-close { margin-left:auto; width:28px; height:28px; font-size:16px; line-height:1; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:6px; cursor:pointer; }
.vr-compare-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 16px 16px; }
.vr-compare-pane { display:flex; flex-direction:column; min-height:0; background:#14161a; border:1px solid rgba(255,255,255,.14); border-radius:10px; overflow:hidden; }
.vr-compare-pane > header { padding:8px 12px; font-size:12px; color:#e7e9ee; background:rgba(255,255,255,.06); }
.vr-compare-pane > div { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px; }
.vr-compare-pane img { max-width:100%; max-height:100%; object-fit:contain; }
.vr-compare-pane.is-empty img { display:none; }
.vr-compare-pane.is-empty > div::after { content:'这张还没有可用图片'; font-size:12px; color:#8d9099; }

/* 文案未生成提示（二创库） */
.vr-text-missing { margin: 4px 0 0; padding: 6px 9px; font-size: 11px; line-height: 1.6; color: #c8801f; background: rgba(200,128,31,.10); border: 1px solid rgba(200,128,31,.34); border-radius: 6px; }

/* 多路图片接口：顺位徽标 + 模型获取行 */
.xhs-iapi-slot { width: 62px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px 0; }
.xhs-iapi-slot b { font-size:11px; font-weight:700; color:#5d6167; white-space:nowrap; }
.xhs-iapi-slot b.is-primary { color:#e8452f; }
.xhs-iapi-slot small { font-size:9px; color:#a8abb2; white-space:nowrap; }
.xhs-iapi-modelrow { grid-column: 1 / -1; display:flex; gap:6px; align-items:center; }
.xhs-iapi-model { flex:1; min-width:0; padding:6px 9px; font-size:12px; border:1px solid #eecdd3; border-radius:6px; background:#fff; }
.xhs-iapi-fetch { flex:none; padding:5px 10px; font-size:11px; color:#e8452f; background:rgba(232,69,47,.08); border:1px solid rgba(232,69,47,.42); border-radius:6px; cursor:pointer; white-space:nowrap; }
.xhs-iapi-fetch[disabled] { opacity:.6; cursor:default; }
.xhs-iapi-up { padding:3px 8px; font-size:11px; color:#5d6167; background:#fff; border:1px solid #eecdd3; border-radius:6px; cursor:pointer; }
.xhs-iapi-main { grid-template-columns: 1fr; }

/* 主模型标记 + 设为主模型按钮 */
.xhs-iapi-primary { padding:3px 9px; font-size:11px; color:#1f9d6d; background:rgba(31,157,109,.09); border:1px solid rgba(31,157,109,.4); border-radius:6px; cursor:pointer; white-space:nowrap; }
.xhs-iapi-primary-tag { padding:3px 9px; font-size:11px; font-weight:700; color:#e8452f; background:rgba(232,69,47,.10); border:1px solid rgba(232,69,47,.42); border-radius:6px; white-space:nowrap; }
.xhs-iapi-secret { display:flex; gap:6px; align-items:center; min-width:0; }
.xhs-iapi-secret input { flex:1; min-width:0; }
.xhs-iapi-eye, .xhs-iapi-copy { flex:none; padding:5px 9px; font-size:11px; color:#5d6167; background:#fff; border:1px solid #eecdd3; border-radius:6px; cursor:pointer; white-space:nowrap; }
.xhs-iapi-copy { color:#2a2c31; }

/* 设置面板：小眼睛旁的复制按钮 */
.sp-copy { flex:none; padding:5px 9px; font-size:11px; background:#fff; border:1px solid #eecdd3; border-radius:6px; cursor:pointer; white-space:nowrap; }

/* 对比原图：放在生成结果框下方，独占一行，不挤压生成图 */
.vr-compare-bar { display:flex; justify-content:flex-end; margin:8px 0 2px; }
.vr-compare-bar .vr-compare-btn { padding:6px 14px; font-size:12px; }
/* 灵感库 / 素材体系导航外壳样式 */

/* 导航：未开发的库 */
.xhs-stage-coming { position: relative; }
.xhs-nav-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px dashed currentColor; opacity: .45; }
.xhs-stage-coming strong { opacity: .82; }
.xhs-nav-soon {
  margin-left: auto; padding: 1px 6px; font-size: 10px; font-style: normal; line-height: 1.6;
  color: #a8abb2; background: rgba(140,144,153,.14); border-radius: 8px; white-space: nowrap;
}

/* 即将上线弹窗 */
#xhs-coming-soon { position: fixed; inset: 0; z-index: 2147483300; }
.xhs-cs-mask { position: absolute; inset: 0; background: rgba(20,22,26,.46); }
.xhs-cs-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(460px, 90vw); padding: 18px; border-radius: 12px;
  background: #fff; border: 1px solid #eecdd3; box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
.xhs-cs-head { display: flex; align-items: center; gap: 10px; }
.xhs-cs-head b { font-size: 15px; color: #2a2c31; }
.xhs-cs-close { margin-left: auto; width: 26px; height: 26px; font-size: 16px; line-height: 1; color: #5d6167; background: #fff; border: 1px solid #eecdd3; border-radius: 6px; cursor: pointer; }
.xhs-cs-hint { margin: 12px 0 0; font-size: 13px; color: #2a2c31; }
.xhs-cs-note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: #8d9099; }

/* 灵感库面板 */
.xhs-lib { margin: 0 0 14px; padding: 12px; border: 1px solid #eecdd3; border-radius: 10px; background: #fbf0f1; }
.xhs-lib-head b { display: block; font-size: 14px; color: #2a2c31; }
.xhs-lib-head small { display: block; margin-top: 3px; font-size: 11px; color: #8d9099; }
.xhs-lib-section { margin-top: 12px; }
.xhs-lib-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #5d6167; }
.xhs-lib-mini { margin-left: auto; padding: 3px 9px; font-size: 11px; color: #e8452f; background: rgba(232,69,47,.08); border: 1px solid rgba(232,69,47,.4); border-radius: 6px; cursor: pointer; }
.xhs-lib-folders { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.xhs-lib-folder { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--depth, 0) * 16px); }
.xhs-lib-folder-name { flex: 1; text-align: left; padding: 5px 9px; font-size: 12px; color: #2a2c31; background: #fff; border: 1px solid #f2dade; border-radius: 6px; cursor: pointer; }
.xhs-lib-folder-name:hover { border-color: #e8452f; color: #e8452f; }
.xhs-lib-folder-tools { display: flex; gap: 4px; }
.xhs-lib-folder-tools button { width: 22px; height: 22px; font-size: 11px; line-height: 1; color: #5d6167; background: #fff; border: 1px solid #eecdd3; border-radius: 5px; cursor: pointer; }
.xhs-lib-labels { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.xhs-lib-label { padding: 3px 9px; font-size: 11px; color: #2a2c31; background: #fff; border: 1px solid #eecdd3; border-radius: 999px; cursor: pointer; }
.xhs-lib-label:hover { border-color: #e8452f; color: #e8452f; }
.xhs-lib-empty { margin: 0; font-size: 11px; color: #a8abb2; }

/* 二创按钮：原文字「二创库」保留在 DOM（供 video-remix.js 查找锚点挂「视频二创」），
   视觉上只显示「二创」。用 ::after 覆盖，不插入子元素——否则 cloneNode 出来的
   「视频二创」按钮会继承隐藏规则，导致文字错乱（实测踩过）。
   注意：按钮结构是 <button><span><svg/></span><strong>二创库</strong></button>，
   实测 strong 不一定是 button 的直接子节点，所以这里【不要】用 `>` 直接子选择器，
   否则规则不生效，用户看到的还是「二创库」。 */
[data-xhs-remake="1"] strong { visibility: hidden; position: relative; }
[data-xhs-remake="1"] strong::after {
  content: '图文二创'; visibility: visible; position: absolute; left: 0; top: 0; white-space: nowrap;
}

/* 采集 / 灵感库 分区：用 class 控制显隐（不动 React 的 inline style，
   否则 React 卸载时 removeChild 会抛错并卸载整棵树） */
.xhs-hidden { display: none !important; }

/* 顶栏标题/副标题：原 React 文本保留在 DOM（不可覆写，否则 React 卸载时 removeChild 抛错），
   视觉上用叠加元素覆盖显示 */
.topbar-title h1 { position: relative; }
.topbar-title h1 .xhs-title-overlay { position: absolute; inset: 0; background: inherit; }
.topbar-title h1:has(.xhs-title-overlay) { color: transparent; }
.topbar-title p:has(.xhs-sub-overlay) { color: transparent; position: relative; }
.topbar-title p .xhs-sub-overlay { position: absolute; inset: 0; color: var(--l-text2, #5d6167); }

/* 页面 H2 标题叠加 */
.xhs-h2-overlay { display: block; }
h2:has(.xhs-h2-overlay) { position: relative; }
h2:has(.xhs-h2-overlay) > .xhs-h2-overlay { position: absolute; inset: 0; background: inherit; }
h2:has(.xhs-h2-overlay) { color: transparent; }

/* 人物库 */
/* 人物库已改为独立页面：容器不再自己全屏 fixed（那会让内容盖住页面顶栏）。
   它现在是 #xhs-character-page 里的 .xhs-page-body，由页面 flex 布局排版。 */
.xhs-cl-mask { position: absolute; inset: 0; background: rgba(20,22,26,.5); }
/* 【已删除】旧弹窗时代的大卡片规则：
   .xhs-cl-card 曾经是「人物库弹窗里的大卡」，带 position:absolute +
   transform: translate(-50%,-50%) + width: min(1040px,94vw)。
   UI 重构后这个类名变成了【列表网格卡片】，于是继承到整个弹窗定位 ——
   表现为：卡片脱离文档流、hover 时因 transform 过渡而乱窜、宽度被钉成 1040px。
   实测证据：computed style 里 pos:absolute、transform:matrix(1,0,0,1,-98,-107.48)。
   现在把这条规则整条删掉，列表卡片的定位完全交给新的网格规则。 */

.xhs-cl-head { display: flex; align-items: flex-start; gap: 12px; }
.xhs-cl-head b { display: block; font-size: 15px; color: #2a2c31; }
.xhs-cl-head small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.6; color: #8d9099; }
.xhs-cl-close { margin-left: auto; width: 26px; height: 26px; font-size: 16px; line-height: 1; color: #5d6167; background: #fff; border: 1px solid #eecdd3; border-radius: 6px; cursor: pointer; }
.xhs-cl-toolbar { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xhs-cl-toolbar select, .xhs-cl-item-head select { padding: 5px 9px; font-size: 12px; border: 1px solid #eecdd3; border-radius: 6px; background: #fff; color: #5d6167; }
.xhs-cl-msg { font-size: 11px; color: #8d9099; }
.xhs-cl-list { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.xhs-cl-item { padding: 10px; border: 1px solid #f2dade; border-radius: 8px; background: #fff; }
.xhs-cl-item.is-open { grid-column: 1 / -1; }
.xhs-character-card-button { width: 100%; display: grid; grid-template-rows: auto auto auto; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.xhs-character-card-button strong { font-size: 14px; color: #2a2c31; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-character-card-button span { font-size: 11px; color: #8d9099; }
.xhs-cl-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 1px solid #f2dade; background: #fbf0f1; }
.xhs-cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.xhs-cl-cover-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 12px; color: #a8abb2; font-size: 12px; border: 1px dashed #eecdd3; border-radius: 8px; background: #fbf0f1; }
.xhs-cl-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2dade; }
.xhs-cl-item-head { display: flex; align-items: center; gap: 8px; }
.xhs-cl-name { flex: 1; min-width: 0; padding: 5px 9px; font-size: 13px; border: 1px solid #eecdd3; border-radius: 6px; }
.xhs-cl-primary { padding: 6px 14px; font-size: 12px; color: #fff; background: #e8452f; border: 1px solid #e8452f; border-radius: 6px; cursor: pointer; }
.xhs-cl-primary[disabled] { opacity: .6; cursor: default; }
.xhs-cl-mini { padding: 5px 10px; font-size: 11px; color: #5d6167; background: #fff; border: 1px solid #eecdd3; border-radius: 6px; cursor: pointer; text-decoration: none; }
.xhs-cl-mini.danger { color: #d8402f; border-color: rgba(216,64,47,.4); }
.xhs-cl-label { font-size: 11px; font-weight: 700; color: #5d6167; }
.xhs-cl-hint { margin: 6px 0 0; font-size: 11px; color: #a8abb2; }
.xhs-cl-err { margin: 6px 0 0; font-size: 11px; color: #d8402f; }
.xhs-cl-sources { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xhs-cl-sources img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid #f2dade; }
.xhs-cl-upload { padding: 5px 10px; font-size: 11px; color: #e8452f; background: rgba(232,69,47,.08); border: 1px solid rgba(232,69,47,.42); border-radius: 6px; cursor: pointer; }
.xhs-cl-actions { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xhs-cl-angles { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xhs-cl-angle { margin: 0; }
.xhs-cl-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 3/4; background: #fbf0f1; border: 1px dashed #eecdd3; border-radius: 8px; overflow: hidden; }
.xhs-cl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.xhs-cl-thumb span { font-size: 11px; color: #a8abb2; }
.xhs-cl-angle figcaption { margin-top: 4px; font-size: 11px; text-align: center; color: #5d6167; }
.xhs-cl-sheet { margin-top: 12px; }
.xhs-cl-sheet img { margin-top: 6px; width: 100%; border-radius: 8px; border: 1px solid #f2dade; }

/* 人物库新版：列表优先、详情展开；保持独立页面的深色工作台质感 */
#xhs-character-page .xhs-page-body { background: #0e1014; }
#xhs-character-page .xhs-page-inner { max-width: 1320px; margin: 0 auto; }
#xhs-character-page .xhs-cl-toolbar { margin: 0 0 4px; min-height: 42px; padding: 10px 12px; border: 1px solid #262a33; border-radius: 10px; background: #14171d; }
.xhs-cl-toolbar-title { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
.xhs-cl-toolbar-title b { color: #eef1f6; font-size: 14px; }
.xhs-cl-toolbar-title span { color: #8b93a4; font-size: 11px; }
#xhs-character-page .xhs-cl-toolbar select { min-width: 122px; background: #101319; border-color: #2c313c; color: #cfd4df; }
#xhs-character-page .xhs-cl-new { padding: 6px 11px; border: 1px solid #4f8cff; border-radius: 7px; background: #2f6df6; color: #fff; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
#xhs-character-page .xhs-cl-new:hover { background: #4f8cff; }
#xhs-character-page .xhs-cl-msg { flex: 1 1 100%; min-height: 15px; color: #8b93a4; }
/* 人物库卡片网格：与其它库统一（同一套令牌，保证四个库视觉一致） */
#xhs-character-page .xhs-cl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--xhs-card-grid-min, 212px), 1fr));
  gap: var(--xhs-card-gap, 14px);
  align-items: start;
}
#xhs-character-page .xhs-cl-item { padding: 0; overflow: hidden; border-color: #262a33; border-radius: 10px; background: #171a21; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#xhs-character-page .xhs-cl-item:hover { transform: translateY(-2px); border-color: #3a4150; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
#xhs-character-page .xhs-character-card-button { gap: 0; }
#xhs-character-page .xhs-cl-cover { position: relative; aspect-ratio: var(--xhs-card-cover-ratio, 3 / 4); border: 0; border-radius: 0; background: #101319; }
#xhs-character-page .xhs-cl-cover-empty { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: linear-gradient(145deg, #181d25, #101319); }
#xhs-character-page .xhs-cl-cover-state { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(10,12,16,.72); color: #cfd4df; font-size: 10px; }
#xhs-character-page .xhs-character-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px 11px; }
#xhs-character-page .xhs-character-title strong { min-width: 0; color: #eef1f6; font-size: 13px; }
#xhs-character-page .xhs-character-title em { flex: 0 0 auto; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 6px; border-radius: 5px; background: rgba(79,140,255,.13); color: #7fb2ff; font-size: 10px; font-style: normal; }
#xhs-character-page .xhs-cl-detail { margin: 0; padding: 16px; border-top: 1px solid #262a33; background: #14171d; }
#xhs-character-page .xhs-cl-item-head { align-items: flex-end; flex-wrap: wrap; }
#xhs-character-page .xhs-cl-item-head > div:first-child { flex: 1 1 220px; display: grid; gap: 5px; }
#xhs-character-page .xhs-cl-group-field { display: grid; gap: 5px; min-width: 150px; }
#xhs-character-page .xhs-cl-name, #xhs-character-page .xhs-cl-item-head select { background: #101319; border-color: #2c313c; color: #e7e9ee; }
#xhs-character-page .xhs-cl-actions { padding: 10px 0; border-top: 1px solid #262a33; border-bottom: 1px solid #262a33; }
#xhs-character-page .xhs-cl-primary { padding: 7px 12px; border-radius: 7px; background: #2f6df6; border-color: #2f6df6; }
#xhs-character-page .xhs-cl-angles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#xhs-character-page .xhs-cl-angle { padding: 7px; border: 1px solid #262a33; border-radius: 8px; background: #101319; }
#xhs-character-page .xhs-cl-thumb { aspect-ratio: 3 / 4; border-color: #2c313c; background: #171a21; }
#xhs-character-page .xhs-cl-angle.is-done .xhs-cl-thumb { border-style: solid; border-color: rgba(31,157,109,.55); }
#xhs-character-page .xhs-cl-angle.is-generating .xhs-cl-thumb { border-style: solid; border-color: rgba(79,140,255,.8); box-shadow: inset 0 0 0 1px rgba(79,140,255,.15); }
#xhs-character-page .xhs-cl-angle.is-failed .xhs-cl-thumb { border-style: solid; border-color: rgba(216,64,47,.65); }
#xhs-character-page .xhs-cl-angle figcaption { color: #cfd4df; }
#xhs-character-page .xhs-cl-sheet { padding-top: 12px; }
#xhs-character-page .xhs-cl-sheet img { max-width: 480px; background: #101319; border-color: #2c313c; }
#xhs-character-page .xhs-cl-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 70px 20px; border: 1px dashed #2c313c; border-radius: 10px; color: #8b93a4; text-align: center; }
#xhs-character-page .xhs-cl-empty b { color: #eef1f6; font-size: 14px; }
#xhs-character-page .xhs-cl-empty span { font-size: 12px; }
#xhs-character-page .xhs-cl-empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #1b1f27; color: #7fb2ff; font-size: 22px; }
@media (max-width: 700px) {
  #xhs-character-page .xhs-page-body { padding: 12px; }
  #xhs-character-page .xhs-cl-toolbar { align-items: stretch; }
  .xhs-cl-toolbar-title { flex: 1 1 100%; }
  #xhs-character-page .xhs-cl-angles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #xhs-character-page .xhs-cl-item-head > button { flex: 1 1 auto; }
}

/* ---------- 模板库浮层（library-shell.js） ---------- */
.xhs-tl-mask { position: fixed; inset: 0; background: rgba(8,10,14,.62); z-index: 2140; }
.xhs-tl-card { position: fixed; z-index: 2141; left: 50%; top: 4vh; transform: translateX(-50%); width: min(1080px, 94vw); max-height: 92vh; overflow: auto; border-radius: 16px; padding: 20px 22px 24px; background: #14161c; border: 1px solid #262a33; box-shadow: 0 24px 70px rgba(0,0,0,.55); color: #e7e9ee; }
/* 【已删除】旧的竖排列表规则：后面已有 grid 版本，两条并存会互相干扰。
   模板库统一用网格（和成品库一致）。 */
.xhs-tl-item { border: 1px solid #262a33; border-radius: 12px; background: #171a21; overflow: hidden; }
.xhs-tl-item.is-open { border-color: #3a4150; background: #191d25; }
.xhs-tl-item-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.xhs-tl-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; }
.xhs-tl-caret { flex: 0 0 auto; color: #8b93a4; font-size: 12px; }
.xhs-tl-name { flex: 0 1 auto; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-tl-badge { flex: 0 0 auto; font-size: 11px; color: #8b93a4; border: 1px solid #2c313c; border-radius: 999px; padding: 2px 8px; }
.xhs-tl-item-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.xhs-tl-body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.xhs-tl-section { display: flex; flex-direction: column; gap: 8px; }
.xhs-tl-shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.xhs-tl-shot { flex: 0 0 auto; margin: 0; width: 108px; }
.xhs-tl-shot img { width: 108px; height: 144px; object-fit: cover; border-radius: 8px; border: 1px solid #2c313c; background: #0f1116; display: block; }
.xhs-tl-shot figcaption { font-size: 10px; color: #8b93a4; margin-top: 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-tl-note-title { margin: 0; font-size: 13px; font-weight: 600; color: #f0f2f6; }
.xhs-tl-note-body { margin: 0; font-size: 12.5px; line-height: 1.7; color: #c3c8d4; white-space: pre-wrap; max-height: 220px; overflow: auto; background: #0f1116; border: 1px solid #242833; border-radius: 10px; padding: 10px 12px; }
.xhs-tl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xhs-tl-tags em { font-style: normal; font-size: 11px; color: #7fb2ff; background: rgba(79,140,255,.12); border-radius: 6px; padding: 2px 7px; }
.xhs-tl-panel { margin: 0; font-size: 12px; color: #a9b0bf; }
.xhs-tl-hint { margin: 0; font-size: 11.5px; color: #8b93a4; line-height: 1.6; }
.xhs-tl-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xhs-tl-prompt-grid > div, .xhs-tl-asset-prompt { padding: 10px 12px; border: 1px solid #2c313c; border-radius: 8px; background: #101319; }
.xhs-tl-prompt-grid b, .xhs-tl-asset-prompts > b { display: block; font-size: 11px; color: #eef1f6; margin-bottom: 5px; }
.xhs-tl-prompt-grid p, .xhs-tl-asset-prompt p { margin: 0; color: #c3c8d4; font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.xhs-tl-asset-prompts { display: flex; flex-direction: column; gap: 7px; }
.xhs-tl-asset-prompt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
.xhs-tl-asset-prompt > span { color: #7fb2ff; font-size: 11px; }

/* ---------- 环境库 / 成品库浮层（extra-libraries.js） ---------- */
.xhs-el-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; }
.xhs-el-groups { border: 1px solid #262a33; border-radius: 12px; background: #171a21; padding: 8px; position: sticky; top: 0; }
.xhs-el-group-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.xhs-el-group { display: flex; align-items: center; gap: 4px; padding-left: calc(var(--xhs-depth, 0) * 14px); }
.xhs-el-group-btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #c3c8d4; font-size: 12.5px; padding: 6px 8px; cursor: pointer; text-align: left; }
.xhs-el-group-btn:hover { background: #1d2129; }
.xhs-el-group-btn.is-active { background: rgba(79,140,255,.14); border-color: rgba(79,140,255,.35); color: #e7e9ee; }
.xhs-el-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-el-group-count { flex: 0 0 auto; font-size: 11px; color: #8b93a4; }
.xhs-el-list, .xhs-ol-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xhs-el-item, .xhs-ol-item { border: 1px solid #262a33; border-radius: 12px; background: #171a21; overflow: hidden; }
.xhs-el-item.is-open, .xhs-ol-item.is-open { border-color: #3a4150; background: #191d25; }
.xhs-el-item-head, .xhs-ol-item-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.xhs-el-body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.xhs-el-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.xhs-el-shot { position: relative; margin: 0; }
.xhs-el-shot img { width: 132px; height: 132px; object-fit: cover; border-radius: 8px; border: 1px solid #2c313c; background: #0f1116; display: block; }
.xhs-el-shot-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #3a4150; background: rgba(12,14,18,.82); color: #d9dde6; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.xhs-el-shot-del:hover { background: #d8402f; border-color: #d8402f; color: #fff; }
.xhs-el-note { margin: 0; font-size: 12.5px; line-height: 1.7; color: #c3c8d4; white-space: pre-wrap; }
.xhs-ol-item-head { align-items: flex-start; }
.xhs-ol-kind { flex: 0 0 auto; font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.xhs-ol-item.is-note .xhs-ol-kind { color: #7fb2ff; background: rgba(79,140,255,.14); }
.xhs-ol-item.is-video .xhs-ol-kind { color: #ffb066; background: rgba(255,150,60,.14); }
.xhs-ol-video { width: auto; max-width: 380px; max-height: 320px; border-radius: 10px; border: 1px solid #2c313c; background: #0f1116; display: block; }
.xhs-ol-tab { background: transparent; border: 1px solid #2c313c; border-radius: 999px; color: #a9b0bf; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.xhs-ol-tab.is-active { background: rgba(79,140,255,.16); border-color: rgba(79,140,255,.4); color: #e7e9ee; }
.xhs-ol-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; gap: 16px; }
.xhs-ol-item { aspect-ratio: 3 / 4; display: flex; flex-direction: column; min-width: 0; }
.xhs-ol-item-head { flex: 0 0 auto; }
.xhs-ol-item > .xhs-tl-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.xhs-ol-item:not(.is-open) .xhs-ol-item-head { min-height: 100%; align-items: flex-start; }
.xhs-ol-item:not(.is-open) .xhs-tl-toggle { flex-wrap: wrap; align-content: flex-start; }
.xhs-ol-item:not(.is-open) .xhs-tl-name { flex-basis: 100%; font-size: 15px; white-space: normal; margin-top: 10px; }
.xhs-ol-item:not(.is-open) .xhs-tl-badge { margin-top: auto; }
.xhs-ol-item.is-open { aspect-ratio: auto; min-height: 360px; }
.xhs-ol-item.is-note:not(.is-open) .xhs-ol-item-head::after { content: ''; display: block; margin: 10px 0 0; width: 100%; aspect-ratio: 4 / 3; background: #0f1116; border-radius: 8px; }
@media (max-width: 640px) { .xhs-tl-prompt-grid { grid-template-columns: 1fr; } .xhs-ol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 图片墙环境卡片 + 成品编辑器 */
.xhs-el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; min-width: 0; }
.xhs-el-card { min-width: 0; border: 1px solid #262a33; border-radius: 12px; overflow: hidden; background: #171a21; transition: border-color .16s, transform .16s, box-shadow .16s; }
.xhs-el-card:hover { border-color: #4b5568; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.xhs-el-card-media { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #0f1116; color: #8b93a4; cursor: pointer; overflow: hidden; }
.xhs-el-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhs-el-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.48)); pointer-events: none; }
.xhs-el-card-count { position: absolute; right: 8px; bottom: 7px; z-index: 1; padding: 3px 7px; border-radius: 999px; background: rgba(8,10,14,.74); color: #fff; font-size: 11px; }
.xhs-el-card-empty { display: grid; place-items: center; height: 100%; font-size: 12px; }
.xhs-el-card-info { padding: 10px; }
.xhs-el-card-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.xhs-el-card-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef1f6; font-size: 14px; }
.xhs-el-card-title span { flex: 0 0 auto; color: #8b93a4; font-size: 10px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-el-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.xhs-el-card .xhs-el-body { border-top: 1px solid #262a33; padding: 10px; }
.xhs-el-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #394252; border-radius: 12px; color: #8b93a4; text-align: center; }
.xhs-el-empty b { color: #eef1f6; font-size: 16px; }
.xhs-el-empty span { font-size: 12px; }
.xhs-ol-editor { position: fixed; inset: 0; z-index: 2180; display: grid; place-items: center; padding: 18px; }
.xhs-ol-editor-mask { position: absolute; inset: 0; background: rgba(8,10,14,.7); }
.xhs-ol-editor-card { position: relative; width: min(620px, 96vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid #303744; border-radius: 14px; background: #171a21; color: #e7e9ee; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.xhs-ol-editor-card header, .xhs-ol-editor-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xhs-ol-editor-card label { display: flex; flex-direction: column; gap: 5px; color: #a9b0bf; font-size: 12px; }
.xhs-ol-editor-card input, .xhs-ol-editor-card textarea { width: 100%; box-sizing: border-box; border: 1px solid #303744; border-radius: 7px; background: #0f1116; color: #eef1f6; padding: 8px 9px; font: inherit; resize: vertical; }
.xhs-oe-image-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.xhs-oe-image-list figure { position: relative; width: 86px; aspect-ratio: 1; margin: 0; }
.xhs-oe-image-list img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.xhs-oe-image-list button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(8,10,14,.8); color: #fff; cursor: pointer; }
.xhs-ol-editor-hint { margin: 0; color: #d0a467; font-size: 11px; line-height: 1.5; }


.xhs-mh-section { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.xhs-mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.xhs-mh-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px 13px; border: 1px solid #262a33; border-radius: 12px; background: #171a21; color: inherit; cursor: pointer; font: inherit; }
.xhs-mh-card:hover { border-color: #3a4150; background: #1b1f27; }
.xhs-mh-card.is-custom { border-color: #2b3a52; }
.xhs-mh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xhs-mh-card-head b { font-size: 14px; font-weight: 600; color: #eef1f6; }
.xhs-mh-tag { flex: 0 0 auto; font-size: 10.5px; color: #7fb2ff; background: rgba(79,140,255,.14); border-radius: 6px; padding: 2px 7px; }
.xhs-mh-desc { margin: 0; font-size: 11.5px; line-height: 1.6; color: #8b93a4; min-height: 34px; }
.xhs-mh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xhs-mh-count { font-size: 11.5px; color: #a9b0bf; }
.xhs-mh-count strong { font-size: 15px; color: #eef1f6; }
.xhs-mh-enter { font-size: 11.5px; color: #7fb2ff; }
.xhs-mh-add { align-items: center; justify-content: center; border-style: dashed; color: #8b93a4; }
.xhs-mh-add .xhs-mh-plus { font-size: 20px; line-height: 1; }
.xhs-cl2-item { border: 1px solid #262a33; border-radius: 12px; background: #171a21; overflow: hidden; }
.xhs-cl2-item.is-open { border-color: #3a4150; background: #191d25; }
.xhs-cl2-item-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.xhs-cl2-body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.xhs-cl2-assets { display: flex; flex-wrap: wrap; gap: 8px; }
.xhs-cl2-asset { position: relative; margin: 0; }
.xhs-cl2-asset img, .xhs-cl2-asset video { width: 148px; height: 148px; object-fit: cover; border-radius: 8px; border: 1px solid #2c313c; background: #0f1116; display: block; }
.xhs-cl2-asset-kind { position: absolute; left: 4px; bottom: 4px; font-size: 10px; color: #dfe4ee; background: rgba(12,14,18,.8); border-radius: 5px; padding: 1px 6px; }
.xhs-cl2-asset-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #3a4150; background: rgba(12,14,18,.82); color: #d9dde6; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.xhs-cl2-asset-del:hover { background: #d8402f; border-color: #d8402f; color: #fff; }
.xhs-cl2-note { margin: 0; font-size: 12.5px; line-height: 1.7; color: #c3c8d4; white-space: pre-wrap; }
.xhs-cl2-actions { display: flex; gap: 8px; }

/* 隐藏顶栏/页内与正式版无关的杂乱说明文字（用户要求） */
.xhs-sub-hide { display: none !important; }
.xhs-title-overlay { position: absolute; left: 0; top: 0; }
.topbar-title { position: relative; }

/* AI 生成库：比例选择 + 生成进度 */
.xhs-cl2-ratio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #a9b0bf; }
.xhs-cl2-ratio select { background: #0f1116; color: #e7e9ee; border: 1px solid #2c313c; border-radius: 8px; padding: 5px 8px; font-size: 12px; }
.xhs-cl2-progress { margin-top: 8px; height: 4px; border-radius: 999px; background: #242833; overflow: hidden; }
.xhs-cl2-progress span { display: block; height: 100%; background: linear-gradient(90deg,#4f8cff,#7fb2ff); transition: width .4s ease; }

/* 素材库总览卡片缩略图 */
.xhs-mh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 68px; border-radius: 8px; overflow: hidden; background: #0f1116; border: 1px solid #242833; }
.xhs-mh-thumbs img { width: 100%; height: 68px; object-fit: cover; display: block; }
.xhs-mh-thumbs.is-empty { display: flex; align-items: center; justify-content: center; }
.xhs-mh-thumbs.is-empty span { font-size: 11px; color: #6b7280; }

/* 环境库独立页面（与采集/二创同级，不是浮层） */
#xhs-environment-page, #xhs-character-page, #xhs-template-page, #xhs-output-page, #xhs-material-page { position: fixed; inset: 0; z-index: 1800; background: #0e1014; display: flex; flex-direction: column; overflow: hidden; }
#xhs-environment-page[hidden], #xhs-character-page[hidden], #xhs-template-page[hidden], #xhs-output-page[hidden], #xhs-material-page[hidden] { display: none !important; }
.xhs-page-top { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid #22262f; background: #12151a; }
.xhs-page-back { background: #1b1f27; border: 1px solid #2c313c; border-radius: 9px; color: #cfd4df; font-size: 12.5px; padding: 7px 13px; cursor: pointer; }
.xhs-page-back:hover { background: #232833; color: #fff; }
.xhs-page-title b { font-size: 16px; color: #eef1f6; }
.xhs-page-title small { display: block; margin-top: 3px; font-size: 11.5px; color: #8b93a4; }
.xhs-page-body { flex: 1 1 auto; overflow: auto; padding: 16px 22px 30px; }
.xhs-page-inner { display: flex; flex-direction: column; gap: 12px; }

/* 灵感库管理抽屉（默认收起，不占页面顶部） */
/* 灵感库「分组与标签」工具行：视觉上并入灵感库内容面板（不是独立卡片）。
   做法：去掉边框/底色/圆角，只保留一行细工具条，紧贴在灵感库面板上方，
   看起来就是「灵感库」这个库自己的头部工具行。 */
.xhs-lib { margin: 0 0 6px; background: transparent; border: 0; }
.xhs-lib-bar { display: flex; align-items: center; gap: 8px; padding: 0 2px 4px; }
.xhs-lib-bar-hint { font-size: 11.5px; color: #8b93a4; }
.xhs-lib-bar-sum { flex: 0 1 auto; font-size: 11px; color: #6b7280; }
.xhs-lib-toggle { margin-left: auto; background: transparent; border: 1px solid #2c313c; border-radius: 7px; color: #a9b0bf; font-size: 11.5px; padding: 3px 9px; cursor: pointer; }
.xhs-lib-toggle:hover { background: #1b1f27; color: #fff; }
/* 展开后的内容也贴合成面板的一部分：左侧竖线 + 透明底，不用独立卡片 */
.xhs-lib-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 10px;
  background: #141821; border: 1px solid #262a33; border-left: 2px solid #3a4150; border-radius: 0 10px 10px 0; }
.xhs-lib-hint { margin: 0; font-size: 11.5px; color: #8b93a4; }
/* 内联兜底弹窗（当 xhs-dialog.js 未加载时使用） */
.xhs-dlg-mask { position: fixed; inset: 0; z-index: 2147483600; background: rgba(8,10,14,.62); display: flex; align-items: center; justify-content: center; }
.xhs-dlg-card { width: min(420px, 92vw); background: #171a21; border: 1px solid #2c313c; border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55); color: #e7e9ee; }
.xhs-dlg-card h4 { margin: 0 0 6px; font-size: 14.5px; }
.xhs-dlg-card p { margin: 0 0 10px; font-size: 12px; color: #8b93a4; line-height: 1.6; }
.xhs-dlg-card input, .xhs-dlg-card textarea { width: 100%; box-sizing: border-box; background: #0f1116; border: 1px solid #2c313c; border-radius: 9px; color: #e7e9ee; font-size: 13px; padding: 9px 11px; font-family: inherit; }
.xhs-dlg-card footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.xhs-dlg-card footer button { border-radius: 9px; font-size: 12.5px; padding: 7px 14px; cursor: pointer; border: 1px solid #2c313c; background: #1b1f27; color: #cfd4df; }
.xhs-dlg-card footer button.primary { background: #2f6df6; border-color: #2f6df6; color: #fff; }
.xhs-dlg-card footer button.danger { background: #d8402f; border-color: #d8402f; color: #fff; }

/* 素材导航：统一线性图标、主库折叠控制与设置入口 */
.stage-nav .stage-button { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.stage-nav .xhs-nav-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-nav .xhs-material-toggle { width: 18px; height: 24px; flex: 0 0 18px; padding: 0; border: 0; background: transparent; color: currentColor; cursor: pointer; font-size: 13px; line-height: 1; }
.stage-nav .xhs-material-settings { align-self: center; width: 26px; height: 28px; margin: -32px 4px 4px auto; padding: 0; border: 0; background: transparent; color: currentColor; opacity: .68; cursor: pointer; }
.stage-nav .xhs-material-settings:hover { opacity: 1; }
.stage-nav .stage-button[data-xhs-child="1"][hidden] { display: none !important; }
.stage-nav .stage-button[data-xhs-child="1"] { padding-left: 30px !important; }

/* 模板库：竖版手机列表卡片 */
.xhs-tl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; align-items: start; }
.xhs-tl-phone { aspect-ratio: 3 / 4; display: flex; flex-direction: column; min-width: 0; }
/* 【用户要求】点开模板后要在下面【横版放大】显示，原来沿用竖版 3:4，图片和文案都显示不全。
   展开态：整条卡横跨所有列、高度自适应、封面改成横版。 */
.xhs-tl-phone.is-open { grid-column: 1 / -1; aspect-ratio: auto; }
.xhs-tl-phone .xhs-tl-item-head { flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; padding: 10px; }
.xhs-tl-phone .xhs-tl-toggle { width: 100%; height: 100%; flex-direction: column; align-items: stretch; gap: 7px; }
.xhs-tl-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 9px; background: #0f1116; border: 1px solid #2c313c; color: #6b7280; font-size: 11px; }
.xhs-tl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhs-tl-card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.xhs-tl-card-copy .xhs-tl-name { width: 100%; font-size: 14px; white-space: nowrap; }
.xhs-tl-summary, .xhs-tl-prompt-summary { width: 100%; overflow: hidden; color: #8b93a4; font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.xhs-tl-prompt-summary { color: #a9b0bf; }
.xhs-tl-phone .xhs-tl-caret { align-self: flex-end; margin-top: auto; }
.xhs-tl-phone .xhs-tl-item-actions { flex: 0 0 auto; padding: 0 10px 10px; justify-content: flex-end; flex-wrap: wrap; }
/* 展开态改成横版：左侧一个横版封面，右侧信息，整体横排铺满；下方内容区也按横版排布 */
.xhs-tl-phone.is-open .xhs-tl-item-head { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px 14px 10px; }
.xhs-tl-phone.is-open .xhs-tl-toggle { height: auto; flex-direction: row; align-items: flex-start; gap: 14px; }
.xhs-tl-phone.is-open .xhs-tl-cover { width: 240px; flex: 0 0 240px; aspect-ratio: 16 / 10; border-radius: 10px; }
.xhs-tl-phone.is-open .xhs-tl-cover img { object-fit: cover; }
.xhs-tl-phone.is-open .xhs-tl-card-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xhs-tl-phone.is-open .xhs-tl-summary { -webkit-line-clamp: 3; white-space: normal; }
.xhs-tl-phone.is-open .xhs-tl-prompt-summary { -webkit-line-clamp: 2; white-space: normal; }
.xhs-tl-phone.is-open .xhs-tl-caret { align-self: flex-start; margin-top: 0; }
.xhs-tl-phone.is-open .xhs-tl-item-actions { padding: 0 14px 12px; }
/* 展开后的内容区：图集改成横向大图（横版），比原来的 108×144 竖图看得清 */
.xhs-tl-phone.is-open .xhs-tl-shots { gap: 10px; padding-bottom: 8px; }
.xhs-tl-phone.is-open .xhs-tl-shot { width: 200px; }
.xhs-tl-phone.is-open .xhs-tl-shot img { width: 200px; height: 125px; border-radius: 9px; }
.xhs-tl-phone.is-open .xhs-tl-body { gap: 16px; padding: 6px 14px 16px; }

/* ── 视频人物库：人物下面的视频列表（用户要求：不做三视图，直接存多条视频）── */
.xhs-cl-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.xhs-cl-video {
  margin: 0; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid #2c313c; border-radius: 9px; overflow: hidden; background: #0f1116;
}
.xhs-cl-video video { width: 100%; display: block; background: #000; max-height: 260px; object-fit: contain; }
.xhs-cl-video figcaption {
  padding: 0 8px 7px; font-size: 11.5px; color: #9aa6b2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 卡片上的播放角标 */
.xhs-cl-card-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px;
  pointer-events: none;
}
html[data-vr-theme="light"] .xhs-cl-card-play { background: rgba(232, 69, 47, .82); color: #ffffff; }
html[data-vr-theme="light"] .xhs-cl-video { border-color: #f2dade; background: #ffffff; }
html[data-vr-theme="light"] .xhs-cl-video figcaption { color: #8d9099; }

/* ── 展开后的「大预览舞台」（用户要求：点开后下方单独生成一张大图，完整显示所有资料）── */
.xhs-tl-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px;
  border: 1px solid #2c313c;
  border-radius: 10px;
  background: #141a20;
}
.xhs-tl-stage-media { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 主图：给足高度，完整显示（contain，不裁切） */
.xhs-tl-stage-main {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 300px; max-height: 460px;
  border-radius: 9px; overflow: hidden; background: #0f1116;
  border: 1px solid #2c313c;
}
.xhs-tl-stage-main img,
.xhs-tl-stage-main video {
  max-width: 100%; max-height: 460px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.xhs-tl-stage-empty { color: #6b7280; font-size: 12px; padding: 40px 0; }
/* 缩略图条：点一下切换主图 */
.xhs-tl-stage-thumbs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.xhs-tl-stage-thumb {
  flex: 0 0 auto; width: 62px; height: 62px; padding: 0; overflow: hidden;
  border: 1px solid #2c313c; border-radius: 7px; background: #0f1116; cursor: pointer;
}
.xhs-tl-stage-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhs-tl-stage-thumb.is-active { border-color: #7adbe9; box-shadow: 0 0 0 1px rgba(122,219,233,.45); }
.xhs-tl-stage-thumb.is-video { display: flex; align-items: center; justify-content: center; color: #9fb6c0; font-size: 12px; }
.xhs-tl-stage-count { margin: 0; font-size: 11px; color: #8b93a4; }
/* 右侧资料区 */
.xhs-tl-stage-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xhs-tl-stage-block { display: flex; flex-direction: column; gap: 4px; }
.xhs-tl-stage-title { margin: 0; font-size: 14px; font-weight: 600; color: #eef1f6; line-height: 1.45; }
.xhs-tl-stage-body { margin: 0; font-size: 12.5px; color: #cfd8de; line-height: 1.7; white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.xhs-tl-stage-dl { margin: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 3px 8px; font-size: 12px; }
.xhs-tl-stage-dl dt { color: #8b93a4; }
.xhs-tl-stage-dl dd { margin: 0; color: #cfd8de; word-break: break-word; }
.xhs-tl-stage-prompt { margin: 0; font-size: 12px; color: #cfd8de; line-height: 1.65; }
.xhs-tl-stage-prompt b { display: inline-block; margin-right: 6px; color: #9fb6c0; font-weight: 600; }
/* 窄屏：改成上下堆叠 */
@media (max-width: 900px) {
  .xhs-tl-stage { grid-template-columns: minmax(0, 1fr); }
  .xhs-tl-stage-main { min-height: 220px; max-height: 320px; }
  .xhs-tl-stage-main img, .xhs-tl-stage-main video { max-height: 320px; }
}
/* 浅色主题 */
html[data-vr-theme="light"] .xhs-tl-stage { background: #fbf0f1; border-color: #f2dade; }
html[data-vr-theme="light"] .xhs-tl-stage-main,
html[data-vr-theme="light"] .xhs-tl-stage-thumb { background: #ffffff; border-color: #f2dade; }
html[data-vr-theme="light"] .xhs-tl-stage-title { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-tl-stage-body,
html[data-vr-theme="light"] .xhs-tl-stage-dl dd,
html[data-vr-theme="light"] .xhs-tl-stage-prompt { color: #3d4046; }
html[data-vr-theme="light"] .xhs-tl-stage-count,
html[data-vr-theme="light"] .xhs-tl-stage-dl dt,
html[data-vr-theme="light"] .xhs-tl-stage-empty { color: #8d9099; }
@media (max-width: 640px) { .xhs-tl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* 展开不改变占位（用户反馈「点击后卡片跳到上面去」）*/ }

/* ---------- 成品库：手机卡片网格 ---------- */
.xhs-ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.xhs-ol-card { display: flex; flex-direction: column; border: 1px solid #262a33; border-radius: 14px; background: #171a21; overflow: hidden; }
.xhs-ol-card:hover { border-color: #3a4150; }
.xhs-ol-card-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: #0f1116; cursor: pointer; overflow: hidden; }
.xhs-ol-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhs-ol-card-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 12px; color: #6b7280; }
.xhs-ol-card-count { position: absolute; top: 6px; right: 6px; font-size: 10.5px; color: #e7e9ee; background: rgba(12,14,18,.78); border-radius: 6px; padding: 1px 6px; }
.xhs-ol-card-kind { position: absolute; left: 6px; bottom: 6px; font-size: 10.5px; border-radius: 6px; padding: 1px 7px; }
.xhs-ol-card.is-note .xhs-ol-card-kind { color: #7fb2ff; background: rgba(79,140,255,.2); }
.xhs-ol-card.is-video .xhs-ol-card-kind { color: #ffb066; background: rgba(255,150,60,.2); }
.xhs-ol-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,.86); text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none; }
.xhs-ol-card-body { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 10px; }
.xhs-ol-card-title { font-size: 12.5px; color: #eef1f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-ol-card-text { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8b93a4; height: 2.9em; overflow: hidden; }
.xhs-ol-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: #6b7280; }
.xhs-ol-card-actions { display: flex; gap: 5px; }
/* 成品查看浮层 */
.xhs-olv-mask { position: fixed; inset: 0; z-index: 2140; background: rgba(8,10,14,.72); }
#xhs-ol-viewer .xhs-olv-card { position: fixed; z-index: 2141; left: 50%; top: 4vh; transform: translateX(-50%); width: min(880px, 94vw); max-height: 92vh; overflow: auto; background: #14161c; border: 1px solid #262a33; border-radius: 16px; color: #e7e9ee; }
.xhs-olv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #22262f; }
.xhs-olv-head b { font-size: 14.5px; }
.xhs-olv-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #2c313c; background: #1b1f27; color: #cfd4df; font-size: 16px; cursor: pointer; }
.xhs-olv-main { padding: 14px 18px 4px; }
.xhs-olv-main video { width: 100%; max-height: 62vh; border-radius: 10px; background: #000; display: block; }
.xhs-olv-body { padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.xhs-olv-text { margin: 0; font-size: 12.5px; line-height: 1.75; color: #c3c8d4; white-space: pre-wrap; max-height: 240px; overflow: auto; background: #0f1116; border: 1px solid #242833; border-radius: 10px; padding: 10px 12px; }
/* ---------- 二级菜单（人物库/环境库/模板库 缩进在素材库下） ---------- */
.stage-nav .stage-button[data-xhs-child="1"] { padding-left: 26px !important; position: relative; }
.stage-nav .stage-button[data-xhs-child="1"]::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 1px; background: #3a4150; }
.stage-nav .stage-button[data-xhs-child="1"] strong { font-size: 12.5px; }
/* 视频二创：强制单行显示（原来是 <span>▶</span><span>视频二创</span>，会挤成两行） */
#video-remix-launcher { display: flex !important; align-items: center; gap: 6px; white-space: nowrap !important; }
#video-remix-launcher > span { white-space: nowrap !important; display: inline-block; }

/* ---------- 素材库导航行：[▸ 三角] [图标 素材库] [⚙ 设置] ----------
   三角/设置是【素材库按钮内部的 span】（不能用 button，否则嵌套 button 非法）。
   按钮是 grid: [28px 图标列] [1fr 文字列]，这里用绝对定位把三角放到最左、
   设置放到最右，并给按钮留出左右内边距。 */
.stage-nav .stage-button[data-xhs-nav="素材库"] { position: relative; padding-left: 30px !important; padding-right: 34px !important; }
.stage-nav .stage-button[data-xhs-nav="素材库"] > .xhs-material-toggle,
.stage-nav .stage-button[data-xhs-nav="素材库"] > span.xhs-material-toggle {
  position: absolute !important; left: 7px !important; top: 0 !important; bottom: 0 !important; margin: auto 0 !important; transform: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 18px !important; height: 26px !important; min-width: 0 !important;
  background: transparent !important; border-radius: 5px;
  color: #8b93a4 !important; font-size: 9px !important; line-height: 1 !important;
  cursor: pointer; pointer-events: auto;
}
.stage-nav .stage-button[data-xhs-nav="素材库"] > .xhs-material-toggle:hover { background: #ffffff1f; color: #e7e9ee !important; }
.stage-nav .stage-button[data-xhs-nav="素材库"] > .xhs-material-settings,
.stage-nav .stage-button[data-xhs-nav="素材库"] > span.xhs-material-settings {
  position: absolute !important; right: 7px !important; top: 0 !important; bottom: 0 !important; margin: auto 0 !important; transform: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 22px !important; height: 26px !important; min-width: 0 !important;
  background: transparent !important; border-radius: 6px;
  color: #8b93a4 !important; cursor: pointer; pointer-events: auto;
}
.stage-nav .stage-button[data-xhs-nav="素材库"] > .xhs-material-settings:hover { background: #ffffff1f; color: #e7e9ee !important; }
.stage-nav .stage-button[data-xhs-nav="素材库"] > .xhs-material-settings > svg { width: 14px !important; height: 14px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 素材库按钮自身：给三角/齿轮留出左右空间，并确保是定位上下文 */
.stage-nav .stage-button[data-xhs-nav="素材库"] { position: relative !important; min-height: 40px !important; padding-left: 32px !important; padding-right: 36px !important; }
.stage-nav > .stage-button[data-xhs-nav="人物库"],
.stage-nav > .stage-button[data-xhs-nav="环境库"],
.stage-nav > .stage-button[data-xhs-nav="模板库"] { padding-left: 32px !important; }
.stage-nav > .stage-button[data-xhs-nav="人物库"]::before,
.stage-nav > .stage-button[data-xhs-nav="环境库"]::before,
.stage-nav > .stage-button[data-xhs-nav="模板库"]::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 8px; height: 1px; background: #ffffff2e;
}
.xhs-nav-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-nav .stage-button { display: flex; align-items: center; gap: 7px; }

/* ═══════════ 库卡片统一设计令牌（所有库共用，保证视觉一致）═══════════
   之前四个库各写一套：网格列宽 196/220/232、圆角 12/14、间距 10/14、悬停效果不一，
   看起来像四个不同产品拼起来的。这里统一：
     网格：minmax(212px,1fr) / gap 14px / 顶部对齐
     卡片：圆角 12px、边框 #262a33、底色 #171a21、悬停上浮 2px + 描边变亮
     封面：统一 3:4 竖版（人物/环境/成品都是竖内容），object-fit: cover
     标题：13px 600，单行省略；辅助信息 11.5px #8b93a4 */
:root {
  --xhs-card-grid-min: 212px;
  --xhs-card-gap: 14px;
  --xhs-card-radius: 12px;
  --xhs-card-border: #262a33;
  --xhs-card-border-hover: #4b5568;
  --xhs-card-bg: #171a21;
  --xhs-card-bg-hover: #1d212a;
  --xhs-card-cover-ratio: 3 / 4;
}
.xhs-el-grid, .xhs-ol-grid, .xhs-mh-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--xhs-card-grid-min), 1fr)) !important;
  gap: var(--xhs-card-gap) !important;
  align-items: start !important;
}
.xhs-el-card, .xhs-ol-card, .xhs-mh-card {
  border: 1px solid var(--xhs-card-border) !important;
  border-radius: var(--xhs-card-radius) !important;
  background: var(--xhs-card-bg) !important;
  overflow: hidden !important;
  min-width: 0 !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.xhs-el-card:hover, .xhs-ol-card:hover, .xhs-mh-card:hover {
  border-color: var(--xhs-card-border-hover) !important;
  background: var(--xhs-card-bg-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
/* 封面统一比例（素材库卡片是文字卡，不套封面规则） */
.xhs-el-card-media, .xhs-ol-card-media { aspect-ratio: var(--xhs-card-cover-ratio) !important; }
.xhs-el-card-media img, .xhs-ol-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
/* 视频成品没有 poster 时的兜底缩略视频：占满封面区，点它仍然打开预览（不拦截点击） */
.xhs-ol-card-thumbvideo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; pointer-events: none; }
/* 标题/辅助文字统一 */
.xhs-el-card-title, .xhs-ol-card-title { font-size: 13px !important; font-weight: 600 !important; color: #eef1f6 !important; }
.xhs-el-card-count, .xhs-ol-card-count { font-size: 11px !important; color: #8b93a4 !important; }

/* ---------- 库页统一搜索框（各库都用，保证一致） ---------- */
.xhs-lib-search {
  flex: 0 1 260px; min-width: 140px;
  background: #0f1116; border: 1px solid #2c313c; border-radius: 9px;
  color: #e7e9ee; font-size: 12.5px; padding: 6px 11px; outline: none;
}
.xhs-lib-search::placeholder { color: #6b7280; }
.xhs-lib-search:focus { border-color: #4f8cff; box-shadow: 0 0 0 2px rgba(79,140,255,.16); }
/* 去掉 Safari/Chromium 的 search 原生清除按钮，避免和自定义样式打架 */
.xhs-lib-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 图文二创页面精简：隐藏「原帖选择 / 二创模板 / 二创素材」三块
   （用户要求：模板→模板库、素材→成品库、原帖选择→改用灵感库导入）
   只加 class，不删 React 节点，避免整树卸载。 */
.xhs-remake-slim-hide { display: none !important; }

/* 灵感库「导入到二创工作台」按钮：主色强调，是该页最重要的动作之一 */
.xhs-lib-import { background: #2f6df6 !important; border-color: #2f6df6 !important; color: #fff !important; }
.xhs-lib-import:hover { background: #3f7cff !important; }

/* ---------- 通用看图浮层（环境库/人物库）---------- */
#xhs-image-viewer .xhs-iv-mask { position: fixed; inset: 0; z-index: 2140; background: rgba(8,10,14,.82); }
.xhs-iv-card { position: fixed; z-index: 2141; inset: 3vh 6vw; background: #14161c; border: 1px solid #262a33; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.xhs-iv-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #22262f; }
.xhs-iv-head b { flex: 1 1 auto; font-size: 14px; color: #eef1f6; }
.xhs-iv-count { font-size: 12px; color: #8b93a4; }
.xhs-iv-close { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #2c313c; background: #1b1f27; color: #cfd4df; font-size: 16px; cursor: pointer; }
.xhs-iv-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; min-height: 0; }
.xhs-iv-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: grab; }
.xhs-iv-nav { flex: 0 0 auto; width: 40px; height: 64px; border-radius: 10px; border: 1px solid #2c313c; background: #1b1f27; color: #cfd4df; font-size: 22px; cursor: pointer; }
.xhs-iv-nav:hover { background: #232833; color: #fff; }
.xhs-iv-hint { margin: 0; padding: 0 18px 14px; font-size: 11.5px; color: #8b93a4; }
/* 回收站卡片 */
.xhs-ol-card.is-trashed { opacity: .82; }
.xhs-ol-card.is-trashed:hover { opacity: 1; }
/* 拖拽提示 */
.xhs-drag-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 2147483600;
  padding: 10px 16px; border-radius: 10px; font-size: 12.5px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.xhs-drag-toast.is-ok { background: #1f9d6d; color: #fff; }
.xhs-drag-toast.is-bad { background: #d8402f; color: #fff; }
/* 可拖拽的图片给个提示光标 */
img[data-xhs-drag-src] { cursor: grab; }
img[data-xhs-drag-src]:active { cursor: grabbing; }

/* ---------- 灵感库：分组/标签并入库头部（不再单独占一块）---------- */
/* 面板压进灵感库内容区顶部：去掉独立卡片感，只留一行筛选控件 */
.xhs-lib { margin: 0 0 8px; padding: 0; background: transparent; border: 0; }
/* 【已删除】顶部那行「分组 / 标签」细工具行 —— 用户明确要求不要了。
   这里保留 display:none 兜底：万一有旧版残留节点被渲染出来，也不会冒到页面上。 */
#xhs-lib-panel, .xhs-lib { display: none !important; }

/* ---------- 侧栏导航顺序：用 CSS order，不搬动 DOM ----------
   血泪原因：insertBefore 归位会让 React 管理的节点被移出再插回，
   React 随后切页/卸载时 removeChild 找不到节点 → 抛错 → 状态回滚
   → 「点图文二创切不过去」（消融实验证明屏蔽本脚本后即恢复正常）。
   order 只需要父容器是 flex/grid —— .stage-nav 已经是 flex column。 */
.stage-nav.xhs-nav-ordered { display: flex; flex-direction: column; }
.stage-nav.xhs-nav-ordered > .stage-button { order: 50; }
.stage-nav.xhs-nav-ordered > .stage-button[style*="--xhs-nav-order"] { order: var(--xhs-nav-order); }
/* 设置永远最后 */
.stage-nav.xhs-nav-ordered > .stage-button:not([style*="--xhs-nav-order"]) { order: 900; }

/* ---------- 采集 / 灵感库 分区：纯 CSS，由 <html data-xhs-stage> 驱动 ----------
   为什么不用 JS 给 panel 加 class：那些 panel 是 React 管理的节点，
   改动它们会让 React 状态提交回滚（用户实测「点图文二创切不过去」）。
   这里只读 <html> 上的一个属性，DOM 结构一行不动。
   结构（实测）：.collector-grid 下依次是
     ① .panel.panel-wide（批量采集框）② .panel.preview-phone（手机流）③ .panel.panel-wide（灵感库卡片列表）
   采集页 = ①②；灵感库页 = ③。 */
html[data-xhs-stage="capture"] .collector-grid > .panel.panel-wide:nth-of-type(1) { display: block; }
html[data-xhs-stage="capture"] .collector-grid > .panel.preview-phone { display: block; }
html[data-xhs-stage="capture"] .collector-grid > .panel.panel-wide:not(:nth-of-type(1)) { display: none; }
html[data-xhs-stage="library"] .collector-grid > .panel.panel-wide:nth-of-type(1) { display: none; }
html[data-xhs-stage="library"] .collector-grid > .panel.preview-phone { display: none; }
html[data-xhs-stage="library"] .collector-grid > .panel.panel-wide:not(:nth-of-type(1)) { display: block; }