/* =========================================================================
 * styles.css — Cenjin 视觉层（按参考 UI 截图改造：浅色主题版）
 * 布局：左侧深色导航栏 + 顶部两行工具条 + 居中步骤 + 底部悬浮"下一步"
 * ========================================================================= */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f2f3f7;
  --line: #e7e9ef;
  --line-strong: #d9dce5;
  --text: #1c2330;
  --text-dim: #5c6575;
  --text-mute: #9aa3b2;
  --brand: #6c5ce7;
  --brand-soft: rgba(108, 92, 231, 0.10);
  --ok: #18a058;
  --ok-soft: rgba(24, 160, 88, 0.10);
  --warn: #d48806;
  --warn-soft: rgba(212, 136, 6, 0.10);
  --red: #e5484d;
  --red-soft: rgba(229, 72, 77, 0.10);
  --dark: #17181c;          /* 左侧导航栏底色 */
  --dark-2: #232529;
  --radius: 12px;
  --shadow-raise: 0 1px 3px rgba(20, 24, 40, 0.07), 0 4px 14px rgba(20, 24, 40, 0.05);
  --shadow-hover: 0 6px 22px rgba(20, 24, 40, 0.12);
  --shadow-float: 0 10px 30px rgba(20, 24, 40, 0.22);
}

* { box-sizing: border-box; }

/* ============ 主题包（品牌与外观一键切换，不只改主色：背景/面板/文字/边框整套换） ============ */
html[data-theme="dark"] {
  --bg: #121317; --bg-soft: #0e0f12; --panel: #1a1c21; --panel-2: #22242a;
  --line: #2a2d34; --line-strong: #34383f;
  --text: #e7e9ee; --text-dim: #a3a9b6; --text-mute: #6d7480;
  --dark: #0b0c0e; --dark-2: #1e2026;
  --shadow-raise: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --shadow-hover: 0 6px 22px rgba(0,0,0,.5);
}
html[data-theme="warm"] {
  --bg: #faf6f0; --bg-soft: #f4ede2; --panel: #fffdf9; --panel-2: #f6efe3;
  --line: #e8ddc9; --line-strong: #d9c9a8;
  --text: #3a2f22; --text-dim: #7a6c56; --text-mute: #a89878;
  --dark: #2b2419; --dark-2: #3a3122;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-soft);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ===================== 整体骨架 ===================== */

.app { display: flex; height: 100vh; overflow: hidden; }

/* ===================== 左侧导航栏 ===================== */

.sidebar {
  width: 148px;
  flex-shrink: 0;
  background: var(--dark);
  color: #b7bcc7;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  overflow-y: auto;
  overflow-x: hidden;   /* 侧栏固定：不允许左右滑动（曾因 tip 气泡撑出横向滚动） */
}

.side-logo {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 6px 8px 14px;
}
.side-logo .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); display: inline-block; }

.side-group {
  font-size: 10.5px; color: #5d626d;
  padding: 12px 10px 6px;
  letter-spacing: 0.08em;
}
.side-group:first-of-type { padding-top: 4px; }

.side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 2px;
  color: #a3a9b6;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.side-item .ico { width: 16px; text-align: center; opacity: 0.9; font-size: 12px; }
.side-item .badge {
  margin-left: auto; font-size: 10px;
  background: var(--dark-2); color: #8b919e;
  border-radius: 6px; padding: 1px 6px;
}
/* 登录人小标（退出登录右侧，仅用户名非数字，不再当角标用） */
.side-item .whoami {
  margin-left: auto; font-size: 10px;
  color: #8b919e; max-width: 52px; overflow: hidden; text-overflow: ellipsis;
}
.side-item:hover { background: var(--dark-2); color: #e6e8ee; }
.side-item.active { background: var(--brand); color: #fff; font-weight: 600; }
.side-item.active .badge { background: rgba(255,255,255,0.22); color: #fff; }

/* 菜单项功能说明浮层（hover 显示，fixed 定位以逃逸侧栏裁剪；位置由 JS 写入 --tip-y） */
.side-item[data-tip] { position: relative; }
.side-item[data-tip]::after {
  content: attr(data-tip);
  position: fixed; left: 152px; top: var(--tip-y, 40px);
  background: #17181c; color: #e6e8ee; border: 1px solid #2a2c33;
  font-size: 11.5px; font-weight: 400; line-height: 1.5; white-space: nowrap;
  padding: 7px 11px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease 0.25s; z-index: 999;
}
.side-item[data-tip]:hover::after { opacity: 1; }

.side-spacer { flex: 1; }
.side-foot { font-size: 11px; color: #5d626d; padding: 8px 10px; }

/* ===================== 主列（右 of sidebar） ===================== */

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---- 顶部第一行：返回 + 标题 ---- */

.topline {
  height: 46px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.back-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; background: transparent;
  cursor: pointer; border-radius: 7px;
  color: var(--text-dim); font-size: 14px;
}
.back-btn:hover { background: var(--panel-2); }
.page-title { font-weight: 600; font-size: 14px; }
.project-chip {
  font-size: 12px; color: var(--text-mute);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 顶部第二行：工具条 + 居中步骤 ---- */

.toolbar {
  height: 50px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
  user-select: none;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip .c-ico { font-size: 11px; opacity: 0.8; }
.chip .c-caret { font-size: 9px; opacity: 0.55; }
.chip-model .c-model { color: var(--text); font-weight: 600; }
.chip-agent { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }

/* 居中步骤 */
.steps {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
}
.step {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 8px;
  transition: all 0.16s ease;
  user-select: none;
}
.step .step-idx {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  background: var(--panel-2);
  color: var(--text-mute);
  transition: all 0.16s ease;
}
.step.active { color: var(--brand); font-weight: 600; }
.step.active .step-idx { background: var(--brand); color: #fff; }
.step.done { color: var(--ok); }
.step.done .step-idx { background: var(--ok-soft); color: var(--ok); }
.step.locked { opacity: 0.45; cursor: not-allowed; }
.step:not(.locked):hover { background: var(--panel-2); }

.step-line { width: 36px; height: 1px; background: var(--line-strong); }

/* ===================== 主体：滚动工作区 ===================== */

.workarea {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px 90px;   /* 底部留出悬浮按钮空间 */
}

.inner { max-width: 1080px; margin: 0 auto; }

.page-h1 { font-size: 22px; font-weight: 700; margin: 2px 0 6px; }
.page-sub { font-size: 13px; color: var(--text-mute); margin-bottom: 18px; }

.pane-title {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  margin: 4px 0 10px; display: flex; align-items: center; gap: 8px;
}

/* ===================== 通用卡片 ===================== */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--shadow-raise);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-raise); }
.card.static { cursor: default; }
.card.static:hover { transform: none; box-shadow: var(--shadow-raise); }

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-no { font-weight: 700; font-size: 13.5px; }
.card-meta { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.pill {
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; background: var(--panel-2); color: var(--text-dim);
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-brand { background: var(--brand-soft); color: var(--brand); }
/* 完工封存徽标：要一眼看见但不能喧宾夺主 —— 用 warn 色系（不是红色，那不是报错，
   是「这项目锁了」的状态提示），左侧贴住项目名，不加 margin-left:auto。 */
.pill-sealed {
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid currentColor; font-weight: 600;
  margin-left: 8px; white-space: nowrap; cursor: help;
}

/* 归属徽标：只在「我不是归属人」时出现。
   用中性色系（不是红色/警告色）：他人转交给你不是错误状态，
   是「你在这个项目里的身份变了」。但必须显眼到无法忽视 ——
   否则用户会以为项目还是自己的，改了几小时才发现。 */
.pill-owner {
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); font-weight: 600;
  margin-left: 8px; white-space: nowrap; cursor: help;
}

/* 封存项目的只读态：控件本身由 JS 置 disabled/readOnly，这里补一层视觉暗示，
   让「这块不能改」一眼看得出来，而不是灰不溜秋像加载失败。 */
.sealed-readonly input:disabled,
.sealed-readonly textarea:disabled,
.sealed-readonly select:disabled {
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.85;
}
.sealed-readonly button:disabled { opacity: 0.5; cursor: not-allowed; }
/* 只读态下允许正常查看/复制的框（字段值本身）不该被灰掉到看不清 */
.sealed-readonly .readonly-box { user-select: text; }

/* 工具条 / 步骤条里的"假按钮"（<span class="chip"> 用 onclick 当按钮使）。
   它们没有 disabled 可用，且都在 #inner 之外 —— applySealedReadonly 遍历不到，
   所以必须靠这里的 class + pointer-events 让它真的点不动。
   现状：封存项目点「保存」会真发一次 PUT 再吃 409（用户白点 + 红色报错）。 */
.chip-sealed-off {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;      /* 真点不动，不是只改个颜色 */
}
.steps-sealed .step { cursor: not-allowed; opacity: 0.75; }
.steps-sealed .step.active { opacity: 1; }   /* 当前所在步骤保持清晰，只弱化"可切换"的暗示 */

.thumb {
  height: 120px; border-radius: 9px;
  background: var(--panel-2);
  display: grid; place-items: center;
  color: var(--text-mute); font-size: 11px;
  margin-bottom: 10px; overflow: hidden;
  border: 1px dashed var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.card-line { font-size: 12.5px; color: var(--text-dim); line-height: 1.75; }
.card-line b { color: var(--text); font-weight: 600; }
.card-line .k { color: var(--text-mute); }

/* ===================== 解析进度面板（剧本步骤） ===================== */

.parse-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-raise);
  padding: 30px 26px;
  text-align: center;
  margin-bottom: 18px;
}
.parse-panel h2 { font-size: 18px; margin: 0 0 6px; }
.parse-panel .psub { font-size: 12.5px; color: var(--text-mute); margin-bottom: 22px; }

.task-list { max-width: 460px; margin: 0 auto; text-align: left; }
.task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ok-soft);
  margin-bottom: 9px;
  font-size: 13px;
}
.task-item .t-ico { color: var(--ok); font-size: 13px; }
.task-item .t-body b { display: block; font-size: 13px; color: var(--text); }
.task-item .t-body span { font-size: 11px; color: var(--text-mute); }
.task-item .t-state { margin-left: auto; font-size: 11px; color: var(--ok); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.task-item.pending { background: var(--panel-2); border-style: dashed; }
.task-item.pending .t-ico { color: var(--text-mute); }

/* ===================== 表单字段 ===================== */

.field { margin-bottom: 15px; }
.field-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px;
  font-weight: 600;
}
.field-label .req { color: var(--red); font-weight: 400; font-size: 11px; }

/* 兜底：<input> 不写 type 时浏览器给的是默认 20 字符宽、21px 高，
 * 而下面的规则只命中 type="text"/"password"…，于是同一表单里会出现
 * 「账号框 185×21、密码框 342×37」这种错位（登录页实测）。
 * 先用 :not() 把纯文本类输入框全部收进来，再给统一高度。 */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="hidden"]),
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field textarea,
.field select {
  width: 100%;              /* 曾漏掉这一行：所有输入框退回浏览器默认 20 字符宽 */
  height: 38px;             /* 统一高度，避免 text 框与 password 框一高一矮 */
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field textarea { resize: vertical; min-height: 64px; height: auto; line-height: 1.65; }
.field input:disabled { background: var(--panel-2); color: var(--text-mute); }

.field textarea.warn-len { border-color: var(--warn); background: #fffaf0; }
.len-hint { font-size: 11px; color: var(--text-mute); margin-left: auto; font-weight: 400; }
.len-hint.warn-len { color: var(--warn); }

.readonly-box {
  background: var(--panel-2);
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word;
}

/* 黄色提示框（新建剧本弹窗内的"重要提示"） */
.notice-warn {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.75;
  color: #614700;
  margin-bottom: 15px;
}
/* 仅当加粗是提示条的「首个子元素」时才当标题独占一行；
   段中用于强调的 <b>（如「入口 B」「只读提取」）必须保持行内，否则会把句子切断 */
.notice-warn > b:first-child { display: block; margin-bottom: 4px; }
.notice-info > b:first-child { display: block; margin-bottom: 4px; }
.notice-warn a { color: var(--brand); text-decoration: none; }

/* 蓝色提示条（资产页顶部） */
.notice-info {
  background: #e8f1ff;
  border: 1px solid #c9dcff;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #1d4bb8;
  margin-bottom: 14px;
}

/* ===================== 折叠 ===================== */

.collapse-head {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 9px 0; color: var(--text-dim);
  font-size: 12.5px; font-weight: 600;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.collapse-head:hover { color: var(--text); }
.collapse-body { display: none; padding-top: 8px; }
.collapse-body.open { display: block; }
.caret { transition: transform 0.2s ease; display: inline-block; }
.collapse-head.open .caret { transform: rotate(90deg); }

/* ===================== 按钮 ===================== */

.btn {
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.16s ease;
  font-family: inherit;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.06); color: #fff; }
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 600; }
.btn-dark:hover { filter: brightness(1.25); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-xs { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }

/* ===================== 锚点引用资产库 ===================== */

.anchor-pick {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 7px; padding: 7px 9px;
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: 9px;
}
.anchor-pick .ap-hint { font-size: 11px; color: var(--text-dim); }
.anchor-pick .ap-empty { font-size: 11.5px; color: var(--text-dim); }
.anchor-pick .ap-empty b { color: var(--text); }
.ap-chip {
  font: inherit; font-size: 11.5px; line-height: 1.5; cursor: pointer;
  padding: 3px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-dim);
  transition: all .14s;
}
.ap-chip:hover { border-color: var(--brand); color: var(--text); }
.ap-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.ap-chip.ap-clear { color: var(--red); border-color: rgba(229,72,77,.35); }
.ap-chip.ap-clear:hover { border-color: var(--red); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===================== 底部悬浮"下一步"胶囊 ===================== */

.float-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex; align-items: center; gap: 10px;
  background: var(--dark);
  color: #fff;
  border-radius: 999px;
  padding: 9px 12px 9px 18px;
  box-shadow: var(--shadow-float);
}
.float-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfd3db; }
.float-status .f-ico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.float-status b { color: #fff; font-weight: 600; }
.float-status .f-sub { font-size: 10.5px; color: #868c98; display: block; margin-top: 1px; }
.btn-next {
  padding: 9px 26px;
  font-size: 13.5px; font-weight: 600;
  border-radius: 999px;
  border: none;
  background: #fff; color: var(--dark);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2,0.8,0.3,1);
  font-family: inherit;
}
.btn-next:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,255,255,0.25); }
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===================== Toast ===================== */

.toast {
  position: fixed;
  top: 60px; left: 50%;
  transform: translate(-50%, -8px);
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 400;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: var(--red); }
.toast-warn { background: var(--warn); }

/* ===================== 弹窗 ===================== */

.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 18, 28, 0.45);
  display: none; place-items: center;
  z-index: 300;
  padding: 24px;
}
.modal-mask.show { display: grid; }

.modal {
  width: min(640px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 30px 80px rgba(10, 14, 30, 0.35);
}
.modal-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.modal-sub { font-size: 12.5px; color: var(--text-mute); margin-bottom: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-close {
  float: right; width: 28px; height: 28px;
  border: none; background: transparent;
  font-size: 16px; cursor: pointer; color: var(--text-mute);
  border-radius: 7px;
}
.modal-close:hover { background: var(--panel-2); color: var(--text); }

/* ===================== 风格中心（大弹窗：左分类 + 右网格） ===================== */

.modal-wide { width: min(1280px, 96vw); padding: 0; overflow: hidden; }
.style-center { display: flex; height: 72vh; }

.sc-side {
  width: 190px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  overflow-y: auto;
  background: var(--bg-soft);
}
.sc-side .sc-title { font-size: 14px; font-weight: 700; padding: 4px 8px 12px; }
.sc-side .sc-sub { font-size: 11px; color: var(--text-mute); padding: 0 8px 12px; margin-top: -8px; }
.sc-cat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 2px;
}
.sc-cat:hover { background: var(--panel-2); color: var(--text); }
.sc-cat.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow-raise); }
.sc-cat .n { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.sc-cat.active .n { color: var(--brand); }

.sc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sc-head .sc-h-title { font-size: 13.5px; font-weight: 600; }
.sc-head .sc-count { margin-left: auto; font-size: 12px; color: var(--text-mute); }
.sc-search {
  width: 220px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
}
.sc-search:focus { border-color: var(--brand); }

.sc-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  /* 紧凑：1280 宽浮窗下稳定 6 列，窄屏自动降级（适配 200+ 风格，一屏看更多） */
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  /* 关键：aspect-ratio 正方形封面不向 auto 行贡献固有高度（Chromium 行为），
     必须显式 max-content，否则整行塌陷成 2px（封面变横条） */
  grid-auto-rows: max-content;
  gap: 12px;
  align-content: start;
}
/* 窄屏（<1100px）自动降为 4-5 列，避免卡片过窄 */
@media (max-width: 1100px) {
  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}

.style-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-raise);
  position: relative;
}
.style-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.style-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-raise); }

.style-thumb {
  /* 封面必须正方形：aspect-ratio 锁 1:1，宽度随卡片自适应（用户明确要求） */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: linear-gradient(135deg, #eceef4, #e2e5ee);
  display: grid; place-items: center;
  color: var(--text-mute); font-size: 11px;
  overflow: hidden;
  position: relative;
}
.style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 内置封面图：占位层垫在图片下方，图缺失时（onerror 隐藏 img）自然露出占位 */
.style-thumb.has-img { position: relative; }
.style-thumb .st-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 2px;
  text-align: center; padding: 6px;
}
/* 有真图时占位层（风格名/封面待补）必须隐藏 —— 它曾以绝对定位盖在图上，
   用户看到的「封面字幕」就是它。仅图片加载失败（.no-cover）时才露出。 */
.style-thumb.has-img:not(.no-cover) .st-ph { display: none; }
.style-thumb.has-img.no-cover { background: repeating-linear-gradient(45deg, #eef0f6, #eef0f6 8px, #e6e9f2 8px, #e6e9f2 16px); }
.style-thumb .st-ph-name {
  font-size: 12.5px; font-weight: 700; color: var(--text-2, #556);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.style-thumb .st-ph-hint { font-size: 10px; color: var(--text-mute); }
/* 纯占位（未知风格，无内置图路径） */
.style-thumb.placeholder {
  display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; padding: 6px;
}
.style-thumb-tag {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  opacity: 0; transition: opacity .15s ease;
}
.style-thumb.has-img:hover .style-thumb-tag { opacity: 1; }
/* 预览弹窗里的封面大图 */
.style-cover-preview {
  height: auto; min-height: 0; border-radius: 10px; overflow: hidden;
  margin-bottom: 12px; padding: 0; position: relative; background: #eef0f6;
}
.style-cover-preview img { width: 100%; max-height: 46vh; object-fit: contain; }
.style-cover-preview .st-ph { position: static; padding: 28px 12px; }

/* 风格中心左侧分组标题 */
.sc-grp-label { font-size: 11px; color: var(--text-mute); padding: 12px 8px 6px; }

/* 知识库「画面风格」卡片网格（剧本页） */
.kb-style-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kb-style-card {
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kb-style-card:hover { border-color: var(--brand, #4f6ef7); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.kb-style-card.selected { border-color: var(--brand, #4f6ef7); box-shadow: 0 0 0 2px rgba(79,110,247,.18); }
.kb-style-card .style-thumb { height: 150px; border-radius: 0; }
.kb-style-info { padding: 8px 10px 10px; }
.kb-style-name { font-size: 12.5px; font-weight: 600; }
.kb-style-fit { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* 剧本页推荐区：只显示「解析推荐的那一条」，全量浏览交给风格中心浮窗 */
.style-rec-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.style-rec-thumb { flex: 0 0 132px; width: 132px; cursor: zoom-in; }
.style-rec-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.style-rec-tip { font-size: 11px; color: var(--text-mute); }
.style-rec-empty { padding: 2px 0; }

/* 推荐封面墙（3~5 条，100% 适合排最前并打徽章） */
.style-rec-grid {
  display: grid; gap: 12px; margin: 8px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.style-rec-card {
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: #fff; padding: 8px; position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.style-rec-card.is-top { border-color: var(--brand, #4f6ef7); box-shadow: 0 0 0 2px rgba(79,110,247,.14); }
.style-rec-badge {
  position: absolute; top: -9px; left: 8px;
  background: var(--brand, #4f6ef7); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.style-rec-card .style-thumb { aspect-ratio: 1 / 1; height: auto; border-radius: 6px; cursor: zoom-in; }
.style-rec-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-rec-fit {
  font-size: 11px; color: var(--text-dim, #555);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 30px;
}
.style-rec-score { font-size: 10.5px; color: var(--text-mute); }
.style-rec-act { margin-top: auto; }
/* 趋势徽章：标明这条推荐是「当月升温题材命中」还是「退用上期」——
   两者价值不同，必须一眼可辨，否则用户分不清推荐的前瞻性来自哪里。 */
.style-rec-trend {
  display: inline-block; padding: 0 5px; border-radius: 8px;
  background: #fff1f0; color: #d9534f; border: 1px solid #fcd9d6;
  font-size: 10px; font-weight: 600; white-space: nowrap;
}

/* 封面查看大图（lightbox，全站通用） */
.cover-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12,14,20,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 40px; cursor: zoom-out;
  animation: clFade .14s ease;
}
@keyframes clFade { from { opacity: 0 } to { opacity: 1 } }
.cover-lightbox-inner { max-width: 92vw; max-height: 92vh; cursor: default; position: relative; }
.cover-lightbox-inner img {
  max-width: 92vw; max-height: 84vh; display: block;
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.5); background: #fff;
}
.cover-lightbox-name {
  color: #fff; text-align: center; margin-top: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.cover-lightbox-hint { color: rgba(255,255,255,.55); text-align: center; font-size: 11.5px; margin-top: 4px; }
.cover-lightbox .cl-close {
  position: absolute; top: -38px; right: 0;
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  background: none; border: 0; padding: 0 4px; opacity: .8;
}
.cover-lightbox .cl-close:hover { opacity: 1; }

/* 知识库页风格卡片里的缩略图 */
.kb4-card .style-thumb { aspect-ratio: 1 / 1; height: auto; }
/* 风格中心卡片里的缩略图（正方形，随卡片宽度自适应） */
.style-thumb-wrap .style-thumb { aspect-ratio: 1 / 1; height: auto; }
.style-fav {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: grid; place-items: center;
  font-size: 12px; color: var(--text-mute);
}
.style-info { padding: 8px 10px 9px; }
.style-cat-line { font-size: 10.5px; color: var(--text-mute); margin-top: 2px; }
.style-name { font-size: 12.5px; font-weight: 700; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-desc { font-size: 11.5px; color: var(--text-dim); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.style-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.style-tags .pill { font-size: 10.5px; }
.style-foot {
  display: flex; gap: 14px;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-dim);
}
.style-foot span { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.style-foot span:hover { color: var(--brand); }
.style-foot .apply { margin-left: auto; color: var(--brand); font-weight: 600; }

/* ===================== 标签 / Tab ===================== */

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag {
  padding: 4px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tag .x { cursor: pointer; opacity: 0.6; }
.tag .x:hover { opacity: 1; }
/* 输出语言标记：与题材标签区分开，一眼看出这是海外/双语项目 */
.tag-lang {
  background: transparent;
  border: 1px solid var(--line, #333);
  color: var(--text-dim, #999);
  cursor: default;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.cat-tab {
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cat-tab:hover { background: var(--panel-2); }
.cat-tab.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow-raise); }

/* ===================== 资产网格 ===================== */

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 13px;
}
.asset-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.18s ease;
  box-shadow: var(--shadow-raise);
  position: relative;
}
.asset-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.asset-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.asset-card .thumb { border: none; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 0; }
.asset-role {
  position: absolute; top: 9px; left: 9px;
  font-size: 10px; font-weight: 600;
  background: var(--brand); color: #fff;
  border-radius: 5px; padding: 2px 7px;
}
.asset-role.green { background: var(--ok); }
.asset-info { padding: 10px 12px 12px; }
.asset-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px; }
.asset-desc { font-size: 11px; color: var(--text-mute); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===================== 分镜页 · 剧本行卡片 ===================== */

.script-row {
  display: flex; gap: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-raise);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.script-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.script-row .sr-thumb {
  width: 118px; height: 82px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px dashed var(--line-strong);
  display: grid; place-items: center;
  color: var(--text-mute); font-size: 18px;
}
.script-row .sr-body { flex: 1; min-width: 0; }
.script-row .sr-tag { font-size: 11px; color: var(--text-mute); margin-bottom: 3px; }
.script-row .sr-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.script-row .sr-meta { font-size: 11.5px; color: var(--text-mute); margin-bottom: 8px; }
.script-row .sr-text { font-size: 12px; color: var(--text-dim); line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.script-row .sr-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.script-row .sr-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: 11.5px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}
.script-row .sr-btn:hover { border-color: var(--brand); color: var(--brand); }
.script-row .sr-btn.dark { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 600; }

/* ===================== 分镜卡片 ===================== */

.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; }
.shot-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-raise);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.shot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.shot-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* ===================== 诊断条目 ===================== */

.diag-item {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  margin-bottom: 8px;
  font-size: 12.5px; line-height: 1.65;
  color: var(--text-dim);
}
.diag-item.red { border-left-color: var(--red); background: var(--red-soft); border-color: var(--red-soft); color: #8c2b2e; }
.diag-item.yellow { border-left-color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); color: #6d5504; }

/* ===================== 呼吸动态（克制） ===================== */

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
.breathe { animation: breathe 5.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ===================== 空状态 / 欢迎页 ===================== */

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px; line-height: 1.8;
}
.empty .btn { margin-top: 16px; }

.entry-row { display: flex; gap: 13px; margin-top: 22px; flex-wrap: wrap; }
.entry-btn {
  flex: 1 1 200px;
  padding: 20px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.2,0.8,0.3,1);
  box-shadow: var(--shadow-raise);
  font-family: inherit;
  color: var(--text);
}
.entry-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand); }
.entry-btn b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.entry-btn span { font-size: 12px; color: var(--text-mute); line-height: 1.6; }

/* ===================== 欢迎页（作品列表） ===================== */

.work-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.work-header .wh-title { font-size: 21px; font-weight: 700; }
.work-header .wh-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.work-header .wh-actions { margin-left: auto; display: flex; gap: 9px; }

.work-card {
  width: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-raise);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.work-card .wc-thumb {
  height: 110px;
  background: linear-gradient(135deg, #eceef4, #e0e3ec);
  display: grid; place-items: center;
  color: var(--text-mute); font-size: 11px;
  padding: 10px;
  text-align: center;
}
.work-card .wc-name { padding: 11px 13px; font-size: 13px; font-weight: 600; }
.work-card .wc-time { padding: 0 13px 12px; font-size: 11px; color: var(--text-mute); }

/* ===================== 滚动条 ===================== */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d3d7e0; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcc1cd; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== 响应式 ===================== */

@media (max-width: 860px) {
  .steps { display: none; }
  .inner { padding: 0 4px; }
  /* 侧栏不再 display:none —— 改为抽屉（详见文件末尾「移动端抽屉导航」块，
     那里必须排在本文件所有 .sidebar 规则之后才能赢下级联） */
}

/* =========================================================================
 * 新增页面样式：项目列表 / 知识库 / 用量调度 / 用户 / 规则 / 品牌
 * ========================================================================= */

/* ---- 项目列表：网格卡片 ---- */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.proj-card {
  display: flex;
  flex-direction: row;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-raise);
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--brand); }

.proj-cover {
  width: 132px;
  flex-shrink: 0;
  background: linear-gradient(150deg, #e9ecf5, #dde1ee);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.proj-cover img { width: 100%; height: 100%; object-fit: cover; }
.proj-cover-ph {
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.pc-title { font-size: 12.5px; font-weight: 700; color: #3c4459; line-height: 1.5; }
.pc-badge {
  font-size: 10px; color: #fff; background: var(--brand);
  border-radius: 5px; padding: 2px 8px;
}

.proj-body { flex: 1; padding: 13px 15px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.proj-name { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }

/* 漫剧形态徽标：谁在讲故事 → 决定平台分成。演绎向绿、解说向橙、未指定灰。
   颜色语义与知识库 form 层保持一致，用户两处看到的是同一套色。 */
.proj-form-row { margin-top: -3px; }
.form-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; line-height: 1.7;
  border: 1px solid transparent;
}
.fc-yan   { background: rgba(34,197,94,.13);  color: #2fa866; border-color: rgba(34,197,94,.32); }
.fc-jie   { background: rgba(245,158,11,.13); color: #d18700; border-color: rgba(245,158,11,.32); }
.fc-none  { background: var(--panel-2); color: var(--text-mute); border-color: var(--line); }

/* 新建项目弹窗里的形态选择器（6 选 1） */
.form-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px;
}
.form-opt {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  padding: 10px 11px; background: var(--panel); transition: border-color .15s, background .15s;
}
.form-opt:hover { border-color: var(--brand); }
.form-opt.selected { border-color: var(--brand); background: var(--brand-soft); }
.form-opt input[type=radio] { margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.form-opt-body { min-width: 0; flex: 1; }
.form-opt-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.form-opt-name { font-size: 12.5px; font-weight: 700; }
.form-opt-who { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.form-opt-meta { font-size: 10.5px; color: var(--text-mute); margin-top: 3px; }
.form-tier { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.tier-yan { background: rgba(34,197,94,.14); color: #2fa866; }
.tier-jie { background: rgba(245,158,11,.14); color: #d18700; }
.form-hint {
  margin-top: 8px; font-size: 11.5px; color: var(--text-dim);
  line-height: 1.65; padding: 8px 10px; border-radius: 8px; background: var(--panel-2);
}
.form-hint .fh-warn { color: var(--warn); }

.proj-block { }
.proj-label { font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.06em; margin-bottom: 4px; }
.proj-text {
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-chars { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-mini {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
}
.chip-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--text-dim);
}
.proj-dim { font-size: 11px; color: var(--text-mute); }

.proj-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.proj-field { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; min-width: 0; }
.pf-k { color: var(--text-mute); flex-shrink: 0; }
.pf-v { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.proj-foot { margin-top: auto; padding-top: 4px; }
.proj-enter { font-size: 11.5px; color: var(--brand); font-weight: 600; }

/* ---- 知识库 ---- */

.kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kb-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
  box-shadow: var(--shadow-raise);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kb-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand); }
.kb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.kb-title { font-size: 14px; font-weight: 700; }
.kb-time { margin-left: auto; font-size: 10.5px; color: var(--text-mute); flex-shrink: 0; }
.kb-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.kb-preview {
  font-size: 12px; color: var(--text-dim); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-actions { display: flex; gap: 7px; margin-top: 11px; }

/* ---- 用量调度 ---- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow-raise);
}
.stat-v { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.stat-v.stat-bad { color: var(--red); }
.stat-k { font-size: 11px; color: var(--text-mute); margin-top: 3px; }

.usage-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.us-item {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; padding: 8px 12px;
  background: var(--panel-2); border-radius: 8px;
}
.us-k { color: var(--text-mute); flex-shrink: 0; }
.us-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-ok { color: var(--ok); }
.us-off { color: var(--warn); }

.log-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.log-row {
  display: grid;
  grid-template-columns: 76px 1.4fr 1fr 78px 66px 66px;
  gap: 8px; align-items: center;
  padding: 9px 13px; font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.log-row:last-child { border-bottom: none; }
.log-head { background: var(--panel-2); font-weight: 600; color: var(--text-dim); font-size: 11.5px; }
.lg-time { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.lg-model { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 用户权限表 ---- */

.perm-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.perm-row {
  display: grid; grid-template-columns: 1.6fr 70px 70px 70px;
  gap: 8px; align-items: center;
  padding: 9px 13px; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.perm-row:last-child { border-bottom: none; }
.perm-head { background: var(--panel-2); font-weight: 600; color: var(--text-dim); font-size: 11.5px; }
.perm-row span:not(:first-child) { text-align: center; }

/* ---- 品牌与外观 ---- */

.swatch {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong);
  transition: transform 0.15s ease;
}
.swatch:hover { transform: scale(1.12); }

.brand-preview {
  background: var(--panel-2); border: 1px dashed var(--line-strong);
  border-radius: 10px; padding: 16px 18px;
}
.bp-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.bp-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); display: inline-block; }
.bp-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bp-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 12px; }

/* ===== 剧本专业评测（十维） ===== */
.ev-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; margin-top: 4px; }
@media (max-width: 1180px) { .ev-grid { grid-template-columns: 1fr; } }
.ev-radar { background: var(--bg-soft, #fafbfd); border: 1px solid var(--line, #e6e9f2); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 4px; }
.ev-side { min-width: 0; }
.ev-sec-t { font-size: 12px; font-weight: 700; color: var(--text-mute); margin: 8px 0 6px; letter-spacing: .3px; }
.ev-sec-t:first-child { margin-top: 0; }
.ev-chip { display: inline-block; font-size: 12px; padding: 4px 9px; border-radius: 6px; margin: 0 6px 6px 0; line-height: 1.5; }
.ev-chip.ok { background: #eef9f1; color: #1f7a43; border: 1px solid #cdebd8; }
.ev-chip.risk { background: #fdf1f1; color: #9c3030; border: 1px solid #f2d5d5; }
.ev-dim { margin: 0 0 9px; }
.ev-dim-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text); }
.ev-dim-head b { font-size: 13px; }
.ev-w { font-style: normal; font-size: 10.5px; color: var(--text-mute); margin-left: 6px; background: #f1f2f7; padding: 1px 5px; border-radius: 4px; }
/* 形态调权：权重被形态改过的维度用紫色标出（与知识库 form 层同色系） */
.ev-w.ev-w-chg { color: #6c5ce7; background: #efedff; font-weight: 700; }
.ev-w.ev-w-ban { color: #b26b00; background: #fff6e6; font-weight: 700; }
.ev-dim.ev-dim-ban { opacity: .7; }
/* 形态说明盒（评测块与报告共用一套视觉语言） */
.form-box { border: 1px solid #ddd8ff; border-radius: 10px; padding: 12px 15px; margin: 10px 0; background: #faf9ff; }
.form-box .ft { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.form-box .fl { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }
/* 形态匹配预警条：危险红 / 警告橙 */
.fit-warn, .fit-danger { font-size: 12.5px; line-height: 1.65; padding: 10px 13px; border-radius: 8px; margin: 10px 0; }
.fit-warn { background: #fff8ec; border-left: 3px solid #e8a13c; color: #8a5d1c; }
.fit-danger { background: #fdf0f0; border-left: 3px solid #e05252; color: #8f2a2a; }
.fit-warn b, .fit-danger b { display: block; margin-bottom: 4px; }

/* ---- 评测三层证据：爆款对标 / 文本证据 ---- */
.bench-box, .evid-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: var(--panel); }
.bb-head { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.bb-scope { font-weight: 400; font-size: 11.5px; color: var(--text-mute); margin-left: 8px; }
.bb-cases { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.bb-caveat { font-size: 11px; color: var(--text-mute); margin-top: 5px; line-height: 1.6; }
/* 分位行 */
.bp-row { margin-bottom: 11px; }
.bp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.bp-mine { color: var(--text-dim); font-size: 11.5px; }
.bp-tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.bp-strong { background: rgba(34,197,94,.14); color: #2fa866; }
.bp-mid    { background: rgba(59,111,224,.13); color: #3b6fe0; }
.bp-weak   { background: rgba(224,82,82,.13); color: #d24b4b; }
.bp-bar { height: 6px; background: var(--panel-2); border-radius: 3px; margin: 5px 0 3px; overflow: hidden; position: relative; }
.bp-bar i { display: block; height: 100%; border-radius: 3px; }
.bp-bar i.bp-s { background: #2fa866; }
.bp-bar i.bp-m { background: #3b6fe0; }
.bp-bar i.bp-w { background: #d24b4b; }
.bp-pct { font-size: 10.5px; color: var(--text-mute); }
.bp-none { font-size: 11px; color: var(--text-mute); }
.bp-ref { font-size: 11px; color: var(--text-mute); margin-top: 3px; line-height: 1.55; }
/* 证据行 */
.evi-row { padding: 8px 0; border-top: 1px dashed var(--line); }
.evi-row:first-of-type { border-top: none; }
.evi-attention { background: #fffaf0; margin: 0 -8px; padding: 8px; border-radius: 7px; }
.evi-head { font-size: 12.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.evi-score { font-weight: 700; color: var(--text); }
.evi-hint { font-size: 11px; color: var(--text-mute); }
.evi-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.evi-ok   { background: rgba(34,197,94,.13); color: #2fa866; }
.evi-warn { background: rgba(224,82,82,.13); color: #d24b4b; }
.evi-thin { background: rgba(232,161,60,.15); color: #a8752a; }
.evi-note { font-size: 11.5px; color: #8a5d1c; margin: 4px 0 3px; line-height: 1.6; }
.evi-line { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; padding-left: 10px; border-left: 2px solid var(--line); margin: 3px 0; }
.evi-neg { border-left-color: #e05252; color: #8f2a2a; }
.ev-bar { height: 5px; background: #eef0f5; border-radius: 3px; margin: 4px 0 4px; overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.ev-hl, .ev-ad { font-size: 11.5px; padding: 4px 8px; border-radius: 5px; margin: 3px 0; line-height: 1.55; }
.ev-hl { background: #f2faf4; color: #256b3c; }
.ev-ad { background: #fff8ec; color: #8a5d1c; }
.ev-mut { font-size: 11.5px; color: var(--text-mute); }
.ev-sub { font-size: 11px; color: var(--text-mute); margin-right: 4px; }

/* ===== 分镜时长健康度 ===== */
.shot-health.ok { border-left: 3px solid #2eaf64; }
.shot-health.warn { border-left: 3px solid #e8a13c; }
.shot-health.bad { border-left: 3px solid #e05252; }
.sh-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.sh-stat { flex: 1; min-width: 76px; background: #f7f8fb; border-radius: 8px; padding: 8px 10px; text-align: center; }
.sh-stat b { display: block; font-size: 18px; line-height: 1.2; }
.sh-stat span { font-size: 11px; color: var(--text-mute); }
.sh-stat.warn b { color: #e8a13c; }
.sh-stat.bad b { color: #e05252; }
.sh-bar { position: relative; height: 7px; background: #eef0f5; border-radius: 4px; overflow: visible; margin: 6px 0 4px; }
.sh-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6c5ce7, #a29bfe); border-radius: 4px; }
.sh-bar u { position: absolute; top: -3px; width: 1px; height: 13px; background: #b9bfcc; text-decoration: none; }
.sh-legend { font-size: 11.5px; color: var(--text-mute); margin-top: 8px; line-height: 1.6; }
.mg-flag { font-style: normal; font-size: 10px; background: #ece9ff; color: #5b4bd6; padding: 1px 5px; border-radius: 4px; margin-left: 6px; }

/* 分集：卡片上的集数徽章 + 分集概览列表 */
.ep-badge { font-style: normal; font-size: 10px; background: #e6f4ff; color: #1668b3; padding: 1px 5px; border-radius: 4px; margin-right: 6px; }
.ep-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ep-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 9px; border-radius: 6px; background: #f9fafc; }
.ep-name { min-width: 74px; font-weight: 600; color: var(--text); }
.ep-name.ep-un { color: var(--text-mute); font-weight: 500; }
.ep-num { color: var(--text-dim); }
.ep-row .btn { margin-left: auto; }
.mg-preview { margin-top: 10px; border-top: 1px dashed var(--line, #e6e9f2); padding-top: 10px; }
.mg-row { font-size: 12px; color: var(--text); margin-bottom: 8px; }
.mg-row b { color: var(--brand); }
.mg-k { color: var(--text-mute); margin-right: 3px; }
.mg-sep { color: #d5d9e4; margin: 0 6px; }
.mg-item { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 8px; border-radius: 6px; background: #f9fafc; margin-bottom: 4px; }
.mg-no { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; }
.mg-dur { color: var(--text-mute); white-space: nowrap; }
.mg-tag { font-size: 11px; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.mg-tag.ok { background: #eef9f1; color: #1f7a43; }
.mg-tag.warn { background: #fff8ec; color: #8a5d1c; }
.mg-tag.bad { background: #fdf1f1; color: #9c3030; }
.mg-blocked-t { font-size: 11.5px; color: #9c3030; margin: 8px 0 5px; font-weight: 600; }

/* ===== 知识库四层结构 ===== */
.kb4-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #e6e9f2); margin-bottom: 14px; }
.kb4-tab { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 13px; color: var(--text-mute); border-bottom: 2px solid transparent; transition: all .15s; }
.kb4-tab:hover { background: #f6f5ff; color: var(--brand); }
.kb4-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; background: #faf9ff; }
.kb4-tab-c { font-size: 11px; background: #eef0f5; color: #6a7183; border-radius: 9px; padding: 0 6px; line-height: 17px; }
.kb4-tab.active .kb4-tab-c { background: var(--brand); color: #fff; }
.kb4-head { margin-bottom: 12px; font-size: 13px; }
.kb4-head b { font-size: 14px; }
.kb4-scene { font-size: 10.5px; background: #f1f2f7; color: #6a7183; padding: 1px 6px; border-radius: 4px; margin: 0 8px; vertical-align: middle; }
.kb4-desc { color: var(--text-mute); font-size: 12px; }
.kb4-note { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--text-mute); background: #f8f9fc; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; padding: 10px 14px; }
.kb4-note code { background: #eceef4; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.kb4-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.kb4-card { border: 1px solid var(--line, #e6e9f2); border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s; }
.kb4-card:hover { box-shadow: 0 4px 14px rgba(40,44,63,.08); }
.kb4-thumb { height: 74px; background: linear-gradient(135deg, #eceaf8, #f6f5ff); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #5b4bd6; }
.kb4-thumb-sub { font-size: 10.5px; font-weight: 400; color: #9aa0b0; margin-top: 3px; }
.kb4-cbody { padding: 10px 12px 12px; }
.kb4-ctitle { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.kb4-crow { font-size: 12px; color: #4a5060; margin-bottom: 3px; line-height: 1.55; }
.kb4-mute { color: var(--text-mute); }
.kb4-k { color: var(--text-mute); margin-right: 5px; }
.kb4-cacts { margin-top: 9px; display: flex; gap: 6px; }
.kb4-table { border: 1px solid var(--line, #e6e9f2); border-radius: 10px; overflow: hidden; }
.kb4-tr { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line, #eef0f5); font-size: 12.5px; }
.kb4-tr > div { padding: 9px 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kb4-tr:last-child { border-bottom: none; }
.kb4-th { background: #f7f8fb; font-weight: 600; color: #5a6070; font-size: 12px; }
.kb4-tr:not(.kb4-th):hover { background: #fafbff; }
.kb4-list { display: flex; flex-direction: column; gap: 10px; }
.kb4-frow { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line, #e6e9f2); border-radius: 10px; padding: 12px 14px; background: #fff; }
.kb4-fmain { flex: 1; min-width: 0; }
.kb4-ftitle { font-weight: 600; font-size: 13.5px; }
.kb4-stars { color: #f0a020; font-size: 12px; margin-left: 8px; letter-spacing: 1px; }
.kb4-rhythm { font-size: 13px; color: #3c4353; margin: 7px 0 6px; font-family: ui-monospace, monospace; background: #f7f8fb; padding: 6px 10px; border-radius: 6px; display: inline-block; }
.kb4-fmeta { font-size: 11.5px; color: var(--text-mute); }
.kb4-ubar { height: 4px; background: #eef0f5; border-radius: 3px; margin-top: 8px; max-width: 280px; overflow: hidden; }
.kb4-ubar i { display: block; height: 100%; background: linear-gradient(90deg, #6c5ce7, #a29bfe); border-radius: 3px; }
.chip-cam { background: #eef5ff !important; color: #2a5bb8 !important; border-color: #d3e2fb !important; }

/* ============ 封面选择（从资产图推荐） ============ */
.cover-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin: 6px 0 4px;
}
.cover-pick {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel-2);
  transition: transform .12s ease, border-color .12s ease;
}
.cover-pick:hover { transform: translateY(-2px); border-color: var(--brand); }
.cp-thumb { height: 120px; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-name { padding: 7px 9px 2px; font-size: 12.5px; font-weight: 600; }
.cp-cat { padding: 0 9px 8px; font-size: 11px; color: var(--text-dim); }

/* ============ 知识库反哺开关 ============ */
.kb4-feedback {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2);
}
.kb4-feedback.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); }
.kbf-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.kbf-switch input { display: none; }
.kbf-track {
  width: 40px; height: 22px; border-radius: 999px; background: var(--line-strong, #666);
  position: relative; transition: background .16s ease; flex: 0 0 auto;
}
.kbf-dot {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .16s ease;
}
.kbf-switch input:checked + .kbf-track { background: var(--brand); }
.kbf-switch input:checked + .kbf-track .kbf-dot { transform: translateX(18px); }
.kbf-label { font-weight: 600; font-size: 13px; }
.kbf-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* 风格卡片收藏星标：可点击，真实记录 */
.style-fav.on { color: #f0b429; }
.style-card .style-fav { transition: color .12s ease; }

/* ============ 模型配置：多套列表 + 快速切换 ============ */
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line, #333); border-radius: 9px;
  background: var(--panel-2, #1b1b1f);
}
.mc-row.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--panel-2, #1b1b1f)); }
.mc-row-main { min-width: 0; flex: 1; }
.mc-row-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.mc-row-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
.mc-badge {
  background: var(--brand); color: #fff; font-size: 10px; padding: 1px 6px;
  border-radius: 999px; font-weight: 600; flex: 0 0 auto;
}
.mc-row-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 7px; }
.btn-danger { color: #ff6b6b; border-color: color-mix(in srgb, #ff6b6b 40%, transparent); }
.mc-form { border-top: 1px dashed var(--line, #333); margin-top: 12px; padding-top: 12px; }

/* 顶部胶囊快速切换菜单 */
.ms-list { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 4px; }
.ms-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line, #333); border-radius: 9px; background: var(--panel-2, #1b1b1f);
  transition: border-color .12s ease;
}
.ms-item:hover { border-color: var(--brand); }
.ms-item.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel-2, #1b1b1f)); }
.ms-dot { color: var(--brand); font-size: 12px; flex: 0 0 auto; }
.ms-name { font-weight: 600; font-size: 13px; }
.ms-mut { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }

/* ===== 规则分可解释列表（分镜详情） ===== */
.rs-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line,#eee);font-size:12.5px;line-height:1.6}
.rs-row:last-child{border-bottom:0}
.rs-dim{flex:0 0 54px;color:var(--text-dim);font-weight:600}
.rs-score{flex:0 0 34px;text-align:center;font-weight:700;border-radius:5px;padding:1px 0}
.rs-score.ok{color:#1a9c5b;background:rgba(26,156,91,.10)}
.rs-score.mid{color:#c98a00;background:rgba(201,138,0,.12)}
.rs-score.bad{color:#d64545;background:rgba(214,69,69,.10)}
.rs-why{flex:1;color:var(--text-dim)}

/* ===== 规则分参数弹窗 ===== */
.sp-grid{display:flex;flex-direction:column;gap:2px;max-height:58vh;overflow:auto;padding-right:4px}
.sp-row{display:flex;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid var(--line,#f0f0f4)}
.sp-row:last-child{border-bottom:0}
.sp-label{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-name{font-size:12.5px;font-weight:600}
.sp-hint{font-size:11px;color:var(--text-dim);line-height:1.5}
.sp-changed{font-size:10px;color:var(--brand);border:1px solid var(--brand);border-radius:4px;padding:0 4px;margin-left:4px}
.sp-ctl{flex:0 0 240px;display:flex;align-items:center;gap:8px}
.sp-ctl input[type=range]{flex:1;accent-color:var(--brand);cursor:pointer}
.sp-num{width:62px;padding:3px 6px;font-size:12px;border:1px solid var(--line,#ddd);border-radius:5px;text-align:center}

/* ===== 数据新鲜度 ===== */
.fresh-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;margin:10px 0;
  background:var(--bg-soft,#f7f8fc);border:1px solid var(--line,#eceef5);border-radius:9px;font-size:12px}
.fresh-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.fresh-dot.ok{background:#1a9c5b;box-shadow:0 0 0 3px rgba(26,156,91,.15)}
.fresh-dot.warn{background:#d9a406;box-shadow:0 0 0 3px rgba(217,164,6,.15)}
.fresh-dot.bad{background:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.15)}
.fresh-dot.none{background:#b9bcc8}
.fresh-label{font-weight:700;color:var(--text,#222)}
.fresh-state{color:var(--text-dim)}
.fresh-count{color:var(--text-dim);border-left:1px solid var(--line,#e3e3ea);padding-left:10px}
.fresh-why{color:var(--text-dim);flex:1;min-width:120px}
.fresh-act{flex:0 0 auto}
.fresh-panel{margin:10px 0}
.fresh-panel-h{font-size:12.5px;font-weight:700;color:var(--text-dim);margin-bottom:6px}

/* ===== 自动更新管线状态卡 ===== */
.pl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--line,#eee);font-size:12px}
.pl-row:last-child{border-bottom:0}
.pl-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.pl-dot.ok{background:#1a9c5b}.pl-dot.bad{background:#d64545}.pl-dot.none{background:#b9bcc8}
.pl-name{font-weight:600;min-width:110px}
.pl-stat{color:var(--text-dim)}
.pl-time{color:var(--text-dim)}
.pl-err{color:#d64545;cursor:help;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ 相邻镜头衔接类型（切 / 接 / 拆） ============ */
.jt-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.jt-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2, rgba(255,255,255,.03));
  font-size: 12.5px;
}
.jt-mark { font-size: 13px; line-height: 1; }
.jt-pair { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 132px; }
.jt-tag { font-weight: 700; }
.jt-reason { color: var(--text-mute); flex: 1; min-width: 180px; }
.jt-detail { margin-left: 6px; opacity: .75; }

/* 镜头卡上的衔接徽标 */
.joint-badge {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 8px; margin: -2px 0 8px;
  font-size: 11.5px; border-radius: 6px;
  background: var(--surface-2, rgba(255,255,255,.03));
}
.joint-badge .jb-txt { color: var(--text-mute); }

/* ===================== 风格中心 · 浮雕层次感（v3 §6 定案） ===================== */
/* 弹窗本体：深浮层影，与页面拉开层次 */
.modal-mask .modal.modal-wide {
  box-shadow: 0 24px 64px rgba(10, 14, 30, 0.35), 0 6px 18px rgba(10, 14, 30, 0.18);
  border-radius: 14px;
}
/* 左栏：inset 内阴影，形成「凹槽」质感 */
.style-center .sc-side {
  box-shadow: inset -6px 0 12px -8px rgba(20, 24, 40, 0.18);
}
/* 右栏头部：分层投影，形成「凸起」面板 */
.style-center .sc-head {
  box-shadow: 0 2px 6px rgba(20, 24, 40, 0.06);
  position: relative;
  z-index: 1;
}
/* 左栏分类项：active 时浮起，未选中时下压 */
.style-center .sc-cat { transition: transform .12s ease, box-shadow .12s ease; }
.style-center .sc-cat.active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 24, 40, 0.14), inset 0 0 0 1px var(--line);
}

/* 落地检查项：info（请确认）与 ok（无问题）——语义是"助手提示"，非"裁判判罚" */
.diag-item.info { border-left-color: var(--brand); background: var(--brand-soft, rgba(59,130,246,.08)); border-color: var(--brand-soft, rgba(59,130,246,.12)); color: #1e4f8a; }
.diag-item.ok { border-left-color: var(--ok); background: var(--ok-soft, rgba(46,158,107,.08)); border-color: var(--ok-soft, rgba(46,158,107,.12)); color: #22664a; }

/* ===========================================================================
   第 1.5 层 · 跨项目横向对标（自己人水平对标 + 跨本规律）
   设计意图：与第 1 层「爆款对标」（对外绝对坐标）区分开 —— 这里是「对内相对坐标」，
   回答「我在自己写过的本子里算什么水平」「我稳定在哪一维偏弱」。
   =========================================================================== */
.cross-box {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 11px 13px;
  margin-top: 10px;
  background: var(--panel-2, #fafafa);
}
.cross-box.cross-short { border-style: dashed; }

/* 名次块：大号名次 + 分位条 + 定性词 */
.cr-main { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; flex-wrap: wrap; }
.cr-rank { display: flex; align-items: baseline; gap: 2px; flex: none; }
.cr-rank b { font-size: 26px; line-height: 1; color: var(--brand, #2563eb); font-weight: 700; }
.cr-rank span { font-size: 12px; color: var(--text-mute, #888); }
.cr-bar { position: relative; flex: 1; min-width: 160px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.05); overflow: hidden; }
.cr-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7db8f5, #2f7fe0); border-radius: 6px; }
.cr-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: #12324f; }
.cr-verdict { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.cr-top { background: rgba(46,158,107,.14); color: #1d7a4a; }
.cr-mid { background: rgba(209,135,0,.14); color: #8a5a00; }
.cr-low { background: rgba(220,38,38,.12); color: #a52020; }

.cr-spread, .cr-trend, .cr-short, .cr-caveat { font-size: 12px; line-height: 1.8; color: var(--text-dim, #666); }
.cr-trend { margin-top: 3px; }
.cr-up { color: #1d7a4a; font-weight: 600; }
.cr-down { color: #a52020; font-weight: 600; }
.cr-flat { color: var(--text-mute, #888); }
.cr-caveat { margin-top: 4px; opacity: .85; }

/* 跨本规律：稳定短板 / 强项 */
.dg-sec { margin-top: 8px; }
.dg-t { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.dg-t-w { color: #a52020; }
.dg-t-s { color: #1d7a4a; }
.dg-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed rgba(0,0,0,.06); }
.dg-row b { flex: 1; font-weight: 600; }
.dg-avg { color: var(--text-dim, #666); flex: none; }
.dg-rel { flex: none; font-weight: 700; min-width: 38px; text-align: right; }
.dg-neg { color: #a52020; }
.dg-pos { color: #1d7a4a; }
.dg-n { flex: none; color: var(--text-mute, #999); font-size: 11.5px; min-width: 34px; text-align: right; }

/* 口径快照过期警告：改了形态后旧评测分数不再代表当前水平 */
.snap-warn {
  border: 1px solid #e0a020;
  background: rgba(224, 160, 32, .08);
  border-radius: 8px;
  padding: 10px 13px;
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: #7a5200;
}
.snap-warn b:first-child { display: block; margin-bottom: 4px; color: #a06f00; font-size: 13px; }

/* =========================================================================
   合规检查页（对照红果规范逐条核对）
   ========================================================================= */

/* 能力边界三卡：词表可判 / 需语义复核 / 需人工看图 */
.cmp-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .cmp-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cmp-cap-grid { grid-template-columns: 1fr; } }
.cmp-cap {
  border: 1px solid var(--line, #e6e6e6); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-soft, #fafafa);
}
.cmp-cap b { font-size: 20px; line-height: 1.1; }
.cmp-cap span { font-size: 12.5px; font-weight: 600; }
.cmp-cap em { font-style: normal; font-size: 11.5px; color: var(--text-mute, #888); line-height: 1.5; }
.cmp-cap.c-kw b { color: #1d7a4a; }
.cmp-cap.c-review b { color: #b8860b; }
.cmp-cap.c-image b { color: #8a5a00; }
.cmp-cap.c-title b { color: #2f5fa8; }

/* 结果横幅 */
.cmp-banner { border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.7; }
.cmp-banner.bad { border: 1px solid #e0a0a0; background: rgba(200, 60, 60, .07); color: #8a1f1f; }
.cmp-banner.ok  { border: 1px solid #a0d0b0; background: rgba(30, 140, 80, .07); color: #1d6b42; }
.cmp-banner b { display: block; font-size: 14px; margin-bottom: 3px; }

/* 统计条 */
.cmp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cmp-stat {
  flex: 1 1 110px; border: 1px solid var(--line, #e6e6e6); border-radius: 8px;
  padding: 8px 12px; background: var(--bg-soft, #fafafa);
}
.cmp-stat b { display: block; font-size: 19px; line-height: 1.15; }
.cmp-stat span { font-size: 11.5px; color: var(--text-dim, #666); }
.cmp-stat.bad b { color: #c0392b; }
.cmp-stat.warn b { color: #b8860b; }

/* 工具条 */
.cmp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* 分组 */
.cmp-group { border: 1px solid var(--line, #e6e6e6); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.cmp-group-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-soft, #f7f7f7); cursor: pointer; user-select: none;
}
.cmp-group-head:hover { background: var(--bg-soft2, #f0f0f0); }
.cmp-group-head b { font-size: 13.5px; }
.cmp-fold { font-size: 12px; color: var(--text-mute, #999); width: 12px; }
.cmp-group-stat { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-group-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }

/* 单条规范卡 */
.cmp-ref { border: 1px solid var(--line, #e6e6e6); border-left-width: 3px; border-radius: 6px; padding: 10px 12px; background: #fff; }
.cmp-ref.cmp-clear { border-left-color: #d8d8d8; opacity: .92; }
.cmp-ref.cmp-need-review { border-left-color: #e0b040; background: rgba(224, 176, 64, .05); }
.cmp-ref.cmp-hit-warn { border-left-color: #e08a20; background: rgba(224, 138, 32, .06); }
.cmp-ref.cmp-hit-dense { border-left-color: #d05a1a; background: rgba(208, 90, 26, .07); }
.cmp-ref.cmp-hit-ban { border-left-color: #c0392b; background: rgba(192, 57, 43, .07); }
.cmp-ref-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cmp-ref-id { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-mute, #888); }
.cmp-ref-scene { font-size: 13.5px; }

/* 徽标 */
.cmp-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; }
.cmp-b-kw { background: rgba(30, 140, 80, .1); color: #1d6b42; border-color: rgba(30, 140, 80, .25); }
.cmp-b-review { background: rgba(184, 134, 11, .1); color: #8a6500; border-color: rgba(184, 134, 11, .3); }
.cmp-b-image { background: rgba(138, 90, 0, .1); color: #7a4f00; border-color: rgba(138, 90, 0, .3); }
.cmp-b-ban { background: rgba(192, 57, 43, .12); color: #a5271b; border-color: rgba(192, 57, 43, .3); }
.cmp-b-limit { background: rgba(224, 138, 32, .12); color: #9a5a00; border-color: rgba(224, 138, 32, .3); }
.cmp-b-title { background: rgba(47, 95, 168, .1); color: #2a5490; border-color: rgba(47, 95, 168, .28); }

/* 置信度徽标（剧名比对专用） */
.cmp-conf { font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.cmp-conf.c-hi { background: #e4f2ea; color: #1d6b42; }
.cmp-conf.c-mid { background: #fdf3e0; color: #96601a; }
.cmp-conf.c-lo { background: #eef0f4; color: #667; }

/* 密度档位 */
.cmp-density { font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.cmp-density.d-note { background: #eef4ff; color: #2b5fa8; }
.cmp-density.d-watch { background: #fff6e0; color: #9a6500; }
.cmp-density.d-dense { background: #ffe9e2; color: #b03a1a; }

/* 定义 / 要点 */
.cmp-ref-def { font-size: 12.5px; line-height: 1.7; margin-bottom: 5px; }
.cmp-ref-points { font-size: 12.5px; line-height: 1.7; margin-bottom: 5px; }
.cmp-ref-points ul { margin: 3px 0 0; padding-left: 20px; }
.cmp-ref-points li { margin-bottom: 2px; }
.cmp-def-k { display: inline-block; font-size: 11px; color: var(--text-mute, #888); margin-right: 6px; font-weight: 600; }

/* 判定结论 */
.cmp-verdict { font-size: 12.5px; padding: 5px 9px; border-radius: 5px; margin: 5px 0; line-height: 1.6; }
.cmp-verdict.bad { background: rgba(192, 57, 43, .09); color: #a5271b; font-weight: 600; }
.cmp-verdict.ok { background: rgba(30, 140, 80, .08); color: #1d6b42; }
.cmp-verdict.manual { background: rgba(184, 134, 11, .09); color: #8a6500; }

/* 命中位置 */
.cmp-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 5px; }
.cmp-hit-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.cmp-hit-word { font-weight: 700; color: #a5271b; background: rgba(192, 57, 43, .09); padding: 0 6px; border-radius: 4px; flex: none; }
.cmp-hit-count { color: var(--text-mute, #888); flex: none; font-size: 11.5px; padding-top: 1px; }
.cmp-hit-locs { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cmp-loc { color: var(--text-dim, #555); line-height: 1.5; }
.cmp-loc b { color: #a5271b; font-weight: 600; margin-right: 4px; }
.cmp-loc-more { color: var(--text-mute, #999); font-size: 11px; }

.cmp-ref-note { font-size: 11.5px; color: #8a6500; background: rgba(184, 134, 11, .08); padding: 5px 8px; border-radius: 5px; margin-top: 5px; line-height: 1.6; }

.cmp-empty {
  border: 1px dashed var(--line, #ddd); border-radius: 8px; padding: 30px 20px;
  text-align: center; color: var(--text-dim, #666); font-size: 13px; line-height: 1.9;
}

/* 剧名比对命中明细 */
.cmp-title-matches { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cmp-title-match {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; background: #f4f7fd;
  border: 1px solid #dde6f6; font-size: 12.5px;
}
.cmp-tm-title { font-weight: 600; color: #22314f; }
.cmp-tm-sim { font-size: 11.5px; padding: 1px 6px; border-radius: 9px; background: #e2eafb; color: #2a5490; font-weight: 600; }
.cmp-tm-src { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: #eef0f4; color: #667; }
.cmp-tm-why { font-size: 11.5px; color: #556; }

/* 风格中心：未启用徽标（《风格中心》表 是否启用=0 的条目，可看不可应用） */
.sc-off-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: #8a8f9d; color: #fff;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  opacity: .92;
}
.style-card:has(.sc-off-badge) .style-thumb { filter: saturate(.55) opacity(.88); }

/* 详情弹窗：有真图时隐藏占位层（仅 onerror 加 no-cover 后露出），避免占位文字盖在封面上 */
.style-cover-preview:not(.no-cover) .st-ph { display: none; }

/* =========================================================================
   品牌外观 → 界面外观（真实生效项：密度 / 圆角 / 字号）
   通过 html[data-density] / html[data-radius] / html[data-fontscale]
   属性选择器覆盖，Branding.apply() 启动与保存时落到 <html> 上。
   ========================================================================= */
/* 圆角风格：方正 */
html[data-radius="square"] { --radius: 4px; }
/* 字号：大号（整体等比放大，真实生效） */
html[data-fontscale="large"] { zoom: 1.12; }
/* 界面密度：紧凑（压缩卡片与列表内边距、行距） */
html[data-density="compact"] .card { padding: 12px 14px; }
html[data-density="compact"] .field { margin-bottom: 10px; }
html[data-density="compact"] .side-item { padding: 7px 10px; }
html[data-density="compact"] table td, html[data-density="compact"] table th { padding: 6px 8px; }

/* 榜单·题材热度分析条 */
.bd-tagrow { display: grid; grid-template-columns: 90px 1fr minmax(220px, auto); gap: 10px; align-items: center; padding: 5px 0; }
.bd-tagname { font-size: 12.5px; font-weight: 600; }
.bd-bar { height: 10px; background: var(--bg-soft, #f2f3f7); border-radius: 6px; overflow: hidden; }
.bd-bar-fill { height: 100%; background: var(--brand); border-radius: 6px; }
.bd-nums { font-size: 11.5px; color: var(--text-dim); }

/* 榜单·题材趋势（时间轴）：迷你走势条 */
.bd-spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.bd-spark-bar { width: 8px; background: var(--brand); border-radius: 2px; opacity: .8; display: inline-block; }
.bd-spark-off { width: 8px; height: 2px; background: var(--border, #e3e6ec); display: inline-block; border-radius: 1px; align-self: flex-end; }
.bd-links { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bd-link { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }

/* 题材趋势表：6 列不等宽（依据列要占大头，否则证据链被挤成竖条没法读） */
.bd-trend-table .kb4-tr { grid-template-columns: 72px 84px 78px 92px 150px minmax(0, 1fr); grid-auto-flow: unset; }
.bd-trend-table .kb4-tr > div { white-space: normal; overflow-wrap: break-word; }
.bd-trend-table .bd-spark { justify-content: flex-start; }

/* 品牌外观：全局字体（真实生效） */
html[data-uifont="serif"] body { font-family: "Songti SC", "Noto Serif SC", "SimSun", serif; }
html[data-uifont="round"] body { font-family: "Yuanti SC", "HYQiHei", "Microsoft YaHei", sans-serif; }
html[data-uifont="mono"] body { font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; }

/* 响应规则页：卡片并列紧凑布局 */
/* 规则页：三块等宽（原先 repeat(2)，三块要塞进两列 → 第三块被挤到下一行且宽度不均） */
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
.rules-grid .card.static { margin-bottom: 0; }
.rules-grid .card .field { margin-bottom: 0; }
.rules-grid .card textarea { min-height: 64px !important; }
/* —— 表格放进多列网格时必须解除「内容撑宽」：
 *    .kb4-tr 里的单元格一旦有 min-width:200px 之类硬宽度，
 *    在多列网格里会把卡片撑破（实测规则页卡片被压到 534px、表格内部 1920px 狂滚）。
 *    列宽交给 grid 的 minmax(0,1fr)，单元格只负责换行。 */
.rules-grid .kb4-tr { grid-auto-columns: minmax(0, 1fr); }
.rules-grid .kb4-tr > div { min-width: 0 !important; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1320px) { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .rules-grid { grid-template-columns: 1fr; } }

/* 用户与权限页的员工表：7 列均分在窄屏会把「操作」列挤出卡片
 * （实测 1024px 时「删除」按钮超出右边界 26px）。
 * 固定列给确定宽度，剩余列 1fr，「最近登录」窄屏时隐藏（信息可从行内悬浮看到）。 */
.kb4-table.u-tbl .kb4-tr { grid-template-columns: 90px 100px minmax(90px, 1fr) 90px 64px minmax(0, 1fr) auto; grid-auto-flow: unset; }
@media (max-width: 1180px) {
  .kb4-table.u-tbl .kb4-tr { grid-template-columns: 84px 92px minmax(70px, 1fr) 78px 56px auto; }
  .kb4-table.u-tbl .kb4-tr > div:nth-child(6) { display: none; }
}

/* 层级修复：风格中心(#style-mask)内打开的详情/帮助等通用弹窗(#modal-mask)必须盖在风格中心之上
   （此前两者同为 z-index:300，#style-mask 在 DOM 中靠后，详情被风格中心遮住） */
/* 层级链（低→高）：页面 < 风格中心(700) < 通用弹窗(800)。
   两个方向都要成立：① 风格中心内打开的详情/帮助要盖住风格中心；
   ② 新建项目弹窗(#modal-mask)内点「选择风格」打开的风格中心要盖住新建弹窗
     —— 此前 style=300 < modal=600，风格中心被新建弹窗整个压住，
     表现为「选风格界面被下一层遮住、双击才露出来、上传剧本页还关了」。 */
#modal-mask { z-index: 800; }
#style-mask { z-index: 700; }

/* ============ 资产库：参考版式资产卡（方图 + 名称 + 类别徽章） ============ */
.al-card { background: var(--card, #fff); border: 1.5px solid var(--line, #e8e9ee); border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.al-card:hover { box-shadow: 0 4px 14px rgba(20,22,40,.10); }
.al-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, rgba(108,92,231,.12)); }
.al-cover { position: relative; aspect-ratio: 1 / 1; background: #eef0f5; }
.al-cover img { width: 100%; height: 100%; object-fit: cover; display: block; content-visibility: auto; }
.al-cover-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; color: #6b6f7c; font-size: 14px; font-weight: 700; word-break: break-all; line-height: 1.3; }
.al-badge { position: absolute; left: 8px; bottom: 8px; background: var(--brand, #6c5ce7); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
/* 「看大图」：缩略图只有 168px、右侧面板最高 200px，判断画质时都看不清。
   平时淡出（不抢注意力），鼠标移到卡片上才显形；触屏没有 hover，所以给个常驻的半透明底。 */
.al-zoom { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(20, 22, 30, .55); color: #fff; font-size: 13px; line-height: 26px; cursor: pointer;
  opacity: 0; transition: opacity .15s; }
.al-card:hover .al-zoom, .al-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .al-zoom { opacity: .85; } }
.al-meta { padding: 9px 11px 11px; }
.al-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-sub { font-size: 11.5px; color: var(--text-mute, #8b8e98); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   知识库 · 合规规范库（LIB-G）+ 选题指南（LIB-H）  2026-10 新增
   --------------------------------------------------------------------------
   合规库是「一票否决红线」，选题指南是「方向性经验」，
   两者都用分组卡片呈现，但配色语义不同：合规用红/黄（等级），
   选题指南用绿/红/蓝（加分/避雷/校验）。
   ========================================================================== */
.kb4-cgroup { margin-bottom: 18px; }
.kb4-cgroup-h {
  font-size: 13px; font-weight: 700; color: var(--text, #1f2330);
  padding: 6px 0 8px; border-bottom: 1px solid var(--line, #e6e9f2);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.kb4-cgroup-h .chip-tag { font-weight: 500; }
.kb4-citem {
  border: 1px solid var(--line, #e6e9f2); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 9px; background: #fff;
}
.kb4-chead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.kb4-chead b { font-weight: 700; }
.kb4-cacts-inline { margin-left: auto; display: flex; gap: 5px; }
.kb4-cdef { font-size: 12px; color: var(--text-mute, #6b6f7c); margin-top: 7px; line-height: 1.65; }
.kb4-cpts { margin: 7px 0 0; padding-left: 19px; font-size: 12px; line-height: 1.75; color: var(--text, #1f2330); }
.kb4-cpts li { margin-bottom: 2px; }

.kb4-grid-tg { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.kb4-tgcard { display: flex; flex-direction: column; }
.kb4-tgdetail { font-size: 12px; line-height: 1.7; color: var(--text, #1f2330); margin-top: 4px; }
.kb4-tgtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kb4-tgtags .chip-tag { font-size: 11px; }

/* 月度题材分布看板（board · monthly） */
.bd-mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bd-mtable th, .bd-mtable td { border: 1px solid var(--line, #e6e9f2); padding: 8px 10px; text-align: center; }
.bd-mtable th { background: #f8f9fc; font-weight: 700; color: var(--text-mute, #6b6f7c); white-space: nowrap; }
.bd-mtable td:first-child { text-align: left; font-weight: 600; }
.bd-mpct { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--text-mute, #8b8e98); }
.bd-mdash { color: #c8ccd6; }
.bd-mdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

/* 顶栏 chips：静止不动画（用户反馈「选择风格一直在动」），身份显示在右上角 */
.chip, .chip * { animation: none !important; }
.whoami-corner { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }

/* ============ 巡检修复（2026-10-17 第二轮界面挑刺） ============ */
/* 1) Toast 改右下：不再压住页面 H1 标题 */
.toast { top: auto !important; bottom: 26px; left: auto !important; right: 26px; transform: translate(0, -8px); }
.toast.show { transform: translate(0, 0); }

/* 2) 表格兜底横向滚动：操作列再也不会被裁掉（用户与权限页）
 *
 * ⚠ 这里曾经写成 `.kb4-tr { min-width: max-content; }`，是本轮界面错位的根因：
 *   表格外层有 overflow-x:auto（能滚），但行被强行撑成「内容有多宽就多宽」，
 *   于是 .kb4-tr 跑出可视区（榜单页实测右边界到 2353px，视口才 1440px），
 *   列头与数据行一起飘到卡片外面，看起来就是「排版散了」。
 *   min-width:max-content 只对「整表不换行、让外层滚」有意义，
 *   但本表用的是 grid 1fr 列，本来就该跟着容器收缩。
 *   正确做法：行宽跟容器，不给 min-width；窄屏需要保底时按表格的列定义单独给，
 *   不要在这里全局兜（那会把所有用 .kb4-tr 的表一起推出去）。
 */
.kb4-table { overflow-x: auto; }
.kb4-tr { min-width: 0; }

/* 3) 榜单趋势 chip 行：flex 换行 + 行间距，不再叠压下一行文字 */
.bd-trend-chips, .len-hint .chip-tag { line-height: 2; }
.len-hint { overflow-wrap: anywhere; }
.chip-tag { display: inline-block; margin: 0 4px 4px 0; line-height: 1.9; vertical-align: middle; }

/* 4) 项目卡字段值：可换行 + 悬浮看全，不再截断成「内容组…」 */
.proj-field .pf-v { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }

/* 5) 侧栏底注不折孤字 */
.side-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

/* 6) 移动端基础适配：窄屏侧栏收窄、卡片单列、表格可横滑 */
@media (max-width: 1180px) {
  .sidebar { width: 118px; padding: 10px 6px; }
  .side-item { padding: 8px 6px; font-size: 12.5px; }
  .al-wrap, .rules-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  .sidebar { width: 84px; padding: 8px 4px; }
  .side-item { padding: 7px 4px; font-size: 11.5px; letter-spacing: -0.02em; }
  .side-group { font-size: 10px; padding: 8px 4px 4px; }
  /*
   * ⚠ 这里原本写的是 `.app { min-width: 720px; }`，注释是「极窄屏：内容区横向滚动，
   *   绝不让控件被裁」。那个想法是反的：
   *     · 720px 是**桌面**断点（1100px 那档）的内容宽度，把它当最小宽度，
   *       等于在手机上强行撑出一张 720px 的桌面画布；
   *     · 而这一档的上界是 820px —— 手机竖屏（390/414/430）全落进来，
   *       于是每个页面都横向溢出到 720px，用户要把整页左右拖才能看全一行字；
   *     · 「不被裁」也没做到：溢出容器里的卡片、表格反而是被**裁在视口外**，
   *       要横向滚动才能看到，跟被裁没区别，只是伪装成了"可以滚"。
   *
   *   正确做法是让布局在窄屏真正收缩（下面那组规则），而不是给容器设一个
   *   比视口还宽的硬底。实测：390px 下此前 5 个页面全部 720/390 溢出。
   */
  .app { min-width: 0; }
  .workarea { padding: 12px 10px 72px; }
  /* 卡片与表格在窄屏一律单列 / 可横向滚动，不再靠"整页横滚"兜底 */
  .proj-grid { grid-template-columns: 1fr !important; }
  .proj-card { flex-direction: column; }
  .rules-grid, .al-wrap, .cmp-cap-grid, .sc-grid { grid-template-columns: 1fr !important; }
  /* 表格类：容器自己滚，别把整页顶宽（.kb4-table 已在 1913 行设了 overflow-x:auto） */
  .kb4-table { max-width: 100%; }
  /* 长串（URL / 密钥 / 提示词）必须能断行，否则一个长 token 就能把页面撑宽 */
  .page-h1, .page-sub, .notice-info, .pf-v, .kb4-tr > div, .mono, code, pre { overflow-wrap: anywhere; }
}

/* =========================================================================
 * 移动端抽屉导航（≤860px）
 * 背景：旧实现直接 .sidebar{display:none}，手机上整个菜单消失，
 * 用户只剩「剧本创作/新建项目」，无法到达其他任何页面。
 * 方案：侧栏变固定抽屉，顶部 ☰ 按钮唤出，点遮罩或选中菜单项后收起。
 * 本块必须位于文件最末 —— 需要覆盖前面 1180px/820px 档对 .sidebar 的
 * 宽度与字号设置（同为单类选择器，后者按源序获胜）。
 * ========================================================================= */

.menu-btn {
  display: none;                 /* 桌面端不显示 */
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text-1, #333);
  font-size: 17px; line-height: 1; cursor: pointer;
  flex-shrink: 0; padding: 0;
}
.menu-btn:active { background: var(--bg); }

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }   /* 手机端显示 ☰；桌面端保持上方 display:none */
}

.nav-mask {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,18,26,0.45);
  z-index: 55;
}
.nav-mask.show { display: block; }

@media (max-width: 860px) {
  .sidebar {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;                /* 抽屉态恢复舒适宽度与字号，覆盖 1180/820 档的收窄 */
    padding: 12px 10px;
    z-index: 60;
    transform: translateX(-105%);
    transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
    box-shadow: 6px 0 24px rgba(0,0,0,0.18);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .side-item { padding: 10px 10px; font-size: 13.5px; letter-spacing: 0; }
  .sidebar .side-group { font-size: 10.5px; padding: 12px 10px 6px; }
  .content { width: 100%; }
  /* 抽屉打开时锁定背景滚动（body 级） */
  body.nav-open { overflow: hidden; }
}

/* 审核待处理角标（侧栏「知识库」项）：有 pending 条目时显示红色数字 */
/* 审核待处理角标：绝对定位，不进入文本流。
 * ⚠ 早期写成 inline-block 会污染 el.textContent —— 品牌设置「自定义菜单名」
 *   读的正是 textContent，于是菜单名变成「知识库0」，改名功能连带失效。
 *   现在双保险：① 文案单独包进 .side-label，改名只读它；② 角标绝对定位脱离文字流。
 *   绝对定位后它仍是子节点（改名重建时会一并保留），但不影响文字内容。 */
.side-item { position: relative; }
.side-label { display: inline; }
.kb-badge {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center;
  pointer-events: none;
}