/* me 页私有样式：一律写在 #pg-me 下面。字号只用 9 档（13 15 17 21 28 40 56 72 80）。 */

/* ---------- 一、首屏：名片当产品图 ---------- */
#pg-me .me-hero { padding-top: 64px; }
#pg-me .me-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
#pg-me .me-stage { min-height: 520px; padding: 56px 64px; }
#pg-me .me-card-back { position: absolute; left: 50%; top: 50%; width: min(520px, 78%); height: 70%; transform: translate(-46%, -54%) rotate(-4deg);
  background: var(--device-bg); border-radius: var(--r-img); box-shadow: var(--shadow-product); opacity: .55; }
#pg-me .me-card { position: relative; width: 100%; max-width: 540px; background: var(--device-bg); color: var(--device-ink); border-radius: var(--r-img);
  box-shadow: var(--shadow-product); padding: 32px 32px 0; overflow: hidden; }
#pg-me .me-card-hd { display: flex; align-items: center; gap: 16px; }
#pg-me .me-av { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t28); font-weight: 500; flex: none; }
#pg-me .me-id { min-width: 0; flex: 1; }
#pg-me .me-name { font-size: var(--t28); font-weight: 700; line-height: 1.2; }
#pg-me .me-label { font-size: var(--t15); color: var(--device-soft); margin-top: 4px; }
html[lang="en"] #pg-me .me-label > span, #pg-me .me-nw { white-space: nowrap; }
#pg-me .me-phase { align-self: flex-start; font-size: var(--t13); color: var(--device-soft); padding: 4px 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--device-line); white-space: nowrap; }
#pg-me .me-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--device-line); }
#pg-me .me-card-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; }
#pg-me .me-card-facts > div + div { padding-left: 16px; border-left: 1px solid var(--device-line); }
#pg-me .me-card-facts .k, #pg-me .me-card-did .k { font-size: var(--t13); color: var(--device-soft); }
#pg-me .me-card-facts .v { font-size: var(--t21); font-weight: 500; line-height: 1.3; }
#pg-me .me-seen { display: flex; align-items: center; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--device-line); font-size: var(--t14); color: var(--device-soft); }
#pg-me .me-seen svg { flex: none; }
#pg-me .me-card-did { padding: 20px 0 8px; }
#pg-me .me-did { margin-top: 8px; }
#pg-me .me-did li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 8px 0; font-size: var(--t17); line-height: 1.5; }
#pg-me .me-did-n { font-size: var(--t13); color: var(--device-soft); padding-top: 3px; }
#pg-me .me-ta { margin-top: 8px; min-height: 140px; font-size: var(--t15); }
#pg-me .me-card-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px -32px 0; padding: 14px 32px; background: var(--device-bar); border-top: 1px solid var(--device-line); }
#pg-me .me-card-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t13); color: var(--device-soft); }

#pg-me .me-side .h2 { font-size: var(--t40); }
/* 跳到某一段（#me/asked、首屏的「往下有什么」）时标题拿焦点只为读屏器定位，不画焦点框 */
#pg-me h2[tabindex="-1"]:focus, #pg-me h2[tabindex="-1"]:focus-visible { outline: none; }
#pg-me .me-set { display: flex; flex-direction: column; gap: 28px; }
#pg-me .me-set-l { font-size: var(--t15); font-weight: 500; margin-bottom: 10px; }
#pg-me .me-seg { flex-wrap: wrap; }
#pg-me .me-set-h { margin-top: 8px; }
#pg-me .me-jump { display: flex; gap: 0; border-top: 1px solid var(--line-2); padding-top: 20px; }
#pg-me .me-jump-i { display: flex; flex-direction: column; gap: 2px; padding: 0 24px; border-left: 1px solid var(--line-2); text-align: left; }
#pg-me .me-jump-i:first-child { padding-left: 0; border-left: 0; }
#pg-me .me-jump-i b { font-size: var(--t28); font-weight: 700; line-height: 1.2; }
/* 三格是按钮（点了跳到下面那一段）：说明字后面一个灰色小向下箭头，鼠标停上去说明字变蓝（数字照旧黑） */
#pg-me .me-jump-i span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t13); color: var(--ink-2); transition: color var(--dur) var(--ease); }
#pg-me .me-jump-i span svg { flex: none; }
#pg-me .me-jump-i:hover span, #pg-me .me-jump-i:focus-visible span { color: var(--accent); }

/* ---------- 二、我拿走的：像「已购项目」，左边一张缩小的产品图 ---------- */
#pg-me .me-rows { display: flex; flex-direction: column; gap: 12px; }
#pg-me .me-row { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 16px 28px 16px 16px;
  background: var(--cell-bg); border-radius: var(--r-img); transition: transform var(--dur) var(--ease); }
#pg-me .me-row:hover { transform: translateY(-2px); }
#pg-me .me-row:hover .me-row-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#pg-me .me-thumb { position: relative; display: block; width: 176px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--stage-bg); }
#pg-me .me-thumb-in { position: absolute; left: 16px; top: 14px; width: 520px; transform: scale(.3); transform-origin: 0 0; pointer-events: none; }
#pg-me .me-row-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#pg-me .me-row-k { font-size: var(--t13); color: var(--ink-2); }
#pg-me .me-row-t { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t21); font-weight: 500; line-height: 1.35; }
#pg-me .me-ver { font-size: var(--t13); color: var(--ink-2); font-weight: 400; }
#pg-me .me-row-p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
#pg-me .me-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--fill); font-size: var(--t13); color: var(--ink); font-weight: 400; white-space: nowrap; }
#pg-me .me-row-r { display: flex; align-items: center; gap: 12px; color: var(--ink-2); white-space: nowrap; }
#pg-me .me-res { font-size: var(--t15); font-weight: 500; color: var(--ink); }

#pg-me .me-pick-c .cell-img .device { max-width: 100%; }

/* ---------- 三、我说过的：引言式大字 ---------- */
#pg-me .me-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#pg-me .me-quotes.one { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
#pg-me .me-q { display: flex; flex-direction: column; gap: 8px; padding: 40px; border-radius: var(--r-img); background: var(--cell-bg); transition: transform var(--dur) var(--ease); }
#pg-me .me-q:hover { transform: translateY(-2px); }
#pg-me .me-q-k { font-size: var(--t13); color: var(--ink-2); }
#pg-me .me-q-r { font-size: var(--t40); font-weight: 300; line-height: 1.2; }   /* 卡片里的大字比段标题「我说过的」（40 号 500）轻一档，字号不动；同重时段标题和卡片内容看成同一层 */
html[lang="en"] #pg-me .me-q-r { letter-spacing: -0.015em; }   /* v7.2 英文 28 号以上标题收一点字距（窄屏 28 号也收） */
#pg-me .me-q-t { font-size: var(--t21); line-height: 1.5; margin-top: 8px; }
#pg-me .me-q-n { font-size: var(--t15); color: var(--ink-2); }
#pg-me .me-q-f { font-size: var(--t13); color: var(--ink-2); margin-top: auto; padding-top: 16px; }

/* ---------- 四、我问过的：五步小进度 ---------- */
#pg-me .me-ask .source { margin-bottom: 4px; }
#pg-me .me-dots { display: inline-flex; gap: 4px; }
#pg-me .me-dots i { width: 18px; height: 4px; border-radius: 2px; background: var(--line); }
#pg-me .me-dots i.on { background: var(--ink); }
#pg-me .me-st { font-size: var(--t15); color: var(--ink); min-width: 64px; }
#pg-me .me-empty { display: flex; align-items: center; gap: 20px; padding: 28px 32px; background: var(--cell-bg); border-radius: var(--r-img); }
#pg-me .me-empty .empty-i { margin: 0; flex: none; }
#pg-me .me-empty-m { flex: 1; min-width: 0; }
#pg-me .me-empty .empty-p { max-width: none; margin-top: 2px; }
#pg-me .me-empty .lnk-a { white-space: nowrap; }

/* ---------- 五、作者才有（.priv） ---------- */
#pg-me .me-lockline { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill); font-size: var(--t13); color: var(--ink); }
#pg-me .me-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t13); color: var(--ink-2); }
#pg-me .me-legend span { display: inline-flex; align-items: center; gap: 8px; }
#pg-me .me-legend i { width: 12px; height: 12px; border-radius: 3px; }
#pg-me .me-arows { border-top: 1px solid var(--line-2); }
#pg-me .me-arow { display: grid; grid-template-columns: minmax(0, 4fr) 120px 120px minmax(0, 4fr); align-items: center; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
#pg-me .me-arow-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#pg-me .me-arow-t { font-size: var(--t21); }
#pg-me .me-wait { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--t13); color: var(--ink-2); margin-top: 4px; }
#pg-me .me-wait svg { margin-top: 2px; }
#pg-me .me-num { display: flex; flex-direction: column; }
#pg-me .me-num b { font-size: var(--t40); font-weight: 500; line-height: 1.1; }   /* 结果数字 500 */
#pg-me .me-num span { font-size: var(--t13); color: var(--ink-2); }
#pg-me .me-split { display: flex; flex-direction: column; gap: 8px; }
#pg-me .me-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2); gap: 2px; }
#pg-me .s-ok { background: var(--ink); }
#pg-me .s-fix { background: var(--ink); opacity: .55; }
#pg-me .s-fail { background: var(--ink); opacity: .28; }
#pg-me .s-todo { background: var(--line); }
#pg-me .me-legend .s-fix { opacity: .55; } #pg-me .me-legend .s-fail { opacity: .28; }
#pg-me .me-fork { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; margin-top: 64px; padding: 48px; border-radius: var(--r-stage); background: var(--cell-bg); }
#pg-me .me-fork-av { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fill-2); font-size: var(--t17); font-weight: 500; }
#pg-me .me-fork-stage { padding: 32px; background: var(--stage); }
#pg-me .me-diff .device-body, .sheet .me-diff .device-body { display: flex; flex-direction: column; gap: 12px; font-size: var(--t15); }
#pg-me .me-diff-r, .sheet .me-diff-r { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 10px; }
/* 标签至少 72 宽（中文「原来」「宋姐改的」照旧 72）；字长了跟着变宽，不折行、白字不溢出黑底 */
#pg-me .me-diff-r .d-chip, .sheet .me-diff-r .d-chip { width: auto; min-width: 72px; height: 24px; padding: 0 8px; white-space: nowrap; justify-self: start; }
#pg-me .me-diff-r.old, .sheet .me-diff-r.old { color: var(--device-soft); }
#pg-me .me-diff-r.new, .sheet .me-diff-r.new { background: var(--hl); }
#pg-me .me-diff-why, .sheet .me-diff-why { font-size: var(--t13); color: var(--device-soft); padding: 4px 12px 0; }
.sheet .me-modal-diff .device { box-shadow: 0 0 0 1px var(--device-line); }
.sheet .me-kick { padding-top: 8px; }
.sheet .me-fork-cap { padding-right: 44px; }   /* 别压到右上角的关闭按钮（英文这一行长） */

/* ---------- 六、设备、外观、退出 ---------- */
#pg-me .me-sys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#pg-me .me-sys-c { padding: 40px; border-radius: var(--r-img); background: var(--cell-bg); min-width: 0; }
#pg-me .me-count { font-size: var(--t13); color: var(--ink-2); white-space: nowrap; }
#pg-me .me-devs { border-top: 1px solid var(--line-2); }
#pg-me .me-dev { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
#pg-me .me-dev-i { width: 56px; height: 56px; border-radius: 14px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; }
#pg-me .me-dev-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#pg-me .me-dev-n { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t17); font-weight: 500; }
#pg-me .me-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#pg-me .me-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#pg-me .me-tile-img { position: relative; display: flex; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur) var(--ease); }
#pg-me .me-tile:hover .me-tile-img { box-shadow: 0 0 0 1px var(--ink-2); }
#pg-me .me-tile[aria-checked="true"] .me-tile-img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
#pg-me .me-tile-t { font-size: var(--t15); color: var(--ink-2); }
#pg-me .me-tile[aria-checked="true"] .me-tile-t { color: var(--ink); font-weight: 500; }
#pg-me .me-tile .half { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; }
#pg-me .me-tile .half i { display: block; height: 6px; border-radius: 3px; }
#pg-me .me-tile .half i:first-child { width: 70%; height: 8px; }
#pg-me .me-tile .half i:nth-child(2) { width: 90%; } #pg-me .me-tile .half i:nth-child(3) { width: 55%; }
/* 预览图本身的颜色是固定的（它画的就是白天、黑夜的样子），不随外观变 */
#pg-me .me-tile.light .half { background: #FFFFFF; } #pg-me .me-tile.light .half i { background: #D2D2D7; } #pg-me .me-tile.light .half i:first-child { background: #1D1D1F; }
#pg-me .me-tile.dark .half { background: #1C1C1E; } #pg-me .me-tile.dark .half i { background: #48484A; } #pg-me .me-tile.dark .half i:first-child { background: #F5F5F7; }
#pg-me .me-tile.system .half.a { background: #FFFFFF; } #pg-me .me-tile.system .half.a i { background: #D2D2D7; } #pg-me .me-tile.system .half.a i:first-child { background: #1D1D1F; }
#pg-me .me-tile.system .half.b { background: #1C1C1E; } #pg-me .me-tile.system .half.b i { background: #48484A; } #pg-me .me-tile.system .half.b i:first-child { background: #F5F5F7; }
#pg-me .me-tile:not(.system) .half.b { display: none; }
#pg-me .me-out { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 28px 40px; border-radius: var(--r-img); background: var(--cell-bg); }
#pg-me .me-end { margin-top: 48px; text-align: center; font-size: var(--t15); color: var(--ink-2); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1099px) {
  #pg-me .me-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #pg-me .me-side { order: -1; }
  #pg-me .me-arow { grid-template-columns: minmax(0, 1fr) 100px 100px; }
  #pg-me .me-split { grid-column: 1 / -1; }
  #pg-me .me-fork { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 759px) {
  #pg-me .me-hero { padding-top: 40px; }
  #pg-me .me-side .h2 { font-size: var(--t28); }
  #pg-me .me-stage { min-height: 0; padding: 24px 16px; }
  #pg-me .me-card-back { display: none; }
  #pg-me .me-card { padding: 24px 20px 0; }
  #pg-me .me-card-ft { margin: 8px -20px 0; padding: 12px 20px; flex-wrap: wrap; }
  #pg-me .me-av { width: 56px; height: 56px; font-size: var(--t21); }
  #pg-me .me-name { font-size: var(--t21); }
  #pg-me .me-phase { display: none; }
  #pg-me .me-card-facts .v { font-size: var(--t17); }
  #pg-me .me-card-facts > div + div { padding-left: 12px; }
  #pg-me .me-row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 20px; }
  #pg-me .me-thumb { display: none; }
  #pg-me .me-row-t { font-size: var(--t17); flex-wrap: wrap; }
  #pg-me .me-row-r .me-res { display: none; }
  #pg-me .me-quotes, #pg-me .me-quotes.one { grid-template-columns: minmax(0, 1fr); }
  #pg-me .me-q { padding: 24px; }
  #pg-me .me-q-r { font-size: var(--t28); }
  #pg-me .me-ask .li-r { flex-wrap: wrap; }
  #pg-me .me-arow { grid-template-columns: 1fr 1fr; gap: 16px; }
  #pg-me .me-arow-m { grid-column: 1 / -1; }
  #pg-me .me-fork { padding: 24px; margin-top: 40px; }
  #pg-me .me-fork-stage { padding: 16px; }
  #pg-me .me-sys { grid-template-columns: minmax(0, 1fr); }
  #pg-me .me-sys-c { padding: 24px; }
  #pg-me .me-themes { gap: 10px; }
  #pg-me .me-out { flex-direction: column; align-items: flex-start; padding: 24px; }
  #pg-me .me-jump-i { padding: 0 14px; }
  #pg-me .me-empty { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
  #pg-me .me-diff-r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* 王姐「先拿这三件」第一格的产品表：英文列名长，窄屏只留前两列，免得「HS code」「MOQ」被切掉一半（中文照旧） */
  html[lang="en"] #pg-me .me-pick-c .d-table th:nth-child(n+3), html[lang="en"] #pg-me .me-pick-c .d-table td:nth-child(n+3) { display: none; }
  /* 英文窗口标题「Cold email, three versions · Prompt line 6」一行放不下：折两行，不出省略号（中文一行放得下，照旧） */
  html[lang="en"] #pg-me .me-diff .device-bar, html[lang="en"] .sheet .me-diff .device-bar { height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  html[lang="en"] #pg-me .me-diff .device-title, html[lang="en"] .sheet .me-diff .device-title { white-space: normal; line-height: 1.4; }
}