/* 简约账本：系统字体 + 暖色低饱和，支持深色 */
    :root {
      --bg: #F4F1EC;
      --paper: #FFFDF9;
      --input-bg: #FFFFFF;
      --ink: #333333;
      --muted: #777777;
      --accent: #8A7B68;
      --accent-soft: rgba(138, 123, 104, 0.14);
      --wash: #EBE6DE;
      --line: #DDD8CF;
      --ok: #4A6B55;
      --danger: #B85450;
      --overlay: rgba(42, 38, 34, 0.45);
      --chart-bar: #7D6B52;
      --chart-line: #2A2622;
      --chart-fill: rgba(125, 107, 82, 0.15);
      --chart-grid: #E8E0D4;
      --radius: 6px;
      --safe-b: env(safe-area-inset-bottom, 0px);
      color-scheme: light;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #1C1917;
        --paper: #262220;
        --input-bg: #2E2A27;
        --ink: #EDE8E1;
        --muted: #9A9288;
        --accent: #B8A48E;
        --accent-soft: rgba(184, 164, 142, 0.18);
        --wash: #322E2A;
        --line: #3D3834;
        --ok: #7BAF88;
        --danger: #D97A75;
        --overlay: rgba(0, 0, 0, 0.55);
        --chart-bar: #A68B6D;
        --chart-line: #B8A48E;
        --chart-fill: rgba(166, 139, 109, 0.22);
        --chart-grid: #3D3834;
        color-scheme: dark;
      }
    }
    :root[data-theme="dark"] {
      --bg: #1C1917;
      --paper: #262220;
      --input-bg: #2E2A27;
      --ink: #EDE8E1;
      --muted: #9A9288;
      --accent: #B8A48E;
      --accent-soft: rgba(184, 164, 142, 0.18);
      --wash: #322E2A;
      --line: #3D3834;
      --ok: #7BAF88;
      --danger: #D97A75;
      --overlay: rgba(0, 0, 0, 0.55);
      --chart-bar: #A68B6D;
      --chart-line: #B8A48E;
      --chart-fill: rgba(166, 139, 109, 0.22);
      --chart-grid: #3D3834;
      color-scheme: dark;
    }
    :root[data-system="dark"],
    html.theme-auto-dark {
      --bg: #1C1917;
      --paper: #262220;
      --input-bg: #2E2A27;
      --ink: #EDE8E1;
      --muted: #9A9288;
      --accent: #B8A48E;
      --accent-soft: rgba(184, 164, 142, 0.18);
      --wash: #322E2A;
      --line: #3D3834;
      --ok: #7BAF88;
      --danger: #D97A75;
      --overlay: rgba(0, 0, 0, 0.55);
      --chart-bar: #A68B6D;
      --chart-line: #B8A48E;
      --chart-fill: rgba(166, 139, 109, 0.22);
      --chart-grid: #3D3834;
      color-scheme: dark;
    }
    :root[data-system="light"],
    html.theme-auto-light {
      --bg: #F4F1EC;
      --paper: #FFFDF9;
      --input-bg: #FFFFFF;
      --ink: #333333;
      --muted: #777777;
      --accent: #8A7B68;
      --accent-soft: rgba(138, 123, 104, 0.14);
      --wash: #EBE6DE;
      --line: #DDD8CF;
      --ok: #4A6B55;
      --danger: #B85450;
      --overlay: rgba(42, 38, 34, 0.45);
      --chart-bar: #7D6B52;
      --chart-line: #2A2622;
      --chart-fill: rgba(125, 107, 82, 0.15);
      --chart-grid: #E8E0D4;
      color-scheme: light;
    }
    :root[data-theme="light"] {
      --bg: #F4F1EC;
      --paper: #FFFDF9;
      --input-bg: #FFFFFF;
      --ink: #333333;
      --muted: #777777;
      --accent: #8A7B68;
      --accent-soft: rgba(138, 123, 104, 0.14);
      --wash: #EBE6DE;
      --line: #DDD8CF;
      --ok: #4A6B55;
      --danger: #B85450;
      --overlay: rgba(42, 38, 34, 0.45);
      --chart-bar: #7D6B52;
      --chart-line: #2A2622;
      --chart-fill: rgba(125, 107, 82, 0.15);
      --chart-grid: #E8E0D4;
      color-scheme: light;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-tap-highlight-color: transparent; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
      font-size: 15px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--bg);
      padding-bottom: calc(78px + var(--safe-b));
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }
    h1, h2, h3 { font-weight: 600; margin: 0; }
    button, input, select, textarea { font-family: inherit; font-size: 16px; }
    button {
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 2px;
    }
    .wrap { max-width: 480px; margin: 0 auto; padding: 0 14px 20px; width: 100%; }

    .masthead {
      padding: 16px 0 14px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
    }
    .masthead-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .masthead h1 { font-size: 1.25rem; flex: 1; min-width: 0; }
    .masthead .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .theme-btn {
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--accent);
      flex-shrink: 0;
      min-width: 44px;
      height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .theme-btn--fixed {
      position: fixed;
      top: calc(10px + env(safe-area-inset-top, 0px));
      right: calc(10px + env(safe-area-inset-right, 0px));
      z-index: 600;
    }
    .theme-btn:active { background: var(--wash); }

    /* 卡片区块 */
    .block {
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 16px;
      margin-bottom: 16px;
    }
    .block-title {
      font-size: 15px;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--wash);
    }

    label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
    .field { margin-bottom: 12px; width: 100%; }
    .row { display: grid; gap: 10px; margin-bottom: 10px; width: 100%; }
    .row-2 { grid-template-columns: 1fr; }
    @media (min-width: 400px) { .row-2 { grid-template-columns: 1fr 1fr; } }
    input, select, textarea {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--input-bg);
      color: var(--ink);
      border-radius: var(--radius);
      -webkit-appearance: none;
      appearance: none;
    }
    .input-lg {
      font-size: 28px;
      font-weight: 600;
      padding: 14px 12px;
      text-align: center;
    }
    textarea { min-height: 56px; resize: vertical; }
    .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .chip-row.compact .chip { padding: 6px 12px; min-height: 36px; font-size: 14px; }
    .chip {
      padding: 8px 12px;
      border: 1px solid var(--line);
      background: var(--bg);
      font-size: 14px;
      border-radius: var(--radius);
      min-height: 40px;
    }
    .chip.active, .chip:hover { background: var(--wash); border-color: var(--accent); }
    .chip-amt.active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
    .field-cats { margin-bottom: 8px; }
    .label-compact { font-size: 12px; margin-bottom: 4px; }
    .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .cat-grid--compact { gap: 4px; }
    button.cat-btn {
      padding: 10px 4px;
      font-size: 13px;
      border: 1px solid var(--line);
      background: var(--input-bg);
      color: var(--ink);
      border-radius: var(--radius);
      min-height: 44px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .cat-grid--compact .cat-btn {
      padding: 5px 2px;
      font-size: 12px;
      min-height: 32px;
      line-height: 1.2;
    }
    .cat-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .payer-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
    button.payer-btn {
      padding: 12px 8px;
      font-size: 14px;
      border: 1px solid var(--line);
      min-height: 44px;
      border-radius: var(--radius);
      background: var(--input-bg);
      color: var(--ink);
    }
    .payer-btn.is-me { border-color: var(--accent); }
    .payer-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .badge-adv { font-size: 11px; background: var(--accent); color: var(--paper); padding: 2px 8px; margin-left: 4px; }
    .badge-adv.me { background: var(--ink); }
    .settle-me { border-color: var(--accent); background: var(--accent-soft); }

    .entry-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin: 10px 0 4px;
    }
    button.btn-advance {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: auto;
      align-self: center;
      padding: 8px 18px;
      min-height: 40px;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      border-radius: var(--radius);
      border: 2px solid var(--accent);
      background: var(--paper);
      color: var(--accent);
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .btn-advance-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      line-height: 0;
      flex-shrink: 0;
    }
    .btn-advance-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .btn-advance-icon .advance-icon-on {
      display: none;
    }
    button.btn-advance.active .btn-advance-icon .advance-icon-off {
      display: none;
    }
    button.btn-advance.active .btn-advance-icon .advance-icon-on {
      display: block;
    }
    button.btn-advance.active {
      background: var(--accent);
      color: var(--paper);
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .user-tag { color: var(--accent); font-weight: 600; }

    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .login-screen.hidden { display: none; }
    .login-box {
      width: 100%;
      max-width: 400px;
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 24px 20px;
    }
    .login-box h2 { font-size: 1.2rem; margin-bottom: 8px; }
    .login-box p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
    .login-btns { display: grid; gap: 10px; }
    .login-btns button {
      width: 100%;
      padding: 14px;
      border: 1px solid var(--line);
      background: var(--input-bg);
      font-size: 16px;
      min-height: 48px;
      border-radius: var(--radius);
    }
    .login-btns button:hover { border-color: var(--accent); background: var(--wash); }
    body.locked { overflow: hidden; }
    body.locked .tabbar-wrap { display: none; }
    .check-line { display: flex; align-items: center; gap: 8px; margin: 10px 0; min-height: 44px; }
    .check-line input { width: 18px; height: 18px; accent-color: var(--accent); }
    button.btn-primary,
    a.btn-primary {
      width: 100%;
      padding: 14px 16px;
      background: var(--accent);
      color: var(--paper);
      border: none;
      font-weight: 600;
      letter-spacing: 0.04em;
      min-height: 48px;
      border-radius: var(--radius);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      transition: background 0.2s, transform 0.1s;
    }
    button.btn-primary:active,
    a.btn-primary:active { opacity: 0.92; transform: scale(0.98); }
    #quick-entry .entry-actions .btn-primary {
      width: 100%;
      background: var(--ink);
      color: var(--paper);
      border: none;
      box-shadow: none;
    }
    #quick-entry .entry-actions .btn-primary:active {
      opacity: 0.9;
    }
    .more-details { margin-top: 12px; border-top: 1px solid var(--wash); padding-top: 8px; }
    .more-details summary {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--accent);
      padding: 10px 0;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .more-details summary::-webkit-details-marker { display: none; }
    .more-details[open] summary { margin-bottom: 10px; }
    .more-chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      color: var(--accent);
    }
    .more-chevron svg {
      width: 18px;
      height: 18px;
      display: block;
      transition: transform 0.2s ease;
    }
    .more-details[open] .more-chevron svg {
      transform: rotate(90deg);
    }
    .more-inner { padding-bottom: 4px; }
    button.btn-ghost,
    a.btn-ghost {
      padding: 10px 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      min-height: 44px;
      border-radius: var(--radius);
      font-size: 13px;
    }
    button.btn-ghost:active,
    a.btn-ghost:active { background: var(--wash); }
    .btn-danger { color: var(--danger); border-color: var(--danger); }
    .btn-sm { padding: 6px 10px; font-size: 12px; min-height: 36px; }

    .filter-panel { display: grid; gap: 8px; margin-bottom: 12px; }
    .filter-panel input, .filter-panel select { font-size: 15px; padding: 10px 12px; }

    .bill-item {
      display: flex;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid var(--wash);
      align-items: flex-start;
      width: 100%;
      border-radius: var(--radius);
      transition: background 0.15s;
    }
    .bill-item.is-selected {
      background: var(--accent-soft);
      margin: 0 -8px;
      padding-left: 8px;
      padding-right: 8px;
    }
    .bill-select {
      position: relative;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      margin-top: 2px;
    }
    .bill-chk {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }
    .bill-select-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 2px solid var(--line);
      border-radius: 7px;
      background: var(--input-bg);
      color: var(--paper);
      pointer-events: none;
      transition: background 0.15s, border-color 0.15s, transform 0.12s;
    }
    .bill-select-box svg {
      width: 14px;
      height: 14px;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.15s, transform 0.15s;
    }
    .bill-chk:checked + .bill-select-box {
      background: var(--accent);
      border-color: var(--accent);
    }
    .bill-chk:checked + .bill-select-box svg {
      opacity: 1;
      transform: scale(1);
    }
    .bill-chk:focus-visible + .bill-select-box {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .bill-body { flex: 1; min-width: 0; }
    .bill-item:last-child { border-bottom: none; }
    .bill-item.done-memo { opacity: 0.55; }
    .bill-item.done-memo .memo-title { text-decoration: line-through; }
    .bill-amt { font-size: 1.1rem; font-weight: 600; }
    .bill-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .bill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .tag-pill { font-size: 11px; padding: 2px 8px; background: var(--wash); color: var(--muted); }
    .bill-actions { display: flex; gap: 6px; margin-top: 8px; }
    .empty { text-align: center; color: var(--muted); padding: 32px 16px; font-size: 14px; }

    .memo-add {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
    }
    @media (min-width: 380px) {
      .memo-add { grid-template-columns: 1fr 72px 56px; align-items: stretch; }
      .memo-add .btn-ghost { padding: 10px 6px; }
    }

    /* 统计面板 */
    .panel-hidden { display: none !important; }
    .stat-hero { font-size: 1.75rem; font-weight: 600; margin: 8px 0 4px; }
    .stat-sub { color: var(--muted); font-size: 13px; }
    .mom-up { color: var(--danger); }
    .mom-down { color: var(--ok); }
    .settle-card {
      padding: 12px;
      border: 1px solid var(--line);
      margin-bottom: 8px;
      background: var(--bg);
    }
    .settle-card .name { font-weight: 600; }
    .settle-card .net-pos { color: var(--ok); }
    .settle-card .net-neg { color: var(--danger); }
    .chart-box { position: relative; height: 220px; margin: 16px 0; }
    .month-picker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .month-picker button { min-width: 44px; min-height: 44px; font-size: 20px; color: var(--accent); }

    .entry-title { margin-bottom: 12px; }
    .records-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }
    .records-head .block-title {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
      flex: 1;
    }
    .btn-recycle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--bg);
      text-decoration: none;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn-recycle:active { background: var(--wash); }
    .records-hint { margin: 0 0 10px; }
    .records-block { position: relative; }
    #view-records.has-batch #bill-list { padding-bottom: 72px; }
    .records-batch-dock {
      display: none;
      position: fixed;
      left: 50%;
      bottom: calc(76px + var(--safe-b));
      transform: translateX(-50%) translateY(16px);
      z-index: 120;
      align-items: center;
      gap: 8px;
      padding: 10px 12px 10px 16px;
      max-width: min(94vw, 400px);
      border-radius: 999px;
      background: rgba(22, 20, 18, 0.88);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
      border: 0.5px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
      color: #f5f5f4;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .records-batch-dock.show {
      display: flex;
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .records-batch-count {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      margin-right: 4px;
    }
    .records-batch-btn {
      padding: 8px 14px;
      min-height: 36px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 999px;
      border: none;
      white-space: nowrap;
    }
    .records-batch-btn--ghost {
      background: rgba(255, 255, 255, 0.12);
      color: #f5f5f4;
    }
    .records-batch-btn--ghost:active { background: rgba(255, 255, 255, 0.2); }
    .records-batch-btn--danger {
      background: var(--danger);
      color: #fff;
    }
    .records-batch-btn--danger:active { filter: brightness(1.08); }

    .tabbar-wrap {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
      padding-top: 10px;
      padding-bottom: var(--safe-b);
      z-index: 100;
      display: flex;
      justify-content: center;
      box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
    }
    .tabbar {
      display: flex;
      width: 100%;
      max-width: 480px;
      padding: 0 4px 6px;
      gap: 2px;
      align-items: flex-end;
    }
    .tabbar button {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      padding: 6px 2px 8px;
      font-size: 11px;
      color: var(--muted);
      min-height: 48px;
      border: none;
      background: transparent;
      border-radius: var(--radius);
      transition: color 0.15s, background 0.15s;
    }
    .tabbar button.tabbar-fab {
      flex: 1.15;
      min-height: auto;
      padding: 0 2px 4px;
      margin-top: -22px;
      gap: 5px;
      justify-content: flex-start;
    }
    .tabbar-fab-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      box-shadow: 0 4px 16px rgba(28, 25, 23, 0.28);
      border: 3px solid var(--paper);
      line-height: 0;
      transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .tabbar-fab-btn svg {
      width: 26px;
      height: 26px;
      display: block;
    }
    .tabbar button.tabbar-fab:active .tabbar-fab-btn {
      transform: scale(0.94);
    }
    .tabbar button.tabbar-fab.active .tabbar-fab-btn {
      background: var(--accent);
      box-shadow: 0 6px 20px rgba(138, 123, 104, 0.45);
    }
    .tabbar .tab-label--fab {
      font-weight: 600;
      color: var(--ink);
      font-size: 11px;
    }
    .tabbar button.tabbar-fab.active .tab-label--fab {
      color: var(--accent);
    }
    .tabbar button.tabbar-fab.active {
      background: transparent;
    }
    .tabbar .tab-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      line-height: 0;
    }
    .tabbar .tab-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }
    .tabbar .tab-label {
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .tabbar button.active {
      color: var(--accent);
      font-weight: 600;
      background: var(--accent-soft);
    }
    .tabbar button.active .tab-icon {
      color: var(--accent);
    }

    /* 弹窗 */
    .overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: 200;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s;
    }
    .overlay.open { opacity: 1; pointer-events: auto; }
    .modal {
      background: var(--paper);
      border: 1px solid var(--line);
      width: 100%;
      max-width: 480px;
      max-height: 85vh;
      overflow-y: auto;
      padding: 20px;
      transform: translateY(20px);
      transition: transform 0.25s;
    }
    .overlay.open .modal { transform: translateY(0); }
    .modal h3 { margin-bottom: 16px; }
    .modal-actions { display: flex; gap: 10px; margin-top: 16px; }
    .modal-actions .btn-primary { flex: 1; }

    /* 灵动岛风格 Toast */
    .toast {
      --toast-top: calc(env(safe-area-inset-top, 0px) + 56px);
      position: fixed;
      top: var(--toast-top);
      left: 50%;
      z-index: 350;
      max-width: min(92vw, 340px);
      padding: 10px 20px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.35;
      text-align: center;
      color: #f5f5f4;
      background: rgba(22, 20, 18, 0.78);
      -webkit-backdrop-filter: blur(28px) saturate(1.65);
      backdrop-filter: blur(28px) saturate(1.65);
      border: 0.5px solid rgba(255, 255, 255, 0.16);
      box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.14);
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(-14px) scale(0.86);
      transition:
        opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.48s cubic-bezier(0.34, 1.2, 0.64, 1);
      will-change: transform, opacity;
    }
    .toast.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    .toast.toast--hide {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(-10px) scale(0.92);
      transition-duration: 0.32s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .toast.toast--action {
      cursor: pointer;
      padding-left: 22px;
      padding-right: 22px;
    }
    .toast.toast--action:active {
      transform: translateX(-50%) translateY(0) scale(0.97);
    }
    @media (prefers-reduced-motion: reduce) {
      .toast { transition-duration: 0.01ms; }
      .toast.show { transform: translateX(-50%) translateY(0) scale(1); }
    }
    .loading { opacity: 0.5; pointer-events: none; }

    /* 月统计 · 每日明细 */
    .day-list { margin-top: 8px; }
    .day-item {
      border: 1px solid var(--line);
      margin-bottom: 8px;
      background: var(--input-bg);
    }
    .day-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px;
      cursor: pointer;
      list-style: none;
      min-height: 48px;
    }
    .day-item summary::-webkit-details-marker { display: none; }
    .day-item summary::after {
      content: '›';
      color: var(--muted);
      font-size: 18px;
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .day-item[open] summary::after { transform: rotate(90deg); }
    .day-date { font-weight: 600; font-size: 15px; }
    .day-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .day-sum { text-align: right; flex-shrink: 0; }
    .day-sum strong { display: block; font-size: 16px; }
    .day-sum span { font-size: 12px; color: var(--muted); }
    .day-detail { border-top: 1px solid var(--wash); padding: 4px 12px 8px; }
    .day-line {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--wash);
      font-size: 14px;
    }
    .day-line:last-child { border-bottom: none; }
    .day-line .dl-note { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
    .day-line .dl-amt { font-weight: 600; white-space: nowrap; }
    .day-item--empty { opacity: 0.65; }
    .day-item--empty .day-sum strong { font-weight: 400; color: var(--muted); }
    .cat-hint { font-size: 12px; color: var(--accent); font-weight: normal; }
    .home-brief {
      background: var(--wash);
      border: 1px solid var(--line);
      padding: 10px 12px;
      margin-bottom: 14px;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }
    .home-brief .brief-link { color: var(--accent); cursor: pointer; margin-left: auto; }
    #bill-list[data-pull="release"]::before {
      content: '松开刷新';
      display: block;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      padding: 8px;
    }
    .page-top { padding: 16px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
    .page-top h1 { font-size: 1.2rem; }
    .page-top .back { font-size: 14px; color: var(--accent); text-decoration: none; display: inline-block; margin-bottom: 8px; }
    .audit-line { font-size: 12px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--wash); }
    .audit-line:last-child { border-bottom: none; }
    .deleted-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .install-steps { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 12px 0; }
    .install-steps ol { margin: 0; padding-left: 1.2em; }
    .install-steps li { margin-bottom: 8px; }
    .install-steps strong { color: var(--accent); }
    #install-section.installed .btn-primary { display: none; }
    #install-section.installed #install-hint { color: var(--ok); }
    a.btn-primary { -webkit-touch-callout: none; }