/*
 * design-parity.css — 与设计稿对齐的布局骨架层
 * ────────────────────────────────────────────────────────────────
 * 定位：这是全站唯一有权决定「内容列宽 / 栏比例 / 面片圆角 / 页头语法」的地方。
 *       以后加新页面、新模块，先读本文件，直接引用这里的 --pd-* 令牌。
 *
 * 为什么需要这一层，而不是去改 atelier.css / workbench-v2.css：
 *   那两套文件里同一个选择器被 !important 覆盖过 3~5 轮，
 *   再往里面加规则只会让后人分不清哪条生效。这里另起一层，
 *   用 #id 级权重一次性定死，并保持每条规则都可以被「后加载」覆盖。
 *
 * 设计稿口径（1440 画布，1:1 不缩放）：
 *   侧栏 232~248px，圆角 20px
 *   内容列 1120px，左右 22px 内边距
 *   页头：面包屑 11px → 标题 26px 宋体 → 副标题 12.5px
 *   面片：圆角 16px，头部内边距 13px 16px，发丝线 rgba(15,45,32,.05)
 *   两栏比例：主区 1fr + 副区 396px，间距 14px
 * ────────────────────────────────────────────────────────────────
 */

/* =========================================================
   00 令牌 —— 取自设计稿
   ========================================================= */
body.atelier {
  /* 墨阶：设计稿比线上更冷更沉，正文对比度更高 */
  --ink-1: #0E1512;
  --ink-2: #33403A;
  --ink-3: #57655F;
  --ink-4: #7C8B85;

  /* 发丝线：设计稿用墨绿透明白，不用纯黑透明，边界才不脏 */
  --hairline: rgba(15, 45, 32, .085);
  --hairline-soft: rgba(15, 45, 32, .05);
  --pd-hair: rgba(15, 45, 32, .085);
  --pd-hair-2: rgba(15, 45, 32, .05);

  /* 品牌绿：设计稿的森林绿，比线上的 #3E8D6B 深，字号小时更清楚 */
  --g-500: #1B7A58;
  --g-600: #14684A;
  --g-700: #0F5132;
  --g-900: #0A3B26;
  --g-300: #A6DCC1;
  --g-200: #C9E9DA;
  --g-100: #E2F3EA;
  --g-50: #F3FAF6;

  /* 尺寸令牌 */
  /* 内容列不写死 1120px，也不无限拉伸。
     1120 是「1440 画布 - 276 侧栏 - 44 内边距」算出来的结果，
     不是设计常数 —— 上一版写死它，在 2560 窗口里只占 44%，
     整页像被缩小了。
     但反过来放开成 100% 同样不行：2560 下会拉成 2240，
     一行字跑 90+ 字宽，面板空得像没人用。
     真实做法是「撑到参考版面宽就停」——1680 是 1.5 倍 1120，
     对应 1920~2560 这一档最舒服的阅读宽度，再多就是留白。
     宽度停住之后，字号由 §15 同步抬一档，比例才对得上。 */
  --pd-col: min(100%, 1680px);
  --pd-col-data: min(100%, 1680px);  /* 书架 / 超市这类数据页同宽 */
  --pd-pad: 22px;         /* 内容列左右内边距 */
  --pd-r-panel: 16px;     /* 面片圆角 */
  --pd-r-card: 12px;
  --pd-r-chip: 999px;
  --pd-gap: 14px;
  /* 副区按比例走，不按绝对像素。稿子 396 / 724 = 35%，
     在 1440 下算出来正好 396，在宽屏下也不会缩成一条缝。 */
  --pd-rail: clamp(340px, 34%, 760px);
}

/* =========================================================
   01 内容列对齐 —— 所有页面共用同一列
   ---------------------------------------------------------
   改之前每页的列宽都不一样：首页 946、工作台 1136、技能页 1120、
   书架 1049。切换 tab 时内容左右边界会跳，这是「不协调」最直接的来源。
   ========================================================= */
body.atelier .app-shell > :is(section, main) {
  padding-left: var(--pd-pad) !important;
  padding-right: var(--pd-pad) !important;
  box-sizing: border-box !important;
}

/* 工作台自己有 padding 规则（#workbench.workbench-page），权重更高，单独覆盖 */
body.atelier #workbench.workbench-page {
  padding: 14px var(--pd-pad) 0 !important;
}

/* 首页同理 */
body.atelier #home.home-page {
  padding: 20px var(--pd-pad) 0 !important;
}

/* 每页的内层容器都收进同一列宽，并水平居中 */
body.atelier #home .hv-body,
body.atelier #workbench .studio-heading,
body.atelier #workbench #workbench-stage-nav,
body.atelier #workbench .conversation-workbench-layout,
body.atelier #xiaohongshu .tool-heading,
body.atelier #xiaohongshu .skill-shell,
body.atelier #tie-tu .tool-heading,
body.atelier #tie-tu .skill-shell,
body.atelier #hit-detector .tool-heading,
body.atelier #hit-detector .skill-shell,
body.atelier #diagnose .diagnose-shell,
body.atelier #morning-generator .morning-shell,
body.atelier #library-main .library-main > *,
body.atelier #library-main #library-shelf {
  width: 100% !important;
  max-width: var(--pd-col-data) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 工作台原本用 14px 内边距，统一到 22px */
body.atelier #workbench .studio-heading,
body.atelier #workbench #workbench-stage-nav,
/* .pd-phline 是 design-parity.js 插进去的 STEP 说明行。
   它一度漏在这条规则外面，于是页头 / 阶段条 / 面板都在 578 起，
   只有它在 298 起、宽度还吃掉整条 2240 —— 宽屏下会看到
   一行字孤零零挂在内容列左边外面。 */
body.atelier #workbench .pd-phline,
body.atelier #workbench .conversation-workbench-layout {
  width: 100% !important;
  max-width: var(--pd-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   02 页头语法 —— 面包屑 / 26px 标题 / 12.5px 副标题
   ========================================================= */
body.atelier #home .hv-body,
body.atelier #workbench .studio-heading,
body.atelier #xiaohongshu .tool-heading,
body.atelier #tie-tu .tool-heading,
body.atelier #hit-detector .tool-heading {
  position: relative;
}

/* 面包屑：用 ::before 生成，零 DOM 侵入 */
body.atelier #workbench .studio-heading::before,
body.atelier #xiaohongshu .tool-heading::before,
body.atelier #tie-tu .tool-heading::before,
body.atelier #hit-detector .tool-heading::before,
body.atelier #home .hv-body::before {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-4);
  margin-bottom: 9px;
  font-weight: 400;
}
body.atelier #workbench .studio-heading::before { content: "内容创作  /  公众号创作"; }
body.atelier #xiaohongshu .tool-heading::before  { content: "内容创作  /  小红书"; }
body.atelier #tie-tu .tool-heading::before       { content: "内容创作  /  贴图号"; }
body.atelier #hit-detector .tool-heading::before { content: "分析  /  发布前复核"; }
body.atelier #home .hv-body::before              { content: "首页"; margin-bottom: 14px; grid-column: 1 / -1; }

/* 标题统一 26px 宋体，副标题 12.5px */
body.atelier #workbench .studio-heading h1,
body.atelier #xiaohongshu .tool-heading h1,
body.atelier #tie-tu .tool-heading h1,
body.atelier #hit-detector .tool-heading h1 {
  font-size: 26px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 6px !important;
}

body.atelier #workbench .studio-heading p,
body.atelier #xiaohongshu .tool-heading p,
body.atelier #tie-tu .tool-heading p,
body.atelier #hit-detector .tool-heading p {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--ink-3) !important;
  letter-spacing: -.004em !important;
  margin: 0 !important;
  max-width: 62ch;
}

/* 页头整体节奏：上 20px，下 14px */
body.atelier #workbench .studio-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 20px !important;
  align-items: end !important;
}

body.atelier #workbench .studio-heading::before {
  grid-column: 1 / -1;
}

body.atelier #workbench .studio-heading > div:first-of-type {
  grid-column: 1;
  min-width: 0;
}

/* 页头右侧：积分胶囊 + 新对话 */
body.atelier .pd-pageact {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px;
}

body.atelier .pd-pill {
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--g-700);
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 2px 6px -4px rgba(10, 40, 26, .3);
  white-space: nowrap;
}

body.atelier #new-workbench-chat.pd-ghost {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, .6) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px -4px rgba(10, 40, 26, .26) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 0 !important;
  white-space: nowrap;
}

body.atelier #workbench .studio-heading,
body.atelier #xiaohongshu .tool-heading,
body.atelier #tie-tu .tool-heading,
body.atelier #hit-detector .tool-heading {
  padding: 20px 0 0 !important;
  margin-bottom: 14px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  height: auto !important;
}

/* 旧的 eyebrow / kicker 已被面包屑取代 */
body.atelier #xiaohongshu .micro-label,
body.atelier #tie-tu .micro-label,
body.atelier #hit-detector .micro-label,
body.atelier #morning-generator .kicker {
  display: none !important;
}

/* =========================================================
   03 面片统一 —— 圆角 16 / 头部 13px / 发丝线
   ========================================================= */
body.atelier #workbench .conversation-panel,
body.atelier #workbench .article-canvas,
body.atelier #xiaohongshu .skill-form-col,
body.atelier #xiaohongshu .skill-output-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #tie-tu .skill-output-col,
body.atelier #hit-detector .skill-form-col,
body.atelier #hit-detector .skill-output-col,
body.atelier .hv-hero,
body.atelier .hv-card {
  border-radius: var(--pd-r-panel) !important;
}

/* =========================================================
   04 工作台 —— 两栏 1fr / 396，去掉第三栏
   ---------------------------------------------------------
   线上是三栏 220 / 428 / 460，三个数字互相都不成比例，
   助手区被挤到中间最窄的位置——这是最难看的地方。
   设计稿是两栏：助手 1fr + 产物 396。
   「本轮成果」（当前文章结构 + 版本记录）在设计稿里没有独立栏位，
   它的信息在产物栏的版本条和页脚里已经有了，这里隐藏但保留 DOM。
   ========================================================= */
body.atelier #workbench.workbench-page .conversation-workbench-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--pd-rail) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--pd-gap) !important;
  align-items: stretch !important;
  height: clamp(540px, calc(100dvh - 272px), 1040px) !important;
  min-height: 0 !important;
}

/* 定位必须用 ID 级权重：workbench-v2.css 里写的是
     body.atelier #workbench #creation-assistant { grid-column: 2 }
     body.atelier #workbench #workbench-result    { grid-column: 3 }
   两条都是 (2,1,1)，用类选择器（1,2,1）压不住 —— ID 数量优先于类数量。
   这里加 .workbench-page 提到 (2,2,1)，才真正生效。 */
body.atelier #workbench.workbench-page #studio-details {
  display: none !important;
}

body.atelier #workbench.workbench-page #creation-assistant {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  overflow: hidden !important;
}

body.atelier #workbench.workbench-page #workbench-result {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---------- 阶段条：设计稿是「圆点 + 文字 + 细线」，不是卡片 ---------- */
body.atelier #workbench #workbench-stage-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 0 14px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--pd-hair) !important;
  background: none !important;
  box-shadow: none !important;
}

body.atelier #workbench #workbench-stage-nav button {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: none !important;
  height: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--ink-4) !important;
}

/* 步骤之间的连接线 */
body.atelier #workbench #workbench-stage-nav button:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 1px;
  margin: 0 9px 0 16px;
  background: var(--pd-hair);
  flex: none;
}

body.atelier #workbench #workbench-stage-nav button > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  font-size: 12px !important;
  font-weight: inherit !important;
  text-overflow: clip !important;
}

/* 圆点里的序号（DOM 由 design-parity.js 拆出来） */
body.atelier #workbench #workbench-stage-nav .pd-step-d {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  font-style: normal;
  color: var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--pd-hair);
  flex: none;
  letter-spacing: 0;
}

body.atelier #workbench #workbench-stage-nav .pd-step-t {
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  letter-spacing: -.004em;
  white-space: nowrap;
}

/* 已完成的步骤 / 当前步骤 */
body.atelier #workbench #workbench-stage-nav button[data-done="1"] .pd-step-d {
  background: var(--g-200);
  box-shadow: none;
  color: var(--g-700);
}
body.atelier #workbench #workbench-stage-nav button[data-done="1"] .pd-step-t {
  color: var(--ink-3);
}
body.atelier #workbench #workbench-stage-nav button[aria-current="true"] .pd-step-d,
body.atelier #workbench #workbench-stage-nav button[data-current="1"] .pd-step-d {
  background: linear-gradient(158deg, #1B7A58, #0F5132);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
}
body.atelier #workbench #workbench-stage-nav button[aria-current="true"] .pd-step-t,
body.atelier #workbench #workbench-stage-nav button[data-current="1"] .pd-step-t {
  color: var(--g-700);
  font-weight: 600;
}

/* 设计稿阶段条不带副标签，隐藏 */
body.atelier #workbench #workbench-stage-nav button small {
  display: none !important;
}

/* ---------- STEP 说明行（由 JS 插入 .pd-phline） ---------- */
body.atelier #workbench .pd-phline {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0 0;
  margin-bottom: 14px;
}
body.atelier #workbench .pd-phline .pd-mk {
  width: 2px;
  height: 22px;
  border-radius: 2px;
  flex: none;
  background: linear-gradient(180deg, var(--g-300), var(--g-600));
}
body.atelier #workbench .pd-phline .pd-k {
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--g-600);
  letter-spacing: .09em;
  font-weight: 500;
}
body.atelier #workbench .pd-phline .pd-v {
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: -.004em;
  margin-top: 2px;
}
body.atelier #workbench .pd-phline .pd-v b {
  font-weight: 600;
  color: var(--ink-1);
}

/* ---------- 助手面板头 ---------- */
body.atelier #workbench .conversation-panel-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--pd-hair-2) !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

body.atelier #workbench .conversation-identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.atelier #workbench .assistant-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  color: var(--g-700) !important;
  background: rgba(201, 233, 218, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85) !important;
}

body.atelier #workbench .conversation-identity strong {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  color: var(--ink-1) !important;
  display: block !important;
  line-height: 1.3 !important;
}

body.atelier #workbench .conversation-identity small {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  letter-spacing: .005em !important;
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

body.atelier #workbench .conversation-panel-tools {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.atelier #workbench .work-status {
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .01em !important;
}

body.atelier #workbench .new-chat-button {
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
  background: rgba(255, 255, 255, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85) !important;
  border: 0 !important;
}

/* ---------- 对话区 ---------- */
body.atelier #workbench .chat-thread {
  padding: 22px 20px 8px !important;
  gap: 18px !important;
  border: 0 !important;
  background: none !important;
}

body.atelier #workbench .chat-thread {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body.atelier #workbench .chat-thread:has(article:nth-of-type(3)) {
  justify-content: flex-start !important;
}

body.atelier #workbench .chat-thread .chat-message.from-ai p {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--ink-2) !important;
  letter-spacing: -.003em !important;
  max-width: 52ch;
}

body.atelier #workbench .chat-message.from-ai > span {
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .02em !important;
  margin-bottom: 6px !important;
  display: block;
}

/* 「先告诉我你想写什么」卡片 → 设计稿是一段话 + 一排 chip，不是卡片 */
body.atelier #workbench .chat-action-card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.atelier #workbench .chat-action-card strong {
  font-family: var(--serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  color: var(--ink-1) !important;
  display: block;
  margin-bottom: 4px;
}
body.atelier #workbench .chat-action-card p {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--ink-2) !important;
  max-width: 52ch;
}

/* 方向 chip */
body.atelier #workbench .chat-choice-list,
body.atelier #workbench .workbench-stage-choices {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 13px !important;
  height: auto !important;
}
body.atelier #workbench .chat-choice-list button,
body.atelier #workbench .chat-choice-list .chip,
body.atelier #workbench .workbench-stage-choices button {
  height: 27px !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  border-radius: var(--pd-r-chip) !important;
  font-size: 11.5px !important;
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
  border: 0 !important;
}

/* ---------- 输入区 ---------- */
body.atelier #workbench .composer-shell {
  margin: 0 14px 14px !important;
  padding: 11px 12px 9px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 20px -14px rgba(10, 40, 26, .4) !important;
  border: 0 !important;
  backdrop-filter: none !important;
}
body.atelier #workbench .composer-shell:focus-within {
  box-shadow: inset 0 0 0 1px rgba(166, 220, 193, .95), 0 0 0 3px rgba(20, 104, 74, .08) !important;
}

body.atelier #workbench .composer-shell > label {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  letter-spacing: .02em !important;
  margin-bottom: 4px !important;
  display: block !important;
}

body.atelier #workbench #workbench-topic {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--ink-1) !important;
  min-height: 34px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.atelier #workbench .composer-actions {
  margin-top: 5px !important;
  gap: 7px !important;
  align-items: center !important;
}

body.atelier #workbench .composer-text-action {
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: var(--g-700) !important;
  background: rgba(201, 233, 218, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 233, 218, .9) !important;
  border: 0 !important;
}

body.atelier #workbench .composer-hint {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  letter-spacing: .02em !important;
}

body.atelier #workbench .composer-send {
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(158deg, #1F8560, #0D4A2E) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 3px 8px -3px rgba(15, 81, 50, .6) !important;
  border: 0 !important;
}

/* ---------- 产物栏头 ---------- */
body.atelier #workbench .workbench-stage-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 15px !important;
  border-bottom: 1px solid var(--pd-hair-2) !important;
  background: none !important;
  height: auto !important;
  margin: 0 !important;
}

body.atelier #workbench #workbench-stage-kicker {
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .09em !important;
  display: block !important;
  line-height: 1.2 !important;
}

body.atelier #workbench #workbench-stage-title {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  margin: 3px 0 0 !important;
  line-height: 1.2 !important;
  color: var(--ink-1) !important;
}

body.atelier #workbench #workbench-stage-next {
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(158deg, #1F8560, #0D4A2E) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -5px rgba(15, 81, 50, .6) !important;
  border: 0 !important;
  margin-left: auto !important;
}

/* 产物栏内部各块的内边距（因为面板本身 padding:0） */
body.atelier #workbench .article-canvas-head {
  padding: 15px 15px 12px !important;
  border-bottom: 1px solid var(--pd-hair-2) !important;
  margin: 0 !important;
  gap: 10px !important;
}
body.atelier #workbench #result-title {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
body.atelier #workbench #article-save-state,
body.atelier #workbench .article-canvas-head p {
  font-size: 11.5px !important;
  color: var(--ink-4) !important;
  line-height: 1.7 !important;
  margin: 4px 0 0 !important;
}
body.atelier #workbench .canvas-actions .icon-action {
  width: 26px !important;
  height: 26px !important;
  min-height: 0 !important;
  border-radius: 7px !important;
}
body.atelier #workbench .version-strip {
  padding: 8px 15px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pd-hair-2) !important;
  background: none !important;
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .01em !important;
}
body.atelier #workbench #studio-stage-output {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 !important;
}
body.atelier #workbench .workbench-stage-choices {
  padding: 0 15px 12px !important;
}
body.atelier #workbench .article-canvas-foot {
  padding: 10px 15px !important;
  margin: 0 !important;
  border-top: 1px solid var(--pd-hair-2) !important;
  background: none !important;
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ---------- 空态：设计稿是「图标 + 标题 + 说明 + 三条骨架」居中 ---------- */
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) #studio-stage-output {
  display: none !important;
}
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .article-canvas-head {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 26px 30px !important;
  border-bottom: 0 !important;
  /* workbench-v2.css 把 head 锁在 640，空态要让它铺满整栏，
     否则图标会偏在内侧不在栏心 */
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .article-canvas-head > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* notion-workspace.css:98 给了 flex:1，在 column 方向就是「吃掉整个高度」，
     结果内容全贴在 head 顶部，justify-content:center 形同失效。
     这里必须把它压回 content 高度，居中才有空间可用。 */
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* 图标 */
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) #result-title::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2314684A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) #result-title {
  font-size: 13.5px !important;
  letter-spacing: -.014em !important;
  text-align: center !important;
}
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) #article-save-state,
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .article-canvas-head > div:first-child > p {
  max-width: 216px;
  margin: 6px auto 0 !important;
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

/* 三条骨架 */
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .article-canvas-head > div:first-child::after {
  content: "";
  display: block;
  width: 170px;
  height: 30px;
  margin: 16px auto 0;
  background-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 100% 6px, 82% 6px, 58% 6px;
  background-position: center 0, center 12px, center 24px;
  background-repeat: no-repeat;
  border-radius: 3px;
  opacity: .055;
  background-color: transparent;
  /* 用 --ink-1 的实色做遮罩效果 */
  -webkit-mask-image: none;
}

body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .version-strip,
body.atelier #workbench #workbench-result:not(:has(#studio-stage-output > *)) .canvas-actions {
  display: none !important;
}

/* =========================================================
   05 技能页（小红书 / 贴图号 / 发布前复核）
   ---------------------------------------------------------
   线上是 384 / 720，中间 34px 空隙，左边表单被压得只剩 336 可用。
   收到 16px 间距，左栏 360，右栏吃满剩余。
   ========================================================= */
body.atelier #xiaohongshu .skill-shell,
body.atelier #tie-tu .skill-shell,
body.atelier #hit-detector .skill-shell {
  display: grid !important;
  grid-template-columns: clamp(340px, 27%, 460px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 0 !important;
  margin-top: 6px !important;
}

body.atelier #xiaohongshu .skill-form-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #hit-detector .skill-form-col {
  padding: 18px 16px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  min-height: 0 !important;
}

body.atelier #xiaohongshu .skill-output-col,
body.atelier #tie-tu .skill-output-col,
body.atelier #hit-detector .skill-output-col {
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  min-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 技能页空态：图标 + 标题 + 说明，居中 */
body.atelier .skill-empty {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 32px !important;
  gap: 8px !important;
  border: 0 !important;
  background: none !important;
}
body.atelier .skill-empty h2 {
  font-size: 14px !important;
  letter-spacing: -.014em !important;
  margin: 0 !important;
}
body.atelier .skill-empty p {
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  color: var(--ink-4) !important;
  max-width: 320px !important;
  margin: 0 !important;
}

/* 左栏表单控件统一 */
body.atelier .skill-form label {
  font-size: 10.5px !important;
  color: var(--ink-3) !important;
  letter-spacing: .01em !important;
  margin-bottom: 5px !important;
  display: block !important;
}
body.atelier .skill-form textarea,
body.atelier .skill-form input,
body.atelier .entry-form input {
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  border-radius: 9px !important;
  border: 1px solid rgba(15, 45, 32, .1) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}
body.atelier .skill-form textarea:focus,
body.atelier .skill-form input:focus {
  border-color: rgba(20, 104, 74, .45) !important;
  box-shadow: 0 0 0 3px rgba(20, 104, 74, .09) !important;
}
body.atelier .skill-form .primary-action,
body.atelier .skill-form .skill-primary,
body.atelier .entry-form .primary-action {
  height: 38px !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(158deg, #1F8560, #0D4A2E) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -5px rgba(15, 81, 50, .55) !important;
  border: 0 !important;
}
body.atelier .skill-form .secondary-action {
  height: 34px !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  color: var(--g-700) !important;
  background: rgba(201, 233, 218, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(166, 220, 193, .7) !important;
  border: 0 !important;
}

/* 「表单模式」折叠条 */
body.atelier .creator-form-mode summary {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  padding: 8px 0 !important;
  letter-spacing: .01em !important;
}

/* =========================================================
   06 诊断页
   ========================================================= */
body.atelier #diagnose .diagnose-shell {
  display: grid !important;
  grid-template-columns: clamp(380px, 28%, 500px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 20px 0 0 !important;
}

body.atelier #diagnose .v3-hero-l {
  padding: 22px 20px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
}
body.atelier #diagnose .v3-hero-l h1 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 8px !important;
}
body.atelier #diagnose .v3-hero-l .lede {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: var(--ink-3) !important;
  margin: 0 0 16px !important;
}
body.atelier #diagnose .v3-hero-r {
  padding: 0 !important;
}
body.atelier #diagnose .v3-hero-r .frame {
  border-radius: var(--pd-r-panel) !important;
}

/* =========================================================
   07 早安祝福
   ========================================================= */
body.atelier #morning-generator .morning-intro {
  padding: 20px 0 0 !important;
}
body.atelier #morning-generator .morning-intro h1 {
  font-size: 26px !important;
  letter-spacing: -.03em !important;
  line-height: 1.16 !important;
  margin: 0 0 6px !important;
}
body.atelier #morning-generator .morning-intro > p {
  font-size: 12.5px !important;
  color: var(--ink-3) !important;
  margin: 0 0 16px !important;
}
body.atelier #morning-generator .morning-intro .skill-form {
  max-width: 720px !important;
}

/* =========================================================
   08 首页 —— 木块比例
   ---------------------------------------------------------
   线上内容列只有 946px（左右各空 109px），主区 630 : 侧栏 300 = 2.1 : 1，
   而在 1120 的列宽下，主区应该吃到 780 左右。
   扩大之后 hero 宽 740，33px 的标题一行放得下（原来 630 宽只能折两行）。
   ========================================================= */
body.atelier #home.home-v2 {
  padding-top: 20px !important;
}

body.atelier #home .hv-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 440px) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 0 !important;
}

body.atelier #home .hv-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

body.atelier #home .hv-hero {
  padding: 24px 26px 22px !important;
}

body.atelier #home .hv-hero h1 {
  font-size: 32px !important;
  line-height: 1.24 !important;
  letter-spacing: -.03em !important;
  margin: 8px 0 10px !important;
}

body.atelier #home .hv-date {
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
  letter-spacing: .04em !important;
  margin: 0 0 10px !important;
}

body.atelier #home .hv-lede {
  font-size: 12.5px !important;
  color: var(--ink-3) !important;
  margin: 0 0 18px !important;
}

body.atelier #home .hv-compose {
  padding: 12px 13px 10px !important;
  border-radius: 13px !important;
}
body.atelier #home .hv-compose textarea {
  font-size: 13px !important;
}
body.atelier #home .hv-go {
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.atelier #home .hv-tools {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.atelier #home .hv-tool {
  padding: 15px 15px 14px !important;
  min-height: 0 !important;
}
body.atelier #home .hv-tool b {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}
body.atelier #home .hv-tool p {
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: var(--ink-3) !important;
  margin: 4px 0 0 !important;
}
body.atelier #home .hv-tool .meta {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  margin-top: 8px !important;
}

body.atelier #home .hv-recent {
  padding: 16px 18px !important;
}
body.atelier #home .hv-sec-head h3 {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}

body.atelier #home .hv-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body.atelier #home .hv-card {
  padding: 15px 16px !important;
}
body.atelier #home .hv-card h4 {
  font-family: var(--serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 8px !important;
}

/* =========================================================
   09 侧栏 —— 积分卡 + 用户行（设计稿底部那一块）
   ========================================================= */
body.atelier .app-shell > .v3-topbar,
body.atelier .v3-topbar.shell-nav {
  border-radius: 20px !important;
}

body.atelier .v3-topbar > .right,
body.atelier .v3-topbar.shell-nav > .right {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px 4px 2px !important;
}

body.atelier .v3-topbar > .right .stat,
body.atelier .v3-topbar.shell-nav > .right .stat {
  display: block !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75) !important;
  font-size: 10.5px !important;
  color: var(--ink-3) !important;
}

body.atelier .v3-topbar > .right .stat b,
body.atelier .v3-topbar.shell-nav > .right .stat b {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.022em !important;
  color: var(--ink-1) !important;
  margin-top: 4px !important;
  font-variant-numeric: tabular-nums;
}

body.atelier .v3-topbar > .right .avatar,
body.atelier .v3-topbar.shell-nav > .right .avatar {
  width: 28px !important;
  height: 28px !important;
  flex: none !important;
}

/* =========================================================
   10 小屏降级
   ========================================================= */
@media (max-width: 1180px) {
  body.atelier #workbench.workbench-page .conversation-workbench-layout {
    grid-template-columns: minmax(0, 1fr) 340px !important;
  }
  body.atelier #home .hv-body {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }
}

@media (max-width: 1020px) {
  body.atelier #home .hv-body,
  body.atelier #diagnose .diagnose-shell,
  body.atelier #xiaohongshu .skill-shell,
  body.atelier #tie-tu .skill-shell,
  body.atelier #hit-detector .skill-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.atelier #workbench.workbench-page .conversation-workbench-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(320px, 1fr) minmax(320px, 1fr) !important;
    height: auto !important;
  }
  body.atelier #workbench.workbench-page #workbench-result {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.atelier #home .hv-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 侧栏积分卡：小标签用黑体，数字用 16.5px 半粗，对齐设计稿 */
body.atelier .v3-topbar > .right .stat .pd-pl,
body.atelier .v3-topbar.shell-nav > .right .stat .pd-pl {
  display: block;
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: .02em;
  font-weight: 400;
  margin-bottom: 2px;
}

/* ---------- 诊断页 / 早安祝福 也补上面包屑 ---------- */
body.atelier #diagnose .v3-hero-l::before,
body.atelier #morning-generator .morning-intro::before {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-4);
  margin-bottom: 9px;
  font-weight: 400;
}
body.atelier #diagnose .v3-hero-l::before { content: "分析  /  账号诊断"; }
body.atelier #morning-generator .morning-intro::before { content: "内容创作  /  早安祝福"; }

/* ---------- 技能页空态：补图标，和产物栏空态同构 ---------- */
body.atelier .skill-empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2314684A' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9h10M7 13h7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

/* 技能页空态标题用宋体，和全站标题一致 */
body.atelier .skill-empty h2 {
  font-family: var(--serif) !important;
}

/* =========================================================
   11 技能页两栏的边界
   ---------------------------------------------------------
   白色描边（rgba(255,255,255,.72)）在浅色背景上等于隐形，
   两栏会读成一整块白。这里换成墨绿发丝边，边界才立得住。
   ========================================================= */
body.atelier #xiaohongshu .skill-form-col,
body.atelier #xiaohongshu .skill-output-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #tie-tu .skill-output-col,
body.atelier #hit-detector .skill-form-col,
body.atelier #hit-detector .skill-output-col {
  border-color: rgba(15, 45, 32, .075) !important;
  border-left-width: 1px !important;
  border-top-width: 1px !important;
}

/* 诊断页左卡同理 */
body.atelier #diagnose .v3-hero-l {
  border-color: rgba(15, 45, 32, .075) !important;
}

/* =========================================================
   11b 技能页左栏：不再拉满到和右栏等高
   ---------------------------------------------------------
   原本左栏被拉到 683 高，而内容只有 400，
   底部那句「填写后，右侧会按顺序生成可编辑的产出」被 margin-top:auto
   顶到最下面，中间空出两百多像素 —— 这是「模块比例不对」的直接来源。
   现在左栏只占内容高度，提示行紧跟按钮，右栏保持满高。
   ========================================================= */
body.atelier #xiaohongshu .skill-form-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #hit-detector .skill-form-col {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  /* 关键：原来这套卡片是 justify-content:space-between，
     高度一收成内容高，剩余空间就被摊成 120px 的大缝，
     「写作简报」和输入框之间凭空多出一块空白 */
  justify-content: flex-start !important;
  gap: 0 !important;
}
body.atelier #xiaohongshu .skill-form-col::after,
body.atelier #tie-tu .skill-form-col::after,
body.atelier #hit-detector .skill-form-col::after {
  margin-top: 16px !important;
  padding-top: 0 !important;
}
body.atelier #xiaohongshu .skill-form-col::before,
body.atelier #tie-tu .skill-form-col::before,
body.atelier #hit-detector .skill-form-col::before {
  margin-bottom: 12px !important;
}

/* =========================================================
   12 技能页：左表单「平」、右产物「透」
   ---------------------------------------------------------
   两栏都上玻璃，结果两栏一样白，中间那条缝读不出来。
   设计稿的层级逻辑是：容器可以透，操作区必须实。
   所以左表单压成磨砂平片，右产物保留玻璃。
   ========================================================= */
body.atelier #xiaohongshu .skill-form-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #hit-detector .skill-form-col {
  background-color: rgba(255, 255, 255, .58) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  border-color: rgba(15, 45, 32, .085) !important;
}

body.atelier #xiaohongshu .skill-output-col,
body.atelier #tie-tu .skill-output-col,
body.atelier #hit-detector .skill-output-col {
  border-color: rgba(15, 45, 32, .07) !important;
}

/* 主按钮：设计稿是 34px 一个薄片，不是大绿块 */
body.atelier .skill-form .primary-action,
body.atelier .entry-form .primary-action,
body.atelier #xiaohongshu .skill-form .primary-action,
body.atelier #tie-tu .skill-form .primary-action,
body.atelier #hit-detector .skill-form .primary-action {
  height: 34px !important;
  max-height: 34px !important;
  min-height: 0 !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}
body.atelier .skill-form .secondary-action {
  height: 32px !important;
  max-height: 32px !important;
}

/* =========================================================
   13 首页微调：hero 与工具卡的体量关系
   ========================================================= */
body.atelier #home .hv-hero {
  padding: 26px 28px 24px !important;
}
body.atelier #home .hv-tool {
  min-height: 132px !important;
}
body.atelier #home .hv-recent {
  padding: 18px 20px !important;
}

/* =========================================================
   14 AI 书架（独立页）
   ========================================================= */
body.atelier #library-main.library-main {
  padding: 22px var(--pd-pad) 0 !important;
}
body.atelier #library-main #library-shelf,
body.atelier #library-main .library-heading {
  width: 100% !important;
  max-width: var(--pd-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.atelier #library-main .library-heading h1 {
  font-size: 26px !important;
  letter-spacing: -.03em !important;
  line-height: 1.16 !important;
}
body.atelier #library-main .library-heading p {
  font-size: 12.5px !important;
  color: var(--ink-3) !important;
}

/* 两栏之间必须有可读的缝：靠「白度差 + 一条投影」，不靠描边 */
body.atelier #xiaohongshu .skill-form-col,
body.atelier #tie-tu .skill-form-col,
body.atelier #hit-detector .skill-form-col {
  background-color: rgba(255, 255, 255, .62) !important;
  border-color: rgba(15, 45, 32, .11) !important;
}

body.atelier #xiaohongshu .skill-output-col,
body.atelier #tie-tu .skill-output-col,
body.atelier #hit-detector .skill-output-col {
  background-color: rgba(255, 255, 255, .86) !important;
  border-color: rgba(15, 45, 32, .11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(12, 45, 30, .035),
    0 20px 44px -30px rgba(12, 45, 30, .3) !important;
}

body.atelier #diagnose .v3-hero-l {
  border-color: rgba(15, 45, 32, .11) !important;
}

/* =========================================================
   15 宽屏字号抬一档
   ---------------------------------------------------------
   设计稿是 1440 口径（26px 标题 / 13px 正文）。
   在 1920 以上的窗口里，如果字号原样不动，视觉上会显得「缩了」。
   这里不整体 zoom（会打乱 100dvh 和固定侧栏），
   只把人真正在读的那十几处抬一档，其余保持不变。
   ========================================================= */
@media (min-width: 1700px) {
  body.atelier { --pd-rail: clamp(420px, 32%, 820px); }

  body.atelier #workbench .studio-heading h1,
  body.atelier #xiaohongshu .tool-heading h1,
  body.atelier #tie-tu .tool-heading h1,
  body.atelier #hit-detector .tool-heading h1,
  body.atelier #diagnose .v3-hero-l h1,
  body.atelier #morning-generator .morning-intro h1,
  body.atelier #library-main .library-heading h1 {
    font-size: 32px !important;
  }

  body.atelier #workbench .studio-heading p,
  body.atelier #xiaohongshu .tool-heading p,
  body.atelier #tie-tu .tool-heading p,
  body.atelier #hit-detector .tool-heading p {
    font-size: 14px !important;
  }

  body.atelier #workbench .studio-heading::before,
  body.atelier #xiaohongshu .tool-heading::before,
  body.atelier #tie-tu .tool-heading::before,
  body.atelier #hit-detector .tool-heading::before,
  body.atelier #diagnose .v3-hero-l::before,
  body.atelier #morning-generator .morning-intro::before,
  body.atelier #home .hv-body::before {
    font-size: 12px !important;
  }

  body.atelier #workbench #workbench-stage-nav .pd-step-t { font-size: 13px !important; }
  body.atelier #workbench #workbench-stage-nav .pd-step-d { width: 20px; height: 20px; font-size: 10.5px; }
  body.atelier #workbench .pd-phline .pd-k { font-size: 10.5px !important; }
  body.atelier #workbench .pd-phline .pd-v { font-size: 13px !important; }

  body.atelier #workbench .conversation-identity strong { font-size: 14.5px !important; }
  body.atelier #workbench .conversation-identity small { font-size: 12px !important; }
  body.atelier #workbench #workbench-stage-title { font-size: 14.5px !important; }
  body.atelier #workbench #workbench-stage-kicker { font-size: 10.5px !important; }
  body.atelier #workbench .chat-thread .chat-message.from-ai p { font-size: 14.5px !important; }
  body.atelier #workbench .chat-action-card strong { font-size: 15px !important; }
  body.atelier #workbench .chat-action-card p { font-size: 14.5px !important; }
  body.atelier #workbench .chat-choice-list button { font-size: 12.5px !important; }
  body.atelier #workbench #workbench-topic { font-size: 13.5px !important; }
  body.atelier #workbench .composer-shell > label { font-size: 11px !important; }
  body.atelier #workbench #result-title { font-size: 16px !important; }
  body.atelier #workbench #article-save-state,
  body.atelier #workbench .article-canvas-head p { font-size: 12.5px !important; }
  body.atelier #workbench .workbench-stage-head { padding: 15px 18px !important; }
  body.atelier #workbench .article-canvas-head { padding: 17px 18px 13px !important; }

  body.atelier .v3-topbar .app-tabs a,
  body.atelier .v3-topbar .app-tabs a span { font-size: 14.5px !important; }
  body.atelier .v3-topbar .brand .name { font-size: 14.5px !important; }
  body.atelier .nav-group-label { font-size: 11px !important; }
  body.atelier .v3-topbar .app-tabs a { height: 42px !important; }

  body.atelier #home .hv-hero h1 { font-size: 38px !important; }
  body.atelier #home .hv-lede { font-size: 13.5px !important; }
  body.atelier #home .hv-tool b { font-size: 14.5px !important; }
  body.atelier #home .hv-tool p { font-size: 12.5px !important; }
  body.atelier #home .hv-tool .meta { font-size: 11px !important; }
  body.atelier #home .hv-sec-head h3 { font-size: 14.5px !important; }
  body.atelier #home .hv-card h4 { font-size: 14px !important; }
  body.atelier #home .hv-compose textarea { font-size: 14px !important; }

  body.atelier .skill-empty h2 { font-size: 15.5px !important; }
  body.atelier .skill-empty p { font-size: 12.5px !important; }
  body.atelier .skill-form label { font-size: 11.5px !important; }
  body.atelier .skill-form textarea,
  body.atelier .skill-form input { font-size: 13.5px !important; }
}

/* =========================================================
   16 对话式表单：按钮不再占满整行
   ---------------------------------------------------------
   小红书 / 贴图号 / 发布前复核 / 账号诊断 / 早安祝福 这五个页面
   共用同一个 creator-conversation 表单。线上把「发送」和「新对话」
   各拉成一条 100% 宽的大色块，两块叠起来比整个表单还重，
   设计稿里它们是并排的两个薄片。
   这里把表单改成两列 auto 网格：文字区横跨两列，
   两个按钮落在同一行、宽度只跟文字走。
   ========================================================= */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector, #diagnose, #morning-generator)
  :is(.skill-form, .entry-form).creator-conversation {
  display: grid !important;
  /* 第一列跟着「发送」的宽度，第二列吃掉剩余 —— 两列都用 max-content
     时，横跨两行的 label 会把自己的 max-content 压成 0，整张表单只剩 260 宽 */
  grid-template-columns: max-content minmax(0, 1fr) !important;
  justify-content: start !important;
  align-content: start !important;
  align-items: center !important;
  gap: 9px 8px !important;
}

/* 文字区 / 历史 / 产出 / 状态行一律横跨两列 */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector, #diagnose, #morning-generator)
  .creator-conversation > :is(label, textarea, input, select,
    .creator-chat-history, .creator-chat-output, progress, p[role="status"]) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 空的历史 / 产出占位不占位 —— 否则标题和输入框之间会空出五六十像素 */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector, #diagnose, #morning-generator)
  .creator-conversation > :is(.creator-chat-history, .creator-chat-output):empty {
  display: none !important;
}

/* 表单自己不再画一层卡片 —— 它已经在 .skill-form-col 这张卡里了，
   两层白框套在一起是「廉价感」的主要来源之一 */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector) .skill-form-col .skill-form.creator-conversation,
body.atelier #diagnose .skill-form.creator-conversation {
  /* style.css:402 与 taste-chatgpt.css:82 给了 position:sticky; top:22/86px，
     在网格里会把整个表单往下推 50 多像素，变成「标题和输入框之间一条大缝」 */
  position: static !important;
  top: auto !important;
  inset: auto !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 输入控件一律吃满所在网格列 —— 早安页的 textarea 原本只有 200px 宽 */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector, #diagnose, #morning-generator)
  .creator-conversation :is(textarea, input, select) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 按钮只吃自己的文字宽度 */
body.atelier :is(#xiaohongshu, #tie-tu, #hit-detector, #diagnose, #morning-generator)
  .creator-conversation > :is(.primary-action, .secondary-action) {
  width: auto !important;
  min-width: 0 !important;
  justify-self: start !important;
  padding: 0 18px !important;
}

/* 隐藏态必须真的隐藏：上面给了 display 级覆盖，hidden 属性会失效 */
body.atelier :is(.creator-conversation, .skill-form, .entry-form) > [hidden] {
  display: none !important;
}

/* =========================================================
   17 早安祝福：给对话栏配一块产物位
   ---------------------------------------------------------
   这一页只有一个对话卡，右半栏整块是空的 —— 七个 tab 里最不成立的一页。
   改成「左对话 / 右产物」两栏，和其它工具页同一套语法，
   右栏在有产出前是一张带图标和说明的空态卡，不是白板。
   ========================================================= */
body.atelier #morning-generator .morning-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30%, 520px) !important;
  padding: 0 !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
body.atelier #morning-generator .morning-intro > .kicker,
body.atelier #morning-generator .morning-intro > h1,
body.atelier #morning-generator .morning-intro > p {
  grid-column: 1 / -1 !important;
}

body.atelier #morning-generator .morning-intro > .skill-form {
  grid-column: 1 !important;
  align-self: stretch !important;
  margin: 12px 0 0 !important;
  /* style.css 给 .skill-form 压了 max-width:720，
     于是列宽 764 而卡片只画到 720，右边多出一条 60px 的空气缝 */
  width: 100% !important;
  max-width: none !important;
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(15, 45, 32, .09) !important;
  border-radius: var(--pd-r-panel) !important;
  background-color: rgba(255, 255, 255, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body.atelier #morning-generator .pd-mrail {
  grid-column: 2 !important;
  align-self: stretch !important;
  margin: 12px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 232px !important;
  padding: 26px 24px !important;
  border: 1px solid rgba(15, 45, 32, .11) !important;
  border-radius: var(--pd-r-panel) !important;
  background-color: rgba(255, 255, 255, .86) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(12, 45, 30, .03),
    0 20px 44px -32px rgba(12, 45, 30, .28) !important;
  text-align: center !important;
}

/* 有真实产出时撤卡：hidden 要真的隐藏，否则会被上面的 display:flex 盖掉 */
body.atelier #morning-generator .pd-mrail[hidden] {
  display: none !important;
}

body.atelier #morning-generator .pd-mrail-ico {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 14px !important;
  border-radius: 12px !important;
  background-color: rgba(255, 255, 255, .7) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2314684A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

body.atelier #morning-generator .pd-mrail strong {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  color: var(--ink-1) !important;
}
body.atelier #morning-generator .pd-mrail p {
  max-width: 230px !important;
  margin: 7px auto 0 !important;
  font-size: 11.5px !important;
  line-height: 1.75 !important;
  color: var(--ink-4) !important;
}
body.atelier #morning-generator .pd-mrail-skel {
  width: 170px !important;
  height: 30px !important;
  margin: 16px auto 0 !important;
  background-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
  background-size: 100% 6px, 82% 6px, 58% 6px !important;
  background-position: center 0, center 12px, center 24px !important;
  background-repeat: no-repeat !important;
  border-radius: 3px !important;
  opacity: .055 !important;
}