/* ============================================================
   css/money-components.css — 管钱模块基础组件（管钱 V3 · 第 5 窗口新增）

   手册 §4 / §十八：**先建组件，再统一页面**。同一件东西只设计一次。
   这一份就是钱这一块的「按钮 / 输入 / 选择 / 小窗 / 弹窗 / 状态 / 提示 / 空态 /
   骨架 / 数字键盘 / 分隔线」的唯一实现——别在页面里另造一套。

   规矩：
     · 颜色/圆角/阴影/动效**全部引用 --money-***（css/money-tokens.css），这里不许写死颜色
     · 一律带齐九态：default / hover / active / focus-visible / disabled
       / loading / success / error / selected
     · 触摸目标 ≥ --money-tap（44px）
     · 状态一律用 .is-* 类名表达，**不许页面里写行内 style**
     · 桌面端一律限宽 480 居中（.money-layer），绝不横铺
     · focus 用自家的：outline-offset + 玫瑰细环，绝不 outline:none 后什么都不补
   ============================================================ */

/* ============================================================
   一、浮层 / 小窗 / 弹窗
   ============================================================ */

/* ---- 全屏层（管钱面板 / 红包 / 转账）---- */
.money-overlay {
    position: fixed; inset: 0;
    z-index: var(--z-money-base);
    display: none; flex-direction: column;
    background: var(--money-bg);
    color: var(--money-ink);
    font-family: var(--money-font);
    /* 顶部安全区：刘海/状态栏不许压住返回栏（手册 §D）*/
    padding-top: var(--safe-top);
    /* standalone 铺满（长期规则 #35）*/
    height: 100vh;
}
.money-overlay.is-open,
.money-overlay.open { display: flex; }

/* 桌面/平板：手机屏居中限宽，绝不横铺（手册 §C / §二十）*/
@media (min-width: 481px) {
    .money-overlay {
        left: 50%; transform: translateX(-50%);
        width: 100%; max-width: 480px;
        box-shadow: var(--money-shadow-lg);
    }
}

/* ---- 底部小窗（自绘；禁系统 ActionSheet 长相）---- */
.money-scrim {
    position: fixed; inset: 0;
    z-index: var(--z-money-sheet);
    display: none; align-items: flex-end; justify-content: center;
    background: oklch(0.22 0.02 60 / 0.34);
    padding-top: var(--safe-top);
    opacity: 0;
    transition: opacity var(--money-duration-base) var(--money-ease);
    -webkit-tap-highlight-color: transparent;
}
.money-scrim.is-open { display: flex; opacity: 1; }

.money-sheet {
    width: 100%;
    box-sizing: border-box;
    background: var(--money-bg);
    color: var(--money-ink);
    font-family: var(--money-font);
    border-radius: var(--money-radius-card) var(--money-radius-card) 0 0;
    box-shadow: var(--money-shadow-lg);
    padding: 18px 16px calc(16px + var(--safe-bottom));
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(12px);
    transition: transform var(--money-duration-slow) var(--money-ease);
}
.money-scrim.is-open .money-sheet { transform: translateY(0); }

/* 小窗拖手（一条细横线，替代系统 ActionSheet 的顶栏）*/
.money-grabber {
    width: 34px; height: 3px; margin: -6px auto 12px;
    border-radius: var(--money-radius-tag);
    background: var(--money-line);
    flex: 0 0 auto;
}

/* ---- 居中弹窗（支付错误 / 二次确认）---- */
.money-modal-scrim {
    position: fixed; inset: 0;
    z-index: var(--z-money-critical);
    display: none; align-items: center; justify-content: center;
    background: oklch(0.22 0.02 60 / 0.42);
    padding: 20px calc(20px + env(safe-area-inset-left, 0px))
             calc(20px + var(--safe-bottom)) calc(20px + env(safe-area-inset-right, 0px));
    opacity: 0;
    transition: opacity var(--money-duration-base) var(--money-ease);
}
.money-modal-scrim.is-open { display: flex; opacity: 1; }

.money-modal {
    width: 100%; max-width: 320px;
    box-sizing: border-box;
    background: var(--money-surface-solid);
    color: var(--money-ink);
    font-family: var(--money-font);
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-card);
    box-shadow: var(--money-shadow-lg);
    padding: 22px 20px 18px;
    text-align: center;
    transform: translateY(8px);
    transition: transform var(--money-duration-base) var(--money-ease);
}
.money-modal-scrim.is-open .money-modal { transform: translateY(0); }

/* ============================================================
   二、头 / 段 / 分隔
   ============================================================ */
.money-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex: 0 0 auto;
    min-height: 52px; padding: 8px 14px;
    background: var(--money-surface-solid);
    border-bottom: 0.5px solid var(--money-divider);
}
.money-title {
    font-size: var(--money-fs-title);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--money-ink);
}
.money-head-space { width: var(--money-tap); flex: 0 0 auto; }

/* 返回 / 关闭：看得见的是 20px 图标，够得着的是 44px */
.money-icon-btn {
    width: var(--money-tap); height: var(--money-tap);
    flex: 0 0 auto; padding: 0;
    border: 0; background: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--money-ink);
    cursor: pointer; border-radius: var(--money-radius-btn);
    transition: background var(--money-duration-fast) var(--money-ease),
                color var(--money-duration-fast) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.money-icon-btn svg { width: 20px; height: 20px; }
.money-icon-btn:hover { background: var(--money-surface-soft); }
.money-icon-btn:active { transform: scale(0.94); color: var(--money-accent-strong); }

/* 可滚动内容区（底部给足留白，滚动到底不会贴住安全区）*/
.money-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--money-pad-page) var(--money-pad-page) 16px;
    background: var(--money-bg);
}

/* 底部动作台（主按钮那一行）*/
.money-footer {
    flex: 0 0 auto;
    padding: 10px 16px calc(14px + var(--safe-bottom));
    background: var(--money-surface-solid);
    border-top: 0.5px solid var(--money-divider);
}

.money-section { margin-bottom: var(--money-pad-module); }
.money-section:last-child { margin-bottom: 0; }
.money-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.money-section-title {
    font-size: var(--money-fs-body);
    font-weight: 600; color: var(--money-ink);
}
.money-section-note { font-size: var(--money-fs-sub); color: var(--money-muted); }

.money-divider {
    height: 0.5px; background: var(--money-divider);
    border: 0; margin: 16px 0;
}

/* 英文装饰（每屏最多一条；只做装饰，不承载功能）*/
.money-en {
    font-family: var(--money-font-num);
    font-style: italic;
    font-size: var(--money-fs-en);
    letter-spacing: 0.06em;
    color: var(--money-warm);
    opacity: 0.85;
}
.money-script {
    font-family: var(--font-script);
    font-size: 22px; line-height: 1.1;
    color: var(--money-accent);
    opacity: 0.75;
}

/* ============================================================
   三、金额（同一个金额组件只设计一次）
   ============================================================ */
.money-amount {
    display: flex; align-items: baseline; gap: 8px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.money-amount-cny {
    flex: 0 0 auto;
    font-family: var(--money-font-num);
    font-size: 20px; font-weight: 500;
    color: var(--money-muted);
}
.money-amount-num {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--money-font-num);
    font-size: var(--money-fs-hero);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--money-ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-amount.is-blank .money-amount-cny,
.money-amount.is-blank .money-amount-num { color: var(--money-faint); }
.money-amount.is-low .money-amount-num { color: var(--money-danger); }

/* 金额容器：纸面 + 细边，点哪里都能编辑 */
.money-amount-box {
    display: flex; align-items: baseline; gap: 8px;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-card);
    background: var(--money-surface-solid);
    box-shadow: var(--money-shadow-sm);
    cursor: text;
    transition: border-color var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease);
}
.money-amount-box:hover { border-color: var(--money-accent-line); }
.money-amount-box.is-focus,
.money-amount-box:focus-within {
    border-color: var(--money-accent);
    box-shadow: 0 0 0 3px var(--money-accent-soft);
}
.money-amount-box.is-blank { border-style: dashed; }

/* 金额打进去的那个真输入框（自绘外观，禁浏览器默认控件）*/
.money-amount-input {
    flex: 1 1 auto; min-width: 0;
    padding: 0; border: 0; outline: 0; background: transparent;
    font-family: var(--money-font-num);
    font-size: var(--money-fs-hero);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--money-ink);
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none; appearance: none;
}
.money-amount-input::placeholder { color: var(--money-faint); }

/* ============================================================
   四、按钮
   ============================================================ */
.money-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: var(--money-tap);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--money-radius-btn);
    background: var(--money-accent-strong);
    color: var(--money-on-accent);
    font-family: var(--money-font);
    font-size: 15px; font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                background var(--money-duration-base) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease),
                opacity var(--money-duration-base) var(--money-ease);
}
.money-button:hover { background: var(--money-accent); }
.money-button:active { transform: scale(0.98); }
.money-button:focus-visible {
    outline: 2px solid var(--money-accent);
    outline-offset: 2px;
}
.money-button.is-block { display: flex; width: 100%; }

.money-button-secondary {
    background: transparent;
    border-color: var(--money-line);
    color: var(--money-ink-soft);
}
.money-button-secondary:hover {
    background: var(--money-surface-soft);
    border-color: var(--money-accent-line);
    color: var(--money-on-accent-soft);
}

.money-button-danger {
    background: var(--money-danger);
    color: var(--money-on-accent);
}
.money-button-danger:hover { background: var(--money-danger); filter: brightness(1.06); }

.money-button-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--money-accent-strong);
    font-weight: 500;
}
.money-button-ghost:hover { background: var(--money-accent-soft); }

/* 九态：禁用 / 进行中 / 成功 / 出错 */
.money-button:disabled,
.money-button.is-disabled {
    opacity: 0.45; cursor: default; transform: none;
    pointer-events: none;
}
.money-button.is-loading { cursor: default; pointer-events: none; }
.money-button.is-loading::before {
    content: '';
    width: 14px; height: 14px; flex: 0 0 auto;
    border-radius: 50%;
    border: 1.6px solid currentColor;
    border-top-color: transparent;
    animation: moneySpin 720ms linear infinite;
}
.money-button.is-success { background: var(--money-success); }
.money-button.is-error { background: var(--money-danger); }

@keyframes moneySpin { to { transform: rotate(360deg); } }

/* 兼容：全站共用的旧主按钮类（小金库/家规/目标/转账几处还在用）→ 拉进同一套视觉 */
.money-submit-btn {
    display: block; width: 100%;
    box-sizing: border-box;
    min-height: var(--money-tap);
    padding: 14px 20px;
    border: 0;
    border-radius: var(--money-radius-btn);
    background: var(--money-accent-strong);
    color: var(--money-on-accent);
    font-family: var(--money-font);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                background var(--money-duration-base) var(--money-ease),
                opacity var(--money-duration-base) var(--money-ease);
}
.money-submit-btn:hover { background: var(--money-accent); }
.money-submit-btn:active { transform: scale(0.98); opacity: 1; }
.money-submit-btn:disabled { opacity: 0.45; cursor: default; }
.money-submit-btn.is-ghost {
    background: transparent;
    border: 1px solid var(--money-line);
    color: var(--money-ink-soft);
    box-shadow: none;
}
.money-submit-btn.is-ghost:hover { background: var(--money-surface-soft); }

/* 次级小按钮（胶囊，但只用在「改名/更多设置」这种轻动作上）*/
.money-chip-btn {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    min-height: 34px; padding: 0 14px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-tag);
    background: transparent;
    color: var(--money-ink-soft);
    font-family: var(--money-font);
    font-size: 12.5px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease);
}
.money-chip-btn:hover { border-color: var(--money-accent-line); color: var(--money-on-accent-soft); }
.money-chip-btn:active { transform: scale(0.96); }
.money-chip-btn.is-on {
    border-color: var(--money-accent);
    background: var(--money-accent-soft);
    color: var(--money-on-accent-soft);
}

/* ============================================================
   五、输入 / 选择（一律自绘，禁原生 select、禁原生日期框）
   ============================================================ */
.money-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.money-field:last-child { margin-bottom: 0; }
.money-field-label {
    font-size: var(--money-fs-sub);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--money-ink-soft);
}
.money-field-hint {
    font-size: 11.5px; line-height: 1.55;
    color: var(--money-muted);
}
.money-field-hint.is-error { color: var(--money-danger); }

.money-input,
.money-textarea {
    width: 100%; box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-input);
    background: var(--money-surface-solid);
    color: var(--money-ink);
    font-family: var(--money-font);
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease);
}
.money-textarea { resize: none; min-height: 72px; }
.money-input:hover, .money-textarea:hover { border-color: var(--money-accent-line); }
.money-input:focus, .money-textarea:focus {
    border-color: var(--money-accent);
    box-shadow: 0 0 0 3px var(--money-accent-soft);
}
.money-input::placeholder, .money-textarea::placeholder { color: var(--money-faint); }
.money-input:disabled, .money-textarea:disabled {
    background: var(--money-surface-soft); color: var(--money-muted); cursor: default;
}
.money-input.is-error, .money-textarea.is-error { border-color: var(--money-danger); }
.money-input:-webkit-autofill {
    -webkit-text-fill-color: var(--money-ink);
    box-shadow: 0 0 0 60px var(--money-surface-solid) inset;
}

/* 连字符底线的「信笺」输入（红包/转账那种轻输入）*/
.money-input-line {
    display: flex; align-items: center; gap: 8px;
    box-sizing: border-box;
    padding: 2px 0;
    border-bottom: 1px solid var(--money-line);
    transition: border-color var(--money-duration-base) var(--money-ease);
}
.money-input-line:focus-within { border-bottom-color: var(--money-accent); }
.money-input-line > input {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 0;
    border: 0; outline: 0; background: transparent;
    font-family: var(--money-font); font-size: 15px;
    color: var(--money-ink);
    -webkit-appearance: none; appearance: none;
}
.money-input-line > input::placeholder { color: var(--money-faint); }

/* ---- 自绘选择行（点开 → .money-sheet 里的选项列表）---- */
.money-select {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    min-height: 56px; padding: 10px 13px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    font-family: var(--money-font);
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease);
}
.money-select:hover { border-color: var(--money-accent-line); }
.money-select:active { transform: scale(0.99); }
.money-select:focus-visible { outline: 2px solid var(--money-accent); outline-offset: 2px; }
.money-select-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.money-select-name {
    font-size: 14.5px; color: var(--money-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-select-sub {
    font-size: var(--money-fs-sub); color: var(--money-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-select-value {
    flex: 0 0 auto;
    font-family: var(--money-font-num);
    font-size: 14px; color: var(--money-ink);
    font-variant-numeric: tabular-nums;
}
.money-select-value.is-low { color: var(--money-danger); }
.money-select-arrow {
    flex: 0 0 auto; width: 18px; height: 18px;
    color: var(--money-faint);
}
.money-select-arrow svg { width: 18px; height: 18px; }
.money-select.is-disabled { opacity: 0.5; pointer-events: none; }

/* 选项（选择小窗里那一行行）*/
.money-select-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    min-height: 56px; padding: 11px 13px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    font-family: var(--money-font);
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease),
                opacity var(--money-duration-base) var(--money-ease);
}
.money-select-option + .money-select-option { margin-top: 8px; }
.money-select-option:hover { border-color: var(--money-accent-line); }
.money-select-option:active { transform: scale(0.99); }
.money-select-option.is-selected {
    border-color: var(--money-accent);
    background: var(--money-accent-soft);
}
.money-select-option.is-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.money-select-option-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.money-select-option-name {
    font-size: 14.5px; color: var(--money-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-select-option-sub {
    font-size: var(--money-fs-sub); color: var(--money-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-select-option-value {
    flex: 0 0 auto; font-family: var(--money-font-num); font-size: 14px;
    color: var(--money-ink-soft); font-variant-numeric: tabular-nums;
}
.money-select-option-value.is-low { color: var(--money-danger); }
.money-select-option-tick {
    flex: 0 0 auto; width: 18px; height: 18px;
    color: var(--money-accent-strong);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-base) var(--money-ease);
}
.money-select-option.is-selected .money-select-option-tick { opacity: 1; transform: scale(1); }
.money-select-option-tick svg { width: 18px; height: 18px; }

/* ---- 小片（分类 / 快捷金额 / 钱袋标签）---- */
.money-chip {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    min-height: 38px; padding: 0 16px;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-tag);
    background: var(--money-surface-solid);
    color: var(--money-ink-soft);
    font-family: var(--money-font);
    font-size: 13px; cursor: pointer;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                background var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease);
}
.money-chip:hover { border-color: var(--money-accent-line); }
.money-chip:active { transform: scale(0.96); }
.money-chip.is-on {
    border-color: var(--money-accent);
    background: var(--money-accent-soft);
    color: var(--money-on-accent-soft);
}
.money-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   六、卡 / 状态标 / 流水行
   ============================================================ */
.money-card {
    box-sizing: border-box;
    padding: var(--money-pad-inner);
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    box-shadow: var(--money-shadow-sm);
}
.money-card.is-flat { box-shadow: none; background: var(--money-surface-soft); }
.money-card.is-pressable { cursor: pointer; }
.money-card.is-pressable:active { transform: scale(0.99); }
.money-card + .money-card { margin-top: 10px; }

/* 钱袋/卡那一格（轻列表卡，不是 180px 大卡）*/
.money-card-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 62px;
}
.money-card-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.money-card-row-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 14.5px; color: var(--money-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-card-row-sub {
    font-size: var(--money-fs-sub); color: var(--money-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-card-row-amount {
    flex: 0 0 auto;
    font-family: var(--money-font-num);
    font-size: 18px; font-weight: 500; color: var(--money-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* 状态标（全圆角；底浅、字深，绝不在浅底上压白字）*/
.money-status {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--money-radius-tag);
    background: var(--money-surface-soft);
    color: var(--money-ink-soft);
    font-family: var(--money-font);
    font-size: 10.5px; line-height: 1.5; font-weight: 500;
    white-space: nowrap;
}
.money-status.is-waiting { background: var(--money-warm-soft); color: var(--money-on-accent-soft); }
.money-status.is-done    { background: var(--money-success-soft); color: var(--money-success); }
.money-status.is-failed  { background: var(--money-danger-soft); color: var(--money-danger); }
.money-status.is-expired { background: var(--money-surface-soft); color: var(--money-muted); }

/* 能力三档：能点 / 不能点（唯一判据在 JS，这里只负责长相）*/
.is-dimmed { opacity: 0.5; }
.money-row.is-selected { background: var(--money-accent-soft); }

/* ============================================================
   七、数字键盘（**全站只有这一个**：管钱面板、挪钱、红包、转账、支付密码共用）
   ============================================================ */
.money-number-pad {
    display: flex; flex-direction: column;
    gap: 8px;
    padding-bottom: var(--safe-bottom);
    flex: 0 0 auto;
}
.money-number-pad-row { display: flex; gap: 8px; }
.money-key {
    flex: 1 1 0; min-width: 0;
    min-height: var(--money-tap);
    padding: 0;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-btn);
    background: var(--money-surface-solid);
    color: var(--money-ink);
    font-family: var(--money-font-num);
    font-size: 21px; font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease),
                color var(--money-duration-fast) var(--money-ease);
}
.money-key:hover { background: var(--money-surface-soft); }
.money-key:active { transform: scale(0.98); background: var(--money-accent-soft); }
.money-key:focus-visible { outline: 2px solid var(--money-accent); outline-offset: 2px; }
.money-key.is-empty {
    background: transparent; border-color: transparent;
    cursor: default; pointer-events: none;
}
/* 退格：线条图标，不是 emoji */
.money-key.is-back {
    display: flex; align-items: center; justify-content: center;
    color: var(--money-ink-soft);
}
.money-key.is-back svg { width: 22px; height: 22px; }
/* 确认键：整盘只有这一个强调色，别的键都不做成按钮 */
.money-key.is-done {
    background: var(--money-accent-strong);
    border-color: transparent;
    color: var(--money-on-accent);
    font-family: var(--money-font);
    font-size: 15px; font-weight: 600;
}
.money-key.is-done:hover { background: var(--money-accent); }
.money-key.is-done:active { background: var(--money-accent-strong); transform: scale(0.98); }
.money-key.is-done:disabled { opacity: 0.45; cursor: default; }

/* 密码格子（支付密码；填进去是圆点 + 微缩放）*/
.money-pin-row {
    display: flex; gap: 10px; justify-content: center;
    padding: 14px 0;
}
.money-pin-box {
    width: 42px; height: 48px;
    box-sizing: border-box;
    border: 1px solid var(--money-line);
    border-radius: var(--money-radius-input);
    background: var(--money-surface-solid);
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.money-pin-box::after {
    content: '';
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--money-accent-strong);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-base) var(--money-ease);
}
.money-pin-box.is-filled { border-color: var(--money-accent-line); }
.money-pin-box.is-filled::after { opacity: 1; transform: scale(1); }
.money-pin-box.is-active {
    border-color: var(--money-accent);
    box-shadow: 0 0 0 3px var(--money-accent-soft);
}
.money-pin-box.is-shake { animation: moneyShake 380ms var(--money-ease); }
@keyframes moneyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ============================================================
   八、提示（toast）/ 二次确认 / 空态 / 骨架 / 进行中
   ============================================================ */

/* 纸签式轻提示（不是系统 alert）*/
.money-toast {
    position: fixed;
    left: 50%; transform: translateX(-50%) translateY(6px);
    bottom: calc(88px + var(--safe-bottom));
    z-index: var(--z-money-critical);
    max-width: 300px;
    box-sizing: border-box;
    padding: 11px 16px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    color: var(--money-ink);
    font-family: var(--money-font);
    font-size: 13.5px; line-height: 1.5; text-align: center;
    box-shadow: var(--money-shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-base) var(--money-ease);
}
.money-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 二次确认（自绘；文案写清「会发生什么」，不写「确定删除吗」）*/
.money-confirm { text-align: center; }
.money-confirm-title {
    font-size: 16px; font-weight: 600; color: var(--money-ink);
    margin-bottom: 8px;
}
.money-confirm-desc {
    font-size: var(--money-fs-sub); line-height: 1.65;
    color: var(--money-muted);
    margin-bottom: 18px;
}
.money-confirm-actions { display: flex; gap: 10px; }
.money-confirm-actions > * { flex: 1 1 0; }

/* 空态（生活化但克制，不用「暂无数据」，不用 emoji 插画）*/
.money-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 34px 20px;
    text-align: center;
}
.money-empty-mark {
    width: 34px; height: 34px;
    color: var(--money-faint);
    opacity: 0.9;
}
.money-empty-mark svg { width: 100%; height: 100%; }
.money-empty-title { font-size: 14px; color: var(--money-ink-soft); }
.money-empty-sub { font-size: var(--money-fs-sub); color: var(--money-muted); line-height: 1.6; }
.money-empty .money-button { margin-top: 6px; }

/* 骨架（只在真的等超过阈值时才出现，别一点就闪）*/
.money-skeleton {
    border-radius: var(--money-radius-surface);
    background: linear-gradient(90deg,
        var(--money-surface-soft) 25%,
        var(--money-line-faint) 37%,
        var(--money-surface-soft) 63%);
    background-size: 400% 100%;
    animation: moneyShimmer 1.5s ease-in-out infinite;
    min-height: 56px;
}
@keyframes moneyShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* 进行中（细线环形进度；不是白盒子「支付中」）*/
.money-busy {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.money-busy-ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2px solid var(--money-line);
    border-top-color: var(--money-accent-strong);
    animation: moneySpin 900ms linear infinite;
}
.money-busy-text { font-size: 13.5px; color: var(--money-ink-soft); }

/* ============================================================
   十、小金库页里那几个自己画的浮层
   （当日明细 / 作废确认 / 卡片详情 / 改用途 / 换卡面 / 挪钱 / 管理员）
   这些原来是 JS 里一行行 style.cssText 写出来的（手册 §十八 A 明确禁止），
   现在统一走类名 + 令牌。挂 #app 内、层级走 --z-money-*。
   ============================================================ */

/* ---- 卡片详情小窗（点卡片弹出来的那一个）----
   旧版是一行行文字 + 「取消」＝系统 ActionSheet 长相；
   现在：顶上一张卡的样子，下面按「常用 / 外观 / 高级 / 危险」分组。 */
.money-card-sheet { padding-bottom: calc(16px + var(--safe-bottom)); }
.money-card-sheet-head {
    display: flex; align-items: stretch; gap: 12px;
    margin-bottom: 16px;
}
.money-card-sheet-face {
    width: 92px; flex: 0 0 auto;
    min-height: 62px;
    border-radius: var(--money-radius-surface);
    border: 1px solid var(--money-line-faint);
    background: var(--money-surface-soft);
    box-shadow: var(--money-shadow-sm);
}
.money-card-sheet-info { flex: 1 1 auto; min-width: 0; }
.money-card-sheet-name {
    font-size: 15px; font-weight: 600; color: var(--money-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-card-sheet-sub {
    margin-top: 4px;
    font-size: var(--money-fs-sub); color: var(--money-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.money-card-sheet-amt {
    margin-top: 8px;
    font-family: var(--money-font-num);
    font-size: 22px; font-weight: 500; color: var(--money-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.money-card-group { margin-bottom: 14px; }
.money-card-group-title {
    font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--money-muted);
    margin-bottom: 8px;
}
.money-card-group.is-danger .money-card-group-title { color: var(--money-danger); }
.money-card-group-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    width: 100%; box-sizing: border-box;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-solid);
    font-family: var(--money-font);
    font-size: 14.5px; color: var(--money-ink);
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--money-duration-base) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                transform var(--money-duration-fast) var(--money-ease);
}
.money-card-group-row + .money-card-group-row { margin-top: 8px; }
.money-card-group-row:hover { border-color: var(--money-accent-line); }
.money-card-group-row:active { transform: scale(0.99); }
.money-card-group-row.is-danger { color: var(--money-danger); border-color: var(--money-danger-soft); }
.money-card-group-row.is-danger:hover { background: var(--money-danger-soft); }
.money-card-sheet-cancel { margin-top: 4px; }

/* ---- 改用途（一个小居中弹窗）---- */
.money-purpose-edit { text-align: left; }
.money-purpose-edit .money-confirm-title,
.money-purpose-edit .money-confirm-desc { text-align: center; }
.money-purpose-edit .money-input { margin-bottom: 18px; }

/* ---- 换卡面（自绘色块 + 名字；选中的加玫瑰细环 + 线条对勾）---- */
.money-style-picker { padding-bottom: calc(16px + var(--safe-bottom)); }
.money-style-title {
    font-size: var(--money-fs-title); font-weight: 600;
    color: var(--money-ink);
    text-align: center;
}
.money-style-note {
    margin: 6px 0 16px;
    font-size: var(--money-fs-sub); color: var(--money-muted);
    text-align: center; line-height: 1.6;
}
.money-style-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.money-style-opt {
    position: relative;
    aspect-ratio: 1.6;
    box-sizing: border-box;
    border: 1.5px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-soft);
    cursor: pointer; padding: 0;
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease);
}
.money-style-opt:hover { border-color: var(--money-accent-line); }
.money-style-opt:active { transform: scale(0.97); }
.money-style-opt.is-on {
    border-color: var(--money-accent);
    box-shadow: 0 0 0 3px var(--money-accent-soft);
}
.money-style-opt.is-dashed { border-style: dashed; border-color: var(--money-line); }
/* 卡面上那一行名字：压在浅纸底上是深字（她自己传的图可能深可能浅，所以加一层底）*/
.money-style-opt-name {
    width: 100%;
    padding: 4px 6px;
    font-family: var(--money-font);
    font-size: 11px;
    color: var(--money-ink);
    background: oklch(1 0 0 / 0.62);
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.money-style-opt.is-dark-face .money-style-opt-name {
    color: oklch(0.955 0.008 84);
    background: oklch(0 0 0 / 0.34);
}
.money-style-tick {
    position: absolute; top: 5px; right: 5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--money-accent-strong);
    color: var(--money-on-accent);
    display: flex; align-items: center; justify-content: center;
}
.money-style-tick svg { width: 12px; height: 12px; }
/* 关掉这个小窗（「先不动」）：不许只是「一个普通按钮」飘在那儿，
   也不许用系统默认外观 —— 它是这一屏最后一行，独处一行、居中、够高。 */
.money-style-cancel {
    display: block;
    width: 100%; box-sizing: border-box;
    min-height: var(--money-tap);
    margin-top: 4px;
    border: 1px solid var(--money-line-faint);
    border-radius: var(--money-radius-btn);
    background: transparent;
    font-family: var(--money-font);
    font-size: 14.5px;
    color: var(--money-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--money-duration-base) var(--money-ease),
                color var(--money-duration-base) var(--money-ease);
}
.money-style-cancel:hover { background: var(--money-surface-soft); color: var(--money-ink); }
.money-style-cancel:active { transform: scale(0.99); }
/* 真正触发的还是系统文件选择器（系统层不伪造），但视觉入口是我们自己的按钮 */
.money-hidden-file { display: none; }

/* ---- 新建钱袋（两步表单：第一步只问名字 + 先放多少）---- */
.ncf-gap { margin-top: 14px; }
.ncf-grid { margin: 8px 0 12px; }
.ncf-wide {
    display: block; width: 100%; box-sizing: border-box;
    min-height: var(--money-tap);
    text-align: center;
}
/* 卡面九宫格的一格：她挑的那一款（颜色只能由 JS 带过来）*/
.card-style-option {
    aspect-ratio: 1.6;
    border: 1.5px solid var(--money-line-faint);
    border-radius: var(--money-radius-surface);
    background: var(--money-surface-soft);
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--money-duration-fast) var(--money-ease),
                border-color var(--money-duration-base) var(--money-ease),
                box-shadow var(--money-duration-base) var(--money-ease);
}
.card-style-option:hover { border-color: var(--money-accent-line); }
.card-style-option:active { transform: scale(0.97); }
.card-style-option.selected {
    border-color: var(--money-accent);
    box-shadow: 0 0 0 3px var(--money-accent-soft);
}

/* ---- 作废一笔 / 危险动作的二次确认（自绘，不是浏览器 confirm）---- */
.day-detail-confirm-scrim {
    position: fixed; inset: 0;
    left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    box-sizing: border-box;
    z-index: var(--z-money-critical);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: oklch(0.22 0.02 60 / 0.46);
    opacity: 0;
    transition: opacity var(--money-duration-base) var(--money-ease);
}
.day-detail-confirm-scrim.is-open { opacity: 1; }
.day-detail-confirm-scrim .money-modal {
    max-width: 316px;
    transform: translateY(8px);
    transition: transform var(--money-duration-base) var(--money-ease);
}
.day-detail-confirm-scrim.is-open .money-modal { transform: translateY(0); }

/* 详情里的空态（说人话，不用「加载失败」「暂无数据」）*/
.day-detail-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--money-muted);
}

/* 金额变化时不瞬变：淡出 → 淡入 + 上浮（手册 §11.17 / §22）*/
.money-amount-tick { animation: moneyAmountIn 240ms var(--money-ease); }
@keyframes moneyAmountIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .day-detail-confirm-scrim, .day-detail-confirm-scrim .money-modal,
    .money-style-opt, .money-card-group-row { transition: none; }
    .money-amount-tick { animation: none; }
}

/* ============================================================
   十一、窄屏（<370px）与减少动效
   ============================================================ */
@media (max-width: 369px) {
    :root {
        --money-fs-hero: 27px;
        --money-pad-page: 15px;
        --money-pad-module: 18px;
    }
    .money-key { font-size: 19px; }
    .money-pin-box { width: 36px; height: 44px; }
    .money-pin-row { gap: 7px; }
    .money-number-pad { gap: 6px; }
    .money-number-pad-row { gap: 6px; }
    .money-card-row-amount { font-size: 16px; }
}

/* 430/480 不放大任何东西：保持「手机设计」的比例（手册 §二十）*/

@media (prefers-reduced-motion: reduce) {
    .money-scrim, .money-sheet, .money-modal-scrim, .money-modal,
    .money-key, .money-chip, .money-button, .money-submit-btn, .money-select,
    .money-select-option, .money-card, .money-toast, .money-pin-box,
    .money-skeleton, .money-busy-ring, .money-icon-btn, .money-chip-btn {
        transition: none;
        animation: none;
    }
    .money-skeleton { background: var(--money-surface-soft); }
}