:root{
  --ink: rgb(7,19,47);
  --ink-soft: rgba(7,19,47,0.66);
  --line: rgba(7,19,47,0.10);
  --accent: #0051cf;
  --accent-soft: rgba(0,81,207,0.10);
  --glass: rgba(255,255,255,0.72);
  --danger: #dc2626;
}
a{ color: var(--accent); text-decoration: none; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(116deg,#f9fcff 0%, #eefaff 55%, #f3f7ff 100%);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap{ max-width: 880px; margin: 0 auto; padding: 48px 22px 72px; }

/* Hero —— 2026-08-26 grid 两行布局：
 *   第 1 行：头像 + 姓名/职位（顶部对齐）；
 *   第 2 行：联系方式独立全宽（横向换行铺满，项再多也不影响头像行、不留白）。 */
.hero{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px 34px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(7,19,47,0.06);
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"avatar info" "contact contact";
  gap:20px 24px;
  align-items:start;
}
.avatar{
  grid-area:avatar;
  width:84px; height:84px; border-radius:6px;
  background: linear-gradient(135deg,#9bdcff,#0051cf);
  display:grid; place-items:center; color:#fff; font-size:1.9rem; font-weight:800;
  position:relative; overflow:hidden; cursor:pointer;
}
.avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.avatar.has-img img{ display:block; }
.avatar.has-img .avatar-initial{ display:none; }
.avatar-hint{
  position:absolute; inset:0; background:rgba(7,19,47,0.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-size:.7rem; gap:4px; opacity:0; transition:opacity .2s; pointer-events:none;
}
@media (hover: hover){ .avatar:hover .avatar-hint{ opacity:1; } }
/* 2026-08-28：「调整」入口 —— 仅在已有头像时出现，浮在头像底部（不占文档流）。
   放在 .avatar-hint 之后，天然盖在提示层之上；edit-ui 保证导出/打印时被剔除。 */
.avatar-adjust{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:none; padding:3px 0;
  border:0; border-radius:0;
  background:rgba(7,19,47,.74); color:#fff;
  font-family:inherit; font-size:.62rem; letter-spacing:.5px; line-height:1.4;
  cursor:pointer; opacity:0; transition:opacity .2s;
}
.avatar.has-img .avatar-adjust{ display:block; }
@media (hover: hover){ .avatar.has-img:hover .avatar-adjust{ opacity:1; } }
@media (hover: none){ .avatar.has-img .avatar-adjust{ opacity:.92; } }
.avatar-adjust:hover{ background:var(--accent); }
.hero-info{ grid-area:info; min-width:0; }
.hero h1{ margin:0 0 4px; font-size:1.7rem; letter-spacing:.5px; }
.hero .role{ margin:0; color: var(--ink-soft); font-size:.98rem; }
/* 联系方式：grid 第二行，跨全宽，横向换行 */
.contact{ grid-area:contact; margin-top:0; display:flex; gap:16px; flex-wrap:wrap; font-size:.9rem; color:var(--ink-soft); }
.contact a{ color: var(--accent); text-decoration:none; }
.contact a:hover{ text-decoration:underline; }

/* Section card */
section{
  background: var(--glass);
  border:1px solid var(--line);
  border-radius:6px;
  padding: 22px 26px;
  margin-top:22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative;
}
h2{ margin:0 0 14px; font-size:1.12rem; position:relative; padding-left:12px; }
h2::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:2px; background:var(--accent); }
p{ margin:0 0 12px; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding-left:20px; color:var(--ink-soft); }
li{ margin-bottom:8px; }

/* Items */
.item{ margin-bottom:18px; position:relative; padding-right:28px; }
.item:last-child{ margin-bottom:0; }
.item .top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.item .name{ font-weight:700; color:var(--ink); }
.item .meta{ color:var(--ink-soft); font-size:.86rem; white-space:nowrap; }
.item .desc{ margin:6px 0 0; font-size:.92rem; }

/* Tags */
.tags{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tag{
  font-size:.8rem; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
  position:relative; padding-right:22px;
}
footer{ margin-top:30px; text-align:center; color:var(--ink-soft); font-size:.82rem; }

/* ---------- Editable enhancements ---------- */
.editable, .editable-line, .editable-area, .editable-link{
  border: 1px dashed transparent; border-radius:4px; padding:2px 4px; margin:-2px -4px;
  transition: border-color .2s, background .2s, box-shadow .2s; outline:none;
}
.editable:empty::before, .editable-line:empty::before, .editable-area:empty::before{
  content: attr(data-placeholder); color: rgba(7,19,47,0.35); pointer-events:none;
}
@media (hover: hover){
  .editable:hover, .editable-line:hover, .editable-area:hover, .editable-link:hover{
    border-color: rgba(0,81,207,0.35); background: rgba(0,81,207,0.04);
  }
}
.editable:focus, .editable-line:focus, .editable-area:focus, .editable-link:focus{
  border-color: var(--accent); background: rgba(0,81,207,0.06); box-shadow: 0 0 0 3px rgba(0,81,207,0.12);
}
.editable-line{ display:inline-block; white-space:nowrap; }
.editable-area{ display:block; min-height:1.6em; }
.editable-link{ display:inline; }
.editable-link a{ pointer-events:none; }
/* 2026-08-26：文本板块正文与条目 desc 正文字号统一（.92rem） */
.editable-area[data-field="content"]{ font-size:.92rem; }
/* 2026-08-26：页脚（data-field="footer"）用户可按回车换行。
 *  ::before 占位符靠 .editable-area:empty::before 提供；white-space:pre-wrap
 *  让 \n 渲染为实际换行而不是坍缩成空格。 */
.editable-area[data-field="footer"]{
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
}

/* Edit UI controls */
.edit-ui{ opacity:.6; transition:opacity .2s; }
.edit-ui:hover{ opacity:1; }
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; border:1px solid var(--line);
  background:var(--glass); color:var(--ink-soft); cursor:pointer; font-size:.85rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn-icon:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.btn-icon.danger:hover{ background:rgba(220,38,38,0.10); color:var(--danger); border-color:var(--danger); }
/* 触控设备默认可见，桌面端悬浮可见 */
.section-del{ position:absolute; right:12px; top:14px; opacity:.6; }
.item .btn-delete{ position:absolute; right:0; top:0; opacity:.6; }
.tag .btn-delete{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:16px; height:16px; border:none; background:transparent; opacity:.6; font-size:.7rem; padding:0; }
@media (hover: hover){
  .section-del, .item .btn-delete, .tag .btn-delete{ opacity:0; }
  section:hover .section-del, .item:hover .btn-delete, .tag:hover .btn-delete{ opacity:.6; }
  section:hover .section-del:hover, .item:hover .btn-delete:hover, .tag:hover .btn-delete:hover{ opacity:1; }
}
.btn-add{ margin-top:12px; padding:6px 12px; border-radius:6px; border:1px dashed var(--line); background:transparent; color:var(--ink-soft); font-size:.85rem; cursor:pointer; }
.btn-add:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.tag-input{ font-size:.8rem; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--ink); outline:none; width:120px; }
.tag-input:focus{ border-color:var(--accent); }

/* Add-section */
.add-section{ margin-top:20px; padding:12px; border:1px dashed var(--line); border-radius:6px; text-align:center; color:var(--ink-soft); cursor:pointer; background:transparent; font-size:.9rem; }
.add-section:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* Link / section popover */
.popover{
  position:absolute; z-index:100; background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:10px; box-shadow:0 10px 30px rgba(7,19,47,0.12); min-width:240px;
}
.popover label{ display:block; font-size:.75rem; color:var(--ink-soft); margin-bottom:3px; }
.popover input{ width:100%; margin-bottom:8px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; font-size:.85rem; font-family:inherit; }
.popover input:focus{ border-color:var(--accent); outline:none; }
.popover .actions{ display:flex; justify-content:flex-end; gap:6px; margin-top:4px; }
.popover button{ padding:4px 10px; border-radius:4px; border:1px solid var(--line); background:#f8fafc; cursor:pointer; font-size:.8rem; }
.popover button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* 弹窗内的危险操作（如「移除链接」） */
.popover button.danger{ color:var(--danger); border-color:rgba(220,38,38,0.4); background:rgba(220,38,38,0.05); }
.popover button.danger:hover{ background:rgba(220,38,38,0.12); border-color:var(--danger); }
.section-menu{ display:flex; flex-direction:column; gap:6px; padding:8px; }
.section-menu button{ text-align:left; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:#f8fafc; cursor:pointer; font-size:.85rem; }
.section-menu button:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* Download modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(7,19,47,0.35); display:none; align-items:center; justify-content:center; z-index:200; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal-backdrop.show{ display:flex; }
.modal{ background:var(--glass); border:1px solid var(--line); border-radius:6px; padding:24px; max-width:420px; width:calc(100% - 40px); box-shadow:0 20px 50px rgba(7,19,47,0.15); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.modal h3{ margin:0 0 16px; font-size:1.1rem; }
.modal .options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.option-card{ border:1px solid var(--line); border-radius:6px; padding:16px; text-align:center; cursor:pointer; background:rgba(255,255,255,0.45); transition:all .2s; }
.option-card:hover{ border-color:var(--accent); background:var(--accent-soft); }
.option-card .icon{ font-size:1.6rem; margin-bottom:6px; }
.option-card .label{ font-weight:600; font-size:.95rem; }
.option-card .hint{ font-size:.75rem; color:var(--ink-soft); margin-top:4px; }
.modal .close{ margin-top:16px; width:100%; padding:8px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; font-size:.85rem; }
.modal .close:hover{ border-color:var(--accent); color:var(--accent); }
.print-opt{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.82rem; color:var(--ink-soft); cursor:pointer; user-select:none; }
.print-opt input{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }

/* 头像调整器（2026-08-28）：移动 / 缩放 / 旋转 / 裁剪。
   弹窗节点放在 #resume 之外，因此网页版导出不会带上它；带 modal-backdrop + no-print，打印时自动隐藏。 */
.av-backdrop{ z-index:220; }
.av-modal{ max-width:360px; }
.av-tip{ margin:-8px 0 14px; font-size:.76rem; color:var(--ink-soft); line-height:1.65; }
.av-tip b{ color:var(--ink); font-weight:600; }
.av-stage{
  position:relative; width:100%; max-width:280px; margin:0 auto;
  border-radius:6px; overflow:hidden; background:#e9f1fa;
  box-shadow:inset 0 0 0 1px var(--line);
}
.av-stage canvas{ display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
.av-stage.dragging canvas{ cursor:grabbing; }
/* 三分构图参考线，仅拖动时淡入 */
.av-grid{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .15s;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.5) 0 1px, transparent 1px 33.333%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, transparent 1px 33.333%);
}
.av-stage.dragging .av-grid{ opacity:1; }
.av-ctrls{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.av-row{ display:flex; gap:8px; }
.av-rot{
  flex:1; padding:6px 4px; border:1px solid var(--line); border-radius:6px;
  background:rgba(255,255,255,.55); color:var(--ink-soft);
  font-family:inherit; font-size:.8rem; cursor:pointer;
}
.av-rot:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.av-slider{ display:flex; align-items:center; gap:10px; margin:0; font-size:.8rem; color:var(--ink-soft); }
.av-slider > span{ width:28px; flex:none; }
.av-slider input[type=range]{ flex:1; min-width:0; height:18px; accent-color:var(--accent); cursor:pointer; }
.av-slider b{ width:46px; flex:none; text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.av-actions{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.av-spacer{ flex:1; }
.av-btn{
  padding:7px 14px; border-radius:6px; border:1px solid var(--line);
  background:rgba(255,255,255,.55); color:var(--ink-soft);
  font-family:inherit; font-size:.85rem; cursor:pointer;
}
.av-btn:hover{ border-color:var(--accent); color:var(--accent); }
.av-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.av-btn.primary:hover{ background:#0044ad; border-color:#0044ad; color:#fff; }

/* Floating toolbar */
.edit-toolbar{ position:fixed; bottom:22px; right:22px; z-index:150; display:flex; gap:8px; }
.edit-toolbar button{ padding:8px 14px; border-radius:6px; border:1px solid var(--line); background:var(--glass); color:var(--ink); font-size:.85rem; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(7,19,47,0.08); }
.edit-toolbar button:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:560px){
  /* wrap + hero：仍保持两行两列（头像+姓名/职位【并排】+ 联系项独立下方全宽），
     姓名/职位在头像右侧窄空间内自然换行，避免头像旁边留白与内容溢出。 */
  .wrap{ padding:28px 16px 48px; }
  .hero{
    padding:20px 18px;
    grid-template-columns:auto 1fr;
    grid-template-areas:"avatar info" "contact contact";
    gap:14px 16px;
    align-items:start;
  }
  .hero h1{ font-size:1.35rem; }
  .hero .role{ font-size:.88rem; }
  /* 关键：覆盖 .editable-line 的 white-space:nowrap，让姓名/职位/条目名在窄屏自然换行 */
  .editable-line{ white-space:normal; }
  .hero h1, .hero .role, .hero h1 > .editable-line, .hero .role > .editable-line,
  .item .name, .item .meta, .item .desc{
    overflow-wrap:break-word; word-break:break-word;
  }
  /* item：name 上 / meta 下垂直堆叠，避免长条目名挤出屏幕 */
  .item .top{ flex-direction:column; align-items:flex-start; gap:2px; }
  .item .meta{ white-space:normal; font-size:.82rem; }
  .item{ padding-right:0; }
  .item .btn-delete{ right:-2px; }
  /* 联系项：紧凑间距 */
  .contact{ gap:10px 14px; font-size:.88rem; }

  /* 顶栏 + 一次性迁移提示 */
  .topbar{ padding:10px 12px; }
  .topbar .right{ width:100%; margin-left:0; }
  .topbar button.tb-btn{ flex:1 1 auto; justify-content:center; min-width:0; }
  .topbar-menu{ left:8px !important; right:8px; min-width:0; width:auto; }
  .legacy-note{ left:12px; right:12px; bottom:12px; max-width:none; padding:12px 36px 10px 12px; }
  .legacy-note .ln-actions{ width:100%; }
  .legacy-note button{ flex:1 1 auto; text-align:center; }

  /* 弹窗 */
  .modal .options{ grid-template-columns:1fr; }
  .edit-toolbar{ left:16px; right:16px; justify-content:center; }

  /* 头像调整器：缩小留白与画布，保证整屏可见 */
  .av-modal{ padding:18px; }
  .av-tip{ margin:-4px 0 12px; font-size:.74rem; }
  .av-stage{ max-width:240px; }
  .av-rot{ font-size:.76rem; padding:6px 2px; }
}

/* ---------- Print: fit one A4 page ---------- */
/* 基准策略：默认内容在 @media print 下已经压紧到一页 A4；
   若用户新增大量内容导致超出，JS 再整体等比缩放，不硬拉间距。 */
@media print{
  @page { size: A4; margin: 0; }
  html, body{ background:#fff !important; margin:0; padding:0; }
  .wrap{ width:210mm; max-width:210mm; margin:0; padding:10mm; box-shadow:none; }
  .hero{ padding:22px 26px; gap:18px; margin-bottom:12px; background:#fff; border:none !important; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .avatar{ width:72px; height:72px; font-size:1.55rem; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .hero h1{ font-size:1.35rem; margin-bottom:4px; }
  .hero .role{ font-size:.9rem; }
  .contact{ font-size:.86rem; margin-top:8px; gap:14px; }
  section{ padding:16px 20px; margin-top:12px; background:#fff; border:none !important; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; break-inside:avoid; }
  h2{ font-size:1.1rem; margin-bottom:10px; }
  h2::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; top:3px; bottom:3px; }
  p{ font-size:.86rem; margin-bottom:8px; line-height:1.5; }
  ul, li{ line-height:1.5; }
  .item{ margin-bottom:10px; break-inside:avoid; }
  .item .desc{ font-size:.84rem; line-height:1.5; margin-top:5px; }
  /* 打印：文本板块正文与 desc 字号统一（.84rem） */
  .editable-area[data-field="content"]{ font-size:.84rem; }
  .tags{ margin-top:8px; gap:7px; }
  .tag{ font-size:.78rem; padding:3px 9px; background:var(--accent-soft); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  footer{ margin-top:36px; font-size:.82rem; }
  .editable, .editable-line, .editable-area, .editable-link{ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0; margin:0; }
  /* 2026-08-26：打印/导出 PDF 时隐藏全站浮动按钮（FAB hub 由 Worker 注入，编辑态专属，不得进入打印物） */
  .edit-ui, .edit-toolbar, .modal-backdrop, .popover, .no-print, .add-section, .topbar, .legacy-note, .link-toolbar,
  .fab-hub, #fabHub, .ci-add, .ci-actions{ display:none !important; }
  a{ text-decoration:none; color:var(--accent); }
  /* 默认所有板块（含头像 hero 区）无边框；勾选「显示边框线」才显示 */
  body.print-show-border .hero,
  body.print-show-border section{ border:1px solid var(--line) !important; }
  body{ font-size:9.5pt; line-height:1.4; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* JS 动态拟合 A4 时应用的屏幕级打印样式（不进入真实 @media print） */
body.print-fit{ background:#fff; }
body.print-fit .wrap{
  width:210mm; max-width:210mm; margin:0 auto; padding:10mm;
  background:#fff; box-shadow:none;
}
body.print-fit .hero{ padding:22px 26px; gap:18px; margin-bottom:12px; }
body.print-fit .avatar{ width:72px; height:72px; font-size:1.55rem; }
body.print-fit .hero h1{ font-size:1.35rem; }
body.print-fit .hero .role{ font-size:.9rem; }
body.print-fit .contact{ font-size:.86rem; margin-top:8px; }
body.print-fit section{ padding:16px 20px; margin-top:12px; background:#fff; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.print-fit .hero,
body.print-fit section{ border:none !important; }
body.print-fit h2{ font-size:1.1rem; margin-bottom:10px; }
body.print-fit p, body.print-fit .item .desc{ font-size:.86rem; line-height:1.5; }
body.print-fit .editable-area[data-field="content"]{ font-size:.86rem; }
body.print-fit .tags{ margin-top:8px; gap:7px; }
body.print-fit .tag{ font-size:.78rem; padding:3px 9px; }
body.print-fit footer{ margin-top:36px; font-size:.82rem; }
body.print-fit.print-show-border .hero,
body.print-fit.print-show-border section{ border:1px solid var(--line) !important; }
body.print-fit .edit-ui,
body.print-fit .edit-toolbar,
body.print-fit .modal-backdrop,
body.print-fit .popover,
body.print-fit .no-print,
body.print-fit .add-section,
body.print-fit .topbar,
body.print-fit .legacy-note,
body.print-fit .fab-hub,
body.print-fit #fabHub,
body.print-fit .ci-add,
body.print-fit .ci-actions{ display:none !important; }

/* ============================================================
 * 2026-08-26 新增：顶部工具条 + 一次性迁移提示 + 拖拽视觉
 * ============================================================ */

/* 顶部工具条：恢复（含下拉）+ 清空编辑 */
.topbar{
  margin-top: 18px; margin-bottom: 4px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--glass);
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(7,19,47,0.04);
}
.topbar .left{ font-size:.85rem; color:var(--ink-soft); }
.topbar .right{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.topbar button.tb-btn{
  padding: 7px 14px; border-radius:6px; border:1px solid var(--line);
  background: rgba(255,255,255,.65); color:var(--ink);
  font-size:.85rem; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition: all .15s;
}
.topbar button.tb-btn:hover{
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.topbar button.tb-btn.danger:hover{
  border-color: var(--danger); color: var(--danger); background: rgba(220,38,38,0.10);
}
.topbar .tb-caret{ font-size: .7rem; opacity:.7; }
.topbar-flash{
  font-size:.9rem; font-weight:600; padding:2px 8px;
}

.topbar-menu{ min-width:280px; padding:8px; }
.topbar-menu button{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  width:100%; box-sizing:border-box;
  padding:9px 10px; border:0; border-radius:6px;
  background:transparent; cursor:pointer; font-size:.85rem; color:var(--ink);
  font-family:inherit; margin-bottom:2px;
}
.topbar-menu button:last-child{ margin-bottom:0; }
/* 仅保留一个容器框：按钮扁平化，去掉各自的边框/底纹，hover 时给柔和强调 */
.topbar-menu button:hover{ background: var(--accent-soft); color: var(--accent); }
.topbar-menu button .ico{
  font-size:1.05rem; width:22px; flex-shrink:0; text-align:center;
}
.topbar-menu button strong{ font-weight:600; }
.topbar-menu button small{ color:var(--ink-soft); font-size:.75rem; }

/* 一次性迁移提示（旧 localStorage 草稿）—— 右下角浮窗，不占版心位置 */
.legacy-note{
  position:fixed; bottom:22px; right:22px; z-index:150;
  max-width:380px;
  padding:14px 38px 12px 14px;
  background: rgba(255,243,205,.95);
  border:1px solid rgba(146,99,30,.45);
  border-radius:6px; font-size:.86rem; color:#5e4514;
  box-shadow: 0 10px 28px rgba(7,19,47,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* 关键：HTML hidden 属性默认 display:none，但 .legacy-note 的 display:flex 会覆盖，
   导致首屏在 bindLegacyNote 跑起来前就闪一下。改成只在显式显示时应用 display:flex。 */
.legacy-note:not([hidden]){
  display:flex; flex-direction:column; gap:10px;
}
.legacy-note .ln-text{ min-width:0; line-height:1.5; }
.legacy-note .ln-text b{ font-weight:600; }
.legacy-note .ln-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.legacy-note button{
  padding:6px 12px; border-radius:6px; border:1px solid rgba(146,99,30,.45);
  background: #fff; color:#5e4514; font-size:.82rem; cursor:pointer; font-family:inherit;
}
.legacy-note button:hover{ background:rgba(146,99,30,.12); }
.legacy-note button.primary{
  background: rgba(146,99,30,.92); color:#fff; border-color:rgba(146,99,30,.92);
}
.legacy-note .ln-close{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; padding:0;
  border:0; background:transparent; color:#5e4514;
  font-size:1.05rem; line-height:1; cursor:pointer; border-radius:4px;
}
.legacy-note .ln-close:hover{ background:rgba(146,99,30,.15); }

/* ---------- 拖拽视觉 ---------- */

/* 板块头部：标题正常排布，handle 以绝对定位浮在左侧留白，不占布局 */
.section-head{ display:block; }

/* 条目：去掉 grid，handle 绝对定位浮在左侧，正文回到原始排版 */
.item{
  margin-bottom:18px; position:relative; padding-right:28px;
}
.item:last-child{ margin-bottom:0; }
.item .item-body{ min-width:0; }

/* 拖拽手柄：六个点，绝对定位悬浮在内容左侧留白，不影响实际预览排版 */
.drag-handle{
  position:absolute;
  width:18px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor: grab; border-radius:4px;
  color: var(--ink-soft); opacity:0;
  transition: opacity .15s;
  user-select:none; -webkit-user-select:none;
  touch-action: none;
  z-index:5;
}
.drag-handle:active{ cursor: grabbing; }
.drag-handle:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.drag-handle-dots{
  display:inline-block; width:12px; height:10px;
  background:
    radial-gradient(circle, currentColor 1.3px, transparent 1.6px) 0 0 / 5px 5px,
    radial-gradient(circle, currentColor 1.3px, transparent 1.6px) 4px 0 / 5px 5px;
  background-repeat: repeat;
}
/* 板块手柄：浮在 section 左侧留白，与 h2 首行对齐 */
.section-head > .drag-handle{ left:2px; top:24px; }
/* 条目手柄：浮在 item 左侧留白（负向进入 section 内边距区，不挤压正文） */
.item > .drag-handle{ left:-22px; top:2px; }
@media (hover: hover){
  section:hover .section-head > .drag-handle,
  .item:hover > .drag-handle{ opacity:.7; }
  .drag-handle:hover{ opacity:1 !important; color:var(--accent); }
}
/* 触控设备默认可点 */
@media (hover: none){
  .drag-handle{ opacity:.55; }
}

/* 拖拽中半透明 */
.drag-ghost{ opacity:.35; }

/* 拖入位指示线 */
section[data-sec],
.items > .item,
.tags > .tag{
  position:relative;
  transition: transform .12s ease;
}
section[data-sec].drop-before::before,
section[data-sec].drop-after::after,
.items > .item.drop-before::before,
.items > .item.drop-after::after,
.tags > .tag.drop-before::before,
.tags > .tag.drop-after::after{
  content:""; position:absolute; left:-2px; right:-2px; height:3px;
  background: var(--accent); border-radius:2px;
  pointer-events:none;
}
section[data-sec].drop-before::before,
.items > .item.drop-before::before,
.tags > .tag.drop-before::before{ top:-2px; }
section[data-sec].drop-after::after,
.items > .item.drop-after::after,
.tags > .tag.drop-after::after{ bottom:-2px; }

/* 标签拖拽中显示"被替换"提示（防止纯 6 dots 不易辨识） */
.tag[draggable="true"]{ cursor:grab; }
.tag[draggable="true"]:active{ cursor:grabbing; }
.tag.drag-ghost{ opacity:.3; }

/* ---------- 头像区联系方式：可增删的联系项 ---------- */
/* 每项自成一个定位上下文，操作按钮绝对定位浮在其上方留白，不占文档流 → 不影响预览排版 */
.contact-item{ position:relative; display:inline-flex; align-items:center; }
.ci-actions{
  position:absolute; z-index:6;
  bottom:calc(100% + 3px); right:-4px;
  display:flex; gap:2px;
  opacity:0; visibility:hidden;           /* hidden 时不吃点击，避免挡住上方职位行 */
  transition: opacity .15s;
}
/* 桌面悬浮显示；触控设备靠「点进去编辑」触发 :focus-within 显示 */
@media (hover: hover){
  .contact-item:hover .ci-actions{ opacity:1; visibility:visible; }
}
.contact-item:focus-within .ci-actions{ opacity:1; visibility:visible; }
.ci-actions .btn-icon{ width:20px; height:20px; font-size:.7rem; border-radius:4px; }
/* 新增按钮：跟随在联系项之后，仅编辑态可见（打印/导出会被剔除） */
.ci-add{
  padding:1px 9px; border-radius:999px;
  border:1px dashed var(--line); background:transparent;
  color:var(--ink-soft); font-size:.78rem; cursor:pointer;
  font-family:inherit; line-height:1.6; align-self:center; white-space:nowrap;
}
.ci-add:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* ---------- 选区链接工具栏（desc / 内容区选中文本时出现） ---------- */
.link-toolbar{
  position:absolute; z-index:180;
  background: var(--ink); color:#fff;
  border-radius:6px; padding:3px;
  box-shadow: 0 8px 22px rgba(7,19,47,.25);
  display:flex; gap:1px;
  font-size:.82rem;
  transform: translate(-50%, calc(-100% - 6px));
  white-space:nowrap;
}
.link-toolbar::after{
  content:""; position:absolute; left:50%; bottom:-5px;
  width:10px; height:10px; background:var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.link-toolbar button{
  background:transparent; color:#fff; border:0; cursor:pointer;
  padding:5px 10px; border-radius:4px; font-size:.82rem; font-family:inherit;
  display:inline-flex; align-items:center; gap:5px;
}
.link-toolbar button:hover{ background: rgba(255,255,255,.16); }
.link-toolbar button:active{ background: rgba(255,255,255,.28); }

/* 移动端规则已合并到上方统一的 @media (max-width:560px) 块（187 行附近） */

/* 打印时全隐藏（已有 print + print-fit 块设了 .topbar .legacy-note，此处确保拖拽元素也不进打印） */
@media print{
  .drag-handle, .drop-before, .drop-after, .drag-ghost, .link-toolbar{ all: unset; }
}

/* ============================================================
 * 2026-08-26 新增：骨架屏（Shimmer loading）
 * 仅在 .resume-loading 下显示，真实内容渲染后整体移除。
 * ============================================================ */

/* 基础：骨架元素默认不可见 */
.skeleton-title,
.skeleton-line,
.skeleton-chip,
.skeleton-heading,
.skeleton-section,
.skeleton-tags,
.skeleton-tag{ display: none !important; }

/* 动画底纹 */
.resume-loading .skeleton-title,
.resume-loading .skeleton-line,
.resume-loading .skeleton-chip,
.resume-loading .skeleton-heading,
.resume-loading .skeleton-section,
.resume-loading .skeleton-tag{
  display: block !important;
  background: linear-gradient(90deg,
    rgba(7,19,47,0.06) 0%,
    rgba(7,19,47,0.10) 50%,
    rgba(7,19,47,0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  -webkit-animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@-webkit-keyframes skeleton-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* 加载期间隐藏会被替换的真实内容（骨架屏覆盖其上，避免首屏闪烁） */
.resume-loading .hero-info > h1,
.resume-loading .hero-info > .role,
.resume-loading #contact > .contact-item,
.resume-loading footer .editable-area{ display: none !important; }

/* hero 区骨架 */
.resume-loading .skeleton-title{
  width: 220px;
  height: 1.7rem;
  margin: 0 0 10px;
  border-radius: 4px;
}
.resume-loading .skeleton-line.short{
  width: 160px;
  height: .98rem;
}
.resume-loading .skeleton-line.center{
  margin-left: auto;
  margin-right: auto;
}
.resume-loading .skeleton-chip{
  display: inline-block !important;
  width: 100px;
  height: 18px;
}

/* 板块骨架 */
.resume-loading .skeleton-section{
  display: block !important;
  padding: 22px 26px;
  margin-top: 22px;
  border-radius: 6px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.resume-loading .skeleton-heading{
  width: 120px;
  height: 1.12rem;
  margin-bottom: 14px;
  margin-left: 12px;
}
.resume-loading .skeleton-line{
  width: 100%;
  height: .92rem;
  margin-bottom: 10px;
}
.resume-loading .skeleton-item{ margin-bottom: 18px; }
.resume-loading .skeleton-item:last-child{ margin-bottom: 0; }

/* 标签骨架 */
.resume-loading .skeleton-tags{
  display: flex !important;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  background: transparent;
  border: none;
  animation: none;
  -webkit-animation: none;
}
.resume-loading .skeleton-tag{
  display: inline-block !important;
  width: 72px;
  height: 26px;
  border-radius: 999px;
}

/* 页脚骨架 */
.resume-loading footer .skeleton-line.short{
  width: 320px;
  height: .82rem;
}

@media (max-width:560px){
  .resume-loading .skeleton-title{ width: 160px; height: 1.35rem; }
  .resume-loading .skeleton-line.short{ width: 120px; }
  .resume-loading .skeleton-heading{ width: 90px; }
  .resume-loading footer .skeleton-line.short{ width: 220px; }
}