/* 离屏渲染用的 App 界面样式：取自 iOS 端 DESIGN.md（纸面型设计系统），只用于生成落地页截图。 */
@font-face { font-family: "YJ Serif"; src: url("/fonts/noto-serif-sc-600.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "YJ Serif"; src: url("/fonts/noto-serif-sc-800.woff2") format("woff2"); font-weight: 800; }
:root {
  --canvas: #F1EEE7; --ink: #17231E; --ink-2: #596B61; --brand: #17644B; --brand-wash: #E1EEE8;
  --clay: #C9785C; --clay-wash: #F4E2DA; --surface: #FBFAF6; --line: #D2CEC5; --line-soft: #E4E0D7;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  background: var(--canvas); color: var(--ink);
  font: 400 14px/1.45 -apple-system, "SF Pro Text", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden; position: relative;
}
.status { height: 50px; padding: 18px 26px 0 30px; display: flex; justify-content: space-between; align-items: center; height: 54px; padding-top: 6px; font: 600 15px/1 -apple-system, sans-serif; letter-spacing: -.2px; }
.status i { display: inline-flex; gap: 5px; align-items: center; font-style: normal; }
.status .bars { width: 17px; height: 11px; background: linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 4.6px, var(--ink) 4.6px 7.6px, transparent 7.6px 9.2px, var(--ink) 9.2px 12.2px, transparent 12.2px 13.8px, var(--ink) 13.8px); clip-path: polygon(0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.status .batt { width: 24px; height: 12px; border: 1.3px solid var(--ink); border-radius: 3.5px; padding: 1.5px; opacity: .9; }
.status .batt::after { content: ""; display: block; height: 100%; width: 78%; background: var(--ink); border-radius: 1.5px; }
.pad { padding: 0 22px; }
.serif { font-family: "YJ Serif", "Songti SC", serif; }
.date { font-size: 13px; color: var(--ink-2); letter-spacing: .02em; }
.title { font: 800 30px/1.15 "YJ Serif", serif; letter-spacing: -.5px; }
.h2 { font: 800 19px/1.2 "YJ Serif", serif; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.sun { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #F2C2A6, #E7A685 60%, #DD9877); opacity: .82; filter: saturate(.9); }
.sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.08) 0 2px, transparent 2px 5px); }
.check { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; flex: none; }
.check::after { content: ""; width: 9px; height: 5px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.open { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid #B9B4A9; flex: none; }
.row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row .t { width: 44px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row .name { flex: 1; font-weight: 600; font-size: 15px; }
.row .sub { display: block; font-weight: 400; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.tag.brand { background: var(--brand-wash); color: var(--brand); }
.tag.clay { background: var(--clay-wash); color: #A4573D; }
.card { background: var(--surface); border-radius: 15px; box-shadow: 0 1px 0 rgba(23,35,30,.04), 0 8px 24px -14px rgba(23,35,30,.22); }
.btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; }
.btn.soft { background: var(--brand-wash); color: var(--brand); }
.progress { height: 3px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.progress b { display: block; height: 100%; background: var(--brand); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.watercolor { position: absolute; pointer-events: none; }

/* —— 落地页各章节共用的界面片段 —— */
.screen-head { padding: 26px 22px 0; position: relative; }
.screen-head .title { font-size: 30px; }
.screen-head .date { margin-top: 6px; }
.section-label { font-size: 12px; color: var(--ink-2); letter-spacing: .08em; margin: 22px 22px 8px; }
.banner { margin: 16px 18px 0; padding: 12px 14px; border-radius: 12px; background: var(--clay-wash); display: flex; gap: 10px; align-items: center; font-size: 13px; }
.banner b { font-weight: 700; }
.banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: none; }
.list-card { margin: 0 14px; padding: 2px 16px; }
.tl .row { padding: 13px 0; gap: 12px; }
.tl .row .name { font-size: 14.5px; }
.tl .row .t { width: 40px; font-size: 12.5px; }
.src { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--ink-2); padding: 1px 6px; border-radius: 6px; background: #ECE8DF; vertical-align: 1px; }
.lvl { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }
.lvl.critical { color: #fff; background: var(--clay); }
.lvl.important { color: #A4573D; background: var(--clay-wash); }
.who { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.obj { width: 64px; height: 64px; border-radius: 12px; background: #EEEAE2; overflow: hidden; flex: none; }
.obj img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* 底部标签栏（App 主页面） */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; padding: 10px 14px 0; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(241, 238, 231, .96); border-top: 1px solid var(--line-soft); }
.tabbar span { display: grid; justify-items: center; gap: 3px; font-size: 10px; color: #8C958F; }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .on { color: var(--brand); font-weight: 700; }