/* ===================================================================
   幸福小事 · 样式
   基调：奶油纸 + 手绘感 + 圆润 + 低饱和暖色
   =================================================================== */

/* ---------- 设计变量 ---------- */
:root{
  --paper:    #FBF6EE;
  --paper-2:  #F4EADB;
  --paper-3:  #EFE2CE;
  --card:     #FFFDF9;
  --ink:      #4B4139;
  --ink-2:    #92836F;
  --ink-3:    #C1B3A0;
  --line:     #EBE0CE;
  --line-2:   #DCCDB4;

  --peach:    #F0A582;
  --peach-d:  #DE8A64;
  --peach-l:  #FBE3D6;
  --matcha:   #A6C69C;
  --matcha-l: #E4EFDF;
  --sky:      #9CB9D2;
  --sky-l:    #E0EAF2;
  --rose:     #E7ADB4;
  --rose-l:   #FAE6E8;
  --lilac:    #BCA9D4;
  --lilac-l:  #EDE6F5;
  --butter:   #F2CE86;
  --butter-l: #FBF0D9;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --sh-1: 0 2px 6px rgba(120,95,65,.06);
  --sh-2: 0 4px 16px rgba(120,95,65,.09);
  --sh-3: 0 12px 34px rgba(120,95,65,.14);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC",
          "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ---------- 基础 ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
/* 纸张纹理 */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
button, input, textarea, select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
img{ max-width:100%; display:block; }
.ico{ width:1em; height:1em; fill:currentColor; flex:none; }

#app{ position:relative; z-index:1; }

/* ---------- 屏幕切换 ---------- */
.screen{
  display:none;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 26px);
  min-height:100dvh;
}
.screen.is-active{ display:block; animation: screen-in .34s cubic-bezier(.22,1,.36,1); }
@keyframes screen-in{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}

/* ═══════════════ 首屏 Hero ═══════════════ */
.hero{
  position:relative;
  padding: calc(var(--safe-t) + 20px) 20px 20px;
  background:
    radial-gradient(120% 82% at 78% -8%, var(--peach-l) 0%, transparent 62%),
    radial-gradient(96% 68% at 6% 2%, var(--butter-l) 0%, transparent 58%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 96%);
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  overflow:hidden;
}
/* 手绘装饰：右上角小太阳 + 左下角草叶 */
.hero-art{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.hero-art::before{
  content:''; position:absolute; top:-26px; right:-24px; width:150px; height:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9A578' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='23'/%3E%3Cpath d='M60 24V12M60 108V96M96 60h12M12 60h12M85 35l8-8M27 93l8-8M85 85l8 8M27 27l8 8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.hero-art::after{
  content:''; position:absolute; bottom:6px; left:-10px; width:110px; height:70px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='%23A9C6A0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 68C18 46 26 34 40 28'/%3E%3Cpath d='M40 28c-12-2-18 6-18 14 10 2 17-4 18-14z'/%3E%3Cpath d='M48 68C48 52 42 42 30 38'/%3E%3Cpath d='M78 68c0-18 7-28 20-33'/%3E%3Cpath d='M98 35c-11-1-17 6-17 13 9 2 16-4 17-13z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

.hero-top{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
.hero-weekday{
  font-size:12.5px; font-weight:600; color:var(--peach-d);
  letter-spacing:.16em; text-transform:uppercase;
}
.hero-day{
  margin:1px 0 0; font-size:29px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink);
}
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:19px;
  background:rgba(255,255,255,.72); color:var(--ink-2);
  box-shadow:var(--sh-1); transition:transform .18s, color .18s;
}
.icon-btn:active{ transform:scale(.9); color:var(--peach-d); }

/* 每日一句 —— 便利贴 */
.quote-note{
  position:relative; margin:16px 0 0; padding:14px 16px 14px 42px;
  background:linear-gradient(160deg, #FFF7E4, #FDEFD4);
  border-radius: 4px 16px 14px 16px;
  box-shadow:var(--sh-1);
  transform:rotate(-.7deg);
}
.quote-note::after{ /* 胶带 */
  content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:52px; height:15px; border-radius:2px;
  background:rgba(240,165,130,.28);
  box-shadow:inset 0 0 0 1px rgba(240,165,130,.2);
}
.quote-mark{
  position:absolute; left:13px; top:15px; width:19px; height:19px;
  fill:var(--butter); opacity:.85;
}
.quote-note p{ margin:0; font-size:14px; line-height:1.65; color:#7A6A52; font-weight:500; }

/* 进度卡 */
.progress-card{
  display:flex; align-items:center; gap:16px;
  margin-top:16px; padding:16px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.ring-wrap{ position:relative; width:88px; height:88px; flex:none; }
.ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:9; stroke-linecap:round; }
.ring-bg{ stroke:var(--paper-3); }
.ring-fg{
  stroke:url(#g) ; stroke:var(--peach);
  stroke-dasharray:314.16; stroke-dashoffset:314.16;
  transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);
}
.ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1;
}
.ring-center b{ font-size:26px; font-weight:800; }
.ring-center span{ font-size:11px; color:var(--ink-3); margin-top:3px; font-weight:600; }

.progress-side{ min-width:0; flex:1; }
.progress-title{ font-size:16px; font-weight:800; margin-bottom:2px; }
.progress-sub{ font-size:12.5px; color:var(--ink-2); margin-bottom:9px; }
.chip-row{ display:flex; gap:7px; flex-wrap:wrap; }
.mini-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--paper-2); padding:4px 9px; border-radius:999px;
}
.mini-chip i{ font-style:normal; font-size:12px; }
.mini-chip b{ color:var(--ink); }

/* 模式切换 */
.mode-row{ display:flex; gap:9px; margin-top:14px; align-items:center; }
.seg{
  position:relative; display:flex; flex:1; padding:3px;
  background:rgba(255,255,255,.75); border-radius:999px; box-shadow:var(--sh-1);
}
.seg-btn{
  position:relative; z-index:1; flex:1; padding:8px 4px;
  font-size:12.5px; font-weight:700; color:var(--ink-2);
  border-radius:999px; transition:color .25s;
}
.seg-btn.is-on{ color:#fff; }
.seg-thumb{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px;
  width:calc(50% - 3px); border-radius:999px;
  background:linear-gradient(135deg, var(--peach), var(--peach-d));
  box-shadow:0 3px 10px rgba(222,138,100,.34);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.seg[data-i="1"] .seg-thumb{ transform:translateX(100%); }

.weather-pick{ display:flex; gap:3px; padding:3px; background:rgba(255,255,255,.75); border-radius:999px; box-shadow:var(--sh-1); }
.wbtn{
  width:34px; height:34px; border-radius:50%; font-size:16px;
  display:grid; place-items:center; opacity:.42; transition:.22s;
}
.wbtn.is-on{ opacity:1; background:var(--butter-l); transform:scale(1.06); }

/* ═══════════════ 分类条 ═══════════════ */
.cat-strip{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:16px 20px 4px; margin:0 -0px;
  -webkit-overflow-scrolling:touch;
}
.cat-strip::-webkit-scrollbar{ display:none; }
.cat-btn{
  flex:none; display:flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  font-size:13px; font-weight:700; color:var(--ink-2);
  background:var(--card); box-shadow:var(--sh-1);
  border:1.5px solid transparent; transition:.2s;
}
.cat-btn i{ font-style:normal; font-size:14px; }
.cat-btn small{ font-size:10.5px; color:var(--ink-3); font-weight:700; }
.cat-btn.is-on{
  color:var(--ink); background:#fff;
  border-color:var(--peach); box-shadow:0 3px 12px rgba(240,165,130,.26);
}

/* ═══════════════ 任务列表 ═══════════════ */
.task-list{ padding:12px 18px 0; }

.cat-block{ margin-bottom:22px; }
.cat-block-head{
  display:flex; align-items:center; gap:10px; margin:6px 2px 11px;
}
.cat-thumb{
  width:38px; height:38px; border-radius:12px; flex:none;
  object-fit:cover; box-shadow:var(--sh-1);
  transform:rotate(-2deg);
}
.cat-block-head h4{ margin:0; font-size:15.5px; font-weight:800; }
.cat-block-head p{ margin:0; font-size:11.5px; color:var(--ink-3); }
.cat-block-head .cnt{
  margin-left:auto; font-size:11.5px; font-weight:800; color:var(--ink-2);
  background:var(--paper-2); padding:3px 10px; border-radius:999px;
}

/* —— 任务卡片 —— */
.task{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  padding:14px 14px 12px; margin-bottom:10px;
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, opacity .3s;
}
.task::before{ /* 左侧色条 */
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3.5px;
  border-radius:0 4px 4px 0; background:var(--tone, var(--peach)); opacity:.5;
}
.task:active{ transform:scale(.985); }
.task.is-hot{ box-shadow:0 3px 14px rgba(242,206,134,.4); background:linear-gradient(180deg,#FFFDF6,#FFFBF0); }
.task.is-hot::after{
  content:''; position:absolute; right:11px; top:11px; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F2CE86'%3E%3Cpath d='M12 2l2.2 6.6H21l-5.4 4 2 6.6-5.6-4.1L6.4 19.2l2-6.6-5.4-4h6.8z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* 手绘复选框 */
.tick{
  position:relative; width:26px; height:26px; flex:none; margin-top:1px;
  border-radius:50%; border:2.2px solid var(--line-2);
  display:grid; place-items:center; transition:.25s;
  background:#fff;
}
.tick svg{ width:14px; height:14px; fill:#fff; opacity:0; transform:scale(.4) rotate(-18deg); transition:.28s cubic-bezier(.34,1.56,.64,1); }
.task.done .tick{ background:var(--tone, var(--matcha)); border-color:var(--tone, var(--matcha)); }
.task.done .tick svg{ opacity:1; transform:none; }

.task-body{ flex:1; min-width:0; }
.task-text{ font-size:14.5px; font-weight:600; line-height:1.55; transition:.3s; }
.task-tip{
  font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.5;
  display:flex; align-items:flex-start; gap:4px;
}
.task-tip::before{ content:'·'; color:var(--ink-3); }
.task-meta{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.tag{
  font-size:10.5px; font-weight:700; padding:2.5px 8px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-2);
}
.tag.mins{ background:var(--sky-l); color:#6E8AA6; }
.tag.own{ background:var(--lilac-l); color:#8A76A8; }
.task-num{ font-size:11px; color:var(--ink-3); font-weight:700; margin-left:auto; }

/* 完成态 */
.task.done{ background:var(--paper-2); box-shadow:none; }
.task.done .task-text{ color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2); text-decoration-thickness:1.5px; }
.task.done .task-tip, .task.done .tag{ opacity:.5; }
.task.done::before{ opacity:.28; }

/* 感悟按钮 / 已写的感悟 */
.note-btn .ico{ width:.85em; height:.85em; }
.note-btn{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; color:var(--peach-d);
  background:var(--peach-l); padding:3px 9px; border-radius:999px;
  transition:.2s;
}
.note-btn:active{ transform:scale(.94); }
.task-note{
  margin-top:9px; padding:9px 11px; border-radius:10px;
  background:linear-gradient(160deg,#FFF8E8,#FDF2DC);
  font-size:12.5px; color:#7C6B52; line-height:1.6;
  border-left:2.5px solid var(--butter);
}
.task-note b{ display:block; font-size:10.5px; color:var(--butter); margin-bottom:2px; letter-spacing:.08em; }

/* 完成时的印章涟漪 */
@keyframes stamp{
  0%{ transform:scale(.3); opacity:.85 }
  100%{ transform:scale(2.6); opacity:0 }
}
.ripple{
  position:absolute; left:14px; top:15px; width:26px; height:26px;
  border-radius:50%; border:2px solid var(--matcha);
  pointer-events:none; animation:stamp .62s ease-out forwards;
}
@keyframes pop{
  0%{ transform:scale(1) } 42%{ transform:scale(1.035) } 100%{ transform:scale(1) }
}
.task.just-done{ animation:pop .42s cubic-bezier(.34,1.56,.64,1); }

.list-foot{ padding:6px 20px 10px; text-align:center; font-size:12px; color:var(--ink-3); }

/* 空态 */
.empty{
  text-align:center; padding:34px 20px; color:var(--ink-3);
}
.empty img{ width:118px; margin:0 auto 12px; border-radius:20px; opacity:.9; }
.empty p{ margin:0; font-size:13px; }

/* ═══════════════ 通用页面 ═══════════════ */
.page-head{ padding: calc(var(--safe-t) + 26px) 20px 6px; }
.page-head h2{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.page-head p{ margin:5px 0 0; font-size:13px; color:var(--ink-2); }

.paper-card{
  margin:14px 18px; padding:16px;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.section-title{
  display:flex; align-items:center; gap:10px;
  margin:22px 20px 8px;
}
.section-title h3{ margin:0; font-size:16px; font-weight:800; }
.section-title .pill, .section-title .ghost-btn{ margin-left:auto; }
.pill{ font-size:11.5px; font-weight:700; color:var(--ink-2); background:var(--paper-2); padding:3px 10px; border-radius:999px; }
.section-note{ margin:0 20px 10px; font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.section-note b{ color:var(--peach-d); }

/* 按钮 */
.primary-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:13px; border-radius:var(--r-md);
  font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--peach), var(--peach-d));
  box-shadow:0 5px 16px rgba(222,138,100,.32);
  transition:transform .18s;
}
.primary-btn:active{ transform:scale(.97); }
.ghost-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--ink-2);
  background:var(--paper-2); transition:.18s;
}
.ghost-btn.sm{ padding:6px 12px; font-size:12px; }
.ghost-btn:active{ transform:scale(.95); background:var(--paper-3); }

/* ═══════════════ 心情记录 ═══════════════ */
.mood-row{ display:flex; justify-content:space-between; gap:5px; margin-bottom:14px; }
.mood-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 2px; border-radius:var(--r-sm); transition:.24s;
  border:2px solid transparent;
}
.mood-opt span{ font-size:26px; line-height:1; filter:grayscale(.55); transition:.24s; }
.mood-opt small{ font-size:10.5px; color:var(--ink-3); font-weight:700; }
.mood-opt.is-on{ background:var(--peach-l); border-color:var(--peach); }
.mood-opt.is-on span{ filter:none; transform:scale(1.16); }
.mood-opt.is-on small{ color:var(--peach-d); }

.note-wrap{ position:relative; }
textarea, input[type=text], input[type=time]{
  width:100%; padding:12px 13px; border-radius:var(--r-sm);
  background:var(--paper); border:1.5px solid var(--line);
  font-size:14px; line-height:1.65; resize:none; outline:none;
  transition:border-color .2s;
}
textarea:focus, input[type=text]:focus{ border-color:var(--peach); }
textarea::placeholder{ color:var(--ink-3); }
.note-tools{ display:flex; align-items:center; gap:8px; margin:9px 0 14px; }
.note-count{ margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:600; }
.voice-hint{ font-size:12px; color:var(--peach-d); margin:-8px 0 12px; }
.ghost-btn.rec{ background:var(--rose-l); color:#C77A84; animation:breathe 1.4s ease-in-out infinite; }
@keyframes breathe{ 50%{ opacity:.55 } }

.journal-list{ padding:0 18px; }
.jcard{
  position:relative; padding:14px 15px; margin-bottom:11px;
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-1);
}
.jcard-head{ display:flex; align-items:center; gap:9px; margin-bottom:7px; padding-right:30px; }
.jcard-emoji{ font-size:22px; line-height:1; }
.jcard-date{ font-size:13px; font-weight:800; }
.jcard-badge{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-2); background:var(--paper-2); padding:2.5px 9px; border-radius:999px; }
.jcard-text{ font-size:13.5px; color:#6B5D4E; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.jcard-notes{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--line-2); }
.jcard-note{ font-size:12.5px; color:var(--ink-2); line-height:1.6; margin-bottom:4px; }
.jcard-note b{ color:var(--peach-d); font-weight:700; }
.jcard-del{
  position:absolute; right:9px; top:9px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; color:var(--ink-3);
  background:var(--paper-2); opacity:.7;
}

/* ═══════════════ 报告 ═══════════════ */
.seg-wide{ margin:14px 18px 0; }
.seg-wide .seg-btn{ padding:10px 4px; font-size:13.5px; }

.report-hero{
  position:relative; margin:14px 18px; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-2);
}
.report-hero img{ width:100%; height:132px; object-fit:cover; }
.report-hero-mask{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(251,246,238,.92) 0%, rgba(251,246,238,.42) 46%, rgba(251,246,238,0) 74%),
    linear-gradient(180deg, rgba(251,246,238,.1) 0%, rgba(251,246,238,.88) 100%);
}
.report-hero-txt{ position:absolute; left:18px; right:18px; bottom:13px; }
.report-hero-txt h3{ margin:0; font-size:19px; font-weight:800; }
.report-hero-txt p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-2); }

.big-num{
  display:flex; align-items:baseline; gap:6px; justify-content:center;
  margin:2px 0 12px;
}
.big-num b{ font-size:46px; font-weight:800; line-height:1; color:var(--peach-d); }
.big-num span{ font-size:14px; color:var(--ink-2); font-weight:700; }

.kv-row{ display:flex; gap:9px; }
.kv{
  flex:1; text-align:center; padding:11px 6px;
  background:var(--paper); border-radius:var(--r-sm);
}
.kv b{ display:block; font-size:19px; font-weight:800; }
.kv span{ font-size:11px; color:var(--ink-2); font-weight:600; }

/* 周报柱状图 */
.bars{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:6px; height:132px; padding:0 2px;
}
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bar{
  width:100%; max-width:26px; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, var(--peach), var(--peach-l));
  position:relative; min-height:5px;
  transition:height .7s cubic-bezier(.22,1,.36,1);
}
.bar-col.is-today .bar{ background:linear-gradient(180deg, var(--matcha), var(--matcha-l)); box-shadow:0 3px 10px rgba(166,198,156,.5); }
.bar-n{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:800; color:var(--ink-2); }
.bar-l{ font-size:11px; color:var(--ink-3); font-weight:700; }
.bar-col.is-today .bar-l{ color:var(--matcha); }

/* 分类分布 */
.dist-row{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.dist-row img{ width:26px; height:26px; border-radius:8px; object-fit:cover; flex:none; }
.dist-name{ font-size:12.5px; font-weight:700; width:52px; flex:none; }
.dist-bar{ flex:1; height:8px; background:var(--paper-2); border-radius:999px; overflow:hidden; }
.dist-fill{ height:100%; border-radius:999px; background:var(--tone,var(--peach)); transition:width .8s cubic-bezier(.22,1,.36,1); }
.dist-n{ font-size:11.5px; color:var(--ink-2); font-weight:700; width:30px; text-align:right; flex:none; }

/* 心情条 */
.mood-bars{ display:flex; gap:7px; }
.mood-bar{ flex:1; text-align:center; }
.mood-bar .mb-track{ height:56px; background:var(--paper-2); border-radius:999px; display:flex; align-items:flex-end; overflow:hidden; }
.mood-bar .mb-fill{ width:100%; border-radius:999px; background:var(--rose); transition:height .7s cubic-bezier(.22,1,.36,1); }
.mood-bar em{ display:block; font-style:normal; font-size:18px; margin-top:5px; }
.mood-bar small{ font-size:10.5px; color:var(--ink-3); font-weight:700; }

.quote-block{
  margin-top:12px; padding:13px 15px; border-radius:var(--r-sm);
  background:linear-gradient(160deg,#FFF8E8,#FDF1D9);
  font-size:13.5px; color:#7C6B52; line-height:1.7; font-weight:500;
}
.note-quote{
  padding:10px 12px; margin-bottom:8px; border-radius:10px;
  background:var(--paper); border-left:2.5px solid var(--lilac);
  font-size:12.5px; color:#6B5D4E; line-height:1.65;
}
.note-quote b{ display:block; font-size:10.5px; color:var(--lilac); margin-bottom:2px; }

.report-actions{ display:flex; gap:9px; margin:14px 18px 0; }
.report-actions .ghost-btn{ flex:1; }

/* ═══════════════ 我的 ═══════════════ */
.stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:16px 18px 0;
}
.stat-card{
  padding:15px; border-radius:var(--r-md); text-align:center;
  box-shadow:var(--sh-1);
}
.stat-card b{ display:block; font-size:27px; font-weight:800; line-height:1.1; }
.stat-card span{ font-size:11.5px; font-weight:700; opacity:.72; }
.s1{ background:var(--peach-l); color:#B8714B; }
.s2{ background:var(--matcha-l); color:#6E8F62; }
.s3{ background:var(--butter-l); color:#B08D3D; }
.s4{ background:var(--lilac-l); color:#7E6A9C; }

.custom-list{ padding:0 18px; }
.cust{
  display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:9px;
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-1);
}
.cust-txt{ flex:1; font-size:14px; font-weight:600; min-width:0; }
.cust-cat{ font-size:11px; font-weight:700; color:var(--ink-2); background:var(--paper-2); padding:2.5px 9px; border-radius:999px; flex:none; }
.cust-del{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--ink-3); background:var(--paper-2); font-size:15px; flex:none; }
.slot{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:13px; margin-bottom:9px; border-radius:var(--r-md);
  border:1.8px dashed var(--line-2); color:var(--ink-3);
  font-size:13px; font-weight:700;
}

.badge-wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:0 18px;
}
.badge{
  aspect-ratio:1; border-radius:var(--r-md); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--paper-2); box-shadow:var(--sh-1);
  filter:grayscale(1); opacity:.42; transition:.3s;
}
.badge em{ font-style:normal; font-size:22px; }
.badge small{ font-size:9.5px; font-weight:800; color:var(--ink-2); text-align:center; padding:0 3px; }
.badge.got{ filter:none; opacity:1; background:linear-gradient(160deg,#FFF6E6,#FCEAD3); }

.row-card{ padding:4px 6px; }
.row-btn{
  display:flex; align-items:center; width:100%; padding:13px 10px;
  font-size:14px; font-weight:600; text-align:left;
  border-bottom:1px solid var(--line);
}
.row-btn:last-child{ border-bottom:0; }
.row-btn i{ margin-left:auto; font-style:normal; color:var(--ink-3); font-size:18px; }
.row-btn.danger{ color:#C8776F; }

/* ── 云同步卡片 ── */
.pill-ok{  background:var(--matcha-l); color:#5F8A52; }
.pill-warn{ background:var(--butter-l); color:#A8802F; }
.pill-err{ background:#FBE3E3; color:#B5675F; }

.sync-intro{ margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.75; }
.sync-intro b{ color:var(--ink); }
.sync-actions{ display:flex; gap:9px; }
.sync-actions .primary-btn,
.sync-actions .ghost-btn{ flex:1; padding:12px; border-radius:var(--r-md); }
.sync-code{
  padding:14px 12px; border-radius:var(--r-sm); text-align:center;
  background:linear-gradient(160deg,#FFF8E8,#FDF1D9);
  border:1.5px dashed var(--line-2);
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:15px; font-weight:700; letter-spacing:.08em; color:#7C6B52;
  word-break:break-all; user-select:all;
}
.sync-warn{ margin:10px 0 14px; font-size:12px; color:#B5675F; line-height:1.65; }

.foot-sign{ text-align:center; font-size:11.5px; color:var(--ink-3); margin:26px 0 0; }

/* ═══════════════ 底部导航 ═══════════════ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,253,249,.93);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--ink-3); transition:color .22s;
}
.tab .ico{ width:22px; height:22px; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.tab span{ font-size:10.5px; font-weight:700; }
.tab.is-active{ color:var(--peach-d); }
.tab.is-active .ico{ transform:translateY(-2px) scale(1.1); }

/* ═══════════════ 弹窗 ═══════════════ */
.modal{ position:fixed; inset:0; z-index:100; display:flex; }
.modal[hidden]{ display:none !important; }
.modal-mask{
  position:absolute; inset:0; background:rgba(75,65,57,.34);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fade .26s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal-box{ position:relative; margin:auto; width:min(420px, calc(100% - 40px)); }

/* 奖励弹窗 */
.reward-box{
  background:var(--card); border-radius:var(--r-xl); padding:0 24px 24px;
  text-align:center; box-shadow:var(--sh-3); overflow:hidden;
  animation:bounce-in .5s cubic-bezier(.34,1.4,.5,1);
}
@keyframes bounce-in{
  from{ opacity:0; transform:translateY(38px) scale(.9) }
  to{ opacity:1; transform:none }
}
.reward-art{ margin:0 -24px; height:128px; overflow:hidden; }
.reward-art img{ width:100%; height:100%; object-fit:cover; }
.reward-badge{
  width:56px; height:56px; margin:-28px auto 8px; border-radius:50%;
  display:grid; place-items:center; font-size:27px;
  background:var(--card); box-shadow:var(--sh-2); position:relative;
}
.reward-box h3{ margin:0 0 5px; font-size:21px; font-weight:800; }
.reward-box p{ margin:0 0 12px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.reward-points{
  display:inline-block; margin-bottom:16px; padding:5px 15px; border-radius:999px;
  background:var(--butter-l); color:#B08D3D; font-size:13px; font-weight:800;
}
.reward-points b{ font-size:17px; }

/* 底部抽屉 */
.sheet{
  margin:auto auto 0; width:100%; max-width:520px;
  background:var(--card); padding:8px 20px calc(22px + var(--safe-b));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3);
  animation:sheet-up .34s cubic-bezier(.22,1,.36,1);
}
@keyframes sheet-up{ from{ transform:translateY(100%) } to{ transform:none } }
.sheet-grip{ width:38px; height:4px; border-radius:999px; background:var(--line-2); margin:6px auto 14px; }
.sheet h3{ margin:0 0 4px; font-size:18px; font-weight:800; }
.sheet-sub{ margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.6; }
.sheet-actions{ display:flex; gap:10px; margin-top:16px; }
.sheet-actions .ghost-btn{ flex:1; padding:13px; border-radius:var(--r-md); }
.sheet-actions .primary-btn{ flex:1.6; }
.field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin:16px 0 8px; }

.cat-choose{ display:flex; flex-wrap:wrap; gap:7px; }
.cat-choose button{
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:var(--paper-2); color:var(--ink-2); border:1.5px solid transparent;
}
.cat-choose button.is-on{ background:#fff; border-color:var(--peach); color:var(--ink); }

.wd-row{ display:flex; gap:6px; }
.wd{
  flex:1; padding:10px 0; border-radius:var(--r-sm); text-align:center;
  font-size:13px; font-weight:700; background:var(--paper-2); color:var(--ink-2);
  transition:.2s;
}
.wd.is-on{ background:var(--peach); color:#fff; box-shadow:0 3px 10px rgba(240,165,130,.34); }

.switch-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; font-size:14px; font-weight:600;
  border-bottom:1px solid var(--line);
}
.switch-row input{ display:none; }
.switch{
  width:46px; height:27px; border-radius:999px; background:var(--line-2);
  position:relative; transition:.26s; flex:none;
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:.26s cubic-bezier(.34,1.56,.64,1);
}
input:checked + .switch{ background:var(--matcha); }
input:checked + .switch::after{ transform:translateX(19px); }

/* Toast */
#toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 22px);
  transform:translateX(-50%); z-index:200;
  padding:11px 20px; border-radius:999px;
  background:rgba(75,65,57,.93); color:#FFF8EC;
  font-size:13.5px; font-weight:600; white-space:nowrap;
  box-shadow:var(--sh-3);
  animation:toast-in .3s cubic-bezier(.34,1.56,.64,1);
}
#toast[hidden]{ display:none !important; }
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%,14px) } to{ opacity:1; transform:translateX(-50%) } }

/* 特效画布 */
#fx{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  width:100%; height:100%;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* 大屏时居中成手机宽度 */
@media (min-width: 620px){
  #app{ max-width:520px; margin:0 auto; box-shadow:0 0 60px rgba(120,95,65,.1); min-height:100dvh; background:var(--paper); }
  .tabbar{ max-width:520px; left:50%; transform:translateX(-50%); }
}