/* ============================================================
   我的财务 - 苹果风样式
   浅/深色自动跟随系统（prefers-color-scheme）
   ============================================================ */

:root {
  --bg: #F2F2F7;
  --bg-grad: #F2F2F7;
  --card: rgba(255, 255, 255, 0.68);
  --card-solid: #FFFFFF;
  --text: #1C1C1E;
  --text2: #8E8E93;
  --sep: rgba(0, 0, 0, 0.08);
  --blue: #0A84FF;
  --orange: #FF9500;
  --green: #34C759;
  --red: #FF3B30;
  --yellow: #FFCC00;
  --key-bg: rgba(255, 255, 255, 0.85);
  --key-area: rgba(242, 242, 247, 0.7);
  --seg-bg: rgba(0, 0, 0, 0.06);
  --tab-bg: rgba(255, 255, 255, 0.6);
  --field-bg: rgba(255, 255, 255, 0.7);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* 背景渐变主题（浅色） */
body[data-bg="sky"]   { --bg-grad: linear-gradient(180deg, #EAF3FF 0%, #D9E9FF 55%, #C9DFFF 100%); }
body[data-bg="mint"]  { --bg-grad: linear-gradient(180deg, #E9F8F2 0%, #D9F1E6 55%, #C9EADA 100%); }
body[data-bg="violet"]{ --bg-grad: linear-gradient(180deg, #F3EFFF 0%, #E6DDFF 55%, #D8CCFF 100%); }
body[data-bg="orange"]{ --bg-grad: linear-gradient(180deg, #FFF5E9 0%, #FFEAD2 55%, #FFDFBB 100%); }
body[data-bg="ocean"] { --bg-grad: linear-gradient(180deg, #EAF6FD 0%, #D9EDFA 55%, #C7E4F7 100%); }
:root[data-theme="dark"] {
    --bg: #000000;
    --bg-grad: #000000;
    --card: rgba(28, 28, 30, 0.6);
    --card-solid: #1C1C1E;
    --text: #F2F2F7;
    --text2: #98989F;
    --sep: rgba(255, 255, 255, 0.09);
    --key-bg: rgba(44, 44, 46, 0.85);
    --key-area: rgba(28, 28, 30, 0.7);
    --seg-bg: rgba(255, 255, 255, 0.09);
    --tab-bg: rgba(20, 20, 22, 0.6);
    --field-bg: rgba(44, 44, 46, 0.7);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  }
  /* 背景渐变主题（深色变体） */
:root[data-theme="dark"] body[data-bg="sky"]   { --bg-grad: linear-gradient(180deg, #0C1B2A 0%, #10263B 60%, #14304A 100%); }
:root[data-theme="dark"] body[data-bg="mint"]  { --bg-grad: linear-gradient(180deg, #0B1F18 0%, #0F2A20 60%, #123625 100%); }
:root[data-theme="dark"] body[data-bg="violet"]{ --bg-grad: linear-gradient(180deg, #1A1228 0%, #221640 60%, #2A1B52 100%); }
:root[data-theme="dark"] body[data-bg="orange"]{ --bg-grad: linear-gradient(180deg, #241809 0%, #2E1E0C 60%, #382510 100%); }
:root[data-theme="dark"] body[data-bg="ocean"] { --bg-grad: linear-gradient(180deg, #0B1B26 0%, #0F2433 60%, #142E40 100%); }}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg-grad) fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
.hidden { display: none !important; }

/* ---------- 整体布局 ---------- */
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
#header {
  padding: calc(env(safe-area-inset-top) + 14px) 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#page-title { font-size: 30px; font-weight: 700; letter-spacing: 0.2px; }
#views { flex: 1; overflow-y: auto; padding-bottom: 140px; }
.view { display: none; }
.view.active { display: block; }

/* 二级页面层 */
#layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: layerIn 0.22s ease;
}
@keyframes layerIn {
  from { transform: translateX(60px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------- 顶部标题栏按钮 ---------- */
.hdr-btn {
  width: 36px; height: 36px;
  border: none;
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font-size: 18px;
  box-shadow: var(--shadow);
}
.hdr-btn:active { opacity: 0.7; }

/* 毛玻璃应用于其他浅色组件 */
.form-row, .stat-box, .type-item, .cal-cell, .bank-list, .dialog-card,
.seg button.on, .fixed-row, .menu-row {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ---------- 底部导航（毛玻璃） ---------- */
#tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(54px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--tab-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top: 0.5px solid var(--sep);
  z-index: 40;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 10px;
}
.tab .tab-icon { display: flex; align-items: center; justify-content: center; }
.tab .tab-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab.active { color: var(--blue); font-weight: 600; }

/* ---------- 悬浮记一笔 ---------- */
.fab {
  position: fixed;
  z-index: 45;
  right: calc(50% - 220px);
  bottom: 96px;
  width: 56px; height: 56px;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, #0A84FF, #0071E3);
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.4);
  transition: transform 0.12s ease;
}
.fab:active { transform: scale(0.92); }
@media (max-width: 480px) { .fab { right: 20px; } }
@media (min-width: 481px) { .fab { right: calc(50% - 220px); } }

/* ---------- 卡片（毛玻璃浅色） ---------- */
.card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin: 0 16px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 0.5px solid var(--sep);
}
.card + .card { margin-top: 12px; }
.card-pad { padding: 16px; }
.card-flat { box-shadow: none; }
.tap { cursor: pointer; transition: opacity 0.1s; }
.tap:active { opacity: 0.6; }

/* ---------- 分组标题 ---------- */
.group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  padding: 16px 20px 8px;
}

/* ---------- 总资产渐变卡 ---------- */
.asset-card {
  margin: 0 16px;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  background: linear-gradient(135deg, #1C1C1E, #3A3A3C);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.asset-card .lbl { color: #98989F; font-size: 13px; }
.asset-card .total { font-size: 34px; font-weight: 700; margin: 6px 0 16px; letter-spacing: 0.5px; }
.asset-card .mini { display: inline-block; margin-right: 28px; font-size: 12px; }
.asset-card .mini b { display: block; font-size: 15px; font-weight: 600; }

/* ---------- 汇总数字卡 ---------- */
.stat-row { display: flex; gap: 8px; margin: 0 16px; }
.stat-box {
  flex: 1;
  background: var(--card);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-box .lbl { font-size: 11px; color: var(--text2); }
.stat-box .val { font-size: 15px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 分段控件 ---------- */
.seg {
  display: flex;
  background: var(--seg-bg);
  border-radius: 10px;
  padding: 3px;
  margin: 0 20px;
}
.seg button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 0;
  border-radius: 7px;
  transition: all 0.18s ease;
}
.seg button.on {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ---------- 月份切换 ---------- */
.month-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 4px;
}
.month-switch button {
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 20px;
  padding: 4px 12px;
}
.month-switch .m { font-size: 16px; font-weight: 600; min-width: 120px; text-align: center; }

/* ---------- 账单分组列表 ---------- */
.day-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px 6px;
  font-size: 12px;
  color: var(--text2);
}
.bill-card { padding: 0; overflow: hidden; }
.bill-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.bill-row:active { background: rgba(0, 0, 0, 0.03); }
.bill-row + .bill-row { border-top: 0.5px solid var(--sep); }
.cat-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.bill-main { flex: 1; min-width: 0; }
.bill-name { font-size: 15px; font-weight: 500; }
.bill-sub { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-amt { font-size: 16px; font-weight: 600; white-space: nowrap; }
.amt-expense { color: var(--orange); }
.amt-income { color: var(--green); }
.amt-transfer { color: var(--text2); }

/* ---------- 存款卡片 ---------- */
.acct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
}
.acct-ico {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.acct-main { flex: 1; min-width: 0; }
.acct-name { font-size: 15px; font-weight: 600; }
.acct-remark { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-bal { text-align: right; }
.acct-bal b { font-size: 17px; font-weight: 700; display: block; }
.acct-bal span { font-size: 11px; color: var(--text2); }
.chevron { color: var(--text2); font-size: 16px; }

/* 滑动删除容器 */
.del-wrap { position: relative; overflow: hidden; }
.del-bg {
  position: absolute; inset: 0;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  font-size: 14px;
  border-radius: 16px;
}

/* ---------- 进度条 ---------- */
.progress {
  height: 8px;
  border-radius: 4px;
  background: var(--seg-bg);
  overflow: hidden;
}
.progress .bar { height: 100%; border-radius: 4px; transition: width 0.3s ease; }

/* ---------- 空状态 ---------- */
.empty {
  text-align: center;
  padding: 48px 32px;
  color: var(--text2);
}
.empty .e-ico { font-size: 40px; opacity: 0.5; }
.empty p { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--text); }
.empty span { font-size: 13px; }

/* ---------- 二级页导航 ---------- */
.layer-nav {
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  height: 62px;
  display: flex;
  align-items: center;
  position: relative;
}
.layer-nav .back {
  border: none;
  background: transparent;
  color: var(--blue);
  font-size: 30px;
  width: 46px;
  height: 44px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  border-radius: 12px;
  flex-shrink: 0;
}
.layer-nav .back:active { background: rgba(0,0,0,0.06); }
.layer-nav h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-nav .save {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 14px;
}

/* ---------- 记一笔 ---------- */
.add-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.add-scroll { flex: 1; overflow-y: auto; padding: 18px 16px 14px; }
.amount-display {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  padding: 10px 0 14px;
  font-variant-numeric: tabular-nums;
}
.amount-display .cur { font-size: 26px; margin-right: 4px; color: var(--text2); }

/* 分类网格 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0 4px;
}
.cat-item {
  border: 1.2px solid transparent;
  border-radius: 12px;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.12s;
}
.cat-item .c-ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.cat-item span { font-size: 12px; color: var(--text2); }
.cat-item.on { border-color: currentColor; }
.cat-item.on span { color: var(--text); font-weight: 600; }

/* 表单行 */
.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.form-row .f-ico { font-size: 17px; color: var(--text2); }
.form-row .f-lbl { font-size: 15px; color: var(--text2); }
.form-row .f-val { margin-left: auto; font-size: 15px; font-weight: 500; }
.form-row .f-val.gray { color: var(--text2); font-weight: 400; }
.form-row .chevron { font-size: 15px; }
.form-field {
  background: var(--field-bg);
  border: none;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--text);
  width: 100%;
  margin-bottom: 10px;
  outline: none;
}
.form-field::placeholder { color: var(--text2); }
textarea.form-field { resize: none; min-height: 44px; }

/* 数字键盘 */
.num-keyboard {
  background: var(--key-area);
  padding: 6px;
  flex-shrink: 0;
}
.num-key-row { display: flex; padding: 3px 0; }
.num-key {
  flex: 1;
  height: 52px;
  margin: 0 3px;
  border: none;
  border-radius: 10px;
  background: var(--key-bg);
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
}
.num-key:active { opacity: 0.6; }

/* ---------- 类型选择（添加卡片） ---------- */
.type-row { display: flex; gap: 8px; margin: 10px 0 16px; }
.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 16px;
}
.type-item {
  flex: 1;
  border: 1.2px solid transparent;
  border-radius: 14px;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--card);
  cursor: pointer;
}
.type-item .t-ico {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.type-item span { font-size: 12px; color: var(--text2); }
.type-item.on { border-color: currentColor; }
.type-item.on span { color: var(--text); font-weight: 600; }

/* ---------- 统计图表 ---------- */
.ring-wrap { display: flex; justify-content: center; padding: 16px 0 4px; }
.ring {
  width: 170px; height: 170px;
  border-radius: 50%;
  position: relative;
}
.ring::after {
  content: '';
  position: absolute;
  inset: 46px;
  border-radius: 50%;
  background: var(--card);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ring-center .lbl { font-size: 12px; color: var(--text2); }
.ring-center .val { font-size: 17px; font-weight: 700; }
.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  font-size: 14px;
}
.legend-row .dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.legend-row .l-name { flex: 1; }
.legend-row .l-amt { font-weight: 600; }
.legend-row .l-pct { width: 52px; text-align: right; font-size: 12px; color: var(--text2); }

/* 柱状图 */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 8px 4px 0; }
.bar-group { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.bar-group .bar {
  width: 10px;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.bar-x {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  padding-top: 6px;
}

/* ---------- 我的页菜单 ---------- */
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.menu-row:active { background: rgba(0, 0, 0, 0.03); }
.menu-row + .menu-row { border-top: 0.5px solid var(--sep); }
.menu-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.menu-main { flex: 1; min-width: 0; }
.menu-title { font-size: 15px; font-weight: 500; }
.menu-sub { font-size: 12px; color: var(--text2); }

/* ---------- 按钮 ---------- */
.btn-blue {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 0;
}
.btn-blue:active { opacity: 0.85; }
.btn-danger-text {
  border: none;
  background: transparent;
  color: var(--red);
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  display: block;
  margin: 4px auto 8px;
}

/* ---------- 弹层 / 提示 ---------- */
.mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.dialog-card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 340px;
  animation: popIn 0.18s ease;
}
@keyframes popIn {
  from { transform: scale(0.92); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}
.dialog-card h3 { font-size: 17px; margin-bottom: 10px; }
.dialog-card p { font-size: 14px; color: var(--text2); line-height: 1.5; margin-bottom: 6px; }
.dialog-actions { display: flex; gap: 8px; margin-top: 16px; }
.dialog-actions button {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
}
.dialog-actions .cancel { background: var(--field-bg); color: var(--text); }
.dialog-actions .danger { background: var(--red); color: #fff; }
.dialog-actions .ok { background: var(--blue); color: #fff; }
.dialog-input {
  width: 100%;
  border: none;
  background: var(--field-bg);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  margin-top: 8px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(28, 28, 30, 0.9);
  color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 22px;
  max-width: 80%;
  text-align: center;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 说明文本 */
.note { font-size: 12px; color: var(--text2); line-height: 1.7; padding: 4px 20px 20px; }

/* 滚动条美化（桌面） */
#views::-webkit-scrollbar, .add-scroll::-webkit-scrollbar { width: 0; }

/* ============================================================
 * v2：品牌存款卡片（微信/支付宝/银行卡/理财/贵金属/现金）
 * ============================================================ */
.wcard-list { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }

/* 钱包卡（微信/支付宝/现金/理财） */
.wcard {
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.wcard::after { /* 光泽 */
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  height: 160%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 70%);
  transform: rotate(12deg);
  pointer-events: none;
}
.wc-top { display: flex; justify-content: space-between; align-items: center; }
.wc-brand { font-size: 17px; font-weight: 700; letter-spacing: 0.5px; }
.wc-logo { font-size: 22px; display: flex; align-items: center; }
.wc-logo svg { display: block; }
.wc-amt { font-size: 30px; font-weight: 700; margin: 10px 0 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.wc-sub { font-size: 12px; opacity: 0.88; }

/* 银行卡 */
.bcard {
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
.bcard::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  height: 160%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 70%);
  transform: rotate(12deg);
  pointer-events: none;
}
.bc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bc-logo { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.bc-name { font-size: 13px; opacity: 0.92; margin-top: 2px; }
.bc-chip {
  width: 40px;
  height: 30px;
  margin-top: 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F6D365, #D9A441);
  position: relative;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.18);
}
.bc-chip::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 3px;
}
.bc-num { margin-top: 12px; font-size: 17px; letter-spacing: 3px; opacity: 0.92; }
.bc-amt { margin-top: 8px; font-size: 22px; font-weight: 700; }

/* 金价行（贵金属卡） */
.wc-metal-line { font-size: 12px; opacity: 0.9; display: flex; justify-content: space-between; }

/* 微信 logo（SVG 气泡） */
.wx-logo { width: 26px; height: 26px; }
/* 支付宝 logo（支字圆标） */
.zfb-logo {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #1677FF;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
 * v2：固定支出
 * ============================================================ */
.fixed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px;
}
.fixed-title { font-size: 15px; font-weight: 600; }
.fixed-title small { font-size: 11px; color: var(--text2); font-weight: 400; margin-left: 6px; }
.fixed-manage { color: var(--blue); font-size: 13px; font-weight: 500; }
.fixed-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.fixed-row + .fixed-row { border-top: 0.5px solid var(--sep); }
.fixed-ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.fixed-main { flex: 1; min-width: 0; }
.fixed-name { font-size: 14px; font-weight: 500; }
.fixed-day { font-size: 12px; color: var(--text2); }
.fixed-amt { font-size: 15px; font-weight: 600; color: var(--orange); }
.fixed-status { font-size: 11px; padding: 2px 9px; border-radius: 10px; flex-shrink: 0; }
.fixed-status.done { background: #34C75922; color: var(--green); }
.fixed-status.wait { background: #FF950022; color: var(--orange); }
.fixed-sum {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 0.5px solid var(--sep);
  font-size: 13px;
  color: var(--text2);
}

/* ============================================================
 * v2：银行搜索
 * ============================================================ */
.bank-list {
  max-height: 220px;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 10px;
}
.bank-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.bank-item:active { background: rgba(0,0,0,0.04); }
.bank-item + .bank-item { border-top: 0.5px solid var(--sep); }
.bank-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.bank-name { font-size: 14px; font-weight: 500; }
.bank-sub { font-size: 11px; color: var(--text2); margin-left: 4px; }

/* 金价管理卡片 */
.metal-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}
.metal-price-row + .metal-price-row { border-top: 0.5px solid var(--sep); }
.metal-price-row .mp-name { font-size: 15px; font-weight: 600; }
.metal-price-row .mp-price { font-size: 14px; color: var(--text2); }

/* 开关 */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; margin-left: auto; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--seg-bg);
  border-radius: 28px;
  transition: 0.2s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .slider { background: #34C759; }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ============================================================
 * v3：支出平台
 * ============================================================ */
.plat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--field-bg);
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--sep);
}
.plat-search:focus-within { border-color: var(--blue); }
.plat-search .ps-ico { font-size: 16px; opacity: 0.6; flex-shrink: 0; }
.plat-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 15px;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.plat-search input::placeholder { color: var(--text2); }
.plat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 6px;
}
.plat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.plat-item .p-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: var(--shadow);
}
.plat-item span { font-size: 11px; color: var(--text); text-align: center; line-height: 1.2; }

/* 平台标签（账单行 / 记一笔展示） */
.plat-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9px;
  margin-right: 2px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ============================================================
 * v7：应用锁屏（6 位密码）
 * ============================================================ */
#lockscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 70px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
.lock-box { text-align: center; }
.lock-app { font-size: 24px; font-weight: 700; }
.lock-date { color: var(--text2); font-size: 14px; margin-top: 8px; }
.lock-dots { display: flex; gap: 14px; margin-top: 28px; justify-content: center; }
.lock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text2);
  transition: all 0.12s;
}
.lock-dot.on { background: var(--blue); border-color: var(--blue); }
.lock-err { color: var(--red); font-size: 13px; min-height: 20px; margin-top: 10px; }

/* ============================================================
 * v8：背景主题
 * ============================================================ */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bg-item {
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--card);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.bg-item.on { border-color: var(--blue); }
.bg-item span { font-size: 12px; color: var(--text); }
.bg-preview {
  width: 100%;
  height: 56px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ============================================================
 * v4：历史存款日历
 * ============================================================ */
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 6px 16px 4px;
}
.cal-head span {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 16px;
}
.cal-cell {
  background: var(--card);
  border-radius: 10px;
  padding: 5px 2px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1.5px solid transparent;
}
.cal-cell .cal-day { display: block; font-size: 13px; font-weight: 600; }
.cal-cell .cal-val {
  display: block;
  font-size: 9px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.cal-cell.today { border-color: var(--blue); }
.cal-cell .cal-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin: 1px auto 0;
}

/* ============================================================
 * v4：支出折线图
 * ============================================================ */
.line-chart-wrap { padding: 4px 0 0; }
.line-chart-wrap svg { display: block; width: 100%; }