/* ============================================================================
   折样 · fold.css
   ----------------------------------------------------------------------------
   本款的尺度（自定一套，全应用只用它）：
     字号 12 / 13 / 15 / 18 / 24      间距 5 / 9 / 14 / 22      圆角 3（只此一个值）
     分隔：**双线 + 留白** —— 每一段的上下各一条 1px 线，中间留 2px；段内没有任何线
     色角色（自命名）：宣 xuan 纸面／墨 mo 正文／靛 ding 主色／朱 zhu 主操作与红字／
                       苔 tai·姜 jiang 纸色／灰 hui 次要字／线 xian 格线与折痕底
   ========================================================================== */
:root{
  --xuan:#f2ece0; --mo:#242019; --ding:#2e4a73; --zhu:#b8452c;
  --tai:#5f7a49; --jiang:#cf9a35; --hui:#8b8375; --xian:#d9d0bf;
  --sp1:5px; --sp2:9px; --sp3:14px; --sp4:22px;
  --f1:12px; --f2:13px; --f3:15px; --f4:18px; --f5:24px;
  --r:3px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--xuan); color:var(--mo);
  font:var(--f2)/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
b{font-weight:600}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}

/* ---------- 顶栏 ---------- */
#top{
  display:flex; align-items:center; gap:var(--sp1);
  padding:var(--sp2) var(--sp2) var(--sp1); flex:0 0 auto;
}
.tgroup{display:flex; gap:var(--sp1)}
.tbtn{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--f1); color:var(--mo); border:1px solid var(--xian); border-radius:var(--r);
  padding:5px 7px; background:transparent;
}
.tbtn:active{background:#e7dfd0}
#ttl{flex:1; text-align:center; min-width:0}
#ttl b{display:block; font-size:var(--f3); letter-spacing:.02em}
#ttl span{display:block; font-size:var(--f1); color:var(--hui)}
/* 图标：自绘线性 1.6px，三枚（样张簿 / 折法 / 纸性） */
.ic{width:13px; height:13px; display:inline-block; background:currentColor; opacity:.85;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain}
.i-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2' y='2' width='12' height='12'/%3E%3Cpath d='M2 6h12M6 2v12'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2' y='2' width='12' height='12'/%3E%3Cpath d='M2 6h12M6 2v12'/%3E%3C/g%3E%3C/svg%3E")}
.i-how{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 13h10L3 3z'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 13h10L3 3z'/%3E%3Cpath d='M8 8l5 5'/%3E%3C/g%3E%3C/svg%3E")}
.i-paper{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='2' width='10' height='12'/%3E%3Cpath d='M5.5 6h5M5.5 9h5'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='2' width='10' height='12'/%3E%3Cpath d='M5.5 6h5M5.5 9h5'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- 纸面 ---------- */
#stage{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative}
#sheetHost{flex:1 1 auto; min-height:0; position:relative}
#sheetHost svg{display:block; touch-action:none}
#sample{position:absolute; right:8px; top:8px; background:var(--xuan); border:1px solid var(--xian);
  border-radius:var(--r); padding:5px 5px 4px; text-align:center}
#sample .sl{display:block; font-size:10px; color:var(--hui); letter-spacing:.08em; margin-bottom:3px}
#sample svg{display:block; margin:0 auto}
#sample .sd{display:block; font-size:10px; color:var(--hui); margin-top:3px; font-variant-numeric:tabular-nums}
#status{
  flex:0 0 auto; text-align:center; font-size:var(--f2); color:var(--hui);
  padding:var(--sp1) var(--sp2); font-variant-numeric:tabular-nums;
}
#status b{color:var(--mo)}
#status.warn{color:var(--zhu)}
#status.warn b{color:var(--zhu)}

/* ---------- 首屏那一条（广告位） ---------- */
#adRow{
  flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp1) var(--sp2);
  padding:var(--sp2) var(--sp2);
  border-top:1px solid var(--xian); box-shadow:0 1px 0 var(--xian);
  border-bottom:1px solid var(--xian);
}
.adwrap{position:relative; display:inline-block}
.adbadge{
  position:absolute; right:-4px; top:-7px; z-index:2;
  background:var(--zhu); color:#fff8f2; font-size:9px; line-height:1;
  padding:2px 3px; border-radius:2px; letter-spacing:.04em;
}
.adbtn{
  border:1px solid var(--zhu); color:var(--zhu); border-radius:var(--r);
  padding:6px 9px; font-size:var(--f2); background:transparent;
}
.adbtn:active{background:#f6e6e0}
.adbtn[disabled]{opacity:.55}
.adhint{font-size:var(--f1); color:var(--hui); flex:1 1 120px; min-width:0}

/* ---------- 底部动作条 ---------- */
#acts{
  flex:0 0 auto; display:flex; gap:var(--sp1); padding:var(--sp2);
  border-top:1px solid var(--xian); box-shadow:0 -1px 0 var(--xian);
  padding-bottom:calc(var(--sp2) + env(safe-area-inset-bottom));
}
.act{
  border:1px solid var(--mo); border-radius:var(--r); padding:9px 4px;
  font-size:var(--f2); flex:1 1 0; text-align:center;
}
.act:active{background:#e7dfd0}
.act.main{background:var(--ding); border-color:var(--ding); color:#f6f3ec}
.act.main:active{background:#26405f}
.act.free{color:var(--tai); border-color:var(--tai)}
.act.free:active{background:#e6ebe0}
.act[disabled]{opacity:.45}

/* ---------- 页脚与首屏那一行勾选 ---------- */
#foot{
  flex:0 0 auto; margin:0; text-align:center; font-size:11px; color:var(--hui);
  padding:0 var(--sp2) var(--sp1);
}
#consent{
  flex:0 0 auto; display:flex; align-items:flex-start; gap:6px;
  padding:0 var(--sp2) var(--sp1); font-size:11px; color:var(--hui);
}
#consent input{margin:1px 0 0; flex:0 0 auto; accent-color:var(--ding)}
#consent label{flex:1 1 auto}

/* ---------- 覆盖层 ---------- */
.mask{position:fixed; inset:0; background:rgba(36,32,25,.34); display:flex; align-items:flex-end; z-index:20}
.sheet{
  background:var(--xuan); width:100%; max-height:88dvh; overflow:auto;
  border-top-left-radius:var(--sp3); border-top-right-radius:var(--sp3);
  padding:var(--sp3) var(--sp3) calc(var(--sp4) + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.ovclose{position:sticky; top:0; float:right; font-size:var(--f1); color:var(--hui);
  border:1px solid var(--xian); border-radius:var(--r); padding:3px 7px; background:var(--xuan)}
.sec{padding:var(--sp3) 0}
.sec:first-child{padding-top:var(--sp1)}
/* 双线 + 留白：每一段的上下各一条 1px 线 */
.sec + .sec{border-top:2px double var(--xian)}
h2{font-size:var(--f3); margin:0 0 var(--sp1); letter-spacing:.02em}
h3{font-size:var(--f2); margin:var(--sp2) 0 var(--sp1); color:var(--mo)}
p{margin:0 0 var(--sp1)}
.mut{color:var(--hui); font-size:var(--f1)}
.num{font-variant-numeric:tabular-nums}
.kv{display:flex; gap:var(--sp2); font-size:var(--f2); padding:3px 0; align-items:baseline}
.kv .k{flex:0 0 42%; color:var(--hui); font-size:var(--f1)}
.kv .v{flex:1 1 auto; word-break:break-all}
.kv.no .v{color:var(--zhu)}
.err{color:var(--zhu); font-size:var(--f2)}
.btn{border:1px solid var(--mo); border-radius:var(--r); padding:7px 10px; font-size:var(--f2)}
.btn:active{background:#e7dfd0}
.btn.p{background:var(--ding); border-color:var(--ding); color:#f6f3ec}
.steps{margin:0; padding-left:18px; font-size:var(--f2)}
.steps li{margin-bottom:var(--sp1)}
.shot{border:1px solid var(--xian); border-radius:var(--r); padding:var(--sp2); margin-top:var(--sp1)}
.shot .lbl{font-size:var(--f1); color:var(--hui)}
table.led{width:100%; border-collapse:collapse; font-size:11px; font-variant-numeric:tabular-nums}
table.led th{text-align:left; color:var(--hui); font-weight:400; border-bottom:1px solid var(--xian); padding:3px 2px}
table.led td{padding:3px 2px; border-bottom:1px dotted var(--xian); word-break:break-all}

/* ---------- 样张簿 ---------- */
#creaseMap{display:block; margin:0 auto var(--sp2); border:1px solid var(--xian); border-radius:var(--r); background:#fbf7ef}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:var(--sp1)}
.pcell{
  border:1px solid var(--xian); border-radius:var(--r); padding:5px 4px; text-align:center;
  background:transparent; font-size:10px; color:var(--hui); font-variant-numeric:tabular-nums;
}
.pcell b{display:block; font-size:var(--f2); color:var(--mo); margin-bottom:2px}
.pcell.on{border-color:var(--ding); color:var(--ding); background:#e9eef4}
.pcell.on b{color:var(--ding)}
.pcell.cur{border-width:2px}
.tier{margin-top:var(--sp2)}
.empty{text-align:center; color:var(--hui); font-size:var(--f2); padding:var(--sp3) 0}
.skel{height:34px; border-radius:var(--r); background:linear-gradient(90deg,#eae2d4,#f5f0e6,#eae2d4);
  background-size:200% 100%; animation:sk 1s linear infinite}
@keyframes sk{from{background-position:0 0}to{background-position:-200% 0}}

/* ---------- 纸面上的那些状态（空 / 加载 / 错误都在这块地方说清楚） ---------- */
#sheetMsg{position:absolute; inset:0; z-index:5; background:var(--xuan); overflow:auto;
  padding:var(--sp3) var(--sp3) 0}
#sheetMsg .em{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--sp2); padding-bottom:var(--sp3)}
#sheetMsg b{font-size:var(--f4)}
#sheetMsg .grid{width:100%; max-width:330px}

/* ---------- 提示条 ---------- */
#toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:78px; z-index:40;
  background:var(--mo); color:#f6f3ec; font-size:var(--f2); padding:7px 11px;
  border-radius:var(--r); max-width:86vw; text-align:center;
}

/* ---------- 启动过程 ---------- */
#boot{position:fixed; inset:0; z-index:60; background:var(--xuan);
  display:flex; align-items:center; justify-content:center}
.bootbox{text-align:center; padding:0 var(--sp4)}
.bootbox h1{font-size:var(--f5); margin:var(--sp2) 0 var(--sp1); letter-spacing:.16em}
.bootbox p{margin:0 0 var(--sp1); font-size:var(--f2); color:var(--hui)}
.bootbox .bootfoot{font-size:11px; color:var(--hui); margin-top:var(--sp2)}
.mark{width:56px; height:56px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2px}
.mark i{display:block; border:1px solid var(--xian); border-radius:1px; background:#e6ddcd}
.mark i:nth-child(2){background:#c9b795}
.mark i:nth-child(3){background:#a8b39a}
.mark i:nth-child(4){background:#d8c07e}
.bar{width:132px; height:3px; background:var(--xian); border-radius:2px; margin:var(--sp2) auto 0; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--ding)}
#bootErr{color:var(--zhu)}