/* 两套主题：日间「羊皮纸」暖米描金，夜间「星海」深蓝金尘。
   切换靠 <html> 上的 .night 类，由 magic.js 按时间自动加。
   新增颜色一律走变量，别再写死色值，否则夜间模式会漏。 */
:root{
  --bg:#FBF6EC; --card:#FFFDF8; --text:#2B2620; --text2:#8A8175; --text3:#B5AA97;
  --surface:#FFFDF8; --surface-2:#F5EFE0; --track:#EFE7D6;
  --accent:#8A6A1F; --on-accent:#FFFDF8; --accent-soft:#F7EBD3; --line:#E8DFCE;
  --gold:#C9A227; --gold-soft:#E8C86A; --coin:#D8A93C;
  --wcard-a:#F7EBD3; --wcard-b:#F1DFC0;
  --pcard-a:#F2EADA; --pcard-b:#E6DAC4;
  --me:#6E97BC; --her:#D98F8F;
  --shell:420px;   /* 桌面端整列宽度，见文件末尾的媒体查询 */
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,serif;
}
html.night{
  --bg:#141A2E; --card:#1E2540; --text:#E8E3D8; --text2:#8C93AE; --text3:#69708C;
  --surface:#1E2540; --surface-2:#263050; --track:#2A3556;
  --accent:#E8C86A; --on-accent:#2B2620; --accent-soft:#2A2340; --line:#2E3556;
  --gold:#F0DFA8; --gold-soft:#F0DFA8; --coin:#D9B44C;
  --wcard-a:#2A2340; --wcard-b:#332B4E;
  --pcard-a:#202840; --pcard-b:#2A2340;
  --me:#7FA8C9; --her:#E8A0A0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
input,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
/* iOS Safari 有个老毛病：输入框字号 < 16px 时，一点聚焦就自动放大整页。
   这里把所有输入控件钉死在 16px，解决"打字时画面自己放大"的问题。
   注意：以后新增输入框不要再写小于 16px 的字号。 */
input,textarea,select{font-size:16px}
input,textarea{background:none;border:none;outline:none}

/* ---------- setup ---------- */
.setup{position:fixed;inset:0;display:flex;justify-content:center;padding:24px;overflow-y:auto}
.setup-inner{width:100%;max-width:340px;text-align:center;margin:auto;padding:8px 0}
.setup h1{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:4px}
.setup .sub{color:var(--text2);font-size:13px;margin:8px 0 32px}
.setup input{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;
  padding:13px 15px;text-align:center;margin-bottom:12px;
}
button.primary{
  width:100%;background:var(--accent);color:var(--on-accent);border:none;border-radius:12px;
  padding:13px;font-size:15px;font-weight:600;cursor:pointer;
}
button.ghost{
  width:100%;background:var(--surface);color:var(--accent);border:1px solid var(--accent);
  border-radius:12px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;
}
.setup .or{color:var(--text3);font-size:12px;margin:22px 0 12px}
#codeBox{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.code{
  font-size:38px;letter-spacing:8px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.hint{font-size:12px;color:var(--text2);margin-bottom:18px}
#recoverBox{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
#recoverBox .hint{margin-bottom:14px}

/* ---------- 锁屏 ----------
   注意：类名不能叫 .lock —— 第 315 行已有一个 .lock（SVG 锁图标，15×15），
   同名会被它覆盖，导致锁屏塌成 48px 小方块。 */
.lockscreen{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:flex;justify-content:center;padding:24px;overflow-y:auto;
}
.lock-inner{width:100%;max-width:320px;text-align:center;margin:auto}
.lock-inner .av{width:64px;height:64px;font-size:24px;margin:0 auto 14px}
.lock-name{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:1px}
.lock-inner .sub{color:var(--text2);font-size:13px;margin:4px 0 26px}
.lock-inner input{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;
  padding:13px 15px;text-align:center;letter-spacing:6px;font-size:17px;
  font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.lock-msg{font-size:13px;color:var(--accent);min-height:20px;margin-top:12px}

/* ---------- shell ---------- */
/* 锁成整屏外壳：键盘弹起、地址栏收放都不会把画面顶歪 */
#main{display:flex;flex-direction:column;position:fixed;inset:0;height:100vh;height:100dvh}
header{padding:calc(env(safe-area-inset-top) + 16px) 20px 0;flex-shrink:0}
.brand{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:2px}
.days{font-size:13px;color:var(--text2);margin-top:3px}
.days b{color:var(--accent);font-weight:600}
.views{flex:1;overflow:hidden;position:relative}
.view{
  position:absolute;inset:0;overflow-y:auto;padding:14px 20px calc(env(safe-area-inset-bottom) + 132px);
  -webkit-overflow-scrolling:touch;display:none;
  overscroll-behavior:contain;   /* 关掉整页橡皮筋回弹，只在内容区里滚 */
}
.view.on{display:block}
.tabs{
  position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);z-index:40;
}
.tabs button{
  flex:1;background:none;border:none;padding:7px 0 8px;font-size:11px;color:var(--text3);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;letter-spacing:.5px;
}
.tabs button svg{width:23px;height:23px}
.tabs button.on{color:var(--accent);font-weight:600}
.fab{
  position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom) + 62px);
  width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  border:none;font-size:26px;font-weight:300;box-shadow:0 6px 18px rgba(201,162,39,.38);
  cursor:pointer;z-index:45;
}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:16px;padding:16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(46,42,39,.05)}
.card.tap{cursor:pointer}
.sep{font-size:12px;color:var(--text3);padding:14px 0 8px;letter-spacing:.5px}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:600;flex-shrink:0}
.av.me{background:var(--me)}
.av.her{background:var(--her)}
.chead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cname{font-size:14px;font-weight:600}
.ctime{font-size:12px;color:var(--text3)}
.tags{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:11px;padding:3px 8px;border-radius:20px;background:var(--surface-2);color:var(--text2)}
.tag.mood{background:var(--accent-soft);color:var(--accent)}
.ctext{font-size:15px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.photos{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.photos img{width:84px;height:84px;object-fit:cover;border-radius:10px;cursor:pointer}
.cfoot{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:12px;color:var(--text3)}
.read{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:20px}
.read.y{background:#EFF3F7;color:#7C93A8}
.read.n{background:var(--accent-soft);color:var(--accent)}
.empty{text-align:center;color:var(--text3);font-size:13px;padding:52px 20px;line-height:1.9}
mark{background:#FFE9A8;color:inherit;border-radius:2px;padding:0 1px}

/* today */
.stat2{display:flex;gap:10px;margin-bottom:12px}
.stat2 .card{flex:1;margin:0;text-align:center;padding:14px 10px}
.stat2 .nm{font-size:13px;font-weight:600;margin-top:6px}
.stat2 .st{font-size:12px;color:var(--accent);margin-top:2px;min-height:18px}
.wcard{background:linear-gradient(135deg,var(--wcard-a),var(--wcard-b));border:none}
.wcard .wtext{font-size:14px;line-height:1.7;margin:8px 0 4px}
.wcard .wmeta{font-size:11px;color:var(--text2)}
.big{font-family:var(--serif);font-size:33px;font-weight:600;letter-spacing:0}
.biglabel{font-size:12px;color:var(--text2);margin-top:2px}

/* memory */
.searchbox{display:flex;gap:8px;margin-bottom:10px}
.searchbox input{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;
}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.chip{font-size:12px;padding:6px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--line);
  color:var(--text2);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ledger */
.bars{margin-top:12px}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.bar .bn{width:52px;color:var(--text2);flex-shrink:0}
.bar .bt{flex:1;height:8px;background:var(--track);border-radius:5px;overflow:hidden}
.bar .bf{display:block;height:100%;background:var(--accent);border-radius:5px}
.bar .bv{width:74px;text-align:right;font-variant-numeric:tabular-nums}
.two{display:flex;gap:10px;margin-top:14px}
.two .one{flex:1;background:var(--surface-2);border-radius:12px;padding:12px;text-align:center}
.two .one .n{font-size:12px;color:var(--text2)}
.two .one .v{font-size:18px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.trend{display:flex;align-items:flex-end;gap:8px;height:88px;margin-top:14px}
.trend .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.trend .cb{width:100%;background:var(--coin);border-radius:5px;min-height:3px}
.trend .cl{font-size:10px;color:var(--text3)}
.lrow{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.lrow:last-child{border:none}
.lrow .lc{width:48px;font-size:12px;color:var(--text2)}
.lrow .ln{flex:1;color:var(--text2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .la{font-variant-numeric:tabular-nums;font-weight:600}
.lrow .lx{color:var(--text3);font-size:18px;padding:0 4px;cursor:pointer}

/* me */
.mrow{display:flex;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.mrow:last-child{border:none}
.mrow .ml{flex:1}
.mrow input{text-align:right;color:var(--text2)}
.mrow .mv{color:var(--text2);font-size:13px}
.dl{display:flex;gap:8px;margin-top:10px}
.dl button{flex:1;padding:11px;border-radius:12px;border:1px solid var(--accent);
  background:var(--surface);color:var(--accent);font-size:14px;font-weight:600;cursor:pointer}

/* ---------- sheets ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top) + 12px);
  background:var(--bg);z-index:60;display:flex;flex-direction:column;
  border-radius:16px 16px 0 0;overflow:hidden;
  box-shadow:0 -8px 30px rgba(0,0,0,.14);
  transform:translateY(112%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.sheet.open{transform:translateY(0)}
.sheet-hd{
  display:flex;align-items:center;padding:10px 16px 10px;
  border-bottom:1px solid var(--line);
}
.sheet-hd .t{flex:1;text-align:center;font-size:16px;font-weight:600;font-family:var(--serif);letter-spacing:1px}
.sheet-hd button{background:none;border:none;font-size:15px;cursor:pointer;min-width:44px}
.sheet-hd button.gray{color:var(--text3);text-align:left}
.sheet-hd button.primary{padding:8px 16px;border-radius:18px;font-size:14px;width:auto}
.sheet-bd{flex:1;overflow-y:auto;padding:16px 20px 40px}
.sheet textarea{width:100%;min-height:150px;font-size:16px;line-height:1.8;resize:none}
.sheet textarea::placeholder{color:var(--text3)}
.addph{
  display:inline-flex;margin-top:12px;font-size:13px;color:var(--text2);
  border:1px dashed var(--text3);border-radius:10px;padding:9px 14px;cursor:pointer;
}
.row{display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.row .lb{width:46px;color:var(--text2);font-size:13px;flex-shrink:0}
.row input{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.inputbar{
  display:flex;gap:10px;padding:10px 20px calc(env(safe-area-inset-bottom) + 10px);
  border-top:1px solid var(--line);background:var(--surface);align-items:center;
}
.inputbar input{flex:1;background:var(--surface-2);border-radius:18px;padding:10px 14px}
.inputbar button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer}

/* whisper */
.wnote{background:var(--surface);border-radius:14px;padding:14px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(46,42,39,.05)}
.wnote.mine{background:var(--accent-soft)}
.wnote .wt{font-size:15px;line-height:1.7}
.wnote .wm{font-size:11px;color:var(--text2);margin-top:8px;display:flex;gap:8px}
.wnote .wr{margin-top:10px;padding-left:11px;border-left:2px solid var(--line);font-size:14px;line-height:1.7}
.wnote .wr .rm{font-size:11px;color:var(--text3)}

/* money keys */
.amount{text-align:center;padding:16px 0 12px;font-size:44px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.amount .cny{font-size:22px;color:var(--text2);margin-right:4px;vertical-align:6px}
/* 金额支持加减乘除：上面这行实时显示 "= 结果" */
.exprline{min-height:18px;font-size:13px;font-weight:500;color:var(--accent);letter-spacing:0}
.keys button.op{color:var(--accent);font-weight:600}
.keys button.fn{color:var(--text2);font-size:17px}
.keys button.wide{grid-column:span 2}
.cats button.addcat{color:var(--accent);border-style:dashed}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.keys button{background:var(--surface);border:1px solid var(--line);border-radius:13px;height:56px;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500;
  cursor:pointer;font-variant-numeric:tabular-nums}
.keys button:active{background:var(--surface-2)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.cats button{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 0;
  font-size:14px;cursor:pointer}
.cats button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
#moneyNote{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:6px}

/* toast */
.toast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 92px);transform:translateX(-50%) translateY(-10px);
  background:rgba(46,42,39,.93);color:#fff;font-size:13px;padding:10px 18px;border-radius:22px;
  z-index:99;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:600px){
  /* 两侧留深一点的底色，中间一列才是 App 本体 */
  body{background:#F2EADA}
  #main{max-width:var(--shell);margin:0 auto;box-shadow:0 0 40px rgba(46,42,39,.08);
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
  /* fixed 元素同时给 left:50% + max-width 会退化成内容宽度，必须显式给 width:100% */
  .tabs{left:50%;right:auto;width:100%;max-width:var(--shell);transform:translateX(-50%)}
  /* fab 贴着这一列的右边：列宽一半 - 按钮宽(54) - 右边距(20) */
  .fab{left:50%;right:auto;margin-left:calc(var(--shell) / 2 - 74px)}
  .sheet{left:50%;right:auto;width:100%;max-width:var(--shell);
    transform:translateX(-50%) translateY(112%)}
  .sheet.open{transform:translateX(-50%) translateY(0)}
  .asheet{left:50%;right:auto;width:100%;max-width:var(--shell);
    transform:translateX(-50%) translateY(110%)}
  .asheet.on{transform:translateX(-50%) translateY(0)}
  .toast{transform:translateX(-50%) translateY(-10px)}
  .toast.show{transform:translateX(-50%) translateY(0)}
  /* 锁屏/引导页是整屏铺的，给它本体底色，别露出两侧灰底 */
  .setup,.lockscreen{background:var(--bg)}
  header,.view,.savebar,.cmt-photos{padding-left:26px;padding-right:26px}
  .setup-inner{max-width:380px}
}

/* ---------- 去网页化 & 拟真 ---------- */
body{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  overscroll-behavior-y:none;
}
input,textarea{user-select:text;-webkit-user-select:text}
img{-webkit-user-select:none;-webkit-touch-callout:none}
.view::-webkit-scrollbar,.sheet-bd::-webkit-scrollbar{width:0;height:0}

.card,.wnote,.chip,.bar,.one{transition:transform .12s ease}
.card:active,.wnote:active{transform:scale(.985)}
.chip:active{transform:scale(.94)}
button:active{opacity:.72}
.keys button:active{background:#EFE9E3;transform:scale(.95)}

.view.on{animation:vin .26s cubic-bezier(.2,.7,.3,1)}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 弹窗打开时，主界面"往里退一点"。
   ⚠️ 这个 transform 必须加在 header / .views 上，**绝对不能加在 #main 上**：
   #main 是整屏外壳，它一旦带 transform 就会变成 fixed 后代的包含块，
   于是底部 .tabs 和悬浮按钮 #fab 会按 #main 的宽度重新定位 + 跟着缩放
   —— 实测标签栏会从 x=320/w=640 变成 x=343/w=593，电脑上就是明显错位。
   所以只让内容区后退，底部栏和悬浮按钮留在原位。 */
header,.views{transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s;transform-origin:50% 28%}
#main.back header,#main.back .views{transform:scale(.93);opacity:.3;pointer-events:none}
.scrim{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:50}
.scrim.on{opacity:.42;pointer-events:auto}

.asheet{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(110%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  padding:0 10px calc(env(safe-area-inset-bottom) + 10px);
}
.asheet.on{transform:none}
.as-inner{background:var(--surface);border-radius:14px;overflow:hidden}
.as-hd{padding:11px;font-size:12px;color:var(--text2);text-align:center;border-bottom:1px solid var(--line)}
.as-opt{padding:14px;text-align:center;font-size:16px;border-bottom:1px solid var(--line);cursor:pointer}
.as-opt:last-child{border:none}
.as-opt:active{background:var(--surface-2)}
.as-opt.danger{color:#D9484A}
.as-cancel{width:100%;margin-top:8px;background:var(--surface);border:none;border-radius:14px;
  padding:14px;font-size:16px;font-weight:600;cursor:pointer}

.viewer{position:fixed;inset:0;background:#000;z-index:95;display:none;
  align-items:center;justify-content:center}
.viewer.on{display:flex;animation:vfade .18s}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes vfade{from{opacity:0}to{opacity:1}}

/* ---------- 保存栏 / 评论图片 / 私密 ---------- */
.savebar{
  flex-shrink:0;padding:10px 20px calc(env(safe-area-inset-bottom) + 12px);
  border-top:1px solid var(--line);background:var(--surface);
}
.savebar .primary{border-radius:14px;padding:13px;font-size:16px}

.iphoto{
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:var(--text2);cursor:pointer;
}
.iphoto svg{width:21px;height:21px}
.cmt-photos{display:flex;gap:6px;padding:10px 20px 0;flex-wrap:wrap;background:var(--surface)}
.cmt-photos img{width:54px;height:54px;object-fit:cover;border-radius:8px;cursor:pointer}

.pcard{background:linear-gradient(135deg,var(--pcard-a),var(--pcard-b));border:none}
.pcard .pt{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.pcard .pd{font-size:12px;color:var(--text2);margin-top:4px}
.lock{width:15px;height:15px;stroke:var(--text2);fill:none;stroke-width:1.7}

.cmtph{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.cmtph img{width:74px;height:74px;object-fit:cover;border-radius:9px}

/* ---------- 头像 / 自定义心情 ---------- */
.av.has-img{padding:0;overflow:hidden}
.av.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.chip.addm{border-style:dashed;color:var(--text3);padding:6px 11px;font-weight:400}
/* 字号必须 ≥16px，否则 iOS 聚焦时会放大整页（宽度相应放宽） */
.mood-new{
  width:112px;border:1px solid var(--accent);border-radius:20px;padding:5px 11px;
  font-size:16px;background:var(--surface);outline:none;
}

/* ---------- 桌面端宽度（随窗口自由缩放） ---------- */
/* --shell 是"中间这一列"的宽度，@media(min-width:600px) 里 #main / tabs / sheet / fab
   全部用它，所以永远一起对齐、一起居中。
   这里让它随窗口连续变化：窗口拉宽列最多 640（再宽就 680），拉窄时列跟着变窄，
   不会出现窄窗口里列比屏幕还宽、内容被挤到一边的情况。
   ⚠️ 注意：#main 的居中必须靠 margin:0 auto（不能用 transform 居中），
   因为 .back 状态用了 transform:scale，两者会打架。 */
@media (min-width:600px){ :root{--shell:min(640px, calc(100vw - 48px))} }
@media (min-width:1400px){ :root{--shell:680px} }

/* 只有真正的鼠标设备才加 hover 效果，触屏上不会残留高亮 */
@media (hover:hover){
  .card.tap:hover{box-shadow:0 4px 14px rgba(46,42,39,.09)}
  .tabs button:hover{color:var(--accent)}
}

/* ==================================================================
   魔法层（配合 magic.js）
   全部类名带 mg- 前缀或语义独立，写之前已 grep 确认不与已有类重名
   （教训：.lock 是 SVG 锁图标，锁屏只能叫 .lockscreen）。
   ================================================================== */

/* ---------- 星尘画布 ---------- */
/* z-index 0 + 排在 #main 之前 → 内容压在它上面，只从留白处透出来 */
#dust{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}

/* ---------- 金色飞贼 ---------- */
.snitch{
  position:fixed;left:0;top:0;width:34px;height:30px;z-index:55;
  cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 0 7px rgba(201,162,39,.6));
}
.snitch svg{width:100%;height:100%;display:block;overflow:visible}
.snitch .mg-wing{transform-box:view-box;transform-origin:14px 12px;animation:mg-flap .17s ease-in-out infinite alternate}
@keyframes mg-flap{from{transform:rotate(-15deg) scaleY(.8)}to{transform:rotate(15deg) scaleY(1)}}
html.night .snitch{filter:drop-shadow(0 0 11px rgba(240,223,168,.75))}

/* ---------- 守护神牝鹿 ---------- */
.doe{
  position:fixed;left:0;top:0;width:46px;height:38px;z-index:75;pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(214,236,255,.9));
}
.doe svg{width:100%;height:100%;display:block}

/* ---------- 星火（保存成功的小迸发）---------- */
.spk{
  position:fixed;z-index:76;width:7px;height:7px;border-radius:50%;
  background:var(--gold);pointer-events:none;
  box-shadow:0 0 7px rgba(240,223,168,.9);
}

/* ---------- Always. 浮层 ---------- */
.always-veil{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,rgba(24,18,6,.5),rgba(24,18,6,.1) 72%,transparent);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.always-veil.on{opacity:1}
.always-veil span{
  font-family:var(--serif);font-style:italic;font-size:46px;letter-spacing:2px;
  color:#F6E7B4;text-shadow:0 0 26px rgba(240,223,168,.8);
  transform:scale(.9);transition:transform .9s cubic-bezier(.2,.8,.3,1);
}
.always-veil.on span{transform:scale(1)}
html.night .always-veil{
  background:radial-gradient(closest-side,rgba(6,10,26,.62),rgba(6,10,26,.14) 72%,transparent);
}

/* ---------- 章节题头：冥想盆 / 古灵阁 ---------- */
.mg-hd{
  font-family:var(--serif);font-size:13px;letter-spacing:1px;color:var(--accent);
  margin:2px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.mg-hd em{font-style:normal;color:var(--text3);font-size:12px;margin-left:6px}

/* ---------- 卡片描金 + 金币色图表 ---------- */
/* 描金边框。wcard / pcard 原本是 border:none 的整块色卡，这里要排除掉，
   否则排在后面的这条会覆盖掉它们的 border:none */
.card:not(.wcard):not(.pcard),.wnote{border:1px solid var(--line)}
.bar .bf{background:var(--coin)}
.trend .cb{box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}
.pg-memory .searchbox input{border-color:var(--gold-soft)}

/* ---------- 夜间补充（上面有写死的白色/透明底色）---------- */
html.night .tabs{background:rgba(20,26,46,.94);border-top-color:var(--line)}
html.night .toast{background:rgba(232,227,216,.94);color:#141A2E}
html.night mark{background:#54461A;color:#F6E7B4}
html.night body{background:#101528}
@media(min-width:600px){ html.night body{background:#0B1020} }

/* ---------- 关掉动效：尊重系统「减弱动态效果」---------- */
@media (prefers-reduced-motion: reduce){
  .snitch .mg-wing{animation:none}
  .view.on{animation:none}
  .always-veil,.always-veil span{transition:none}
}

/* ---------- 打印册里不放任何特效 ---------- */
@media print{
  #dust,.snitch,.doe,.spk,.always-veil{display:none !important}
}