/* ══════════════════════════════════════════════════════════════
   韦氏家族世系图谱 — 视觉

   取「蓝印本」之意：族谱定稿前以蓝墨试印的旧例。
   冷白纸、墨字、蓝印为纲，朱砂只落在需要存疑的地方。
   单一视觉世界，不做深色反转。
   ══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* 纸与墨 */
  --paper:    #f7f6f2;   /* 冷白纸 */
  --paper-2:  #edebe4;   /* 界内底 */
  --paper-3:  #e3e0d6;
  --card:     #fffefb;
  --ink:      #1b1e22;
  --ink-2:    #5d6570;   /* 次级墨，偏青 */
  --ink-3:    #8b9099;

  /* 界线 */
  --rule:      #cfcdc4;
  --rule-soft: #e2e0d8;
  --rule-deep: #a8a69c;

  /* 蓝印 —— 纲 */
  --indigo:      #2f5578;
  --indigo-mid:  #5b7c9d;
  --indigo-soft: #b9cad9;
  --indigo-wash: #eaeff4;

  /* 朱砂 —— 只用于存疑与移除 */
  --vermilion:      #a4382c;
  --vermilion-wash: #f5e9e6;

  /* 人物 */
  --male:      #2f5578;  --male-wash:   #e7eef5;
  --female:    #8d5a7c;  --female-wash: #f4ebf1;
  --kin:       #7a7266;  --kin-wash:    #f0ede5;

  --ok: #3f6b4a;

  --shadow-1: 0 1px 2px rgba(30,35,45,.06);
  --shadow-3: 0 12px 32px rgba(30,35,45,.16);

  --serif: "Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --mono: ui-monospace,SFMono-Regular,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  margin:0;min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;
}
.wrap{
  max-width:1600px;margin:0 auto;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
}

/* ── 谱头 ─────────────────────────────────────────────────── */
.masthead{text-align:center;padding-bottom:12px;position:relative}
.masthead h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(20px,3.4vw,27px);margin:0;
  letter-spacing:.42em;text-indent:.42em;color:var(--ink);
}
.masthead .sub{
  margin-top:5px;font-size:11px;letter-spacing:.26em;
  color:var(--ink-3);text-indent:.26em;
}
/* 古籍双界线 */
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-top:1px solid var(--rule-deep);
  border-bottom:1px solid var(--rule);
}

/* ── 数据条 ───────────────────────────────────────────────── */
.figures{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:center;gap:0 24px;
}
.fig{display:flex;align-items:baseline;gap:6px;position:relative;padding-right:24px}
.fig::after{
  content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:var(--rule-soft);
}
.fig:last-child{padding-right:0}
.fig:last-child::after{display:none}
.fig b{
  font-size:19px;font-weight:600;color:var(--indigo);
  font-variant-numeric:tabular-nums;line-height:1;
}
.fig span{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em}

.progress{max-width:640px;margin:0 auto;width:100%}
.progress .track{height:3px;background:var(--rule-soft);overflow:hidden}
.progress .track i{display:block;height:100%;width:0;background:var(--indigo);transition:width .45s ease}
.progress .cap{
  margin-top:6px;font-size:11.5px;color:var(--ink-3);text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ── 工具栏 ───────────────────────────────────────────────── */
.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 11px;background:var(--paper-2);
  border:1px solid var(--rule-soft);border-radius:4px;
}
.toolbar[hidden]{display:none}
.toolbar .spacer{flex:1 1 auto;min-width:0}
.toolbar .div{width:1px;align-self:stretch;background:var(--rule-soft);margin:0 2px}

.field{position:relative;display:flex;align-items:center}
.field input{
  width:190px;padding:6px 10px 6px 27px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:3px;outline:none;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{border-color:var(--indigo);box-shadow:0 0 0 2px var(--indigo-wash)}
.field .ico{
  position:absolute;left:8px;width:12px;height:12px;pointer-events:none;
  border:1.4px solid var(--ink-3);border-radius:50%;
}
.field .ico::after{
  content:"";position:absolute;right:-5px;bottom:-4px;width:5px;height:1.4px;
  background:var(--ink-3);transform:rotate(45deg);
}

.btn{
  font:inherit;font-size:13px;padding:6px 11px;cursor:pointer;white-space:nowrap;
  color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:3px;
  transition:border-color .12s, color .12s, background .12s;
}
.btn:hover{border-color:var(--indigo-mid);color:var(--indigo)}
.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.primary:hover{background:#264866;border-color:#264866;color:#fff}
.btn.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.danger:hover{border-color:var(--vermilion);color:var(--vermilion)}
.btn.back{padding-left:9px}
.btn.back::before{content:"←";margin-right:6px;color:var(--indigo)}
.btn.back:hover::before{color:inherit}

.check{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13px;color:var(--ink-2);padding:6px 9px;
  background:var(--card);border:1px solid var(--rule);border-radius:3px;white-space:nowrap;
}
.check input{accent-color:var(--indigo);margin:0;width:13px;height:13px}
.check:hover{border-color:var(--indigo-mid)}

/* 以人为中心时的极简工具栏 */
.toolbar.focus-bar{background:var(--indigo-wash);border-color:var(--indigo-soft)}
.focus-who{display:flex;align-items:baseline;gap:9px}
.focus-who b{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.focus-who em{font-style:normal;font-size:11.5px;color:var(--indigo);letter-spacing:.04em}

/* 编辑条 */
.editbar{
  display:none;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 11px;background:var(--vermilion-wash);
  border:1px solid #e0c4bf;border-radius:4px;font-size:13px;
}
.editbar.on{display:flex}
.editbar .step{color:var(--vermilion);font-weight:600}
.editbar .savehint{color:var(--ok);font-size:12px}

/* ── 画布 ─────────────────────────────────────────────────── */
.stage{display:flex;gap:12px;align-items:stretch;position:relative}
#canvas{
  position:relative;flex:1;min-width:0;
  height:min(74vh,860px);min-height:420px;
  background:var(--card);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow-1);overflow:hidden;cursor:grab;
}
#canvas.grabbing{cursor:grabbing}
#canvas.editing{cursor:crosshair}
#graph{display:block;width:100%;height:100%;touch-action:none;user-select:none}

/* 世代界栏 */
.band-sep{stroke:var(--rule);stroke-width:1;stroke-dasharray:1.5 5;stroke-linecap:round}
.band-tx{font-size:11.5px;font-family:var(--sans);fill:var(--ink-3);letter-spacing:.08em}
.band-tx.self{fill:var(--indigo);font-weight:600}

/* 家庭外框：本人与配偶同框 */
.fam-frame{fill:var(--paper-2);stroke:var(--rule-deep);stroke-width:1.2}
.group.orphan .fam-frame{stroke:var(--rule-soft);stroke-width:1;stroke-dasharray:4 4}
.group.focus .fam-frame{stroke:var(--indigo);stroke-width:2.2;stroke-dasharray:none}
.fam-tie-mark{font-size:10px;fill:var(--indigo-mid);text-anchor:middle;
  dominant-baseline:middle;font-family:var(--sans)}

/* 人物卡：仿古籍双边 */
.card{cursor:pointer}
.card-outer{fill:var(--card);stroke:var(--rule);stroke-width:1}
.card-inner{fill:none;stroke:var(--rule-soft);stroke-width:.7}
.g-male   .card-outer{stroke:#b9c8d6}
.g-female .card-outer{stroke:#d8c3d0}
.g-spouse .card-outer{stroke:var(--rule)}
.avatar-bg{stroke:none}
.g-male   .avatar-bg{fill:var(--male-wash)}
.g-female .avatar-bg{fill:var(--female-wash)}
.g-spouse .avatar-bg{fill:var(--kin-wash)}
.avatar-fig{opacity:.5}
.g-male   .avatar-fig{fill:var(--male)}
.g-female .avatar-fig{fill:var(--female)}
.g-spouse .avatar-fig{fill:var(--kin)}
.badge-bg{fill:var(--paper-2);stroke:var(--rule-soft);stroke-width:.8}
.badge-tx{font-size:9.5px;font-family:var(--sans);text-anchor:middle;dominant-baseline:middle}
.g-male   .badge-tx{fill:var(--male)}
.g-female .badge-tx{fill:var(--female)}
.g-spouse .badge-tx{fill:var(--kin)}
.card-name{font-family:var(--serif);text-anchor:middle;dominant-baseline:middle;fill:var(--ink)}
.card-alias{font-size:9.5px;font-family:var(--sans);text-anchor:middle;
  dominant-baseline:middle;fill:var(--ink-3)}
.card-alias.life{font-size:9px;fill:var(--kin);font-variant-numeric:tabular-nums}
.gen-tag{font-size:10px;font-family:var(--sans);text-anchor:middle;fill:var(--ink-3)}
.note-dot{fill:var(--vermilion);opacity:.8}
.card:hover .card-outer{stroke:var(--indigo);stroke-width:1.8}
.card:hover .note-dot{opacity:1}
.card.dim{opacity:.15}
.card.hit .card-outer{stroke:var(--indigo);stroke-width:2.2}
.card.pick .card-outer{stroke:var(--ok);stroke-width:2.2}

/* 世系连线 */
.link{fill:none;stroke:var(--indigo);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.link.tentative{stroke-dasharray:6 5;opacity:.55}
.link.on{stroke-width:2.6}
.link-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.editing .link{cursor:pointer}

/* 展开 / 收起 */
.toggle-btn{cursor:pointer}
.toggle-btn circle{fill:var(--card);stroke:var(--indigo-mid);stroke-width:1.2}
.toggle-btn:hover circle{stroke:var(--indigo);fill:var(--indigo-wash)}
.toggle-btn path{stroke:var(--indigo);stroke-width:1.5;stroke-linecap:round;fill:none}
.toggle-btn text{font-size:8.5px;font-family:var(--sans);text-anchor:middle;fill:var(--indigo-mid)}

.empty-tip{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:14px;text-align:center;padding:24px;pointer-events:none;
}

/* ── 人物浮层 ─────────────────────────────────────────────── */
#pop{
  position:fixed;z-index:200;
  width:min(560px,calc(100vw - 32px));max-height:min(84vh,720px);
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--card);border:1px solid var(--rule-deep);border-radius:5px;
  box-shadow:var(--shadow-3);font-size:13px;
  display:none;flex-direction:column;overflow:hidden;
}
#pop.on{display:flex}
#pop .ph{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.05em;line-height:1.3}
#pop .psub{font-size:11.5px;color:var(--ink-3);margin-top:2px;letter-spacing:.04em}
#pop .life-line{
  margin:8px 0 0;padding:6px 9px;background:var(--indigo-wash);
  border-left:2px solid var(--indigo-mid);font-size:12px;
  font-variant-numeric:tabular-nums;
}
#pop .life-line b{color:var(--indigo);font-weight:600}
#pop .sec{border-top:1px solid var(--rule-soft);margin-top:11px;padding-top:9px}
#pop .sec-t{font-size:10.5px;color:var(--ink-3);margin-bottom:7px;letter-spacing:.12em}
#pop .sec.note{
  background:var(--vermilion-wash);margin-left:-15px;margin-right:-15px;
  padding:9px 15px;border-top-color:#e6cec9;
}
#pop .note-tx{font-size:11.5px;line-height:1.8;color:var(--ink-2);margin-bottom:6px}
#pop .note-tx:last-child{margin-bottom:0}
#pop .rel{font-size:12.5px;color:var(--ink-2);margin-bottom:5px;line-height:1.7}
#pop .row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
#pop .tent{
  font-size:10px;padding:1px 5px;background:var(--vermilion-wash);
  color:var(--vermilion);border:1px solid #e5cbc6;
}
#pop button{
  font:inherit;font-size:12px;padding:4px 9px;cursor:pointer;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:3px;
}
#pop button:hover{border-color:var(--indigo-mid);color:var(--indigo)}
#pop button.pri{background:var(--indigo);border-color:var(--indigo);color:#fff}
#pop button.pri:hover{background:#264866;color:#fff}
#pop button.del{color:var(--vermilion);background:transparent;border-color:transparent;padding:1px 5px}
#pop button.del:hover{background:var(--vermilion-wash);border-color:#e5cbc6}
#pop select,#pop input.dt{
  font:inherit;font-size:12px;padding:4px 7px;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
}
#pop input.dt{flex:1;min-width:0}
#pop input.dt:focus,#pop select:focus{outline:none;border-color:var(--indigo)}
#pop .close{
  position:absolute;top:7px;right:9px;cursor:pointer;color:var(--ink-3);
  font-size:16px;line-height:1;background:none;border:none;padding:2px 5px;
}
#pop .close:hover{color:var(--vermilion)}

/* ── 待补清单 ─────────────────────────────────────────────── */
#todo{
  display:none;width:262px;flex:none;overflow:auto;
  height:min(74vh,860px);padding:12px 14px;font-size:12.5px;
  background:var(--card);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow-1);
}
#todo.on{display:block}
#todo h4{
  margin:12px 0 7px;font-size:11.5px;color:var(--indigo);font-weight:600;
  letter-spacing:.08em;padding-bottom:5px;border-bottom:1px solid var(--rule-soft);
}
#todo h4:first-child{margin-top:0}
#todo .gen{color:var(--ink-3);margin:7px 0 3px;font-size:11px;letter-spacing:.06em}
#todo .p{
  display:inline-block;margin:2px 3px 2px 0;padding:2px 8px;cursor:pointer;
  font-family:var(--serif);font-size:13px;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:2px;
}
#todo .p:hover{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-wash)}
.todo-close{
  display:none;width:100%;margin-bottom:9px;padding:6px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:3px;
}

/* ── 图例 / 附录 ──────────────────────────────────────────── */
.legend{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-3);
}
.legend .sw{
  display:inline-block;width:11px;height:11px;margin-right:5px;
  vertical-align:-1px;border:1px solid;
}
.sw.male{background:var(--male-wash);border-color:var(--male)}
.sw.female{background:var(--female-wash);border-color:var(--female)}
.sw.spouse{background:var(--kin-wash);border-color:var(--kin)}
.sw.solid{background:var(--paper-2);border-color:var(--rule-deep)}
.sw.dash{background:none;border-style:dashed;border-color:var(--rule)}
.sw.line-dash{
  background:none;border:none;height:0;width:15px;border-radius:0;
  border-top:2px dashed var(--indigo);margin-bottom:3px;
}
.only-mobile{display:none}

details{background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;padding:9px 15px}
summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
summary:hover{color:var(--indigo)}
details pre{
  overflow-x:auto;font-size:12.5px;line-height:2;white-space:pre-wrap;word-break:break-all;
  font-family:var(--serif);color:var(--ink-2);
}
#jsonOut{
  width:100%;height:160px;margin-top:9px;padding:9px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:3px;
}
.json-actions{margin-top:9px}

footer{
  text-align:center;color:var(--ink-3);font-size:11.5px;line-height:1.9;
  padding-top:12px;border-top:1px solid var(--rule-soft);
}
.fallback{
  display:none;margin:18px auto;max-width:620px;padding:14px 18px;
  background:var(--vermilion-wash);border:1px solid var(--vermilion);
  border-radius:4px;font-size:13px;
}
code{font-family:var(--mono);font-size:12px;background:var(--paper-2);padding:1px 4px}

/* ══ 响应式 ══════════════════════════════════════════════ */
@media (max-width:1024px){
  #todo{
    position:absolute;right:10px;top:10px;bottom:10px;height:auto;
    z-index:15;width:min(268px,72vw);box-shadow:var(--shadow-3);
  }
  .todo-close{display:block}
}
@media (max-width:640px){
  .wrap{padding:14px 11px calc(20px + env(safe-area-inset-bottom));gap:11px}
  .masthead h1{letter-spacing:.28em;text-indent:.28em}
  .figures{gap:0 15px}
  .fig{padding-right:15px}
  .fig.opt{display:none}
  .fig b{font-size:17px}
  .toolbar,.editbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 9px}
  .toolbar::-webkit-scrollbar,.editbar::-webkit-scrollbar{display:none}
  .toolbar>*,.editbar>*{flex:none}
  .toolbar .spacer{display:none}
  .field input{width:132px}
  #canvas{height:60vh;min-height:330px}
  #pop{
    left:0;right:0;bottom:0;top:auto;width:auto;border-radius:6px 6px 0 0;
    max-height:64vh;padding:15px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px rgba(30,35,45,.2);
  }
  #pop button{padding:6px 11px;font-size:13px}
  #todo{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:58vh;
    border-radius:6px 6px 0 0;z-index:16;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .legend{gap:10px;font-size:11px}
  .only-mobile{display:inline}
  .only-desktop{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .figures,.progress,.legend,footer,details{display:none}
  #canvas{height:80vh}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .toolbar,.editbar,.legend,.progress,details,footer,#todo,#pop{display:none!important}
  #canvas{height:auto;min-height:0;border:none;box-shadow:none}
  .wrap{max-width:none;padding:0}
}

/* ══ 在线编辑：账号、登录、变更历史 ══════════════════════════ */
.account{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.account .who{color:var(--indigo);font-weight:600}
.account .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.account .dot.off{background:var(--ink-3)}
.account button{
  font:inherit;font-size:12px;padding:3px 8px;cursor:pointer;color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
}
.account button:hover{border-color:var(--indigo-mid);color:var(--indigo)}

.modal{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(27,30,34,.42);
}
.modal.on{display:flex}
.modal .panel{
  width:min(360px,100%);max-height:86vh;overflow:auto;
  background:var(--card);border:1px solid var(--rule-deep);border-radius:5px;
  box-shadow:var(--shadow-3);padding:20px 22px;
}
.modal .panel.wide{width:min(560px,100%)}
.modal h3{
  margin:0 0 4px;font-family:var(--serif);font-size:17px;font-weight:700;
  letter-spacing:.08em;color:var(--ink);
}
.modal .hint{margin:0 0 16px;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.lf{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.lf>span{width:44px;flex:none;font-size:12.5px;color:var(--ink-2);text-align:right}
.lf input{
  flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 10px;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:3px;outline:none;
}
.lf input:focus{border-color:var(--indigo);background:var(--card);box-shadow:0 0 0 2px var(--indigo-wash)}
.lf.cap input{flex:0 1 90px;letter-spacing:.28em;text-transform:uppercase;font-family:var(--mono)}
.cap-img{
  width:120px;height:40px;flex:none;padding:0;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cap-img:hover{border-color:var(--indigo-mid)}
.cap-img svg{display:block}
.lerr{
  min-height:18px;font-size:12px;color:var(--vermilion);
  margin:2px 0 10px;padding-left:54px;
}
.lact{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

.hist-list{display:flex;flex-direction:column;gap:1px;margin-bottom:14px}
.hist-row{
  display:flex;align-items:baseline;gap:10px;padding:8px 10px;
  background:var(--paper-2);border-left:2px solid var(--rule);font-size:12.5px;
}
.hist-row.now{border-left-color:var(--indigo);background:var(--indigo-wash)}
.hist-row .v{
  font-variant-numeric:tabular-nums;color:var(--indigo);font-weight:600;
  min-width:38px;flex:none;
}
.hist-row .sum{flex:1;min-width:0;color:var(--ink)}
.hist-row .by{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.hist-row .at{color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hist-row button{
  font:inherit;font-size:11.5px;padding:2px 8px;cursor:pointer;flex:none;
  color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:3px;
}
.hist-row button:hover{border-color:var(--indigo);color:var(--indigo)}

@media (max-width:640px){
  .account{font-size:12px}
  .modal{padding:0;align-items:flex-end}
  .modal .panel{width:100%;border-radius:6px 6px 0 0;max-height:90vh}
  .hist-row{flex-wrap:wrap;gap:4px 8px}
}

/* ══ 人物详情：头部 / 页签 / 表单 / 照片 ══════════════════════ */
.pop-head{
  display:flex;gap:14px;align-items:center;padding:16px 18px 13px;
  border-bottom:1px solid var(--rule-soft);background:var(--paper-2);
}
.pop-face{width:54px;height:54px;flex:none}
.pop-face img,.pop-face .face-ph{
  width:100%;height:100%;display:block;border-radius:4px;
  border:1px solid var(--rule);object-fit:cover;
}
.pop-face .face-ph{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;font-weight:600;
}
.face-ph.male{background:var(--male-wash);color:var(--male)}
.face-ph.female{background:var(--female-wash);color:var(--female)}
.face-ph.spouse{background:var(--kin-wash);color:var(--kin)}
.pop-id{min-width:0;flex:1}
.pop-id .ph{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.06em;line-height:1.3}
.pop-id .ph .alias{font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:0}
.pop-id .psub{font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.04em}
.pop-id .plife{font-size:11.5px;color:var(--indigo);margin-top:4px;font-variant-numeric:tabular-nums}

.pop-tabs{display:flex;padding:0 18px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.pop-tab{
  font:inherit;font-size:13px;padding:9px 14px;cursor:pointer;
  color:var(--ink-2);background:none;border:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.pop-tab:hover{color:var(--indigo)}
.pop-tab.on{color:var(--indigo);font-weight:600;border-bottom-color:var(--indigo)}
.pop-tab .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--vermilion);vertical-align:2px;margin-left:2px;
}

.pop-body{flex:1;min-height:0;overflow:auto;padding:16px 18px}
.pop-foot{
  display:flex;align-items:center;gap:8px;padding:11px 18px;
  border-top:1px solid var(--rule-soft);background:var(--paper-2);
}
.pop-foot .spacer{flex:1}
#pop .close{
  position:absolute;top:9px;right:11px;z-index:2;cursor:pointer;color:var(--ink-3);
  font-size:18px;line-height:1;background:none;border:none;padding:2px 6px;
}
#pop .close:hover{color:var(--vermilion)}

/* 只读信息 */
.kv{display:grid;grid-template-columns:76px 1fr;gap:7px 14px;margin:0}
.kv dt{color:var(--ink-3);font-size:12px}
.kv dd{margin:0;color:var(--ink)}
.tip{color:var(--ink-3);font-size:12px;margin:10px 0 0}

/* 表单 */
.form{display:flex;flex-direction:column;gap:10px}
.frow{display:flex;align-items:flex-start;gap:12px}
.frow>label{width:76px;flex:none;font-size:12px;color:var(--ink-2);padding-top:7px;text-align:right}
.fctrl{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.fctrl input,.fctrl select{
  font:inherit;font-size:13px;padding:6px 9px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  flex:1;min-width:0;outline:none;
}
.fctrl input:focus,.fctrl select:focus{border-color:var(--indigo);background:var(--card)}
.fhint{font-size:11px;color:var(--ink-3);flex-basis:100%}
.form-act{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.ava-edit{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ava-prev{width:46px;height:46px;flex:none}
.ava-prev img,.ava-prev .face-ph{
  width:100%;height:100%;display:block;border-radius:3px;
  border:1px solid var(--rule);object-fit:cover;
}
.ava-prev .face-ph{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px}
.note-edit{
  width:100%;min-height:180px;font:inherit;font-size:13px;line-height:1.9;padding:10px;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  resize:vertical;outline:none;
}
.note-edit:focus{border-color:var(--indigo);background:var(--card)}
.note-view p{margin:0 0 9px;line-height:1.85;color:var(--ink-2)}
.note-view p:last-child{margin-bottom:0}

/* 关系页签 */
.rel-sec{margin-bottom:16px}
.rel-sec:last-child{margin-bottom:0}
.rel-sec h5{
  margin:0 0 7px;font-size:11.5px;font-weight:600;color:var(--indigo);
  letter-spacing:.1em;padding-bottom:5px;border-bottom:1px solid var(--rule-soft);
}
.rel-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 0;border-bottom:1px dotted var(--rule-soft);
}
.rel-row:last-child{border-bottom:none}
.rel-row .rn{font-family:var(--serif);font-size:15px;min-width:62px}
.rel-row .rt{font-size:11.5px;color:var(--ink-3)}
.rel-row select{
  font:inherit;font-size:11.5px;padding:3px 6px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
}
.rel-row .mini{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-3)}
.rel-row .mini input{margin:0;accent-color:var(--vermilion)}
.rel-row .del{
  font:inherit;font-size:11px;padding:2px 7px;cursor:pointer;margin-left:auto;
  color:var(--vermilion);background:transparent;border:1px solid transparent;border-radius:3px;
}
.rel-row .del:hover{background:var(--vermilion-wash);border-color:#e5cbc6}
.rel-none{font-size:12px;color:var(--ink-3);padding:5px 0}
.rel-sec.build{background:var(--indigo-wash);margin:16px -18px -16px;padding:12px 18px 16px}
.rel-sec.build h5{border-bottom-color:var(--indigo-soft)}

/* 照片 */
.ph-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ph-item{margin:0;position:relative;display:flex;flex-direction:column;gap:5px}
.ph-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;cursor:zoom-in;
  border:1px solid var(--rule);border-radius:3px;background:var(--paper-2);
}
.ph-item img:hover{border-color:var(--indigo)}
.ph-item figcaption{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.ph-cap{
  font:inherit;font-size:11.5px;padding:4px 7px;width:100%;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--rule-soft);
  border-radius:3px;outline:none;
}
.ph-cap:focus{border-color:var(--indigo);background:var(--card)}
.ph-del{
  position:absolute;top:5px;right:5px;width:22px;height:22px;cursor:pointer;
  font-size:15px;line-height:1;color:#fff;background:rgba(27,30,34,.55);
  border:none;border-radius:3px;
}
.ph-del:hover{background:var(--vermilion)}

/* 看大图 */
.lightbox{background:rgba(20,22,26,.88);flex-direction:column;gap:14px}
.lightbox.on{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:78vh;object-fit:contain;border-radius:3px}
.lb-cap{color:#e8e6df;font-size:13px;letter-spacing:.04em}
.lb-close{
  position:absolute;top:16px;right:20px;width:34px;height:34px;cursor:pointer;
  font-size:22px;line-height:1;color:#e8e6df;background:rgba(255,255,255,.1);
  border:none;border-radius:4px;
}
.lb-close:hover{background:rgba(255,255,255,.2)}

/* 卡片上的头像 */
.avatar-img{pointer-events:none}

@media (max-width:640px){
  #pop{
    width:100%;left:0;right:0;bottom:0;top:auto;transform:none;
    border-radius:6px 6px 0 0;max-height:88vh;
  }
  .pop-head{padding:14px 15px 11px}
  .pop-tabs{padding:0 8px;overflow-x:auto;scrollbar-width:none}
  .pop-tabs::-webkit-scrollbar{display:none}
  .pop-tab{padding:9px 11px;flex:none}
  .pop-body{padding:14px 15px}
  .pop-foot{padding:10px 15px}
  .frow{flex-direction:column;gap:4px}
  .frow>label{width:auto;text-align:left;padding-top:0}
  .kv{grid-template-columns:66px 1fr}
  .ph-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
  .rel-sec.build{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}
}