/* ============================================================
   layout.css — 统一布局层 / Unified Layout Layer
   ------------------------------------------------------------
   解决的核心问题：7 个页面各自造留白尺度（实测 18px ~ 96px、左右 24 ~ 40px），
   同一层级内容差 3 倍，看起来像几个产品硬拼。

   本层只做三件事：
   1. 定义布局 token（--shell-max / --shell-pad / --stack / --measure）
   2. 所有页面套统一容器，杜绝留白失控
   3. 首页 / 诊断 / 报告 三页的结构性优化

   铁律：不写硬编码颜色，全部引用 tokens.css 变量。
   加载顺序：必须在 glass-theme.css 之后。
   ============================================================ */

:root {
  /* ── 布局尺度 ───────────────────────────── */
  --shell-max: 1280px;                    /* 页面最大宽度 */
  --shell-pad: clamp(20px, 3.2vw, 40px);  /* 页面左右安全边距 */
  --shell-top: clamp(24px, 3vw, 40px);    /* 页面顶部留白 */
  --stack: 24px;                          /* 区块垂直节奏 */
  --stack-lg: 40px;                       /* 大区块节奏 */
  --measure: 72ch;                        /* 正文最佳阅读宽度 */
  --nav-h: 56px;                          /* 顶栏高度 */

  /* ── 圆角（苹果大圆角梯度）───────────────── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── 柔和分层阴影（取代发光）─────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08);

  /* ── 动效曲线（指数缓动，不用回弹）────────── */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s;
}

/* ============================================================
   1. 统一容器 — 所有页面套同一把尺
   ============================================================ */

.home-page,
.diagnose-page,
.skill-page,
.workbench-page,
.report-page {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  padding-top: var(--shell-top);
  /* 解锁暗色主题遗留的固定高度锁 */
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 页面顶部那行 Workspace 编号 meta 统一节奏 */
.v3-meta {
  margin-bottom: var(--stack);
  padding-inline: 0;
}

/* 所有页面主标题统一：去掉衬线斜体，改用系统字体负字距 */
.home-page h1,
.diagnose-page h1,
.skill-page h1,
.v3-hero-l h1,
.diagnose-shell h1 {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", Roboto, sans-serif) !important;
  font-style: normal !important;
  letter-spacing: -.022em;
  line-height: 1.12;
}

.home-page .serif,
.diagnose-page .serif,
.skill-page .serif,
.v3-modules .serif,
.v3-hero-l .serif {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit;
}

/* 统一主 CTA：四个页面的主按钮长得一样 */
.v3-hero-l .cta-row .primary,
.v3-diag-r .actions .solid,
.skill-primary,
.flow-primary,
.composer-send {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -.01em;
  background: var(--ikb) !important;
  color: #fff !important;
  border: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.v3-hero-l .cta-row .primary:hover,
.v3-diag-r .actions .solid:hover,
.skill-primary:hover,
.flow-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.06);
}
.v3-hero-l .cta-row .primary:active,
.skill-primary:active { transform: translateY(0); }

/* ============================================================
   2. 首页 — 解锁高度 + 节奏重排
   ============================================================ */

.home-page .v3-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(8px, 2vw, 24px) var(--stack-lg);
}

.home-page .v3-hero-l .lede {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
}

/* 首页 hero 右栏：6 张小卡网格重排为 3×2，去掉悬浮动效噪音 */
.home-page .hero-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-page .hc-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, .07));
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.home-page .hc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.home-page .hc-card .n {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3, #86868b);
  letter-spacing: .04em;
}
.home-page .hc-card .t { font-size: 14px; font-weight: 590; }
.home-page .hc-card .d { font-size: 12px; color: var(--text-3, #86868b); line-height: 1.4; }

/* 压掉 glass-theme 的错落 span（hc-1/hc-6 横跨2列、hc-3 纵跨2行）——统一 3×2 等分 */
.home-page .hc-card.hc-1,
.home-page .hc-card.hc-3,
.home-page .hc-card.hc-6 {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* 首页去重：hero 六卡与 v3-modules 内容完全重复，只保留「最近记录」条 */
.home-page .v3-modules .head,
.home-page .v3-modules .modlist { display: none !important; }
.home-page .v3-modules {
  border-top: 1px solid var(--line, rgba(0, 0, 0, .07));
  margin-top: var(--stack-lg);
}
.home-page .v3-modules .recent-line { margin-top: 0; border-top: none; padding-block: 18px; }

/* 首页「六个工具」列表：统一卡片网格 */
.home-page .v3-modules { padding-block: var(--stack-lg); }
.home-page .v3-modules .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--stack);
}
.home-page .modlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.home-page .mod {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num name arrow" "desc desc desc" "stat stat stat";
  gap: 6px 12px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, .07));
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.home-page .mod:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.home-page .mod .num { grid-area: num; font-size: 11px; color: var(--text-3, #86868b); font-variant-numeric: tabular-nums; }
.home-page .mod .name { grid-area: name; font-size: 15px; font-weight: 590; }
.home-page .mod .desc { grid-area: desc; font-size: 13px; line-height: 1.5; color: var(--text-2, #515154); }
.home-page .mod .stat { grid-area: stat; font-size: 11px; color: var(--text-3, #86868b); }
.home-page .mod .arrow { grid-area: arrow; color: var(--text-3, #86868b); transition: transform var(--dur) var(--ease); }
.home-page .mod:hover .arrow { transform: translateX(3px); color: var(--ikb); }

/* ── 首页「快速开始」注入区（DOM 由 flow.js 注入）── */
.uw-quickstart { margin-block: var(--stack) var(--stack-lg); }
.uw-quickstart__title {
  font-size: 13px;
  font-weight: 590;
  color: var(--text-3, #86868b);
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.uw-quickstart__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.uw-quickstart__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, .07));
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.uw-quickstart__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--ikb) 30%, transparent);
}
.uw-quickstart__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ikb) 9%, transparent);
  color: var(--ikb);
}
.uw-quickstart__icon svg { width: 17px; height: 17px; }
.uw-quickstart__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uw-quickstart__body strong { font-size: 14px; font-weight: 590; }
.uw-quickstart__body span { font-size: 12px; color: var(--text-3, #86868b); }

/* ============================================================
   3. 诊断页 — 工作台双栏：左输入（主操作），右完整报告预览
      （替代旧「单列居中落地页」——那是营销页思维，不是工具页）
   ============================================================ */

.diagnose-page .diagnose-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center; /* 两栏垂直重心对齐：输入行与报告卡互相呼应 */
  padding-block: clamp(16px, 3vw, 40px);
}

/* 桌面端整页重心垂直居中：meta 贴顶，主体居中，底部不再留大片空白
   （第 1 节解锁规则带 !important，这里必须同级才能覆盖） */
.diagnose-page {
  min-height: calc(100vh - 170px) !important;
  display: grid;
  grid-template-rows: auto 1fr;
}
.diagnose-page .diagnose-shell { align-self: center; }
@media (max-width: 1080px) {
  .diagnose-page { min-height: 0 !important; display: block; }
}

/* —— 左栏：紧凑左对齐，把「开始诊断」做成视觉锚点 —— */
.diagnose-page .v3-hero-l > .kicker {
  justify-content: flex-start;
  margin-bottom: 14px;
}
.diagnose-page .v3-hero-l h1 {
  font-size: clamp(34px, 3.4vw, 46px) !important;
  line-height: 1.08;
  letter-spacing: -.024em;
  text-align: left;
}
.diagnose-page .v3-hero-l .lede {
  font-size: 15px;
  line-height: 1.6;
  max-width: 42ch;
  margin: 14px 0 0;
  text-align: left;
  color: var(--text-2, #515154);
}

/* 输入框 + 按钮：去掉旧表（style.css）给 form 套的卡片壳——
   border+padding 会让 flex 子项收缩后右侧留出一截空盒。
   这是全页唯一的主操作，做到最大最醒目 */
.diagnose-page .entry-form {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 32px 0 0; /* 左对齐，不再居中 */
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.diagnose-page .entry-form label { display: none; }
.diagnose-page .entry-form > div {
  display: contents !important; /* input+button 直接成为 form 的 flex 子项，行宽贴满 */
}
.diagnose-page .entry-form input {
  flex: 1;
  min-width: 0;
  height: 54px;
  font-size: 17px; /* 主输入框放大一号，iOS 防放大同时更醒目 */
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  background: var(--surface, #fff);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.diagnose-page .entry-form input::placeholder { color: var(--text-3, #a1a1a6); }
.diagnose-page .entry-form input:focus {
  outline: none;
  border-color: var(--ikb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ikb) 12%, transparent);
}
.diagnose-page .entry-form button[type="submit"] {
  flex: none;
  height: 54px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--ikb);
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 590;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
.diagnose-page .entry-form button[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }
.diagnose-page .entry-form button[type="submit"] .arr {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.diagnose-page .entry-form button[type="submit"]:hover .arr { transform: translateX(3px); }

.diagnose-page .sample-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 16px;
}
.diagnose-page .proof {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 32px !important;
  padding-top: 18px !important;
}

/* —— 右栏：示例报告完整可见，输入前就知道「会拿到什么」 —— */
.diagnose-page .v3-hero-r {
  max-width: none !important;
}
.diagnose-page .v3-hero-r .frame-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3, #86868b);
  margin-bottom: 12px;
}
.diagnose-page .v3-hero-r .frame-cap i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ikb);
}
.diagnose-page .v3-hero-r .frame {
  max-width: none;
  margin-inline: 0;
  opacity: 1;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 16px 40px -16px rgba(0, 47, 167, .14);
  border-color: var(--line, rgba(0, 0, 0, .08));
}
.diagnose-page .v3-hero-r .frame .head { margin-bottom: 4px; }
.diagnose-page .v3-hero-r .frame .score-row .v { font-size: 56px; }
.diagnose-page .v3-hero-r .frame .dim .bar i { box-shadow: none; }

/* ============================================================
   4. 报告页 — 左证据 + 右 sticky 评分栏
      （重设计：修 5 列死网格/巨标题/分数溢出三大病灶）
   ============================================================ */

.report-page .v3-diag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  padding-block: clamp(8px, 2vw, 20px) var(--stack-lg);
}

/* —— 标题：装的是「一句话结论」，不是展示字 —— */
.report-page .v3-diag-l h1 {
  font-size: clamp(25px, 2.4vw, 33px) !important;
  line-height: 1.3;
  letter-spacing: -.018em;
  max-width: 26ch;
  margin: 0;
}
.report-page .v3-diag-l .meta {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 60ch;
}

/* —— 账号资料表：标签 + 值两列，值列吃满宽度 ——
   旧表是 200px+4×1fr 五列死网格，但每行只有 4 个子元素，
   值被挤成火柴盒；后两个空 span 直接隐藏 */
.report-page .sitem {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 24px;
  padding-block: 13px;
}
.report-page .sitem > span:nth-child(n+3) { display: none; }
.report-page .sitem .k {
  font-size: 12px;
  color: var(--text-3, #86868b);
  padding-top: 3px; /* 与值行基线对齐 */
}
.report-page .sitem .v {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.015em;
}
/* 长文本行（简介/核心判断）降级为正文尺度，不跟数字抢视觉 */
.report-page #profile-description,
.report-page #overview-judgment {
  font-size: 15px !important;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0;
}

/* —— 右侧评分栏：加宽 + 分数 clamp，根治横向溢出 ——
   旧 144px 巨号分数在 340px 窄栏里放不下，就是截图里那条横向滚动条 */
.report-page .v3-diag-r {
  min-width: 0;
  overflow-x: hidden;
  gap: 16px;
}
.report-page .v3-diag-r .score {
  font-size: clamp(68px, 6vw, 100px) !important;
  line-height: .95;
}
.report-page .v3-diag-r .score .den { font-size: 20px; }
.report-page .v3-diag-r .verdict { font-size: 15px; line-height: 1.5; }
.report-page .v3-diag-r .score-line { margin-top: 12px; }
.report-page .v3-diag-r .actions button {
  height: 44px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 590;
}
.report-page .v3-diag-r .proof { font-size: 12px; line-height: 1.65; }

/* 关键：评分侧栏跟随滚动，滚动看证据时分数始终可见 */
.report-page .v3-diag-r {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
}

/* 左侧证据列表节奏统一 */
.report-page .signal-list { margin-block: var(--stack); }
.report-page .sitem { padding-block: 13px; }

/* ── 报告页「下一步」CTA（DOM 由 flow.js 注入）── */
.uw-nextcard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--stack-lg);
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ikb) 5%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--ikb) 14%, transparent);
}
.uw-nextcard__body { flex: 1; min-width: 0; }
.uw-nextcard__body strong { display: block; font-size: 15px; font-weight: 590; margin-bottom: 2px; }
.uw-nextcard__body span { font-size: 13px; color: var(--text-2, #515154); line-height: 1.5; }
.uw-nextcard__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border-radius: 980px;
  background: var(--ikb);
  color: #fff;
  font-size: 14px;
  font-weight: 590;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.uw-nextcard__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* ============================================================
   5. 公众号创作页 — 统一容器 + 画布为主角
   ============================================================ */

.workbench-page .conversation-workbench-layout {
  gap: 16px;
  padding-block: 0 var(--stack-lg);
  height: auto;
  min-height: calc(100vh - var(--nav-h) - 120px);
}
/* 画布给最大空间：对话 300 / 画布 1fr / 成果 260 */
.workbench-page .conversation-workbench-layout {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(240px, 272px);
}
.workbench-page .article-canvas {
  max-width: none;
  border-radius: var(--r-lg);
}
/* 成果侧栏也可 sticky，滚动看正文时结构始终可见 */
.workbench-page .outcome-panel {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
}

/* ============================================================
   6. 响应式 — 窄屏全部单列
   ============================================================ */

@media (max-width: 1080px) {
  .report-page .v3-diag { grid-template-columns: minmax(0, 1fr); }
  .report-page .v3-diag-r {
    position: static;
    max-height: none;
    order: -1; /* 手机上先看到分数 */
  }
  .workbench-page .conversation-workbench-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .workbench-page .outcome-panel { position: static; max-height: none; }
  .home-page .v3-hero { grid-template-columns: minmax(0, 1fr); }
  .diagnose-page .diagnose-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .diagnose-page .v3-hero-r { max-width: 560px; }
}

@media (max-width: 768px) {
  :root { --stack-lg: 28px; }
  .home-page .hero-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .modlist { grid-template-columns: minmax(0, 1fr); }
  .diagnose-page .entry-form > div { flex-direction: column; }
  .diagnose-page .entry-form button[type="submit"] { width: 100%; }
  /* display:contents 后 input+button 是 form 的直接子项，窄屏改为纵向 */
  .diagnose-page .entry-form { flex-direction: column; }
  .diagnose-page .v3-hero-l h1 { font-size: clamp(30px, 8vw, 38px) !important; }
  .diagnose-page .v3-hero-r .frame { padding: 18px; }
  .diagnose-page .v3-hero-r .frame .score-row .v { font-size: 44px; }
  .report-page .sitem {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-block: 14px;
  }
  .report-page .sitem .k { padding-top: 0; }
  .uw-nextcard { flex-direction: column; align-items: stretch; }
  .uw-nextcard__btn { justify-content: center; }
}

@media (max-width: 480px) {
  .home-page .hero-collage { grid-template-columns: minmax(0, 1fr); }
  .uw-quickstart__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   7. 减少动效偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}