/* ===========================================================
   PC 端记账工具 - 样式表（重构版：格式清理 + 主题变量索引）
   生成时间：2025-12-21 13:37:45
   说明：
   - 为避免破坏现有 UI，本版本不改变选择器/优先级/规则顺序，仅做：
     1) 去除多余空白与行尾空格；2) 增加“主题变量索引”注释；3) 便于后续换肤接入。
   =========================================================== */

/* =========================
   主题变量索引（用于未来换肤）
   - 建议换肤时只改 :root 中的变量值；
   - 组件样式尽量引用语义变量（primary/bg/text/border/shadow/radius 等）。
   ========================= */

/* ===========================================================
     全局主题变量（清新奶白 + 青绿 / 橙色 Mac 毛玻璃风）
     —— 后期如果要改配色，优先改这里即可
  =========================================================== */
  :root {
    /* 主色体系：跟手机端保持统一时，优先改这 3 个 */
    --primary-color: #0f766e;                  /* 主按钮 / 选中状态主色 */
    --primary-soft: rgba(15, 118, 110, 0.09);  /* 主色的淡背景（高亮底色） */
    --secondary-color: #22c55e;                /* 辅助绿色，可用于标签、统计正向等 */
    --accent-color: #fb923c;                   /* 橙色强调，用于用户气泡 / 重要按钮 */

    /* 背景与卡片 */
    --bg-color: #f5f5f7;                       /* 页面整体背景 */
    --bg-elevated: rgba(255, 255, 255, 0.88);  /* 浮层、顶栏背景 */
    --bg-card: rgba(255, 255, 255, 0.92);      /* 卡片背景 */

    /* 边框与文字 */
    --border-subtle: rgba(148, 163, 184, 0.45);
    --text-color: #0f172a;
    --text-muted: #6b7280;
    --danger-color: #ef4444;
    
    --line: #e5e7eb;

    /* 通用阴影与圆角、动画 */
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.08);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --transition-fast: 0.18s ease-out;
    --transition-normal: 0.25s ease-out;
  }
  
  
  :root{
  /* 强调渐变（只用于 background） */
  --t-accent-gradient: radial-gradient(
    circle at 0 0,
    #a7f3d0,
    #fad18e 60%,
    #fdca8b 100%
  );
}

  /* ===========================================================
     Reset & 基础标签
  =========================================================== */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* ====== 全局基础：html / body（修复滚动 & 背景） ====== */
    /* ===== 全局高度：锁死在一屏 ===== */
    html,
    body {
      height: 100%;
    }

    /* body 不滚动，只显示一屏 */
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        sans-serif;
      color: var(--text-color);
      background:
        radial-gradient(circle at 0 0, #a7f3d0 0, transparent 55%),
        radial-gradient(circle at 100% 0, #fef3c7 0, transparent 55%),
        radial-gradient(circle at 0 100%, #fee2e2 0, transparent 55%),
        #f4f4f5;
      overflow: hidden;      /* ⭐ 关键：body 自己不滚动 */
    }


  a {
    color: inherit;
    text-decoration: none;
  }

  /* ===========================================================
     通用 svg 图标（与手机端保持一致）
  =========================================================== */
  .svg-icon {
    width: 26px;
    height: 26px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  /* 侧边栏图标容器 */
  .sidebar-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(209, 213, 219, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ===========================================================
     主整体布局：侧栏 + 右侧内容
  =========================================================== */
  /* ====== PC 外壳容器：左侧导航 + 右侧主内容 ====== */
   /* 外壳：左侧菜单 + 右侧主内容，一屏高 */
    .pc-shell {
      display: flex;
      height: 100vh;         /* ⭐ 固定一屏，不再用 min-height */
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px 30px;
      gap: 20px;
      box-sizing: border-box;
    }


  /* -----------------------------------------------------------
     左侧导航栏（PC Sidebar）
  ----------------------------------------------------------- */
  .pc-sidebar {
      /* ⭐ 关键：在 flex 容器里锁死宽度 248px，不允许 shrink */
    flex: 0 0 248px;      /* flex-grow:0, flex-shrink:0, flex-basis:248px */
    width: 248px;
    min-width: 248px;
    width: 248px;
    min-width: 230px;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(254, 249, 195, 0.9), transparent 55%),
      rgba(255, 255, 255, 0.86);
    border-radius: 26px;
    padding: 18px 16px 16px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 6px 4px 10px;
    border-radius: 999px;
  }

  .sidebar-logo-icon {
    /*width: 34px;*/
    /*height: 34px;*/
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: #f9fafb;
    /*box-shadow: 0 14px 28px rgba(20, 184, 166, 0.5);*/
  }
  
  .sidebar-logo-icon img{
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar-logo-text .title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
  }

  .sidebar-logo-text .subtitle {
    font-size: 11px;
    color: #6b7280;
  }

  .sidebar-section-title {
    margin: 10px 4px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .sidebar-item .icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    /*border: 1px solid rgba(209, 213, 219, 0.9);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .sidebar-item span.label {
    flex: 1;
  }

  .sidebar-item small {
    font-size: 11px;
    color: #9ca3af;
  }

  .sidebar-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.45);
  }

  .sidebar-item.active {
    background:
      radial-gradient(circle at 0 0, #a7f3d0, #0f766e 60%, #065f46 100%);
    background: radial-gradient(circle at 0 0, #a7f3d0, #fad18e 60%, #fdca8b 100%);
    color: #d96939;
    font-weight: 700;
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.55);
  }

  .sidebar-item.active .icon {
    background: #f9fafb;
    border-color: rgba(204, 251, 241, 0.9);
    color: #0f766e;
  }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(209, 213, 219, 0.9);
    font-size: 11px;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sidebar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 30% 0, #ffedd5, #fb923c 45%, #c2410c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #7c2d12;
  }

  .sidebar-user-info span {
    display: block;
    line-height: 1.1;
  }

  .sidebar-user-info .name {
    font-size: 12px;
    color: #111827;
  }

  .sidebar-user-info .meta {
    font-size: 11px;
    color: #6b7280;
  }

  /* -----------------------------------------------------------
     右侧主区域结构
  ----------------------------------------------------------- */
  /* 右侧主内容区域：内部自己管理滚动 */
    /* 所有 PC 页面：默认隐藏，只有 active 的显示 */
    .pc-pages .page {
      display: none;
    }

    .pc-pages .page.active {
      /*display: block;*/
    }


    .pc-main {
      flex: 1 1 auto;
      min-width: 0;          /* 防止被内部内容撑出水平滚动 */
      display: flex;
      flex-direction: column;
      overflow: hidden;      /* 本身不溢出，滚动交给子元素 */
    }


  /* 顶部工具栏（Topbar） */
  /* 顶部工具栏（Topbar） */
.pc-topbar {
  flex: 0 0 auto;
  margin-bottom: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;              /* 宽度不够时允许换行 */
  gap: 8px 16px;

  padding: 10px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(254, 249, 195, 0.9), transparent 60%),
    rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(209, 213, 219, 0.9);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Dashboard 主体：吃掉 pc-main 剩余的全部高度 */
.pc-dashboard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 左侧 chip 区域 */
.topbar-left {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* 当前账本、本月收支的小胶囊 */
.chip {
  padding: 4px 10px;
  border-radius: 999px;
  /*border: 1px solid rgba(209, 213, 219, 0.9);*/
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4b5563;
  /*background: rgba(255, 255, 255, 0.9);*/
  white-space: nowrap;            /* 避免内容在中间断行 */
}

.chip strong {
  font-weight: 600;
  color: #111827;
}

/* 顶部「当前账本」小下拉样式 */
.chip-book-switcher {
  position: relative;
  padding-right: 18px; /* 留一点空间给小箭头 */
}

.chip-book-switcher select {
  border: none;
  background: transparent;
  outline: none;
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  padding-right: 14px;
  max-width: 180px;      /* 防止账本名字太长把布局撑爆 */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

/* 下拉箭头小图标 */
.chip-book-switcher::after {
  content: "⌄";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #9ca3af;
  pointer-events: none;
}


/* 右侧过滤器区域 */
.topbar-filters {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;               /* 宽度不够时，搜索框可以掉到第二行 */
  gap: 8px;
  min-width: 0;
}

/* 日期、搜索这些小胶囊 */
.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(209, 213, 219, 0.9);
  font-size: 12px;
  color: #4b5563;
  white-space: nowrap;
}

.field-inline input[type="date"],
.field-inline select {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 12px;
}

/* 搜索框：默认宽度，避免挤爆布局 */
.field-inline input[type="search"] {
  background: transparent;
  border: none;
  outline: none;
  color: #111827;
  font-size: 12px;
  width: 170px;
  max-width: 220px;
}

.field-inline input::placeholder {
  color: #9ca3af;
}

.field-inline .inline-icon {
  font-size: 13px;
  color: #9ca3af;
}

/* 顶部通用按钮（保留你原来的） */
.btn-primary {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 14px;
  background: radial-gradient(circle at 0 0, #a7f3d0, #fad18e 60%, #fdca8b 100%);
  color: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 16px 40px rgba(15, 118, 110, 0.45);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(20, 184, 166, 0.55);
  filter: brightness(1.03);
}

/* 窄屏（例如窗口宽度 < 1100px）时，Topbar 自动变成上下两行 */
@media (max-width: 1100px) {
  .pc-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-left,
  .topbar-filters {
    width: 100%;
    justify-content: space-between;
  }

  /* 搜索框所在的 field 占满这一行 */
  .topbar-filters .field-inline:nth-child(2) {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .topbar-filters .field-inline:nth-child(2) input[type="search"] {
    width: 100%;
    max-width: none;
  }

  /* 日期筛选和按钮保持内容宽度，不被拉太长 */
  .topbar-filters .field-inline:first-child,
  .topbar-filters .btn-primary {
    flex-shrink: 0;
  }
}

/* 更窄（比如平板）时，过滤区再允许换行堆叠 */
@media (max-width: 768px) {
  .topbar-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .topbar-filters .field-inline,
  .topbar-filters .btn-primary {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-filters .btn-primary {
    justify-content: center;
  }
}


  /* -----------------------------------------------------------
     页面容器（右侧大底板）
  ----------------------------------------------------------- */
  .pc-pages {
    flex: 1;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.9), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(254, 249, 195, 0.85), transparent 60%),
      rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    padding: 16px 18px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    /*box-shadow: var(--shadow-soft);*/
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .page {
    display: none;
    height: 100%;
    overflow: hidden;
  }

  .page.active {
    display: flex;
    flex-direction: column;
    /*gap: 12px;*/
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
  }

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
  }

  .page-subtitle {
    font-size: 12px;
    color: var(--text-muted);
  }

  .page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }


  /* 资产页 Summary 行 */
    .asset-summary-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .asset-summary-card {
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }

    .asset-summary-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .asset-summary-value {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .asset-summary-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* 账户列表卡片 */
    .asset-list-card {
      margin-top: 12px;
          height: 100%;
    overflow-y: auto;
    }

    .asset-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .asset-list-title span:first-child {
      font-size: 14px;
      font-weight: 500;
    }

    .asset-list-count {
      margin-left: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .asset-list-filters {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    /* asset 卡片网格 */
    .assets-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 10px;
    }

    /* 单个账户卡片 */
    .asset-card {
      border-radius: 14px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(148, 163, 184, 0.18);
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    }

    /* 余额区域容器 */
    .asset-card-balance-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    /* 放在余额上方的资产类型标签 */
    .asset-type-tag-balance {
      align-self: flex-end;
      margin-right: 2px;
      opacity: 0.85;
    }


    .asset-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
      border-color: rgba(59, 130, 246, 0.35);
    }

    .asset-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .asset-card-name {
      font-size: 14px;
      font-weight: 500;
    }

    .asset-card-tags {
      display: flex;
      gap: 4px;
    }

    .asset-tag {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      color: #64748b;
      background: rgba(248, 250, 252, 0.9);
    }

    .asset-tag.primary {
      border-color: rgba(59, 130, 246, 0.65);
      color: #2563eb;
      background: rgba(219, 234, 254, 0.95);
    }

    .asset-tag.danger {
      border-color: rgba(248, 113, 113, 0.7);
      color: #b91c1c;
      background: rgba(254, 226, 226, 0.95);
    }

    .asset-card-body {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .asset-amount {
      font-size: 18px;
      font-weight: 600;
    }

    .asset-amount.negative {
      color: #e11d48;
    }

    .asset-meta {
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }

    /* 资产弹窗 */
    .asset-modal-pc {
      max-width: 560px;
    }

    .asset-modal-body .form-row {
      display: flex;
      gap: 10px;
    }

    .asset-modal-body .form-group {
      margin-bottom: 10px;
    }

    .asset-modal-body .flex-1 {
      flex: 1;
    }

    .asset-modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }

    .asset-records-modal-pc {
      max-width: 800px;
    }

    .asset-records-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 70vh;
      overflow: hidden;
    }

    .asset-records-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .asset-records-meta strong {
      font-weight: 600;
      margin-left: 2px;
    }

    .asset-records-body #asset-records-list {
      flex: 1;
      overflow-y: auto;
      padding-right: 4px;
    }

    .asset-records-footer {
      display: flex;
      justify-content: center;
      margin-top: 8px;
    }

    /* ========== PC 资产卡片：图标 + 文本 + 余额 ========== */

    .asset-card-main {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .asset-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .asset-card-icon .svg-icon {
      font-size: 20px;
    }

    .asset-card-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .asset-card-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .asset-card-subtitle {

      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 13px;
      font-weight: 600;
      color: #064e3b;
    }

    .asset-name {
      font-size: 14px;
      font-weight: 500;
    }

    .asset-type-tag {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.12);
      color: #64748b;
    }

    .asset-card-balance {
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
    }

    .asset-balance-positive {
      color: #16a34a;
    }

    .asset-balance-negative {
      color: #dc2626;
    }

    .asset-card-footer {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-muted);
    }

    .asset-card-trend {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .asset-trend-up {
      color: #16a34a;
    }

    .asset-trend-down {
      color: #dc2626;
    }

    .asset-card-footer-right .asset-card-link {
      color: var(--primary-color, #2563eb);
    }

    /* ========== 资产账单弹窗：账户详情卡片 ========== */

    .asset-records-header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(148, 163, 184, 0.22);
      /*margin-bottom: 12px;*/
      gap: 12px;
    }

    .asset-records-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .asset-records-icon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: rgba(241, 245, 249, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .asset-records-icon .svg-icon {
      font-size: 18px;
    }

    .asset-records-header-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .asset-records-asset-name {
      font-size: 14px;
      font-weight: 500;
    }

    .asset-records-asset-sub {
      font-size: 12px;
      color: var(--text-muted);
    }

    .asset-records-balance {
      text-align: right;
    }

    .asset-records-balance-label {
      font-size: 12px;
      color: var(--text-muted);
    }

    .asset-records-balance-value {
      font-size: 16px;
      font-weight: 600;
    }

    /* 编辑按钮：轻量文字按钮风格 */
    .btn-text {
      border: none;
      background: transparent;
      font-size: 13px;
      color: var(--primary-color, #2563eb);
      cursor: pointer;
      padding: 4px 8px;
    }
    .btn-text:hover {
      text-decoration: underline;
    }


    /* ========== PC 资产卡片列表 ========== */
.assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.asset-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.asset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  border-color: rgba(56, 189, 248, 0.55); /* 轻微高亮 */
  background: rgba(255, 255, 255, 0.96);
}

.asset-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.asset-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-card-icon .icon {
  width: 36px;
  height: 36px;
}

.asset-card-text {
  flex: 1;
  min-width: 0;
}

.asset-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.asset-name {
  font-size: 14px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-type-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
}

.asset-card-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-card-balance {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.asset-balance-positive {
  color: #16a34a;
}

.asset-balance-negative {
  color: #dc2626;
}

.asset-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
}

.asset-card-trend {
  font-size: 11px;
}

.asset-trend-up {
  color: #16a34a;
}

.asset-trend-down {
  color: #dc2626;
}

.asset-trend-flat {
  color: #6b7280;
}

.asset-card-footer-right {
  font-size: 11px;
  color: #0ea5e9;
}

.asset-card-link {
  cursor: pointer;
}

/* ========== PC 资产账单明细弹窗 ========== */
#asset-records-modal-pc {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(15, 23, 42, 0.45);
  display: none; /* JS 控制为 flex */
  align-items: center;
  justify-content: center;
}

#asset-records-modal-pc .modal-content {
  /*width: 880px;*/
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  /*background: rgba(255, 255, 255, 0.96);*/
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.45);
  padding: 12px 18px 16px;
}

/* 头部 */
.asset-records-header {
  margin-bottom: 10px;
}

.asset-records-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.asset-records-asset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.asset-records-asset-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asset-records-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e5f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-records-asset-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-records-asset-name {

  font-size: 11px;
  color: #94a3b8;
}

.asset-records-asset-sub {

  font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.asset-records-balance {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

/* 本月统计 */
.asset-month-stat {
  display: flex;
  gap: 10px;
  margin: 12px 0 8px;
}

.asset-month-stat-row {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 11px;
  color: #6b7280;
}

.asset-month-label {
  margin-bottom: 4px;
}

.asset-month-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

/* 列表区域 */
.asset-records-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.asset-records-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  /*margin-bottom: 8px;*/
}

.asset-records-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 12px 4px;
  text-align: center;
}

.asset-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.asset-record-main {
  flex: 1;
  min-width: 0;
}

.asset-record-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.asset-record-type {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.asset-record-type.income {
  border-color: rgba(22, 163, 74, 0.6);
  color: #16a34a;
}

.asset-record-type.expense {
  border-color: rgba(220, 38, 38, 0.6);
  color: #dc2626;
}

.asset-record-cat {
  font-size: 12px;
  color: #0f172a;
}

.asset-record-meta {
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.asset-record-notes {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-record-amount {
  font-size: 13px;
  font-weight: 600;
  margin-left: 12px;
  white-space: nowrap;
}

.asset-record-amount.income {
  color: #16a34a;
}

.asset-record-amount.expense {
  color: #dc2626;
}

/* 底部按钮 */
.asset-records-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.asset-records-footer-left {
  font-size: 11px;
  color: #94a3b8;
}

.asset-records-load-more {
  font-size: 12px;
  border-radius: 999px;
  padding: 4px 12px;
}


  /* -----------------------------------------------------------
     通用卡片
  ----------------------------------------------------------- */
  .card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(209, 213, 219, 0.9);
    /*box-shadow: 0 14px 35px rgba(148, 163, 184, 0.25);*/
    padding: 12px 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .card-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
  }

  /* 精简：统一隐藏卡片副标题文字，保持更像手机端的“图标 + 标题”风格 */
  .card-subtitle {
    display: none;
    font-size: 11px;
    color: #6b7280;
  }

  .card-tag {
      font-size: 12px;
      padding: 4px 14px;
      border-radius: 999px;

      /* 关键 1：加深底色，确保可见 */
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(8px);

      /* 关键 2：深一点的描边，绝不会淡掉 */
      border: 1px solid rgb(246 165 207 / 90%);

      /* 关键 3：外圈柔光，白背景也看得见 */
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 0 0 2px rgba(255, 255, 255, 0.9);

      color: #333;
      font-weight: 500;
      display: inline-flex;
      align-items: center;

      transition: all 0.25s ease-out;
    }

    .card-tag:hover {
      background: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.12),
        0 0 0 3px rgba(255, 255, 255, 1);
    }


  /* ===========================================================
     Dashboard 布局
  =========================================================== */
  .dashboard-grid {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
      gap: 16px;
      align-items: stretch;        /*⭐ 左右等高 */
    }

  /* 左右列都是垂直堆叠卡片 */
    .dashboard-left,
    .dashboard-right {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }

    /* 左侧最下面这张「本月收支统计」卡片 吃掉剩余高度 */
    .dashboard-left .dashboard-cat-card {
      flex: 1 1 auto;              /*⭐ 吃掉当前列剩余高度 */
      display: flex;
      flex-direction: column;
      min-height: 0;
    }


    /* 表格这层：内部滚动 */
    .dashboard-left .dashboard-cat-table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    /* 上面的“本月收支趋势”等卡片默认 auto 高度即可，无需改 flex */

    /* ================= 右侧：资产 & 最近账单 ================= */

    /* 资产 & 存钱计划 卡片：自然高度 */
    .dashboard-right .asset-saving-card {
      flex: 0 0 auto;
    }

    /* 最近账单 卡片：占满右列剩余高度 */
    .dashboard-right .dashboard-recent-card {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* 内部列表滚动，不撑高整体 */
    .dashboard-right .dashboard-recent-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
    }

  /* Dashboard 最近账单：内部滚动的小列表 */
    .dashboard-recent-card {
      display: flex;
      flex-direction: column;
    }

    .dashboard-recent-wrapper {
      flex: 1;
      min-height: 0;
      /*max-height: 340px; */
      overflow-y: auto;         /* 内部滚动 */
      padding-right: 4px;       /* 给滚动条留一点空间 */
    }

    .dashboard-recent-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    /* 表格这层：内部滚动 */
    .dashboard-left .dashboard-cat-table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    /* 放在卡片里时，日卡之间稍微紧凑一点 */
    .dashboard-recent-card .trans-date-group {
      margin: 5px;
      margin-bottom: 0px;
    }


    /* 空状态提示 */
    .dashboard-empty-tip {
      font-size: 12px;
      color: var(--text-muted);
      padding: 10px 6px;
    }

    .dashboard-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-cat-header-left .card-title {
  margin-bottom: 4px;
}

#dashboard-cat-subtitle {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}

.dashboard-cat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 小号 pill tabs，用在本月收支统计的标题行 */
.pill-tabs.pill-tabs-sm {
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.pill-tabs.pill-tabs-sm button {
  padding: 4px 10px;
  font-size: 12px;
}

/* 表格行尽量做成“列表卡片感” */
.dashboard-cat-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-cat-table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #9ca3af);
  padding: 6px 8px;
}

.dashboard-cat-row td {
  padding: 10px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  vertical-align: middle;
}

.dashboard-cat-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-cat-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-cat-name-main {
  font-size: 13px;
  font-weight: 500;
}

.dashboard-cat-name-sub {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}

.dashboard-cat-amount-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.dashboard-cat-amount {
  font-weight: 600;
}

.dashboard-cat-percent {
  color: var(--text-muted, #9ca3af);
}

.dashboard-cat-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.dashboard-cat-bar-inner {
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #f97316);
}

.dashboard-cat-col-budget {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.dashboard-cat-budget-main.muted {
  color: var(--text-muted, #9ca3af);
}

.dashboard-cat-empty {
  text-align: center;
  padding: 16px 0;
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}


  .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .summary-card {
    position: relative;
    border-radius: 18px;
    padding: 10px 10px 9px;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
      #ffffff;
    border: 1px solid rgba(187, 247, 208, 0.9);
    overflow: hidden;
    cursor: default;
    box-shadow: 0 12px 28px rgba(148, 163, 184, 0.35);
  }

  .summary-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 8px;
  }

  .summary-value {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #111827;
    text-align: center;
  }

  .summary-trend {
    font-size: 11px;
  }

  .summary-trend.positive {
    color: #16a34a;
    text-align: center;
  }

  .summary-trend.negative {
    color: #b91c1c;
    text-align: center;
  }

  .summary-chip {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(187, 247, 208, 0.9);
    color: #0f766e;
  }

  .chart-wrapper {
    height: 170px;
    border-radius: 16px;
    background: linear-gradient(to bottom, #f9fafb, #ecfeff);
    padding: 8px;
  }

  /* 资产 & 存钱计划 卡片升级样式 */
    .asset-saving-card {
      /* 可以保留原 card 的样式，这里只是稍微再紧凑一点 */
    }

    .asset-saving-card-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 12px;
    }

    /* 上面两个资产小块：2 列网格 */
    .asset-metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .asset-metric-tile {
      border-radius: 14px;
      padding: 8px 10px;
      background: radial-gradient(circle at 0 0, rgba(224, 242, 254, 0.98), #ffffff);
      border: 1px solid rgba(191, 219, 254, 0.9);
      box-shadow: 0 10px 22px rgba(148, 163, 184, 0.25);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .asset-metric-tile.primary {
      background: radial-gradient(circle at 0 0, rgba(187, 247, 208, 0.98), #ffffff);
      border-color: rgba(134, 239, 172, 0.9);
      box-shadow: 0 12px 26px rgba(34, 197, 94, 0.35);
    }

    .asset-metric-tile .metric-label {
      font-size: 11px;
      color: #6b7280;
    }

    .asset-metric-tile .metric-value {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
    }

    .asset-metric-tile .metric-sub {
      font-size: 11px;
      color: #9ca3af;
    }

    /* 存钱计划进度卡片 */
    .saving-progress-card {
      border-radius: 14px;
      padding: 8px 10px 9px;
      background: radial-gradient(circle at 0 0, rgba(254, 249, 195, 0.96), #ffffff);
      border: 1px solid rgba(250, 204, 21, 0.7);
      box-shadow: 0 10px 22px rgba(234, 179, 8, 0.25);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .saving-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .saving-title span {
      font-size: 12px;
      font-weight: 600;
      color: #78350f;
    }

    .saving-percent span {
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(248, 250, 252, 0.96);
      color: #92400e;
      border: 1px solid rgba(251, 191, 36, 0.8);
    }

    /* 进度条本体 */
    .saving-bar {
      position: relative;
      width: 100%;
      height: 7px;
      border-radius: 999px;
      background: rgba(254, 243, 199, 0.9);
      overflow: hidden;
    }

    .saving-bar-inner {
      width: 0%; /* 默认 0，后面你可以按进度改 */
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #22c55e, #16a34a, #0f766e);
      box-shadow: 0 6px 14px rgba(34, 197, 94, 0.5);
      transition: width 0.25s ease-out;
    }

    .saving-meta {
      font-size: 11px;
      color: #6b7280;
    }

    .saving-meta-grid {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding: 4px 2px;
      font-size: 12px;
      color: #333;
    }

    .saving-meta-item {
      display: flex;
      flex-direction: row;
      gap: 2px;
    }

    .meta-label {
      font-size: 11px;
      color: #888;
    }

    .meta-value {
      font-size: 13px;
      font-weight: 600;
      color: #333;
    }

      /* ===================== Dashboard 本月收支统计 ===================== */
  .dashboard-cat-card {
    padding-top: 10px;
  }

  .dashboard-cat-table-wrapper {
    margin-top: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.20);
    padding: 8px 10px;
    /*max-height: 220px;*/
    overflow-y: auto;
  }

  .dashboard-cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #111827;
  }

  .dashboard-cat-table thead {
    font-size: 11px;
    color: #6b7280;
  }

  .dashboard-cat-table th,
  .dashboard-cat-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
  }

  .dashboard-cat-table tr:last-child td {
    border-bottom: none;
  }

  .dashboard-cat-table tbody tr:hover {
    background: #f9fafb;
  }

  .dashboard-cat-index {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
  }

  /* ========== 本月收支统计 · 样式增强版 ========== */

/* 卡片整体和其他 card 对齐 */
    .dashboard-cat-card .card-header {
      align-items: center;
    }

    /* 表头列宽 & 对齐 */
    .dashboard-cat-col-index {
      width: 36px;
      text-align: center;
      font-weight: 500;
    }

    .dashboard-cat-col-name {
      text-align: left;
    }

    .dashboard-cat-col-amount {
      width: 180px;
      text-align: right;
    }

    .dashboard-cat-col-budget {
      width: 80px;
      text-align: right;
    }

    /* 行号 */
    .dashboard-cat-index {
      font-size: 12px;
      color: #9ca3af;
      text-align: center;
    }

    /* 分类：图标 + 名称 */
    .dashboard-cat-category {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dashboard-cat-icon-wrapper {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: rgba(248, 250, 252, 0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(148, 163, 184, 0.45);
      flex-shrink: 0;
    }

    .dashboard-cat-icon {
      font-size: 15px;
      color: #fb923c; /* 和进度条同一色系 */
    }

    .dashboard-cat-name-main {
      font-size: 13px;
      font-weight: 500;
      color: #111827;
    }

    /* 金额 + 百分比 + 进度条 */
    .dashboard-cat-amount-cell {
      text-align: right;
    }

    .dashboard-cat-amount-line {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 6px;
      margin-bottom: 4px;
    }

    .dashboard-cat-amount {
      font-weight: 600;
      font-size: 13px;
    }

    .dashboard-cat-percent {
      font-size: 11px;
      color: #6b7280;
    }

    .dashboard-cat-bar-track {
      height: 5px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
    }

    .dashboard-cat-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #fb923c, #f97316);
      transition: width 0.25s ease-out;
    }

    /* 预算列 */
    .dashboard-cat-budget-cell {
      text-align: right;
    }

    .dashboard-cat-budget {
      font-size: 12px;
      text-align: right;
      white-space: nowrap;
      color: #4b5563;
    }

    .dashboard-cat-budget.empty {
      color: #d4d4d8;
    }


  .dashboard-cat-name-main {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
  }

  .dashboard-cat-name-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
  }

  /* 金额 + 进度条容器 */
  .dashboard-cat-amount-cell {
    text-align: right;
  }

  .dashboard-cat-amount {
    font-weight: 600;
    font-size: 13px;
  }

  .dashboard-cat-percent {
    font-size: 11px;
    color: #6b7280;
    margin-left: 6px;
  }

  .dashboard-cat-bar-track {
    margin-top: 4px;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
  }

  .dashboard-cat-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #fb923c, #f97316);
    transition: width 0.25s ease-out;
  }

  .dashboard-cat-budget {
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: #4b5563;
  }

  .dashboard-cat-budget.empty {
    color: #d4d4d8;
  }
  
  /* ✅ Dashboard 本月收支分类表：控制“分类”列宽度（缩短不浪费空间） */
    .dashboard-cat-table{
      table-layout: fixed;          /* 关键：让列宽严格生效 */
    }
    
    /* 分类列：给一个明确宽度（你可把 140px 改成 120/160 试手感） */
    .dashboard-cat-col-name{
      width: 140px;
    }
    
    /* 让分类内容在固定宽度下优雅省略 */
    .dashboard-cat-name-wrap{
      min-width: 0;
    }
    
    .dashboard-cat-name-text{
      min-width: 0;
    }
    
    .dashboard-cat-name-main,
    .dashboard-cat-name-sub{
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }



  /* ===========================================================
     通用表格样式
  =========================================================== */
  .list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #111827;
  }

  .list-table thead {
    font-size: 11px;
    color: #6b7280;
    background: #f9fafb;
  }

  .list-table th,
  .list-table td {
    padding: 6px 4px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
  }

  .list-table tbody tr:hover {
    background: #f3f4f6;
  }

  .list-table .align-right {
    text-align: left;
  }

  .badge-type {
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
  }

  .badge-type.expense {
    background: rgba(248, 113, 113, 0.16);
    color: #b91c1c;
  }

  .badge-type.income {
    background: rgba(22, 163, 74, 0.16);
    color: #166534;
  }

  .badge-type.transfer {
    background: rgba(56, 189, 248, 0.16);
    color: #0369a1;
  }

  /* ===========================================================
     账单列表（PC 版手机风样式）
  =========================================================== */
  .transactions-list {
    flex: 1;
    overflow: auto;
    margin-top: 8px;
    border-radius: 22px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(148, 163, 184, 0.3);
    padding: 6px 16px 12px;
  }

  .trans-date-group {
    margin-bottom: 10px;
  }

  .trans-date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 6px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .trans-date-badge {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 500;
  }

  .trans-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #ecfdf5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0f766e;
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.25);
  }

  .trans-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }

  .trans-category {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
  }

  .trans-time {
    font-size: 11px;
    color: var(--text-muted);
  }

  .trans-note {
    font-size: 11px;
    color: var(--text-muted);
  }

  .trans-amount {
    font-size: 13px;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
  }

  .trans-amount.expense {
    color: #b91c1c;
  }

  .trans-amount.income {
    color: #166534;
  }

  .trans-amount.transfer {
    color: #0369a1;
  }

  /* 一天的账单容器 */
  .trans-date-group {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 10px 6px;
    margin-bottom: 10px;
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.18);
  }

  .trans-date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px 6px;
  }

  .trans-date-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(240, 253, 250, 0.96);
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-size: 12px;
    color: #047857;
  }

  .trans-items {
    margin-top: 4px;
  }

  .trans-item {
    padding: 6px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.16s ease-out, transform 0.16s ease-out,
                box-shadow 0.16s ease-out;
  }

  .trans-item:hover {
    background: rgba(240, 249, 255, 0.95);
    transform: translateY(-1px);
    /*box-shadow: 0 8px 18px rgba(148, 163, 184, 0.3);*/
  }


  .trans-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .trans-main-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 15px;
  }

  .trans-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffd396;
    background-color: #ffedd4;
    flex-shrink: 0;
  }

  .trans-cat-icon .svg-icon {
    font-size: 18px;
  }

  .trans-line-text {
    display: flex;
    min-width: 0;
    flex-direction: row;   /* 改为横向排列 */
    align-items: center;   /* ★ 让内部元素垂直居中 */
    gap: 15px;              /* 两个元素的间距 */
    min-width: 0;
  }

  .trans-line-first {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .trans-cat-name {
    font-weight: 600;
    white-space: nowrap;
    font-size: 14px;
  }

  .trans-note-inline {
    flex: 1;
    font-size: 13px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
  }

  .trans-line-second {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .trans-time-inline {
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
  }

  .trans-main-right {
    display: flex;
    flex-direction: row;   /* 同行显示 */
    align-items: center;   /* ★ 垂直居中 */
    justify-content: flex-end;
    gap: 6px;              /* 账户与金额之间的间距 */
    min-width: 140px;
}

    .trans-account,
    .trans-amount {
        display: flex;
        align-items: center;     /* 内部文本也居中 */
        line-height: 1.2;
    }


  .trans-amount {
    font-size: 14px;
    font-weight: 600;
  }

  .trans-amount.expense {
    color: #b91c1c;
  }

  .trans-amount.income {
    color: #15803d;
  }

  .trans-amount.transfer {
    color: #0369a1;
  }

  .trans-account {
    font-size: 11px;
    color: var(--text-muted);
  }


    /* AI 聊天里使用的手机端风格账单卡片 */
  .ai-bill-card-mobile {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.25);
  }

  .ai-bill-cards {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ai-bill-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 6px 6px;
    font-size: 11px;
    color: #6b7280;
  }

  .ai-bill-footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .tag-recorded {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 11px;
  }

  .ai-bill-time {
    font-size: 11px;
    color: #9ca3af;
  }

  .ai-bill-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ai-bill-action-btn {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(229, 231, 235, 0.7);
    color: #4b5563;
  }

  .ai-bill-action-btn:hover {
    background: rgba(209, 213, 219, 0.9);
    color: #111827;
  }

  .ai-bill-action-danger {
    background: rgba(248, 113, 113, 0.12);
    color: #dc2626;
  }

  .ai-bill-action-danger:hover {
    background: rgba(248, 113, 113, 0.22);
  }

  /* “加载更多历史”按钮小一号 */
  .ai-history-load-more-wrap {
    text-align: center;
    padding: 4px 0 8px;
  }

  .btn-ghost-small {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: transparent;
    padding: 2px 10px;
    font-size: 11px;
    color: #9ca3af;
    cursor: pointer;
  }

  .btn-ghost-small:hover {
    border-color: rgba(148, 163, 184, 0.9);
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.3);
  }


  /* ===========================================================
     账单页布局
  =========================================================== */
  .table-container {
    flex: 1;
    overflow: auto;
    margin-top: 8px;
    border-radius: 22px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(148, 163, 184, 0.3);
    padding: 8px 10px 10px;
  }

  .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .pill-tabs {
    display: inline-flex;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    overflow: hidden;
  }

  .pill-tabs button {
    border: none;
    background: transparent;
    padding: 5px 10px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition:
      background var(--transition-fast),
      color var(--transition-fast);
  }

  /* ✅ Stats：一级/二级分类切换 - 选中效果更明显 */
#stats-level-tabs button.active{
  background: rgba(255,255,255,0.95);
  color: #111827;
  font-weight: 600;
  border-radius: 10px;
  /* 用 inset 阴影做描边，不会改变按钮尺寸 */
  box-shadow: 0 0 0 2px rgb(246 165 207 / 90%) inset;
}


  /* ===========================================================
     资产页
  =========================================================== */
  .assets-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
  }

  /* 中等屏幕以下变成 2 列（如宽度 < 900px） */
@media (max-width: 1080px) {
  .assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

  .asset-card {
    background:
      radial-gradient(circle at 0 0, rgba(187, 247, 208, 0.95), transparent 55%),
      #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(190, 242, 100, 0.9);
    padding: 10px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 14px 34px rgba(163, 230, 53, 0.35);
  }

  .asset-name {
    font-size: 12px;
    color: var(--text-muted);
  }

  .asset-platform {
    font-size: 11px;
    color: #16a34a;
  }

  .asset-amount {
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
    color: #022c22;
  }

  .asset-meta {
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    color: #166534;
  }


  /**************************************************
 * 资产：新版账户弹窗 + 账户类型面板 + 自定义账户
 * （PC 适配，整体风格沿用当前 Mac 毛玻璃 / 卡片风格）
 **************************************************/

/* 弹窗主体（复用你原来的 modal-content 宽度体系） */
.modal-content.asset-modal {
  max-width: 560px;
  width: 100%;
  backdrop-filter: blur(18px);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-sizing: border-box;
  height: 80%;
  overflow-y: auto;
}

/* 标题 + 右上角 X 按钮 */
.asset-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text-primary, #0f172a);
}

.asset-modal .close-btn {
  position: absolute;
  right: 14px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
}

.asset-modal .close-btn:hover {
  background: rgba(148, 163, 184, 0.12);
}

/* 整体表单结构 */
.asset-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 区块 */
.asset-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.asset-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}

/* 输入框包装 */
.asset-input-wrapper input,
.asset-more-item input,
.asset-advanced-row input[type="number"],
.asset-advanced-row textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: rgba(248, 250, 252, 0.9);
  background: rgba(255, 255, 255, 0.55);
  padding: 9px 10px;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
  outline: none;
}

.asset-input-wrapper input:focus,
.asset-more-item input:focus,
.asset-advanced-row input[type="number"]:focus,
.asset-advanced-row textarea:focus {
  border-color: var(--primary-color, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

/* 账户类型卡片 */
.asset-type-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
   background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-color, #e5e7eb);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.asset-type-cell:hover {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(148, 163, 184, 0.7);
}

.asset-cell-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.asset-cell-label {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.asset-cell-desc {
  font-size: 13px;
  color: var(--text-secondary, #475569);
}

.asset-cell-desc.has-value {
  font-weight: 500;
}

.asset-cell-desc.has-value {
  color: var(--text-primary, #111827);
  font-weight: 500;
}


.asset-cell-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-type-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft, rgba(34, 197, 94, 0.08));
}

.asset-type-icon-circle .icon {
  font-size: 28px;
}

.asset-cell-arrow {
  font-size: 18px;
  color: var(--text-muted, #94a3b8);
}

/* 资金信息卡片 */
.asset-info-card {
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
      background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: 5px 12px;
  display: flex;
  /*flex-direction: column;*/
  gap: 5px;
}

/* 每一行 */
.asset-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  border-bottom: 1px solid #f1f3f5;
}

/* 左侧标题 */
.asset-info-label {
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

/* 右侧输入区域 */
.asset-info-input {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin-left: 10px;
}

/* 高级感输入框 */
.asset-info-input input {
  width: 150px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #d0d7de;
  background: #fafafa;
  font-size: 15px;
  color: #222;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* hover 效果 */
.asset-info-input input:hover {
  border-color: #b8bec5;
}

/* 聚焦效果（重点优化） */
.asset-info-input input:focus {
  border-color: #4C9AFF; /* 蓝色高亮，如 Mac 输入框 */
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,154,255,0.25);
}


/* 开关（计入总资产） */
.asset-switch {
  position: relative;
  width: 40px;
  height: 22px;
  display: inline-block;
  margin-left: 10px;
}

.asset-switch input {
  display: none;
}

.asset-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.asset-switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}

.asset-switch input:checked + .asset-switch-slider {
  background: var(--primary-color, #22c55e);
}

.asset-switch input:checked + .asset-switch-slider::before {
  transform: translateX(18px);
}

/* 更多信息：两列布局 */
.asset-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.asset-more-item label {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  display: block;
  margin-bottom: 4px;
}

/* 高级设置 */
.asset-advanced-row {
  margin-top: 6px;
}

.asset-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #475569);
}

.asset-checkbox-label input {
  width: 14px;
  height: 14px;
}

/* 底部按钮区域 */
.asset-actions {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.asset-actions .btn-primary,
.asset-actions .btn-secondary {
  min-width: 0;
}

/* 账户类型面板（底部弹出） */

/* 账户类型面板（底部弹出） */
.asset-type-sheet {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;     /* ★ 提高层级，确保盖过 .modal */
}


.asset-type-sheet.show {
  display: block;
}

.asset-type-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
}

.asset-type-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 70vh;
  background: var(--card-bg, rgba(255, 255, 255, 0.98));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  padding: 10px 16px 14px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}

.asset-type-sheet-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 6px;
}

.asset-type-sheet-close-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.1);
}

.asset-type-sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

/* 搜索框 */
.asset-type-search {
  margin-bottom: 6px;
}

.asset-type-search input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: rgba(248, 250, 252, 0.96);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}

.asset-type-search input:focus {
  border-color: var(--primary-color, #22c55e);
}

/* 分组 + 网格 */
.asset-type-group {
  margin-top: 6px;
}

.asset-type-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 4px;
}

.asset-type-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.asset-type-item {
  border-radius: 12px;
  /*border: 1px solid var(--border-color, #e5e7eb);*/
  /*background: rgba(248, 250, 252, 0.95);*/
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

.asset-type-item:hover {
  border-color: var(--primary-color, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15);
}

.asset-type-item .asset-type-icon-circle {
  width: 28px;
  height: 28px;
}

/* 搜索结果容器 */
.asset-type-list {
  max-height: 40vh;
  overflow-y: auto;
}

/* 自定义账户入口 */
.asset-type-custom-entry {
  margin-top: 10px;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed var(--border-color, #e5e7eb);
  cursor: pointer;
}

.asset-type-custom-entry:hover {
  border-color: var(--primary-color, #22c55e);
  background: rgba(240, 253, 244, 0.8);
}

.asset-type-custom-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary-soft, rgba(34, 197, 94, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.asset-type-custom-title {
  font-size: 13px;
  font-weight: 500;
}

.asset-type-custom-sub {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

/* 自定义账户类型弹窗 */
.custom-platform-content {
  max-width: 520px;
}

.asset-label {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 4px;
}

/* ========= 资产：删除按钮美化 ========= */
.asset-delete-btn{
  appearance: none;
  border: 1px solid rgba(239, 68, 68, 0.35);  /* red-500 */
  background: rgba(239, 68, 68, 0.08);
  color: rgb(185, 28, 28);                    /* red-700 */
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease;
  user-select: none;
}

.asset-delete-btn:hover{
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.12);
}

/* 图标预览区 */
.cp-icon-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cp-icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.95);
}

.cp-icon-preview-placeholder {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

/* 图标选择网格 */
.cp-icon-grid {
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}

.cp-icon-item {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cp-icon-item:hover {
  border-color: var(--primary-color, #22c55e);
  background: rgba(240, 253, 244, 0.9);
}

.cp-icon-empty {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  padding: 8px 0;
}

/* 链接风格按钮（使用默认图标） */
.btn-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--primary-color, #22c55e);
  cursor: pointer;
}


  /* ===========================================================
     我的 / 设置
  =========================================================== */
  /* ===========================================================
   我的 / 设置（精致毛玻璃宫格 + 手机端SVG图标）
   =========================================================== */

/* 顶部宫格：更均匀、更舒服 */
    #page-mine .settings-quick-grid{
      display:grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 14px 14px;
      /*padding: 10px 6px 4px;*/
    }

    /* 单项：做成毛玻璃小卡片（让“高级感”出来） */
    #page-mine .settings-quick-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 8px;
      padding: 12px 8px;
      border-radius: 18px;
      cursor:pointer;
      user-select:none;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }

    #page-mine .settings-quick-item:hover{
      transform: translateY(-2px);
      /*background: rgba(255,255,255,.72);*/
      /*border-color: rgba(16,185,129,.22);*/
      /*box-shadow: 0 18px 44px rgba(15, 23, 42, .12);*/
    }

    #page-mine .settings-quick-item:active{
      transform: translateY(0) scale(.985);
    }

    /* 键盘可用：focus 更清晰 */
    #page-mine .settings-quick-item:focus-within{
      outline: none;
      border-color: rgba(16,185,129,.35);
      box-shadow: 0 0 0 3px rgba(16,185,129,.12), 0 18px 44px rgba(15,23,42,.12);
    }

    /* 圆形图标：渐变 + 高光外圈 + 质感阴影 */
    #page-mine .settings-quick-icon{
      width: 42px;
      height: 42px;
      border-radius: 999px;

      display:flex;
      align-items:center;
      justify-content:center;

      position: relative;
      color: #f9fafb;

      box-shadow:
        0 16px 34px rgba(15, 23, 42, .16),
        inset 0 1px 0 rgba(255,255,255,.35);
    }

    /* SVG 尺寸统一（替代你原来的 font-size） */
    #page-mine .settings-quick-icon .svg-icon{
      width: 40px;
      height: 40px;
      fill: currentColor;
    }

    /* 高光外圈：更“精致” */
    #page-mine .settings-quick-icon::after{
      content:"";
      position:absolute;
      inset: -3px;
      border-radius: inherit;
      pointer-events:none;

      box-shadow:
        0 0 0 1px rgba(255,255,255,.65),
        0 0 0 7px rgba(16,185,129,.06);
      background: radial-gradient(circle at 30% 0,
        rgba(255,255,255,.55),
        rgba(255,255,255,0) 60%);
    }


    /* 文案：更紧凑更高级 */
    #page-mine .settings-quick-label{
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .2px;
      color: #111827;
    }

    /* 响应式：窗口变窄自动换列 */
    @media (max-width: 1200px){
      #page-mine .settings-quick-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }
    @media (max-width: 980px){
      #page-mine .settings-quick-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    /* ✅ 你说不要第二份入口：直接隐藏（也建议你把HTML删掉更干净） */
    #page-mine .settings-grid{ display:none !important; }


    /* ===========================================================
   Mine / Settings (PC) — 参考手机端结构的精致毛玻璃风
   =========================================================== */

    #page-mine .page-header{
      margin-bottom: 12px;
    }

    /* 统一卡片更精致一点 */
    #page-mine .card{
      border-radius: 20px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(229,231,235,.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      /*box-shadow: 0 16px 40px rgba(15,23,42,.10);*/
    }

    /* =========================
       顶部个人信息卡
       ========================= */
    #page-mine .mine-header-card-pc{
      padding: 0px 16px 12px;
      /*margin-bottom: 12px;*/
    }

    #page-mine .mine-user-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    #page-mine .mine-user-left{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }

    #page-mine .mine-avatar{
      width: 56px;
      height: 56px;
      border-radius: 999px;
      overflow:hidden;
      border: 1px solid rgba(229,231,235,.95);
      box-shadow: 0 10px 24px rgba(15,23,42,.12);
      flex: 0 0 auto;
    }
    #page-mine .mine-avatar img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    #page-mine .mine-user-text{
      min-width: 0;
    }
    #page-mine .mine-nickname{
      font-size: 16px;
      font-weight: 750;
      color:#111827;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #page-mine .mine-user-subtext{
      margin-top: 4px;
      font-size: 12px;
      color:#6b7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #page-mine .mine-checkin-btn{
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(229,231,235,.95);
      color:#111827;
      cursor:pointer;
      box-shadow: 0 10px 22px rgba(15,23,42,.10);
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    }
    #page-mine .mine-checkin-btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.85);
      box-shadow: 0 16px 34px rgba(15,23,42,.14);
    }

    /* 统计三列 */
    #page-mine .mine-stats-row-pc{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      border-top: 1px solid rgba(229,231,235,.85);
    }

    #page-mine .mine-stat-item{
      border-radius: 16px;
      padding: 10px 10px;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(229,231,235,.75);
    }

    #page-mine .mine-stat-value{
      font-size: 16px;
      font-weight: 800;
      color:#111827;
      line-height: 1.1;
    }
    #page-mine .mine-stat-label{
      font-size: 11px;
      color:#6b7280;
    }

    /* =========================
       你的 settings-quick-grid：做成更高级的小卡片宫格
       ========================= */
    #page-mine .settings-quick-grid{
      /*padding: 14px 12px 12px;*/
      gap: 0px 0px;
    }

    /* 每个入口：毛玻璃小卡片 */
    #page-mine .settings-quick-item{
      padding: 12px 8px;
      border-radius: 18px;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }


    /* 文案更“精致” */
    #page-mine .settings-quick-label{
      font-weight: 450;
      letter-spacing: .2px;
    }

    /* =========================
       grid 下方列表：设置列表风
       ========================= */
    #page-mine .mine-list-card-pc{
      padding: 0;
      overflow: hidden;
      margin-top: 12px;
    }
    #page-mine .mine-list-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 16px;
      cursor:pointer;
      border-bottom: 1px solid rgba(229,231,235,.75);
      transition: background .15s ease;
    }
    #page-mine .mine-list-item:last-child{ border-bottom: none; }
    #page-mine .mine-list-item:hover{ background: rgba(15,23,42,.03); }

    #page-mine .mine-list-item .icon-wrapper{
      display:flex;
      align-items:center;
      gap: 10px;
      color:#111827;
      font-weight: 500;
      font-size: 15px;
    }
    #page-mine .mine-list-item .svg-icon{
      width: 18px;
      height: 18px;
      fill: var(--accent-color, #14b8a6);
    }
    #page-mine .mine-list-item .arrow-icon{
      opacity: .55;
    }


    /* Mine 列表分组标题 */
    #page-mine .mine-list-group-title{
      padding: 12px 16px 8px;
      font-size: 12px;
      font-weight: 750;
      color: rgba(17,24,39,.65);
      letter-spacing: .2px;
    }

    /* 右侧区域：hint + 箭头 */
    #page-mine .mine-list-right{
      display:flex;
      align-items:center;
      gap: 10px;
    }

    #page-mine .mine-list-hint{
      font-size: 12px;
      color: rgba(107,114,128,.85);
    }

    /* 第二张列表卡间距 */
    #page-mine .mine-list-card-secondary{
      margin-top: 12px;
    }

    /* 退出登录：危险项 */
    #page-mine .mine-list-item-danger .icon-wrapper span{
      color: #b91c1c;
    }
    #page-mine .mine-list-item-danger:hover{
      background: rgba(185,28,28,.06);
    }
    #page-mine .mine-list-item-danger .svg-icon{
      fill: #ef4444;
    }


  /* ===========================================================
     统计页布局
  =========================================================== */
  .stats-layout {
    display: grid;
    grid-template-columns: 2fr 1.1fr;
    gap: 10px;
    height: calc(100% - 26px);
  }

  .stats-left,
  .stats-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .stats-chart-wrapper {
    height: 230px;
    border-radius: 16px;
    background: linear-gradient(to bottom, #f9fafb, #ecfeff);
    padding: 8px;
  }

  .category-table-wrapper {
    flex: 1;
    overflow: auto;
    border-radius: var(--radius-lg);
  }

  /* ===========================================================
     AI 聊天记账区域
  =========================================================== */
  .ai-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    height: calc(100% - 26px);
  }

  /* 左侧会话列表 */
  .ai-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ai-sidebar .card {
    border-radius: 20px;
    padding: 10px 12px;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
      rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(187, 247, 208, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .ai-session-list {
    flex: 1;
    border-radius: 20px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    background:
      linear-gradient(145deg, rgba(249, 250, 251, 0.96), rgba(243, 244, 246, 0.96));
    box-shadow: 0 16px 36px rgba(148, 163, 184, 0.4);
    padding: 8px 10px;
    overflow: auto;
  }

  .ai-session-item {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #111827;
    transition:
      background 0.18s ease-out,
      transform 0.18s ease-out,
      box-shadow 0.18s ease-out;
  }

  .ai-session-item span:first-child {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-session-item:hover {
    background: rgba(204, 251, 241, 0.9);
    transform: translateY(-1px);
  }

  .ai-session-item.active {
    background:
      radial-gradient(circle at 0 0, #a7f3d0, #0f766e 75%);
    color: #f9fafb;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.6);
  }

  /* 右侧聊天主体 */
  .ai-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ai-main .card {
    border-radius: 24px;
    height: 100%;
    padding: 5px 0px 0px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(254, 249, 195, 0.9), transparent 60%),
      rgba(255, 255, 255, 0.92);
  }

  .ai-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-radius: 18px;
    /*border: 1px solid rgba(209, 213, 219, 0.9);*/
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.9), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(254, 249, 195, 0.9), transparent 50%),
      rgba(255, 255, 255, 0.96);
    padding: 10px 12px;
    overflow: auto;
    font-size: 13px;
  }

  .ai-message {
    display: flex;
    margin-bottom: 10px;
    gap: 8px;
  }

  #ai-messages::-webkit-scrollbar {
      width: 4px;
    }

    #ai-messages::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
    }

    #ai-messages::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ffa45b, #ff7b36);
      border-radius: 4px;
      box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.65);
    }

    #ai-messages::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ff7b36, #ff5a1f);
    }


  .ai-message.user {
    justify-content: flex-end;
  }

  .ai-message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, #ecfdf5, #14b8a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #f9fafb;
    flex-shrink: 0;
  }

  .ai-message.user .ai-message-avatar {
    background: radial-gradient(circle at 30% 0, #ffedd5, #fb923c);
    color: #7c2d12;
  }

  .ai-bubble {
    max-width: 72%;
    padding: 8px 11px;
    border-radius: 16px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    background: rgba(255, 255, 255, 0.96);
    line-height: 1.5;
    box-shadow: 0 10px 26px rgba(148, 163, 184, 0.35);
    position: relative;
    color: #111827;
  }

  .ai-message.ai .ai-bubble::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50% 0 50% 50%;
    background: inherit;
    border-left: inherit;
    border-bottom: inherit;
  }

  .ai-message.user .ai-bubble {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #f9fafb;
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(248, 146, 60, 0.6);
  }

  .ai-message.user .ai-bubble::before {
    content: "";
    position: absolute;
    right: -6px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 0 50% 50% 50%;
    background: linear-gradient(135deg, #fb923c, #f97316);
  }

  .ai-input-area {
    margin-top: 8px;
    /*display: flex;*/
    gap: 10px;
    align-items: flex-end;
  }

  .ai-input-area textarea {
    resize: none;
    min-height: 70px;
    border-radius: 16px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.9);
    color: #111827;
    transition:
      border-color 0.18s ease-out,
      box-shadow 0.18s ease-out,
      background 0.18s ease-out;
  }

  .ai-input-area textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.28);
    background: #ffffff;
  }

  .ai-input-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
  }

  .ai-input-tools .btn-ghost {
    padding: 4px 10px;
    font-size: 12px;
  }

  .ai-input-tools .btn-primary {
    padding: 7px 14px;
    font-size: 13px;
  }


  /* 底部输入区：Mac 风奶白胶囊 */
    .ai-input-area {
      margin: 16px 18px 18px;
      padding: 8px 10px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(148, 163, 184, 0.22);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .ai-input-inner {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* 文本输入框 */
    .ai-input-textarea,
    .ai-input-area textarea#ai-input {
      flex: 1;
      outline: none;
      resize: none;
      background: transparent;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-main, #111827);
      max-height: 80px;
      padding: 6px 10px;
    }

    .ai-input-textarea::placeholder,
    .ai-input-area textarea#ai-input::placeholder {
      color: rgba(148, 163, 184, 0.9);
    }

    .ai-input-textarea::placeholder {
      text-align: left !important;
      white-space: pre-line; /* 让换行生效 */
    }


    /* 右侧按钮区域 */
    .ai-input-tools {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 通用小圆按钮 */
    .ai-tool-btn {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: none;
      padding: 0;
      outline: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(248, 250, 252, 0.95);
      /*box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);*/
      cursor: pointer;
      transition:
        background 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
    }

    .ai-tool-btn svg {
      width: 32px;
      height: 32px;
    }

    /* 图片按钮：浅色玻璃 */
    .ai-tool-icon-btn {
      background: rgba(248, 250, 252, 0.95);
      background: transparent;
    }

    .ai-tool-icon-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    }

    .ai-tool-icon-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    /* 发送按钮：主色渐变 + 阴影 */
    .ai-send-btn svg {
      fill: currentColor;
    }

    .ai-send-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(248, 113, 113, 0.55);
    }

    .ai-send-btn:active {
      transform: translateY(0);
      box-shadow: 0 4px 14px rgba(248, 113, 113, 0.45);
    }

    .ai-send-btn:disabled {
      opacity: 0.35;
      cursor: default;
      transform: none;
      box-shadow: none;
    }

    /* 预览区域可以稍微收一下间距，让整体更紧凑 */
    .ai-image-preview {
      padding: 6px 18px 0;
    }


  /* ===========================
   Ghost 轻量按钮（刷新数据 等）
   =========================== */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed rgba(209, 213, 219, 0.9);

  font-size: 12px;
  font-weight: 500;
  color: #4b5563;

  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.9);

  box-shadow: 0 8px 22px rgba(148, 163, 184, 0.28);
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.2);
}

/* 适配暗背景区域 */
.btn-ghost:focus {
  outline: none;
}


  /* 精简：底部提示文字先隐藏，有需要再放开 */
  .ai-hint {
    display: none;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
  }


  /* ===========================================================
   PC 端 AI 聊天记账 —— 简化为单会话
   =========================================================== */

    /* 只用右侧一列 */
    .ai-layout {
      flex: 1;
      min-height: 0;
      display: flex;
      gap: 16px; /* 看你喜好，可调 */
    }

    /* 左侧会话列表直接隐藏 */
    .ai-sidebar {
      display: none !important;
    }

    /* 右侧聊天卡片拉满宽度 */
    .ai-main {
      width: 100%;
      height: 100%;
       flex: 1;
        min-height: 0;
        display: flex;
    }


  /* ===========================================================
     模态框（新增 / 编辑账单）
  =========================================================== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .modal-backdrop.show {
    display: flex;
  }

  .modal-panel {
    width: 640px;
    max-width: 95vw;
    height: 90vh;
    background:
      radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
      rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    box-shadow: 0 26px 70px rgba(148, 163, 184, 0.55);
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #111827;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
  }

  .modal-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
  }

  .modal-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    margin-top: 6px;
  }

  .modal-section {
    border-radius: var(--radius-md);
    border: 1px solid rgba(209, 213, 219, 0.95);
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.96);
  }


  .field {
    margin-bottom: 8px;
  }

  .field label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 3px;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: 6px 8px;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    outline: none;
  }

  .field textarea {
    min-height: 60px;
    resize: vertical;
  }

  .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
  }

  .quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
  }

  .quick-tag {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    background: #f9fafb;
    cursor: pointer;
    color: #6b7280;
  }

  .quick-tag:hover {
    border-color: var(--primary-color);
    color: #111827;
    background: #ffffff;
  }

  /* ============================
   PC 记账弹窗（对齐手机端结构）
   ============================ */

.entry-panel {
  max-width: 860px;
  width: 860px;
}

.entry-modal-body {
  display: grid;
  grid-template-columns: 1.25fr 1.4fr;
  gap: 16px;
  height: 85%;
  align-items: flex-start;
}

/* 左右区域基础 */
.entry-left,
.entry-right {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  overflow-y: auto;
}

/* 类型 tab */
.entry-type-tabs {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px;
  background: rgba(226, 232, 240, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.entry-type-tab {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #6b7280;
  transition:
    background 0.15s ease-out,
    color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.15s ease-out;
}

.entry-type-tab.active {
  background: linear-gradient(135deg, #34d399, #22c55e);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
  transform: translateY(-1px);
}

/* 金额展示 */
.entry-amount-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
  border: 1px solid rgba(191, 219, 254, 0.7);
}

.entry-amount-currency {
  font-size: 18px;
  color: #6b7280;
}

.entry-amount-display {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0f172a;
}

/* 数字键盘 */
.entry-num-keyboard {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.entry-num-keyboard button {
  border-radius: 999px;
  border: none;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 2px 6px rgba(148, 163, 184, 0.3);
  transition:
    background 0.15s ease-out,
    transform 0.1s ease-out,
    box-shadow 0.15s ease-out;
}

.entry-num-keyboard button.wide {
  grid-column: span 3;
  font-size: 13px;
}

.entry-num-keyboard button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(148, 163, 184, 0.6);
  background: #e5f3ff;
}

/* 分类 group / item pill 列表 */
/* 记一笔弹窗右侧：分类区域整体布局 */
/* 整个分类区域：由多行组成 */
.entry-right .entry-cat-group-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

/* 每一行：最多 5 个一级分类 */
.entry-cat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

/* 一级分类按钮（仿手机端那种软卡片） */
.entry-cat-group-pill {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 18px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: #555;
  transition:
    background 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.12s ease-out,
    color 0.18s ease-out;
}

/* 单个分类：胶囊卡片 */
.entry-cat-group-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 12px 10px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.entry-cat-group-pill svg.icon {
  width: 22px;
  height: 22px;
}

/* 一级分类 hover / 选中状态 */
.entry-cat-group-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.45);
}

.entry-cat-group-pill.active {
  background: linear-gradient(135deg, #ff9f7a, #ff6a3c);
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.45);
}

/* 行下方的二级分类条（默认隐藏） */
.entry-cat-row-items {
  display: none;
  margin: 0 4px;
  padding: 10px 12px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.105);
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* 展开时显示 */
.entry-cat-row-items.active {
  display: flex;
}

/* 二级分类按钮（图标 + 文本竖排，类似你截图） */
.entry-cat-pill {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
  min-width: 56px;
}

.entry-cat-pill svg.icon {
  width: 22px;
  height: 22px;
}

.entry-cat-pill:hover {
  color: #ff6a3c;
}

.entry-cat-pill.active {
  color: #ff6a3c;
}

/* 旧的全局二级容器隐藏掉（兼容老结构） */
.entry-right #entry-cat-item-list {
  display: none;
}


/* 资产快捷按钮 */
.entry-asset-quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.entry-asset-chip {
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 0.85);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(248, 250, 252, 0.9);
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.15s ease-out,
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.entry-asset-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
}

.entry-asset-chip.active {
  background: #ecfeff;
  border-color: #22c55e;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 报销开关 */
.entry-reimburse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.entry-reimburse-seg{
  display:flex;
  gap:8px;
}
.entry-reimburse-btn{
  flex:1;
  border:1px solid rgba(209,213,219,.9);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.entry-reimburse-btn.active{
  border-color:#22c55e;
  background: rgba(34,197,94,.12);
  color:#166534;
}


.entry-switch {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
}

.entry-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.entry-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #e5e7eb;
  border-radius: 999px;
  transition: 0.2s;
}

.entry-switch-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 999px;
  transition: 0.2s;
}

.entry-switch input:checked + .entry-switch-slider {
  background-color: #22c55e;
}

.entry-switch input:checked + .entry-switch-slider:before {
  transform: translateX(16px);
}

.entry-reimburse-target {
  flex: 1;
}

/* 底部按钮右对齐 */
.entry-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


  /* ===========================================================
     账单详情弹窗
  =========================================================== */
  #modal-trans-detail .modal-panel {
    max-width: 520px;
  }

  .trans-detail-header {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .trans-detail-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .trans-detail-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: #f3f4f6;
    color: #4b5563;
  }

  .trans-detail-type-tag.expense {
    background: rgba(248, 113, 113, 0.12);
    color: #b91c1c;
  }

  .trans-detail-type-tag.income {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
  }

  .trans-detail-type-tag.transfer {
    background: rgba(56, 189, 248, 0.12);
    color: #0369a1;
  }

  .trans-detail-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(209, 213, 219, 0.8);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .trans-detail-actions {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .btn-danger {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    transition:
      background var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .btn-danger:hover {
    background: rgba(239, 68, 68, 0.16);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25);
  }

  /* 账单详情 —— 小票风格弹窗 */
    .receipt-modal {
      max-width: 420px;
      width: 100%;
      padding: 0;
      background: transparent;
      box-shadow: none;
      position: relative;
    }

    /* 关闭按钮浮在右上角 */
    .receipt-close {
      position: absolute;
      top: 8px;
      right: 10px;
      border-radius: 999px;
      width: 26px;
      height: 26px;
      line-height: 24px;
      font-size: 16px;
      background: rgba(15, 23, 42, 0.7);
      color: #f9fafb;
      border: none;
      cursor: pointer;
      z-index: 2;
    }

    /* 小票纸张主体 */
    .receipt-paper {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 16px 12px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
      position: relative;
      overflow: hidden;
    }

    /* 顶部有一点淡淡的渐变，像灯光打在小票上 */
    .receipt-paper::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(219, 234, 254, 0.9), transparent 55%);
      pointer-events: none;
    }

    /* header */
    .receipt-header {
      position: relative;
      z-index: 1;
      margin-bottom: 6px;
    }

    .receipt-title {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      color: #111827;
    }

    .receipt-meta-line {
      margin-top: 4px;
      display: flex;
      justify-content: center;
      gap: 8px;
      font-size: 11px;
      color: #6b7280;
    }

    .receipt-time {
      font-variant-numeric: tabular-nums;
    }

    /* 分隔线 */
    .receipt-divider {
      position: relative;
      z-index: 1;
      margin: 8px 0;
      height: 1px;
      background: #e5e7eb;
    }

    .receipt-divider.dotted {
      border-top: 1px dashed #d4d4d8;
      background: transparent;
    }

    /* 金额区域 */
    .receipt-amount-block {
      position: relative;
      z-index: 1;
      text-align: center;
      margin-bottom: 4px;
    }

    .receipt-amount-label {
      font-size: 11px;
      color: #6b7280;
      margin-bottom: 2px;
    }

    .receipt-amount-value {
      font-size: 22px;
      font-weight: 700;
      color: #111827;
      letter-spacing: 0.03em;
    }

    /* type tag：复用你原来的 class 名 */
    .trans-detail-type-tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      background: #eef2ff;
      color: #4338ca;
    }

    .trans-detail-type-tag.income {
      background: #dcfce7;
      color: #15803d;
    }

    .trans-detail-type-tag.expense {
      background: #fee2e2;
      color: #b91c1c;
    }

    .trans-detail-type-tag.transfer {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* 明细信息区域 */
    .receipt-section {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: #111827;
    }

    .receipt-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }

    .receipt-row-note .receipt-value {
      text-align: right;
      white-space: pre-wrap;
    }

    .receipt-label {
      min-width: 52px;
      color: #6b7280;
    }

    .receipt-value {
      flex: 1;
      text-align: right;
      word-break: break-all;
    }

    /* 条码占位块 */
    .receipt-barcode-block {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      text-align: center;
    }

    .receipt-barcode-fake {
      height: 40px;
      margin: 0 auto 4px;
      max-width: 220px;
      border-radius: 4px;
      background:
        repeating-linear-gradient(
          90deg,
          #020617 0,
          #020617 2px,
          transparent 2px,
          transparent 4px
        );
      opacity: 0.9;
    }

    .receipt-barcode-text {
      font-size: 11px;
      color: #6b7280;
    }

    /* 底部说明文字 */
    .receipt-footer-meta {
      position: relative;
      z-index: 1;
      margin-top: 4px;
      font-size: 10px;
      text-align: center;
      color: #9ca3af;
    }

    /* 底部操作按钮区域 */
    .receipt-actions {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }


    /* =================== 弹窗背景 =================== */
    #modal-trans-detail {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(4px);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000;
    }

    #modal-trans-detail.show {
      display: flex;
    }

    /* =================== 卡片 =================== */
    .detail-modal-card {
      width: 420px;
      background: rgba(255,255,255,0.75);
      backdrop-filter: blur(16px);
      border-radius: 22px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
      overflow: hidden;
      position: relative;
      animation: fadeInUp 0.28s ease-out;
    }

    /* 顶部毛玻璃大区块 */
    .detail-header-glass {
      padding: 28px 24px 18px;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(12px);
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.8);
    }

    /* 金额大字 */
    .detail-amount {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 8px;
    }

    /* 标签行：类型 + 时间 */
    .detail-tagline {
      display: flex;
      justify-content: center;
      gap: 10px;
      font-size: 13px;
      opacity: 0.85;
    }

    .detail-type-tag {
      padding: 3px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
    }

    .detail-type-tag.expense {
      background: #ffe2e2;
      color: #b21515;
    }
    .detail-type-tag.income {
      background: #dcfce7;
      color: #15803d;
    }
    .detail-type-tag.transfer {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .detail-time {
      color: #666;
    }

    /* =================== 信息区 =================== */
    .detail-info {
      padding: 16px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #333;
    }

    .detail-row .label {
      color: #888;
      width: 80px;
    }

    .detail-row-note .value {
      white-space: pre-wrap;
      max-width: 240px;
      text-align: right;
    }

    /* =================== 条码区 =================== */
    .detail-barcode-section {
      padding: 10px 24px 16px;
      text-align: center;
    }

    .barcode-placeholder {
      height: 48px;
      width: 220px;
      margin: 0 auto 6px;
      background: repeating-linear-gradient(
        90deg,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 5px
      );
      opacity: 0.85;
      border-radius: 4px;
    }

    .barcode-text {
      font-size: 11px;
      color: #555;
    }

    /* =================== 底部按钮 =================== */
    .detail-footer {
      padding: 10px 24px 18px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    /* 关闭按钮 */
    .detail-close {
      position: absolute;
      top: 10px;
      right: 14px;
      border: none;
      font-size: 20px;
      background: transparent;
      color: #444;
      cursor: pointer;
      transition: 0.15s;
    }
    .detail-close:hover {
      color: #000;
    }

    /* 动画 */
    @keyframes fadeInUp {
      from { transform: translateY(18px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    /* 弹窗遮罩 */
    #modal-trans-detail {
      position: fixed;
      inset: 0;
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(15, 23, 42, 0.30);
      backdrop-filter: blur(10px);
      z-index: 2000;
    }
    #modal-trans-detail.show {
      display: flex;
    }

    /* 主卡片：和 Dashboard 色系统一的柔和渐变 + 毛玻璃 */
    .detail-modal-card {
      width: 460px;
      max-width: 94vw;
      border-radius: 24px;
      background: linear-gradient(135deg, #e5f7f1 0%, #fdfaf2 45%, #fef6e7 100%);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
      backdrop-filter: blur(18px);
      padding-bottom: 10px;
      position: relative;
      overflow: hidden;
    }

    /* 顶部金额区域 */
    .detail-header-soft {
      padding: 26px 24px 14px;
      text-align: center;
    }

    .detail-amount {
      font-size: 32px;
      font-weight: 700;
      color: #111827;
      letter-spacing: 0.03em;
    }

    /* 日期 + 类型色条（不再显示“支出/收入”字样） */
    .detail-date-row {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      color: #4b5563;
    }

    /* pill 本身的文字只显示日期；颜色靠 class 控制 */
    .detail-type-pill {
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      font-size: 12px;
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    /* 支出 / 收入 / 转账，用细边框 + 小色条体现，不显示文字 */
    .detail-type-pill.expense {
      border: 1px solid rgba(248, 113, 113, 0.6);
      box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12);
    }
    .detail-type-pill.income {
      border: 1px solid rgba(52, 211, 153, 0.6);
      box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12);
    }
    .detail-type-pill.transfer {
      border: 1px solid rgba(96, 165, 250, 0.6);
      box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12);
    }

    /* pill 内部用小点 + 日期 */
    .detail-type-pill::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      margin-right: 6px;
      vertical-align: middle;
    }
    .detail-type-pill.expense::before {
      background: #ef4444;
    }
    .detail-type-pill.income::before {
      background: #10b981;
    }
    .detail-type-pill.transfer::before {
      background: #3b82f6;
    }

    /* 信息区：玻璃白卡片，和右侧面板风格一致 */
    .detail-info-grid {
      margin: 0 16px;
      margin-top: 8px;
      padding: 14px 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 6px 0;
      font-size: 13px;
      border-bottom: 1px dashed rgba(209, 213, 219, 0.8);
    }
    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-row .label {
      color: #6b7280;
      min-width: 70px;
    }

    .detail-row .value {
      color: #111827;
      text-align: right;
      flex: 1;
      margin-left: 12px;
      word-break: break-all;
    }

    .detail-row-note .value {
      white-space: pre-wrap;
    }

    /* 条码区域 */
    .detail-barcode-section {
      padding: 12px 24px 8px;
      text-align: center;
    }

    .barcode-placeholder {
      height: 46px;
      width: 230px;
      margin: 0 auto 6px;
      background: repeating-linear-gradient(
        90deg,
        #020617 0,
        #020617 2px,
        transparent 2px,
        transparent 5px
      );
      opacity: 0.9;
      border-radius: 4px;
    }

    .barcode-text {
      font-size: 11px;
      color: #6b7280;
    }

    /* 底部按钮区域 */
    .detail-footer {
      padding: 8px 24px 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    /* 关闭按钮 */
    .detail-close {
      position: absolute;
      top: 10px;
      right: 14px;
      border: none;
      background: rgba(15, 23, 42, 0.08);
      width: 26px;
      height: 26px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 16px;
      line-height: 26px;
      color: #4b5563;
      transition: all 0.15s ease;
    }
    .detail-close:hover {
      background: rgba(15, 23, 42, 0.18);
      color: #111827;
    }


  /* ===========================================================
     滚动条（统一浅色风格）
  =========================================================== */
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #d4d4d8;
  }

  /* ===========================================================
     响应式
  =========================================================== */
  @media (max-width: 900px) {
  /* 1. 仍然禁止 body 滚动，避免因为滚动条导致宽度抖动 */
  body {
    overflow: hidden;
  }

  /* 2. 小屏时右侧区域上下堆叠 */
  .pc-shell {
    flex-direction: column;
    padding: 10px;
    height: 100vh; /* 占满一屏 */
  }

  .pc-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  /* 3. 把垂直滚动交给右侧内容容器 .pc-pages */
  .pc-pages {
    height: calc(100vh - 90px); /* 90px 按你实际顶部+侧边高度微调 */
    overflow-y: auto;
  }
}

/* ===========================================================
   【修复】资产弹窗缺失的样式
   原因：原代码用了 .modal 类，但 CSS 里没定义，导致弹窗被挤到屏幕外
=========================================================== */

/* 1. 遮罩层容器 (.modal) */
.modal {
  position: fixed;       /* 核心：固定定位 */
  inset: 0;              /* 铺满全屏 */
  z-index: 2000;         /* 保证层级最高，盖住侧边栏 */
  background: rgba(15, 23, 42, 0.25); /* 半透明遮罩 */
  backdrop-filter: blur(8px);         /* 毛玻璃效果 */

  /* 默认隐藏，JS 会改为 flex */
  display: none;
  align-items: center;
  justify-content: center;
}

/* 2. 弹窗主体 (.modal-content / .mine-settings-modal) */
.modal-content {
  width: 660px;          /* 限制宽度 */
  max-width: 90vw;
  max-height: 85vh;
  /*height: 70%;*/

  /* 复用 PC 端的卡片风格 */
  background: radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%),
              rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  border: 1px solid rgba(209, 213, 219, 0.95);
  box-shadow: 0 26px 70px rgba(148, 163, 184, 0.55);

  display: flex;
  flex-direction: column;
  overflow: hidden;      /* 内部滚动 */
  animation: modalFadeIn 0.2s ease-out;
}

/* 3. 头部样式 (.mine-modal-header) */
.mine-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(209, 213, 219, 0.5);
  /*background: rgba(255, 255, 255, 0.5);*/
}

.mine-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* 返回/关闭按钮 */
.mine-modal-back {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  font-size: 18px;
  transition: background 0.2s;
}
.mine-modal-back:hover {
  background: rgba(0,0,0,0.05);
  color: #111827;
}

/* 4. 内容区域 (.mine-modal-body) */
.mine-modal-body {
  flex: 1;
  overflow-y: auto;      /* 内容过长时滚动 */
  padding: 10px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 表单元素的美化 (复用你现有的 field 风格) */
.form-group {
  margin-bottom: 12px;
}
.form-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #fff;
  font-size: 13px;
  outline: none;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row .flex-1 {
  flex: 1;
}

/* 复选框行 */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
}
.form-checkbox input {
  accent-color: var(--primary-color);
}

/* 简单的弹窗动画 */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* 按钮文字样式 */
.btn-text {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
}
.btn-text:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.btn-text.danger:hover {
  color: var(--danger-color);
}


  /* ====== Dashboard 主区域左右两列的布局增强（可选，但推荐） ====== */
    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr);
      gap: 16px;
      align-items: stretch;
    }

    .dashboard-left,
    .dashboard-right {
      min-width: 0;  /* 防止内部卡片再撑爆各自那一列 */
    }

    @media (max-width: 1200px) {
      .pc-shell {
        padding: 16px 12px;
        max-width: 100%;
      }

      .dashboard-grid {
        /*grid-template-columns: 1fr; */
        row-gap: 16px;
      }
    }
/* ========= PC 端 AI 聊天记账专用样式 ========= */

/* ===== AI 解析账单卡片（PC 端） ===== */


#page-ai .ai-bill-cards {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-ai .ai-bill-card {
  border-radius: 14px;
  padding: 8px 10px;
  background: radial-gradient(circle at 0 0, rgba(224, 242, 254, 0.9), transparent 55%),
              rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 22px rgba(148, 163, 184, 0.28);
  font-size: 12px;
  color: #4b5563;
}

#page-ai .ai-bill-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}

#page-ai .ai-bill-amount {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

#page-ai .ai-bill-type-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

#page-ai .ai-bill-type-tag.expense {
  background: rgba(248, 113, 113, 0.08);
  color: #ef4444;
}

#page-ai .ai-bill-meta {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 2px;
}

#page-ai .ai-bill-note {
  font-size: 12px;
  margin-bottom: 4px;
}

#page-ai .ai-bill-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#page-ai .ai-bill-actions button {
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}

#page-ai .ai-bill-actions button:hover {
  background: rgba(226, 232, 240, 0.8);
}

#page-ai .ai-bill-actions .danger {
  border-color: rgba(248, 113, 113, 0.8);
  color: #b91c1c;
}


/* 卡片外框 */
.ai-bill-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-bill-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-bill-card-header {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.ai-bill-card .amount {
  font-size: 18px;
  color: #e63946; /* 红色 */
}

.ai-bill-card .category {
  font-size: 12px;
  color: #2a9d8f; /* 绿色 */
}

.ai-bill-card .actions button {
  padding: 5px 10px;
  margin-left: 10px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.ai-bill-card .actions button.edit {
  background-color: #ffbc00;
  color: #fff;
}

.ai-bill-card .actions button.delete {
  background-color: #e63946;
  color: #fff;
}


/* 整个对话滚动区域 */
#page-ai .ai-messages {
  padding: 12px 6px;
  height: 480px;           /* 可按需要微调高度 */
  overflow-y: auto;
}

/* 一条消息的基础布局：头像 + 气泡 */
#page-ai .message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  /*max-width: 80%;*/
}

/* AI 在左，用户在右 */
#page-ai .message.ai-message {
  align-self: flex-start;
}


/* 头像样式（“我” / “AI” 那个圆圈） */
/* 头像样式（“我” / “AI” 那个圆圈） */
#page-ai .user-avatar,
#page-ai .ai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.9);
  background-color: transparent;
  /*box-shadow: 0 8px 20px rgba(148, 163, 184, 0.45);*/
  flex-shrink: 0;
}


/* 气泡基础样式 */
#page-ai .message-bubble {
  padding: 10px 12px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;      /* 保留换行 */
  word-break: break-all;
}

/* 用户气泡：你手机端那种橙色胶囊风 */
#page-ai .user-message .message-bubble {
  background: #ff7a45;
  color: #ffffff;
  border-radius: 20px 20px 4px 20px;
  max-width: 320px;
  margin-right: 4px;
}

/* 没消息时的提示文案 */
#page-ai .ai-messages .ai-empty-hint {
  font-size: 12px;
  color: #9ca3af;
  padding: 8px;
}

/* 解析详情整体卡片 */
#page-ai .ai-detail-panel {
  margin-top: 8px;
  padding: 10px 12px 10px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, rgba(224, 242, 254, 0.85), transparent 60%),
              rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 36px rgba(148, 163, 184, 0.35);
}

/* 头部：标题 + tab */
#page-ai .ai-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#page-ai .ai-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

/* Tab 按钮 */
#page-ai .ai-detail-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

#page-ai .ai-detail-tab {
  border: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  color: #6b7280;
  transition: all 0.18s ease-out;
}

#page-ai .ai-detail-tab:hover {
  background: rgba(226, 232, 240, 0.8);
  color: #111827;
}

#page-ai .ai-detail-tab.active {
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.55);
}

/* 内容主体 */
#page-ai .ai-detail-body {
  font-size: 12px;
  color: #4b5563;
  max-height: 220px;
  overflow-y: auto;
  padding-top: 4px;
}

/* 单个视图 */
#page-ai .ai-detail-view {
  line-height: 1.6;
}

#page-ai .ai-detail-section-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f172a;
}

#page-ai .ai-detail-list {
  margin: 0;
  padding-left: 16px;
}

#page-ai .ai-detail-list li {
  margin: 2px 0;
}

/* 解析进度条 */
#page-ai .ai-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  font-size: 11px;
  color: #6b7280;
}

#page-ai .ai-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.95);
  overflow: hidden;
}

#page-ai .ai-progress-bar-inner {
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #0ea5e9, #a855f7);
  animation: aiProgressPulse 1.2s ease-in-out infinite;
}

#page-ai .ai-progress-text {
  white-space: nowrap;
}

/* 进度条动画 */
@keyframes aiProgressPulse {
  0% {
    transform: translateX(-60%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(80%);
  }
}


/* 顶部悬浮控制条（AI智能解析 / VIP 接口） */
.ai-control-bar {
  display: flex;
  gap: 8px;
  margin: 4px 0 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: fixed;
  bottom: 115px;
}

.ai-control-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.ai-control-btn:hover {
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.35);
}

/* 开启状态（主色） */
.ai-control-btn.on {
  border-color: var(--primary-color);
  background: var(--primary-soft);
  color: var(--primary-color);
}

/* VIP 模式高亮 */
.ai-control-btn.vip-on {
  border-color: var(--primary-color);
  background: rgba(255, 247, 237, 0.95);
  color: #ea580c;
}

/* 禁用状态（非 VIP 时的 VIP 按钮） */
.ai-control-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 修复用户消息气泡的样式错乱 */
/* ================= AI 对话区样式（PC） ================= */

/*#page-ai.page {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  height: 100%;*/
/*}*/


/* AI 页：只有在 active 时才用 flex 布局 */
#page-ai.page.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* 统一消息基础样式 */
#page-ai .message {
  display: flex;
  margin: 8px 0;
  /*max-width: 85%;*/
}

/* AI 在左，用户在右 */
#page-ai .message.ai-message {
  justify-content: flex-start;
}

#page-ai .message.user-message {
  justify-content: flex-end;
  /*flex-direction: row-reverse; */
  text-align: right;
}

/* 头像 */
#page-ai .user-avatar,
#page-ai .assistant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  /*box-shadow: 0 4px 10px rgba(148, 163, 184, 0.45);*/
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  flex-shrink: 0;
  font-size: 14px;
  color: #6b7280;
}

#page-ai .user-avatar img,
#page-ai .assistant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 消息气泡通用样式（解决高度过高问题） */
#page-ai .message-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 18px;
  background-color: #f4f5f7;
  color: #333;
  max-width: 80%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.6;
}

/* 用户消息气泡：橙色小胶囊 */
#page-ai .message.user-message .message-bubble {
  background: #ff7a45;
  color: #fff;
  border-radius: 20px 20px 4px 20px;
  max-width: 360px;
  margin-right: 4px;
}

/* AI 消息：只做卡片容器，用透明背景 */
#page-ai .message.ai-message .message-bubble {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* 聊天里的卡片容器（手机端风格卡片共用） */
#page-ai .ai-bill-cards {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 居中时间分割条，仿微信 */
#page-ai .chat-time-divider {
  text-align: center;
  margin: 8px 0;
  font-size: 11px;
  color: #9ca3af;
}

/* 气泡里的纯文字内容 */
#page-ai .message-text {
  white-space: pre-wrap;
}

/* 旧的 message-meta 这里就不再使用了，先保留基础样式以防其它地方用到 */
.message-meta {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.entry-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.entry-cat-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.entry-cat-icon svg {
  width: 18px;
  height: 18px;
}

/* ============= 完全复制手机端 AI 记账卡片样式（PC端完美适配） ============= */
.ai-bill-cards-mobile-style {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}

.ai-bill-card-pc-mobile {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1.5;
  transition: transform 0.2s;
}

.ai-bill-card-pc-mobile:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.ai-bill-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ai-bill-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffd8a8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-bill-cat-icon svg {
  width: 20px;
  height: 20px;
  fill: #d97706;
}

.ai-bill-cat-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 15px;
}

.ai-bill-note {
  color: #4b5563;
  font-size: 13px;
  margin-bottom: 8px;
  word-break: break-all;
  min-height: 18px;
}

.ai-bill-amount {
  font-size: 19px;
  font-weight: bold;
  margin: 8px 0;
}

.ai-bill-amount.expense { color: #ef4444; }
.ai-bill-amount.income { color: #22c55e; }

.ai-bill-date {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}

.ai-bill-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}

.ai-bill-status {
  background: #ecfdf5;
  color: #0f766e;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.ai-bill-actions button {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  opacity: 0.7;
  transition: all 0.2s;
}

.ai-bill-actions button:hover {
  background: #f3f4f6;
  opacity: 1;
  transform: scale(1.1);
}

.ai-bill-actions svg {
  width: 16px;
  height: 16px;
  fill: #6b7280;
}
.ai-bill-cards-phone-style {
  /*margin-left: 12px;*/
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  width: 275px;
}

.bill-card-phone-exact * {
  box-sizing: border-box;
}

.bill-card-phone-exact:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  transition: all 0.2s ease !important;
}

/* 聊天图片缩略图 hover 效果 */
.ai-chat-image-thumb {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ai-chat-image-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* 大图预览遮罩 */
.ai-image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;           /* JS 会改成 flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 大图本身 */
.ai-image-viewer img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* Dashboard 月份切换器整体容器 */
.dashboard-month-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* 中间的“2025年12月”文字 */
.dashboard-month-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

/* 左右箭头按钮基础样式 */
.dashboard-month-switcher .btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.16); /* 淡淡的灰蓝色 */
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  color: #4b5563;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* hover 效果：稍微抬起一点 */
.dashboard-month-switcher .btn-icon:hover {
  background: rgba(59, 130, 246, 0.18); /* 轻微蓝色强调 */
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}

/* active 状态：轻微按下 */
.dashboard-month-switcher .btn-icon:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

/* 账单列表底部提示：正在加载 / 没有更多了 */
.trans-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  padding: 4px 0 8px;
  opacity: 0.8;
}


/* 小屏幕时稍微收紧一点间距 */
@media (max-width: 960px) {
  .dashboard-month-switcher {
    padding: 3px 8px;
    gap: 6px;
  }
  .dashboard-month-switcher .btn-icon {
    width: 22px;
    height: 22px;
  }
  .dashboard-month-label {
    font-size: 12px;
  }
}


/* ========== PC 资产明细弹窗（样式加强版） ========== */

/* 弹窗本体稍微宽一点 */
.asset-records-modal-pc {
  max-width: 880px;
}

/* 列表区域：整体是一个白色卡片，和其它卡片风格统一 */
.asset-records-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 72vh;
  overflow: hidden;
}

/* 列表卡片外壳 */
.asset-records-list {
  flex: 1;
  margin-top: 4px;
  padding: 6px 8px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 18px 45px rgba(148, 163, 184, 0.18);
  overflow-y: auto;
}

/* “暂无记录”提示 */
.asset-records-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 18px 8px;
  text-align: center;
}

/* 每一行记录，参考 trans-item 的卡片风格 */
.asset-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 12px;
  border-bottom: none;
  margin-bottom: 4px;
  cursor: pointer;
  transition:
    background 0.16s ease-out,
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out;
}

.asset-record-row:last-child {
  margin-bottom: 0;
}

.asset-record-row:hover {
  background: rgba(240, 249, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.28);
}

/* 左侧主信息区：上下两行 */
.asset-record-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 第一行：类型标签 + 分类名 */
.asset-record-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

/* 类型标签：改成实心小胶囊 */
.asset-record-type {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.95);
  border: none;
  color: #6b7280;
}

.asset-record-type.income {
  background: rgba(187, 247, 208, 0.9);
  color: #166534;
}

.asset-record-type.expense {
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

/* 分类名 */
.asset-record-cat {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

/* 第二行：日期 + 备注，灰色小字 */
.asset-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 11px;
  color: #9ca3af;
}

.asset-record-date {
  white-space: nowrap;
}

.asset-record-notes {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧金额 */
.asset-record-amount {
  font-size: 13px;
  font-weight: 600;
  margin-left: 16px;
  white-space: nowrap;
}

.asset-record-amount.income {
  color: #16a34a;
}

.asset-record-amount.expense {
  color: #dc2626;
}

/* 底部按钮：跟整体风格统一一点 */
.asset-records-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.asset-records-footer-left {
  opacity: 0.85;
}

.asset-records-footer-right .btn-secondary {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
}

/* “加载更多”按钮区域 */
.asset-records-load-more-wrap {
  text-align: center;
  margin-top: 6px;
}


/* ============== AI 解析中炫酷 Loading 气泡 ============== */
/* ============== AI 解析中 · 极简毛玻璃 Loading ============== */
/* ============== AI 解析中 · 科技感小控制台 ============== */

.ai-loading-message .ai-loading-bubble {
  padding: 0; /* 外层气泡不再额外 padding，由卡片自己控制 */
  background: transparent;
  box-shadow: none;
}

.ai-loading-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 260px;
  max-width: 380px;
  height: 100px;
  padding: 10px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(56,189,248,0.18), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(94,234,212,0.16), transparent 55%),
              rgba(255,255,255,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(148,163,184,0.45);
  box-shadow: 0 14px 36px rgba(15,23,42,0.16);
}

.ai-loading-card-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-loading-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  background: linear-gradient(120deg, rgba(56,189,248,0.18), rgba(52,211,153,0.25));
  box-shadow: 0 0 0 1px rgba(248,250,252,0.9);
}

.ai-loading-title {
  font-size: 13px;
  font-weight: 600;
  color: #020617;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-loading-subtitle {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧雷达区域 */
.ai-loading-card-right {
  flex-shrink: 0;
}

.ai-radar {
  position: relative;
  width: 40px;
  height: 40px;
}

/* 外环 / 内环 */
.ai-radar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,0.5);
  box-shadow: 0 0 0 1px rgba(248,250,252,0.9) inset;
}

.ai-radar-ring-inner {
  inset: 7px;
  border-color: rgba(148,163,184,0.4);
}

/* 中心发光核心 */
.ai-radar-core {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #22c55e, #0ea5e9);
  box-shadow:
    0 0 12px rgba(56,189,248,0.8),
    0 0 0 4px rgba(240,253,250,0.9);
}

/* 扫描扇形 */
.ai-radar-sweep {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(56,189,248,0.1),
    rgba(56,189,248,0.7),
    rgba(56,189,248,0.05),
    transparent 55%
  );
  mask-image: radial-gradient(circle, black 60%, transparent 100%);
  animation: ai-radar-rotate 1.8s linear infinite;
}

/* 雷达上的小点 */
.ai-radar-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(59,130,246,0.9);
  box-shadow: 0 0 8px rgba(59,130,246,0.8);
  opacity: 0;
  animation: ai-radar-dot-pulse 2.4s ease-out infinite;
}

.ai-radar-dot-1 { top: 6px;  left: 50%; transform: translateX(-50%); animation-delay: 0.2s; }
.ai-radar-dot-2 { bottom: 8px; left: 9px;                     animation-delay: 0.7s; }
.ai-radar-dot-3 { right: 7px;  top: 18px;                     animation-delay: 1.3s; }

@keyframes ai-radar-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ai-radar-dot-pulse {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ================== 记一笔：分类 pill hover 统一 ================== */
.entry-cat-group-list,
.entry-cat-item-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.entry-cat-group-pill,
.entry-cat-pill{
  -webkit-appearance:none;
  appearance:none;
  color: var(--text-color, #111827);
  font-size: 12px;
  line-height: 1;
  user-select: none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 12px 10px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;

}

.entry-cat-group-pill:hover,
.entry-cat-pill:hover{
  background: rgba(236,253,245,.92);
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 10px 24px rgba(16,185,129,.12);
  transform: translateY(-1px);
}

/* 选中态 */
.entry-cat-group-pill.active,
.entry-cat-pill.active{
  background: rgba(209,250,229,.92);
  border-color: rgba(16,185,129,.65);
  box-shadow: 0 10px 24px rgba(16,185,129,.14);
  font-weight: 600;
}

/* ✅ 关键：选中后依然要有 hover 差异 */
.entry-cat-group-pill.active:hover,
.entry-cat-pill.active:hover{
  background: rgba(167,243,208,.92);
  border-color: rgba(5,150,105,.75);
  box-shadow: 0 14px 30px rgba(5,150,105,.18);
  transform: translateY(-1px) scale(1.02);
}

/* =========================
   Data Manage (PC) 统一美化
   ========================= */
.data-modal{
  width: 720px;
  max-width: 92vw;
}

/* 一级入口三卡 */
.data-entry-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .data-entry-grid{ grid-template-columns: 1fr; }
}

.data-card{
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(209, 213, 219, .85);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(148,163,184,.22);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.data-entry-card{ cursor:pointer; }
.data-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(148,163,184,.30);
  border-color: rgba(15,118,110,.45);
}

.data-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.data-card-header .card-title{
  font-size: 14px;
  font-weight: 700;
  color:#0f172a;
}
.data-desc{
  margin: 0;
  font-size: 12px;
  color:#6b7280;
  line-height: 1.55;
}

.data-tag{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.70);
  color:#4b5563;
}
.data-tag-warning{
  border-color: rgba(248,113,113,.45);
  background: rgba(248,113,113,.12);
  color:#b91c1c;
}

/* 表单行 */
.data-form-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
}
.data-form-row label{
  min-width: 72px;
  color:#6b7280;
}
.data-date-range{
  display:flex;
  align-items:center;
  gap: 8px;
}
.data-date-sep{ color:#9ca3af; }

.data-form-row input[type="date"],
.data-form-row input[type="text"]{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(209,213,219,.9);
  background: rgba(255,255,255,.92);
  outline:none;
  font-size: 12px;
}
.data-form-row input[type="date"]:focus,
.data-form-row input[type="text"]:focus{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.data-radio-group{
  display:flex;
  gap: 12px;
  align-items:center;
  color:#374151;
}
.data-radio-group input{ accent-color: var(--primary-color); }

/* 按钮 */
.data-action-btn{
  width: 100%;
  margin-top: 10px;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  box-shadow: 0 14px 30px rgba(15,118,110,.22);
  transition: transform .15s ease, filter .15s ease;
}
.data-action-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.data-action-btn.secondary{
  color:#0f172a;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(209,213,219,.9);
  box-shadow: none;
}
.data-action-btn.secondary:hover{ background: rgba(255,255,255,.95); }

.data-action-btn.danger{
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 14px 30px rgba(185,28,28,.22);
}

/* 提示 / 列表 */
.data-tip{
  font-size: 12px;
  color:#6b7280;
}

.data-delete-list{
  border-radius: 14px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.88);
  max-height: 260px;
  overflow:auto;
}

.delete-item-row{
  display:flex;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: 1px dashed rgba(209,213,219,.7);
}
.delete-item-row:last-child{ border-bottom:none; }

.delete-item-main{ flex:1; min-width:0; }
.delete-item-title{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color:#111827;
}
.delete-item-amt{
  font-weight: 700;
  color:#0f172a;
  white-space:nowrap;
}
.delete-item-notes{
  margin-top: 4px;
  font-size: 11px;
  color:#6b7280;
  word-break: break-all;
}

.data-delete-list-footer{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color:#6b7280;
  font-size: 12px;
}
.data-checkbox{
  display:flex;
  align-items:center;
  gap: 6px;
}
.data-checkbox input{ accent-color: var(--primary-color); }
.data-delete-list-tip{
  color:#9ca3af;
  text-align:right;
}

/* 导入区 */
.data-import-container{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(249,250,251,.85);
}
.data-support-card{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(148,163,184,.18);
}
.data-support-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 700;
  color:#0f172a;
  margin-bottom: 8px;
}
.data-support-list{
  margin: 0;
  padding-left: 18px;
  color:#4b5563;
  font-size: 12px;
  line-height: 1.55;
}
.data-support-foot{
  margin: 10px 0 0;
  color:#6b7280;
  font-size: 12px;
}


/* ===========================================================
   账单明细：批量删除抽屉 + 更多菜单（PC）
=========================================================== */
.trans-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.more-menu{ position:relative; }
.more-pop{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(209,213,219,0.9);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  backdrop-filter: blur(10px);
  padding: 6px;
  z-index: 40;
}
.more-item{
  width:100%;
  text-align:left;
  border:none;
  background: transparent;
  cursor:pointer;
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--text, #111827);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.more-item:hover{
  background: rgba(15,118,110,0.08);
}

.pc-drawer{
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.pc-drawer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
}
.pc-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width: 420px;
  max-width: 92vw;
  background: rgba(255,255,255,0.86);
  border-left: 1px solid rgba(209,213,219,0.9);
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(12px);
  display:flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.pc-drawer.open .pc-drawer-panel{
  transform: translateX(0);
}
.pc-drawer-header{
  padding: 14px 14px 10px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(226,232,240,0.9);
}
.pc-drawer-title{
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.pc-drawer-subtitle{
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}
.pc-drawer-body{
  padding: 14px;
  overflow: auto;
}
.pc-drawer-close{
  padding: 6px 10px;
}
#trans-delete-btn[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}

/* 账本设置抽屉：列表样式 */
.pc-book-settings-list{
  display:flex;
  flex-direction: column;
  gap:10px;
}

.pc-book-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(209,213,219,0.9);
  box-shadow: 0 10px 26px rgba(148,163,184,0.14);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pc-book-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.82);
}

.pc-book-main{ min-width:0; flex:1; }
.pc-book-name{
  font-size: 13px;
  font-weight: 700;
  color:#0f172a;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.pc-book-meta{
  margin-top:2px;
  font-size: 11px;
  color:#64748b;
}

.pc-book-badge{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(20,184,166,0.35);
  background: rgba(20,184,166,0.10);
  color:#0f766e;
  white-space: nowrap;
}

.pc-book-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.pc-book-create-area{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,0.6);
  background: rgba(249,250,251,0.75);
}
.pc-book-create-area input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(209,213,219,0.9);
  padding: 10px 12px;
  outline: none;
  background: rgba(255,255,255,0.85);
}
.pc-book-create-actions{
  margin-top: 8px;
  display:flex;
  justify-content: flex-end;
  gap:8px;
}

/* ===== 账本设置：Modal 美化（对齐数据管理风格） ===== */
.book-body{ padding: 14px 16px 16px; }

.book-toolbar{
  display:flex; align-items:center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}

.book-current{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(148,163,184,.18);
}
.book-current-label{ font-size: 12px; color:#64748b; font-weight:700; }

.book-list{ display:flex; flex-direction: column; gap: 10px; }

/* 账本卡片：直接复用你 data-card 的质感 */
.book-card{
  display:flex; align-items:center; justify-content: space-between;
  gap: 12px;
}
.book-card-left{ min-width:0; flex:1; }
.book-card-title{ display:flex; align-items:center; gap:8px; min-width:0; }
.book-card-name{
  font-size: 13px; font-weight: 800; color:#0f172a;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.book-card-meta{ margin-top:2px; font-size:11px; color:#64748b; }

.book-badge{
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(20,184,166,.35);
  background: rgba(20,184,166,.10);
  color:#0f766e; white-space: nowrap;
}

.book-card-actions{ display:flex; gap:6px; flex-shrink:0; }

.book-create-area{
  padding: 10px 12px; border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.55);
  background: rgba(249,250,251,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  margin-bottom: 12px;
}
.book-create-area input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(209,213,219,.9);
  padding: 10px 12px;
  outline:none;
  background: rgba(255,255,255,.88);
}
.book-create-actions{
  margin-top: 8px;
  display:flex; justify-content: flex-end; gap: 8px;
}

/* ===== 账本切换 select（顶部/筛选）更精致 ===== */
.pc-select,
.chip-book-switcher select,
#current-book-switch,
#filter-book{
  appearance:none; -webkit-appearance:none;
  border: 1px solid rgba(209,213,219,.90);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 6px 30px 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color:#0f172a;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(148,163,184,.16);
  transition: box-shadow .15s ease, transform .15s ease, background .15s ease, border-color .15s ease;
  max-width: 220px;
}
.pc-select:hover,
.chip-book-switcher select:hover,
#current-book-switch:hover,
#filter-book:hover{
  background: rgba(255,255,255,.86);
  border-color: rgba(148,163,184,.55);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(148,163,184,.20);
}
.pc-select:focus,
.chip-book-switcher select:focus,
#current-book-switch:focus,
#filter-book:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(20,184,166,.14), 0 14px 30px rgba(148,163,184,.22);
}

/* 让 chip 里的箭头更干净（替换你原来的 ⌄ 也行） */
.chip-book-switcher{ position:relative; padding-right: 10px; }
.chip-book-switcher::after{
  content:"▾";
  position:absolute;
  right: 10px; top:50%;
  transform: translateY(-50%);
  font-size: 11px;
  color:#94a3b8;
  pointer-events:none;
}

/* ===== 账本设置：未样式化按钮补齐（不改HTML） ===== */

/* 1) 右上角「管理」：毛玻璃描边胶囊按钮 */
#book-settings-modal #pc-book-manage-toggle{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(148, 163, 184, .16);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#book-settings-modal #pc-book-manage-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.80);
  border-color: rgba(20, 184, 166, .35);
  box-shadow: 0 14px 30px rgba(148, 163, 184, .20);
}
#book-settings-modal #pc-book-manage-toggle:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(148, 163, 184, .14);
}

/* 管理=完成 状态（你JS会把文字切换成“完成”） */
#book-settings-modal #pc-book-manage-toggle{
  position: relative;
}
#book-settings-modal #pc-book-manage-toggle::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  pointer-events:none;
  opacity: 0;
  box-shadow: 0 0 0 3px rgba(20,184,166,.14);
  transition: opacity .15s ease;
}
#book-settings-modal #pc-book-manage-toggle[data-state="on"]::after{
  opacity: 1;
}

/* 2) 「取消」：更精致的次级按钮（灰白毛玻璃，hover 有轻微浮起） */
#book-settings-modal #pc-book-create-cancel{
  height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(209, 213, 219, .95);
  background: rgba(248, 250, 252, .85);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(148, 163, 184, .12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#book-settings-modal #pc-book-create-cancel:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  border-color: rgba(148, 163, 184, .55);
  box-shadow: 0 12px 26px rgba(148, 163, 184, .16);
}
#book-settings-modal #pc-book-create-cancel:active{
  transform: translateY(0);
}
/* ===== 账本设置：列表里的 重命名 / 删除 按钮美化（不改HTML） ===== */

/* 容器里按钮统一：更圆润、毛玻璃、细阴影 */
#book-settings-modal .book-card-actions .btn.btn-small{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(148,163,184,.14);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#book-settings-modal .book-card-actions .btn.btn-small:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 26px rgba(148,163,184,.18);
  border-color: rgba(20,184,166,.35);
}
#book-settings-modal .book-card-actions .btn.btn-small:active{
  transform: translateY(0);
}

/* 重命名按钮：中性偏青的描边，hover 更明显 */
#book-settings-modal .book-card-actions button[data-act="rename"]{
  border-color: rgba(59,130,246,.25);
}
#book-settings-modal .book-card-actions button[data-act="rename"]:hover{
  border-color: rgba(20,184,166,.45);
  box-shadow: 0 12px 26px rgba(20,184,166,.10), 0 12px 26px rgba(148,163,184,.18);
}

/* 删除按钮：红色的“描边+淡红底”，hover 强化但不刺眼 */
#book-settings-modal .book-card-actions button[data-act="delete"]{
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.35) !important;
  background: rgba(239,68,68,.08);
}
#book-settings-modal .book-card-actions button[data-act="delete"]:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.50) !important;
  box-shadow: 0 12px 26px rgba(239,68,68,.10), 0 12px 26px rgba(148,163,184,.18);
}


/* ===========================================================
   月度预算（PC：Modal）—— 毛玻璃 + 渐变
   =========================================================== */
.budget-body{ padding: 14px 16px 16px; }

.budget-save-pill{
  border-radius: 999px !important;
  height: 34px;
  padding: 0 14px;
  font-weight: 900;
}

.budget-total-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(147,197,253,.45);
  background: linear-gradient(135deg, rgba(224,242,254,.78), rgba(236,253,245,.78));
  box-shadow: 0 18px 40px rgba(148,163,184,.18);
}
.budget-total-label{
  font-size:12px;
  color:#64748b;
  font-weight: 800;
}
.budget-total-amount{
  font-size: 34px;
  font-weight: 900;
  color:#0f172a;
  letter-spacing: .2px;
  margin-top: 4px;
}
.budget-total-sub{
  margin-top: 6px;
  font-size: 12px;
  color:#64748b;
  font-weight: 700;
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap: wrap;
}
.budget-total-sub .budget-dot{
  color:#cbd5e1;
  padding: 0 2px;
}
.budget-date-pill{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 800;
  color:#334155;
  box-shadow: 0 10px 22px rgba(148,163,184,.14);
  white-space: nowrap;
}

.budget-card{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 36px rgba(148,163,184,.16);
}
.budget-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.budget-card-title{
  font-size: 14px;
  font-weight: 900;
  color:#0f172a;
}
.budget-card-desc{
  font-size: 12px;
  color:#64748b;
  font-weight: 700;
  text-align: right;
  /*max-width: 55%;*/
}

.budget-cat-list{ margin-top: 10px; }
.budget-cat-empty{
  padding: 12px;
  border-radius: 16px;
  background: rgba(248,250,252,.80);
  border: 1px dashed rgba(148,163,184,.55);
  color:#64748b;
  font-size: 12px;
  font-weight: 700;
}

.budget-cat-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.90);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 22px rgba(148,163,184,.10);
  margin-bottom: 10px;
}
.budget-cat-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.budget-cat-icon{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  flex-shrink: 0;
}
.budget-cat-text{ min-width:0; flex:1; }
.budget-cat-name{
  font-size: 13px;
  font-weight: 900;
  color:#0f172a;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.budget-cat-meta{
  font-size: 11px;
  color:#64748b;
  font-weight: 700;
  margin-top: 2px;
}

.budget-cat-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink: 0;
}
.budget-input{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(209,213,219,.90);
  background: rgba(248,250,252,.85);
}
.budget-input span{
  font-size: 12px;
  font-weight: 900;
  color:#64748b;
}
.budget-input input{
  width: 96px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
  text-align: right;
}

.budget-actions{
  margin-top: 10px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 取消按钮：补齐样式 */
#budget-settings-modal .budget-cancel-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(209,213,219,.95);
  background: rgba(248,250,252,.85);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(148,163,184,.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#budget-settings-modal .budget-cancel-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  border-color: rgba(148,163,184,.55);
  box-shadow: 0 12px 26px rgba(148,163,184,.16);
}
#budget-settings-modal .budget-cancel-btn:active{ transform: translateY(0); }

.pc-cat-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px){
  .pc-cat-layout{ grid-template-columns: 1fr; }
}

.pc-cat-col{
  border-radius: 18px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 34px rgba(148,163,184,.14);
  overflow: hidden;
}
.pc-cat-col-head{
  padding: 12px 12px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(226,232,240,.75);
}
.pc-cat-col-title{
  font-size: 13px;
  font-weight: 900;
  color:#0f172a;
}
.pc-cat-list{
  padding: 10px 10px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow: auto;
}

.pc-cat-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(148,163,184,.12);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pc-cat-row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 30px rgba(148,163,184,.16);
}
.pc-cat-row.active{
  border-color: rgba(20,184,166,.45);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 14px 30px rgba(148,163,184,.16);
}
.pc-cat-row .name{
  font-size: 13px;
  font-weight: 900;
  color:#0f172a;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.pc-cat-row .meta{
  font-size: 11px;
  color:#64748b;
}

.pc-cat-actions{
  display:flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ===========================================================
   分类管理 & 存钱计划 —— 未美化元素补齐（追加到CSS末尾覆盖）
   =========================================================== */

/* ---------- 分类管理：右上角 tabs（支出/收入/完成） ---------- */
#category-manage-modal-pc .seg-tabs{
  display:flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(209,213,219,.75);
  box-shadow: 0 10px 22px rgba(148,163,184,.12);
}
#category-manage-modal-pc .seg-tabs .seg-btn{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  color:#334155;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#category-manage-modal-pc .seg-tabs .seg-btn:hover{
  background: rgba(255,255,255,.75);
  transform: translateY(-1px);
}
#category-manage-modal-pc .seg-tabs .seg-btn.active{
  color:#0f172a;
  background: rgba(255,255,255,.92);
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}

/* “完成”按钮（你用的是 pc-cat-manage-toggle） */
#category-manage-modal-pc #pc-cat-manage-toggle{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(148,163,184,.16);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#category-manage-modal-pc #pc-cat-manage-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.82);
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 14px 30px rgba(148,163,184,.20);
}

/* ---------- 分类管理：左/右列卡片容器更高级 ---------- */
#category-manage-modal-pc .pc-cat-col{
  border-radius: 22px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(209,213,219,.80) !important;
  box-shadow: 0 16px 40px rgba(148,163,184,.14) !important;
}
#category-manage-modal-pc .pc-cat-col-head{
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

/* 选中态更明显（你目前左侧选中有点弱） */
#category-manage-modal-pc .pc-cat-row.active{
  border-color: rgba(20,184,166,.55) !important;
  background: rgba(236, 253, 245, .70) !important;  /* 薄荷绿 */
  box-shadow: 0 0 0 3px rgba(20,184,166,.14), 0 14px 30px rgba(148,163,184,.16) !important;
}

/* ---------- 分类管理：编辑 / 删除按钮美化（你截图里还是原生灰框） ---------- */
#category-manage-modal-pc .pc-cat-actions .btn.btn-small,
#category-manage-modal-pc .pc-cat-actions button{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
  box-shadow: 0 8px 18px rgba(148,163,184,.14);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#category-manage-modal-pc .pc-cat-actions .btn.btn-small:hover,
#category-manage-modal-pc .pc-cat-actions button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.86);
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 12px 26px rgba(148,163,184,.18);
}

/* 删除按钮：淡红底 + 红描边（无须改HTML，按文字/颜色兜底） */
#category-manage-modal-pc .pc-cat-actions button[style*="b91c1c"],
#category-manage-modal-pc .pc-cat-actions button[data-act="del"]{
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.45) !important;
  background: rgba(239,68,68,.10) !important;
}
#category-manage-modal-pc .pc-cat-actions button[style*="b91c1c"]:hover,
#category-manage-modal-pc .pc-cat-actions button[data-act="del"]:hover{
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.60) !important;
  box-shadow: 0 12px 26px rgba(239,68,68,.10), 0 12px 26px rgba(148,163,184,.18);
}

/* ---------- 存钱计划：输入区域（￥ + input）更像手机端 ---------- */
#saving-plan-modal-pc .pc-budget-input{
  border-radius: 16px !important;
  border: 1px solid rgba(209,213,219,.85) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 26px rgba(148,163,184,.14);
  padding: 8px 10px !important;
}
#saving-plan-modal-pc .pc-budget-input span{
  font-size: 13px;
  font-weight: 900;
  color:#64748b;
}
#saving-plan-modal-pc .pc-budget-input input{
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 900;
  color:#0f172a;
  padding: 0 6px !important;
}
#saving-plan-modal-pc .pc-budget-input:focus-within{
  border-color: rgba(20,184,166,.45) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 14px 30px rgba(148,163,184,.18);
}

/* 取消按钮（你截图里仍是系统默认） */
#saving-plan-modal-pc #pc-saving-cancel-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(148,163,184,.14);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
#saving-plan-modal-pc #pc-saving-cancel-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.86);
  border-color: rgba(20,184,166,.30);
  box-shadow: 0 14px 30px rgba(148,163,184,.18);
}
#saving-plan-modal-pc #pc-saving-cancel-btn:active{
  transform: translateY(0);
}

/* 提示文案更柔和 */
#saving-plan-modal-pc .data-tip{
  color:#64748b !important;
  font-size: 12px !important;
  line-height: 1.55;
}

/* ===== 图标选择器 ===== */
.pc-input{
  border-radius: 999px;
  border: 1px solid rgba(209,213,219,.90);
  background: rgba(255,255,255,.72);
  padding: 8px 12px;
  outline: none;
  font-size: 12px;
  font-weight: 800;
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(148,163,184,.12);
}
.pc-input:focus{
  box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 14px 30px rgba(148,163,184,.16);
}

.pc-icon-groups{
  display:flex;
  flex-direction: column;
  gap: 14px;
  max-height: 62vh;
  overflow:auto;
}
.pc-icon-group{
  border-radius: 18px;
  border: 1px solid rgba(209,213,219,.80);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 34px rgba(148,163,184,.14);
  padding: 12px;
}
.pc-icon-group-title{
  font-size: 12px;
  font-weight: 900;
  color:#334155;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.pc-icon-grid{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .pc-icon-grid{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.pc-icon-cell{
  border-radius: 14px;
  border: 1px solid rgba(209,213,219,.85);
  background: rgba(255,255,255,.82);
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.pc-icon-cell:hover{
  transform: translateY(-1px);
  border-color: rgba(20,184,166,.40);
  box-shadow: 0 12px 26px rgba(148,163,184,.16);
}
.pc-icon-cell.selected{
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 12px 26px rgba(148,163,184,.16);
}
.pc-icon-cell svg{
  width: 22px;
  height: 22px;
  opacity: .92;
}

.pc-cat-row .svg-icon{
    width: 2rem;
    height: 2rem;
}

/* ===== PC Drawer base ===== */
.pc-drawer-mask{
  position:fixed; inset:0;
  background: rgba(15, 23, 42, .18);
  backdrop-filter: blur(6px);
  z-index: 9998;
}
.pc-side-drawer{ position: fixed; top: 0; right: 0; width: 420px; max-width: calc(100vw - 24px);
  height: 100vh;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(226,232,240,.9);
  box-shadow: -20px 0 60px rgba(15,23,42,.12);
  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 9999;
  display:flex; flex-direction:column;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.pc-side-drawer.is-open{ transform: translateX(0); }

.pc-drawer-header{
  padding: 16px 16px 10px;
  display:flex; align-items:flex-start; justify-content:space-between;
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.pc-drawer-title{ font-size: 16px; font-weight: 700; color: #0f172a; }
.pc-drawer-subtitle{ font-size: 12px; color: rgba(100,116,139,.95); margin-top: 4px; }

.pc-drawer-body{
  padding: 14px 16px;
  overflow:auto;
  display:flex; flex-direction:column; gap: 12px;
}
.pc-drawer-footer{
  padding: 12px 16px;
  border-top: 1px solid rgba(226,232,240,.9);
  display:flex; gap: 10px; justify-content:flex-end;
  background: rgba(255,255,255,.65);
}

.pc-icon-btn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(248,250,252,.85);
  cursor:pointer;
}
.pc-icon-btn:hover{ background: rgba(241,245,249,.95); }

.pc-form-row{ display:flex; flex-direction:column; gap: 8px; }
.pc-form-label{ font-size:12px; color: rgba(71,85,105,.95); }
.pc-input{
  width:100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.85);
  padding: 0 12px;
  outline: none;
}
.pc-input:focus{
  border-color: rgba(148,163,184,.95);
  box-shadow: 0 0 0 4px rgba(148,163,184,.18);
}
.pc-input-sm{ height: 34px; border-radius: 10px; }

.pc-help-text{ font-size: 12px; color: rgba(100,116,139,.95); }
.pc-muted{ font-size: 12px; color: rgba(100,116,139,.95); }

.pc-btn{
  height: 38px; padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.95);
  cursor:pointer;
  background: rgba(248,250,252,.9);
}
.pc-btn:hover{ background: rgba(241,245,249,.95); }
.pc-btn-primary{
  background: rgba(15, 118, 110, .10);
  border-color: rgba(15, 118, 110, .22);
  color: rgba(15, 118, 110, 1);
  font-weight: 700;
}
.pc-btn-primary:hover{ background: rgba(15, 118, 110, .14); }
.pc-btn-ghost{ background: rgba(255,255,255,.75); }

.pc-form-error{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  color: rgba(185,28,28,1);
  font-size: 12px;
}

/* ===== icon picker ===== */
.pc-icon-preview-row{ display:flex; gap: 12px; align-items:center; }
.pc-icon-preview{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(248,250,252,.9);
  display:flex; align-items:center; justify-content:center;
}
.pc-svg-icon{ width: 22px; height: 22px; color: rgba(51,65,85,.95); }
.pc-icon-preview-text{ font-size: 12px; color: rgba(51,65,85,.95); }

.pc-icon-toolbar{
  display:flex; gap: 10px; align-items:center; justify-content:space-between;
}
.pc-icon-tabs{ display:flex; gap: 8px; flex-wrap:wrap; }
.pc-icon-tab{
  height: 30px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  font-size: 12px;
  color: rgba(51,65,85,.95);
}
.pc-icon-tab.active{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.22);
  color: rgba(15,118,110,1);
  font-weight: 700;
}

.pc-icon-grid{
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.pc-icon-cell{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.78);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pc-icon-cell:hover{
  background: rgba(241,245,249,.95);
  transform: translateY(-1px);
}
.pc-icon-cell.active{
  border-color: rgba(15,118,110,.35);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}

/* 图标选择网格：显示阿里 iconfont 的 SVG */
#pc-cat-edit-icon-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0;
}

.pc-icon-cell{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.pc-icon-cell:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.14);
}

.pc-icon-cell.active{
  border-color: rgba(16, 185, 129, .55);
  box-shadow: 0 10px 24px rgba(16,185,129,.18);
}

.pc-icon-svg{
  width: 22px;
  height: 22px;
  display: block;
  color: #111827;      /* 图标颜色 */
  fill: currentColor;  /* ✅ iconfont 关键 */
}

.pc-icon-name{
  font-size: 11px;
  line-height: 1.1;
  color: #6b7280;
  max-width: 72px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图标网格：图标在上，名称在下 */
#pc-cat-edit-icon-grid{
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.pc-icon-cell{
  height: 68px;                 /* ✅ 不要 44px 了 */
  padding: 8px 6px;
  display:flex;
  flex-direction: column;       /* ✅ 关键：纵向 */
  align-items:center;
  justify-content:center;
  gap: 6px;
}

.pc-icon-cell .svg-icon{
  width: 22px;
  height: 22px;
  fill: currentColor;           /* ✅ iconfont symbol 常用 */
  color: #111827;
}

.pc-icon-name{
  font-size: 11px;
  line-height: 1.1;
  color: #6b7280;
  max-width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===========================================================
   报销中心（PC）— 弹窗样式
   说明：你的“设置 → 报销中心”入口已存在，但之前没有 openReimburseModal，
   所以会走兜底 alert（“报销中心：PC 暂未接入”）。
=========================================================== */
#reimburse-modal .modal-content{
  max-width: 760px;
}
.reim-summary-row{
  display:flex;
  gap:10px;
  margin-bottom: 10px;
}
.reim-summary-card{
  flex:1;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 10px 12px;
}
.reim-summary-label{
  font-size: 12px;
  color: var(--text-muted);
}
.reim-summary-value{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 750;
  color: #111827;
}

.reim-tabs{
  display:flex;
  gap:8px;
  margin: 8px 0 10px;
}
.reim-tab-btn{
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.reim-tab-btn.active{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: #166534;
  font-weight: 700;
}

.reim-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 6px 0 8px;
  gap: 10px;
}
.reim-select-all{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
}
.reim-selected-hint{
  font-size: 12px;
  color: var(--text-muted);
}

.reim-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 520px;
  overflow:auto;
  padding-right: 2px;
}
.reim-item{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.72);
}
.reim-item-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.reim-item-main{
  min-width: 0;
}
.reim-item-title{
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.reim-item-meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.reim-item-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.reim-amount{
  font-size: 14px;
  font-weight: 750;
}
.reim-link-btn{
  border: none;
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.reim-link-btn:hover{
  background: rgba(59,130,246,.16);
}

/* 账单列表里的报销标记 */
.trans-reimburse-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  margin-left:8px;
  border:1px solid rgba(209,213,219,.8);
  background:#f8fafc;
  color:#475569;
}
.trans-reimburse-tag.pending{
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
  color:#b45309;
}
.trans-reimburse-tag.done{
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
  color:#166534;
}

.trans-reimburse-tag{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  border:1px solid rgba(209,213,219,.9);
}
.trans-reimburse-tag.pending{
  background: rgba(245, 158, 11, .12);
  color:#b45309;
  border-color: rgba(245, 158, 11, .25);
}
.trans-reimburse-tag.done{
  background: rgba(34, 197, 94, .12);
  color:#166534;
  border-color: rgba(34, 197, 94, .25);
}

/* ===== 报销中心：批量报销按钮美化 ===== */
#reim-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin:10px 0 12px;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:12px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

#reim-toolbar .reim-select-all{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#374151;
  user-select:none;
}

#reim-selected-count{
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  color:#6b7280;
  background: rgba(107,114,128,0.10);
}

/* 主按钮 */
#reim-batch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  min-width:104px;
  border:none;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  box-shadow: 0 10px 22px rgba(37,99,235,0.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}

/* hover / active */
#reim-batch-btn:hover{
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(37,99,235,0.28);
  transform: translateY(-1px);
}
#reim-batch-btn:active{
  transform: translateY(0px) scale(0.99);
  box-shadow: 0 10px 18px rgba(37,99,235,0.22);
}

/* disabled：灰、不可点 */
#reim-batch-btn:disabled{
  cursor:not-allowed;
  opacity:0.55;
  box-shadow:none;
  transform:none;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

/* 可选：让 checkbox 更一致一点 */
#reim-select-all{
  width:16px;
  height:16px;
  accent-color:#3b82f6;
}

/* =========================
   Book Members Modal (PC)
========================= */
.book-members-modal{ width: min(680px, 96vw); }
.book-members-body{ padding: 14px; }

.book-members-summary{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border:1px solid rgba(0,0,0,.06);
  border-radius: 12px; background: rgba(255,255,255,.7);
  margin-bottom: 12px;
}
.book-members-book-name{ font-weight: 700; font-size: 14px; }
.book-members-role{ font-size: 12px; color: var(--text-muted); }

.book-members-invite{
  border:1px dashed rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.6);
}
.bm-invite-title{ font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.bm-invite-row{ display:flex; gap: 8px; align-items:center; }
.bm-invite-input{
  flex:1; padding: 10px 10px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  font-size: 12px;
}
.bm-invite-btn{
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #111; color: #fff; font-weight: 700; cursor: pointer;
}
.bm-invite-tip{ font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.book-members-list{ display:flex; flex-direction:column; gap: 10px; }

.bm-member-item{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.8);
}
.bm-member-left{ display:flex; gap: 10px; align-items:flex-start; min-width: 0; }
.bm-member-avatar{
  width: 36px; height: 36px; border-radius: 10px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.06); flex: 0 0 auto;
}
.bm-member-avatar img{ width:100%; height:100%; object-fit:cover; }
.bm-avatar-placeholder{ font-weight: 800; font-size: 14px; color: rgba(0,0,0,.7); }

.bm-member-info{ min-width: 0; }
.bm-member-name{ font-weight: 800; font-size: 13px; }
.bm-member-email{ font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bm-member-status{ font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.bm-member-right{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.bm-member-role-tag{
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.85);
}
.bm-member-role-tag.owner{
  border-color: rgba(0,0,0,.25);
  background: rgba(0,0,0,.06);
  font-weight: 800;
}
.bm-role-select{
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  font-size: 12px;
}
.bm-remove-btn{
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255, 59, 48, .1);
  color: #b42318; font-weight: 800; cursor:pointer;
}
.bm-loading,.bm-empty,.bm-error{
  font-size: 12px; color: var(--text-muted);
  padding: 12px; text-align:center;
}
.bm-error{ color: #b42318; }

/* ===== 微信记账（PC）补充样式 ===== */
.wechat-ledger-badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  color:var(--text-muted);
}

.wechat-ledger-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}

.wechat-ledger-user-info{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.wechat-ledger-avatar{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
}

.wechat-ledger-status{ font-size:14px; font-weight:600; margin-bottom:6px; }
.wechat-ledger-subtext{ font-size:12px; color:var(--text-muted); line-height:1.45; }

.wechat-ledger-qrcode-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:12px 0;
}

.wechat-ledger-qrcode-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
}
.wechat-ledger-qrcode-tips{ font-size:12px; color:var(--text-muted); }

.wechat-ledger-qrcode-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0;
}
#wechat-ledger-qrcode{ width:200px; height:200px; }

.wechat-ledger-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.wechat-ledger-btn{
  border-radius:12px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-weight:600;
}
.wechat-ledger-btn.primary{ background:#111827; color:#fff; border-color:#111827; }
.wechat-ledger-btn.danger{ background:#ef4444; color:#fff; border-color:#ef4444; }

.wechat-ledger-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.85);
  color:#fff;
  font-size:13px;
  padding:10px 14px;
  border-radius:12px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9999;
}
.wechat-ledger-toast.show{ opacity:1; }

/* =========================
   微信记账弹窗 UI 美化（PC）
   放在你主 CSS 最后
========================= */
/* =========================
   微信记账弹窗 UI 美化（PC）- 高对比清晰版
   放在你主 CSS 最后（整段替换旧的）
========================= */

/* 整个弹窗遮罩更柔和 */
#wechat-ledger-modal.modal{
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(7px);
}

/* 弹窗容器：更像卡片、带渐变背景（整体更亮一点，字用深色） */
.wechat-ledger-modal{
  width: min(860px, 92vw);
  max-height: 88vh;
      width: 560px;
    max-width: 90vw;
    max-height: 85vh;

  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(59,130,246,.16), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
}

/* 顶部 Header：更利落，提升可读性 */
.wechat-ledger-header{
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}

.wechat-ledger-header .mine-modal-title{
  font-weight: 900;
  letter-spacing: .4px;
  color: rgba(15, 23, 42, .92);
}

/* 状态胶囊：改深色文字，避免白底看不清 */
#wechat-ledger-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* body 内边距更舒适 */
.wechat-ledger-body{
  padding: 16px;
  overflow: auto;
}

/* 顶部用户信息卡：更高级（浅底深字） */
.wechat-ledger-card{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.wechat-ledger-user-info{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(15, 23, 42, .12);
}

.wechat-ledger-avatar{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(15, 23, 42, .10);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.wechat-ledger-nickname{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
}
.wechat-ledger-userid{
  font-size: 12px;
  color: rgba(15, 23, 42, .62);
  margin-top: 2px;
}

#wechat-ledger-status{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
  margin-bottom: 6px;
}
#wechat-ledger-subtext{
  font-size: 12px;
  line-height: 1.55;
  color: rgba(15, 23, 42, .65);
}

/* 二维码面板：改浅底深字，清晰可读 */
.wechat-ledger-qrcode-card{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

.wechat-ledger-qrcode-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
  margin-bottom: 10px;
}
.wechat-ledger-qrcode-tips{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, .62);
}

/* 二维码区域 */
.wechat-ledger-qrcode-wrapper{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 0 6px;
}
#wechat-ledger-qrcode{
  width: 210px;
  height: 210px;
  padding: 10px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* 扫描线：保留科技感，但稍微收敛一点 */
.wechat-ledger-scan-line{
  position: absolute;
  width: 210px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.85), transparent);
  filter: drop-shadow(0 0 10px rgba(34,197,94,.35));
  animation: wxScan 1.8s linear infinite;
  pointer-events:none;
}
@keyframes wxScan{
  0%{ transform: translateY(-88px); opacity:0; }
  18%{ opacity:1; }
  82%{ opacity:1; }
  100%{ transform: translateY(88px); opacity:0; }
}

/* 二维码 footer */
#wechat-ledger-qrcode-footer{
  margin-top: 10px;
  text-align:center;
  font-size: 12px;
  color: rgba(15, 23, 42, .65);
}

/* 使用说明：更清爽（浅底深字） */
.wechat-ledger-section{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15, 23, 42, .10);
}

.wechat-ledger-title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15, 23, 42, .92);
  letter-spacing: .3px;
}

.wechat-ledger-steps{
  margin: 0;
  padding-left: 18px;
  color: rgba(15, 23, 42, .72);
  font-size: 12px;
  line-height: 1.7;
}
.wechat-ledger-tip{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, .62);
}

/* 按钮：保留高级渐变，但确保文字清晰 */
.wechat-ledger-actions{
  display:flex;
  gap: 12px;
  margin-top: 14px;
}

.wechat-ledger-btn{
  flex: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255,255,255,.88);
  color: rgba(15, 23, 42, .88);
  font-weight: 900;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.wechat-ledger-btn:hover{ filter: brightness(1.03); }
.wechat-ledger-btn:active{ transform: translateY(1px); }
.wechat-ledger-btn:disabled{ opacity: .55; cursor: not-allowed; }

.wechat-ledger-btn.primary{
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.88));
  border-color: rgba(34,197,94,.45);
  color: rgba(5, 46, 26, .95);
}
.wechat-ledger-btn.danger{
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(244,63,94,.86));
  border-color: rgba(239,68,68,.40);
  color: rgba(42, 10, 10, .95);
}

/* 底部说明 */
.wechat-ledger-notice{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, .60);
}

/* Toast 更精致（深底浅字，保证对比度） */
.wechat-ledger-toast{
  background: rgba(15, 23, 42, .92);
  color: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

/* =========================
   Mine 头部（PC 一行布局）
========================= */
.mine-header-card-pc{
  position: relative;
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-areas: "user stats";
  gap: 16px;
  align-items: center;
}

.mine-header-card-pc .mine-user-row{
  grid-area: user;
  align-items: center;
  margin: 0;              /* 避免默认间距把布局挤乱 */
}

/* 右上角按钮：脱离文档流，避免占用 user 区域宽度 */
.mine-header-card-pc .mine-checkin-btn{
  position: absolute;
  top: 16px;
  right: 16px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
}

/* 统计区放到同一行（中间区域） */
.mine-header-card-pc .mine-stats-row-pc{
  grid-area: stats;
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
}

/* 统计卡片更“PC”一点：横向排列 + 轻分割 */
.mine-header-card-pc .mine-stat-item{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}

.mine-header-card-pc .mine-stat-value{
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.mine-header-card-pc .mine-stat-label{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-left: 10px;
  white-space: nowrap;
}

/* 小屏自动回到两行 */
@media (max-width: 860px){
  .mine-header-card-pc{
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "stats";
  }
  .mine-header-card-pc .mine-checkin-btn{
    position: static;
    margin-left: auto;
  }
}


/* 未登录提示弹窗（PC） */
#pc-login-modal.modal{
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(6px);
}

.pc-login-modal{
  /*width: min(420px, 92vw);*/
  border-radius: 16px;
  padding: 16px;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.pc-login-title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}

.pc-login-text{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(229,231,235,.85);
  margin-bottom: 14px;
}

.pc-login-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
}

/* =========================
   PC 登录提示弹窗（高级版）
========================= */
.pc-login-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(10px);
  z-index: 9999;
}

.pc-login-dialog{
  width: min(520px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(59,130,246,.14), transparent 52%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
  position: relative;
}

.pc-login-x{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  font-size: 20px;
  line-height: 30px;
}
.pc-login-x:hover{ background: rgba(255,255,255,.10); }

.pc-login-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 6px 2px 14px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}

.pc-login-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.pc-login-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 2px;
}

.pc-login-desc{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(226,232,240,.82);
}

.pc-login-foot{
  padding-top: 14px;
}

.pc-login-hint{
  font-size: 12px;
  color: rgba(226,232,240,.70);
  margin-bottom: 12px;
}

.pc-login-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

.pc-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.08);
  /*color: rgba(255,255,255,.90);*/
  font-weight: 900;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
}
.pc-btn:hover{ filter: brightness(1.08); }
.pc-btn:active{ transform: translateY(1px); }

.pc-btn.primary{
  border-color: rgba(34,197,94,.45);
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.85));
  color: #062615;
}

.pc-btn.ghost{
  background: rgba(255,255,255,.06);
}

/* =========================
   AI 分析 Modal（高级 UI）
   ========================= */
.ai-analysis-entry{
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-analysis-entry:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.ai-analysis-entry-body{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.ai-analysis-entry-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-ai-entry{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}

.ai-analysis-modal{
  width: 980px;
  max-width: 95vw;
  height: 82vh;
  max-height: 86vh;
  display:flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 28px 80px rgba(15,23,42,.18);
}

.ai-analysis-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background:
    radial-gradient(circle at 0 0, rgba(204,251,241,.75), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(254,249,195,.65), transparent 55%),
    rgba(255,255,255,.72);
}
.ai-analysis-header-left{
  display:flex;
  align-items:center;
  gap: 10px;
}
.ai-analysis-icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(248,250,252,.9);
  cursor:pointer;
}
.ai-analysis-icon-btn:hover{
  background: rgba(241,245,249,.98);
}
.ai-analysis-title{
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.ai-analysis-subtitle{
  font-size: 12px;
  color: rgba(100,116,139,.95);
  margin-top: 2px;
}

.ai-analysis-header-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-analysis-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(236,253,245,.92);
  border: 1px solid rgba(16,185,129,.35);
  color: rgba(5,150,105,.95);
  font-weight: 700;
}
.ai-analysis-chip{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.8);
  cursor:pointer;
  font-size: 12px;
}
.ai-analysis-chip:hover{ box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.ai-analysis-chip.danger{
  border-color: rgba(248,113,113,.45);
  background: rgba(254,242,242,.92);
  color: rgba(185,28,28,.95);
}

.ai-analysis-toolbar{
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.68);
}
.ai-analysis-cmd{
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.85);
  padding: 7px 12px;
  font-size: 12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-analysis-cmd:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(148,163,184,.16);
}
.ai-analysis-toolbar-tip{
  margin-left: auto;
  font-size: 12px;
  color: rgba(100,116,139,.95);
}

.ai-analysis-body{
  flex: 1;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
.ai-analysis-messages{
  flex: 1;
  overflow: auto;
  padding: 14px 14px 10px;
}

.ai-analysis-input{
  display:flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.72);
}
#ai-analysis-input{
  flex:1;
  resize: none;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  padding: 10px 12px;
  outline:none;
  background: rgba(248,250,252,.9);
  line-height: 1.5;
  font-size: 13px;
}
.ai-analysis-send{
  width: 84px;
  border-radius: 16px;
  border: 1px solid rgba(16,185,129,.35);
  background: rgba(209,250,229,.92);
  cursor:pointer;
  font-weight: 800;
}
.ai-analysis-send:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* 消息样式（不污染 #page-ai，单独一套） */
.ai-analysis-msg{
  display:flex;
  margin: 10px 0;
}
.ai-analysis-msg.user{ justify-content:flex-end; }
.ai-analysis-msg.assistant{ justify-content:flex-start; }

.ai-analysis-bubble{
  max-width: 85%;
  border-radius: 18px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.65;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
   white-space: normal;
}
.ai-analysis-msg.user .ai-analysis-bubble{
  background: #ff7a45;
  border-color: rgba(255,122,69,.35);
  color: #fff;
  box-shadow: 0 14px 30px rgba(255,122,69,.22);
}

.ai-analysis-card{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(248,250,252,.9);
  border: 1px solid rgba(226,232,240,.95);
}
.ai-analysis-card h4{
  margin: 0 0 8px;
  font-size: 14px;
  color: #0f172a;
}
.ai-analysis-kpi{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 6px;
}
.ai-analysis-kpi .kpi{
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
}
.ai-analysis-kpi .kpi .label{ font-size: 11px; color: rgba(100,116,139,.95); }
.ai-analysis-kpi .kpi .val{ font-size: 14px; font-weight: 900; color: #0f172a; margin-top: 4px; }

.ai-report-modal{
  width: 980px;
  max-width: 96vw;
  height: 86vh;
  max-height: 88vh;
  border-radius: 22px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 28px 90px rgba(15,23,42,.22);
}

.ai-report-header{
  padding: 14px 14px 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(226,232,240,.9);
  background:
    radial-gradient(circle at 0 0, rgba(196,181,253,.45), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(167,243,208,.40), transparent 55%),
    rgba(255,255,255,.85);
}
.ai-report-title{ font-size: 16px; font-weight: 900; color:#0f172a; }
.ai-report-sub{ margin-top:3px; font-size:12px; color: rgba(100,116,139,.95); }

.ai-report-actions{
    /*display:flex; */
    gap:8px;
    flex-wrap:wrap;
    align-items:center;

}

.ai-report-body{
  flex:1;
  overflow:auto;
  padding: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(241,245,249,.9), transparent 50%),
    radial-gradient(circle at 100% 0, rgba(240,253,250,.9), transparent 55%),
    #fff;
}

.ai-report-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ai-report-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background: rgba(248,250,252,.9);
  color: rgba(30,41,59,.95);
  font-weight: 700;
}

.ai-report-section{
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  padding: 12px 12px;
  margin-bottom: 10px;
}
.ai-report-section h3{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}
.ai-report-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ai-report-table th,.ai-report-table td{
  border-bottom: 1px solid rgba(226,232,240,.9);
  padding: 8px 6px;
  text-align: left;
}
.ai-report-table th{ color: rgba(100,116,139,.95); font-weight: 800; }

.ai-analysis-card-click{ cursor:pointer; width:400px;}
.ai-analysis-card-click:hover .ai-analysis-card{
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  transform: translateY(-1px);
  transition: .12s ease;
}

/* ===== AI 分析：封面卡升级 ===== */
.ai-card-cover{
  background:
    radial-gradient(circle at 0 0, rgba(196,181,253,.45), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(167,243,208,.40), transparent 55%),
    rgba(255,255,255,.88);
}

.ai-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.95);
}

.ai-card-title{
  font-size: 15px;
  font-weight: 950;
  color:#0f172a;
  letter-spacing: .2px;
}
.ai-card-sub{
  margin-top:4px;
  font-size: 12px;
  color: rgba(100,116,139,.95);
  font-weight: 700;
}

.ai-card-pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(248,250,252,.95);
  color: rgba(30,41,59,.95);
  flex-shrink:0;
}

.ai-card-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 6px;
}
.ai-card-badge{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.78);
  color: rgba(30,41,59,.95);
}

.ai-card-kpi{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 6px;
}
.ai-card-kpi .kpi{
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.ai-card-actions{ margin-top: 8px; }
.ai-card-actions-title{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.9);
  margin: 0 0 6px;
}

.ai-card-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.92);
}
.ai-card-list li{ margin: 4px 0; }

.ai-card-cta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.55);
  background: rgba(248,250,252,.8);
  color: rgba(30,41,59,.92);
  font-weight: 900;
}
.ai-card-cta-arrow{
  font-size: 18px;
  line-height: 1;
  opacity:.75;
}

/* ===== 报告截图区域：固定“海报感” ===== */
#ai-report-capture{
  max-width: 980px;
  min-width: 600px;
  margin: 0 auto;
  margin-top: 10px;
}
.ai-report-footer{
  margin-top: 12px;
  padding: 10px;
  border-top: 1px solid rgba(226,232,240,.9);
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: rgba(100,116,139,.95);
  font-weight: 800;
}
.ai-report-watermark{
  font-weight: 950;
  color: rgba(15,23,42,.6);
}

/* ===== AI 分析：卡片更紧凑（预制报告 & 普通文本统一风格） ===== */
.ai-card-compact{ padding: 10px 10px; }
.ai-card-compact .ai-card-head{ padding: 8px 8px 6px; border-radius: 14px; }
.ai-card-compact .ai-card-badges{ margin: 8px 0 4px; gap: 6px; }
.ai-card-compact .ai-card-badge{ padding: 5px 9px; font-size: 11px; }
.ai-card-compact .ai-card-kpi{ margin: 8px 0 4px; gap: 6px; }
.ai-card-compact .ai-card-kpi .kpi{ padding: 8px 8px; border-radius: 12px; }
.ai-card-compact .ai-card-kpi .kpi .label{ font-size: 10px; }
.ai-card-compact .ai-card-kpi .kpi .val{ font-size: 13px; margin-top: 3px; }

.ai-card-text-preview{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 14px;
  padding: 10px 10px;
}

.ai-report-pre{
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(15,23,42,.92);
}

.ai-analysis-card *{
  white-space: normal;
}

/* ===============================
   AI 报告弹窗：更高级的内容排版
================================ */
.ai-report-body{
  padding: 14px 14px 18px;
  border-radius: 18px;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(99,102,241,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,.10), transparent 55%),
    rgba(248,250,252,.92);
  border: 1px solid rgba(226,232,240,.95);
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
}

.ai-report-body h3{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(15,23,42,.92);
}

.ai-report-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ai-report-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
}

.ai-report-kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.ai-report-kpi{
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(226,232,240,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
}
.ai-report-kpi .k{
  font-size: 11px;
  color: rgba(100,116,139,.95);
}
.ai-report-kpi .v{
  margin-top: 4px;
  font-weight: 700;
  font-size: 15px;
  color: rgba(15,23,42,.92);
}

.ai-report-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-report-badge{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.86);
}

.ai-report-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.ai-report-li{
  display: flex;
  gap: 10px;
  line-height: 1.55;
  font-size: 13px;
  color: rgba(15,23,42,.90);
}
.ai-report-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(99,102,241,.75);
  flex: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10);
}

.ai-report-actions{
  /*display: grid;*/
  gap: 10px;
}
.ai-report-action{
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.72);
}
.ai-report-action .t{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.92);
}
.ai-report-action .d{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(30,41,59,.88);
}

.ai-report-table-wrap{
  width: 100%;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.72);
}
.ai-report-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.ai-report-table th,
.ai-report-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(226,232,240,.95);
  font-size: 13px;
  text-align: left;
  color: rgba(15,23,42,.90);
}
.ai-report-table th{
  position: sticky;
  top: 0;
  background: rgba(248,250,252,.96);
  font-weight: 700;
}
.ai-report-table tr:nth-child(even) td{
  background: rgba(248,250,252,.55);
}

/* 小屏优化 */
@media (max-width: 480px){
  .ai-report-kpis{ grid-template-columns: 1fr; }
  .ai-report-table{ min-width: 420px; }
}


/* ✅ 内容区域整体更“高级”：宽度收敛 + 间距统一 */
.ai-report-content{
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ✅ 纯文本/markdown 专用 section：更柔和的底色 */
.ai-report-section-plain{
  background:
    radial-gradient(circle at 0 0, rgba(196,181,253,.18), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(167,243,208,.14), transparent 55%),
    rgba(255,255,255,.92);
}

/* ✅ Markdown Typography（关键：解决“符号感”和“松散感”） */
.ai-md{
  color: rgba(15,23,42,.92);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .2px;
}
.ai-md h1,.ai-md h2,.ai-md h3{
  margin: 10px 0 6px;
  font-weight: 900;
  color: #0f172a;
}
.ai-md h1{ font-size: 16px; }
.ai-md h2{ font-size: 14px; }
.ai-md h3{ font-size: 13px; }

.ai-md p{
  margin: 6px 0;
}
.ai-md strong{
  font-weight: 900;
}
.ai-md .ai-md-space{
  height: 8px;
}

/* 列表：去掉“松散默认样式”，改成更精致的圆点 */
.ai-md ul{
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
}
.ai-md ul li{
  position: relative;
  padding-left: 16px;
  margin: 6px 0;
}
.ai-md ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(99,102,241,.85);
  transform: translateY(-50%);
}

/* 有序列表保持默认更清晰 */
.ai-md ol{
  margin: 6px 0 10px;
  padding-left: 18px;
}
.ai-md ol li{
  margin: 6px 0;
}

/* 行内代码：更“产品化”的小胶囊 */
.ai-md-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(241,245,249,.95);
  border: 1px solid rgba(226,232,240,.95);
}

#page-mine .mine-list-item .icon-wrapper .icon{
    width: 32px;
    height: 32px;
    fill: var(--accent-color, #14b8a6);
}

#page-mine .mine-list-item .icon{
    width: 32px;
    height: 32px;
    fill: var(--accent-color, #14b8a6);
}

/* ✅ Stats 页：tab 选中态更明显（覆盖默认 pill-tabs active 太淡的问题） */
#stats-type-tabs button.active,
#stats-period-mode-tabs button.active,
#stats-level-tabs button.active{
  background: rgba(255,255,255,0.95);
  color: #111827;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgb(246 165 207 / 90%) inset; /* 粉色描边 */
  border-radius: 10px;
}

/* 可选：未选中态稍微灰一点，更容易区分 */
#stats-type-tabs button:not(.active),
#stats-period-mode-tabs button:not(.active),
#stats-level-tabs button:not(.active){
  opacity: 0.75;
}

.trans-date-summary{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align: right!important;
  margin-right: 10px!important;
}

#comment-system-root .comment-trigger{
    display: none!important;
}

/* ===============================
   About Modal - Pro UI (FINAL)
   覆盖式重构：更紧凑、更高级、更像产品
================================ */

/* 遮罩 */
.about-mask{
  position:fixed; inset:0;
  background: rgba(10,12,18,.55);
  backdrop-filter: blur(10px);
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* 弹窗 */
.about-modal{
  width: min(980px, 96vw);
  max-height: 86vh;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
}

/* 顶栏 */
.about-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(33,150,243,.16), rgba(156,39,176,.12));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.about-title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
}
.about-sub{
  font-size: 12px;
  opacity: .72;
  margin-top: 2px;
}
.about-close{
  width:34px; height:34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  font-size: 22px;
  line-height: 28px;
}

/* 内容区：给浅底，更“产品化” */
.about-body{
  background: #f6f7fb;
  padding: 12px;
  overflow: auto;          /* ✅ 允许整体滚动，管理员区就能滚出来 */
}


/* 两列布局：左状态 / 右更新 */
.about-cards{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  /*height: calc(86vh - 14px - 16px - 48px);*/
}
@media (max-width: 860px){
  .about-body{ overflow:auto; }
  .about-cards{
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* 卡片通用 */
.about-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
}

/* 卡片标题：更紧凑 */
.about-card-title{
  font-weight: 950;
  font-size: 13px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 状态卡内容 */
.about-row{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed rgba(0,0,0,.07);
}
.about-row:last-child{ border-bottom: none; }
.about-label{ font-size: 12px; opacity: .62; }
.about-value{ font-size: 13px; font-weight: 900; }
.about-badge{
  font-size: 12px;
  font-weight: 950;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(33,150,243,.12);
  border: 1px solid rgba(33,150,243,.20);
}

/* 更新卡：右侧内部滚动，避免整个 modal 乱滚 */
.about-updates{
  padding: 12px;
  overflow: auto;
  max-height: 52vh;  /* ✅ 固定一个合理高度，右侧列表滚动 */
  white-space: normal;
}


/* 每条更新：更像产品 changelog */
.about-update-item{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  border-radius: 16px;
  padding: 12px 12px 10px;
  margin-bottom: 10px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.about-update-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  background: rgba(0,0,0,.028);
}

/* 标题行 */
.about-update-title{
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 8px;
}

/* meta 行：chips 左 + 时间右 */
.about-update-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  opacity: .78;
  margin-bottom: 10px;
}
.about-chip{
  display:inline-flex;
  align-items:center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  font-weight: 900;
}

/* 更新正文 */
.about-update-content{
  font-size: 13px;
  line-height: 1.55;
}

/* 列表更紧凑 */
.about-ul{
  margin: 0;
  padding-left: 18px;
}
.about-ul li{
  margin: 6px 0;
}

/* 管理员区：收敛、像后台面板 */
.about-admin{
  margin-top: 12px;
  background: rgba(255,152,0,.08);
  border: 1px solid rgba(255,152,0,.22);
  border-radius: 18px;
  padding: 12px;
}
.about-admin-title{
  font-weight: 950;
  margin-bottom: 8px;
}

.about-form{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.about-input, .about-textarea{
  width:100%;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 9px 10px;
  outline: none;
  font-size: 13px;
  background:#fff;
}
.about-textarea{ min-height: 110px; resize: vertical; }

.about-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  margin-top: 4px;
}
.about-btn{
  border: none;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 950;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(33,150,243,.94), rgba(156,39,176,.94));
  color:#fff;
}
.about-hint{
  font-size: 12px;
  opacity: .78;
}

.about-modal, .about-modal * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.about-admin-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.about-admin-openbtn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 7px 10px;
  font-weight: 900;
  cursor: pointer;
}
.about-admin-openbtn:hover{
  opacity: .9;
}

.about-admin-body{
  margin-top: 10px;
}

.entry-tagbox{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.45);
  border-radius:12px;
  background: rgba(255,255,255,.75);
}

.entry-tagchips{display:flex; flex-wrap:wrap; gap:6px;}
.entry-tagchip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(15,118,110,.10);
  color: #0f766e;
  font-size:12px;
}
.entry-tagchip button{
  border:none; background:transparent; cursor:pointer;
  color: inherit; opacity:.7; font-size:14px; line-height:1;
}
.entry-tag-input{
  border:none; outline:none; background:transparent;
  min-width: 140px; flex:1;
  padding:4px 2px; font-size:13px;
}

/* ✅ AI 标签提示文案 */
.ai-tags-tip {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
  /* 颜色不强制，你项目如果有统一色值也可以改 */
}

#detail-type-tag.expense { background: rgba(239,68,68,0.12); color:#ef4444; }
#detail-type-tag.income  { background: rgba(34,197,94,0.12); color:#22c55e; }
#detail-type-tag.transfer{ background: rgba(59,130,246,0.12); color:#3b82f6; }

.transfer-flow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transfer-card {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all .15s ease;
}

.transfer-card:hover {
  border-color: #22c55e;
  background: #f0fdf4;
}

.transfer-card-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.transfer-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.transfer-card-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.transfer-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.transfer-arrow {
  font-size: 18px;
  color: #22c55e;
}

.transfer-swap-btn {
  border: none;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
}

.transfer-swap-btn:hover {
  background: #22c55e;
  color: #fff;
}

.transfer-tip {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
}

.transfer-flow{display:flex;align-items:stretch;gap:12px;}
.transfer-card{
  flex:1;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;
  padding:12px 12px;cursor:pointer;transition:all .15s ease;
}
.transfer-card:hover{border-color:#22c55e;background:#f0fdf4;}
.transfer-card-label{font-size:12px;color:#64748b;margin-bottom:6px;}
.transfer-card-name{font-size:15px;font-weight:700;color:#0f172a;}
.transfer-card-sub{font-size:12px;color:#64748b;margin-top:2px;min-height:16px;}

.transfer-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.transfer-arrow{font-size:18px;color:#22c55e;}
.transfer-swap-btn{
  border:none;background:#e5e7eb;border-radius:999px;padding:6px 10px;cursor:pointer;
}
.transfer-swap-btn:hover{background:#22c55e;color:#fff;}
.transfer-tip{font-size:12px;color:#94a3b8;margin-top:8px;}

/* 弹层选择器 */
.transfer-picker{
  margin-top:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
.transfer-picker-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid #f1f5f9;
}
.transfer-picker-title{font-size:13px;color:#0f172a;font-weight:700;}
.transfer-picker-close{
  border:none;background:#f1f5f9;border-radius:10px;padding:2px 10px;cursor:pointer;
  font-size:18px;line-height:22px;color:#475569;
}
.transfer-picker-close:hover{background:#e2e8f0;}
.transfer-picker-list{max-height:220px;overflow:auto;padding:8px;}
.transfer-asset-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px;border-radius:12px;cursor:pointer;
}
.transfer-asset-item:hover{background:#f8fafc;}
.transfer-asset-left{display:flex;gap:2px;}
.transfer-asset-name{font-size:14px;font-weight:700;color:#0f172a;}
.transfer-asset-sub{font-size:12px;color:#64748b;}
.transfer-asset-balance{font-size:12px;color:#64748b;}


.transfer-asset-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.transfer-asset-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  overflow: hidden;
}

.transfer-asset-icon .emoji {
  font-size: 18px;
  line-height: 1;
}

.transfer-asset-icon .letter {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

.transfer-card-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.transfer-card-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
}

.transfer-card-icon .svg-icon{
  width:18px;
  height:18px;
}

/* =========================
   ✅ Tabs 选中态增强（账单明细 + Dashboard）
   放在 <style> 最后即可
========================= */

/* 统一让这三组 tab 更“像统计分析页面”的选中态 */
#type-tabs,
#dashboard-level-tabs,
#dashboard-cat-tabs{
  background: rgba(148, 163, 184, 0.18);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 3px;
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
}

#type-tabs button,
#dashboard-level-tabs button,
#dashboard-cat-tabs button{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(107, 114, 128, 1);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}

#type-tabs button:hover,
#dashboard-level-tabs button:hover,
#dashboard-cat-tabs button:hover{
  background: rgba(148, 163, 184, 0.22);
}

#type-tabs button:active,
#dashboard-level-tabs button:active,
#dashboard-cat-tabs button:active{
  transform: translateY(1px);
}

/* ✅ 选中态：更明显 */
#type-tabs button.active,
#dashboard-level-tabs button.active,
#dashboard-cat-tabs button.active{
  color: black;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgb(194 228 241 / 90%) inset;
  border-radius: 15px;
}

/* =========================
   ✅ 次级按钮：同色系（对齐 btn-primary）
   放在 <style> 最后覆盖
========================= */

.btn-secondary{
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 14px;

  /* ✅ 完全统一色系：青绿→橙 radial */
  background: radial-gradient(circle at 0 0, #a7f3d0, #fad18e 60%, #fdca8b 100%);

  /* ✅ 次级：文字稍深一点（主按钮是白字更“主”） */
  color: white;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* ✅ 阴影口径一致，但略轻一点，体现次级 */
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.30);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    opacity var(--transition-fast);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(20, 184, 166, 0.40);
  filter: brightness(1.03);
}

.btn-secondary:active{
  transform: translateY(0px);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.28);
  filter: brightness(0.99);
}

/* ✅ focus（键盘可见） */
.btn-secondary:focus{ outline: none; }
.btn-secondary:focus-visible{
  outline: 2px solid rgba(20, 184, 166, 0.55);
  outline-offset: 2px;
}

/* ✅ disabled */
.btn-secondary:disabled,
.btn-secondary[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.20) !important;
}

/* =========================
   ✅ 资产记录：加载更多按钮（同色系 + 更大一号）
========================= */

#asset-records-load-more{
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;

  /* 比普通按钮更大，像“底部主要操作” */
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;

  /* ✅ 同色系一致 */
  background: radial-gradient(circle at 0 0, #a7f3d0, #fad18e 60%, #fdca8b 100%);

  /* 这里建议用白字，更像“行动按钮”，更统一 */
  color: #f9fafb;

  /* 阴影同款（你 btn-primary 的口径） */
  box-shadow: 0 16px 40px rgba(15, 118, 110, 0.45);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    opacity var(--transition-fast);

  /* ✅ 底部按钮常见布局：居中、宽一点 */
  max-width: 420px;
  margin: 0px auto 0;
  display: block;
}

#asset-records-load-more:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(20, 184, 166, 0.55);
  filter: brightness(1.03);
}

#asset-records-load-more:active{
  transform: translateY(0px);
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.40);
  filter: brightness(0.99);
}

#asset-records-load-more:focus{ outline: none; }
#asset-records-load-more:focus-visible{
  outline: 2px solid rgba(20, 184, 166, 0.55);
  outline-offset: 2px;
}

#asset-records-load-more:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28) !important;
}

/* =========================
   ✅ 资产列表筛选 chips（对齐 btn-primary 色系 + 选中态）
   放在 <style> 最后
========================= */

.asset-list-filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* 默认态：轻量同色系（不要太抢） */
.asset-list-filters .chip{
  border: none;
  outline: none;
  cursor: pointer;

  border-radius: 999px;
  padding: 6px 12px;

  /* ✅ 统一色系：但默认更淡 */
  background: radial-gradient(circle at 0 0,
    rgba(167, 243, 208, 0.45),
    rgba(250, 209, 142, 0.35) 60%,
    rgba(253, 202, 139, 0.30) 100%
  );

  color: rgba(15, 23, 42, 0.78);
  font-size: 13px;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  box-shadow: 0 10px 26px rgba(15, 118, 110, 0.18);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    opacity var(--transition-fast);
}

.asset-list-filters .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(20, 184, 166, 0.28);
  filter: brightness(1.02);
}

/* ✅ 选中态：完全对齐 btn-primary（强对比） */
.asset-list-filters .chip.active{
  background: radial-gradient(circle at 0 0, #a7f3d0, #fad18e 60%, #fdca8b 100%);
  color: #f9fafb;
  box-shadow: 0 16px 40px rgba(15, 118, 110, 0.45);
  filter: brightness(1.02);
}

.asset-list-filters .chip.active:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(20, 184, 166, 0.55);
  filter: brightness(1.03);
}

.asset-list-filters .chip:active{
  transform: translateY(0px);

}

.stats-title-wrap{
  display: flex;
  align-items: center; /* ✅ 两个子元素垂直居中 */
  gap: 10px;           /* ✅ 标题与副标题之间间距 */
}

/* ===========================================================
   ✅ 皮肤设置弹窗：锁定版样式（恢复图一效果）
   放在整个 CSS 文件最末尾；只作用 #skin-settings-modal
=========================================================== */

#skin-settings-modal { display:none; }
#skin-settings-modal .modal-content.skin-modal{
  width: 760px !important;
  max-width: 92vw !important;
  height: 82vh !important;
  max-height: 86vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 头部固定 */
#skin-settings-modal .mine-modal-header{
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(209,213,219,0.6) !important;
}

/* 主体滚动 + 纵向布局 + gap */
#skin-settings-modal .mine-modal-body.skin-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* 卡片统一 */
#skin-settings-modal .skin-card{
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(209,213,219,0.7) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,0.08) !important;
}

/* 预览卡片渐变 */
#skin-settings-modal .skin-preview-card{
  background:
    radial-gradient(circle at 0 0, rgba(204,251,241,0.65), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(254,249,195,0.55), transparent 55%),
    rgba(255,255,255,0.75) !important;
}

/* 预览顶部 */
#skin-settings-modal .skin-preview-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

#skin-settings-modal .skin-preview-title{
  font-weight:700 !important;
  font-size:14px !important;
  color:#111827 !important;
}
#skin-settings-modal .skin-preview-sub{
  margin-top:2px !important;
  font-size:12px !important;
  color:#6b7280 !important;
}

#skin-settings-modal .skin-badge{
  font-size:12px !important;
  color:#0f766e !important;
  background: rgba(15,118,110,0.10) !important;
  border: 1px solid rgba(15,118,110,0.18) !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* 预览样例：关键是 display:flex + chip/card 样式 */
#skin-settings-modal .skin-preview-samples{
  display:flex !important;
  gap:10px !important;
  align-items:stretch !important;
  flex-wrap:wrap !important;
}

#skin-settings-modal .skin-sample-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  font-size:12px !important;
  color:#fff !important;
  background: var(--primary-color) !important;
  box-shadow: 0 10px 18px rgba(15,118,110,0.22) !important;
}

#skin-settings-modal .skin-sample-chip.ghost{
  color: var(--primary-color) !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(15,118,110,0.25) !important;
  box-shadow:none !important;
}

#skin-settings-modal .skin-sample-chip.soft{
  color: var(--primary-color) !important;
  background: var(--primary-soft) !important;
  border: 1px solid rgba(15,118,110,0.18) !important;
  box-shadow:none !important;
}

#skin-settings-modal .skin-sample-card{
  flex:1 !important;
  min-width:220px !important;
  border-radius:14px !important;
  border: 1px solid rgba(209,213,219,0.7) !important;
  background: rgba(255,255,255,0.82) !important;
  padding:10px 12px !important;
}
#skin-settings-modal .skin-sample-card .t1{
  font-size:13px !important;
  font-weight:700 !important;
  color:#111827 !important;
}
#skin-settings-modal .skin-sample-card .t2{
  margin-top:4px !important;
  font-size:12px !important;
  color:#6b7280 !important;
}

/* 标题 */
#skin-settings-modal .skin-section-title{
  font-size:13px !important;
  font-weight:700 !important;
  color:#111827 !important;
  margin-bottom:10px !important;
}

/* 预置皮肤网格（图二最大问题之一：grid 被覆盖/失效） */
#skin-settings-modal .skin-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
}
@media (max-width: 900px){
  #skin-settings-modal .skin-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px){
  #skin-settings-modal .skin-grid{ grid-template-columns: 1fr !important; }
}

#skin-settings-modal .skin-theme-item{
  border-radius:16px !important;
  border: 1px solid rgba(209,213,219,0.75) !important;
  background: rgba(255,255,255,0.78) !important;
  padding:12px !important;
  cursor:pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
#skin-settings-modal .skin-theme-item:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10) !important;
}
#skin-settings-modal .skin-theme-item.active{
  border-color: rgba(15,118,110,0.55) !important;
  box-shadow: 0 18px 50px rgba(15,118,110,0.16) !important;
  background: rgba(15,118,110,0.06) !important;
}

/* 色块（图二不见的就是这块被覆盖了） */
#skin-settings-modal .swatch-row{
  display:flex !important;
  gap:8px !important;
  margin-bottom:8px !important;
}
#skin-settings-modal .swatch{
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  border-radius:6px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

#skin-settings-modal .skin-theme-name{
  font-size:13px !important;
  font-weight:700 !important;
  color:#111827 !important;
}
#skin-settings-modal .skin-theme-desc{
  margin-top:3px !important;
  font-size:12px !important;
  color:#6b7280 !important;
}

/* 外观选项（占位行） */
#skin-settings-modal .skin-opt-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:14px !important;
  border: 1px dashed rgba(148,163,184,0.55) !important;
  background: rgba(255,255,255,0.55) !important;
  margin-top:10px !important;
}
#skin-settings-modal .skin-opt-name{
  font-size:13px !important;
  font-weight:700 !important;
  color:#111827 !important;
}
#skin-settings-modal .skin-opt-desc{
  margin-top:2px !important;
  font-size:12px !important;
  color:#6b7280 !important;
}
#skin-settings-modal .skin-opt-pill{
  font-size:12px !important;
  color:#6b7280 !important;
  background: rgba(148,163,184,0.15) !important;
  border: 1px solid rgba(148,163,184,0.30) !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* 底部按钮区 */
#skin-settings-modal .skin-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding-top:2px !important;
}



/* ===========================================================
   主题皮肤（原 pc_theme_skins.css 合并进来）
   注意：这段放在主样式之后，确保变量覆盖生效
   =========================================================== */

/* pc_theme_skins.css
   ===========================================================
   PC 端主题皮肤（独立文件）
   用法：
   1) 在你的主 CSS 之后引入本文件（必须放后面保证覆盖生效）
      <link rel="stylesheet" href="pc_theme_skins.css">
   2) JS 设置：document.documentElement.dataset.theme = 'neumorphism';
      或：<html data-theme="neumorphism">
   3) 本文件只做“CSS 变量覆盖”，不改动你的现有选择器，
      以避免破坏现有样式。
   =========================================================== */

/* -------- 兜底：如果你主 CSS 未定义这些变量，本文件给出默认值 -------- */
:root{
  /* 你现有代码里已出现/高概率存在的变量 */
  --primary-color: #0f766e;
  --primary-soft: rgba(15,118,110,0.12);
  --border-color: rgba(209,213,219,0.85);
  --text-color: #111827;
  --text-muted: #6b7280;
  --transition-fast: 150ms;

  /* 额外语义变量（不影响现有样式；后续你可以逐步改成用它们） */
  --bg-color: #f4f7fb;
  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.90);
  --panel-border: rgba(209,213,219,0.70);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 22px 70px rgba(15, 23, 42, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;

  /* 毛玻璃辅助 */
  --glass-blur: 14px;
  --glass-sat: 140%;
}

/* ===========================================================
   主题：① 新拟态（Neumorphism）
   特点：浅底、柔和阴影、低对比、圆润
=========================================================== */
html[data-theme="neumorphism"]{
  --bg-color: #e9eef6;
  --panel-bg: rgba(233,238,246,0.85);
  --panel-bg-strong: rgba(233,238,246,0.92);
  --panel-border: rgba(255,255,255,0.45);

  --primary-color: #5b7cfa;
  --primary-soft: rgba(91,124,250,0.14);

  --border-color: rgba(148,163,184,0.42);
  --text-color: #0f172a;
  --text-muted: rgba(15,23,42,0.55);

  --shadow-soft: 14px 14px 28px rgba(15,23,42,0.10), -14px -14px 28px rgba(255,255,255,0.75);
  --shadow-strong: 18px 18px 40px rgba(15,23,42,0.14), -18px -18px 40px rgba(255,255,255,0.80);

  --radius-lg: 22px;
  --radius-md: 16px;
}

/* ===========================================================
   主题：⑥ 暖粉风（Warm Pink）
   特点：暖色粉橙、柔软、治愈
=========================================================== */
html[data-theme="warm-pink"]{
  --bg-color: #fff7f9;

  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.92);
  --panel-border: rgba(251,113,133,0.18);

  --primary-color: #fb7185; /* rose */
  --primary-soft: rgba(251,113,133,0.16);

  --border-color: rgba(203,213,225,0.70);
  --text-color: #1f2937;
  --text-muted: rgba(31,41,55,0.55);

  --shadow-soft: 0 16px 46px rgba(251,113,133,0.12), 0 10px 28px rgba(15,23,42,0.06);
  --shadow-strong: 0 22px 70px rgba(251,113,133,0.16), 0 16px 40px rgba(15,23,42,0.08);

  --radius-lg: 18px;
  --radius-md: 14px;
}


/* ===========================================================
   主题皮肤（合并 pc_theme_skins.css）
   =========================================================== */

/* pc_theme_skins.css
   ===========================================================
   PC 端主题皮肤（独立文件）
   用法：
   1) 在你的主 CSS 之后引入本文件（必须放后面保证覆盖生效）
      <link rel="stylesheet" href="pc_theme_skins.css">
   2) JS 设置：document.documentElement.dataset.theme = 'neumorphism';
      或：<html data-theme="neumorphism">
   3) 本文件只做“CSS 变量覆盖”，不改动你的现有选择器，
      以避免破坏现有样式。
   =========================================================== */

/* -------- 兜底：如果你主 CSS 未定义这些变量，本文件给出默认值 -------- */
:root{
  /* 你现有代码里已出现/高概率存在的变量 */
  --primary-color: #0f766e;
  --primary-soft: rgba(15,118,110,0.12);
  --border-color: rgba(209,213,219,0.85);
  --text-color: #111827;
  --text-muted: #6b7280;
  --transition-fast: 150ms;

  /* 额外语义变量（不影响现有样式；后续你可以逐步改成用它们） */
  --bg-color: #f4f7fb;
  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.90);
  --panel-border: rgba(209,213,219,0.70);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 22px 70px rgba(15, 23, 42, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;
  --card-border: var(--panel-border);

  /* 毛玻璃辅助 */
  --glass-blur: 14px;
  --glass-sat: 140%;
}

/* ===========================================================
   主题：① 新拟态（Neumorphism）
   特点：浅底、柔和阴影、低对比、圆润
=========================================================== */
html[data-theme="neumorphism"]{
  --bg-color: #e9eef6;
  --panel-bg: rgba(233,238,246,0.85);
  --panel-bg-strong: rgba(233,238,246,0.92);
  --panel-border: rgba(255,255,255,0.45);

  --primary-color: #5b7cfa;
  --primary-soft: rgba(91,124,250,0.14);

  --border-color: rgba(148,163,184,0.42);
  --text-color: #0f172a;
  --text-muted: rgba(15,23,42,0.55);

  --shadow-soft: 14px 14px 28px rgba(15,23,42,0.10), -14px -14px 28px rgba(255,255,255,0.75);
  --shadow-strong: 18px 18px 40px rgba(15,23,42,0.14), -18px -18px 40px rgba(255,255,255,0.80);

  --radius-lg: 22px;
  --radius-md: 16px;
}

/* ===========================================================
   主题：⑥ 暖粉风（Warm Pink）
   特点：暖色粉橙、柔软、治愈
=========================================================== */
html[data-theme="warm-pink"]{
  --bg-color: #fff7f9;

  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.92);
  --panel-border: rgba(251,113,133,0.18);

  --primary-color: #fb7185; /* rose */
  --primary-soft: rgba(251,113,133,0.16);
  --t-accent-gradient: linear-gradient(135deg, #ffd1d9 0%, #f08a9b 55%, #ee6a7c 100%);

  --border-color: rgba(203,213,225,0.70);
  --text-color: #1f2937;
  --text-muted: rgba(31,41,55,0.55);

  --shadow-soft: 0 16px 46px rgba(251,113,133,0.12), 0 10px 28px rgba(15,23,42,0.06);
  --shadow-strong: 0 22px 70px rgba(251,113,133,0.16), 0 16px 40px rgba(15,23,42,0.08);

  --radius-lg: 18px;
  --radius-md: 14px;
}

/* ===========================================================
   额外常见风格（你要求再多几套）
=========================================================== */


/* ===========================================================
   ✅ Theme Bridge v4（在“默认主题完全不变”的前提下增强换肤）
   关键原则：
   1) 仅在 html[data-theme] 存在时生效（不影响默认原样式）
   2) 只改颜色/背景/边框/阴影/hover，不改布局结构
   3) 尽量基于你默认主题的视觉口径（边框/圆角/阴影不乱）
=========================================================== */

/* 主题语义变量（仅在开启主题时启用） */
html[data-theme]{
  --t-bg: var(--bg-color, #f4f7fb);
  --t-surface: var(--panel-bg, rgba(255,255,255,0.78));
  --t-surface-strong: var(--panel-bg-strong, rgba(255,255,255,0.92));
  --t-border: var(--panel-border, rgba(209,213,219,0.70));
  --t-border-soft: color-mix(in srgb, var(--t-border) 78%, transparent);
  --t-fg: var(--text-color, #111827);
  --t-muted: var(--text-muted, #6b7280);
  --t-accent: var(--primary-color, #0f766e);
  --t-accent-soft: var(--primary-soft, rgba(15,118,110,0.12));
  --t-shadow-1: var(--shadow-soft, 0 18px 50px rgba(15, 23, 42, 0.08));
  --t-shadow-2: var(--shadow-strong, 0 22px 70px rgba(15, 23, 42, 0.12));
  --t-r-lg: var(--radius-lg, 18px);
  --t-r-md: var(--radius-md, 14px);

  /* hover/active 尽量保持你默认主题的克制感 */
  --t-hover: color-mix(in srgb, var(--t-accent-soft) 36%, var(--t-surface) 64%);
  --t-active: color-mix(in srgb, var(--t-accent-soft) 58%, var(--t-surface) 42%);
}

/* ========== 全局背景/文字（仅在主题开启时） ========== */
html[data-theme], html[data-theme] body{
  background: var(--t-bg) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.page-title,.mine-modal-title,.section-title,.skin-section-title,.card-title,.panel-title){
  color: var(--t-fg) !important;
}
html[data-theme] :where(.page-subtitle,.skin-theme-desc,.skin-opt-desc,.muted,.text-muted,.hint,.desc){
  color: var(--t-muted) !important;
}

/* ========== 顶部栏/侧边栏（不改布局，仅改底色/分割线） ========== */
html[data-theme] :where(.topbar,.top-bar,.header,.app-header,.page-header,.toolbar,.header-bar){
  background: color-mix(in srgb, var(--t-surface-strong) 88%, transparent) !important;
  border-bottom-color: var(--t-border-soft) !important;
  color: var(--t-fg) !important;
}

html[data-theme] :where(.sidebar,.side-bar,.sider,.left-panel,.nav,.pc-sidebar,.menu,.menu-panel){
  background: color-mix(in srgb, var(--t-surface-strong) 92%, transparent) !important;
  border-right-color: var(--t-border-soft) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.sidebar a,.menu a,.nav a,.pc-sidebar a){
  color: var(--t-fg) !important;
}
html[data-theme] :where(.sidebar a:hover,.menu a:hover,.nav a:hover,.pc-sidebar a:hover){
  background: var(--t-hover) !important;
}
html[data-theme] :where(.sidebar .active,.menu .active,.nav .active,.pc-sidebar .active){
  background: var(--t-active) !important;
  color: var(--t-accent) !important;
}

/* ========== 卡片/面板/统计卡片（尽量不“边框错乱”：只覆盖颜色/阴影） ========== */
html[data-theme] :where(.card,.panel,.box,.section,.stat-card,.stats-card,.summary-card,.data-card,.analysis-card,.kpi-card,.mine-card,.skin-card,.glass-card){
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
  color: var(--t-fg) !important;
}

/* ========== 列表/行（只改底色与分割线，不改 padding/布局） ========== */
html[data-theme] :where(.list-item,.item,.row,.list-row,.transaction-row,.trans-row){
  background: color-mix(in srgb, var(--t-surface) 86%, transparent) !important;
  border-bottom-color: var(--t-border-soft) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.list-item:hover,.item:hover,.row:hover,.list-row:hover,.transaction-row:hover,.trans-row:hover){
  background: var(--t-hover) !important;
}

/* ========== 表格（只覆盖 header 底色与线条） ========== */
html[data-theme] :where(table){
  color: var(--t-fg) !important;
}
html[data-theme] :where(th){
  background: color-mix(in srgb, var(--t-surface-strong) 92%, transparent) !important;
  border-bottom-color: var(--t-border) !important;
}
html[data-theme] :where(td){
  border-bottom-color: var(--t-border-soft) !important;
}
html[data-theme] :where(tr:hover td){
  background: color-mix(in srgb, var(--t-hover) 85%, transparent) !important;
}

/* ========== 弹窗（只改底色/边框/阴影，不碰定位） ========== */
html[data-theme] :where(.modal-content,.mine-settings-modal,.dialog,.dialog-content,.drawer,.drawer-content){
  background: var(--t-surface-strong) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-2) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.mine-modal-header,.modal-header,.dialog-header){
  background: color-mix(in srgb, var(--t-surface-strong) 88%, transparent) !important;
  border-bottom-color: var(--t-border-soft) !important;
}

/* ========== 输入/下拉（只改底色/边框/焦点，不改宽高） ========== */
html[data-theme] :where(input,textarea,select,.input,.select,.textarea,.form-control){
  color: var(--t-fg) !important;
}
html[data-theme] :where(input[type="text"],input[type="number"],input[type="date"],input[type="search"],input[type="password"],textarea,select,.input,.select,.textarea,.form-control){
  background: color-mix(in srgb, var(--t-surface-strong) 86%, transparent) !important;
  border-color: var(--t-border) !important;
}
html[data-theme] :where(input::placeholder,textarea::placeholder){
  color: color-mix(in srgb, var(--t-muted) 88%, transparent) !important;
}
html[data-theme] :where(input:focus,textarea:focus,select:focus,.input:focus,.select:focus,.form-control:focus){
  border-color: color-mix(in srgb, var(--t-accent) 55%, var(--t-border) 45%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent) !important;
}

html[data-theme] :where(.dropdown,.dropdown-menu,.select-menu,.menu-popup,.popup,.autocomplete){
  background: var(--t-surface-strong) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.dropdown-item,.menu-item,.select-item,.option){
  color: var(--t-fg) !important;
}
html[data-theme] :where(.dropdown-item:hover,.menu-item:hover,.select-item:hover,.option:hover){
  background: var(--t-hover) !important;
}

/* ========== tag/chip/badge（不乱边框：保持圆角与克制色） ========== */
html[data-theme] :where(.tag,.chip,.badge,.pill,.label-chip,.filter-chip){
  background: color-mix(in srgb, var(--t-surface) 78%, transparent) !important;
  border-color: var(--t-border) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.tag.active,.chip.active,.badge.active,.pill.active,.label-chip.active,.filter-chip.active){
  background: var(--t-accent-soft) ;
  border-color: color-mix(in srgb, var(--t-accent) 40%, var(--t-border) 60%) !important;
  color: var(--t-accent) !important;
}

/* ========== 按钮：遵循你默认风格（主色按钮/次按钮） ========== */
html[data-theme] :where(.btn-primary,.data-action-btn:not(.secondary)){
  background: var(--t-accent) !important;
  border-color: color-mix(in srgb, var(--t-accent) 78%, #000 22%) !important;
  color: #fff !important;
}
html[data-theme] :where(.data-action-btn.secondary,.btn-secondary){
  background: color-mix(in srgb, var(--t-surface-strong) 90%, transparent) !important;
  border-color: var(--t-border) !important;
  color: var(--t-fg) !important;
}
html[data-theme] :where(.btn-ghost,.ghost-btn){
  background: transparent !important;
  border-color: color-mix(in srgb, var(--t-accent) 30%, var(--t-border) 70%) !important;
  color: var(--t-accent) !important;
}

/* ========== 图表容器（只改容器背景/边框，图表本身由库决定） ========== */
html[data-theme] :where(.chart,.charts,.chart-card,.chart-container,.echarts,.canvas-wrap,.plot,.plot-card){
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
  color: var(--t-fg) !important;
}

/* ===========================================================
   主题增强：新拟态/毛玻璃（只在对应主题下启用）
=========================================================== */

/* 新拟态：更明显的双向柔和阴影 + 更软的边界 */
html[data-theme="neumorphism"]{
  --t-bg: #e9eef6;
  --t-surface: rgba(233,238,246,0.92);
  --t-surface-strong: rgba(233,238,246,0.96);
  --t-border: rgba(255,255,255,0.45);
  --t-shadow-1: 14px 14px 28px rgba(15,23,42,0.10), -14px -14px 28px rgba(255,255,255,0.75);
  --t-shadow-2: 18px 18px 40px rgba(15,23,42,0.14), -18px -18px 40px rgba(255,255,255,0.80);
}

/* 新拟态：按钮/输入更像“压入/凸起” */
html[data-theme="neumorphism"] :where(.btn-primary,.data-action-btn:not(.secondary),input,textarea,select,.input,.select,.form-control){
  box-shadow: 10px 10px 20px rgba(15,23,42,0.10), -10px -10px 20px rgba(255,255,255,0.72) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
html[data-theme="neumorphism"] :where(.data-action-btn.secondary,.btn-secondary){
  box-shadow: inset 8px 8px 18px rgba(15,23,42,0.08), inset -8px -8px 18px rgba(255,255,255,0.72) !important;
}



/* ===========================================================
   ✅ v4.1 修复补丁
   - 修复 pc-sidebar 右侧黑边框（改为主题边框色）
   - 修复 dashboard-cat-tbody / list-table 行下边框发黑
   - 修复 pc-topbar / pc-pages 随主题变化
   - 修复 “记一笔” 等主按钮随主题变化
   - AI 聊天相关容器：统一表面/边框/文字，避免层级错乱
   - 保留“经典默认”主题：classic（用于回到原始默认风格）
=========================================================== */

/* ---------- 默认主题 = （当 html 没有 data-theme 时） ---------- */
html:not([data-theme]){
  /* 复用 forest 的变量口径（如果主题皮肤里你后续再调，这里也可一起调） */
  --bg-color: #f0fdf4;
  --panel-bg: rgba(240, 253, 244, 0.84);
  --panel-bg-strong: rgba(240, 253, 244, 0.92);
  --panel-border: rgba(22, 163, 74, 0.22);
  --text-color: #0f172a;
  --text-muted: #4b5563;
  --primary-color: #16a34a;
  --primary-soft: rgba(22, 163, 74, 0.14);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 22px 70px rgba(15, 23, 42, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;
  /* 玻璃参数 */
  --glass-blur: 18px;
  --glass-sat: 150%;
}

/* 让 Theme Bridge 在“无 data-theme”时也生效（默认 forest） */
html:not([data-theme]){
  /* 复制 bridge 依赖的语义变量（与 bridge_v4 同口径） */
  --t-bg: var(--bg-color, #f4f7fb);
  --t-surface: var(--panel-bg, rgba(255,255,255,0.78));
  --t-surface-strong: var(--panel-bg-strong, rgba(255,255,255,0.92));
  --t-border: var(--panel-border, rgba(209,213,219,0.70));
  --t-border-soft: color-mix(in srgb, var(--t-border) 78%, transparent);
  --t-fg: var(--text-color, #111827);
  --t-muted: var(--text-muted, #6b7280);
  --t-accent: var(--primary-color, #0f766e);
  --t-accent-soft: var(--primary-soft, rgba(15,118,110,0.12));
  --t-shadow-1: var(--shadow-soft, 0 18px 50px rgba(15, 23, 42, 0.08));
  --t-shadow-2: var(--shadow-strong, 0 22px 70px rgba(15, 23, 42, 0.12));
  --t-r-lg: var(--radius-lg, 18px);
  --t-r-md: var(--radius-md, 14px);
  --t-hover: color-mix(in srgb, var(--t-accent-soft) 36%, var(--t-surface) 64%);
  --t-active: color-mix(in srgb, var(--t-accent-soft) 58%, var(--t-surface) 42%);
}

/* 经典默认主题（回到原始默认观感；你后续皮肤列表可以加一项 classic） */
html[data-theme="classic"]{
  /* 这里尽量贴近你原默认的玻璃清爽口径（不依赖 forest） */
  --bg-color: #f4f7fb;
  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.92);
  --panel-border: rgba(209, 213, 219, 0.70);
  --text-color: #111827;
  --text-muted: #6b7280;
  --primary-color: #0f766e;
  --primary-soft: rgba(15,118,110,0.12);
}

/* ---------- 基础桥接：无 data-theme 与有 data-theme 一样应用（默认 forest） ---------- */
html:not([data-theme]), html[data-theme],
html:not([data-theme]) body, html[data-theme] body{
  background:radial-gradient(circle at 0 0, #a7f3d0 0, transparent 55%), radial-gradient(circle at 100% 0, #fef3c7 0, transparent 55%), radial-gradient(circle at 0 100%, #fee2e2 0, transparent 55%), #f4f4f5;
  
  color: var(--t-fg) !important;
}

/* ---------- 修复 1：pc-sidebar 右侧黑边框 ---------- */
html:not([data-theme]) .pc-sidebar,
html[data-theme] .pc-sidebar{
  border-color: var(--t-border) !important; /* 覆盖原 border:1px solid ... */
  outline: none !important;
}

/* 如果某处额外加了右边框（容器级），一起兜底 */
html:not([data-theme]) :where(.pc-sidebar, .pc-sidebar-wrap, .pc-layout, .pc-main, .pc-pages),
html[data-theme] :where(.pc-sidebar, .pc-sidebar-wrap, .pc-layout, .pc-main, .pc-pages){
  border-right-color: var(--t-border-soft) !important;
}

/* ---------- 修复 1：dashboard-cat-tbody / list-table 行下边框发黑 ---------- */
html:not([data-theme]) :where(#dashboard-cat-tbody tr, .dashboard-cat-tbody tr, .list-table tr),
html[data-theme] :where(#dashboard-cat-tbody tr, .dashboard-cat-tbody tr, .list-table tr){
  border-bottom-color: var(--t-border-soft) !important;
}

/* 若 td 自己带边框，也一起兜底 */
html:not([data-theme]) :where(#dashboard-cat-tbody td, .list-table td),
html[data-theme] :where(#dashboard-cat-tbody td, .list-table td){
  border-bottom-color: var(--t-border-soft) !important;
}

/* ---------- 修复 2：pc-topbar / pc-pages 跟随主题 ---------- */
html:not([data-theme]) :where(.pc-topbar, .pc-pages),
html[data-theme] :where(.pc-topbar, .pc-pages){
  background: color-mix(in srgb, var(--t-surface-strong) 90%, transparent) !important;
  color: var(--t-fg) !important;
}

html:not([data-theme]) .pc-topbar,
html[data-theme] .pc-topbar{
  border-bottom: 1px solid var(--t-border-soft) !important;
}

/* page 容器不要出现“突兀白底/黑底” */
html:not([data-theme]) .pc-pages,
html[data-theme] .pc-pages{
  background: transparent !important;
}

/* ---------- 修复 3：记一笔 / 快捷新增按钮随主题 ---------- */
html:not([data-theme]) :where(#btn-quick-add, .btn-primary, .pc-topbar .btn-primary),
html[data-theme] :where(#btn-quick-add, .btn-primary, .pc-topbar .btn-primary){
  background: var(--t-accent-gradient);
  color: #fff !important;
  border-color: color-mix(in srgb, var(--t-accent) 78%, #000 22%) !important;
}

html:not([data-theme]) :where(#btn-quick-add:hover, .btn-primary:hover),
html[data-theme] :where(#btn-quick-add:hover, .btn-primary:hover){
  filter: brightness(0.98) !important;
}

/* ---------- 修复 4：AI 聊天窗口层级（避免颜色错乱） ---------- */
/* AI 相关面板：统一为 surface/strong-surface */
html:not([data-theme]) :where(#ai-analysis-modal, #ai-analysis-report-modal, #ai-image-viewer, #ai-detail-panel, #ai-detail-smart, #ai-detail-rule, #ai-detail-ai),
html[data-theme] :where(#ai-analysis-modal, #ai-analysis-report-modal, #ai-image-viewer, #ai-detail-panel, #ai-detail-smart, #ai-detail-rule, #ai-detail-ai){
  color: var(--t-fg) !important;
}

/* AI 消息区容器 */
html:not([data-theme]) :where(#ai-messages, #ai-analysis-messages, .ai-messages, .ai-chat, .ai-panel),
html[data-theme] :where(#ai-messages, #ai-analysis-messages, .ai-messages, .ai-chat, .ai-panel){
  background: color-mix(in srgb, var(--t-surface) 82%, transparent) !important;
  border-color: var(--t-border) !important;
  color: var(--t-fg) !important;
}

/* AI 输入区 */
html:not([data-theme]) :where(#ai-input, #ai-analysis-input, .ai-input),
html[data-theme] :where(#ai-input, #ai-analysis-input, .ai-input){
  background: color-mix(in srgb, var(--t-surface-strong) 86%, transparent) !important;
  border-color: var(--t-border) !important;
  color: var(--t-fg) !important;
}

/* AI 按钮 */
html:not([data-theme]) :where(#ai-analysis-send, #ai-send, .ai-send, .ai-btn, .ai-action-btn),
html[data-theme] :where(#ai-analysis-send, #ai-send, .ai-send, .ai-btn, .ai-action-btn){
  background: var(--t-accent) !important;
  border-color: color-mix(in srgb, var(--t-accent) 78%, #000 22%) !important;
  color: #fff !important;
}

/* AI tag / badge */
html:not([data-theme]) :where(#ai-model-tag, .ai-model-tag, .ai-tag, .ai-badge),
html[data-theme] :where(#ai-model-tag, .ai-model-tag, .ai-tag, .ai-badge){
  background: var(--t-accent-soft) !important;
  border-color: color-mix(in srgb, var(--t-accent) 35%, var(--t-border) 65%) !important;
  color: var(--t-accent) !important;
}

/* ---------- 其他细节：避免主题下出现“纯黑线条” ---------- */
html:not([data-theme]) :where(hr, .divider, .split-line),
html[data-theme] :where(hr, .divider, .split-line){
  border-color: var(--t-border-soft) !important;
  background: transparent !important;
}

/* 兼容：不支持 color-mix 的浏览器 */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  html:not([data-theme]){ --t-border-soft: rgba(22,163,74,0.18); }
  html[data-theme]{ --t-border-soft: rgba(209,213,219,0.45); }
  html:not([data-theme]) :where(#dashboard-cat-tbody tr, .list-table tr),
  html[data-theme] :where(#dashboard-cat-tbody tr, .list-table tr){
    border-bottom-color: var(--t-border-soft) !important;
  }
}



/* ===========================================================
   ✅ Theme Patch v4.2（细节专项修复）
=========================================================== */

/* 1. 账单详情弹窗 */
html[data-theme] .detail-modal-card{
  background: var(--t-surface-strong) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
  color: var(--t-fg) !important;
}

/* 2. 资产卡片 */
html[data-theme] .asset-card,
html[data-theme] .asset-item,
html[data-theme] .asset-box{
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
  color: var(--t-fg) !important;
}

/* 3. AI 聊天 */
.ai-main .card{
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
}
.ai-main .card-header{
  padding: 5px 15px !important;
}

/* 4. AI 控制条 */
.ai-control-bar{
  margin: 4px 10px 6px !important;
}
.ai-control-btn{
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
  border-radius: 999px !important;
}

/* 5. AI 分析弹窗 */
.ai-analysis-modal{
  background: var(--t-surface-strong) !important;
  color: var(--t-fg) !important;
}

/* 6. 账单明细 */
#transactions-list .transaction-row{
  background: var(--t-surface) !important;
}


/* 12. 新拟态 padding */
html[data-theme="neumorphism"] .card{
  padding: 14px !important;
}



/* ===========================================================
   ✅ Theme Patch v4.3（账单 / Dashboard / Tabs / Filters / Chips 深度补齐）
=========================================================== */

/* ---------- 1. 账单明细 transactions-list：让“列表区”更显眼（与外层背景拉开层级）---------- */
html[data-theme] #transactions-list,
html[data-theme] .transactions-list{
  /* 列表容器：比页面背景更“实”一点，形成分区 */
  /*background: color-mix(in srgb, var(--t-bg) 82%, var(--t-surface-strong) 18%) !important;*/
  color: var(--t-fg) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: var(--t-r-lg) !important;
  padding: 10px !important;
}

/* 分组容器（每天一组） */
html[data-theme] #transactions-list .trans-date-group{
  background: transparent !important;
  color: var(--t-fg) !important;
  border: 0 !important;
  margin: 10px 0 12px !important;
}

/* 分组头（日期 + 当日合计） */
html[data-theme] #transactions-list .trans-date-header{
  background: color-mix(in srgb, var(--t-surface-strong) 78%, transparent) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: var(--t-r-md) !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

html[data-theme] #transactions-list .trans-date,
html[data-theme] #transactions-list .trans-date-count{
  color: var(--t-muted) !important;
}

html[data-theme] #transactions-list .trans-date-expense{
  color: color-mix(in srgb, var(--t-danger) 70%, var(--t-fg) 30%) !important;
}
html[data-theme] #transactions-list .trans-date-income{
  color: color-mix(in srgb, var(--t-success) 70%, var(--t-fg) 30%) !important;
}

/* items 外壳 */
html[data-theme] #transactions-list .trans-items{
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

/* 账单项内部文字层级 */
html[data-theme] #transactions-list .trans-cat-name{
  color: var(--t-fg) !important;
}
html[data-theme] #transactions-list .trans-note-inline,
html[data-theme] #transactions-list .trans-time-inline,
html[data-theme] #transactions-list .trans-account{
  color: var(--t-muted) !important;
}

/* 金额颜色（保持你原逻辑 class） */
html[data-theme] #transactions-list .trans-amount.expense{ color: var(--t-danger) !important; }
html[data-theme] #transactions-list .trans-amount.income{  color: var(--t-success) !important; }
html[data-theme] #transactions-list .trans-amount.transfer{ color: var(--t-accent) !important; }

/* 兼容旧 class：如果某些页面仍用 .transaction-row/.trans-row 也给同样层级 */
html[data-theme] #transactions-list .transaction-row,
html[data-theme] #transactions-list .trans-row{
  background: color-mix(in srgb, var(--t-surface) 88%, var(--t-bg) 12%) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-shadow-2) !important;
  color: var(--t-fg) !important;
}
/* ---------- 2. 账单详情 detail-info-grid ---------- */
html[data-theme] .detail-info-grid{
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-r-md) !important;
  color: var(--t-fg) !important;
}

html[data-theme] .detail-info-grid .detail-row{
  border-bottom: 1px solid var(--t-border-soft) !important;
}

html[data-theme] .detail-info-grid .label{
  color: var(--t-muted) !important;
}
html[data-theme] .detail-info-grid .detail-info-value{
  color: var(--t-fg) !important;
}

/* ---------- 3. Dashboard 分类表 ---------- */
html[data-theme] .dashboard-cat-table-wrapper{
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow-1) !important;
}

html[data-theme] .dashboard-cat-table-wrapper table{
  color: var(--t-fg) !important;
}

html[data-theme] .dashboard-cat-table-wrapper th{
  background: color-mix(in srgb, var(--t-surface-strong) 92%, transparent) !important;
  border-bottom: 1px solid var(--t-border) !important;
}

html[data-theme] .dashboard-cat-table-wrapper td{
  border-bottom: 1px solid var(--t-border-soft) !important;
}

/* ---------- 4. card-tag / chip / pill ---------- */
html[data-theme] .card-tag,
html[data-theme] .chip,
html[data-theme] .pill{
  background: color-mix(in srgb, var(--t-surface) 78%, var(--t-accent-soft) 22%) !important;
  color: var(--t-accent) !important;
  border: 1px solid color-mix(in srgb, var(--t-accent) 35%, var(--t-border) 65%) !important;
  border-radius: 999px !important;
}

html[data-theme] .card-tag.weak{
  background: color-mix(in srgb, var(--t-surface) 88%, transparent) !important;
  color: var(--t-muted) !important;
  border-color: var(--t-border-soft) !important;
}

/* ---------- 5. pill-tabs / pill-tabs-sm ---------- */
html[data-theme] .pill-tabs,
html[data-theme] .pill-tabs-sm{
  background: color-mix(in srgb, var(--t-surface) 82%, transparent) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 999px !important;
}

html[data-theme] .pill-tabs .pill,
html[data-theme] .pill-tabs-sm .pill{
  background: transparent !important;
  color: var(--t-muted) !important;
}

html[data-theme] .pill-tabs .pill.active,
html[data-theme] .pill-tabs-sm .pill.active{
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
}

/* ---------- 6. 顶部筛选 topbar-filters ---------- */
html[data-theme] .topbar-filters{
  background: transparent !important;
}

html[data-theme] .topbar-filters .chip,
html[data-theme] .topbar-filters .filter-chip{
  background: color-mix(in srgb, var(--t-surface) 78%, transparent) !important;
  border-color: var(--t-border) !important;
  color: var(--t-fg) !important;
}

html[data-theme] .topbar-filters .chip.active{
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
  border-color: color-mix(in srgb, var(--t-accent) 45%, var(--t-border) 55%) !important;
}

/* 皮肤卡片选中态 */
.skin-theme-item{
  cursor: pointer;
  border: 1px solid var(--t-border, rgba(209,213,219,0.7));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.skin-theme-item:hover{
  transform: translateY(-1px);
}
.skin-theme-item.active{
  border-color: color-mix(in srgb, var(--t-accent, #16a34a) 55%, rgba(209,213,219,0.7) 45%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent, #16a34a) 18%, transparent);
}

/* 默认主题卡片选中态（中性，不走 accent） */
.skin-theme-item[data-theme=""].active{
  border-color: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156,163,175,.25);
}

/* ===========================================================
   ✅ 账单明细视觉优化（仅主题模式生效）
   目标：列表与卡片区分层级，减少“全都一个颜色”的腻感
=========================================================== */
html[data-theme]{
  /* 列表专用的次级表面色：比卡片更贴近背景一点点 */
  --t-list-surface: color-mix(in srgb, var(--t-surface) 72%, var(--t-bg) 28%);
  --t-list-surface-hover: color-mix(in srgb, var(--t-hover) 55%, var(--t-list-surface) 45%);
  --t-list-border: color-mix(in srgb, var(--t-border-soft) 70%, transparent 30%);
  --t-list-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  --t-list-accent: color-mix(in srgb, var(--t-accent) 42%, transparent 58%);
}

/* 日期分组：更像“分组标题条”，而不是一张卡 */
html[data-theme] #transactions-list .trans-date-group{
  background: transparent !important;
  border-bottom: 1px solid var(--t-border-soft) !important;
  padding-bottom: 10px; /* 让分组更清楚 */
}

/* 每条账单行：用 list-surface（更轻），阴影更小 */
html[data-theme] #transactions-list .transaction-row,
html[data-theme] #transactions-list .trans-row{
  background: var(--t-list-surface) !important;
  border: 1px solid var(--t-list-border) !important;
  box-shadow: var(--t-list-shadow) !important;
  border-radius: var(--t-r-md) !important;
}

/* hover：更明确，但不“变色过猛” */
html[data-theme] #transactions-list .transaction-row:hover,
html[data-theme] #transactions-list .trans-row:hover{
  background: var(--t-list-surface-hover) !important;
}

/* 列表专属“左侧细色条”：增强节奏感（不抢主视觉） */
html[data-theme] #transactions-list .transaction-row::before,
html[data-theme] #transactions-list .trans-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--t-list-accent);
  opacity: 0.9;
}

/* 确保伪元素能显示：如果你的 row 不是 relative，加这一句兜底 */
html[data-theme] #transactions-list .transaction-row,
html[data-theme] #transactions-list .trans-row{
  position: relative;
  overflow: hidden; /* 防止 before 溢出 */
}





/* ===========================================================
   ✅ v4.5 Patch：账单明细页（#transactions-list）视觉回归默认皮肤风格
   目标：更克制、更清爽的列表层级（避免大面积粉雾/重阴影/厚容器感）
   仅在主题模式生效：html[data-theme]
=========================================================== */

/* 列表外层容器：回归“轻容器”，减少厚重底色与阴影 */
html[data-theme] #transactions-list{
  /*background: transparent !important;*/
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}

/* 分组头：像默认皮肤的轻条，不做厚卡片 */
html[data-theme] #transactions-list .trans-date-header,
html[data-theme] #transactions-list .trans-date-group{
  background: transparent !important;
  border: 0 !important;
  /*box-shadow: none !important;*/
  padding: 6px 10px 8px !important;
  margin: 10px 0 6px !important;
  color: var(--t-muted) !important;
}

/* 每条账单（你实际是 .trans-item）：回到默认“轻卡片” */
html[data-theme] #transactions-list .trans-item,
html[data-theme] #transactions-list .transaction-row,
html[data-theme] #transactions-list .trans-row{
  background: color-mix(in srgb, var(--t-surface) 86%, var(--t-bg) 14%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: var(--t-fg) !important;
}

/* 去掉之前为了强调做的左侧色条（如果存在） */
html[data-theme] #transactions-list .trans-item::before,
html[data-theme] #transactions-list .transaction-row::before,
html[data-theme] #transactions-list .trans-row::before{
  display: none !important;
  content: none !important;
}

/* 列表内部文字层级：标题更清晰，描述更克制 */
html[data-theme] #transactions-list .trans-item .title,
html[data-theme] #transactions-list .trans-item .trans-title,
html[data-theme] #transactions-list .trans-item .category,
html[data-theme] #transactions-list .trans-item .cat-name{
  color: var(--t-fg) !important;
  font-weight: 700 !important;
}

html[data-theme] #transactions-list .trans-item .desc,
html[data-theme] #transactions-list .trans-item .note,
html[data-theme] #transactions-list .trans-item .merchant,
html[data-theme] #transactions-list .trans-item .sub,
html[data-theme] #transactions-list .trans-item .time{
  color: var(--t-muted) !important;
}

/* 金额区域：保持清晰与对比（不强行改红绿，避免与你原逻辑冲突） */
html[data-theme] #transactions-list .trans-item .amount,
html[data-theme] #transactions-list .trans-item .money,
html[data-theme] #transactions-list .trans-item .price{
  color: var(--t-fg) !important;
  font-weight: 700 !important;
}

/* 右侧统计（支出/收入）小字：降低存在感 */
html[data-theme] #transactions-list .trans-date-header .sum,
html[data-theme] #transactions-list .trans-date-group .sum,
html[data-theme] #transactions-list .trans-date-header,
html[data-theme] #transactions-list .trans-date-group{
  opacity: 0.95 !important;
}



/* ===========================================================
   v4_6：默认主题优先 - 统计分析页（page-stats）视觉优化
   目标：
   - 让「图表卡片 / 表格 / 右侧摘要&AI」层级更清晰
   - 让明细区块更“卡片化”，避免整页同色导致不明显
   - 尽量使用现有变量，不破坏其他页面
=========================================================== */

#page-stats .page-header{
  align-items:center;
  gap:14px;
}

#page-stats .page-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 顶部 select：你这里有内联 style，所以用 !important 抢回来（仅 stats 页） */
#page-stats #stats-tag-select{
  height:34px !important;
  width: 110px;
  padding:0 12px !important;
  border-radius:12px !important;
  /*border:1px solid var(--line) !important;*/
  background: color-mix(in srgb, var(--surface-2) 92%, transparent) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  outline:none !important;
}

#page-stats #stats-tag-select:focus{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-sm) !important;
}

/* 统计页 Tabs：增强层级（不改变你其他页面的 pill-tabs） */
#page-stats .pill-tabs{
  /*border:1px solid var(--line);*/
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-sm);
}

/* 统计页布局卡片：让左/右区块更像“面板” */
#page-stats .stats-layout{
  gap:14px;
}

#page-stats .stats-left .card,
#page-stats .stats-right .card{
  border:1px solid var(--card-border);
  background: var(--card-bg);
  background: rgba(255, 255, 255, 0.96);
}

/* 卡片 header：更像默认主题的“清晰头部” */
#page-stats .card-header{
  padding:12px 14px;
  border-bottom:1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
}

#page-stats .card-title{
  font-weight:800;
  letter-spacing:.2px;
}

#page-stats .card-tag{
  border:1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
  color: var(--text);
}

/* 图表容器：给 chart “底板”，避免跟页面同色融在一起 */
#page-stats .stats-chart-wrapper{
  padding:12px;
  /*margin:12px 14px 14px;*/
  border-radius:16px;
  border:1px dashed color-mix(in srgb, var(--line) 60%, transparent);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

#page-stats .stats-chart-wrapper canvas{
  display:block;
  width:100% !important;
}

/* 分类表格：减少“白茫茫”，增强行层级和 hover */
#page-stats .category-table-wrapper > div[style*="overflow"]{
  padding:0 14px 14px;
}

#page-stats #table-category-stats{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

#page-stats #table-category-stats thead th{
  background: color-mix(in srgb, var(--surface-3) 85%, transparent);
  border-bottom:1px solid var(--line-soft);
  color: var(--text);
  padding:10px 12px;
  font-weight:700;
}

#page-stats #table-category-stats tbody td{
  padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
}

#page-stats #table-category-stats tbody tr:hover{
  background: color-mix(in srgb, var(--primary-soft) 22%, transparent);
}


#page-stats .stats-right strong{
  color: var(--text);
}

/* AI 分析入口卡片：按钮更贴合主题，避免“丑色” */
#page-stats .ai-analysis-entry{
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}

#page-stats .ai-analysis-entry:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#page-stats .ai-analysis-entry-body{
  padding:12px 14px 14px;
}

#page-stats .ai-analysis-entry-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

#page-stats .btn-ai-entry{
  height:32px;
  padding:0 12px;
  border-radius:12px;
}

#page-stats .btn-primary.btn-ai-entry{
  /*background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, #fff), var(--primary));*/
  border:1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  color: #fff;
}

#page-stats .btn-ghost.btn-ai-entry{
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border:1px solid var(--line);
  color: var(--text);
}

#page-stats .btn-ghost.btn-ai-entry:hover{
  background: color-mix(in srgb, var(--primary-soft) 24%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
}

/* 防止“整页同色”导致不明显：给 stats 页面底层一点分区感 */
#page-stats{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--page-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface-3) 40%, transparent) 100%
  );
  border-radius:18px;
}



/* =========================
   AI 账单卡片：默认主题（跟随变量）
   className: bill-card-phone-exact
========================= */
.bill-card-phone-exact{
  display: block;
  margin: 10px 0;
}

.bill-card-phone-exact .ai-bill-card-inner{
  background: var(--bg-card, rgba(255,255,255,0.92));
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.bill-card-phone-exact .ai-bill-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.bill-card-phone-exact .ai-bill-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ai-bill-icon-bg, rgba(255,125,0,0.08));
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.bill-card-phone-exact .ai-bill-icon-svg{
  width: 34px;
  height: 34px;
}

.bill-card-phone-exact .ai-bill-meta{
  flex: 1;
  min-width: 0;
}

.bill-card-phone-exact .ai-bill-title{
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-color, #0f172a);
}

.bill-card-phone-exact .ai-bill-note{
  font-size: 13px;
  margin: 0 0 4px 0;
  color: var(--text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-card-phone-exact .ai-bill-date{
  font-size: 12px;
  margin: 0;
  color: color-mix(in srgb, var(--text-muted, #6b7280) 75%, transparent);
}

.bill-card-phone-exact .ai-bill-amount{
  font-size: 16px;
  font-weight: 800;
  margin-left: 10px;
  white-space: nowrap;
}

.bill-card-phone-exact .ai-bill-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top: 1px solid var(--line, #e5e7eb);
  padding-top: 8px;
}

.bill-card-phone-exact .ai-bill-status{
  background: rgba(82,196,26,0.10);
  color: #2f9e44;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

.bill-card-phone-exact .ai-bill-actions{
  display:flex;
  gap: 8px;
}

.bill-card-phone-exact .ai-bill-action-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  background: color-mix(in srgb, var(--bg-card, #fff) 92%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}

.bill-card-phone-exact .ai-bill-action-btn .svg-icon{
  width: 16px;
  height: 16px;
}

.bill-card-phone-exact .ai-bill-action-danger{
  color: var(--danger-color, #ef4444);
}

/* =========================
   AI 账单卡片：新拟态主题（关键：外凸 + 按钮内凹）
========================= */
html[data-theme="neumorphism"] .bill-card-phone-exact .ai-bill-card-inner{
  background: var(--neo-surface, #eef2f8) !important;
  border: none !important;
  border-radius: 18px;
  box-shadow:
    10px 10px 20px var(--neo-shadow-dark, rgba(163,177,198,0.60)),
    -10px -10px 20px var(--neo-shadow-light, rgba(255,255,255,0.90));
}

html[data-theme="neumorphism"] .bill-card-phone-exact .ai-bill-foot{
  border-top: 1px solid rgba(0,0,0,0.06);
}

html[data-theme="neumorphism"] .bill-card-phone-exact .ai-bill-action-btn{
  border: none !important;
  background: var(--neo-bg, #e9eef6) !important;
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark, rgba(163,177,198,0.60)),
    -6px -6px 12px var(--neo-shadow-light, rgba(255,255,255,0.90));
}

html[data-theme="neumorphism"] .bill-card-phone-exact .ai-bill-action-btn:active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,0.60)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,0.90));
}

.bill-card-phone-exact,
.ai-bill-card-mobile {
  cursor: pointer;
}


/* ===========================================================
   End v4_6
=========================================================== */

/* ===========================
   warm-pink：账单详情卡片 detail-modal-card 适配
   =========================== */
html[data-theme="warm-pink"] .detail-modal-card{
  /* ✅ 兜底：90% 白 + 10% #ffd6e7 近似色 = #fffbfd */
  background-color: #fffbfd !important;
  border: 1px solid rgba(255, 143, 184, 0.26) !important;
  box-shadow: 0 10px 30px rgba(255, 120, 170, 0.16) !important;
  border-radius: 18px !important;
}

/* ✅ 支持 color-mix 的浏览器再用更“跟主题走”的写法 */
@supports (background: color-mix(in srgb, #fff 90%, #ffd6e7 10%)) {
  html[data-theme="warm-pink"] .detail-modal-card{
    background: color-mix(in srgb, #fff 90%, #ffd6e7 10%) !important;
    border: 1px solid color-mix(in srgb, #ff8fb8 26%, transparent) !important;
  }
}

/* 标题/金额区域（如果你卡片里有这类元素） */
html[data-theme="warm-pink"] .detail-modal-card .detail-title,
html[data-theme="warm-pink"] .detail-modal-card .detail-header,
html[data-theme="warm-pink"] .detail-modal-card .detail-amount {
  color: color-mix(in srgb, #2b2b2b 80%, #ff4f93 20%) !important;
}

/* 每行明细（常见：.detail-row/.label/.detail-info-value） */
html[data-theme="warm-pink"] .detail-modal-card .detail-row {
  border-bottom: 1px solid color-mix(in srgb, #ff8fb8 18%, transparent) !important;
}

html[data-theme="warm-pink"] .detail-modal-card .label {
  color: color-mix(in srgb, #666 78%, #ff4f93 22%) !important;
}

html[data-theme="warm-pink"] .detail-modal-card .detail-info-value {
  color: #2b2b2b !important;
}

/* 详情里的 tag / 状态小标签（如报销状态 trans-reimburse-tag） */
html[data-theme="warm-pink"] .detail-modal-card .trans-reimburse-tag,
html[data-theme="warm-pink"] .detail-modal-card .tag,
html[data-theme="warm-pink"] .detail-modal-card .badge {
  background: color-mix(in srgb, #ff4f93 12%, #fff 88%) !important;
  border: 1px solid color-mix(in srgb, #ff4f93 28%, transparent) !important;
  color: #ff2f7e !important;
  border-radius: 999px !important;
}

/* 分割线/空状态符号更柔和 */
html[data-theme="warm-pink"] .detail-modal-card .divider,
html[data-theme="warm-pink"] .detail-modal-card hr {
  border-color: color-mix(in srgb, #ff8fb8 18%, transparent) !important;
}


    /* settings 快捷入口的 VIP 角标 */
  .settings-quick-item-vip .settings-quick-icon { position: relative; }
  .settings-quick-item-vip .vip-badge{
    position:absolute;
    right:-6px; top:-6px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 182, 193, .9);
    color: #7a1230;
    border: 1px solid rgba(255, 120, 170, .35);
    line-height: 1.2;
  }
  
  /* =========================
   WebDAV Modal UI
   ========================= */
.webdav-modal .webdav-tabs{
  display:flex;
  gap:10px;
  padding: 8px 2px 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--t-surface-strong, #fff);
}

.webdav-modal .webdav-tab{
  border: 1px solid var(--t-border-soft, rgba(0,0,0,0.08));
  background: color-mix(in srgb, var(--t-surface-strong, #fff) 86%, transparent);
  color: var(--t-fg, #111);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.webdav-modal .webdav-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.webdav-modal .webdav-tab.active{
  border-color: color-mix(in srgb, var(--t-primary, #3b82f6) 42%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--t-primary, #3b82f6) 18%, transparent);
}

.webdav-modal .webdav-panel{
  display:none;
  margin-top: 0;
}

.webdav-modal .webdav-panel.active{
  display:block;
}

.webdav-modal .webdav-actions{
  display:flex;
  gap:10px;
  /*flex-wrap: wrap;*/
}

.webdav-modal .webdav-files-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.webdav-modal .webdav-tip-inline{
  margin-top:8px;
}

.webdav-modal .webdav-status{
  margin-top:10px;
  min-height: 18px;
}

.webdav-modal .webdav-backup-list{
  margin-top:10px;
}

/* checkbox 行内排版抽到 class，避免内联 */
.webdav-modal .webdav-checkline{
  display:flex;
  align-items:center;
  gap:8px;
}

/* 文件行样式（你列表渲染用到 webdav-file-row 时） */
.webdav-modal .webdav-file-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in srgb, var(--t-border-soft, rgba(0,0,0,.08)) 80%, transparent);
}

.webdav-modal .webdav-file-row:last-child{
  border-bottom: none;
}

/* ========= WebDAV Clean UI ========= */
.webdav-clean { padding: 16px 16px 14px; }
.webdav-clean-header { margin-bottom: 6px; }

.webdav-mini-desc{
  font-size: 13px;
  opacity: .75;
  line-height: 1.45;
  margin: 6px 0 10px;
}

.webdav-guide{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.webdav-guide > summary{
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.webdav-guide-list{
  margin: 10px 0 0 18px;
  padding: 0;
  line-height: 1.6;
  font-size: 13px;
  opacity: .85;
}
.webdav-guide code{ padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.06); }

.webdav-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-top: 8px;
}
.webdav-field label{
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.webdav-field-full{ grid-column: 1 / -1; }

.webdav-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
}
.webdav-input-wrap input{
  width: 100%;
  padding-right: 44px;
}

.webdav-eye{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  border-radius: 10px;
  height: 30px;
  min-width: 34px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.webdav-eye:hover{ background: rgba(255,255,255,.9); }

.webdav-hint{
  font-size: 12px;
  opacity: .70;
  margin-top: 6px;
  line-height: 1.45;
}

.webdav-seg{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.webdav-seg-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.webdav-seg-item input{ margin: 0; }

.webdav-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
}

.webdav-actions-clean{
  display:flex;
  gap:10px;
  margin-top: 14px;
  justify-content: flex-end;
}

/* 小屏时自动单列 */
@media (max-width: 900px){
  .webdav-grid{ grid-template-columns: 1fr; }
}

/* ===== WebDAV 表单质感增强（叠加版） ===== */
.webdav-clean .webdav-field{
  padding: 6px 0;
}

.webdav-clean .webdav-field label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 8px;
  color: rgba(0,0,0,.82);
}

.webdav-clean .webdav-hint{
  margin-top: 7px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  opacity: 1;
}

/* 输入框统一风格 */
.webdav-clean input[type="text"],
.webdav-clean input[type="password"],
.webdav-clean input[type="url"]{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  padding: 0 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.webdav-clean input::placeholder{
  color: rgba(0,0,0,.35);
}

.webdav-clean input:focus{
  outline: none;
  border-color: rgba(0,0,0,.22);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* 让带眼睛的输入框更融合 */
.webdav-clean .webdav-input-wrap input{
  padding-right: 52px;
}

/* 眼睛按钮更像“输入框内图标” */
.webdav-clean .webdav-eye{
  right: 10px;
  height: 32px;
  min-width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: background .15s ease, transform .05s ease;
}
.webdav-clean .webdav-eye:hover{
  background: rgba(255,255,255,.95);
}
.webdav-clean .webdav-eye:active{
  transform: translateY(-50%) scale(.98);
}

.webdav-clean .webdav-guide{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.08);
}

.webdav-clean .webdav-guide > summary{
  font-weight: 700;
  font-size: 13px;
  opacity: .9;
  list-style: none;
}
.webdav-clean .webdav-guide > summary::-webkit-details-marker{ display:none; }

.webdav-clean .webdav-guide > summary:before{
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  transform: translateY(-1px);
  opacity: .55;
}
.webdav-clean .webdav-guide[open] > summary:before{
  content: "▼";
}

.webdav-clean .webdav-seg{
  gap: 10px;
}

.webdav-clean .webdav-seg-item{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
}

.webdav-clean .webdav-seg-item input{
  width: 16px;
  height: 16px;
}

/* 选中更明显（不指定主题色，沿用系统蓝） */
.webdav-clean .webdav-seg-item:has(input:checked){
  border-color: rgba(0,0,0,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(0,0,0,.05);
}
.webdav-clean .webdav-check{
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
}
.webdav-clean .webdav-check input{
  width: 16px;
  height: 16px;
}


.webdav-clean .webdav-actions-clean .data-action-btn{
  height: 42px;
  border-radius: 12px;
  padding: 0 16px;
  white-space: nowrap; /* ✅ 不折行 */
}

/* 你原本主按钮 class 可能就是 data-action-btn；这里不改变颜色体系，只增强质感 */
.webdav-clean .webdav-actions-clean .data-action-btn:not(.secondary){
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.webdav-file-row-clean{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.webdav-file-left{ min-width:0; }
.webdav-file-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.webdav-file-name{
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 520px;
}

.webdav-file-meta{
  opacity:.70;
  font-size:12px;
  margin-top:3px;
  line-height:1.3;
}

.webdav-file-actions{ flex:0 0 auto; display:flex; gap:8px; }

.webdav-badge-auto{
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  opacity:.85;
  white-space:nowrap;
}

/* 缩略图：小小的、默认不抢视觉 */
.receipt-thumb{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  cursor: zoom-in;
}

/* 大图弹窗 */
.receipt-viewer-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.receipt-viewer-mask{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.receipt-viewer-panel{
  position: relative;
  z-index: 1;
  max-width: min(92vw, 980px);
  max-height: 86vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 10px;
}

#receipt-viewer-img{
  display: block;
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 12px;
}

.receipt-viewer-close{
  margin-top: 10px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

/* =========================
   账单截图缩略图（创建时间下方）
   ========================= */

/* ✅ 缩略图：居中 + 视觉更像“卡片内的一块” */
.detail-receipt-thumb-wrap{
  display:flex;
  justify-content:center;   /* ✅ 居中 */
  align-items:center;
  width:100%;
  margin: 14px 0 2px 0;
}

.receipt-thumb{
  display:block;
  max-width: 220px;         /* ✅ 缩略图不要太大 */
  width: auto;
  max-height: 130px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.receipt-thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.detail-receipt-thumb-wrap .receipt-thumb:active,
#detail-receipt-thumb:active {
  transform: translateY(0px) scale(0.99);
}


/* =========================
   账单截图弹窗（点击遮罩关闭）
   你 HTML 里已有 receipt-viewer-modal
   ========================= */

/* ✅ 大图弹窗：遮罩必须盖在“账单详情弹窗”之上 */
.receipt-viewer-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;          /* ✅ 确保高于详情弹窗 */
  display: none;
  align-items: center;
  justify-content: center;
}


.receipt-viewer-mask{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.receipt-viewer-panel{
  position: relative;
  z-index: 1;
  max-width: min(92vw, 820px);
  max-height: 86vh;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}


#receipt-viewer-img{
  display:block;
  max-width: 100%;
  max-height: calc(86vh - 56px);
  border-radius: 14px;
}

.receipt-viewer-close{
  margin-top: 10px;
  width: 100%;
}

.receipt-viewer-close:hover {
  background: rgba(17, 24, 39, 0.07);
}

.receipt-viewer-close:active {
  transform: scale(0.99);
}


/* =========================
   移动端适配（避免太大）
   ========================= */
@media (max-width: 520px) {
  .detail-receipt-thumb-wrap .receipt-thumb,
  #detail-receipt-thumb {
    width: 96px;
    height: 96px;
    border-radius: 12px;
  }

  .receipt-viewer-panel {
    width: 94vw;
    padding: 12px;
    border-radius: 16px;
  }

  #receipt-viewer-img {
    border-radius: 12px;
  }
}

html[data-theme="warm-pink"] .detail-receipt-thumb-wrap .receipt-thumb,
html[data-theme="warm-pink"] #detail-receipt-thumb {
  border-color: color-mix(in srgb, #ff8fb8 25%, rgba(17,24,39,0.10));
  box-shadow: 0 10px 26px rgb(255 120 170 / 14%);
}

html[data-theme="warm-pink"] .receipt-viewer-panel {
  border-color: color-mix(in srgb, #ff8fb8 18%, rgba(255,255,255,0.6));
}

/* 让 modal 作为定位容器（如果你已有可忽略） */
#receipt-viewer-modal { position: fixed; }

/* 右上角悬浮 X 关闭按钮 */
#receipt-viewer-modal .receipt-viewer-close-x{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #111 55%, transparent);
  color: #fff;

  font-size: 26px;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 12px 30px rgb(0 0 0 / 25%);
  backdrop-filter: blur(8px);

  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

#receipt-viewer-modal .receipt-viewer-close-x:hover{
  transform: scale(1.06);
  background: color-mix(in srgb, #111 68%, transparent);
}

#receipt-viewer-modal .receipt-viewer-close-x:active{
  transform: scale(0.98);
  opacity: 0.92;
}

#receipt-viewer-modal .receipt-viewer-close-x:focus{
  outline: none;
}

#receipt-viewer-modal .receipt-viewer-close-x:focus-visible{
  outline: 2px solid color-mix(in srgb, #fff 55%, transparent);
  outline-offset: 2px;
}

.detail-receipt-thumb-wrap .receipt-load-btn{
  border: 1px solid color-mix(in srgb, #111 12%, transparent);
  background: color-mix(in srgb, #fff 86%, #111 14%);
  color: #111;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.detail-receipt-thumb-wrap .receipt-load-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
.detail-receipt-thumb-wrap .receipt-load-btn:disabled{
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

#entry-receipt-tip{
    display: none;
}

/* =========================
   账单截图（VIP）上传控件美化
========================= */
#entry-receipt-file{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--t-border-soft, rgba(0,0,0,.14)) 70%, transparent);
  background: color-mix(in srgb, var(--t-surface-strong, #fff) 92%, transparent);
  color: var(--t-fg, #111);
  cursor: pointer;
}

/* Chrome / Edge / 新版 Safari */
#entry-receipt-file::file-selector-button{
  margin-right: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--t-border-soft, rgba(0,0,0,.14)) 70%, transparent);
  background: color-mix(in srgb, var(--t-primary, #3b82f6) 14%, transparent);
  color: var(--t-fg, #111);
  font-weight: 600;
  cursor: pointer;
}

/* hover / active 手感 */
#entry-receipt-file:hover{
  border-color: color-mix(in srgb, var(--t-primary, #3b82f6) 35%, transparent);
}
#entry-receipt-file::file-selector-button:hover{
  border-color: color-mix(in srgb, var(--t-primary, #3b82f6) 45%, transparent);
  background: color-mix(in srgb, var(--t-primary, #3b82f6) 18%, transparent);
}
#entry-receipt-file::file-selector-button:active{
  transform: translateY(1px);
}

/* 兼容旧版 Safari：用 ::-webkit-file-upload-button */
#entry-receipt-file::-webkit-file-upload-button{
  margin-right: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--t-border-soft, rgba(0,0,0,.14)) 70%, transparent);
  background: color-mix(in srgb, var(--t-primary, #3b82f6) 14%, transparent);
  color: var(--t-fg, #111);
  font-weight: 600;
  cursor: pointer;
}

#entry-receipt-preview img{
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--t-border-soft, rgba(0,0,0,.14)) 70%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

#entry-receipt-remove.btn-secondary{
  border-radius: 10px;
  padding: 8px 12px;
}

/* ✅ 账单截图（VIP）——整体区块更舒服 */
#entry-receipt-wrap{
  padding-top: 2px;
}

/* ✅ 文件选择输入框（整条） */
#entry-receipt-file{
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 12px 12px !important;
  border-radius: 14px !important;

  /* 更像“上传组件”的边框 */
  border: 1px dashed color-mix(in srgb, var(--t-border-soft, #e5e7eb) 70%, var(--t-brand, #ff6aa2) 30%) !important;

  /*background: color-mix(in srgb, var(--t-surface, #fff) 92%, var(--t-brand, #ff6aa2) 8%) !important;*/
  background: radial-gradient(circle at 0 0, rgba(204, 251, 241, 0.95), transparent 60%), rgba(255, 255, 255, 0.96);
  color: var(--t-fg, #111827) !important;

  cursor: pointer !important;
  outline: none !important;
}

/* ✅ 左侧“选择文件”按钮 */
#entry-receipt-file::file-selector-button{
  border: 0 !important;
  padding: 10px 14px !important;
  margin-right: 12px !important;

  border-radius: 12px !important;
  background: var(--t-brand, #ff6aa2) !important;
  color: #fff !important;

  font-weight: 700 !important;
  cursor: pointer !important;
}

/* hover/active 交互 */
#entry-receipt-file:hover{
  border-color: var(--t-brand, #ff6aa2) !important;
  box-shadow: 0 8px 20px rgb(255 106 162 / 14%) !important;
}
#entry-receipt-file::file-selector-button:hover{
  filter: brightness(1.05) !important;
}
#entry-receipt-file:active::file-selector-button{
  transform: translateY(1px) !important;
}

.entry-more{
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: grey;
}

.debit_account{
    margin-top: 10px;
}

.debit_reimbursement{
     margin-top: 10px;
}


/* ✅ 记一笔：快捷标签区 */
    .entry-tag-suggest{
      display:flex;
      flex-wrap:wrap;
      gap:2px;
      margin-top:5px;
    }
    
    .entry-tag-suggest .tag-suggest-chip{
      border: 1px solid var(--t-border-soft, #e5e7eb);
      background: color-mix(in srgb, var(--t-surface-strong, #f3f4f6) 92%, transparent);
      color: var(--t-fg, #111827);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      transition: transform .05s ease, filter .15s ease;
    }
    
    .entry-tag-suggest .tag-suggest-chip:hover{
      filter: brightness(.98);
    }
    
    .entry-tag-suggest .tag-suggest-chip:active{
      transform: translateY(1px);
    }
    
    .entry-tag-suggest .tag-suggest-chip.is-active{
      border-color: color-mix(in srgb, var(--t-fg, #111827) 45%, var(--t-border-soft, #e5e7eb));
      background: color-mix(in srgb, var(--t-fg, #111827) 10%, var(--t-surface-strong, #f3f4f6));
    }
    
    /* 快捷标签：默认两行高度，支持展开 */
    #entry-tag-suggest {
      max-height: 76px; /* 约2行(看你chip高度微调) */
      overflow: hidden;
      position: relative;
      transition: max-height .2s ease;
    }
    
    /* 展开态 */
    #entry-tag-suggest.is-expand {
      max-height: 260px; /* 展开最大高度 */
      overflow: auto;
    }
    
    /* 右下角渐隐提示（可选） */
    #entry-tag-suggest:not(.is-expand)::after{
      content:"";
      position:absolute; left:0; right:0; bottom:0;
      height:22px;
      pointer-events:none;
      background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    }
    
    /* 展开按钮 */
    .tag-suggest-toggle{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.85);
      cursor:pointer;
      user-select:none;
    }
    
    /* 分组栏 */
    #entry-tag-suggest .tag-group-bar{
      display:flex;
      gap:8px;
      flex-wrap: nowrap;
      overflow:auto;
      padding: 5px 2px 5px;
    }
    #entry-tag-suggest .tag-group-pill{
      flex: 0 0 auto;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.85);
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      cursor: pointer;
      user-select:none;
    }
    #entry-tag-suggest .tag-group-pill.is-active{
      border-color: rgba(0,0,0,.18);
      font-weight: 700;
    }
    
    /* 标签面板 */
    #entry-tag-suggest .tag-group-panel{
      display:flex;
      flex-wrap: wrap;
      gap:8px;
      padding: 2px;
    }
    
    .data-card-header .vip-badge{
      margin-left: 8px;
      flex: 0 0 auto;
    }
    
    /* ========== VIP Upgrade Modal ========== */
    .vip-upgrade-modal { max-width: 760px; }
    .vip-upgrade-card { overflow: hidden; }
    
    .vip-upgrade-hero{
      display:flex; flex-direction:column; gap:8px;
      padding: 14px 14px 12px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--t-surface-strong) 88%, transparent);
      border: 1px solid var(--t-border-soft);
    }
    
    .vip-upgrade-badge{
      width: fit-content;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: .5px;
      background: color-mix(in srgb, #ffcc00 20%, transparent);
      border: 1px solid color-mix(in srgb, #ffcc00 38%, transparent);
    }
    
    .vip-upgrade-title{ font-size: 16px; font-weight: 800; }
    .vip-upgrade-sub{ opacity: .86; font-size: 13px; }
    
    .vip-compare{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    
    .vip-compare-col{
      border: 1px solid var(--t-border-soft);
      border-radius: 14px;
      padding: 12px;
      background: color-mix(in srgb, var(--t-surface-strong) 94%, transparent);
    }
    
    .vip-compare-col-vip{
      border-color: color-mix(in srgb, #ffcc00 28%, var(--t-border-soft));
      background: color-mix(in srgb, #ffcc00 10%, var(--t-surface-strong));
    }
    
    .vip-compare-head{
      font-weight: 800;
      margin-bottom: 8px;
    }
    
    .vip-compare-list{
      margin: 0;
      padding-left: 18px;
      line-height: 1.75;
      font-size: 13px;
      opacity: .92;
    }
    
    .vip-upgrade-actions{
      display:flex;
      gap: 10px;
      margin-top: 14px;
    }
    .vip-upgrade-actions .data-action-btn{ flex: 1; }



    /* ============ stats-right：本期摘要 KPI 卡片化 ============ */
    #page-stats .stats-summary-body{
      padding:12px 14px 14px;
    }
    
    #page-stats .stats-summary-kpis{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    
    @media (min-width: 980px){
      #page-stats .stats-summary-kpis{
        grid-template-columns: 1fr;
      }
    }
    
    /* 单个 KPI 小卡片 */
    #page-stats .stats-kpi{
      border-radius:14px;
      border:1px solid color-mix(in srgb, var(--line-soft) 75%, transparent);
      background: color-mix(in srgb, var(--surface-2) 92%, transparent);
      padding:10px 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }
    
    #page-stats .stats-kpi-top{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color: var(--text-muted);
      margin-bottom:6px;
    }
    
    #page-stats .stats-kpi-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: color-mix(in srgb, var(--primary) 55%, #fff);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-soft) 20%, transparent);
    }
    
    #page-stats .stats-kpi-val{
      font-size:18px;
      font-weight:900;
      letter-spacing:.2px;
      color: var(--text);
      line-height:1.15;
    }
    
    /* 三种语义（不硬编码具体颜色，跟随主题变量混合） */
    #page-stats .stats-kpi.expense .stats-kpi-dot{
      background: color-mix(in srgb, #ef4444 55%, #fff);
      box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 16%, transparent);
    }
    #page-stats .stats-kpi.income .stats-kpi-dot{
      background: color-mix(in srgb, #10b981 55%, #fff);
      box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 16%, transparent);
    }
    #page-stats .stats-kpi.net .stats-kpi-dot{
      background: color-mix(in srgb, var(--primary) 70%, #fff);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
    }
    
    #page-stats .stats-summary-tip{
      margin-top:10px;
      font-size:11px;
      color: var(--text-muted);
      padding-top:10px;
      border-top:1px dashed color-mix(in srgb, var(--line) 60%, transparent);
    }
    
    /* =========================
   Stats：本期摘要（图二风格）
   ========================= */
    #page-stats .stats-right .card{
      padding: 12px 14px; /* 保持你原 card 风格 */
    }
    
    #page-stats .stats-summary{
      margin-top: 6px;
    }
    
    #page-stats .stats-summary-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    
    /* 宽屏两列：支出/收入并排，结余占整行 */
    @media (min-width: 520px){
      #page-stats .stats-summary-grid{
        grid-template-columns: 1fr 1fr;
      }
      #page-stats .stats-summary-grid .sum-tile.balance{
        grid-column: 1 / -1;
      }
    }
    
    #page-stats .sum-tile{
      border-radius: 16px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(209, 213, 219, 0.85);
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }
    
    #page-stats .sum-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    
    #page-stats .sum-label{
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 700;
    }
    
    #page-stats .sum-chip{
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      color: #333;
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(209, 213, 219, 0.85);
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      white-space: nowrap;
    }
    
    #page-stats .sum-value{
      font-size: 24px;
      font-weight: 900;
      letter-spacing: .2px;
      color: var(--text);
      line-height: 1.15;
    }
    
    /* 三种彩色底（参考图二：淡彩色块 + 清晰边框） */
    #page-stats .sum-tile.expense{
      background: linear-gradient(180deg, rgba(255, 228, 230, 0.85), rgba(255,255,255,0.65));
      border-color: rgba(251, 113, 133, 0.45);
    }
    #page-stats .sum-tile.income{
      background: linear-gradient(180deg, rgba(220, 252, 231, 0.85), rgba(255,255,255,0.65));
      border-color: rgba(34, 197, 94, 0.35);
    }
    #page-stats .sum-tile.balance{
      background: linear-gradient(180deg, rgba(219, 234, 254, 0.9), rgba(255,255,255,0.65));
      border-color: rgba(59, 130, 246, 0.35);
    }
    
    /* 底部提示更“组件化” */
    #page-stats .sum-tip{
      margin-top: 10px;
      padding-top: 10px;
      font-size: 11px;
      color: var(--text-muted);
      border-top: 1px dashed rgba(209, 213, 219, 0.9);
    }
    
    /* =========================
   资产趋势卡（资产页）
   ========================= */
    #page-assets .asset-trend-card{
      margin-top: 12px;
      padding: 14px;
    }
    
    #page-assets .asset-trend-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    
    #page-assets .asset-trend-h1{
      font-size: 16px;
      font-weight: 900;
      color: var(--text);
      line-height: 1.2;
    }
    #page-assets .asset-trend-sub{
      margin-top: 2px;
      font-size: 12px;
      color: var(--text-muted);
    }
    
    #page-assets .asset-trend-ranges{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    
    /* 3个 KPI */
    #page-assets .asset-trend-kpis{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 10px 0 12px;
    }
    
    @media (min-width: 720px){
      #page-assets .asset-trend-kpis{
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
    
    #page-assets .trend-kpi{
      border-radius: 16px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(209, 213, 219, 0.85);
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }
    
    #page-assets .trend-kpi-label{
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 800;
    }
    #page-assets .trend-kpi-value{
      margin-top: 6px;
      font-size: 20px;
      font-weight: 950;
      color: var(--text);
      line-height: 1.15;
    }
    #page-assets .trend-kpi-mini{
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }
    
    /* 图表区：两块卡片 */
    #page-assets .asset-trend-charts{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }
    
    @media (min-width: 900px){
      #page-assets .asset-trend-charts{
        grid-template-columns: 1fr 1fr;
      }
    }
    
    #page-assets .trend-chart{
      border-radius: 18px;
      padding: 12px 12px 10px;
      border: 1px solid rgba(209, 213, 219, 0.85);
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    }
    
    #page-assets .trend-chart-title{
      font-size: 13px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 8px;
    }
    
    #page-assets .trend-chart-canvas{
      height: 220px;
      position: relative;
    }
    
    /* 列表 */
    #page-assets .asset-trend-table{
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(209, 213, 219, 0.75);
      background: rgba(255,255,255,0.55);
    }
    
    #page-assets .asset-trend-table-head{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 10px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 900;
      color: var(--text-muted);
      background: rgba(255,255,255,0.75);
      border-bottom: 1px solid rgba(209, 213, 219, 0.65);
    }
    
    #page-assets .asset-trend-table-body{
      max-height: 240px;
      overflow: auto;
    }
    
    #page-assets .trend-row{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 10px;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--text);
      border-bottom: 1px solid rgba(209, 213, 219, 0.45);
    }
    
    #page-assets .trend-row:last-child{
      border-bottom: none;
    }
    
    #page-assets .cell-right{
      text-align: right;
    }
    
    #page-assets .trend-delta.pos{
      font-weight: 900;
    }
    #page-assets .trend-delta.neg{
      font-weight: 900;
    }
    
    /* =========================
   资产页：趋势/账户 面板切换
   ========================= */
    #page-assets .asset-list-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    
    #page-assets .asset-view-tabs{
      display:flex;
      gap: 8px;
      margin-left: auto;
    }
    
    /* 让 tabs 看起来像“右侧切换”，不抢 filters 风头 */
    #page-assets .asset-view-tabs .chip{
      padding: 8px 12px;
      border-radius: 999px;
    }
    
    /* 面板隐藏 */
    .is-hidden{
      display:none !important;
    }
    
    /* =========================
   资产页：账户/趋势 胶囊分段切换
   ========================= */
   /* =========================
   资产页：账户/趋势 胶囊分段切换（增强对比度版）
   ========================= */
    #page-assets #asset-view-tabs{
      display:inline-flex;
      align-items:center;
      gap: 0;
      padding: 4px;
      border-radius: 999px;
    
      /* 外壳不要白：用浅灰 + 边框拉开层次 */
      background: color-mix(in srgb, var(--surface-2) 72%, #e5e7eb);
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }
    
    /* 只影响这组按钮，覆盖你全局 chip */
    #page-assets #asset-view-tabs .chip{
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    
      border-radius: 999px;
      padding: 9px 16px;
      min-width: 76px;
    
      font-weight: 900;
      font-size: 13px;
      line-height: 1;
      color: color-mix(in srgb, var(--text) 65%, #6b7280);
    
      cursor: pointer;          /* ✅ hover 时显示手型 */
      user-select: none;
      transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
    }
    
    /* hover：未选中也给一点“可点”的反馈 */
    #page-assets #asset-view-tabs .chip:hover{
      background: rgba(0,0,0,0.04) !important;
      transform: translateY(-1px);
    }
    
    /* active：用主色淡底 + 明显阴影，确保“看得见” */
    #page-assets #asset-view-tabs .chip.active{
      background: color-mix(in srgb, var(--primary) 18%, #ffffff) !important;
      border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
      color: var(--text) !important;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
    }
    
    /* active hover：再加强一点 */
    #page-assets #asset-view-tabs .chip.active:hover{
      background: color-mix(in srgb, var(--primary) 24%, #ffffff) !important;
    }
    
    /* 点击手感 */
    #page-assets #asset-view-tabs .chip:active{
      transform: translateY(0);
    }
    
    .is-hidden{ display:none !important; }
    
    /* 资产页 header：左 tabs / 中 title / 右 filters */
    #page-assets .asset-list-header{
      display:flex;
      align-items:center;
      gap: 12px;
      flex-wrap: wrap;           /* 宽度不够时允许换行 */
    }
    
    /* 左侧：固定在最左，不被挤走 */
    #page-assets #asset-view-tabs{
      order: 1;
      margin-right: 6px;
    }
    
    /* 中间标题：占剩余空间，把右侧顶到最右 */
    #page-assets #asset-header-title-wrap{
      order: 2;
      flex: 1 1 auto;            /* ✅ 关键：自动占位 */
      min-width: 180px;          /* 防止太窄挤压 */
      display:flex;
      align-items: baseline;
      gap: 10px;
    }
    
    /* 右侧 filters：靠右 */
    #page-assets #asset-list-filters{
      order: 3;
      margin-left: auto;         /* ✅ 关键：推到最右 */
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    
    #page-assets #networth-range-tabs .chip{ cursor: pointer; }
    
    /* =========================
   趋势卡：近3个月/6个月/1年 胶囊分段切换
   ========================= */
    #page-assets #networth-range-tabs{
      display:inline-flex;
      align-items:center;
      gap: 0;
      padding: 4px;
      border-radius: 999px;
    
      /* 外壳 */
      background: color-mix(in srgb, var(--surface-2) 72%, #e5e7eb);
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }
    
    /* 覆盖这组内部 chip，避免被全局 chip 干扰 */
    #page-assets #networth-range-tabs .chip{
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    
      border-radius: 999px;
      padding: 8px 14px;
      min-width: 78px;
    
      font-weight: 900;
      font-size: 12.5px;
      line-height: 1;
      color: color-mix(in srgb, var(--text) 65%, #6b7280);
    
      cursor: pointer;              /* ✅ 鼠标手型 */
      user-select: none;
      transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
    }
    
    /* hover：明显反馈 */
    #page-assets #networth-range-tabs .chip:hover{
      background: rgba(0,0,0,0.04) !important;
      transform: translateY(-1px);
    }
    
    /* active：选中态清晰可见 */
    #page-assets #networth-range-tabs .chip.active{
      background: color-mix(in srgb, var(--primary) 22%, #ffffff) !important;
      border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
      color: var(--text) !important;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
    }
    
    /* active hover：再强调一点 */
    #page-assets #networth-range-tabs .chip.active:hover{
      background: color-mix(in srgb, var(--primary) 28%, #ffffff) !important;
    }
    
    /* 点击回弹 */
    #page-assets #networth-range-tabs .chip:active{
      transform: translateY(0);
    }
    
    #page-assets #networth-range-tabs .chip.active{
      background: color-mix(in srgb, var(--primary) 35%, #ffffff) !important;
    }
    #page-assets #networth-range-tabs .chip.active:hover{
      background: color-mix(in srgb, var(--primary) 42%, #ffffff) !important;
    }
    
    /* =========================
   Mine：会员信息卡
   ========================= */
    #page-mine .mine-vip-card{
      display:flex;
      align-items:stretch;
      justify-content:space-between;
      gap: 14px;
      padding: 14px;
    }
    
    #page-mine .mine-vip-left{
      flex: 1 1 auto;
      min-width: 240px;
    }
    
    #page-mine .mine-vip-title-row{
      display:flex;
      align-items:center;
      gap: 10px;
      margin-bottom: 6px;
    }
    
    #page-mine .mine-vip-title{
      font-size: 15px;
      font-weight: 950;
      color: var(--text);
    }
    
    #page-mine .mine-vip-badge{
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: color-mix(in srgb, var(--surface-2) 75%, #fff);
      color: color-mix(in srgb, var(--text) 75%, var(--text-muted));
      white-space: nowrap;
    }
    
    #page-mine .mine-vip-desc{
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.45;
    }
    
    #page-mine .mine-vip-meta{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    
    #page-mine .mine-vip-meta-item{
      display:flex;
      align-items:baseline;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
      background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    }
    
    #page-mine .mine-vip-meta-item .k{
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 800;
    }
    
    #page-mine .mine-vip-meta-item .v{
      font-size: 12px;
      color: var(--text);
      font-weight: 900;
    }
    
    #page-mine .mine-vip-right{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:center;
      gap: 8px;
      flex: 0 0 auto;
    }
    
    #page-mine .mine-vip-cta{
      padding: 10px 14px;
      border-radius: 14px;
      font-weight: 950;
      cursor: pointer;
    }
    
    #page-mine .mine-vip-link{
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 70%, var(--text-muted));
      cursor: pointer;
      user-select: none;
    }
    
    #page-mine .mine-vip-link:hover{
      text-decoration: underline;
    }
    
    /* =========================
   Mine：极简会员信息卡
   ========================= */
    #page-mine .mine-vip-card{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    
    #page-mine .mine-vip-simple-left{
      display:flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    
    #page-mine .mine-vip-simple-item{
      display:flex;
      gap: 8px;
      align-items:baseline;
    }
    
    #page-mine .mine-vip-simple-item .label{
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 700;
    }
    
    #page-mine .mine-vip-simple-item .value{
      font-size: 14px;
      font-weight: 900;
      color: var(--text);
    }
    
    #page-mine .mine-vip-simple-right .mine-vip-cta{
      padding: 8px 14px;
      border-radius: 12px;
      font-weight: 900;
      cursor: pointer;
    }
    
    
    
 /* =========================================================
   Theme: sky-mint（你当前背景保留不动）
   ✅ 只修复：胶囊按钮（chip/tab/pill/seg/filter）选中/未选中视觉
   ========================================================= */

/* =========================================================
   Theme: sky-mint（注册页图二 · 1:1 背景复刻）
   ========================================================= */
html[data-theme="sky-mint"]{
  /* ===== 注册页同款基础色 ===== */
  --bg0: #F7F9FF;
  --bg1: #F5F8FF;

  /* 🔥 核心：直接把 t-bg 设为注册页那条渐变（不动） */
  --t-bg:
    radial-gradient(1000px 700px at 12% 18%, rgba(91,124,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 88% 20%, rgba(122,167,255,.16), transparent 62%),
    radial-gradient(1100px 760px at 50% 96%, rgba(34,197,94,.10), transparent 64%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;

  /* 防止 fallback 介入 */
  --bg-color: transparent;

  /* ===== 其余 UI 变量（保持注册页观感） ===== */
  --primary-color: #6A86FF;
  --primary-soft: rgba(106,134,255,0.14);

  --t-accent: var(--primary-color) !important;
  --t-accent-soft: var(--primary-soft) !important;

  --t-hover: color-mix(in srgb, rgba(106,134,255,.18) 40%, var(--t-surface) 60%);
  --t-active: color-mix(in srgb, rgba(106,134,255,.26) 55%, var(--t-surface) 45%);

  --panel-bg: rgba(255,255,255,0.78);
  --panel-bg-strong: rgba(255,255,255,0.92);
  --panel-border: rgba(15,23,42,0.08);

  --text-color: #0f172a;
  --text-muted: rgba(15,23,42,0.55);

  --shadow-soft: 0 18px 50px rgba(15,23,42,0.08);
  --shadow-strong: 0 22px 70px rgba(15,23,42,0.12);

  /* （保留你原本按钮变量，不强改） */
  --sky-accent-grad: linear-gradient(135deg, rgba(106,134,255,.92), rgba(139,92,246,.62));
  --sky-accent-border: rgba(106,134,255,.28);
  --sky-accent-ring: rgba(106,134,255,.22);
  --sky-accent-shadow: 0 14px 30px rgba(106,134,255,.16);

  --sky-btn-bg: rgba(106,134,255,.14);
  --sky-btn-bg2: rgba(255,255,255,.55);
  --sky-btn-border: rgba(106,134,255,.26);
  --sky-btn-text: rgba(36,49,84,.92);
  --sky-btn-shadow: 0 10px 22px rgba(30,41,59,.08);
  --sky-btn-ring: rgba(106,134,255,.18);

  /* ✅ 新增：专门给“胶囊 chip/tabs”用的一套玻璃变量（解决反直觉） */
  --sky-chip-bg: rgba(255,255,255,.52);             /* 未选中：微凸玻璃 */
  --sky-chip-border: rgba(15,23,42,.08);
  --sky-chip-text: rgba(36,49,84,.74);
  --sky-chip-shadow: 0 6px 14px rgba(30,41,59,.06);
  --sky-chip-inset: 0 1px 0 rgba(255,255,255,.78) inset;

  --sky-chip-bg-hover: rgba(255,255,255,.64);
  --sky-chip-border-hover: rgba(106,134,255,.18);
  --sky-chip-text-hover: rgba(36,49,84,.86);

  --sky-chip-bg-active: rgba(255,255,255,.88);      /* 选中：更亮更凸 */
  --sky-chip-border-active: rgba(106,134,255,.36);
  --sky-chip-text-active: rgba(36,49,84,.96);
  --sky-chip-shadow-active:
    0 12px 24px rgba(30,41,59,.10),
    0 1px 0 rgba(255,255,255,.70) inset;
}

/* =========================================================
   ✅ 1) 主按钮（保留你“淡雾按钮”风格）
   ❗注意：这里不再包含 .chip.active/.tab.active，避免把 tabs 当按钮涂重
   ========================================================= */
html[data-theme="sky-mint"] :where(
  .btn-primary, .pc-btn-primary, .hbtn-primary,
  .btn-accent,
  button.primary, a.primary
){
  background:
    linear-gradient(180deg, var(--sky-btn-bg2), rgba(255,255,255,.25)),
    linear-gradient(135deg, rgba(106,134,255,.16), rgba(139,92,246,.08)) !important;
  border: 1px solid var(--sky-btn-border) !important;
  color: var(--sky-btn-text) !important;
  box-shadow: var(--sky-btn-shadow), 0 1px 0 rgba(255,255,255,.55) inset !important;
  filter: saturate(.88);
}

html[data-theme="sky-mint"] :where(
  .btn-primary, .pc-btn-primary, .hbtn-primary,
  .btn-accent,
  button.primary, a.primary
):hover{
  border-color: rgba(106,134,255,.34) !important;
  box-shadow: 0 14px 30px rgba(30,41,59,.10), 0 1px 0 rgba(255,255,255,.62) inset !important;
  transform: translateY(-1px);
}

html[data-theme="sky-mint"] :where(
  .btn-primary, .pc-btn-primary, .hbtn-primary,
  .btn-accent,
  button.primary, a.primary
):active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(30,41,59,.08), 0 1px 0 rgba(255,255,255,.45) inset !important;
}

/* =========================================================
   ✅ 2) 胶囊 Tab/Chip：修复“未选中像凹下去、选中像凸起反了”
   核心：未选中也要微凸玻璃；active 再更凸
   ========================================================= */

/* 未选中：微凸玻璃（不凹） */
html[data-theme="sky-mint"] :where(.tab, .chip, .pill, .seg-btn, .filter-chip){
  background: var(--sky-chip-bg) !important;
  border: 1px solid var(--sky-chip-border) !important;
  color: var(--sky-chip-text) !important;
  box-shadow: var(--sky-chip-shadow), var(--sky-chip-inset) !important;
  transform: translateY(0) !important;
}

/* hover：轻微更凸 */
html[data-theme="sky-mint"] :where(.tab, .chip, .pill, .seg-btn, .filter-chip):hover{
  background: var(--sky-chip-bg-hover) !important;
  border-color: var(--sky-chip-border-hover) !important;
  color: var(--sky-chip-text-hover) !important;
  box-shadow: 0 10px 18px rgba(30,41,59,.08), 0 1px 0 rgba(255,255,255,.80) inset !important;
  transform: translateY(-0.5px) !important;
}

/* ✅ 选中 active：更亮更凸（直觉正确） */
html[data-theme="sky-mint"] :where(.tab.active, .chip.active, .pill.active, .seg-btn.active, .filter-chip.active){
  background: var(--sky-chip-bg-active) !important;
  border-color: var(--sky-chip-border-active) !important;
  color: var(--sky-chip-text-active) !important;
  box-shadow: var(--sky-chip-shadow-active) !important;
  transform: translateY(-1px) !important;
}

/* active 内部图标/文字统一继承 */
html[data-theme="sky-mint"] :where(.tab.active, .chip.active, .pill.active, .seg-btn.active, .filter-chip.active) :where(span,i,svg){
  color: inherit !important;
  fill: currentColor !important;
}

/* 按下态：所有 chip 都是“轻微压下” */
html[data-theme="sky-mint"] :where(.tab, .chip, .pill, .seg-btn, .filter-chip):active{
  transform: translateY(0) scale(.99) !important;
  box-shadow: 0 6px 14px rgba(30,41,59,.06), 0 1px 0 rgba(255,255,255,.62) inset !important;
}

/* focus 光圈（柔和） */
html[data-theme="sky-mint"] :where(.tab, .chip, .pill, .seg-btn, .filter-chip):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--sky-btn-ring) !important;
}

/* =========================================================
   ✅ 3) 资产页 tabs：更高优先级钉死（避免被其它 chip 规则干扰）
   ========================================================= */
html[data-theme="sky-mint"] #page-assets #asset-view-tabs .chip{
  background: var(--sky-chip-bg) !important;
  border: 1px solid var(--sky-chip-border) !important;
  color: var(--sky-chip-text) !important;
  box-shadow: var(--sky-chip-shadow), var(--sky-chip-inset) !important;
  transform: translateY(0) !important;
}

html[data-theme="sky-mint"] #page-assets #asset-view-tabs .chip:hover{
  background: var(--sky-chip-bg-hover) !important;
  border-color: var(--sky-chip-border-hover) !important;
  color: var(--sky-chip-text-hover) !important;
  box-shadow: 0 10px 18px rgba(30,41,59,.08), 0 1px 0 rgba(255,255,255,.80) inset !important;
  transform: translateY(-0.5px) !important;
}

html[data-theme="sky-mint"] #page-assets #asset-view-tabs .chip.active{
  background: var(--sky-chip-bg-active) !important;
  border-color: var(--sky-chip-border-active) !important;
  color: var(--sky-chip-text-active) !important;
  box-shadow: var(--sky-chip-shadow-active) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="sky-mint"] #page-assets #asset-view-tabs .chip:active{
  transform: translateY(0) scale(.99) !important;
}


/* ========= 新拟态主题（仅在 html[data-theme="neumorphism"] 下生效） ========= */
html[data-theme="neumorphism"]{
  --neo-bg: #e9eef6;
  --neo-surface: #edf1f7;
  --neo-shadow-light: rgba(255,255,255,0.9);
  --neo-shadow-dark: rgba(163,177,198,0.6);
  --neo-radius: 18px;
}

/* 通用新拟态卡片 */
html[data-theme="neumorphism"] .card,
html[data-theme="neumorphism"] .panel,
html[data-theme="neumorphism"] .asset-card,
html[data-theme="neumorphism"] .detail-modal-card{
  background: var(--neo-surface);
  border-radius: var(--neo-radius);
  box-shadow:
    8px 8px 18px var(--neo-shadow-dark),
    -8px -8px 18px var(--neo-shadow-light);
  border: none;
}

/* ===== 侧边栏 ===== */
html[data-theme="neumorphism"] .pc-sidebar{
  background: var(--neo-bg);
  box-shadow:
    inset 6px 6px 12px var(--neo-shadow-dark),
    inset -6px -6px 12px var(--neo-shadow-light);
}

html[data-theme="neumorphism"] .pc-sidebar .menu-item{
  margin: 8px 10px;
  border-radius: 14px;
  background: var(--neo-bg);
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark),
    -6px -6px 12px var(--neo-shadow-light);
}

html[data-theme="neumorphism"] .pc-sidebar .menu-item.active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark),
    inset -4px -4px 8px var(--neo-shadow-light);
}

/* ===== 按钮 ===== */
html[data-theme="neumorphism"] .btn,
html[data-theme="neumorphism"] .data-action-btn,
html[data-theme="neumorphism"] .btn-primary{
  background: var(--neo-bg);
  border-radius: 14px;
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark),
    -6px -6px 12px var(--neo-shadow-light);
  border: none;
}

html[data-theme="neumorphism"] .btn:active,
html[data-theme="neumorphism"] .data-action-btn:active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark),
    inset -4px -4px 8px var(--neo-shadow-light);
}

/* ===== 账单明细 ===== */
html[data-theme="neumorphism"] .transactions-list .trans-item{
  background: var(--neo-surface);
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow:
    6px 6px 14px var(--neo-shadow-dark),
    -6px -6px 14px var(--neo-shadow-light);
}

/* ===== AI 聊天 ===== */
html[data-theme="neumorphism"] .ai-main .card,
html[data-theme="neumorphism"] .ai-analysis-card{
  background: var(--neo-surface);
  border-radius: 18px;
  box-shadow:
    8px 8px 18px var(--neo-shadow-dark),
    -8px -8px 18px var(--neo-shadow-light);
}

html[data-theme="neumorphism"] .ai-input-bar{
  background: var(--neo-bg);
  border-radius: 20px;
  box-shadow:
    inset 6px 6px 12px var(--neo-shadow-dark),
    inset -6px -6px 12px var(--neo-shadow-light);
}

/* ===== 输入框 ===== */
html[data-theme="neumorphism"] input,
html[data-theme="neumorphism"] textarea{
  background: var(--neo-bg);
  border-radius: 12px;
  border: none;
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark),
    inset -4px -4px 8px var(--neo-shadow-light);
}


/* ✅ 修复：新拟态主题下 btn-primary 被蓝色/渐变覆盖的问题（放补丁CSS最末尾） */
html[data-theme="neumorphism"] .btn-primary,
html[data-theme="neumorphism"] .data-action-btn.btn-primary,
html[data-theme="neumorphism"] button.btn-primary,
html[data-theme="neumorphism"] a.btn-primary {
  /* 关键：干掉蓝色/渐变覆盖 */
  background: var(--neo-bg) !important;
  background-image: none !important;

  /* 新拟态外凸 */
  border: none !important;
  border-radius: 14px;
  color: var(--text-color, #0f172a) !important;

  box-shadow:
    6px 6px 12px var(--neo-shadow-dark),
    -6px -6px 12px var(--neo-shadow-light) !important;
}

/* 按下态（内凹） */
html[data-theme="neumorphism"] .btn-primary:active,
html[data-theme="neumorphism"] .data-action-btn.btn-primary:active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark),
    inset -4px -4px 8px var(--neo-shadow-light) !important;
}

/* hover 稍微提亮一点（更像“浮起”） */
html[data-theme="neumorphism"] .btn-primary:hover,
html[data-theme="neumorphism"] .data-action-btn.btn-primary:hover{
  filter: brightness(1.02);
}

/* =========================================================
   Neumorphism 专修：账单明细页 #page-transactions
   只在 html[data-theme="neumorphism"] 下生效
========================================================= */
html[data-theme="neumorphism"] #page-transactions{
  /* 页面托盘：轻微内凹，避免内容漂浮在“空中” */
  background: transparent;
}

/* 整个页面主卡片/容器（如果 page 本身是卡片式，给它托盘感） */
html[data-theme="neumorphism"] #page-transactions .page-header,
html[data-theme="neumorphism"] #page-transactions .filters-row{
  border-radius: 18px;
}

/* 顶部 actions 按钮：统一新拟态小外凸 */
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-ghost,
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-danger{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 14px;
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark, rgba(163,177,198,.55)),
    -6px -6px 12px var(--neo-shadow-light, rgba(255,255,255,.90));
}

/* danger 不要红底块，改成“红色文字/图标 + 新拟态按钮”更高级 */
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-danger{
  color: var(--danger-color, #ef4444) !important;
}
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-danger:hover{
  filter: brightness(1.02);
}
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-ghost:active,
html[data-theme="neumorphism"] #page-transactions .page-actions .btn-danger:active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,.55)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,.90));
}

/* 过滤区：做成“托盘内凹”，内部控件外凸 */
html[data-theme="neumorphism"] #page-transactions .filters-row{
  background: var(--neo-bg, #e9eef6);
  padding: 12px 14px;
  border: none !important;
  box-shadow:
    inset 6px 6px 12px var(--neo-shadow-dark, rgba(163,177,198,.35)),
    inset -6px -6px 12px var(--neo-shadow-light, rgba(255,255,255,.85));
}

/* pill-tabs：整体做内凹槽，tab 按钮选中变“按下” */
html[data-theme="neumorphism"] #page-transactions .pill-tabs{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  padding: 6px;
  border-radius: 999px;
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,.40)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,.90));
}
html[data-theme="neumorphism"] #page-transactions .pill-tabs button{
  border: none !important;
  background: transparent !important;
  border-radius: 999px;
  padding: 8px 14px;
  color: color-mix(in srgb, var(--text-color, #0f172a) 72%, transparent);
}
html[data-theme="neumorphism"] #page-transactions .pill-tabs button.active{
  background: var(--neo-surface, #eef2f8) !important;
  color: var(--text-color, #0f172a) !important;
  box-shadow:
    inset 3px 3px 6px var(--neo-shadow-dark, rgba(163,177,198,.45)),
    inset -3px -3px 6px var(--neo-shadow-light, rgba(255,255,255,.92));
}

/* select / search：做成内凹输入槽 */
html[data-theme="neumorphism"] #page-transactions .field-inline{
  background: var(--neo-bg, #e9eef6);
  border: none !important;
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,.38)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,.92));
}
html[data-theme="neumorphism"] #page-transactions .field-inline input,
html[data-theme="neumorphism"] #page-transactions .field-inline select{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text-color, #0f172a);
}

/* 列表容器：整体做托盘（轻内凹），让每个 group/card “浮起” */
html[data-theme="neumorphism"] #page-transactions .transactions-list{
  background: var(--neo-bg, #e9eef6);
  padding: 14px;
  border-radius: 22px;
  box-shadow:
    inset 8px 8px 16px var(--neo-shadow-dark, rgba(163,177,198,.30)),
    inset -8px -8px 16px var(--neo-shadow-light, rgba(255,255,255,.85));
}

/* 日期分组：外凸卡片（层级 1） */
html[data-theme="neumorphism"] #page-transactions .trans-date-group{
  background: var(--neo-surface, #eef2f8);
  border: none !important;
  border-radius: 20px;
  padding: 10px 12px 12px;
  margin: 12px 0;
  box-shadow:
    10px 10px 22px var(--neo-shadow-dark, rgba(163,177,198,.45)),
    -10px -10px 22px var(--neo-shadow-light, rgba(255,255,255,.92));
}

/* 日期 header：不要实线分割，改成“淡分隔 + 文字层级” */
html[data-theme="neumorphism"] #page-transactions .trans-date-header{
  border: none !important;
  padding: 6px 6px 10px;
  margin-bottom: 8px;
}
html[data-theme="neumorphism"] #page-transactions .trans-date{
  font-weight: 700;
}
html[data-theme="neumorphism"] #page-transactions .trans-date-count,
html[data-theme="neumorphism"] #page-transactions .trans-date-expense,
html[data-theme="neumorphism"] #page-transactions .trans-date-income{
  color: color-mix(in srgb, var(--text-muted, #6b7280) 75%, transparent);
}

/* 每条账单：外凸小卡（层级 2），hover 稍微浮起，active 内凹 */
html[data-theme="neumorphism"] #page-transactions .trans-item{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 18px;
  padding: 12px 12px;
  margin: 10px 6px;
  box-shadow:
    7px 7px 14px var(--neo-shadow-dark, rgba(163,177,198,.38)),
    -7px -7px 14px var(--neo-shadow-light, rgba(255,255,255,.92));
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
html[data-theme="neumorphism"] #page-transactions .trans-item:hover{
  transform: translateY(-1px);
  filter: brightness(1.01);
}
html[data-theme="neumorphism"] #page-transactions .trans-item:active{
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 10px var(--neo-shadow-dark, rgba(163,177,198,.45)),
    inset -5px -5px 10px var(--neo-shadow-light, rgba(255,255,255,.92));
}

/* 分类图标圈：做“内凹圆槽”更像新拟态 */
html[data-theme="neumorphism"] #page-transactions .trans-cat-icon{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 999px;
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,.35)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,.90));
}

/* 金额颜色：保留你原收入/支出逻辑，但避免太刺眼 */
html[data-theme="neumorphism"] #page-transactions .trans-amount.expense{
  color: color-mix(in srgb, #ef4444 82%, #0000);
}
html[data-theme="neumorphism"] #page-transactions .trans-amount.income{
  color: color-mix(in srgb, #16a34a 82%, #0000);
}
html[data-theme="neumorphism"] #page-transactions .trans-amount.transfer{
  color: color-mix(in srgb, var(--text-color, #0f172a) 70%, transparent);
}

/* 小文字（备注/时间/报销标签）统一柔和 */
html[data-theme="neumorphism"] #page-transactions .trans-note-inline,
html[data-theme="neumorphism"] #page-transactions .trans-time-inline,
html[data-theme="neumorphism"] #page-transactions .trans-account{
  color: color-mix(in srgb, var(--text-muted, #6b7280) 78%, transparent);
}

/* =========================================================
   Neumorphism 微调：pill-tabs 不做内凹，active 外凸
   & filter-keyword 只保留一层内凹输入槽（去掉套娃）
========================================================= */

/* 1) pill-tabs：取消内凹槽，改为“轻外凸托底” */
html[data-theme="neumorphism"] #page-transactions .pill-tabs{
  background: transparent !important;
  padding: 6px;
  border: none !important;
  border-radius: 999px;

  /* 轻外凸，不要 inset */
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark, rgba(163,177,198,.22)),
    -6px -6px 12px var(--neo-shadow-light, rgba(255,255,255,.70));
}

/* pill-tabs 普通按钮：平的（不凸不凹），靠文字区分 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button{
  background: transparent !important;
  border: none !important;
  border-radius: 999px;
  padding: 8px 14px;
  color: color-mix(in srgb, var(--text-color, #0f172a) 68%, transparent);
  box-shadow: none !important;
}

/* active：外凸胶囊（更明显） */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button.active{
  background: var(--neo-surface, #eef2f8) !important;
  color: var(--text-color, #0f172a) !important;

  box-shadow:
    6px 6px 12px var(--neo-shadow-dark, rgba(163,177,198,.45)),
    -6px -6px 12px var(--neo-shadow-light, rgba(255,255,255,.92));
}

/* active 按下：轻微内凹（点击反馈） */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button.active:active{
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark, rgba(163,177,198,.45)),
    inset -4px -4px 8px var(--neo-shadow-light, rgba(255,255,255,.92));
}


/* 2) filter-keyword：去掉外层 field-inline 的内凹（避免套娃） */
html[data-theme="neumorphism"] #page-transactions .field-inline{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 只让 input 自己成为“内凹输入槽” */
html[data-theme="neumorphism"] #page-transactions #filter-keyword{
  width: 100%;
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px;
  padding: 10px 14px;

  box-shadow:
    inset 5px 5px 10px var(--neo-shadow-dark, rgba(163,177,198,.38)),
    inset -5px -5px 10px var(--neo-shadow-light, rgba(255,255,255,.92));
  color: var(--text-color, #0f172a);
}

/* icon（🏷）如果还在：给它一个轻外凸小圆，不抢戏 */
html[data-theme="neumorphism"] #page-transactions .field-inline .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--neo-surface, #eef2f8);

  box-shadow:
    5px 5px 10px var(--neo-shadow-dark, rgba(163,177,198,.28)),
    -5px -5px 10px var(--neo-shadow-light, rgba(255,255,255,.88));
}

/* select 那个 field-inline（📁）你也可以同样策略：只保留 select 内凹 */
html[data-theme="neumorphism"] #page-transactions #filter-book{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 999px;
  padding: 10px 14px;
  outline: none !important;

  box-shadow:
    inset 5px 5px 10px var(--neo-shadow-dark, rgba(163,177,198,.38)),
    inset -5px -5px 10px var(--neo-shadow-light, rgba(255,255,255,.92));
  color: var(--text-color, #0f172a);
}

/* =========================================================
   Neumorphism 最终修正版（覆盖补丁）- 放到最末尾
   目标：
   1) pill-tabs 未选中也有轻新拟态，选中更凸出
   2) filter-keyword 输入框为内凹槽（无套娃）
   3) trans-items 不外凸，仅 trans-date-group 整组外凸
========================================================= */

/* -------------------------
   1) pill-tabs：底托轻外凸
------------------------- */
html[data-theme="neumorphism"] #page-transactions .pill-tabs{
  background: transparent !important;
  border: none !important;
  border-radius: 999px;
  padding: 6px;

  /* 轻外凸底托（弱） */
  box-shadow:
    5px 5px 10px rgba(163,177,198,.18),
    -5px -5px 10px rgba(255,255,255,.65) !important;
}

/* 未选中：也给“弱外凸按钮”，不要完全平 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0 4px;
  color: color-mix(in srgb, var(--text-color, #0f172a) 66%, transparent) !important;

  /* 弱外凸（未选中） */
  box-shadow:
    4px 4px 8px rgba(163,177,198,.22),
    -4px -4px 8px rgba(255,255,255,.78) !important;

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

html[data-theme="neumorphism"] #page-transactions .pill-tabs button:hover{
  transform: translateY(-1px);
  filter: brightness(1.01);
}

/* 选中：更强外凸 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button.active{
  background: var(--neo-surface, #edf1f7) !important;
  color: var(--text-color, #0f172a) !important;

  box-shadow:
    7px 7px 14px rgba(163,177,198,.42),
    -7px -7px 14px rgba(255,255,255,.92) !important;
}

/* 按下：内凹反馈 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button:active{
  transform: translateY(0);
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.42),
    inset -4px -4px 8px rgba(255,255,255,.92) !important;
}


/* -------------------------
   2) filter-keyword：只保留输入框内凹（去套娃）
------------------------- */

/* 外层 field-inline：彻底透明无阴影（防止你前面那段“内凹 field-inline”干扰） */
html[data-theme="neumorphism"] #page-transactions .field-inline{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* icon 做弱外凸小圆（可选） */
html[data-theme="neumorphism"] #page-transactions .field-inline .icon{
  background: var(--neo-surface, #edf1f7) !important;
  border-radius: 999px;
  box-shadow:
    4px 4px 8px rgba(163,177,198,.22),
    -4px -4px 8px rgba(255,255,255,.85) !important;
}

/* 关键：输入框必须是“内凹槽” */
html[data-theme="neumorphism"] #page-transactions #filter-keyword{
  background: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px;
  padding: 10px 14px !important;
  color: var(--text-color, #0f172a) !important;
}

/* placeholder 也更像“待输入” */
html[data-theme="neumorphism"] #page-transactions #filter-keyword::placeholder{
  color: color-mix(in srgb, var(--text-muted, #6b7280) 62%, transparent);
}

/* book 下拉也做内凹槽（如果你希望同风格） */
html[data-theme="neumorphism"] #page-transactions #filter-book{
  background: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px;
  padding: 10px 14px !important;
  color: var(--text-color, #0f172a) !important;
}


/* -------------------------
   3) trans-items 不外凸：只让 trans-date-group 整组外凸
------------------------- */

/* trans-items：取消任何背景/阴影，避免“套娃一层又一层” */
html[data-theme="neumorphism"] #page-transactions .trans-items{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 2px !important;
}

/* 保留 trans-date-group 外凸（如果你想更干净可略降阴影） */
html[data-theme="neumorphism"] #page-transactions .trans-date-group{
  background: var(--neo-surface, #edf1f7) !important;
  border: none !important;
  border-radius: 20px;
  padding: 12px 12px 10px;

  box-shadow:
    10px 10px 20px rgba(163,177,198,.40),
    -10px -10px 20px rgba(255,255,255,.92) !important;
}

/* trans-item：改为“轻内凹/低阴影”，让层级更干净 */
html[data-theme="neumorphism"] #page-transactions .trans-item{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 18px;
  margin: 10px 6px;
  padding: 12px 12px;

  /* 轻内凹（像放在组卡片里的一条内容） */
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.28),
    inset -4px -4px 8px rgba(255,255,255,.88) !important;

  transition: transform .15s ease, filter .15s ease;
}

html[data-theme="neumorphism"] #page-transactions .trans-item:hover{
  filter: brightness(1.01);
}

html[data-theme="neumorphism"] #page-transactions .trans-item:active{
  box-shadow:
    inset 6px 6px 12px rgba(163,177,198,.42),
    inset -6px -6px 12px rgba(255,255,255,.92) !important;
}

/* 分类图标圈：保持内凹即可 */
html[data-theme="neumorphism"] #page-transactions .trans-cat-icon{
  background: var(--neo-bg, #e9eef6) !important;
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.30),
    inset -4px -4px 8px rgba(255,255,255,.90) !important;
}

/* =========================================================
   Neumorphism 进一步优化补丁（放到最末尾）
   1) trans-item 取消内凹/外凸阴影
   2) field-inline 整体内凹，子元素不做拟态
   3) pill-tabs 容器不做阴影，仅按钮做拟态
========================================================= */

/* -------------------------
   1) trans-item：取消拟态阴影（仅保留干净卡片感）
------------------------- */
html[data-theme="neumorphism"] #page-transactions .trans-item{
  box-shadow: none !important;      /* 关键：彻底取消你之前的 inset/凸出 */
  background: none !important;
  border: none !important;
  border-radius: 18px;
  margin: 5px 6px!important;
  padding: 5px 12px!important;

  /* 轻微分隔：用 1px 线代替阴影，避免“糊一片” */
  outline: 1px solid color-mix(in srgb, rgba(163,177,198,.40) 55%, transparent);
  outline-offset: -1px;

  transition: transform .12s ease, filter .12s ease, outline-color .12s ease;
}

html[data-theme="neumorphism"] #page-transactions .trans-item:hover{
  filter: brightness(1.01);
  outline-color: color-mix(in srgb, rgba(163,177,198,.55) 70%, transparent);
}

html[data-theme="neumorphism"] #page-transactions .trans-item:active{
  transform: translateY(0);
  filter: brightness(0.995);
}


/* -------------------------
   2) field-inline：整体内凹；子元素不拟态（避免套娃）
------------------------- */

/* 外层 field-inline 做内凹槽 */
html[data-theme="neumorphism"] #page-transactions .field-inline{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 999px;
  padding: 8px 12px !important;

  box-shadow:
    inset 6px 6px 12px rgba(163,177,198,.40),
    inset -6px -6px 12px rgba(255,255,255,.92) !important;
}

/* 取消 icon 的外凸拟态 */
html[data-theme="neumorphism"] #page-transactions .field-inline .icon{
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin-right: 8px;
}

/* input/select 本身：透明 + 无拟态阴影（由父容器承担内凹） */
html[data-theme="neumorphism"] #page-transactions .field-inline input,
html[data-theme="neumorphism"] #page-transactions .field-inline select{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  color: var(--text-color, #0f172a) !important;
}

/* 仍然让 placeholder 有“待输入”的柔和感 */
html[data-theme="neumorphism"] #page-transactions .field-inline input::placeholder{
  color: color-mix(in srgb, var(--text-muted, #6b7280) 62%, transparent);
}


/* -------------------------
   3) pill-tabs：容器无阴影，只保留按钮拟态
------------------------- */
html[data-theme="neumorphism"] #page-transactions .pill-tabs{
  box-shadow: none !important;     /* 关键：取消整体 shadow */
  background: transparent !important;
  border: none !important;
  padding: 6px;
  border-radius: 999px;
}

/* 按钮：未选中弱外凸 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button{
  background: var(--neo-bg, #e9eef6) !important;
  border: none !important;
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0 4px;
  color: color-mix(in srgb, var(--text-color, #0f172a) 66%, transparent) !important;

  box-shadow:
    4px 4px 8px rgba(163,177,198,.22),
    -4px -4px 8px rgba(255,255,255,.78) !important;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

html[data-theme="neumorphism"] #page-transactions .pill-tabs button:hover{
  transform: translateY(-1px);
  filter: brightness(1.01);
}

/* 选中更强外凸 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button.active{
  background: var(--neo-surface, #edf1f7) !important;
  color: var(--text-color, #0f172a) !important;

  box-shadow:
    7px 7px 14px rgba(163,177,198,.42),
    -7px -7px 14px rgba(255,255,255,.92) !important;
}

/* 点击反馈：内凹 */
html[data-theme="neumorphism"] #page-transactions .pill-tabs button:active{
  transform: translateY(0);
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.42),
    inset -4px -4px 8px rgba(255,255,255,.92) !important;
}

html[data-theme="neumorphism"] .pc-sidebar{
  background: var(--neo-bg);
  box-shadow:
    10px 10px 22px var(--neo-shadow-dark),
    -10px -10px 22px var(--neo-shadow-light);
}

html[data-theme="neumorphism"] .ai-input-area{
    margin: 16px 17px 5px;
}


html[data-theme="neumorphism"] .ai-input-area,
html[data-theme="neumorphism"] .ai-input-bar{
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: 20px;

  box-shadow:
    10px 10px 22px var(--neo-shadow-dark),
    -10px -10px 22px var(--neo-shadow-light) !important;
}

html[data-theme="neumorphism"] .ai-input-area input,
html[data-theme="neumorphism"] .ai-input-area textarea,
html[data-theme="neumorphism"] .ai-input-bar input,
html[data-theme="neumorphism"] .ai-input-bar textarea{
  background: var(--neo-bg) !important;
  border: none !important;
  outline: none !important;
  border-radius: 16px;

  box-shadow:
    inset 6px 6px 12px rgba(163,177,198,.40),
    inset -6px -6px 12px rgba(255,255,255,.92) !important;
}


/* =========================================================
   Neumorphism：AI control bar 三个按钮外凸
========================================================= */
html[data-theme="neumorphism"] .ai-control-bar .ai-control-btn,
html[data-theme="neumorphism"] .ai-control-bar button{
  background: var(--neo-bg) !important;
  background-image: none !important;
  border: none !important;

  border-radius: 14px;
  box-shadow:
    6px 6px 12px var(--neo-shadow-dark),
    -6px -6px 12px var(--neo-shadow-light) !important;

  color: var(--text-color, #0f172a) !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

html[data-theme="neumorphism"] .ai-control-bar .ai-control-btn:hover,
html[data-theme="neumorphism"] .ai-control-bar button:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

html[data-theme="neumorphism"] .ai-control-bar .ai-control-btn:active,
html[data-theme="neumorphism"] .ai-control-bar button:active{
  transform: translateY(0);
  box-shadow:
    inset 4px 4px 8px var(--neo-shadow-dark),
    inset -4px -4px 8px var(--neo-shadow-light) !important;
}

/* 如果其中有“高亮/选中”按钮（如 .active / .is-on），让它更凸一点 */
html[data-theme="neumorphism"] .ai-control-bar .ai-control-btn.active,
html[data-theme="neumorphism"] .ai-control-bar button.active,
html[data-theme="neumorphism"] .ai-control-bar .ai-control-btn.is-on{
  background: var(--neo-surface, #edf1f7) !important;
  box-shadow:
    8px 8px 16px var(--neo-shadow-dark),
    -8px -8px 16px var(--neo-shadow-light) !important;
}




html[data-theme="neumorphism"] #page-mine .card{
    margin: 5px;
}


html[data-theme="neumorphism"] .pc-topbar{
  background: var(--neo-bg) !important;
  border: none !important;

  box-shadow:
    10px 10px 22px rgba(163,177,198,.40),  /* 暗影保留 */
    inset 0 1px 0 rgba(255,255,255,.65),   /* 上边高光（内侧） */
    inset 0 -1px 0 rgba(163,177,198,.10);  /* 下边轻压暗 */
}


/* ===========================
   Fix: pc-pages 背景被全局 :where 覆盖导致“发灰/脏/不细腻”
   放在所有 CSS 最末尾
=========================== */

/* 1) 取消对 pc-pages 的强制透明覆盖（只保留 topbar 的 mix 背景即可） */
html:not([data-theme]) .pc-pages,
html[data-theme] .pc-pages{
  background: unset !important;   /* 不要 transparent !important */
}

/* 2) 把 :where(.pc-topbar, .pc-pages) 拆开：pc-pages 不要吃这条背景 */
html:not([data-theme]) .pc-topbar,
html[data-theme] .pc-topbar{
  background: color-mix(in srgb, var(--t-surface-strong) 90%, transparent) !important;
  color: var(--t-fg) !important;
}

/* 3) pc-pages 用“干净玻璃底”重新定义（默认主题用） */
html:not([data-theme]) .pc-pages,
html[data-theme="default"] .pc-pages{ /* 你现在默认主题如果是 forest/默认，按需删/改 */
  /* 更克制的渐变：减少奶白覆盖，避免脏灰 */
  background:
    radial-gradient(circle at 0 0,
      rgba(204, 251, 241, 0.55),
      rgba(204, 251, 241, 0.00) 58%),
    radial-gradient(circle at 100% 100%,
      rgba(254, 249, 195, 0.50),
      rgba(254, 249, 195, 0.00) 62%),
    rgba(255,255,255,0.62);

  border-radius: 28px;
  padding: 16px 18px;
  overflow: hidden;

  /* 玻璃：别太猛，太猛会糊 + 脏 */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);

  /* 用“细边框+轻阴影”取代厚重 shadow-soft */
  border: 1px solid rgba(255,255,255,0.55);
  /*box-shadow:*/
  /*  0 18px 40px rgba(15, 23, 42, 0.06),*/
  /*  inset 0 1px 0 rgba(255,255,255,0.55);*/
}


 #vip-redeem-modal.modal-mask{
      position: fixed; inset: 0;
      display: none;
      align-items: center; justify-content: center;
      background: rgba(0,0,0,.28);
      z-index: 9999;
    }
    #vip-redeem-modal .modal-content{
      width: min(92vw, 520px);
      border-radius: 16px;
      background: #fff;
      padding: 14px 14px 16px;
      box-shadow: 0 24px 80px rgba(0,0,0,.25);
    }
    
    /* ============== Mine VIP Card (PC) UI Upgrade ============== */
/* 不改结构：只强化层级、按钮、间距、响应式 */

/* 兑换码：别再像文字链接，升级成“次要按钮”入口 */
#mine-vip-card.mine-vip-card-pc #mine-vip-redeem.btn-text{
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  line-height:1;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  color:#1f2a44;

  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

/* 给兑换码加个票券图标（伪元素，不改 HTML） */
#mine-vip-card.mine-vip-card-pc #mine-vip-redeem::before{
  content:"🎟️";
  font-size:14px;
  line-height:1;
  transform: translateY(-.5px);
}

#mine-vip-card.mine-vip-card-pc #mine-vip-redeem:hover{
  background: rgba(255,255,255,1);
}

/* 主按钮：更“高级”一些 */
#mine-vip-card.mine-vip-card-pc #mine-vip-cta.btn-primary{
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  line-height:1;

  border:none;
  color:#fff;
  /*background: linear-gradient(135deg,#3b82f6,#60a5fa);*/
  box-shadow: 0 12px 24px rgba(59,130,246,.18);
  cursor:pointer;
}

#mine-vip-card.mine-vip-card-pc #mine-vip-cta:hover{
  filter: brightness(.98);
}

/* 小屏时：上下结构，按钮并排铺满（更像 App） */
@media (max-width: 640px){
  #mine-vip-card.mine-vip-card-pc{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  #mine-vip-card.mine-vip-card-pc .mine-vip-simple-left{
    gap:14px;
  }
  #mine-vip-card.mine-vip-card-pc .mine-vip-simple-right{
    width:100%;
  }
  #mine-vip-card.mine-vip-card-pc #mine-vip-redeem,
  #mine-vip-card.mine-vip-card-pc #mine-vip-cta{
    flex:1;
    justify-content:center;
  }
  #mine-vip-card.mine-vip-card-pc .mine-vip-simple-item .value{
    max-width: 100%;
  }
}

/* 统计页：预算列更紧凑 */
#page-stats #table-category-stats thead th:last-child,
#page-stats #table-category-stats tbody td:last-child{
  width: 120px;
  white-space: nowrap;
}

/* ✅ 统计分析-分类统计：滚动时表头固定 */
#page-stats #table-category-stats thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  /* 必须有背景，不然滚动时会透出 */
  background: var(--card-bg, rgba(255,255,255,.92));
  backdrop-filter: blur(8px);
}

/* 可选：让表头下方有一点分隔感 */
#page-stats #table-category-stats thead th{
  box-shadow: 0 1px 0 rgba(15,23,42,.08);
}

/* ✅ 统计分析-分类统计：预算列 mini bar（高级展示） */
#page-stats .stats-mini-bar{
  width: 120px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.25);
  overflow: hidden;
  margin-top: 6px;
}
#page-stats .stats-mini-bar > i{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(59,130,246,.85);
}

/* 预算列稍微宽一点，内容更稳 */
#page-stats #table-category-stats thead th:last-child,
#page-stats #table-category-stats tbody td:last-child{
  width: 180px;
  white-space: nowrap;
}

/* ===========================================================
   统计分析 - 分类统计：修复表头 sticky + 列宽/布局
   =========================================================== */

/* 让 sticky 在滚动容器里更稳定 */
#page-stats .category-table-wrapper > div[style*="overflow:auto"]{
  position: relative;
}

/* sticky 在 border-collapse:collapse 下容易失效：单独给这个表格改为 separate */
#page-stats #table-category-stats{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed;         /* ✅ 固定布局，避免预算列把其他列挤爆 */
  width: 100%;
}

/* 表头固定 */
#page-stats #table-category-stats thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card-bg, rgba(255,255,255,.96));
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(15,23,42,.08);
}

/* 列宽分配：左边别空太多、右边别挤 */
#page-stats #table-category-stats thead th:nth-child(1),
#page-stats #table-category-stats tbody td:nth-child(1){ width: 42%; }

#page-stats #table-category-stats thead th:nth-child(2),
#page-stats #table-category-stats tbody td:nth-child(2){ width: 18%; }

#page-stats #table-category-stats thead th:nth-child(3),
#page-stats #table-category-stats tbody td:nth-child(3){ width: 12%; }

#page-stats #table-category-stats thead th:nth-child(4),
#page-stats #table-category-stats tbody td:nth-child(4){ width: 28%; }

/* 预算列：紧凑布局 */
#page-stats .stats-budget-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

#page-stats .stats-budget-meta{
  font-size:12px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#page-stats .stats-mini-bar{
  width: 140px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.25);
  overflow:hidden;
}
#page-stats .stats-mini-bar > i{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(59,130,246,.85);
}

/* 第一列内容不要把列撑开 */
#page-stats #table-category-stats td:first-child{
  overflow:hidden;
}

/* ===========================================================
   统计分析 - 分类统计：固定表头（不靠 sticky）+ 更紧凑列宽
   =========================================================== */

#page-stats .stats-table-fixed{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#page-stats .stats-table-head,
#page-stats .stats-table-body{
  width:100%;
  table-layout:fixed; /* ✅ 关键：列宽稳定，不会乱挤 */
}

/* 列宽：让左边不空、右边不挤 */
#page-stats .stats-table-fixed col.c-name{ width: 36%; }
#page-stats .stats-table-fixed col.c-amt { width: 14%; }
#page-stats .stats-table-fixed col.c-pct { width: 10%; }
#page-stats .stats-table-fixed col.c-bgt { width: 14%; }
#page-stats .stats-table-fixed col.c-rem { width: 14%; }
#page-stats .stats-table-fixed col.c-bar { width: 12%; }

/* 表头视觉：固定在上面更像主流产品 */
#page-stats .stats-table-head thead th{
  background: var(--card-bg, rgba(255,255,255,.96));
  box-shadow: 0 1px 0 rgba(15,23,42,.08);
  position: relative;
  z-index: 2;
}

/* 滚动区域边缘更干净 */
#page-stats .stats-table-scroll{
  border-radius: 14px;
}

/* 分类列：不撑爆 */
#page-stats .stats-table-body td:first-child{
  overflow:hidden;
}

/* 预算/剩余：单行显示，别换行 */
#page-stats .stats-cell-1line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 进度条：单行小条 */
#page-stats .stats-bar{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}
#page-stats .stats-mini{
  width: 88px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.25);
  overflow:hidden;
}
#page-stats .stats-mini > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgba(59,130,246,.85);
}
#page-stats .stats-pct{
  font-size:12px;
  color: var(--text-muted, #64748b);
  min-width: 34px;
  text-align:right;
}
/* ===========================================================
   统计分析 - 分类统计：紧凑 3 列版（金额/占比同列 + 进度条下置）
   =========================================================== */

#page-stats .stats-table-fixed{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#page-stats .stats-table-head,
#page-stats .stats-table-body{
  width:100%;
  table-layout:fixed;
}

/* 列宽：分类更紧凑，右侧预算稳住 */
#page-stats .stats-table-fixed col.c-name{ width: 30%; }
#page-stats .stats-table-fixed col.c-ap  { width: 40%; }
#page-stats .stats-table-fixed col.c-bgt { width: 30%; }

#page-stats .stats-cat-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 160px; /* 你可按观感改 140/160/180 */
}


/* 表头视觉 */
#page-stats .stats-table-head thead th{
  background: var(--card-bg, rgba(255,255,255,.96));
  box-shadow: 0 1px 0 rgba(15,23,42,.08);
  position: relative;
  z-index: 2;
}

/* 分类列不撑爆 */
#page-stats .stats-table-body td:first-child{
  overflow:hidden;
}

/* 金额/占比块：一行展示 + 下方进度条 */
#page-stats .stats-ap{
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap:6px;
}

#page-stats .stats-ap-line{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#page-stats .stats-amt{
  font-weight:900;
}

#page-stats .stats-slash{
  color: rgba(100,116,139,.9);
  font-weight:700;
}

#page-stats .stats-pct{
  color: rgba(100,116,139,.95);
  font-size:12px;
  font-weight:700;
  flex:0 0 auto;
}

/* 进度条更像主流 App */
#page-stats .stats-mini{
  width: 170px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow:hidden;
}
#page-stats .stats-mini > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgba(59,130,246,.85);
}

/* 预算列：只一行，避免三行丑 */
#page-stats .stats-bgt{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
#page-stats .stats-bgt-main{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#page-stats .stats-bgt-sub{
  font-size:12px;
  color: rgba(100,116,139,.95);
  white-space:nowrap;
}

/* 预算列：一行展示（预算数字 + 进度条） */
#page-stats .stats-bgt-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap;
}

#page-stats .stats-bgt-num{
  font-weight:900;
  min-width: 90px;         /* 固定一下数字占位，视觉更齐 */
  text-align: left;
}

#page-stats .stats-bgt-bar{
  width: 120px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow:hidden;
}

#page-stats .stats-bgt-bar > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgba(59,130,246,.85);
}

/* 未设置：更干净（不显示一堆短横线） */
#page-stats .stats-bgt-empty{
  color: rgba(100,116,139,.9);
  font-weight:700;
}

#page-stats .stats-cat-name{
  letter-spacing: .2px;
}