/* ===== 家谱 · 宣纸墨色主题 ===== */
:root{
  --paper:#faf7f0;
  --paper-2:#f3eee2;
  --card:#fffdf8;
  --ink:#2c2a26;
  --ink-2:#5d574c;
  --ink-3:#8b8375;
  --line:#e2dac7;
  --line-2:#d3c8b0;
  --red:#a8322d;
  --red-soft:#f6e7e3;
  --teal:#3b6b6a;
  --teal-soft:#e6f0ef;
  --gold:#b08b47;
  --male:#3b6b6a;
  --female:#a8566f;
  --shadow:0 6px 24px rgba(74,60,38,.10);
  --shadow-lg:0 18px 50px rgba(50,40,25,.18);
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,"Microsoft YaHei",serif;
  background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6;
  background-image:radial-gradient(rgba(160,140,100,.055) 1px,transparent 1px);
  background-size:22px 22px;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--teal);text-decoration:none}
.hidden{display:none !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#cdc2aa;border-radius:6px;border:2px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:#b3a68c}

/* ===== 通用控件 ===== */
.btn{
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
  padding:6px 14px;border-radius:7px;transition:.15s;white-space:nowrap;line-height:1.5;
}
.btn:hover{border-color:var(--red);color:var(--red);background:#fff}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 2px 8px rgba(168,50,45,.22)}
.btn.primary:hover{background:#8f2925;color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--paper-2);color:var(--red)}
.btn.danger{color:var(--red);border-color:#e3c6c2}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:3px 9px;font-size:12px;border-radius:5px}
.btn.on{background:#f8f0dd;border-color:var(--gold);color:#8a6a29;font-weight:600}
.btn.on:hover{background:#f3e7c9;color:#7a5c20;border-color:var(--gold)}
.btn.wide{width:100%;padding:11px;font-size:16px;letter-spacing:.35em}
.btn:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{
  width:100%;background:#fff;border:1px solid var(--line-2);border-radius:6px;
  padding:7px 10px;outline:none;transition:.15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(168,50,45,.08)}
textarea{resize:vertical;min-height:70px;line-height:1.65}
label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
label>input,label>select,label>textarea{margin-top:5px}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;line-height:1.7;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.tag.red{background:var(--red-soft);color:var(--red);border-color:#ecd3ce}
.tag.teal{background:var(--teal-soft);color:var(--teal);border-color:#cfe1df}
.tag.gold{background:#f8f0dd;color:#8a6a29;border-color:#e9dcbb}
.muted{color:var(--ink-3)}
.empty{padding:60px 20px;text-align:center;color:var(--ink-3)}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ===== 登录 ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 50% 0%,#f7f1e3 0%,#efe7d6 55%,#e8dfcb 100%)}
.login-paper{
  width:min(420px,100%);background:var(--card);border:1px solid var(--line-2);
  border-radius:4px;padding:42px 40px 30px;box-shadow:var(--shadow-lg);text-align:center;
  position:relative;
}
.login-paper:before{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
.seal{width:52px;height:52px;margin:0 auto 14px;background:var(--red);color:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:29px;box-shadow:0 3px 10px rgba(168,50,45,.3)}
.login-paper h1{font-size:26px;letter-spacing:.16em;margin:0 0 4px;font-weight:600}
.login-sub{color:var(--ink-3);letter-spacing:.3em;font-size:12px;margin:0 0 26px}
.login-tabs{display:flex;border-bottom:1px solid var(--line-2);margin-bottom:22px}
.lt{flex:1;background:none;border:none;padding:10px;color:var(--ink-3);border-bottom:2px solid transparent;
  letter-spacing:.1em}
.lt.active{color:var(--red);border-bottom-color:var(--red);font-weight:600}
#login-form{text-align:left}
#login-form .btn{margin-top:6px}
.login-error{min-height:22px;color:var(--red);font-size:12.5px;margin-top:2px}
.remember{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);margin:4px 0 12px}
.remember input{width:auto;margin:0}
.first-run{margin-top:18px;padding:12px 14px;background:#fbf3e2;border:1px dashed var(--gold);
  border-radius:6px;text-align:left;font-size:12.5px;color:#7a5f2c;line-height:1.9}
.first-run b{color:var(--red)}
.login-tip{font-size:11.5px;color:var(--ink-3);margin:20px 0 0;line-height:1.8}

/* ===== 顶栏 ===== */
.topbar{height:74px;background:var(--card);border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:24px;padding:0 26px;position:sticky;top:0;z-index:30;
  box-shadow:0 2px 12px rgba(80,64,40,.05)}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-seal{width:40px;height:40px;background:var(--red);color:#fff;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.brand h1{font-size:18px;margin:0;letter-spacing:.08em;font-weight:600;white-space:nowrap}
.brand-sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}
.top-search{position:relative;flex:1;max-width:400px;margin-left:auto}
.top-search input{background:var(--paper);border-radius:20px;padding-left:16px}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);max-height:340px;
  overflow:auto;z-index:40}
.search-results .sr-item{padding:8px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;
  justify-content:space-between;gap:10px;align-items:center}
.search-results .sr-item:last-child{border-bottom:none}
.search-results .sr-item:hover{background:var(--paper-2)}
.sr-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.top-right{display:flex;align-items:center;gap:8px}
.role-badge{font-size:12px;padding:4px 11px;border-radius:20px;background:var(--teal-soft);
  color:var(--teal);border:1px solid #cfe1df;white-space:nowrap}
.role-badge.admin{background:var(--red-soft);color:var(--red);border-color:#ecd3ce}

/* ===== Tabs / 工具条 ===== */
.tabs{display:flex;gap:2px;background:var(--card);padding:0 26px;border-bottom:1px solid var(--line);
  position:sticky;top:74px;z-index:25;overflow-x:auto}
.tab{background:none;border:none;padding:12px 20px;color:var(--ink-2);border-bottom:2px solid transparent;
  white-space:nowrap;letter-spacing:.06em}
.tab:hover{color:var(--red)}
.tab.active{color:var(--red);border-bottom-color:var(--red);font-weight:600;background:linear-gradient(0deg,#fbf3ea,transparent)}
.ti{margin-right:6px;font-size:14px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 26px;
  background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:119px;z-index:20}
.toolbar .sep{width:1px;height:22px;background:var(--line-2);margin:0 4px}
.toolbar .hint{font-size:12px;color:var(--ink-3);margin-left:auto}
.toolbar select,.toolbar input[type=number]{width:auto;min-width:88px;padding:5px 8px}
.gen-chips{display:flex;gap:5px;flex-wrap:wrap;max-width:100%}
.gen-chip{border:1px solid var(--line-2);background:var(--card);border-radius:20px;padding:2px 9px;
  font-size:11.5px;color:var(--ink-2);line-height:1.7}
.gen-chip:hover{border-color:var(--red);color:var(--red)}
.gen-chip.off{background:var(--paper-2);color:var(--ink-3);text-decoration:line-through}
.view{padding:22px 26px 40px;min-height:calc(100vh - 220px)}
.footer{display:flex;justify-content:space-between;padding:14px 26px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:11.5px;background:var(--card)}

/* ===== 树形 ===== */
.tree-wrap{max-width:1120px;margin:0 auto}
.tree-root-note{font-size:12px;color:var(--ink-3);margin-bottom:12px;padding-left:4px}
.tree-node{position:relative}
.tree-children{margin-left:26px;padding-left:16px;border-left:1px dashed var(--line-2)}
.tree-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;min-height:38px;
  transition:background .12s;position:relative}
.tree-row:hover{background:var(--paper-2)}
.tree-row.focus{background:#fbf0e6;box-shadow:inset 3px 0 0 var(--red)}
.tree-toggle{width:20px;height:20px;flex:none;border:1px solid var(--line-2);background:var(--card);
  border-radius:4px;font-size:11px;line-height:1;color:var(--ink-2);padding:0}
.tree-toggle:hover{border-color:var(--red);color:var(--red)}
.tree-toggle.leaf{visibility:hidden}
.node-name{font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.05em;min-width:2em}
.node-name:hover{color:var(--red)}
.node-name.f{color:#8e4a5f}
.node-meta{font-size:11.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.node-spouse{color:var(--ink-2);font-size:12px}
.node-actions{margin-left:auto;display:flex;gap:5px;opacity:0;transition:.15s}
.tree-row:hover .node-actions{opacity:1}
.branch-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;flex:none}
.node-child-count{font-size:11px;color:var(--ink-3);background:var(--paper-2);border-radius:10px;padding:0 6px}

/* ===== 世代统计 ===== */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  box-shadow:0 2px 8px rgba(80,64,40,.04)}
.stat-card .num{font-size:27px;font-weight:600;color:var(--red);line-height:1.2;font-family:Georgia,serif}
.stat-card .lbl{font-size:12px;color:var(--ink-3);margin-top:4px}
.chart-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:20px}
.panel-title{font-size:15px;font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:8px}
.panel-title:before{content:"";width:3px;height:15px;background:var(--red);border-radius:2px}
.trend-svg{width:100%;height:120px;display:block}
.trend-axis{position:relative;height:19px;margin:0 4px 10px;font-size:10.5px;color:var(--ink-3)}
.trend-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.bar-row{display:grid;grid-template-columns:78px 1fr 54px;gap:12px;align-items:center;padding:5px 0;
  cursor:pointer;border-radius:6px}
.bar-row:hover{background:var(--paper-2)}
.bar-row.active{background:#fbf0e6}
.bar-label{text-align:right;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.bar-track{height:18px;background:var(--paper-2);border-radius:4px;overflow:hidden;display:flex}
.bar-m{background:var(--male);height:100%}
.bar-f{background:var(--female);height:100%}
.bar-n{font-size:12px;color:var(--ink-2);font-family:Georgia,serif}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-3);margin:8px 0 12px 78px}
.legend i{width:10px;height:10px;display:inline-block;border-radius:2px;margin-right:5px}
.gen-people{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-top:18px}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;margin-top:12px}
.person-card{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:var(--paper);
  cursor:pointer;display:flex;align-items:center;gap:9px;transition:.15s}
.person-card:hover{border-color:var(--red);background:#fff;transform:translateY(-1px)}
.person-card .pc-avatar{width:32px;height:32px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;font-weight:600}
.person-card.f .pc-avatar{background:#f7e9ed;color:var(--female)}
.person-card .pc-name{font-weight:600;line-height:1.3}
.person-card .pc-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 垂直世系 ===== */
.lineage-scroll{overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:0;max-height:calc(100vh - 250px);position:relative}
.lineage-canvas{position:relative;transform-origin:0 0;min-height:400px}
.lin-links{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.lin-gen{position:absolute;left:0;right:0;height:1px;border-top:1px dashed #eee6d5}
.lin-gen-label{position:absolute;left:0;top:0;font-size:11px;color:var(--ink-3);
  background:var(--paper-2);padding:1px 8px;border-radius:0 0 8px 0;z-index:3;cursor:pointer;
  border:1px solid var(--line);border-left:none;border-top:none;white-space:nowrap}
.lin-gen-label:hover{color:var(--red)}
.lin-gen-label.collapsed{background:var(--red-soft);color:var(--red)}
.lin-node{position:absolute;width:104px;height:56px;background:var(--card);border:1px solid var(--line-2);
  border-radius:7px;padding:5px 7px;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(80,64,40,.07);
  overflow:visible;transition:.12s}
.lin-node:hover{border-color:var(--red);box-shadow:0 4px 14px rgba(168,50,45,.18);z-index:5}
.lin-node.focus{border:2px solid var(--red);background:#fff6ef;z-index:6}
.lin-node.ancestor{border-color:var(--gold);background:#fdf7e9}
.lin-node.dim{opacity:.28}
.lin-node .ln-name{font-weight:600;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-node .ln-sub{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-node.f{background:#fdf6f8}
.lin-node .ln-gender{position:absolute;right:5px;top:4px;font-size:10px;color:var(--ink-3)}
.lin-toggle{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:21px;height:21px;
  border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--red);
  font:600 15px/1 Arial,sans-serif;padding:0;display:flex;align-items:center;justify-content:center;
  z-index:7;box-shadow:0 1px 5px rgba(80,64,40,.18)}
.lin-toggle:hover{background:var(--red);color:#fff;border-color:var(--red)}
.lin-gen-label.static{cursor:default}
.lin-gen-label.static:hover{color:var(--ink-3)}
/* 聚焦 · 隐藏无关旁支 */
.lineage-hide-toggle{margin-left:4px}
.lin-node.peer{border-color:var(--teal);background:#f2f8f7}
.lin-node.folded{width:76px;height:42px;background:var(--paper-2);border:1px dashed #cdbfa4;
  border-radius:6px;text-align:center;padding:4px 3px;box-shadow:none;opacity:.85}
.lin-node.folded:hover{border-style:solid;border-color:var(--gold);opacity:1}
.lin-node.folded .ln-fold{font-size:17px;line-height:20px;color:#a99368;font-weight:600}
.lin-node.folded .ln-sub{font-size:9.5px;white-space:nowrap}
.lin-toggle.refold{color:#8a6a29;border-color:#e0cfa4;background:#fdf7e9}
.lin-toggle.refold:hover{background:#8a6a29;color:#fff;border-color:#8a6a29}

/* ===== 名录表格 ===== */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
table.list{width:100%;border-collapse:collapse;font-size:13px}
table.list th{background:var(--paper-2);text-align:left;padding:10px 14px;font-weight:600;
  color:var(--ink-2);border-bottom:1px solid var(--line-2);white-space:nowrap;position:sticky;top:0;z-index:2}
table.list td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list tr:hover td{background:#fbf6ec;cursor:pointer}
table.list td.name{font-weight:600;font-size:14px}
table.list td.clip{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px}

/* ===== 详情抽屉 ===== */
.drawer-mask{position:fixed;inset:0;background:rgba(40,32,20,.28);z-index:50;animation:fade .2s}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(500px,94vw);background:var(--card);z-index:60;
  box-shadow:-8px 0 34px rgba(50,40,25,.18);transform:translateX(105%);transition:transform .25s ease;
  overflow-y:auto;border-left:1px solid var(--line-2)}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;right:14px;top:12px;z-index:5;background:var(--card);border:1px solid var(--line-2);
  width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;color:var(--ink-2)}
.drawer-close:hover{color:var(--red);border-color:var(--red)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.d-hero{padding:26px 26px 20px;background:linear-gradient(160deg,#f7f0e2,#fffdf8 70%);
  border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start}
.d-photo{width:86px;height:106px;flex:none;border:1px solid var(--line-2);border-radius:5px;
  object-fit:cover;background:var(--paper-2)}
.d-photo-ph{width:86px;height:106px;flex:none;border:1px solid var(--line-2);border-radius:5px;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#c9bda3}
.d-hero h2{font-size:25px;margin:0 0 4px;letter-spacing:.1em}
.d-hero .d-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.d-body{padding:20px 26px 50px}
.d-section{margin-bottom:22px}
.d-section h3{font-size:13px;color:var(--red);letter-spacing:.12em;margin:0 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.d-section h3 .h-act{margin-left:auto;letter-spacing:0}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}
.kv{font-size:12.5px;min-width:0}
.kv .k{color:var(--ink-3);font-size:11.5px;display:block}
.kv .v{color:var(--ink);word-break:break-all;line-height:1.55}
.kv.full{grid-column:1/-1}
.d-remark{white-space:pre-wrap;font-size:13px;line-height:1.9;background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:12px 14px;max-height:320px;overflow:auto}
.link-chip{display:inline-flex;align-items:center;gap:5px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:20px;padding:3px 11px;margin:0 6px 6px 0;cursor:pointer;font-size:12.5px}
.link-chip:hover{border-color:var(--red);color:var(--red);background:#fff}
.spouse-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.spouse-row:last-child{border-bottom:none}
.spouse-row .s-name{font-weight:600;min-width:70px}
.spouse-row .s-info{font-size:11.5px;color:var(--ink-3);flex:1}
.album{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.album img{width:88px;height:88px;object-fit:cover;border:1px solid var(--line-2);border-radius:5px;
  cursor:zoom-in;background:var(--paper-2)}
/* 详情抽屉里的两个可上传相册 */
.album-section h3 .h-act{display:inline-flex;align-items:center;gap:8px}
.album-count{font-size:11px;color:var(--ink-3);font-weight:400;letter-spacing:0}
.album{gap:10px}
.album-item{width:92px;flex:none;position:relative}
.album-item img{width:92px;height:92px;display:block}
.album-item.is-private img{opacity:.72}
.album-item.no-img::before{content:'图片缺失';display:flex;align-items:center;justify-content:center;
  width:92px;height:92px;border:1px dashed var(--line-2);border-radius:5px;
  background:var(--paper-2);color:var(--ink-3);font-size:11px}
.album-note{font-size:10.5px;color:var(--ink-3);line-height:1.4;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-ops{display:flex;gap:2px;margin-top:3px}
.album-ops button{flex:1;min-width:0;height:20px;padding:0;font-size:11px;line-height:1;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);
  border-radius:3px;cursor:pointer}
.album-ops button:hover{border-color:var(--red);color:var(--red)}
.album-ops button.del:hover{background:var(--red);border-color:var(--red);color:#fff}
.album-priv{position:absolute;left:4px;top:4px;font-size:10px;padding:1px 5px;border-radius:3px;
  background:rgba(168,50,45,.88);color:#fff;pointer-events:none}
.album-empty{font-size:12px;color:var(--ink-3);padding:10px 0}
.album-form{display:block;font-size:12px;color:var(--ink-3)}
.album-form input{display:block;width:100%;margin-top:6px;padding:7px 9px;font-size:13px;
  border:1px solid var(--line-2);border-radius:5px;background:var(--card);color:var(--ink)}
.d-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* 同辈族人 */
.peer-block{margin-bottom:10px}
.peer-label{font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
.peer-chips{line-height:1.9}
.peer-none{font-size:12.5px}
.link-chip.f{background:#fdf6f8}
.link-chip.more{border-style:dashed;color:var(--red)}
.peer-modal-top{font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.peer-q{margin-bottom:12px}
.peer-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
  max-height:56vh;overflow:auto}
.peer-card{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;cursor:pointer;font-size:12.5px}
.peer-card:hover{border-color:var(--red);background:#fff}
.peer-card.f{background:#fdf6f8}
.peer-card .muted{font-size:11px}
.peer-card .tag{margin-left:auto;font-size:10px;padding:0 6px}
.peer-empty{text-align:center;color:var(--ink-3);font-size:12.5px;padding:18px 0}
.surname-preview{background:var(--paper-2);border:1px dashed var(--line-2);border-radius:7px;
  padding:9px 11px;font-size:12px;color:var(--ink-2);margin:10px 0 12px;line-height:1.7;
  word-break:break-all}
.json-list{display:flex;flex-direction:column;gap:6px}
.json-item{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 11px;font-size:12.5px}
.json-item .ji-t{color:var(--teal);font-weight:600;margin-right:8px}

/* ===== 弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(40,32,20,.4);z-index:80;display:flex;
  align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto;animation:fade .18s}
.modal{background:var(--card);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:var(--shadow-lg);width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column}
.modal.small{width:min(480px,100%)}
.modal-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-head h3{margin:0;font-size:17px;letter-spacing:.08em}
.modal-head .x{margin-left:auto;background:none;border:none;font-size:22px;color:var(--ink-3);line-height:1}
.modal-body{padding:18px 22px;overflow:auto;flex:1}
.modal-foot{padding:13px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;
  background:var(--paper)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid .full{grid-column:1/-1}
fieldset.fgroup{border:1px solid var(--line);border-radius:8px;margin:0 0 14px;padding:12px 16px 4px;
  background:var(--paper)}
fieldset.fgroup legend{font-size:12.5px;color:var(--red);font-weight:600;padding:0 8px;letter-spacing:.08em}
.checkline{display:flex;align-items:center;gap:8px;margin:4px 0 12px;font-size:12.5px;color:var(--ink-2)}
.checkline input{width:auto}
.photo-preview{width:54px;height:66px;object-fit:cover;border:1px solid var(--line-2);border-radius:4px;vertical-align:middle;margin-right:8px}
.hintline{font-size:11.5px;color:var(--ink-3);margin:-4px 0 10px}
.modal-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.mtab{background:none;border:none;padding:8px 14px;color:var(--ink-2);border-bottom:2px solid transparent}
.mtab.active{color:var(--red);border-bottom-color:var(--red);font-weight:600}
.log-item{font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px}
.log-item .lt-time{color:var(--ink-3);white-space:nowrap}

/* ===== toast ===== */
#toast-root{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#2c2a26;color:#fff;padding:9px 20px;border-radius:8px;font-size:13px;
  box-shadow:var(--shadow-lg);animation:toastin .22s;max-width:80vw}
.toast.ok{background:#2f6b52}
.toast.err{background:#a8322d}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.image-lightbox{position:fixed;inset:0;background:rgba(20,16,10,.88);z-index:110;display:flex;
  align-items:center;justify-content:center;cursor:zoom-out;padding:30px}
.image-lightbox img{max-width:95vw;max-height:92vh;object-fit:contain;border-radius:4px}

@media (max-width:900px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .brand{min-width:0}.top-search{max-width:none;order:3;flex-basis:100%}
  .tabs{padding:0 10px;top:0;position:static}
  .toolbar{position:static;padding:10px 14px}.view{padding:14px}
  .kv-grid,.form-grid{grid-template-columns:1fr}
}