:root{
  /* 纸 · 墨 · 竹 —— 与花笺同一套视觉语言：宣纸底、墨色字、竹青作唯一强调色。
     工具类应用最怕颜色多，所以除竹青外不引入第二种彩色。 */
  --bg:#f6f3ec; --card:#fffdf9; --fg:#1a1a18; --muted:#8a8a80;
  --line:#e6dfd1; --primary:#2d5a3d; --primary-fg:#ffffff;
  --warn-bg:#fdf6e3; --warn-line:#c9a227; --ok:#2d5a3d; --danger:#a33a2f;
  --shadow:0 1px 2px rgba(26,26,24,.05);
  --shadow-hover:0 4px 14px rgba(26,26,24,.08);
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong","SimSun",serif;
}
@media (prefers-color-scheme: dark){
  /* 墨夜：不是把亮色反过来，而是另配一套 —— 深墨底、米色字、亮一档的竹青 */
  :root{ --bg:#161614; --card:#1f1f1c; --fg:#e8e3d8; --muted:#9a958a;
         --line:#2e2e29; --primary:#6aa87f; --primary-fg:#0f1511;
         --warn-bg:#2e2717; --warn-line:#b8912e; --ok:#6aa87f; --danger:#e08a80;
         --shadow:0 1px 2px rgba(0,0,0,.24);
         --shadow-hover:0 4px 14px rgba(0,0,0,.34); }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  /* 100vh 在 iOS 上把地址栏高度也算进去，导致底部被切；dvh 才是真实可视高度 */
  min-height:100vh; min-height:100dvh;
  font-family:system-ui,-apple-system,"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
header{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:var(--card); border-bottom:1px solid var(--line);
}
header h1{font-size:18px; margin:0; font-weight:600; letter-spacing:.06em;
  font-family:var(--serif); line-height:1.25}
/* 副标题：主标题用衬线显品牌，这里用无衬线小字说明功能，避免新用户不明用途 */
header h1 .brand-sub{
  display:block; font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.18em;
  color:var(--muted); margin-top:2px;
}
.icon-btn{
  background:transparent; border:1px solid var(--line); color:var(--fg);
  width:38px; height:38px; border-radius:10px; font-size:17px; cursor:pointer;
}
main{padding:16px; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
h2{font-size:16px; margin:0 0 10px; font-weight:600; font-family:var(--serif);
   letter-spacing:.04em}
h3{font-size:14px; margin:14px 0 8px; font-weight:600}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:13px}
.hidden{display:none !important}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px; box-shadow:var(--shadow);
}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
/* 9 个功能在宽屏上两列要滚很久，520px 以上放开到三列 */
@media (min-width:520px){ .grid{grid-template-columns:repeat(3,1fr)} }
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 10px; text-align:center; cursor:pointer;
  transition:transform .08s, border-color .12s, box-shadow .12s;
  box-shadow:var(--shadow);
  min-height:106px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tile:active{transform:scale(.97); border-color:var(--primary); box-shadow:var(--shadow-hover)}
.tile .ico{display:flex; align-items:center; justify-content:center; height:34px;
  margin-bottom:6px; color:var(--primary)}
.tile .ico svg{width:30px; height:30px; display:block; margin:0 auto}
.tile .nm{font-size:13px; font-weight:500}
.tile .sub{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.tile.off{opacity:.42}

button.primary{
  width:100%; border:none; border-radius:11px; padding:13px 16px;
  background:var(--primary); color:var(--primary-fg);
  font-size:15px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.03em;
  box-shadow:0 1px 2px rgba(45,90,61,.18);
  transition:opacity .12s, transform .08s;
}
button.primary:active{transform:scale(.99)}
button.primary:disabled{opacity:.45}
button.primary.big{padding:15px 16px; font-size:16px; margin-top:6px}
button.back{
  background:transparent; border:none; color:var(--muted);
  padding:0 0 8px; font-size:14px; cursor:pointer; font-family:inherit;
}
input[type=password]{
  width:100%; padding:12px 14px; border-radius:12px; font-size:16px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  margin-bottom:10px; font-family:inherit;
}
.picked{list-style:none; margin:10px 0 0; padding:0}
.picked li{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  margin-bottom:6px; font-size:13px; background:var(--bg);
}
.picked .sz{color:var(--muted); white-space:nowrap}
/* 公告栏：把三块内容压成一列，窄屏也读得顺 */
.help-item{border-bottom:1px solid var(--line); padding:9px 0}
.help-item:last-child{border-bottom:none}
.help-item summary{cursor:pointer; font-size:14px; font-weight:500; list-style:none}
.help-item summary::-webkit-details-marker{display:none}
.help-item summary::before{content:'▸ '; color:var(--muted); font-weight:400}
.help-item[open] summary::before{content:'▾ '}
.help-steps{margin:8px 0 4px; padding-left:20px; font-size:13px;
            line-height:1.75; color:var(--muted)}
.help-ans{margin:8px 0 4px; font-size:13px; line-height:1.75; color:var(--muted)}
#faq-q{width:100%; padding:10px 12px; font:inherit; color:var(--fg);
       background:var(--bg); border:1px solid var(--line);
       border-radius:10px; margin-bottom:10px}
.fb-row{display:flex; gap:10px; margin-bottom:10px}
.fb-row select{flex:1; min-width:0; padding:9px 10px; font:inherit;
               color:var(--fg); background:var(--bg);
               border:1px solid var(--line); border-radius:10px}
.centered{text-align:center; margin:6px 0 0}
#feedback textarea, #feedback input{
  width:100%; margin-bottom:10px; padding:10px 12px; font:inherit;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; resize:vertical;
}
#feedback textarea:focus, #feedback input:focus{
  outline:none; border-color:var(--primary);
}
#feedback button{width:100%}
.msg{min-height:1.2em; font-size:13px; margin:8px 0 0}
.ok-text{color:var(--ok)}
.warn-text{color:var(--danger)}
.board{display:flex; flex-direction:column; gap:14px}
.board-item{display:flex; flex-direction:column; gap:6px}
.board-k{font-size:12px; letter-spacing:.08em; color:var(--muted); font-weight:600}
.board-link{color:var(--primary); word-break:break-all; font-size:14px; text-decoration:none}
.board-link:active{opacity:.6}
.mini{align-self:flex-start; font-size:12px; padding:4px 10px; border-radius:6px;
      border:1px solid var(--line); background:transparent; color:var(--muted)}
.bl-log{display:flex; flex-direction:column; gap:10px}
.bl-hist-row{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px}
.bl-hist-time{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.bl-date{font-size:12px; color:var(--muted); margin-bottom:2px}
.bl-items{margin:0; padding-left:16px; font-size:13px; line-height:1.65}
.bl-items li{margin-bottom:2px}
.bl-notes{white-space:pre-wrap; font-size:13px; line-height:1.7; margin:0}
.pick-row{display:flex; gap:10px}
.pick-row button{flex:1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  font-size:13px; cursor:pointer; user-select:none; background:var(--bg);
}
.chip.on{background:var(--primary); color:var(--primary-fg); border-color:var(--primary)}
.bar{height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin:4px 0 8px}
.bar span{display:block; height:100%; width:0; background:var(--primary); transition:width .35s}
.msg{font-size:13px; min-height:18px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}
.res-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  margin-bottom:8px; background:var(--bg);
}
.res-item .nm{font-size:14px; word-break:break-all}
.res-item button{
  border:none; border-radius:10px; padding:9px 16px; font-size:13px;
  background:var(--primary); color:var(--primary-fg); cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.warn{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:12px; padding:12px 14px; margin-bottom:10px; font-size:13px;
}
.warn b{display:block; margin-bottom:4px}
/* 顺带说明：中性色，刻意不用告警色 —— 一眼能和「需要核对」区分开 */
.note{
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
  border-radius:12px; padding:10px 14px; margin-bottom:10px; font-size:13px;
}
pre.preview{
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:12px; font-size:12px; line-height:1.55; overflow:auto; max-height:340px;
  white-space:pre-wrap; word-break:break-word; margin:0;
}
.err-box{
  background:var(--warn-bg); border:1px solid var(--danger); color:var(--danger);
  border-radius:12px; padding:12px 14px; font-size:13px;
}

/* 下拉刷新提示条：固定在顶部，平时透明不可见，下拉时才浮出来 */
#pull-tip{
  position:fixed; top:0; left:50%; z-index:99; pointer-events:none;
  transform:translate(-50%,-24px); opacity:0;
  background:var(--primary); color:var(--primary-fg);
  padding:6px 16px; border-radius:0 0 11px 11px;
  font-size:13px; letter-spacing:.04em;
  transition:opacity .18s ease, transform .18s ease;
}
#pull-tip.on{ transform:translate(-50%,0); opacity:1; }