:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --line: #e6e8ec;
  --text: #1c1f23;
  --muted: #7a828e;
  --brand: #2b6cf6;
  --brand-soft: #eef4ff;
  --ok: #12a150;
  --warn: #d98200;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

/* ⚠️ 必须给 #root 高度：html/body 是 100%，但 #root 是中间的容器。
   少了这一条，.app{height:100%} 就失效（百分比高度需要父级有确定高度）——
   症状有两个：① 侧栏白条撑不到底部、② .view 没被限高，内容一多就被 body 的 overflow:hidden 裁掉，
   表现为"右侧不能上下滚动"（2026-09-20 阿和反馈）。 */
#root { height: 100%; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;      /* 整页不滚：滚动只发生在右侧内容区 —— 左侧白条永远铺满、不动 */
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

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

/* ---------- 侧边栏 ---------- */
.side {
  width: 236px;
  flex: 0 0 236px;
  height: 100%;               /* 白底铺满整条左边：右侧滚到哪都不露底色 */
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

.brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px 20px; }
.brand-logo { height: 25px; width: auto; display: block; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.35; }
.brand-txt strong { font-size: 13.5px; font-weight: 600; letter-spacing: .3px; }
.brand-txt span { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; color: var(--text);
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; text-align: left; font-family: inherit;
}
.nav-item:hover { background: #f2f4f7; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* 分组分隔：低频的「人设」沉到下面（只留一条细线，不放文字） */
.nav-split {
  margin: 14px 10px 6px; padding-top: 12px; border-top: 1px solid var(--line);
}

.side-foot { margin-top: auto; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.health { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.health .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }
.health.bad { color: #d64545; }
.health.bad .dot { background: #d64545; }

/* 工信部备案号：法定信息，常驻页脚；小字浅色，按品牌语气不抢注意力 */
.beian {
  display: inline-block; margin-top: 12px;
  font-size: 11px; color: #aab1bb; text-decoration: none; letter-spacing: .2px;
}
.beian:hover { color: var(--muted); }

/* 全站提示文字的唯一格式：比正文小、比正文浅、不加符号 */
.hint { font-size: 12px; color: #98a0ab; line-height: 1.7; }

/* ---------- 主区 ---------- */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 30px 0;
}
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: .2px; }
.desc { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.topbar-right { min-height: 24px; }

/* min-height:0 是关键：flex 子项默认 min-height:auto，内容一长就把容器撑破、整页跟着滚 ——
   那正是"右侧滚动、左侧导航跟着动"的原因（阿和 2026-09-20 反馈）。 */
.view { flex: 1; min-height: 0; overflow: auto; padding: 18px 30px 40px; }

/* ---------- 通用块 ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 12px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.card h2 .tag { font-weight: 400; font-size: 11.5px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .n { font-size: 26px; font-weight: 700; line-height: 1.2; }
.stat .l { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat .s { color: #a8afb9; font-size: 11.5px; margin-top: 6px; }

/* 页内分栏（创作：出选题 / 写文案） */
/* 空间不够时让筛选条换行（而不是把字挤成竖排）——搜索框会自己掉到下一行右对齐 */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs .tab { white-space: nowrap; }
.tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
}
.tab:hover { background: #fafbfc; }
.tab.active { background: var(--brand-soft); border-color: #cfe0ff; color: var(--brand); font-weight: 600; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; align-items: start; }
.kv dt { color: var(--muted); font-size: 12.5px; padding-top: 7px; }
.kv dd { margin: 0; }

label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }

input[type="text"], input[type="number"], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text);
  background: #fff; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { resize: vertical; min-height: 68px; line-height: 1.65; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 130px; }
.row > .shrink { flex: 0 0 auto; min-width: 0; }

/* 行内控件底对齐（否则按钮会和输入框错位）
   ① label.field 自带 12px 下边距，底对齐时会把输入框整体顶上去，而按钮没有这层边距
      → 按钮看起来"塌"在输入框下面。行内一律归零。
   ② 按钮上下 padding 是 9px、输入框是 8px，底对齐后按钮顶部会多出 2px。行内统一成 8px。 */
.row label.field { margin-bottom: 0; }
.row > .btn { padding-top: 8px; padding-bottom: 8px; }

.btn {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  padding: 9px 16px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13.5px;
  white-space: nowrap;
}
.btn:hover { border-color: #cfd5de; background: #fafbfc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #1f5fe0; }
/* quiet = 次要动作（删掉这种），平时不抢眼 */
.btn.quiet { color: var(--muted); }
.btn.quiet:hover { color: var(--text); }
/* danger = 不可逆动作，只有「彻底删除」用它 */
.btn.danger { color: #d64545; border-color: #f0c9c9; }
.btn.danger:hover { background: #fdf3f3; border-color: #e5a9a9; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; background: #f1f3f6; color: var(--muted);
}
.pill.ok { background: #e8f8ef; color: var(--ok); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.warn { background: #fdf3e3; color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 定宽表：长标题不再挤压右侧列，超出用省略号（原文放 title 提示） */
table.fixed { table-layout: fixed; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 12px; }
th:last-child, td:last-child { padding-right: 12px; }
th { color: var(--muted); font-weight: 500; font-size: 12px; background: #fafbfc; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td .sub { color: var(--muted); font-size: 12px; }
td.nowrap { white-space: nowrap; overflow: hidden; }   /* 固定表格里长文本溢出会压到隔壁列，直接裁掉 */
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td .strong { font-weight: 600; }

/* 回收站里的行：整体压暗，跟正常内容一眼分开 */
tbody tr.trash td { color: var(--muted); }
tbody tr.trash .strong { font-weight: 400; }

.empty { color: var(--muted); font-size: 13px; padding: 26px 0; text-align: center; }

.pre {
  white-space: pre-wrap; word-break: break-word;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 13px; line-height: 1.75; max-height: 460px; overflow: auto;
}

/* 编辑判断：像编辑写在稿子边上的批注（2026-09-24「贴身编辑」）
   故意做得比正文轻 —— 它是判断，不是内容，不跟稿子抢注意力。 */
.enote {
  white-space: pre-wrap; word-break: break-word;
  background: #fafbfc; border-left: 2px solid var(--brand, #2b6cf6);
  border-radius: 0 10px 10px 0; padding: 12px 15px;
  font-size: 13px; line-height: 1.9; color: var(--text, #1a1f29);
}

.anchor { color: var(--brand); text-decoration: none; font-size: 12.5px; }
.anchor:hover { text-decoration: underline; }
/* 次要链接（归档这种不常点的）：别跟主操作抢眼 */
.anchor.quiet { color: var(--muted); margin-left: 10px; }
.anchor.quiet:hover { color: var(--text); }
/* 危险链接（彻底删除） */
.anchor.danger { color: #d64545; margin-left: 10px; }
.anchor.danger:hover { color: #b93a3a; }

/* 详情里的次级分组（主体内容 vs 创作辅助信息）：靠一条细线 + 小标题分层，不用提示语 */
.group { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.group > .gt { font-size: 12px; color: #98a0ab; letter-spacing: .4px; margin-bottom: 10px; }

/* 分段切换（作品详情的 稿件 / 复盘）：整块底色 + 白底选中块，比一排胶囊明显 */
.seg { display: inline-flex; background: #f1f3f6; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  padding: 6px 18px; border-radius: 8px; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }

/* ── 内容区头部规范（全站统一，阿和 2026-09-16 定；以后开发沿用） ─────────────
   一行工具条 `.toolbar`，左右布局，**不再上下堆叠两组控件**：
     左 = 视图分段器 `.seg.seg-view`：换内容集（作品/已归档、灵感库/回收站）。
          白底卡片 + 品牌色实底选中 —— 做得醒目，入口必须一眼找到。
     右 = 下划线筛选 `.tabs.flat`：同一集合内过滤（全部/初稿/已发布、平台/类型）。
          轻量文字 + 选中下划线 —— 与左边形态不同，一眼分出层级。
   卡片里不再另写标题（数量都在控件上）。 */
.toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .tabs { margin: 0; }
.toolbar .tabs.flat { padding-bottom: 1px; }

.seg.seg-view { display: inline-flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 4px; }
.seg.seg-view button { padding: 7px 20px; font-size: 13.5px; }
.seg.seg-view button.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: none; }

/* 二级筛选：整行下划线 tab（放在工具条里时下划线只包住自己） */
.tabs.flat { gap: 20px; border-bottom: 1px solid var(--line); }
.tabs.flat .tab {
  border: 0; background: transparent; border-radius: 0; padding: 8px 0 10px;
  color: var(--muted); font-size: 13px;
}
.tabs.flat .tab:hover { background: transparent; color: var(--text); }
.tabs.flat .tab.active {
  color: var(--text); font-weight: 600; background: transparent; border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.tabs.flat .tab.dim { opacity: .45; }
/* 同一行里分组（平台 / 类型）之间的一条细竖线 */
.tdiv { width: 1px; height: 14px; background: var(--line); margin: 0 2px; align-self: center; }

/* 详情里的"发布附件"（话题标签 / 封面文案）：能直接复制的样子 */
.attach { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; align-items: start; margin-top: 12px; }
.attach dt { color: var(--muted); font-size: 12.5px; padding-top: 8px; }
.attach dd { margin: 0; }
.copyline {
  background: #fafbfc; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font-size: 13px; line-height: 1.7; word-break: break-word;
  user-select: all;   /* 一点就全选，方便直接复制去发布 */
}

/* 复盘回填：分项小输入框（比一行文本正式；都不是必填，填几个算几个） */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.metric { display: block; }
.metric span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.metric input { padding: 7px 10px; font-size: 13px; }

.toast { font-size: 12.5px; color: var(--muted); }
.toast.ok { color: var(--ok); }
.toast.err { color: #d64545; }

.spinner {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid #cfd5de; border-top-color: var(--brand); border-radius: 50%;
  animation: spin .7s linear infinite; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }

/* 灵感库筛选条（平台 / 内容类型） */
.filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.filters .fl { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
}
.chip:hover { background: #fafbfc; }
.chip.active { background: var(--brand-soft); border-color: #cfe0ff; color: var(--brand); font-weight: 600; }
.chip.zero { opacity: .45; }

/* 卡片底部操作条 */
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.bar .spacer { flex: 1; }

/* 表格里的行内下拉（作品列表直接改状态，不用点进详情） */
select.mini {
  width: auto; min-width: 80px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px;
}

/* 表格里的按钮：比卡片里的按钮小一号，免得列被撑破 */
.btn.sm { padding: 6px 11px; font-size: 12.5px; }

/* 表格里的勾选框（全局 input 宽度规则不含 checkbox，这里单列） */
input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* 刚生成的选题高亮 */
tbody tr.fresh { background: #f4f8ff; }

/* ⚠️ 手机端适配统一写在 cloud.css 末尾（它后加载，能压过这里的桌面规则）。
   原来这里有一段 `@media (max-width:780px)`，把侧栏缩成 62px 小条 —— 已废弃：
   `.nav-item span { display:none }` 根本没生效（导航项文字没有 span 包裹），
   结果是文字全挤在 62px 里。2026-09-29 改成底部导航栏，见 cloud.css。
   新加移动端规则时请加到那边，别在这里加（两处会打架）。 */


/* ══════════ 2026-09-20 新增 ══════════ */

/* 灵感库搜索框（在筛选条最右） */
/* ⚠️ 必须写成 .tabs .insp-search：全局 input[type="text"]{width:100%} 的特异性更高，
   只写 .insp-search 会被它撑满整行（2026-09-20 截图里看到的） */
.tabs .insp-search {
  margin-left: auto; flex: 0 0 auto; width: 168px; padding: 6px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; color: var(--text); background: #fff;
}
.tabs .insp-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* 从灵感带过来的爆款逻辑（创作页）—— 显眼一点，让客户知道这条确实用上了 */
.frominsp { margin: 10px 0 4px; padding: 10px 12px; background: var(--brand-soft); border-radius: 9px; }
.frominsp-t { font-size: 12px; color: var(--brand); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.frominsp-b { font-size: 12.5px; color: var(--text); line-height: 1.7; }

/* 首登引导弹层（取名字 → 建人设卡） */
.ovl {
  position: fixed; inset: 0; z-index: 60; padding: 20px;
  background: rgba(16, 24, 40, .38);
  display: flex; align-items: center; justify-content: center;
}
.ovl-card {
  width: 460px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .22);
}
.ovl-card h2 { margin: 0 0 4px; font-size: 16px; }
.wl-step { padding: 12px 0; border-top: 1px solid var(--line); }
.wl-step.first { border-top: 0; padding-top: 4px; }
.wl-t { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }

/* 顶部「还没建人设卡」引导条 */
.cardbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 30px 0; padding: 9px 14px;
  background: #fdf7e8; border: 1px solid #f2e2bd; border-radius: 10px;
  font-size: 12.5px; color: #7a5a12;
}
.cardbar .btnlink { color: var(--brand); }
.cardbar .btnlink.quiet { color: var(--muted); margin-left: auto; }

/* 「已派稿」这类淡标：跟 .pill 同形，但更轻 */
.pill.ghost { background: #f1f3f6; color: var(--muted); font-weight: 400; }

@media (max-width: 780px) {
  .cardbar { margin-left: 16px; margin-right: 16px; }
  .insp-search { width: 130px; }
}