/* =====================================================================
   中文字帖生成器 样式
   分三部分：界面(no-print) / 屏幕预览 / A4 打印(page sheets)
   ===================================================================== */

:root{
  --brand:#2563eb;
  --brand-dk:#1e40af;
  --ink:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#eef1f6;
  --card:#ffffff;
  --radius:12px;
  --grid-line:#93b4e0;      /* 田字格深色线 */
  --grid-line-lt:#b9cff0;   /* 田字格浅线(对角线用米字) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.no-print{ }

/* ---------- 顶栏 ---------- */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--brand),#7c3aed);
  color:#fff;font-size:24px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(37,99,235,.25);
}
.brand-text h1{font-size:19px;font-weight:700;line-height:1.2}
.brand-text p{font-size:12px;color:var(--muted);margin-top:2px}
.actions{display:flex;gap:10px}

.btn{
  padding:9px 16px;border:none;border-radius:9px;cursor:pointer;
  font-size:14px;font-weight:600;transition:.15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dk)}
.btn-dark{background:#111827;color:#fff}
.btn-dark:hover{background:#1f2937}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:7px}
.btn-ghost{background:#f3f4f6;color:var(--ink)}
.btn-ghost:hover{background:#e5e7eb}

/* ---------- 布局 ---------- */
.layout{
  display:grid;grid-template-columns:330px 1fr;gap:18px;
  padding:18px 20px;max-width:1500px;margin:0 auto;align-items:start;
}

/* ---------- 卡片面板 ---------- */
.panel{display:flex;flex-direction:column;gap:14px;position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;padding-bottom:10px}
.card{background:var(--card);border-radius:var(--radius);padding:15px 16px;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.card h2{font-size:13px;color:var(--brand-dk);margin-bottom:11px;font-weight:700;letter-spacing:.5px}
textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;
  font-size:15px;line-height:1.7;font-family:inherit;resize:none;color:var(--ink);
  /* 高度自适应: 默认由 JS 随内容自动撑高(overflow:hidden 隐藏滚动条),
     达到 max-height 上限后再出现内部滚动(极长文本不至于把左侧栏顶没) */
  min-height:76px;max-height:34vh;overflow-y:hidden;box-sizing:border-box;
}
textarea:focus,input:focus{outline:2px solid rgba(37,99,235,.35);border-color:var(--brand)}

.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:10px}
.row>label{font-size:13px;color:#374151;flex:none}
.row>input[type=text]{flex:1;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px}
.row>.val{font-size:12px;color:var(--brand);font-weight:700;width:34px;text-align:right;flex:none}
input[type=range]{flex:1;accent-color:var(--brand)}

.seg{display:flex;background:#eef2f7;border-radius:8px;padding:3px;gap:2px;flex:1}
.seg button{
  flex:1;border:none;background:transparent;padding:5px 4px;border-radius:6px;
  font-size:12.5px;color:#4b5563;cursor:pointer;white-space:nowrap;
}
.seg button.on{background:#fff;color:var(--brand);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* 参数行内的小提示图标 */
.row .tip{color:#9aa5b1;font-size:11px;margin-left:2px;cursor:help}

.mini-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:9px;cursor:pointer}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:13.5px;border-bottom:1px dashed #f0f0f0;cursor:pointer}
.switch-row:last-child{border-bottom:none}
.sw{position:relative;display:inline-block;width:38px;height:21px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#d1d5db;border-radius:21px;transition:.2s}
.sw i:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked + i{background:var(--brand)}
.sw input:checked + i:before{transform:translateX(17px)}

/* 已加入字池(折叠在「输入内容」卡片内, 便于换字; 字多时折叠) */
.pool-sec{margin-top:13px;border-top:1px dashed #e5e7eb;padding-top:11px}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.pool .hint{font-size:12.5px;color:#9ca3af;padding:6px 2px;line-height:1.6}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef2ff;color:var(--brand-dk);border:1px solid #c7d7fe;
  border-radius:20px;padding:3px 6px 3px 10px;font-size:15px;
}
.chip b{font-weight:700}
.chip .py{font-size:10px;color:#6d7cd8}
.chip button{border:none;background:transparent;color:#818cf8;font-size:15px;cursor:pointer;padding:0 3px;border-radius:50%}
.chip button:hover{color:#dc2626;background:#fee2e2}
/* 「展开全部 / 收起」折叠入口 */
.chip.more{background:#fff;border:1.5px dashed #a5b8f7;color:var(--brand);cursor:pointer;font-size:12.5px;font-weight:600;padding:3px 10px;font-family:inherit}
.chip.more:hover{background:#eef2ff;border-style:solid}

/* 字池头部: 标题 + 计数 + 清空按钮 */
.pool-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pool-title{font-size:12.5px;font-weight:700;color:var(--brand-dk);letter-spacing:.5px;white-space:nowrap}
.pool-count{font-size:11px;color:#818cf8;background:#eef2ff;border:1px solid #e0e7ff;padding:1px 7px;border-radius:999px;font-weight:600}
.pool-clear{
  margin-left:auto;border:1px solid #e5e7eb;background:#fff;color:#9ca3af;
  font-size:12px;padding:3px 10px;border-radius:8px;cursor:pointer;font-weight:500;
  transition:.15s;
}
.pool-clear:hover{color:#dc2626;border-color:#fecaca;background:#fef2f2}
.pool-clear.armed{background:#dc2626;border-color:#dc2626;color:#fff;font-weight:700}
.pool-clear[hidden]{display:none}

/* ---------- 预览 ---------- */
.preview-wrap{min-width:0}
/* A4 预览分区标题: 左标签 + 细线渐变 + 右侧页数徽标, 报刊/文档级"section break" 风格 */
.preview-hint{
  display:flex;align-items:center;gap:14px;
  font-size:12.5px;color:#6b7280;
  margin:6px 4px 18px;padding:0;
  letter-spacing:.3px;
  position:relative;
}
.preview-hint::before,.preview-hint::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,transparent,#d1d5db 40%,#d1d5db 60%,transparent);
}
.preview-hint::before{order:-1}
.preview-hint .ph-lbl{
  font-size:13px;color:#111827;font-weight:700;letter-spacing:1.5px;
  position:relative;padding-left:14px;
}
.preview-hint .ph-lbl::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),#7c3aed);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.preview-hint .ph-sub{color:#9ca3af;font-size:12px}
.preview-hint .ph-count{
  display:none;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;
  background:#eef2ff;color:#3730a3;font-weight:600;font-size:11.5px;
  border:1px solid #e0e7ff;letter-spacing:.4px;
}
.preview-hint.has-pages .ph-count{display:inline-flex}
.pages{display:flex;flex-direction:column;gap:18px;align-items:center}
/* A4 预览的缩放容器: 桌面 scale=1 时尺寸即 A4; 手机窄屏时由 JS 等比缩小整页 */
.sheet-holder{position:relative;flex:none}

/* ---------- A4 纸张（屏幕预览与打印共用结构） ---------- */
.sheet{
  width:210mm;min-height:297mm;background:#fff;
  position:relative;
  box-shadow:0 6px 24px rgba(16,24,40,.18);
  overflow:hidden;color:#111;
  /* 纵向 flex: 标题 / 内容(可伸缩) / 页脚(钉底) —— 页脚始终贴住 A4 最底部, 类似 Word 页脚 */
  display:flex;flex-direction:column;
}
.sheet.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9ca3af;font-size:15px;padding:40mm}
.sheet.empty p{margin:0}
.sheet .sheet-head{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sheet .sheet-title{font-size:22px;letter-spacing:4px;font-weight:700;line-height:1.3}
.sheet .sheet-sub{margin-top:2mm;font-size:12.5px;color:#333;display:flex;justify-content:center;gap:12mm}
.sheet .sheet-sub .date{color:#333}
/* 内容区: 占据标题与页脚之间的剩余高度, 内容从顶部排列 */
.sheet .sheet-body{width:100%;flex:1 0 auto;min-height:0}
/* 页脚: margin-top:auto 把它推到 flex 容器最底部(页面底边), 各页一致 */
.sheet .sheet-foot{flex:none;text-align:center;color:#b9b3a5;font-size:2.8mm;margin-top:auto;padding-top:2mm;font-family:Arial;}

/* 字帖行: 格子默认左对齐 */
.write-row{display:flex;align-items:flex-start;justify-content:flex-start;width:100%}

/* 顶部笔顺展示行（整行横排, 默认左对齐） */
.order-band{
  flex:none;display:flex;align-items:center;justify-content:flex-start;
  background:#fbf7ec;border:0.3mm solid #eadfc4;border-radius:2.6mm;
  padding:0 4mm;
}
.order-band .ob-char{
  flex:none;font-family:"KaiTi","STKaiti","Kaiti SC","楷体",serif;
  font-size:7.6mm;font-weight:700;color:#b4533a;line-height:1;
}
.order-band .ob-gap{flex:none;width:3.4mm;height:0.4mm;background:#e6d7b5;border-radius:1mm}
.order-band .ob-seq{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:2mm}
.order-band .ob-i{
  position:relative;width:6mm;height:6mm;flex:none;
  border:0.24mm solid #e2d0ab;border-radius:1.1mm;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:KaiTi,STKaiti,"楷体",serif;
}
.order-band .ob-i i{font-style:normal;font-size:4.6mm;color:#7d6b4e;line-height:1}
.order-band .ob-total{flex:none;margin-left:3mm;font-size:3mm;color:#b8a271;font-family:Arial;white-space:nowrap}
/* 渐进书写步骤图: N 个整字, 走过的笔画深蓝、未走浅色, 末个为全高亮完整字。
   尺寸由 JS 依 SF_BUDGET 计算并写死 inline(px), .sf 为自然尺寸、从左上排列,
   因此笔顺带靠左、不铺满、任意画数单行放得下, 打印与预览共用同一预算一致。 */
.order-band .ob-seq.steps{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:0.8mm;overflow:hidden}
.order-band .ob-seq.steps .sf{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:0.15mm solid #e7dec9;border-radius:1mm;
  padding:0.5mm;box-sizing:border-box;
}
.order-band .ob-seq.steps .sf svg{display:block;flex:none}

/* 单个格槽: 上方拼音 + 下方格子 */
.cell{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}
.cell .py{
  flex:none;text-align:center;font-family:Arial,"Helvetica Neue",sans-serif;
  /* 拼音色：沉稳一点的"赤"红，与下方淡色描红范字同属一色系、不过分抢眼；
     (原来 #dc2626 偏亮，小字号+白底打印会显得刺眼) */
  color:#a32d2d;font-weight:600;width:100%;white-space:nowrap;letter-spacing:0;
}
/* 数字标调模式下右上角声调号：要比字母稍深/稍突出，便于区分(规范：声调号须与字母明显区分) */
.cell .py b.tn{font-weight:700;font-size:0.6em;vertical-align:super;margin-left:0.5px;color:#7a1e22}
.cell .grid{flex:none;position:relative;background:#fff}
.cell .glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  line-height:1;
}
/* 范字(淡色描红底) / 实心示范字
   描红范字必须是"红"色系（描红=用红印范字供墨笔临摹），传统为正红/朱砂。
   此处采用传统"赤"红 #C3272B 并淡显(α≈0.24)，打印出来是浅朱红淡底，清晰不刺眼。 */
.cell .model{font-family:"KaiTi","STKaiti","Kaiti SC","楷体","楷体_GB2312",serif;color:rgba(195,39,43,.24);font-weight:400}
.cell .char-main{font-family:"KaiTi","STKaiti","Kaiti SC","楷体","楷体_GB2312",serif;color:#111;font-weight:600}
/* 格子类型: 外框(细浅) + 内部辅助线用 svg 虚线(见 .gln)，取代旧的 linear-gradient，
   避免打印/预览出现不规则区域高亮。 */
.g-tian,.g-mi,.g-kong,.g-hui{
  outline:0.5mm solid #d5dce6;outline-offset:-0.45mm;
}
/* 回宫格外框偏暖棕 */
.g-hui{outline:0.5mm solid #dcd2b6}
/* 内部辅助线: svg 覆盖层, 虚线, 保证 A4 打印稳定、不发散 */
.grid .gln{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;display:block;overflow:visible;
}
.grid .gln line,.grid .gln rect{
  stroke:#cfd9e6;stroke-width:0.6;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:3.2 3.2;
}
.g-hui .gln line,.g-hui .gln rect{stroke:#e6dcc4}
/* 屏幕 hover 交互：仅当启用了点击动画 */
.cell.clickable{cursor:pointer}
.cell.clickable:hover .grid{box-shadow:inset 0 0 0 2px rgba(37,99,235,.55)}

/* ================= 响应式（仅屏幕；打印不受影响） ================= */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr;max-width:860px}
  .panel{position:static;max-height:none}
  .preview-hint{margin-left:0}
}
@media (max-width:920px){
  .preview-wrap{width:100%}
  .toolbar{flex-wrap:wrap;gap:8px}
}
@media (max-width:560px){
  .brand-text p{display:none}
  .actions{width:100%;display:flex}
  .actions .btn{flex:1}
  .preview-hint .ph-sub{display:none}
}

/* ================= 打印样式（核心） ================= */
@page{ size:A4 portrait; margin:0; }
@media print{
  html,body{background:#fff;margin:0}
  .no-print{display:none !important}
  .layout,.toolbar,.preview-hint{display:none !important}
  /* 页面区隐藏，改用专用打印区 */
  #previewArea{display:none !important}
  #printArea{display:block !important;padding:0;margin:0}
  .sheet{
    width:210mm;min-height:0;box-shadow:none;
    margin:0;padding:0;
    page-break-after:always;break-after:page;
    overflow:visible;
  }
  .sheet:last-child{page-break-after:auto;break-after:auto}
  /* 关掉屏幕 hover 特效 */
  .cell.clickable:hover .grid{box-shadow:none}
}
/* 屏幕不显示打印区 */
#printArea{display:none}

/* 内容边距由内层控制，便于精确分页 */
/* ================= 导出菜单(存 PDF / PNG) ================= */
.export-wrap{position:relative;flex:none}
.export-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:208px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 14px 40px rgba(15,23,42,.18);
}
.export-menu .em-item{
  display:block;width:100%;text-align:left;border:none;background:transparent;
  padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;
}
.export-menu .em-item:hover{background:#eef4ff;color:var(--brand)}
.export-menu .em-sub{margin-top:4px;border-top:1px dashed var(--line);border-radius:0 0 8px 8px;font-weight:500;color:var(--muted);padding-top:8px}
.export-menu .em-sub:hover{color:var(--brand)}
.export-menu .em-item:disabled{opacity:.55;cursor:progress}
/* 窄屏: 顶栏按钮允许换行紧凑排列 */
@media (max-width:640px){
  .export-menu{right:auto;left:0}
  .actions{gap:8px}
  .actions .btn{white-space:nowrap}
}
/* ================= 轻量 toast 提示（替代系统 alert） ================= */
.toast{
  position:fixed;top:16px;left:50%;transform:translate(-50%,-140%);
  display:flex;align-items:center;gap:10px;
  padding:11px 20px 11px 14px;border-radius:12px;
  background:#fff;color:#1f2937;
  box-shadow:0 10px 34px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
  border:1px solid var(--line);border-left:4px solid #f59e0b;
  z-index:200;max-width:88vw;
  font-size:14px;font-weight:500;line-height:1.4;
  opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .22s ease;
}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast.ok{border-left-color:#16a34a}
.toast.warn{border-left-color:#f59e0b}
.toast .toast-ico{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;background:#f59e0b;font-weight:700;
}
.toast.ok .toast-ico{background:#16a34a}
.toast .toast-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= 微信内置浏览器下载引导 ================= */
.wx-box{
  background:#fff;border-radius:16px;padding:22px 24px 20px;max-width:380px;width:92vw;
  position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.wx-title{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:10px}
.wx-desc{font-size:13.5px;line-height:1.6;color:#4b5563;margin-bottom:12px}
.wx-strong{color:#dc2626;font-weight:700}
.wx-steps{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.7;color:#374151}
.wx-steps b{color:var(--brand-dk)}
.wx-tip{font-size:12px;color:var(--muted);background:#f3f4f6;border-radius:8px;padding:8px 10px;margin-bottom:14px;line-height:1.5}
.wx-actions{display:flex;gap:8px}
.wx-actions .btn{flex:1;padding:9px 6px}

/* ================= 笔画动画弹窗 ================= */
.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.55);
  display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px);
}
.modal.open{display:flex}
.modal-box{
  background:#fff;border-radius:16px;padding:22px 26px;width:520px;max-width:94vw;
  position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-close{position:absolute;top:12px;right:14px;border:none;background:#f3f4f6;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer;color:#555}
.modal-close:hover{background:#e5e7eb}
.modal-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.m-char{font-family:KaiTi,STKaiti,serif;font-size:66px;line-height:1;color:#111;width:74px;text-align:center}
.m-meta{flex:1}
.m-pinyin{font-size:24px;color:#a32d2d;font-weight:700;font-family:Arial}
.m-info{font-size:13px;color:var(--muted);margin-top:3px}
.m-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.m-frame{
  width:300px;height:300px;position:relative;margin:0 auto;
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
}
.m-frame .m-canvas{position:absolute;inset:0;z-index:1;background:transparent}
.m-frame .m-guide{
  position:absolute;inset:6%;width:88%;height:88%;z-index:0;
  pointer-events:none;
}
.m-frame .m-guide line,.m-frame .m-guide rect{
  stroke:#cdd7e3;stroke-width:0.6;fill:none;stroke-linecap:round;
  stroke-dasharray:3 3;
}
.m-frame .m-guide rect{fill:none}
.m-frame .m-canvas>svg{width:100%;height:100%;display:block}
.m-note{font-size:12.5px;color:#9ca3af;margin-top:12px;text-align:center}

/* ================= 竖向滚动条：细、圆润、默认隐藏、悬停/滚动时浮现 ================= */
/* Firefox */
html,.panel{
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,0) transparent;
  scrollbar-gutter:stable;
}
html:hover,html:focus-within,
.panel:hover,.panel:focus-within{
  scrollbar-color:rgba(100,116,139,.38) transparent;
}
/* WebKit / Blink (Chrome, Edge, Safari) */
html::-webkit-scrollbar,.panel::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-track,.panel::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-corner,.panel::-webkit-scrollbar-corner{background:transparent}
html::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,0);          /* 默认隐藏 */
  border-radius:9px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background .25s ease;
}
html:hover::-webkit-scrollbar-thumb,
html:focus-within::-webkit-scrollbar-thumb,
.panel:hover::-webkit-scrollbar-thumb,
.panel:focus-within::-webkit-scrollbar-thumb{background:rgba(100,116,139,.34)}

/* 弹窗内用 cnchar-draw 会自建元素，限制尺寸 */