/* Local webfonts (latin subset) — self-hosted so the app never depends on
   fonts.googleapis.com, which is unreachable in mainland China and adds a
   render-blocking round trip everywhere else. CJK text falls back to the
   system font, exactly as it did before. */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/PixelifySans-400.woff2) format('woff2');}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/PixelifySans-500.woff2) format('woff2');}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/PixelifySans-600.woff2) format('woff2');}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/PixelifySans-700.woff2) format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Quicksand-500.woff2) format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Quicksand-600.woff2) format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Quicksand-700.woff2) format('woff2');}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Silkscreen-400.woff2) format('woff2');}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Silkscreen-700.woff2) format('woff2');}

:root{ --frame:#221d2b; --frame-edge:#0e0b15; --mint:#FBEBC9; --water:#76BCD2; --cream:#F5DEB3; --cream-hi:#FFF4D6; --sand:#E8C68A;
  --ink:#2D2418; --ink-soft:#7a6a52; --outline:#5C4533; --pink:#E89090; --soft:#FFD4D4; --bg-a:#2b2440; --bg-b:#3d3357; --shadow: rgba(20,12,30,.5);}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{ margin:0; min-height:100%; font-family:'Pixelify Sans',sans-serif; color:#efe7d2; background:radial-gradient(120% 90% at 50% -10%, #4a3e69 0%, var(--bg-b) 45%, var(--bg-a) 100%);
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 16px 46px; overflow-x:hidden;}
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:22px 22px;}
.title{ text-align:center; z-index:1;}
.title h1{ font-family:'Silkscreen',monospace; font-size:17px; margin:0; letter-spacing:1px; color:#ffe6b8; text-shadow:2px 2px 0 #00000055;}
.title p{ margin:6px 0 0; font-size:13px; color:#c8bce0;}
.phone{ position:relative; width:min(390px,92vw); aspect-ratio:390/812; background:var(--frame); border-radius:54px; padding:11px; box-shadow:0 0 0 2px var(--frame-edge),0 28px 60px -12px var(--shadow),inset 0 0 0 2px #ffffff10; z-index:1;}
.screen{ position:relative; width:100%; height:100%; border-radius:44px; overflow:hidden; background:linear-gradient(180deg, var(--mint) 0%, var(--mint) 65%, var(--water) 95%, var(--water) 100%); box-shadow:inset 0 0 0 2px #00000033;}
.island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:104px; height:28px; background:#000; border-radius:16px; z-index:40;}
canvas#game{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; display:block; touch-action:none;}
.statusbar{ position:absolute; top:0; left:0; right:0; height:44px; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:14px 24px 0; font-family:'Silkscreen',monospace; font-size:11px; color:var(--ink); pointer-events:none;}
.statusbar .r{ display:flex; gap:8px;}
.wxwidget{ position:absolute; top:14px; left:24px; z-index:20; display:flex; gap:9px; align-items:center; font-family:'Silkscreen',monospace; font-size:10px; color:var(--ink); pointer-events:none; max-width:46vw; overflow:hidden; white-space:nowrap;}
.wxwidget .wxone{ display:inline-flex; align-items:center; gap:2px;}
.wxwidget .wxi{ width:20px; height:20px; image-rendering:pixelated;}
.wxwidget #wxTa{ opacity:.62;}
.topbar{ position:absolute; top:50px; left:0; right:0; z-index:22; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
.daybadge{ pointer-events:auto; font-family:'Silkscreen',monospace; font-size:10px; color:var(--ink); background:var(--cream-hi); border:2px solid var(--outline); border-radius:10px; padding:5px 9px; box-shadow:0 3px 0 #00000022; display:flex; gap:8px; align-items:center;}
.daybadge i{ width:8px;height:8px;border-radius:50%; display:inline-block;}
.switcher{ display:flex; background:var(--cream-hi); border:2px solid var(--outline); border-radius:13px; padding:3px; gap:3px; box-shadow:0 3px 0 #00000022; pointer-events:auto;}
.switcher button{ border:none; background:transparent; font-family:'Silkscreen',monospace; font-size:10px; color:var(--ink-soft); padding:7px 11px; border-radius:9px; cursor:pointer; white-space:nowrap;}
.switcher button.on{ background:var(--pink); color:#fff;}
.prompt{ position:absolute; left:50%; bottom:40px; transform:translateX(-50%) translateY(8px); z-index:22; opacity:0; transition:.16s; pointer-events:none; font-family:'Silkscreen',monospace; font-size:11px; color:var(--ink); background:var(--cream-hi); border:2px solid var(--outline); border-radius:11px; padding:8px 13px; box-shadow:0 3px 0 #00000022; white-space:nowrap;}
.prompt.show{ opacity:1; transform:translateX(-50%) translateY(0);}
.prompt b{ color:var(--pink);}
.backbar{ position:absolute; top:50px; left:18px; z-index:23; opacity:0; pointer-events:none; transition:.16s;}
.backbar.show{ opacity:1; pointer-events:auto;}
.backbar button{ font-family:'Silkscreen',monospace; font-size:10px; color:var(--ink); background:var(--cream-hi); border:2px solid var(--outline); border-radius:11px; padding:8px 12px; cursor:pointer; box-shadow:0 3px 0 #00000022;}
.toast{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); z-index:69; opacity:0; pointer-events:none; transition:.2s; font-family:'Silkscreen',monospace; font-size:11px; color:var(--ink); background:var(--cream-hi); border:2px solid var(--outline); border-radius:12px; padding:11px 15px; box-shadow:0 4px 0 #00000022; max-width:72%; text-align:center; line-height:1.6;}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1);}
/* 金币变动提示：层级高于 sheet(80)，拆礼物/读信等 sheet 打开时也能看到 */
.coinnote{ position:absolute; left:50%; top:32%; transform:translate(-50%,-50%) scale(.9); z-index:90; opacity:0; pointer-events:none; transition:opacity .22s, transform .22s cubic-bezier(.2,1.2,.35,1); font-family:'Silkscreen',monospace; font-size:12px; color:#7a5a1f; background:#fff5d6; border:2px solid var(--outline); border-radius:14px; padding:10px 16px; box-shadow:0 4px 0 #00000022; max-width:74%; text-align:center; line-height:1.6;}
.coinnote.show{ opacity:1; transform:translate(-50%,-50%) scale(1);}
/* 信件到达 · 居中提醒卡（比 toast 更显眼，可点开进回忆日历） */
.bignote{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(.86); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .26s, transform .26s cubic-bezier(.2,1.25,.35,1);
  background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:17px 24px 15px;
  text-align:center; box-shadow:0 6px 0 #00000022; max-width:78%;}
.bignote.show{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; cursor:pointer;}
.bignote .bn-ic{ font-size:32px; line-height:1; margin-bottom:7px; display:inline-block; animation:bnwiggle 1.6s ease-in-out infinite;}
.bignote .bn-tt{ font-family:'Silkscreen',monospace; font-size:14px; color:var(--ink); margin-bottom:5px; letter-spacing:.5px;}
.bignote .bn-sub{ font-family:'Pixelify Sans',sans-serif; font-size:13px; color:var(--ink-soft);}
@keyframes bnwiggle{ 0%,100%{ transform:rotate(-8deg);} 50%{ transform:rotate(8deg);} }
.scrim{ position:absolute; inset:0; background:#1a0f2655; z-index:79; opacity:0; pointer-events:none; transition:.22s;}
.scrim.show{ opacity:1; pointer-events:auto;}
.sheet{ position:absolute; left:0; right:0; bottom:0; z-index:80; background:var(--cream-hi); color:var(--ink); border-top-left-radius:28px; border-top-right-radius:28px; border-top:3px solid var(--outline); transform:translateY(110%); transition:transform .28s cubic-bezier(.2,.9,.2,1); padding:12px 22px 28px; min-height:36%; max-height:80%; overflow:auto;}
.sheet.show{ transform:translateY(0);}
.grab{ width:44px;height:5px;border-radius:3px;background:#0001;margin:2px auto 14px;}
.sheet h2{ font-family:'Silkscreen',monospace; font-size:15px; margin:0 0 4px;}
.sheet .sub{ font-size:13px; color:var(--ink-soft); margin:0 0 14px;}
.sheet textarea{ width:100%; min-height:80px; border:2px solid #00000018; border-radius:14px; background:#fff; padding:11px; font-family:'Pixelify Sans',sans-serif; font-size:15px; color:var(--ink); resize:none; outline:none;}
.sheet textarea:focus{ border-color:var(--pink);}
.row{ display:flex; align-items:center; gap:11px; padding:11px 12px; background:#fff; border:2px solid #00000012; border-radius:14px; margin-bottom:9px;}
.row .ic{ width:30px;height:30px;border-radius:8px; flex:0 0 auto;}
.row .tx{ flex:1; min-width:0;} .row .tx b{ display:block; font-size:14px;} .row .tx span{ font-size:12px; color:var(--ink-soft);}
.btn{ width:100%; padding:13px; cursor:pointer; font-family:'Silkscreen',monospace; font-size:12px; color:#fff; background:var(--pink); border:3px solid var(--outline); border-radius:14px; box-shadow:0 4px 0 #b85a5a; margin-top:6px;}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #b85a5a;}
.btn.ghost{ background:var(--cream); color:var(--ink); box-shadow:0 4px 0 #c2a878;}
.btn.ghost:active{ box-shadow:0 1px 0 #c2a878;}
.btnrow{ display:flex; gap:10px;} .btnrow .btn{ flex:1;}
/* 自定义状态面板（公园牌）：奶油底卡片 */
.cs-cur{ font-family:'Pixelify Sans',sans-serif; font-size:14px; color:var(--ink); background:#fff; border:2px solid #00000012; border-radius:12px; padding:9px 12px; margin:0 0 12px; text-align:center;}
.cs-in{ width:100%; box-sizing:border-box; margin:0 0 9px; padding:11px 13px; border:2px solid #00000018; border-radius:13px; background:#fff; font-family:'Pixelify Sans',sans-serif; font-size:15px; color:var(--ink); outline:none;}
.cs-in::placeholder{ color:#b7a98c;}
.cs-in:focus{ border-color:var(--pink);}
.cs-presets{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px;}
.cs-chip{ font-family:'Pixelify Sans',sans-serif; font-size:13px; color:var(--ink); background:var(--cream); border:2px solid var(--outline); border-radius:999px; padding:7px 14px; cursor:pointer; box-shadow:0 3px 0 #c2a878;}
.cs-chip:active{ transform:translateY(2px); box-shadow:0 1px 0 #c2a878;}
/* 登录条款门槛 + 登录前协议查看器 */
.authagree{ width:100%; max-width:330px; margin-top:4px; display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5; color:#7a6a52; text-align:left; cursor:pointer; }
.authagree input{ margin-top:2px; width:16px; height:16px; accent-color:#e79aa6; flex:0 0 auto; }
.authagree a{ color:#c48a3a; text-decoration:underline; cursor:pointer; }
.authlegal{ position:absolute; inset:0; z-index:80; background:#00000055; display:flex; align-items:center; justify-content:center; padding:24px; }
.authlegal[hidden]{ display:none; }
.authlegal-card{ width:100%; max-width:340px; max-height:78vh; display:flex; flex-direction:column; background:#fffef9; border-radius:18px; padding:18px 18px 14px; box-shadow:0 12px 40px -12px #00000055; }
.authlegal-title{ margin:0 0 8px; font-size:18px; color:#5b4633; text-align:center; }
.authlegal-body{ overflow-y:auto; font-size:13px; line-height:1.75; color:#5a4a36; white-space:pre-wrap; text-align:left; -webkit-overflow-scrolling:touch; }
.authlegal .authbtn.confirm{ margin-top:12px; flex:0 0 auto; }
/* 举报入口：收到内容底部一个不起眼的「···」 */
.report-mini{ display:inline-block; font-size:12px; color:#c9bfae; opacity:.55; letter-spacing:3px; cursor:pointer; padding:4px 14px; }
.report-mini:active{ opacity:1; }
/* 设置页：行 + 危险按钮 */
.setrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px; border-bottom:1px solid rgba(194,168,120,.28); font-family:'Pixelify Sans',sans-serif; }
.setrow .setk{ font-size:15px; color:var(--ink); font-weight:600; }
.setrow .setv{ font-size:13px; color:var(--ink-soft); max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setrow .setgo{ font-size:20px; color:#c2a878; line-height:1; }
.setrow.tap{ cursor:pointer; } .setrow.tap:active{ background:rgba(232,200,122,.14); }
/* Settings → 通知: group headings, on/off switches, quiet-hours times */
.setgrp{ margin:16px 4px 2px; font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:.06em; color:#b08a52; }
.setsw{ flex:0 0 auto; position:relative; width:46px; height:28px; padding:0; border:2px solid var(--outline); border-radius:999px; background:#eadcc0; cursor:pointer; transition:background .2s; }
.setsw i{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; border:1.5px solid var(--outline); transition:transform .2s; }
.setsw.on{ background:var(--pink); }
.setsw.on i{ transform:translateX(18px); }
.setq .setk{ display:flex; align-items:center; gap:8px; font-weight:500; }
.setq.off{ opacity:.45; }
.setsel{ font-family:'Pixelify Sans',sans-serif; font-size:15px; color:var(--ink); background:#fff; border:2px solid #00000018; border-radius:10px; padding:5px 8px; }
.sheet .setnote{ font-size:12px; color:var(--ink-soft); margin:8px 4px 12px; line-height:1.5; }
.setdanger{ width:100%; padding:13px; cursor:pointer; font-family:'Silkscreen',monospace; font-size:12px; color:#fff; background:#c85a4a; border:3px solid var(--outline); border-radius:14px; box-shadow:0 4px 0 #9a3f34; margin-top:6px; }
.setdanger:active{ transform:translateY(3px); box-shadow:0 1px 0 #9a3f34; }
.setdanger:disabled{ opacity:.6; }
/* 换外观选择器 */
.hgrid{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.hopt{ width:62px; height:62px; object-fit:contain; image-rendering:pixelated; background:#fff7e6; border:2px solid #00000018; border-radius:12px; padding:5px; cursor:pointer; }
.hopt.sel{ border-color:var(--pink); box-shadow:0 0 0 2px var(--pink); }
.hint{ z-index:1; font-size:12px; color:#b3a6cf; text-align:center; max-width:360px;}

/* ===== 装修模式 ===== */
.editfab{ position:absolute; left:14px; bottom:14px; z-index:25; display:none;
  font-family:'Pixelify Sans',sans-serif; font-size:14px; color:#221d2b; background:var(--cream-hi);
  border:none; border-radius:14px; padding:9px 16px; font-weight:700; box-shadow:0 3px 0 #00000035; }
.editfab.show{ display:inline-block; }
.editdrawer{ position:absolute; left:0; right:0; bottom:0; height:46%; z-index:30; display:none;
  flex-direction:column; background:rgba(251,235,201,.97); border-top:3px solid #5C4533;
  border-radius:18px 18px 0 0; box-shadow:0 -6px 20px #00000040; }
.editdrawer.show{ display:flex; }
.editdrawer-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px 2px; }
.editactions{ display:flex; gap:6px; }
.editactions button{ font-family:'Pixelify Sans',sans-serif; font-size:12px; color:#7a6a52; background:#0000000d;
  border:none; border-radius:9px; padding:6px 12px; font-weight:700; }
.editdrawer-head>button#editDone{ font-family:'Pixelify Sans',sans-serif; font-size:13px; color:#fff; background:var(--pink);
  border:none; border-radius:10px; padding:6px 18px; font-weight:700; box-shadow:0 2px 0 #00000030; }
.edittabs{ display:flex; gap:6px; padding:6px 10px 4px; }
.edittabs button{ flex:1; font-family:'Pixelify Sans',sans-serif; font-size:13px; color:#7a6a52;
  background:#0000000d; border:none; border-radius:10px; padding:7px 0; font-weight:700; }
.edittabs button.on{ color:#fff; background:var(--pink); box-shadow:0 2px 0 #00000030; }
.editgrid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
.editcell{ min-width:0; aspect-ratio:1; background:#fff7e6; border:2px solid #e0c48a; border-radius:12px;
  display:flex; align-items:center; justify-content:center; padding:6px; touch-action:none; }
.editcell img{ max-width:100%; max-height:100%; image-rendering:auto; pointer-events:none; -webkit-user-drag:none; }
.dragghost{ position:fixed; z-index:200; pointer-events:none; opacity:.85; transform:translate(-50%,-50%);
  max-width:90px; max-height:90px; }

/* ===== 便签 / 冒泡 编辑器 ===== */
.noteeditor{ position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(34,29,43,.45); backdrop-filter:blur(2px); }
.noteeditor.show{ display:flex; }
.notepanel{ width:78%; max-width:300px; background:var(--cream-hi); border:3px solid var(--outline);
  border-radius:18px; padding:16px; box-shadow:0 10px 30px #00000050; }
.bubblehint{ font-family:'Pixelify Sans',sans-serif; font-size:14px; color:#7a6a52; text-align:center; margin-bottom:10px; font-weight:700; }
.notepreview{ position:relative; background:#fffdf5; border:2px dashed #d9c39a; border-radius:12px; padding:12px; min-height:120px; }
.notepreview.small{ min-height:70px; }
.notepreview textarea{ width:100%; height:100%; min-height:96px; border:none; outline:none; resize:none; background:transparent;
  font-family:'Pixelify Sans',sans-serif; font-size:15px; color:#3a2f20; line-height:1.5; }
.notepreview.small textarea{ min-height:46px; }
.notecount{ position:absolute; right:10px; bottom:6px; font-size:10px; color:#b0a080; font-family:'Silkscreen',monospace; }
.notecolors{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px 0; }
.notecolors .nc{ width:38px; height:38px; border-radius:8px; border:2px solid transparent; background-size:contain;
  background-repeat:no-repeat; background-position:center; cursor:pointer; }
.notecolors .nc.on{ border-color:var(--pink); box-shadow:0 0 0 2px #E8909060; }
.noterow{ display:flex; gap:10px; }
.nbtn{ flex:1; font-family:'Pixelify Sans',sans-serif; font-size:14px; font-weight:700; color:#fff; background:var(--pink);
  border:none; border-radius:12px; padding:10px 0; box-shadow:0 3px 0 #00000030; }
.nbtn.ghost{ background:#0000000f; color:#7a6a52; box-shadow:none; }

/* ===== 回忆日历 ===== */
.caloverlay{ position:absolute; inset:0; z-index:65; display:none; align-items:center; justify-content:center;
  background:rgba(34,29,43,.5); backdrop-filter:blur(3px); }
.caloverlay.show{ display:flex; }
.calpanel{ width:86%; max-width:340px; max-height:84%; overflow:hidden; display:flex; flex-direction:column;
  background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:14px; box-shadow:0 10px 30px #00000050; }
.calhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.calhead span{ font-family:'Quicksand',sans-serif; font-size:17px; font-weight:700; color:#5a4a36; }
.calhead button{ font-family:'Pixelify Sans',sans-serif; font-size:20px; color:#fff; background:var(--pink);
  border:none; border-radius:10px; width:38px; height:34px; box-shadow:0 2px 0 #00000030; }
.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.caldow{ text-align:center; font-size:12px; color:#b0a080; font-family:'Quicksand',sans-serif; font-weight:700; padding:2px 0; }
.calcell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; color:#5a4a36; background:#fff7e6; border-radius:9px; }
.calcell.future{ color:#cfc4ad; background:#0000000a; }
/* what happened that day: one small dot per kind (messages / focus / other moments) */
.caldots{ position:absolute; left:0; right:0; bottom:4px; display:flex; justify-content:center; gap:3px; pointer-events:none; }
.caldots i{ width:5px; height:5px; border-radius:50%; }
.caldots .d-msg{ background:#E8909A; }
.caldots .d-focus{ background:#8fb57a; }
.caldots .d-moment{ background:#E9B949; }
.calcell.today{ box-shadow:inset 0 0 0 1.6px #E8909A; }
.calcell.sel{ background:var(--pink); color:#fff; box-shadow:0 0 0 2px #E8909060; }
.calcell.sel .caldots i{ background:#fff; opacity:.92; }
.mood-focus{ margin-top:14px; }
.calday{ flex:1; overflow-y:auto; margin:12px 0; min-height:80px; }
.caldaytitle{ font-family:'Quicksand',sans-serif; font-size:13px; color:#7a6a52; margin-bottom:8px; font-weight:700; }
.calitem{ display:flex; gap:8px; padding:8px; background:#fffdf5; border-radius:10px; margin-bottom:7px; border:1px solid #ecdcb8; }
.calitem .ci-ic{ font-size:18px; }
.calitem .ci-ic.ic-letter .uic{ transform:scale(.85); }   /* 日历里信件图标稍微偏大 → 缩 15% */
.calitem .ci-b{ flex:1; }
.calitem .ci-meta{ font-size:11px; color:#b0a080; font-family:'Quicksand',sans-serif; font-weight:600; margin-bottom:2px; }
.calitem .ci-tx{ font-size:14px; color:#3a2f20; font-family:'Quicksand',sans-serif; font-weight:600; line-height:1.4; white-space:pre-wrap; }
.calempty{ text-align:center; color:#b0a080; font-size:13px; font-family:'Quicksand',sans-serif; padding:20px 0; }

/* 日历条目可点 + 信件详情 */
.calitem{ cursor:pointer; align-items:center; }
.calitem .ci-go{ font-size:20px; color:#d8c8a0; font-family:'Quicksand',sans-serif; padding-left:4px; }
.calitem:active{ background:#fdf3dc; }
.letterview{ background:#fffdf5; border:2px solid #ecdcb8; border-radius:14px; padding:16px; margin-bottom:12px; }
.letterview .lv-head{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; color:#5a4a36; text-align:center; }
.letterview .lv-date{ font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080; text-align:center; margin:2px 0 12px; }
.letterview .lv-body{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:15px; color:#3a2f20; line-height:1.7; white-space:pre-wrap;
  border-top:1px dashed #e0cfa0; border-bottom:1px dashed #e0cfa0; padding:12px 0; max-height:200px; overflow-y:auto; }
.letterview .lv-attach{ display:flex; gap:8px; margin-top:12px; }
.letterview .lv-att{ flex:1; text-align:center; font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080;
  background:#0000000a; border-radius:9px; padding:8px 4px; }

/* 特殊日子 */
.calcell.special{ background:#FFF1C2; box-shadow:inset 0 0 0 2px #F2C14E; }
.calcell.sel.special{ background:var(--pink); }
.calspecial{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
  background:#FFF6DD; border:1px solid #F2C14E; border-radius:10px; padding:8px 10px; }
.calspecial span{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:#8a6a1e; }
.calspecial button{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#fff; background:var(--pink);
  border:none; border-radius:8px; padding:6px 12px; }
.calspecial[data-empty] button, .calspecial:not(.on):not(.editing) button{ background:#F2C14E; color:#5a4a36; width:100%; }
.calspecial.editing{ background:#FFF6DD; }
.calspecial input{ flex:1; border:2px solid #F2C14E; border-radius:8px; padding:7px 9px; outline:none;
  font-family:'Quicksand',sans-serif; font-size:13px; color:#5a4a36; background:#fff; }

/* 心情选择 */
.moodgrid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:8px 0 4px; }
.moodgrid .mood{ width:62px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  border-radius:12px; padding:6px 2px; }
.moodgrid .mood img{ width:50px; height:50px; image-rendering:auto; }
.moodgrid .mood span{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:11px; color:#7a6a52; }
.moodgrid .mood:active{ background:#fdf3dc; }
.moodview{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0; }
.moodview img{ width:84px; height:84px; image-rendering:auto; }
.moodview .mv-tx{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; color:#5a4a36; }
/* 日历里的心情行 */
.calmood{ display:flex; gap:14px; justify-content:center; margin-bottom:10px; }
.calmood .cm{ display:flex; align-items:center; gap:5px; font-family:'Quicksand',sans-serif; font-weight:600; font-size:12px; color:#7a6a52; }
.calmood .cm img{ width:28px; height:28px; image-rendering:auto; }

/* ===== 阁楼 ===== */
.atticoverlay{ position:absolute; inset:0; z-index:66; display:none; align-items:center; justify-content:center;
  background:rgba(34,29,43,.5); backdrop-filter:blur(3px); }
.atticoverlay.show{ display:flex; }
.atticbox{ width:88%; max-width:350px; max-height:86%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:14px; box-shadow:0 10px 30px #00000050; }
.atc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.atc-head h3{ margin:0; font-family:'Quicksand',sans-serif; font-weight:700; font-size:17px; color:#5a4a36; }
.atc-head .atc-btns{ display:flex; gap:6px; }
.atc-head button{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#fff; background:var(--pink);
  border:none; border-radius:9px; padding:7px 12px; }
.atc-head button.g{ background:#0000000f; color:#7a6a52; }
.atc-menu button{ display:block; width:100%; font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; color:#5a4a36;
  background:#fffdf5; border:2px solid #ecdcb8; border-radius:12px; padding:16px; margin-bottom:10px; text-align:left; }
.atc-list{ flex:1; overflow-y:auto; }
.atc-item{ background:#fffdf5; border:1px solid #ecdcb8; border-radius:11px; padding:11px 12px; margin-bottom:8px; cursor:pointer; }
.atc-item .ai-date{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#8a7a5e; margin-bottom:3px; }
.atc-item .ai-prev{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:13px; color:#5a4a36; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atc-empty{ text-align:center; color:#b0a080; font-size:13px; font-family:'Quicksand',sans-serif; padding:30px 0; }
.atc-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.atc-tabs button{ flex:1; font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:#7a6a52;
  background:#0000000d; border:none; border-radius:10px; padding:8px 0; }
.atc-tabs button.on{ color:#fff; background:var(--pink); }
.atc-editor{ flex:1; display:flex; flex-direction:column; }
.atc-editor textarea{ flex:1; min-height:200px; border:2px solid #ecdcb8; border-radius:12px; padding:12px; resize:none; outline:none;
  font-family:'Quicksand',sans-serif; font-weight:500; font-size:15px; color:#3a2f20; line-height:1.6; background:#fffdf5; }
.atc-save{ font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080; text-align:right; margin-top:6px; min-height:14px; }
.atc-bottle-tx{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:15px; color:#3a2f20; line-height:1.7; white-space:pre-wrap;
  background:#fffdf5; border:2px solid #ecdcb8; border-radius:12px; padding:14px; }

/* ===== 写信编辑器 ===== */
.letteroverlay{ position:absolute; inset:0; z-index:67; display:none; align-items:center; justify-content:center;
  background:rgba(34,29,43,.5); backdrop-filter:blur(3px); }
.letteroverlay.show{ display:flex; }
.letterbox{ width:88%; max-width:350px; max-height:88%; display:flex; flex-direction:column; overflow-y:auto;
  background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:14px; box-shadow:0 10px 30px #00000050; }
.lc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lc-head h3{ margin:0; font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; color:#5a4a36; }
.lc-head button{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:#fff; background:var(--pink); border:none; border-radius:9px; padding:7px 14px; }
.lc-head button.g{ background:#0000000f; color:#7a6a52; }
.letterbox textarea{ min-height:120px; border:2px solid #ecdcb8; border-radius:12px; padding:12px; resize:none; outline:none;
  font-family:'Quicksand',sans-serif; font-weight:500; font-size:15px; color:#3a2f20; line-height:1.6; background:#fffdf5; }
.lc-count{ text-align:right; font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080; margin:4px 2px; }
.lc-attach-btns{ display:flex; gap:8px; margin:6px 0; }
.lc-attach-btns button{ flex:1; font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:#7a6a52;
  background:#0000000d; border:none; border-radius:10px; padding:9px 0; }
.lc-attach-btns button.rec{ background:#E8607A; color:#fff; }
.lc-previews{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.lc-previews .pv{ position:relative; width:64px; height:64px; border-radius:9px; overflow:hidden; border:1px solid #ecdcb8; }
.lc-previews .pv img{ width:100%; height:100%; object-fit:cover; }
.lc-previews .pv .x{ position:absolute; top:1px; right:1px; width:18px; height:18px; border-radius:50%; background:#E8607A; color:#fff;
  font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lc-previews .audio{ display:flex; align-items:center; gap:6px; background:#fff7e6; border:1px solid #ecdcb8; border-radius:9px; padding:6px 10px;
  font-family:'Quicksand',sans-serif; font-size:12px; color:#7a6a52; }
.lc-delivery{ display:flex; flex-direction:column; gap:8px; margin-top:10px; border-top:1px dashed #e0cfa0; padding-top:12px; }
.lc-delivery label{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:14px; color:#5a4a36; display:flex; align-items:center; gap:8px; }
.lc-delivery input[type=date]{ font-family:'Quicksand',sans-serif; font-size:13px; border:2px solid #ecdcb8; border-radius:8px; padding:4px 8px; }
.lc-fly{ position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); font-size:42px; opacity:0; pointer-events:none; }
.lc-fly.go{ animation:flyaway 1s ease forwards; }
@keyframes flyaway{ 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-320px) scale(.5) rotate(12deg)} }
/* 日历信件里的照片/语音 */
.lv-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.lv-photos img{ width:78px; height:78px; object-fit:cover; border-radius:9px; border:1px solid #ecdcb8; cursor:zoom-in; }
/* 照片灯箱 */
.lightbox{ position:absolute; inset:0; z-index:95; display:none; align-items:center; justify-content:center; background:rgba(34,24,14,.55); }
.lightbox.show{ display:flex; }
.lb-panel{ position:relative; background:#fff7ea; border:2px solid #e7d3ad; border-radius:20px; padding:14px; max-width:88%; max-height:84%; display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:0 12px 34px rgba(0,0,0,.35); }
.lb-imgwrap{ border-radius:13px; overflow:hidden; background:#f0e6d2; box-shadow:inset 0 0 0 1px #ecdcb8; }
.lb-imgwrap img{ display:block; max-width:76vw; max-height:58vh; object-fit:contain; image-rendering:auto; }
.lb-row{ display:flex; align-items:center; gap:16px; }
.lb-nav{ font-size:22px; line-height:1; width:38px; height:38px; border-radius:50%; border:1px solid #e7d3ad; background:#fff; color:#8a744f; cursor:pointer; }
.lb-save{ padding:9px 20px; border-radius:20px; border:none; background:#f4b6c2; color:#fff; font-weight:700; cursor:pointer; }
.lb-x{ position:absolute; top:-12px; right:-12px; width:32px; height:32px; border-radius:50%; border:none; background:#8a744f; color:#fff; font-size:15px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); }
/* 界面图标 tile（替代 emoji）：随所在文字字号缩放，基线对齐 */
.uic{ display:inline-block; height:1.05em; width:auto; vertical-align:-0.18em; image-rendering:auto; }
/* 信件线程：多封往来 = 铺满的信纸样式；仅“我 · 日期”这一行靠右 */
.lt-msg{ margin:12px 0; }
.lt-who{ font-size:11px; color:#b0956a; margin-bottom:3px; font-family:Quicksand,sans-serif; }
.lt-me .lt-who{ text-align:right; }
.lc-reply-hint{ margin:2px 2px 8px; padding:7px 12px; background:#fbeef1; border:1px solid #f0d6dd; border-radius:12px; color:#a86a7a; font-size:13px; }
/* 纪念日烟花（透明覆盖层，主页面透出来）*/
.fireworks{ pointer-events:auto; }
.bn-ic .uic{ height:1em; vertical-align:-0.1em; }
.lv-audio{ margin-top:10px; }
.lv-audio audio{ width:100%; height:34px; }

/* ===== 漂流瓶流程（期限/塔罗/到岸） ===== */
.bottleoverlay{ position:absolute; inset:0; z-index:68; display:none; align-items:center; justify-content:center;
  background:rgba(20,30,48,.6); backdrop-filter:blur(4px); }
.bottleoverlay.show{ display:flex; }
.bottlebox{ width:90%; max-width:360px; max-height:88%; overflow-y:auto; display:flex; flex-direction:column; align-items:center;
  background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:18px 16px; box-shadow:0 12px 34px #00000060; }
.bt-title{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; color:#5a4a36; text-align:center; margin-bottom:14px; }
.bt-step{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#8a7a5e; background:#0000000c; border-radius:999px; padding:3px 11px; margin-bottom:10px; }
/* the next bottle in a row of them washes in */
.bottlebox.bt-next{ animation:btNext .45s ease; }
@keyframes btNext{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.bt-sub{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:13px; color:#8a7a5e; text-align:center; margin:6px 0; }
.bt-years{ display:flex; gap:10px; justify-content:center; }
.bt-years button{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; color:#5a4a36; background:#fffdf5;
  border:2px solid #e0c48a; border-radius:14px; padding:16px 18px; min-width:64px; }
.bt-or{ display:flex; align-items:center; gap:8px; color:#b0a080; font-family:'Quicksand',sans-serif; font-size:12px; margin:16px 0 10px; width:100%; }
.bt-or::before,.bt-or::after{ content:''; flex:1; height:1px; background:#e0cfa0; }
.bt-tarot-entry{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,#6a5a9a,#3a4a8a); border:none; border-radius:14px; padding:14px 18px; width:100%; box-shadow:0 3px 0 #00000035; }
.bt-decks{ display:flex; gap:12px; justify-content:center; }
.bt-deck{ cursor:pointer; border-radius:12px; padding:6px; border:2px solid transparent; }
.bt-deck img{ width:96px; border-radius:10px; display:block; }
.bt-deck span{ display:block; text-align:center; font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#7a6a52; margin-top:5px; }
.bt-cards{ display:flex; gap:10px; justify-content:center; margin:14px 0; perspective:800px; }
.bt-card{ width:90px; height:116px; cursor:pointer; position:relative; transition:transform .25s; }
.bt-card:active{ transform:translateY(-4px); }
.bt-card img{ width:100%; height:100%; border-radius:10px; box-shadow:0 4px 10px #00000040; image-rendering:auto; }
.bt-card.flipping{ animation:cardflip .6s ease forwards; }
@keyframes cardflip{ 0%{transform:rotateY(0) scale(1)} 50%{transform:rotateY(90deg) scale(1.1)} 100%{transform:rotateY(0) scale(1.15)} }
.bt-card.dim{ opacity:.35; transform:scale(.9); transition:.4s; pointer-events:none; }
.bt-btnrow{ display:flex; gap:10px; width:100%; margin-top:8px; }
.bt-btnrow button{ flex:1; font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px; border:none; border-radius:12px; padding:11px 0; }
.bt-btnrow .primary{ background:var(--pink); color:#fff; box-shadow:0 3px 0 #00000030; }
.bt-btnrow .ghost{ background:#0000000f; color:#7a6a52; }
.bt-arrive-tx{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:15px; color:#3a2f20; line-height:1.7; white-space:pre-wrap;
  background:#fffdf5; border:2px solid #ecdcb8; border-radius:12px; padding:14px; width:100%; box-sizing:border-box; margin:6px 0; }
.bt-from{ font-family:'Quicksand',sans-serif; font-size:12px; color:#8a7a5e; text-align:right; width:100%; margin-bottom:8px; }

/* 塔罗：停留显示选中的牌 + 具体释义 */
.bt-card.big{ width:150px; height:193px; margin:6px auto; }
.bt-meaning{ width:100%; margin-top:6px; }
.bt-meaning-link{ text-align:right; font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:#6a5a9a; cursor:pointer; padding:4px 2px; }
.bt-meaning-link:active{ opacity:.6; }
.bt-meaning-tx{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:14px; color:#3a2f20; line-height:1.75; white-space:pre-wrap;
  background:#fffdf5; border:2px solid #e6d6f0; border-radius:12px; padding:13px; max-height:200px; overflow-y:auto; }
.bt-meaning-note{ font-family:'Quicksand',sans-serif; font-size:11px; color:#a090c0; text-align:center; margin-top:8px; }
/* ---- tarot: constellation-orbit card pick ---- */
.bt-orbit{ position:relative; width:100%; max-width:300px; height:288px; margin:8px auto 2px; overflow:hidden; touch-action:none; user-select:none; }
.bt-ocanvas{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.bt-ostar{ position:absolute; z-index:2; width:24px; height:24px; margin:-12px 0 0 -12px; font-size:20px; line-height:24px; text-align:center; color:#e6b14e; pointer-events:none; }
.bt-oglow{ position:absolute; z-index:1; width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%; background:radial-gradient(closest-side, rgba(230,177,78,.5), rgba(230,177,78,.16) 45%, transparent 70%); opacity:0; pointer-events:none; }
.bt-ocard{ position:absolute; left:0; top:0; width:60px; height:78px; perspective:520px; z-index:5; cursor:pointer; will-change:transform; }
.bt-ocard .oin{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.5,.05,.3,1.2); }
.bt-oface{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:9px; overflow:hidden; }
.bt-oface img{ width:100%; height:100%; display:block; border-radius:9px; box-shadow:0 3px 8px #00000033; image-rendering:auto; }
.bt-oface.front{ transform:rotateY(180deg); }

/* ===== 探索小屋：每周问答 ===== */
.ex-card{ background:linear-gradient(135deg,#fff6e9,#fdeccf); border:2px solid #e6cfa0; border-radius:16px; padding:16px 14px; margin:6px 0 12px; }
.ex-qlabel{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:12px; color:#bfa46a; text-align:center; letter-spacing:2px; margin-bottom:8px; }
.ex-q{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; line-height:1.6; color:#5a4a36; text-align:center; }
.ex-count{ text-align:right; font-family:'Quicksand',sans-serif; font-size:12px; color:#b0a080; margin:-4px 2px 8px; }
.ex-date{ text-align:center; font-family:'Quicksand',sans-serif; font-size:12px; color:#b0a080; margin:10px 0; }
.ex-cmp{ display:flex; gap:10px; margin:8px 0; }
.ex-ans{ flex:1; border-radius:14px; padding:12px 10px; min-height:90px; }
.ex-ans-h{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; margin-bottom:8px; }
.ex-ans-b{ font-family:'Quicksand',sans-serif; font-weight:500; font-size:14px; line-height:1.7; color:#3a2f20; white-space:pre-wrap; word-break:break-word; }
.ex-me{ background:#fde9f1; border:2px solid #f3c6da; } .ex-me .ex-ans-h{ color:#d36a9a; }
.ex-ta{ background:#e6eefb; border:2px solid #bcd0f0; } .ex-ta .ex-ans-h{ color:#5a7ac0; }
/* 解锁动画：两封信纸展开 */
.ex-cmp.anim .ex-ans{ opacity:0; transform:translateY(14px) scale(.95); transition:opacity .5s ease, transform .5s ease; }
.ex-cmp.anim.open .ex-me{ opacity:1; transform:none; }
.ex-cmp.anim.open .ex-ta{ opacity:1; transform:none; transition-delay:.18s; }
.ex-hist{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; margin:6px 0 12px; }
.ex-hist-item{ display:flex; flex-direction:column; gap:4px; text-align:left; background:#fffdf5; border:2px solid #ecdcb8; border-radius:12px; padding:11px 12px; cursor:pointer; }
.ex-hist-item:active{ background:#f6ecd6; }
.ex-hist-q{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px; color:#5a4a36; line-height:1.5; }
.ex-hist-d{ font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080; }

/* ===== 商店 / 背包 / 礼物 ===== */
/* 金币 + 背包并排容器（右下角）。子按钮沿用 .editfab 的 .show 显隐 */
.fabpair{ position:absolute; right:14px; bottom:14px; z-index:25; display:flex; gap:8px; align-items:flex-end; pointer-events:none; }
.fabpair .editfab{ position:static; pointer-events:auto; }
.giftfab{ background:var(--cream-hi); }
.coinfab{ background:var(--cream-hi); }   /* 金币按钮：仅商店内出现，在背包左侧 */

/* 语音录制面板：按住圆形指纹录音、松开发送 */
.voiceoverlay{ position:absolute; inset:0; z-index:82; display:none; align-items:center; justify-content:center; background:rgba(34,29,43,.5); backdrop-filter:blur(3px); }
.voiceoverlay.show{ display:flex; }
.vp-box{ width:78%; max-width:270px; background:var(--cream-hi); border:2px solid var(--outline); border-radius:22px; padding:20px 20px 16px; text-align:center; box-shadow:0 14px 34px -10px #0007; }
.vp-title{ font-family:'Silkscreen',monospace; font-size:12px; color:var(--ink); margin-bottom:4px; }
.vp-time{ font-family:'Silkscreen',monospace; font-size:20px; color:var(--ink-soft); letter-spacing:1px; margin-bottom:14px; }
.vp-mic{ width:120px; height:120px; border-radius:50%; border:2px solid var(--outline); cursor:pointer; margin:0 auto 14px; position:relative; touch-action:none; -webkit-user-select:none; user-select:none;
  background: repeating-radial-gradient(circle at 50% 44%, #caa46e 0 1.5px, transparent 1.5px 8px), radial-gradient(circle at 50% 44%, #f6e7c8, #e9d3a8);
  box-shadow:0 4px 0 #00000022, inset 0 0 0 3px #ffffffcc; transition:transform .1s; }
.vp-mic:active{ transform:scale(.96); }
.vp-mic .vp-fp{ position:absolute; left:50%; bottom:15px; transform:translateX(-50%); width:24px; height:auto; opacity:.75; pointer-events:none; }
.vp-mic.rec{ background: repeating-radial-gradient(circle at 50% 44%, #e08a8a 0 1.5px, transparent 1.5px 8px), radial-gradient(circle at 50% 44%, #ffdada, #f3b0b0); animation:vpPulse 1.1s ease-in-out infinite; }
@keyframes vpPulse{ 0%,100%{ box-shadow:0 4px 0 #00000022, inset 0 0 0 3px #ffffffcc, 0 0 0 0 #e08a8a55; } 50%{ box-shadow:0 4px 0 #00000022, inset 0 0 0 3px #ffffffcc, 0 0 0 14px #e08a8a00; } }
.vp-hint{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; color:var(--ink-soft); margin-bottom:14px; }

/* 一起清单面板（书架触发；镜像 attic/letter 的居中模态） */
.bucketoverlay{ position:absolute; inset:0; z-index:66; display:none; align-items:center; justify-content:center; background:rgba(34,29,43,.5); backdrop-filter:blur(3px); }
.bucketoverlay.show{ display:flex; }
.bucketbox{ position:relative; width:88%; max-width:350px; max-height:86%; display:flex; flex-direction:column; overflow:hidden; background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:14px; box-shadow:0 10px 30px #00000050; }
.bk-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bk-head h3{ margin:0; font:700 16px 'Quicksand',sans-serif; color:#5a4a36; display:flex; align-items:center; gap:5px; }
.bk-head .g{ background:#0000000f; color:#7a6a52; border:none; border-radius:9px; padding:7px 12px; font:700 13px 'Quicksand',sans-serif; cursor:pointer; }
.bk-tabs{ display:flex; gap:6px; margin-bottom:11px; }
.bk-tabs button{ flex:1; font:700 13px 'Quicksand',sans-serif; color:#7a6a52; background:#0000000d; border:none; border-radius:10px; padding:8px 0; cursor:pointer; }
.bk-tabs button.on{ color:#fff; background:var(--pink); }
.bk-add{ display:flex; gap:8px; margin-bottom:12px; }
.bk-in,.bk-inedit{ flex:1; min-width:0; border:2px solid #ecdcb8; border-radius:12px; background:#fffdf5; padding:9px 12px; font:500 15px 'Quicksand',sans-serif; color:#3a2f20; outline:none; }
.bk-in:focus,.bk-inedit:focus{ border-color:var(--pink); }
.bk-addbtn{ width:44px; flex:0 0 auto; border:none; border-radius:12px; background:var(--pink); color:#fff; font:700 20px 'Quicksand',sans-serif; box-shadow:0 3px 0 #00000030; cursor:pointer; }
.bk-body{ flex:1; overflow-y:auto; }
.bk-item{ display:flex; align-items:center; gap:10px; background:#fffdf5; border:1px solid #ecdcb8; border-left:3px solid var(--sand); border-radius:0 12px 12px 0; padding:10px 11px; margin-bottom:8px; }
.bk-item.own{ border-left-color:var(--pink); }
.bk-item.done{ opacity:.72; border-left-color:#d8c8a0; }
.bk-box{ flex:0 0 auto; width:24px; height:24px; border:2px solid #d9c39a; border-radius:7px; background:#fffdf5; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.bk-box:active{ transform:scale(.92); }
.bk-box.on{ background:transparent; border-color:transparent; }   /* 已完成：透明底，让 check 徽章本身铺满 */
.bk-box.on .uic{ height:24px; }
.bk-tx{ flex:1; min-width:0; }
.bk-t{ font:500 15px 'Quicksand',sans-serif; color:#3a2f20; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.bk-item.done .bk-t{ color:#b0a080; text-decoration:line-through; text-decoration-color:#c9b98f; }
.bk-meta{ font:600 11px 'Quicksand',sans-serif; color:#b0a080; margin-top:3px; }
.bk-meta .who.me{ color:#d36a9a; } .bk-meta .who.ta{ color:#5a7ac0; } .bk-meta .done-stamp{ color:#c79a3a; }
.bk-ed,.bk-del{ flex:0 0 auto; border:none; background:transparent; color:#c3b592; font:700 15px 'Quicksand',sans-serif; padding:2px 6px; cursor:pointer; }
.bk-delmini{ flex:0 0 auto; display:flex; align-items:center; gap:5px; font:700 12px 'Quicksand',sans-serif; color:#c08a6a; }
.bk-delmini button{ border:none; border-radius:8px; padding:4px 9px; font:700 12px 'Quicksand',sans-serif; cursor:pointer; }
.bk-delmini button[data-del-yes]{ background:#e79; color:#fff; }
.bk-delmini button[data-del-no]{ background:#0000000f; color:#7a6a52; }
.bk-hint{ text-align:center; font:600 12px 'Quicksand',sans-serif; color:#b0a080; margin:14px 0 9px; border-top:1px dashed #e0cfa0; padding-top:12px; }
.bk-sugs{ display:flex; flex-wrap:wrap; gap:7px; }
.bk-sug{ border:2px dashed #e0c48a; background:#fff7e6; border-radius:14px; padding:6px 11px; font:600 13px 'Quicksand',sans-serif; color:#8a6a3e; cursor:pointer; text-align:left; }
.bk-sug:active{ background:#fdf0d6; }
.bk-empty{ text-align:center; color:#b0a080; font:500 14px 'Quicksand',sans-serif; padding:26px 12px; line-height:1.9; }
/* 心愿完成照片：完成面板预览 + 日历详情小图 */
.wish-photo{ text-align:center; margin:8px 0; }
.wish-photo img{ max-width:62%; max-height:170px; border-radius:12px; border:2px solid #ecdcb8; image-rendering:auto; }
.wish-photo-h{ font:600 12px 'Quicksand',sans-serif; color:#b0a080; margin-top:5px; }
.todo-photo{ text-align:center; margin:2px 0 10px; }
.todo-photo img{ max-width:72%; max-height:200px; border-radius:12px; border:2px solid #ecdcb8; cursor:pointer; image-rendering:auto; }
.bk-spark{ position:absolute; left:50%; top:46%; width:20px; height:20px; margin:-10px 0 0 -10px; pointer-events:none; image-rendering:pixelated; animation:bkBurst .8s ease-out forwards; }
@keyframes bkBurst{ 0%{ transform:translate(0,0) scale(.2); opacity:0; } 30%{ opacity:1; } 100%{ transform:translate(var(--dx),var(--dy)) scale(1.15); opacity:0; } }

/* ── 本月心情统计（日历里点标题 / 左滑切换） ── */
.tappable{ cursor:pointer; }
#calTitle.tappable{ text-decoration:underline dotted #cdbb92; text-underline-offset:3px; }   /* the pop-up: tap for the month's moods */
#calMood{ display:none; flex:1; overflow-y:auto; margin:4px 0 10px; }
#calMood.show{ display:flex; flex-direction:column; }
.mst-sub{ text-align:center; font:700 12px 'Quicksand',sans-serif; color:#b0a080; margin-bottom:10px; }
.mst-cols{ display:flex; gap:10px; }
.mst-col{ flex:1; min-width:0; background:#fffdf5; border:1px solid #ecdcb8; border-radius:14px; padding:10px 9px; }
.mst-col.mst-ta{ border-top:3px solid #5a7ac0; }
.mst-col.mst-me{ border-top:3px solid #d36a9a; }
.mst-who{ text-align:center; font:700 14px 'Quicksand',sans-serif; margin-bottom:2px; }
.mst-ta .mst-who{ color:#5a7ac0; } .mst-me .mst-who{ color:#d36a9a; }
.mst-total{ text-align:center; font:600 11px 'Quicksand',sans-serif; color:#b0a080; margin-bottom:8px; }
.mst-top{ text-align:center; margin-bottom:9px; }
.mst-top img{ width:36px; height:36px; image-rendering:auto; display:block; margin:0 auto 2px; }
.mst-top span{ font:700 11px 'Quicksand',sans-serif; color:#7a6a52; }
.mst-row{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.mst-row img{ width:20px; height:20px; image-rendering:auto; flex:0 0 auto; }
.mst-bar{ flex:1; height:8px; background:#efe4c8; border-radius:5px; overflow:hidden; }
.mst-bar i{ display:block; height:100%; border-radius:5px; }
.mst-ta .mst-bar i{ background:#8fb0e0; } .mst-me .mst-bar i{ background:#e79ab8; }
.mst-row b{ font:700 11px 'Quicksand',sans-serif; color:#7a6a52; min-width:16px; text-align:right; }
.mst-empty{ text-align:center; font:600 11px 'Quicksand',sans-serif; color:#c3b592; padding:16px 4px; }
.mst-sync{ text-align:center; font:700 12px 'Quicksand',sans-serif; color:#d36a9a; background:#ffeef4; border-radius:12px; padding:9px 10px; margin-top:12px; }
.mst-game{ margin-top:13px; text-align:center; }
.mst-locked{ font:600 12px 'Quicksand',sans-serif; color:#b0a080; line-height:1.7; background:#0000000a; border-radius:12px; padding:11px; }

/* ── 情绪消消乐 ── */
.mgoverlay{ position:absolute; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(34,29,43,.55); backdrop-filter:blur(3px); }
.mgoverlay.show{ display:flex; }
.mgpanel{ width:92%; max-width:360px; background:var(--cream-hi); border:3px solid var(--outline); border-radius:18px; padding:14px; box-shadow:0 12px 30px #00000055; }
.mghead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.mg-title{ font:700 15px 'Quicksand',sans-serif; color:#5a4a36; }
.mg-moves,.mg-score{ font:700 12px 'Quicksand',sans-serif; color:#b0a080; white-space:nowrap; }
.mg-moves b{ color:#5a7ac0; font-size:15px; }
.mg-score b{ color:#d36a9a; font-size:15px; }
.mg-gridwrap{ position:relative; }
.mggrid{ display:grid; gap:3px; width:100%; touch-action:manipulation; }
.mg-end{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(255,247,234,.94); border-radius:12px; }
.mg-end.show{ display:flex; }
.mg-end-t{ font:700 20px 'Quicksand',sans-serif; color:#5a4a36; margin-bottom:6px; }
.mg-end-s{ font:700 15px 'Quicksand',sans-serif; color:#d36a9a; }
.mg-end-h{ font:600 12px 'Quicksand',sans-serif; color:#b0a080; margin-top:10px; }
.mg-cell{ position:relative; width:100%; aspect-ratio:1; background:#fffdf5; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s; }
.mg-cell img{ width:80%; height:80%; image-rendering:auto; pointer-events:none; transition:transform .15s, opacity .15s; }
.mg-cell.sel{ background:#ffe7f0; box-shadow:inset 0 0 0 2px #e79ab8; transform:scale(1.07); }
.mg-cell.pop img{ transform:scale(.15); opacity:0; }
.mg-foot{ display:flex; gap:8px; margin-top:12px; }
.mg-foot button{ flex:1; }
/* 金币记录面板 */
.clog-bal{ text-align:center; font-family:'Quicksand',sans-serif; font-size:14px; color:#7a6a4f; margin:-4px 0 12px; }
.clog-bal b{ color:#e0a020; font-size:22px; font-family:'Silkscreen',monospace; }
.clog-list{ max-height:46vh; overflow:auto; margin-bottom:8px; }
.clog-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-bottom:1px dashed #ecdcb8; }
.clog-rs{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:14px; color:#4a3f2c; }
.clog-t{ font-family:'Quicksand',sans-serif; font-size:11px; color:#b0a080; margin-top:2px; }
.clog-amt{ font-family:'Silkscreen',monospace; font-size:14px; white-space:nowrap; }
.clog-amt.pos{ color:#3a9a5a; } .clog-amt.neg{ color:#d98a8a; }
.clog-empty{ text-align:center; color:#b0a080; padding:26px 0; font-family:'Quicksand',sans-serif; font-size:14px; }
.coinbar{ display:flex; justify-content:space-between; gap:10px; margin:0 0 12px;
  font-family:'Silkscreen',monospace; font-size:13px; color:var(--ink); }
.coinbar span{ background:#fff; border:2px solid #00000012; border-radius:12px; padding:7px 12px; }
.shopgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.shopcell{ background:#fff; border:2px solid #00000012; border-radius:14px; padding:9px 7px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px; }
.shopcell .shopimg{ width:100%; height:62px; display:flex; align-items:center; justify-content:center; }
.shopcell .shopimg img{ max-width:100%; max-height:62px; image-rendering:pixelated; }
.shopcell b{ font-size:12px; font-family:'Pixelify Sans',sans-serif; color:var(--ink); text-align:center;
  line-height:1.15; min-height:14px; }
.shopbuy{ width:100%; padding:7px 4px; cursor:pointer; font-family:'Silkscreen',monospace; font-size:11px;
  color:#fff; background:var(--pink); border:2px solid var(--outline); border-radius:10px; box-shadow:0 3px 0 #b85a5a; }
.shopbuy:active{ transform:translateY(2px); box-shadow:0 1px 0 #b85a5a; }
.shopbuy.off{ background:#cdbfae; box-shadow:0 3px 0 #a99a86; cursor:not-allowed; }
.giftmystery{ font-size:64px; text-align:center; margin:10px 0 6px; animation:giftwiggle 1.6s ease-in-out infinite; }
.giftmystery img{ width:104px; height:auto; vertical-align:middle; }
@keyframes giftwiggle{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }
.giftrevealimg{ display:flex; align-items:center; justify-content:center; height:140px; margin:6px 0 4px; }
.giftrevealimg img{ max-height:140px; max-width:80%; image-rendering:pixelated; }

/* ===== 登录 / 选性别 ===== */
.authroot{ position:absolute; inset:0; z-index:60; overflow:hidden; font-family:Quicksand,system-ui,sans-serif; }
.authroot .authbg{ position:absolute; inset:0; background:url(assets/ui/uibackground.png) center/cover no-repeat; }
.authpage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; box-sizing:border-box;
  padding: calc(env(safe-area-inset-top,0px) + 40px) 26px calc(env(safe-area-inset-bottom,0px) + 24px); }
.authpage[hidden]{ display:none; }
.authhero{ text-align:center; margin-top:110px; }
.authtitle{ font-family:'Silkscreen',monospace; font-weight:700; font-size:46px; letter-spacing:3px; color:#5b4633; text-shadow:0 2px 0 #ffffffaa; }
.authslogan-zh{ margin-top:12px; font-size:15px; font-weight:600; color:#8a6c4d; letter-spacing:1px; }
.authdiv{ margin:9px 0 5px; color:#cf9aa6; letter-spacing:4px; font-size:13px; }
.authslogan-en{ font-size:15px; font-weight:600; color:#9a7e5e; font-style:italic; }
.authspace{ flex:1; }
.authactions{ width:100%; display:flex; flex-direction:column; gap:11px; align-items:center; }
.authbtn{ width:100%; max-width:330px; height:50px; border:none; border-radius:25px; font-size:16px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 6px 16px -8px #00000040; }
.authbtn.apple{ background:#000; color:#fff; font-family:-apple-system,'SF Pro Text','SF Pro',system-ui,'Helvetica Neue',sans-serif; letter-spacing:.2px; }
.authbtn.apple .apple-logo{ width:18px; height:18px; margin-bottom:2px; flex:0 0 auto; }
.authbtn.passkey{ background:#fffdf8; color:#4a3f33; border:1.5px solid #00000016; }
.authbtn.email{ background:#ffffffcc; color:#6a8f5e; border:1.5px solid #6a8f5e55; }
.authbtn.confirm{ background:#e79aa6; color:#fff; }
.authbtn:disabled{ opacity:.45; cursor:default; }
.authlink{ margin-top:8px; font-size:13px; color:#7a6a52; text-decoration:underline; cursor:pointer; }
.authreset{ margin-top:2px; font-size:11px; color:#b0a48c; text-decoration:underline; cursor:pointer; opacity:.7; }
.authhead{ font-size:20px; font-weight:700; color:#5b4633; margin-bottom:2px; }
.gsec{ width:100%; max-width:340px; margin-top:16px; }
.glabel{ font-size:14px; font-weight:700; color:#7a6147; margin:0 2px 8px; }
.grow{ display:flex; gap:10px; }
.gcard{ flex:1; aspect-ratio:3/4; background:#fffdf8cc; border:2px solid #00000010; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:6px; }
.gcard img{ width:46px; height:auto; image-rendering:pixelated; }
.gcard b{ font-size:13px; color:#5b4633; }
.gcard.wait .gwait{ font-size:30px; line-height:1; }
.gcard.on{ border-color:#e79aa6; background:#fff; box-shadow:0 6px 16px -8px #e79aa6aa; }
.ghint{ font-size:11px; color:#9a8a72; margin:9px 2px 0; line-height:1.4; }

/* 静音开关 */
.sndbtn{ background:none; border:none; font-size:14px; line-height:1; padding:0 3px; cursor:pointer; opacity:.9; pointer-events:auto; display:flex; align-items:center; }
.sndbtn img{ height:21px; width:auto; image-rendering:pixelated; display:block; }
.sndbtn.off{ opacity:.55; }

/* ===== email / 配对 输入（真后端登录） ===== */
.authemail,.authcodein{ width:100%; max-width:330px; height:50px; border-radius:25px; border:1.5px solid #00000020;
  background:#ffffffe0; padding:0 18px; font-size:16px; color:#5b4633; outline:none; text-align:center; }
.authemail:focus,.authcodein:focus{ border-color:#e79aa6; }
.authmsg{ min-height:18px; font-size:13px; color:#c0607a; text-align:center; margin-top:6px; line-height:1.5; white-space:pre-line; }
.authsub{ font-size:15px; font-weight:600; color:#7a6147; text-align:center; line-height:1.7; margin-top:18px; white-space:pre-line; }
.authpairsec{ width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; }
.authcode{ width:100%; font-family:'Silkscreen',monospace; font-size:38px; letter-spacing:6px; color:#5b4633; text-align:center;
  background:#fffdf8; border:2px dashed #cfa9b0; border-radius:16px; padding:16px 10px; margin:10px 0 4px; user-select:all; -webkit-user-select:all; }
.author{ display:flex; align-items:center; gap:8px; color:#a08e76; font-size:12px; margin:16px 0 8px; width:100%; max-width:340px; }
.author::before,.author::after{ content:''; flex:1; height:1px; background:#00000018; }

/* ===== 窄屏 / 手机 / iOS：去掉桌面"手机壳"外框，铺满屏幕 ===== */
@media (max-width:600px){
  body{ padding:0; gap:0; background:#0b0b0f; justify-content:center; }
  .title,.hint{ display:none; }
  /* fill the whole device — drop the fake phone bezel + aspect-ratio letterbox on real phones */
  .phone{ width:100vw; height:100dvh; aspect-ratio:auto; border-radius:0; padding:0; box-shadow:none; background:none; }
  .screen{ border-radius:0; box-shadow:none; }
  /* the real device already has these — drop our mockup copies */
  .island{ display:none; }        /* fake Dynamic Island / notch */
  #clock{ display:none; }         /* fake clock — use the OS status-bar time instead */
  /* no weather row — float just 🔊 + ⚙️ top-right, tucked below the notch */
  .statusbar{ top:calc(env(safe-area-inset-top) + 6px); left:auto; right:10px; width:auto; height:26px; padding:0; }
  #wxText, #status{ display:none; }
  .wxwidget{ top:calc(env(safe-area-inset-top) + 6px); left:12px; height:26px;}
  /* day badge + switcher sit right under the notch (moved up) */
  .topbar{ top:calc(env(safe-area-inset-top) + 6px); }
  .backbar{ top:calc(env(safe-area-inset-top) + 6px); }
  /* keep bottom floating controls above the home indicator */
  .editfab, .fabpair{ bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* ===== Native app (Capacitor): same fullscreen rules WITHOUT the media query =====
   After a long background stay iOS may kill + reload the WebView with a desktop-width
   viewport; (max-width:600px) then un-matches and the desktop phone-mockup rendered as a
   tiny card in the corner. html.native is tagged by an inline <head> script, so these
   always win inside the app regardless of what width the viewport reports. */
html.native body{ padding:0; gap:0; background:#0b0b0f; justify-content:center; }
html.native .title, html.native .hint{ display:none; }
html.native .phone{ width:100vw; height:100dvh; aspect-ratio:auto; border-radius:0; padding:0; box-shadow:none; background:none; }
html.native .screen{ border-radius:0; box-shadow:none; }
html.native .island{ display:none; }
html.native #clock{ display:none; }
html.native .statusbar{ top:calc(env(safe-area-inset-top) + 6px); left:auto; right:10px; width:auto; height:26px; padding:0; }
html.native #wxText, html.native #status{ display:none; }
html.native .wxwidget{ top:calc(env(safe-area-inset-top) + 6px); left:12px; height:26px;}
html.native .topbar{ top:calc(env(safe-area-inset-top) + 6px); }
html.native .backbar{ top:calc(env(safe-area-inset-top) + 6px); }
html.native .editfab, html.native .fabpair{ bottom:calc(14px + env(safe-area-inset-bottom)); }

/* ===== 配对后 fusion 开场动画（缓缓进入小镇） ===== */
.introvid{ position:absolute; inset:0; z-index:300; background:#0b0a12; display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .6s ease; }
.introvid.show{ display:flex; opacity:1; }
.introvid.fade{ opacity:0; }
.introvid video{ width:100%; height:100%; object-fit:cover; }
.introvid .introcap{ position:absolute; left:0; right:0; bottom:58px; text-align:center; color:#fff; opacity:.92; pointer-events:none;
  font-family:'Pixelify Sans',sans-serif; font-size:15px; letter-spacing:.08em; text-shadow:0 1px 8px rgba(0,0,0,.65); }

/* ===== 新手引导 coach marks（聚光气泡） ===== */
.coach{ position:absolute; inset:0; z-index:290; display:none; }
.coach.show{ display:block; }
.coach-hole{ position:absolute; border-radius:14px; box-shadow:0 0 0 9999px rgba(12,10,18,.70); transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease,opacity .3s ease; pointer-events:none; }
.coach-card{ position:absolute; width:250px; max-width:78vw; background:#FBF3E0; border:2px solid #E8C87A; border-radius:16px; padding:14px 15px 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.30); font-family:'Pixelify Sans',sans-serif; color:#5a4a36; transition:top .3s ease,left .3s ease; }
.coach-card.center{ left:50%!important; top:50%!important; transform:translate(-50%,-50%); text-align:center; }
.coach-tt{ font-size:16px; font-weight:700; margin-bottom:5px; color:#4a3a26; }
.coach-tx{ font-size:13.5px; line-height:1.55; }
.coach-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.coach-dots{ display:flex; gap:5px; }
.coach-dots i{ width:6px; height:6px; border-radius:50%; background:#E4D3A6; }
.coach-dots i.on{ background:#E8A23C; }
.coach-next{ border:none; background:#F2B441; color:#fff; font-family:'Pixelify Sans',sans-serif; font-size:13px; font-weight:700; padding:7px 17px; border-radius:999px; cursor:pointer; }

/* ===== Focus mode (src/focus.js) =====
   Its own palette, from the focus UI pack: cream paper, cocoa ink, sage / coral /
   blue / yellow accents. Every surface is a plain rounded rectangle, so they are
   CSS rather than images and stay sharp at any size. --sw (the scene's drawn
   width) is set by focus.js; the timer and the note scale with it. */
.focusoverlay{ --fo-cream:#fff9ee; --fo-ink:#42291f; --fo-muted:#83756a; --fo-sage:#d8e6c8; --fo-coral:#ec9380; --fo-line:#e6d9c8; --sw:324px;
  position:absolute; inset:0; z-index:75; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:46px 16px 14px; background:var(--fo-cream); color:var(--fo-ink);
  font-family:'Quicksand','PingFang SC','Hiragino Sans GB',system-ui,sans-serif; opacity:0; transition:opacity .35s ease; }
.focusoverlay.show{ display:flex; opacity:1; animation:foIn .35s ease; }
@keyframes foIn{ from{ opacity:0; } to{ opacity:1; } }
.focusoverlay img{ -webkit-user-drag:none; user-select:none; }
.fo-head{ width:100%; max-width:440px; display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.fo-cat{ width:36px; height:36px; }
.fo-pad{ display:block; }
.fo-title{ display:flex; align-items:center; gap:8px; font-size:25px; font-weight:700; letter-spacing:.04em; }
.fo-acc{ width:16px; height:22px; object-fit:contain; }
.fo-flip{ transform:scaleX(-1); }
.fo-tag, .fo-cheer{ display:inline-flex; align-items:center; gap:7px; padding:5px 15px; border-radius:999px; background:var(--fo-sage); font-size:14px; font-weight:600; }
.fo-tag img, .fo-cheer img{ width:20px; height:20px; }
.fo-cheer:empty{ display:none; }
.fo-stage{ flex:0 0 auto; width:100%; display:flex; align-items:flex-start; justify-content:center; }
.fo-scenewrap{ position:relative; }
.fo-scene{ position:absolute; left:0; top:0; }
.fo-img{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s ease; }
.fo-img.on{ opacity:1; }
.fo-img.front{ z-index:1; }
.fo-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.fo-note{ position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; padding:0; margin:0;
  border:0; background:none; cursor:pointer; color:var(--fo-ink); font:inherit; -webkit-tap-highlight-color:transparent; }
.fo-note span{ display:block; max-width:80%; line-height:1.28; text-align:center; font-weight:600; word-break:break-word; line-break:anywhere; }
.fo-note.empty span{ color:var(--fo-muted); opacity:.6; font-weight:500; }
.fo-timer{ position:absolute; z-index:4; left:50%; transform:translateX(-50%); top:calc(100% - var(--sw) * .028);
  width:calc(var(--sw) * .70); height:calc(var(--sw) * .23); display:flex; align-items:center; justify-content:center; gap:calc(var(--sw) * .03);
  background:var(--fo-cream); border:1.8px solid var(--fo-ink); border-radius:999px; box-shadow:inset 0 0 0 2px var(--fo-cream), inset 0 0 0 3.3px #e7a155; }
.fo-tcol{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.fo-tlabel{ font-size:calc(var(--sw) * .042); font-weight:700; margin-bottom:calc(var(--sw) * .01); }
.fo-tlabel:empty{ display:none; }
.fo-time{ font-size:calc(var(--sw) * .14); font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.focusoverlay[data-state="completed"] .fo-time, .focusoverlay[data-state="early"] .fo-time{ font-size:calc(var(--sw) * .115); }
.fo-ray{ height:calc(var(--sw) * .07); width:auto; }
.fo-deco{ position:absolute; top:50%; width:calc(var(--sw) * .085); height:auto; transform:translateY(-50%); }
.fo-star{ left:calc(var(--sw) * -.12); }
.fo-fish{ right:calc(var(--sw) * -.135); width:calc(var(--sw) * .1); }
.fo-hint, .fo-foot{ display:inline-flex; align-items:center; gap:6px; min-height:18px; font-size:13px; color:var(--fo-muted); }
.fo-hint img, .fo-foot img{ width:17px; height:17px; }
.fo-foot .fo-acc{ width:12px; height:16px; }
.fo-hint:empty{ display:none; }
.fo-card{ width:100%; max-width:440px; padding:2px 14px; border:1.6px solid var(--fo-ink); border-radius:20px; background:var(--fo-cream); }
.fo-row{ display:flex; align-items:center; gap:10px; min-height:44px; }
.fo-row + .fo-row{ border-top:1px solid var(--fo-line); }
.fo-row > img{ width:26px; height:26px; flex:0 0 auto; }
.fo-lb{ flex:0 0 auto; font-size:15px; font-weight:600; }
.fo-bar{ flex:1 1 auto; height:10px; border:1.1px solid #9f8a77; border-radius:6px; background:#eee5d8; overflow:hidden; }
.fo-bar i{ display:block; height:100%; background:#efa59b; border-radius:6px; transition:width .5s linear; }
.fo-val{ flex:0 0 auto; text-align:right; line-height:1.2; }
.fo-val b{ display:block; font-size:14px; }
.fo-val small{ font-size:11px; color:var(--fo-muted); }
.fo-pill{ margin-left:auto; min-width:104px; padding:4px 14px; border-radius:999px; text-align:center; font-size:14px; font-weight:600; }
.fo-pink{ background:#f8dcd6; } .fo-blue{ background:#dcecf2; } .fo-yellow{ background:#fbeec9; }
.fo-btns{ width:100%; max-width:440px; display:flex; gap:10px; justify-content:center; }
.fo-btn{ flex:1 1 0; min-height:52px; padding:0 12px; border-radius:26px; border:1.7px solid var(--fo-ink); background:var(--fo-cream);
  color:var(--fo-ink); font:inherit; font-size:18px; font-weight:700; letter-spacing:.06em; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fo-btn:active{ background:#f3e9da; }
.fo-primary{ background:var(--fo-coral); color:var(--fo-cream); }
.fo-primary:active{ background:#dc7f6f; }
.fo-wide{ flex:0 1 300px; }
.fo-dialog{ position:absolute; inset:0; z-index:10; display:none; align-items:flex-start; justify-content:center; padding-top:22%; background:rgba(66,41,31,.32); }
.fo-dialog.show{ display:flex; }
.fo-dlg{ width:min(86%,340px); padding:18px 18px 16px; border:1.6px solid var(--fo-ink); border-radius:20px; background:var(--fo-cream); text-align:center; }
.fo-dlg h3{ margin:2px 0 8px; font-size:18px; }
.fo-dlg p{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--fo-muted); }
.fo-notein{ position:relative; margin-bottom:12px; }
.fo-notein textarea{ width:100%; box-sizing:border-box; resize:none; padding:10px 12px 22px; border:1.6px solid var(--fo-line); border-radius:12px;
  background:#fff; color:var(--fo-ink); font:inherit; font-size:16px; outline:none; }
.fo-notein textarea:focus{ border-color:var(--fo-coral); }
.fo-count{ position:absolute; right:10px; bottom:7px; font-size:11px; color:var(--fo-muted); }
.fo-dlgrow{ display:flex; gap:10px; }
.fo-dlgcol{ display:flex; flex-direction:column; gap:8px; }
.fo-dlg .fo-btn{ min-height:46px; font-size:16px; }
@media (max-width:600px){ .focusoverlay{ padding:calc(env(safe-area-inset-top) + 6px) 16px calc(env(safe-area-inset-bottom) + 10px); } }
html.native .focusoverlay{ padding:calc(env(safe-area-inset-top) + 6px) 16px calc(env(safe-area-inset-bottom) + 10px); }
/* the duration picker lives in the regular sheet */
.fp-wheels{ position:relative; display:flex; justify-content:center; gap:22px; height:200px; margin:4px 0 2px; }
.fp-band{ position:absolute; left:10%; right:10%; top:80px; height:40px; border-radius:12px; background:#f6e5c8; pointer-events:none; }
.fp-col{ position:relative; display:flex; align-items:center; gap:6px; }
.fp-list{ position:relative; z-index:1; width:64px; height:200px; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image:linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.fp-list::-webkit-scrollbar{ display:none; }
.fp-pad{ height:80px; }
.fp-it{ height:40px; line-height:40px; text-align:center; scroll-snap-align:center; font-family:'Quicksand',sans-serif; font-size:21px; font-weight:600; color:#b9a993; cursor:pointer; }
.fp-it.on{ color:var(--ink); font-size:25px; font-weight:700; }
.fp-unit{ z-index:1; font-size:14px; color:var(--ink-soft); }
.fp-sum{ text-align:center; font-size:14px; color:var(--ink-soft); margin:6px 0 10px; }
.sheet .btn:disabled{ opacity:.45; }
/* a day's focus sessions, opened from the calendar */
.fr-row{ display:flex; align-items:baseline; gap:10px; padding:10px 4px; border-bottom:1px dashed #00000018; font-size:14px; }
.fr-row span{ flex:1 1 auto; color:var(--ink-soft); }
.fr-row em{ font-style:normal; color:var(--ink-soft); }
.fr-row em.ok{ color:#5b8a4a; }
/* focus settings (the gear only shows when this build has the app lock) */
.fo-gear{ display:flex; align-items:center; justify-content:center; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fo-gear img{ width:30px; height:30px; }
.fo-gear.off{ visibility:hidden; pointer-events:none; }
.fp-lock{ display:flex; align-items:center; justify-content:center; gap:5px; margin:-4px 0 10px; font-size:12px; color:var(--ink-soft); }
.fp-lock:empty{ display:none; }
.fp-lock img{ width:15px; height:15px; }
.fo-set{ margin:4px 0 12px; border:1.4px solid var(--fo-line); border-radius:16px; background:#fff; text-align:left; overflow:hidden; }
.fo-setrow{ display:flex; align-items:center; gap:10px; width:100%; padding:12px; border:0; background:none; font:inherit; color:inherit; text-align:left; }
.fo-setrow + .fo-setrow{ border-top:1px solid var(--fo-line); }
.fo-setrow > img{ width:24px; height:24px; flex:0 0 auto; }
.fo-settx{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; }
.fo-settx b{ font-size:15px; }
.fo-settx small{ font-size:12px; line-height:1.4; color:var(--fo-muted); }
.fo-setlink{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fo-setlink:disabled{ opacity:.45; cursor:default; }
.fo-setval{ flex:0 0 auto; font-size:14px; font-weight:600; color:var(--fo-muted); }
.fo-switch{ flex:0 0 auto; position:relative; width:50px; height:30px; padding:0; border:1.5px solid var(--fo-ink); border-radius:999px; background:#eee5d8; cursor:pointer; transition:background .2s; }
.fo-switch i{ position:absolute; top:2px; left:2px; width:23px; height:23px; border-radius:50%; background:var(--fo-cream); border:1.3px solid var(--fo-ink); transition:transform .2s; }
.fo-switch.on{ background:var(--fo-coral); }
.fo-switch.on i{ transform:translateX(20px); }
.fo-switch:disabled{ opacity:.45; cursor:default; }
.fo-setmsg{ margin:-4px 0 12px !important; color:#c0614f !important; font-size:13px !important; }

/* ===== Swipe pages: town ⇄ calendar ⇄ lists =====
   The calendar and the lists are full-screen pages now (swipe left from the town,
   left again for the lists, right to go back). Content keeps a readable width on
   wide screens. */
.caloverlay.page, .bucketoverlay.page{ background:var(--cream-hi); backdrop-filter:none; -webkit-backdrop-filter:none;
  align-items:stretch; justify-content:stretch; touch-action:pan-y; will-change:transform; }
.page .calpanel, .page .bucketbox{ box-sizing:border-box; width:100%; max-width:none; height:100%; max-height:none;
  border:none; border-radius:0; box-shadow:none;
  padding:46px max(18px, calc((100% - 480px) / 2)) 14px; }
@media (max-width:600px){ .page .calpanel, .page .bucketbox{ padding-top:calc(env(safe-area-inset-top) + 10px); padding-bottom:calc(env(safe-area-inset-bottom) + 6px); } }
html.native .page .calpanel, html.native .page .bucketbox{ padding-top:calc(env(safe-area-inset-top) + 10px); padding-bottom:calc(env(safe-area-inset-bottom) + 6px); }
/* stacking follows the swipe order: lists, then the calendar, then the month's moods */
.bucketoverlay{ z-index:63; } .caloverlay{ z-index:64; } #moodPage{ z-index:65; }
.calpanel > .nbtn{ flex:0 0 auto; }   /* .nbtn is flex:1 for button rows; here it would soak up the page height */
/* which page you're on: town · calendar · lists */
.caloverlay:not(.page) .pgdots, .bucketoverlay:not(.page) .pgdots{ display:none; }   /* opened in the room: the old pop-up, no paging */
.pgdots{ flex:0 0 auto; display:flex; justify-content:center; gap:7px; padding:8px 0 2px; pointer-events:none; }
.pgdots i{ width:6px; height:6px; border-radius:50%; background:#dccaa4; }
.pgdots i.on{ background:var(--pink); }
/* lists page: shared list / my list */
.bk-seg{ display:flex; background:#0000000d; border-radius:11px; padding:3px; gap:3px; }
.bk-seg button{ border:none; background:none; border-radius:9px; padding:6px 12px; font:700 13px 'Quicksand',sans-serif; color:#7a6a52; cursor:pointer; }
.bk-seg button.on{ background:#fff; color:#5a4a36; box-shadow:0 1px 0 #00000014; }

/* ===== 纪念日 page (opens from 在一起第 N 天) ===== */
.av-list{ padding-top:2px; }
.av-row{ display:flex; align-items:center; gap:12px; background:#fffdf5; border:1px solid #ecdcb8; border-radius:16px; padding:10px 14px 10px 10px; margin-bottom:9px; cursor:pointer; }
.av-row:active{ background:#fff6e2; }
.av-row.pinned{ border-color:#e9b949; box-shadow:0 0 0 1.5px #f2d48a inset; }
.av-ic{ width:54px; height:54px; flex:0 0 auto; image-rendering:auto; }
.av-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.av-tx b{ font:700 16px 'Quicksand',sans-serif; color:#4a3b2a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-tx span{ font:600 12px 'Quicksand',sans-serif; color:#a08c6a; }
.av-pin{ align-self:flex-start; margin-top:3px; font:700 10px 'Quicksand',sans-serif; font-style:normal; color:#8a6a1e; background:#fbe9b4; border-radius:999px; padding:2px 8px; }
.av-n{ flex:0 0 auto; display:flex; align-items:baseline; gap:3px; color:#4a3b2a; }
.av-n b{ font:700 26px 'Quicksand',sans-serif; letter-spacing:-.5px; }
.av-n small{ font:700 12px 'Quicksand',sans-serif; color:#8a7a5e; }
/* editor (in the sheet) */
.sheet .av-in{ box-sizing:border-box; width:100%; border:2px solid #00000018; border-radius:12px; background:#fff; padding:10px 12px; font:600 15px 'Quicksand',sans-serif; color:var(--ink); outline:none; margin-bottom:10px; }
.sheet .av-in:focus{ border-color:var(--pink); }
.av-field{ display:flex; align-items:center; gap:12px; }
.av-field span{ font:700 14px 'Quicksand',sans-serif; color:#7a6a52; flex:0 0 auto; }
.sheet .av-date{ flex:1; margin-bottom:10px; }
.av-seg{ display:flex; gap:8px; margin-bottom:6px; }
.av-seg button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; border:2px solid #e6d6b8; background:#fffdf5; border-radius:12px; padding:8px 4px; font:700 14px 'Quicksand',sans-serif; color:#7a6a52; cursor:pointer; }
.av-seg button small{ font:600 11px 'Quicksand',sans-serif; color:#b0a080; }
.av-seg button.on{ border-color:var(--pink); background:#fff1ef; color:#c0605e; }
.av-yearly{ padding:8px 4px; }
.av-icons{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:10px 0 12px; }
.av-ib{ aspect-ratio:1; border:2px solid transparent; background:#fffdf5; border-radius:12px; padding:3px; cursor:pointer; }
.av-ib img{ width:100%; height:100%; display:block; }
.av-ib.on{ border-color:var(--pink); background:#fff1ef; }
/* the calendar's special-day chip now shows its icon and opens the editor */
.calspecial.on{ cursor:pointer; justify-content:flex-start; }
.calspecial .cs-ic{ width:30px; height:30px; flex:0 0 auto; }
.calspecial .cs-go{ margin-left:auto; color:#c2a878; font:700 18px 'Quicksand',sans-serif; }

/* ===== Full-screen pages: lists + 纪念日 (design: assetpacks/nestle-inapp-todo-anniversary-v1) ===== */
#bucketPanel.page, #annivPage{ --np-cream:#fff9ee; --np-ink:#42291f; --np-muted:#8a7a6c; --np-sage:#d8e6c8; --np-sky:#d7e7f3; --np-coral:#ec9380; --np-line:#ece0cf;
  background:var(--np-cream); }
#bucketPanel.page .bucketbox, #annivPage .bucketbox{ background:var(--np-cream); color:var(--np-ink);
  font-family:'Quicksand','PingFang SC','Hiragino Sans GB',system-ui,sans-serif; gap:0; }
.np-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 -4px 6px; }
.np-ic{ width:40px; height:40px; border:none; background:none; padding:7px; color:var(--np-ink); cursor:pointer; }
.np-ic svg{ width:100%; height:100%; display:block; }
.np-title{ border:none; background:none; color:var(--np-ink); font:800 22px 'Quicksand','PingFang SC',sans-serif; letter-spacing:.5px; display:flex; align-items:center; gap:4px; padding:4px 8px; cursor:default; }
.np-title.sw{ cursor:pointer; }
.np-title i{ width:18px; height:18px; display:inline-block; opacity:.7; }
.np-title i svg{ width:100%; height:100%; display:block; }
.np-date{ flex:0 0 auto; font:700 15px 'Quicksand','PingFang SC',sans-serif; color:#5a4636; margin:2px 4px 12px; }
.np-filters{ flex:0 0 auto; display:flex; gap:10px; margin-bottom:14px; }
.np-filters button{ flex:1; height:40px; border:1.6px solid var(--np-ink); border-radius:999px; background:#fffdf7; color:var(--np-ink); font:700 15px 'Quicksand','PingFang SC',sans-serif; cursor:pointer; }
.np-filters button.on{ background:var(--np-sage); }
#annivPage .np-filters button{ border-color:#d8c9b6; }
#annivPage .np-filters button.on{ border-color:var(--np-sage); }
.np-body{ flex:1; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px 12px; -webkit-overflow-scrolling:touch; }
.np-sec{ display:flex; align-items:center; gap:8px; font:800 18px 'Quicksand','PingFang SC',sans-serif; margin:20px 2px 10px; }
.np-count{ font:700 13px 'Quicksand',sans-serif; font-style:normal; background:#efe6d6; color:#6a5848; border-radius:999px; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.np-go{ width:20px; height:20px; flex:0 0 auto; color:#7a6656; }
.np-go svg{ width:100%; height:100%; display:block; }
.np-empty{ text-align:center; color:var(--np-muted); font:600 14px 'Quicksand','PingFang SC',sans-serif; padding:22px 12px; line-height:1.8; }
.np-foot{ flex:0 0 auto; padding-top:6px; }
.np-foot .pgdots{ padding:0 0 10px; }
.np-add{ width:100%; height:54px; display:flex; align-items:center; justify-content:center; gap:10px; border:1.6px solid var(--np-ink); border-radius:999px; background:var(--np-coral); color:#fff; font:800 18px 'Quicksand','PingFang SC',sans-serif; letter-spacing:1px; cursor:pointer; }
.np-add svg{ width:22px; height:22px; }
.np-add:active{ transform:translateY(1px); filter:brightness(.97); }
/* lists */
.lp-sum{ display:flex; align-items:center; justify-content:space-between; border:1.6px solid var(--np-ink); border-radius:22px; background:#fffdf7; padding:16px 10px 12px 20px; overflow:hidden; }
.lp-sum-n{ display:flex; align-items:baseline; gap:6px; }
.lp-sum-n b{ font:800 56px/1 'Quicksand',sans-serif; color:#e07a6c; }
.lp-sum-n span{ font:800 18px 'Quicksand','PingFang SC',sans-serif; }
.lp-sum-sub{ margin-top:8px; font:700 15px 'Quicksand','PingFang SC',sans-serif; color:#6a5848; white-space:nowrap; }
.lp-sum-sub b{ color:#6f9a5c; font-size:19px; margin:0 2px; }
.lp-cat{ width:46%; max-width:190px; flex:0 1 auto; margin-right:-4px; }
.lp-card{ border:1.6px solid var(--np-ink); border-radius:20px; background:#fffdf7; overflow:hidden; }
.lp-card.done{ margin-top:10px; border-color:#cdbfae; }
.lp-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.lp-row + .lp-row{ border-top:1px solid var(--np-line); }
.lp-row:active{ background:#fff4e2; }
.lp-box{ flex:0 0 auto; width:26px; height:26px; border:1.8px solid var(--np-ink); border-radius:7px; background:#fff; padding:2px; cursor:pointer; color:#fff; }
.lp-box.on{ background:#8fb07a; border-color:#6f8f5c; }
.lp-box svg{ width:100%; height:100%; display:block; }
.lp-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lp-tx b{ font:700 17px 'Quicksand','PingFang SC',sans-serif; color:var(--np-ink); word-break:break-word; }
.lp-tx span{ font:600 13px 'Quicksand','PingFang SC',sans-serif; color:var(--np-muted); }
.lp-tx .who{ font-weight:700; } .lp-tx .who.me{ color:#d36a9a; } .lp-tx .who.ta{ color:#5a7ac0; }
.lp-row.done .lp-tx b{ color:#a8988a; text-decoration:line-through; text-decoration-color:#c9b9a8; }
.lp-donebar{ width:100%; margin-top:14px; display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; border:1px solid #d5e2c6; border-radius:16px; background:#eaf1df; color:var(--np-ink); font:700 16px 'Quicksand','PingFang SC',sans-serif; cursor:pointer; }
.lp-donechk{ width:26px; height:26px; border-radius:50%; background:#7fa86c; color:#fff; padding:5px; box-sizing:border-box; }
.lp-donechk svg, .lp-chev svg{ width:100%; height:100%; display:block; }
.lp-donebar span{ flex:1; text-align:left; }
.lp-chev{ width:20px; height:20px; transition:transform .2s; }
.lp-donebar.open .lp-chev{ transform:rotate(180deg); }
.np-pick{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; border:1.6px solid #e2d4bf; border-radius:16px; background:#fffdf7; padding:12px 16px; margin-bottom:10px; cursor:pointer; color:var(--ink); }
.np-pick b{ font:800 16px 'Quicksand','PingFang SC',sans-serif; } .np-pick span{ font:600 13px 'Quicksand','PingFang SC',sans-serif; color:var(--ink-soft); }
.np-pick.on{ border-color:var(--pink); background:#fff1ef; }
/* 纪念日 */
.av-hero{ border:1.6px solid var(--np-ink); border-radius:24px; background:#fffdf7; padding:14px 16px 18px; cursor:pointer; }
.av-hero-top{ display:flex; align-items:center; justify-content:space-between; font:700 14px 'Quicksand','PingFang SC',sans-serif; }
.av-hero-top span{ display:flex; align-items:center; gap:4px; }
.av-hero-top svg{ width:24px; height:24px; }
.av-hero-top i{ width:24px; height:24px; color:#5a4636; }
.av-hero-top i svg{ width:100%; height:100%; }
.av-hero-body{ display:flex; align-items:center; margin-top:4px; }
.av-hero-l{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding-right:12px; border-right:1.5px solid var(--np-line); }
.av-hero-l img{ width:96px; height:96px; }
.av-hero-l b{ font:800 22px 'Quicksand','PingFang SC',sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av-hero-l span{ font:600 13px 'Quicksand','PingFang SC',sans-serif; color:var(--np-muted); }
.av-hero-r{ flex:1.15; display:flex; flex-direction:column; align-items:center; gap:4px; }
.av-hero-n{ display:flex; align-items:baseline; gap:4px; }
.av-hero-n b{ font:800 64px/1 'Quicksand',sans-serif; letter-spacing:-1.5px; }
.av-hero-n small{ font:800 18px 'Quicksand','PingFang SC',sans-serif; }
.av-tag{ font-style:normal; font:700 13px 'Quicksand','PingFang SC',sans-serif; color:#3f4f5c; background:var(--np-sky); border-radius:999px; padding:4px 12px; white-space:nowrap; }
.av-tag.until{ background:var(--np-sage); color:#405733; }
.av-tag.today{ background:#fbd8cf; color:#a2483a; }
.av-card{ display:flex; align-items:center; gap:12px; border:1.6px solid var(--np-ink); border-radius:20px; background:#fffdf7; padding:12px 12px 12px 12px; margin-bottom:12px; cursor:pointer; }
.av-card:active, .av-hero:active{ background:#fff4e2; }
.av-card-ic{ width:58px; height:58px; flex:0 0 auto; }
.av-card-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.av-card-tx b{ font:800 17px 'Quicksand','PingFang SC',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-card-tx span{ font:600 13px 'Quicksand','PingFang SC',sans-serif; color:var(--np-muted); white-space:nowrap; }
.av-card-n{ flex:0 0 auto; display:flex; align-items:center; gap:6px; padding-left:12px; border-left:1.5px solid var(--np-line); }
.av-card-n b{ font:800 32px/1 'Quicksand',sans-serif; letter-spacing:-.5px; }
.av-card-n small{ font:800 14px 'Quicksand','PingFang SC',sans-serif; align-self:flex-end; margin-bottom:2px; }
.av-pinrow .setk{ display:flex; flex-direction:column; gap:2px; }
.av-pinrow .setk small{ font:600 12px 'Quicksand','PingFang SC',sans-serif; color:var(--ink-soft); }