:root {
  /* —— 色板：统一到单一低饱和紫（莫兰迪紫，色相 280-286°），避免多套色系割裂 —— */
  --fg: #182430;
  --muted: #7a6d82;
  --muted-2: #aba1b2;
  --line: #ece5ef;
  --line-2: #f3eef5;
  --bg: #f6f2f7;
  --card: #ffffff;
  --accent: #8a6696;
  --accent-d: #634b6e;
  --accent-l: #b69ebd;  /* 渐变亮端 */
  --accent-soft: #e8e0eb;
  --red: #e5484d;
  --green: #12a150;
  --warn: #b45309;
  --fund: #8a6696;      /* 基金主题色（与主色同源，详情 hero / 交易标题） */
  --fund-l: #b69ebd;    /* 渐变亮端 */
  /* 圆角体系：卡片 22 / 内部块 16 / 控件 12（柔和卡片风，层级更大） */
  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  /* 阴影体系：带主色微光的柔和长阴影，卡片才能真正「浮起来」 */
  --shadow: 0 2px 4px rgba(138, 102, 150, .05), 0 16px 36px -18px rgba(138, 102, 150, .30);
  --shadow-sm: 0 2px 4px rgba(138, 102, 150, .04), 0 10px 26px -16px rgba(138, 102, 150, .28);
  --shadow-lg: 0 -10px 40px rgba(24, 36, 48, .20);
  --ring: 0 0 0 3px rgba(138, 102, 150, .14);
  --wrap: 720px;        /* 宽屏下的内容最大宽度 */
  --tab-h: 62px;        /* 悬浮胶囊导航高度 */
  --chat-fab-lift: 148px; /* 随手记球被主操作按钮顶上去时的高度（?v=164，chat.js 按实测改写） */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  background: var(--bg);
  /* 顶部一层极淡主色光晕，让纯色背景不再"死板" */
  background-image: linear-gradient(180deg, #eee8f1, rgba(246, 242, 247, 0) 260px);
  background-repeat: no-repeat;
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
/* 金额等数字统一等宽，避免列表对齐跳动 */
.stat-3 .s-v, .mi-right, .row .v, .fd-amt-v, .fl-amt, .fr-a, .dep-amt, .acct-hero .h-v, .dc-v { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--red); font-size: 13px; min-height: 18px; }
/* 诊断行（?v=163）：锁屏原因小字，灰色不抢眼，仅帮助定位「为什么又要登录」 */
.diag-line { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 6px; word-break: break-all; }
.red { color: var(--red); }
.green { color: var(--green); }

/* ---------------- 登录 ---------------- */
.login {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #3a2f41, var(--accent-d) 45%, var(--accent) 100%);
}
.login-card {
  width: 84%; max-width: 340px; background: #fff; border-radius: 20px;
  padding: 32px 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); text-align: center;
}
.login-card h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.3px; }
.login-card .muted { margin: 0 0 24px; font-size: 13.5px; }
.login-card input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-size: 16px; margin-bottom: 14px; outline: none;
}
.login-card input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.btn-primary {
  width: 100%; padding: 13px; min-height: 46px; border: none; border-radius: var(--radius-xs); background: var(--accent);
  color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(138, 102, 150, .28);
}
.btn-primary:active { background: var(--accent-d); }
.btn-wechat {
  width: 100%; padding: 12px; min-height: 44px; margin-top: 10px; border: none; border-radius: var(--radius-xs);
  background: #07c160; color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
}
.btn-wechat:active { opacity: .9; }

/* ---------------- 主框架 ---------------- */
/* ?v=78：dvh 跟随地址栏/键盘收缩，安卓上 100vh 会被顶出可视区；老浏览器忽略 dvh 用上一行 vh */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.view {
  flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 14px 14px calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 30px);
  /* ?v=167：这里原本是 overflow-y:auto，但 .app 只有 min-height 没有定高，
     内容一长 .view 就跟着长（实测 clientHeight == scrollHeight），真正滚动的是
     document —— 于是 .view 成了一个「不滚动的滚动容器」，里面的 position:sticky
     顶栏全部失效（实测滚 400px 后顶栏 top 从 14 掉到 -386）。去掉它，页面照旧由
     document 滚动，吸顶顶栏才真的吸得住。 */
}
/* 悬浮胶囊导航：脱离屏幕边缘，靠圆角 + 毛玻璃 + 投影与内容分层 */
/* 全局底部导航：贴底圆顶角条（?v=156 圆角友好版）。
   实心白底 + 20px 顶部圆角，去掉毛玻璃与投影，与账本首页视觉同源；作用全部五个页面。
   激活态图标用主色软底圆角块点亮。 */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--wrap);
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(9px + env(safe-area-inset-bottom, 0));
  display: flex; z-index: 30;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: none;
}
.tabbar button {
  flex: 1; border: 0; background: none; padding: 3px 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit; font-size: 13px; color: var(--muted-2); cursor: pointer;
}
.tabbar button .tb-lb { line-height: 1.3; letter-spacing: .2px; }
.tabbar button:active { background: none; }
.tabbar button .tb-ico {
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto; border-radius: 11px; transition: background .14s, transform .14s;
  color: var(--muted-2);
}
.tabbar button .tb-ico svg {
  width: 22px; height: 22px; display: block; padding: 5px; border-radius: 11px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar button.active { color: var(--accent); font-weight: 600; }
.tabbar button.active .tb-ico { background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }

/* ---------------- 通用组件 ---------------- */
/* 一级页面标题（无返回）：个子大、字重高，与二级页形成明确层级差 */
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin: 6px 4px 18px; }

/* 二级页统一顶栏：[‹ 返回] 标题 …… 右侧操作。
   吸顶 + 毛玻璃；一级页面用 .page-title，二级页用 .nav-bar，二者不再混用。 */
.nav-bar {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 10px;
  margin: -14px -14px 14px; padding: 11px 14px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-back {
  flex: none; width: 34px; height: 34px; padding: 0; border: none; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-family: inherit;
}
.nav-back svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.nav-back:active { background: #e6d7ec; }
.nav-title {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-right { flex: none; display: flex; align-items: center; gap: 8px; }

.card {
  background: var(--card); border: none; border-radius: var(--radius);
  padding: 17px; margin-bottom: 15px; box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 14px; font-weight: 700; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.row:last-child { border-bottom: none; }
.row .k { color: var(--muted); }
.row .v { font-weight: 600; }
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--fg); border-radius: var(--radius-xs);
  padding: 10px 16px; min-height: 40px; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(138, 102, 150, .22); }
.btn.danger { color: var(--red); border-color: #f6cccc; background: #fffafa; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.block { width: 100%; min-height: 46px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; }
.btn:active { opacity: .85; }
.link { color: var(--accent); cursor: pointer; }
.danger-link { color: var(--red); cursor: pointer; }
/* 记一笔页内的子页面入口（如山姆代购）：可点击卡片 */
.sub-entry { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.sub-entry:active { opacity: .8; }
.sub-entry .v { color: var(--accent); }
/* 首页「山姆代购」入口：复用列表行排版（头像 + 主副标题 + 右箭头） */
.sub-entry .mi-main { flex: 1; min-width: 0; }
.sub-entry .mi-title { font-weight: 600; font-size: 14.5px; }
.sub-entry .mi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mi-go { color: var(--muted-2); font-size: 19px; line-height: 1; }
/* 子页面顶部返回链接 */
.back-link { color: var(--accent); font-size: 14px; cursor: pointer; margin-bottom: 10px; }
/* 列表行内多个操作（确认 / 丢弃），保证移动端点按区域足够大 */
/* 弹窗底部并排按钮 */
.btn-row { display: flex; gap: 8px; margin-top: 10px; }
.btn-row .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 12px; font-size: 16px; }
/* 基金详情：次要操作链接行（分红 / 拆分 / 转托管 / 同步净值） */
.act-links { display: flex; justify-content: center; gap: 20px; margin: 10px 0 14px; }
.act-links .link { font-size: 14px; padding: 4px 2px; }

input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs);
  /* 16px 是关键：iOS Safari 聚焦时不会自动放大页面 */
  font-size: 16px; outline: none; background: #fff; color: var(--fg); margin-bottom: 10px;
  font-family: inherit; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
/* 勾选框 / 单选 / 文件 / 日期 保持系统原生外观（appearance:none 会把勾选框抹掉） */
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: auto; appearance: auto;
}
/* select 保留原生选择器（移动端体验更好），仅补一个下拉箭头 */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea { min-height: 56px; resize: vertical; }
label.field { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 1px 0 3px; }
/* 二级分类：一级 + 二级 并排 */
.cat-pair { display: flex; gap: 8px; }
.cat-pair select:first-child { flex: 0 0 42%; }
.cat-pair select:last-child { flex: 1 1 auto; }

/* 段控 */
.seg { display: flex; background: #f0eaf3; border-radius: var(--radius-sm); padding: 4px; margin-bottom: 10px; }
.seg button {
  flex: 1; border: none; background: none; padding: 9px 6px; min-height: 38px; border-radius: 9px;
  color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500; transition: background .15s, color .15s;
}
.seg button.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }

/* A2 记账助手弹窗内的「高置信度自动入账」开关 */

/* 持仓 / 空仓 分类条（基金 · 股票 · 贷款列表页）：.seg 同族的列表页控件，右侧带数量角标 */
.cat-seg { display: flex; gap: 6px; background: #f0eaf3; border-radius: var(--radius-sm); padding: 4px; margin-bottom: 10px; }
.cat-seg button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: none; padding: 9px 6px; min-height: 38px; border-radius: 9px;
  color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.cat-seg button.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }
.cat-seg .cs-n {
  font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px;
  background: rgba(138, 102, 150, .10); color: var(--accent);
}
.cat-seg button.active .cs-n { background: rgba(138, 102, 150, .16); }

/* ---------------- 排序条（列表页统一：基金/股票/定存/贷款） ----------------
   横向可滑，不换行；激活项用主色软底 + CSS 三角表示升降序（不用箭头字符）。 */
.sort-bar { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; }
.sort-bar::-webkit-scrollbar { display: none; }
.sort-bar .sb-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: none; border-radius: 15px; background: #f0eaf3; color: var(--muted);
  font-size: 12.5px; line-height: 1; font-family: inherit; cursor: pointer;
}
.sort-bar .sb-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sort-bar .sb-dir {
  display: none; width: 0; height: 0; margin-left: 4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.sort-bar .sb-btn.active .sb-dir { display: inline-block; }
.sort-bar .sb-btn.active .sb-dir.down { border-top: 5px solid var(--accent); }
.sort-bar .sb-btn.active .sb-dir.up { border-bottom: 5px solid var(--accent); }

/* 金额大输入 */
.amount-input {
  font-size: 32px; font-weight: 700; text-align: right; border: none;
  border-bottom: 2px solid var(--line); border-radius: 0; padding: 6px 0; margin-bottom: 10px;
}
.amount-input:focus { border-bottom-color: var(--accent); box-shadow: none; }

/* 列表 */
.list-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 0; min-height: 46px; border-bottom: 1px solid var(--line-2);
}
.list-item:last-child { border-bottom: none; }
.list-item .mi-main { flex: 1; min-width: 0; }
.list-item .mi-title { font-weight: 600; font-size: 14.5px; }
.list-item .mi-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* ?v=71 副标题分段：时间 / 账户流向 / 备注各自成段，流向箭头着色，不再是一整串「·」 */
.list-item .mi-sub { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 2px; }
.list-item .mi-sub .mi-hm { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.list-item .mi-sub .mi-flow { display: inline-flex; align-items: baseline; color: var(--fg); }
.list-item .mi-sub .mi-acc { color: var(--muted); }
.list-item .mi-sub .mi-note { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .mi-sub .arw { font-style: normal; color: var(--accent); margin: 0 5px; font-weight: 700; }
.list-item .mi-right { text-align: right; font-weight: 600; font-size: 14.5px; margin-left: 10px; white-space: nowrap; }
.empty { text-align: center; color: var(--muted-2); padding: 34px 20px; font-size: 13.5px; line-height: 1.75; }
/* 贷款还款计划卡片（?v=78：原 8 列表格在手机上横向溢出，改卡片）
   标题行「第 N 期 + 状态标签」，右侧合计金额，副行日期 + 本金/利息/剩余，最右是操作。 */
.ln-row { padding: 11px 0; min-height: 52px; }
.ln-row .mi-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ln-ops { margin-left: 10px; white-space: nowrap; font-size: 13px; }

/* 统计条 */
.bar-row { display: flex; align-items: center; margin: 9px 0; font-size: 13px; }
.bar-row .bl { width: 64px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bt { flex: 1; height: 10px; background: #f0eaf3; border-radius: 999px; overflow: hidden; margin: 0 10px; }
.bar-row .bf { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #bf8fcb, var(--accent)); }
.bar-row .bv { width: 72px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 次级标签（理财内） */
.subtabs { display: flex; overflow-x: auto; gap: 8px; margin-bottom: 14px; padding: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subtabs::-webkit-scrollbar, .quick-row::-webkit-scrollbar { display: none; }
.subtabs button {
  white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 15px; min-height: 34px; font-size: 13.5px; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.subtabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

/* 弹层 */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); animation: fadeIn .18s ease both; }
.modal-box {
  position: relative; width: 100%; max-width: 560px; background: #fff; border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0)); max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: sheetUp .26s cubic-bezier(.22, .8, .28, 1) both;
}
/* 顶部把手：暗示这是一张可从底部拖走的面板 */
.modal-box::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: #dee3ea;
}
.modal-box .close {
  position: absolute; right: 12px; top: 14px; width: 32px; height: 32px; line-height: 31px;
  text-align: center; font-size: 22px; color: var(--muted); cursor: pointer; border-radius: var(--radius-xs);
}
.modal-box .close:active { background: #f1f4f8; }

/* 折叠块（说明卡 / 高级选项）：默认收起，点标题展开，压低录入区高度，避免弹窗上下滑 */
.fold-h { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg); }
.fold-h .chev { transition: transform .2s; color: var(--muted); font-size: 12px; }
.card.fold.open > .fold-h .chev, .adv.open > .fold-h .chev { transform: rotate(180deg); }
.fold-b { margin-top: 8px; }
.adv { margin: 2px 0 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.adv > .fold-h { color: var(--muted); font-size: 13.5px; }
.card.compact { padding: 14px; margin-bottom: 10px; }
@keyframes sheetUp { from { transform: translateY(16px); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-box, .modal-mask { animation: none; } }

/* 基金/股票交易弹窗：去模板化（?v=166，沿用莫兰迪紫磨砂玻璃）
   仅作用于 .ftxn 包裹层，不影响其他弹窗；不引入新色号，全部复用 :root 变量。 */
.ftxn { display: block; }
/* 头部：主色软底圆角块 + 强调圆点，替代裸标题 */
.ftxn .card-title {
  justify-content: flex-start; gap: 8px;
  background: var(--accent-soft); color: var(--accent-d);
  border-radius: var(--radius-sm); padding: 11px 14px;
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
}
.ftxn .card-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(138, 102, 150, .18);
}
/* 段控：药丸轨道 + 选中态主色渐变浮起 */
.ftxn .seg { background: var(--accent-soft); border-radius: 999px; padding: 5px; }
.ftxn .seg button {
  border-radius: 999px; color: var(--muted);
  transition: background .18s, color .18s, box-shadow .18s;
}
.ftxn .seg button.active {
  background: linear-gradient(135deg, var(--accent-l), var(--accent));
  color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(138, 102, 150, .32);
}
/* 弹窗内控件需保留可见焦点环（ui-ux-pro-max：Modal Focus States, High） */
.ftxn .seg button:focus-visible { outline: none; box-shadow: var(--ring); }
/* 输入区：柔和内嵌底，聚焦才显边框 */
.ftxn .field { margin: 4px 0 3px; }
.ftxn input, .ftxn select { background: var(--line-2); border-color: transparent; }
.ftxn input:focus, .ftxn select:focus { background: #fff; border-color: var(--accent); box-shadow: var(--ring); }
/* 实时试算：从一行小字升级为磨砂紫「结果卡」——弹窗的「金额高光时刻」 */
.ftxn .calc-preview { margin: 4px 0 12px; }
.ftxn .ftxn-sum {
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-soft), #f7f2f9);
  border: 1px solid rgba(138, 102, 150, .14); box-shadow: var(--shadow-sm);
}
.ftxn .ftxn-sum-l { display: block; font-size: 12px; color: var(--muted); letter-spacing: .4px; }
.ftxn .ftxn-sum-v { font-size: 25px; font-weight: 700; color: var(--accent-d); line-height: 1.2; margin: 3px 0 5px; font-variant-numeric: tabular-nums; }
.ftxn .ftxn-sum-v b { color: var(--accent-d); }
.ftxn .ftxn-sum-sub { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ftxn .ftxn-sum-sub b { color: var(--accent); font-weight: 700; }
.ftxn .ftxn-sum-empty { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--muted-2); font-size: 12.5px; }
/* 主操作：主色渐变玻璃 + 柔光投影，强调「提交」；删除降级为安静的文字按钮 */
.ftxn .btn.primary.block {
  background: linear-gradient(135deg, var(--accent-l), var(--accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(138, 102, 150, .5);
  min-height: 50px; font-size: 16px; letter-spacing: .5px;
}
.ftxn .btn.primary.block:active { background: linear-gradient(135deg, var(--accent), var(--accent-d)); }
.ftxn .btn.danger.block {
  background: transparent; border-color: transparent; color: var(--red);
  box-shadow: none; font-weight: 500; min-height: 40px; font-size: 14px;
}

/* toast */
.toast {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: rgba(23, 32, 44, .92); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm);
  font-size: 14px; z-index: 60; max-width: 80%; text-align: center;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .24); animation: fadeIn .18s ease both;
}
/* ?v=79：toast 里的「撤销」按钮（删除类操作给一次反悔机会） */
.toast-act {
  display: inline-block; margin-left: 14px; color: #a978b4; font-weight: 600; cursor: pointer;
  padding: 2px 4px; border-radius: 8px;
}
.toast-act:active { background: rgba(255, 255, 255, .14); }

/* 标记 */
.tag {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #f0f3f8; color: var(--muted); margin-left: 6px; font-weight: 500;
}
/* 代购往来勾选框 */
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
.chk input { width: auto; margin: 0; flex: none; }
/* 代购标签 */
.tag-proxy { background: #fff3e0; color: #c77700; }
/* 定投计划状态：进行中 / 已暂停 / 已终止 */
.tag-run { background: #f0e6f3; color: var(--accent); }
.tag-pause { background: #fff3e0; color: var(--warn); }
.tag-end { background: #eef0f3; color: var(--muted); }
/* 列表右侧：状态标签 + 操作链接同行 */
.mi-right.flex-r { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* ---------------- 分类管理（?v=54：一级分组 + 二级 chips） ----------------
   旧版一级、二级都是同一种 .list-item 行（46px/条），二级靠「　·」全角空格缩进，
   行尾三个纯文字链接（+子 / 改名 / 删除）。两个问题：
     1) 密而不疏 —— 餐饮 5 个子分类就占 230px；分类一多整页要滚很久，也看不出有几个一级；
     2) 点按面不足 —— 链接字号 13px，且「改名」紧挨红色的「删除」，手机上极易误触。
   新版：一级 = 组头（名称 + 子分类数 + 三个 32px 图标按钮），二级 = 流式 chips（点击改名、× 删除）。 */
.cat-tip { margin: 0 2px 12px; line-height: 1.6; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cat-head-t { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
/* 「添加一级」胶囊：与组内图标按钮同一套浅蓝语言，带文字以示「新增」而非「改这一项」 */
.cat-add {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 9px;
  border: none; border-radius: 16px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.cat-add svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.cat-add:active { background: #e6d7ec; }
/* ============ 分类管理（图标化重做）：一级可折叠行 + 图标方块网格 ============
   视觉对齐参考图（一木记账）：一级是一条行（图标 + 名称 + 数量 + ≡ 拖拽把手），
   点整行展开后，二级变成「图标方块网格」，点方块改名 / 换图标；底部一行工具条改名 / 删除。 */
/* 图标容器基底：所有 catIconHtml 产出的 <span class="ci <尺寸类>"> 都走这里（自定义图 / 内置 svg / 首字色块三态合一）。
   ⚠ 必须定义在各个「尺寸类」（.cg-ico / .ct-ico / .ic-it .ci / .cat-fm-ci）之前：
   它们特异性相同（都是 0,1,0），后出现者胜 —— 基底带 width/height:100%，写在尺寸类之后会把 38/34px 盖掉，
   图标就撑满整行（?v=121 首次上线的 bug 正是这个顺序写反了，?v=122 修正）。 */
.ci { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; flex: none; }
.ci svg { width: 62%; height: 62%; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ci img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ci-t { font-size: 15px; font-weight: 700; }            /* 首字色块：背景 / 前景由内联 style 给，文字居中 */
.ci-add { color: var(--muted-2); }
.ci-add svg { width: 50%; height: 50%; }
.ci-none { color: var(--muted-2); }
/* 一级行容器：组与组之间极淡分隔，展开时本体轻微张开放大感 */
.cg { border-top: 1px solid var(--line-2); }
.cg:first-child { border-top: none; }
.cg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 4px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
/* 折叠箭头：默认朝右（收起），展开时旋 90° 朝下 —— 用纯 CSS 旋转，不靠字符 */
.cg-caret {
  flex: none; width: 22px; height: 22px; padding: 0; border: none; background: none;
  color: var(--muted-2); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: transform .18s ease;
}
.cg-caret svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg.open .cg-caret { transform: rotate(90deg); }
/* 一级图标块：浅蓝软底 + 主色线条图标（复用 .ci 基底，这里只定盒子尺寸） */
.cg-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.cg-name { min-width: 0; flex: 1 1 auto; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 拖拽把手：≡ 两横，鼠标 / 触屏都靠 pointer 事件接管 */
.cg-grip {
  flex: none; width: 34px; height: 34px; padding: 0; border: none; border-radius: 10px;
  background: none; color: var(--muted-2); cursor: grab; touch-action: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cg-grip svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cg-grip:active { background: #f0eaf3; color: var(--muted); }
/* 数量角标（一级行右侧）：沿用旧 .cat-n */
.cat-n {
  flex: none; min-width: 21px; padding: 1px 7px; border-radius: 9px; background: #f2f5fa;
  color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 折叠体：默认收起，展开后显示子分类网格 + 工具条 */
.cg-body { display: none; padding: 2px 2px 12px; }
.cg.open .cg-body { display: block; }
/* 子分类图标方块网格：自动列数，手机上每行约 4~5 个 */
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.ct {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border: none; border-radius: 14px; background: #f6f8fc;
  color: var(--fg); font-family: inherit; cursor: pointer; transition: background .15s;
}
.ct:active { background: #eaeff7; }
.ct-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(24,36,48,.06); }
.ct-n { font-size: 12.5px; line-height: 1.3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* 「新增」占位方块：虚线框，点它加子分类 */
.ct-add { background: transparent; border: 1.5px dashed #d3dded; color: var(--muted); }
.ct-add:active { background: #f0eaf3; }
.ct-add .ct-n { color: var(--muted); }
/* 展开后工具条：改名 / 删除（整行点一下就展开，工具条是显式操作入口） */
.cg-tools { display: flex; gap: 8px; margin-top: 12px; }
.cg-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 38px; padding: 0 10px; border: none; border-radius: 12px;
  background: #f2f5fa; color: var(--muted); font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s, color .15s;
}
.cg-btn svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-btn:active { background: #e7edf6; }
.cg-btn.dg { background: #fdeef0; color: var(--red); }
.cg-btn.dg:active { background: #fbdde0; }
/* 拖拽中：整行抬起来（阴影 + 圆角），提示「正在移动」 */
.cg.dragging { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius-xs); z-index: 2; }
/* 弹窗里的分类编辑表单：左侧 64px 图标预览 + 右侧名称输入 */
.cat-fm { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.cat-fm-ico {
  flex: none; width: 64px; height: 64px; padding: 0; border: 1.5px dashed #d3dded; border-radius: 18px;
  background: #f6f8fc; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s;
}
.cat-fm-ico:active { background: #e8e0eb; border-color: var(--accent); }
.cat-fm-ci { width: 100%; height: 100%; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 28px; font-weight: 700; }
.cat-fm-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; }
/* 图标选择器：5 列网格 + 上传条 */
.ic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 14px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ic-it {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px;
  border: 1.5px solid transparent; border-radius: 12px; background: #f6f8fc; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ic-it:active { background: #eaeff7; }
.ic-it .ci { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(24,36,48,.06); }
.ic-it .ic-n { font-size: 11px; color: var(--muted); line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ic-it.on { background: var(--accent-soft); border-color: var(--accent); }
.ic-it.on .ic-n { color: var(--accent); }
.ic-up {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  height: 42px; border: 1.5px dashed #d3dded; border-radius: 12px; background: #f6f8fc;
  color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ic-up svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.ic-up:active { background: #e8e0eb; border-color: var(--accent); }
.up { color: var(--red); }
.down { color: var(--green); }
.muted2 { color: var(--muted); font-size: 12px; }
.spacer { height: 8px; }

/* ---------------- 日常账本（首页） ---------------- */
/* 摘要三列 */
.stat-3 { display: flex; gap: 9px; }
.stat-3 > div {
  flex: 1; min-width: 0; background: #f6f8fc; border-radius: var(--radius-sm);
  padding: 12px 12px;
}
/* 三色小卡：收入（红系）/ 支出（绿系）/ 结余（蓝系）——与数字涨跌色一致 */
.stat-3 > div:nth-child(1) { background: #fdeef0; }
.stat-3 > div:nth-child(2) { background: #eafaf1; }
.stat-3 > div:nth-child(3) { background: #e8e0eb; }
.stat-3 .s-k { font-size: 11.5px; color: #5c6b80; }
.stat-3 .s-v { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -.3px; }

/* 日期分组头：左「今天 周一」，右「收 x 支 y」 */
.grp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 2px; padding-bottom: 10px; border-bottom: none; }
.grp-head .grp-day { font-weight: 600; }
.grp-head .grp-sum { color: var(--muted); font-size: 12px; white-space: nowrap; }
.grp-head .grp-sum b { font-weight: 600; }

/* 局部更新（?v=70）：改/删一笔后只换列表里真正变化的那一行，其余 DOM 与滚动位置一律不动。
   变化行原地淡出高亮，既提示「就是这一条变了」，又不会像整屏重建那样闪一下。 */
@keyframes txnPatched {
  0% { background: rgba(255, 193, 7, .20); }
  100% { background: transparent; }
}
.list-item.txn-patched { animation: txnPatched 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .list-item.txn-patched { animation: none; }
}

/* 流水行可点开详情 */
.list-item[data-txn] { cursor: pointer; }
/* 基金/股票详情：交易记录行可点开编辑 */
.list-item.tapable { cursor: pointer; }
.list-item.tapable:active { opacity: .7; }
/* 交易弹窗实时试算（按总额反算份额 / 买卖扣款入账） */
.calc-preview { min-height: 17px; margin: -2px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--fg); }
.calc-preview b { color: var(--accent); font-weight: 700; }
/* 成交净值自动带出提示（买入/卖出弹窗，日期下方） */
.nav-hint { margin: -4px 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); min-height: 0; }
.nav-hint b { color: var(--accent); font-weight: 700; }

/* 给悬浮按钮留出空间，末条记录不会被遮挡（展开菜单升起后更高）
   高度账：tab(62) + 26 + 48 ≈ 136，去掉 tab 自身高度后内容需让出 ~110px */
#ledgerList { padding-bottom: 140px; }
/* 账户详情页也挂同一枚悬浮按钮（记一笔默认预选当前账户），同样需要让位 */
#flowList { padding-bottom: 140px; }

/* 悬浮「记一笔」按钮（位于悬浮胶囊导航之上）——主操作，主色渐变。
   「截图」次按钮已退役（记账一律走全局对话框），这里只剩一枚主按钮；
   尺寸保持同高 48px、同最小宽 122px、同内边距与图标 18px，视觉语言不变。 */
.fab {
  position: fixed; right: max(16px, calc((100% - var(--wrap)) / 2 + 16px));
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 26px);
  z-index: 25; border: none; border-radius: 999px;
  height: 48px; min-width: 122px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent);
  background-image: linear-gradient(135deg, var(--accent-l), var(--accent-d));
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 14px 30px -8px rgba(138, 102, 150, .5), 0 2px 6px -2px rgba(58, 47, 65, .28),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer; transition: transform .12s, opacity .15s;
}
.fab svg { width: 18px; height: 18px; flex: 0 0 auto; }
.fab:active { opacity: .92; transform: scale(.96); }

/* 记一笔展开菜单（?v=68 问题2）：菜单自 #fabAdd 上方升起（?v=151：截图按钮已退役，
   菜单不再叠在它之上，底边改为紧贴主按钮上方 10px），半透明遮罩点击即收起。
   菜单项与 .fab 同款圆角胶囊语言，逐级淡入。 */
.fab-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .26);
  z-index: 24; opacity: 0; visibility: hidden; transition: opacity .15s;
}
.fab-backdrop.show { opacity: 1; visibility: visible; }
.fab-menu {
  position: fixed; right: max(16px, calc((100% - var(--wrap)) / 2 + 16px));
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 26px + 48px + 10px);
  z-index: 26; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.fab-menu.show { pointer-events: auto; }
.fab-mi {
  height: 44px; min-width: 122px; padding: 0 14px; border: none; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--fg);
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 22px -8px rgba(58, 47, 65, .42);
  cursor: pointer; transform: translateY(10px) scale(.96); opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.fab-menu.show .fab-mi { transform: none; opacity: 1; }
.fab-mi svg { width: 17px; height: 17px; flex: 0 0 auto; }
.fab-mi:active { background: #eef2fb; }

/* 弹窗内的时间快捷选项 */
.quick-row { display: flex; gap: 8px; overflow-x: auto; margin: -2px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.quick-chip {
  flex: 0 0 auto; font-size: 12.5px; color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; font-weight: 500;
}
.quick-chip:active { background: #e6d7ec; }

/* ---------------- 股票页（持仓 + 收息融合） ---------------- */
/* 工具条：两枚并排的小按钮（添加 / 刷新行情）。
   早前是两枚整宽大按钮竖排（各 46px + 10/12px 间距），首屏就被顶掉半屏。 */
.stk-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.stk-tools .btn { flex: 1 1 0; min-width: 0; }
/* 持仓卡版式：头部（名称 · 代码 · 涨跌幅/已清仓）→ 两栏大字 → 2×2 明细格 → 底栏。
   一只股票一张，含价差盈亏 / 累计收息 / 这笔总盈亏 / 预测分红。 */
.stk-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.stk-card:active { opacity: .92; transform: scale(.995); }
/* 已清仓（空仓分类）：整体降一档底色，一眼区分「还在手里」和「只是留了个档案」 */
.stk-card.stk-off { background: #fafbfd; }
.stk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stk-name { font-weight: 600; font-size: 15px; }
.stk-code { color: var(--muted); font-size: 12px; margin-right: auto; }
/* 涨跌幅 / 已清仓 小胶囊 */
.stk-chip {
  flex: none; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px;
  border-radius: 999px; background: #f0eaf3; color: var(--muted);
}
.stk-chip.up { background: rgba(229, 72, 77, .10); color: var(--red); }
.stk-chip.down { background: rgba(18, 161, 80, .10); color: var(--green); }
.stk-chip.off { background: #f0eaf3; color: var(--muted); font-weight: 500; }
/* 两栏大字：持仓态「市值 / 这笔总盈亏」；空仓态「这笔总盈亏 / 末次交易」 */
.stk-main { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.stk-mv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stk-mv-r { margin-left: auto; text-align: right; align-items: flex-end; }
.stk-k { color: var(--muted); font-size: 12px; }
.stk-v { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.2px; }
/* 2×2 明细格：把 6 行流水账收成一块，高度减半、扫读更快 */
.stk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  padding-top: 10px; border-top: 1px solid var(--line-2);
}
.stk-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 13px; }
.stk-cell > span { color: var(--muted); }
.stk-cell > b { font-weight: 600; }
.stk-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; font-size: 12px;
}
/* 行情缺失提示：现价/市值显示 "-" 时说明原因，避免用户以为「股价真的归零」 */
.stk-hint { margin-top: 8px; font-size: 12px; color: var(--muted-2); }

/* 待除权提示条 */
.banner { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; }
.banner.pending { background: #fff7ed; color: var(--warn); border: 1px solid #fde3c4; }
.banner b { font-weight: 700; }

/* 分红日历：月历头部 + 网格 + 三色节点 + 图例 */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; position: relative; }
.cal-mlabel { font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekrow .cal-w { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-cell { min-height: 36px; border-radius: 8px; background: #fafbfc; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.cal-cell.empty { background: transparent; }
.cal-cell.has { background: #eef4ff; }
.cal-d { font-size: 12px; color: var(--fg); line-height: 1.4; }
.cal-dots { display: flex; gap: 2px; margin-top: 1px; }
.cal-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; opacity: .25; }
.cal-dot.on { opacity: 1; }
.cal-dot.record.on { background: var(--accent); }
.cal-dot.ex.on { background: var(--red); }
.cal-dot.pay.on { background: var(--green); }
.cal-legend { display: flex; gap: 14px; margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.cal-legend span { display: flex; align-items: center; gap: 4px; }
.cal-legend .cal-dot { opacity: 1; }

/* 年度总览：12 个月双柱（已到账 / 预估） */
.yr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px; }
.yr-cell { text-align: center; font-size: 11px; }
.yr-m { color: var(--muted); margin-bottom: 3px; }
.yr-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 60px; }
.yr-bar { width: 7px; border-radius: 3px 3px 0 0; background: #dbe2ec; min-height: 2px; }
.yr-bar.act { background: var(--green); }
.yr-bar.est { background: var(--accent); }
.yr-v { margin-top: 3px; color: var(--fg); }

/* ---------------- 还款提示（转账转入信贷账户时） ---------------- */
.hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 9px; background: #fff7ed; color: var(--warn); border: 1px solid #fde3c4; font-size: 13px; line-height: 1.45; }
.hint .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* ---------------- 自动规则（我的 → 自动规则） ---------------- */
.rule-card.off { opacity: .6; }
.rule-msg { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.rule-next { margin: 6px 0 0; font-size: 12px; color: var(--accent); }
.rule-acts { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }

/* ---------------- 定投：自动执行说明卡 ---------------- */
/* 定投按交易日 09:50 自动执行，无需用户点「确认」；这张卡只做说明 */
.plan-auto { border-left: 3px solid var(--accent); padding: 12px 14px; }
.plan-auto .mi-title { font-weight: 600; font-size: 14px; }
.plan-auto .muted2 { line-height: 1.55; }

/* ---------------- 资产页：资金账户 / 信贷账户 分组 ---------------- */
.acc-grp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0 10px; margin-bottom: 2px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.acc-grp .grp-day { font-size: 14.5px; font-weight: 600; }
.acc-grp .grp-sum { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.acc-grp .caret { display: inline-block; color: var(--muted); font-size: 12px; transition: transform .15s; }
.acc-grp.collapsed .caret { transform: rotate(-90deg); }
.acc-sub-line { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin: -6px 0 9px; }
.acc-tails { color: var(--accent); font-variant-numeric: tabular-nums; }
.credit-bar { height: 4px; border-radius: 3px; background: #e6eef2; overflow: hidden; margin: -6px 0 10px; }
.credit-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ---------------- 账户详情：余额卡 / 账单卡 / 定存 ---------------- */
.acct-hero { border-radius: var(--radius); padding: 18px 17px; color: #fff; background: linear-gradient(135deg, var(--accent-l), var(--accent-d)); margin-bottom: 15px; box-shadow: 0 14px 30px -12px rgba(138, 102, 150, .55); }
.acct-hero .h-k { font-size: 12px; opacity: .9; }
.acct-hero .h-v { font-size: 30px; font-weight: 700; margin: 4px 0 8px; line-height: 1.15; letter-spacing: -.5px; }
.acct-hero .h-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; opacity: .95; margin-top: 3px; }

/* ?v=71 资金账户英雄卡：金额收小、标签明确、转账做成小胶囊（中间的巨大按钮区已取消） */
.acct-hero .ah-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-hero .ah-k { font-size: 12px; opacity: .88; letter-spacing: .4px; }
.acct-hero .ah-v { font-size: 26px; font-weight: 650; margin: 6px 0 0; line-height: 1.2; letter-spacing: -.3px; color: #fff; }
/* 负余额（负债）不再用刺眼的纯白巨字：降为次白 + 缩小一档，另给「负债」小标 */
.acct-hero .ah-v.neg { color: rgba(255, 255, 255, .88); font-size: 24px; font-weight: 600; }
.acct-hero .ah-flag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  background: rgba(255, 255, 255, .22); vertical-align: middle;
}
.acct-hero .ah-row {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .26); font-size: 12.5px; opacity: .95;
}
.acct-hero .ah-row b { font-weight: 600; }
.acct-hero .ah-row b.dn { color: #ffd9d9; }
.acct-hero .ah-i + .ah-i::before { content: "·"; margin-right: 6px; opacity: .6; }
.acct-hero .ah-t { opacity: .8; }

/* 账户详情页「本期收支」卡（?v=91）：随流水筛选联动；英雄卡是全量余额，这张补筛选口径收支 */
.acc-summary { padding: 12px 14px; margin-bottom: 12px; }
.acc-summary .as-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.acc-summary .as-title { font-size: 13px; font-weight: 600; color: #2b3340; }
.acc-summary .as-range { font-size: 11.5px; color: #8a96a8; }
.acc-summary .as-row { display: flex; gap: 10px; }
.acc-summary .as-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: var(--radius-sm); background: #f5f7fb; }
.acc-summary .as-k { font-size: 11.5px; color: #5c6b80; }
.acc-summary .as-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.pill {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  border-radius: 999px; padding: 6px 15px; font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--accent-d); background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .4); transition: transform .12s ease;
}
.pill:active { transform: scale(.95); background: #fff; }
.bill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bill-head .bh-l { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; }
.bill-head .bh-l::before { content: ""; display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); }
.bill-range { font-size: 12px; color: var(--muted); margin: 3px 0 6px; }
.bill-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bill-tags .tag { margin: 0; }
.tag-due { background: #fdecec; color: var(--red); }
.tag-paid { background: #e8f5ec; color: var(--green); }
.tag-rate { background: #f0e6f3; color: var(--accent); }
.due-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.due-card .dc-l { font-size: 14px; }
.due-card .dc-v { font-size: 16px; font-weight: 700; margin-top: 2px; }
.dep-item { padding: 13px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.dep-item:last-child { border-bottom: none; }
.dep-item:active { opacity: .75; }
.dep-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dep-amt { font-size: 17px; font-weight: 700; }
.dep-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dep-right { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.65; flex: none; }
.dep-right .d-exp { color: var(--fg); font-weight: 600; font-size: 13px; }

/* ---------------- 基金详情 / 列表（参考主流基金 App 版式） ---------------- */
/* 详情顶栏：← 返回 / 名称(代码) / ⋮ 更多 */
.fd-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.fd-bar .fd-back { flex: none; width: 34px; height: 34px; line-height: 32px; text-align: center; font-size: 22px; color: var(--accent); cursor: pointer; border-radius: var(--radius-xs); background: var(--accent-soft); }
.fd-bar .fd-back:active { background: #e6d7ec; }
.fd-bar .fd-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bar .fd-code { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.fd-bar .fd-more { flex: none; width: 28px; text-align: center; font-size: 20px; color: var(--muted); cursor: pointer; letter-spacing: 1px; }
/* ?v=72 顶栏瘦身：中间只放「基金 / 股票」，长名称不再挤进来 */
.fd-bar .fd-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ?v=72 名称行：蓝色概览卡上方，全称允许两行截断，代码始终可见 */
.fd-tr { display: flex; align-items: baseline; gap: 0 6px; margin: 2px 2px 10px; }
.fd-tr .fd-tr-name {
  font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-tr .fd-tr-code { flex: none; font-size: 12px; color: var(--muted); }

/* ⋮ 菜单（页内下拉，点右上角展开） */
.fd-menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.fd-menu-item { padding: 13px 14px; font-size: 14.5px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.fd-menu-item:last-child { border-bottom: none; }
.fd-menu-item:active { background: #f7f9fb; }
.fd-menu-item.danger { color: var(--red); }

/* 持仓 hero：居中「持有金额」+ 指标网格 */
.fd-hero { border-radius: var(--radius); padding: 18px 14px 16px; color: #fff; background: linear-gradient(135deg, var(--fund-l), var(--fund)); margin-bottom: 15px; box-shadow: 0 14px 30px -12px rgba(138, 102, 150, .5); }
.fd-hero .fd-amt-k { text-align: center; font-size: 12.5px; opacity: .92; }
.fd-hero .fd-amt-v { text-align: center; font-size: 36px; font-weight: 700; line-height: 1.2; margin: 4px 0 14px; letter-spacing: -.5px; }
.fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 4px; }
.fd-cell { text-align: center; min-width: 0; }
.fd-cell .fc-k { font-size: 11.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-cell .fc-v { font-size: 14.5px; font-weight: 600; margin-top: 3px; line-height: 1.3; }
/* 青色卡上的涨跌用浅色调保证对比度（红涨绿跌，负数不再用白色糊过去） */
.fd-hero .fc-v.up { color: #ffb3a7; }
.fd-hero .fc-v.down { color: #7ae3ad; }
/* hero 主数字下方的持仓摘要小字行（1,420 股 · 均价 10.21） */
.fd-hero .fd-sub { text-align: center; font-size: 12px; opacity: .9; margin: -11px 0 14px; }
/* ?v=72 hero 分层：收益组（大字）→ 细分割线 → 基础数据组（更小更淡） */
.fd-hero .fd-pnl .fc-k { font-size: 12.5px; opacity: .95; }
.fd-hero .fd-pnl .fc-v { font-size: 16px; font-weight: 700; margin-top: 4px; }
.fd-hero-split { height: 1px; background: rgba(255, 255, 255, .24); margin: 13px 0 11px; }
.fd-hero .fd-base { gap: 10px 4px; }
.fd-hero .fd-base .fc-k { font-size: 11px; opacity: .78; }
.fd-hero .fd-base .fc-v { font-size: 13px; font-weight: 500; opacity: .92; margin-top: 2px; }

/* 可点开的分段标题（详情页「更多明细」） */
.fd-sec.fd-toggle { cursor: pointer; }
.fd-sec.fd-toggle:active { opacity: .7; }

/* 买入 / 卖出 操作条 */
.fd-acts { display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.fd-acts button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: none; padding: 13px 0; min-height: 48px; font-size: 15.5px; font-weight: 600; color: var(--fg); cursor: pointer; }
.fd-acts button:active { background: #f7f9fb; }
.fd-acts .fd-sep { width: 1px; background: var(--line); margin: 12px 0; }
.fd-ico { width: 18px; height: 18px; }
/* ?v=72 操作条：并排胶囊，「买入」主色实心 /「卖出」浅底次色，不再用白卡 + 左右分割线 */
.fd-acts { background: none; border: none; box-shadow: none; overflow: visible; gap: 10px; padding: 2px 0; margin: 0 0 14px; }
.fd-acts .fd-act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 8px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; }
.fd-acts .fd-act-buy { background: var(--accent); color: #fff; box-shadow: 0 10px 20px -10px rgba(138, 102, 150, .75); }
.fd-acts .fd-act-buy:active { background: var(--accent-d); }
.fd-acts .fd-act-sell { background: var(--accent-soft); color: var(--accent); border: 1px solid #cddffa; }
.fd-acts .fd-act-sell:active { background: #e6d7ec; }

/* 分段小标题（左标题 / 右说明） */
.fd-sec { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; margin: 2px 2px 8px; }

/* 交易记录卡片：左「买入 + 日期·份额」右「金额 + 付款账户」 */
.fd-rec { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: pointer; }
.fd-rec:active { opacity: .8; }
.fd-rec .fd-rec-l { min-width: 0; flex: 1 1 auto; }
.fd-rec .fr-t { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 15.5px; font-weight: 600; color: var(--fund); }
.fd-rec .fr-d { flex: 1 0 100%; order: 3; font-size: 12px; color: var(--muted); margin-top: 6px; }
.fd-rec .fd-rec-r { flex: none; text-align: right; }
.fd-rec .fr-a { font-size: 17px; font-weight: 700; }
.fd-rec .fr-a-sub { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.fd-rec .fr-s { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* ?v=72 交易类型徽标：买入浅红 / 卖出浅蓝 / 分红浅绿 / 拆分转托管中性灰 */
.fd-pill { display: inline-block; flex: none; font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 1px 9px; border-radius: 999px; margin-right: 2px; }
.fd-pill.p-buy { background: #fdecec; color: var(--red); }
.fd-pill.p-sell { background: #e9f0ff; color: var(--accent); }
.fd-pill.p-div { background: #e8f7ee; color: var(--green); }
.fd-pill.p-misc { background: #f0f3f8; color: var(--muted); }
.fd-rec .fr-x { font-size: 13.5px; font-weight: 500; color: var(--fg); }

/* ?v=72 持仓明细：行距收紧 + 细分割线 + 交替底色，卡片不再冗长 */
.fd-rows { padding: 2px 0 0; }
.fd-rows .row { padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.fd-rows .row:last-child { border-bottom: none; }
.fd-rows .row:nth-child(odd) { background: #f8fafd; }
/* 持有时长：右侧「88 天」与「首次 2026/06/26」两列右对齐 */
.fd-dur-row .v { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
.fd-dur-v { font-weight: 700; }
.fd-dur-s { font-size: 12.5px; font-weight: 400; color: var(--muted); }

/* ?v=72 净值走势：区间 Tab + 渐变填充 + 图例 */
.fd-navtabs { display: flex; gap: 6px; margin: 0 0 12px; }
.fd-navtab { flex: 1; min-width: 0; padding: 7px 0; font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.fd-navtab.active { background: var(--accent-soft); border-color: #cddffa; color: var(--accent); font-weight: 600; }
.fd-navtip { font-size: 11.5px; margin-top: 2px; }
.fd-nav-empty { margin: 6px 0; }
.fd-navlg { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.fd-navlg .nl { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.fd-navlg .nl b { display: block; font-size: 14px; color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 区间涨跌：红涨绿跌（.up/.down 挂在 .nl 上，数字要跟着上色） */
.fd-navlg .nl.up b { color: var(--red); }
.fd-navlg .nl.down b { color: var(--green); }
.fd-navlg .nl em { font-style: normal; margin-left: 3px; font-size: 11px; color: var(--muted-2); }
.fd-navlg .nl .nl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 4px; }

/* 列表卡片：左「名称 + 代码·净值」右「持有金额 + 当日收益」 */
.fd-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: pointer; }
.fd-li:active { opacity: .8; }
.fd-li .fd-li-l { min-width: 0; }
.fd-li .fl-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-li .fl-code { font-size: 12px; color: var(--muted); margin-top: 3px; }
.fd-li .fd-li-r { flex: none; text-align: right; }
.fd-li .fl-amt { font-size: 16px; font-weight: 700; }
.fd-li .fl-sub { font-size: 12px; margin-top: 3px; }

/* ---------------- 理财首页：汇总看板 + 功能卡片网格 ----------------
   理财页由「七个平铺 tab」改成两层导航：
   首页 = 顶部汇总看板 + 四张功能卡片（基金/股票/定存/贷款），点卡片进二级页。 */
.dash-hero {
  border-radius: var(--radius); padding: 20px 18px 16px; color: #fff;
  background: linear-gradient(150deg, var(--accent-l), var(--accent) 58%, var(--accent-d));
  box-shadow: 0 10px 26px -10px rgba(138, 102, 150, .55);
  margin-bottom: 14px;
}
.dash-hero .dh-k { font-size: 13px; opacity: .88; }
.dash-hero .dh-v {
  font-size: 32px; font-weight: 700; letter-spacing: -.8px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.dash-hero .dh-sub { display: flex; gap: 22px; margin-top: 12px; }
.dash-hero .dh-sub > div { flex: 1; min-width: 0; }
.dash-hero .dh-k2 { font-size: 12px; opacity: .82; }
/* 看板里的数字统一纯白：蓝底上染红绿反而看不清，涨跌色交给下方列表与卡片 */
.dash-hero .dh-v2 { font-size: 16.5px; font-weight: 600; margin-top: 2px; color: #fff; font-variant-numeric: tabular-nums; }
.dash-hero .dh-line {
  margin-top: 12px; padding-top: 10px; font-size: 12px; opacity: .86;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.fin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fin-card {
  background: var(--card); border-radius: var(--radius-sm); padding: 14px 14px 13px;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fin-card:active { transform: scale(.975); box-shadow: var(--shadow); }
.fin-card .fc-ico {
  width: 32px; height: 32px; border-radius: 11px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
}
.fin-card .fc-ico svg {
  width: 18px; height: 18px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.fin-card .fc-k { font-size: 14px; font-weight: 600; }
.fin-card .fc-v { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.fin-card .fc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 卡片图标底色：四色低饱和，柔和但不雷同 */
.fin-card.fc-funds .fc-ico { background: var(--accent-soft); color: var(--accent); }
.fin-card.fc-stock .fc-ico { background: #eeefff; color: #5b5bd6; }
.fin-card.fc-deposit .fc-ico { background: #e9f8f0; color: var(--green); }
.fin-card.fc-loan .fc-ico { background: #fdf3e6; color: var(--warn); }

/* 基金页内的「定投计划」子功能入口（定投不再是理财一级 tab） */
.fin-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.fin-entry:active { opacity: .8; }
.fin-entry .fe-main { min-width: 0; }
.fin-entry .fe-main .muted2 { margin-top: 2px; font-size: 12px; }

/* ---------------- 通用页面 Hero（?v=36） ----------------
   把理财看板的「渐变大卡」升级为全站一级页的页面语言：首页 / 资产 / 统计 顶部各一张，
   承载该页最先要看到的指标。与 .dash-hero 视觉同源但独立成块，理财页样式不受影响。
   蓝底上一律白字：染红绿反而看不清，涨跌色交给下方列表与卡片（与 .dash-hero 同口径）。 */
.hero {
  border-radius: var(--radius); padding: 20px 18px 16px; color: #fff;
  background: linear-gradient(150deg, var(--accent-l), var(--accent) 58%, var(--accent-d));
  box-shadow: 0 10px 26px -10px rgba(138, 102, 150, .55);
  margin-bottom: 14px;
}
.hero .hero-k { font-size: 13px; opacity: .88; }
.hero .hero-v {
  font-size: 32px; font-weight: 700; letter-spacing: -.8px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hero .hero-sub { display: flex; gap: 22px; margin-top: 12px; }
.hero .hero-sub > div { flex: 1; min-width: 0; }
.hero .hero-k2 { font-size: 12px; opacity: .82; }
.hero .hero-v2 { font-size: 16.5px; font-weight: 600; margin-top: 2px; color: #fff; font-variant-numeric: tabular-nums; }
.hero .hero-line {
  margin-top: 12px; padding-top: 10px; font-size: 12px; opacity: .86;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero .hero-line b { font-weight: 600; }

/* 账本汇总头部层级重构（?v=68 问题1）：本月结余为主指标（沿用 .hero-v 32px），
   本月收入/支出降为次要小字避免抢焦点，净资产独立成清晰可读的一行（带标签，不再 12px 挤边缘）。
   仅作用于账本首页的 .ledger-hero，不影响资产/理财页通用的 .hero。 */
.ledger-hero .lh-stats { display: flex; gap: 18px; margin-top: 14px; }
.ledger-hero .lh-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ledger-hero .lh-k { font-size: 12px; opacity: .82; }
.ledger-hero .lh-v {
  font-size: 15px; font-weight: 600; margin-top: 3px; color: #fff;
  font-variant-numeric: tabular-nums; opacity: .95;
}
.ledger-hero .lh-net {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.ledger-hero .lh-net .lh-k { font-size: 13px; font-weight: 600; opacity: .92; }
.ledger-hero .lh-net-v {
  font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}

/* 列表行首字头像：流水/账户这类没有图标位的地方，用首字色块补齐「图标化」 */
.li-av {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
/* ?v=71 转账行头像改成方向箭头（→ 转出 / ← 转入），比原来的「转」字更直观 */
.li-av.tx-dir { font-size: 17px; }

/* 「我的」页功能入口：复用理财页的两列图标卡（.fin-cards / .fin-card）
   ?v=151：原「截图记账」入口卡随功能下线移除，此处不再有 pc-shot 配色 */
.fin-card.pc-rule .fc-ico { background: #fdf3e6; color: var(--warn); }
.fin-card.pc-cat .fc-ico { background: #e9f8f0; color: var(--green); }
.fin-card.pc-about .fc-ico { background: #f3eefe; color: #7c5cf0; }

/* 首页「固定流程」入口：山姆代购 / 闲置出售并排一行（一张卡两个可点区域，中间细分隔线）。
   行内复用 .sub-entry + .li-av + .mi-main/.mi-title/.mi-sub，只是把字号压小、副标题单行省略。 */
.sub-row { display: flex; align-items: stretch; padding: 3px 0; }
.sub-row .sub-entry {
  flex: 1 1 0; min-width: 0; gap: 9px; padding: 8px;
  border-radius: var(--radius-xs);
}
.sub-row .sub-entry + .sub-entry { border-left: 1px solid var(--line); }
.sub-row .sub-entry:active { background: var(--line-2); opacity: 1; }
.sub-row .li-av { width: 32px; height: 32px; border-radius: 11px; font-size: 13px; }
.sub-row .mi-title { font-size: 14.5px; }
.sub-row .mi-sub {
  margin-top: 1px; font-size: 11.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- 账本筛选条（?v=45：类型 / 模式 / 一级 / 二级；?v=53 重排版式） ----------------
   类型＝固定四等分的分段控件（同 .cat-seg 视觉，白底滑块 + 主色字）。
   分类区（?v=53 起）＝**每行都由「定宽小标 + chip 容器」组成**，行首对齐、折行缩进：
     分类  [只看|排除] ┃ 全部分类        ← 维度头；类型已限定时一级 chip 也排在这一行
     支出  代购 购物 餐饮 …
     收入  代购 代购回馈金 理财 工资
     细分  全部 外卖
   **为什么分组**：「代购」「理财」在支出树与收入树各有一条同名一级，平铺就是两个长得一样、
   点哪个都不知道的 chip（用户截图里「代购」「理财」各出现两次即此）。按 kind 分两组 + 行首小标
   才能一眼分辨。分组只在类型=全部时出现，选了支出/收入就只剩一行，总高度与旧版持平。
   **为什么模式要独立配色**：「只看 / 排除」是修饰分类的开关，旧版与 chip 同为「浅底 + 主色字」，
   三个蓝字连成一片分不清谁是开关谁是筛选项；现在开关走**实心主色 + 白字**。
   **分类行一律 flex-wrap 换行，不再横向滚动** —— ?v=44 把「一级/二级」拼成一个 chip 横向铺开，
   分类一多就长到屏幕外且滑不到头（用户截图反馈的问题）。
   排除模式的一级 chip 走红系（.ex.active）表达「把这类去掉」。
   `.lf-cats` 只在真有分类可选时渲染（转账没有分类，直接整行省略）。 */
.ledger-filter { margin: 0 0 10px; }
/* 筛选条自己也放进白卡片（?v=53）：`.lf-*` 的浅灰表面（分段轨道 / chip 底 #f0eaf3）与页面底色
   --bg(#f1f4fa) 几乎同色 —— 直接画在底色上时轨道整个消失、选中白块像凭空浮着，chip 也化成一圈虚影。
   这是「这里也很丑」的主因，不是配色问题。 */
.lf-card { padding: 14px 14px 12px; }
.lf-card .ledger-filter { margin-bottom: 0; }
.lf-types { display: flex; gap: 6px; background: #f0eaf3; border-radius: var(--radius-sm); padding: 4px; flex: 1 1 0; min-width: 0; margin-bottom: 10px; }
/* 类型分段 + 筛选按钮同一行（?v=68 问题3）：类型占满剩余宽度，筛选按钮贴右 */
.lf-bar { display: flex; align-items: center; gap: 8px; }
.lf-filter-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px;
  padding: 0 12px; border: none; border-radius: 999px; background: #f0eaf3; color: var(--fg);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.lf-filter-btn:active { background: #e2e7f0; }
.lf-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 分类维度默认折叠（?v=68）：DOM 始终保留供无头守卫断言，仅视觉隐藏；点「筛选」加 .open 展开。
   展开后一级/二级 chip 单行横向滚动，不再多行换行挤占高度（问题3 的「横向滚动」方案）。 */
.lf-panel { display: none; margin-top: 10px; }
.lf-panel.open { display: block; }
.lf-panel .lf-box { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lf-panel .lf-box::-webkit-scrollbar { display: none; }
.lf-types .lf-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0 6px; min-height: 34px; border-radius: 9px;
  color: var(--muted); cursor: pointer; font-size: 13.5px; font-weight: 500; font-family: inherit;
  transition: background .15s, color .15s;
}
.lf-types .lf-btn.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }
.lf-cats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 10px; }
/* 行首小标（支出 / 收入 / 细分）：定宽定高 ⇒ 各行左边缘对齐，且与首行 chip 同高居中。
   必须 flex-start 对齐：`.lf-box` 折成两行时，居中对齐会把「只看/排除」推到两块 chips 的正中间。 */
.lf-lead { flex: 0 0 auto; display: flex; align-items: center; height: 30px; width: 30px; color: var(--muted-2); font-size: 11.5px; }
/* chip 容器自带换行 ⇒ 折行后对齐到首枚 chip，而不是回到行首、跑到小标下方去 */
.lf-box { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 「只看 / 排除」是作用在分类上的开关、不是分类本身：实心主色 + 白字，与「浅底 + 主色字」的 chip 拉开 */
.lf-modes { flex: 0 0 auto; display: inline-flex; gap: 2px; background: #f0eaf3; border-radius: 15px; padding: 2px; }
.lf-modes .lf-mode {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: none; background: none; border-radius: 13px; color: var(--muted);
  font-size: 12px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.lf-modes .lf-mode.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(138, 102, 150, .28); }
/* 竖线：行内 flex-start 对齐，靠 margin 把自己压到首行 chip 的垂直中心（(30-16)/2 = 7） */
.lf-div { flex: 0 0 auto; width: 1px; height: 16px; margin-top: 7px; background: var(--line); }
.lf-cats .lf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  border: none; border-radius: 15px; background: #f0eaf3; color: var(--muted);
  font-size: 12.5px; line-height: 1; font-family: inherit; cursor: pointer;
}
.lf-cats .lf-chip.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* 排除模式：选中的一级 = 要从列表里去掉的那类（inset 阴影描边，不动盒模型高度） */
.lf-cats .lf-chip.ex { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lf-cats .lf-chip.ex.active { background: #fdecec; color: var(--red); font-weight: 600; box-shadow: inset 0 0 0 1px #f6c9c9; }
/* 分组行（支出 / 收入）：跟在分类维度头下面，行距略小于头行 */
.lf-grp { margin-top: 8px; }
/* 二级行：字号略小，跟一级行拉开层级 */
.lf-subrow { margin-top: 8px; }
.lf-subrow .lf-chip { height: 27px; padding: 0 10px; font-size: 12px; }
.lf-clear {
  margin-top: 10px; height: 32px; padding: 0 16px; border: none; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
/* ---------------- 时间档位 + 关键字搜索（?v=80） ----------------
   这一行**常驻可见、不折进「筛选」面板**：用户报的就是「流水不全、想找的找不到」，
   藏进二级面板等于没有。四档时间沿用分类 chip 同一套视觉（浅底胶囊 + 选中主色），
   高度 28px 比分类 chip 矮 2px —— 它是「范围」不是「维度」，不该抢分类的层级。
   搜索框吃掉剩余宽度，min-width 118px ⇒ 最窄的 320px 屏也还能敲字。 */
.lf-search { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lf-search .lf-range { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
.lf-search .lf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border: none; border-radius: 14px; background: #f0eaf3; color: var(--muted);
  font-size: 12.5px; line-height: 1; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.lf-search .lf-chip.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lf-input {
  flex: 1 1 118px; min-width: 118px; height: 30px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 15px; background: #fff;
  color: var(--fg); font-size: 13px; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.lf-input::placeholder { color: var(--muted-2); }
/* 搜索框聚焦给主色描边：这一行是「正在搜索」的唯一反馈，必须看得出来 */
.lf-input:focus { outline: none; border-color: var(--accent); }

/* ---------------- 日期时间选择器（?v=52：自绘底部面板，替掉系统原生弹出层） ----------------
   原生 `input[type=date|month|time|datetime-local]` 点开的面板在浏览器 shadow DOM 里，
   CSS 完全改不动；Chromium 还给它配了个黑色「小方格」图标，跟全站柔和主色 + 大圆角不搭。
   做法：原生 input 仍是**唯一的取值载体**（id / value / change 语义不变），
   只把它变成浅蓝「显示框」，上面盖一层 .dp-tap 接管点击 ⇒ 系统面板永不弹出。
   注意 `.dp-w .dp-in`(0,2,0) 必须压过上面 `input[type="date"]`(0,1,1) 的 appearance:auto，
   那条原生规则原样保留：JS 没跑到时 input 仍是百分之百的原生日期控件（优雅降级）。
   ?v=55 起面板顶栏右侧多了键盘按钮：切到 `.dp-text` 直接手敲（选 / 敲两条路都通）。
   ?v=58 起**点字段本身就是就地敲**（`.dp-live` 盖在字段原位上），要「挑」日期才点右侧的 `.dp-cal`。 */
.dp-w { position: relative; margin-bottom: 12px; }
.dp-w .dp-in {
  width: 100%; margin-bottom: 0; padding-right: 42px;
  -webkit-appearance: none; appearance: none;
  background: var(--accent-soft); border-color: transparent;
  color: var(--accent-d); font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;            /* 点击一律落到 .dp-tap */
}
.dp-w .dp-in:focus { border-color: transparent; box-shadow: none; }
/* 关掉 Chromium 自带的黑色小方格（下面 ::after 换成同主色的日历图标） */
.dp-w .dp-in::-webkit-calendar-picker-indicator { display: none; }
.dp-w .dp-in::-webkit-datetime-edit { padding: 0; }
.dp-w .dp-in::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.dp-w::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  pointer-events: none; background-repeat: no-repeat; background-size: 18px 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6696' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='3.4'/%3E%3Cpath d='M8 3.2v3.6M16 3.2v3.6M3.2 10.2h17.6'/%3E%3C/svg%3E");
}
.dp-w .dp-tap {
  position: absolute; left: 0; right: 42px; top: 0; bottom: 0; width: auto; margin: 0; padding: 0;
  border: none; background: none; border-radius: var(--radius-xs); cursor: pointer;
  font-family: inherit; color: inherit;
}
.dp-w .dp-tap:active { background: rgba(138, 102, 150, .07); }

/* ?v=58 就地输入：点字段不再弹面板，而是原位放一个同样式的文本框并聚焦。
   底层的原生 input 只留胶囊底色，文字交给 .dp-live —— 两者的字号/行高/内边距都来自
   同一条全局 `input` 规则，所以进出编辑态时文字不会跳位；输入框自身透明，焦点环
   由 `input:focus` 的 box-shadow 提供，看起来就像胶囊被选中了。 */
.dp-w.live .dp-in { color: transparent; }
.dp-w .dp-live {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2;
  width: auto; margin: 0; padding-right: 42px;
  border-color: transparent; background: none;
  color: var(--accent-d); font-weight: 600; font-variant-numeric: tabular-nums;
  caret-color: var(--accent-d);
}
.dp-w .dp-live.bad { background: #fdecec; color: var(--red); box-shadow: inset 0 0 0 1px #f6c9c9; }
/* 右侧日历按钮：只接管图标那一小块（图标本身仍是 .dp-w::after 画的，鼠标点击穿不过去） */
.dp-w .dp-cal {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 3; width: 42px;
  margin: 0; padding: 0; border: none; background: none; border-radius: var(--radius-xs);
  cursor: pointer; font-family: inherit; color: inherit;
}
.dp-w .dp-cal:active { background: rgba(138, 102, 150, .10); }

/* 底部面板：z 高于 .modal(40)/.login(50)，低于 .toast(60)，弹层里的日期控件也能正常唤出 */
.dp-mask { position: fixed; inset: 0; z-index: 56; background: rgba(15, 23, 42, .40); opacity: 0; transition: opacity .2s; }
.dp-mask.on { opacity: 1; }
.dp-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 57;
  width: min(100%, var(--wrap)); padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg);
  transform: translateX(-50%) translateY(105%);
  transition: transform .26s cubic-bezier(.22, .9, .28, 1);
}
.dp-sheet.on { transform: translateX(-50%) translateY(0); }
.dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dp-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.dp-nav {
  flex: none; width: 34px; height: 34px; padding: 0; border: none; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; cursor: pointer;
}
.dp-nav:active { background: #e6d7ec; }
.dp-nav svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.dp-week span { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--muted-2); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-d {
  height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 12px; font-size: 15px; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
}
.dp-d.out { color: var(--muted-2); }
.dp-d.today { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.dp-d.sel { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(138, 102, 150, .75); }
.dp-d:active { background: #e6d7ec; }
.dp-d.sel:active { background: var(--accent-d); }
/* 月份模式：3×4 网格 */
.dp-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-m {
  height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--radius-xs); background: var(--line-2); font-size: 15px;
  -webkit-user-select: none; user-select: none;
}
.dp-m.today { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.dp-m.sel { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(138, 102, 150, .75); }
.dp-m:active { background: #e6d7ec; }
/* 时间行（datetime-local 内嵌 / time 整页） */
.dp-time { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.dp-time > label { flex: none; font-size: 12.5px; color: var(--muted); }
.dp-time select { flex: 1 1 0; width: auto; margin-bottom: 0; padding: 9px 30px 9px 12px; font-size: 15px; }
.dp-colon { flex: none; color: var(--muted-2); font-weight: 700; }
.dp-now {
  flex: none; height: 38px; padding: 0 12px; border: none; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.dp-time-lg { justify-content: center; margin-top: 4px; padding-top: 0; border-top: none; }
.dp-time-lg select { flex: 0 0 104px; font-size: 22px; font-weight: 700; text-align: center; }
.dp-quick { display: flex; gap: 8px; margin-top: 12px; }
.dp-quick button {
  flex: 1 1 0; min-width: 0; padding: 10px 4px; border: none; border-radius: var(--radius-xs);
  background: var(--line-2); color: var(--muted); font-size: 13px; font-family: inherit; cursor: pointer;
}
.dp-quick button:active { background: var(--accent-soft); color: var(--accent); }
.dp-foot { display: flex; gap: 8px; margin-top: 12px; }
.dp-foot .btn { flex: 1 1 0; }

/* 手动输入态（?v=55）：顶栏右侧键盘按钮切进来，直接敲 2026-09-24 / 2026/9/24 / 20260924。
   .dp-nav.ghost 是占位（保留宽度、不显示），让「手动输入」标题严格居中。 */
.dp-nav.ghost { visibility: hidden; }
.dp-text {
  width: 100%; height: 52px; margin: 0; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  -webkit-appearance: none; appearance: none;
  background: var(--accent-soft); color: var(--accent-d);
  font-family: inherit; font-size: 20px; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.dp-text::placeholder { color: var(--muted-2); font-weight: 500; letter-spacing: 0; }
.dp-text:focus { border-color: transparent; box-shadow: var(--ring); }
.dp-text.bad { background: #fdecec; color: var(--red); box-shadow: inset 0 0 0 1px #f6c9c9; }
.dp-tip { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.dp-err { margin-top: 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--red); }

/* ==================== 账本筛选栏两行布局 + 时间按钮 + 漏斗（?v=85） ==================== */
/* 行1 = 类型四选一（.lf-types，沿用旧样式）。
   行2 = .lf-bar2：左侧时间选择按钮 → 中部搜索框拉长占剩余 → 右侧漏斗（高级筛选）。
   旧版 [本周][本月][本年][全部] 时间 chips 与右侧突兀的「筛选」大按钮已删除，
   时间选择统一收进单个按钮 + 底部 Bottom Sheet（见下方 .range-sheet）。 */
.lf-bar2 { display: flex; align-items: center; gap: 8px; }
/* 让搜索框在行2里吃掉剩余宽度（原始 .lf-search 只管 display:flex，这里补 flex 占比与去顶距） */
.lf-bar2 .lf-search { flex: 1 1 0; min-width: 0; margin-top: 0; }
/* 时间选择按钮：软灰药丸，常驻可见，点开 Bottom Sheet 选 周/月/年/全部 */
.lf-time {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  max-width: 56%; height: 30px; padding: 0 12px; border: none; border-radius: 15px;
  background: #f0eaf3; color: var(--fg); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.lf-time:active { background: var(--accent-soft); color: var(--accent); }
.lf-time .caret { flex: none; font-size: 10px; color: var(--muted-2); margin-left: 1px; }
/* 漏斗（高级筛选：分类 / 账户）；active 态用主色提醒「当前挂着筛选」 */
.lf-gear {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: none; border-radius: 15px;
  background: #f0eaf3; color: var(--muted); font-size: 16px; line-height: 1;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lf-gear:active { background: #e2e7f0; }
.lf-gear.active { background: var(--accent-soft); color: var(--accent); }

/* ==================== 骨架屏（?v=85）：按新时间重算时卡片/列表给加载反馈 ==================== */
.skeleton { position: relative; overflow: hidden; background: var(--line-2); border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: sk-shimmer 1.2s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
/* 蓝色汇总卡上的骨架：基础色转半透明白，shimmer 也用白，读起来像在蓝卡上加载 */
.ledger-hero .skeleton { background: rgba(255, 255, 255, .20); }
.ledger-hero .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); }
.sk-k { height: 13px; width: 46%; border-radius: 6px; }
.sk-v { height: 34px; width: 62%; margin-top: 10px; border-radius: 10px; }
.sk-s { height: 24px; width: 72%; border-radius: 8px; }
.sk-net { height: 20px; width: 54%; margin-top: 14px; border-radius: 7px; }
.sk-list { display: block; }
.sk-row { padding: 14px 16px; }
.sk-row .sk-line { height: 16px; width: 80%; border-radius: 6px; }
/* 结余为负的红色提示（蓝图卡上用偏亮的红，保证可读） */
.ledger-hero .hero-v.neg { color: #ff9a9d; }

/* ==================== 时间选择 Bottom Sheet（?v=85 方案B） ==================== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 56; background: rgba(15, 23, 42, .40);
  opacity: 0; transition: opacity .2s;
}
.sheet-backdrop.show { opacity: 1; }
.range-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 57;
  width: min(100%, var(--wrap)); max-height: 78vh;
  display: flex; flex-direction: column;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%) translateY(105%);
  transition: transform .26s cubic-bezier(.22, .9, .28, 1);
}
.range-sheet.show { transform: translateX(-50%) translateY(0); }
.sheet-head { padding: 10px 0 8px; border-bottom: 1px solid var(--line-2); }
/* 修正（?v=87）：原为 flex: 1 1 0，而 .range-sheet 高度是「内容撑开」（height:auto，
   仅 max-height:78vh 封顶）——flex-basis:0 让 body 的假设主尺寸变成 0；又因它是滚动容器
   （overflow-y:auto），自动最小尺寸按规范取 0，于是 body 被压成只剩上下 padding（实测 h=24px、
   内容盒为 0），年/月/周的选择格子全部被裁掉 —— 线上表现就是「时间筛选里什么都看不到」。
   改为 flex-basis:auto（假设主尺寸=内容高度，弹窗高度随内容走）+ min-height:0（内容超高时
   允许收缩，让 78vh 封顶后正常滚动）。*/
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 0; -webkit-overflow-scrolling: touch; }
.sheet-foot { display: flex; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.sheet-cancel, .sheet-confirm {
  flex: 1; height: 44px; border: none; border-radius: var(--radius-xs);
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.sheet-cancel { background: var(--line-2); color: var(--muted); }
.sheet-cancel:active { background: #e2e7f0; }
.sheet-confirm { background: var(--accent); color: #fff; }
.sheet-confirm:active { background: var(--accent-d); }

/* 分段控制器 [全部|按周|按月|按年] */
.seg { display: flex; gap: 4px; background: #f0eaf3; border-radius: 15px; padding: 4px; }
.seg button {
  flex: 1; height: 32px; border: none; border-radius: 11px; background: transparent;
  color: var(--muted); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* 选择器主体（年 / 月 / 周），按粒度动态渲染 */
.rs-hint { text-align: center; color: var(--muted-2); font-size: 14px; padding: 26px 0; }
.rs-grid { display: grid; gap: 8px; }
.rs-year { grid-template-columns: repeat(3, 1fr); }
.rs-month { grid-template-columns: repeat(4, 1fr); }
.rs-week { grid-template-columns: repeat(2, 1fr); }
.rs-cell {
  height: 46px; border: none; border-radius: var(--radius-xs);
  background: var(--line-2); color: var(--fg); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.rs-cell:active { background: #e2e7f0; }
.rs-cell.active { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(138, 102, 150, .75); }
.rs-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.rs-nav button {
  width: 34px; height: 34px; padding: 0; border: none; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent); font-size: 18px; font-family: inherit; cursor: pointer;
}
.rs-nav button:active { background: #e6d7ec; }
.rs-yr { font-size: 16px; font-weight: 700; min-width: 72px; text-align: center; }

/* ================== 启动兜底面板（?v=94） ==================
   #bootError 由 app.js 的全局错误处理揭开（脚本抛错 / 视图函数缺失 / 反复加载失败）；
   <noscript> 里那份只在 JS 不可用时渲染。两者共用这套样式：
   全屏、与登录层同色系，保证「打不开」的时候至少看得懂、点得动。
   .hidden 带 !important，所以默认那份不会被这里的 display:flex 顶掉。 */
.boot-err {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(155deg, #3a2f41, var(--accent-d) 45%, var(--accent) 100%);
}
.boot-card {
  width: 100%; max-width: 340px; text-align: center; color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius); padding: 26px 22px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.boot-card h1 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.boot-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .84); }

/* ================== 宽屏 / 矮视口适配（?v=94） ==================
   先把现状说清楚：内容早就由 --wrap(720px) 居中收口（.view 与 .tabbar 都用它），
   所以「iPad 竖屏被拉满挤压」并不成立，缺的是**矮视口**——手机横屏只有约 380px 高，
   而弹窗贴底 + 88vh 上限 + 底部留白都按竖屏算，横屏时可用高度只剩一半。

   另一件事**有意不做**：把 194 处 px 字号改 rem。viewport 里 maximum-scale=1 已经
   关掉系统字体缩放，rem 的唯一收益（跟随浏览器字号偏好）根本不生效，
   只会换来一次覆盖全文件的机械 diff 和一堆护栏断言重写。真要调字号，改
   --wrap 收窄后的视觉密度即可（见下面 640px 断点）。 */
@media (min-width: 640px) {
  /* 平板/桌面：720px 的卡片列在宽屏上横向过长（行长超 90 字符读起来累），收到 560px */
  :root { --wrap: 560px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  /* 手机横屏：整体降一档密度，优先保证「一屏能看到内容」而不是「一屏看到卡片」 */
  :root { --tab-h: 54px; --radius: 18px; --radius-sm: 14px; --radius-xs: 10px; }
  .view { padding-top: 8px; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 16px); }
  .modal-box { max-height: 94vh; max-height: 94dvh; padding-top: 16px; }
  .boot-card { padding: 18px 16px; }
  .boot-card h1 { font-size: 17px; }
}

/* ================== 门户首页（?v=95） ==================
   `/` 现在是「锁屏 + 模块宫格」，记账 SPA 挪到 `/ledger`。
   门户只引 app.css + home.js（不引 app.js / views.js），所以这里的样式**自成一档**：
   一律用 :root 变量 + 通用类（.login / .boot-err / .btn-primary 直接复用），
   不得依赖记账页才有的类名，否则门户会「没样式」。 */
.home {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0) + 26px) 16px calc(env(safe-area-inset-bottom, 0) + 26px);
}
.home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-hi { margin: 0; font-size: 25px; letter-spacing: -.4px; }
.home-date { margin: 5px 0 0; font-size: 13px; }
.home-out {
  flex: none; width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--card); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.home-out svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.home-out:active { background: var(--line-2); }

/* 宫格：手机 2 列（卡片够大、好点），宽屏 3 列（避免大屏上两列被拉得又宽又空） */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  min-height: 118px; padding: 18px 16px;
  border: none; border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
  transition: transform .12s, box-shadow .15s;
}
.tile:active { transform: translateY(1px); }
.tile-ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--accent-soft); color: var(--accent);
}
.tile-ico svg {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tile-tx { display: flex; flex-direction: column; gap: 3px; }
.tile-lb { font-size: 16.5px; font-weight: 600; color: var(--fg); }
.tile-desc { font-size: 12px; line-height: 1.45; color: var(--muted); }
/* 未上线模块：不可点 + 降饱和 + 虚线框，一眼区分「还不能进」，
   杜绝「点进去 404」——列表在 home.js 的 MODULES 里维护 */
.tile.soon { cursor: default; background: #f7f9fd; border: 1px dashed var(--line); box-shadow: none; }
.tile.soon:active { transform: none; }
.tile.soon .tile-ico { background: var(--line-2); color: var(--muted-2); }
.tile.soon .tile-lb { color: var(--muted); }

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (orientation: landscape) and (max-height: 560px) {
  /* 手机横屏：宫格两列横排，密度降一档，优先保证一屏看到全部入口 */
  .home { padding-top: calc(env(safe-area-inset-top, 0) + 16px); }
  .home-top { margin-bottom: 14px; }
  .tile { min-height: 92px; padding: 14px 14px; gap: 10px; }
  .tile-ico { width: 34px; height: 34px; border-radius: 11px; }
  .tile-ico svg { width: 19px; height: 19px; }
}

/* ===================================================================
   饮品打卡（?v=96 独立模块，复用 app.js 内核，不引 views.js）
   仅追加样式；圆角只用既有 12 / 16，不引入新圆角数值（圆角快照约束）。
   =================================================================== */
/* 饮品（?v=97 四 Tab：记录 / 标签 / 日历 / 我的） */
.drink { max-width: var(--wrap); margin: 0 auto; padding: 14px 14px 84px; }

.drink-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.drink-top h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.drink-back { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 13.5px; cursor: pointer; }
.drink-back:active { transform: scale(.97); }

.drink-month { display: flex; align-items: center; gap: 10px; }
.drink-month #mLabel { font-size: 15px; font-weight: 600; min-width: 96px; text-align: center; }
.mch { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--fg); font-size: 16px; cursor: pointer; }
.mch:active { transform: scale(.94); }

/* 汇总卡 */
.drink-sum { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 14px; }
.ds-row { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.ds-l { font-size: 13px; color: var(--muted); }
.ds-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-v.warn { color: var(--red); }
.ds-sub { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }

/* 今日饮水统计条 */
.water-bar { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 14px; }
.wb-head { display: flex; align-items: baseline; justify-content: space-between; }
.wb-t { font-size: 13px; color: var(--muted); }
.wb-n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wb-track { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.wb-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.wb-btns { display: flex; gap: 8px; }
.wb-add { flex: 1; padding: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; }
.wb-add:active { background: var(--accent-soft); color: var(--accent-d); }
.img-prev { margin-top: 6px; }
.img-prev img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }

/* 记录列表 - 热敏小票风格 */
.drink-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.dcard { position: relative; display: flex; flex-direction: column; background: #F4F6F9; color: #243042; border: 1px solid #E4E9F0; border-radius: 4px; padding: 8px 8px 9px; box-shadow: 1px 1px 0 rgba(30,40,60,0.05); cursor: pointer; height: 100%; box-sizing: border-box; }

.drc-top { display: flex; align-items: center; justify-content: flex-end; }
.drc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drc-brand { display: flex; align-items: center; }
.drc-logo { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 11px; font-weight: 700; }
.drc-logo svg { display: block; }
.drc-logo-luckin { background: #002B7F; }
.drc-logo-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid #e4e9f0; }

.drc-pick { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; }
.drc-pick-no { font-size: 30px; font-weight: 800; line-height: 1; color: #16202e; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.drc-pick-cup { font-size: 10px; color: #8a93a3; }

.drc-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.2; color: #16202e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.drc-tag { background: #1f3a8a; color: #fff; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 0; font-weight: 600; }

.drc-cust { font-size: 11px; color: #8a93a3; margin-top: 7px; line-height: 1.4; }
.drc-paid { color: var(--accent-d); margin-left: 4px; }

.drc-grid-w { margin-top: 9px; padding-top: 7px; border-top: 1px dashed #d2dae5; }
.drc-grid-t { font-size: 9px; color: #9aa3b2; letter-spacing: .5px; margin-bottom: 3px; }
.drc-grid { display: flex; flex-wrap: wrap; align-items: center; font-size: 9px; color: #8a93a3; }
.drc-gc { white-space: nowrap; }
.drc-gk { font-style: normal; color: #aab2c0; margin-right: 2px; }
.drc-bar { color: #cfd6e0; margin: 0 4px; }

.drc-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 9px; padding-top: 7px; border-top: 1px dashed #d2dae5; }
.drc-time { font-size: 10px; color: #8a93a3; font-variant-numeric: tabular-nums; }
.drc-price { font-size: 13px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.drc-tip { font-size: 8.5px; color: #aab2c0; text-align: right; }

.drink-empty { text-align: center; color: var(--muted-2); font-size: 13.5px; padding: 26px 0; }

/* 底部 Tab */
.drink-tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 20; }
.dtab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.dtab .ic { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.dtab.active { color: var(--accent); }
.dtab.active .ic { background: var(--accent); color: #fff; }

/* 浮动加号 */
.drink-fab { position: fixed; right: 16px; bottom: 70px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 28px; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; z-index: 21; }
.drink-fab:active { transform: scale(.94); }

/* 弹层表单 */
.mf { padding: 4px 2px; }
.mf h3 { margin: 0 0 10px; font-size: 17px; }
.mf label { display: block; font-size: 12.5px; color: var(--muted); margin: 8px 0 3px; }
.mf input, .mf select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: 15px; background: var(--card); color: var(--fg); box-sizing: border-box; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mf-actions { display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-2); z-index: 3; }
/* 通用：所有弹窗（含记账主 app 的 .btn.primary.block、规则的 .btn-row）的保存/操作区常驻底部，
   不再因表单过长而沉到最底、必须滚到底才能操作。 */
.modal-box > .btn-row {
  position: sticky; bottom: 0; z-index: 4;
  background: var(--card);
  padding-top: 12px; margin-top: 16px; margin-bottom: -22px;
  border-top: 1px solid var(--line-2);
}
/* 主按钮直接是 .modal-box 子元素（如「记一笔」保存键）也要常驻底部，
   但必须保留自身蓝底，不能被上面给 .btn-row 的白底规则覆盖成白底白字
   （?v=129 引入 sticky 规则时的回归，?v=136 修）。 */
.modal-box > .btn.primary.block {
  position: sticky; bottom: 0; z-index: 4;
  padding-top: 12px; margin-top: 16px; margin-bottom: -22px;
  border-top: 1px solid var(--line-2);
}
/* 记录详情操作区（?v=142）：把「退款/修改 行 + 删除」整体包成常驻底部容器。
   若删除按钮直接跟在 .btn-row 后，会被上面 .modal-box > .btn-row 的 margin-bottom:-22px
   顶上去、上半截被 sticky 行盖住（只剩一条被裁的红条）——负 margin 改由容器承担。 */
.modal-box > .txn-acts {
  position: sticky; bottom: 0; z-index: 4;
  background: var(--card);
  padding-top: 12px; margin-top: 16px; margin-bottom: -22px;
  border-top: 1px solid var(--line-2);
}
.txn-acts > .btn-row { margin-top: 0; }
.txn-acts > .btn.danger { margin-top: 8px; }
/* 「更多」折叠：默认收起次要字段（门店/取餐码/时间/营养/标签/备注），让首屏一屏可填完 */
.mf-more-btn { display: block; width: 100%; margin-top: 14px; padding: 11px; border: 1px dashed var(--line); border-radius: var(--radius-xs); background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.mf-more { margin-top: 12px; }
.mf-more.hidden { display: none; }
.btn-primary { flex: 1; padding: 11px; border: none; border-radius: var(--radius-xs); background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-ghost { flex: 1; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 15px; cursor: pointer; }
.btn-del { flex: 1; padding: 11px; border: none; border-radius: var(--radius-xs); background: transparent; color: var(--red); font-size: 15px; cursor: pointer; }
.ck { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); margin: 10px 0 0; }
.ck input { width: auto; }

/* 规格标签多选 */
.dtag-box { display: flex; flex-wrap: wrap; gap: 6px; }
.dtag { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font-size: 13px; cursor: pointer; }
.dtag.on { border-color: transparent; }
.dtag.archived { opacity: .5; }
.dtag .tx { margin-left: 4px; border: none; background: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }

/* 标签 Tab 区块 */
.tsec { margin-top: 18px; }
.tsec h2 { font-size: 14px; margin: 0 0 8px; color: var(--fg); }
.tlist { display: flex; flex-direction: column; gap: 8px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-radius: var(--radius-xs); box-shadow: var(--shadow-sm); }
.tmain { flex: 1; min-width: 0; }
.tnm { font-size: 14.5px; font-weight: 600; }
.tmeta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tmk { font-size: 11px; color: var(--accent-d); background: var(--accent-soft); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.ted { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 13px; cursor: pointer; }
.tadd { margin-top: 8px; width: 100%; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-xs); background: none; color: var(--muted); font-size: 13.5px; cursor: pointer; }
.tgrp { margin: 8px 0; }
.tgrp-h { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
.tgrp .dtag { margin: 0 6px 6px 0; }

/* 日历 */
.dcal-grid { margin-top: 6px; }
.dc-wk { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.dc-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dc-e { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radius-xs); background: var(--card); font-size: 13px; color: var(--fg); }
.dc-e.empty { background: none; }
.dc-e b { font-weight: 600; }
.dc-e i { font-size: 10px; color: var(--muted); font-style: normal; margin-top: 1px; }
.dc-e.on { background: var(--accent-soft); color: var(--accent-d); cursor: pointer; }

/* 我的 */
.me-card { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 18px 16px; margin-top: 6px; }
.me-big { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.me-big span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.me-it { background: var(--line-2); border-radius: var(--radius-xs); padding: 10px 6px; text-align: center; }
.me-it .mk { display: block; font-size: 11px; color: var(--muted); }
.me-it .mv { display: block; font-size: 14px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.me-tip { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* 记录编辑弹层里的字段 */
.drink-edit .fld { margin-bottom: 12px; }
.drink-edit .fld label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.drink-edit .fld input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-size: 15px; outline: none;
}
.drink-edit .fld input:focus { border-color: var(--accent); box-shadow: var(--ring); }


/* ================= 运动健身（?v=108，独立模块） =================
   复用 :root 变量与既有设计快照（圆角/投影/毛玻璃与 .drink* 一致），只新增、不删既有限选择器。 */
.fitness { max-width: var(--wrap); margin: 0 auto; padding: 14px 14px 84px; }
.fit-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fit-top h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }

/* 概览卡 */
.fit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fit-ov { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.fit-ov-l { font-size: 12.5px; color: var(--muted); }
.fit-ov-v { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fit-ov-s { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.fit-ov-s.warn { color: var(--red); }
.fit-ov-s.good { color: var(--accent-d); }
.fit-link { border: none; background: none; color: var(--accent); font-size: 12px; padding: 0 2px; cursor: pointer; }

/* 体重折线图容器 */
.fit-chart { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 10px 8px; margin-bottom: 12px; }

/* 列表行（体重/运动/睡眠通用） */
.fit-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); margin-bottom: 10px; cursor: pointer; }
.fit-row-main { flex: 1; min-width: 0; }
.fit-row-t { font-size: 14px; font-weight: 600; }
.fit-row-s { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.fit-row-v { font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; flex: none; }

/* 统计格（运动/睡眠） */
.fit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.fit-stat { background: var(--card); border-radius: var(--radius-xs); box-shadow: var(--shadow-sm); padding: 10px 6px; text-align: center; }
.fit-stat-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fit-stat-k { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* 底部 Tab（独立宿主，不用记账页 tabbar） */
.fit-tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 20; backdrop-filter: saturate(180%) blur(12px); }
.fitab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.fitab .ic { width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.fitab.active { color: var(--accent); }
.fitab.active .ic { background: var(--accent); color: #fff; }

/* 运动子页切换（记运动 / 视频库，?v=133） */
.fit-subtab { display: flex; background: #f0eaf3; border-radius: var(--radius-sm); padding: 4px; margin: 8px 0 10px; }
.fit-subtab button { flex: 1; border: none; background: transparent; color: var(--muted); font-size: 13px; padding: 7px 0; border-radius: var(--radius-sm); cursor: pointer; }
.fit-subtab button.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }

/* 视频库（整合进「运动」Tab，作为子页管理，?v=133） */
.fit-vlib { margin-bottom: 12px; }
.fit-vlib-h { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 8px; }
.fit-vlib-h > span { font-size: 14px; font-weight: 700; }
.fit-vadd { border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.fit-vadd:active { background: var(--accent-soft); }
.fit-vlist { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.fit-vcard { flex: 0 0 auto; width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 10px 11px; }
.fit-vcard-main { min-width: 0; }
.fit-vcard-t { font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-vcard-src { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.fit-vcard-s { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.fit-vtags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.bpc-on { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--line-2); color: var(--muted); }
.fit-vcard-act { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.fit-vlink { font-size: 12px; color: var(--accent); text-decoration: none; }
.fit-vrec { border: none; background: var(--accent); color: #fff; border-radius: 999px; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.fit-vedit, .fit-vdel { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 8px; font-size: 12px; padding: 4px 9px; cursor: pointer; }
.bpc-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.bpc { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; font-size: 13px; padding: 6px 14px; cursor: pointer; }
.bpc.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wo-vrow { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.btn-mini { border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; font-size: 12px; padding: 5px 14px; cursor: pointer; }
.btn-mini:active { background: var(--accent-soft); }
.wo-video { font-size: 12px; color: var(--muted); }
.wo-picklist { margin: 6px 0 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); max-height: 200px; overflow-y: auto; }
.wo-picklist.hidden { display: none; }
.fit-vpick { padding: 10px 12px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.fit-vpick:last-child { border-bottom: none; }
.fit-vpick-s { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 首屏骨架屏（?v=116）：登录后、首次路由渲染前的占位，复用色板变量，首渲染即被替换 */
.skel { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.skel-card { height: 84px; border-radius: var(--radius); }
.skel-row { display: flex; align-items: center; gap: 12px; height: 46px; background: var(--card);
  border-radius: var(--radius-sm); padding: 0 14px; box-shadow: var(--shadow-sm); }
.skel-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.skel-line { height: 12px; border-radius: 6px; background: var(--line); flex: 1 1 auto; }
.skel-card { background: var(--card); box-shadow: var(--shadow-sm); }
.skel-card, .skel-dot, .skel-line {
  background-image: linear-gradient(90deg, var(--line) 25%, var(--line-2) 37%, var(--line) 63%);
  background-size: 400% 100%; animation: skel-shine 1.3s ease-in-out infinite; }
@keyframes skel-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* 长列表渐进渲染的「加载更多」（?v=116） */
.lf-more { padding: 10px 12px 4px; text-align: center; }

/* 山姆代购：统计仪表盘 + 分组流水（?v=118） */
.proxy-stats .card-title { margin: 0 0 4px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgrid .pcell { background: var(--line-2); border-radius: var(--radius-xs); padding: 9px 11px; }
.pgrid .pcell .pk { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.pgrid .pcell .pv { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-list { margin-top: 2px; }
.pp-group { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
.pp-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; }
.pp-head .pmain { flex: 1; min-width: 0; }
.pp-head .pnote { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-head .psub { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pp-head .pamt { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-head .pcaret { color: var(--muted-2); font-size: 12px; transition: transform .15s; flex: none; }
.pp-group.open .pcaret { transform: rotate(180deg); }
.pp-items { padding: 0 12px 6px; }
.pp-items .row { margin: 0 -12px; padding: 9px 12px; border-top: 1px solid var(--line-2); }
.pp-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--line-2); color: var(--muted); margin-left: 6px; font-weight: 500; vertical-align: middle; }
.pp-empty { color: var(--muted-2); text-align: center; padding: 22px 0; font-size: 13.5px; }

/* ================= 灵感记录（?v=160 紫色系磨砂玻璃） =================
   结构：紫渐变衬底 + 固定模糊光晕；卡片/页头/分组/转写用半透明白玻璃
   （backdrop-filter 模糊 + 高光描边 + 顶部内高光）。模块徽标保持实色紫点睛。
   沿用 :root 变量，不新增色号。 */
.insp {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px 14px 96px;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(182,158,189,.55), rgba(182,158,189,0) 55%),
    radial-gradient(120% 90% at 100% 8%, rgba(138,102,150,.42), rgba(138,102,150,0) 50%),
    radial-gradient(140% 120% at 50% 100%, rgba(212,180,221,.5), rgba(212,180,221,0) 60%),
    var(--bg);
}
/* 固定模糊光晕：浮在内容之下，营造通透层次 */
.insp::before, .insp::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  opacity: .85;
}
.insp::before {
  width: 46vw; height: 46vw; max-width: 420px; max-height: 420px;
  top: -8vw; left: -10vw;
  background: radial-gradient(circle, rgba(182,158,189,.7), rgba(182,158,189,0) 70%);
}
.insp::after {
  width: 50vw; height: 50vw; max-width: 460px; max-height: 460px;
  right: -12vw; bottom: 6vh;
  background: radial-gradient(circle, rgba(138,102,150,.55), rgba(138,102,150,0) 70%);
}
.insp > * { position: relative; z-index: 1; }

.insp-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 11px 13px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px -14px rgba(99,75,110,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.insp-back {
  flex: none; padding: 7px 12px; border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px; background: rgba(255,255,255,.45); color: var(--muted);
  font-size: 13px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.insp-back:active { transform: scale(.97); }
.insp-ttl { flex: 1; min-width: 0; }
.insp-title { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.5px; font-weight: 700; color: var(--fg); }
.insp-sub { margin-top: 3px; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.insp-search-btn {
  flex: none; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%; background: rgba(255,255,255,.45); color: var(--accent-d);
  font-size: 13px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.insp-search-btn:active { transform: scale(.97); }
.insp-search { margin-bottom: 12px; }
.insp-search input {
  width: 100%; box-sizing: border-box; padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
  font-size: 14px; color: var(--fg);
}
.insp-search input:focus { border-color: var(--accent-l); box-shadow: var(--ring); outline: none; }
.insp-search input::placeholder { color: var(--muted-2); }

/* 时间筛选条：玻璃分段控件 + 排序切换，与搜索框共处、AND 组合 */
.insp-filter { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; }
.insp-seg {
  display: flex; gap: 3px; padding: 3px; flex: 1; min-width: 0; overflow-x: auto;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.insp-seg::-webkit-scrollbar { display: none; }
.insp-seg-b {
  flex: 1 0 auto; padding: 6px 11px; border: none; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border-radius: 999px; cursor: pointer; transition: color .15s ease, background .15s ease, transform .1s ease;
}
.insp-seg-b.active {
  background: linear-gradient(145deg, var(--accent-l), var(--accent));
  color: #fff;
  box-shadow: 0 4px 12px -6px rgba(99,75,110,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.insp-seg-b:active { transform: scale(.97); }

/* ?v=171 筛选区重排：三种控件三种视觉语言。
   行1 时间 = 上面的分段控件（轨道包成一个整体）；
   行2 = 下面这套「无轨道 plain chips」——chip 各自独立成丸，横滑可见全部；
   动作（排序/分组）= .insp-act 圆形按钮，与药丸 chip 形状都不同，绝不会再看混。
   ?v=172：行2 的内容从「关联模块」换成灵感自己的**分类**（自建），id 随之改为 #inspCat。 */
#inspCat.insp-seg {
  background: transparent; border: none; box-shadow: none; padding: 0; gap: 6px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#inspCat .insp-seg-b {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 3px 10px -8px rgba(99,75,110,.55);
}
#inspCat .insp-seg-b.active { border-color: transparent; }

/* 动作按钮簇：圆形 + 图标（排序方向 / 分组方式），frosted 底与全站一致 */
.insp-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.insp-act {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: 50%; color: var(--accent-d);
  cursor: pointer; transition: transform .1s ease, background .15s ease, color .15s ease;
}
.insp-act:active { transform: scale(.92); }
.insp-act .insp-ic { width: 15px; height: 15px; transition: transform .18s ease; }
/* 排序：asc（最早在前）时箭头翻转 180° */
#inspSort[data-sort="asc"] .insp-ic { transform: rotate(180deg); }
/* 分组：非「按时间」（按分类 / 按模块）时按钮转实心主色，图标翻白 ——
   ?v=172 三态循环：date（默认空态）→ category → module。 */
#inspGroup[data-group="category"], #inspGroup[data-group="module"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.insp-list { display: flex; flex-direction: column; gap: 22px; }
.insp-day { display: flex; flex-direction: column; gap: 10px; }
.insp-day-hd {
  display: flex; align-items: center; gap: 9px; margin: 0 2px 0;
  padding: 7px 12px;
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  align-self: flex-start;
}
.insp-day-t { font-size: 12.5px; font-weight: 600; color: var(--accent-d); letter-spacing: .02em; }
.insp-day-n { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-d); font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.insp-day-hd::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), rgba(236,229,239,0)); }
.insp-day-list { display: flex; flex-direction: column; gap: 12px; }
.insp-empty { text-align: center; color: var(--muted-2); font-size: 13.5px; line-height: 1.9; padding: 46px 0; }

.insp-card {
  position: relative; background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6); border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(99,75,110,.55), inset 0 1px 0 rgba(255,255,255,.75);
  padding: 14px 15px; overflow: hidden;
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.insp-card.has-mod { padding-left: 17px; }
.insp-card.has-mod::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.insp-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
/* ?v=172 灵感分类徽标（浅紫描边，与实色紫的模块徽标一眼分得开：分类在前、模块在后） */
.insp-cat {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: 7px; border: 1px solid var(--accent-soft);
  background: var(--accent-soft); color: var(--accent-d);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.insp-mod { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 2px 6px -2px rgba(99,75,110,.5); }
.insp-content { font-size: 15.5px; line-height: 1.68; color: var(--fg); word-break: break-word; }
.insp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.insp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(138,102,150,.14); color: var(--accent-d); font-size: 12px; line-height: 1.4; }
.insp-chip i { font-style: normal; cursor: pointer; opacity: .55; }
/* 图片固定一行三列（九宫格）：1 张占 1 格、2 张占 2 格、3 张及以上每行 3 张自动换行。
   之前按数量切 one/two/many 列数，但卡片渲染没带上修饰类，导致多图退化为单列竖排；
   这里直接固定 repeat(3, 1fr)，与「一行 3 张」一致，单图也是 1 格正方形（标准九宫格观感）。 */
.insp-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; }
.insp-img { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.5); }
.insp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.insp-img:active img { transform: scale(1.02); }
.insp-aud {
  margin-top: 11px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.insp-lb { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 7px; }
.insp-aud audio { width: 100%; height: 38px; display: block; }
/* 视频（?v=158 起支持灵感视频） */
.insp-vids { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 11px; }
.insp-vid { width: 100%; max-height: 320px; border-radius: 14px; background: #000; display: block; }
/* 转写记录（?v=150）：录音归档百度网盘后仍留得住"当时说了什么" */
.insp-trs {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.insp-trs-t { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.insp-trs-i { font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.insp-trs-i + .insp-trs-i { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.insp-trs-at { font-size: 11.5px; color: var(--muted-2); margin-right: 7px; font-variant-numeric: tabular-nums; }
.insp-trs-pan { display: inline-block; margin-right: 7px; padding: 1px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; text-decoration: none; }
.insp-trs-path { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
/* 录入弹窗里的转写预览 */
.insp-tr-prev { margin-top: 7px; padding: 8px 10px; border-radius: var(--radius-xs); background: rgba(255,255,255,.5); font-size: 13px; line-height: 1.5; word-break: break-word; }
.insp-tr-at { font-size: 11.5px; color: var(--muted-2); margin-right: 6px; font-variant-numeric: tabular-nums; }
.insp-tr-pan { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); font-size: 12.5px; font-family: inherit; }
.insp-rel { margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.insp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.5);
}
.insp-time { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.insp-acts { display: flex; gap: 8px; }
.insp-act {
  padding: 5px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-xs);
  background: rgba(255,255,255,.45); color: var(--muted); font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.insp-act.danger { color: var(--red); }
.insp-act:active { transform: scale(.97); }

/* 灵感评论（?v=170）：主人与灵感访客都能留言；mine=可删（作者本人或主人） */
.insp-cmt-btn {
  padding: 5px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-xs);
  background: rgba(255,255,255,.45); color: var(--muted); font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.insp-cmt-btn:active { transform: scale(.97); }
.insp-cmt-btn.on { color: var(--accent); border-color: rgba(138,102,150,.45); }
.insp-cmts {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.5);
}
.insp-cmts.hidden { display: none; }
.insp-cmt-list { display: flex; flex-direction: column; gap: 9px; }
.insp-cmt-loading, .insp-cmt-empty { font-size: 12.5px; color: var(--muted-2); padding: 4px 0; }
.insp-cmt-hd { display: flex; align-items: baseline; gap: 8px; }
.insp-cmt-au { font-size: 13px; font-weight: 600; color: var(--accent); }
.insp-cmt-t { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.insp-cmt-del {
  margin-left: auto; border: none; background: none; color: var(--muted-2);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.insp-cmt-del:active { color: var(--red); }
.insp-cmt-x { font-size: 13.5px; color: var(--fg); margin-top: 2px; word-break: break-word; }
.insp-cmt-form { display: flex; gap: 8px; margin-top: 10px; }
.insp-cmt-in {
  flex: 1 1 auto; min-width: 0; padding: 8px 12px; font-size: 13.5px; font-family: inherit;
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  background: rgba(255,255,255,.55); color: var(--fg); outline: none;
}
.insp-cmt-in:focus { border-color: var(--accent); }
.insp-cmt-send {
  flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13.5px; cursor: pointer;
}
.insp-cmt-send:active { transform: scale(.96); }

.insp-fab {
  position: fixed; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-l), var(--accent));
  color: #fff; border: none; font-size: 30px; line-height: 1;
  box-shadow: 0 10px 26px -8px rgba(138,102,150,.7), inset 0 1px 0 rgba(255,255,255,.5);
  cursor: pointer; z-index: 21;
}
.insp-fab:active { transform: scale(.94); }

/* 录入弹窗 */
.insp-edit h3 { margin: 0 0 12px; font-size: 17px; }
.insp-edit .fld { margin-bottom: 13px; }
.insp-edit .fld > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.insp-edit textarea, .insp-edit select, .insp-edit input[type="text"], .insp-edit input[type="datetime-local"], .insp-edit input[type="search"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: 14px; font-family: inherit;
}
.insp-edit textarea:focus, .insp-edit select:focus, .insp-edit input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.insp-edit .insp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.insp-edit .insp-thumb { position: relative; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #f0f1f3; }
.insp-edit .insp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.insp-edit .insp-thumb.vid video { width: 100%; height: 100%; object-fit: cover; }
.insp-edit .insp-thumb.aud { width: auto; height: auto; border: none; background: none; display: flex; align-items: center; gap: 6px; }
.insp-edit .insp-thumb i { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(20,36,48,.6); color: #fff; font-size: 12px; cursor: pointer; }
.insp-edit .insp-thumb.aud i { position: static; }
.insp-rec { display: flex; align-items: center; gap: 10px; }
.insp-rec-btn { padding: 8px 14px; border: 1px solid var(--accent); border-radius: var(--radius-xs); background: var(--card); color: var(--accent); font-size: 13.5px; cursor: pointer; }
.insp-rec-btn:active { transform: scale(.97); }
.insp-edit-err { color: var(--red); font-size: 12.5px; min-height: 16px; margin-bottom: 6px; }
.insp-edit-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* ================= 全局对话框「随手记」（?v=150 灵感转写记录/网盘链接） =================
   挂在 body 上、由 index.html 引入，不随 Hash 路由销毁：手机是「右下悬浮球 → 全屏抽屉」，
   桌面（>=768px）是「Ctrl/Cmd+K → 右侧面板」。配色一律沿用 :root 的莫兰迪紫变量，不新增色号。 */
.chat-fab {
  position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: linear-gradient(150deg, var(--accent), var(--accent-d));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(138, 102, 150, .55); cursor: pointer; z-index: 30;
}
.chat-fab:active { transform: scale(.94); }
.chat-fab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ?v=164 修「悬浮球压住主操作按钮」：
   各页右下角都有自己的主操作悬浮按钮（账本 .fab 80–128px、饮品/健身 .drink-fab 70–122px、
   灵感 .insp-fab 24–78px），而随手记球固定在 84–140px —— 与账本胶囊几乎完全重合，
   截图里球把「记一笔」压成了「记」。chat.js 检测到页面有主操作按钮时给球加 -stack 类，
   并把实测的抬升高度写进 --chat-fab-lift（主按钮顶边 + 14px，含安全区，换页/转屏重算）。
   同时换成白底紫笔的次级样式：两枚紫球上下叠着会粘成一体，分不清谁是主操作。
   z-index 压到遮罩(24)之下：主按钮展开菜单时球跟着一起压暗，不会浮在菜单上。 */
.chat-fab--stack {
  bottom: var(--chat-fab-lift, 148px);
  background: var(--card);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  z-index: 23;
}

.chat-layer { position: fixed; inset: 0; z-index: 45; }
.chat-mask { position: absolute; inset: 0; background: rgba(24, 36, 48, .38); }
.chat-panel {
  position: absolute; left: 0; right: 0; top: 7%; bottom: 0;
  display: flex; flex-direction: column; background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg);
  overflow: hidden; animation: chat-up .22s ease-out;
}
@keyframes chat-up { from { transform: translateY(6%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }

.chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.chat-title { flex: 1; margin: 0; font-size: 17px; letter-spacing: -.2px; }
.chat-x { flex: none; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--line-2); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }

.chat-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.chat-hint { color: var(--muted-2); font-size: 13px; padding: 10px 2px; }
.chat-msg { max-width: 100%; word-break: break-word; }
.chat-msg.me {
  align-self: flex-end; max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 4px 16px;
  background: var(--accent); color: #fff; font-size: 14.5px;
}
.chat-msg.wait { align-self: flex-start; font-size: 13px; color: var(--muted); padding: 4px 2px; }
.chat-msg.err { align-self: flex-start; font-size: 13px; color: var(--red); padding: 4px 2px; }

/* 确认卡片：字段可编辑 + 顶部一排意图切换标签 */
.chat-card { background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px; }
.chat-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chat-tab { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; cursor: pointer; }
.chat-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.chat-low { margin-top: 8px; font-size: 12.5px; color: var(--warn); }
.chat-src { margin-top: 6px; font-size: 12px; color: var(--muted-2); }
.chat-fields { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-f { display: block; font-size: 12.5px; color: var(--muted); }
.chat-f > span { display: block; margin-bottom: 4px; }
.chat-f input, .chat-f textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-xs); background: var(--card); color: var(--fg);
  font-size: 14.5px; font-family: inherit; min-width: 0;
}
.chat-f textarea { resize: vertical; line-height: 1.5; }
.chat-f input:focus, .chat-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.chat-card-err { color: var(--red); font-size: 12.5px; min-height: 16px; margin-top: 8px; }
.chat-card-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.chat-btn { padding: 8px 16px; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 14px; cursor: pointer; }
.chat-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.chat-btn.tiny { padding: 5px 12px; min-height: 30px; font-size: 13px; }
.chat-btn:active { transform: scale(.97); }
.chat-btn[disabled] { opacity: .6; }
.chat-done-t { font-size: 14.5px; font-weight: 600; }
.chat-done-s { margin-top: 4px; font-size: 13px; color: var(--muted); }
.chat-undo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.chat-left { font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums; }
.chat-cancel { font-size: 13.5px; color: var(--muted); }

/* 录音条 + 输入区（键盘弹起时仍在可视区内：输入区是 flex 末项、不随正文滚动） */
.chat-recbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--card); }
.chat-recbar audio { flex: 1; min-width: 0; height: 34px; }
.chat-composer { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--card); }
.chat-ico { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-ico.on { background: var(--accent); color: #fff; animation: chat-pulse 1.2s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.chat-text { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 14.5px; font-family: inherit; color: var(--fg); }
.chat-text:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.chat-send { flex: none; padding: 9px 16px; min-height: 38px; border: none; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.chat-send:active { background: var(--accent-d); }

/* 桌面：改成右侧面板，正文仍看得见（不铺满整屏） */
@media (min-width: 768px) {
  .chat-fab { right: 24px; bottom: 24px; }
  .chat-panel { top: 0; left: auto; width: 420px; border-radius: var(--radius) 0 0 var(--radius); animation-name: chat-in; }
  @keyframes chat-in { from { transform: translateX(6%); opacity: .4; } to { transform: none; opacity: 1; } }

}

/* ============================================================================
   账本首页 v2 圆角友好版（?v=156）
   作用域严格限定在 .ledger-page 容器，不影响资产 / 统计 / 理财 / 我的
   共享的 .card / .hero / .tabbar。视觉：浅底上白卡浮起、圆角、无阴影无渐变
   （去「AI 模板感」）；筛选联动与总览卡逻辑全部沿用原有结构与 JS，只改外观。
   ========================================================================== */
.ledger-page { --up: #B0212F; --down: #1D6B45; padding-top: 6px; }
.ledger-page .page-title { display: none; }

/* ---- 汇总头（原 .hero.ledger-hero 蓝渐变卡 → 扁平墨色大字）---- */
.ledger-page .hero.ledger-hero {
  background: none; box-shadow: none; color: var(--fg);
  border-radius: 0; padding: 8px 4px 0; margin-bottom: 14px;
}
.ledger-page .hero-k { font-size: 13px; color: #565A61; opacity: 1; }
.ledger-page .hero-v {
  font-size: clamp(46px, 12.4vw, 66px); font-weight: 600; line-height: 1;
  letter-spacing: -.045em; margin-top: 6px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ledger-page .hero-v.neg { color: var(--fg); }
.ledger-page .ledger-hero .lh-stats { display: flex; gap: 14px; margin-top: 22px; }
.ledger-page .ledger-hero .lh-stat {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--card); border-radius: 12px; padding: 12px 14px;
}
.ledger-page .ledger-hero .lh-k { font-size: 12px; color: #6E7176; opacity: 1; }
.ledger-page .ledger-hero .lh-v {
  font-size: 18px; font-weight: 600; margin-top: 4px; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ledger-page .ledger-hero .lh-stat:nth-child(1) .lh-v { color: #B0212F; }
.ledger-page .ledger-hero .lh-stat:nth-child(2) .lh-v { color: #1D6B45; }
.ledger-page .ledger-hero .lh-net {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; background: var(--card); border-radius: 12px; padding: 13px 14px; border-top: none;
}
.ledger-page .ledger-hero .lh-net .lh-k { font-size: 12.5px; color: #565A61; opacity: 1; font-weight: 400; }
.ledger-page .ledger-hero .lh-net-v {
  font-size: 16px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums;
}

/* ---- 筛选（类型分段 + 时间/搜索/漏斗 + 分类维度）---- */
.ledger-page .ledger-filter { margin: 0 0 14px; }
.ledger-page .lf-types {
  display: flex; gap: 5px; background: #F0F0F3; border-radius: 14px; padding: 4px;
  margin-bottom: 12px; flex: initial;
}
.ledger-page .lf-types .lf-btn {
  flex: 1; border: 0; background: none; padding: 9px 0; border-radius: 10px;
  color: #565A61; font-family: inherit; font-size: 14px; cursor: pointer;
  transition: background .14s, color .14s;
}
.ledger-page .lf-types .lf-btn.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; }
.ledger-page .lf-bar2 { display: flex; align-items: center; gap: 8px; }
.ledger-page .lf-bar2 .lf-search { flex: 1 1 0; min-width: 0; margin-top: 0; }
.ledger-page .lf-time {
  height: 40px; padding: 0 13px; border: 0; border-radius: 12px; background: #F0F0F3;
  color: var(--fg); font-family: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; flex: 0 0 auto; white-space: nowrap;
}
.ledger-page .lf-time .caret { color: #9a929c; font-size: 10px; margin-left: 1px; }
.ledger-page .lf-input {
  height: 40px; border: 0; border-radius: 12px; background: #F0F0F3; color: var(--fg);
  font-family: inherit; font-size: 13px; padding: 0 14px; margin: 0; box-shadow: none;
}
.ledger-page .lf-input::placeholder { color: #9a929c; }
.ledger-page .lf-gear {
  width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 12px; background: #F0F0F3;
  color: #565A61; display: grid; place-items: center; cursor: pointer;
}
.ledger-page .lf-gear.active { background: var(--accent); color: #fff; }
.ledger-page .lf-panel { margin-top: 14px; }
.ledger-page .lf-cats .lf-modes {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: none; padding: 0; border-radius: 0;
}
.ledger-page .lf-modes .lf-mode {
  height: 32px; padding: 0 13px; border: 0; border-radius: 10px; background: #F0F0F3;
  color: #565A61; font-family: inherit; font-size: 13px; cursor: pointer; transition: background .14s, color .14s;
}
.ledger-page .lf-modes .lf-mode.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; }
.ledger-page .lf-cats .lf-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ledger-page .lf-cats .lf-chip {
  height: 32px; padding: 0 13px; border: 0; border-radius: 10px; background: #F0F0F3;
  color: #565A61; font-family: inherit; font-size: 13px; cursor: pointer; transition: background .14s, color .14s;
}
.ledger-page .lf-cats .lf-chip.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; }
.ledger-page .lf-cats .lf-chip.ex { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ledger-page .lf-cats .lf-chip.ex.active { background: #fdecec; color: #B0212F; box-shadow: inset 0 0 0 1px #f3c9c9; }
.ledger-page .lf-lead {
  flex: 0 0 auto; display: inline-flex; align-items: center; width: auto; height: auto;
  color: #6E7176; font-size: 12px; margin: 0 4px 0 0;
}
.ledger-page .lf-div { display: none; }

/* ---- 每日分组：白卡浮起（圆角、无阴影）---- */
.ledger-page .card {
  background: var(--card); border: none; border-radius: 18px;
  box-shadow: none; margin-bottom: 14px; overflow: hidden;
}
.ledger-page .lf-card { padding: 16px 14px; }
.ledger-page .sk-row { padding: 14px 16px; }
.ledger-page .card:not(.lf-card):not(.sk-row) { padding: 0; }
.ledger-page .grp-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; margin: 0; padding: 14px 16px 12px; border-bottom: none;
}
.ledger-page .grp-head .grp-day { font-weight: 600; color: var(--fg); }
.ledger-page .grp-head .grp-sum { color: #565A61; font-size: 12.5px; white-space: nowrap; }
.ledger-page .grp-head .grp-sum b { font-weight: 600; }
.ledger-page .grp-head .grp-sum b.up { color: #B0212F; }
.ledger-page .grp-head .grp-sum b.down { color: #1D6B45; }

/* ---- 流水行 ---- */
.ledger-page .list-item {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px; min-height: auto;
  border-bottom: none;
}
.ledger-page .list-item:last-child { border-bottom: none; }
.ledger-page .list-item:active { background: #F0F0F3; }
.ledger-page .list-item .li-av, .ledger-page .list-item .tx-dir {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; font-size: 12px;
}
.ledger-page .list-item .li-av.tx-dir { font-size: 14px; }
.ledger-page .list-item .mi-main { flex: 1; min-width: 0; }
.ledger-page .list-item .mi-title { font-weight: 600; font-size: 15.5px; color: var(--fg); }
.ledger-page .list-item .mi-sub { font-size: 13px; color: #6E7176; margin-top: 2px; }
.ledger-page .list-item .mi-right {
  text-align: right; font-weight: 600; font-size: 16px; margin-left: 10px; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--fg);
}
.ledger-page .list-item .mi-right.up { color: #B0212F; }
.ledger-page .list-item .mi-right.down { color: #1D6B45; }

/* ---- 主操作：圆角紫胶囊（无渐变 / 无投影）---- */
.ledger-page .fab {
  background: var(--accent); background-image: none; box-shadow: none;
  border-radius: 999px; height: 48px; min-width: 122px; padding: 0 20px;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 18px);
  right: max(16px, calc((100% - var(--wrap)) / 2 + 16px));
  transition: transform .12s ease, background .14s ease;
}
.ledger-page .fab svg { width: 17px; height: 17px; }
.ledger-page .fab:active { transform: translateY(1px); background: #775781; opacity: 1; }

/* ============================================================================
   记账模块 v2 圆角友好版（?v=158）
   作用域：仅 index.html 的 <body class="ledger-v2">（即整个「记账」模块：
   账本 / 资产 / 统计 / 理财 / 我的，以及其弹层、登录、toast、随手记）。
   饮品 / 健身 / 灵感 / 门户是独立 HTML，不带该类，保持原样。
   做法：在作用域内重设 token（阴影全部归零），再逐块扁平化渐变 Hero 与玻璃面。
   ========================================================================== */
.ledger-v2 {
  /* —— 紫从「底色」剥离：把所有「紫淡底」改成中性灰，图标块 / 返回钮 / 胶囊 / 激活底不再发紫；
       莫兰迪紫只保留为「强调色」（主操作、激活/选中态、基金 Hero）。:root 七色不动，护栏 G1 照过。 —— */
  --bg: #f5f5f7;            /* 中性浅灰底，去掉紫雾 */
  --line: #e9e9ee;          /* 中性描边（原紫调 #ece5ef） */
  --line-2: #f1f1f4;        /* 中性浅描边 */
  --muted: #6f6a76;         /* 中性灰字（原紫调 #7a6d82） */
  --muted-2: #a8a3af;       /* 中性次级灰 */
  --accent-soft: #efeff3;   /* 关键：紫淡底 → 中性灰 */
  --red: #B0212F;
  --green: #1D6B45;
  --up: #B0212F;
  --down: #1D6B45;
  --radius: 22px;           /* 卡片大圆角，友好 */
  --radius-sm: 16px;
  --radius-xs: 14px;
  --shadow: none;
  --shadow-sm: none;
  --shadow-lg: none;
  --ring: none;
  background: var(--bg);
  background-image: none;
}

/* 登录 / 启动兜底：去渐变紫底与投影 */
.ledger-v2 .login { background: var(--bg); }
.ledger-v2 .login-card { background: var(--card); box-shadow: none; }
.ledger-v2 .btn-primary { box-shadow: none; }
.ledger-v2 .boot-err { background: var(--bg); }
.ledger-v2 .boot-card {
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ledger-v2 .boot-card p { color: var(--muted); }

/* 顶部导航条：实心白底，去毛玻璃 */
.ledger-v2 .nav-bar { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 段控 / 排序 / 统计条：统一中性灰底，去渐变与阴影 */
.ledger-v2 .seg,
.ledger-v2 .cat-seg,
.ledger-v2 .lf-types,
.ledger-v2 .sort-bar .sb-btn,
.ledger-v2 .bar-row .bt { background: #F0F0F3; }
.ledger-v2 .seg button.active,
.ledger-v2 .cat-seg button.active,
.ledger-v2 .lf-types .lf-btn.active,
.ledger-v2 .lf-modes .lf-mode.active { box-shadow: none; }
.ledger-v2 .bar-row .bf { background: var(--accent); }

/* 图标块 / 主按钮 / 选择器：去字面阴影 */
.ledger-v2 .ct-ico,
.ledger-v2 .ic-it .ci { box-shadow: none; }
.ledger-v2 .btn.primary { box-shadow: none; }
.ledger-v2 .fd-acts .fd-act-buy { box-shadow: none; }
.ledger-v2 .pill { box-shadow: none; }
.ledger-v2 .toast { box-shadow: none; }
.ledger-v2 .dp-d.sel,
.ledger-v2 .dp-m.sel,
.ledger-v2 .rs-cell.active { box-shadow: none; }

/* FAB / 随手记：实心主色，去渐变与投影 */
.ledger-v2 .fab { background: var(--accent); background-image: none; box-shadow: none; }
.ledger-v2 .fab-mi { box-shadow: none; }
.ledger-v2 .chat-fab { background: var(--accent); box-shadow: none; }

/* ?v=164 修复悬浮球压住「记一笔」胶囊：
   账本页 .fab 占 bottom 80–128px / 右 16–138px，随手记球占 84–140px / 右 16–72px，
   两者完全重叠（截图里球把「记一笔」压成了「记」）。抬升与白底样式见上方 .chat-fab--stack，
   这里只把主色覆盖回来 —— .ledger-v2 .chat-fab 的权重更高，需要同权重同位置再声明一次。 */
.ledger-v2 .chat-fab--stack {
  background: var(--card);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
}

/* ---- 一级页 Hero：白卡 + 墨色字（原紫渐变 + 白字）---- */
.ledger-v2 .hero { color: var(--fg); background: var(--card); box-shadow: none; }
.ledger-v2 .hero .hero-k,
.ledger-v2 .hero .hero-k2,
.ledger-v2 .hero .hero-line { color: var(--muted); opacity: 1; }
.ledger-v2 .hero .hero-v,
.ledger-v2 .hero .hero-v2 { color: var(--fg); }
.ledger-v2 .hero .hero-line { border-top-color: var(--line); }

/* 账户详情 Hero */
.ledger-v2 .acct-hero { color: var(--fg); background: var(--card); box-shadow: none; }
.ledger-v2 .acct-hero .h-k,
.ledger-v2 .acct-hero .h-line,
.ledger-v2 .acct-hero .ah-k,
.ledger-v2 .acct-hero .ah-t { color: var(--muted); opacity: 1; }
.ledger-v2 .acct-hero .ah-v { color: var(--fg); }
.ledger-v2 .acct-hero .ah-v.neg { color: var(--red); }
.ledger-v2 .acct-hero .ah-flag { background: var(--accent-soft); color: var(--accent); }
.ledger-v2 .acct-hero .ah-row { border-top-color: var(--line); color: var(--muted); opacity: 1; }
.ledger-v2 .acct-hero .ah-row b.dn { color: var(--red); }
.ledger-v2 .acct-hero .ah-i + .ah-i::before { color: var(--muted-2); opacity: 1; }

/* 基金 / 个股详情 Hero */
.ledger-v2 .fd-hero { color: var(--fg); background: var(--card); box-shadow: none; }
.ledger-v2 .fd-hero .fd-amt-k,
.ledger-v2 .fd-cell .fc-k,
.ledger-v2 .fd-hero .fd-sub,
.ledger-v2 .fd-hero .fd-pnl .fc-k,
.ledger-v2 .fd-hero .fd-base .fc-k { color: var(--muted); opacity: 1; }
.ledger-v2 .fd-hero .fc-v.up { color: var(--up); }
.ledger-v2 .fd-hero .fc-v.down { color: var(--down); }
.ledger-v2 .fd-hero .fd-base .fc-v { color: var(--fg); opacity: 1; }
.ledger-v2 .fd-hero-split { background: var(--line); }

/* 理财看板 Hero */
.ledger-v2 .dash-hero { color: var(--fg); background: var(--card); box-shadow: none; }
.ledger-v2 .dash-hero .dh-k,
.ledger-v2 .dash-hero .dh-k2 { color: var(--muted); opacity: 1; }
.ledger-v2 .dash-hero .dh-v2 { color: var(--fg); }
.ledger-v2 .dash-hero .dh-line { color: var(--muted); opacity: 1; border-top-color: var(--line); }

/* ============================================================================
   基金 / 股票详情页 v2（?v=167）
   ----------------------------------------------------------------------------
   要解决的问题（用户截图）：页面中段是「交易记录」这个唯一不封顶的列表 —— 记录一多，
   后面的「持仓明细 / 净值走势」就被顶到十几屏之后，等于看不见。
   改法（结构在 views.js）：
     ① 顺序按阅读动线重排：hero → 买入/卖出 → 净值走势 → 持仓明细 → 交易记录；
     ② 交易记录默认只展开最近 6 笔，其余靠 .is-clipped 折叠，DOM 仍是全量；
     ③ 详情页自带顶栏改为吸顶，并与理财二级页那条 .nav-bar 去重（JS display:none）。
   样式全部收在 .fd-page 作用域内（只罩住详情页，不动基金列表页、定存、贷款）。
   视觉沿用记账 v2 的扁平语言：白卡、细描边、无投影、莫兰迪紫只用在可点元素上。
   ========================================================================== */

/* ============================================================================
   记账模块 v3：统一语言 / 收敛紫色 / 留白（?v=168）
   ----------------------------------------------------------------------------
   用户反馈：① 风格不统一 ② 紫色框太多 ③ 没有呼吸感。
   做法（只在 .ledger-v2 作用域内，不碰 :root、不删任何既有选择器）：
   - 紫色从「底色」剥离（见上方 token 块）：图标块 / 返回钮 / 胶囊 / 激活底改为中性灰，
     紫只保留为「强调色」（主操作、激活/选中态、基金 Hero）。
   - 激活/选中态统一为「实心主色 + 白字」一条规则，消除原来白底紫字 / 紫填充 / 紫淡底三套并存。
   - 渐变全部压平（表单「记一笔」、灵感段的紫渐变）。
   - 圆角统一：卡片大圆角 + 控件全圆（药丸），去掉 9px 这类中间值。
   - 留白：卡片内边距、列表行高、区块间距整体放大。
   ========================================================================== */

/* —— 图标块 / 返回钮：中性灰底，紫只作小图标强调（不再是大紫方块） —— */
.ledger-v2 .nav-back,
.ledger-v2 .cg-ico,
.ledger-v2 .fc-ico,
.ledger-v2 .fd-back { background: #efeff3; color: var(--accent); }

/* —— 激活 / 选中：统一实心主色（唯一一条「选中 = 主色」规则） —— */
.ledger-v2 .seg button.active,
.ledger-v2 .cat-seg button.active,
.ledger-v2 .lf-types .lf-btn.active,
.ledger-v2 .lf-modes .lf-mode.active,
.ledger-v2 .sort-bar .sb-btn.active,
.ledger-v2 .lf-cats .lf-chip.active,
.ledger-v2 .lf-search .lf-chip.active,
.ledger-v2 .subtabs button.active,
.ledger-v2 .insp-seg-b.active,
.ledger-v2 .dp-d.sel,
.ledger-v2 .dp-m.sel,
.ledger-v2 .rs-cell.active,
.ledger-v2 .dtab.active .ic,
.ledger-v2 .fitab.active .ic,
.ledger-v2 .chat-tab.on {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; box-shadow: none;
}
/* 选中态上的角标 / 方向三角要翻成白，否则紫底上看不见 */
.ledger-v2 .cat-seg button.active .cs-n { background: rgba(255, 255, 255, .22); color: #fff; }
.ledger-v2 .sort-bar .sb-btn.active .sb-dir.down { border-top-color: #fff; }
.ledger-v2 .sort-bar .sb-btn.active .sb-dir.up { border-bottom-color: #fff; }

/* —— 默认轨道 / 胶囊：中性灰（保险一遍）+ 控件统一药丸 —— */
.ledger-v2 .seg,
.ledger-v2 .cat-seg,
.ledger-v2 .lf-types,
.ledger-v2 .sort-bar .sb-btn,
.ledger-v2 .bar-row .bt { background: #efeff3; }
.ledger-v2 .seg button,
.ledger-v2 .cat-seg button,
.ledger-v2 .sort-bar .sb-btn,
.ledger-v2 .subtabs button,
.ledger-v2 .insp-seg-b,
.ledger-v2 .lf-cats .lf-chip,
.ledger-v2 .lf-search .lf-chip,
.ledger-v2 .btn,
.ledger-v2 .btn.block { border-radius: 999px; }

/* —— 表单（记一笔）渐变压平 —— */
.ledger-v2 .ftxn .seg button.active { background: var(--accent); color: #fff; box-shadow: none; }
.ledger-v2 .ftxn .ftxn-sum { background: #efeff3; border-color: var(--line); box-shadow: none; }
.ledger-v2 .ftxn .ftxn-sum-v { color: var(--accent-d); }
.ledger-v2 .ftxn .ftxn-sum-empty { background: #efeff3; color: var(--muted-2); }
.ledger-v2 .ftxn .btn.primary.block { background: var(--accent); box-shadow: none; }
.ledger-v2 .ftxn .btn.primary.block:active { background: var(--accent-d); }

/* —— 灵感段渐变压平 —— */
.ledger-v2 .insp-seg-b.active { box-shadow: none; }

/* —— 少量紫淡底残留标签中性化 —— */
.ledger-v2 .tag-rate,
.ledger-v2 .tag-run { background: #eef0f3; color: var(--muted-2); }
.ledger-v2 .insp-chip { background: #efeff3; color: var(--muted); }
.ledger-v2 .insp-day-n { background: #efeff3; color: var(--muted); }
.ledger-v2 .tmk { background: #efeff3; color: var(--muted); }

/* —— 留白：放大卡片内边距、列表行高、区块间距 —— */
.ledger-v2 .view { padding-top: 18px; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 40px); }
.ledger-v2 .card { padding: 20px; margin-bottom: 18px; }
.ledger-v2 .list-item { padding: 15px 0; min-height: 52px; }
.ledger-v2 .row { padding: 13px 0; }
.ledger-v2 .page-title { margin: 8px 4px 22px; }
.ledger-v2 .seg,
.ledger-v2 .cat-seg { margin-bottom: 14px; }
.ledger-v2 .sort-bar { margin-bottom: 14px; }
.ledger-v2 .acc-summary { margin-bottom: 16px; }
.ledger-v2 .empty { padding: 46px 20px; }
.ledger-v2 .grp-head { padding: 20px 2px 8px; }

/* —— 密度再提升（Pura X 一屏多信息）+ 收益页 / 股票汇总头 —— */
.ledger-v2 .view { padding-top: 14px; }
.ledger-v2 .card { padding: 15px; margin-bottom: 12px; }
.ledger-v2 .list-item { padding: 10px 16px; min-height: 48px; }
.ledger-v2 .row { padding: 10px 0; }
.ledger-v2 .page-title { margin: 6px 4px 14px; font-size: 20px; }
.ledger-v2 .seg, .ledger-v2 .cat-seg, .ledger-v2 .lf-types,
.ledger-v2 .lf-modes, .ledger-v2 .sort-bar { margin-bottom: 10px; }
.ledger-v2 .acc-summary { margin-bottom: 12px; }
.ledger-v2 .empty { padding: 34px 18px; }
.ledger-v2 .grp-head { padding: 16px 2px 6px; }

/* 股票列表汇总头 */
.ledger-v2 .stk-sum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px;
  padding: 13px 14px; margin-bottom: 12px;
  background: var(--card); border-radius: var(--radius-sm);
}
.ledger-v2 .stk-sc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ledger-v2 .stk-sk { font-size: 12px; color: var(--muted); }
.ledger-v2 .stk-sc b { font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.ledger-v2 .stk-sc b.up { color: var(--up); }
.ledger-v2 .stk-sc b.down { color: var(--down); }
.ledger-v2 .stk-sline { grid-column: 1 / -1; font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* 收益页：档位 chips + 分组 + 标的行 */
.ledger-v2 .ret-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ledger-v2 .ret-chip {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; min-height: 36px;
  background: #efeff3; color: var(--muted); font-size: 14px; font-family: inherit;
}
.ledger-v2 .ret-chip.on { background: var(--accent); color: #fff; }
.ledger-v2 .ret-group { background: var(--card); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.ledger-v2 .ret-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ledger-v2 .ret-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.ledger-v2 .ret-agg { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-v2 .ret-agg-amt { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.ledger-v2 .ret-agg.up, .ledger-v2 .ret-agg-amt.up { color: var(--up); }
.ledger-v2 .ret-agg.down, .ledger-v2 .ret-agg-amt.down { color: var(--down); }
.ledger-v2 .ret-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; min-height: 48px; cursor: pointer; }
.ledger-v2 .ret-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ledger-v2 .ret-nm { font-size: 14px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-v2 .ret-cd { font-size: 12px; color: var(--muted-2); }
.ledger-v2 .ret-spark { flex: 0 0 72px; width: 72px; }
.ledger-v2 .spark { display: block; width: 72px; height: 26px; }
.ledger-v2 .ret-pct { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-v2 .ret-pct.up { color: var(--up); }
.ledger-v2 .ret-pct.down { color: var(--down); }

/* ---- 1. 顶栏：吸顶 + 单层 ---- */
.fd-page .fd-bar {
  position: sticky; top: 0; z-index: 12;
  margin: -14px -14px 12px; padding: 9px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fd-page .fd-bar .fd-back {
  width: 32px; height: 32px; line-height: 30px;
  font-size: 20px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.fd-page .fd-bar .fd-title {
  font-size: 14.5px; font-weight: 600; color: var(--muted); letter-spacing: .4px;
}
.fd-page .fd-bar .fd-more {
  width: 32px; height: 32px; line-height: 32px; font-size: 17px;
  border-radius: 10px; color: var(--muted); letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
}
.fd-page .fd-bar .fd-more:active { background: var(--line-2); }

/* ---- 2. 名称行：名称是这一页真正的标题，代码降级成小圆角标签 ---- */
.fd-page .fd-tr { align-items: center; margin: 0 2px 12px; gap: 8px; }
.fd-page .fd-tr .fd-tr-name { font-size: 17.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.fd-page .fd-tr .fd-tr-code {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: var(--line-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* ---- 3. 持仓 hero：主数字放大，收益三格收进一条浅底带走，基础数据退到最淡 ---- */
.fd-page .fd-hero { padding: 18px 14px 16px; }
.fd-page .fd-amt-k { font-size: 12px; letter-spacing: .5px; }
.fd-page .fd-amt-v { font-size: 37px; font-weight: 700; letter-spacing: -1.2px; margin: 6px 0 15px; }
.fd-page .fd-pnl { background: var(--bg); border-radius: 14px; padding: 11px 6px; gap: 10px 4px; }
.fd-page .fd-pnl .fd-cell { position: relative; }
/* 三格之间的细分隔线：只画在「后面」的格子上，第一格左侧不留线 */
.fd-page .fd-pnl .fd-cell + .fd-cell::before {
  content: ""; position: absolute; left: -2px; top: 5px; bottom: 5px;
  width: 1px; background: var(--line);
}
.fd-page .fd-pnl .fc-k { font-size: 11.5px; }
.fd-page .fd-pnl .fc-v { font-size: 16.5px; font-weight: 700; }
/* 收益组与基础组之间改成虚线：比实线更轻，不抢主数字 */
.fd-page .fd-hero-split { height: 0; margin: 13px 0 11px; border-top: 1px dashed var(--line); }
.fd-page .fd-base { gap: 8px 4px; }
.fd-page .fd-base .fc-k { font-size: 10.5px; letter-spacing: .3px; }
.fd-page .fd-base .fc-v { font-size: 13px; }

/* ---- 4. 买入 / 卖出：买仍是主色实心，卖改成同形状的浅底（旧版描边是蓝调 #cddffa） ---- */
.fd-page .fd-acts { gap: 10px; margin: 0 0 15px; }
.fd-page .fd-acts .fd-act { min-height: 48px; border-radius: 14px; font-size: 15px; letter-spacing: .4px; }
.fd-page .fd-acts .fd-act:active { transform: scale(.985); }
.fd-page .fd-acts .fd-act-sell { background: var(--line-2); border: 1px solid var(--line); color: var(--accent); }

/* ---- 5. 净值走势：区间 Tab 改成分段轨道（选中态是浮起的白胶囊），图例三条竖排 ---- */
.fd-page .fd-navtabs { gap: 3px; padding: 3px; margin: 2px 0 10px; background: var(--line-2); border-radius: 13px; }
.fd-page .fd-navtab {
  flex: 1; min-width: 0; padding: 7px 0; border: none; border-radius: 10px;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  transition: background .16s, color .16s;
}
.fd-page .fd-navtab.active { background: var(--card); color: var(--accent); font-weight: 700; }
.fd-page .fd-navtip { margin-top: 6px; font-size: 11px; }
.fd-page .fd-navlg { margin-top: 12px; padding-top: 11px; gap: 10px; border-top: 1px solid var(--line-2); }
.fd-page .fd-navlg .nl { font-size: 11px; }
.fd-page .fd-navlg .nl b { font-size: 13.5px; }

/* ---- 6. 持仓明细：去掉交替底色（斑马纹和细分割线叠在一起会显脏），只留细线 ---- */
.fd-page .fd-rows .row { padding: 10px 2px; border-bottom: 1px solid var(--line-2); }
.fd-page .fd-rows .row:nth-child(odd) { background: transparent; }
.fd-page .fd-rows .row .k { font-size: 13.5px; }
.fd-page .fd-rows .row .v { font-size: 14px; }
.fd-page .fd-dur-row { border-bottom: none; padding-bottom: 0; }

/* ---- 7. 交易记录：卡片收圆、第二行再淡一档；超过 6 笔默认折叠 ---- */
.fd-page .fd-sec-rec { margin-top: 6px; }
.fd-page .fd-rec {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 7px;
  transition: transform .12s ease;
}
.fd-page .fd-rec:active { transform: scale(.99); opacity: 1; }
.fd-page .fd-rec .fr-a { font-size: 16.5px; letter-spacing: -.2px; }
.fd-page .fd-rec .fr-d { margin-top: 5px; font-size: 11.5px; }
/* 折叠：只藏第 7 条起（DOM 里仍是全量，点开不需要重新渲染 / 重新绑事件） */
.fd-page .fd-rec-list.is-clipped .fd-rec:nth-child(n+7) { display: none; }
.fd-rec-toggle {
  display: block; width: 100%; margin: 2px 0 8px; padding: 11px 0;
  border: 1px dashed var(--line); border-radius: 13px;
  background: transparent; color: var(--accent);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.fd-rec-toggle:active { background: var(--line-2); border-style: solid; }

/* 详情页里的空态：独占一张白卡，别贴着一堆卡片裸奔 */
.fd-page .empty { background: var(--card); border-radius: var(--radius-sm); padding: 26px 16px; }

/* ================= 灵感分类（?v=172） =================
   灵感有自己的一套自建分类（与记账 categories 无关）。录入弹窗里「下拉 + 新建 + 管理」，
   管理区是**行内展开**（不新开弹窗，免得把用户正在写的这条灵感内容冲掉）。 */
.insp-cat-row { display: flex; align-items: center; gap: 6px; }
.insp-cat-row select { flex: 1; min-width: 0; }
/* 小按钮：与 .btn 同族但更轻，只用于分类行这种「辅助动作」 */
.insp-mini-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.6); color: var(--accent-d);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.insp-mini-btn:active { transform: scale(.96); background: var(--line-2); }
.insp-mini-btn.danger { color: var(--red); border-color: rgba(214,92,92,.35); }
/* 管理区：分类列表（名称 + 条数 + 改名/删除），默认隐藏，点「管理」展开 */
.insp-catm { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.insp-catm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255,255,255,.5);
}
.insp-catm-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-catm-c { flex: none; font-size: 11.5px; color: var(--muted-2); }
.insp-catm-empty { font-size: 12.5px; color: var(--muted-2); padding: 6px 2px; }
.insp-catm-row .insp-mini-btn { height: 26px; padding: 0 8px; font-size: 11.5px; }