@charset "UTF-8";
/* 简历工具站 · 编辑器样式（左表单 / 右 A4 预览） */
:root {
  --bg: #ececf0;
  --panel: #ffffff;
  --ink: #1c1c22;
  --muted: #6f6f78;
  --line: #e3e3ea;
  --accent: #2563eb;
  --accent-soft: #eef3fe;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* ---- 顶栏 ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line);
  flex: none;
}
.brand { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.brand .logo { display: block; border-radius: 5px; flex: none; }
.brand .tag { font-size: 11px; font-weight: 500; color: var(--muted); background: #f0f0f4; padding: 3px 8px; border-radius: 999px; }
.actions { display: flex; align-items: center; gap: 8px; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn:hover { background: #f6f6f9; }
.btn.ghost { color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn.dark { background: #111; border-color: #111; color: #fff; }
.btn.dark:hover { background: #000; }
.btn.full { width: 100%; }
/* 按钮被 hidden 隐藏时要真的消失（.btn 没设 display，这条是兜底，防止以后加了 display 就失效） */
.btn[hidden] { display: none; }
/* 危险操作（清空）：平时低调，鼠标悬停才变红，避免误点 */
.btn.danger { color: #b91c1c; }
.btn.danger:hover { background: #fef2f2; border-color: #fecaca; }
.btn .bi { margin-right: 2px; }
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ---- 主体两栏 ---- */
.layout { flex: 1; display: flex; min-height: 0; }
.panel { background: var(--panel); }
.form-panel {
  width: 360px; flex: none; border-right: 1px solid var(--line);
  overflow-y: auto; padding: 0 18px 26px;
}
.form-head { position: sticky; top: 0; background: #fff; z-index: 5; padding: 12px 0 10px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.form-head .hint { font-size: 11px; font-weight: 400; color: var(--muted); transition: color .2s; }
/* 存储不可用时的告警态（正常情况下不会出现） */
.form-head .hint.error { color: #c0392b; font-weight: 600; }
/* ---- 可折叠板块 ----
 * 表单全展开实测 3533px（桌面视口 784px / 手机 738px），要滚 4 屏多才看得到「教育背景」。
 * 折叠后 981px / 1128px（1.25 / 1.5 屏），7 行标题本身只有 286px / 360px ——
 * 用户一眼就能看清「原来就这 7 段」，也才知道自己还剩几段没填。
 * 用原生 <details>：不写一行 JS 就有键盘、读屏支持，也不用担心以后改坏。
 * ⚠️ 相邻两个 .fs 的间距交给 <details> 自己，不能再给 section 加 margin，
 *    否则收起时上下的 margin 会叠加成两倍空隙。 */
details.fs { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
details.fs[open] { padding-bottom: 14px; }
.fs > .fs-head {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 10px 10px 12px; cursor: pointer; user-select: none;
  list-style: none; border-radius: 10px;
}
.fs > .fs-head:hover { background: #fafafc; }
/* 收起的板块标题行要自带圆角，展开时只有上方两角圆、下面接内容 */
details.fs[open] > .fs-head { border-radius: 10px 10px 0 0; }
.fs > .fs-head::-webkit-details-marker { display: none; }
/* 标题占满剩余宽度，这样该板块的按钮就被推到标题行最右边 */
.fs > .fs-head > h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
.fs h3 { font-size: 13px; margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; color: #333; }
/* 「填没填」小圆点：收起状态下唯一能看出进度的东西。
   没内容=空心灰圈，填了=实心蓝点，省得用户为了确认挨个展开。 */
.fs-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid #d5d5de; background: transparent; transition: background .15s, border-color .15s;
}
.fs-dot.on { background: var(--accent); border-color: var(--accent); }
/* 展开/收起箭头 */
.fs-caret {
  flex: none; width: 0; height: 0; margin-left: 2px;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 5px solid #b9b9c4; transition: transform .15s;
}
details.fs[open] > .fs-head > .fs-caret { transform: rotate(180deg); }
.fs-body { padding: 0 12px; }
/* 收起时 <details> 的内容本来就不渲染，这条只是兜底 */
details.fs:not([open]) > .fs-body { display: none; }
.fs h3 .mini, .mini { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--muted); }
.fs h3 .mini:hover, .mini:hover { border-color: var(--accent); color: var(--accent); }
label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
input, textarea {
  width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ---- 字段小提示 + 字数计数（个人简介等长文本字段） ---- */
/* 标题右侧的计数：平时浅灰不抢眼，快到上限才变色提醒 */
.fs h3 .fcnt { font-size: 11px; font-weight: 400; color: var(--muted); }
.fs h3 .fcnt.warn { color: #d97706; }
.fs h3 .fcnt.over { color: #c0392b; }
/* 输入框下面的一行说明：告诉用户「这段该写什么」，比 placeholder 长，
   因为 placeholder 一敲字就消失了，而说明应该一直在 */
.fhint { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 5px; }
/* 有意义的字段：说明文字带一点强调，提示这是重要项 */
.fhint b { color: #555; font-weight: 600; }

/* ---- 联系方式：字段分开填 ---- */
.ct { margin-top: 8px; }
/* 电话 / 邮箱左右并排：两个都是短字段，竖着排太浪费高度 */
.ct-row { display: flex; gap: 8px; }
.ct-row > label { flex: 1 1 0; min-width: 0; }
.ct-row > label:first-child { flex: 0 0 42%; }
.ct-more { margin-top: 6px; }
.ct-more > summary {
  font-size: 12px; color: var(--muted); cursor: pointer; padding: 3px 0;
  list-style: none; user-select: none;
}
.ct-more > summary::-webkit-details-marker { display: none; }
.ct-more > summary::before { content: "＋ "; }
.ct-more[open] > summary::before { content: "－ "; }
.ct-more > summary:hover { color: var(--accent); }
.ct-more textarea { margin-top: 4px; }

/* ---- 求职意向：可自己输入，也可从常见职位里点选 ---- */
.picker { display: block; position: relative; }
.picker input { padding-right: 34px; }
/* 箭头：贴在输入框右侧，只负责“展开列表”，不会清掉你已经写的字 */
.picker .pbtn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 12px; line-height: 1; border-radius: 6px; padding: 0;
}
.picker .pbtn:hover { background: var(--accent-soft); color: var(--accent); }
.picker.open .pbtn { color: var(--accent); }
.pmenu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 8px; margin: 0;
}
.pmenu[hidden] { display: none; }
.pmenu .psearch { margin: 0 0 8px; padding: 6px 9px; font-size: 12.5px; }
.pmenu .plist { max-height: 250px; overflow-y: auto; }
.pmenu .pgroup {
  font-size: 11px; font-weight: 700; color: #9a9aa2; letter-spacing: .3px;
  padding: 7px 8px 4px; position: sticky; top: 0; background: #fff;
}
.pmenu .popt {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink); padding: 6px 8px;
  border-radius: 6px; cursor: pointer;
}
.pmenu .popt:hover, .pmenu .popt.on { background: var(--accent-soft); color: var(--accent); }
.pmenu .pempty { font-size: 12px; color: var(--muted); padding: 10px 8px; }
.pmenu .pclear {
  display: block; width: 100%; margin-top: 8px; padding-top: 8px;
  border: 0; border-top: 1px dashed var(--line); background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--muted); text-align: left;
}
.pmenu .pclear:hover { color: var(--accent); }

/* 选了职位后，右边简历轻轻闪一下边框：告诉用户“这个词会出现在这里” */
.pgsheet.title-flash { box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 14px rgba(0,0,0,.12); }

/* 动态列表（技能/经历） */
/* 多张卡片之间靠 gap 拉开；卡片本身不设 margin，
   否则接在「+ 添加」按钮后面时会被重复计算 */
.card-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.item-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 6px; background: #fafafc; }
.item-card .row { display: flex; gap: 6px; }
/* 同一张卡片里的每一行都拉开 10px：输入框之间挨太近会看成一团，
   分不清哪一行属于哪个字段 */
.item-card .row + .row { margin-top: 10px; }
/* 职位/时间并排：职位名较长，多给一点宽度；时间格式固定，窄一点够用 */
.item-card .row.role-period > input:first-child { flex: 1.5 1 0; min-width: 0; }
.item-card .row.role-period > input:last-child { flex: 1 1 0; min-width: 0; }
.item-card input, .item-card textarea { background: #fff; }
/* 技能组名 = 类目（语言/框架）。但类目名不是用户要填的字段，
   只是排版上的小标题，所以平时收成一行小字，点「改名」才变输入框。 */
.item-card .sk-card-head { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
/* 类目名收成「内容多宽就多宽」，右边靠 auto 把「改名/删除」推到最右。
   拉满整行会像一条横幅，不像一个小标题 */
.sk-glabel { flex: 0 1 auto; min-width: 0; margin-right: auto; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card textarea { font-size: 12.5px; }
.points-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.point-line { display: flex; align-items: center; gap: 6px; }
.point-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); flex: none; }
.point-line input { margin-top: 0; }
.del { flex: none; border: 0; background: transparent; color: #b0b0b8; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.del:hover { color: #e11d48; background: #fdecee; }
.addpt { font-size: 12px; color: var(--accent); background: none; border: 0; padding: 2px 0 4px; cursor: pointer; }
/* 卡片里的「+ 添加…」要和上方最后一个输入框留出距离，
   否则看起来像粘在输入框上的一个标签 */
.item-card .addpt { margin-top: 8px; }
.addpt:hover { text-decoration: underline; }

/* ---- 专业技能：技能项排成胶囊，不再一行一个输入框 ---- */
/* 一整排输入框看起来像在填 Excel，选 20 个技能就是 20 个框。
   改成胶囊后：字数决定宽度，一行能放好几个，一眼看得出选了哪些。 */
.sk-card-head .sk-gname { flex: 1; min-width: 0; margin: 0; padding: 4px 8px; font-size: 12px; }
.sk-card-head .sk-gname[hidden] { display: none; }
.sk-gedit { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; padding: 2px 3px; border-radius: 4px; }
.sk-gedit:hover { color: var(--accent); background: var(--accent-soft); }
.sk-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-item { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 1px 2px 1px 10px; }
.sk-item:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* 宽度交给 size 属性（JS 按字数算），所以这里必须盖掉全局的 width:100% */
.sk-item input { width: auto; min-width: 46px; max-width: 190px; margin: 0; border: 0; background: none; padding: 4px 0; font-size: 12.5px; }
.sk-item input:focus { outline: 0; }
.sk-item .del { font-size: 13px; padding: 1px 4px; }

/* ---- 专业技能：点选入口 + 点选面板 ---- */
/* 入口做成一条「大按钮」而不是小 mini：点选是主路径，
   要让不熟悉电脑的人一眼就看到、知道可以不用敲字 */
.sk-open {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px dashed #b9cdf3; background: var(--accent-soft);
  border-radius: 10px; padding: 9px 11px; margin-top: 6px; font: inherit;
}
.sk-open:hover { border-color: var(--accent); }
.sk-open-main { display: block; font-size: 13px; font-weight: 700; color: var(--accent); }
.sk-open-hint { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 3px; }

.sk-sheet {
  position: fixed; inset: 0; z-index: 60; background: rgba(18, 18, 24, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sk-sheet[hidden] { display: none; }
.sk-box {
  display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 84vh;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.28); padding: 14px;
}
.sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sk-head strong { font-size: 14px; }
.sk-head .cnt { flex: 1; font-size: 12px; color: var(--muted); }
.sk-head .cnt b { color: var(--accent); }
.sk-box .psearch { margin: 0 0 10px; padding: 8px 10px; font-size: 13px; }
/* 技能列表用网格摆胶囊：一行能放好几个，比竖着一行一个省一半滚动 */
.sk-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px;
  padding-bottom: 4px;
}
/* 类目标题要独占一行，不然会被胶囊挤在中间；
   吸在顶部跟着滚，滚到中段也知道自己看的是哪一类 */
.sk-list .pgroup {
  flex: 0 0 100%; font-size: 11px; font-weight: 700; color: #9a9aa2;
  letter-spacing: .3px; padding: 8px 0 2px; position: sticky; top: 0; background: #fff;
}
.sk-list .pempty { flex: 0 0 100%; font-size: 12.5px; color: var(--muted); padding: 18px 4px; line-height: 1.7; }
.sk-cap {
  display: inline-block; width: auto; flex: none; text-align: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.sk-cap:hover { border-color: var(--accent); color: var(--accent); }
/* 已选：蓝底 + 前面打个勾，扫一眼就知道选了什么 */
.sk-cap.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sk-cap.on::before { content: "✓ "; }
/* 手写项只展示不可点：告诉用户「这些不会被删掉」，不用操心 */
.sk-keeps { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 7px; }
.sk-keep {
  display: inline-block; border: 1px dashed var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; color: var(--muted); background: #fafafc;
}
.sk-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sk-foot .sk-tip { flex: 1 1 200px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.sk-foot .btn { width: auto; }
.foot-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }

/* ---- 证件照（基本信息里的可选块）---- */
.photo-box { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafafc; }
.photo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.photo-title { font-size: 12px; color: var(--muted); }
.photo-opt { font-size: 11px; color: #9aa0a6; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.photo-acts { display: flex; gap: 6px; }
.photo-body { display: flex; gap: 12px; align-items: flex-start; }
/* 缩略图占位：没上传时是一个虚线框，形状就是一寸照的比例，用户一眼知道要传什么 */
.photo-thumb {
  flex: none; width: 66px; height: 93px; border-radius: 4px; overflow: hidden;
  background: #fff center/cover no-repeat;
  border: 1px dashed #c9ccd4; display: flex; align-items: center; justify-content: center;
}
.photo-thumb.has { border-style: solid; border-color: var(--line); }
.photo-thumb svg { opacity: .35; }
.photo-side { flex: 1; min-width: 0; }
.photo-hint { font-size: 11px; color: var(--muted); line-height: 1.6; }
.photo-pos { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.photo-pos-label { font-size: 11px; color: var(--muted); }
/* 选中态：和技能勾选同一套视觉语言（蓝底白字），不用另学一遍 */
.posbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---- 内容顺序（上下挪分区）---- */
.order-list { display: flex; flex-direction: column; gap: 6px; }
.order-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; background: #fff;
}
.order-row .ord-name { flex: 1; font-size: 13px; color: #333; }
.order-row .ord-num {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.order-row .ord-name.off { color: #b0b4bd; }
/* 按钮组：把 ↑↓ 贴在一起，看起来是一个整体而不是两个独立按钮 */
.ord-acts { display: flex; gap: 3px; }
.ord-acts .mini { padding: 1px 6px; line-height: 1.5; }
.ord-acts .mini:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--muted); }

/* ---- 轻提示（不阻塞，替代 alert）---- */
/* 轻提示：底部 58px 是为了避开页脚（29px）并留出约 14px 间距 —— 页脚是后加的，
   原先的 34px 会让提示条压在备案号上。改页脚高度时这里要跟着改。 */
.toast {
  position: fixed; left: 50%; bottom: 58px; transform: translate(-50%, 14px);
  max-width: min(560px, calc(100vw - 32px));
  background: #16161c; color: #fff; font-size: 13.5px; line-height: 1.6;
  padding: 11px 16px; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; z-index: 99; text-align: center;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- 预览 ---- */
.preview-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.preview-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }

/* ---- 版式按钮（打开缩略图面板）---- */
.tpl-btn {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; font-weight: 600;
}
.tpl-btn:hover { border-color: var(--accent); color: var(--accent); }
.tpl-btn.open { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tpl-btn .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.tpl-btn .now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-btn .caret { font-size: 10px; color: var(--muted); flex: none; }

/* ---- 缩略图面板 ---- */
.tpl-sheet {
  position: absolute; left: 0; right: 0; top: 51px; bottom: 0; z-index: 20;
  background: #f7f7fa; border-top: 1px solid var(--line);
  display: none; flex-direction: column;
}
.tpl-sheet.open { display: flex; }
.tpl-sheet-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line);
}
.tpl-sheet-head strong { font-size: 14px; }
.tpl-sheet-head .cnt { font-size: 12px; color: var(--muted); flex: 1; }
.tpl-sheet-body { flex: 1; overflow-y: auto; padding: 6px 18px 24px; }
.tpl-fam {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .5px;
  margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
.tpl-fam span { font-weight: 400; }
.tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 16px; }
.tpl-item { min-width: 0; cursor: pointer; scroll-margin: 12px; border-radius: 8px; outline-offset: 3px; }
.tpl-item:focus-visible { outline: 2px solid var(--accent); }
.tpl-item .tpl-thumb {
  width: 100%; overflow: hidden; background: #fff; border-radius: 6px;
  border: 2px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* 悬停抬起来是「好看」，但真正在挑版式时鼠标会一直压在卡片上，
   hover 动画结束后卡片停在半路会像在抖。只给未选中项加悬停效果 */
.tpl-item:not(.active):hover .tpl-thumb { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.14); border-color: #c7c7d2; }
.tpl-item.active .tpl-thumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tpl-thumb-pg { pointer-events: none; user-select: none; }
.tpl-meta { display: flex; align-items: center; gap: 6px; padding: 7px 2px 0; font-size: 12.5px; }
.tpl-meta .tpl-id { font-size: 10.5px; font-weight: 800; color: var(--muted); background: #eeeef3; border-radius: 4px; padding: 1px 5px; flex: none; }
.tpl-item.active .tpl-meta .tpl-id { background: var(--accent); color: #fff; }
.tpl-meta .tpl-nm { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta .tpl-ck { color: var(--accent); font-weight: 800; opacity: 0; flex: none; }
.tpl-item.active .tpl-meta .tpl-ck { opacity: 1; }
.zoomctl { display: flex; align-items: center; gap: 6px; }
.zoomctl span { font-size: 12px; color: var(--muted); min-width: 40px; text-align: center; }

.preview-stage {
  flex: 1; overflow: auto; overflow-x: hidden; display: flex; justify-content: center; align-items: flex-start;
  background: #e2e2e8; padding: 26px;
}
.sheet {
  background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.12);
}

/* A4 页（浏览器像素）：794 × 1123px = 210 × 297mm，所以预览与打印 1:1，
   预览里看到几页，打印出来就是几页 */
.sheet.pg {
  width: 794px; min-height: 1123px; padding: 56px 60px; position: relative; flex: none;
}

/* 离屏长纸：仅供分页测量与打印兜底，不参与视觉布局 */
.sheet-measure {
  position: absolute !important; left: -99999px !important; top: 0 !important;
  transform: none !important; zoom: 1 !important; pointer-events: none;
}

/* ---- 多页预览：一叠真实 A4，往下滚逐页看 ---- */
.pager {
  display: block; width: 794px; flex: none;
  transform-origin: top center; transition: transform .12s ease, zoom .12s ease;
}
.pg-wrap { margin: 0 0 22px; }
.pg-wrap:last-child { margin-bottom: 0; }
/* 固定页高：内容超出部分由分页切点决定，不会露出半行字 */
.pgsheet {
  position: relative; overflow: hidden;
  width: 794px; height: 1123px; flex: none;
}
/* 页码在纸外：不会印进简历，也不占版面 */
.pg-cap {
  margin-top: 9px; text-align: center;
  font-size: 12px; font-weight: 600; color: #6f6f78;
  user-select: none;
}
/* 顶栏页数提示：超过一页时变色提醒（HR 通常只看第一页） */
.pginfo { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pginfo.multi { color: #b45309; font-weight: 700; }
/* ====== 版式通用 ====== */
.sheet { font-family: "PingFang SC","Microsoft YaHei",-apple-system,sans-serif; color: #333; line-height: 1.5; }
.sheet .serif-title { font-family: Georgia,"Songti SC",serif; }
.sheet .muted { color: #777; }
.sheet .small { font-size: 12px; }
.sheet .company { font-weight: 700; }
.sheet .role { font-weight: 400; }
.sheet .dates { font-size: 12px; }
.sheet .bullet { position: relative; padding-left: 14px; }
.sheet .bullet:before { content: "▪"; position: absolute; left: 0; top: 0; }
.sheet h2 { font-size: 16px; margin: 14px 0 6px; }
.sheet p { margin: 3px 0; }
.sheet ul { margin: 3px 0; padding-left: 18px; }
/* 证件照：五个版式共用。各版式只负责摆位置，尺寸/裁切/圆角在这里统一。
   print-color-adjust 是给「打印 / 存 PDF」用的——不加的话某些浏览器会为了省墨
   把照片背景抹掉，出来一张白框里飘着个人。 */
.sheet .rs-photo {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* 具体版式写在 app.js 内联模板字符串里 */

/* ---- 页脚（ICP 备案号） ----
 * 国内站点必须在首页展示备案号并链到工信部，这是硬性要求。
 * 高度刻意压到一条（~26px）：主体是固定视口高的编辑器，
 * 页脚每多占 1px，左侧表单和右侧预览就少 1px，所以不做多行。 */
.site-foot {
  flex: none; padding: 5px 18px 6px;
  background: #fff; border-top: 1px solid var(--line);
  text-align: center; font-size: 11.5px; line-height: 1.5;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

/* =========================================================
 * 移动端适配（≤860px）：单栏 + 编辑/预览 切换
 * ========================================================= */
.mtabs { display: none; }

@media (max-width: 860px) {
  body { height: 100dvh; }

  /* 顶栏：紧凑单行 */
  .topbar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .brand { font-size: 15px; flex: none; }
  .brand .tag { display: none; }
  .actions { flex: 1; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .btn { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
  .btn .bt { display: none; }        /* 移动端只留图标 */
  .btn .bi { display: inline; font-size: 15px; }
  .btn.primary .bt { display: inline; }  /* 主按钮保留文字 */
  .btn.primary { padding: 7px 12px; }
  .sep { display: none; }

  /* 打印按钮手机上不显示：手机系统打印面板里「存为 PDF」藏得很深，
     微信 / 小红书内置浏览器里甚至可能完全不弹。留着是给用户挖坑。
     ⚠️ 只在「下载简历」已经存在的前提下才有这一步——否则手机就没导出口了。 */
  .desk-only { display: none; }

  /* 主体改为纵向单栏 */
  .layout { flex-direction: column; }
  .form-panel { width: 100%; flex: 1; min-height: 0; border-right: 0; padding: 0 14px 20px; }

  /* ⚠️ iOS Safari：输入框字号 < 16px 时，聚焦会自动放大页面且不会缩回。
     字号必须 ≥ 16px 才能避免。输入框视觉略大，但换来不再乱放大。 */
  input, textarea, .item-card textarea { font-size: 16px; }
  /* 移动端「+ 添加」点击区域放大到可触碰（高度 ≥ 40px） */
  .addpt { font-size: 13.5px; padding: 12px 0 10px; }
  .fs h3 .mini, .mini { padding: 6px 10px; font-size: 12.5px; }

  /* 「内容顺序」的 ↑↓ 在桌面端刻意做得很小（省地方），但那两条规则
     （.ord-acts .mini / .photo-pos .mini）选择器比上面这行更具体，
     会把它压回 23px 高 —— 手指根本戳不准。这里按 iOS 的 44px 标准补回来。
     手机是「刚毕业的学生 / 转行的人」最可能调顺序的地方，戳不准等于没有这功能。 */
  .ord-acts { gap: 6px; }
  .ord-acts .mini, .photo-pos .posbtn { padding: 10px 14px; font-size: 14px; line-height: 1.4; }

  /* 职位下拉：搜索框同样要 ≥16px，否则 iOS 聚焦会放大页面；
     列表压低一点，免得占掉整个屏幕 */
  .picker .pbtn { width: 34px; height: 34px; font-size: 14px; }
  .pmenu .psearch { font-size: 16px; padding: 8px 10px; }
  .pmenu .plist { max-height: 42vh; }
  .pmenu .popt { font-size: 14px; padding: 10px 8px; }

  /* 技能点选面板：手机上铺满整屏，胶囊放大到能戳准 */
  .sk-sheet { padding: 0; align-items: stretch; }
  .sk-box { max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 12px 14px; }
  .sk-box .psearch { font-size: 16px; padding: 9px 10px; }
  .sk-cap, .sk-keep { font-size: 14px; padding: 9px 14px; }
  .sk-foot { flex-wrap: wrap; }
  .sk-foot .sk-tip { flex: 1 1 100%; }
  .sk-foot .btn { flex: 1 1 0; }

  /* 技能卡里的输入框：桌面端字号很小，手机上必须回到 16px，
     否则 iOS 一聚焦就整页放大。选择器写具体，才压得住上面的 12.5px。 */
  .sk-item input, .sk-card-head .sk-gname { font-size: 16px; }
  .sk-item { padding: 2px 3px 2px 12px; }
  .sk-item input { padding: 6px 0; }

  /* 手机屏幕窄，电话/邮箱并排会挤到看不清，改成上下排 */
  .ct-row { flex-direction: column; gap: 0; }
  .ct-row > label:first-child { flex: 1 1 auto; }
  .ct-more > summary { font-size: 13px; padding: 8px 0; }
  /* 说明文字在手机上稍放大一点才读得清（它不是输入框，不会触发 iOS 缩放） */
  .fhint { font-size: 12.5px; }

  /* 折叠面板：手机上标题行要够高才好戳（iOS 建议 ≥44px） */
  .fs > .fs-head { padding: 13px 10px; }
  details.fs { margin-bottom: 8px; }

  .preview-panel { flex: 1; min-height: 0; }
  /* 预览头部：压成单行，防止占掉半屏 */
  .preview-head { padding: 7px 10px; gap: 8px; flex-wrap: nowrap; }
  .tpl-btn { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12.5px; gap: 6px; }
  .tpl-btn .now { min-width: 0; }
  .zoomctl { flex: none; gap: 4px; }
  .zoomctl span { min-width: 34px; font-size: 11.5px; }
  .zoomctl .mini { padding: 3px 8px; }
  .preview-stage { padding: 12px; }

  /* 缩略图面板：手机两列 */
  .tpl-sheet { top: 45px; }
  .tpl-sheet-head { padding: 10px 12px; gap: 8px; }
  .tpl-sheet-head .cnt { font-size: 11.5px; }
  .tpl-sheet-body { padding: 4px 12px 20px; }
  .tpl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .tpl-meta { font-size: 11.5px; gap: 4px; }
  .tpl-meta .tpl-id { font-size: 10px; padding: 1px 4px; }

  /* 一次只显示一个面板，由 body[data-mview] 控制 */
  body[data-mview="form"] .preview-panel { display: none; }
  body[data-mview="preview"] .form-panel { display: none; }

  /* 轻提示默认贴 bottom:58px，但手机底部除了切换栏（约 46px）还有页脚（约 24px），
     iPhone 上还要再加底部安全区。另外它是 transform 从 14px 滑上来的，
     入场那一帧比停住的位置低 14px，所以这 96px 里也预留了这段位移。
     ⚠️ 改底部栏 / 页脚高度时这里要跟着改，改完跑 test/checks/footer-layout.js。 */
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* 底部切换栏 */
  .mtabs {
    display: flex; flex: none; background: #fff; border-top: 1px solid var(--line);
  }
  .mtab {
    flex: 1; border: 0; background: #fff; color: var(--muted); font: inherit;
    font-size: 14px; font-weight: 700; padding: 12px 0; cursor: pointer;
  }
  .mtab.active { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

  /* 页脚紧跟切换栏，上边框由切换栏提供，两条线叠着会很臃肿。
     ⚠️ 安全区（iPhone 的 Home 指示条）的 padding 归到**最后一个元素**身上 ——
     页脚就是最后一个。之前这 34px 加在切换栏上，默认没有页脚时是对的，
     现在页脚落到切换栏下面，就会直接坐进 Home 指示条区域里被压住。 */
  .site-foot {
    border-top: 0; font-size: 11px;
    padding: 4px 14px calc(5px + env(safe-area-inset-bottom));
  }
}