/* 龙口莫氏族谱平台 · 样式
   设计基调：宣纸底 + 墨色字 + 朱砂点缀，衬族谱的庄重感。 */

:root {
    --paper:      #f5f2e9;
    --paper-2:    #fffdf7;
    --paper-3:    #efeade;
    --ink:        #23201c;
    --ink-2:      #59544b;
    --ink-3:      #8b8478;
    --line:       #e2dbca;
    --line-2:     #cfc6b0;
    --seal:       #9c3c2e;
    --seal-soft:  #f6e6e2;
    --jade:       #4e6d58;
    --jade-soft:  #e6eee8;
    --gold:       #a8863c;
    --radius:     6px;
    --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    --sans:  "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.75;
    /* 极淡的纸纹，避免大面积纯色发闷 */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(156,60,46,0.035), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(78,109,88,0.035), transparent 45%);
    background-attachment: fixed;
}

a { color: var(--seal); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px;
       background: var(--paper-3); padding: 1px 5px; border-radius: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------- 顶栏 */
.topbar {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    position: sticky; top: 0; z-index: 20;
}
.bar { display: flex; align-items: center; gap: 26px; height: 60px; flex-wrap: wrap; }
.brand {
    font-size: 21px; font-weight: 700; letter-spacing: 2px;
    color: var(--ink); white-space: nowrap;
}
.brand span { color: var(--seal); }

.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav a {
    padding: 5px 13px; border-radius: 20px; color: var(--ink-2);
    font-size: 14.5px; font-family: var(--sans);
}
.nav a:hover { background: var(--paper-3); text-decoration: none; color: var(--ink); }
.nav a.on { background: var(--seal-soft); color: var(--seal); font-weight: 600; }

/* 检索结果里的「所属房系」标签 */
.tag.lin {
    background: var(--seal-soft); color: var(--seal);
    border: 1px solid transparent; text-decoration: none;
}
.tag.lin:hover { border-color: var(--seal); }

/* ---------------------------------------------------------- 版块 */
main.wrap { padding-top: 30px; padding-bottom: 50px; min-height: 62vh; }

h1.page {
    font-size: 26px; margin: 0 0 4px; letter-spacing: 1px;
    padding-bottom: 10px; border-bottom: 2px solid var(--ink);
    display: inline-block;
}
.sub { color: var(--ink-3); font-size: 13.5px; font-family: var(--sans); margin: 0 0 22px; }
h2.sec { font-size: 19px; margin: 34px 0 12px; letter-spacing: 1px;
         border-left: 3px solid var(--seal); padding-left: 10px; }
h3.mini { font-size: 16px; margin: 0 0 8px; color: var(--ink); }

.card {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px;
}
.card + .card { margin-top: 16px; }
.card.hl { border-left: 3px solid var(--seal); }

/* ---------------------------------------------------------- 统计 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 14px; margin: 18px 0 8px; }
.stat {
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; text-align: center;
}
.stat b { display: block; font-size: 27px; line-height: 1.2; color: var(--seal); font-weight: 700; }
.stat span { font-size: 13px; color: var(--ink-3); font-family: var(--sans); }

/* ---------------------------------------------------------- 表格 */
table.grid { width: 100%; border-collapse: collapse; background: var(--paper-2);
             font-size: 14.5px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 9px 12px;
                               text-align: left; vertical-align: top; }
table.grid th { background: var(--paper-3); font-weight: 700; color: var(--ink-2);
                white-space: nowrap; font-family: var(--sans); font-size: 13.5px; }
table.grid tbody tr:hover { background: #fbf8f0; }
table.grid td.num { font-family: ui-monospace, Consolas, monospace; color: var(--ink-3);
                    white-space: nowrap; }

.tablebox { border: 1px solid var(--line); border-radius: var(--radius);
            overflow: auto; background: var(--paper-2); }
.tablebox + .tablebox { margin-top: 14px; }

/* 世系表「父系」「配偶 / 子嗣」两列：每行一个意思，别挤成一大段 */
table.grid td .fl { display: block; line-height: 1.65; }
table.grid td .fl.src { color: var(--ink-3); font-size: 12.5px;
                        font-family: var(--sans); margin-top: 2px; cursor: help; }
table.grid td .fl.dim { color: var(--ink-3); }

/* ---------------------------------------------------------- 标签 */
.tag {
    display: inline-block; font-family: var(--sans); font-size: 11.5px;
    padding: 1px 8px; border-radius: 10px; background: var(--paper-3);
    color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap;
}
.tag.warn { background: #fdf3e0; color: var(--gold); border-color: #ecd9ae; }
.tag.seal { background: var(--seal-soft); color: var(--seal); border-color: #e8cbc4; }
.tag.jade { background: var(--jade-soft); color: var(--jade); border-color: #c9dcd0; }
.tag .x { opacity: .75; }

/* ---------------------------------------------------------- 人物条目 */
.list { display: grid; gap: 12px; }
.item {
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.item:hover { border-color: var(--line-2); background: #fdfbf5; }
.item .nm { font-size: 17px; font-weight: 700; min-width: 68px; color: var(--ink); }
.item .nm.dim { color: var(--ink-3); }
.item .meta { color: var(--ink-3); font-size: 13.5px; font-family: var(--sans); flex: 1 1 260px; }
.item .rhs { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.alias { color: var(--ink-3); font-size: 13px; }
.mark { background: #fdf0cf; border-radius: 2px; }

/* ---------------------------------------------------------- 世系图 */
.treebox { background: var(--paper-2); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 14px; overflow-x: auto; }
/* 世系图尺寸：SVG 自带 width/height（viewBox 单位即 px），
   不设 width:100% —— 于是只缩不放：
     · 图窄（代少，≤3 代）→ 按自然尺寸显示，框最大就是三代时的 52×104，不会被放大；
     · 图宽（代多）→ max-width:100% 把它缩到容器宽度内，整图自动缩小、一屏看全。
   height:auto 保证按比例缩放不变形；margin 让小图居中。 */
svg.tree { display: block; height: auto; max-width: 100%; margin: 0 auto; }
svg.tree .box rect { fill: var(--paper-2); stroke: var(--line-2); stroke-width: 1; }
/* 推断边：框描边改成实线（连线本来就是实线），只靠淡色区分，看着更直观 */
svg.tree .box.dashed rect { stroke: #c9bfa6; stroke-width: 1.4; fill: #fdfaf3; }
svg.tree g.box { cursor: pointer; }
svg.tree g.box:hover rect { fill: #f7f0e2; stroke: var(--seal); }
svg.tree .nm { font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle;
               font-family: var(--serif); }
svg.tree .sub { font-size: 11px; fill: var(--ink-3); text-anchor: middle;
                font-family: var(--sans); }
svg.tree .ln {
  stroke: var(--ink-3);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* 缩放时线宽保持恒定，不发虚 */
  shape-rendering: crispEdges;          /* 横线/竖线对齐像素，锐利清晰 */
}

/* ---------------------------------------------- 人物框（世系图） */
svg.tree .box.self rect { fill: var(--seal-soft); stroke: var(--seal); stroke-width: 1.6; }
svg.tree .box.self .nm { fill: var(--seal); }
svg.tree .nm.self { font-size: 15px; }
svg.tree .sp { font-size: 10.5px; fill: var(--ink-3); text-anchor: middle;
               font-family: var(--sans); }

/* -------------------------------------------------- 录入页·配偶子嗣 */
.fam { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
/* 「增加配偶 / 再添一行 / 选照片」提到标题行，一眼就能看见，
   保存条也不吸底了，所以块尾不会被压住，也不用再留那 92px 空白 */
.fam .fam-hd { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; flex-wrap: wrap; }
.fam .fam-hd .mini { margin: 0; }
.famrows { display: grid; gap: 8px; margin-bottom: 10px; }
.frow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 8px 12px;
}
.frow .idx { min-width: 62px; color: var(--ink-3); font-size: 13px;
             font-family: var(--sans); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.frow input[type=text], .frow input[type=number] { flex: 1 1 130px; }
.frow input.mini { flex: 0 0 86px; }
.frow input.num { flex: 0 0 62px; }
/* 子嗣行的「子／女」：hr 出来的 select 默认很宽，压成跟序那一格差不多 */
.frow select.mini { flex: 0 0 66px; max-width: 66px; height: 30px; }
.frow.ch .chlink { min-width: 90px; font-weight: 700; }
.frow.ch.new { background: #fbf8f0; border-style: dashed; }
/* 「引用已有族人」挂上来的那一行：底色跟新建行区分开 */
.frow.ch.exist { background: #f4efe2; }
/* 块内的紧凑查找栏，比顶部的引用框窄一档 */
.pickrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pickrow input[type=text] {
    flex: 1 1 220px; padding: 6px 11px; font-size: 13.5px; border-radius: 6px;
    border: 1px solid var(--line-2); background: #fff; font-family: var(--sans);
}
.pickrow-sm { margin-bottom: 10px; }
.pickrow-sm .picknone { padding: 4px 2px; }
.fam .picklist { margin-top: 0; }

/* ---------------------------------------------------- 录入页·照片 */
.phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
          gap: 12px; margin-bottom: 10px; }
.phgrid .ph { background: var(--paper-2); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 8px; text-align: center;
              display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ph img { width: 100%; max-height: 150px; object-fit: contain; display: block;
          background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.ph .picker { border-style: dashed; justify-content: center; min-height: 112px; }
.ph .picker-lbl { border: 1px dashed var(--line-2); border-radius: 6px; padding: 10px;
                  justify-content: center; min-height: 104px; }
/* 照片选择挪到标题行后的紧凑样子 */
.fam .fam-hd .picker-lbl { border: 0; padding: 0; min-height: 0;
                           font-size: 13.5px; color: var(--ink-3); }
.fam .fam-hd .picker-lbl:hover { color: var(--seal); }
/* 真input 藏起来但还在，点标签照样弹文件框（display:none 有的浏览器不认） */
.fam .fam-hd .picker-lbl input { position: absolute; width: 1px; height: 1px;
                                 opacity: 0; pointer-events: none; }
figure.ph { margin: 0; }
figure.ph figcaption { font-size: 12.5px; color: var(--ink-3); font-family: var(--sans); }

/* 备注内联图片：写作时是占位，展示时换成真图 */
.nirow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nirow code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px; background: var(--paper-3); padding: 1px 5px; border-radius: 3px;
}
.noteimg { max-width: 100%; display: block; margin: 8px 0 2px; border-radius: 4px;
    border: 1px solid var(--line); background: var(--paper-2); padding: 8px; }
.noteblk { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.noteblk b { color: var(--ink-3); font-family: var(--sans); font-weight: 500; }
.noteblk .noteimg { margin: 0; }
/* 备注正文：存的是纯文本，空行分段全在渲染时补的 <p> 上体现 */
.noteblk p, .article-body p { margin: .5em 0; line-height: 1.95; text-align: justify; }
.noteblk p:first-child { margin-top: 4px; }
/* 备注正文的图：figure 包一层，图说（figcaption）居中摆在图片下面 */
.note-fig { margin: 10px 0; padding: 0; }
.noteblk .note-fig, .article-body .note-fig { text-align: center; }
.note-fig .noteimg { margin: 0 auto; max-width: 92%; }
.note-cap { display: block; margin: 6px auto 0; text-align: center;
    color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.note-fig .noteimg-miss { max-width: 92%; margin: 0 auto; text-align: left; }
/* 图文件不在磁盘上：明说缺哪张、点哪补，别给访客一张碎图 */
.noteimg-miss { display: inline-block; max-width: 100%; margin: 8px 0 2px;
    padding: 9px 12px; border: 1px dashed var(--line-2, var(--line));
    border-radius: 4px; background: var(--paper-3);
    color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.noteimg-miss .fix { margin-left: 4px; font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------------- 时间轴 */
.tl { position: relative; margin: 20px 0 0 8px; padding-left: 22px;
      border-left: 2px solid var(--line); }
.tl .ev { position: relative; padding: 0 0 18px 4px; }
.tl .ev::before {
    content: ""; position: absolute; left: -30px; top: 8px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--seal);
}
.tl .yr { font-family: ui-monospace, Consolas, monospace; color: var(--seal);
          font-weight: 700; margin-right: 10px; }

/* ---------------------------------------------------------- 检索 */
.searchbar { display: flex; gap: 10px; margin: 6px 0 22px; flex-wrap: wrap; }
.searchbar input[type=text] { flex: 1 1 300px; }

input[type=text], input[type=password], input[type=number], select, textarea {
    font-family: var(--serif); font-size: 15px; color: var(--ink);
    background: var(--paper-2); border: 1px solid var(--line-2);
    border-radius: 4px; padding: 8px 11px; width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--seal);
    box-shadow: 0 0 0 3px rgba(156,60,46,0.10);
}
textarea { min-height: 96px; line-height: 1.7; resize: vertical; }
label.fld { display: block; margin-bottom: 12px; font-family: var(--sans); font-size: 13.5px; }
label.fld > i { display: block; color: var(--ink-3); font-style: normal; margin-bottom: 4px; }

button, .btn {
    font-family: var(--sans); font-size: 14px; cursor: pointer;
    padding: 8px 18px; border-radius: 4px; border: 1px solid var(--seal);
    background: var(--seal); color: #fff; display: inline-block;
}
button:hover, .btn:hover { background: #852e22; text-decoration: none; color: #fff; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
button.ghost:hover, .btn.ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn.sm { padding: 4px 11px; font-size: 13px; }
/* 世系图的代数切换：当前那档压住，看得出选的是几 */
.btn.ghost.on, .btn.ghost.on:hover {
    background: var(--seal); border-color: var(--seal); color: #fff;
}
/* 删除这类破坏动作：压成朱砂色，别跟普通幽灵按钮混在一起 */
button.danger, .btn.danger { background: var(--seal); border-color: var(--seal); }
button.danger:hover, .btn.danger:hover { background: #6d2419; border-color: #6d2419; }
.btn.ghost.danger { background: transparent; color: var(--seal); border-color: #e0b6ad; }
.btn.ghost.danger:hover { background: var(--seal-soft); color: var(--seal); }
form.inline { display: inline; margin: 0; }
button.linkbtn {
    background: none; border: none; color: var(--ink-2); font-family: var(--sans);
    font-size: 14.5px; padding: 5px 13px; cursor: pointer; border-radius: 20px;
}
button.linkbtn:hover { background: var(--paper-3); color: var(--seal); }
button.linkbtn.danger { color: var(--seal); }
button.linkbtn.danger:hover { background: var(--seal-soft); color: var(--seal); }
.spread form.inline { vertical-align: middle; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- 录入页·引用族人 */
.pickbox { border: 1px dashed var(--line-2); border-radius: var(--radius);
           background: var(--paper-2); padding: 13px 16px; margin-bottom: 18px; }
.pickbox-hd { font-family: var(--sans); font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.picklist { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 6px; }
.pickitem { display: flex; align-items: center; gap: 10px; }
.pickbtn { flex: 1 1 auto; text-align: left; display: block;
           background: #fff; border: 1px solid var(--line); border-radius: 8px;
           padding: 7px 13px; line-height: 1.5; }
.pickbtn:hover { border-color: var(--seal); background: var(--seal-soft); }
.pickbtn b { font-weight: 700; letter-spacing: 1px; }
.pickbtn span { display: block; color: var(--ink-3); font-size: 12.5px; font-family: var(--sans); }
.picklink { font-size: 12.5px; color: var(--ink-3); font-family: var(--sans); white-space: nowrap; }
.picklink:hover { color: var(--seal); }
.picknone { color: var(--ink-3); font-size: 13px; font-family: var(--sans); padding: 6px 2px; }
.notice { background: #fdf3e0; border: 1px solid #ecd9ae; color: var(--gold);
          border-radius: var(--radius); padding: 9px 14px; font-size: 13.5px; margin-bottom: 16px; }
.notice b { color: var(--seal); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
       color: var(--ink-3); font-family: var(--sans); cursor: pointer; }
.chk input { width: auto; }

/* ---------------------------------------------------------- 登录 */
.loginbox { max-width: 370px; margin: 46px auto; background: var(--paper-2);
            border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px;
            box-shadow: 0 6px 26px rgba(35,32,28,0.06); }
.loginbox h1 { font-size: 21px; margin: 0 0 4px; text-align: center; letter-spacing: 2px; }
.loginbox .sub { text-align: center; margin-bottom: 24px; }
.err { background: var(--seal-soft); color: var(--seal); border: 1px solid #e8cbc4;
       border-radius: 4px; padding: 8px 12px; margin-bottom: 14px; font-size: 14px; }
.ok { background: #eaf5ec; color: #1f7a3d; border: 1px solid #bfe3c9;
      border-radius: 4px; padding: 8px 12px; margin-bottom: 14px; font-size: 14px; }

/* ---------------------------------------------------------- 详情 */
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; font-size: 14.5px; }
.kv dt { color: var(--ink-3); font-family: var(--sans); font-size: 13px; }
.kv dd { margin: 0; }

.crumb { font-size: 13px; color: var(--ink-3); font-family: var(--sans); margin-bottom: 12px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--seal); }

/* ------------------------------------- 按世代批量录生卒 / 纪年 */
/* 一行一个人，输入框要能挤在表格里；父系列窄一点，方便对上是谁 */
.form .frm { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
             margin-bottom: 16px; padding: 12px 16px; background: var(--paper-2);
             border: 1px solid var(--line); border-radius: var(--radius); }
table.grid.births td { padding: 5px 8px; }
table.grid.births input[type=text] { width: 100%; padding: 3px 6px;
                                     font-size: 13px; }
table.grid.births input[type=text][size="5"] { min-width: 56px; }
table.grid.births select { width: 100%; padding: 2px 4px; font-size: 12.5px; }
table.grid.births td.alias { white-space: nowrap; color: var(--ink-3);
                             font-size: 12.5px; font-family: var(--sans); }
table.grid.births thead th:nth-child(3),
table.grid.births thead th:nth-child(7) { width: 132px; }

/* ---------------------------------------------------------- 留痕 */
.log td { font-size: 13.5px; font-family: var(--sans); }
.diff-ins { color: var(--jade); }
.diff-del { color: var(--seal); }

/* ---------------------------------------------------------- 杂项 */
.empty { color: var(--ink-3); font-family: var(--sans); padding: 26px 0; text-align: center;
         background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.hint { color: var(--ink-3); font-size: 13px; font-family: var(--sans); margin-top: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 录入页的保存条：排在配偶 / 子嗣 / 照片之后，不吸底。
   早先吸底会把照片那一块的末尾压在条子底下，增加按钮也跟着被遮，
   改回普通文档流之后，三块的操作都在保存按钮上方，按多久都不挡。 */
.savebar { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line);
           border-radius: var(--radius); background: var(--paper-2); }
.savebar > button[type=submit] { padding: 10px 30px; font-size: 16px; }
.spread { display: flex; justify-content: space-between; align-items: baseline;
          gap: 14px; flex-wrap: wrap; }
.foot { color: var(--ink-3); font-size: 12.5px; font-family: var(--sans);
        border-top: 1px solid var(--line); padding: 18px 22px 34px; margin-top: 20px; }
.foot .sep { margin: 0 8px; }
.foot a.icp { color: var(--ink-3); text-decoration: none; }
.foot a.icp:hover { color: var(--ink-2); text-decoration: underline; }

.article-body { font-size: 16px; line-height: 2; letter-spacing: .3px;
                white-space: pre-wrap; font-family: var(--serif); }
.article-body .noteimg { max-width: 100%; display: block; margin: 10px 0;
                border: 1px solid var(--line); border-radius: 4px; }
/* 上面那条会把图拉到满宽并去掉 auto 外边距，图说又要居中，这里补回来 */
.article-body .note-fig .noteimg { margin: 0 auto; max-width: 92%; }
.article-body .note-cap { font-size: 13.5px; }
/* 谱文的头图（article.image_path），比正文里的插图宽一档 */
.wideimg { display: block; width: 100%; max-height: 420px; object-fit: contain;
           background: var(--paper-2); }

.kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.kinds a { font-family: var(--sans); font-size: 13.5px; padding: 4px 13px;
           border-radius: 16px; border: 1px solid var(--line-2); color: var(--ink-2);
           background: var(--paper-2); }
.kinds a.on { background: var(--seal); color: #fff; border-color: var(--seal); }

/* --------------------------------------------------- 双栏校对 */
.pagenav {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px;
}
.pagenav select { max-width: 220px; font-size: 13px; padding: 4px 8px; }
.pagenav .prog { margin-left: auto; font-family: var(--sans); font-size: 13px;
                 color: var(--ink-2); display: flex; gap: 12px; align-items: center; }
.pagenav .prog b { color: var(--jade); font-weight: 600; }
.pagenav .warn { color: var(--gold); }
.pagenav .doubt { color: var(--seal); }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } }

.cmp-h {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    font-size: 14px; letter-spacing: 1px; color: var(--ink-2);
    border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 12px;
}
.cmp-h .hint { margin: 0; font-size: 12.5px; }

.cmp-l, .cmp-r {
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px;
}

.scan summary { cursor: pointer; font-family: var(--sans); font-size: 13px;
                color: var(--ink-3); padding: 4px 0 8px; }
.scan img { width: 100%; border: 1px solid var(--line); border-radius: 4px;
            display: block; margin-bottom: 10px; background: #fff; }

/* OCR 原文：一行一条，行号 + 文本 + 置信度 */
.ocr { max-height: 640px; overflow-y: auto; border: 1px solid var(--line);
       border-radius: 4px; padding: 6px 4px; background: #fffdf8; }
.ln { display: grid; grid-template-columns: 30px 1fr 40px; gap: 9px;
      align-items: baseline; padding: 3px 8px; cursor: pointer;
      border-left: 3px solid transparent; border-radius: 3px; }
.ln:hover { background: var(--paper-3); }
.ln .n { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); }
.ln .t { font-size: 15px; line-height: 1.7; word-break: break-all; }
.ln .s { font-family: var(--sans); font-size: 11px; color: var(--ink-3);
         text-align: right; }
/* 已校的行淡下去，视线自然落到没校的 */
.ln.done { opacity: .42; }
.ln.done .t { text-decoration: line-through; text-decoration-thickness: 1px; }
/* 低置信度：这份 OCR 里大部头都在这档，必须对着扫描图核 */
.ln.low { background: #fdf3e0; }
.ln.low .s { color: var(--gold); font-weight: 600; }
.ln.doubt { background: var(--seal-soft); }
.ln.doubt .s { color: var(--seal); font-weight: 600; }
.ln.sel { background: var(--jade-soft); border-left-color: var(--jade); opacity: 1; }
.ln.sel .t { text-decoration: none; }

select.inline { font-size: 13px; padding: 4px 8px; }
.grid2.tight { gap: 0 18px; }

.on-page { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.on-page ul { list-style: none; margin: 8px 0 0; padding: 0;
              display: flex; flex-wrap: wrap; gap: 6px 14px; }
.on-page li { font-size: 14px; }
.on-page .alias { color: var(--ink-3); font-size: 12.5px; margin-left: 5px; }

/* ============================================================ 响应式
   平板 / 手机浏览：窄屏下顶栏换行不裁切、宽表格横向滚动、字号与留白收紧，
   录入页保存按钮满宽便于触屏点按。桌面布局不受影响。 */

/* 平板及以下：整体留白收紧，顶栏高度放开允许换行 */
@media (max-width: 900px) {
    .wrap { padding: 0 16px; }
    .topbar .bar { height: auto; min-height: 56px; padding: 6px 0; gap: 8px 16px; }
}

/* 手机：顶栏竖向堆叠、导航整行可换行、表格保最小宽度横向滚动 */
@media (max-width: 640px) {
    body { font-size: 14.5px; line-height: 1.7; }
    .wrap { padding: 0 14px; }

    /* 顶栏：品牌占一行，导航整行换行左对齐，避免固定高度裁切 */
    .topbar .bar { flex-direction: column; align-items: stretch;
                   gap: 6px; min-height: 0; padding: 8px 0; }
    .brand { font-size: 18px; }
    .nav { margin-left: 0; width: 100%; gap: 2px 4px; justify-content: flex-start; }
    .nav a { padding: 6px 10px; font-size: 13.5px; }

    main.wrap { padding-top: 18px; padding-bottom: 36px; min-height: 60vh; }
    h1.page { font-size: 22px; }
    h2.sec { font-size: 17px; margin: 26px 0 10px; }
    .sub { font-size: 13px; margin-bottom: 16px; }

    /* 表格：保最小可读宽度，超出部分在框内横向滚动，不挤压变形 */
    .tablebox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.grid { min-width: 540px; font-size: 13.5px; }
    table.grid th, table.grid td { padding: 8px 9px; }
    table.grid th { font-size: 12.5px; }

    .card, .loginbox { padding: 16px; }
    .loginbox { margin: 30px auto; }

    /* 人物条目：姓名独占一行，元信息整行铺开更易读 */
    .item { flex-direction: column; align-items: stretch; gap: 6px; }
    .item .nm { min-width: 0; }
    .item .rhs { margin-left: 0; }

    /* 录入页保存按钮满宽，触屏更好点 */
    .savebar > button[type=submit] { width: 100%; }

    /* 详情键值表：标签整行，值另起一行，避免 96px 窄列压字 */
    .kv { grid-template-columns: 1fr; gap: 2px 0; }
    .kv dt { margin-top: 8px; }
    .kv dd { margin-bottom: 4px; }
}

/* 超窄屏（≤ 380px）：再收一档字号与统计列 */
@media (max-width: 380px) {
    .brand { font-size: 16px; letter-spacing: 1px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
    .stat b { font-size: 23px; }
    .nav a { padding: 5px 8px; font-size: 13px; }
}