@font-face{font-family:"LBHand";src:url(fonts/mashan-sub.woff) format("woff");font-display:swap}
@font-face{font-family:"LBScript";src:url(fonts/dancing.woff) format("woff");font-weight:400 700;font-display:swap}
@font-face{font-family:"LBCaveat";src:url(fonts/caveat.woff) format("woff");font-weight:400 700;font-display:swap}
:root{
  --bg:#f3f2fa;--ink:#2e3036;--ink2:#5b5f69;--muted:#9a9eaa;--line:rgba(140,140,170,.16);
  --sage:#9bb89a;--sage-d:#6fa86b;--check:#7db577;--haze:#a9bfd6;--pink:#e8c4c4;--lilac:#c9bde6;--cream:#fffdf8;
  --glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.52);
  --shadow:0 18px 40px -12px rgba(110,105,160,.22),0 4px 12px rgba(120,120,170,.08);
  --r:18px;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.g1{width:620px;height:520px;left:-160px;top:180px;background:rgba(214,206,246,.75)}
.g2{width:560px;height:460px;right:-140px;top:60px;background:rgba(206,232,218,.6)}
.g3{width:700px;height:380px;left:30%;bottom:-160px;background:rgba(246,214,222,.45)}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:18px;height:18px;flex:none;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:44px 40px 8px;text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;letter-spacing:.42em;color:#7e8190;font-weight:500}
.eyebrow i{display:block;width:90px;height:1px;background:#c9c8d8}
.title{position:relative;display:inline-block;margin:14px 0 22px;font-size:60px;line-height:1.15;font-weight:900;letter-spacing:.06em;color:#2b2d33}
.title .ul{position:relative;display:inline-block;z-index:0}
.title .brush{position:absolute;left:-3%;bottom:-4px;width:106%;height:26px;z-index:-1}
.title .sparks{position:absolute;right:-46px;top:-22px;width:48px;height:48px}
.pill{display:inline-flex;align-items:center;gap:16px;padding:10px 34px;border-radius:999px;background:linear-gradient(90deg,#e3e6cf,#dfe5cf 50%,#e6e5d2);color:#5f6a55;font-size:15px;letter-spacing:.08em;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -8px rgba(120,130,90,.35)}
.pill b{font-weight:300;color:#a7ae98}

/* ---------- book ---------- */
.stage{position:relative;z-index:1;max-width:1180px;margin:10px auto 0;padding:0 40px}
.book{position:relative;padding-right:46px;perspective:2600px}
.stack{position:absolute;inset:10px 52px -8px 6px;border-radius:22px;background:rgba(255,255,255,.4);box-shadow:0 30px 60px -20px rgba(100,95,150,.28);border:1px solid rgba(255,255,255,.7)}
.stack::after{content:"";position:absolute;inset:6px 4px -6px 4px;border-radius:22px;background:rgba(255,255,255,.3);z-index:-1}
.spread{position:relative;display:grid;grid-template-columns:1fr 44px 1fr;height:660px}
.page{position:relative;height:100%;padding:24px 26px 22px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.page.left{border-radius:20px 8px 8px 20px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.62) 85%,rgba(225,222,240,.62))}
.page.right{border-radius:8px 20px 20px 8px;background:linear-gradient(90deg,rgba(228,226,242,.62),rgba(255,255,255,.64) 15%,rgba(255,255,255,.7))}
.page::-webkit-scrollbar{width:6px}.page::-webkit-scrollbar-thumb{background:#dcdbe8;border-radius:4px}
.page .scroll{overflow:auto;min-height:0;flex:1;margin:0 -6px;padding:0 6px 4px}
.spine{position:relative}
.rings{position:absolute;left:-30px;right:-30px;top:44px;bottom:44px;display:flex;flex-direction:column;justify-content:space-between;z-index:5;pointer-events:none}
.ring{position:relative;height:16px}
.ring::before,.ring::after{content:"";position:absolute;top:3px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8e90a0,#c6c7d2 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 #fff}
.ring::before{left:12px}.ring::after{right:12px}
.ring i{position:absolute;left:14px;right:14px;top:1px;height:13px;border-radius:9px;background:linear-gradient(180deg,#ffffff 0%,#e9eaf0 18%,#b7b9c6 45%,#f5f6fa 62%,#9fa2b2 85%,#d8d9e2 100%);box-shadow:0 3px 5px rgba(80,80,110,.3),inset 0 0 0 .5px rgba(90,90,120,.35)}
.ring i::after{content:"";position:absolute;left:10%;right:10%;top:2px;height:3px;border-radius:3px;background:rgba(255,255,255,.95)}

/* tabs */
.tabs{position:absolute;right:0;top:34px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tab{position:relative;width:46px;height:62px;border:1px solid rgba(255,255,255,.95);border-left:none;border-radius:0 12px 12px 0;background:var(--c);color:#4e5560;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;letter-spacing:.2em;padding:0 0 0 6px;box-shadow:4px 6px 14px -6px rgba(110,105,150,.35);transition:transform .2s,width .2s;transform:translateX(-6px)}
.tab:hover{transform:translateX(-2px)}
.tab.on{transform:translateX(0);width:50px;box-shadow:6px 8px 18px -6px rgba(110,105,150,.45);color:#2f3a32}
.tab.on::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-radius:2px;background:rgba(255,255,255,.9)}
.tab.plus{height:40px;writing-mode:horizontal-tb;font-size:20px;font-weight:300;background:rgba(255,255,255,.75);color:#8a8fa0;padding:0}

/* flipping */
.flipper{position:absolute;z-index:20;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.45,.05,.25,1);pointer-events:none}
.flipper .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fbfafe;border:1px solid #fff;padding:24px 26px 22px;overflow:hidden;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.flipper .face.back{transform:rotateY(180deg)}
.flipper .face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 30%,transparent 70%,rgba(0,0,0,.05));opacity:0;animation:shade .78s}
@keyframes shade{50%{opacity:1}}

/* ---------- common page bits ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.ph-title{margin:0;display:flex;align-items:center;gap:8px;font-size:21px;font-weight:800;letter-spacing:.04em}
.ph-title svg.i{width:20px;height:20px}
.ph-sub{font-size:14px;color:var(--ink2);letter-spacing:.04em}
.ph-r{display:flex;align-items:center;gap:6px;color:var(--ink2);font-size:14px}
.card{background:var(--glass2);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:14px 16px;box-shadow:0 10px 24px -14px rgba(110,105,160,.3),inset 0 1px 0 rgba(255,255,255,.9)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.card-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:.04em}
.muted{color:var(--muted);font-size:12.5px}
.ibtn{border:none;background:transparent;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#8c91a0;cursor:pointer;font-size:18px;line-height:1;padding:0}
.ibtn:hover{background:rgba(155,184,154,.16);color:#4f6b4d}
.ibtn svg.i{width:16px;height:16px}
.btn{border:none;border-radius:10px;background:linear-gradient(180deg,#a8c6a3,#8fb889);color:#fff;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(111,168,107,.6)}
.btn svg.i{width:15px;height:15px}
.btn.ghost{background:rgba(255,255,255,.75);color:#5d6a5c;border:1px solid #dfe6dd;box-shadow:none}
.btn.blue{background:linear-gradient(180deg,#b9cde2,#a0b9d4);box-shadow:0 4px 10px -4px rgba(120,150,190,.6)}
.btn.pink{background:linear-gradient(180deg,#efcfcf,#e1b4b4)}
.addrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.addrow input,.addrow select,.addrow textarea,.inp{min-width:0;border:1px solid #e3e2ee;background:rgba(255,255,255,.8);border-radius:10px;padding:7px 10px;font-size:13.5px;outline:none}
.addrow input:focus,.addrow textarea:focus,.inp:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(155,184,154,.2)}
.addrow input[name=text],.addrow input[name=title],.addrow .grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;background:rgba(169,191,214,.22);color:#5b6f86;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.chip.on{background:#9bb89a;color:#fff}
.chip .x{opacity:.6;margin-left:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.list{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.row .ibtn{transition:opacity .15s}
.row:hover .ibtn,.row:focus-within .ibtn{opacity:1}
@media (hover:none){.row .ibtn{opacity:.7}}
.bar{height:9px;border-radius:9px;background:rgba(155,184,154,.18);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#b7d0b1,#8fb889)}
.bar.blue i{background:linear-gradient(90deg,#c9d8e8,#a0b9d4)}
.bar.pink i{background:linear-gradient(90deg,#f1d6d6,#e2b0b0)}
.amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt.in{color:#5f9a5a}.amt.out{color:#c7867f}
.empty{padding:22px 8px;text-align:center;color:var(--muted);font-size:13px}
.cb{flex:none;width:19px;height:19px;border-radius:6px;border:1.6px solid #cbd3c8;background:rgba(255,255,255,.85);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .15s}
.cb svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.cb.on{background:var(--check);border-color:var(--check)}
.cb.on svg{opacity:1}
.done-t{color:#a3a7b0;text-decoration:line-through;text-decoration-color:#c9ccd2}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{padding:12px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid #fff;text-align:center}
.stat b{display:block;font-size:22px;font-weight:800;margin-top:2px}
.stat span{font-size:12px;color:var(--muted)}

/* ---------- TODAY (reference spread) ---------- */
.photo{position:relative;flex:none;height:172px;border-radius:16px;overflow:hidden;background:#7fb1e6 url(img/sky.svg) center/cover;box-shadow:0 12px 24px -14px rgba(70,110,160,.55),inset 0 0 0 1px rgba(255,255,255,.6)}
.photo .hand{position:absolute;left:30px;top:48px;color:#fff;text-shadow:0 2px 6px rgba(40,90,160,.45),0 0 18px rgba(50,100,170,.35);line-height:1}
.photo .hand .zh{font-family:"LBHand","Ma Shan Zheng",cursive;font-size:44px;letter-spacing:.06em}
.photo .hand .en{display:block;font-family:"LBScript","Dancing Script",cursive;font-size:38px;margin:6px 0 0 70px;transform:rotate(-4deg)}
.today-mid{display:grid;grid-template-columns:1.18fr 1fr;gap:14px;flex:1;min-height:0}
.plan li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14.5px}
.plan li .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.plan li .star{opacity:.0;color:#e0b25a}
.plan li .star.on{opacity:1}
.plan li:hover .star{opacity:.6}.plan li .star.on{opacity:1}
.plan .del{opacity:0;width:20px;height:20px}
.plan li:hover .del{opacity:1}
.plan-add{display:flex;gap:6px;margin-top:4px}
.plan-add input{flex:1;border:none;border-bottom:1px dashed #d6d9e2;background:transparent;font-size:13px;padding:4px 2px;outline:none;color:var(--ink2)}
.plan-add input::placeholder{color:#b4b8c4}
.rcol{display:flex;flex-direction:column;gap:12px;min-height:0}
.mood{padding:12px 14px}
.mood .card-h{margin-bottom:6px}
.moodsel{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.75);border:1px solid #eceaf4;cursor:pointer}
.moodsel .face{font-size:24px;line-height:1}
.moodsel .lbl{flex:1;font-size:14.5px;font-weight:600}
.moodsel select{position:absolute;inset:0;opacity:0;cursor:pointer}
.mood .note{width:100%;margin-top:6px;border:none;background:transparent;border-bottom:1px dashed #dcdde6;font-family:"LBCaveat",var(--sans);font-size:14px;padding:3px 2px;outline:none;color:#6c7080}
.polaroid{position:relative;align-self:center;width:150px;padding:9px 9px 26px;background:#fff;border-radius:3px;transform:rotate(4deg);box-shadow:0 14px 22px -10px rgba(90,80,120,.35),0 2px 4px rgba(0,0,0,.06);margin-top:6px}
.polaroid .img{height:118px;background:url(img/latte.svg) center/cover;border-radius:1px}
.polaroid .cap{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:"LBCaveat",cursive;font-size:15px;color:#8a8797}
.clip{position:absolute;top:-16px;left:22px;width:20px;height:46px;transform:rotate(-8deg)}
.qtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none}
.qt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid #fff;box-shadow:0 8px 18px -12px rgba(110,105,160,.4);cursor:pointer;font-size:13px;color:var(--ink2);transition:transform .15s}
.qt:hover{transform:translateY(-2px)}
.qt svg.i{width:24px;height:24px;stroke-width:1.5}

/* week */
.wk-nav .ibtn{font-size:22px;color:#9aa0ad}
.week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:12px 6px 8px;flex:none}
.week .d{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.week .w{font-size:13px;color:var(--muted)}
.week .n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#4b4f59}
.week .d.on .n{background:#8fbf87;color:#fff;box-shadow:0 6px 12px -4px rgba(111,168,107,.6)}
.week .dots{display:flex;gap:3px;height:6px}
.week .dots i{width:5px;height:5px;border-radius:50%}
.hgrid{display:grid;grid-template-columns:92px repeat(7,1fr);row-gap:11px;align-items:center}
.hgrid .hn{display:flex;align-items:center;gap:7px;font-size:14.5px}
.hgrid .hn svg.i{width:18px;height:18px}
.dot{justify-self:center;width:24px;height:24px;border-radius:50%;border:1.5px solid #dcdde5;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .15s}
.dot svg{width:13px;height:13px;stroke:#fff;stroke-width:3.2;fill:none;opacity:0}
.dot.on{background:var(--check);border-color:var(--check);box-shadow:0 3px 8px -3px rgba(111,168,107,.7)}
.dot.on svg{opacity:1}
.dot.fut{opacity:.55}
.goal{display:grid;grid-template-columns:118px 1fr 40px;align-items:center;gap:12px;padding:9px 0;font-size:14.5px}
.goal .p{text-align:right;color:var(--ink2);font-size:13.5px;font-variant-numeric:tabular-nums}

/* ---------- features ---------- */
.features{position:relative;z-index:1;max-width:1180px;margin:34px auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ft{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:118px;border-radius:18px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #fff;box-shadow:var(--shadow);cursor:pointer;font-size:15px;font-weight:600;color:#3d4048;letter-spacing:.06em;transition:transform .2s}
.ft:hover{transform:translateY(-3px)}
.ft svg.i{width:34px;height:34px;stroke-width:1.4}
.foot{position:relative;z-index:1;text-align:center;color:#a5a8b6;font-size:12px;padding:26px 16px 36px}

/* ---------- chapter specifics ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal .w{font-size:12px;color:var(--muted);padding:4px 0}
.cal .c{position:relative;height:52px;border-radius:12px;padding-top:6px;font-size:14px;cursor:pointer;color:#4b4f59;border:1px solid transparent}
.cal .c:hover{background:rgba(255,255,255,.7)}
.cal .c.o{color:#c6c8d0}
.cal .c.t{font-weight:800;color:#5f9a5a}
.cal .c.s{background:#fff;border-color:#d7e6d4;box-shadow:0 6px 14px -8px rgba(111,168,107,.6)}
.cal .c .dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:3px}
.cal .c .dots i{width:5px;height:5px;border-radius:50%}
.cal .c .flag{position:absolute;top:4px;right:6px;width:6px;height:6px;border-radius:50%;background:#e8a7a7}
.ev{display:flex;align-items:center;gap:10px}
.ev .tm{width:46px;font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.ev .bd{width:4px;align-self:stretch;border-radius:3px}
.hbig{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.62);border:1px solid #fff;margin-bottom:8px}
.hbig .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.hbig .nm{flex:1}.hbig .nm b{display:block;font-size:15px}
.hbig .dot{width:34px;height:34px}.hbig .dot svg{width:17px;height:17px}
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:4px;background:rgba(200,200,215,.35)}
.heat i.on{background:var(--hc,#8fb889)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 4px}
.ph-card{position:relative;background:#fff;padding:7px 7px 24px;border-radius:3px;box-shadow:0 10px 18px -10px rgba(90,80,120,.4)}
.ph-card:nth-child(3n+1){transform:rotate(-2deg)}.ph-card:nth-child(3n+2){transform:rotate(1.5deg)}.ph-card:nth-child(3n){transform:rotate(-.5deg)}
.ph-card .im{aspect-ratio:1;background:#eee center/cover;border-radius:1px}
.ph-card .cap{position:absolute;left:6px;right:6px;bottom:4px;font-size:11.5px;text-align:center;color:#7a7d88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card .ibtn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.85);width:24px;height:24px;opacity:0}
.ph-card:hover .ibtn{opacity:1}
.upload{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1.5px dashed #c9cfdc;border-radius:12px;color:#8a91a3;font-size:12.5px;cursor:pointer;aspect-ratio:1/1.13;background:rgba(255,255,255,.4)}
.ann .days{font-weight:800;color:#6c8bab;font-size:15px;white-space:nowrap}
.moodbars .r{display:grid;grid-template-columns:70px 1fr 30px;gap:10px;align-items:center;font-size:13.5px;padding:4px 0}
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mcal i{height:30px;border-radius:8px;background:rgba(220,220,232,.4);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px}

/* popover */
.pop{position:fixed;z-index:50;min-width:190px;padding:8px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 20px 40px -12px rgba(90,85,140,.35)}
.pop button{display:flex;width:100%;align-items:center;gap:8px;padding:9px 10px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-size:14px;text-align:left}
.pop button:hover{background:rgba(155,184,154,.15)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:60;background:rgba(46,48,54,.86);color:#fff;padding:9px 18px;border-radius:999px;font-size:13.5px}
.mnav{display:none}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero{padding:26px 18px 4px}
  .title{font-size:34px;margin:10px 0 14px}
  .title .sparks{right:-30px;top:-14px;width:32px;height:32px}
  .title .brush{height:14px;bottom:-3px}
  .pill{gap:8px;padding:8px 16px;font-size:12.5px;letter-spacing:.02em}
  .eyebrow{font-size:10.5px}.eyebrow i{width:54px}
  .stage{padding:0 10px}
  .book{padding-right:40px;perspective:none}
  .stack{inset:8px 44px -6px 4px}
  .spread{grid-template-columns:1fr;height:auto;min-height:calc(100svh - 230px)}
  .spine{display:none}
  .page{min-height:calc(100svh - 230px);border-radius:16px!important;padding:18px 16px 16px;padding-left:30px}
  .book[data-side=L] .page.right,.book[data-side=R] .page.left{display:none}
  .page::before{content:"";position:absolute;left:8px;top:30px;bottom:30px;width:12px;background:repeating-linear-gradient(180deg,transparent 0 34px,#c8cad6 34px 44px,transparent 44px 70px);border-radius:6px;opacity:.9}
  .tabs{top:18px;gap:5px}
  .tab{width:40px;height:50px;font-size:12px;transform:translateX(-4px)}
  .tab.on{width:42px}
  .tab.plus{height:34px}
  .mnav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;color:var(--muted);font-size:12.5px;padding-right:40px}
  .features{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px;margin-top:20px}
  .ft{height:88px;font-size:13px;gap:6px;border-radius:14px}
  .ft svg.i{width:26px;height:26px}
  .today-mid{grid-template-columns:1fr;flex:none}
  .rcol{flex-direction:row;align-items:flex-start}
  .rcol .mood{flex:1}
  .polaroid{width:118px;flex:none;margin:8px 6px 0 0}.polaroid .img{height:92px}
  .photo{height:150px}.photo .hand{left:20px;top:40px}.photo .hand .zh{font-size:36px}.photo .hand .en{font-size:30px;margin-left:56px}
  .hgrid{grid-template-columns:72px repeat(7,1fr)}
  .dot{width:22px;height:22px}
  .goal{grid-template-columns:96px 1fr 38px;gap:8px}
  .photos{grid-template-columns:repeat(2,1fr)}
  .page.slide-in{animation:slin .35s ease}
  .page.slide-in-r{animation:slinr .35s ease}
}
@keyframes slin{from{opacity:.2;transform:translateX(40px)}}
@keyframes slinr{from{opacity:.2;transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){.flipper{transition:none}}

.page>*{flex-shrink:0}.page>.scroll{flex-shrink:1}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.m-back{position:absolute;inset:0;background:rgba(80,78,110,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:mfade .2s}
.m-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px 18px;border-radius:20px;background:rgba(255,255,255,.86);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border:1px solid #fff;box-shadow:0 30px 60px -18px rgba(90,85,140,.45),inset 0 1px 0 #fff;animation:mpop .22s cubic-bezier(.2,.9,.3,1.2)}
.m-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.m-h h3{margin:0;font-size:18px;font-weight:800;letter-spacing:.04em}
.m-msg{margin:0 0 14px;color:var(--ink2);font-size:14px;line-height:1.6}
.m-body{display:flex;flex-wrap:wrap;gap:12px}
.m-f{display:flex;flex-direction:column;gap:5px;flex:1 1 100%;font-size:12.5px;color:var(--ink2)}
.m-f.half{flex:1 1 40%}
.m-f input,.m-f select,.m-f textarea{border:1px solid #e3e2ee;background:rgba(255,255,255,.9);border-radius:11px;padding:9px 11px;font-size:14.5px;outline:none;color:var(--ink);width:100%}
.m-f textarea{resize:vertical;line-height:1.6}
.m-f input:focus,.m-f select:focus,.m-f textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(155,184,154,.22)}
.m-f .bad,.m-f input.bad{border-color:#e2a0a0;box-shadow:0 0 0 3px rgba(226,160,160,.25)}
.m-check{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;flex:1 1 100%}
.m-check input{width:17px;height:17px;accent-color:#8fb889}
.m-sw{display:flex;gap:10px}
.m-sw label{cursor:pointer}.m-sw input{position:absolute;opacity:0;pointer-events:none}
.m-sw i{display:block;width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #e1e0ea}
.m-sw input:checked+i{box-shadow:0 0 0 2px #6f8f6c}
.m-sw input:focus-visible+i{outline:2px solid #8fb889;outline-offset:2px}
.m-foot{display:flex;align-items:center;gap:8px;margin-top:18px}
.m-del{color:#c27c75!important}.m-del.armed{background:#f6dede!important;border-color:#eab8b8!important}
@keyframes mfade{from{opacity:0}}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.97)}}
/* edit affordances: always visible on desktop too */
.row .ibtn{opacity:.45}
.row:hover .ibtn{opacity:1}
.editable{cursor:pointer;border-radius:6px}
.editable:hover{background:rgba(155,184,154,.12)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:9px}
.row .grow{min-width:72px}
.ann .days{white-space:normal;text-align:right;font-size:12.5px;line-height:1.35;max-width:46%}
@media (max-width:900px){.ann .days{font-size:11.5px}.row{gap:7px}}