/* ============================================================
   中文字帖生成器 · 样式（多语言版 · 淡黄书卷配色）
   ============================================================ */
:root{
  /* 淡黄书卷色系 */
  --bg:#f6efd9;
  --bg-2:#efe4c8;
  --panel:#fdf8e8;
  --panel-2:#f8f0d8;
  --line:#e2d3a8;
  --line-2:#d4c194;
  --ink:#4a3b22;
  --ink-2:#7a6944;
  --ink-3:#a3936a;
  --accent:#b8860b;
  --accent-2:#966d08;
  --accent-soft:#f7ecd0;
  --radius:10px;
  --shadow:0 1px 2px rgba(90,70,30,.06), 0 8px 24px rgba(90,70,30,.10);
  --grid-line:#cc5a30;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 顶栏 ---------- */
.topbar{
  height:60px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,#d4a017,#966d08); color:#fff;
  font-size:22px; font-weight:700; font-family:"Kaiti SC","KaiTi",serif;
  box-shadow:0 3px 10px rgba(184,134,11,.35);
}
.brand h1{font-size:16px; font-weight:600; letter-spacing:.3px;}
.brand p{font-size:11.5px; color:var(--ink-3); margin-top:1px;}
.topbar-actions{display:flex; gap:8px; align-items:center;}

/* 语言选择 */
.lang-box{display:flex; align-items:center; gap:6px; margin-right:2px;}
.lang-box select{
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
  border-radius:8px; padding:6px 9px; font-size:12.5px; font-family:inherit; cursor:pointer; outline:none;
}
.lang-box select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,134,11,.12);}
.lang-globe{font-size:15px; opacity:.65;}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
  padding:7px 13px; border-radius:8px; font-size:13px; cursor:pointer;
  font-family:inherit; transition:.15s; white-space:nowrap;
}
.btn:hover{background:#fbf4de; border-color:#c3ab7a;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2);}
.btn-ghost{background:var(--panel-2);}
.btn-block{width:100%; margin-top:8px; display:block;}
.btn-sm{padding:5px 10px; font-size:12px;}
.btn-xs{padding:3px 8px; font-size:11px; border-radius:6px;}

/* ---------- 布局 ---------- */
.layout{
  display:grid; grid-template-columns:300px minmax(0,1fr) 316px;
  gap:10px; padding:10px; height:calc(100vh - 60px);
}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
.panel-left,.panel-right{overflow-y:auto;}
.panel-center{display:flex;flex-direction:column;overflow:hidden;}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel); z-index:5;
}
.panel-head h2{font-size:13.5px; font-weight:600; letter-spacing:.3px;}
.badge{font-size:11px; background:var(--accent-soft); color:var(--accent-2); padding:2px 8px; border-radius:20px;}

/* ---------- Tabs ---------- */
/* 4 个页签；长语言（如德语）可能超出左栏宽度 → 允许横向滚动，禁止换行/挤压 */
.tabs{display:flex; border-bottom:1px solid var(--line); padding:0 8px; gap:2px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  border:0; background:none; padding:10px 11px; font-size:13px; cursor:pointer;
  color:var(--ink-2); border-bottom:2px solid transparent; font-family:inherit;
  white-space:nowrap; flex:0 0 auto;
}
.tab.active{color:var(--accent-2); border-bottom-color:var(--accent); font-weight:600;}
.tabpane{display:none; padding:12px; flex:1; overflow-y:auto;}
.tabpane.active{display:block;}

/* ---------- 字帖库 ---------- */
.group-list{display:flex; flex-direction:column; gap:4px; margin-bottom:10px;}
.group-item{
  padding:8px 11px; border-radius:8px; cursor:pointer; font-size:13px;
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid transparent;
}
.group-item:hover{background:#fbf4de;}
.group-item.active{background:var(--accent-soft); color:var(--accent-2); font-weight:600; border-color:#eeddb0;}
.group-item .n{font-size:11px; color:var(--ink-3);}
.charset-list{display:flex; flex-direction:column; gap:6px;}
.charset-item{
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; cursor:pointer;
  transition:.15s; background:var(--panel);
}
.charset-item:hover{border-color:var(--accent); background:var(--accent-soft);}
.charset-item .t{font-size:13px; font-weight:500; display:flex; justify-content:space-between;}
.charset-item .t .n{font-size:11px; color:var(--ink-3); font-weight:400;}
.charset-item .preview{
  font-size:16px; color:var(--ink-2); margin-top:5px; letter-spacing:1px;
  font-family:"Kaiti SC","KaiTi",serif; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; max-width:100%;
}
.charset-actions{display:flex; gap:5px; margin-top:8px;}
.charset-actions .btn{flex:1; padding:4px 6px; font-size:11.5px;}

/* ---------- 通用输入 / 结果网格 ---------- */
.field input[type=text],.field input[type=number],.field select,textarea{
  width:100%; border:1px solid var(--line-2); border-radius:7px; padding:7px 9px;
  font-size:13px; font-family:inherit; color:var(--ink); background:var(--panel-2); outline:none;
}
.field input:focus,.field select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,134,11,.12);}
.hint{font-size:12px; color:var(--ink-3); line-height:1.7;}
.result-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:5px;}
.result-cell{
  aspect-ratio:1; border:1px solid var(--line); border-radius:6px; display:grid; place-items:center;
  font-size:19px; cursor:pointer; font-family:"Kaiti SC","KaiTi",serif; background:var(--panel); transition:.12s;
}
.result-cell:hover{border-color:var(--accent); background:var(--accent-soft);}
.result-cell.sel{background:var(--accent); color:#fff; border-color:var(--accent);}
/* 词视图单元格：取消正方形约束，避免多字词被压变形 */
.result-cell.word{
  aspect-ratio:auto; min-height:32px; padding:3px 6px; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:inherit; line-height:1.3;
}
.result-meta{font-size:11.5px; color:var(--ink-3); margin:8px 0; display:flex; justify-content:space-between; align-items:center;}
.row-gap{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.btn-row2{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.btn-row2 .btn{width:auto; flex:0 0 auto;}
/* 「添加到字帖」「清空」保持紧凑，「重新生成」占满剩余宽度 → 三个按钮恒在一行 */
.btn-row2 #btnRegenerate{flex:1 1 auto;}
textarea{min-height:130px; resize:vertical; line-height:1.8;}

/* ---------- 字帖库内联预览 ---------- */
.charset-preview{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
}
.charset-preview .result-grid{margin-top:2px;}

/* ---------- HSK 词汇 ---------- */
.hsk-levels{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px;}
.hsk-level-item{
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
  padding:7px 10px; cursor:pointer; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; gap:2px; transition:.14s;
}
.hsk-level-item:hover{border-color:var(--accent); background:var(--accent-soft);}
.hsk-level-item.active{background:var(--accent); border-color:var(--accent);}
.hsk-level-item.active .lv,.hsk-level-item.active .n{color:#fff;}
.hsk-level-item .lv{font-size:13px; font-weight:600; color:var(--ink-2);}
.hsk-level-item .n{font-size:10.5px; color:var(--ink-3);}
.hsk-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:2px; padding-bottom:8px; border-bottom:1px dashed var(--line);
}
.hsk-view{display:grid; grid-template-columns:1fr 1fr; gap:0; width:120px;}
.hsk-count{font-size:11.5px; color:var(--accent-2); font-weight:600;}
.hsk-loading{
  font-size:12px; color:var(--ink-3); text-align:center; padding:16px 0;
}
.hsk-loading[hidden]{display:none;}
#hskGrid{margin-top:2px;}

/* ---------- 输入文字面板 ---------- */
.input-area{
  border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:var(--panel-2);
  transition:.15s;
}
.input-area:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,134,11,.12);}
.input-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 11px; background:#f8f0d8; border-bottom:1px solid var(--line);
}
.input-title{font-size:12px; font-weight:600; color:var(--ink-2);}
.input-count{font-size:11.5px; color:var(--accent-2); font-weight:600;}
.input-area textarea{
  border:0 !important; border-radius:0; box-shadow:none !important;
  min-height:190px; width:100%; padding:11px; font-size:14px; line-height:2;
  background:var(--panel-2);
}
.opt-row{display:flex; gap:14px; flex-wrap:wrap;}
.quick-fill{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:11px; padding-top:10px; border-top:1px dashed var(--line);
}
.qf{border-radius:20px; padding:3px 10px;}
.qf.active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- 快捷选择面板（输入文字页，点「小学/HSK/古诗词」展开） ---------- */
.quick-pick{
  margin-top:10px; padding:11px 12px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--panel-2);
}
.quick-pick[hidden]{display:none;}
.quick-pick .qp-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:9px; padding-bottom:8px; border-bottom:1px dashed var(--line);
}
.quick-pick .qp-hint{font-size:11.5px; color:var(--ink-3);}
.quick-pick .qp-close{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:11.5px; color:var(--accent-2); padding:2px 4px;
}
.quick-pick .qp-close:hover{text-decoration:underline;}
.qp-chips{display:flex; flex-wrap:wrap; gap:6px;}
.qp-chip{
  border:1px solid var(--line); border-radius:16px; background:var(--panel);
  padding:5px 11px; cursor:pointer; font-family:inherit; font-size:12px;
  color:var(--ink-2); transition:.14s; white-space:nowrap;
}
.qp-chip:hover{border-color:var(--accent); background:var(--accent-soft);}
.qp-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
/* 分类（唐诗 / 宋词 / 古文 / 现代名篇）：一级按钮，视觉上更突出 */
.qp-cats{
  margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--line);
}
.qp-chip.qp-cat{
  border-radius:7px; font-weight:600; padding:5px 13px;
  background:#f8f0d8; border-color:var(--line-2); color:var(--ink-2);
}
.qp-chip.qp-cat:hover{border-color:var(--accent); background:var(--accent-soft);}
.qp-chip.qp-cat.active{background:var(--accent); border-color:var(--accent); color:#fff;}
/* 网文书名（尤其英文/泰文译名）较长：竖排铺满一行、允许折行，避免胶囊横向溢出 */
.qp-chips.qp-titles{flex-direction:column; align-items:stretch;}
.qp-chips.qp-titles .qp-chip{
  white-space:normal; text-align:left; border-radius:9px; padding:7px 11px; line-height:1.45;
}
/* 字帖库列表内的分类分区标题 */
.charset-cat{
  font-size:11.5px; font-weight:700; color:var(--accent-2);
  margin:14px 0 6px; padding-left:8px; border-left:3px solid var(--accent);
  letter-spacing:.5px;
}
.charset-cat:first-child{margin-top:2px;}
.qp-sub{display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap;}
.qp-sub .qp-chip{font-size:11.5px; padding:4px 9px;}
.qp-empty{font-size:12px; color:var(--ink-3); padding:8px 0;}

/* ---------- 笔顺面板（并入「输入文字」页，紧随其下） ---------- */
.stroke-panel{
  border:1px solid var(--line); border-radius:9px; background:var(--panel-2);
  margin-top:16px; padding-top:0; overflow:hidden;
}
.sp-head{
  display:flex; align-items:center; gap:8px; padding:8px 11px;
  border-bottom:1px solid var(--line); font-size:12.5px; background:#f8f0d8;
  flex-wrap:wrap;
}
.sp-head .sp-title{color:var(--ink-2); font-weight:600;}
.sp-input{
  width:46px; height:30px; border:1px solid var(--line-2); background:#fff; color:var(--accent-2);
  border-radius:7px; padding:0 6px; font-size:19px; line-height:1;
  font-family:"Kaiti SC","KaiTi","PingFang SC",serif; font-weight:600;
  text-align:center; outline:none; transition:border-color .15s,box-shadow .15s;
}
.sp-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,134,11,.12); background:#fffdf5;}
.sp-input::placeholder{font-size:10.5px; font-weight:400; color:var(--ink-3); letter-spacing:0;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
.sp-ctrl{margin-left:auto; display:flex; gap:4px;}
.sp-body{
  padding:12px; display:flex; gap:13px; align-items:flex-start;
}
.sp-canvas{
  width:140px; height:140px; border:1px solid var(--grid-line); border-radius:8px;
  position:relative; flex-shrink:0; background:#fff;
}
.sp-info{font-size:12px; color:var(--ink-2); line-height:1.9; flex:1; min-width:0;}
.sp-info b{color:var(--accent-2); font-size:14px;}
.sp-steps{display:flex; flex-wrap:wrap; gap:3px; margin-top:6px;}
.sp-step{
  width:21px;height:21px;border-radius:5px;font-size:10.5px;display:grid;place-items:center;
  background:var(--bg-2); color:var(--ink-2); border:1px solid var(--line);
}
.sp-step.done{background:var(--accent); color:#fff; border-color:var(--accent);}
.sp-step.cur{background:#fff; border-color:var(--accent); color:var(--accent-2); font-weight:700; box-shadow:0 0 0 2px rgba(184,134,11,.22);}
.sp-placeholder{font-size:12px; color:var(--ink-3);}

/* ---------- 中栏 ---------- */
.center-toolbar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:9px 15px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.toolbar-left{display:flex; align-items:center; gap:9px;}
.toolbar-left .label{font-size:12px; color:var(--ink-3);}
.toolbar-left .count{font-size:12.5px; font-weight:600; color:var(--accent-2);}
.toolbar-mid{display:flex; justify-content:center; min-width:0;}
.feedback-tip{
  font-size:12px; color:var(--ink-3); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toolbar-right{display:flex; gap:6px; justify-content:flex-end;}
.preview-scroll{flex:1; overflow:auto; padding:10px 4px; background:var(--bg-2);}
.page-wrap{display:flex; justify-content:center;}
/* 预览宿主：只做居中排布，纸张样式完全由内部的 .page 承担
   （此前宿主自身也是 .page，导致单页预览时出现「两张白纸」叠影） */
.preview-host{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.page{
  background:#fff; box-shadow:0 2px 14px rgba(120,95,40,.18);
  width:210mm; min-height:297mm; padding:var(--pt-top,12mm) var(--pt-right,12mm) var(--pt-bottom,10mm) var(--pt-left,12mm);
  position:relative;
}
.page.landscape{width:297mm; min-height:210mm;}

/* ---------- 右栏字段 ---------- */
.panel-right{padding:0;}
.field{padding:11px 15px; border-bottom:1px solid #f3ecd6;}
.field-label{font-size:12.5px; color:var(--ink-2); display:block; margin-bottom:7px; font-weight:500;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.row2 label,.row3 label{font-size:11.5px; color:var(--ink-2); display:flex; flex-direction:column; gap:4px;}
.row2 input,.row2 select,.row3 input{width:100%;}
.row3{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.mini-hint{font-size:10.5px; color:var(--ink-3); margin-top:5px;}
hr{border:0; border-top:1px solid var(--line); margin:4px 0;}

/* 分段按钮 */
.seg{display:flex; flex-wrap:wrap; gap:4px;}
.seg-wrap{gap:5px 6px;}
.seg-btn{
  border:1px solid var(--line-2); background:var(--panel); border-radius:7px; padding:5px 10px;
  font-size:12px; cursor:pointer; font-family:inherit; color:var(--ink-2); transition:.12s;
}
.seg-btn:hover{border-color:#c3ab7a; background:#fbf4de;}
.seg-btn.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;}

/* 「汉字类型」单选组：小圆点外观，用 grid 保证行对齐 */
.seg-radio{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:7px 10px; align-items:center;
}
.seg-radio .seg-btn{
  border:0; background:none; padding:2px 0; border-radius:0;
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  color:var(--ink-2); font-size:12.5px; text-align:left;
  height:22px; line-height:22px;
}
.seg-radio .seg-btn::before{
  content:''; width:12px; height:12px; border-radius:50%;
  border:1.5px solid #bda878; background:#fff; flex-shrink:0;
  box-sizing:border-box; transition:.12s;
}
.seg-radio .seg-btn>span{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.seg-radio .seg-btn:hover{color:var(--accent-2);}
.seg-radio .seg-btn:hover::before{border-color:var(--accent);}
.seg-radio .seg-btn.active{background:none; color:var(--accent-2); font-weight:600; border:0;}
.seg-radio .seg-btn.active::before{
  border-color:var(--accent); background:var(--accent);
  box-shadow:inset 0 0 0 2.5px #fff;
}

/* 复选框 */
.chk-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 8px;}
.chk{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); cursor:pointer;}
.chk input{accent-color:var(--accent); width:14px; height:14px; cursor:pointer;}
.color-row{display:flex; align-items:center; gap:9px;}
.color-row input[type=color]{
  width:38px; height:28px; border:1px solid var(--line-2); border-radius:6px; padding:2px;
  background:var(--panel); cursor:pointer;
}
.panel-right .btn-block{margin:9px 15px; width:calc(100% - 30px);}

/* ============================================================
   字格渲染（预览 + 打印共用）
   ============================================================ */
.sheet-title{
  text-align:center; font-size:19px; font-weight:600; letter-spacing:2px;
  padding-bottom:8px; margin-bottom:10px; border-bottom:2px solid #e8e2d9;
  font-family:"Kaiti SC","KaiTi",serif;
}
.sheet-subline{
  display:flex; justify-content:space-between; font-size:11.5px; color:#8a8078;
  margin-bottom:9px; padding-bottom:5px; border-bottom:1px dashed #e8e2d9;
}
.grid{
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  align-content:flex-start;
}
/* 每格由「拼音带 + 方格」两段组成，拼音不再压在字上 */
.cellwrap{
  display:flex; flex-direction:column; align-items:stretch; flex:0 0 auto;
  align-self:flex-start;      /* 不被 flex 行高拉伸，高度由内容决定 */
  height:auto;
}
.cellwrap .cell-pinyin{
  height:22px; min-height:22px; line-height:22px; text-align:center; font-size:15px;
  color:#8a7340; letter-spacing:.3px; font-family:"Times New Roman",serif;
  overflow:hidden; white-space:nowrap; font-weight:500;
  flex:0 0 22px;   /* 固定高度：即使无拼音也占位，保证同行格子等高 */
}
.cellwrap.nopy .cell-pinyin{display:none;}
.cell{
  position:relative; box-sizing:border-box;
  width:var(--cell,82px); height:var(--cell,82px);
  flex-shrink:0;
}
.cell-box{
  position:absolute; inset:0; border:2px solid var(--grid-line);
  opacity:var(--grid-op,1); overflow:visible;
}
.cell-box>svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;}
.cell-char{position:absolute; inset:0;}
.cell-char svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* 角标 */
.cell-corner{
  position:absolute; font-size:8.5px; color:#bcab8e; z-index:3; line-height:1;
  font-family:sans-serif;
}
.cell-corner.tl{top:2px; left:3px;}
.cell-corner.br{bottom:2px; right:3px;}
.cell-corner.tr{top:2px; right:3px;}

/* 笔顺格：格内拆成小分区 */
.cell-strokenum{
  position:absolute; font-size:9px; color:#c8342c; z-index:4;
  width:12px;height:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.85); border-radius:3px; font-weight:700;
}
.cell-strokenum.tl{top:1px; left:1px;}

/* ============================================================
   加载状态
   ============================================================ */
.load-status{
  display:flex; align-items:center; gap:8px; margin-right:4px;
  padding:5px 11px; border-radius:8px; background:var(--accent-soft);
  border:1px solid var(--line); font-size:12px; color:var(--ink-2);
  position:relative; overflow:hidden; min-width:190px;
}
.load-status[hidden]{display:none;}
.ls-spinner{
  width:12px; height:12px; flex:0 0 auto; border-radius:50%;
  border:2px solid #e6d7ac; border-top-color:var(--accent);
  animation:lspin .7s linear infinite;
}
@keyframes lspin{to{transform:rotate(360deg);}}
.ls-bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%; background:#eee0bb;
}
.ls-bar>i{
  display:block; height:100%; width:0%; background:var(--accent);
  transition:width .2s ease;
}
.load-status.done .ls-spinner{display:none;}
.load-status.done{border-color:#d8e3b8; background:#f3f6e4;}

/* 隐藏的数据模式标识（保留节点但不可见） */
.lib-mode[hidden],.lib-mode.hide{display:none !important;}

/* ============================================================
   打印
   ============================================================ */
#printArea{display:none;}

@media print{
  @page{
    size:var(--paper-w,210mm) var(--paper-h,297mm);
    margin:0;
  }
  html,body{background:#fff; height:auto;}
  .no-print{display:none !important;}
  .layout{display:none !important;}
  #printArea{display:block !important;}

  #printArea .print-page{
    width:var(--paper-w,210mm); height:var(--paper-h,297mm);
    padding:var(--pt-top,12mm) var(--pt-right,12mm) var(--pt-bottom,10mm) var(--pt-left,12mm);
    box-sizing:border-box; background:#fff;
    page-break-after:always; break-after:page;
    position:relative; overflow:hidden;
  }
  #printArea .print-page:last-child{page-break-after:auto; break-after:auto;}
  #printArea .print-foot{
    position:absolute; bottom:var(--pt-bottom,10mm); left:var(--pt-left,12mm); right:var(--pt-right,12mm);
    display:flex; justify-content:space-between; font-size:10px; color:#9a8f82;
  }
}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d8c89c; border-radius:6px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#c4b17f; background-clip:content-box;}

/* 响应式 */
@media (max-width:1360px){
  .layout{grid-template-columns:300px minmax(0,1fr) 280px;}
}
@media (max-width:1180px){
  .layout{grid-template-columns:262px minmax(0,1fr) 250px; gap:8px; padding:8px;}
}