/* ===========================================================
   言值 · 蜡笔小新涂鸦系统
   Crayon Doodle · 粗黑歪扭描边 / 幼稚明快 / 手写体 / 纸纹
   =========================================================== */

:root{
  /* —— 色板（蜡笔明快）—— */
  --bg:        #f6efdd;   /* 牛皮纸暖底 */
  --bg-deep:   #efe6cf;
  --surface:   #fffdf5;   /* 卡面·奶白 */
  --surface-2: #fbf4e2;

  --jade:      #3aa564;   /* 蜡笔绿（稳档） */
  --jade-deep: #1f7a45;
  --jade-soft: #d6f0df;
  --jade-ghost:#e9f6ee;

  --clay:      #e8482e;   /* 小新红（绝杀/强调） */
  --clay-soft: #ffe0d8;

  --ink:       #241f1b;   /* 蜡笔黑（描边/字） */
  --ink-soft:  #4a423a;
  --ink-faint: #8a7f70;
  --line:      #241f1b;   /* 粗黑描边 */
  --line-soft: #241f1b;

  /* —— 语义档位 —— */
  --warm:  var(--jade);          /* 稳 */
  --fun:   #f2b21e;              /* 皮·蜡笔黄 */
  --bold:  var(--clay);          /* 绝杀·小新红 */

  /* —— 圆角（歪扭手感）/ 硬投影（贴纸卡通感）—— */
  --r-sm: 12px;  --r-md: 18px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;
  --bw: 2.5px;                                  /* 描边宽 */
  --shadow-1: 3px 3px 0 var(--ink);
  --shadow-2: 4px 4px 0 var(--ink);
  --shadow-float: 6px 6px 0 var(--ink);

  /* —— 字体 —— */
  --font-fun: "ZCOOL KuaiLe", "Noto Sans SC", system-ui, sans-serif;

  /* —— 节奏 —— */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.16s;  --t: 0.28s;  --t-slow: 0.5s;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }
body{
  font-family:"Noto Sans SC", system-ui, sans-serif;
  background:var(--bg-deep);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; align-items:stretch;
  min-height:100dvh;
}

/* 标题/强调统一用快乐体（蜡笔小新味） */
.serif{ font-family:var(--font-fun); font-weight:400; letter-spacing:0.01em; }

/* ===== 手机外壳（桌面显示设备框；移动端铺满） ===== */
.phone{
  position:relative;
  width:100%; max-width:420px;
  min-height:100dvh;
  background:var(--bg);
  display:flex; flex-direction:column;
  overflow:hidden;
}
@media (min-width:540px){
  .phone{
    margin:24px 0; min-height:auto; height:calc(100dvh - 48px);
    border-radius:38px; box-shadow:var(--shadow-float);
    border:1px solid var(--line);
  }
}

/* ===== 顶栏 ===== */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px 12px;
  background:linear-gradient(var(--bg), oklch(0.97 0.012 95 / 0));
  position:relative; z-index:5;
}
.topbar .back{
  width:38px;height:38px;border-radius:var(--r-pill);
  display:grid;place-items:center;border:none;background:var(--surface);
  box-shadow:var(--shadow-1); color:var(--ink); cursor:pointer;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast);
}
.topbar .back:hover{ background:var(--surface-2); }
.topbar .back:active{ transform:scale(0.92); }
.topbar .ttl{ font-size:18px; font-weight:700; letter-spacing:0.01em; }
.topbar .sub{ font-size:12px; color:var(--ink-faint); margin-top:-2px; }
.topbar .spacer{ flex:1; }
.topbar .pill{
  font-size:12.5px; font-weight:600; color:var(--jade-deep);
  background:var(--jade-soft); padding:6px 12px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:5px;
}

/* ===== 屏幕容器 ===== */
.screen{ flex:1; overflow-y:auto; overscroll-behavior:contain; }
.screen::-webkit-scrollbar{ width:0; }
.pad{ padding:8px 18px 28px; }

.hidden{ display:none !important; }

/* ===== 通用文字 ===== */
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--jade); }
.h1{ font-size:28px; line-height:1.28; font-weight:800; letter-spacing:0; overflow-wrap:break-word; }
.h2{ font-size:21px; font-weight:700; letter-spacing:-0.005em; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.tiny{ font-size:12.5px; }

/* ===== 卡片 ===== */
.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  border:none; border-radius:var(--r-pill); padding:14px 22px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn:active{ transform:scale(0.97); }
.btn-jade{ background:var(--jade); color:#fff; box-shadow:0 6px 18px oklch(0.6 0.055 168 / 0.32); }
.btn-jade:hover{ filter:brightness(1.04); }
.btn-clay{ background:var(--clay); color:#fff; box-shadow:0 6px 18px oklch(0.66 0.105 46 / 0.3); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 16px; font-size:14px; }

/* ===========================================================
   引导页
   =========================================================== */
.onb{ min-height:100%; display:flex; flex-direction:column; padding:0 26px 30px; }
.onb-hero{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-top:64px; }
.onb-mark{
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(150deg, var(--jade), var(--jade-deep));
  box-shadow:0 10px 30px oklch(0.5 0.06 168 / 0.35); color:#fff; margin-bottom:26px;
}
.onb-hero .h1{ font-size:34px; }
.onb-hero .lead{ margin-top:14px; font-size:16px; color:var(--ink-soft); max-width:30ch; }
.onb-choose{ margin-top:36px; }
.choose-label{ font-size:13.5px; color:var(--ink-faint); margin:0 2px 12px; }
.choose-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choose-card{
  text-align:left; padding:18px 16px; border-radius:var(--r-lg);
  background:var(--surface); border:1.5px solid var(--line); cursor:pointer;
  transition:border-color var(--t) var(--ease), transform var(--t-fast), box-shadow var(--t);
}
.choose-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.choose-card.on{ border-color:var(--jade); background:var(--jade-ghost); box-shadow:var(--shadow-2); }
.choose-card .ico{ color:var(--jade-deep); margin-bottom:8px; }
.choose-card .t{ font-weight:700; font-size:16px; }
.choose-card .d{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

/* ===========================================================
   首页
   =========================================================== */
.home-head{ padding:6px 2px 18px; }
.greet{ font-size:14px; color:var(--ink-faint); }
.home-head .h1{ margin-top:2px; }

.modes{ display:flex; flex-direction:column; gap:14px; }
.mode-card{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  border-radius:var(--r-xl); padding:22px 22px 20px; border:1px solid var(--line-soft);
  transition:transform var(--t) var(--ease), box-shadow var(--t);
}
.mode-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.mode-card:active{ transform:scale(0.985); }
.mode-peilian{ background:linear-gradient(135deg, oklch(0.95 0.03 168), oklch(0.92 0.04 175)); }
.mode-canmou{ background:linear-gradient(135deg, oklch(0.96 0.03 70), oklch(0.94 0.05 52)); }
.mode-card .badge{
  font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--jade-deep);
}
.mode-canmou .badge{ color:oklch(0.5 0.1 46); }
.mode-card .name{ font-size:23px; font-weight:800; margin-top:6px; }
.mode-card .desc{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; max-width:26ch; }
.mode-card .go{
  margin-top:16px; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--jade-deep);
}
.mode-canmou .go{ color:oklch(0.5 0.1 46); }
.mode-card .deco{ position:absolute; right:-10px; bottom:-14px; opacity:0.16; }

.today{ margin-top:18px; padding:18px; border-left:3px solid var(--jade);
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer; }
.today:active{ transform:scale(0.99); }
.today .lbl{ font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--jade); }
.today .q{ font-size:17px; margin-top:8px; line-height:1.55; }
.today .why{ font-size:12.5px; color:var(--ink-faint); margin-top:8px; }

.home-points{
  margin-top:16px; display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
}
.home-points .coin{ width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--clay-soft);color:var(--clay); }
.home-points .v{ font-size:18px; font-weight:800; }
.home-points .l{ font-size:12.5px; color:var(--ink-faint); }

/* ===========================================================
   聊天（陪练 / 参谋共用基底）
   =========================================================== */
.chat-wrap{ display:flex; flex-direction:column; height:100%; }
.chat-stream{ flex:1; overflow-y:auto; padding:14px 16px 8px; display:flex; flex-direction:column; gap:13px;
  background:linear-gradient(180deg, oklch(0.965 0.014 84), oklch(0.972 0.012 88) 30%); }
.date-pill{ align-self:center; font-size:11.5px; color:var(--ink-faint); background:oklch(0.92 0.01 88 / 0.7);
  padding:4px 13px; border-radius:var(--r-pill); margin-bottom:2px; }
.intro-line{ align-self:center; text-align:center; font-size:12.5px; color:var(--ink-faint);
  max-width:26ch; line-height:1.5; margin:2px 0 6px; }
.chat-stream::-webkit-scrollbar{ width:0; }

.msg{ display:flex; gap:9px; max-width:86%; min-width:0; animation:rise var(--t) var(--ease) both; }
.msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.avatar{
  flex:0 0 auto; width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(145deg, var(--jade), var(--jade-deep));
  box-shadow:0 2px 8px oklch(0.55 0.08 160 / 0.25); border:1.5px solid #fff;
}
.msg.me .avatar{ background:linear-gradient(145deg, oklch(0.7 0.04 60), oklch(0.55 0.03 60)); }
.bubble{
  padding:12px 15px; border-radius:20px; font-size:15.5px; line-height:1.65;
  background:#fff; border:1px solid oklch(0.91 0.012 88); box-shadow:var(--shadow-2);
  border-top-left-radius:7px; word-break:break-word; overflow-wrap:break-word;
  white-space:pre-wrap; color:var(--ink); max-width:100%; letter-spacing:0.02em;
}
.msg.me .bubble{
  background:linear-gradient(150deg, var(--jade), var(--jade-deep)); color:#fff; border:none;
  border-top-left-radius:20px; border-top-right-radius:7px;
  box-shadow:0 6px 18px oklch(0.55 0.08 160 / 0.28);
}

.typing{ display:inline-flex; gap:4px; align-items:center; padding:4px 2px; }
.typing i{ width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:0.2s; } .typing i:nth-child(3){ animation-delay:0.4s; }

.empty-hint{
  margin:auto; text-align:center; color:var(--ink-faint); padding:40px 30px; max-width:30ch;
}
.empty-hint .ico{ color:var(--jade); opacity:0.6; margin-bottom:14px; }
.empty-hint .t{ font-size:15px; color:var(--ink-soft); line-height:1.6; }

/* 陪练：卡住时的小提示条 */
.hintbar{
  margin:2px 16px 0; display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
}
.hintbar::-webkit-scrollbar{ height:0; }
.hint-chip{
  flex:0 0 auto; font-size:13px; padding:8px 13px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  cursor:pointer; box-shadow:var(--shadow-1); transition:transform var(--t-fast), border-color var(--t-fast);
}
.hint-chip:active{ transform:scale(0.95); }
.hint-chip:hover{ border-color:var(--jade); }

/* 输入区 */
.composer{
  flex:0 0 auto; padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(oklch(0.97 0.012 95 / 0), var(--bg) 24%);
  display:flex; align-items:flex-end; gap:10px;
}
.composer .ti{
  flex:1; resize:none; max-height:120px; min-height:46px;
  font-family:inherit; font-size:15px; color:var(--ink); line-height:1.5;
  border:1px solid var(--line); border-radius:22px; padding:12px 16px;
  background:var(--surface); box-shadow:var(--shadow-1); outline:none;
  transition:border-color var(--t-fast);
}
.composer .ti:focus{ border-color:var(--jade); }
.composer .send{
  flex:0 0 auto; width:46px;height:46px;border-radius:var(--r-pill); border:none; cursor:pointer;
  background:var(--jade); color:#fff; display:grid; place-items:center;
  box-shadow:0 5px 16px oklch(0.6 0.055 168 / 0.34);
  transition:transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}
.composer .send:active{ transform:scale(0.9); }
.composer .send:disabled{ opacity:0.4; box-shadow:none; }

/* ===== 参谋：粘贴 + 三档建议 ===== */
.canmou-intro{ padding:18px 18px 6px; }
.paste-box{ margin:6px 16px 0; }
.paste-box textarea{
  width:100%; min-height:72px; resize:none; font-family:inherit; font-size:15px;
  border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px;
  background:var(--surface); outline:none; color:var(--ink);
}
.paste-box textarea:focus{ border-color:var(--jade); }
.paste-actions{ display:flex; gap:10px; margin-top:10px; }

.tiers{ padding:6px 16px 20px; display:flex; flex-direction:column; gap:12px; }
.tier{
  border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--surface);
  box-shadow:var(--shadow-1); overflow:hidden; animation:rise var(--t) var(--ease) both;
}
.tier-head{ display:flex; align-items:center; gap:8px; padding:13px 15px 0; }
.tier-dot{ width:9px;height:9px;border-radius:50%; }
.tier-w .tier-dot{ background:var(--warm); } .tier-f .tier-dot{ background:var(--fun); } .tier-b .tier-dot{ background:var(--bold); }
.tier-name{ font-size:13px; font-weight:700; }
.tier-w .tier-name{ color:var(--jade-deep); } .tier-f .tier-name{ color:oklch(0.5 0.09 70); } .tier-b .tier-name{ color:oklch(0.5 0.1 46); }
.tech-tag{ margin-left:auto; font-size:11px; font-weight:700; color:var(--clay);
  background:var(--clay-soft); padding:3px 9px; border-radius:var(--r-pill); }
.tier-body{ padding:8px 15px 14px; }
.tier-text{ font-size:15.5px; line-height:1.55; }
.tier-why{ font-size:12.5px; color:var(--ink-faint); margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); }
.tier-copy{
  margin-top:11px; font-size:13px; font-weight:700; color:var(--jade-deep);
  background:var(--jade-ghost); border:none; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer;
}
.tier-copy:active{ transform:scale(0.95); }
.tier-copy.done{ background:var(--jade); color:#fff; }

.serious-note{
  margin:0 16px 12px; padding:12px 15px; border-radius:var(--r-md);
  background:var(--clay-soft); color:oklch(0.4 0.09 46); font-size:13.5px; line-height:1.55;
  display:flex; gap:9px; align-items:flex-start;
}

/* ===========================================================
   积分商城 / 会员
   =========================================================== */
.wallet{
  margin:6px 0 18px; padding:22px; border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(140deg, var(--jade-deep), var(--jade));
  box-shadow:0 12px 30px oklch(0.5 0.06 168 / 0.3); position:relative; overflow:hidden;
}
.wallet .deco{ position:absolute; right:-20px; top:-20px; opacity:0.18; }
.wallet .lbl{ font-size:12.5px; opacity:0.85; letter-spacing:0.08em; }
.wallet .bal{ font-size:40px; font-weight:800; line-height:1.1; margin-top:4px; }
.wallet .vip{ margin-top:12px; font-size:12.5px; opacity:0.9; display:inline-flex; gap:6px; align-items:center;
  background:oklch(1 0 0 / 0.16); padding:5px 11px; border-radius:var(--r-pill); }

.sec-title{ font-size:16px; font-weight:700; margin:20px 2px 12px; display:flex; align-items:center; gap:7px; }
.sec-title .more{ margin-left:auto; font-size:12.5px; color:var(--ink-faint); font-weight:500; }

.pack-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pack{
  position:relative; text-align:center; padding:18px 12px; border-radius:var(--r-lg);
  background:var(--surface); border:1.5px solid var(--line); cursor:pointer;
  transition:border-color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.pack:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.pack.on{ border-color:var(--clay); background:var(--clay-soft); }
.pack .amt{ font-size:24px; font-weight:800; color:var(--ink); }
.pack .amt small{ font-size:13px; font-weight:600; color:var(--ink-faint); }
.pack .bonus{ font-size:12px; color:var(--clay); font-weight:700; margin-top:2px; min-height:16px; }
.pack .price{ font-size:14px; font-weight:700; color:var(--ink-soft); margin-top:8px; }
.pack .tag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:700; color:#fff; background:var(--clay); padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap; }

.vip-card{
  padding:20px; border-radius:var(--r-xl); border:1.5px solid var(--jade);
  background:linear-gradient(140deg, var(--jade-ghost), var(--surface));
}
.vip-card .vt{ font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px; }
.vip-card .vp{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.vip-feat{ margin:14px 0; display:flex; flex-direction:column; gap:9px; }
.vip-feat li{ list-style:none; display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-soft); }
.vip-feat .ph{ color:var(--jade); flex:0 0 auto; margin-top:2px; }

.task-list{ display:flex; flex-direction:column; gap:10px; }
.task{ display:flex; align-items:center; gap:13px; padding:14px 16px; }
.task .ph{ color:var(--jade); }
.task .tx{ flex:1; }
.task .tt{ font-size:14.5px; font-weight:600; }
.task .td{ font-size:12px; color:var(--ink-faint); }
.task .rw{ font-size:13px; font-weight:700; color:var(--clay); white-space:nowrap; }
.task.done{ opacity:0.55; }
.task .claim{ font-size:12.5px; font-weight:700; color:#fff; background:var(--jade); border:none;
  padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; }
.task .claim:disabled{ background:var(--line); color:var(--ink-faint); }

/* ===========================================================
   我的
   =========================================================== */
.me-head{ display:flex; align-items:center; gap:15px; padding:10px 2px 22px; }
.me-avatar{ width:62px;height:62px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-size:24px; font-weight:800; color:#fff; background:linear-gradient(145deg,var(--jade),var(--jade-deep)); }
.me-name{ font-size:20px; font-weight:800; }
.me-sub{ font-size:13px; color:var(--ink-faint); }

.setting{ display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; }
.setting + .setting{ border-top:1px solid var(--line-soft); }
.setting .ph{ color:var(--jade); }
.setting .lbl{ flex:1; font-size:15px; }
.setting .val{ font-size:13px; color:var(--ink-faint); }

.field{ margin-top:12px; }
.field label{ font-size:13px; color:var(--ink-soft); font-weight:600; display:block; margin-bottom:6px; }
.field input, .field select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px;
  background:var(--surface); outline:none;
}
.field input:focus, .field select:focus{ border-color:var(--jade); }
.field .help{ font-size:12px; color:var(--ink-faint); margin-top:6px; line-height:1.5; }

/* ===== 底部 Tab ===== */
.tabbar{
  flex:0 0 auto; display:flex; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line-soft);
}
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0;
  background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:11px; font-weight:600;
  transition:color var(--t-fast); }
.tab.on{ color:var(--jade-deep); }
.tab .ph{ transition:transform var(--t-fast) var(--ease); }
.tab.on .ph{ transform:translateY(-1px) scale(1.06); }

/* ===== 弹层 / Toast ===== */
.sheet-mask{ position:absolute; inset:0; background:oklch(0.3 0.02 60 / 0.42); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; z-index:50; animation:fade var(--t) ease both; }
.sheet{ width:100%; background:var(--bg); border-radius:24px 24px 0 0; padding:22px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-float); animation:slideup var(--t) var(--ease) both; }
.sheet .grab{ width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px; }
.sheet .st{ font-size:19px; font-weight:800; }
.sheet .ss{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.pay-row{ display:flex; align-items:center; gap:12px; padding:15px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); margin-top:12px; cursor:pointer; transition:border-color var(--t-fast); }
.pay-row.on{ border-color:var(--jade); background:var(--jade-ghost); }
.pay-row .ic{ width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff; }
.pay-row .ic.wx{ background:oklch(0.66 0.13 150); } .pay-row .ic.ali{ background:oklch(0.62 0.12 250); }
.pay-row .nm{ flex:1; font-size:15px; font-weight:600; }

.toast{ position:absolute; left:50%; bottom:90px; transform:translateX(-50%);
  background:oklch(0.28 0.012 60 / 0.95); color:#fff; font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:var(--r-pill); box-shadow:var(--shadow-float); z-index:80;
  animation:toastin var(--t) var(--ease) both; max-width:80%; text-align:center; }

/* ===== 动画 ===== */
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideup{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes toastin{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes blink{ 0%,60%,100%{ opacity:0.25; } 30%{ opacity:1; } }

.fade-in{ animation:rise var(--t-slow) var(--ease) both; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ===========================================================
   ▓▓▓  蜡笔小新涂鸦皮肤（覆盖层，统一粗黑描边 + 硬投影 + 快乐体）  ▓▓▓
   =========================================================== */

/* 纸纹：真·淡方格本（直接用低透明度墨线画，去掉脆弱的 blend hack） */
body{
  background-color:var(--bg-deep);
  background-image:
    linear-gradient(rgba(36,31,27,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,31,27,0.055) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
}
.phone{ position:relative; z-index:1; }

/* 字体纪律：快乐体只给【标题 / 按钮 / 短标签】这类展示位；
   正文、输入、长句回法一律走 Noto Sans，保证可读（taste-skill §3） */
.h1,.h2,.ttl,.name,.mode-card .name,.tier-name,.btn,.badge,.greet,
.eyebrow,.choose-card .t,.tab span,.bal,.q,.onb-mark,.tech-tag,
.hint-chip,.pill,.date-pill{ font-family:var(--font-fun) !important; font-weight:400; }
.h1{ letter-spacing:0; line-height:1.18; }
/* 正文/注解/三档回法/输入：保持无衬线，行高放松，读得舒服 */
.sub,.tier-copy,.lbl,.desc,.intro-line,.lead,.bubble,.ti{
  font-family:"Noto Sans SC", system-ui, sans-serif !important; }
.tier-copy{ line-height:1.55; }

/* 通用：把所有发丝线升级为粗黑描边 + 硬投影 */
.phone{ border:var(--bw) solid var(--ink) !important; box-shadow:var(--shadow-float); }
.card,.mode-card,.tier,.choose-card,.today,.home-points,.wallet,
.paste-box,.serious-note,.pay-row,.task-row,.pack,.bubble,.empty-hint .ico,
.composer,.sheet,.vip-card{
  border:var(--bw) solid var(--ink) !important;
  box-shadow:var(--shadow-2) !important;
  border-radius:var(--r-md);
}

/* 气泡：卡通对话框 */
.msg .bubble{ border:var(--bw) solid var(--ink); box-shadow:var(--shadow-1);
  border-radius:16px; font-weight:500; line-height:1.65; letter-spacing:0.02em;
  overflow-wrap:break-word; word-break:break-word; white-space:pre-wrap; }
.msg.me .bubble{ background:var(--fun); color:var(--ink); }
.msg.ai .bubble{ background:var(--surface); color:var(--ink); }

/* 头像：圆圆的描边贴纸 */
.avatar{ border:var(--bw) solid var(--ink) !important; box-shadow:2px 2px 0 var(--ink);
  background:var(--clay) !important; color:#fff !important; font-family:var(--font-fun); }
.msg.me .avatar{ background:var(--jade) !important; }

/* 按钮：实心描边 + 硬投影，按下去会"啪"地贴下 */
.btn,.send,.hint-chip,.tier-copy,.pill,.choose-card,.tab{
  border:var(--bw) solid var(--ink) !important;
  box-shadow:var(--shadow-1) !important;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active,.send:active,.hint-chip:active,.tier-copy:active,.mode-card:active,
.card.today:active,.choose-card:active{
  transform:translate(2px,2px) !important; box-shadow:1px 1px 0 var(--ink) !important;
}
.btn-jade{ background:var(--clay) !important; color:#fff !important; }
.send{ background:var(--clay) !important; color:#fff !important; border-radius:50% !important; }
.send:disabled{ background:var(--surface-2) !important; color:var(--ink-faint) !important; }

/* 输入框：本子上写字（字用无衬线，打字才看得清） */
.ti{ border:var(--bw) solid var(--ink) !important; background:var(--surface) !important;
  border-radius:14px; }
.composer{ background:var(--bg) !important; }

/* 快捷挑衅句：小贴纸 */
.hint-chip{ background:var(--surface) !important; color:var(--ink) !important; font-size:13.5px; }
.hint-chip:hover{ background:var(--fun) !important; }

/* 标签/徽章 */
.badge{ border:2px solid var(--ink); border-radius:var(--r-pill); padding:3px 10px;
  background:var(--surface); box-shadow:2px 2px 0 var(--ink); }
.mode-peilian .badge{ background:var(--clay-soft); }
.mode-canmou .badge{ background:var(--jade-soft); }
.tech-tag{ border:2px solid var(--ink); background:var(--fun) !important; color:var(--ink) !important;
  box-shadow:1px 1px 0 var(--ink); }
.date-pill{ border:2px solid var(--ink); background:var(--surface); box-shadow:2px 2px 0 var(--ink); }

/* 顶栏 mark / 引导大图标 */
.onb-mark{ border:var(--bw) solid var(--ink); box-shadow:var(--shadow-2); background:var(--clay); color:#fff; }

/* 手作歪扭：给卡片们一点点随机倾斜 */
.mode-peilian{ transform:rotate(-0.8deg); } .mode-canmou{ transform:rotate(0.7deg); }
.today{ transform:rotate(-0.5deg); }
.tier:nth-child(1){ transform:rotate(-0.6deg); }
.tier:nth-child(3){ transform:rotate(0.6deg); }
.choose-card:first-child{ transform:rotate(-1.2deg); }
.choose-card:last-child{ transform:rotate(1.2deg); }

/* 底部 Tab：贴合圆角框，堵住漏出的方格背景，消除"悬空托架"难受感 */
.phone{ background:var(--surface) !important; }          /* 给框补底色，圆角内不再漏 grid */
@media (min-width:540px){
  .phone{ border-radius:18px !important; }               /* 整机收成小圆角（不再大圆/方角） */
}
.tabbar,#tabbar{
  border-top:var(--bw) solid var(--ink) !important;
  background:var(--surface) !important;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom)) !important;
  border-radius:0 0 15px 15px;                            /* 底部小圆角，跟手机框对齐 */
}
/* 图标加重、文字归整，跟粗黑涂鸦风统一 */
.tab{ color:var(--ink-soft) !important; gap:2px !important; }
.tab .ph,.tab i{ font-size:20px; }
.tab span{ font-size:11px; font-weight:400; }
/* 选中态：小新红高亮 + 图标轻微放大，干净不拥挤 */
.tab.on{ color:var(--clay) !important; }
.tab.on .ph,.tab.on i{ transform:translateY(-1px) scale(1.08); }

/* toast 改卡通黑框 */
.toast{ background:var(--ink) !important; border:2px solid var(--ink);
  box-shadow:var(--shadow-2); border-radius:var(--r-pill); font-family:var(--font-fun); }

/* 文字主色：标题用小新红点缀已在内联，保持 */
.eyebrow{ color:var(--clay) !important; letter-spacing:0.06em; }

/* ===========================================================
   ▓▓▓  审美打磨：层级 / 气泡入场 / 多色平衡  ▓▓▓
   =========================================================== */

/* 1) 视觉层级——主角更"厚"，配角更"薄"，别全程同音量
   主入口卡片/会员卡：更深的浮起投影；小标签：轻投影 */
.mode-card,.vip-card{ box-shadow:var(--shadow-float) !important; }
.today{ box-shadow:var(--shadow-2) !important; }
.badge,.tech-tag,.date-pill,.pill{ box-shadow:2px 2px 0 var(--ink) !important; }
.btn-jade{ box-shadow:var(--shadow-2) !important; }

/* 2) 多色平衡——破"全红"：对线偏暖红、抄招偏蜡笔绿，红不再独占 */
.mode-peilian{ background:linear-gradient(180deg,#fff7f4,var(--surface)) !important; }
.mode-canmou{ background:linear-gradient(180deg,#eef8f1,var(--surface)) !important; }
.mode-canmou .go{ color:var(--jade-deep); }
.mode-peilian .go{ color:var(--clay); }

/* 3) 气泡入场——卡通"啵"地弹出（reduced-motion 自动关闭，§taste 默认尊重） */
@keyframes bubblePop{
  0%{ transform:scale(0.82) translateY(6px); opacity:0; }
  60%{ transform:scale(1.04); opacity:1; }
  100%{ transform:scale(1) translateY(0); }
}
.msg .bubble{ animation:bubblePop 0.26s var(--ease) both; transform-origin:left center; }
.msg.me .bubble{ transform-origin:right center; }
@media (prefers-reduced-motion: reduce){
  .msg .bubble{ animation:none; }
}