/* 🐕 小狗的家 — rooms.css（27 号美化 H2：房间里面的装修，2026-09-28 起）
   把每间房里面装修成玄关走廊那一套：奶油纸墙、深棕手绘线、这间房自己的门色、名字和按钮用文楷手写体。
   一间一间来：每条规则都挂在 body[data-page="xxx"] 下面（app.js 的 setPagebar 写的），没装修的房间一点不受影响。
   已装修：留言（notes）、健康（health，9/28 第二间）、记账（ledger，9/28 第三间）、备忘（todos，9/28 第四间）、基金（funds，9/29 第五间）、阳台（garden，9/29 第六间）、厨房（recipes，9/30 第七间）、日历（calendar，10/6 第八间，🎫#12）
   颜色：--room / --room-tint 在 pagebar.css（和玄关走廊里那扇门一样），这里补 --room-deep（深一档：焦点框、强调）。
   字体：Home Hand = fonts/make_hand.py 从文楷里抠出来的界面文字子集（名字、按钮、标题、提示）；
         留言正文、输入框里打的字照旧系统字体（字太多，没法事先抠）。改了界面文字要重跑 make_hand.py。 */

/* >>> home-hand-faces（fonts/make_hand.py 自动生成，别手改） */
@font-face{font-family:'Home Hand';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/home-hand-regular.woff2?v=7e8ec8fbae') format('woff2');unicode-range:U+20,U+2E-3A,U+A5,U+B7,U+D7,U+2013-2014,U+2026,U+2039-203A,U+2192,U+2212,U+3001,U+300C-300D,U+301C,U+304D,U+305F,U+3063,U+3066,U+306E,U+3079,U+3080,U+30AA-30AB,U+30EB,U+30F3,U+4E00,U+4E09-4E0B,U+4E0D,U+4E24,U+4E2A,U+4E2D,U+4E32,U+4E48,U+4E5F,U+4E70,U+4E86,U+4E8B-4E8C,U+4E8E,U+4E94,U+4EA4,U+4EA7,U+4EC0,U+4ECA,U+4ED6,U+4EF6,U+4EFD,U+4F11,U+4F19-4F1A,U+4F4E,U+4FA1,U+4FDD,U+5019,U+503C,U+505A,U+5065,U+513F,U+5149,U+5165,U+5168,U+516D,U+5171,U+5173,U+5176,U+517B,U+5186,U+518D,U+5199,U+519B,U+51B0,U+51B5,U+51B7,U+51BB,U+51C0,U+51E0,U+51FA-51FB,U+5206,U+5212,U+5220,U+5230,U+5237,U+52A0-52A1,U+52A8,U+52B1,U+52BF,U+52E4,U+534A,U+5355,U+5386,U+53A8,U+53BB,U+53D1,U+53D6,U+53E3,U+53E5,U+53EA,U+53EF-53F0,U+53F3,U+53F6,U+5403,U+540C-540D,U+5427,U+5462,U+5468,U+5473,U+548C,U+5495,U+54C7,U+54D7,U+54E6,U+54EA,U+5566,U+561F,U+56BC,U+56DB,U+56DE,U+56E2,U+56FE,U+5706,U+5708,U+571F,U+5728,U+5747,U+57FA,U+585E,U+586B,U+5907,U+590D,U+591A,U+591F,U+5927,U+5929,U+5931,U+5956,U+597D,U+59CB,U+5B50,U+5B57-5B58,U+5B83,U+5B8C,U+5B98,U+5B9A,U+5BA4,U+5BB6,U+5BDF,U+5C0F,U+5C1D,U+5C31,U+5DF2,U+5E01,U+5E73-5E74,U+5E95,U+5EB7,U+5F00,U+5F20,U+5F55,U+5FD8,U+5FEB,U+600E,U+603B,U+60A0,U+60F3,U+611B,U+6210-6211,U+623F,U+624B,U+6253,U+6295,U+62C9,U+62FF,U+6309,U+6361-6362,U+636E,U+6389,U+63A5,U+6405,U+6447,U+6478,U+64A4,U+6536,U+6539,U+653E,U+6570,U+6574,U+6599,U+65B0,U+65E0,U+65E5,U+65E7,U+65E9,U+65F6,U+660E,U+661F,U+662F,U+665A,U+6682,U+66F4,U+6700,U+6708-6709,U+671F,U+6728,U+672C,U+6750,U+6761,U+6765,U+677E,U+679A,U+679C,U+67B6,U+6811,U+6837,U+6846,U+68F5,U+690D,U+6982,U+6B21,U+6B65,U+6BCF,U+6C27,U+6C34,U+6CA1,U+6CB9,U+6CE8,U+6D45,U+6D47,U+6D88,U+6DB2,U+6DF1,U+6E96,U+6EE1,U+6F84,U+706B,U+7096,U+70B9,U+70EB,U+719F,U+725B,U+7269,U+72D7,U+7384,U+73B0,U+73ED,U+74F6,U+7528,U+7559,U+7591,U+7684,U+76D2,U+76DB,U+770B,U+771F-7720,U+7740,U+7761,U+7838,U+7840,U+7897,U+79CD,U+79D2,U+79F0,U+7A7A,U+7AEF,U+7B14,U+7B2C,U+7B97,U+7BB1,U+7C7B,U+7C89,U+7C92,U+7C98,U+7EA6,U+7EB8,U+7ECF,U+7ED3,U+7ED9,U+7F16,U+7F51,U+7F8E,U+7FFB,U+809A,U+8138,U+829C,U+82B1,U+82D7,U+83B7,U+83C1,U+83DC,U+8425,U+8471,U+849C,U+85CF,U+86CB,U+8840,U+884C,U+888B,U+88C5,U+8981,U+89C1-89C2,U+89C9,U+89D2,U+8A00,U+8BA4,U+8BB0,U+8BC4,U+8BD5,U+8BF7,U+8BFB,U+8C03,U+8C31,U+8C46,U+8CB7,U+8D25-8D26,U+8D34,U+8D44,U+8D5A,U+8D70,U+8D77,U+8F6F,U+8F7D,U+8F91,U+8FA3,U+8FC7,U+8FD1,U+8FD8-8FD9,U+8FDB,U+9000-9001,U+900F,U+901A,U+9053,U+90A3,U+90E8,U+90FD,U+91CC-91CD,U+91CF,U+91D1,U+94AE,U+94B1,U+957F,U+95A2,U+95F2,U+9633,U+9694,U+96BE,U+9762,U+97ED,U+984D,U+9897,U+989D,U+98DF,U+996D,U+9999,U+9A8C,U+9AA4,U+9AD8,U+FF01,U+FF08-FF09,U+FF0B-FF0C,U+FF1A,U+FF1D,U+FF1F,U+FF5E;}
@font-face{font-family:'Home Hand';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/home-hand-bold.woff2?v=211cec0ca3') format('woff2');unicode-range:U+20,U+2E-3A,U+A5,U+B7,U+D7,U+2013-2014,U+2026,U+2039-203A,U+2192,U+2212,U+3001,U+300C-300D,U+301C,U+304D,U+305F,U+3063,U+3066,U+306E,U+3079,U+3080,U+30AA-30AB,U+30EB,U+30F3,U+4E00,U+4E09-4E0B,U+4E0D,U+4E24,U+4E2A,U+4E2D,U+4E32,U+4E48,U+4E5F,U+4E70,U+4E86,U+4E8B-4E8C,U+4E8E,U+4E94,U+4EA4,U+4EA7,U+4EC0,U+4ECA,U+4ED6,U+4EF6,U+4EFD,U+4F11,U+4F19-4F1A,U+4F4E,U+4FA1,U+4FDD,U+5019,U+503C,U+505A,U+5065,U+513F,U+5149,U+5165,U+5168,U+516D,U+5171,U+5173,U+5176,U+517B,U+5186,U+518D,U+5199,U+519B,U+51B0,U+51B5,U+51B7,U+51BB,U+51C0,U+51E0,U+51FA-51FB,U+5206,U+5212,U+5220,U+5230,U+5237,U+52A0-52A1,U+52A8,U+52B1,U+52BF,U+52E4,U+534A,U+5355,U+5386,U+53A8,U+53BB,U+53D1,U+53D6,U+53E3,U+53E5,U+53EA,U+53EF-53F0,U+53F3,U+53F6,U+5403,U+540C-540D,U+5427,U+5462,U+5468,U+5473,U+548C,U+5495,U+54C7,U+54D7,U+54E6,U+54EA,U+5566,U+561F,U+56BC,U+56DB,U+56DE,U+56E2,U+56FE,U+5706,U+5708,U+571F,U+5728,U+5747,U+57FA,U+585E,U+586B,U+5907,U+590D,U+591A,U+591F,U+5927,U+5929,U+5931,U+5956,U+597D,U+59CB,U+5B50,U+5B57-5B58,U+5B83,U+5B8C,U+5B98,U+5B9A,U+5BA4,U+5BB6,U+5BDF,U+5C0F,U+5C1D,U+5C31,U+5DF2,U+5E01,U+5E73-5E74,U+5E95,U+5EB7,U+5F00,U+5F20,U+5F55,U+5FD8,U+5FEB,U+600E,U+603B,U+60A0,U+60F3,U+611B,U+6210-6211,U+623F,U+624B,U+6253,U+6295,U+62C9,U+62FF,U+6309,U+6361-6362,U+636E,U+6389,U+63A5,U+6405,U+6447,U+6478,U+64A4,U+6536,U+6539,U+653E,U+6570,U+6574,U+6599,U+65B0,U+65E0,U+65E5,U+65E7,U+65E9,U+65F6,U+660E,U+661F,U+662F,U+665A,U+6682,U+66F4,U+6700,U+6708-6709,U+671F,U+6728,U+672C,U+6750,U+6761,U+6765,U+677E,U+679A,U+679C,U+67B6,U+6811,U+6837,U+6846,U+68F5,U+690D,U+6982,U+6B21,U+6B65,U+6BCF,U+6C27,U+6C34,U+6CA1,U+6CB9,U+6CE8,U+6D45,U+6D47,U+6D88,U+6DB2,U+6DF1,U+6E96,U+6EE1,U+6F84,U+706B,U+7096,U+70B9,U+70EB,U+719F,U+725B,U+7269,U+72D7,U+7384,U+73B0,U+73ED,U+74F6,U+7528,U+7559,U+7591,U+7684,U+76D2,U+76DB,U+770B,U+771F-7720,U+7740,U+7761,U+7838,U+7840,U+7897,U+79CD,U+79D2,U+79F0,U+7A7A,U+7AEF,U+7B14,U+7B2C,U+7B97,U+7BB1,U+7C7B,U+7C89,U+7C92,U+7C98,U+7EA6,U+7EB8,U+7ECF,U+7ED3,U+7ED9,U+7F16,U+7F51,U+7F8E,U+7FFB,U+809A,U+8138,U+829C,U+82B1,U+82D7,U+83B7,U+83C1,U+83DC,U+8425,U+8471,U+849C,U+85CF,U+86CB,U+8840,U+884C,U+888B,U+88C5,U+8981,U+89C1-89C2,U+89C9,U+89D2,U+8A00,U+8BA4,U+8BB0,U+8BC4,U+8BD5,U+8BF7,U+8BFB,U+8C03,U+8C31,U+8C46,U+8CB7,U+8D25-8D26,U+8D34,U+8D44,U+8D5A,U+8D70,U+8D77,U+8F6F,U+8F7D,U+8F91,U+8FA3,U+8FC7,U+8FD1,U+8FD8-8FD9,U+8FDB,U+9000-9001,U+900F,U+901A,U+9053,U+90A3,U+90E8,U+90FD,U+91CC-91CD,U+91CF,U+91D1,U+94AE,U+94B1,U+957F,U+95A2,U+95F2,U+9633,U+9694,U+96BE,U+9762,U+97ED,U+984D,U+9897,U+989D,U+98DF,U+996D,U+9999,U+9A8C,U+9AA4,U+9AD8,U+FF01,U+FF08-FF09,U+FF0B-FF0C,U+FF1A,U+FF1D,U+FF1F,U+FF5E;}
/* <<< home-hand-faces */

/* ================= 装修过的房间共用：墙、纸纹、颜色、字 =================
   （下面的按钮、输入框、弹窗、写字的圆按钮原来只有留言用；别的房间用到时，把它加进那几条的 selector——9/30 厨房的弹窗加进去了） */
body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"]) {
  --paper: #faf3e8; --card: #fffdf8; --ink: #6b5138;
  --text: #4f3b2b; --text-soft: #87705a; --text-mute: #b3a089;
  --hand: 'Home Hand', 'Portal Hand', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --lift: 0 1px 2px rgba(107,81,56,.05), 0 12px 24px -16px rgba(107,81,56,.42);
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 13.5 C 30 9.5, 70 10.5, 110 10 C 145 9.6, 178 8.8, 195 10.6 C 199 11.1, 199.5 15.2, 195.5 16 C 170 17.8, 140 16.6, 110 17.2 C 75 17.8, 35 18.8, 8 18.2 C 2.5 18, 1.2 14.8, 4 13.5 Z'/%3E%3C/svg%3E");
  /* 谁写的：澄澄 = 鼠尾草绿（原来就是绿），小狗 = 金毛蜜色（原来是橘） */
  --deer: #aac6a1; --deer-tint: #eaf2e5; --deer-deep: #5a7e52;
  --dog: #ecc47a;  --dog-tint: #fcf0d6;  --dog-deep: #a5772a;
  background: var(--paper);
  color: var(--text);
}
body[data-page="notes"] { --room-deep: #b3604f; }   /* 深一档的门色（焦点框、强调）；每间房自己给，健康的在健康那一段 */
/* 纸纹 + 顶上一抹这间房的颜色（和玄关同一张纸） */
body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"])::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .22 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"])::after {
  content: ''; position: fixed; left: -30%; right: -30%; top: -140px; height: 460px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--room-tint) 90%, transparent), transparent 66%);
}
body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"]) .main-container,
body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"]) .login-container { position: relative; z-index: 1; }   /* 纸纹那两层在最底下 */
body[data-page="notes"] .content { max-width: 620px; padding: 24px 16px 124px; }

/* 按钮：纸底 + 深棕细线；主按钮是这间房的门色，像一张贴纸 */
body:is([data-page="notes"], [data-page="recipes"]) .btn { font-family: var(--hand); letter-spacing: 1px; transition: transform .2s, box-shadow .2s, background-color .2s; }
body:is([data-page="notes"], [data-page="recipes"]) .btn-secondary { background: var(--card); color: var(--text-soft); border: 1.3px solid rgba(107,81,56,.24); border-radius: 999px; }
body:is([data-page="notes"], [data-page="recipes"]) .btn-secondary:hover { background: #fff; border-color: rgba(107,81,56,.4); }
body[data-page="notes"] .btn-small { padding: 5px 13px 4px; font-size: 13px; }
body:is([data-page="notes"], [data-page="recipes"]) .btn-primary { background: var(--room); color: var(--text); border: 1.5px solid var(--ink); border-radius: 999px;
  font-weight: 700; box-shadow: 0 3px 0 rgba(107,81,56,.2); }
body:is([data-page="notes"], [data-page="recipes"]) .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(107,81,56,.22); filter: none; }
body:is([data-page="notes"], [data-page="recipes"]) .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(107,81,56,.22); }
/* 发送 / 保存按钮上的小爱心（index.html 两个弹窗、notes.js 回复框里的 <i class="btn-heart">）：换掉亮粉色的 💕 emoji——它和门色按钮打架（澄澄 9/28）。
   两颗心：大的澄澄绿、小的小狗蜜色（和头像章、纸胶带同一对颜色），深棕线和按钮的边同色；澄澄从四个候选里挑的 ③ */
body[data-page="notes"] .btn-heart { display: inline-block; width: 25px; height: 20px; margin-left: 5px; vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M12 20.3 C10.4 19 3.6 14.5 3.6 9.3 C3.6 6.5 5.6 4.6 8 4.6 C9.8 4.6 11.2 5.6 12 7.1 C12.8 5.6 14.2 4.6 16 4.6 C18.4 4.6 20.4 6.5 20.4 9.3 C20.4 14.5 13.6 19 12 20.3 Z' transform='translate(-0.6 3.2) scale(.86) rotate(-10 12 12)' fill='%23a9c89e' stroke='%236b5138' stroke-width='2.21' stroke-linejoin='round'/%3E%3Cpath d='M12 20.3 C10.4 19 3.6 14.5 3.6 9.3 C3.6 6.5 5.6 4.6 8 4.6 C9.8 4.6 11.2 5.6 12 7.1 C12.8 5.6 14.2 4.6 16 4.6 C18.4 4.6 20.4 6.5 20.4 9.3 C20.4 14.5 13.6 19 12 20.3 Z' transform='translate(15.4 -0.2) scale(.56) rotate(16 12 12)' fill='%23f1c46a' stroke='%236b5138' stroke-width='3.39' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
body[data-page="notes"] .btn-small .btn-heart { width: 20px; height: 16px; margin: -2px 0 -2px 4px; vertical-align: -1px; }   /* 回复框的小发送按钮（澄澄 9/28：回复的发送也要小心心）；负 margin：不把 26px 高的按钮撑高 */
/* 贴图按钮上的小照片（index.html 两个弹窗、notes.js 回复框里的 <i class="btn-cam">）：换掉 📷 emoji——一张拍立得相纸（粉天、蜜色太阳、绿色小山），
   顶上贴一截绿纸胶带，和墙上的照片、写留言按钮同一套（澄澄 9/28 从四个候选里挑的 ③，要再大一点点：22 → 26px）。
   上下负 margin + vertical-align 配好：图比字高，但不把按钮撑高，中心对着字的中间 */
body[data-page="notes"] .btn-cam { display: inline-block; width: 26px; height: 26px; margin: -4px 0; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E %3Cg transform='rotate(-7 13 14)'%3E %3Crect x='5' y='5.5' width='16' height='18' rx='1.4' fill='%23fffaf1' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round'/%3E %3Crect x='7.3' y='7.8' width='11.4' height='10.2' fill='%23f7cfc3'/%3E %3Ccircle cx='15.4' cy='11' r='1.7' fill='%23f1c46a'/%3E %3Cpath d='M7.3 18 L7.3 15.6 C9.2 13.4 11 13.3 12.6 15 C14 13.9 16.6 13.6 18.7 15.4 L18.7 18 Z' fill='%23a9c89e'/%3E %3Crect x='7.3' y='7.8' width='11.4' height='10.2' fill='none' stroke='%236b5138' stroke-width='1.2'/%3E %3C/g%3E %3Cg transform='rotate(6 13 5)'%3E %3Cpath d='M8.2 2.6 H17.8 L17 3.9 L17.8 5.2 L17 6.5 L17.8 7.8 H8.2 L9 6.5 L8.2 5.2 L9 3.9 Z' fill='%23c4d9bb' stroke='%236b5138' stroke-width='1.3' stroke-linejoin='round'/%3E %3Cpath d='M11 3.2 V7.2 M13.8 3.2 V7.2 M16.4 3.2 V7.2' stroke='%23fff' stroke-width='1.4' opacity='.55'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat; }
body[data-page="notes"] .btn-small .btn-cam { width: 21px; height: 21px; margin: -3px 0; vertical-align: -3px; }

/* 输入框：浅纸 + 细线，焦点时框出这间房的颜色 */
body:is([data-page="notes"], [data-page="recipes"]) .input,
body:is([data-page="notes"], [data-page="recipes"]) .textarea,
body[data-page="notes"] .modal-body select {
  background-color: #fffaf3; color: var(--text); border: 1.5px solid rgba(107,81,56,.18); border-radius: 14px; }
body:is([data-page="notes"], [data-page="recipes"]) .input:focus,
body:is([data-page="notes"], [data-page="recipes"]) .textarea:focus,
body[data-page="notes"] .modal-body select:focus {
  background-color: #fff; border-color: var(--room-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--room) 38%, transparent); }
body:is([data-page="notes"], [data-page="recipes"]) .textarea::placeholder { font-family: var(--hand); color: var(--text-mute); letter-spacing: 1px; }
body[data-page="notes"] select { font-family: var(--hand); letter-spacing: 1px; }
body[data-page="notes"] .modal-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5 L7 9.5 L11 5.5' fill='none' stroke='%236b5138' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* 弹窗：一张从下面抽上来的信纸，顶上有个小把手；标题下面一笔门色的笔刷 */
body:is([data-page="notes"], [data-page="recipes"]) .modal-overlay { background: rgba(79,59,43,.32); }
body:is([data-page="notes"], [data-page="recipes"]) .modal { position: relative; background: var(--card); border-radius: 24px 24px 0 0; padding: 28px 20px 22px;
  box-shadow: 0 -10px 40px rgba(107,81,56,.2); }
body:is([data-page="notes"], [data-page="recipes"]) .modal::before { content: ''; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 4px; background: rgba(107,81,56,.18); }
@media (min-width: 768px) { body:is([data-page="notes"], [data-page="recipes"]) .modal { border-radius: 24px; } body:is([data-page="notes"], [data-page="recipes"]) .modal::before { display: none; } }
body:is([data-page="notes"], [data-page="recipes"]) .modal-title { position: relative; z-index: 0; font: 700 19px/1.3 var(--hand); color: var(--text); letter-spacing: 2px; }
body:is([data-page="notes"], [data-page="recipes"]) .modal-title::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 72%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body:is([data-page="notes"], [data-page="recipes"]) .modal-close { background: var(--card); color: var(--text-soft); border: 1.3px solid rgba(107,81,56,.22); font-size: 20px; line-height: 1; }
body:is([data-page="notes"], [data-page="recipes"]) .modal-footer { gap: 8px; margin-top: 16px; }

/* 右下角写留言的圆按钮：门色圆贴纸（白贴纸边）+ 一张新纸条，顶上贴一截澄澄的绿纸胶带——和墙上的纸条同一套（澄澄 9/28 从五个候选里挑的 ②）。
   原来的 ✏️ 藏起来（font-size: 0）。图是 48×48 的彩色 SVG；data URL 里的 # 都要编成 %23，不编的话 # 后面整张图都会丢 */
body[data-page="notes"] .fab { width: 60px; height: 60px; font-size: 0; background: var(--room); border: 0;
  box-shadow: 0 0 0 5px var(--card), 0 0 0 6px rgba(107,81,56,.1), 0 14px 24px -10px rgba(107,81,56,.55); }
body[data-page="notes"] .fab::before { content: ''; width: 36px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E %3Cg transform='rotate(-6 24 26)'%3E %3Crect x='10' y='12' width='28' height='30' rx='3.5' fill='%23fffaf1' stroke='%236b5138' stroke-width='2.3' stroke-linejoin='round'/%3E %3Cpath d='M15.5 23 H32.5 M15.5 29 H29.5 M15.5 35 H23' stroke='%236b5138' stroke-width='2' stroke-linecap='round' opacity='.42'/%3E %3Cpath d='M31.5 35.2 C30.8 34.1 29.2 34.5 29.4 35.8 C29.6 36.8 30.7 37.5 31.5 38 C32.3 37.5 33.4 36.8 33.6 35.8 C33.8 34.5 32.2 34.1 31.5 35.2 Z' fill='%23e0806a' stroke='%236b5138' stroke-width='1.3' stroke-linejoin='round'/%3E %3C/g%3E %3Cg transform='rotate(5 24 11.5)'%3E %3Cpath d='M14.5 7.8 H33.5 L32.3 9.7 L33.5 11.6 L32.3 13.5 L33.5 15.4 H14.5 L15.7 13.5 L14.5 11.6 L15.7 9.7 Z' fill='%23c4d9bb' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E %3Cpath d='M19 8.6 V14.6 M23.5 8.6 V14.6 M28 8.6 V14.6' stroke='%23fff' stroke-width='2' opacity='.55'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat; }
body[data-page="notes"] .fab:hover { transform: scale(1.06);
  box-shadow: 0 0 0 5px var(--card), 0 0 0 6px rgba(107,81,56,.1), 0 18px 28px -10px rgba(107,81,56,.6); }

body:is([data-page="notes"], [data-page="health"], [data-page="ledger"], [data-page="todos"], [data-page="funds"], [data-page="garden"], [data-page="recipes"], [data-page="calendar"]) .empty-state { font-family: var(--hand); color: var(--text-mute); letter-spacing: 1px; line-height: 1.8; }

/* ================= 留言：一面贴满小纸条的墙 ================= */
/* 外面那张大白卡拆掉，纸条直接贴在墙上；「💌 留言板」这行和顶栏重复，收起来 */
body[data-page="notes"] #page-notes > .card { background: transparent; border: 0; box-shadow: none; padding: 6px 0 0; }
body[data-page="notes"] #page-notes > .card > .card-title { display: none; }

/* 一张纸条：卡片纸 + 细线 + 落地影子；顶上一截纸胶带，颜色看是谁写的 */
body[data-page="notes"] .note-card {
  --who: var(--dog); --who-tint: var(--dog-tint); --who-deep: var(--dog-deep);
  position: relative; margin: 0 0 24px; padding: 18px 16px 14px;
  background: var(--card); border: 1.5px solid rgba(107,81,56,.12); border-radius: 18px; box-shadow: var(--lift); }
body[data-page="notes"] .note-card-cheng { --who: var(--deer); --who-tint: var(--deer-tint); --who-deep: var(--deer-deep); }
body[data-page="notes"] .note-card:hover { transform: none; box-shadow: var(--lift); }
body[data-page="notes"] .note-card::before {   /* 纸胶带：两头剪成锯齿，歪一点点 */
  content: ''; position: absolute; top: -9px; left: 50%; width: 60px; height: 18px; margin-left: -30px;
  background: color-mix(in srgb, var(--who) 66%, transparent)
              repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 9px);
  background-blend-mode: normal;
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%);
  transform: rotate(-3deg); }
body[data-page="notes"] .note-card:nth-child(even)::before { transform: rotate(2.5deg); margin-left: -18px; }
/* 没读过的：右上角贴一枚门色的「新」 */
body[data-page="notes"] .note-unread { border-left-width: 1.5px !important; box-shadow: var(--lift); }
body[data-page="notes"] .note-unread::after {
  content: '新'; position: absolute; top: -11px; right: 16px; padding: 4px 9px 3px; border-radius: 999px;
  font: 700 12px/1 var(--hand); letter-spacing: 1px; color: var(--text);
  background: var(--room); border: 1.5px solid var(--ink); transform: rotate(8deg); box-shadow: 0 3px 8px -4px rgba(107,81,56,.5); }

/* 抬头：名字前面的 🦌 / 🐕 放进一枚小圆章；名字用手写体、谁写的颜色；时间淡淡的 */
body[data-page="notes"] .note-header { align-items: center; gap: 6px 10px; }
body[data-page="notes"] .note-from { display: inline-block; font: 700 15.5px/30px var(--hand); color: var(--who-deep); letter-spacing: 1px; }
body[data-page="notes"] .note-from::first-letter {   /* ::first-letter 不认 width/height：宽 = emoji 20px + 左右各 5px，高 = 行高 30px → 正圆 */
  float: left; margin-right: 8px; padding: 0 5px; border-radius: 50%;
  font-size: 16px; line-height: 30px; font-weight: 400;
  background: var(--who-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--who) 75%, var(--ink)); }
body[data-page="notes"] .note-time { font: 400 12px/1 var(--hand); color: var(--text-mute); letter-spacing: .5px; }
body[data-page="notes"] .note-content { margin-top: 10px; font-size: 15px; line-height: 1.78; color: var(--text); }

/* 照片：拍立得那样一圈白边，歪一点点 */
body[data-page="notes"] .note-image { margin: 12px 12px 2px 0; }
body[data-page="notes"] .reply-image { margin: 10px 10px 2px 0; }
body[data-page="notes"] .note-image img,
body[data-page="notes"] .reply-image img,
body[data-page="notes"] .note-content img {
  border: 4px solid #fff; border-radius: 6px; transform: rotate(-1.6deg);
  box-shadow: 0 0 0 1px rgba(107,81,56,.14), 0 8px 16px -10px rgba(107,81,56,.55); }
body[data-page="notes"] .note-image img { max-width: 132px; max-height: 132px; }
body[data-page="notes"] .note-image:nth-child(even) img,
body[data-page="notes"] .reply-image:nth-child(even) img { transform: rotate(1.4deg); }

body[data-page="notes"] .note-actions { margin-top: 14px; gap: 8px; }

/* 回复：一条手绘虚线串起来，每条回复是一张浅浅的小纸片 */
body[data-page="notes"] .replies { margin: 14px 0 0 13px; padding-left: 13px; border-left: 2px dashed rgba(107,81,56,.2); }
body[data-page="notes"] .reply-card { --who: var(--dog); --who-tint: var(--dog-tint); --who-deep: var(--dog-deep);
  padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: color-mix(in srgb, var(--who-tint) 72%, var(--card)); }
body[data-page="notes"] .reply-card-cheng { --who: var(--deer); --who-tint: var(--deer-tint); --who-deep: var(--deer-deep); }
body[data-page="notes"] .reply-card .note-from { font-size: 14px; line-height: 24px; }
body[data-page="notes"] .reply-card .note-from::first-letter { padding: 0 4px; line-height: 24px; margin-right: 7px; font-size: 13px; }
body[data-page="notes"] .reply-card .note-content { margin-top: 6px; font-size: 14px; line-height: 1.7; }

/* 写回复的框：展开时是一小块门色的虚线框 */
body[data-page="notes"] .reply-form { margin-top: 12px; padding: 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--room-tint) 45%, var(--card)); border: 1.3px dashed rgba(107,81,56,.24); }
body[data-page="notes"] .reply-form .textarea { background-color: #fff; }
body[data-page="notes"] .reply-form select { background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5 L7 9.5 L11 5.5' fill='none' stroke='%236b5138' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* 小日历下面那一行：‹ 今天 · 9月28日 周一 / 纸条 1 · 回复 2 ›（‹ › 跳到前一个 / 后一个有留言的日子）；健康的「‹ 那一晚 ›」、记账的「‹ 那一天 ›」用同一套 */
body[data-page="notes"] .notes-day, body[data-page="health"] .health-day, body[data-page="ledger"] .ledger-day, body[data-page="calendar"] .cal-daynav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 24px; }
body[data-page="notes"] .notes-day-text, body[data-page="health"] .health-day-text, body[data-page="ledger"] .ledger-day-text, body[data-page="calendar"] .cal-daynav-text { flex: 1; text-align: center; font-family: var(--hand); line-height: 1.35; }
body[data-page="notes"] .notes-day-text b, body[data-page="health"] .health-day-text b, body[data-page="ledger"] .ledger-day-text b, body[data-page="calendar"] .cal-daynav-text b { display: block; font-size: 17px; letter-spacing: 1.5px; color: var(--text); }
body[data-page="notes"] .notes-day-text span, body[data-page="health"] .health-day-text span, body[data-page="ledger"] .ledger-day-text span, body[data-page="calendar"] .cal-daynav-text span { font-size: 12.5px; letter-spacing: 1px; color: var(--text-mute); }
body[data-page="notes"] .notes-hop, body[data-page="health"] .health-hop, body[data-page="ledger"] .ledger-hop, body[data-page="calendar"] .cal-daynav-hop { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1.3px solid rgba(107,81,56,.22);
  background: var(--card); color: var(--ink); font: 400 19px/1 var(--hand); padding: 0 0 2px; cursor: pointer; }
body[data-page="notes"] .notes-hop:disabled, body[data-page="health"] .health-hop:disabled, body[data-page="ledger"] .ledger-hop:disabled { opacity: .28; cursor: default; }
/* 旧纸条上这天写的那几条回复描一圈门色，一眼看出新在哪（这天自己写的纸条不描） */
body[data-page="notes"] .reply-card.on-day { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--room) 75%, transparent); }
/* 「旧纸条的新回复」：这天写的纸条下面隔一条虚线，放以前写的、这天有人回复了的 */
body[data-page="notes"] .notes-divider { display: flex; align-items: center; gap: 10px; margin: 4px 4px 26px;
  font: 400 12.5px/1 var(--hand); letter-spacing: 1.5px; color: var(--text-mute); }
body[data-page="notes"] .notes-divider::before,
body[data-page="notes"] .notes-divider::after { content: ''; flex: 1; border-top: 1.5px dashed rgba(107,81,56,.22); }

/* ================= 健康：小日历 + 一晚一张睡眠小卡 + 一个月的概况（27 号美化 H2 第二间，2026-09-28）================= */
/* 门色薰衣草紫（pagebar.css；玄关走廊那扇门的 --deep 是 #6f5f9c）。三项各一个颜色：日历底下的小点、卡片上的图标、睡眠条都用它们 */
body[data-page="health"] {
  --room-deep: #6f5f9c;
  --sleep: #e2b04a;                      /* 时长：蜜色（小闹钟） */
  --deep: #5d6bb0;                       /* 深睡：夜蓝（弯月亮） */
  --o2: #e0806a;                         /* 血氧：珊瑚红（小心心） */
  --rem: #a99bd6; --light: #e8e2f5;      /* 睡眠条：REM、浅睡 */
}
body[data-page="health"] .content { max-width: 620px; padding: 24px 16px 64px; }   /* 这间没有右下角的圆按钮，底下不用留那么多 */

/* 小图标（js/health.js 画的 <i class="ico xxx">）：纸色 / 页面的颜色 + 深棕线，和留言那几个同一套 */
body[data-page="health"] .ico { display: inline-block; width: 17px; height: 17px; flex-shrink: 0; background: center / contain no-repeat; }
body[data-page="health"] .ico.sleep { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Ccircle cx='4.9' cy='4.6' r='2.3' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.3'/%3E %3Ccircle cx='15.1' cy='4.6' r='2.3' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.3'/%3E %3Ccircle cx='10' cy='11' r='7.1' fill='%23fbe7ae' stroke='%236b5138' stroke-width='1.6'/%3E %3Cpath d='M10 7.2 V11.2 L12.7 12.8' fill='none' stroke='%236b5138' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); }
body[data-page="health"] .ico.deep { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Cpath d='M8.31 3.63 A7.3 7.3 0 1 0 16.11 12.57 A6.0 6.0 0 0 1 8.31 3.63 Z' fill='%235d6bb0' stroke='%236b5138' stroke-width='1.5' stroke-linejoin='round'/%3E %3Cpath d='M15.4 3.6 L16.1 5.2 L17.7 5.9 L16.1 6.6 L15.4 8.2 L14.7 6.6 L13.1 5.9 L14.7 5.2 Z' fill='%23f1c46a' stroke='%236b5138' stroke-width='.9' stroke-linejoin='round'/%3E %3C/svg%3E"); }
body[data-page="health"] .ico.o2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Cpath d='M12 20.3 C10.4 19 3.6 14.5 3.6 9.3 C3.6 6.5 5.6 4.6 8 4.6 C9.8 4.6 11.2 5.6 12 7.1 C12.8 5.6 14.2 4.6 16 4.6 C18.4 4.6 20.4 6.5 20.4 9.3 C20.4 14.5 13.6 19 12 20.3 Z' transform='translate(-0.2 -0.4) scale(.85)' fill='%23e0806a' stroke='%236b5138' stroke-width='1.9' stroke-linejoin='round'/%3E %3C/svg%3E"); }
body[data-page="health"] .ico.star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Cpath d='M10 1.8 L12.4 7 L18 7.6 L13.8 11.4 L15 17 L10 14.1 L5 17 L6.2 11.4 L2 7.6 L7.6 7 Z' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E %3C/svg%3E"); }

/* 日历底下的小点：那晚哪几项拿满了；满勤的星星在 minical.css（.mc-day.star） */
body[data-page="health"] .mc-dot.sleep, body[data-page="health"] .health-legend .sleep { background: var(--sleep); }
body[data-page="health"] .mc-dot.deep,  body[data-page="health"] .health-legend .deep  { background: var(--deep); }
body[data-page="health"] .mc-dot.o2,    body[data-page="health"] .health-legend .o2    { background: var(--o2); }
/* 日历下面一行小字：点点是什么意思 */
body[data-page="health"] .health-legend:not([hidden]) { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin: -6px 0 18px;
  font: 400 12px/1.5 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="health"] .health-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
body[data-page="health"] .health-legend i.star { width: 12px; height: 12px; border-radius: 0; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Cpath d='M10 1.8 L12.4 7 L18 7.6 L13.8 11.4 L15 17 L10 14.1 L5 17 L6.2 11.4 L2 7.6 L7.6 7 Z' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E %3C/svg%3E") center / contain no-repeat; }

/* 那一晚：一张卡片纸，顶上一截薰衣草色的纸胶带；满勤的右上角再贴一枚「满勤」 */
body[data-page="health"] .night-card { position: relative; margin: 0 0 26px; padding: 22px 18px 16px;
  background: var(--card); border: 1.5px solid rgba(107,81,56,.12); border-radius: 20px; box-shadow: var(--lift); }
body[data-page="health"] .night-card::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 78%, transparent)
              repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%);
  transform: rotate(-3deg); }
body[data-page="health"] .night-card.full::after {
  content: '满勤'; position: absolute; top: -12px; right: 14px; padding: 4px 10px 3px 26px; border-radius: 999px;
  font: 700 12.5px/1 var(--hand); letter-spacing: 1px; color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E %3Cpath d='M10 1.8 L12.4 7 L18 7.6 L13.8 11.4 L15 17 L10 14.1 L5 17 L6.2 11.4 L2 7.6 L7.6 7 Z' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E %3C/svg%3E") 7px 50% / 15px 15px no-repeat, #fbe7ae;
  border: 1.5px solid var(--ink); transform: rotate(7deg); box-shadow: 0 3px 8px -4px rgba(107,81,56,.5); }
body[data-page="health"] .night-card + .night-card { margin-top: 30px; }

/* 上面：睡了多久（大字）+ 右边一枚口袋钱钱的硬币章 */
body[data-page="health"] .night-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-page="health"] .night-total > span { display: block; font: 400 13px/1 var(--hand); letter-spacing: 2px; color: var(--text-mute); }
body[data-page="health"] .night-total b { display: block; margin-top: 8px; font: 700 40px/1 var(--hand); letter-spacing: 1px; color: var(--text); }
body[data-page="health"] .night-total b small { margin: 0 5px 0 2px; font-size: 18px; font-weight: 400; color: var(--text-soft); }
body[data-page="health"] .night-coin { flex-shrink: 0; width: 78px; height: 78px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; transform: rotate(-6deg);
  background: #fbe7ae; border: 1.8px solid var(--ink); box-shadow: inset 0 0 0 4px #fff5d8, 0 4px 0 rgba(107,81,56,.18);
  font-family: var(--hand); color: var(--text); }
body[data-page="health"] .night-coin b { font: 700 19px/1 var(--hand); letter-spacing: .5px; }
body[data-page="health"] .night-coin small { font-size: 10.5px; line-height: 1; letter-spacing: 1px; color: var(--text-soft); }
body[data-page="health"] .night-coin.zero { background: var(--card); box-shadow: inset 0 0 0 4px var(--card), 0 4px 0 rgba(107,81,56,.12); color: var(--text-mute); }

/* 睡眠条：深睡 / REM / 浅睡 按比例，下面一行写着各多少 */
body[data-page="health"] .night-bar { display: flex; height: 14px; margin: 20px 0 8px; overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--light); }
body[data-page="health"] .night-bar i { display: block; height: 100%; }
body[data-page="health"] .night-bar i + i { border-left: 1.5px solid rgba(107,81,56,.45); }
body[data-page="health"] .night-bar .deep, body[data-page="health"] .night-legend .deep { background: var(--deep); }
body[data-page="health"] .night-bar .rem,  body[data-page="health"] .night-legend .rem  { background: var(--rem); }
body[data-page="health"] .night-bar .light, body[data-page="health"] .night-legend .light { background: var(--light); }
body[data-page="health"] .night-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 12.5px/1.6 var(--hand); letter-spacing: .5px; color: var(--text-soft); }
body[data-page="health"] .night-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; vertical-align: 0;
  box-shadow: inset 0 0 0 1px rgba(107,81,56,.4); }

/* 血氧那一行 */
body[data-page="health"] .night-o2 { display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font: 400 13.5px/1.5 var(--hand); letter-spacing: .5px; color: var(--text); }

/* 三项 + 满勤：拿到了的是一枚有颜色的小章，没拿到的是淡淡的虚线框 */
body[data-page="health"] .night-goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed rgba(107,81,56,.2); }
body[data-page="health"] .goal { --c: var(--sleep); display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 4px 8px; border-radius: 999px;
  font: 400 12.5px/1.2 var(--hand); letter-spacing: .5px; color: var(--text-mute); background: transparent; border: 1.3px dashed rgba(107,81,56,.25); }
body[data-page="health"] .goal.deep { --c: var(--deep); }
body[data-page="health"] .goal.o2 { --c: var(--o2); }
body[data-page="health"] .goal b { font-weight: 700; }
body[data-page="health"] .goal.ok { color: var(--text); border-style: solid; border-color: rgba(107,81,56,.32); background: color-mix(in srgb, var(--c) 20%, var(--card)); }
body[data-page="health"] .goal:not(.ok) .ico { opacity: .4; filter: grayscale(1); }

/* 那晚的备注：一小块浅紫的便签（正文照旧系统字体） */
body[data-page="health"] .night-note { margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--room-tint) 60%, var(--card)); font-size: 13.5px; line-height: 1.7; color: var(--text); word-break: break-word; }

/* 一个月的概况：跟着选中的那一晚所在的月 */
body[data-page="health"] .health-month { margin: 6px 0 0; padding: 18px 14px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--room-tint) 45%, var(--card)); border: 1.5px solid rgba(107,81,56,.12); }
body[data-page="health"] .hm-title { position: relative; z-index: 0; display: inline-block; margin: 0 0 4px 4px;
  font: 700 16px/1.3 var(--hand); letter-spacing: 2px; color: var(--text); }
body[data-page="health"] .hm-title::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 80%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="health"] .hm-sub { margin: 0 0 12px 4px; font: 400 12px/1.4 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="health"] .hm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
body[data-page="health"] .hm-grid > div { padding: 12px 8px 10px; text-align: center; border-radius: 14px; background: var(--card); border: 1.3px solid rgba(107,81,56,.1); }
body[data-page="health"] .hm-grid b { display: block; font: 700 22px/1.2 var(--hand); letter-spacing: .5px; color: var(--text); }
body[data-page="health"] .hm-grid b small { font-size: 13px; font-weight: 400; color: var(--text-soft); }
body[data-page="health"] .hm-grid span { display: block; margin-top: 5px; font: 400 12px/1.3 var(--hand); letter-spacing: 1px; color: var(--text-mute); }

/* ================= 记账：存钱罐小狗 + 小日历 + 一笔一张小票 + 这个月的口袋（27 号美化 H2 第三间，2026-09-28）================= */
/* 门色蜜黄（pagebar.css：--room #ebbb6c / --room-tint #fbecd0）。进账蜜色、花掉珊瑚色：日历底下的小点、小票上的章、月底那几行都用这一对。
   原来那张「💰 小狗口袋」大卡和七个筛选按钮整个换掉了（index.html），css/ledger.css 里的旧样式现在没人用，留着没删 */
body[data-page="ledger"] {
  --room-deep: #a8792a;
  --in: #e2a93a;  --in-tint: #fcefd2;  --in-deep: #94651a;    /* 进账 */
  --out: #e0806a; --out-tint: #fbe3dc; --out-deep: #b3604f;   /* 花掉 */
}
body[data-page="ledger"] .content { max-width: 620px; padding: 16px 16px 64px; }

/* ---- 存钱罐小狗（澄澄 9/28 从三只里挑的「圆滚滚」）：头顶投币口卡着半枚硬币；胸前缝一个大布口袋，余额写在插在口袋里的纸条上；
        耳朵盖住身子的线、毛茸茸的尾巴、口袋底下露出两只小爪爪（澄澄 9/28 看完第一版提的）。
        澄澄家里那只小狗存钱罐舍不得砸——这只摸一下会说「不用砸，底下有塞子！」 ---- */
body[data-page="ledger"] .pocket { position: relative; height: 212px; margin: 4px 0 14px; overflow: hidden; }   /* 小角落固定 352 宽，窄屏两边裁掉一点，不撑出横向滚动 */
body[data-page="ledger"] .pocket-scene { position: absolute; left: 50%; top: 0; width: 352px; height: 212px; margin-left: -176px; pointer-events: none; }
body[data-page="ledger"] .pocket-scene svg { display: block; width: 352px; height: 212px; }
body[data-page="ledger"] .pig-sline { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }   /* 小角落里的线（架子、硬币、绿植） */
body[data-page="ledger"] .pocket-sign { position: absolute; left: 18px; top: 20px; padding: 5px 12px 4px; transform: rotate(-5deg);
  background: #fff8ec; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 rgba(107,81,56,.14);
  font: 700 15px/1.3 var(--hand); letter-spacing: 2px; color: var(--ink); }
body[data-page="ledger"] .piggy { position: absolute; left: 50%; top: 33px; width: 164px; margin-left: -82px; padding: 0; border: 0; background: transparent; cursor: pointer;
  transform-origin: 50% 92%; -webkit-tap-highlight-color: transparent; }   /* 坐在架子上：两只小爪爪搭在木板前沿（澄澄 9/28：再往下挪一点点） */
body[data-page="ledger"] .piggy svg { display: block; width: 100%; height: auto; overflow: visible; }
body[data-page="ledger"] .piggy .pig-front { position: absolute; left: 0; top: 0; pointer-events: none; }   /* 口袋的正面：盖住纸条的下半截 */
body[data-page="ledger"] .pig-ink { fill: none; stroke: var(--ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="ledger"] .pig-ink.thin { stroke-width: 3.2; }
body[data-page="ledger"] .pig-fill { fill: var(--ink); }
body[data-page="ledger"] .pig-gloss { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .75; }   /* 瓷罐的反光 */
body[data-page="ledger"] .pig-slip { position: absolute; left: 50%; top: 71px; min-width: 92px; padding: 4px 10px 21px; transform: translateX(-50%) rotate(-3deg);
  background: #fffdf8 repeating-linear-gradient(transparent 0 13px, rgba(107,81,56,.08) 13px 14px);
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 rgba(107,81,56,.12); }
body[data-page="ledger"] .pig-slip b { display: block; font: 700 20px/1.12 var(--hand); letter-spacing: .5px; color: var(--ink); text-align: center; white-space: nowrap; }
body[data-page="ledger"] .pig-slip b.long { font-size: 16px; line-height: 1.4; }   /* 位数多了字小一号，别撑出口袋 */
/* 摸一下：晃一晃（像摇存钱罐听硬币响），右上角冒一句话 */
body[data-page="ledger"] .piggy.jiggle { animation: pigJiggle .6s ease; }
@keyframes pigJiggle { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-7deg); } 38% { transform: rotate(6deg); } 58% { transform: rotate(-4deg); } 78% { transform: rotate(2deg); } }
body[data-page="ledger"] .pig-say { position: absolute; top: 8px; left: calc(50% + 46px); max-width: calc(50% - 50px); padding: 7px 11px 6px;
  border-radius: 14px 14px 14px 4px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 6px 14px -8px rgba(107,81,56,.5);
  font: 400 13px/1.45 var(--hand); letter-spacing: .5px; color: var(--text); opacity: 0; pointer-events: none; transform-origin: 0 100%; }
body[data-page="ledger"] .pig-say.show { animation: pigSay 2.4s ease forwards; }
@keyframes pigSay { 0% { opacity: 0; transform: scale(.6) translateY(6px); } 12% { opacity: 1; transform: scale(1.04); } 20% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes pigSayFade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-page="ledger"] .piggy.jiggle { animation: none; }
  body[data-page="ledger"] .pig-say.show { animation: pigSayFade 2.4s linear forwards; }
}

/* ---- 小图标（js/ledger.js 画的 <i class="ico 类别">）：和健康那几个同一套，纸色 + 深棕线 ---- */
body[data-page="ledger"] .ico { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background: center / contain no-repeat; }
body[data-page="ledger"] .ico.sleep { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.31 3.63 A7.3 7.3 0 1 0 16.11 12.57 A6.0 6.0 0 0 1 8.31 3.63 Z' fill='%23f1c46a' stroke='%236b5138' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M15.4 3.3 L16.1 4.9 L17.7 5.6 L16.1 6.3 L15.4 7.9 L14.7 6.3 L13.1 5.6 L14.7 4.9 Z' fill='%23fff4d6' stroke='%236b5138' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.chores { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9.3' cy='11' r='7' fill='%23fffdf8' stroke='%236b5138' stroke-width='1.5'/%3E%3Ccircle cx='9.3' cy='11' r='4.2' fill='%23f3ead9' stroke='%236b5138' stroke-width='1.1'/%3E%3Ccircle cx='15.6' cy='4.6' r='2.2' fill='%23cfe6f3' stroke='%236b5138' stroke-width='1.1'/%3E%3Ccircle cx='12.6' cy='2.9' r='1.3' fill='%23cfe6f3' stroke='%236b5138' stroke-width='.9'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.food { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 2.8 C6.2 4.2 8.2 5 7.2 6.6 M11.4 2.8 C10.4 4.2 12.4 5 11.4 6.6' fill='none' stroke='%236b5138' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M2.8 9 H17.2 C17.2 13.6 14.2 16.6 10 16.6 C5.8 16.6 2.8 13.6 2.8 9 Z' fill='%23f6d597' stroke='%236b5138' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4.4 11.2 H15.6' stroke='%236b5138' stroke-width='1' opacity='.45'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.transport { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.8' y='2.6' width='12.4' height='13' rx='2.6' fill='%23a9cbe3' stroke='%236b5138' stroke-width='1.5'/%3E%3Crect x='5.6' y='4.6' width='8.8' height='4.8' rx='1' fill='%23fffdf8' stroke='%236b5138' stroke-width='1.1'/%3E%3Ccircle cx='6.5' cy='12.4' r='.95' fill='%23fff4d6' stroke='%236b5138' stroke-width='.8'/%3E%3Ccircle cx='13.5' cy='12.4' r='.95' fill='%23fff4d6' stroke='%236b5138' stroke-width='.8'/%3E%3Ccircle cx='7' cy='17' r='1.5' fill='%236b5138'/%3E%3Ccircle cx='13' cy='17' r='1.5' fill='%236b5138'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.reward { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.6' y='8.6' width='12.8' height='8.6' rx='1.2' fill='%23f4b8a8' stroke='%236b5138' stroke-width='1.4'/%3E%3Crect x='2.8' y='6.2' width='14.4' height='3.2' rx='1' fill='%23f8cfc3' stroke='%236b5138' stroke-width='1.4'/%3E%3Cpath d='M10 6.2 V17.2' stroke='%236b5138' stroke-width='1.4'/%3E%3Cpath d='M10 6 C7.6 2.6 4.6 4.6 7 6 M10 6 C12.4 2.6 15.4 4.6 13 6' fill='none' stroke='%236b5138' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.love { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 20.3 C10.4 19 3.6 14.5 3.6 9.3 C3.6 6.5 5.6 4.6 8 4.6 C9.8 4.6 11.2 5.6 12 7.1 C12.8 5.6 14.2 4.6 16 4.6 C18.4 4.6 20.4 6.5 20.4 9.3 C20.4 14.5 13.6 19 12 20.3 Z' transform='translate(-0.2 -0.4) scale(.85)' fill='%23e98b72' stroke='%236b5138' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.summary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4.4' y='3.6' width='11.2' height='14' rx='1.6' fill='%23fffdf8' stroke='%236b5138' stroke-width='1.4'/%3E%3Crect x='7.4' y='2.2' width='5.2' height='3' rx='1' fill='%23e8d5b8' stroke='%236b5138' stroke-width='1.1'/%3E%3Cpath d='M7 9 H13 M7 12 H13 M7 15 H10.6' stroke='%236b5138' stroke-width='1.1' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.init { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.8 9.2 V16.8 H15.2 V9.2' fill='%23fff4e0' stroke='%236b5138' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M2.8 9.8 L10 3.4 L17.2 9.8' fill='none' stroke='%236b5138' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='8.4' y='11.6' width='3.2' height='5.2' rx='1.4' fill='%23eaa293' stroke='%236b5138' stroke-width='1.1'/%3E%3C/svg%3E"); }
body[data-page="ledger"] .ico.other { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.4 6.6 L10 3.6 L16.6 6.6 V14.2 L10 17.2 L3.4 14.2 Z' fill='%23e8cfa6' stroke='%236b5138' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3.4 6.6 L10 9.6 L16.6 6.6 M10 9.6 V17.2' fill='none' stroke='%236b5138' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- 日历底下的小点：这天有进账（蜜色）/ 花掉（珊瑚色）；下面一行小字说是什么意思 ---- */
body[data-page="ledger"] .mc-dot.in,  body[data-page="ledger"] .ledger-legend .in  { background: var(--in); }
body[data-page="ledger"] .mc-dot.out, body[data-page="ledger"] .ledger-legend .out { background: var(--out); }
body[data-page="ledger"] .ledger-legend:not([hidden]) { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin: -6px 0 18px;
  font: 400 12px/1.5 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="ledger"] .ledger-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }

/* ---- 那一天：一笔一张小票——上下两道锯齿边，像从小票机上撕下来的；影子加在外面那层 .rc-wrap 上，跟着锯齿走 ---- */
body[data-page="ledger"] .rc-wrap { margin: 0 4px 16px; filter: drop-shadow(0 1px 1px rgba(107,81,56,.08)) drop-shadow(0 8px 9px rgba(107,81,56,.15)); }
body[data-page="ledger"] .rc-wrap:nth-child(even) .receipt { transform: rotate(-.7deg); }
body[data-page="ledger"] .rc-wrap:nth-child(odd) .receipt { transform: rotate(.6deg); }
body[data-page="ledger"] .receipt { --c: var(--in); --c-deep: var(--in-deep);
  position: relative; padding: 18px 16px 16px; background: var(--card);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x; }
body[data-page="ledger"] .receipt.out { --c: var(--out); --c-deep: var(--out-deep); }
body[data-page="ledger"] .rc-top { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.3 var(--hand); letter-spacing: 1px; color: var(--c-deep); }
body[data-page="ledger"] .rc-time { margin-left: auto; font-weight: 400; font-size: 12.5px; letter-spacing: .5px; color: var(--text-mute); }
body[data-page="ledger"] .rc-desc { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--text); word-break: break-word; }   /* 写的是什么：自由文本，照旧系统字体 */
body[data-page="ledger"] .rc-bottom { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 46px; margin-top: 12px; padding-top: 10px;
  border-top: 1.5px dashed rgba(107,81,56,.22); }
body[data-page="ledger"] .rc-amt { font: 700 26px/1 var(--hand); letter-spacing: .5px; color: var(--c-deep); }
/* 盖的章：进账「入」、花掉「出」——两圈线、歪一点、有点透，像真的盖上去的 */
body[data-page="ledger"] .rc-stamp { position: absolute; left: 4px; top: 50%; width: 40px; height: 40px; margin-top: -16px; border-radius: 50%;
  display: grid; place-items: center; font: 700 19px/1 var(--hand); color: var(--c);
  border: 2.2px solid var(--c); box-shadow: inset 0 0 0 2.5px var(--card), inset 0 0 0 3.8px var(--c); transform: rotate(-14deg); opacity: .85; }

/* ---- 一个月的口袋：跟着日历上显示的那个月 ---- */
body[data-page="ledger"] .ledger-month { margin: 10px 0 0; padding: 18px 14px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--room-tint) 55%, var(--card)); border: 1.5px solid rgba(107,81,56,.12); }
body[data-page="ledger"] .lm-title { position: relative; z-index: 0; display: inline-block; margin: 0 0 4px 4px; font: 700 16px/1.3 var(--hand); letter-spacing: 2px; color: var(--text); }
body[data-page="ledger"] .lm-title::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 80%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="ledger"] .lm-sub { margin: 0 0 12px 4px; font: 400 12px/1.4 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="ledger"] .lm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body[data-page="ledger"] .lm-grid > div { padding: 12px 4px 10px; text-align: center; border-radius: 14px; background: var(--card); border: 1.3px solid rgba(107,81,56,.1); }
body[data-page="ledger"] .lm-grid b { display: block; font: 700 18px/1.2 var(--hand); letter-spacing: .2px; color: var(--in-deep); white-space: nowrap; }
body[data-page="ledger"] .lm-grid .out b { color: var(--out-deep); }
body[data-page="ledger"] .lm-grid span { display: block; margin-top: 5px; font: 400 12px/1.3 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="ledger"] .lm-rows { margin-top: 10px; padding: 2px 12px; border-radius: 14px; background: var(--card); border: 1.3px solid rgba(107,81,56,.1); }
body[data-page="ledger"] .lm-row { display: flex; align-items: center; gap: 8px; padding: 10px 0 9px; font: 400 14px/1.3 var(--hand); letter-spacing: .5px; color: var(--text); }
body[data-page="ledger"] .lm-row + .lm-row { border-top: 1.3px dashed rgba(107,81,56,.16); }
body[data-page="ledger"] .lm-name { flex: 1; min-width: 0; }
body[data-page="ledger"] .lm-n { font-size: 12.5px; color: var(--text-mute); }
body[data-page="ledger"] .lm-row b { min-width: 72px; text-align: right; font-weight: 700; color: var(--in-deep); }
body[data-page="ledger"] .lm-row.out b { color: var(--out-deep); }

/* ================= 备忘：两本线圈本（27 号美化 H7 第四间，2026-09-29）================= */
/* 门色奶油黄（pagebar.css：--room #eed48f / --room-tint #fbf1d4）。澄澄的本子鼠尾草绿、小狗的本子金毛蜜色（和留言的纸胶带同一对）。
   澄澄 9/29 从候选里挑的：线圈本 + 点点纸，名字前面白圆里是小狗画的小脑袋（画法照存钱罐小狗：耳朵压在轮廓上、只描外面那条线）。
   原来那张「📋 备忘录」白卡、输入框和两个灰按钮整个换掉了（index.html 只剩 #todoDesk，js/todos.js 画）；css/todos.css 的旧样式没人用了，
   但它的 .btn-small 是全局规则、别的房间可能靠它，留着没删。字的一行 = --lh（28px），小圈、铅笔、写一条都对着它 */
body[data-page="todos"] { --room-deep: #a3852f; --lh: 28px; --gutter: 38px; }
body[data-page="todos"] .content { max-width: 620px; padding: 24px 16px 64px; }
body[data-page="todos"] .todo-desk { display: flex; flex-direction: column; gap: 34px; }
body[data-page="todos"] .todo-status { margin: 48px 0; text-align: center; }
body[data-page="todos"] .todo-desk[data-state="ok"] .todo-status,
body[data-page="todos"] .todo-desk:not([data-state="ok"]) .pad { display: none; }
body[data-page="todos"] .todo-desk:not([data-state="failed"]) .when-failed,
body[data-page="todos"] .todo-desk[data-state="failed"] .when-loading { display: none; }

/* 一本本子：谁的颜色；顶上一排线圈（谁的颜色）穿过纸上的孔，均匀铺开不切半个；点点纸；底下再露出一页 */
body[data-page="todos"] .pad { --who: var(--deer); --who-tint: var(--deer-tint); --who-deep: var(--deer-deep); position: relative; padding-top: 15px; }
body[data-page="todos"] .pad-dog { --who: var(--dog); --who-tint: var(--dog-tint); --who-deep: var(--dog-deep); }
body[data-page="todos"] .pad::before { content: ''; position: absolute; z-index: 2; top: 0; left: 18px; right: 18px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 34'%3E %3Cellipse cx='10.2' cy='27' rx='3.3' ry='2.8' fill='%23e7dccb' stroke='%236b5138' stroke-width='1' stroke-opacity='.55'/%3E %3Cpath d='M9.4 27.4 C8.4 20 7.9 7 11.8 4.4 C15.2 2.2 17.4 6.2 16.4 15.2' fill='none' stroke='%236b5138' stroke-width='4' stroke-linecap='round'/%3E %3Cpath d='M9.4 27.4 C8.4 20 7.9 7 11.8 4.4 C15.2 2.2 17.4 6.2 16.4 15.2' fill='none' stroke='%23aac6a1' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M9.8 17 C9.6 11 10.4 7.2 12.4 6.1' fill='none' stroke='%23fff' stroke-width='.9' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") 0 0 / 22px 34px space no-repeat; }
body[data-page="todos"] .pad-dog::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 34'%3E %3Cellipse cx='10.2' cy='27' rx='3.3' ry='2.8' fill='%23e7dccb' stroke='%236b5138' stroke-width='1' stroke-opacity='.55'/%3E %3Cpath d='M9.4 27.4 C8.4 20 7.9 7 11.8 4.4 C15.2 2.2 17.4 6.2 16.4 15.2' fill='none' stroke='%236b5138' stroke-width='4' stroke-linecap='round'/%3E %3Cpath d='M9.4 27.4 C8.4 20 7.9 7 11.8 4.4 C15.2 2.2 17.4 6.2 16.4 15.2' fill='none' stroke='%23ecc47a' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M9.8 17 C9.6 11 10.4 7.2 12.4 6.1' fill='none' stroke='%23fff' stroke-width='.9' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"); }
body[data-page="todos"] .pad-sheet { position: relative; padding: 30px 18px 16px 14px; border: 1.5px solid rgba(107,81,56,.14); border-radius: 5px 5px 16px 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--who) 42%, transparent) .9px, transparent 1.4px) 6px 4px / 14px 14px, #fffefa;
  box-shadow: 0 5px 0 -2px #fbf5ea, 0 5px 0 -.5px rgba(107,81,56,.15), var(--lift); }

/* 抬头：白圆里的小脑袋（小鹿 / 小狗）+ 名字（手写体、谁的颜色）；右边「还有 N 件」；底下一道谁的颜色的双线 */
body[data-page="todos"] .pad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 3px double color-mix(in srgb, var(--who) 55%, transparent); }
body[data-page="todos"] .pad-name { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 19px/1.3 var(--hand); letter-spacing: 2px; color: var(--who-deep); }
body[data-page="todos"] .pad-mark { display: inline-block; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #fff center / 34px 34px no-repeat;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--who) 80%, var(--ink)), 0 3px 6px -4px rgba(107,81,56,.55); }
body[data-page="todos"] .pad-cheng .pad-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Cdefs%3E%3Cmask id='e' maskUnits='userSpaceOnUse' x='-3' y='-3' width='106' height='106'%3E%3Crect x='-3' y='-3' width='106' height='106' fill='%23fff'/%3E%3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51 Z' fill='%23000'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51 Z' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E %3Cpath d='M40 29 C 38.4 21.5, 35 16, 30 11.5 M36.8 20.6 C 32.6 19.8, 28.6 20.8, 25.4 23.2 M60 29 C 61.6 21.5, 65 16, 70 11.5 M63.2 20.6 C 67.4 19.8, 71.4 20.8, 74.6 23.2' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M70 11.5 C 71.6 5.6, 79 3.6, 84 5.4 C 82.6 11.4, 75.8 13.8, 70 11.5 Z' fill='%23aac6a1' stroke='%236b5138' stroke-width='2.76' stroke-linejoin='round'/%3E %3Cpath d='M50 27 C 70 27, 81 42, 80 60 C 79 78, 66 91, 50 91 C 34 91, 21 78, 20 60 C 19 42, 30 27, 50 27 Z' fill='%23dcab76'/%3E %3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51 Z' fill='%23d49a60'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51 Z' fill='%23d49a60'/%3E %3Cpath d='M22.5 45 C 16 43.5, 10 47.5, 8 54 C 12.5 55.5, 18 53.5, 21.5 49.5 Z M77.5 45 C 84 43.5, 90 47.5, 92 54 C 87.5 55.5, 82 53.5, 78.5 49.5 Z' fill='%23f3c3b1'/%3E %3Cpath d='M50 27 C 70 27, 81 42, 80 60 C 79 78, 66 91, 50 91 C 34 91, 21 78, 20 60 C 19 42, 30 27, 50 27 Z' fill='none' stroke='%236b5138' stroke-width='4.6' mask='url(%23e)'/%3E %3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='76' rx='13' ry='10' fill='%23f7e6cf'/%3E %3Ccircle cx='43' cy='36.5' r='2.6' fill='%23fff7ea'/%3E%3Ccircle cx='50' cy='34' r='2.6' fill='%23fff7ea'/%3E%3Ccircle cx='57' cy='36.5' r='2.6' fill='%23fff7ea'/%3E %3Cpath d='M33 55 C 36 50, 42 50, 45 55 M55 55 C 58 50, 64 50, 67 55' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='70' rx='4.8' ry='3.8' fill='%236b5138'/%3E %3Cpath d='M45.5 76.5 C 48 79.5, 52 79.5, 54.5 76.5' fill='none' stroke='%236b5138' stroke-width='3.68' stroke-linecap='round'/%3E %3Cellipse cx='32' cy='66' rx='6' ry='4' fill='rgba(240,160,122,.55)'/%3E%3Cellipse cx='68' cy='66' rx='6' ry='4' fill='rgba(240,160,122,.55)'/%3E%3C/svg%3E"); }
body[data-page="todos"] .pad-dog .pad-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Cdefs%3E%3Cmask id='e' maskUnits='userSpaceOnUse' x='-3' y='-3' width='106' height='106'%3E%3Crect x='-3' y='-3' width='106' height='106' fill='%23fff'/%3E%3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5 C 24.5 45, 25.8 35, 29 25.6 Z' fill='%23000'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5 C 75.5 45, 74.2 35, 71 25.6 Z' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E %3Cpath d='M50 21 C 76 21, 90 39, 89 59 C 88 79, 72 91, 50 91 C 28 91, 12 79, 11 59 C 10 39, 24 21, 50 21 Z' fill='%23f6d597'/%3E %3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5 C 24.5 45, 25.8 35, 29 25.6 Z' fill='%23ebba76'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5 C 75.5 45, 74.2 35, 71 25.6 Z' fill='%23ebba76'/%3E %3Cpath d='M50 21 C 76 21, 90 39, 89 59 C 88 79, 72 91, 50 91 C 28 91, 12 79, 11 59 C 10 39, 24 21, 50 21 Z' fill='none' stroke='%236b5138' stroke-width='4.6' mask='url(%23e)'/%3E %3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M32 49 C 35 44, 42 44, 45 49 M55 49 C 58 44, 65 44, 68 49' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='59' rx='5.2' ry='4.2' fill='%236b5138'/%3E %3Cpath d='M50 63 C 50 68, 46 70.5, 42 69.6 M50 63 C 50 68, 54 70.5, 58 69.6' fill='none' stroke='%236b5138' stroke-width='3.68' stroke-linecap='round'/%3E %3Cellipse cx='31' cy='61' rx='6.4' ry='4.3' fill='rgba(240,160,122,.55)'/%3E%3Cellipse cx='69' cy='61' rx='6.4' ry='4.3' fill='rgba(240,160,122,.55)'/%3E%3C/svg%3E"); }
body[data-page="todos"] .pad-count { font: 400 12.5px/1 var(--hand); letter-spacing: 1px; color: var(--text-mute); white-space: nowrap; }
body[data-page="todos"] .pad-count b { margin: 0 2px; font-size: 16px; font-weight: 700; color: var(--who-deep); }

/* 一条：左边一个小圈，字在右边（长了往下换行）；条和条之间、最后一条和「写一条」之间一道谁的颜色的虚线 */
body[data-page="todos"] .pad-lines { position: relative; padding-top: 8px; }
body[data-page="todos"] .pad-list, body[data-page="todos"] .pad-done-list { list-style: none; margin: 0; padding: 0; }
body[data-page="todos"] .todo { position: relative; padding: 3px 0 3px var(--gutter); }
body[data-page="todos"] .todo + .todo, body[data-page="todos"] .pad-write { border-top: 1.5px dashed color-mix(in srgb, var(--who) 70%, transparent); }
body[data-page="todos"] .todo-text { margin: 0; font-size: 15px; line-height: var(--lh); color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
/* 划掉的那道线：字底下的背景一截一截画过去（多行的时候一行接一行，像笔划过去）*/
body[data-page="todos"] .todo-body { background: linear-gradient(var(--who-deep), var(--who-deep)) 0 60% / 0 2px no-repeat;
  transition: background-size .45s .12s ease-in-out, color .3s .12s; }
body[data-page="todos"] .todo-date { margin-left: 8px; font: 400 12px/1 var(--hand); letter-spacing: .5px; color: var(--text-mute); white-space: nowrap; }
body[data-page="todos"] .todo-check { position: absolute; left: 0; top: 3px; display: grid; place-items: center start; width: var(--gutter); height: var(--lh);
  margin: 0; padding: 0 0 0 1px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="todos"] .todo-check::after { content: ''; position: absolute; inset: -8px -2px -8px -10px; }   /* 手指点的范围比小圈大一圈 */
body[data-page="todos"] .todo-check svg { display: block; width: 23px; height: 23px; overflow: visible; }
body[data-page="todos"] .todo-check .ring { fill: var(--card); stroke: color-mix(in srgb, var(--who-deep) 72%, var(--ink)); stroke-width: 1.7; transition: fill .2s; }
body[data-page="todos"] .todo-check .tick { fill: none; stroke: var(--who-deep); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .3s ease-out; }
body[data-page="todos"] .todo.checking .ring, body[data-page="todos"] .todo.is-done .ring { fill: var(--who-tint); }
body[data-page="todos"] .todo.checking .tick, body[data-page="todos"] .todo.is-done .tick { stroke-dashoffset: 0; }
body[data-page="todos"] .todo.checking .todo-body { background-size: 100% 2px; color: var(--text-mute); }
body[data-page="todos"] .todo.checking .todo-date { display: none; }
/* 划掉以后 2.4 秒里：日期的位置换成「拿回来」 */
body[data-page="todos"] .todo-undo { display: none; height: 22px; margin-left: 8px; padding: 0 10px; vertical-align: 1px; cursor: pointer;
  font: 400 12px/19px var(--hand); letter-spacing: 1px; color: var(--who-deep);
  background: var(--card); border: 1.3px solid color-mix(in srgb, var(--who) 80%, var(--ink)); border-radius: 999px; }
body[data-page="todos"] .todo.checking .todo-undo { display: inline-block; }
/* 真的划掉了：这一行收起来（js 先把高度写死再改成 0） */
body[data-page="todos"] .todo.leaving { overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent;
  transition: height .38s ease, padding .38s ease, opacity .28s ease, border-color .2s; }
@keyframes todo-fresh { from { opacity: 0; transform: translateY(10px); } }
body[data-page="todos"] .todo.fresh { animation: todo-fresh .5s cubic-bezier(.22, 1, .36, 1); }
body[data-page="todos"] .todo-empty { padding: 3px 0 3px var(--gutter); font: 400 14px/var(--lh) var(--hand); letter-spacing: 1px; color: var(--text-mute); }

/* 写一条：本子最下面那一行就是输入框（没有框线）；页边上一支小铅笔，写的时候歪一下 */
body[data-page="todos"] .pad-write { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 3px 0 0 var(--gutter); }
body[data-page="todos"] .pad-write::before { content: ''; position: absolute; left: 1px; top: 5px; width: 23px; height: 23px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath d='M5 19 L6.2 14.6 L16.4 4.4 L19.6 7.6 L9.4 17.8 Z' fill='%23f1d27e' stroke='%236b5138' stroke-width='1.5' stroke-linejoin='round'/%3E %3Cpath d='M5 19 L6.2 14.6 L9.4 17.8 Z' fill='%23f8e6c6' stroke='%236b5138' stroke-width='1.3' stroke-linejoin='round'/%3E %3Cpath d='M5 19 L5.55 16.95 L7.05 18.45 Z' fill='%236b5138'/%3E %3Cpath d='M16.4 4.4 L17.6 3.2 C18.3 2.5 19.2 2.5 19.9 3.2 L20.8 4.1 C21.5 4.8 21.5 5.7 20.8 6.4 L19.6 7.6 Z' fill='%23f2a99a' stroke='%236b5138' stroke-width='1.5' stroke-linejoin='round'/%3E %3Cpath d='M15.1 5.7 L18.3 8.9' stroke='%236b5138' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s, opacity .25s; }
body[data-page="todos"] .pad-write:focus-within::before { opacity: 1; transform: rotate(-14deg) translate(-1px, -2px); }
body[data-page="todos"] .pad-write textarea { flex: 1; min-width: 0; display: block; height: var(--lh); min-height: var(--lh); margin: 0; padding: 0;
  font: inherit; font-size: 15px; line-height: var(--lh); color: var(--text); background: transparent;
  border: 0; border-radius: 0; box-shadow: none; outline: none; resize: none; overflow: hidden; -webkit-appearance: none; appearance: none; }
body[data-page="todos"] .pad-write textarea::placeholder { font-family: var(--hand); letter-spacing: 1px; color: var(--text-mute); opacity: 1; }
body[data-page="todos"] .pad-write textarea:focus::placeholder { color: color-mix(in srgb, var(--text-mute) 55%, transparent); }
body[data-page="todos"] .pad-send { display: none; flex-shrink: 0; height: 26px; margin-top: 1px; padding: 0 13px; cursor: pointer;
  font: 700 12.5px/23px var(--hand); letter-spacing: 1px; color: var(--text);
  background: var(--room); border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 rgba(107,81,56,.2); }
body[data-page="todos"] .pad-send:active { transform: translateY(2px); box-shadow: none; }
body[data-page="todos"] .pad-write.has-text .pad-send { display: block; }
body[data-page="todos"] .pad-write.sending .pad-send { opacity: .5; pointer-events: none; }
@keyframes todo-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
body[data-page="todos"] .pad-write.shake { animation: todo-shake .4s; }
/* 本子底下一行小字（没写进去 / 没划掉）：4 秒后自己收起来 */
body[data-page="todos"] .pad-hint { max-height: 0; margin: 0 0 0 var(--gutter); overflow: hidden; opacity: 0;
  font: 400 12.5px/1.5 var(--hand); letter-spacing: 1px; color: #b3604f; transition: max-height .3s, opacity .3s, margin .3s; }
body[data-page="todos"] .pad-hint.show { max-height: 40px; margin-top: 6px; opacity: 1; }

/* 做完啦：折起来的一枚小签，点开是划掉的那些（新写的在上面），一次给看几条 */
body[data-page="todos"] .pad-done { margin-top: 14px; padding-left: 2px; }
body[data-page="todos"] .pad-done summary { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 12px; cursor: pointer; list-style: none;
  font: 400 13px/1.4 var(--hand); letter-spacing: 1px; color: var(--text-soft); -webkit-tap-highlight-color: transparent;
  background: color-mix(in srgb, var(--who-tint) 75%, transparent); border: 1.3px dashed color-mix(in srgb, var(--who) 85%, var(--ink)); border-radius: 999px; }
body[data-page="todos"] .pad-done summary::-webkit-details-marker { display: none; }
body[data-page="todos"] .pad-done summary b { font-weight: 700; color: var(--who-deep); }
body[data-page="todos"] .pad-done summary::after { content: ''; width: 7px; height: 7px; margin: 0 0 3px 1px; border: solid var(--text-soft); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); transition: transform .2s, margin .2s; }
body[data-page="todos"] .pad-done[open] summary::after { margin: 3px 0 0 1px; transform: rotate(-135deg); }
body[data-page="todos"] .pad-done-list { margin-top: 10px; }
body[data-page="todos"] .todo.is-done .todo-body { background-size: 100% 1.6px; color: var(--text-mute); }
body[data-page="todos"] .todo.is-done .todo-text { font-size: 14px; }
body[data-page="todos"] .pad-more { margin: 8px 0 0 var(--gutter); padding: 4px 13px; cursor: pointer; font: 400 12.5px/1.4 var(--hand); letter-spacing: 1px;
  color: var(--text-soft); background: var(--card); border: 1.3px solid rgba(107,81,56,.22); border-radius: 999px; }

/* 手机开了「减少动态效果」：抖一下、冒出来、画勾划线、收起来都不做（家里的 base.css 没有总开关，和存钱罐小狗一样各管各的） */
@media (prefers-reduced-motion: reduce) {
  body[data-page="todos"] .pad-write.shake, body[data-page="todos"] .todo.fresh { animation: none; }
  body[data-page="todos"] .todo-body, body[data-page="todos"] .todo-check .tick, body[data-page="todos"] .todo.leaving, body[data-page="todos"] .pad-write::before { transition: none; }
}

/* ================= 基金：小角落 + 四本小存折 + 入金单 + 方格纸上的净值曲线（27 号美化 H8 第五间，2026-09-29）================= */
/* 门色焦糖（pagebar.css：--room #d9b08a / --room-tint #f4e6d7）。红涨绿跌照旧（css/funds.css 的 .pnl-up / .pnl-down），四只基金的颜色照旧（js/funds.js 的 FUND_META）。
   原来的白卡（持仓卡片、记一笔、图表卡片）整个换掉了（js/funds.js 重写了画法，算法一行没改）；css/funds.css 的旧样式大部分没人用了，留着没删 */
body[data-page="funds"] { --room-deep: #9a6b3f; }
body[data-page="funds"] .content { max-width: 620px; padding: 24px 16px 64px; }
body[data-page="funds"] .fund-failed { margin: 40px 0; text-align: center; }

/* ---- 顶上小角落：352×200 的画固定居中（窄屏两边裁一点，不出横向滚动）；总资产是叠在画上的 HTML ---- */
body[data-page="funds"] .fund-corner { position: relative; height: 200px; margin: 0 0 16px; overflow: hidden; }
body[data-page="funds"] .fund-scene { position: absolute; left: 50%; top: 0; width: 352px; height: 200px; margin-left: -176px; pointer-events: none; }
body[data-page="funds"] .fund-scene svg { display: block; width: 352px; height: 200px; }
body[data-page="funds"] .fund-tag { position: absolute; top: 0; left: calc(50% - 176px); display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-family: var(--hand); color: var(--text); }
body[data-page="funds"] .ft-label { font-size: 12px; letter-spacing: 2px; color: var(--text-soft); }
body[data-page="funds"] #fundTotalVal { font-size: 21px; font-weight: 700; letter-spacing: .5px; line-height: 1.25; }
body[data-page="funds"] #fundTotalVal.long { font-size: 18px; }
body[data-page="funds"] #fundTotalVal.longer { font-size: 15.5px; }
body[data-page="funds"] #fundTotalPnl { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.35; }
body[data-page="funds"] #fundTotalPnl span { white-space: nowrap; }
body[data-page="funds"] #fundTotalPnl .ft-rate { font-size: 11px; }
body[data-page="funds"] #fundTotalCost { font-size: 11.5px; color: var(--text-mute); letter-spacing: .3px; }
body[data-page="funds"] #fundTotalCost .fc-v.long { font-size: .9em; }
/* ① 小树 v2（9/29 重画）：小狗捧着水壶给摇钱树浇水，和记账的小角落一套画法（木架子、墙上挂的木牌、水彩底色）。
   墙上的木牌 = 总资产 + 赚了多少 + 投入（9/29 澄澄：投入也并进木牌，牌子长一点，正好填右边的空）。
   摸一摸（9/29 澄澄：想要可爱的反应）：小狗 = 蹦一下、水壶再歪一点、水珠一颗颗掉，头上冒一句话；
   树 = 晃一晃、果子荡一荡、掉下来一枚硬币和两片叶子（小狗：哇！掉钱啦！）；木牌 = 在钉子上荡一荡 */
body[data-page="funds"] .fd-ink { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="funds"] .fd-ink.thin { stroke-width: 2.3; }
/* 木牌：靠右挂（右边对齐画里的 x=336：360 宽的手机上也不被裁），宽度固定（钉子和两根绳画在木牌里，荡的时候一起动；数字长了字变小） */
body[data-page="funds"] .fund-sign { position: absolute; right: calc(50% - 176px + 16px); top: 27px; width: 124px; padding: 6px 10px 8px 11px; cursor: pointer;
  transform: rotate(2deg); transform-origin: 50% -18px; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: flex-start; font-family: var(--hand); color: var(--text);
  background: #fff8ec; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 rgba(107,81,56,.14); }
body[data-page="funds"] .fs-hang { position: absolute; left: -2px; top: -24px; width: 124px; height: 24px; overflow: visible; pointer-events: none; }
body[data-page="funds"] .fund-sign .ft-label { font-size: 11px; line-height: 1.3; }
body[data-page="funds"] .fund-sign #fundTotalVal { font-size: 20px; white-space: nowrap; }
body[data-page="funds"] .fund-sign #fundTotalVal.long { font-size: 17px; }
body[data-page="funds"] .fund-sign #fundTotalVal.longer { font-size: 15px; }
body[data-page="funds"] .fund-sign #fundTotalVal.longest { font-size: 13px; }
body[data-page="funds"] .fund-sign #fundTotalPnl { font-size: 12px; }
body[data-page="funds"] .fund-sign #fundTotalCost { align-self: stretch; margin-top: 6px; padding-top: 5px; border-top: 1.5px dashed rgba(107,81,56,.24);
  font-size: 11px; line-height: 1.4; letter-spacing: .5px; color: var(--text-soft); white-space: nowrap; }
body[data-page="funds"] .fund-sign #fundTotalCost .fc-v { margin-left: 1px; font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--text); }
body[data-page="funds"] .fund-sign #fundTotalCost .fc-v.long { font-size: 11.5px; }
body[data-page="funds"] .fund-sign.swing { animation: fundSwing 1.5s ease-out; }
@keyframes fundSwing { 0%, 100% { transform: rotate(2deg); } 14% { transform: rotate(-7deg); } 33% { transform: rotate(6deg); } 52% { transform: rotate(-3.5deg); } 72% { transform: rotate(2.8deg); } 88% { transform: rotate(1.4deg); } }
/* 可以摸的地方：透明按钮盖在画上（小狗、树；木牌自己就能点） */
body[data-page="funds"] .fund-hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 40%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="funds"] .fund-hit:focus-visible, body[data-page="funds"] .fund-sign:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; }
body[data-page="funds"] .fund-hit-dog { left: calc(50% - 176px + 8px); top: 96px; width: 98px; height: 88px; }
body[data-page="funds"] .fund-hit-tree { left: calc(50% - 176px + 104px); top: 2px; width: 118px; height: 178px; }
/* 头上冒的一句话（和记账那只存钱罐小狗一样的气泡；摇树的那句等硬币落地再冒：.late） */
body[data-page="funds"] .fund-say { position: absolute; z-index: 2; left: calc(50% - 176px + 13px); bottom: 98px; max-width: 128px; padding: 6px 10px 5px; white-space: pre-line;
  border-radius: 14px 14px 14px 4px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 6px 14px -8px rgba(107,81,56,.5);
  font: 400 12.5px/1.45 var(--hand); letter-spacing: .4px; color: var(--text); opacity: 0; pointer-events: none; transform-origin: 0 100%; }
body[data-page="funds"] .fund-say.show { animation: fundSay 2.4s ease forwards; }
body[data-page="funds"] .fund-say.late { animation: fundSay 2.4s ease .95s both; }
@keyframes fundSay { 0% { opacity: 0; transform: scale(.6) translateY(6px); } 12% { opacity: 1; transform: scale(1.04); } 20% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes fundSayFade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* 摸小狗：蹦一下（压扁一点点）、水壶再往前歪 6°（莲蓬头别戳进盆里）、水珠一颗颗往下掉三轮 */
body[data-page="funds"] .fd-dog { transform-box: view-box; transform-origin: 54px 180px; }
body[data-page="funds"] .fd-dog.pour { animation: fundHop .55s ease; }
@keyframes fundHop { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.02, .98); } 58% { transform: scale(1.04, .95); } 78% { transform: scale(.99, 1.01); } }
body[data-page="funds"] .fd-can { transform-box: view-box; transform-origin: 80px 128px; }
body[data-page="funds"] .fd-dog.pour .fd-can { animation: fundTilt 1.7s ease; }
@keyframes fundTilt { 0%, 100% { transform: none; } 22%, 78% { transform: rotate(6deg); } }
body[data-page="funds"] .fd-dog.pour .fd-drop { animation: fundDrop .5s linear .2s 3 backwards; }   /* backwards：掉完三轮回到原来的样子（不能用 both，不然水珠就一直不见了） */
body[data-page="funds"] .fd-dog.pour .fd-drop:nth-child(2) { animation-delay: .36s; }
body[data-page="funds"] .fd-dog.pour .fd-drop:nth-child(3) { animation-delay: .52s; }
@keyframes fundDrop { 0% { opacity: 0; transform: translateY(-5px); } 25% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }
/* 摇树：以树干底下为轴晃一晃、果子以果柄为轴荡一荡；一枚硬币从树上掉到架子上弹两下（滚一小段、慢慢不见），两片叶子飘下来 */
body[data-page="funds"] .fd-tree { transform-box: view-box; transform-origin: 158px 137px; }
body[data-page="funds"] .fd-tree.shake { animation: fundSway .95s ease; }
@keyframes fundSway { 0%, 100% { transform: none; } 14% { transform: rotate(-4deg); } 34% { transform: rotate(3.5deg); } 54% { transform: rotate(-2.4deg); } 74% { transform: rotate(1.2deg); } }
body[data-page="funds"] .fd-fruit { transform-box: fill-box; transform-origin: 50% 0; }
body[data-page="funds"] .fd-tree.shake .fd-fruit { animation: fundFruit .5s ease var(--d, 0s) 2; }
@keyframes fundFruit { 0%, 100% { transform: none; } 30% { transform: rotate(12deg); } 70% { transform: rotate(-9deg); } }
body[data-page="funds"] .fd-coin, body[data-page="funds"] .fd-leaf { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
body[data-page="funds"] .fd-tree.shake ~ .fd-coin { animation: fundCoin 2.6s both; }
@keyframes fundCoin {
  0% { opacity: 0; transform: translate(-22px, -98px) rotate(-30deg); animation-timing-function: step-end; }
  6% { opacity: 1; transform: translate(-22px, -98px) rotate(-30deg); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
  30% { transform: translate(0, 0) rotate(120deg); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  38% { transform: translate(5px, -13px) rotate(170deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  46% { transform: translate(9px, 0) rotate(210deg); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  51% { transform: translate(11px, -4px) rotate(228deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  56% { transform: translate(13px, 0) rotate(246deg); animation-timing-function: ease-out; }
  68%, 82% { opacity: 1; transform: translate(16px, 0) rotate(262deg); }
  100% { opacity: 0; transform: translate(16px, 0) rotate(262deg); }
}
body[data-page="funds"] .fd-tree.shake ~ .fd-leaf1 { animation: fundLeaf1 2s ease-in .1s both; }
body[data-page="funds"] .fd-tree.shake ~ .fd-leaf2 { animation: fundLeaf2 2.2s ease-in .3s both; }
@keyframes fundLeaf1 { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 40% { transform: translate(-9px, 18px) rotate(-50deg); } 70% { transform: translate(3px, 36px) rotate(15deg); }
  88% { opacity: 1; } 100% { opacity: 0; transform: translate(-5px, 52px) rotate(-35deg); } }
@keyframes fundLeaf2 { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 40% { transform: translate(8px, 16px) rotate(45deg); } 70% { transform: translate(-2px, 34px) rotate(-10deg); }
  88% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, 50px) rotate(30deg); } }
@keyframes fundCoinFade { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* ①′ 第一轮的小树（留档）：树枝上挂的一张小吊牌（左上角有个穿绳的小孔） */
body[data-page="funds"] .fund-corner-tree-v1 .fund-tag { left: calc(50% - 176px + 214px); top: 74px; width: 124px; padding: 9px 10px 8px 12px; transform: rotate(4deg); transform-origin: 18px 0;
  background: #fffaf1; border: 1.8px solid var(--ink); border-radius: 8px 12px 12px 12px; box-shadow: 0 6px 12px -8px rgba(107,81,56,.6); }
/* ② 宝箱：旁边摊开的一卷纸 */
body[data-page="funds"] .fund-corner-chest .fund-tag { left: calc(50% - 176px + 234px); top: 66px; width: 102px; height: 112px; padding: 8px 6px 6px 8px;
  background: #fbf1e2; border: 1.8px solid var(--ink); border-left: 0; border-radius: 0 10px 10px 0; box-shadow: 0 6px 12px -8px rgba(107,81,56,.6); }
body[data-page="funds"] .fund-corner-chest #fundTotalVal { font-size: 17px; }
body[data-page="funds"] .fund-corner-chest #fundTotalVal.long { font-size: 14.5px; }
body[data-page="funds"] .fund-corner-chest #fundTotalVal.longer { font-size: 12.5px; }
body[data-page="funds"] .fund-corner-chest #fundTotalPnl { font-size: 11px; }
body[data-page="funds"] .fund-corner-chest #fundTotalCost { font-size: 10.5px; }
/* ③ 存折：右页写着总资产；左页上面一行「小狗的基金存折」 */
body[data-page="funds"] .fund-corner-book .fund-tag { left: calc(50% - 176px + 194px); top: 70px; width: 116px; transform: rotate(-3deg); }
body[data-page="funds"] .fund-book-stamp { position: absolute; left: 50px; top: 66px; transform: rotate(-3deg); font: 700 12px/1 var(--hand); letter-spacing: 1.5px; color: #b3604f; }

/* ---- 底下的数：用记账、健康已经有的那套「说法」（9/29 澄澄：框框和别的房间不太一样——细线深、角方、小框框太多）。
        卡片 = 圆角 20、几乎看不见的一圈线（.12）、一层软影子；小格子 = 圆角 14、更淡的线（.10）；标题下面一笔门色笔刷；
        一笔一笔 = 锯齿小票；卡片顶上贴一截纸胶带；翻页 = 两个圆按钮夹着中间的字 ---- */

/* 澄澄的基金：和记账「一个月的口袋」同一个样子（浅焦糖色的块 + 笔刷标题 + 四个白格子）；点哪只，下面的图就换哪只 */
body[data-page="funds"] .fund-summary { margin: 0 0 12px; padding: 18px 14px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--room-tint) 55%, var(--card)); border: 1.5px solid rgba(107,81,56,.12); }
body[data-page="funds"] .fs-title, body[data-page="funds"] .fa-title { position: relative; z-index: 0; display: inline-block; margin: 0 0 4px 4px; font: 700 16px/1.3 var(--hand); letter-spacing: 2px; color: var(--text); }
body[data-page="funds"] .fs-title::after, body[data-page="funds"] .fa-title::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 80%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="funds"] .fs-hint { margin: 0 0 12px 4px; font: 400 12px/1.4 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="funds"] .fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; margin-top: 26px; }
/* 一个格子：顶上探出一个白圆（里面是树上那个果子），名字、赚了多少 + 百分比、几枚金币（现在 ÷ 投入）、投入 / 现值两行 */
body[data-page="funds"] .fs-cell { --c: #999; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: 25px 10px 10px; cursor: pointer;
  text-align: center; font: inherit; color: var(--text); background: var(--card); border: 1.3px solid rgba(107,81,56,.1); border-radius: 14px;
  -webkit-tap-highlight-color: transparent; transition: background-color .2s, border-color .2s, box-shadow .2s; }
body[data-page="funds"] .fs-avatar { position: absolute; top: -21px; left: 50%; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1.3px rgba(107,81,56,.13), 0 5px 9px -5px rgba(107,81,56,.45); transition: box-shadow .2s; }
body[data-page="funds"] .fs-avatar svg { display: block; width: 31px; height: 31px; }
body[data-page="funds"] .fs-name { font: 700 13px/1.3 var(--hand); letter-spacing: .5px; color: var(--text-soft); white-space: nowrap; }
body[data-page="funds"] .fs-num { margin-top: 4px; line-height: 1.2; }
body[data-page="funds"] .fs-pnl { font: 700 20px/1.2 var(--hand); letter-spacing: .3px; white-space: nowrap; }
body[data-page="funds"] .fs-rate { display: block; margin-top: 2px; font: 700 11.5px/1.2 var(--hand); letter-spacing: .2px; white-space: nowrap; }   /* 百分比总是另起一行：四个格子一样高、走势线对齐 */
body[data-page="funds"] .fs-coins { display: block; width: 100px; max-width: 100%; height: auto; margin: 7px auto 1px; overflow: visible; }
/* 投入 / 现值：两行，字在左、数字右对齐（整块居中）——位数多了也不会折成难看的两截 */
body[data-page="funds"] .fs-sub { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0 7px; margin-top: 5px; font: 400 11px/1.55 var(--hand); letter-spacing: .2px; }
body[data-page="funds"] .fs-sub i { font-style: normal; letter-spacing: 1px; color: var(--text-mute); text-align: left; }
body[data-page="funds"] .fs-sub b { font-weight: 400; color: var(--text-soft); text-align: right; white-space: nowrap; }
body[data-page="funds"] .fs-cell.on { background: color-mix(in srgb, var(--c) 11%, var(--card)); border-color: color-mix(in srgb, var(--c) 42%, transparent);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--c) 14%, transparent); }
body[data-page="funds"] .fs-cell.on .fs-name { color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
body[data-page="funds"] .fs-cell.on .fs-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 5px 9px -5px rgba(107,81,56,.45); }

/* 记一笔买入：一张入金单（和别的卡片一样的纸；标题一笔笔刷；字写在虚线上；说一声的那行在「保存」上面） */
body[data-page="funds"] .funds-addbar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
body[data-page="funds"] .funds-add-btn { padding: 6px 16px 5px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--room) 70%, var(--ink)); background: var(--card);
  color: var(--room-deep); font: 700 13px/1.4 var(--hand); letter-spacing: 1px; cursor: pointer; }
body[data-page="funds"] .funds-add-btn.open { border-style: solid; }
body[data-page="funds"] .fund-add-form { margin: 0 0 18px; padding: 18px 16px 14px; background: var(--card); border: 1.5px solid rgba(107,81,56,.12); border-radius: 20px; box-shadow: var(--lift); }
body[data-page="funds"] .fa-title { margin-bottom: 12px; }
body[data-page="funds"] .fa-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
body[data-page="funds"] .fa-row label { width: 52px; flex-shrink: 0; font: 400 13px var(--hand); letter-spacing: 1px; color: var(--text-soft); }
body[data-page="funds"] .fa-row input, body[data-page="funds"] .fa-row select { flex: 1; min-width: 0; padding: 6px 4px; border: 0; border-bottom: 1.5px dashed rgba(107,81,56,.24); border-radius: 0;
  background: transparent; font-size: 15px; color: var(--text); }
body[data-page="funds"] .fa-row input:focus, body[data-page="funds"] .fa-row select:focus { outline: none; border-bottom: 1.5px solid var(--room-deep); }
body[data-page="funds"] .fa-row input::placeholder { color: var(--text-mute); opacity: .6; }
body[data-page="funds"] .fa-hint { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font: 400 12.5px/1.5 var(--hand); letter-spacing: .5px; color: #b3604f; transition: max-height .3s, opacity .3s, margin .3s; }
body[data-page="funds"] .fa-hint.show { max-height: 44px; margin: 4px 0 2px; opacity: 1; }
body[data-page="funds"] .fa-save { width: 100%; margin-top: 8px; padding: 8px; background: var(--room); color: var(--text); border: 1.5px solid var(--ink); border-radius: 999px;
  font: 700 14px/1.4 var(--hand); letter-spacing: 3px; box-shadow: 0 3px 0 rgba(107,81,56,.2); }
body[data-page="funds"] .fa-save:active { transform: translateY(2px); box-shadow: none; }

/* 净值的那张卡：顶上一截焦糖色的纸胶带（和健康那张一样）；「‹ オルカン ›」换基金（名字下面一笔它自己颜色的笔刷，底下一行基準価額） */
body[data-page="funds"] .fund-card { --c: #999; position: relative; margin: 30px 0 0; padding: 22px 14px 14px; background: var(--card);
  border: 1.5px solid rgba(107,81,56,.12); border-radius: 20px; box-shadow: var(--lift); touch-action: pan-y pinch-zoom; }
/* 左右滑：跟着手指挪（.dragging，js 写 transform），松手没滑够就弹回去；换过来的那只从那一边滑进来 */
body[data-page="funds"] #funds-chart-wrap { transition: transform .22s ease, opacity .22s ease; }
body[data-page="funds"] .fund-card { overflow-x: clip; overflow-y: visible; }   /* 滑的时候里面的东西不跑出卡片左右两边；顶上的纸胶带照样露出来（clip 不裁竖的那边） */
body[data-page="funds"] #funds-chart-wrap.dragging { transition: none; }
body[data-page="funds"] #funds-chart-wrap.slide-next { animation: fundSlideNext .32s ease-out; }
body[data-page="funds"] #funds-chart-wrap.slide-prev { animation: fundSlidePrev .32s ease-out; }
@keyframes fundSlideNext { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes fundSlidePrev { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
body[data-page="funds"] .fund-card::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 78%, transparent) repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%); transform: rotate(-3deg); }
body[data-page="funds"] .fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
body[data-page="funds"] .fc-hop, body[data-page="funds"] .funds-arrow { width: 34px; height: 34px; flex-shrink: 0; margin: 0; padding: 0 0 2px; border-radius: 50%; border: 1.3px solid rgba(107,81,56,.22);
  background: var(--card); color: var(--ink); font: 400 19px/1 var(--hand); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="funds"] .fc-hop:disabled, body[data-page="funds"] .funds-arrow:disabled { opacity: .28; cursor: default; }
body[data-page="funds"] .fc-title { flex: 1; min-width: 0; text-align: center; font-family: var(--hand); line-height: 1.35; }
body[data-page="funds"] .fc-title b { position: relative; z-index: 0; display: inline-block; font-size: 17px; letter-spacing: 1.5px; color: var(--text); }
body[data-page="funds"] .fc-title b::after { content: ''; position: absolute; z-index: -1; left: -5px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--c) 42%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="funds"] .fc-title span { display: block; margin-top: 3px; font-size: 12.5px; letter-spacing: .5px; color: var(--text-mute); }
body[data-page="funds"] .fc-title .fc-dots { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 7px 0 1px; }
body[data-page="funds"] .fc-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 38%, transparent); transition: width .25s; }
body[data-page="funds"] .fc-dots i.on { width: 16px; background: var(--c); }
/* 1个月 / 3个月 / 半年 / 全部：没有框线的小圆片，选中的那片是门色 */
body[data-page="funds"] .funds-ranges { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
body[data-page="funds"] .funds-range { margin: 0; padding: 4px 12px 3px; border-radius: 999px; border: 1.3px solid transparent; cursor: pointer;
  background: color-mix(in srgb, var(--room-tint) 50%, var(--card)); font: 400 12.5px/1.45 var(--hand); letter-spacing: .5px; color: var(--text-soft); }
body[data-page="funds"] .funds-range.active { background: color-mix(in srgb, var(--room) 60%, var(--card)); border-color: rgba(107,81,56,.26); color: var(--text); font-weight: 700; }
/* 图：一块浅焦糖色的圆角底（没有框线、没有方格），价位是淡淡的虚线；数字描一圈底色（曲线从后面过也看得清） */
body[data-page="funds"] .fund-graph { --graph-bg: color-mix(in srgb, var(--room-tint) 36%, var(--card)); position: relative; margin: 0 -2px; border-radius: 14px; background: var(--graph-bg); overflow: hidden; }
body[data-page="funds"] .fund-graph svg { display: block; width: 100%; height: auto; }
body[data-page="funds"] .fg-line { stroke: rgba(107,81,56,.2); stroke-width: 1; stroke-dasharray: 3 4; }
body[data-page="funds"] .fg-label, body[data-page="funds"] .fg-tick { font-family: var(--hand); font-size: 10.5px; fill: var(--text-mute); }
body[data-page="funds"] .fg-label { paint-order: stroke; stroke: var(--graph-bg); stroke-width: 3.5px; stroke-linejoin: round; }
body[data-page="funds"] .fg-curve { stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
body[data-page="funds"] .fg-area { opacity: .1; }
body[data-page="funds"] .fund-marker { cursor: pointer; }
body[data-page="funds"] .fund-marker .fm-dot { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(107,81,56,.4)); }
body[data-page="funds"] .fund-marker.sel .fm-dot { stroke: var(--ink); stroke-width: 1.8; }
/* 图下面：这一段是哪几天（翻页的时候两边是圆按钮）；再下面一行小圆点说明（居中，和记账日历下面那行一样） */
body[data-page="funds"] .fc-window { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 34px; margin: 10px 0 0;
  font: 400 13px/1.4 var(--hand); letter-spacing: .5px; color: var(--text-soft); }
body[data-page="funds"] .fc-window .funds-arrow { width: 30px; height: 30px; font-size: 17px; }
body[data-page="funds"] .fund-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font: 400 12px/1.5 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="funds"] .fund-legend span { font-size: inherit; }   /* css/funds.css 的旧规则给了 13px */
body[data-page="funds"] .fund-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
body[data-page="funds"] .fund-legend i.tsumitate { background: #f0a828; }
body[data-page="funds"] .fund-legend i.manual { background: #3b82e6; }
/* 点了圆点：这一笔一张锯齿小票（和记账的小票同一个做法：上下两道锯齿边、影子加在外面那层上跟着锯齿走、歪一点点）；
   左下角盖一个章：定投 = 金黄、手动 = 蓝（和图上两种圆点一个颜色） */
body[data-page="funds"] .fr-wrap { margin: 16px 4px 2px; filter: drop-shadow(0 1px 1px rgba(107,81,56,.08)) drop-shadow(0 8px 9px rgba(107,81,56,.15)); }
body[data-page="funds"] .fund-receipt { --sc: #d99a1c; position: relative; padding: 18px 16px 16px; background: #fffaf1; transform: rotate(-.6deg);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x; }
body[data-page="funds"] .fund-receipt.manual { --sc: #3f79d0; }
body[data-page="funds"] .fr-top { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.3 var(--hand); letter-spacing: 1px; color: var(--text); }
body[data-page="funds"] .fr-top span { margin-left: auto; font-weight: 400; font-size: 12.5px; letter-spacing: .5px; color: var(--text-mute); }
body[data-page="funds"] .fr-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-family: var(--hand); }
body[data-page="funds"] .fr-row span { font-size: 12.5px; letter-spacing: 1px; color: var(--text-mute); }
body[data-page="funds"] .fr-row b { font-size: 17px; letter-spacing: .5px; color: var(--text); }
body[data-page="funds"] .fr-note { margin-top: 2px; font: 400 12px/1.5 var(--hand); letter-spacing: .3px; color: var(--text-soft); }
body[data-page="funds"] .fr-bottom { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 50px; margin-top: 12px; padding-top: 10px;
  border-top: 1.5px dashed rgba(107,81,56,.22); }
body[data-page="funds"] .fr-now { text-align: right; font-family: var(--hand); }
body[data-page="funds"] .fr-now small { margin-right: 6px; font-size: 12.5px; letter-spacing: 1px; color: var(--text-mute); }
body[data-page="funds"] .fr-now b { font-size: 24px; line-height: 1; letter-spacing: .5px; color: var(--text); }
body[data-page="funds"] .fr-now em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
body[data-page="funds"] .fr-now em.pnl-up { color: #e05252; }
body[data-page="funds"] .fr-now em.pnl-down { color: #2e9e6b; }
body[data-page="funds"] .fr-stamp { position: absolute; left: 4px; top: 50%; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12.5px/1 var(--hand); letter-spacing: 0; color: var(--sc); border: 2.2px solid var(--sc);
  box-shadow: inset 0 0 0 2.5px #fffaf1, inset 0 0 0 3.8px var(--sc); transform: rotate(-14deg); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="funds"] .fs-cell, body[data-page="funds"] .fs-avatar, body[data-page="funds"] .fa-hint, body[data-page="funds"] #funds-chart-wrap, body[data-page="funds"] .fc-dots i { transition: none; }
  body[data-page="funds"] #funds-chart-wrap.slide-next, body[data-page="funds"] #funds-chart-wrap.slide-prev { animation: none; }
  body[data-page="funds"] .fd-dog.pour, body[data-page="funds"] .fd-dog.pour .fd-can, body[data-page="funds"] .fd-dog.pour .fd-drop, body[data-page="funds"] .fd-tree.shake, body[data-page="funds"] .fd-tree.shake .fd-fruit, body[data-page="funds"] .fund-sign.swing,
  body[data-page="funds"] .fd-tree.shake ~ .fd-leaf1, body[data-page="funds"] .fd-tree.shake ~ .fd-leaf2 { animation: none; }
  body[data-page="funds"] .fd-tree.shake ~ .fd-coin { animation: fundCoinFade 2.2s linear both; }
  body[data-page="funds"] .fund-say.show { animation: fundSayFade 2.4s linear forwards; }
  body[data-page="funds"] .fund-say.late { animation: fundSayFade 2.4s linear .6s both; }
}

/* ================= 阳台：窗台上的植物 + 写观察日记的小狗 + 每种一本小本子（27 号美化 H9 第六间，2026-09-29）================= */
/* 门色鼠尾草绿（pagebar.css：--room #bfd29d / --room-tint #eaf1dc）。原来那张白卡（统计四格、一盆一张卡片、两个弹窗）整个换掉了；
   css/garden.css 的旧样式没人用了，留着没删（和 funds.css 一样以后一起清） */
body[data-page="garden"] { --room-deep: #5f7f45; }
body[data-page="garden"] .content { max-width: 620px; padding: 24px 16px 72px; }
body[data-page="garden"] .gd-wait { margin: 40px 0; text-align: center; font: 400 14px/1.6 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="garden"] .gd-retry { margin-left: 6px; padding: 5px 12px; border: 1.3px solid rgba(107,81,56,.25); border-radius: 999px; background: var(--card);
  font: 400 13px/1 var(--hand); color: var(--text-soft); cursor: pointer; }

/* ---- 顶上的阳台：352×250 的画固定居中（窄屏两边裁一点，不出横向滚动）；植物、木牌是叠在画上的 HTML ---- */
body[data-page="garden"] .garden-corner { position: relative; height: 250px; margin: 0 0 14px; overflow: hidden; }
body[data-page="garden"] .garden-scene { position: absolute; left: 50%; top: 0; width: 352px; height: 250px; margin-left: -176px; pointer-events: none; }
body[data-page="garden"] .garden-scene svg { display: block; width: 352px; height: 250px; }
body[data-page="garden"] .gd-ink { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="garden"] .gd-ink.thin { stroke-width: 2.3; }
/* 阳台上的植物：一层和画一样大的透明板（#gardenPlants），每种在自己的座位上（garden.js 的 GARDEN_SPOTS，按同一个比例：看得出高矮胖瘦）；
   后排（窗台上）先画、前排后画（前面的挡后面的）；没在种的半透明 */
body[data-page="garden"] .garden-plants { position: absolute; left: 50%; top: 0; width: 352px; height: 250px; margin-left: -176px; pointer-events: none; }
body[data-page="garden"] .gs-plant { position: absolute; z-index: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }   /* z-index 0：底下那圈光（::after，z -1）留在自己这一层，不掉到画后面去 */
body[data-page="garden"] .gs-plant svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; transition: opacity .3s, filter .3s; }
body[data-page="garden"] .gs-plant.is-zero svg { opacity: .36; filter: grayscale(.55); }
body[data-page="garden"] .gs-plant.wiggle svg { animation: gardenWiggle .75s ease; }
@keyframes gardenWiggle { 0%, 100% { transform: none; } 18% { transform: rotate(-7deg) scale(1.03, .97); } 40% { transform: rotate(6deg); } 62% { transform: rotate(-3.5deg); } 82% { transform: rotate(1.5deg); } }
/* 选中的那一种（pages：现在这一页；grid：翻开的那本）：盆底下一圈门色的光 */
body[data-page="garden"] .gs-plant::after { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -5px; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--room-deep) 70%, transparent), transparent); opacity: 0; transition: opacity .25s; }
body[data-page="garden"] .gs-plant.on::after { opacity: 1; }
body[data-page="garden"] .gs-plant:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; border-radius: 10px; }
/* 芜菁（间谍）：摸一下墨镜往下滑一点、偷看一眼 */
body[data-page="garden"] .gs-plant .spy-shades { transition: transform .25s ease; }
body[data-page="garden"] .gs-plant.wiggle .spy-shades { animation: gardenPeek 1.4s ease; }
@keyframes gardenPeek { 0%, 100% { transform: none; } 25%, 70% { transform: translateY(4.5px); } }
/* 木牌：挂在左上的墙上（小狗头顶上）；钉子和两根绳画在木牌里，荡的时候一起动 */
body[data-page="garden"] .garden-sign { position: absolute; left: calc(50% - 176px + 12px); top: 30px; width: 104px; padding: 6px 8px 7px; cursor: pointer;
  transform: rotate(-2deg); transform-origin: 50% -18px; -webkit-tap-highlight-color: transparent; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--hand); color: var(--text);
  background: #fff8ec; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 rgba(107,81,56,.14); }
body[data-page="garden"] .gs-hang { position: absolute; left: -4px; top: -22px; width: 112px; height: 22px; overflow: visible; pointer-events: none; }
body[data-page="garden"] .garden-sign b { font-size: 14.5px; letter-spacing: 1.5px; line-height: 1.3; white-space: nowrap; }
body[data-page="garden"] .garden-sign span { font-size: 12px; letter-spacing: .5px; color: var(--text-soft); line-height: 1.35; white-space: nowrap; }
body[data-page="garden"] .garden-sign span:empty { display: none; }
body[data-page="garden"] .garden-sign.swing { animation: gardenSwing 1.5s ease-out; }
@keyframes gardenSwing { 0%, 100% { transform: rotate(-2deg); } 14% { transform: rotate(-9deg); } 33% { transform: rotate(5deg); } 52% { transform: rotate(-5deg); } 72% { transform: rotate(1deg); } 88% { transform: rotate(-2.6deg); } }
/* 可以摸的小狗：透明按钮盖在画上 */
body[data-page="garden"] .garden-hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 40%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="garden"] .garden-hit:focus-visible, body[data-page="garden"] .garden-sign:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; }
body[data-page="garden"] .garden-hit-dog { left: calc(50% - 176px + 8px); top: 152px; width: 92px; height: 78px; }
/* 头上冒的一句话（和记账、基金那只小狗一样的气泡） */
body[data-page="garden"] .garden-say { position: absolute; z-index: 2; left: calc(50% - 176px + 13px); bottom: 96px; max-width: 128px; padding: 6px 10px 5px; white-space: pre-line;
  border-radius: 14px 14px 14px 4px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 6px 14px -8px rgba(107,81,56,.5);
  font: 400 12.5px/1.45 var(--hand); letter-spacing: .4px; color: var(--text); opacity: 0; pointer-events: none; transform-origin: 0 100%; }
body[data-page="garden"] .garden-say.show { animation: gardenSay 2.4s ease forwards; }
@keyframes gardenSay { 0% { opacity: 0; transform: scale(.6) translateY(6px); } 12% { opacity: 1; transform: scale(1.04); } 20% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes gardenSayFade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* 摸小狗：蹦一下、铅笔划两下、本子上的字描一遍 */
body[data-page="garden"] .gd-dog { transform-box: view-box; transform-origin: 54px 180px; }   /* 小狗自己的坐标（外面那层才往下挪 48） */
body[data-page="garden"] .gd-dog.write { animation: gardenHop .55s ease; }
@keyframes gardenHop { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.02, .98); } 58% { transform: scale(1.04, .95); } 78% { transform: scale(.99, 1.01); } }
body[data-page="garden"] .gd-pencil { transform-box: view-box; transform-origin: 84px 152px; }
body[data-page="garden"] .gd-dog.write .gd-pencil { animation: gardenScribble .9s ease .15s; }
@keyframes gardenScribble { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 2px) rotate(-6deg); } 40% { transform: translate(1px, -1px) rotate(4deg); } 60% { transform: translate(-3px, 2px) rotate(-6deg); } 80% { transform: translate(1px, 0) rotate(3deg); } }
body[data-page="garden"] .gd-scribble { stroke-dasharray: 40; stroke-dashoffset: 0; }
body[data-page="garden"] .gd-dog.write .gd-scribble { animation: gardenInk 1s ease .15s both; }
@keyframes gardenInk { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* ---- 底下：和记账、健康、基金同一套「说法」——卡片圆角 20、几乎看不见的一圈线、一层软影子；
        名字下面一笔门色笔刷；纸胶带；两个圆按钮夹着中间的字 ---- */
/* − ×N +（− 和 + 用线画，不靠字体）；还有没发出去的改动时数字是门色的，旁边一个「撤回」 */
body[data-page="garden"] .gd-count { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }
body[data-page="garden"] .gd-step { position: relative; width: 26px; height: 26px; flex-shrink: 0; margin: 0; padding: 0; border-radius: 50%; border: 1.3px solid rgba(107,81,56,.26);
  background: var(--card); color: transparent; font-size: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="garden"] .gd-step::before, body[data-page="garden"] .gd-step[data-step="1"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px;
  border-radius: 1px; background: var(--ink); }
body[data-page="garden"] .gd-step[data-step="1"]::after { transform: rotate(90deg); }
body[data-page="garden"] .gd-step:disabled { opacity: .3; cursor: default; }
body[data-page="garden"] .gd-step:active:not(:disabled) { transform: scale(.92); }
body[data-page="garden"] .gd-n { min-width: 2.1em; font: 700 16px/1 var(--hand); letter-spacing: .5px; color: var(--text); text-align: center; }
body[data-page="garden"] .gd-n.is-pending { color: var(--room-deep); }
body[data-page="garden"] .gd-n.bump { animation: gardenBump .35s ease; }
@keyframes gardenBump { 0%, 100% { transform: none; } 40% { transform: scale(1.3); } }
body[data-page="garden"] .gd-undo { margin: 0; padding: 4px 2px; border: 0; background: none; font: 400 12px/1 var(--hand); letter-spacing: .5px; color: var(--room-deep);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }

/* 小本子：点点纸（和备忘那本一样的纸）+ 顶上一截绿色纸胶带；写一句的框在最上面，写过的新的在上面 */
body[data-page="garden"] .gd-book { position: relative; margin: 16px 0 6px; padding: 14px 14px 10px; border-radius: 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--room) 55%, transparent) .9px, transparent 1.4px) 6px 4px / 14px 14px, #fffefa;
  border: 1.3px solid rgba(107,81,56,.12); box-shadow: var(--lift); }
body[data-page="garden"] .gd-book::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 80%, transparent) repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%); transform: rotate(-3deg); }
body[data-page="garden"] .gd-write { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0 2px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: #fffaf3; border: 1.3px solid rgba(107,81,56,.18); transition: border-color .2s, box-shadow .2s; }
body[data-page="garden"] .gd-write:focus-within { border-color: color-mix(in srgb, var(--room-deep) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--room) 35%, transparent); }
body[data-page="garden"] .gd-write textarea { flex: 1; min-width: 0; height: 1.6em; min-height: 1.6em; max-height: 9.6em; margin: 0; padding: 3px 0; border: 0; outline: 0; resize: none;
  background: transparent; font-size: 15px; line-height: 1.6; color: var(--text); font-family: inherit; }
body[data-page="garden"] .gd-write textarea::placeholder { font-family: var(--hand); letter-spacing: .5px; color: var(--text-mute); }
body[data-page="garden"] .gd-send { flex-shrink: 0; margin: 0; padding: 8px 12px 7px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--room);
  font: 700 13px/1 var(--hand); letter-spacing: 1px; color: var(--text); cursor: pointer; opacity: .45; transition: opacity .2s; }
body[data-page="garden"] .gd-write.has-text .gd-send { opacity: 1; box-shadow: 0 2px 0 rgba(107,81,56,.18); }
body[data-page="garden"] .gd-write.nudge { animation: gardenNudge .4s ease; }
@keyframes gardenNudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
body[data-page="garden"] .gd-hint { margin: 4px 4px 0; font: 400 12px/1.45 var(--hand); letter-spacing: .3px; color: #b3604f; }
body[data-page="garden"] .gd-hint:empty { display: none; }
body[data-page="garden"] .gd-notes { list-style: none; margin: 6px 0 0; padding: 0; }
body[data-page="garden"] .gd-note { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 9px 2px 8px; }
body[data-page="garden"] .gd-note + .gd-note { border-top: 1.5px dashed color-mix(in srgb, var(--room) 75%, transparent); }
body[data-page="garden"] .gd-note time { min-width: 2.6em; font: 700 12.5px/1.5 var(--hand); letter-spacing: .3px; color: var(--room-deep); white-space: nowrap; }
body[data-page="garden"] .gd-note p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
body[data-page="garden"] .gd-note small { display: inline-block; margin: 0 5px 0 0; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  background: color-mix(in srgb, var(--room-tint) 85%, transparent); font: 400 11px/1.4 var(--hand); letter-spacing: .5px; color: var(--text-soft); }
body[data-page="garden"] .gd-note.is-draft p { color: var(--text-soft); }
body[data-page="garden"] .gd-note .gd-undo-note { grid-column: 2; justify-self: start; margin-top: 2px; }
body[data-page="garden"] .gd-more { display: block; margin: 4px auto 2px; padding: 6px 10px; border: 0; background: none; font: 400 12.5px/1 var(--hand); letter-spacing: .5px;
  color: var(--text-soft); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
body[data-page="garden"] .gd-none { margin: 10px 4px 4px; font: 400 13px/1.55 var(--hand); letter-spacing: .5px; color: var(--text-mute); }

/* 一种一页：阳台上点哪一种（或左右滑、‹ ›），下面这张就是它的小本子；数量在名字下面；八种轮着（没在种的小圆点是空心的） */
body[data-page="garden"] .gd-page { position: relative; margin: 20px 0 12px; padding: 18px 14px 12px; border-radius: 20px; background: var(--card);
  border: 1.5px solid rgba(107,81,56,.12); box-shadow: var(--lift); touch-action: pan-y pinch-zoom; overflow-x: clip; overflow-y: visible;
  transition: transform .22s ease; }
body[data-page="garden"] .gd-page::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 80%, transparent) repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%); transform: rotate(-3deg); }
body[data-page="garden"] .gd-page.dragging { transition: none; }
body[data-page="garden"] .gd-page.slide-next { animation: gardenSlideNext .32s ease-out; }
body[data-page="garden"] .gd-page.slide-prev { animation: gardenSlidePrev .32s ease-out; }
@keyframes gardenSlideNext { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes gardenSlidePrev { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
body[data-page="garden"] .gd-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body[data-page="garden"] .gd-hop { width: 34px; height: 34px; flex-shrink: 0; margin: 0; padding: 0 0 2px; border-radius: 50%; border: 1.3px solid rgba(107,81,56,.22);
  background: var(--card); color: var(--ink); font: 400 19px/1 var(--hand); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="garden"] .gd-hop-sp { width: 34px; flex-shrink: 0; }
body[data-page="garden"] .gd-page-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--hand); }
body[data-page="garden"] .gd-page-title b { position: relative; z-index: 0; font-size: 18px; letter-spacing: 2px; color: var(--text); }
body[data-page="garden"] .gd-page-title b::after { content: ''; position: absolute; z-index: -1; left: -5px; right: -7px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 85%, transparent); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="garden"] .gd-dots { display: flex; gap: 5px; font-size: 11.5px; letter-spacing: 1px; color: var(--text-mute); }
body[data-page="garden"] .gd-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(107,81,56,.18); transition: background-color .2s; }
body[data-page="garden"] .gd-dots i.on { background: var(--room-deep); }
body[data-page="garden"] .gd-page-count { display: flex; justify-content: center; margin: 8px 0 0; }
body[data-page="garden"] .gd-page-count .gd-count { margin: 0; }
body[data-page="garden"] .gd-page .gd-book { margin: 10px -4px 0; box-shadow: none; }
body[data-page="garden"] .gd-page .gd-book::before { display: none; }
body[data-page="garden"] .gd-dots i.is-zero:not(.on) { background: none; box-shadow: inset 0 0 0 1.2px rgba(107,81,56,.28); }
body[data-page="garden"] .gd-page.is-zero .gd-page-title b { color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  body[data-page="garden"] .gd-write, body[data-page="garden"] .gd-page, body[data-page="garden"] .gd-dots i, body[data-page="garden"] .gs-plant svg, body[data-page="garden"] .gs-plant::after { transition: none; }
  body[data-page="garden"] .gd-page.slide-next, body[data-page="garden"] .gd-page.slide-prev, body[data-page="garden"] .gs-plant.wiggle svg, body[data-page="garden"] .gs-plant.wiggle .spy-shades, body[data-page="garden"] .garden-sign.swing,
  body[data-page="garden"] .gd-dog.write, body[data-page="garden"] .gd-dog.write .gd-pencil, body[data-page="garden"] .gd-dog.write .gd-scribble, body[data-page="garden"] .gd-n.bump, body[data-page="garden"] .gd-write.nudge { animation: none; }
  body[data-page="garden"] .garden-say.show { animation: gardenSayFade 2.4s linear forwards; }
}

/* ================= 厨房：做饭的小狗 + 一直开着的冰箱 + 菜谱本 + 调料架（27 号美化 H10 第七间，2026-09-30）================= */
/* 门色杏子橘（pagebar.css：--room #f3ae7b / --room-tint #fde6d2）。原来「我家的材料」「食谱」两张大白卡、SVG 冰箱、添加菜谱的大表单都换掉了；
   css/recipes.css 还 link 着：放进冰箱 / 改数量的弹窗、吃掉了！的啃咬动画（bite-*）都在那里，这里只把弹窗换成家里的样子。
   澄澄 9/30：厨房更多是小狗看（帮她想吃什么）；调料只删不加是故意的；叶子菜来不及记，只有肉肉进冷冻——冷冻那一层做大、一眼看全 */
body[data-page="recipes"] { --room-deep: #c0703d; --ice: #eaf4f8; --ice-deep: #9dc0d8; }
body[data-page="recipes"] .content { max-width: 620px; padding: 24px 16px 72px; }
body[data-page="recipes"] .kr-retry { margin-top: 8px; }

/* ---- 顶上的小角落：352×250 的画固定居中（窄屏两边裁一点，不出横向滚动）；木牌、气泡是叠在画上的 HTML ---- */
body[data-page="recipes"] .kitchen-corner { position: relative; height: 250px; margin: 0 0 18px; overflow: hidden; }
body[data-page="recipes"] .kitchen-scene { position: absolute; left: 50%; top: 0; width: 352px; height: 250px; margin-left: -176px; pointer-events: none; }
body[data-page="recipes"] .kitchen-scene svg { display: block; width: 352px; height: 250px; }
body[data-page="recipes"] .kc-ink { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="recipes"] .kc-ink.thin { stroke-width: 2.3; }
/* 木牌（9/30 澄澄：「那块板子想要再设计一下」）：第二轮三个候选——v-chalk 小黑板 / v-board 砧板 / v-noren 暖帘；字都是 HTML、Home Hand */
body[data-page="recipes"] .kitchen-sign { position: absolute; z-index: 1; left: calc(50% - 176px + 12px); top: 30px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; font-family: var(--hand); color: var(--text); }
body[data-page="recipes"] .kitchen-sign b { font-size: 14.5px; letter-spacing: 1.5px; line-height: 1.3; white-space: nowrap; }
body[data-page="recipes"] .kitchen-sign span { font-size: 12px; letter-spacing: .5px; line-height: 1.35; white-space: nowrap; }
body[data-page="recipes"] .kitchen-sign span:empty { display: none; }
/* ① 小黑板：木框 + 墨绿的板面，粉笔字（白的 + 黄的）；底下一条放粉笔的小槽（一根白的、一根粉的）；右下角粉笔画一碗热饭；钉子 + 绳挂着 */
body[data-page="recipes"] .kitchen-sign.v-chalk { top: 32px; min-width: 112px; padding: 7px 10px 11px; transform: rotate(-2deg); transform-origin: 50% -20px; border-radius: 5px;
  background: radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255,255,255,.1), transparent 70%), radial-gradient(ellipse 50% 40% at 80% 85%, rgba(255,255,255,.07), transparent 70%), #56695c;
  border: 5px solid #dcb07a; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1.6px rgba(107,81,56,.85), 0 5px 0 2px rgba(107,81,56,.13); }
body[data-page="recipes"] .v-chalk b { color: #fbf8ef; text-shadow: 0 0 1px rgba(255,255,255,.55), 0 0 3px rgba(255,255,255,.14); }
body[data-page="recipes"] .v-chalk span { color: #f3dc98; text-shadow: 0 0 1px rgba(243,220,152,.5); }
body[data-page="recipes"] .v-chalk b::after { content: ''; display: block; height: 0; margin: 1px 4px 0; border-top: 1.6px dashed rgba(251,248,239,.55); }
body[data-page="recipes"] .ks-hang { position: absolute; left: 50%; top: -27px; width: 112px; height: 22px; margin-left: -56px; overflow: visible; pointer-events: none; }
body[data-page="recipes"] .ks-doodle { position: absolute; right: 3px; bottom: 2px; width: 19px; height: 16px; opacity: .8; transform: rotate(-6deg); }
body[data-page="recipes"] .ks-tray { position: absolute; left: 6px; right: 6px; bottom: -13px; height: 7px; border-radius: 0 0 4px 4px; background: #dcb07a; border: 2px solid var(--ink); }
body[data-page="recipes"] .ks-tray::before, body[data-page="recipes"] .ks-tray::after { content: ''; position: absolute; top: -6px; height: 5px; border-radius: 3px; border: 1.3px solid var(--ink); }
body[data-page="recipes"] .ks-tray::before { left: 12px; width: 17px; background: #fffaf1; transform: rotate(-4deg); }
body[data-page="recipes"] .ks-tray::after { right: 16px; width: 12px; background: #f6b8b0; transform: rotate(5deg); }
/* ② 砧板：带把手的木砧板（svg），把手上的小孔挂在钉子上；字像烙在木头上（焦糖色） */
body[data-page="recipes"] .kitchen-sign.v-board { top: 14px; width: 118px; height: 90px; padding: 36px 0 0; box-sizing: border-box; transform: rotate(-3deg); transform-origin: 50% 12px; }
body[data-page="recipes"] .v-board .ks-shape { position: absolute; z-index: -1; left: 0; top: 0; width: 118px; height: 90px; overflow: visible;
  filter: drop-shadow(0 3px 0 rgba(107,81,56,.13)); }
body[data-page="recipes"] .v-board b { color: #8b5530; }
body[data-page="recipes"] .v-board span { color: #a0714a; }
/* ③ 暖帘：一根木杆上挂一块门色的暖帘（上半截写字，下半截分成三片，中间那片一个小爪印）；碰一下下摆飘一飘 */
body[data-page="recipes"] .kitchen-sign.v-noren { top: 22px; width: 118px; height: 87px; padding: 15px 0 0; box-sizing: border-box; transform-origin: 50% 0; }
body[data-page="recipes"] .v-noren .ks-shape { position: absolute; z-index: -1; left: 0; top: 0; width: 118px; height: 87px; overflow: visible;
  filter: drop-shadow(0 3px 0 rgba(107,81,56,.12)); }
body[data-page="recipes"] .v-noren .ks-cloth { transform-box: view-box; transform-origin: 68px 10px; }
body[data-page="recipes"] .v-noren b { color: #fffaf1; letter-spacing: 2px; }
body[data-page="recipes"] .v-noren span { color: #fff0dc; font-size: 11.5px; }
body[data-page="recipes"] .kitchen-sign.swing { animation: kitchenSwing 1.5s ease-out; }
body[data-page="recipes"] .kitchen-sign.v-board.swing { animation-name: kitchenSwingBoard; }
body[data-page="recipes"] .kitchen-sign.v-noren.swing { animation: none; }
body[data-page="recipes"] .kitchen-sign.v-noren.swing .ks-cloth { animation: kitchenFlutter 1.3s ease-out; }
@keyframes kitchenSwingBoard { 0%, 100% { transform: rotate(-3deg); } 14% { transform: rotate(-10deg); } 33% { transform: rotate(4deg); } 52% { transform: rotate(-6deg); } 72% { transform: rotate(0deg); } 88% { transform: rotate(-3.6deg); } }
@keyframes kitchenFlutter { 0%, 100% { transform: none; } 20% { transform: skewX(-6deg); } 45% { transform: skewX(4deg); } 70% { transform: skewX(-2deg); } 85% { transform: skewX(1deg); } }
@keyframes kitchenSwing { 0%, 100% { transform: rotate(-2deg); } 14% { transform: rotate(-9deg); } 33% { transform: rotate(5deg); } 52% { transform: rotate(-5deg); } 72% { transform: rotate(1deg); } 88% { transform: rotate(-2.6deg); } }
body[data-page="recipes"] .kitchen-hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 40%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .kitchen-hit:focus-visible, body[data-page="recipes"] .kitchen-sign:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; }
body[data-page="recipes"] .kitchen-hit-dog { left: calc(50% - 176px + 8px); top: 150px; width: 100px; height: 80px; }
/* 头上冒的一句话（和阳台、记账、基金那只小狗一样的气泡） */
body[data-page="recipes"] .kitchen-say { position: absolute; z-index: 2; left: calc(50% - 176px + 13px); bottom: 100px; max-width: 176px; padding: 6px 10px 5px; white-space: pre-line;
  border-radius: 14px 14px 14px 4px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 6px 14px -8px rgba(107,81,56,.5);
  font: 400 12.5px/1.45 var(--hand); letter-spacing: .4px; color: var(--text); opacity: 0; pointer-events: none; transform-origin: 0 100%; }
body[data-page="recipes"] .kitchen-say.show { animation: kitchenSay 2.4s ease forwards; }
@keyframes kitchenSay { 0% { opacity: 0; transform: scale(.6) translateY(6px); } 12% { opacity: 1; transform: scale(1.04); } 20% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
body[data-page="recipes"] .kitchen-say .ks-dish { white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif; font-weight: 700; letter-spacing: 0; }
@keyframes kitchenSayFade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* 三个场景（kitchen_art.scene_all 的三层 .kc-scene.s-*）：recipes.js 按时间写 data-scene，只显示那一层（9/30 澄澄：三个都要，跟着时间换） */
body[data-page="recipes"] .kitchen-corner .kc-scene { display: none; }
body[data-page="recipes"] .kitchen-corner[data-scene="stir"] .s-stir, body[data-page="recipes"] .kitchen-corner[data-scene="think"] .s-think,
body[data-page="recipes"] .kitchen-corner[data-scene="eat"] .s-eat { display: inline; }
/* 摸一摸（.kitchen-corner 加 act + act-场景名）：① 勺子搅一搅 ② 想法泡泡弹一弹 ③ 筷子往嘴边扒一口；三个都蹦一下、锅里冒一颗心 */
body[data-page="recipes"] .kc-ladle { transform-box: view-box; transform-origin: 92px 176px; }
body[data-page="recipes"] .kitchen-corner.act-stir .s-stir .kc-ladle { animation: kitchenStir 1s ease-in-out; }
@keyframes kitchenStir { 0%, 100% { transform: none; } 25% { transform: rotate(5deg) translateX(2px); } 50% { transform: rotate(-3deg); } 75% { transform: rotate(4deg) translateX(1px); } }
body[data-page="recipes"] .kc-think { transform-box: fill-box; transform-origin: 0% 100%; }
body[data-page="recipes"] .kitchen-corner.act-think .s-think .kc-think { animation: kitchenThink .6s ease-out; }
@keyframes kitchenThink { 0%, 100% { transform: none; } 35% { transform: scale(1.12); } 65% { transform: scale(.96); } }
body[data-page="recipes"] .kc-chop { transform-box: view-box; transform-origin: 76px 170px; }
body[data-page="recipes"] .kitchen-corner.act-eat .s-eat .kc-chop { animation: kitchenChop .8s ease-in-out; }
@keyframes kitchenChop { 0%, 100% { transform: none; } 30%, 55% { transform: rotate(-38deg) translate(-3px, 2px); } }
/* 锅里的热气：三缕慢慢往上飘；摸小狗：蹦一下 + 冒一颗心 */
body[data-page="recipes"] .kc-steam { stroke-dasharray: 6 5; animation: kitchenSteam 2.6s linear infinite; }
body[data-page="recipes"] .kc-steam.s1 { animation-delay: -.9s; }
body[data-page="recipes"] .kc-steam.s2 { animation-delay: -1.7s; }
@keyframes kitchenSteam { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 22; } }
body[data-page="recipes"] .kc-heart { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
body[data-page="recipes"] .kitchen-corner.act .kc-heart { animation: kitchenHeart 1.6s ease-out; }
@keyframes kitchenHeart { 0% { opacity: 0; transform: translateY(8px) scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-26px) scale(.9); } }
body[data-page="recipes"] .kc-dog { transform-box: view-box; transform-origin: 54px 180px; }
body[data-page="recipes"] .kitchen-corner.act .kc-dog { animation: kitchenHop .55s ease; }
@keyframes kitchenHop { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.02, .98); } 58% { transform: scale(1.04, .95); } 78% { transform: scale(.99, 1.01); } }

/* ---- 冰箱：奶油色、圆顶、深棕线的一台，门一直开着：上面冷藏（玻璃隔板 + 蛋盒），下面冷冻（一格一个保鲜袋）；顶上两块冰箱贴、底下两只小脚 ---- */
body[data-page="recipes"] .kf-fridge { position: relative; margin: 8px 2px 34px; padding: 14px 11px 12px; border-radius: 34px 34px 18px 18px;
  background: #fffaf1; border: 2.4px solid var(--ink); box-shadow: 0 5px 0 rgba(107,81,56,.12), var(--lift); }
body[data-page="recipes"] .kf-magnet { position: absolute; z-index: 2; top: -9px; width: 30px; height: 30px; background: center / contain no-repeat; }
body[data-page="recipes"] .kf-magnet.m1 { left: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23f2a8a0' stroke='%236b5138' stroke-width='2'/%3E%3Cg fill='%23fffaf1'%3E%3Cellipse cx='16' cy='19' rx='5' ry='4'/%3E%3Ccircle cx='10.6' cy='13.6' r='2'/%3E%3Ccircle cx='14.2' cy='11' r='2'/%3E%3Ccircle cx='17.8' cy='11' r='2'/%3E%3Ccircle cx='21.4' cy='13.6' r='2'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-12deg); }
body[data-page="recipes"] .kf-magnet.m2 { right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 27 C 14 25.4, 4 19.5, 4 12 C 4 8, 7 5.4, 10.4 5.4 C 12.9 5.4, 14.9 6.8, 16 8.9 C 17.1 6.8, 19.1 5.4, 21.6 5.4 C 25 5.4, 28 8, 28 12 C 28 19.5, 18 25.4, 16 27 Z' fill='%23aac6a1' stroke='%236b5138' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 11 q 1 -3 4 -3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E"); transform: rotate(10deg); }
body[data-page="recipes"] .kf-foot { position: absolute; bottom: -12px; width: 26px; height: 11px; border: 2.2px solid var(--ink); border-top: 0; border-radius: 0 0 7px 7px; background: #e8dccb; }
body[data-page="recipes"] .kf-foot.l { left: 30px; }
body[data-page="recipes"] .kf-foot.r { right: 30px; }
body[data-page="recipes"] .kf-room { position: relative; padding: 30px 8px 12px; border: 1.8px solid rgba(107,81,56,.32);
  box-shadow: inset 0 2px 8px rgba(107,81,56,.07); }
body[data-page="recipes"] .kf-top { border-radius: 24px 24px 10px 10px; background: linear-gradient(#f0f7f8, #f8fbfb); }
body[data-page="recipes"] .kf-bottom { margin-top: 12px; border-radius: 10px 10px 14px 14px;
  background: radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.6px) 4px 6px / 22px 22px, linear-gradient(var(--ice), #f3f9fb); }
body[data-page="recipes"] .kf-bottom::after { content: ''; position: absolute; right: 10px; top: 8px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23b7d3e6' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 3 V21 M4.2 7.5 L19.8 16.5 M4.2 16.5 L19.8 7.5'/%3E%3Cpath d='M9.5 4.5 L12 7 L14.5 4.5 M9.5 19.5 L12 17 L14.5 19.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
/* 这一层叫什么：一枚小标签（冷藏 3 样 / 冷冻 15 样） */
body[data-page="recipes"] .kf-label { position: absolute; left: 12px; top: 7px; margin: 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--hand); }
body[data-page="recipes"] .kf-label b { position: relative; z-index: 0; font-size: 15px; letter-spacing: 2px; color: var(--text); }
body[data-page="recipes"] .kf-label b::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -5px; bottom: 0; height: .55em;
  background: color-mix(in srgb, var(--room) 70%, transparent); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="recipes"] .kf-bottom .kf-label b::after { background: color-mix(in srgb, var(--ice-deep) 60%, transparent); }
body[data-page="recipes"] .kf-label span { font-size: 12px; letter-spacing: .5px; color: var(--text-soft); }
/* 冷藏：东西站在一块玻璃隔板上 */
body[data-page="recipes"] .kf-shelf { display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 0 2px 6px; border-bottom: 4px solid #d7e8ee;
  box-shadow: 0 1.5px 0 rgba(107,81,56,.18); border-radius: 0 0 2px 2px; }
/* 冷冻：一格一个保鲜袋，四个一排 */
body[data-page="recipes"] .kf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; }
body[data-page="recipes"] .kf-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 2px 0 0;
  border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .kf-shelf .kf-item { width: 68px; }
body[data-page="recipes"] .kf-art { position: relative; display: block; width: 64px; height: 57px; transition: transform .15s; }
body[data-page="recipes"] .kf-fr .kf-art { width: 52px; height: 52px; }
body[data-page="recipes"] .kf-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
body[data-page="recipes"] .kf-item:active .kf-art { transform: scale(.93); }
body[data-page="recipes"] .kf-item:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; border-radius: 10px; }
/* 袋子上贴的纸胶带：哪天放进去的（数字是 Home Hand） */
body[data-page="recipes"] .kf-date { position: absolute; left: 5px; bottom: 5px; padding: 1px 5px 0; font: 700 10.5px/1.35 var(--hand); font-style: normal; letter-spacing: .3px; color: #7a5a3a;
  background: color-mix(in srgb, #f7dfa8 88%, transparent) repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 3px, transparent 3px 7px);
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%); transform: rotate(-5deg); }
body[data-page="recipes"] .kf-fr .kf-date { left: auto; right: -6px; bottom: 0; }
body[data-page="recipes"] .kf-name { max-width: 100%; font-size: 12px; line-height: 1.3; text-align: center; color: var(--text); word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-page="recipes"] .kf-qty { max-width: 100%; font-size: 10.5px; line-height: 1.2; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="recipes"] .kf-note { display: none; }
body[data-page="recipes"] .kf-item.is-out .kf-art { opacity: .34; filter: grayscale(.55); }
body[data-page="recipes"] .kf-item.is-out .kf-name { color: var(--text-mute); }
/* 最后一格「+」：虚线框，放进这一层 */
body[data-page="recipes"] .kf-add .kf-art { border: 1.8px dashed rgba(107,81,56,.3); border-radius: 12px; background: rgba(255,255,255,.55); }
body[data-page="recipes"] .kf-fr.kf-add .kf-art, body[data-page="recipes"] .kf-shelf .kf-add .kf-art { width: 52px; height: 52px; }
body[data-page="recipes"] .kf-plus { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
body[data-page="recipes"] .kf-plus::before, body[data-page="recipes"] .kf-plus::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2.2px; border-radius: 2px; background: rgba(107,81,56,.45); }
body[data-page="recipes"] .kf-plus::after { transform: rotate(90deg); }
body[data-page="recipes"] .kf-add .kf-name { font-family: var(--hand); color: var(--text-mute); letter-spacing: .5px; }
/* 蛋盒：5×2 个窝 + 右边「6/10」和两个按钮 */
body[data-page="recipes"] .kf-eggs { display: flex; align-items: center; gap: 12px; margin: 12px 2px 2px; }
body[data-page="recipes"] .kf-carton { flex: 1 1 auto; min-width: 0; max-width: 200px; }
body[data-page="recipes"] .kf-carton svg { display: block; width: 100%; height: auto; }
body[data-page="recipes"] .kf-egg-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
body[data-page="recipes"] .kf-egg-n { font: 700 22px/1 var(--hand); color: var(--text); text-align: center; letter-spacing: 1px; }
body[data-page="recipes"] .kf-egg-n small { font-size: 13px; color: var(--text-soft); }
body[data-page="recipes"] .kf-egg-n.is-empty { color: #b3604f; }
body[data-page="recipes"] .kf-egg-btn { padding: 6px 12px 5px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--room); color: var(--text);
  font: 700 12.5px/1.2 var(--hand); letter-spacing: .5px; box-shadow: 0 2px 0 rgba(107,81,56,.18); }
body[data-page="recipes"] .kf-egg-btn.fill { background: #cfe3bf; }
body[data-page="recipes"] .kf-egg-btn:disabled { opacity: .38; box-shadow: none; cursor: default; }
/* 🎫#71 蛋的小动画（fridge.js fridgeEggsHTML）：--d 是负的「已经过了多久」，重画后接着播。svg overflow 放开：第一排的蛋从窝上方落下来、壳歪开时不被切掉 */
body[data-page="recipes"] .kf-carton svg { overflow: visible; }
body[data-page="recipes"] .kf-egg-g.is-new { animation: kfEggIn 380ms cubic-bezier(.3,1.25,.5,1) var(--d, 0ms) both; }
@keyframes kfEggIn { 0% { opacity: 0; transform: translateY(-11px); } 35% { opacity: 1; transform: translateY(-11px); } 100% { opacity: 1; transform: none; } }
body[data-page="recipes"] .kf-crack, body[data-page="recipes"] .kf-crack-top, body[data-page="recipes"] .kf-crack-yolk { transform-box: view-box; }
body[data-page="recipes"] .kf-crack { animation: kfCrackWob 560ms linear var(--d, 0ms) both; }
body[data-page="recipes"] .kf-crack-top { animation: kfCrackTop 560ms ease-out var(--d, 0ms) both; }
body[data-page="recipes"] .kf-crack-yolk { animation: kfCrackYolk 560ms ease-out var(--d, 0ms) both; }
@keyframes kfCrackWob { 0% { transform: rotate(0); opacity: 1; } 9% { transform: rotate(-7deg); } 18% { transform: rotate(6deg); } 27% { transform: rotate(-3deg); } 34% { transform: rotate(0); } 78% { opacity: 1; } 100% { transform: rotate(0); opacity: 0; } }
@keyframes kfCrackTop { 0%, 34% { transform: none; } 60%, 100% { transform: translate(-2px, -4px) rotate(-24deg); } }
@keyframes kfCrackYolk { 0%, 34% { transform: translateY(5px) scale(.7); opacity: 0; } 38% { opacity: 1; } 52% { transform: translateY(-1px) scale(1.1, .94); } 62% { transform: scale(.96, 1.05); } 70%, 100% { transform: none; } }   /* 从壳里往上冒、ぷるん一下 */
@media (prefers-reduced-motion: reduce) {
  body[data-page="recipes"] .kf-crack { display: none; }
  body[data-page="recipes"] .kf-egg-g.is-new { animation: none !important; }
}

/* ---- 菜谱本：一道一页（‹ › 或左右滑），卡片圆角 20 + 纸胶带；菜名下面一笔门色笔刷；食材是一颗颗小标签，步骤带圆圈编号，经验备注是一张小便签 ---- */
body[data-page="recipes"] .kitchen-book-wrap { margin: 0 0 22px; }
body[data-page="recipes"] .kr-page { position: relative; margin: 18px 0 12px; padding: 18px 14px 12px; border-radius: 20px; background: var(--card);
  border: 1.5px solid rgba(107,81,56,.12); box-shadow: var(--lift); touch-action: pan-y pinch-zoom; overflow-x: clip; }
body[data-page="recipes"] .kr-page::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 80%, transparent) repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%); transform: rotate(-3deg); }
body[data-page="recipes"] .kr-page.slide-next { animation: kitchenSlideNext .32s ease-out; }
body[data-page="recipes"] .kr-page.slide-prev { animation: kitchenSlidePrev .32s ease-out; }
@keyframes kitchenSlideNext { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes kitchenSlidePrev { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
body[data-page="recipes"] .kr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body[data-page="recipes"] .kr-hop { width: 34px; height: 34px; flex-shrink: 0; margin: 0; padding: 0 0 2px; border-radius: 50%; border: 1.3px solid rgba(107,81,56,.22);
  background: var(--card); color: var(--ink); font: 400 19px/1 var(--hand); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .kr-hop-sp { width: 34px; flex-shrink: 0; }
body[data-page="recipes"] .kr-name { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 18px; line-height: 1.4; }
body[data-page="recipes"] .kr-name b { position: relative; z-index: 0; letter-spacing: 1px; color: var(--text); word-break: break-word; }
body[data-page="recipes"] .kr-name b::after { content: ''; position: absolute; z-index: -1; left: -5px; right: -7px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 70%, transparent); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="recipes"] .kr-dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0 0; }
body[data-page="recipes"] .kr-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(107,81,56,.18); }
body[data-page="recipes"] .kr-dots i.on { background: var(--room-deep); }
body[data-page="recipes"] .kr-meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 8px 0 2px; min-height: 18px; }
body[data-page="recipes"] .kr-stars { display: inline-flex; gap: 1px; }
body[data-page="recipes"] .kr-star { width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 L 14.6 8.6 L 20.5 9.4 L 16.2 13.5 L 17.3 19.4 L 12 16.6 L 6.7 19.4 L 7.8 13.5 L 3.5 9.4 L 9.4 8.6 Z' fill='%23fffaf3' stroke='%23c9b8a6' stroke-width='1.4' stroke-linejoin='round' stroke-dasharray='2.2 2'/%3E%3C/svg%3E") center / contain no-repeat; }
body[data-page="recipes"] .kr-star.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 L 14.6 8.6 L 20.5 9.4 L 16.2 13.5 L 17.3 19.4 L 12 16.6 L 6.7 19.4 L 7.8 13.5 L 3.5 9.4 L 9.4 8.6 Z' fill='%23f3ae7b' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-page="recipes"] .kr-meta time { font: 400 12px/1 var(--hand); letter-spacing: .5px; color: var(--text-mute); }
body[data-page="recipes"] .kr-sec { margin: 14px 2px 0; }
body[data-page="recipes"] .kr-sec h4 { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; font: 700 13.5px/1.2 var(--hand); letter-spacing: 1.5px; color: var(--text-soft); }
body[data-page="recipes"] .kr-ico { width: 20px; height: 20px; background: center / contain no-repeat; }
body[data-page="recipes"] .kr-ico.basket { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10 L 20 10 L 18 20 C 17.7 21, 17 21.5, 16 21.5 L 8 21.5 C 7 21.5, 6.3 21, 6 20 Z' fill='%23f3d9b1' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M8 10 C 8 4, 16 4, 16 10' fill='none' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9 14 L 9.5 18 M12 14 L 12 18 M15 14 L 14.5 18' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
body[data-page="recipes"] .kr-ico.pan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 L 17 11 C 17 17, 14 19, 10 19 C 6 19, 3 17, 3 11 Z' fill='%23f0a36f' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M17 12.5 L 22 11' fill='none' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7 8 q -1 -2 0 -4 M10.5 8 q -1 -2 0 -4' fill='none' stroke='%23c9b8a6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
body[data-page="recipes"] .kr-ico.bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 C 7.5 3, 5.5 6.5, 6.5 10 C 7.2 12.4, 9 13.4, 9 16 L 15 16 C 15 13.4, 16.8 12.4, 17.5 10 C 18.5 6.5, 16.5 3, 12 3 Z' fill='%23f6d98a' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9.5 18.5 L 14.5 18.5 M10.5 21 L 13.5 21' fill='none' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
body[data-page="recipes"] .kr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page="recipes"] .kr-chips span { padding: 4px 10px 3px; border-radius: 999px; background: color-mix(in srgb, var(--room-tint) 85%, #fff);
  border: 1.3px solid color-mix(in srgb, var(--room) 55%, transparent); font-size: 13.5px; line-height: 1.4; color: var(--text); }
body[data-page="recipes"] .kr-text { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; }
body[data-page="recipes"] .kr-steps { list-style: none; margin: 0; padding: 0; counter-reset: kr; }
body[data-page="recipes"] .kr-steps li { position: relative; counter-increment: kr; padding: 4px 0 6px 32px; font-size: 14.5px; line-height: 1.7; color: var(--text); }
body[data-page="recipes"] .kr-steps li + li { border-top: 1.5px dashed color-mix(in srgb, var(--room) 55%, transparent); padding-top: 7px; }
body[data-page="recipes"] .kr-steps li::before { content: counter(kr); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--room); border: 1.4px solid var(--ink); font: 700 12.5px/21px var(--hand); text-align: center; color: var(--text); }
body[data-page="recipes"] .kr-steps li + li::before { top: 8px; }
body[data-page="recipes"] .kr-memo { position: relative; margin-top: 16px; padding: 12px 12px 10px; border-radius: 4px 14px 14px 14px; background: #fff6de;
  box-shadow: 0 1px 0 rgba(107,81,56,.1), 0 8px 16px -12px rgba(107,81,56,.4); transform: rotate(-.6deg); }
body[data-page="recipes"] .kr-memo h4 { margin-bottom: 5px; }
body[data-page="recipes"] .kr-tools { display: flex; justify-content: flex-end; gap: 14px; margin: 12px 2px 0; }
body[data-page="recipes"] .kr-tool { margin: 0; padding: 4px 2px; border: 0; background: none; font: 400 12.5px/1 var(--hand); letter-spacing: .5px; color: var(--text-soft);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
body[data-page="recipes"] .kr-tool.armed { color: #b3604f; font-weight: 700; }
body[data-page="recipes"] .kr-none { margin: 14px 0 8px; text-align: center; font: 400 14px/1.8 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="recipes"] .kr-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; padding: 11px 0 10px; border-radius: 16px;
  border: 1.8px dashed color-mix(in srgb, var(--room-deep) 45%, transparent); background: color-mix(in srgb, var(--room-tint) 55%, transparent);
  font: 700 14px/1 var(--hand); letter-spacing: 2px; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .kr-pen { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 L 6 14.5 L 15.5 5 C 16.3 4.2, 17.6 4.2, 18.4 5 L 19 5.6 C 19.8 6.4, 19.8 7.7, 19 8.5 L 9.5 18 Z' fill='%23f5cf62' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M14 6.5 L 17.5 10' fill='none' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5 19 L 6 14.5 L 9.5 18 Z' fill='%23f6e3c3' stroke='%236b5138' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---- 调料架：三层木板（基础调味 / 辣的香的 / 粉类），瓶瓶罐罐站成一排；点一下瓶子冒「用完了」，按了 2.4 秒以内能撤回（只删不加，澄澄 9/30） ---- */
body[data-page="recipes"] .ks-rack { position: relative; padding: 14px 12px 6px; border-radius: 20px; background: var(--card); border: 1.5px solid rgba(107,81,56,.12); box-shadow: var(--lift); }
body[data-page="recipes"] .ks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 4px; font-family: var(--hand); }
body[data-page="recipes"] .ks-head b { position: relative; z-index: 0; font-size: 16px; letter-spacing: 2px; color: var(--text); }
body[data-page="recipes"] .ks-head b::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -1px; height: .6em;
  background: color-mix(in srgb, var(--room) 70%, transparent); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="recipes"] .ks-head span { font-size: 12px; letter-spacing: .5px; color: var(--text-mute); }
body[data-page="recipes"] .ks-tier { margin-top: 10px; }
body[data-page="recipes"] .ks-tag { display: inline-block; margin: 0 0 2px 2px; padding: 2px 8px 1px; border-radius: 4px; background: #f1ddbd; border: 1.3px solid rgba(107,81,56,.35);
  font: 700 11.5px/1.4 var(--hand); letter-spacing: 1px; color: var(--text-soft); transform: rotate(-1.5deg); }
/* 一排一块木板：每一排高 92px，背景每 92px 画一块板（换行的第二排也站在自己的板上） */
body[data-page="recipes"] .ks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-rows: 92px; column-gap: 2px;
  background: linear-gradient(transparent 58px, #e8c9a0 58px, #e8c9a0 66px, rgba(107,81,56,.18) 66px, rgba(107,81,56,.18) 67.5px, transparent 67.5px) 0 0 / 100% 92px; }
body[data-page="recipes"] .ks-slot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
body[data-page="recipes"] .ks-jar { position: relative; display: block; width: 44px; height: 56px; margin: 2px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%; transition: transform .2s, opacity .3s; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .ks-jar svg { display: block; width: 100%; height: 100%; }
body[data-page="recipes"] .ks-jar:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 1px; border-radius: 8px; }
body[data-page="recipes"] .ks-name { max-width: 100%; margin-top: 9px; padding: 0 1px; font-size: 11.5px; line-height: 1.25; text-align: center; color: var(--text); word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 用完了的（status: needed）：半透明、颜色去掉一半（和阳台没在种的一样）；名字淡一点。9/30 澄澄：「叉掉的已经没有了的也希望是透明」 */
body[data-page="recipes"] .ks-slot.is-out .ks-jar { opacity: .34; filter: grayscale(.55); }
body[data-page="recipes"] .ks-slot.is-out .ks-name { color: var(--text-mute); }
/* 点一下：瓶子歪一歪，头上冒一个小气泡（用完了 / 买回来了）；按了以后 2.4 秒里气泡变「撤回」 */
body[data-page="recipes"] .ks-pop { position: absolute; z-index: 3; left: 50%; top: -20px; transform: translateX(-50%); margin: 0; padding: 4px 9px 3px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: var(--room); font: 700 12px/1.2 var(--hand); letter-spacing: .5px; color: var(--text); white-space: nowrap;
  box-shadow: 0 2px 0 rgba(107,81,56,.2); cursor: pointer; display: none; }
body[data-page="recipes"] .ks-slot.is-out .ks-pop { background: #cfe3bf; }
body[data-page="recipes"] .ks-pop.undo { background: var(--card) !important; font-weight: 400; text-decoration: underline dotted; text-underline-offset: 3px; }
body[data-page="recipes"] .ks-slot.open .ks-pop, body[data-page="recipes"] .ks-slot.pend .ks-pop { display: block; animation: kitchenPop .22s ease-out; }
body[data-page="recipes"] .ks-slot.open .ks-jar { transform: rotate(-8deg); }
@keyframes kitchenPop { from { opacity: 0; transform: translate(-50%, 6px) scale(.7); } to { opacity: 1; transform: translateX(-50%); } }
body[data-page="recipes"] .ks-none { margin: 12px 4px 14px; font: 400 13px/1.6 var(--hand); letter-spacing: .5px; color: var(--text-mute); }

/* ---- 弹窗：写一道新菜 / 改一改（和留言的弹窗同一张信纸）；评分是五颗可以点的星（点同一颗 = 不评分） ---- */
body[data-page="recipes"] .kr-modal .input, body[data-page="recipes"] .kr-modal .textarea { display: block; width: 100%; margin: 0 0 10px; box-sizing: border-box; font-size: 15px; }
body[data-page="recipes"] .kr-modal .textarea { min-height: 0; line-height: 1.6; }
body[data-page="recipes"] .kr-rate-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 2px 0; font: 400 13px/1 var(--hand); letter-spacing: 1px; color: var(--text-soft); }
body[data-page="recipes"] .kr-rate-row > span { margin-right: 4px; }
body[data-page="recipes"] .kr-rate { width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 L 14.6 8.6 L 20.5 9.4 L 16.2 13.5 L 17.3 19.4 L 12 16.6 L 6.7 19.4 L 7.8 13.5 L 3.5 9.4 L 9.4 8.6 Z' fill='%23fffaf3' stroke='%23c9b8a6' stroke-width='1.4' stroke-linejoin='round' stroke-dasharray='2.2 2'/%3E%3C/svg%3E") center / 24px no-repeat; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="recipes"] .kr-rate.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 L 14.6 8.6 L 20.5 9.4 L 16.2 13.5 L 17.3 19.4 L 12 16.6 L 6.7 19.4 L 7.8 13.5 L 3.5 9.4 L 9.4 8.6 Z' fill='%23f3ae7b' stroke='%236b5138' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body[data-page="recipes"] .kr-rate-row small { flex-basis: 100%; margin-top: 4px; font-size: 11.5px; color: var(--text-mute); letter-spacing: .5px; }
body[data-page="recipes"] .kr-hint { margin: 8px 2px 0; font: 400 12.5px/1.45 var(--hand); letter-spacing: .3px; color: #b3604f; }
body[data-page="recipes"] .kr-hint:empty { display: none; }
/* 冰箱的两个小弹窗（fridge.js：放进冰箱、点开一样东西）：换成家里的信纸；啃咬动画（recipes.css 的 bite-*）照旧 */
body[data-page="recipes"] .fridge-modal-bg { background: rgba(79,59,43,.32); }
body[data-page="recipes"] .fridge-modal { background: var(--card); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 16px 36px -14px rgba(107,81,56,.55); }
body[data-page="recipes"] .fridge-modal-title { font: 700 15px/1.3 var(--hand); letter-spacing: 1.5px; color: var(--text); }
body[data-page="recipes"] .fridge-picker-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body[data-page="recipes"] .fridge-picker-item { padding: 6px 2px; border-radius: 12px; background: #fbf5ec; border: 1.5px solid transparent; font: 400 11.5px/1.2 var(--hand); color: var(--text-soft); }
body[data-page="recipes"] .fridge-picker-item.selected { background: var(--room-tint); border-color: var(--room-deep); }
body[data-page="recipes"] .fridge-picker-icon { width: 44px; height: 40px; }
body[data-page="recipes"] .fridge-input, body[data-page="recipes"] .fridge-card-qty { border: 1.5px solid rgba(107,81,56,.2); border-radius: 12px; background: #fffaf3; color: var(--text); }
body[data-page="recipes"] .fridge-add-btn, body[data-page="recipes"] .fridge-card-save { background: var(--room); color: var(--text); border: 1.5px solid var(--ink); font-family: var(--hand); box-shadow: 0 2px 0 rgba(107,81,56,.18); }
body[data-page="recipes"] .fridge-add-btn { border-radius: 999px; letter-spacing: 1px; }
body[data-page="recipes"] .fridge-card-icon { width: 64px; height: 57px; }
body[data-page="recipes"] .fridge-card-name { color: var(--text); }
body[data-page="recipes"] .fridge-card-date, body[data-page="recipes"] .fridge-card-label { font-family: var(--hand); color: var(--text-soft); }
body[data-page="recipes"] .fridge-card-row { background: #fbf5ec; border-radius: 12px; }
body[data-page="recipes"] .fridge-card-note { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); word-break: break-word; }
body[data-page="recipes"] .fridge-hint { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.45; color: #b3604f; }
body[data-page="recipes"] .fridge-hint:empty { display: none; }
body[data-page="recipes"] .fridge-eat-btn { border-radius: 999px; background: var(--room); color: var(--text); border: 1.5px solid var(--ink); font: 700 14px/1.2 var(--hand); letter-spacing: 1px; box-shadow: 0 2px 0 rgba(107,81,56,.18); }

/* h11 同名好几份（9/30 澄澄：「同名放好几份！」「可能列表更适合我的ADD？」）：后面叠一袋 + 角上 ×N；点开是清单，一天一行 */
body[data-page="recipes"] .kf-item.is-many .kf-art { isolation: isolate; }
body[data-page="recipes"] .kf-stack { position: absolute; inset: 0; z-index: -1; opacity: .6; transform: translate(7px, -6px) rotate(9deg); }
body[data-page="recipes"] .kf-count { position: absolute; right: -8px; top: -8px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px;
  background: var(--room-deep); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(107,81,56,.35);
  font: 700 12px/19px var(--hand); font-style: normal; text-align: center; color: #fff; }
body[data-page="recipes"] .fridge-card.kf-list-card { width: min(300px, calc(100vw - 32px)); }
body[data-page="recipes"] .kf-list { list-style: none; margin: 14px 0 2px; padding: 0; display: grid; gap: 8px; }
body[data-page="recipes"] .kf-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 14px; background: #fbf5ec; }
body[data-page="recipes"] .kf-row-open { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 0; border: 0; background: none; text-align: left; color: var(--text); cursor: pointer; }
body[data-page="recipes"] .kf-row-date { padding: 1px 6px 0; font: 700 13.5px/1.35 var(--hand); letter-spacing: .3px; color: #7a5a3a; transform: rotate(-3deg);
  background: #f7dfa8 repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 3px, transparent 3px 7px);
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%); }
body[data-page="recipes"] .kf-row-n { font: 700 13px/1.3 var(--hand); font-style: normal; color: var(--room-deep); }
body[data-page="recipes"] .kf-stepper { display: inline-flex; align-items: center; gap: 4px; }
body[data-page="recipes"] .kf-step { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: #fffaf3; box-shadow: 0 2px 0 rgba(107,81,56,.15);
  font: 600 19px/1 system-ui, -apple-system, 'Hiragino Sans', sans-serif; color: var(--text); cursor: pointer; }   /* 「− +」用系统字：手写体的减号太短 */
body[data-page="recipes"] .kf-step:active { transform: translateY(1px); box-shadow: none; }
body[data-page="recipes"] .kf-step-n { width: 34px; padding: 0; border: 0; background: none; text-align: center; font: 700 18px/1.2 var(--hand); color: var(--text); outline: none; }
body[data-page="recipes"] .fridge-card-row .kf-stepper { flex: 1; justify-content: center; }
body[data-page="recipes"] .kf-add-n { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 2px; padding: 6px 8px 6px 12px; border-radius: 12px; background: #fbf5ec;
  font: 400 13px/1.2 var(--hand); color: var(--text-soft); }
body[data-page="recipes"] .kf-row-note { flex-basis: 100%; font-size: 12px; line-height: 1.4; color: var(--text-soft); word-break: break-word; }
body[data-page="recipes"] .kf-row-eat { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--room); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 rgba(107,81,56,.18);
  font: 700 12.5px/1.2 var(--hand); letter-spacing: .5px; color: var(--text); cursor: pointer; }
body[data-page="recipes"] .kf-row.is-out { background: #f3eee6; }   /* 「需要买」的那一行：淡一点，「要买」代替 ×N，没有「吃掉了」 */
body[data-page="recipes"] .kf-row.is-out .kf-row-date { opacity: .55; }
body[data-page="recipes"] .kf-row.is-out .kf-row-n { color: var(--text-mute); }
body[data-page="recipes"] .kf-row.bite-jolt-l { animation: biteJoltL .2s ease-out; }
body[data-page="recipes"] .kf-row.bite-jolt-r { animation: biteJoltR .2s ease-out; }
body[data-page="recipes"] .kf-row.bite-gulp { animation: biteGulp .22s ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="recipes"] .kc-steam { animation: none; stroke-dasharray: none; }
  body[data-page="recipes"] .kitchen-corner.act .kc-heart, body[data-page="recipes"] .kitchen-corner.act .kc-dog, body[data-page="recipes"] .kitchen-sign.swing, body[data-page="recipes"] .kitchen-sign.swing .ks-cloth,
  body[data-page="recipes"] .kitchen-corner .kc-ladle, body[data-page="recipes"] .kitchen-corner .kc-think, body[data-page="recipes"] .kitchen-corner .kc-chop,
  body[data-page="recipes"] .kr-page.slide-next, body[data-page="recipes"] .kr-page.slide-prev, body[data-page="recipes"] .ks-pop { animation: none !important; }
  body[data-page="recipes"] .ks-jar, body[data-page="recipes"] .kf-art { transition: none; }
  body[data-page="recipes"] .kitchen-say.show { animation: kitchenSayFade 2.4s linear forwards; }
}

/* ================= 📅 日历（第八间，🎫#12，2026-10-06）================= */
/* 门色晴空蓝（pagebar.css：--room #a9c6e6 / --room-tint #e6effa）、方顶小门（同记账）。从上到下：小月历（minical.js open:true）→ 选中那天的卡片
   （每件事左边一道谁的颜色 + 谁的小脑袋，小脑袋借备忘本子的那两张）→ 最下面一行直接写 → 接下来两周。js/calendar.js 画。
   新界面的字（「记下」「更多」「接下来两周」…）不在 fonts/hand-strings.txt 里，Home Hand 子集没有的字掉到 Portal Hand / 系统字体（VPS 上跑不了 make_hand.py，留给以后） */
body[data-page="calendar"] { --room-deep: #4f74a3; }
body[data-page="calendar"] .content { max-width: 620px; padding: 20px 16px 64px; }
body[data-page="calendar"] .cal-desk { display: flex; flex-direction: column; gap: 18px; }
body[data-page="calendar"] .cal-status { margin: 48px 0; text-align: center; }
body[data-page="calendar"] .cal-desk[data-state="ok"] .cal-status,
body[data-page="calendar"] .cal-desk:not([data-state="ok"]) :is(.cal-cal, .cal-day, .cal-next) { display: none; }
body[data-page="calendar"] .cal-desk:not([data-state="failed"]) .when-failed,
body[data-page="calendar"] .cal-desk[data-state="failed"] .when-loading { display: none; }
body[data-page="calendar"] .cal-cal .minical { margin: 0; }

/* 选中那天：一张卡 */
/* 10/12 🎫#64：顶上一截晴空蓝的纸胶带（照健康 .night-card::before）；「X月X日」挪到卡片上面那一行 .cal-daynav 了，卡片里不再有标题 */
body[data-page="calendar"] .cal-day { position: relative; background: var(--card); border: 1.5px solid rgba(107,81,56,.12); border-radius: 20px; padding: 22px 14px 12px; box-shadow: var(--lift); }
body[data-page="calendar"] .cal-day::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px;
  background: color-mix(in srgb, var(--room) 78%, transparent)
              repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 4px, transparent 4px 9px);
  clip-path: polygon(0 0, 100% 0, 96% 20%, 100% 40%, 96% 60%, 100% 80%, 96% 100%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%);
  transform: rotate(-3deg); }
/* 接下来两周：铺一块门色淡蓝（照健康「几月的睡眠」.health-month） */
body[data-page="calendar"] .cal-next { padding: 18px 14px 14px; border-radius: 20px; background: color-mix(in srgb, var(--room-tint) 45%, var(--card)); border: 1.5px solid rgba(107,81,56,.12); }
body[data-page="calendar"] .cal-next-title { position: relative; z-index: 0; display: inline-block; margin: 0 0 10px 4px; font: 700 17px/1.3 var(--hand); letter-spacing: 2px; color: var(--text); }
body[data-page="calendar"] .cal-next-title::after { content: ''; position: absolute; z-index: -1; left: -4px; right: -5px; bottom: -1px; height: .55em;
  background: color-mix(in srgb, var(--room) 70%, transparent); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
body[data-page="calendar"] .cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-page="calendar"] .cal-empty { margin: 6px 4px 10px; font: 400 14px/1.5 var(--hand); color: var(--text-mute); letter-spacing: 1px; list-style: none; }
body[data-page="calendar"] .cal-ev { --who: var(--deer); --who-tint: var(--deer-tint); --who-deep: var(--deer-deep); }
body[data-page="calendar"] .cal-ev.by-dog { --who: var(--dog); --who-tint: var(--dog-tint); --who-deep: var(--dog-deep); }
body[data-page="calendar"] .cal-ev-btn { display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 10px; width: 100%; padding: 10px 12px 10px 10px; margin: 0;
  text-align: left; border: 1.3px solid rgba(107,81,56,.12); border-left: 5px solid var(--who); border-radius: 12px; background: color-mix(in srgb, var(--who-tint) 55%, #fffefa);
  color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
body[data-page="calendar"] .cal-ev-btn:active { transform: scale(.985); }
body[data-page="calendar"] .cal-who { width: 30px; height: 30px; border-radius: 50%; background: #fff center / 26px 26px no-repeat; box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--who) 80%, var(--ink)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Cdefs%3E%3Cmask id='e' maskUnits='userSpaceOnUse' x='-3' y='-3' width='106' height='106'%3E%3Crect x='-3' y='-3' width='106' height='106' fill='%23fff'/%3E%3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51 Z' fill='%23000'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51 Z' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E %3Cpath d='M40 29 C 38.4 21.5, 35 16, 30 11.5 M36.8 20.6 C 32.6 19.8, 28.6 20.8, 25.4 23.2 M60 29 C 61.6 21.5, 65 16, 70 11.5 M63.2 20.6 C 67.4 19.8, 71.4 20.8, 74.6 23.2' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M70 11.5 C 71.6 5.6, 79 3.6, 84 5.4 C 82.6 11.4, 75.8 13.8, 70 11.5 Z' fill='%23aac6a1' stroke='%236b5138' stroke-width='2.76' stroke-linejoin='round'/%3E %3Cpath d='M50 27 C 70 27, 81 42, 80 60 C 79 78, 66 91, 50 91 C 34 91, 21 78, 20 60 C 19 42, 30 27, 50 27 Z' fill='%23dcab76'/%3E %3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51 Z' fill='%23d49a60'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51 Z' fill='%23d49a60'/%3E %3Cpath d='M22.5 45 C 16 43.5, 10 47.5, 8 54 C 12.5 55.5, 18 53.5, 21.5 49.5 Z M77.5 45 C 84 43.5, 90 47.5, 92 54 C 87.5 55.5, 82 53.5, 78.5 49.5 Z' fill='%23f3c3b1'/%3E %3Cpath d='M50 27 C 70 27, 81 42, 80 60 C 79 78, 66 91, 50 91 C 34 91, 21 78, 20 60 C 19 42, 30 27, 50 27 Z' fill='none' stroke='%236b5138' stroke-width='4.6' mask='url(%23e)'/%3E %3Cpath d='M25.5 41.5 C 15 38.5, 5.5 45.5, 3.5 56.5 C 10.5 60.5, 18.5 57.5, 23 51' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M74.5 41.5 C 85 38.5, 94.5 45.5, 96.5 56.5 C 89.5 60.5, 81.5 57.5, 77 51' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='76' rx='13' ry='10' fill='%23f7e6cf'/%3E %3Ccircle cx='43' cy='36.5' r='2.6' fill='%23fff7ea'/%3E%3Ccircle cx='50' cy='34' r='2.6' fill='%23fff7ea'/%3E%3Ccircle cx='57' cy='36.5' r='2.6' fill='%23fff7ea'/%3E %3Cpath d='M33 55 C 36 50, 42 50, 45 55 M55 55 C 58 50, 64 50, 67 55' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='70' rx='4.8' ry='3.8' fill='%236b5138'/%3E %3Cpath d='M45.5 76.5 C 48 79.5, 52 79.5, 54.5 76.5' fill='none' stroke='%236b5138' stroke-width='3.68' stroke-linecap='round'/%3E %3Cellipse cx='32' cy='66' rx='6' ry='4' fill='rgba(240,160,122,.55)'/%3E%3Cellipse cx='68' cy='66' rx='6' ry='4' fill='rgba(240,160,122,.55)'/%3E%3C/svg%3E"); }
body[data-page="calendar"] .cal-ev.by-dog .cal-who { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 106'%3E%3Cdefs%3E%3Cmask id='e' maskUnits='userSpaceOnUse' x='-3' y='-3' width='106' height='106'%3E%3Crect x='-3' y='-3' width='106' height='106' fill='%23fff'/%3E%3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5 C 24.5 45, 25.8 35, 29 25.6 Z' fill='%23000'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5 C 75.5 45, 74.2 35, 71 25.6 Z' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E %3Cpath d='M50 21 C 76 21, 90 39, 89 59 C 88 79, 72 91, 50 91 C 28 91, 12 79, 11 59 C 10 39, 24 21, 50 21 Z' fill='%23f6d597'/%3E %3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5 C 24.5 45, 25.8 35, 29 25.6 Z' fill='%23ebba76'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5 C 75.5 45, 74.2 35, 71 25.6 Z' fill='%23ebba76'/%3E %3Cpath d='M50 21 C 76 21, 90 39, 89 59 C 88 79, 72 91, 50 91 C 28 91, 12 79, 11 59 C 10 39, 24 21, 50 21 Z' fill='none' stroke='%236b5138' stroke-width='4.6' mask='url(%23e)'/%3E %3Cpath d='M29 25.6 C 15 25, 2.5 35, 1 49.5 C 0 59.5, 4 67.5, 10.5 68 C 16.5 68.5, 21.5 62.5, 23 55.5' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M71 25.6 C 85 25, 97.5 35, 99 49.5 C 100 59.5, 96 67.5, 89.5 68 C 83.5 68.5, 78.5 62.5, 77 55.5' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M32 49 C 35 44, 42 44, 45 49 M55 49 C 58 44, 65 44, 68 49' fill='none' stroke='%236b5138' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cellipse cx='50' cy='59' rx='5.2' ry='4.2' fill='%236b5138'/%3E %3Cpath d='M50 63 C 50 68, 46 70.5, 42 69.6 M50 63 C 50 68, 54 70.5, 58 69.6' fill='none' stroke='%236b5138' stroke-width='3.68' stroke-linecap='round'/%3E %3Cellipse cx='31' cy='61' rx='6.4' ry='4.3' fill='rgba(240,160,122,.55)'/%3E%3Cellipse cx='69' cy='61' rx='6.4' ry='4.3' fill='rgba(240,160,122,.55)'/%3E%3C/svg%3E"); }
/* 左边一栏：小脑袋，底下是时间（10/6 澄澄：原来时间占一栏，标题太窄、稍长就疯狂换行） */
body[data-page="calendar"] .cal-ev-side { display: flex; flex-direction: column; align-items: center; gap: 3px; }
body[data-page="calendar"] .cal-ev-time { font: 700 12.5px/1.2 var(--hand); color: var(--who-deep); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-page="calendar"] .cal-ev-time:empty { display: none; }
body[data-page="calendar"] .cal-ev-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
/* 澄澄写的标题 / 备注：手写体，子集里没有的字由文楷整套切片补（calendar.js calLoadWenkai 进页时挂 wenkai.css）；输入框里正在打的字照旧系统字体 */
body[data-page="calendar"] :is(.cal-ev-title, .cal-ev-note, .cal-next-main) { font-family: 'Home Hand', 'Portal Hand', 'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', sans-serif; }
body[data-page="calendar"] .cal-ev-title { font-size: 16px; line-height: 1.45; word-break: break-word; }
body[data-page="calendar"] .cal-ev-tags { display: flex; flex-wrap: wrap; gap: 5px; }
body[data-page="calendar"] .cal-ev-tags i { font: 400 11.5px/1.6 var(--hand); font-style: normal; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--who) 30%, #fff); color: var(--who-deep); letter-spacing: .5px; }
body[data-page="calendar"] .cal-ev-note { font-size: 13px; line-height: 1.5; color: var(--text-soft); word-break: break-word; }
body[data-page="calendar"] .cal-ev.fresh .cal-ev-btn { animation: calPop .45s cubic-bezier(.22,1,.36,1); }
@keyframes calPop { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* 编辑表单（点一条原地变成这个） */
body[data-page="calendar"] .cal-edit { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid var(--who); border-radius: 12px; background: #fffefa; }
body[data-page="calendar"] .cal-edit-title { font-size: 16px; }
body[data-page="calendar"] .cal-f { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: 8px; font: 400 13.5px/1.4 var(--hand); color: var(--text-soft); letter-spacing: 1px; }
body[data-page="calendar"] .cal-f-note { align-items: start; }
body[data-page="calendar"] .cal-f-note span { padding-top: 7px; }
body[data-page="calendar"] :is(.cal-edit-title, .cal-title-in, .cal-f input, .cal-f select, .cal-f textarea) { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border: 1.3px solid rgba(107,81,56,.2);
  border-radius: 10px; background: #fff; color: var(--text); font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', sans-serif; }
body[data-page="calendar"] :is(.cal-edit-title, .cal-title-in, .cal-f input, .cal-f select, .cal-f textarea):focus { outline: none; border-color: var(--room-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--room) 45%, transparent); }
body[data-page="calendar"] .cal-f textarea { resize: vertical; }
body[data-page="calendar"] .cal-title-in::placeholder, body[data-page="calendar"] .cal-edit-title::placeholder { font-family: var(--hand); color: var(--text-mute); letter-spacing: 1px; }   /* 同留言（rooms.css 顶上 .textarea::placeholder） */
body[data-page="calendar"] .cal-edit-tip { margin: 0; font: 400 12.5px/1.5 var(--hand); color: var(--room-deep); letter-spacing: .5px; }
body[data-page="calendar"] .cal-edit-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
body[data-page="calendar"] .cal-edit-btns .cal-del { margin-right: auto; }

/* 按钮：门色圆头（记下 / 改好了），奶油色（更多 / 算了 / 删掉） */
body[data-page="calendar"] :is(.cal-send, .cal-save, .cal-more-btn, .cal-cancel, .cal-del) { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font: 700 14px/1.3 var(--hand); letter-spacing: 1px; cursor: pointer;
  border: 1.3px solid rgba(107,81,56,.24); background: var(--card); color: var(--text-soft); -webkit-tap-highlight-color: transparent; }
body[data-page="calendar"] :is(.cal-send, .cal-save) { background: var(--room); color: var(--text); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 rgba(107,81,56,.2); }
body[data-page="calendar"] :is(.cal-send, .cal-save):active { transform: translateY(1px); box-shadow: none; }
body[data-page="calendar"] .cal-more-btn[aria-expanded="true"] { background: var(--room-tint); border-color: var(--room-deep); color: var(--room-deep); }
body[data-page="calendar"] .cal-del.armed { background: #f6d6cc; border-color: #b3604f; color: #8e3f30; }
body[data-page="calendar"] .sending :is(.cal-send, .cal-save) { opacity: .55; }

/* 最下面一行直接写 */
body[data-page="calendar"] .cal-write { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed rgba(107,81,56,.18); }
body[data-page="calendar"] .cal-write-row { display: flex; gap: 6px; align-items: center; }
body[data-page="calendar"] .cal-more { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
body[data-page="calendar"] .cal-more[hidden] { display: none; }
body[data-page="calendar"] .cal-write.shake { animation: calShake .35s; }
@keyframes calShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
body[data-page="calendar"] .cal-hint { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font: 400 12.5px/1.5 var(--hand); letter-spacing: .5px; color: #b3604f; transition: max-height .3s, opacity .3s, margin .3s; }
body[data-page="calendar"] .cal-hint.show { max-height: 60px; margin: 8px 2px 0; opacity: 1; }

/* 接下来两周 */
body[data-page="calendar"] .cal-next-day + .cal-next-day { margin-top: 10px; }
body[data-page="calendar"] .cal-next-day h3 { margin: 0 0 4px 4px; font: 700 13.5px/1.4 var(--hand); color: var(--room-deep); letter-spacing: 1.5px; }
body[data-page="calendar"] .cal-next-day ul { list-style: none; margin: 0; padding: 0; }
body[data-page="calendar"] .cal-next-day li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; padding: 6px 8px 6px 12px; margin: 0 0 4px; border-left: 3px solid var(--deer);
  border-radius: 4px 10px 10px 4px; background: color-mix(in srgb, var(--deer-tint) 50%, transparent); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
body[data-page="calendar"] .cal-next-day li.by-dog { border-left-color: var(--dog); background: color-mix(in srgb, var(--dog-tint) 50%, transparent); }
body[data-page="calendar"] .cal-next-day li b { font: 700 13.5px/1.45 var(--hand); color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-page="calendar"] .cal-next-day li b:empty { display: none; }
body[data-page="calendar"] .cal-next-day li:has(b:empty) { grid-template-columns: 1fr; }
body[data-page="calendar"] .cal-next-main { min-width: 0; word-break: break-word; }
body[data-page="calendar"] .cal-next-day li small { margin-left: 6px; white-space: nowrap; font: 400 11.5px/1.4 var(--hand); color: var(--text-mute); letter-spacing: .5px; }

/* ---- 顶上的小角落「窗前」（h18，🎫#64，10/12）：壳照记账 .pocket（352×212 固定宽、窄屏两边裁）；画是 index.html 里一张内联 svg ----
   摸小狗：透明按钮 .cal-dog-btn 盖在小狗那块上（厨房 .kitchen-hit 的做法：小狗留在 svg 里）；
   第 4 轮起小狗整只坐在架子上（爪子画在 .cw-dog 里面），摸一下 = 蹦一下（照厨房 kitchenHop，转轴 = 小狗自己坐标的底边中点）；
   气泡往左冒（小狗坐在右半边），底边钉在小狗左耳上方（bottom，两行的时候往上长），字体栈同标题（标题进气泡，生僻字由文楷切片兜底） */
body[data-page="calendar"] .cal-corner { position: relative; height: 212px; margin: 0 0 -4px; overflow: hidden; }
body[data-page="calendar"] .cal-scene { position: absolute; left: 50%; top: 0; width: 352px; height: 212px; margin-left: -176px; pointer-events: none; }
body[data-page="calendar"] .cal-scene svg { display: block; width: 352px; height: 212px; }
/* 窗外跟着时间换（10/12 第 9 轮澄澄点头）：svg 里白天 .cw-day、晚上 .cw-night 两层都画，calendar.js calCornerToday 按手机时间设 data-sky；没设 = 白天 */
body[data-page="calendar"] .cal-corner:not([data-sky="night"]) .cw-night, body[data-page="calendar"] .cal-corner[data-sky="night"] .cw-day { display: none; }
body[data-page="calendar"] .cal-sign { position: absolute; left: calc(50% - 176px + 18px); top: 20px; padding: 5px 12px 4px; transform: rotate(-5deg);
  background: #fff8ec; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 rgba(107,81,56,.14);
  font: 700 15px/1.3 var(--hand); letter-spacing: 2px; color: var(--ink); }
body[data-page="calendar"] .cal-dog-btn { position: absolute; left: calc(50% - 176px + 178px); top: 104px; width: 96px; height: 84px; margin: 0; padding: 0;
  border: 0; border-radius: 40%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="calendar"] .cal-dog-btn:focus-visible { outline: 2px dashed var(--room-deep); outline-offset: 2px; }
body[data-page="calendar"] .cw-dog { transform-box: view-box; transform-origin: 54px 180px; }       /* 小狗自己坐标里的底边中点 */
body[data-page="calendar"] .cw-dog.jiggle { animation: calDogHop .55s ease; }
@keyframes calDogHop { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.02, .98); } 58% { transform: scale(1.04, .95); } 78% { transform: scale(.99, 1.01); } }   /* = 厨房 kitchenHop */
body[data-page="calendar"] .cal-say { position: absolute; z-index: 2; bottom: 100px; right: calc(50% - 14px); max-width: 168px; padding: 7px 11px 6px;
  border-radius: 14px 14px 4px 14px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 6px 14px -8px rgba(107,81,56,.5);
  font: 400 13px/1.45 'Home Hand', 'Portal Hand', 'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', sans-serif;
  letter-spacing: .5px; color: var(--text); word-break: break-word; opacity: 0; pointer-events: none; transform-origin: 100% 100%; }
body[data-page="calendar"] .cal-say.show { animation: pigSay 2.4s ease forwards; }   /* keyframes 借记账的 pigSay / pigSayFade */

/* 小月历底下一行小字：点点是谁的（照健康 .health-legend；颜色 = minical.css 的 .mc-dot.deer / .dog） */
body[data-page="calendar"] .cal-legend:not([hidden]) { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin: -14px 0 -6px;
  font: 400 12px/1.5 var(--hand); letter-spacing: 1px; color: var(--text-mute); }
body[data-page="calendar"] .cal-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
body[data-page="calendar"] .cal-legend i.deer { background: #7fa874; }
body[data-page="calendar"] .cal-legend i.dog { background: #d9a441; }
/* ‹ 那一天 ›：样子在上面共用的那几条（.notes-day / .health-day / .ledger-day 那组）；这里只把下边距收掉（cal-desk 自己有 gap）。日历每天都能点，所以 ‹ › 没有禁用态 */
body[data-page="calendar"] .cal-daynav { margin: 0 2px -4px; }
body[data-page="calendar"] .cal-list:empty + .cal-write { margin-top: 0; padding-top: 0; border-top: 0; }   /* 空的那天卡片里只剩写的那一行，上面那道虚线不要 */

/* ---- 写一件事 / 改一件事（第 10 轮，10/12 澄澄截图「输入长一点就看不到前面，两个按钮摆在同一排所以输入框特别小」）----
   标题一整行、跟着字长高（calGrow）；底下一行左「＋ 几点 · 重复 · 备注」右「记下」；展开的框：标签是框里上沿一行小字，几点 / 到哪天两格并排，重复三颗小圆片 */
body[data-page="calendar"] :is(.cal-title-in, .cal-edit-title) { display: block; resize: none; overflow: hidden; min-height: 42px; line-height: 1.45; }
body[data-page="calendar"] .cal-write-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
body[data-page="calendar"] .cal-write .cal-more { margin-top: 10px; }
body[data-page="calendar"] .cal-more-btn { padding: 6px 12px 6px 10px; border-style: dashed; font-weight: 400; font-size: 13.5px; }
body[data-page="calendar"] .cal-plus { display: inline-block; margin-right: 5px; font-style: normal; transition: transform .2s; }
body[data-page="calendar"] .cal-more-btn[aria-expanded="true"] { border-style: solid; }
body[data-page="calendar"] .cal-more-btn[aria-expanded="true"] .cal-plus { transform: rotate(45deg); }   /* 展开时 ＋ 转成 × = 再点收起 */
body[data-page="calendar"] .cal-send { padding: 8px 22px; }
/* 一个框 = 上沿一行小字标签 + 下面输入；框亮 = 里面有焦点 */
body[data-page="calendar"] .cal-f { display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-width: 0; padding: 5px 10px 6px; border: 1.3px solid rgba(107,81,56,.2); border-radius: 10px; background: #fff; }
body[data-page="calendar"] .cal-f > span, body[data-page="calendar"] .cal-f-note > span { padding: 0; font: 400 11.5px/1.4 var(--hand); color: var(--text-mute); letter-spacing: 1px; }
body[data-page="calendar"] .cal-f :is(input, textarea) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; min-height: 24px; }
body[data-page="calendar"] .cal-f:focus-within { border-color: var(--room-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--room) 45%, transparent); }
body[data-page="calendar"] .cal-f textarea { resize: none; }   /* 右下角那个拖拽小角在手机上就是一个点，不要 */
body[data-page="calendar"] .cal-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-page="calendar"] .cal-rep { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page="calendar"] .cal-chip { padding: 5px 14px; border-radius: 999px; border: 1.3px solid rgba(107,81,56,.24); background: var(--card); color: var(--text-soft);
  font: 400 13.5px/1.3 var(--hand); letter-spacing: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-page="calendar"] .cal-chip[aria-pressed="true"] { background: var(--room); border: 1.3px solid var(--ink); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  body[data-page="calendar"] .cal-ev.fresh .cal-ev-btn, body[data-page="calendar"] .cal-write.shake, body[data-page="calendar"] .cw-dog.jiggle { animation: none !important; }
  body[data-page="calendar"] .cal-say.show { animation: pigSayFade 2.4s linear forwards; }
  body[data-page="calendar"] .cal-plus { transition: none; }
  body[data-page="calendar"] .cal-hint { transition: none; }
}