/* ============================================================
 * 花哪儿了 · 样式表
 * 设计：卡片式 + 柔和阴影 + 品牌渐变，支持浅色/深色
 * ============================================================ */

/* ---------- 主题变量 ---------- */
:root {
  --brand: #4F7CFF;
  --brand-2: #7C5CFF;
  --brand-soft: rgba(79, 124, 255, .12);
  --brand-grad: linear-gradient(135deg, #5B8CFF 0%, #7C5CFF 55%, #A56CFF 100%);
  --accent: #FF7A45;
  --income: #14B87A;
  --income-soft: rgba(20, 184, 122, .12);
  --expense: #FF5A5F;
  --expense-soft: rgba(255, 90, 95, .1);
  --warn: #FFB020;
  --warn-soft: rgba(255, 176, 32, .14);
  --danger: #FF4D4F;

  --bg: #F4F6FB;
  --bg-2: #EDF0F8;
  --card: #FFFFFF;
  --card-2: #F8FAFF;
  --text: #141A24;
  --text-2: #5A6478;
  --text-3: #8D97AB;
  --line: rgba(20, 30, 60, .08);
  --line-2: rgba(20, 30, 60, .12);
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, .05), 0 1px 3px rgba(20, 30, 60, .04);
  --shadow: 0 2px 8px rgba(20, 30, 60, .06), 0 8px 24px rgba(20, 30, 60, .05);
  --shadow-lg: 0 12px 40px rgba(20, 30, 60, .14);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tab-h: 60px;
  --top-h: 54px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

[data-theme="dark"] {
  --brand: #6E96FF;
  --brand-2: #9B7CFF;
  --brand-soft: rgba(110, 150, 255, .16);
  --brand-grad: linear-gradient(135deg, #4A6FE0 0%, #6B4FE8 55%, #8B5CE8 100%);
  --income: #2FD69A;
  --income-soft: rgba(47, 214, 154, .14);
  --expense: #FF6B70;
  --expense-soft: rgba(255, 107, 112, .14);
  --warn: #FFC24D;
  --warn-soft: rgba(255, 194, 77, .16);

  --bg: #0C0F15;
  --bg-2: #131722;
  --card: #171C27;
  --card-2: #1D2431;
  --text: #EDF1F8;
  --text-2: #A3AEC2;
  --text-3: #6F7B91;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .28);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, .55);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
input, textarea { -webkit-appearance: none; appearance: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; }
::selection { background: var(--brand-soft); }

.ic { display: block; flex: none; }
[hidden] { display: none !important; }

/* 滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 启动闪屏 ---------- */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg);
  color: var(--text);
  transition: opacity .45s ease, visibility .45s ease;
}
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo {
  width: 84px; height: 84px; border-radius: 22px; display: block;
  box-shadow: 0 16px 40px rgba(79, 124, 255, .32);
  animation: pop .7s var(--ease) both;
}
.splash-name { font-size: 22px; font-weight: 700; letter-spacing: .1em; }
.splash-tip { font-size: 12.5px; opacity: .62; letter-spacing: .05em; }
@keyframes pop {
  from { transform: scale(.6) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---------- 应用外壳 ---------- */
.app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 700px) {
  body { background: var(--bg-2); }
  .app {
    box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(20, 30, 60, .16);
    border-radius: 0;
  }
}

/* ---------- 顶栏 ---------- */
.topbar {
  flex: none;
  height: calc(var(--top-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px; padding-right: 14px;
  background: var(--bg);
  position: relative; z-index: 20;
}
.topbar.is-blur {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.tb-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; flex: 1; min-width: 0; }
.tb-title small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.tb-btn {
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--text-2); background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), background .2s;
}
.tb-btn:active { transform: scale(.92); }
.tb-btn--ghost { background: transparent; box-shadow: none; }
.tb-btn--brand { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 14px rgba(79, 124, 255, .38); }

/* ---------- 视图容器 ---------- */
/* m02799：.view 上不要写 will-change:opacity,transform ——
   iOS Safari 会给带 will-change 的元素单独提合成层，层里的 <input>
   点击后经常「看起来聚焦了、键盘却不弹」。这个 App 的输入框
   （备注、垫付姓名、搜索框）全靠系统键盘，不能赌。
   过渡本身已经很短，不提层也看不出差别。 */
.views { flex: 1; position: relative; overflow: hidden; }
.view {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px calc(var(--tab-h) + var(--safe-b) + 26px);
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.995);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.view.active { opacity: 1; visibility: visible; transform: none; }
.view.no-pad { padding-left: 0; padding-right: 0; }

/* 记账页：内容独立滚动，键盘固定在底部 */
.view[data-view="add"] {
  overflow: hidden;
  padding: 0;
  display: flex; flex-direction: column;
}
.add-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
/* 直接子元素一律不收缩：否则内容一多，各块会被压扁、文字被裁切 */
.add-scroll > * { flex: none; }

/* ---------- 底部标签栏 ---------- */
.tabbar {
  flex: none;
  position: relative;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  z-index: 30;
}
.tab {
  flex: 1; height: var(--tab-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3);
  transition: color .2s ease, transform .18s var(--ease);
  position: relative;
}
.tab:active { transform: scale(.94); }
.tab.active { color: var(--brand); }
.tab-ic { display: grid; place-items: center; height: 22px; }
.tab-label { font-size: 10.5px; font-weight: 550; letter-spacing: .02em; }
.tab--main { flex: 1.08; }
.tab-fab {
  width: 50px; height: 50px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 8px 22px rgba(79, 124, 255, .42);
  margin-top: -22px;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.tab--main.active .tab-fab { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(79, 124, 255, .5); }
.tab--main .tab-label { margin-top: 2px; }
.tab--main.active { color: var(--brand); }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 16px;
  margin-bottom: 12px;
}
.card--flat { box-shadow: none; }
.card--pad0 { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.card-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.card-title .ic { color: var(--text-3); }
.card-sub { font-size: 12px; color: var(--text-3); }
.card-more { font-size: 12.5px; color: var(--brand); font-weight: 550; display: flex; align-items: center; gap: 2px; }

.section-title {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  margin: 18px 2px 9px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
}

/* ---------- 记账页：金额 + 键盘 ---------- */
.add-wrap { display: flex; flex-direction: column; min-height: 100%; }

.type-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 10px 0 0; padding: 0 16px;
  width: 100%;
}
.type-switch {
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-2); border-radius: 13px;
  width: 168px; flex: none;
  position: relative;
}

/* 识图导入 / 导入账单：两个气泡并排 */
.import-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 9px 0 0; padding: 0 16px;
  width: 100%;
}
.scan-bubble {
  display: flex; align-items: center; gap: 7px; flex: none;
  height: 36px; padding: 0 13px 0 5px;
  border-radius: 999px; text-align: left;
  background: linear-gradient(135deg, rgba(79,124,255,.14), rgba(124,92,255,.1) 55%, rgba(165,108,255,.08));
  border: 1px solid rgba(79,124,255,.2);
  box-shadow: 0 2px 8px rgba(79,124,255,.1);
  transition: transform .16s var(--ease), box-shadow .22s, border-color .22s, background .25s;
}
.scan-bubble:active {
  transform: scale(.955);
  border-color: rgba(79,124,255,.46);
  box-shadow: 0 1px 4px rgba(79,124,255,.16);
}
.scan-bubble-ic {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 3px 9px rgba(79,124,255,.34);
}
.scan-bubble-ic .ic { color: #fff; }
.scan-bubble-txt {
  font-size: 12.5px; font-weight: 650; color: var(--brand);
  letter-spacing: .2px; white-space: nowrap;
}
.scan-bubble--in {
  background: linear-gradient(135deg, rgba(20,184,122,.16), rgba(20,184,122,.09) 60%, rgba(79,124,255,.07));
  border-color: rgba(20,184,122,.22);
  box-shadow: 0 2px 8px rgba(20,184,122,.1);
}
.scan-bubble--in:active { border-color: rgba(20,184,122,.46); }
.scan-bubble--in .scan-bubble-ic {
  background: linear-gradient(135deg, #23CB8C, #12A76C);
  box-shadow: 0 3px 9px rgba(20,184,122,.34);
}
.scan-bubble--in .scan-bubble-txt { color: var(--income); }
/* 导入账单气泡：暖橙色，和识图的紫蓝区分开 */
.scan-bubble--bill {
  background: linear-gradient(135deg, rgba(255,122,69,.15), rgba(255,176,32,.1) 60%, rgba(255,122,69,.06));
  border-color: rgba(255,122,69,.22);
  box-shadow: 0 2px 8px rgba(255,122,69,.1);
}
.scan-bubble--bill:active { border-color: rgba(255,122,69,.46); }
.scan-bubble--bill .scan-bubble-ic {
  background: linear-gradient(135deg, #FF9A5B, #FF6B33);
  box-shadow: 0 3px 9px rgba(255,122,69,.34);
}
.scan-bubble--bill .scan-bubble-txt { color: var(--accent); }
[data-theme="dark"] .scan-bubble { border-color: rgba(124,92,255,.32); }
[data-theme="dark"] .scan-bubble--in { border-color: rgba(20,184,122,.34); }
[data-theme="dark"] .scan-bubble--bill { border-color: rgba(255,122,69,.34); }
@media (max-width: 340px) {
  .type-switch { width: 148px; }
  .scan-bubble { padding: 0 10px 0 5px; gap: 6px; }
  .scan-bubble-txt { font-size: 12px; }
}
.type-switch button {
  flex: 1; height: 30px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  transition: color .2s, background .25s var(--ease), box-shadow .25s;
  position: relative; z-index: 1;
}
.type-switch button.on { color: var(--text); background: var(--card); box-shadow: var(--shadow-sm); }
.type-switch button.on[data-type="income"] { color: var(--income); }

.amount-display {
  width: 100%; background: none; border: 0; text-align: right;
  padding: 14px 20px 0;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px;
  min-height: 62px;
}
.calc-hint {
  text-align: right; padding: 0 22px; height: 16px;
  font-size: 11.5px; color: var(--text-3);
  opacity: 0; transition: opacity .2s;
  font-variant-numeric: tabular-nums;
}
.calc-hint.on { opacity: 1; color: var(--brand); }
.amount-cur { font-size: 22px; font-weight: 600; color: var(--text-3); padding-bottom: 6px; }
.amount-val {
  font-size: 40px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  transition: color .25s;
  word-break: break-all; text-align: right;
}
.amount-val.income { color: var(--income); }
.amount-val.placeholder { color: var(--text-3); opacity: .45; }
.amount-val .cursor {
  display: inline-block; width: 2px; height: 34px; margin-left: 2px;
  background: var(--brand); vertical-align: -4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.cat-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px 14px;
  scroll-padding-left: 16px;
}
.cat-item {
  flex: none; width: 58px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .18s var(--ease);
}
.cat-item:active { transform: scale(.92); }
.cat-bubble {
  width: 50px; height: 50px; border-radius: 17px;
  display: grid; place-items: center; font-size: 23px;
  background: var(--card-2);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: all .22s var(--ease);
}
.cat-item.on .cat-bubble {
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(79, 124, 255, .26);
  transform: translateY(-2px);
}
.cat-item.on .cat-name { color: var(--brand); font-weight: 650; }
.cat-name { font-size: 11px; color: var(--text-2); white-space: nowrap; }

.sub-row {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 16px 12px;
}
.chip {
  flex: none;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; color: var(--text-2);
  background: var(--card-2);
  border: 1px solid var(--line);
  transition: all .18s var(--ease);
}
.chip:active { transform: scale(.95); }
.chip.on { background: var(--brand); color: #fff; border-color: transparent; font-weight: 550; box-shadow: 0 3px 10px rgba(79, 124, 255, .3); }

.meta-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 10px;
}
.meta-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 11px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  transition: transform .15s var(--ease);
  max-width: 50%;
}
.meta-btn:active { transform: scale(.95); }
.meta-btn .ic { color: var(--text-3); }
.meta-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note-input {
  flex: 1; height: 34px; padding: 0 13px;
  border-radius: 11px; background: var(--card-2);
  border: 1px solid var(--line);
  font-size: 13px; min-width: 0;
}
.note-input::placeholder { color: var(--text-3); }
.note-input:focus { outline: none; border-color: var(--brand); background: var(--card); }

/* 最近记录（填充记账页空白） */
.recent-block { margin: 12px 16px 14px; min-height: 0; }
.recent-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-3); padding: 4px 2px 7px;
}
.recent-head .card-more { font-size: 11.5px; }
.recent-list { display: flex; flex-direction: column; gap: 6px; }
.recent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--line);
  text-align: left; width: 100%;
  transition: transform .15s var(--ease), background .18s;
}
.recent-item:active { transform: scale(.98); background: var(--brand-soft); }
.recent-ic {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 13px;
}
.recent-name {
  flex: 1; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); }

/* 数字键盘 */
.status-strip + .keypad { margin-top: 8px; }
.keypad {
  flex: none;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 8px 8px 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
.key {
  height: 50px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--card);
  font-size: 21px; font-weight: 550;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, background .15s;
  user-select: none;
}
.key:active { transform: scale(.95); background: var(--brand-soft); }
.key--fn { font-size: 16px; color: var(--text-2); }
.key--ok {
  background: var(--brand-grad); color: #fff;
  font-size: 16px; font-weight: 650;
  box-shadow: 0 6px 18px rgba(79, 124, 255, .36);
}
.key--ok:active { background: var(--brand-grad); transform: scale(.96); }
.key--ok.disabled { opacity: .4; box-shadow: none; }
.key--del .ic { color: var(--text-2); }

/* 记账页在宽屏下 */
@media (min-width: 700px) {
  .keypad { border-radius: 18px 18px 0 0; }
}

/* ---------- 顶栏周期切换 ---------- */
.period-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 10px;
}
.period-btn {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--card); color: var(--text-2);
  box-shadow: var(--shadow-sm);
  flex: none;
}
.period-btn:disabled { opacity: .3; }
.period-label {
  flex: 1; text-align: center;
  font-size: 13.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.period-label small { font-size: 11px; font-weight: 400; color: var(--text-3); }

/* ---------- 概览大卡 ---------- */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--brand-grad);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(79, 124, 255, .28);
  margin-bottom: 12px;
}
.hero::after {
  content: ''; position: absolute;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  right: -60px; top: -80px;
}
.hero::before {
  content: ''; position: absolute;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  right: 40px; bottom: -70px;
}
.hero-label { font-size: 12.5px; opacity: .82; letter-spacing: .04em; position: relative; }
.hero-amount {
  font-size: 36px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 14px; position: relative;
}
.hero-amount small { font-size: 16px; font-weight: 500; opacity: .8; }
.hero-grid { display: flex; gap: 0; position: relative; }
.hero-cell { flex: 1; position: relative; }
.hero-cell + .hero-cell { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .22); }
.hero-cell-label { font-size: 11px; opacity: .78; margin-bottom: 3px; }
.hero-cell-val { font-size: 15.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hero-cell-val.neg { color: #FFD9D9; }

/* 预算条 */
.budget-bar {
  height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .26);
  overflow: hidden; margin-top: 14px; position: relative;
}
.budget-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: #fff;
  transition: width .7s var(--ease);
}
.budget-bar.warn > i { background: #FFE08A; }
.budget-bar.over > i { background: #FF9A9A; }
.hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: 11.5px; opacity: .9; position: relative;
}

/* 普通预算卡 */
.budget-card .bar-wrap {
  height: 9px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin: 12px 0 10px;
}
.budget-card .bar-wrap > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--brand-grad);
  transition: width .7s var(--ease);
}
.budget-card .bar-wrap.warn > i { background: linear-gradient(90deg, #FFB020, #FF8A00); }
.budget-card .bar-wrap.over > i { background: linear-gradient(90deg, #FF6B70, #FF3B41); }
.budget-nums { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.budget-nums b { color: var(--text); font-variant-numeric: tabular-nums; }

/* 提醒横幅 */
.alert-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  margin-bottom: 12px;
  animation: slideDown .35s var(--ease);
}
.alert-banner.over { background: var(--expense-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.alert-banner .ic { color: var(--warn); margin-top: 1px; flex: none; }
.alert-banner.over .ic { color: var(--danger); }
.alert-txt { flex: 1; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.alert-txt b { font-weight: 650; }
.alert-txt .sub { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 分类统计行 ---------- */
.cat-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0;
  position: relative;
}
.cat-row + .cat-row { border-top: 1px solid var(--line); }
.cat-avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center; font-size: 18px;
  flex: none;
}
.cat-main { flex: 1; min-width: 0; }
.cat-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cat-line1 .name { font-size: 13.5px; font-weight: 550; }
.cat-line1 .amt { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cat-line2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.cat-track { flex: 1; height: 5px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.cat-track > i { display: block; height: 100%; border-radius: 99px; transition: width .6s var(--ease); }
.cat-pct { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ---------- 账目列表 ---------- */
.day-group { margin-bottom: 6px; }
.day-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 7px;
  font-size: 12px; color: var(--text-3);
}
.day-head .d { font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.day-head .s { font-variant-numeric: tabular-nums; }
.tx-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  background: var(--card);
  border-radius: 14px;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  transition: transform .16s var(--ease), background .2s;
  width: 100%; text-align: left;
}
.tx-item:active { transform: scale(.985); background: var(--card-2); }
.tx-avatar {
  width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; font-size: 19px;
  flex: none;
}
.tx-main { flex: 1; min-width: 0; }
.tx-name { font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: 5px; }
.tx-name .sub-tag {
  font-size: 10.5px; font-weight: 400; color: var(--text-3);
  background: var(--bg-2); padding: 1px 6px; border-radius: 6px;
}
.tx-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.tx-amt {
  font-size: 15.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  flex: none; letter-spacing: -.01em;
}
.tx-amt.out { color: var(--text); }
.tx-amt.in { color: var(--income); }

.empty {
  text-align: center; padding: 44px 20px;
  color: var(--text-3);
}
.empty-emoji { font-size: 44px; margin-bottom: 10px; opacity: .85; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.empty-desc { font-size: 12.5px; line-height: 1.6; }
.empty-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: 12px;
  background: var(--brand-grad); color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(79, 124, 255, .3);
}

/* ---------- 筛选栏 ---------- */
.filter-bar {
  display: flex; gap: 8px; padding: 2px 16px 10px; overflow-x: auto;
  align-items: center;
}
.search-box {
  flex: 1; display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-width: 110px;
}
.search-box .ic { color: var(--text-3); flex: none; }
.search-box input {
  flex: 1; border: 0; background: none; font-size: 13px; min-width: 0; outline: none;
}
.search-box input::placeholder { color: var(--text-3); }
.filter-btn {
  flex: none; height: 36px; padding: 0 13px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 5px;
  box-shadow: var(--shadow-sm);
}
.filter-btn.on { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); font-weight: 600; }

/* ---------- 月度总结 ---------- */
.report-hero {
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.report-hero::after {
  content: ''; position: absolute; right: -50px; top: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: var(--brand-soft);
}
.rh-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.rh-label { font-size: 12.5px; color: var(--text-3); }
.rh-amount { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.rh-delta {
  font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 3px;
}
.rh-delta.up { background: var(--expense-soft); color: var(--expense); }
.rh-delta.down { background: var(--income-soft); color: var(--income); }
.rh-delta.flat { background: var(--bg-2); color: var(--text-3); }
.rh-cells { display: flex; gap: 0; margin-top: 16px; position: relative; }
.rh-cell { flex: 1; }
.rh-cell + .rh-cell { padding-left: 14px; border-left: 1px solid var(--line); }
.rh-cell .l { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.rh-cell .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rh-cell .v.income { color: var(--income); }
.rh-cell .v.expense { color: var(--expense); }

.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.legend-name { flex: 1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-val { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* 洞察 */
.insight {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0;
}
.insight + .insight { border-top: 1px solid var(--line); }
.insight-ic {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 14px;
  background: var(--brand-soft); color: var(--brand);
}
.insight-txt { flex: 1; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.insight-txt b { color: var(--text); font-weight: 650; }

/* 月度对比 */
.month-compare { display: flex; flex-direction: column; gap: 9px; }
.mc-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.mc-label { width: 58px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.mc-track { flex: 1; height: 20px; border-radius: 7px; background: var(--bg-2); position: relative; overflow: hidden; }
.mc-track > i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px;
  background: var(--brand-grad); opacity: .9;
  transition: width .7s var(--ease);
}
.mc-track > i.cur { background: var(--brand-grad); }
.mc-track > i.old { background: var(--line-2); }
.mc-val { width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); flex: none; }

/* ---------- 攒钱目标 ---------- */
.goal-hero {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  background: var(--brand-grad);
  color: #fff; margin-bottom: 12px;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(79, 124, 255, .26);
}
.goal-hero::after {
  content: ''; position: absolute; right: -40px; bottom: -60px;
  width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.gh-label { font-size: 12px; opacity: .82; }
.gh-amount { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 0; letter-spacing: -.02em; }
.gh-sub { font-size: 12px; opacity: .86; margin-top: 4px; }

.goal-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 15px;
  margin-bottom: 11px;
  position: relative;
  transition: transform .18s var(--ease);
}
.goal-card:active { transform: scale(.99); }
.goal-top { display: flex; align-items: center; gap: 11px; }
.goal-icon {
  width: 44px; height: 44px; border-radius: 15px;
  display: grid; place-items: center; font-size: 21px;
  flex: none;
}
.goal-name { font-size: 15px; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 7px;
  background: var(--income-soft); color: var(--income);
}
/* 情侣专属目标：左边一条粉色细边，一眼看出「这是我们的」 */
.goal-card--couple { border-color: rgba(255, 106, 155, .3); }
.goal-card--couple::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #FF6A9B, #7C5CFF);
}
.goal-badge--couple { background: rgba(255, 106, 155, .14); color: #FF6A9B; }
.goal-nums { display: flex; align-items: baseline; gap: 5px; margin: 13px 0 8px; }
.goal-nums .now { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.goal-nums .tgt { font-size: 12.5px; color: var(--text-3); }
.goal-nums .pct { margin-left: auto; font-size: 12.5px; font-weight: 650; }
.goal-track { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.goal-track > i { display: block; height: 100%; border-radius: 99px; transition: width .8s var(--ease); }
.goal-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; font-size: 11.5px; color: var(--text-3);
}
.goal-actions { display: flex; gap: 7px; margin-top: 12px; }
.goal-btn {
  flex: 1; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand);
  transition: transform .15s var(--ease);
}
.goal-btn:active { transform: scale(.96); }
.goal-btn--ghost { background: var(--bg-2); color: var(--text-2); }

/* ---------- 设置页 ---------- */
.set-group { margin-bottom: 14px; }
.set-group-title {
  font-size: 12px; color: var(--text-3); font-weight: 600;
  margin: 0 4px 7px; letter-spacing: .02em;
}
.set-card {
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.set-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; width: 100%; text-align: left;
  transition: background .18s;
  min-height: 50px;
}
.set-row:active { background: var(--card-2); }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-ic {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
  background: var(--brand-soft); color: var(--brand);
}
.set-ic.warn { background: var(--warn-soft); color: var(--warn); }
.set-ic.income { background: var(--income-soft); color: var(--income); }
.set-ic.danger { background: var(--expense-soft); color: var(--expense); }
.set-main { flex: 1; min-width: 0; }
.set-name { font-size: 14px; font-weight: 500; }
.set-desc {
  font-size: 11.5px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-val { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 4px; flex: none; max-width: 42%; }
.set-val b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-val > span:not(.switch) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.switch {
  width: 46px; height: 28px; border-radius: 99px;
  background: var(--line-2); position: relative; flex: none;
  transition: background .25s var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease);
}
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(18px); }

/* ---------- 弹层 ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 14, 22, .45);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s ease;
}
.sheet-mask.in { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  max-width: 560px; margin: 0 auto;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  padding: 8px 18px calc(18px + var(--safe-b));
  transform: translateY(102%);
  transition: transform .34s var(--ease);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
}
.sheet.in { transform: none; }
.sheet-grab {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--line-2); margin: 4px auto 12px; flex: none;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex: none; }
.sheet-head--notitle { justify-content: flex-end; margin-bottom: 4px; }
.sheet-title { font-size: 16px; font-weight: 650; }
.sheet-body { overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.sheet-foot {
  flex: none; padding-top: 12px; margin-top: 4px;
  background: linear-gradient(to top, var(--card) 72%, transparent);
}
.sheet-close { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--text-3); }

/* 表单 */
.field { margin-bottom: 14px; }
.field-label { font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; font-weight: 500; }
.field-label.row-between { display: flex; align-items: center; justify-content: space-between; }
.field-input {
  width: 100%; height: 46px; padding: 0 14px;
  border-radius: 13px; background: var(--bg-2);
  border: 1px solid transparent;
  font-size: 15px; transition: border-color .2s, background .2s;
}
.field-input:focus { outline: none; border-color: var(--brand); background: var(--card); }
.field-input.amount { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
textarea.field-input { height: auto; min-height: 76px; padding: 12px 14px; resize: none; line-height: 1.55; }

.btn {
  height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 600;
  width: 100%;
  transition: transform .15s var(--ease), opacity .2s;
}
.btn:active { transform: scale(.98); }
/* 灰掉的按钮：不只是点不动，还得看得出来点不动。
   之前 .btn 完全没有 :disabled 样式，主色按钮即使 disabled 也仍是满血蓝，
   用户会以为可以点，点下去没反应。 */
.btn:disabled,
.btn[disabled] {
  background: var(--bg-2);
  color: var(--text-3);
  box-shadow: none;
  opacity: .85;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--primary { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 22px rgba(79, 124, 255, .32); }
.btn--ghost { background: var(--bg-2); color: var(--text-2); }
.btn--danger { background: var(--expense-soft); color: var(--expense); }
.btn--sm { height: 38px; font-size: 13.5px; border-radius: 11px; }
.btn-row { display: flex; gap: 10px; }

/* 选项网格 */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.opt {
  height: 44px; border-radius: 12px;
  background: var(--bg-2); border: 1.5px solid transparent;
  font-size: 13px; font-weight: 550; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .18s var(--ease);
}
.opt.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.opt small { font-size: 10.5px; opacity: .7; }

/* emoji 选择 */
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-opt {
  aspect-ratio: 1; border-radius: 13px; font-size: 22px;
  display: grid; place-items: center; background: var(--bg-2);
  border: 1.5px solid transparent;
}
.emoji-opt.on { border-color: var(--brand); background: var(--brand-soft); }

/* 颜色选择 */
.color-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.color-opt {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid transparent; position: relative;
  transition: transform .16s var(--ease);
}
.color-opt.on { transform: scale(1.1); border-color: var(--card); box-shadow: 0 0 0 2px currentColor; }

/* 分段控件 */
.segmented {
  display: flex; padding: 3px; border-radius: 12px; background: var(--bg-2); gap: 3px;
}
.segmented button {
  flex: 1; height: 34px; border-radius: 9px;
  font-size: 13px; font-weight: 550; color: var(--text-3);
  transition: all .2s var(--ease);
}
.segmented button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- 提示 ---------- */
.toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b) + 20px);
  z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 84%;
  padding: 10px 18px; border-radius: 13px;
  background: rgba(24, 30, 44, .92);
  color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transform: translateY(14px) scale(.94); opacity: 0;
  transition: all .26s var(--ease);
  backdrop-filter: blur(10px);
  text-align: center; line-height: 1.5;
}
.toast.in { transform: none; opacity: 1; }
.toast--error { background: rgba(200, 40, 44, .94); }
.toast--success { background: rgba(16, 150, 100, .94); }

/* ---------- 确认对话框 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 22, .48);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; transition: opacity .22s ease;
}
.modal-mask.in { opacity: 1; }
.modal {
  width: 100%; max-width: 320px;
  background: var(--card); border-radius: 20px;
  padding: 22px 20px 16px; text-align: center;
  transform: scale(.92); opacity: 0;
  transition: all .28s var(--ease);
  box-shadow: var(--shadow-lg);
}
.modal-mask.in .modal { transform: none; opacity: 1; }
.modal-title { font-size: 16px; font-weight: 650; margin-bottom: 7px; }
.modal-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 18px; }
.modal-btns { display: flex; gap: 9px; }
/* 只有一个按钮的告知型弹窗：按钮拉满整行，做成一条大气泡 */
.modal-btns--one { display: block; }
.modal-btns--one .btn { width: 100%; height: 46px; border-radius: 23px; font-size: 15px; font-weight: 650; }

/* ---------- 暖心提示 ---------- */
.tip-card {
  margin: 4px 16px 12px;
  padding: 14px 15px 11px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #FFF9F0 0%, #FFFDFB 62%, var(--card) 100%);
  border: 1px solid rgba(255, 176, 32, .22);
  box-shadow: 0 4px 16px rgba(255, 168, 80, .1);
  animation: fadeUp .45s var(--ease) both;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .tip-card {
  background: linear-gradient(160deg, #241E17 0%, #1C1A18 62%, var(--card) 100%);
  border-color: rgba(255, 194, 77, .18);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.tip-card::after {
  content: ''; position: absolute; right: -26px; top: -32px;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 32, .16), transparent 68%);
  pointer-events: none;
}
.tip-top { display: flex; align-items: center; gap: 9px; }
.tip-ic { font-size: 17px; line-height: 1; flex: none; }
.tip-head-txt { flex: 1; min-width: 0; }
.tip-head-txt b { display: block; font-size: 13px; font-weight: 680; letter-spacing: .01em; }
.tip-head-txt span { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.tip-arrow {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  color: var(--text-3); background: rgba(255, 176, 32, .1);
  transition: background .18s ease, color .18s ease;
}
.tip-arrow:active { background: rgba(255, 176, 32, .22); color: var(--warn); }
.tip-lines { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.tip-line { display: flex; gap: 7px; align-items: flex-start; }
.tip-e { font-size: 13px; line-height: 1.55; flex: none; }
.tip-t { flex: 1; font-size: 12.5px; line-height: 1.62; color: var(--text-2); }
.tip-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed rgba(255, 176, 32, .22);
}
.tip-tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  background: rgba(255, 176, 32, .14); color: #B57500;
}
[data-theme="dark"] .tip-tag { color: var(--warn); }
.tip-refresh {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}
.tip-refresh:active { background: rgba(255, 176, 32, .14); color: var(--warn); }

/* 单行版（明细页 / 报告页） */
.tip-slim {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 10px; padding: 10px 13px;
  border-radius: 14px; text-align: left;
  background: linear-gradient(100deg, rgba(255, 176, 32, .1), rgba(255, 176, 32, .04));
  border: 1px solid rgba(255, 176, 32, .18);
  animation: fadeUp .4s var(--ease) both;
  transition: transform .16s var(--ease);
}
/* 在 .add-scroll 里：该容器无内边距，需自带左右留白 */
.add-scroll > .tip-slim { width: calc(100% - 32px); margin: 10px 16px 0; }
.tip-slim:active { transform: scale(.985); }
.tip-slim-e { font-size: 14px; flex: none; }
.tip-slim-t {
  flex: 1; font-size: 12px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tip-slim .ic { color: var(--text-3); flex: none; }

/* 弹层内容 */
.tip-sheet-head {
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--line);
}
.tsh-date { font-size: 13px; font-weight: 650; color: var(--text); }
.tsh-nums { display: flex; gap: 0; margin-top: 11px; }
.tsh-nums > div { flex: 1; min-width: 0; }
.tsh-nums > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.tsh-nums span { display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
.tsh-nums b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tsh-nums b.in { color: var(--income); }
.tsh-nums b.neg { color: var(--expense); }

.tip-sheet-lines { padding: 14px 0 4px; display: flex; flex-direction: column; gap: 11px; }
.tip-sheet-lines .tip-line { padding: 10px 12px; border-radius: 13px; background: var(--card-2); }
.tip-sheet-lines .tip-line.tone-care { background: rgba(79, 124, 255, .06); }
.tip-sheet-lines .tip-line.tone-cheer { background: rgba(20, 184, 122, .07); }
.tip-sheet-lines .tip-line.tone-warn { background: rgba(255, 176, 32, .09); }
.tip-sheet-lines .tip-line.tone-praise { background: rgba(124, 92, 255, .07); }
.tip-sheet-lines .tip-t { font-size: 13px; line-height: 1.66; color: var(--text); }

.tip-sheet-cats { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.tsc-title { font-size: 12px; font-weight: 650; color: var(--text-2); margin-bottom: 9px; }
.tsc-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.tsc-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; flex: none; }
.tsc-name { width: 46px; font-size: 11.5px; color: var(--text-2); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsc-track { flex: 1; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.tsc-track > i { display: block; height: 100%; border-radius: 4px; transition: width .5s var(--ease); }
.tsc-amt { width: 54px; text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text); flex: none; }
.tsc-pct { width: 34px; text-align: right; font-size: 10.5px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }

.tip-sheet-foot { display: flex; gap: 8px; margin-top: 16px; }
.tip-sheet-foot .btn { flex: 1; min-width: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.tip-sheet-note {
  font-size: 10.5px; color: var(--text-3); text-align: center;
  line-height: 1.6; margin-top: 11px;
}

/* ---------- AI 增强 ---------- */
.tip-card.ai-on {
  background: linear-gradient(160deg, #F3F0FF, #FBF9FF 45%, var(--card));
  border-color: rgba(124, 92, 255, .26);
}
[data-theme="dark"] .tip-card.ai-on {
  background: linear-gradient(160deg, #1F1B2E, #1B1926 45%, var(--card));
  border-color: rgba(124, 92, 255, .3);
}
.tip-card.ai-on::after {
  background: radial-gradient(circle, rgba(124, 92, 255, .16), transparent 68%);
}
.tip-tag--ai {
  background: rgba(124, 92, 255, .12);
  color: #6B4BE8;
  font-weight: 600;
}
[data-theme="dark"] .tip-tag--ai { color: #A78BFA; }
.tip-line--advice .tip-t {
  color: var(--text-2);
  font-size: 12px;
}

.tip-ai-box {
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(124, 92, 255, .09), rgba(124, 92, 255, .03));
  border: 1px solid rgba(124, 92, 255, .18);
}
.tip-ai-box--invite {
  background: var(--card-2);
  border-style: dashed;
  border-color: var(--line);
}
.tip-ai-box--err {
  background: rgba(255, 90, 95, .07);
  border-color: rgba(255, 90, 95, .22);
}
.tip-ai-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: #6B4BE8;
  margin-bottom: 8px;
}
[data-theme="dark"] .tip-ai-head { color: #A78BFA; }
.tip-ai-box--err .tip-ai-head { color: var(--expense); }
.tip-ai-body {
  font-size: 13.5px; line-height: 1.75; color: var(--text);
}
.tip-ai-advice {
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed rgba(124, 92, 255, .2);
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}
.tip-ai-hint { font-size: 11.5px; line-height: 1.65; color: var(--text-3); }
.tip-ai-meta {
  margin-top: 9px; font-size: 10.5px; color: var(--text-3);
  text-align: right;
}
.tip-ai-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(124, 92, 255, .22);
  border-top-color: #7C5CFF;
  animation: spin .8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tip-ai-skeleton { display: flex; flex-direction: column; gap: 7px; }
.tip-ai-skeleton i {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(124,92,255,.1), rgba(124,92,255,.22), rgba(124,92,255,.1));
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.tip-ai-skeleton i:nth-child(1) { width: 92%; }
.tip-ai-skeleton i:nth-child(2) { width: 78%; }
.tip-ai-skeleton i:nth-child(3) { width: 55%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- 识图记账 ---------- */
.scan-wrap { padding-bottom: 4px; }
.scan-kind { margin-bottom: 14px; }
.scan-kind .segmented { background: var(--bg-2); }
.scan-kind .segmented button.on[data-prefer="income"] { color: var(--income); }
.scan-kind-hint {
  margin-top: 7px; text-align: center;
  font-size: 10.5px; color: var(--text-3); line-height: 1.5;
}
.scan-drop {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 26px 18px 22px;
  border-radius: var(--radius);
  background: var(--card-2);
  border: 1.5px dashed var(--line-2);
  transition: transform .15s var(--ease), border-color .2s;
}
.scan-drop:active { transform: scale(.985); border-color: var(--brand); }
.scan-drop-ic { font-size: 34px; line-height: 1; }
.scan-drop-title { font-size: 14px; font-weight: 650; }
.scan-drop-desc {
  font-size: 11.5px; color: var(--text-3);
  line-height: 1.6; text-align: center; max-width: 240px;
}
.scan-drop-btn {
  margin-top: 5px; height: 32px; padding: 0 18px;
  display: inline-flex; align-items: center;
  border-radius: 10px;
  background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 600;
}

.scan-preview {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.scan-preview img {
  display: block; width: 100%;
  max-height: 260px; object-fit: contain;
}
.scan-repick {
  position: absolute; right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 11px; border-radius: 9px;
  background: rgba(0, 0, 0, .58);
  color: #fff; font-size: 11.5px; font-weight: 550;
  backdrop-filter: blur(6px);
}
.scan-repick .ic { color: #fff; }

.scan-engine {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
}
.scan-engine-ic { font-size: 16px; flex: none; }
.scan-engine-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-engine-main b { font-size: 12.5px; font-weight: 650; }
.scan-engine-main small { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
.scan-engine-set {
  flex: none; height: 26px; padding: 0 10px;
  border-radius: 8px; background: var(--card);
  border: 1px solid var(--line);
  font-size: 11px; color: var(--brand); font-weight: 550;
}

.scan-progress { margin-top: 14px; }
.scan-bar {
  height: 6px; border-radius: 4px;
  background: var(--bg-2); overflow: hidden;
}
.scan-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--brand-grad);
  transition: width .4s var(--ease);
}
.scan-progress-txt {
  font-size: 11.5px; color: var(--text-3);
  margin-top: 7px; text-align: center;
}

.scan-error {
  margin-top: 12px; padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(255, 90, 95, .08);
  border: 1px solid rgba(255, 90, 95, .2);
  font-size: 12px; line-height: 1.65; color: var(--expense);
}
.scan-warn {
  padding: 9px 12px; margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 176, 32, .1);
  font-size: 11.5px; line-height: 1.6; color: #A56A00;
}
[data-theme="dark"] .scan-warn { color: var(--warn); }

.scan-result { margin-top: 14px; }
.scan-result-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.scan-item {
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
  margin-bottom: 9px;
}
.scan-item-top { display: flex; align-items: center; gap: 9px; }
.scan-item-ic {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px; flex: none;
}
.scan-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-item-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-item-sub { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-item-amt {
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; flex: none;
}
.scan-item-amt.in { color: var(--income); }
.scan-item-edit {
  display: flex; gap: 6px; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.scan-sel {
  height: 30px; padding: 0 7px;
  border-radius: 8px; background: var(--card);
  border: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-2);
  max-width: 44%;
}
.scan-sel[data-sel="type"] { max-width: 66px; flex: none; font-weight: 600; }
.scan-sel[data-sel="type"]:has(option[value="income"]:checked) { color: var(--income); }
.scan-input {
  flex: 1; min-width: 90px; height: 30px; padding: 0 9px;
  border-radius: 8px; background: var(--card);
  border: 1px solid var(--line);
  font-size: 11.5px;
}
.scan-actions { display: flex; gap: 9px; margin-top: 4px; }
.scan-actions .btn { flex: 1; }
.scan-actions .btn--ghost { flex: 0 0 96px; }

.scan-tips {
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--card-2);
  font-size: 11.5px; line-height: 1.85; color: var(--text-3);
}
.scan-tips-title {
  font-size: 11.5px; font-weight: 650;
  color: var(--text-2); margin-bottom: 5px;
}

/* ---------- 账单 CSV 导入 ---------- */
.bill-wrap { display: flex; flex-direction: column; gap: 12px; }
.bill-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 2px;
}
.bill-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bill-stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line);
}
.bill-stat b { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.bill-stat b.exp { color: var(--expense); }
.bill-stat b.inc { color: var(--income); }
.bill-stat span { font-size: 10.5px; color: var(--text-3); }
.bill-dup {
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.24);
  font-size: 11.5px; line-height: 1.6; color: #A06A00;
}
[data-theme="dark"] .bill-dup { color: var(--warn); background: rgba(255,176,32,.08); }

.bill-list { display: flex; flex-direction: column; gap: 7px; }
.bill-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line);
  transition: opacity .18s, background .18s;
}
.bill-row.off { opacity: .42; }
.bill-check {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: var(--card);
  color: #fff; transition: background .16s, border-color .16s;
}
.bill-check.on { background: var(--brand); border-color: var(--brand); }
.bill-check .ic { width: 12px; height: 12px; }
.bill-ic {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px;
}
.bill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bill-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bill-sub {
  font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bill-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex: none; max-width: 45%;
}
.bill-amt {
  font-size: 12.5px; font-weight: 680; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bill-amt.in { color: var(--income); }
.bill-sel {
  max-width: 100%; height: 22px; padding: 0 4px;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--card); color: var(--text-2);
  font-size: 10.5px; font-family: inherit;
}
.bill-more {
  text-align: center; padding: 8px; font-size: 11px; color: var(--text-3);
}
.bill-actions { display: flex; gap: 9px; }
.bill-actions .btn { flex: 1; }

/* AI 配置弹层 */
.ai-preset-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ai-preset {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1.5px solid transparent;
  text-align: left; transition: border-color .18s, background .18s;
  position: relative;
}
.ai-preset.on {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.ai-preset b { font-size: 12.5px; font-weight: 650; }
.ai-preset small { font-size: 10px; color: var(--text-3); line-height: 1.45; }
.ai-preset .ai-badge {
  position: absolute; top: -7px; right: 8px;
  font-size: 9px; padding: 1px 6px; border-radius: 6px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.ai-key-row { display: flex; gap: 8px; align-items: center; }
.ai-key-row .field-input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.ai-eye {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--card-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 15px;
}
.ai-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6;
  background: var(--card-2);
}
.ai-status--ok { background: rgba(20, 184, 122, .09); color: var(--income); }
.ai-status--err { background: rgba(255, 90, 95, .08); color: var(--expense); }
.ai-advanced {
  border-top: 1px solid var(--line);
  margin-top: 4px; padding-top: 12px;
}
.ai-advanced summary {
  font-size: 12px; color: var(--text-2);
  cursor: pointer; list-style: none; padding: 2px 0;
}
.ai-advanced summary::-webkit-details-marker { display: none; }
.ai-advanced summary::before { content: '▸ '; color: var(--text-3); }
.ai-advanced[open] summary::before { content: '▾ '; }

/* 月度 AI 卡 */
.ai-report {
  background: linear-gradient(155deg, rgba(124, 92, 255, .1), rgba(124, 92, 255, .03) 60%, var(--card));
  border-color: rgba(124, 92, 255, .22);
}
[data-theme="dark"] .ai-report {
  background: linear-gradient(155deg, rgba(124, 92, 255, .16), rgba(124, 92, 255, .05) 60%, var(--card));
}
.ai-report-headline {
  font-size: 16.5px; font-weight: 700; line-height: 1.45;
  margin: 2px 0 10px; letter-spacing: -.2px;
}
.ai-report-story {
  font-size: 13.5px; line-height: 1.85; color: var(--text-2);
  white-space: pre-wrap;
}
.ai-hl-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 14px 0 0;
}
.ai-hl {
  padding: 10px 11px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.ai-hl-label { font-size: 10.5px; color: var(--text-3); }
.ai-hl-value {
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-advice-list { margin-top: 13px; display: flex; flex-direction: column; gap: 7px; }
.ai-advice-item {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
}
.ai-advice-item .ai-num {
  flex: none; width: 17px; height: 17px; border-radius: 6px;
  background: rgba(124, 92, 255, .14); color: #6B4BE8;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center; margin-top: 2px;
}
[data-theme="dark"] .ai-advice-item .ai-num { color: #A78BFA; }
.ai-report-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 11px;
  border-top: 1px dashed rgba(124, 92, 255, .2);
  font-size: 10.5px; color: var(--text-3);
}
.ai-chart-reason {
  font-size: 11px; color: var(--text-3);
  margin-top: 8px; text-align: center;
}

/* ---------- 总结页：日 / 月 / 年 选项卡 ---------- */
.seg-tabs {
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg-2); border-radius: 13px;
  margin: 0 0 12px;
}
.seg-tab {
  flex: 1; height: 33px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  transition: background .22s var(--ease), color .2s, box-shadow .22s;
}
.seg-tab.on {
  background: var(--card); color: var(--brand);
  box-shadow: 0 2px 7px rgba(20, 30, 60, .09);
}
.seg-tab:active { transform: scale(.97); }

/* 对比条 */
.cmp-bar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 14px; padding: 9px 11px;
  border-radius: 12px; text-align: left;
  background: var(--card-2); border: 1px solid var(--line);
  transition: border-color .2s, background .2s, transform .16s var(--ease);
}
.cmp-bar:active { transform: scale(.985); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.cmp-ic {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.cmp-txt {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cmp-txt b { color: var(--text); font-weight: 650; }
.cmp-diff {
  font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 7px;
  background: var(--bg-2); color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-diff.up { background: var(--expense-soft); color: var(--expense); }
.cmp-diff.down { background: var(--income-soft); color: var(--income); }
.cmp-edit {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: 1px; white-space: nowrap;
}
.cmp-reset { margin-top: 8px; text-align: right; }
.cmp-reset button {
  font-size: 11px; color: var(--text-3);
  padding: 3px 8px; border-radius: 7px; background: var(--bg-2);
}
.link-btn {
  font-size: 12px; font-weight: 600; color: var(--brand);
  padding: 4px 2px;
}

/* 图例网格（AI 图表用） */
.legend-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px;
  margin-top: 13px;
}
.legend-grid .legend-item { font-size: 11.5px; }
.legend-grid .legend-name { font-size: 11.5px; }

/* ---------- 多账本 ---------- */
.book-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 0 16px;
}
.book-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 5px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  max-width: 100%; min-width: 0;
}
.book-pill:active { transform: scale(.96); }
.book-pill-ic {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px;
  background: var(--brand-soft);
}
.book-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-pill .ic { color: var(--text-3); flex: none; }
.book-spacer { flex: 1; }

/* 账本管理行 */
.bk-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 15px;
  background: var(--card-2); border: 1px solid var(--line);
}
.bk-row + .bk-row { margin-top: 9px; }
.bk-row.on { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--brand-soft); }
.bk-row-ic {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 19px;
}
.bk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-row-name { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.bk-row-sub { font-size: 11px; color: var(--text-3); }
.bk-row-ops { display: flex; gap: 5px; flex: none; }
.bk-op {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--card); color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.bk-op:active { transform: scale(.92); }
.bk-op.danger { color: var(--expense); }

/* ---------- 周期性自动记账 ---------- */
.rep-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 15px;
  background: var(--card-2); border: 1px solid var(--line);
}
.rep-row + .rep-row { margin-top: 9px; }
.rep-row.off { opacity: .5; }
.rep-ic {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 19px;
}
.rep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-sub { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.rep-amt {
  flex: none; font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.rep-amt.in { color: var(--income); }
.rep-due {
  font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 7px;
  background: var(--warn-soft); color: var(--warn); flex: none;
}
.rep-form { display: flex; flex-direction: column; gap: 11px; }
.rep-form-row { display: flex; flex-direction: column; gap: 5px; }
.rep-form-label { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.rep-freq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rep-freq {
  height: 36px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-2); color: var(--text-2);
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.rep-freq.on { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* ---------- 自定义分类管理 ---------- */
.catm-head {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.catm-head button {
  flex: 1; height: 32px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  background: var(--bg-2); color: var(--text-3);
}
.catm-head button.on { background: var(--brand-soft); color: var(--brand); }
.catm-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.catm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 13px; text-align: left;
  background: var(--card-2); border: 1px solid var(--line);
  min-width: 0;
}
.catm-item.hidden { opacity: .42; }
.catm-item-ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 16px;
}
.catm-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.catm-item-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catm-item-sub { font-size: 10px; color: var(--text-3); }
.catm-item-op { flex: none; color: var(--text-3); display: grid; place-items: center; width: 18px; }
.catm-tools { display: flex; gap: 8px; margin-top: 13px; }
.catm-tools .btn { flex: 1; }
.catm-preview {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--brand-soft);
}
.catm-preview-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 20px;
}
/* 预览块里换成手绘 SVG 时，1em 太细撑不住 42px 的方块 */
.catm-preview-ic .cat-ic { width: 24px; height: 24px; }
.catm-preview-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.catm-preview-name { font-size: 14px; font-weight: 650; }
.catm-preview-sub { font-size: 11px; color: var(--text-2); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;
}
.emoji-btn {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
  font-size: 19px; background: var(--bg-2);
}
.emoji-btn.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
/* 图标选项里混进手绘 SVG（红包）时，按格子字号放大到 emoji 的视觉大小 */
.emoji-btn .cat-ic { width: 1.3em; height: 1.3em; }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot {
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.color-dot.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); }

/* ---------- 账单导入：跨月提示 ---------- */
.bill-months {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px;
}
.bill-month {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 9px;
  background: var(--bg-2); font-size: 11px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bill-month b { color: var(--text); font-weight: 650; }
.bill-month.has { background: var(--brand-soft); color: var(--brand); }
.bill-month.has b { color: var(--brand); }
.bill-month-warn {
  padding: 9px 12px; border-radius: 12px; margin-bottom: 12px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 11.5px; line-height: 1.6;
}

/* ---------- 键盘上方状态条（额度 + 上次价格） ---------- */
/* ---------- 底部输入区：默认收起，点金额才弹出来 ---------- */
.input-dock {
  flex: none; position: relative;
  max-height: 620px;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.32,.72,0,1), opacity .2s var(--ease);
}
.input-dock.is-closed { max-height: 0; opacity: 0; }
.dock-grip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 20px; background: transparent;
}
.dock-grip span {
  display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--line-2, rgba(120,120,128,.28));
}
.dock-grip:active span { background: var(--text-3); }

/* 收起状态下的常驻小条：随时能把键盘叫回来 */
.dock-open {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 16px 10px; padding: 0 14px; height: 46px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); text-align: left;
}
.dock-open:active { transform: scale(.99); }
.dock-open.is-hidden { display: none; }
.dock-open-amt {
  font-size: 18px; font-weight: 750; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.dock-open-amt.is-empty { font-size: 13px; font-weight: 600; color: var(--text-3); }
.dock-open-txt { flex: none; font-size: 11.5px; font-weight: 650; color: var(--accent); }

.status-strip {
  display: flex; align-items: stretch; gap: 7px;
  padding: 6px 16px 0; flex: none; width: 100%;
}
.status-strip:empty { display: none; }
/* 状态条里两条并存时空间不够，额度条的次要信息让位给「上次多少钱」 */
.status-strip:has(.last-price) .quota-line2 { display: none; }
.status-strip:has(.last-price) .quota-line1 { max-width: 100%; }
/* 记账页要同时放下金额、分类和键盘：小结卡只留两条，更多内容点箭头看全部 */
.view[data-view="add"] .tip-card .tip-line:nth-child(n+3) { display: none; }
/* ---------- 今日额度条 ---------- */
.quota-bar {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 36px;
  overflow: hidden;
  margin: 0; padding: 0 11px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid rgba(79,124,255,.16);
  text-align: left; transition: background .22s, border-color .22s;
}
.quota-bar.warn { background: rgba(255,176,32,.13); border-color: rgba(255,176,32,.3); }
.quota-bar.over { background: rgba(255,90,95,.11); border-color: rgba(255,90,95,.3); }
.quota-ic { font-size: 15px; line-height: 1; flex: none; }
.quota-main { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; overflow: hidden; }
.quota-line1 { font-size: 11.5px; font-weight: 650; color: var(--text); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 100%; }
.quota-bar.warn .quota-line1 { color: #A06A00; }
.quota-bar.over .quota-line1 { color: var(--expense); }
[data-theme="dark"] .quota-bar.warn .quota-line1 { color: var(--warn); }
.quota-line2 { font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- 上次多少钱 ---------- */
.last-price {
  display: flex; align-items: center; gap: 5px; flex: none; max-width: 41%; height: 36px;
  margin: 0; padding: 0 10px; border-radius: 12px;
  background: var(--card-2); border: 1px dashed var(--line);
  transition: border-color .2s, background .2s;
}
.last-price:active { border-color: var(--brand); background: var(--brand-soft); }
.lp-ic { font-size: 13px; color: var(--brand); flex: none; }
.lp-txt { flex: 1; text-align: left; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-txt b { color: var(--text); font-weight: 650; }
.lp-fill { font-size: 11px; font-weight: 600; color: var(--brand); flex: none; }

/* ---------- 外币折算提示 ---------- */
.fx-hint {
  text-align: center; font-size: 11.5px; color: var(--text-3);
  padding: 1px 0 2px; font-variant-numeric: tabular-nums;
}
.fx-rate { opacity: .7; font-size: 10.5px; margin-left: 4px; }

/* ---------- 垫付（记账页） ---------- */
/* 两个紧凑小入口 */
/* 弹层里的行内输入（固定月支出等） */
.fx-row { display: flex; gap: 8px; margin-top: 8px; }
.fx-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 11px; border-radius: 11px;
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text); outline: none;
}
.fx-input:focus { border-color: var(--accent); }

/* 记账页顶部：垫付待收提醒 */
.adv-banner {
  display: flex; align-items: center; gap: 9px; width: auto;
  margin: 10px 16px 0; padding: 10px 12px; border-radius: 13px;
  background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.28);
  text-align: left;
}
.adv-banner.overdue { background: rgba(255,90,95,.09); border-color: rgba(255,90,95,.3); }
.ab-ic { font-size: 15px; flex: none; }
.ab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-title { font-size: 12px; font-weight: 650; color: var(--text); }
.ab-banner.overdue .ab-title { color: var(--expense); }
.ab-sub { font-size: 10.5px; color: var(--text-3); line-height: 1.4; }
.ab-go {
  flex: none; display: flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 650; color: var(--accent);
}

.mini-actions { display: flex; gap: 7px; margin: 9px 16px 0; }
.mini-actions--solo .mini-btn { flex: 1; }
.mini-count {
  font-style: normal; flex: none; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: rgba(124,92,255,.14); color: #6B4BE8;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.mini-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; border-radius: 11px; background: var(--card-2);
  border: 1px dashed var(--line); transition: border-color .2s, background .2s, color .2s;
  color: var(--text-2); font-size: 11.5px; font-weight: 600;
}
.mini-btn:active { border-color: var(--accent); background: rgba(255,122,69,.07); }
.mini-btn.on { border-color: var(--accent); background: rgba(255,122,69,.1); color: var(--accent); border-style: solid; }
.mini-btn--wish:active { border-color: #7C5CFF; background: rgba(124,92,255,.08); color: #6B4BE8; }
.mini-ic { font-size: 12.5px; flex: none; }
.mini-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-ic { font-size: 14px; flex: none; }
.adv-box {
  margin: 9px 16px 0; padding: 12px 13px; border-radius: 14px;
  background: rgba(255,122,69,.07); border: 1px solid rgba(255,122,69,.22);
}
.adv-box-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.adv-box-title { flex: 1; font-size: 12.5px; font-weight: 650; color: var(--accent); }
.adv-clear {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-3); background: var(--card);
}
.adv-box-row { display: flex; gap: 7px; }
.adv-who {
  flex: 1; min-width: 0; height: 36px; padding: 0 11px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--text);
}
.adv-due {
  display: flex; align-items: center; gap: 5px; flex: none; height: 36px; padding: 0 11px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.adv-box-hint { margin-top: 8px; font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

/* ---------- 先别买入口 ---------- */
.wish-entry {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 9px 0 0; padding: 9px 13px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(165,108,255,.1), rgba(124,92,255,.06));
  border: 1px dashed rgba(124,92,255,.26);
}
.wish-entry:active { background: rgba(124,92,255,.16); }
.we-ic { font-size: 14px; flex: none; }
.we-txt { flex: 1; text-align: left; font-size: 11.5px; color: #6B4BE8; line-height: 1.4; }
[data-theme="dark"] .we-txt { color: #A78BFA; }
.we-go { color: rgba(124,92,255,.6); display: flex; flex: none; }

/* ---------- 待收回折叠卡（明细页） ---------- */
.adv-card {
  margin: 0 0 12px; border-radius: 15px; overflow: hidden;
  background: var(--card); border: 1px solid rgba(255,122,69,.24);
  box-shadow: var(--shadow-sm);
}
.adv-card.has-overdue { border-color: rgba(255,90,95,.34); background: linear-gradient(160deg, rgba(255,90,95,.05), var(--card) 60%); }
.adv-card-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 13px; text-align: left; }
.adv-card-ic { font-size: 17px; flex: none; }
.adv-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adv-card-title { font-size: 13px; font-weight: 650; color: var(--text); }
.adv-card-sub { font-size: 10.5px; color: var(--text-3); }
.adv-card-badge {
  flex: none; font-size: 10px; font-weight: 650; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,90,95,.14); color: var(--expense);
}
.adv-card-arrow { flex: none; color: var(--text-3); display: flex; transition: transform .22s var(--ease); }
.adv-card-arrow.open { transform: rotate(180deg); }
.adv-card-list { padding: 0 13px 11px; }
.adv-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 0;
  border-top: 1px solid var(--line);
}
.adv-row.overdue .adv-row-name { color: var(--expense); }
.adv-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adv-row-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.adv-row-amt { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 4px; }
.adv-row-meta { font-size: 10.5px; color: var(--text-3); line-height: 1.45; }
.adv-row > .btn { flex: none; width: auto; height: 30px; padding: 0 12px; font-size: 11.5px; white-space: nowrap; }

/* ---------- 明细里混排的「想买清单」条目 ---------- */
/* 已归还的垫付：只留文字，划掉，不算钱 */
.tx-item.is-voided { opacity: .55; }
.tx-item.is-voided .tx-name,
.tx-item.is-voided .tx-meta { color: var(--text-3); }

.tx-item--wish { cursor: default; }
.tx-item--wish .tx-main { gap: 3px; }
.tx-item--wish.is-cooling {
  background: linear-gradient(180deg, rgba(124,92,255,.05), rgba(124,92,255,.02));
  border-style: dashed;
}
.tx-item--wish.is-cooling .tx-avatar { filter: grayscale(.45) opacity(.85); }

/* ---------- 分类图标：SVG 版（红包） ---------- */
/* 分类图标历史上全是 emoji（一个字符，字号决定大小）。红包开始用手绘线条 SVG，
   它不吃 font-size，得自己给尺寸。父容器的 grid place-items:center 负责居中，
   这里只管「别撑大、别变形、跟着父级颜色走」。 */
.cat-ic {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: currentColor;
}
/* 尺寸容器（.cat-bubble / .cp-bubble / 弹层里的 52px 方块等）字号本来就是为
   emoji 调的，SVG 直接按同一套字号走 1.15em 会略小于 emoji 的视觉块，
   所以统一放大到 1.3em，视觉重量和旁边的 emoji 持平。 */
.cat-bubble .cat-ic,
.cp-bubble .cat-ic,
.cbe-cat-ic .cat-ic,
.tx-avatar .cat-ic,
.cat-avatar .cat-ic,
.recent-ic .cat-ic,
.catm-item-ic .cat-ic,
.rep-ic .cat-ic { width: 1.3em; height: 1.3em; }
.tx-item--wish.is-cooling .tx-name,
.tx-item--wish.is-cooling .tx-meta,
.tx-item--wish.is-cooling .tx-amt { color: var(--text-3); }
.tx-item--wish.is-ready {
  background: rgba(255,176,32,.07);
  border: 1px solid rgba(255,176,32,.28);
}
.tx-item--wish.is-dropped { opacity: .62; }
.is-struck { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tx-amt.wish { color: var(--text-3); }
.tx-amt.wish::before { content: '≈'; margin-right: 1px; font-size: 11px; }
.wish-bar {
  display: block; height: 3px; border-radius: 2px; margin: 3px 0 1px;
  background: rgba(124,92,255,.12); overflow: hidden;
}
.wish-bar i { display: block; height: 100%; border-radius: 2px; background: #7C5CFF; }
.wish-ask {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11.5px; color: var(--warn); font-weight: 600;
}
.wish-ask button {
  height: 26px; padding: 0 10px; border-radius: 8px; font-size: 11px;
  font-weight: 650; border: 1px solid transparent;
}
.wish-yes { background: #7C5CFF; color: #fff; }
.wish-no { background: var(--card-2); color: var(--text-2); border-color: var(--line); }

/* 垫付详情（账目弹层） */
.adv-detail {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  border-radius: 13px; background: rgba(255,122,69,.08);
  border: 1px solid rgba(255,122,69,.22); margin-bottom: 14px;
}
.adv-detail.overdue { background: rgba(255,90,95,.08); border-color: rgba(255,90,95,.26); }
.adv-detail.done { background: rgba(20,184,122,.08); border-color: rgba(20,184,122,.22); }
.adv-detail-ic { font-size: 16px; flex: none; }
.adv-detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adv-detail-title { font-size: 12.5px; font-weight: 650; }
.adv-detail-sub { font-size: 10.5px; color: var(--text-3); line-height: 1.45; }

/* 账目行标签 */
.tx-tag {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px;
  font-size: 9.5px; font-weight: 600; vertical-align: 1px; white-space: nowrap;
}
.tx-tag--adv { background: rgba(255,122,69,.14); color: var(--accent); }
.tx-tag--done { background: rgba(20,184,122,.13); color: var(--income); }
.tx-tag--fx { background: rgba(79,124,255,.12); color: var(--brand); font-variant-numeric: tabular-nums; }
.tx-tag--book { background: var(--bg-2); color: var(--text-3); }
.tx-item.is-pending { opacity: .82; }
.tx-amt.pending { color: var(--accent); }

/* ---------- 换算成实物（总结页） ---------- */
.equiv-card { background: linear-gradient(160deg, rgba(165,108,255,.07), var(--card) 55%); }
.equiv-main {
  display: flex; align-items: center; gap: 11px; padding: 6px 0 4px;
}
.equiv-emoji { font-size: 30px; line-height: 1; flex: none; }
.equiv-txt { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.equiv-goal {
  display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px 11px;
  border-radius: 11px; background: rgba(79,124,255,.08);
}
.equiv-goal-ic { font-size: 13px; flex: none; }
.equiv-goal-txt { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.equiv-note { margin-top: 9px; font-size: 10.5px; color: var(--text-3); }

/* ---------- 合并看板（总结页） ---------- */
.merged-card { background: linear-gradient(160deg, rgba(79,124,255,.05), var(--card) 55%); }
.merged-total { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 10px; }
.merged-total-label { font-size: 11.5px; color: var(--text-3); }
.merged-total-amt { font-size: 21px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.merged-stack {
  display: flex; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--bg-2); margin-bottom: 14px;
}
.merged-stack i { display: block; height: 100%; transition: width .3s var(--ease); }
.merged-list { display: flex; flex-direction: column; gap: 2px; }
.merged-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px; width: 100%; text-align: left;
}
.merged-row:active { opacity: .7; }
.merged-row-ic {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; flex: none;
}
.merged-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.merged-row-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.merged-row-bar {
  display: block; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden;
}
.merged-row-bar i { display: block; height: 100%; border-radius: 3px; }
.merged-row-amt { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; flex: none; }
.merged-switch {
  display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
  margin-top: 12px; padding: 9px; border-radius: 11px;
  background: var(--bg-2); color: var(--brand); font-size: 11.5px; font-weight: 600;
}

/* 合并视图的账本 pill */
.book-pill--all { background: linear-gradient(135deg, rgba(79,124,255,.14), rgba(124,92,255,.1)); }

/* ---------- 提醒中心 ---------- */
.tb-bell { position: relative; }
.tb-dot {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--expense); color: #fff;
  font-size: 9.5px; font-weight: 700; font-style: normal; line-height: 15px; text-align: center;
  border: 1.5px solid var(--bg);
}
/* 提醒横幅贴顶展开：记账页底部是数字键盘，放底部会盖住「完成」 */
/* 启动时发现新版本：底部一条提示，点一下更新 */
/* 注意：它挂在 .toast-host 里，而那个容器是 pointer-events:none（为了不挡住页面）。
   不显式打开的话，整条横幅连同「更新 / 以后」两个按钮都点不动。
   宽度也要自己夹住：电脑上得是居中一条，不能被 left/right:16px 拉成满屏。 */
.update-bar {
  position: fixed; left: 50%; transform: translate(-50%, 14px);
  width: min(calc(100vw - 32px), 420px);
  bottom: calc(var(--tab-h) + var(--safe-b) + 12px);
  z-index: 70; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 16px;
  background: var(--card); border: 1px solid rgba(89,126,247,.32);
  box-shadow: var(--shadow-lg);
  pointer-events: auto; cursor: default;
  opacity: 0; transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.update-bar.in { opacity: 1; transform: translate(-50%, 0); }
.ub-ic { font-size: 15px; flex: none; }
.ub-txt { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.35; }
.ub-from { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.ub-go {
  flex: none; height: 30px; padding: 0 13px; border-radius: 9px;
  background: var(--accent-grad, #5B7CFA); color: #fff;
  font-size: 11.5px; font-weight: 700;
  pointer-events: auto; position: relative; z-index: 1;
}
.ub-later {
  flex: none; height: 30px; padding: 0 8px; font-size: 11.5px; color: var(--text-3);
  pointer-events: auto; position: relative; z-index: 1;
}

.remind-banner {
  position: fixed; left: 16px; right: 16px;
  top: calc(var(--top-h) + var(--safe-t) + 8px);
  z-index: 60; display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: 15px;
  background: var(--card); border: 1px solid rgba(255,176,32,.3);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-14px);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.remind-banner.in { opacity: 1; transform: translateY(0); }
.remind-ic { font-size: 16px; flex: none; }
.remind-txt { flex: 1; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remind-more {
  flex: none; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 7px;
  background: var(--brand-soft); color: var(--brand);
}
.remind-go { flex: none; color: var(--text-3); display: flex; }

.remind-list { display: flex; flex-direction: column; gap: 10px; }
.remind-row {
  display: flex; gap: 11px; padding: 12px 13px; border-radius: 15px;
  background: var(--card-2); border: 1px solid var(--line);
}
.remind-row.urgent { border-color: rgba(255,90,95,.28); background: rgba(255,90,95,.045); }
.remind-row-ic { font-size: 19px; flex: none; line-height: 1.1; }
.remind-row-main { flex: 1; min-width: 0; }
.remind-row-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.remind-row-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--text); line-height: 1.35; }
.remind-badge {
  flex: none; font-size: 9.5px; font-weight: 650; padding: 2px 6px; border-radius: 6px;
  background: var(--bg-2); color: var(--text-3); white-space: nowrap;
}
.remind-row-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 4px; }
.remind-row-meta { font-size: 10.5px; color: var(--text-3); }
.remind-row-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.remind-row-ops .btn { width: auto; flex: none; padding: 0 11px; height: 30px; font-size: 11.5px; }

/* ---------- 币种选择 ---------- */
.cur-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 14px; }
.cur-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line); text-align: left;
  transition: border-color .18s, background .18s;
}
.cur-item.on { border-color: var(--brand); background: var(--brand-soft); }
.cur-sym {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-2); font-size: 14px; font-weight: 700; color: var(--text-2); flex: none;
}
.cur-item.on .cur-sym { background: var(--card); color: var(--brand); }
.cur-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cur-code { font-size: 12px; font-weight: 650; color: var(--text); }
.cur-name { font-size: 10px; color: var(--text-3); }

/* ---------- 目标选择 / 比例选择（通用） ---------- */
.goal-pick { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.goal-pick-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--line); text-align: left;
  transition: border-color .18s, background .18s;
}
.goal-pick-item.on { border-color: var(--brand); background: var(--brand-soft); }
.goal-pick-ic {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 16px; flex: none;
}
.goal-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-pick-name { font-size: 13px; font-weight: 600; color: var(--text); }
.goal-pick-sub { font-size: 10.5px; color: var(--text-3); }

.ratio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 14px; }
.ratio-item {
  height: 38px; border-radius: 11px; background: var(--bg-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  transition: background .18s, color .18s, box-shadow .18s;
}
.ratio-item.on { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(79,124,255,.4); }

/* ---------- 订阅 / 垫付 / 愿望 列表（通用） ---------- */
.subs-list { display: flex; flex-direction: column; gap: 8px; }
.subs-row {
  display: flex; gap: 10px; padding: 11px 12px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--line);
}
.subs-row.overdue { border-color: rgba(255,90,95,.28); background: rgba(255,90,95,.04); }
.subs-row.ready { border-color: rgba(255,176,32,.3); background: rgba(255,176,32,.05); }
.subs-row.done { opacity: .6; }
.subs-row-ic { font-size: 17px; flex: none; line-height: 1.2; }
.subs-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.subs-row-name { font-size: 12.5px; font-weight: 650; color: var(--text); }
.subs-row-meta { font-size: 10.5px; color: var(--text-3); line-height: 1.45; }
.subs-row-next { font-size: 10.5px; color: var(--warn); font-weight: 600; }
.subs-row-ops { display: flex; flex-direction: column; gap: 5px; flex: none; }
.subs-row-ops .btn { width: auto; height: 28px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
/* 想买清单一行两个按钮，横排更省高度 */
.subs-row.wish .subs-row-ops { flex-direction: row; align-items: center; gap: 6px; }
.subs-row.wish .subs-row-ops .btn { height: 27px; padding: 0 10px; font-size: 10.5px; }

.adv-sheet-total {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 12px;
}
.adv-sheet-total-label { font-size: 12px; color: var(--text-3); }
.adv-sheet-total-amt { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.adv-sheet-total-sub { font-size: 11px; color: var(--text-3); }

/* 弹层里的小按钮不要撑满整行（.btn 默认 width:100%） */
.sheet-body .btn--sm, .sheet .btn--sm { flex: none; width: auto; }
.wish-saved .btn, .subs-row .btn, .adv-row .btn { flex: none; width: auto; }
.wish-saved .btn { height: 34px; padding: 0 16px; font-size: 12.5px; }
.wish-saved {
  display: flex; align-items: center; gap: 10px; padding: 12px 13px; margin-bottom: 14px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(20,184,122,.1), rgba(79,124,255,.06));
  border: 1px solid rgba(20,184,122,.22);
}
.wish-saved-ic { font-size: 20px; flex: none; }
.wish-saved-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wish-saved-label { font-size: 10.5px; color: var(--text-3); }
.wish-saved-amt { font-size: 18px; font-weight: 700; color: var(--income); font-variant-numeric: tabular-nums; }

/* ---------- 对账 ---------- */
.recon-date { text-align: left; display: flex; align-items: center; }
.recon-result {
  margin: 6px 0 14px; padding: 13px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
}
.recon-result.ok { border-color: rgba(20,184,122,.26); background: rgba(20,184,122,.05); }
.recon-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; font-size: 12px; color: var(--text-2);
}
.recon-row b { font-size: 12.5px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.recon-row--total {
  border-top: 1px dashed var(--line); margin-top: 3px; padding-top: 8px;
}
.recon-row--total b { font-size: 14px; }
.recon-hint {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  font-size: 12px; line-height: 1.6;
}
.recon-hint.ok { background: rgba(20,184,122,.1); color: var(--income); }
.recon-hint.warn { background: rgba(255,176,32,.12); color: #A06A00; }
[data-theme="dark"] .recon-hint.warn { color: var(--warn); }
.recon-blank { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.recon-blank-title { font-size: 10.5px; color: var(--text-3); margin-bottom: 7px; line-height: 1.5; }
.recon-blank-days { display: flex; flex-wrap: wrap; gap: 5px; }
.recon-day {
  font-size: 10.5px; padding: 3px 8px; border-radius: 7px;
  background: var(--bg-2); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.recon-last {
  display: flex; gap: 10px; padding: 12px 13px; border-radius: 13px;
  background: var(--card-2); border: 1px solid var(--line);
}
.recon-last.ok { border-color: rgba(20,184,122,.24); }
.recon-last-ic { font-size: 17px; flex: none; }
.recon-last-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.recon-last-title { font-size: 12.5px; font-weight: 650; color: var(--text); }
.recon-last-sub { font-size: 10.5px; color: var(--text-3); line-height: 1.45; }

/* ---------- 工具类 ---------- */
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.tnum { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; }
.gap8 { gap: 8px; }
.spacer { flex: 1; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.text-income { color: var(--income); }
.text-expense { color: var(--expense); }
.text-warn { color: var(--warn); }
.center { text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
}
.pill--brand { background: var(--brand-soft); color: var(--brand); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--income { background: var(--income-soft); color: var(--income); }
.pill--danger { background: var(--expense-soft); color: var(--expense); }

/* 动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anim-in { animation: fadeUp .4s var(--ease) both; }
.anim-in[data-d="1"] { animation-delay: .05s; }
.anim-in[data-d="2"] { animation-delay: .1s; }
.anim-in[data-d="3"] { animation-delay: .15s; }

/* 图表内文字 */
.chart-donut .donut-val { font-size: 15px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.chart-donut .donut-sub { font-size: 9.5px; fill: var(--text-3); }
.chart-donut .donut-center { font-size: 11px; fill: var(--text-3); }
.chart-donut .donut-seg { transition: opacity .2s, transform .25s var(--ease); transform-origin: center; cursor: pointer; }
.chart-donut .donut-seg:hover { opacity: .82; }
.chart-bars .bar { transition: opacity .2s; }
.chart-bars .bar:hover { opacity: .8; }
.chart-bars .bar-label { font-size: 8.5px; fill: var(--text-3); }
.chart-ring .ring-fill { transition: stroke-dashoffset .9s var(--ease); }
.chart-ring .ring-label { font-size: 12px; font-weight: 650; fill: var(--text); }

/* ---------- 赞助作者 ---------- */
/* 语气按「陈述」走，不按「求」走：没有二维码占位、没有催促、
   没有红点。心形用情侣粉，是这套里唯一允许出现的柔软色。 */
.sp { padding: 6px 2px 4px; text-align: center; }
.sp-heart {
  width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; color: #FF6A9B;
  background: rgba(255, 106, 155, .12);
}
.sp-heart svg { width: 26px; height: 26px; }
.sp-title { font-size: 17px; font-weight: 700; color: var(--text); }
.sp-body {
  margin: 7px auto 0; max-width: 300px;
  font-size: 13px; line-height: 1.72; color: var(--text-2);
}
.sp-facts {
  display: flex; justify-content: center; gap: 8px;
  margin: 14px 0 2px;
}
.sp-fact {
  flex: 1; max-width: 96px; padding: 11px 4px 10px;
  border-radius: 14px; background: var(--bg-2);
}
.sp-fact b {
  display: block; font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sp-fact span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-3); }

.sp-sub { margin: 16px 0 8px; font-size: 12px; color: var(--text-3); }
.sp-ways { display: flex; flex-direction: column; gap: 10px; align-items: center; }
/* 收款码：图片自己就是一张白卡片（已带圆角和透明边），
   外面再套一层白底 + 描边会变成「卡片里的卡片」，所以外层只留纵向排版。 */
.sp-qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sp-qr img {
  width: 160px; height: auto; max-height: 200px; display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12), 0 0 0 1px rgba(16, 24, 40, .06);
}
.sp-qr span { font-size: 11.5px; color: var(--text-2); }
.sp-page { width: 100%; max-width: 300px; }

.sp-open {
  margin: 18px 0 4px; padding: 16px 16px 15px;
  border-radius: 16px; background: var(--bg-2);
}
.sp-open-title { font-size: 14px; font-weight: 650; color: var(--text); }
.sp-open-body { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }

.sp-note {
  margin-top: 12px; font-size: 11.5px; line-height: 1.65; color: var(--text-3);
}
.sp-foot {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.7; color: var(--text-3);
}

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