/* ==========================================================
   我的生活 · 原型样式
   ----------------------------------------------------------
   圆角：绿城管理集团 UI 规范 3pt 体系（xs3 / sm6 控件 / md9 容器 / lg12 面板 / xl15 / pill999）
   色系：Google Material 色板（主 #1a73e8，灰阶 #202124…，四色点缀，elevation 阴影）
   布局：OpenAI 官网式（顶栏 / 首屏 / 区块 / 页脚）
   首页：落地页叙事结构（Hero + Bento + 粘性双栏 + CTA），特效零依赖
   ========================================================== */

:root {
  /* 品牌：降饱和的沉静蓝（原 Google #1a73e8 饱和过高，观感偏"后台系统"） */
  --brand:      #3063c9;
  --brand-hover:#2a58b4;
  --brand-deep: #1e3f88;
  --brand-light:#eef2fb;
  --brand-weak: #dde5f5;
  --brand-assist:#b9c9ec;

  /* 文字：暖调中性灰（原 Google 冷灰，与中文黑体不亲和）
     次要文字整体提亮一档，保证 ≥4.5:1 对比度，久看不费力 */
  --t1: #1c1a17;
  --t2: #55504a;
  --t3: #6f6a63;
  --t4: #8a857e;
  --t5: #b3aea6;

  /* 背景：暖白（#f8f9fa 冷灰 → #faf9f7 暖白，是"舒服感"的地基） */
  --canvas:  #faf9f7;
  --panel:   #ffffff;
  --section: #f2f0ec;
  --subtle:  #f4f2ee;
  /* 深色区块改用暖黑，不再用品牌蓝实色铺大面积 */
  --deep-bg: #1c1a17;
  /* 顶栏：半透明 + 背景模糊（比实心白更"轻"，这是舒服站的通行做法） */
  --nav-bg: rgba(250, 249, 247, 0.78);

  /* 边框：整体调浅一档，卡片靠留白分组而不是靠描边 */
  --bd-soft:    #ebe8e2;
  --bd-default: #e2ded7;
  --bd-strong:  #cfc9c0;
  --bd-active:  #a8bde8;

  /* 语义（涨=红 跌=绿，国内习惯） */
  --ok:    #2e7d4f;
  --ok-bg: #e8f3ec;
  --warn:  #a06800;
  --warn-bg:#fdf4e3;
  --bad:   #c4402f;
  --bad-bg:#fbeae7;
  --up:    #c4402f;
  --down:  #2e7d4f;

  /* 组件用色（深浅两套在此切换） */
  --on-brand:      #ffffff;              /* 品牌底上的文字 */
  --area-fill:     rgba(48, 99, 201, 0.08);
  --quickbox-bg:   var(--panel);
  --sheet-mask-bg: rgba(28, 26, 23, 0.34);
  --toast-bg:      #1c1a17;
  --toast-fg:      #faf9f7;
  --spot-color:    rgba(48, 99, 201, 0.07);

  /* 圆角：原型场景放宽到 9/16/20/26（原 3pt 体系是给企业后台的，偏硬偏小） */
  --r-xs: 4px;
  --r-sm: 9px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* 阴影：大扩散、低透明度（原 Material elevation 太"实"，像浮起的对话框） */
  --sh-ring:   0 0 0 3px rgba(48, 99, 201, 0.14);
  --sh-raise:  0 1px 2px rgba(28, 26, 23, 0.04), 0 6px 16px -8px rgba(28, 26, 23, 0.10);
  --sh-float:  0 2px 4px rgba(28, 26, 23, 0.05), 0 12px 28px -12px rgba(28, 26, 23, 0.16);
  --sh-overlay:0 8px 20px rgba(28, 26, 23, 0.10), 0 24px 60px -20px rgba(28, 26, 23, 0.28);

  /* 字号阶梯（原 14px 基准偏小，且 12/13/14 全挤在小字区 → 头重脚轻）
     基准提到 15px，行高 1.75（中文需要比英文更大的行距） */
  --fs-hero: clamp(38px, 5.4vw, 58px);
  --fs-h1:   32px;
  --fs-h2:   21px;
  --fs-h3:   17px;
  --fs-body: 15px;
  --fs-sm:   13.5px;
  --fs-xs:   12.5px;

  /* 纵向节奏（原 48px 太紧，呼吸不够 → 这是"舒服感"最直接的来源） */
  --sp-sect: 88px;

  --nav-h: 64px;   /* 顶栏高度（单行：logo + Tab + 图标都在一起）—— sticky 偏移、吸顶元素都靠它 */
  --maxw: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
}

/* ============ 深色令牌（系统自动 / data-theme 手动，两处同值） ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:      #8fb0f2;
    --brand-hover:#adc6f7;
    --brand-deep: #1e3f88;
    --brand-light:#1b2333;
    --brand-weak: #202c42;
    --brand-assist:#2a3a55;

    --t1: #eceae5;
    --t2: #b6b1a9;
    --t3: #9a948c;
    --t4: #7e7972;
    --t5: #605c56;

    --canvas:  #171614;
    --panel:   #1e1c1a;
    --section: #26241f;
    --subtle:  #26241f;
    --deep-bg: #0f0e0d;
    --nav-bg: rgba(23, 22, 20, 0.78);

    --bd-soft:    #2e2b27;
    --bd-default: #45413b;
    --bd-strong:  #6b675f;
    --bd-active:  #5b7fc4;

    --ok:    #7fc79b;
    --warn:  #e8c46a;
    --bad:   #ec9184;
    --up:    #ec9184;
    --down:  #7fc79b;

    --on-brand:      #171614;
    --area-fill:     rgba(143, 176, 242, 0.10);
    --quickbox-bg:   var(--panel);
    --sheet-mask-bg: rgba(0, 0, 0, 0.58);
    --toast-bg:      #eceae5;
    --toast-fg:      #171614;
    --spot-color:    rgba(143, 176, 242, 0.10);

    --sh-raise:  0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
    --sh-float:  0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
    --sh-overlay:0 8px 20px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --sh-ring:   0 0 0 3px rgba(143, 176, 242, 0.22);
  }
}
:root[data-theme="dark"] {
  --brand:      #8fb0f2;
  --brand-hover:#adc6f7;
  --brand-deep: #1e3f88;
  --brand-light:#1b2333;
  --brand-weak: #202c42;
  --brand-assist:#2a3a55;

  --t1: #eceae5;
  --t2: #b6b1a9;
  --t3: #9a948c;
  --t4: #7e7972;
  --t5: #605c56;

  --canvas:  #171614;
  --panel:   #1e1c1a;
  --section: #26241f;
  --subtle:  #26241f;
  --deep-bg: #0f0e0d;
  --nav-bg: rgba(23, 22, 20, 0.78);

  --bd-soft:    #2e2b27;
  --bd-default: #45413b;
  --bd-strong:  #6b675f;
  --bd-active:  #5b7fc4;

  --ok:    #7fc79b;
  --warn:  #e8c46a;
  --bad:   #ec9184;
  --up:    #ec9184;
  --down:  #7fc79b;

  --on-brand:      #171614;
  --area-fill:     rgba(143, 176, 242, 0.10);
  --quickbox-bg:   var(--panel);
  --sheet-mask-bg: rgba(0, 0, 0, 0.58);
  --toast-bg:      #eceae5;
  --toast-fg:      #171614;
  --spot-color:    rgba(143, 176, 242, 0.10);

  --sh-raise:  0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --sh-float:  0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --sh-overlay:0 8px 20px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --sh-ring:   0 0 0 3px rgba(143, 176, 242, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--t1);
  font-size: var(--fs-body);
  line-height: 1.75;
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 中文段落避免末行孤字 */
p, .para, .hero-sub, .page-sub { text-wrap: pretty; }
h1, h2, h3, .page-title, .hero-title { text-wrap: balance; }

button { font-family: inherit; }
code {
  background: var(--subtle); border-radius: var(--r-xs); padding: 1px 5px;
  font-size: 0.88em; font-family: Inter, ui-monospace, Menlo, Consolas, monospace;
}

/* ============ 极光流动背景 ============
   原版：opacity .30 / blur 90px / 26~38s —— 三个高饱和大色块常驻运动，
   视觉噪音大且持续吃 GPU（掉帧、发热）→ 是"不舒服"的隐形来源。
   现版：降到 .14，模糊加大到 130px，配色去饱和，周期拉长到 70~90s。 */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.au { position: absolute; border-radius: 50%; filter: blur(130px); opacity: 0.14; will-change: transform; }
.au-1 { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: #c3d4f4; animation: drift1 74s ease-in-out infinite alternate; }
.au-2 { width: 38vw; height: 38vw; right: -8vw; top: 4vh; background: #d8e6d9; animation: drift2 86s ease-in-out infinite alternate; }
.au-3 { width: 30vw; height: 30vw; left: 30vw; bottom: -12vw; background: #f0e6cf; animation: drift3 96s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(4vw, 3vh) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-3vw, 4vh) scale(0.94); } }
@keyframes drift3 { to { transform: translate(3vw, -3vh) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .aurora { display: none; } }

/* ============ 顶部导航 ============ */
#topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bd-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #topnav { background: var(--panel); }
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 20px; padding: 0 24px;
}
.wordmark {
  border: none; background: none; cursor: pointer;
  font-size: 16.5px; font-weight: 600; letter-spacing: 0; color: var(--t1);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 9px;
}
.wordmark::before { display: none; }
.brand-mark {
  width: 20px; height: 20px;
  color: var(--brand);
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.wordmark:hover .brand-mark { transform: rotate(90deg); }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-link {
  position: relative;
  border: none; background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 400; color: var(--t2);
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--subtle); color: var(--t1); }
.nav-link.active { color: var(--brand); font-weight: 500; }
.nav-link.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--brand); border-radius: 2px;
}
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- 分类 Tab 栏（与 logo 同一行） ----------
   纯文字 + 选中项蓝色下划线；放不下就横向滚动，滚动条隐藏。 */
.nav-tabs {
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-group { position: relative; display: flex; }
.nav-tabs .nav-link {
  position: relative;
  border: none; background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 400; color: var(--t2);
  padding: 9px 14px 11px;
  border-radius: 0; white-space: nowrap;
  transition: color .15s;
}
.nav-tabs .nav-link:hover { background: none; color: var(--t1); }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 500; }
.nav-tabs .nav-link.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--brand); border-radius: 2px;
}
.nav-tabs .nav-link .caret { width: 9px; height: 5px; margin-left: 5px; opacity: .55; fill: currentColor; }
.nav-tabs .nav-link.active .caret { opacity: 1; }

/* 按钮 */
.pill {
  height: 42px; padding: 0 22px; border: none; cursor: pointer;
  border-radius: var(--r-pill);           /* 胶囊圆角：比 6px 方角更"当代" */
  font-size: 14.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s, color 0.15s;
  white-space: nowrap;
}
.pill.solid { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(28, 26, 23, 0.10); }
.pill.solid:hover { background: var(--brand-hover); box-shadow: 0 6px 18px -8px rgba(48, 99, 201, 0.55); transform: translateY(-1px); }
.pill.solid:active { transform: translateY(0); }
.pill.ghost { background: transparent; color: var(--t1); border: 1px solid var(--bd-default); }
.pill.ghost:hover { background: var(--subtle); border-color: var(--bd-strong); }
.pill.icon-only { padding: 0 12px; width: 42px; justify-content: center; }
.pill .pi { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pill .pi.arr { width: 13px; height: 13px; }

.hamburger {
  display: none; border: none; background: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
}
.hamburger:hover { background: var(--subtle); }
.hamburger svg { width: 22px; height: 22px; stroke: var(--t1); stroke-width: 2; fill: none; stroke-linecap: round; }

/* ============ 移动端全屏菜单 ============ */
#menu-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--canvas);
  display: none; flex-direction: column;
}
#menu-overlay.open { display: flex; }
.mo-head {
  height: var(--nav-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--bd-soft); background: var(--panel);
}
.mo-close {
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
}
.mo-close:hover { background: var(--subtle); }
.mo-close svg { width: 20px; height: 20px; stroke: var(--t1); stroke-width: 2; fill: none; stroke-linecap: round; }
.mo-body { flex: 1; overflow-y: auto; padding: 16px 24px 40px; }
.mo-group { margin-bottom: 28px; }
.mo-group-title { font-size: var(--fs-xs); font-weight: 500; color: var(--t3); padding: 0 4px 10px; letter-spacing: 0.08em; }
.mo-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 16px 4px; font-size: 17px; font-weight: 500; color: var(--t1);
  border-bottom: 1px solid var(--bd-soft); text-align: left;
}
.mo-item .cnt { font-size: var(--fs-sm); color: var(--t3); font-weight: 400; }

/* ============ 主内容 ============ */
#app { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sect { margin: var(--sp-sect) 0; }
.sect-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
/* 中文标题不再用负字距：汉字是等宽方块，负字距会挤糊 */
.sect-head h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: 0; line-height: 1.45; color: var(--t1); }
.meta { font-size: var(--fs-xs); color: var(--t3); }
.more {
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; color: var(--brand);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0;
}
.more:hover { color: var(--brand-hover); text-decoration: underline; }
.more .pi { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cat-page { padding-top: 72px; }
.page-title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--t1); }
.page-sub { font-size: var(--fs-body); color: var(--t3); margin-top: 10px; }

/* ============ 首屏 Hero（落地页） ============ */
.hero { padding: 128px 0 64px; text-align: center; position: relative; }
.hero-eyebrow {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em;
  color: var(--brand); text-transform: uppercase; margin-bottom: 20px;
}
/* 字重 700 → 600：中文系统在 700 多为"合成粗体"，边缘发虚发黑 */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 600; letter-spacing: 0; line-height: 1.24;
}
/* 行遮罩升起 */
.mask-title .ml { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-title .ml > i {
  display: block; font-style: normal;
  transform: translateY(110%);
  animation: rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.mask-title .ml:nth-child(2) > i { animation-delay: 0.12s; }
@keyframes rise { to { transform: translateY(0); } }

.hero-sub {
  font-size: 17px; line-height: 1.75; color: var(--t2);
  max-width: 620px; margin: 20px auto 0;
}
.quickbox {
  max-width: 680px; margin: 36px auto 0;
  border: 1px solid var(--bd-default); border-radius: var(--r-pill);
  background: var(--quickbox-bg);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 24px;
  box-shadow: var(--sh-raise);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.quickbox:hover { border-color: var(--bd-strong); background: var(--panel); }
.quickbox:focus-within { border-color: var(--brand); background: var(--panel); box-shadow: var(--sh-ring); }
.quickbox input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 15.5px; font-family: inherit; color: var(--t1); min-width: 0;
  height: 38px;
}
.quickbox input::placeholder { color: var(--t4); }
.send {
  width: 38px; height: 38px; flex-shrink: 0; border: none; cursor: pointer;
  border-radius: var(--r-pill); background: var(--section); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.send svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.quickbox input:not(:placeholder-shown) ~ .send { background: var(--brand); color: var(--on-brand); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip-row.center { justify-content: center; }
.chip {
  height: 38px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--bd-default); border-radius: var(--r-pill);
  background: var(--panel); color: var(--t2);
  font-size: var(--fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--bd-active); background: var(--brand-light); color: var(--brand-deep); }
.chip.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.mod-chips { margin: 28px 0 12px; }

.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.scroll-hint {
  border: none; background: none; cursor: pointer; margin: 56px auto 0;
  display: block; color: var(--t4);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-hint svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ============ 滚动揭示 ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ============ Bento 网格 ============ */
.bento { margin: 8px 0 24px; }
.bento-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(144px, auto); gap: 18px;
}
.bento {
  position: relative; overflow: hidden;
  border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  padding: 26px; cursor: pointer; text-align: left;
  background: var(--panel);
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
  display: flex; flex-direction: column; justify-content: center;
}
.bento:hover { box-shadow: var(--sh-raise); border-color: var(--bd-default); }
.b-main { grid-column: span 2; align-items: center; text-align: center; }
.b-wide { grid-column: span 2; }
.b-v.neg { color: var(--bad); }
.b-k { font-size: var(--fs-xs); font-weight: 500; color: var(--t3); letter-spacing: 0.04em; }
.b-v { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--t1); font-variant-numeric: tabular-nums; }
.b-v small { font-size: 14px; font-weight: 500; color: var(--t3); }
.b-s { font-size: var(--fs-xs); color: var(--t3); margin-top: 6px; }
.b-ring { position: relative; width: 136px; height: 136px; margin: 14px 0 8px; }
.b-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.br-track { fill: none; stroke: var(--section); stroke-width: 7; }
.br-fill { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }
.b-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
}
.b-ring-num small { font-size: 13px; font-weight: 500; color: var(--t3); margin-left: 2px; }

/* ============ spotlight（桌面，鼠标跟随高光） ============ */
.bento::before, .nar-card::before, .arch-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color), transparent 65%);
  opacity: 0; transition: opacity 0.3s;
}
.bento.spot::before, .nar-card.spot::before, .arch-card.spot::before { opacity: 1; }

/* ============ 粘性双栏叙事 ============ */
/* ⚠️ 列宽必须用 minmax(0,1fr)：1fr 的 auto 下限=min-content，
   而 .nar-sub 是 nowrap 长文本，会把列硬撑破导致横向溢出 */
.narrative { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
.nar-sticky { position: sticky; top: calc(var(--nav-h) + 36px); min-width: 0; }
.nar-sticky h2 { font-size: 30px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.nar-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nar-card {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  padding: 28px 26px; background: var(--panel);
  cursor: pointer; text-align: left;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.nar-card:hover { box-shadow: var(--sh-raise); border-color: var(--bd-default); transform: translateX(4px); }
.nar-num { font-size: 30px; font-weight: 600; color: var(--t5); letter-spacing: -0.03em; width: 46px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.nar-main { flex: 1; min-width: 0; }
.nar-title { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.nar-sub { font-size: var(--fs-sm); color: var(--t3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nar-cnt { font-size: var(--fs-sm); color: var(--t3); flex-shrink: 0; }
.nar-arr { width: 18px; height: 18px; stroke: var(--t4); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============ CTA 大块 ============ */
/* 深色区块改用暖黑：原来用品牌蓝实色铺满，与上方暖白底调性打架，且"蓝"太抢 */
.cta-block {
  background: var(--deep-bg); color: #fff;
  border-radius: var(--r-xl); padding: 88px 48px;
  text-align: center; margin: 96px 0;
}
.cta-block h2 { font-size: 30px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.cta-block p { font-size: 15.5px; color: rgba(255, 255, 255, 0.68); margin-top: 12px; }
.cta-block .hero-cta { margin-top: 34px; }
.pill.invert.solid { background: #fff; color: var(--deep-bg); box-shadow: none; }
.pill.invert.solid:hover { background: rgba(255, 255, 255, 0.88); }
.pill.invert.ghost { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.pill.invert.ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* ============ 悬浮记一笔（移动端） ============ */
.fab {
  display: none; position: fixed; z-index: 55;
  right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border: none; cursor: pointer;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  align-items: center; justify-content: center;
  box-shadow: var(--sh-float);
  transition: transform 0.15s, background 0.15s;
}
.fab:active { transform: scale(0.94); }
.fab svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* ============ 行列表 ============ */
.rows { border-top: 1px solid var(--bd-soft); }
.rowline {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 6px; border: none; background: none; cursor: pointer;
  border-bottom: 1px solid var(--bd-soft); text-align: left;
  transition: background 0.12s;
}
button.rowline:hover { background: var(--subtle); }
div.rowline { cursor: default; }
.rl-main { flex: 1; min-width: 0; }
.rl-title { font-size: 14.5px; font-weight: 500; display: block; color: var(--t1); }
.rl-title.danger { color: var(--bad); }
.rl-sub { font-size: var(--fs-xs); color: var(--t3); margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-tail { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rl-value { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t1); }
.rl-value.income { color: var(--ok); }
.rl-value.expense { color: var(--bad); }
.rl-value.up { color: var(--up); }
.rl-value.down { color: var(--down); }
.rl-value.warn { color: var(--warn); }
.rl-value.good { color: var(--ok); }
.rowline .pi { width: 16px; height: 16px; stroke: var(--t4); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn {
  border: none; background: none; cursor: pointer; color: var(--t4);
  width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--subtle); color: var(--t1); }

.dg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 6px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--t3);
  letter-spacing: 0.04em;
}
.dg-head .income { color: var(--ok); }
.dg-head .expense { color: var(--bad); }
/* 点日历定位到的那天：短暂高亮一下，视线能立刻跟上（2026-10-06 七版） */
.dg-head {
  border-radius: var(--r-sm);
  transition: background 0.25s ease, color 0.25s ease;
}
.dg-head.flash { background: var(--brand-weak); color: var(--brand); font-weight: 600; }

.bar-track { height: 6px; background: var(--section); border-radius: var(--r-pill); overflow: hidden; margin-top: 10px; }
.bar-fill { height: 100%; background: var(--brand); border-radius: var(--r-xs); transition: width 0.5s ease; }

.check {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0;
  border: 1.5px solid var(--bd-strong); background: var(--panel); cursor: pointer;
  color: var(--on-brand); font-size: 13px; font-weight: 700; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.check.on { border-color: var(--brand); background: var(--brand); }
.rl-title.done { color: var(--t4); text-decoration: line-through; }

/* ============ 模块概览 ============ */
.mod-summary {
  display: flex; align-items: center;
  border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  padding: 26px 12px; margin: 20px 0 28px; background: var(--panel);
}
.ms-cell { flex: 1; text-align: center; min-width: 0; padding: 0 10px; }
.ms-label { font-size: var(--fs-xs); color: var(--t3); margin-bottom: 6px; white-space: nowrap; }
.ms-value { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; word-break: normal; overflow-wrap: break-word; font-variant-numeric: tabular-nums; color: var(--t1); }
.ms-sub { font-size: var(--fs-xs); color: var(--t4); margin-top: 4px; word-break: normal; overflow-wrap: break-word; }
.ms-value.good { color: var(--ok); }
.ms-value.warn { color: var(--warn); }
.ms-value.income { color: var(--ok); }
.ms-value.expense { color: var(--bad); }
.ms-value.up { color: var(--up); }
.ms-value.down { color: var(--down); }
.ms-unit { font-size: 11px; font-weight: 400; color: var(--t3); margin-left: 2px; }
.ms-divider { width: 1px; align-self: stretch; background: var(--bd-soft); flex-shrink: 0; }

.act-row { display: flex; gap: 8px; margin: 0 0 24px; }

/* ============ 图表 ============ */
.chart-wrap { position: relative; border: 1px solid var(--bd-soft); border-radius: var(--r-md); padding: 22px 18px 14px; margin-bottom: 28px; background: var(--panel); }
.chart-svg { width: 100%; height: 210px; display: block; overflow: visible; }
.c-grid { stroke: var(--bd-soft); stroke-width: 1; }
.c-goal { stroke: var(--t4); stroke-width: 1.2; stroke-dasharray: 4 4; }
.c-axis { font-size: 11.5px; fill: var(--t3); font-family: inherit; }
/* 刻度文字用 HTML 叠在图上：SVG 是 preserveAspectRatio="none" 拉伸的，
   文字若放进 SVG 会跟着非等比缩放变成"扁字" */
.chart-plot { position: relative; }
.c-ax-y, .c-ax-x, .c-ax-goal {
  position: absolute; font-size: 11.5px; color: var(--t3);
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.c-ax-y {
  left: 0; width: 6.9%; box-sizing: border-box; padding-right: 5px;
  text-align: right; transform: translateY(-50%);
}
.c-ax-x { bottom: 0; transform: translateX(-50%); }
.c-ax-goal { right: 2.5%; transform: translateY(calc(-100% - 5px)); }
.c-area { fill: var(--area-fill); }
.c-area.fade-area { opacity: 0; transition: opacity 0.8s ease 0.35s; }
.c-area.fade-area.in { opacity: 1; }
.c-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--panel); stroke: var(--brand); stroke-width: 2; }
.chart-empty { border: 1px dashed var(--bd-default); border-radius: var(--r-md); padding: 48px; text-align: center; color: var(--t3); font-size: var(--fs-sm); }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-stack { width: 100%; height: 128px; display: flex; align-items: flex-end; background: var(--section); border-radius: var(--r-sm); overflow: hidden; }
.bar-up { width: 100%; background: var(--brand); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 2px; }
.bar-x { font-size: 11.5px; color: var(--t3); white-space: nowrap; }

.nutrient-row { padding: 14px 6px; border-bottom: 1px solid var(--bd-soft); }
.nutrient-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; color: var(--t1); }
.nutrient-head .muted { color: var(--t3); font-size: var(--fs-sm); }

/* ============ 强调块 ============ */
.deep-block { background: var(--deep-bg); color: #fff; border-radius: var(--r-lg); padding: 44px 40px; margin: 28px 0; }
.bb-title { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.bb-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.62); margin-top: 8px; }
.bb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.bb-cell .bc-l { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; }
.bb-cell .bc-v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bb-cell .bc-s { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); margin-top: 4px; }

.settle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.settle-group { border: 1px solid var(--bd-soft); border-radius: var(--r-md); padding: 24px; background: var(--panel); }
.settle-head { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--t1); }
.settle-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--t3); padding: 6px 0; }
.settle-v { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============ 档案 ============ */
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.arch-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  padding: 24px; text-align: left; background: var(--panel);
  transition: box-shadow 0.15s, transform 0.15s;
}
.arch-card:hover { box-shadow: var(--sh-raise); transform: translateY(-2px); }
.arch-card .ah-k { font-size: var(--fs-xs); font-weight: 500; color: var(--brand); letter-spacing: 0.04em; }
.arch-card .ah-t { font-size: 15.5px; font-weight: 600; margin-top: 6px; color: var(--t1); }
.arch-card .ah-s { font-size: var(--fs-xs); color: var(--t3); margin-top: 6px; }
.arch-card .ah-x { margin-top: 14px; }

/* ============ 我的页 ============ */
.para { font-size: 14px; line-height: 1.85; color: var(--t2); margin-bottom: 14px; max-width: 720px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 6px; border-bottom: 1px solid var(--bd-soft); }
.set-row .sl { font-size: 14.5px; color: var(--t1); }
.set-row .sr { display: flex; align-items: center; gap: 8px; }
.set-input {
  width: 96px; text-align: right; border: none; outline: none;
  border-bottom: 1px solid var(--bd-default); background: none;
  font-size: 14.5px; font-family: inherit; color: var(--t1);
  font-variant-numeric: tabular-nums; padding: 6px 0;
}
.set-input:focus { border-bottom-color: var(--brand); box-shadow: var(--sh-ring); }
.set-unit { font-size: var(--fs-xs); color: var(--t3); width: 28px; }

/* ============ 页脚 ============ */
#footer { position: relative; z-index: 1; border-top: 1px solid var(--bd-soft); margin-top: 96px; background: var(--panel); }
.foot-cols {
  max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.fc-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 14px; color: var(--t1); }
.fc-item {
  display: block; width: 100%; border: none; background: none; cursor: pointer;
  text-align: left; font-size: var(--fs-sm); color: var(--t3); padding: 6px 0;
}
.fc-item:hover { color: var(--brand); text-decoration: underline; }
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 48px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: var(--fs-xs); color: var(--t4);
  border-top: 1px solid var(--bd-soft);
}

/* ============ 弹窗 ============ */
.sheet-mask {
  position: fixed; inset: 0; z-index: 100;
  background: var(--sheet-mask-bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  padding: 24px;
}
.sheet-mask.show { opacity: 1; pointer-events: auto; }
.sheet {
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: var(--panel); border-radius: var(--r-lg);
  padding: 28px 32px 32px;
  transform: translateY(10px) scale(0.985); transition: transform 0.2s ease;
  box-shadow: var(--sh-overlay);
}
.sheet-mask.show .sheet { transform: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sheet-title { font-size: 21px; font-weight: 600; letter-spacing: 0; color: var(--t1); }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label { font-size: var(--fs-xs); font-weight: 500; color: var(--t2); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--bd-default); border-radius: var(--r-sm);
  background: var(--canvas); padding: 11px 14px;
  font-size: 14.5px; font-family: inherit; color: var(--t1);
  outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--bd-strong); background: var(--panel); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: var(--panel); box-shadow: var(--sh-ring); }
.field textarea { resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2380868b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  padding-right: 32px;
}
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--bd-strong); border-radius: var(--r-pill); transition: background 0.2s; cursor: pointer; }
.switch span::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::before { transform: translateX(20px); }

/* ============ 轻提示 ============ */
#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
  background: var(--toast-bg); color: var(--toast-fg);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; z-index: 200;
  opacity: 0; pointer-events: none; transition: all 0.22s ease;
  box-shadow: var(--sh-float);
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.empty { padding: 48px 20px; text-align: center; color: var(--t3); font-size: var(--fs-sm); border: 1px dashed var(--bd-default); border-radius: var(--r-md); }

/* ============ 主题切换 · 圆形扩散（View Transitions） ============ */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 999; }

/* ============ 尊重系统「减弱动态效果」 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mask-title .ml > i { transform: none; }
  .au { animation: none; }
}

/* ==========================================================
   响应式
   ========================================================== */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right .pill.ghost:not(.icon-only) { display: none; }
  .nav-right .pill.solid { display: none; }   /* 移动端由 FAB 承担「记一笔」 */
  .hamburger { display: inline-flex; }
  .fab { display: inline-flex; }
  #app { padding: 0 20px; }
  .hero { padding: 56px 0 24px; }
  .hero-title, .page-title { font-size: clamp(32px, 9vw, 42px); }
  .hero-sub { font-size: 15px; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .b-main { grid-column: span 2; }
  .bento:last-child { grid-column: 1 / -1; }
  .narrative { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nar-sticky { position: static; }
  .nar-card { padding: 18px 16px; }
  .nar-num { font-size: 24px; width: 36px; }
  .nar-sub { white-space: normal; }   /* 窄屏允许换行，不再单行省略 */
  .bb-grid, .settle-grid, .arch-grid { grid-template-columns: 1fr; }
  .deep-block { padding: 28px 22px; }
  .cta-block { padding: 48px 24px; border-radius: var(--r-lg); }
  .cta-block h2 { font-size: 24px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .sect { margin: 40px 0; }
  .sheet { padding: 20px; }
  .au { opacity: 0.18; }
}
/* ==========================================================
   理财页 · 一页到底（2026-10-05）
   净资产 → 本月收支 → 记一笔 → 支出分类 → 日历 → 账单
   记一笔弹窗：类型 tabs + 分类宫格 + 大金额（参照「小青账」）
   ========================================================== */

/* ① 净资产总览：复用 .mod-summary 三格，右下角补口径说明 */
.fin-net { position: relative; flex-wrap: wrap; }
.fin-net-note {
  position: absolute; right: 14px; bottom: 6px;
  font-size: 11px; color: var(--t4);
}

/* ② 本月收支大数字卡 */
.fin-hero {
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-md); padding: 22px 20px 18px;
  margin: 16px 0 12px;
}
.fh-label { font-size: 13px; opacity: .82; }
.fh-amount {
  font-size: 36px; font-weight: 700; letter-spacing: -.5px;
  margin: 4px 0 12px; line-height: 1.15;
}
.fh-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; opacity: .95; }
.fh-row b { font-weight: 600; }

/* ③ 支出结构（2026-10-06 七版：**上下结构** —— 上饼图、下分类列表）
   之前是左右（饼图 150px 占左，列表挤右边两列），饼图偏小、列表每格太窄，
   分类名会被压成一字一行（"交" "通" 各占一行）。改成上下后宽度全给列表。 */
.fin-stat { display: block; }
/* 上：饼图居中 */
.fin-donut { display: flex; justify-content: center; cursor: pointer; margin-bottom: 18px; }
.fin-donut svg { width: 176px; height: 176px; display: block; }
.fd-label { font-size: 11px; fill: var(--t3); }
.fd-amt { font-size: 15px; font-weight: 700; fill: var(--t1); }
/* 扇形可点：hover 加粗，下钻时选中片加粗、其余淡出 */
.fd-seg { transition: stroke-width 0.18s ease, opacity 0.18s ease; }
.fd-seg:hover { stroke-width: 23; }
.fd-seg.dim { opacity: 0.28; }
.fd-seg.on { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)); }
.fd-empty { stroke: var(--bd-default); }
/* 下：分类列表占满整宽 */
.fin-cat-col { width: 100%; }
/* 分类列表：宽屏排两列（单列 940px 时金额离名称太远，扫读很累） */
.fin-cat-rows {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px;
  align-content: start;
}
@media (max-width: 899px) { .fin-cat-rows { grid-template-columns: minmax(0, 1fr); } }
.fin-cat-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 8px; border: none; background: none; font: inherit;
  text-align: left; cursor: pointer; border-bottom: 1px solid var(--bd-soft);
  border-radius: var(--r-sm); transition: background 0.12s;
}
.fin-cat-row:hover { background: var(--subtle); }
.fin-cat-row.on { background: var(--subtle); box-shadow: inset 2px 0 0 var(--brand); }
.fin-cat-row:last-child { border-bottom: none; }
/* 🔴 分类名不能被压成竖排（一字一行）：rl-main 允许收缩，但标题本身 nowrap +
   给足最小宽度，剩余空间让给占比条 */
.fin-cat-row .rl-main { min-width: 92px; }
.fin-cat-row .rl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 🔴 .bar-track 是 <span>，父级 flex 里默认 inline → 宽高全塌成 0，条形一直看不见。必须给 display:block */
.fin-cat-row .bar-track { display: block; margin-top: 6px; }
.fin-cat-row .bar-fill { display: block; }
.fin-cat-row .rl-title em { font-style: normal; font-weight: 400; color: var(--t3); margin-left: 4px; }
.fin-cat-row .rl-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.fin-cat-row b.up, .fin-cat-row b.down { font-size: 11px; font-weight: 600; margin-left: 4px; }
.fin-cat-row b.up { color: var(--up); }
.fin-cat-row b.down { color: var(--down); }
/* 下钻面板 */
.fin-drill-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 0 10px; border-bottom: 1px solid var(--bd-soft);
}
.fin-crumb {
  border: 1px solid var(--bd-default); background: var(--panel); cursor: pointer;
  font: inherit; font-size: 12px; color: var(--t2);
  padding: 4px 10px; border-radius: var(--r-pill); transition: all 0.15s;
}
.fin-crumb:hover { border-color: var(--brand); color: var(--brand); }
.fin-drill-sum { font-size: 13px; color: var(--t1); }
.fin-drill-sum b { font-weight: 600; }
.fin-drill-sum em { font-style: normal; font-size: 12px; color: var(--t3); }
.fin-sub-rows { margin-top: 2px; }
.fin-drill-bills { margin-top: 14px; }
.fin-drill-bt {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--t2); font-weight: 600; padding-bottom: 6px;
}
.fin-bills-sub { max-height: 236px; }

/* ④ 账单行图标（圆形 emoji 底） */
.bill-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; background: var(--subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
}
.rl-value.muted { color: var(--t3); }
.dg-today {
  font-style: normal; font-size: 11px; color: var(--brand);
  background: var(--brand-light); border-radius: var(--r-xs);
  padding: 1px 6px; margin-left: 4px;
}

/* ⑤ 日历（周一首位；有支出=浅红底；今天=描边；选中=品牌底） */
.fin-cal {
  background: var(--panel); border: 1px solid var(--bd-default);
  border-radius: var(--r-md); padding: 14px 12px 12px;
}
.fc-head, .fc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fc-head span { text-align: center; font-size: 12px; color: var(--t3); padding: 2px 0 6px; }
.fc-cell {
  border: none; background: var(--subtle); border-radius: var(--r-sm);
  min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px; cursor: pointer; font-family: inherit; min-width: 0;
}
.fc-blank { background: none; cursor: default; }
.fc-cell.has { background: var(--bad-bg); }
.fc-cell.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.fc-cell.sel { background: var(--brand); }
.fc-cell.sel .fc-d { color: var(--on-brand); }
.fc-d { font-size: 13px; font-weight: 600; color: var(--t1); }
.fc-amt {
  font-size: 10px; color: var(--bad); white-space: nowrap;
  overflow: hidden; max-width: 100%; line-height: 1.2;
}
.fc-cell.sel .fc-amt { color: var(--on-brand); opacity: .9; }
/* 点某天 → 左边流水跳过去，加个 hover 提示这个格可点 */
.fc-cell.has:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.fc-cell.sel:hover { box-shadow: none; }
.fc-nav {
  border: none; background: none; color: var(--t2); font-size: 16px;
  cursor: pointer; padding: 0 6px; font-family: inherit;
}
.fc-nav:hover { color: var(--brand); }
.fin-cal-sum {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 4px 0; font-size: 13px; color: var(--t2);
}

/* ⑦ 模块区块（投资/负债/账户，纵向排布） */
.fin-mod { margin-top: 8px; padding-top: 8px; }
.fin-mod-head { border-top: 1px solid var(--bd-soft); padding-top: 20px; }

/* 记一笔弹窗：分类宫格 */
.bg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 14px 0 18px;
}
.bg-item {
  border: 1.5px solid transparent; background: var(--subtle);
  border-radius: var(--r-sm); padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; font-family: inherit; min-width: 0;
}
.bg-item.on { background: var(--brand-light); border-color: var(--brand); }
.bg-ico { font-size: 22px; line-height: 1.2; }
.bg-name { font-size: 12px; color: var(--t2); white-space: nowrap; }
.bg-item.on .bg-name { color: var(--brand); font-weight: 600; }

/* 记一笔弹窗：大金额输入 */
.bill-amount {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 2px 8px; border-bottom: 2px solid var(--bd-strong);
}
.bill-amount > span { font-size: 22px; font-weight: 600; color: var(--bad); }
.bill-amount input {
  border: none; outline: none; background: none; width: 100%;
  font-size: 32px; font-weight: 700; color: var(--t1); font-family: inherit;
  letter-spacing: -.5px;
}
.bill-amount input::placeholder { color: var(--t5); font-weight: 600; }

/* 移动端：宫格 4 列已够用，日历格略缩 */
@media (max-width: 640px) {
  .fin-hero { padding: 18px 16px 14px; }
  .fh-amount { font-size: 30px; }
  .fc-cell { min-height: 46px; }
  .fc-amt { font-size: 9px; }
  .fin-donut svg { width: 148px; height: 148px; }
}
.fin-cal { max-width: 560px; }   /* 桌面端日历限宽，避免 7 格被拉扁 */

/* ==========================================================
   运动页（2026-10-06）· 一页到底
   ----------------------------------------------------------
   概览条 → 线路库（想去 / 已去）→ 徒步 → 骑行 → 跑步 → 日常运动 → 装备
   线路卡 = 档案头（点开展开）+ 轨迹图/地图 + 爬升剖面 + 攻略 8 节 + 历次记录
   轨迹相关色：轨迹线 #1D9E75、终点 #c4402f、标注点 #BA7517
   ========================================================== */

/* ---------- ① 概览条 ---------- */
.sp-ov {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 36px;
}
.sp-ov-cell {
  background: var(--panel);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  padding: 12px 12px 11px;
}
.sp-ov-l { font-size: var(--fs-xs); color: var(--t3); }
.sp-ov-v { margin-top: 4px; font-size: 20px; font-weight: 600; color: var(--t1); letter-spacing: -.2px; }
.sp-ov-v i { font-style: normal; font-size: var(--fs-xs); font-weight: 500; color: var(--t3); margin-left: 3px; }
@media (max-width: 560px) {
  .sp-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ② 线路库 ---------- */
.sp-route-wrap { margin-bottom: 46px; }
.sp-group-h {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 10px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--t2);
}
.sp-group-h::after { content: ''; flex: 1; height: 1px; background: var(--bd-soft); }
.sp-group-n {
  order: 1;                     /* 数量徽标排在文字后面、横线之前 */
  font-size: var(--fs-xs); font-weight: 500; color: var(--t3);
  background: var(--subtle); border-radius: var(--r-pill); padding: 2px 8px;
}
.sp-group-h::after { order: 2; }

.sp-card {
  background: var(--panel);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.sp-card.open { border-color: var(--bd-default); box-shadow: var(--sh-raise); }

.sp-card-head {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  padding: 14px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.sp-head-main { flex: 1; min-width: 0; display: block; }
.sp-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-h3); font-weight: 600; color: var(--t1);
}
.sp-badge {
  font-size: var(--fs-xs); font-weight: 500;
  border-radius: var(--r-pill); padding: 2px 9px;
}
.sp-badge.want { background: var(--brand-light); color: var(--brand); }
.sp-badge.done { background: var(--ok-bg); color: var(--ok); }
.sp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-chip-t {
  font-size: var(--fs-xs); color: var(--t3);
  background: var(--subtle); border-radius: var(--r-sm); padding: 2px 8px;
}
.sp-chip-t.on { background: var(--ok-bg); color: var(--ok); }
.sp-caret { flex: 0 0 auto; margin-top: 4px; color: var(--t4); display: flex; transition: transform .2s; }
.sp-caret svg { width: 18px; height: 18px; }
.sp-card.open .sp-caret { transform: rotate(90deg); }

.sp-detail { padding: 6px 14px 16px; border-top: 1px solid var(--bd-soft); }

/* ---------- 轨迹图 / 地图 ---------- */
.sp-map {
  height: 260px; margin-top: 14px;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--section); position: relative;
}
.sp-map-wait {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--t3); font-size: var(--fs-sm);
}
.sp-fallback { position: relative; height: 100%; }
.sp-fallback-tip {
  position: absolute; top: 8px; left: 12px; z-index: 2;
  font-size: var(--fs-xs); color: var(--t3);
  background: var(--panel); border-radius: var(--r-sm); padding: 3px 9px;
}
.sp-track-svg { width: 100%; height: 100%; display: block; }
.sp-track-line { stroke: #1D9E75; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sp-track-start { fill: #1D9E75; stroke: #fff; stroke-width: 2; }
.sp-track-end { fill: #c4402f; stroke: #fff; stroke-width: 2; }
.sp-wp-dot { fill: #BA7517; stroke: #fff; stroke-width: 2; }
.sp-wp-tx { font-size: 10px; fill: var(--t2); font-weight: 600; }

.sp-tmeta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sp-tmeta-cell { background: var(--subtle); border-radius: var(--r-sm); padding: 9px 10px; }
.sp-tmeta-l { font-size: var(--fs-xs); color: var(--t3); }
.sp-tmeta-v { margin-top: 3px; font-size: var(--fs-h3); font-weight: 600; color: var(--t1); }
.sp-tmeta-v i { font-style: normal; font-size: var(--fs-xs); font-weight: 500; color: var(--t3); margin-left: 3px; }
@media (max-width: 560px) {
  .sp-tmeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 通用小节 ---------- */
.sp-blk { margin-top: 22px; }
.sp-blk-h {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--t2);
  margin-bottom: 10px;
}
.sp-blk-n { font-size: var(--fs-xs); font-weight: 500; color: var(--t3); }

/* ---------- 爬升剖面 ----------
   ⚠️ 同 chart：SVG 横向铺满（preserveAspectRatio="none"），刻度文字必须放在
   SVG 外面用 HTML 定位，否则会变成"扁字" */
.sp-prof { background: var(--subtle); border-radius: var(--r-md); padding: 8px 0 2px; }
.sp-prof-plot { position: relative; height: 150px; }
.sp-prof-svg { width: 100%; height: 100%; display: block; }
.sp-prof-grid { stroke: var(--bd-default); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-prof-area { fill: var(--area-fill); }
.sp-prof-line { stroke: #1D9E75; stroke-width: 2; stroke-linejoin: round; }
.sp-prof-y, .sp-prof-x {
  position: absolute; font-size: var(--fs-xs); color: var(--t4);
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.sp-prof-y {
  left: 0; width: 7.2%; box-sizing: border-box; padding-right: 6px;
  text-align: right; transform: translateY(-50%);
}
.sp-prof-x { bottom: 3px; }
.sp-prof-xr { transform: translateX(-100%); }

/* ---------- 标注点 ---------- */
.sp-wps { display: flex; flex-direction: column; }
.sp-wp {
  display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--bd-soft);
}
.sp-wp:last-child { border-bottom: 0; }
.sp-wp-i {
  grid-row: span 2; align-self: start;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--warn-bg); color: var(--warn);
  font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.sp-wp-t { font-size: var(--fs-sm); color: var(--t1); }
.sp-wp-d { font-size: var(--fs-xs); color: var(--t3); }

/* ---------- 攻略 8 节 ---------- */
.sp-guide { display: flex; flex-direction: column; }
.sp-guide-sec { padding: 11px 0; border-bottom: 1px solid var(--bd-soft); }
.sp-guide-sec:last-child { border-bottom: 0; }
.sp-guide-l { font-size: var(--fs-xs); font-weight: 600; color: var(--ok); margin-bottom: 5px; }
.sp-guide-v { font-size: var(--fs-sm); color: var(--t1); line-height: 1.75; }

.sp-src { margin-top: 10px; font-size: var(--fs-xs); color: var(--t4); }

/* ---------- 历次记录 / 操作 ---------- */
.sp-visits .rowline { border-radius: var(--r-sm); }
.sp-acts { flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- 其余模块 ---------- */
.sp-mod { margin-bottom: 46px; }
.sp-mod-head { margin-bottom: 14px; }

/* ---------- 线路库弹窗 ---------- */
.sp-sheet-note {
  font-size: var(--fs-xs); color: var(--t3); line-height: 1.7;
  background: var(--subtle); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 18px;
}
.sp-file-blk {
  border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  padding: 12px; margin-top: 18px;
}
.sp-file-h { font-size: var(--fs-sm); font-weight: 600; color: var(--t2); margin-bottom: 10px; }
.sp-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-file-btn {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-sm); cursor: pointer;
}
.sp-file-tip { font-size: var(--fs-xs); color: var(--t4); }
.sp-file-info { margin-top: 10px; }
.sp-tinfo-ok { background: var(--ok-bg); border-radius: var(--r-sm); padding: 10px 12px; }
.sp-tinfo-h { font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.sp-tinfo-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; font-size: var(--fs-xs); color: var(--t2); }
.sp-tinfo-err {
  background: var(--bad-bg); color: var(--bad);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm);
}
.sp-guide-form { display: flex; flex-direction: column; }

/* ---------- 地图未就绪 / 没有位置时的提示 ---------- */
.sp-map-tip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; padding: 0 26px;
  color: var(--t3); font-size: var(--fs-sm); line-height: 1.7;
}
.sp-fallback-plain {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 6px; text-align: center; padding: 0 26px;
}
.sp-fallback-plain .sp-fallback-tip { position: static; background: none; padding: 0; }
.sp-fallback-kw { font-size: var(--fs-h3); font-weight: 600; color: var(--t1); }
.sp-fallback-sub { font-size: var(--fs-xs); color: var(--t3); }
.sp-fallback-sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--subtle); border-radius: var(--r-xs); padding: 1px 5px;
}
.sp-src-none { color: var(--t3); }
.sp-loc-line { margin-top: 8px; font-size: var(--fs-xs); color: var(--t3); }

/* ---------- 运动总览线路地图 ---------- */
.sp-hero-map {
  height: 82.5vh;
  min-height: 480px;
  max-height: 720px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--section);
  position: relative;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .sp-hero-map { height: 75vh; min-height: 420px; }
}
.sp-over-svg { width: 100%; height: 100%; display: block; }
.sp-over-line { stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sp-over-line.done { stroke: #1D9E75; }
.sp-over-line.want { stroke: #D85A30; }
.sp-over-pt { stroke: #fff; stroke-width: 2; }
.sp-over-pt.done { fill: #1D9E75; }
.sp-over-pt.want { fill: #D85A30; }

/* ========== 运动页：总览页 + 二级页（2026-10-06 方案 B） ========== */

/* 总览地图容器 + 全屏按钮 */
.sp-hero-wrap { position: relative; margin-bottom: 26px; }
.sp-hero-wrap.sp-hero-compact { margin: 0; }
.sp-hero-compact .sp-hero-map { height: 525px; min-height: 460px; max-height: 620px; border-radius: 15px; }
.sp-fullbtn {
  /* 放左上角：右上角被腾讯地图自带的罗盘/定位控件占着 */
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: none; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93); color: #1a1a1a;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
  transition: background .15s;
}
.sp-fullbtn:hover { background: #fff; }
.sp-fullbtn .pi { width: 15px; height: 15px; }

/* 本月数字 */
.sp-stat {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--bd-soft); border-radius: var(--r-md); overflow: hidden;
  margin: 0 0 22px;
}
.sp-stat-cell { background: var(--panel); padding: 14px 16px; }
.sp-stat-l { font-size: var(--fs-xs); color: var(--t3); margin-bottom: 5px; }
.sp-stat-v { font-size: 19px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.sp-stat-v i { font-size: var(--fs-xs); font-weight: 400; color: var(--t3); font-style: normal; margin-left: 2px; }

/* 模块入口 */
.sp-entries { display: flex; flex-direction: column; gap: 10px; }
.sp-entry {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1px solid var(--bd-soft); border-radius: var(--r-md);
  background: var(--panel); font-family: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sp-entry:hover { border-color: var(--brand); background: var(--subtle); }
.sp-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-entry-t { font-size: 16px; font-weight: 600; color: var(--t1); }
.sp-entry-s { font-size: var(--fs-xs); color: var(--t3); }
.sp-entry-n {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 15px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums;
}
.sp-entry-n i { font-size: var(--fs-xs); font-weight: 400; color: var(--t3); font-style: normal; }
.sp-entry-n em { font-size: var(--fs-xs); font-weight: 400; color: var(--brand); font-style: normal; }
.sp-entry > .pi { width: 18px; height: 18px; color: var(--t4); flex: 0 0 auto; }

/* 二级页头部 */
.sp-subhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sp-back {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 7px 12px 7px 8px; border: none; border-radius: var(--r-pill);
  background: var(--subtle); color: var(--t2);
  font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: background .15s, color .15s;
}
.sp-back:hover { background: var(--section); color: var(--t1); }
.sp-back .pi { width: 16px; height: 16px; }
.sp-subhead-t { flex: 1; font-size: 18px; font-weight: 600; color: var(--t1); }
.sp-new { font-size: var(--fs-sm); }
.sp-chips { margin-bottom: 18px; }
.sp-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 76px; }   /* 底部留白：别让悬浮按钮压住最后一张卡 */

/* 运动门户总览 */
.sp-nav { display:flex; align-items:center; gap:6px; margin: 2px 0 20px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--bd-soft); border-radius:var(--r-pill); background:var(--subtle); }
.sp-nav button { border:0; background:transparent; color:var(--t2); border-radius:var(--r-pill); padding:8px 14px; font-family:inherit; font-size:var(--fs-sm); font-weight:500; cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; }
.sp-nav button.on { background:var(--panel); color:var(--t1); box-shadow:0 1px 4px rgba(20,30,50,.1); }
.sp-nav i { margin-left:4px; color:var(--t3); font-size:11px; font-style:normal; }
.sp-home { padding-bottom:88px; }
.sp-welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:22px 0 24px; }
.sp-eyebrow { display:block; margin-bottom:7px; color:var(--t3); font-size:10px; font-weight:650; letter-spacing:.14em; }
.sp-welcome h2 { margin:0; color:var(--t1); font-size:clamp(22px,3vw,30px); line-height:1.25; letter-spacing:-.035em; font-weight:650; }
.sp-welcome p { margin:8px 0 0; color:var(--t3); font-size:var(--fs-sm); }
.sp-home-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.sp-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 16px; }
.sp-overview-card,.sp-map-preview { min-width:0; border:1px solid var(--bd-soft); border-radius:var(--r-lg); background:var(--panel); padding:18px; }
.sp-card-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; }
.sp-card-title h3 { margin:0; color:var(--t1); font-size:17px; font-weight:620; letter-spacing:-.02em; }
.sp-card-title p { margin:5px 0 0; color:var(--t3); font-size:var(--fs-xs); }
.sp-text-link { border:0; background:none; color:var(--brand); font-family:inherit; font-size:var(--fs-xs); font-weight:500; white-space:nowrap; cursor:pointer; }
.sp-preview-row { display:flex; align-items:center; gap:11px; width:100%; padding:13px 0; border:0; border-top:1px solid var(--bd-soft); background:transparent; text-align:left; cursor:pointer; }
.sp-preview-row:hover .sp-preview-copy b { color:var(--brand); }
.sp-preview-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; font-size:16px; }
.sp-preview-icon.route { color:#287b65; background:#e7f4ef; }
.sp-preview-icon.guide { color:#725bb0; background:#f0ecfa; }
.sp-preview-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.sp-preview-copy b { overflow:hidden; color:var(--t1); font-size:var(--fs-sm); font-weight:590; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; }
.sp-preview-copy small { overflow:hidden; color:var(--t3); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.sp-status { flex:0 0 auto; padding:4px 8px; border-radius:var(--r-pill); font-size:10px; }
.sp-status.want { color:#996324; background:#fbf1df; }
.sp-status.done { color:#287b65; background:#e7f4ef; }
.sp-preview-count { color:var(--t3); font-size:11px; font-variant-numeric:tabular-nums; }
.sp-preview-empty { padding:16px 0 5px; border-top:1px solid var(--bd-soft); color:var(--t3); font-size:var(--fs-xs); line-height:1.65; }
.sp-map-preview { margin-top:0; }
.sp-map-preview .sp-card-title { margin-bottom:13px; }
.sp-map-slot { min-height:0; }
.sp-data-note { margin:13px 2px 0; color:var(--t4); font-size:11px; }
.sp-subhead-t { display:flex; flex-direction:column; gap:4px; }
.sp-subhead-t small { color:var(--t3); font-size:var(--fs-xs); font-weight:400; }
@media (max-width: 680px) {
  .sp-welcome { align-items:flex-start; flex-direction:column; gap:17px; padding:15px 0 20px; }
  .sp-home-actions { width:100%; }
  .sp-home-actions button { flex:1; }
  .sp-overview-grid { grid-template-columns:1fr; gap:11px; }
  .sp-overview-card,.sp-map-preview { padding:15px; }
  .sp-overview-card .sp-card-title { padding-right:58px; }
  .sp-preview-row { padding-right:58px; }
  .sp-stat-cell { padding:12px 10px; }
  .sp-stat-v { font-size:17px; }
  .sp-stat-l { font-size:10px; }
  .sp-hero-compact .sp-hero-map { height:475px; min-height:420px; max-height:560px; }
  body:has(#page-sport.active) .fab { width:48px; height:48px; right:14px; bottom:14px; }
  body:has(#page-sport.active) .fab svg { width:22px; height:22px; }
}

/* 全屏地图 */
.sp-mapfull {
  position: fixed; inset: 0; z-index: 300;
  background: var(--panel);
  display: none; flex-direction: column;
}
.sp-mapfull.open { display: flex; }
body.sp-mapfull-open { overflow: hidden; }
.sp-mapfull-bar {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 12px 16px; border-bottom: 1px solid var(--bd-soft); background: var(--panel);
}
.sp-mf-back { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); }
.sp-mf-back .pi { width: 16px; height: 16px; }
.sp-mapfull-t { flex: 1; font-size: 15px; font-weight: 600; color: var(--t1); }
.sp-mapfull-legend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--t3); }
.sp-mapfull-legend .lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sp-mapfull-legend .lg-done { background: #1D9E75; }
.sp-mapfull-legend .lg-want { background: #D85A30; margin-left: 8px; }
.sp-mapfull-canvas { flex: 1; min-height: 0; position: relative; background: var(--section); }
.sp-mapfull-hint {
  flex: 0 0 auto; padding: 10px 16px; text-align: center;
  font-size: var(--fs-xs); color: var(--t3);
  border-top: 1px solid var(--bd-soft); background: var(--panel);
}

/* ---------- 攻略块 / 「引用线路」链接 ----------
   攻略是独立于线路库的一块；两边互相引用时用 .sp-ref 做跳转入口 */
.sp-guide-wrap { margin-bottom: 46px; }
.sp-gcard .sp-badge.ref { background: var(--brand-light); color: var(--brand); }
.sp-refs { display: flex; flex-direction: column; gap: 6px; }
.sp-ref {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px;
  background: var(--subtle); border: none; border-radius: var(--r-sm);
  font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.sp-ref:hover { background: var(--section); }
.sp-ref-t { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--t1); }
.sp-ref-s { font-size: var(--fs-xs); color: var(--t3); }
.sp-ref .pi { width: 16px; height: 16px; color: var(--t4); flex: 0 0 auto; }

/* ==========================================================
   理财页 · 网页版报表布局（2026-10-05 二版：报表为主 + 宽屏多栏）
   桌面 ≥900px 用栅格（2 栏 / 3 栏），移动端自动回落单列
   ========================================================== */

/* 工具条：期间前后翻 + 月/年 + 记一笔 */
.fin-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 16px;
}
.fin-period { display: flex; align-items: center; gap: 8px; }
.fp-title { font-size: 17px; font-weight: 600; color: var(--t1); min-width: 96px; text-align: center; }
.fin-view { display: flex; align-items: center; gap: 8px; }
.fin-bar .seg {
  border: 1px solid var(--bd-default); background: var(--panel);
  border-radius: var(--r-sm); padding: 7px 14px; font-size: 13px;
  color: var(--t2); cursor: pointer; font-family: inherit;
}
.fin-bar .seg.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

/* KPI 四格 */
.fin-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.fk-cell {
  background: var(--panel); border: 1px solid var(--bd-default);
  border-radius: var(--r-md); padding: 14px 16px;
}
.fk-label { font-size: 12px; color: var(--t3); margin-bottom: 6px; }
.fk-value { font-size: 24px; font-weight: 700; letter-spacing: -.4px; color: var(--t1); line-height: 1.2; }
.fk-value.expense { color: var(--bad); }
.fk-value.income  { color: var(--ok); }
.fk-value.good    { color: var(--ok); }
.fk-value.warn    { color: var(--warn); }
.fk-sub { font-size: 11px; color: var(--t4); margin-top: 5px; }
.fk-sub .up { color: var(--up); font-weight: 600; }
.fk-sub .down { color: var(--down); font-weight: 600; }
.fk-note { color: var(--t5); }

/* 栅格：2 栏（左宽右窄）/ 3 栏均分 */
.fin-grid-2 {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.fin-grid-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; align-items: start; margin-top: 8px;
}
.fin-grid-2 > .sect, .fin-grid-3 > .fin-mod { min-width: 0; }

/* 柱状图 */
.fin-bars svg { width: 100%; height: auto; display: block; }
.fb-grid { stroke: var(--bd-soft); stroke-width: 1; }
.fb-axis { font-size: 10px; fill: var(--t3); }
.fb-val { fill: var(--t1); font-weight: 600; }
.fb-hit { cursor: pointer; }
.fb-hit:hover { fill: rgba(48, 99, 201, 0.06); }
.fin-legend { display: flex; gap: 16px; font-size: 12px; color: var(--t2); margin-top: 8px; }
.fin-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* 预算条 */
.fin-budget { margin-top: 14px; }
.fb-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--t2); margin-bottom: 6px; }

/* 数据表格 */
.fin-table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--t3);
  padding: 8px 10px; border-bottom: 1px solid var(--bd-default); white-space: nowrap;
}
.fin-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--bd-soft); color: var(--t1); white-space: nowrap;
}
.fin-table td:first-child { white-space: normal; }
.fin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table .num.expense { color: var(--bad); }
.fin-table .num.income { color: var(--ok); }
.fin-table .muted { color: var(--t4); }
.fin-table .up { color: var(--up); font-weight: 600; }
.fin-table .down { color: var(--down); font-weight: 600; }
.fin-table tbody tr:hover { background: var(--subtle); }
.ft-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 14px;
  margin-right: 8px; vertical-align: middle;
}
.ft-bar {
  display: inline-block; width: 60px; height: 5px; background: var(--subtle);
  border-radius: 3px; margin-right: 8px; vertical-align: middle; overflow: hidden;
}
.ft-bar i { display: block; height: 100%; border-radius: 3px; }

/* 当日账单小标题 */
.fin-day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--t1); padding: 12px 2px 4px;
}
.fin-more { width: 100%; justify-content: center; margin-top: 10px; }

/* 账单列表：定高内滚，避免"账多就把整页撑长" */
.fin-bills { max-height: 372px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.fin-bills::-webkit-scrollbar { width: 8px; }
.fin-bills::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; }
.fin-bills::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 899px) { .fin-bills { max-height: none; overflow: visible; } }

/* 移动端回落单列 */
@media (max-width: 899px) {
  .fin-grid-2, .fin-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-value { font-size: 20px; }
}


/* ==========================================================
   理财页 · 紧凑模式（2026-10-06：用户要"再紧凑一点"）
   只作用于 #fin-body / 弹窗内，其他页（落地页叙事节奏）不变
   ========================================================== */
#page-finance .page-title { font-size: 26px; }
#page-finance .page-sub { margin-top: 6px; }
#fin-body .sect { margin: 22px 0; }            /* 落地页节奏 88px → 22px */
#fin-body .sect-head { margin-bottom: 12px; }
#fin-body .sect-head h2 { font-size: 17px; }   /* 21px → 17px */
#fin-body .rowline { padding: 11px 6px; }      /* 账单行 16px → 11px */
#fin-body .dg-head { padding: 7px 0 2px; }
.fin-bar { margin: 0 0 14px; }
.fin-kpis { gap: 10px; margin-bottom: 16px; }
.fk-cell { padding: 11px 14px; }
.fk-label { font-size: 11px; margin-bottom: 4px; }
.fk-value { font-size: 21px; }
.fk-sub { font-size: 11px; margin-top: 4px; }
.fin-grid-2, .fin-grid-3 { gap: 18px; }
/* 趋势图现在独占一行，别让它被拉成一整屏宽（viewBox 680 等比放大会让刻度字变巨大） */
#fin-body .fin-bars svg { max-width: 880px; }
/* 三栏里的模块小结（投资/负债/资产）挤在 ~110px 里，单独收小一档 */
#fin-body .fin-grid-3 .ms-cell { padding: 0 6px; }
#fin-body .fin-grid-3 .ms-label { font-size: 10.5px; }
#fin-body .fin-grid-3 .ms-value { font-size: 16px; }
#fin-body .fin-grid-3 .ms-sub { font-size: 10px; }
/* 🔴 七版改上下结构后，饼图由 .fin-donut svg 的 width 控尺寸；
   这里不要再写 flex 基准宽度（那是旧左右布局留下的，会覆盖 .fin-donut 的居中规则） */
.fin-cat-row { padding: 7px 8px; }
.fin-cat-row .bill-ico { width: 32px; height: 32px; flex: 0 0 32px; font-size: 17px; }
#fin-body .rowline .bill-ico { width: 32px; height: 32px; flex: 0 0 32px; font-size: 17px; }
.fin-table th { padding: 6px 10px; }
.fin-table td { padding: 6px 10px; }
.ft-ico { width: 24px; height: 24px; font-size: 13px; margin-right: 6px; }
.ft-bar { width: 48px; }
.fc-cell { min-height: 44px; }
.fc-amt { font-size: 9.5px; }
.fin-legend { margin-top: 6px; }
.fin-budget { margin-top: 10px; }
.fin-day-head { padding: 10px 2px 2px; }
@media (max-width: 640px) {
  .fin-donut svg { width: 140px; height: 140px; }
  .fc-cell { min-height: 40px; }
}

/* 理财分类环图尺寸校正：图表只按自身内容展示，不再随整张卡片横向放大。
   引线标签继续包含在 SVG viewBox 内；小分类由下方列表完整呈现。 */
#fin-body .fin-donut-row:not(.split) > .fin-donut {
  flex: 0 1 100%;
  width: 100%;
}
#fin-body .fin-donut-row:not(.split) > .fin-donut svg {
  width: auto;
  height: 270px;
  max-width: 100%;
}
#fin-body .fin-donut-row.split > .fin-donut {
  flex: 1 1 0;
  min-width: 0;
}
#fin-body .fin-donut-row.split > .fin-donut svg {
  width: auto;
  height: 230px;
  max-width: 100%;
}
@media (max-width: 640px) {
  #fin-body .fin-donut-row:not(.split) > .fin-donut svg { height: 240px; }
  #fin-body .fin-donut-row.split > .fin-donut svg { height: 180px; }
}


/* ==========================================================
   顶栏下拉（2026-10-06：理财 hover → 资产 / 支出 / 收入）
   ========================================================== */
.nav-group { position: relative; display: inline-flex; }
.nav-link .caret {
  width: 9px; height: 6px; margin-left: 5px; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: .7;
}
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 104px; padding: 6px; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--bd-default);
  border-radius: var(--r-sm); box-shadow: var(--sh-float);
  display: none; z-index: 60;
}
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown { display: block; }
/* 鼠标从按钮移到面板的间隙不塌陷 */
.nav-group::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.dd-item {
  display: block; width: 100%; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--t2); text-align: left;
  padding: 8px 12px; border-radius: var(--r-xs); white-space: nowrap;
}
.dd-item:hover { background: var(--brand-light); color: var(--brand); font-weight: 500; }

/* ==========================================================
   理财页三大区块：资产 / 支出 / 收入
   ========================================================== */
.fin-sec { scroll-margin-top: 78px; }          /* 锚点定位时避开吸顶导航 */
.fin-sec + .fin-sec { border-top: 1px solid var(--bd-soft); padding-top: 18px; }
.fin-sec-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--t1);
}
.fin-sec-head h2 { font-size: 20px; font-weight: 600; color: var(--t1); letter-spacing: 0; }
.fin-sec-head .meta { margin-left: auto; }
.fin-sub-head {
  display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px;
}
.fin-sub-head h3 { font-size: 14px; font-weight: 600; color: var(--t2); }
.fin-sub-head .meta { margin-left: auto; }
.fin-mod-head { margin-bottom: 6px; }
.fin-mod-head h3 { font-size: 14px; font-weight: 600; color: var(--t2); }
#fin-body .fin-sec { margin: 18px 0 26px; }

/* ==========================================================
   分类图标（fin-icons.js 的手绘 SVG）
   ----------------------------------------------------------
   · 描边色走 --fi-line：浅色近黑、深色转亮，否则在暖黑底上看不见
   · 这里给 svg 打底 fill:none / stroke；子元素自带的 fill / stroke 属性
     会覆盖它（继承值永远输给元素自身的属性），所以描边可以单点破例
   ========================================================== */
:root { --fi-line: #2f2f2f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fi-line: #e6e4df; }
}
:root[data-theme="dark"] { --fi-line: #e6e4df; }

.bill-ico svg, .bg-ico svg, .ft-ico svg, .fin-drill-sum svg, .fi svg {
  display: block;
  fill: none; stroke: var(--fi-line); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 容器尺寸 → 图标尺寸 */
.bill-ico svg { width: 23px; height: 23px; }
.ft-ico svg { width: 16px; height: 16px; }
.bg-ico svg { width: 27px; height: 27px; }
.fin-drill-sum svg {
  display: inline-block; width: 19px; height: 19px;
  vertical-align: -3.5px; margin-right: 3px;
}
/* emoji 兜底（老记录里已下线的分类名） */
.fi-emo { font-size: 1em; line-height: 1; }

/* 记一笔 · 二级分类（细分）宫格：比一级紧凑，一行 5 个 */
.bg-sub-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 2px 0 8px; font-size: 13px; font-weight: 600; color: var(--t2);
}
.bg-sub-head em { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--t4); }
.bg-grid-sub { grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 18px; }
.bg-item-sub { padding: 8px 2px 6px; gap: 3px; }
.bg-item-sub .bg-ico svg { width: 23px; height: 23px; }
.bg-item-sub .bg-name { font-size: 11px; }
@media (max-width: 480px) {
  .bg-grid-sub { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================
   理财门户：范围切换与期间工具
   ========================================================== */
/* 🔴 2026-10-06 紧凑层：期间工具条**贯穿全屏宽、悬浮在固定顶栏正下方**
   （用户反馈「像个长方形悬浮在那里」——sticky + 圆角卡片只跟内容区同宽）
   fixed 脱离文档流 → #fin-body 顶部要留等高占位，别让内容钻到工具条底下。
   ⚠️ 资产分区是时点数据，不渲染工具条（periodBar 只在总览/收支拼），占位仍在，多一点留白无妨。 */
.fin-bar {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 40;
  margin: 0;
  padding: 7px max(24px, calc(50vw - var(--maxw) / 2 + 24px));
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: none;
  border-bottom: 1px solid var(--bd-soft);
  border-radius: 0;
  box-shadow: 0 8px 18px -14px rgba(28, 26, 23, .34);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fin-bar { background: var(--panel); }
}
.fin-period { display: flex; align-items: center; gap: 8px; }
.fin-period .fc-nav { width: 30px; height: 30px; }
.fin-period .fp-title { min-width: 96px; font-size: 14px; }
.fin-view { display: flex; align-items: center; gap: 8px; }
/* 固定工具条占位 —— 只在真的渲染了工具条的分区（总览/收支）才留。
   ⚠️ 占位要落在**分区 tab 之下、内容之上**，不能顶到 tab 上面 ——
   否则「理财 / 账户、收支与资产概览」标题和 tab 之间会空出一大块（实测 320px 下约 90px）。
   做法：给 .fin-tabs 负 margin 抵消掉 padding，tab 顶到标题下方；
   紧随其后的第一个内容元素自然落在占位之下。 */
#fin-body.has-fin-bar > .fin-tabs { margin-bottom: 66px; }   /* 50 工具条 + 16 */
@media (max-width: 900px) {
  .fin-bar { padding: 6px 20px; }
  #fin-body.has-fin-bar > .fin-tabs { margin-bottom: 52px; }   /* 46 工具条 + 6 */
}

/* 理财内页切换 */
#fin-body { padding-top: 0; }
.fin-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; margin: 16px 0 18px;
  background: var(--subtle); border: 1px solid var(--bd-soft);
  border-radius: var(--r-pill);
}
.fin-tab {
  min-width: 78px; border: 0; border-radius: var(--r-pill);
  padding: 8px 18px; background: transparent; color: var(--t3);
  font: 500 13px var(--font); cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.fin-tab:hover { color: var(--t1); }
.fin-tab.active { background: var(--panel); color: var(--t1); box-shadow: var(--sh-raise); }

/* 总览 */
.fin-overview-lead, .fin-view-lead {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin: 8px 0 20px;
}
.fin-eyebrow { color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.fin-overview-lead h2, .fin-view-lead h2 {
  margin: 5px 0 3px; color: var(--t1); font-size: clamp(23px, 3vw, 30px);
  font-weight: 650; letter-spacing: -.035em; line-height: 1.25;
}
.fin-overview-lead p, .fin-view-lead p { margin: 5px 0 0; color: var(--t3); font-size: 13px; }
.fin-overview-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.fin-net-card {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(360px, 1.4fr) auto;
  align-items: center; gap: 28px; padding: 24px 26px;
  border: 1px solid var(--bd-soft); border-radius: var(--r-lg);
  background: linear-gradient(118deg, var(--brand-light), var(--panel) 64%);
  box-shadow: var(--sh-raise);
}
.fin-net-primary { min-width: 0; }
.fin-net-label { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: 13px; }
.fin-net-label span { padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel); color: var(--t3); font-size: 10px; }
.fin-net-value { margin-top: 7px; color: var(--t1); font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fin-net-value.warn { color: var(--bad); }
.fin-net-caption { margin-top: 5px; color: var(--t3); font-size: 12px; }
.fin-net-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fin-net-split > div { min-width: 0; padding-left: 16px; border-left: 1px solid var(--bd-default); }
.fin-net-split span, .fin-net-split small { display: block; color: var(--t3); font-size: 11px; }
.fin-net-split b { display: block; margin: 4px 0; color: var(--t1); font-size: 19px; font-variant-numeric: tabular-nums; }
.fin-net-link, .fin-text-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  color: var(--brand); font: 500 12px var(--font); cursor: pointer; white-space: nowrap;
}
.fin-net-link span, .fin-text-link span { font-size: 19px; transition: transform .18s ease; }
.fin-net-link:hover span, .fin-text-link:hover span { transform: translateX(3px); }
.fin-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.fin-panel {
  min-width: 0; margin: 14px 0; padding: 18px 20px;
  border: 1px solid var(--bd-soft); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--sh-raise);
}
.fin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fin-panel-head h3 { margin: 0; color: var(--t1); font-size: 15px; font-weight: 600; }
.fin-panel-head p { margin: 3px 0 0; color: var(--t3); font-size: 11px; }
.fin-cash-pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.fin-cash-pair > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fin-cash-pair span { color: var(--t3); font-size: 11px; }
.fin-cash-pair b { color: var(--t1); font-size: 17px; font-variant-numeric: tabular-nums; }
.fin-cash-pair b.income { color: var(--ok); }
.fin-cash-pair b.expense { color: var(--bad); }
.fin-trend-preview .fin-bars, .fin-flow-chart .fin-bars { margin-top: 4px; }
.fin-recent-panel { margin-top: 14px; }
.fin-data-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 18px 2px; color: var(--t3); font-size: 11px; }
.fin-data-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.fin-data-note span + span:not(.fin-data-dot)::before { content: '·'; margin-right: 14px; color: var(--t5); }
.fin-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--t3); font-size: 11px; }
.fin-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fin-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* 收支与资产 */
.fin-flow-kpis { margin-top: 18px; }
.fin-flow-chart { margin-top: 14px; }
.fin-chart-context { max-width: 48%; color: var(--t4); font-size: 11px; text-align: right; }
.fin-structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fin-structure-grid .fin-panel { margin: 14px 0; }
.fin-structure-grid .fin-stat { align-items: flex-start; }
.fin-ledger-panel { margin-top: 14px; }
.fin-asset-module { margin: 14px 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.fin-asset-module .fin-panel-head { margin-bottom: 6px; }
.fin-asset-module .fin-mod-body > .sect { margin-top: 14px; }
.fin-assets-summary { grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.4fr); margin-bottom: 20px; }
.fin-assets-summary .fin-net-split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-asset-help { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 2px 6px; }
.fin-asset-help span:first-child { color: var(--t1); font-size: 16px; font-weight: 600; }
.fin-asset-help span:last-child { color: var(--t3); font-size: 11px; }

@media (max-width: 900px) {
  .fin-net-card { grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.2fr); gap: 18px; }
  .fin-net-link { grid-column: 1 / -1; justify-self: end; }
  .fin-assets-summary { grid-template-columns: 1fr; }
  .fin-structure-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fin-tabs { display: flex; width: 100%; box-sizing: border-box; }
  .fin-tab { flex: 1; min-width: 0; padding: 8px 10px; }
  .fin-overview-lead, .fin-view-lead { align-items: flex-start; flex-direction: column; gap: 12px; }
  .fin-overview-actions { width: 100%; }
  .fin-overview-actions .pill { flex: 1; justify-content: center; }
  .fin-net-card { grid-template-columns: 1fr; gap: 16px; padding: 19px; }
  .fin-net-split { gap: 8px; }
  .fin-net-split > div { padding-left: 10px; }
  .fin-net-split b { font-size: 15px; }
  .fin-net-link { grid-column: auto; justify-self: start; }
  .fin-overview-grid { grid-template-columns: 1fr; gap: 0; }
  .fin-panel { padding: 15px; border-radius: var(--r-md); }
  .fin-cash-pair { gap: 6px; }
  .fin-cash-pair b { font-size: 14px; }
  .fin-flow-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-chart-context { max-width: 42%; }
  .fin-asset-help { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* ---------- 移动端：顶栏压矮一点 ---------- */
@media (max-width: 820px) {
  :root { --nav-h: 58px; }
  .nav-inner { padding: 0 14px; gap: 10px; }
  .wordmark { font-size: 15.5px; }
  .brand-mark { width: 18px; height: 18px; }
  .nav-tabs .nav-link { font-size: 13.5px; padding: 8px 9px 10px; }
  .nav-tabs .nav-link.active::after { left: 8px; right: 8px; bottom: 3px; }
}

/* ==========================================================
   理财页 · 紧凑层（2026-10-06 七版末）
   ----------------------------------------------------------
   用户反馈「理财整个界面需要更紧凑一点，现在还有点太松散」。
   做法：在这层统一收窄分区门户制的纵向节奏，**不改上面任何原规则**，
        全部用覆盖式写在末尾 —— 想回退删掉这一整段即可。
   收的量（8pt 基线 → 6pt 基线）：
     面板纵向 margin  14+14 → 8+8      面板内 padding  18/20 → 13/15
     面板头下边距     12 → 8            KPI 区下边距    16 → 11
     分区导语下边距   20 → 12           结构两栏 gap    14 → 10
     净资产卡 padding 24/26 → 17/19     净资产卡下边距  20 → 13
     分类行 padding    7 → 5            分类图标        32 → 28
   ========================================================== */

/* —— 面板：外间距 + 内边距 —— */
#fin-body .fin-panel { margin: 8px 0; padding: 13px 15px; }
#fin-body .fin-panel-head { margin-bottom: 8px; gap: 10px; }
#fin-body .fin-panel-head h3 { font-size: 14px; }
#fin-body .fin-panel-head p { margin-top: 2px; font-size: 10.5px; }
#fin-body .fin-recent-panel,
#fin-body .fin-ledger-panel { margin-top: 8px; }
#fin-body .fin-asset-module .fin-panel-head { margin-bottom: 5px; }

/* —— 分区导语（总览 / 收支 / 资产 顶部那行） —— */
#fin-body .fin-view-lead,
#fin-body .fin-overview-lead { margin: 6px 0 12px; gap: 20px; }
#fin-body .fin-view-lead h2,
#fin-body .fin-overview-lead h2 { font-size: 19px; }
#fin-body .fin-view-lead p,
#fin-body .fin-overview-lead p { margin-top: 4px; font-size: 12px; }

/* —— KPI —— */
#fin-body .fin-kpis { margin-bottom: 11px; gap: 9px; }
#fin-body .fin-flow-kpis { margin-top: 12px; }
#fin-body .fk-cell { padding: 9px 12px; }
#fin-body .fk-label { margin-bottom: 3px; font-size: 10.5px; }
#fin-body .fk-value { font-size: 19px; }
#fin-body .fk-sub { margin-top: 3px; font-size: 10.5px; }

/* —— 结构双栏（支出结构 / 收入结构） —— */
#fin-body .fin-structure-grid { gap: 10px; }
#fin-body .fin-structure-grid .fin-panel { margin: 8px 0; }

/* —— 分类行 —— */
#fin-body .fin-cat-row { padding: 5px 6px; gap: 10px; }
#fin-body .fin-cat-row .bill-ico { width: 28px; height: 28px; flex: 0 0 28px; }
#fin-body .fin-cat-row .bar-track { margin-top: 4px; }
/* 🔴 饼图尺寸交给 .fin-donut-row 里的规则管（八版：引线标注需要更大画布），
   这里不要再写死宽度 —— ID 选择器优先级最高，会压掉新规则。 */

/* —— 净资产卡（资产分区） —— */
#fin-body .fin-net-card { padding: 17px 19px; gap: 22px; margin-bottom: 13px; }
#fin-body .fin-net-value { font-size: 30px; }
#fin-body .fin-asset-help { margin: 16px 2px 5px; }
#fin-body .fin-asset-help span:first-child { font-size: 14px; }

/* —— 概览网格 / 底部注记 —— */
#fin-body .fin-overview-grid { gap: 10px; margin-top: 8px; }
#fin-body .fin-data-note { margin: 12px 2px; }

/* —— 账目与日历（左流水 + 右日历） —— */
#fin-body .fin-bills { max-height: 340px; }
#fin-body .fin-cal { margin-top: 2px; }
#fin-body .dg-head { padding: 14px 6px 6px; }
#fin-body .rowline { padding: 8px 6px; }
#fin-body .fin-sub-head { margin: 14px 0 7px; padding-top: 10px; }
#fin-body .fin-sub-head h3 { font-size: 13px; }

/* —— 移动端：同样收一档 —— */
@media (max-width: 900px) {
  #fin-body .fin-panel { margin: 7px 0; padding: 12px 13px; }
  #fin-body .fin-view-lead,
  #fin-body .fin-overview-lead { margin: 5px 0 10px; }
  #fin-body .fin-structure-grid { gap: 0; }
  #fin-body .fin-net-card { padding: 15px; }
  #fin-body .fk-cell { padding: 9px 11px; }
  #fin-body .fin-bills { max-height: none; }
}

/* ==========================================================
   饼图引线标注 + 下钻双环（2026-10-06 八版）
   ----------------------------------------------------------
   ① 引线标注：参照用户给的示意图，只给占比 ≥5% 的片画「分类名 + 百分比」，
      占比太小的塞不进外圈会糊成一片，所以不画（hover 仍有 <title> 提示）。
   ② 下钻变**左右两个环**：左=全量（选中片高亮、其余淡出）往左让位，
      右=该分类的子类环弹入。动画用 transform，不触发重排。
   ========================================================== */

/* —— 引线 —— */
.fd-lead { fill: none; stroke: var(--t5); stroke-width: 1; opacity: .55; }
.fd-lname { font-size: 9.5px; font-weight: 600; fill: var(--t1); }
.fd-lpct  { font-size: 9px; fill: var(--t3); }

/* —— 饼图区：未下钻时单个环居中；下钻后左右并排 —— */
.fin-donut-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; position: relative;
  margin-bottom: 13px;
  transition: gap 0.34s cubic-bezier(.22,.8,.28,1);
  flex-wrap: wrap;          /* 下钻态两个环 + 提示文字换行，不互相压 */
  padding-bottom: 4px;
  row-gap: 10px;            /* 环底部引线标注 与 提示文字 之间留够间距 */
}
.fin-donut-row.split { gap: 4px; justify-content: flex-start; }
.fin-donut-row > .fin-donut { transition: transform 0.34s cubic-bezier(.22,.8,.28,1); }
.fin-donut-row.split > .fin-donut:first-child { transform: translateX(-14px); }
/* 子类环：从右侧弹入 + 轻微缩放 */
.fin-donut-row > .fin-donut.sm {
  animation: finSubIn 0.38s cubic-bezier(.2,.9,.3,1) both;
  transform-origin: left center;
}
@keyframes finSubIn {
  from { opacity: 0; transform: translateX(26px) scale(0.86); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* 环本体弹一下，提示"换了个图" */
.fin-donut-row > .fin-donut.sm svg { animation: finPop 0.42s cubic-bezier(.2,.9,.3,1) both; }
@keyframes finPop {
  0%   { transform: scale(0.9); opacity: 0.4; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}
/* 🔴 提示文字用绝对定位会压住环底部的引线标注（"出租车 16.9%" 被盖住），
   改成正常流独占一行 */
.fin-donut-hint {
  flex: 0 0 100%;
  font-size: 10.5px; color: var(--t4); text-align: center;
  animation: finHintIn 0.4s ease both;
}
@keyframes finHintIn { from { opacity: 0; } to { opacity: 1; } }

/* 🔴 十一版：**三个环的像素直径必须一致**（用户反馈"比例不对齐、大小不一样"）。
   成因有两条，缺一不可：
     ① `.fin-donut{display:flex}` → svg 是 flex item，宽度被容器瓜分（实测 250.5 vs 355.25，
        两个容器明明都是 505px）→ 改 `display:block`
     ② svg 宽度不能写 `100%`（随标注多少变宽窄）→ **写死 380px**
   环直径 = 108 / viewBox宽 × 380，viewBox 宽由 MIN_W 下限保证一致，所以三环直径相同。 */
.fin-donut { display: block; }
.fin-donut svg { max-width: none; height: auto; }
.fin-donut-row > .fin-donut:first-child { flex: 0 0 auto; }
/* 🔴 十一版·必须 !important：另一处有 `#fin-body .fin-donut-row:not(.split) > .fin-donut svg{width:auto}`，
   ID + :not() 的优先级高于本条，会把固定宽度压掉（实测又变回 250/355 不一致）。 */
.fin-donut-row > .fin-donut:first-child svg { width: 260px !important; }
/* 🔴 下钻态两个环**也用 260px** —— 只要 vbW 恒定、svg 宽恒定，环直径就恒定。
   （之前下钻用 190、未下钻用 380，直径 103 vs 205，三环大小不一）
   🔴 必须把「下钻态主环」和「子类环」写成两条**独立**规则 ——
   合并写会被后面那条 `.fin-donut-row > .fin-donut.sm` 的宽选择器盖住，
   导致下钻态主环也变成 190px（环 87px，比收入环小一半）。 */
.fin-donut-row.split > .fin-donut:first-child,
.fin-donut-row.split > .fin-donut.sm { flex: 0 0 auto; }
.fin-donut-row.split > .fin-donut:first-child svg { width: 260px !important; }
.fin-donut-row > .fin-donut.sm svg { width: 260px !important; }
/* 下钻态双环各占 260px，标注字号回到正常档（不再需要缩到 6px） */
.fin-donut-row.split .fd-lname { font-size: 8.4px; }
.fin-donut-row.split .fd-lpct  { font-size: 7.6px; }
.fin-donut-row.split .fd-lead  { stroke-width: 1; }

/* 🔴 下钻态**不要跨行**（用户明确要求）：
   之前用 `:has(.fin-stat.drilled){grid-column:1/-1}` 让支出结构占满整行，
   结果收入结构被挤到它下面，变成上下布局 —— 这不是用户要的。
   两栏必须**永远是左右并排**；双环塞不下就靠 SVG 自适应缩小（在 JS 里按容器宽度定尺寸）。
   .fin-stat.drilled .fin-cat-col 的 width:100% 保留（让子类列表通栏）。 */
.fin-stat.drilled .fin-cat-col { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fin-donut-row > .fin-donut,
  .fin-donut-row > .fin-donut.sm,
  .fin-donut-row > .fin-donut.sm svg { animation: none; transition: none; }
}

@media (max-width: 900px) {
  .fin-donut-row { gap: 6px; }
  .fin-donut-row > .fin-donut:first-child svg { width: 250px !important; }
  .fin-donut-row.split > .fin-donut:first-child svg,
  .fin-donut-row > .fin-donut.sm svg { width: 250px !important; }
}

/* ==========================================================
   理财 · 期间切换器搬进顶栏（2026-10-06 九版）
   ----------------------------------------------------------
   从页面里的 fixed 全屏条，改成顶栏内的一小块（#fin-topbar），
   夹在「学习」与右侧图标（太阳/人形）之间。
   只有理财页显示 —— navTo() 统一调 finTopbarRender() 显隐；
   资产分区是时点数据、不随月份变 → 也不显示。
   ========================================================== */
.fin-topbar {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;          /* 顶到 nav-right 左边 */
  flex-shrink: 0;
}

/* ==========================================================
   全站侧栏导航（桌面常驻，移动端抽屉）
   ========================================================== */
:root { --sidebar-w: 252px; }
body.sidebar-collapsed { --sidebar-w: 78px; }
body { padding-top:var(--nav-h); }
#sidebar {
  position:fixed; z-index:70; inset:0 auto 0 0; display:flex; flex-direction:column;
  width:var(--sidebar-w); padding:18px 13px 14px; overflow:hidden;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border-right:1px solid var(--bd-soft); transition:width .22s ease,padding .22s ease;
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
}
.sidebar-head { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 4px 18px; }
.sidebar-head .wordmark { gap:10px; font-size:16px; }
.sidebar-head .brand-mark { width:22px; height:22px; }
.sidebar-toggle { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:9px; color:var(--t3); background:transparent; cursor:pointer; }
.sidebar-toggle:hover { color:var(--t1); background:var(--subtle); }
.sidebar-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.side-nav { display:flex; flex:1; min-height:0; flex-direction:column; gap:3px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--bd-default) transparent; }
.side-caption { margin:20px 10px 7px; color:var(--t4); font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.side-link { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:42px; padding:0 11px; border:0; border-radius:10px; color:var(--t2); background:transparent; text-align:left; font:500 13px/1.2 var(--font); cursor:pointer; transition:background .16s,color .16s; }
.side-link:hover { background:var(--subtle); color:var(--t1); }
.side-link.active { color:var(--brand); background:var(--brand-light); }
.side-icon { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.side-cat { font-weight:560; }
.side-chevron { width:15px; height:15px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.58; transition:transform .18s; }
.side-group.expanded .side-chevron { transform:rotate(180deg); }
.side-group.active > .side-cat { color:var(--brand); }
.side-children { display:none; flex-direction:column; gap:2px; margin:3px 0 8px 29px; padding-left:13px; border-left:1px solid var(--bd-soft); }
.side-group.expanded .side-children { display:flex; }
.side-child { min-height:34px; padding:0 10px; color:var(--t3); font-size:12.5px; font-weight:450; }
.side-child.active { color:var(--brand); background:transparent; font-weight:600; }
.side-child.active::before { position:absolute; left:-14px; width:5px; height:5px; border-radius:50%; background:var(--brand); content:""; }
.side-bottom { margin-top:auto; padding-top:12px; border-top:1px solid var(--bd-soft); }
.side-bottom .side-link { min-height:42px; }
#topnav { left:var(--sidebar-w); right:0; width:auto; height:var(--nav-h); transition:left .22s ease; }
.topbar-inner { display:flex; align-items:center; gap:14px; width:100%; height:100%; padding:0 clamp(20px,3vw,42px); }
.topbar-title { min-width:0; color:var(--t1); font-size:14px; font-weight:600; }
.topbar-inner .fin-topbar { position:static; display:flex; flex:1; justify-content:flex-end; min-width:0; margin-left:auto; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.topbar-inner .fin-topbar[hidden] { display:none; }
.topbar-inner #theme-btn { margin-left:auto; }
.hamburger { display:none; flex:0 0 38px; width:38px; height:38px; }
#app { width:calc(100% - var(--sidebar-w)); max-width:none; margin:0 0 0 var(--sidebar-w); padding:30px clamp(22px,4vw,52px) 0; transition:margin-left .22s ease,width .22s ease; }
#footer { width:calc(100% - var(--sidebar-w)); margin-left:var(--sidebar-w); transition:margin-left .22s ease,width .22s ease; }
#footer .foot-bottom { max-width:none; padding:18px clamp(22px,4vw,52px) 28px; }
.foot-cols { display:none; }
.fin-bar { left:var(--sidebar-w); padding-left:clamp(22px,4vw,52px); padding-right:clamp(22px,4vw,52px); transition:left .22s ease; }
body.sidebar-collapsed #sidebar { padding-left:10px; padding-right:10px; }
body.sidebar-collapsed .sidebar-head { justify-content:center; padding-left:0; padding-right:0; }
body.sidebar-collapsed .sidebar-head .wordmark span,
body.sidebar-collapsed .side-caption,
body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-chevron,
body.sidebar-collapsed .side-children { display:none; }
body.sidebar-collapsed .sidebar-head { justify-content:space-around; }
body.sidebar-collapsed .sidebar-head .wordmark { justify-content:center; }
body.sidebar-collapsed .sidebar-toggle { transform:rotate(180deg); }
body.sidebar-collapsed .side-link { justify-content:center; padding:0; }
body.sidebar-collapsed .side-icon { width:20px; height:20px; }
body.sidebar-collapsed .side-group.active > .side-cat::after { position:absolute; left:-10px; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); content:""; }
body.sidebar-collapsed .side-bottom { padding-top:10px; }
#menu-overlay { display:none; }

@media (max-width: 900px) {
  #sidebar { display:none; }
  #topnav { left:0; right:0; }
  .topbar-inner { padding:0 16px; gap:10px; }
  .topbar-title { flex:1; }
  .hamburger { display:inline-flex; }
  .topbar-inner #theme-btn { margin-left:0; }
  #app { width:100%; margin:0; padding:24px 20px 0; }
  #footer { width:100%; margin-left:0; }
  #footer .foot-bottom { padding:18px 20px 28px; }
  .fin-bar { left:0; padding:6px 20px; }
  #menu-overlay { display:none; flex-direction:row; align-items:stretch; background:rgba(18,22,31,.26); backdrop-filter:blur(2px); }
  #menu-overlay.open { display:flex; }
  .menu-drawer { display:flex; width:min(310px,86vw); height:100%; flex-direction:column; background:var(--panel); box-shadow:var(--sh-overlay); }
  .mo-head { width:100%; height:var(--nav-h); padding:0 17px; background:var(--panel); }
  .mo-head .wordmark { font-size:15px; }
  .mo-body { width:100%; padding:10px 13px 28px; background:var(--panel); }
  #menu-overlay::after { flex:1; content:""; }
  #menu-overlay .side-nav { flex:1; }
  #menu-overlay .side-caption { margin-top:15px; }
  #menu-overlay .side-children { display:none; }
  #menu-overlay .side-group.expanded .side-children { display:flex; }
  #menu-overlay .side-bottom { margin-top:14px; }
}
@media (max-width: 560px) {
  .topbar-inner { padding:0 13px; }
  .topbar-inner .pill.icon-only { width:36px; height:36px; padding:0; }
  #app { padding-left:16px; padding-right:16px; }
  #footer .foot-bottom { padding-left:16px; padding-right:16px; }
  .menu-drawer { width:min(290px,86vw); }
  .mo-head,.mo-body { width:100%; }
  .hero { padding-top:36px; }
  .hero-cta { margin-top:20px; }
}
.fin-topbar[hidden] { display: none; }
.fin-topbar .fin-period { display: flex; align-items: center; gap: 2px; }
.fin-topbar .fp-title {
  font-size: 13.5px; font-weight: 600; color: var(--t1);
  min-width: 82px; text-align: center; white-space: nowrap;
}
.fin-topbar .fc-nav {
  border: none; background: none; color: var(--t2);
  font-size: 15px; cursor: pointer; padding: 2px 5px;
  font-family: inherit; line-height: 1; border-radius: var(--r-xs);
  transition: background 0.12s, color 0.12s;
}
.fin-topbar .fc-nav:hover { background: var(--subtle); color: var(--brand); }
.fin-topbar .fin-view { display: flex; align-items: center; gap: 3px; }
.fin-topbar .seg {
  border: 1px solid var(--bd-default); background: var(--panel);
  border-radius: var(--r-sm); padding: 3px 9px; font-size: 12px;
  color: var(--t2); cursor: pointer; font-family: inherit; line-height: 1.4;
}
.fin-topbar .seg.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

/* 理财页顶部不再需要给 fixed 工具条留占位了（它已搬进顶栏） */
#fin-body.has-fin-bar { padding-top: 0; }
#fin-body.has-fin-bar > .fin-tabs { margin-bottom: 16px; }

/* 窄屏：顶栏塞不下期间切换器，隐藏它（记账仍可用日历/柱状图切月） */
@media (max-width: 1080px) {
  .fin-topbar { display: none !important; }
}

/* ==========================================================
   账目与日历（2026-10-06 十版）
   ----------------------------------------------------------
   ① 删掉「记收入」按钮、删掉「点某天 → 左边流水跳到那天」提示
   ② **日历挪到左、流水到右**（与之前相反）
   ③ 宽度：日历 2/3、流水 1/3
      —— 日历是 7×N 的网格，格子小才看得清，给宽；
         流水是单列文字列表，够宽就能读出金额，给窄。
   ⚠️ 点日历某天仍滚动定位右侧流水（finPickDay 逻辑不变）。
   ========================================================== */
/* 🔴 十二版：2fr/1fr → 1fr/1fr。
   原来日历占 2/3 宽（584px）但格子小、整块只有 303px 高；
   流水占 1/3 宽（292px）却撑到 340px —— 日历下方空出一大片（用户反馈"中间留了很大空白"）。
   各占一半后：日历格子变大（~430px 宽，格子更透气），流水也够宽读金额，
   两边高度自然接近，不再出现一侧空一大块。 */
.fin-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.fin-ledger-cal { min-width: 0; }
/* 两栏底部齐平：日历是"内容高度"，流水按 `100%` 拿不到值（父级 height 是 auto）。
   改用 `align-items: stretch` + 给流水一个 min-height，让它至少跟日历一样高；
   内容更长时内部滚动，底部不会翘起来。 */
.fin-ledger { align-items: stretch; }
.fin-ledger .fin-bills { max-height: 100%; min-height: 0; align-self: stretch; }
.fin-ledger .fin-cal { margin-top: 0; }

/* 窄屏回落单列：日历在上、流水在下 */
@media (max-width: 900px) {
  .fin-ledger { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fin-ledger .fin-bills { max-height: none; }
}

/* ==========================================================
   十一版补丁（末尾）
   ----------------------------------------------------------
   svg 的宽度已由 **JS 行内 style** 锁死（`finDonutHTML` 里 `style="width:236px;max-width:none;flex:0 0 236px"`）——
   因为 CSS 层面同时存在 `#fin-body .fin-donut-row.split > .fin-donut{flex:1 1 0}`
   和 `svg{width:auto;max-width:100%}`，ID + :not() 优先级太高，CSS 里很难压干净；
   而 `!important` 又会反过来压过行内样式（!important > 行内非 important）。
   **结论：宽度归 JS 管，CSS 这里只保证容器不参与 flex 分配。**
   ========================================================== */
#fin-body .fin-donut-row > .fin-donut,
#fin-body .fin-donut-row.split > .fin-donut { flex: 0 0 auto !important; width: auto !important; }
#fin-body .fin-donut-row:not(.split) > .fin-donut,
#fin-body .fin-donut-row.split > .fin-donut { max-width: none !important; }

/* 运动 · 两步路网页入口 */
.sp-embed-page { padding: 4px 0 48px; }
.sp-embed-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:4px 0 14px; }
.sp-embed-head h2 { margin:4px 0; font-size:24px; letter-spacing:-.03em; }
.sp-embed-head p { margin:0; color:var(--t3); font-size:13px; }
.sp-embed-note { margin-bottom:12px; padding:11px 14px; border:1px solid var(--bd-soft); border-radius:var(--r-md); background:var(--subtle); color:var(--t3); font-size:12px; line-height:1.6; }
.sp-embed-note b { color:var(--t1); }
.sp-embed-frame-wrap { overflow:hidden; border:1px solid var(--bd-soft); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-sm); }
.sp-embed-frame { display:block; width:100%; height:min(78vh, 920px); min-height:620px; border:0; background:#fff; }
@media (max-width:700px) {
  .sp-embed-head { align-items:flex-start; flex-direction:column; gap:12px; }
  .sp-embed-frame { height:72vh; min-height:520px; }
}

/* ==========================================================
   理财 · 一页到底 + 顶部锚点 tab（2026-10-08 十三版）
   ----------------------------------------------------------
   ① 删掉「理财 / 账户、收支与资产概览」大标题（HTML 已删）→ 顶部空白收掉
   ② 分区 tab（总览 / 收支 / 资产）提到页面最上面（#fin-tabs-top），
      **吸顶**，滚到哪儿都能点；只有理财页显示
   ③ 三个分区同时渲染在一页，tab 只做**锚点滚动**，不再切内容
      → `.fin-anchor` 是零高度锚点，靠 `scroll-margin-top` 避开吸顶的 tab
   ========================================================== */

/* 🔴 十三版：理财页删掉了 page-title / page-sub，`.page-title` 的 margin-bottom、
   `.cat-page` 的 padding-top 等留了下来 → 顶部空一大块（约 90px）。
   这里显式归零，让 tab 紧贴顶栏下方。 */
#page-finance { padding-top: 0; }
#page-finance > #fin-tabs-top:first-child { margin-top: 0; }

/* 顶部锚点 tab：吸在固定顶栏 + 期间切换器之下 */
#fin-tabs-top { position: sticky; top: calc(var(--nav-h) + 34px); z-index: 39; margin: 0 0 10px; }
#fin-tabs-top[hidden] { display: none; }
#fin-tabs-top .fin-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; padding: 3px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--bd-soft); border-radius: var(--r-pill);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #fin-tabs-top .fin-tabs { background: var(--panel); }
}

/* 零高度锚点：只给 scrollIntoView / scroll-margin-top 用 */
.fin-anchor { height: 0; scroll-margin-top: calc(var(--nav-h) + 84px); }

/* 标题删掉后，页面顶部不要留多余空白 */
#page-finance > #fin-body > .fin-anchor:first-child { scroll-margin-top: calc(var(--nav-h) + 84px); }

@media (max-width: 900px) {
  /* 窄屏期间切换器隐藏 → tab 只需要避开顶栏 */
  #fin-tabs-top { top: var(--nav-h); }
  .fin-anchor { scroll-margin-top: calc(var(--nav-h) + 56px); }
}