/* =================================================================
 *         E7 统一记账系统 - 样式表 (v2.2-UI/UX专家修订版)
 *         更新内容:
 *         1. [FIX] 修复滑动删除功能。重构了 .record-item 相关样式，确保
 *            滑动时能正确露出删除按钮。
 *         2. [FIX] 修复 PWA 在 iOS 上的底部安全区域留白问题。
 *         3. [ENH] 优化 FAB 添加按钮，采用更直观、美观的纯图标设计。
 *         4. [NEW] 添加开屏页样式
 * ================================================================= */

/* =================================================================
 * 金额输入框焦点增强样式 - iOS Safari自动聚焦优化
 * ================================================================= */

/* 增强模态框输入框的基础样式 - 移除transition避免延迟 */
.modal-input {
    transition: none !important;
}

/* 金额输入框焦点样式 - 立即显示视觉反馈 */
.modal-input.amount-input-focus:focus {
    outline: none !important;
    border: 2px solid #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
    transform: scale(1.02) !important;
    transition: none !important;
}

/* 深色模式下的焦点样式 */
.dark-mode .modal-input.amount-input-focus:focus {
    border-color: #1abc9c !important;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2) !important;
}

/* 为输入框添加脉动动画提示用户已聚焦 */
@keyframes pulse-focus {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(52, 152, 219, 0);
    }
}

.modal-input.amount-input-focus:focus {
    animation: pulse-focus 1.5s ease-in-out !important;
}

/* iOS Safari 特定优化 - 确保输入框可见并触发键盘 */
.modal-input:focus {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 开屏页样式 */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f4f8, #e1e8f0, #f0f4f8);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    /* 增加动态粒子效果 */
    position: relative;
    isolation: isolate;
}

/* 动态粒子效果 */
.splash-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(3px 3px at 20px 30px, rgba(100, 150, 200, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(150, 200, 250, 0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(200, 250, 255, 0.9), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(100, 150, 200, 0.7), transparent),
        radial-gradient(3px 3px at 160px 30px, rgba(150, 200, 250, 0.5), transparent),
        radial-gradient(1px 1px at 220px 90px, rgba(200, 250, 255, 0.8), transparent),
        radial-gradient(2px 2px at 250px 40px, rgba(100, 150, 200, 0.6), transparent),
        radial-gradient(1px 1px at 300px 70px, rgba(150, 200, 250, 0.7), transparent),
        radial-gradient(2px 2px at 350px 120px, rgba(200, 250, 255, 0.6), transparent),
        radial-gradient(1px 1px at 400px 50px, rgba(100, 150, 200, 0.8), transparent);
    background-repeat: repeat;
    background-size: 300px 150px;
    animation: sparkle 6s ease-in-out infinite;
    opacity: 0.7;
    z-index: 0;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 星空闪烁动画 */
@keyframes sparkle {
    0% {
        background-position: 0 0;
        opacity: 0.9;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        background-position: 200px 100px;
        opacity: 0.9;
    }
}

/* 背景形状容器 */
.splash-screen .background-shape {
    position: absolute;
    width: 60vw;
    height: 60vh;
    animation: breathe 12s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate, pulse 6s ease-in-out infinite;
    filter: blur(30px) brightness(1.1);
    opacity: 0.6;
    transition: all 0.5s ease;
}

/* 左上角形状 */
.splash-screen .top-left {
    top: -10vh;
    left: -10vw;
    animation-delay: 0s;
    z-index: 1;
}

/* 右下角形状 */
.splash-screen .bottom-right {
    bottom: -10vh;
    right: -10vw;
    animation-delay: 0.5s; /* 添加动画延迟，增加层次感 */
    z-index: 1;
}

/* SVG形状样式 */
.splash-screen .background-shape svg {
    width: 100%;
    height: 100%;
}

/* 中心内容容器 */
.splash-screen .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1s forwards;
    z-index: 10;
    position: relative;
    transform-style: preserve-3d;
}

/* Logo容器 */
.splash-screen .logo-container {
    margin-bottom: 2px; /* 进一步减少间距，使图标与文字更接近 */
    animation: scaleIn 1.5s cubic-bezier(0.34, 0.69, 0.38, 0.95) 0.5s both, float 4s ease-in-out 2s infinite;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 25px rgba(100, 150, 200, 0.6));
    position: relative;
    z-index: 10;
    transform-origin: center;
}

/* 浮动动画 */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* 标题样式 */
.splash-screen h1 {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 700;
    color: #2C2C2C;
    font-size: 32px;
    margin: 0;
    letter-spacing: 2px;
    animation: slideUp 1.2s cubic-bezier(0.34, 0.69, 0.38, 0.95) 0.8s both, glow 2s ease-in-out 2s infinite alternate;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
    transform-origin: center;
}

/* 发光动画 */
@keyframes glow {
    0% {
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 255, 255, 0.2);
    }
    100% {
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 255, 255, 0.4);
    }
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 缩放进入动画 */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 上滑动画 */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 呼吸感动画 */
@keyframes breathe {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .splash-screen .background-shape {
        width: 80vw;
        height: 80vh;
    }
    
    .splash-screen .top-left {
        top: -15vh;
        left: -15vw;
    }
    
    .splash-screen .bottom-right {
        bottom: -15vh;
        right: -15vw;
    }
    
    .splash-screen h1 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .splash-screen .background-shape {
        width: 100vw;
        height: 100vh;
    }
    
    .splash-screen .top-left {
        top: -20vh;
        left: -20vw;
    }
    
    .splash-screen .bottom-right {
        bottom: -20vh;
        right: -20vw;
    }
    
    .splash-screen h1 {
        font-size: 20px;
    }
}

/* 安全区域处理 */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --tab-bar-height: 60px; /* 增加基础高度以容纳更大的图标和文字 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* PWA 根布局，防止下拉“出戏” */
html {
    color-scheme: light;
}

html, body, .container {
    height: 100%;
}

body {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden; /* 禁止 body 滚动 */
    overscroll-behavior-y: none !important;
    touch-action: none !important;
    color: #333333;
    line-height: 1.6;
}

/* 全屏模式下的特殊处理 */
@media (display-mode: standalone) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* 将 container 作为应用根容器，占满全屏 */
.container {
    max-width: 480px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
    background-attachment: fixed;
    /* 新增，防止滑动穿透 */
    overflow: hidden;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    padding-top: calc(12px + var(--safe-area-top));
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    margin-bottom: 15px;
    min-height: 56px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #eaeaea;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

.header-left {
    justify-content: flex-start;
    margin-right: 10px;
}

.header-right {
    justify-content: flex-end;
    margin-left: 10px;
}

.date-display {
    flex-grow: 1;
    text-align: center;
    font-size: 1rem;
    color: #333333;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.date-display:hover {
    background: rgba(255, 215, 0, 0.1);
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid #eaeaea;
}

.card-title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #415a77;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
    transition: all 0.3s ease;
}

.refresh-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #ffd700;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.refresh-btn:hover {
    transform: rotate(180deg);
    color: #ffaa33;
}

.card-title i {
    margin-right: 12px;
    color: #778da9;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.card .input-row input {
    padding: 12px 16px;
    width: 95%;
}

.card .input-row input[type=text],
.card .input-row input[type=number] {
    width: 90%;
}

.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 8px;
}

.input-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    background: #ffffff;
    color: #333333;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-row input:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    transform: translateY(-1px);
    background: #ffffff;
}

.btn-group {
    display: flex;
    gap: 5px;
}

.action-btn {
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.add-btn {
    background: linear-gradient(to right, #ff8c00, #ffaa33);
}

.edit-btn {
    background: transparent;
}

.delete-btn {
    background: transparent;
}

.action-btn svg.icon {
    width: 22px;
    height: 22px;
    transition: all 0.3s ease;
}

.edit-btn svg.icon {
    fill: #5a9bd5;
}

.delete-btn svg.icon {
    fill: #f47174;
}

.action-btn:hover svg.icon {
    transform: scale(1.1);
}

.action-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.action-btn:active {
    transform: translateY(1px) scale(0.95);
    filter: brightness(0.95);
}

.record-list {
    list-style: none;
    margin-top: 0;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* 滚动提示样式 */
.scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 0;
    color: #778da9;
    font-size: 0.65rem;
    transition: opacity 0.3s ease;
    gap: 3px;
    position: relative;
    margin-top: -1px;
    margin-bottom: -20px; /* 调整margin-bottom以抵消.card的padding-bottom */
    /* 使用更细的盒子阴影，使其更自然地融入卡片 */
    box-shadow: inset 0 0.5px 0 #eaeaea;
    /* 进一步淡化背景，增加透明度 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    /* 添加圆角以匹配卡片的圆角 */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    /* 添加轻微的内边距以增加视觉舒适度 */
    padding: 2px 0;
    /* 添加过渡效果使显示/隐藏更平滑 */
    opacity: 0.8;
    /* 固定高度以确保区域大小不变 */
    height: 20px;
}

.scroll-hint:hover {
    opacity: 1;
}

.scroll-hint i {
    animation: bounce 1.5s infinite;
    font-size: 1rem;
    /* 增大图标大小以提高可见性 */
}

/* 为包含滚动提示的卡片调整底部边框样式 */
#view-records .card {
    position: relative;
}

/* 进账记录列表容器样式调整 */
#view-records .income-list {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 暗黑模式下的滚动提示样式 */
.dark-mode .scroll-hint {
    box-shadow: inset 0 0.5px 0 #415a77;
    /* 进一步淡化背景，增加透明度 */
    background: linear-gradient(to bottom, rgba(26, 27, 30, 0) 0%, rgba(26, 27, 30, 0.5) 100%);
    /* 调整暗黑模式下的文字颜色 */
    color: #90a4ae;
    /* 保持与亮色模式一致的圆角 */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    /* 固定高度以确保区域大小不变 */
    height: 20px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-1px);
    }
}

#view-debts .card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#view-debts .debt-list {
    flex-grow: 1;
    max-height: none;
}

/* 【修复-1】滑动删除样式修正 */
.record-item {
    position: relative; /* 1. 建立定位上下文 */
    overflow: hidden;  /* 2. 隐藏在边界之外的删除按钮 */
    margin: 4px 0;
    border-bottom: 1px solid #eaeaea; /* 将分割线移到这里 */
}

/* 当显示"查看更多"提示时，隐藏最后一条记录的下划线 */
#view-records .income-list .record-item:last-child {
    border-bottom: none;
}

.record-item-wrapper {
    position: relative; /* 确保它在文档流中，并可以设置 z-index */
    z-index: 2; /* 关键：让内容层浮在操作层之上 */
    background: #ffffff; /* 设置背景色以覆盖父容器的分割线 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 0; /* 移除左右内边距 */
    transition: transform 0.3s ease; /* 在恢复时平滑过渡 */
    border-radius: 0; /* 移除圆角 */
    margin-bottom: 0; /* 移除外边距 */
    box-shadow: none; /* 移除阴影 */
}

.swipe-action-delete {
    position: absolute;  /* 绝对定位，相对于 .record-item */
    top: 0;
    right: 0;           /* 关键：紧贴在父容器的右侧边缘 */
    height: 100%;
    width: 80px;        /* 删除按钮的宽度 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;         /* 关键：确保它在内容层的下方 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
}

.swipe-action-delete .delete-btn {
    height: 100%;
    width: 100%;
    border-radius: 0; /* 填满整个操作区域 */
}

.record-item-wrapper[style*="translateX(-80px)"] ~ .swipe-action-delete,
.record-item-wrapper[style*="translateX(-70px)"] ~ .swipe-action-delete,
.record-item-wrapper[style*="translateX(-60px)"] ~ .swipe-action-delete,
.record-item-wrapper[style*="translateX(-50px)"] ~ .swipe-action-delete,
.record-item-wrapper[style*="translateX(-40px)"] ~ .swipe-action-delete {
    opacity: 1;
    pointer-events: auto;
}


.record-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.record-name {
    font-weight: 500;
    color: #333333;
    margin-bottom: 5px;
}

.record-amount {
    font-weight: 600;
    font-size: 1.1rem;
}

.positive {
    color: #28a745;
}

.negative {
    color: #dc3545;
}

.total-income {
    display: flex;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 18px;
    border-radius: 14px;
    margin-top: 15px;
    font-size: 1.4rem;
    font-weight: 700;
    border: 1px solid #e9ecef;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.total-income:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.total-income.positive-income-bg {
    background: #E0F7FA; /* 浅天蓝色 */
}

.total-income.negative-income-bg {
    background: #FFEBEE; /* 红色 */
}

.screenshot-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 90%;
    max-width: 480px;
}

.screenshot-btn {
    background: linear-gradient(135deg, #ff8c00, #ffd700);
    color: #1b263b;
    border: none;
    border-radius: 50px;
    padding: 18px 35px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    border: 2px solid #fff;
}

.screenshot-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 140, 0, 0.4);
    background: linear-gradient(135deg, #ffd700, #ff8c00);
}

.screenshot-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
}

.backup-btn {
    background: linear-gradient(135deg, #3498db, #1abc9c);
}

.restore-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.screenshot-btn i {
    margin-right: 10px;
}

.empty-message {
    text-align: center;
    padding: 20px;
    color: #778da9;
    font-style: italic;
}

.debt-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.debt-name-line {
    margin-bottom: 4px;
}

.debt-name {
    font-weight: 600;
    color: #333333;
    font-size: 1.1rem;
}

.debt-calculation-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.debt-expression {
    color: #666666;
    font-weight: 500;
    text-align: left;
    font-size: 0.95rem;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.debt-result {
    font-weight: 600;
    color: #2ecc71;
    font-size: 1rem;
    white-space: nowrap;
}


.debt-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-left: auto;
    padding-left: 10px;
    gap: 5px;
    align-self: center;
    min-width: 80px; /* 确保有足够的空间显示总金额 */
    position: relative;
    height: 100%;
    justify-content: flex-end; /* 将内容对齐到底部 */
}

.debt-time {
    font-size: 0.75rem;
    color: #778da9;
    white-space: nowrap;
    text-align: center;
    position: absolute;
    top: -20px; /* 再往上移动一点 */
    right: 10px; /* 往左移动一点 */
    transform: translateX(0); /* 移除居中转换 */
}

.debt-result-static {
    font-weight: 600;
    color: #2ecc71;
    font-size: 1rem;
    white-space: nowrap;
    align-self: center;
}

.debt-total {
    font-weight: 700;
    color: #2ecc71;
    min-width: 80px;
    text-align: right;
}

/* debt-item 复用 record-item 的滑动结构，无需额外样式 */
.debt-item {
    width: 100%;
    /* display: flex and align-items 在 .record-item-wrapper 中处理 */
}


.debt-actions, .record-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    padding-left: 10px;
    height: 100%;
}

/* 债务记录项内部布局调整 */
.debt-item .record-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid #eaeaea;
}

.debt-item .record-item-wrapper {
    position: relative;
}

.debt-item .record-item-wrapper {
    align-items: center;
}

.debt-time-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    margin-left: auto;
    padding-left: 10px;
}

.debt-input-section {
    margin-top: 15px;
}

.text-record {
    background: #142133;
    border: none;
    border-radius: 10px;
    padding: 20px;
    color: #e0e1dd;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    max-width: 480px;
    margin: 0 auto;
}

.text-record-title {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    color: #e0e1dd;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #415a77;
}

.text-record-header {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.text-record-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.record-date {
    color: #e0e1dd;
}

.record-total {
    font-weight: bold;
}

.text-record-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.record-line {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    align-items: flex-start;
}

.line-label {
    color: #ff8c00;
    font-weight: bold;
    min-width: 80px;
    font-size: 1.1rem;
}

.line-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
     
.empty-text {
    color: #778da9;
    font-style: italic;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}
.modal.visible {
    display: flex;
}

.modal-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 0 20px 20px;
    width: 90%;
    max-width: 400px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    transition: background 0.3s, border 0.3s;
}

.modal-title {
    font-size: 1.3rem;
    color: #333333;
    margin: 0;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
}

.modal-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    background: #f5f5f5;
    color: #333333;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.modal-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    color: white;
}

.modal-confirm {
    background: linear-gradient(to right, #2ecc71, #27ae60);
}

.modal-cancel {
    background: linear-gradient(to right, #e74c3c, #c0392b);
}

.backup-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-input-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.header-buttons-container {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.header-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: #666666;
    background: transparent;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative; /* 新增，便于内部绝对定位 */
}

.header-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.header-btn:active {
    transform: translateY(1px) scale(0.98);
}

.backup-icon-btn {
    background: linear-gradient(135deg, #3498db, #1abc9c);
}

.restore-icon-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.new-debt-indicator {
    background: rgba(255, 215, 0, 0.2);
    border-left: 3px solid #ffd700;
    animation: highlight 1.5s ease;
}

@keyframes highlight {
    0% { background: rgba(255, 215, 0, 0.5); }
    100% { background: rgba(255, 215, 0, 0.2); }
}

.date-picker-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.date-picker-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border: 2px solid #007bff;
    text-align: center;
}

.date-picker-content .date-picker-title {
    color: #007bff;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.date-picker-content .date-picker-input {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 12px;
    color: #333333;
    margin-bottom: 20px;
}

.date-picker-buttons {
    display: flex;
    gap: 15px;
}

.date-picker-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.date-picker-confirm {
    background: linear-gradient(to right, #2ecc71, #27ae60);
}

.date-picker-cancel {
    background: linear-gradient(to right, #e74c3c, #c0392b);
}

.dark-mode .date-picker-content {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
}

.dark-mode .date-picker-content .date-picker-title {
    color: var(--color-text-primary);
}

.dark-mode .date-picker-content .date-picker-input {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.date-picker-title {
    color: #ffd700;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.date-picker-input {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    background: rgba(42, 52, 72, 0.8);
    border: 1px solid #415a77;
    border-radius: 12px;
    color: #e0e1dd;
    margin-bottom: 20px;
}

.date-picker-buttons {
    display: flex;
    gap: 15px;
}

.date-picker-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.date-picker-confirm {
    background: linear-gradient(to right, #2ecc71, #27ae60);
}

.date-picker-cancel {
    background: linear-gradient(to right, #e74c3c, #c0392b);
}

.stats-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: visible;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
}

.stats-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.stats-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #415a77;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-title i {
    color: #778da9;
}

.stats-period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
}

.date-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.date-label {
    font-size: 0.9rem;
    color: #90e0ef;
}

.stats-period input {
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    color: #333333;
    font-size: 1rem;
}

/* 日期显示按钮样式 - 应用移动端日期选择器 */
.date-display-btn {
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    color: #333333;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: all 0.2s;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-display-btn:hover {
    background: #f8f9fa;
    border-color: #3b82f6;
}

.date-display-btn:active {
    transform: scale(0.98);
}

.update-btn {
    position: absolute;
    top: 6px;
    right: 20px;
    background: linear-gradient(to right, #3498db, #1abc9c);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    z-index: 10;
}

.update-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    margin-top: 15px;
}

.stat-box {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.stat-label {
    font-size: 0.9rem;
    color: #778da9;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: bold;
}

.positive-stat {
    color: #28a745;
}

.negative-stat {
    color: #dc3545;
}

.stats-chart-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    height: 220px;
    position: relative;
    border: 1px solid #e9ecef;
    transition: opacity 0.3s ease;
    opacity: 1;
}


@media (max-width: 480px) {
    .card {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .input-row {
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    .input-row input {
        font-size: 14px;
        padding: 10px;
    }
    
    .action-btn {
        min-width: 36px;
        height: 36px;
        padding: 8px;
    }
    
    .total-income {
        font-size: 1.2rem;
        padding: 12px;
    }
    
    .screenshot-btn {
        padding: 14px 20px;
        font-size: 1.1rem;
    }
    
    .stats-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-box {
        padding: 12px 8px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .stats-toggle {
        gap: 6px;
    }
    
    .stats-toggle-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .stats-chart-container {
        height: 180px;
    }
}

@media (max-width: 350px) {
    .stats-summary {
        grid-template-columns: 1fr;
    }
}

.text-record.plain-text-mode {
    background: #142133 !important;
    color: #e0e1dd !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
    font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif !important;
    text-align: left !important;
    padding: 25px !important;
    border-radius: 10px !important;
    width: 480px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.text-record.plain-text-mode .text-record-title {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    margin: 0 0 10px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid #415a77 !important;
    color: #e0e1dd !important;
    text-align: center !important;
}

.text-record.plain-text-mode .text-record-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
}

.text-record.plain-text-mode .text-record-date {
    display: block !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    color: #e0e1dd !important;
    margin-bottom: 8px !important;
}

.text-record.plain-text-mode .text-record-total-income {
    display: block !important;
    text-align: center !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    padding: 6px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.text-record.plain-text-mode .text-record-section {
    margin-bottom: 8px !important;
    padding: 8px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(65, 90, 119, 0.3) !important;
}

.text-record.plain-text-mode .text-record-subtitle {
    display: block !important;
    font-size: 1.1rem !important;
    color: #ff8c00 !important;
    margin-bottom: 6px !important;
    padding-bottom: 3px !important;
    border-bottom: 1px solid rgba(255, 140, 0, 0.3) !important;
}

.text-record.plain-text-mode .text-record-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
}

.text-record.plain-text-mode .text-record-line {
    display: block !important;
    padding: 4px 8px !important;
    margin: 0 0 1px 0 !important;
    background: rgba(65, 90, 119, 0.2) !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(65, 90, 119, 0.15) !important;
}

.text-record.plain-text-mode .empty-text {
    color: #778da9 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 8px !important;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.status-indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 6px #2ecc71;
    border: 1.5px solid #1b263b;
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s, box-shadow 0.3s;
}
.status-indicator.offline {
    background-color: #e74c3c;
    box-shadow: 0 0 6px #e74c3c;
}

.income-list-enter-active,
.income-list-leave-active {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.income-list-enter {
    opacity: 0;
    transform: translateY(-20px);
}

.income-list-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.expense-list-enter-active,
.expense-list-leave-active {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.expense-list-enter {
    opacity: 0;
    transform: translateX(-20px);
}
.expense-list-leave-to {
    opacity: 0;
    transform: translateX(20px);
}

.debt-list-enter-active,
.debt-list-leave-active {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.debt-list-enter {
    opacity: 0;
    transform: scale(0.95);
}

.debt-list-leave-to {
    opacity: 0;
    transform: scale(1.05);
}

.camera-icon-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(255, 140, 0, 0.2);
}

.camera-icon-btn:active {
    transform: translateY(1px) scale(0.98);
}

/* 调整导航栏以容纳FAB */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center; /* 垂直居中 */
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: var(--safe-area-bottom); /* 仅保留安全区域 */
    z-index: 100;
    border-top: 1px solid #eaeaea;
    height: calc(var(--tab-bar-height) + var(--safe-area-bottom)); /* 使用变量控制高度 */
    overflow: visible; /* 允许FAB按钮溢出 */
    position: relative; /* 确保定位上下文 */
}

.fab-in-bar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* 占据空间 */
    height: 100%; /* 占用导航栏高度 */
    z-index: 102; /* 确保在最上层 */
}

.fab {
    width: 50px; /* 调整FAB按钮大小以适应导航栏 */
    height: 50px; /* 调整FAB按钮大小以适应导航栏 */
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #ffd700);
    color: #1b263b;
    border: 2px solid #ffffff; /* 调整边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem; /* 调整FAB图标大小 */
    cursor: pointer;
    transition: all 0.3s ease; /* 简化过渡效果 */
    position: relative; /* 改为相对定位，使其在导航栏内部垂直居中 */
    z-index: 101;
    -webkit-tap-highlight-color: transparent;
    /* 移除了 bottom 和 transform 属性，以确保按钮完全位于导航栏内部 */
}

.fab:hover {
    transform: scale(1.05); /* 移除Y轴位移，只保留缩放效果 */
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 140, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
    }
}

/* 波纹动画效果 */
.fab-ripple {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .fab {
        width: 48px;
        height: 48px;
        border-width: 2px;
        /* 移除了 bottom 和 transform 属性 */
    }
    
    .fab-options {
        bottom: 60px;
        gap: 15px;
    }
    
    .fab-option i {
        width: 46px;
        height: 46px;
    }
    
    .tab-bar {
        height: calc(var(--tab-bar-height) + var(--safe-area-bottom) - 5px);
    }
    
    .fab::before {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }
    
    .fab:hover {
        transform: scale(1.05); /* 移除Y轴位移 */
    }
}

/* 确保在小屏幕设备上标签提示正常显示 */
@media (max-width: 360px) {
    .fab-option::after {
        right: 50px;
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .fab {
        width: 44px;
        height: 44px;
        border-width: 2px;
        /* 移除了 bottom 和 transform 属性 */
    }
    
    .fab-options {
        bottom: 55px;
    }
    
    .fab::before {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
    }
    
    .fab:hover {
        transform: scale(1.05); /* 移除Y轴位移 */
    }
    
    /* 暗黑模式下的超小屏幕调整 */
    .dark-mode .fab {
        border: 2px solid #1b263b;
    }
    
    .dark-mode .fab:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3), 0 0 8px rgba(255, 149, 0, 0.4);
    }
}

.fab i {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: relative;
    z-index: 2;
}

.fab.active i {
    transform: rotate(225deg);
}

/* 添加发光效果 */
.fab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.8), rgba(255, 215, 0, 0.8));
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.fab:hover::before {
    opacity: 1;
    animation: rotate 3s linear infinite;
}

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

/* fab::after is no longer needed as the button is embedded */
.fab::after {
    display: none;
}

/* 暗黑模式下的样式调整 */
.dark-mode .tab-bar {
    background: #1b263b;
    border-top: 1px solid #415a77;
}

.dark-mode .fab {
    background: linear-gradient(135deg, #ff9500, #ff7b00);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 149, 0, 0.2);
    border: 2px solid #1b263b; /* 调整边框 */
}

.dark-mode .fab:hover {
    transform: scale(1.05); /* 移除Y轴位移 */
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4), 0 0 12px rgba(255, 149, 0, 0.5);
    animation: darkPulse 1.5s infinite;
}

@keyframes darkPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 140, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
    }
}

.dark-mode .fab-ripple {
    background: rgba(255, 255, 255, 0.2);
}

/* 创新FAB菜单样式 (性能优化版) */
.fab-options {
    position: absolute;
    bottom: 60px; /* 调整与主FAB的距离 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 添加初始位移 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 拉大按钮的间距 */
    align-items: center; /* 使按钮水平居中 */
    opacity: 0;
    visibility: hidden;
    /* 明确指定过渡属性，移除 all */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    margin-left: 0; /* 移除可能导致偏移的负边距 */
    z-index: 102; /* 确保在FAB按钮上层 */
}

.fab-options.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); /* 恢复到原始位置 */
}

.fab-option {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* 移除内边距 */
    /* 明确指定过渡属性 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-tap-highlight-color: transparent; /* 修复移动端点击时的灰色方框问题 */
    opacity: 0;
    transform: translateY(20px) scale(0.8);
}

.fab-options.active .fab-option {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 为每个选项添加延迟动画 */
.fab-options.active .fab-option:nth-child(1) {
    transition-delay: 0.05s;
}

.fab-options.active .fab-option:nth-child(2) {
    transition-delay: 0.1s;
}

.fab-options.active .fab-option:nth-child(3) {
    transition-delay: 0.15s;
}

.fab-option:hover {
    transform: scale(1.1); /* 添加悬停放大效果 */
}

.fab i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.fab-option i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* 添加发光效果 */
.fab::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 140, 0, 0.6));
    z-index: 1;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fab:hover::before {
    opacity: 1;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.dark-mode .fab::before {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.6), rgba(255, 123, 0, 0.6));
}

/* 添加标签提示效果 */
.fab-option {
    position: relative;
}

.fab-option::after {
    content: attr(data-label);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.fab-option:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(-5px);
}

.dark-mode .fab-option::after {
    background: rgba(255, 255, 255, 0.9);
    color: #1b263b;
}

.fab-option i:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fab-option:hover i:after {
    opacity: 1;
}

/* 第一个按钮（进账）：使用品牌绿色 */
.fab-option:first-child i {
    background: linear-gradient(135deg, #2ecc71, #28a745);
}

/* 第二个按钮（支出）：使用品牌蓝色 */
.fab-option:nth-child(2) i {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

/* 语音识别按钮样式 */
.fab-option:nth-child(3) i {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

/* 【修复-2】PWA 底部安全区域修复 */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px;
    /* 使用变量计算内边距：导航栏高度 + 15px 间距 + 安全区域 */
    padding-bottom: calc(var(--tab-bar-height) + 15px + var(--safe-area-bottom));
    -webkit-overflow-scrolling: touch;
    /* 防止滑动穿透 */
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    position: relative; /* 新增：为子视图的绝对定位提供基准 */
}

.main-content, .record-list {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.main-content::-webkit-scrollbar,
.record-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

/* .fab-placeholder is replaced by .fab-in-bar */

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999999;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    padding: 3px 0;
    -webkit-tap-highlight-color: transparent; /* 修复移动端点击时的灰色方框问题 */
    position: relative; /* 为我的模块菜单定位提供基准 */
}

.tab-item i {
    font-size: 1.5rem; /* 放大图标 */
    margin-bottom: 4px; /* 增加与文字的间距 */
}

.tab-item span {
    font-size: 0.8rem; /* 放大文字 */
    font-weight: 500;
}

.tab-item.active {
    color: #007bff; /* Blue for light mode */
}

/* 我的模块菜单样式 */
.my-tab {
    position: relative;
}

.my-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    min-width: 120px;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border: 1px solid #eaeaea;
}

.my-menu.active {
    opacity: 1;
    visibility: visible;
}

.my-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #333333;
    cursor: pointer;
    transition: background 0.3s ease;
}

.my-menu-item:hover {
    background: #f5f7fa;
}

.my-menu-item i {
    font-size: 1rem;
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

/* 暗黑模式下的我的模块菜单样式 */
.dark-mode .my-menu {
    background: var(--color-bg-elev-2);
    border: 1px solid var(--color-border);
}

.dark-mode .my-menu-item {
    color: var(--color-text-primary);
}

.dark-mode .my-menu-item:hover {
    background: var(--color-bg-elev-1);
}

.view-fade-leave-active {
    position: absolute; /* 关键：让旧视图脱离文档流，解决闪烁问题 */
    top: 0;
    left: 0;
    right: 0;
    opacity: 0; /* 立即隐藏，无动画 */
}

.text-record-container {
    position: fixed;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    z-index: -1;
}

/* 图表全屏模态框样式 (v3 - 修复启动残留) */
.chart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f8f9fa; /* 亮光模式下的背景颜色 */
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 2000;
    overflow: hidden;
}

.chart-modal.visible {
    display: flex; /* 通过 class 控制显示 */
}

.chart-modal-content {
    position: absolute;
    /* 关键：尺寸交换，宽度等于视口高度，高度等于视口宽度 */
    width: 100vh; 
    height: 100vw;
    transform-origin: center; /* 确保从中心旋转 */
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-modal-header {
    position: absolute;
    /* 旋转后，原来的 top 变成了 right */
    top: 15px;
    right: 15px;
    z-index: 2001;
    /* 不需要反向旋转，让它和屏幕方向一致 */
}

.close-btn {
    background: rgba(0, 0, 0, 0.1);
    color: #333333;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

#modalChartContainer {
    width: 100%;
    height: 100%;
    padding: 10px;
}

/* 支出项目分析样式 */
.expense-analysis-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    align-items: center;
}

.expense-chart-container {
    flex: 1;
    min-width: 120px;
    max-width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.expense-list-details {
    flex: 2;
    list-style: none;
    padding: 0;
    min-width: 200px;
}

.expense-list-details li {
    display: flex;
    flex-direction: column; /* 关键：改为垂直布局 */
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eaeaea;
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding: 12px 0;
}

.dark-mode .expense-list-details li {
    border-bottom: 1px solid #415a77;
}

.expense-list-details li:last-child {
    border-bottom: none;
}

.expense-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333333;
    flex: 1; /* 允许名称部分占据可用空间 */
    min-width: 0; /* 允许子元素收缩 */
}

.expense-item-name .fa-square {
    font-size: 14px;
    flex-shrink: 0; /* 防止图标被压缩 */
}

.expense-item-amount {
    font-weight: 500;
    color: #666666;
    white-space: nowrap; /* 防止金额信息换行 */
    margin-left: 10px; /* 与名称部分保持一定距离 */
}

.expense-item-summary {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center; /* 垂直居中对齐 */
}

.expense-detail-list {
    list-style: none;
    padding: 10px 0 5px 15px;
    margin-top: 8px;
    background: transparent;
    border-radius: 0;
    width: 100%;
}

.expense-detail-list li {
    color: #666666;
}

/* 展开/折叠动画 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}

/* 烟草消费统计样式 */
.tobacco-period-control {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    gap: 15px;
}

.period-nav-btn {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666666;
    transition: all 0.3s ease;
}

.dark-mode .period-nav-btn {
    background: var(--color-bg-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.period-nav-btn:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.dark-mode .period-nav-btn:hover {
    background: var(--color-bg-elev-1);
}

.dark-mode .period-nav-btn:active {
    background: var(--color-bg-elev-2);
    transform: scale(1.05);
}

.period-display {
    font-size: 1.1rem;
    font-weight: 600;
    color: #415a77;
    min-width: 200px;
    text-align: center;
}

.dark-mode .period-display {
    color: #ffd700;
}

.tobacco-brand-accordion {
    margin: 15px 0;
}

.brand-panel {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #ffffff;
    transition: all 0.3s ease;
}

.dark-mode .brand-panel {
    border-color: var(--color-border);
    background: var(--color-bg-surface-2);
}

.brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dark-mode .brand-header {
    background: var(--color-bg-elev-1);
}

.brand-header:hover {
    background: #e9ecef;
}

.dark-mode .brand-header:hover {
    background: var(--color-bg-elev-2);
}

.brand-name {
    font-weight: 600;
    color: #333333;
    font-size: 1.1rem;
}

/* 确保品牌名占据左侧空间，不影响右侧对齐 */
.brand-header .brand-name {
    flex: 1;
    text-align: left;
}

.dark-mode .brand-name {
    color: #ffd700;
}

.brand-summary {
    color: #666666;
    font-size: 0.9rem;
}

/* 右侧汇总严格右对齐并预留宽度，避免因名称长度产生抖动 */
.brand-header .brand-summary {
    margin-left: auto;
    text-align: right;
    min-width: 140px;
}

.dark-mode .brand-summary {
    color: #90e0ef;
}

.brand-header .fas {
    transition: transform 0.3s ease;
}

.brand-header .fa-chevron-up {
    transform: rotate(180deg);
}

.brand-details {
    padding: 10px 15px;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
}

.dark-mode .brand-details {
    background: var(--color-bg-surface-2); /* 调整为深灰色主题色 */
    border-top-color: var(--color-divider);
}

.detail-item {
    position: relative;
    overflow: hidden;
    margin: 0; /* 移除外边距，让分割线紧贴 */
    border-bottom: 1px solid #eaeaea; /* 稳定的分割线 */
}

.detail-item:last-child {
    border-bottom: none; /* 最后一个条目不需要分割线 */
}

.detail-item-wrapper {
    position: relative;
    z-index: 2;
    background: #ffffff; /* 设置背景色以覆盖按钮 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    transition: transform 0.3s ease;
}

.tobacco-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100px; /* 减小容器宽度 */
    display: flex;
    align-items: center;
    justify-content: center; /* 居中对齐 */
    gap: 4px; /* 减小按钮之间的间距 */
    padding: 0; /* 移除内边距 */
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    transform: translateX(100px); /* 匹配新的宽度 */
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.tobacco-swipe-actions .action-btn {
    height: 40px; /* 固定高度 */
    width: 40px;  /* 固定宽度 */
    border-radius: 50%; /* 圆形按钮 */
}

.detail-item-wrapper[style*="translateX(-100px)"] ~ .tobacco-swipe-actions,
.detail-item-wrapper[style*="translateX(-90px)"] ~ .tobacco-swipe-actions,
.detail-item-wrapper[style*="translateX(-80px)"] ~ .tobacco-swipe-actions {
    transform: translateX(0);
    pointer-events: auto;
}

.detail-item-content {
    display: flex;
    justify-content: flex-start; /* 靠左起始 */
    align-items: center; /* 垂直居中 */
    width: 100%;
    gap: 10px; /* 间距 */
    flex-wrap: wrap; /* 允许换行，避免末尾金额被裁剪 */
}

/* 允许子项在空间不足时收缩，避免内容溢出被裁剪 */
.detail-item-content > span {
    min-width: 0;
}

.detail-date {
    color: #666666;
    min-width: 60px;
}

.dark-mode .detail-date {
    color: #90e0ef;
}

.detail-quantity, .detail-price {
    color: #666666;
    min-width: 70px;
    text-align: right; /* 数值右对齐 */
}

.dark-mode .detail-quantity, 
.dark-mode .detail-price {
    color: #90e0ef;
}

.detail-total {
    font-weight: 600;
    color: #2ecc71;
    min-width: 80px;
    text-align: right;
    margin-left: auto; /* 靠右对齐 */
}

/* 超窄环境下（如弹窗或小屏），总金额独占一行，保证完整显示 */
@media (max-width: 360px) {
    .detail-total {
        flex-basis: 100%;
        min-width: 0;
    }
}

.tobacco-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .tobacco-charts {
        grid-template-columns: 1fr 1fr;
    }
}

.chart-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.dark-mode .chart-container {
    background: #141d2b;
    border-color: #415a77;
}

.chart-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #415a77;
    font-size: 1.1rem;
}

.dark-mode .chart-container h3 {
    color: #ffd700;
}

.chart-container canvas {
    width: 100% !important;
    height: 200px !important;
    margin: 10px 0;
}

.export-btn {
    background: linear-gradient(to right, #3498db, #1abc9c);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.tobacco-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
}

@media (min-width: 576px) {
    .tobacco-form {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tobacco-form .form-row:last-child {
        grid-column: span 2;
        margin-top: 10px;
    }
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row label {
    font-weight: 500;
    color: #415a77;
    font-size: 0.9rem;
}

.dark-mode .form-row label {
    color: #ffd700;
}

.form-row input {
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    color: #333333;
    font-size: 1rem;
}

.dark-mode .form-row input {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-control button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    background: #f8f9fa;
    color: #666666;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dark-mode .quantity-control button {
    border-color: var(--color-border);
    background: var(--color-bg-elev-1); /* 调整为深灰色主题色 */
    color: #e0e1dd;
}

.quantity-control button:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.dark-mode .quantity-control button:hover {
    background: #415a77;
}

.quantity-control input {
    flex: 1;
    text-align: center;
}

.submit-btn {
    background: linear-gradient(to right, #2ecc71, #27ae60);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}
.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}

/* 暗黑模式 */
.dark-mode {
    color-scheme: dark;
    background: var(--color-bg-app);
    color: var(--color-text-primary);
}

/* =================================================================
 *         个人中心页面样式
 * ================================================================= */
.view-profile {
    padding-top: 15px; /* 顶部留出一些空间 */
}

/* =================================================================
 * 【我的】个人中心头部 - 全新设计
 * 特性：
 * 1. 无边框设计，平滑过渡
 * 2. 完美支持亮色/深色模式
 * 3. 响应式布局（移动端/桌面端）
 * 4. 参考主流APP设计元素
 * ================================================================= */

.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 0;
    border-radius: 0;
    margin-bottom: 20px;
    /* 突破 main-content 的 15px padding，实现全屏宽度 */
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
    /* 使用 calc 确保在所有视口下都是全宽 */
    width: calc(100% + 30px);
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 140px;
    /* iOS 安全区域适配：顶部预留安全区域 */
    padding-top: max(20px, env(safe-area-inset-top, 0px));
}

/* 背景装饰层 */
.profile-header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

/* 深色模式 */
.dark-mode #view-profile .profile-header {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
}

/* 用户信息容器 */
.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 20px 12px;
    position: relative;
    z-index: 1;
}

/* 头像容器 */
.user-avatar-container {
    position: relative;
    margin-bottom: 8px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.95);
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.user-avatar:hover {
    transform: scale(1.05);
}

/* 头像认证徽章 - 已隐藏 */
.avatar-badge {
    display: none;
}

.dark-mode .avatar-badge {
    display: none;
}

.avatar-badge i {
    display: none;
}

/* 用户详情 */
.user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.user-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}

/* 用户简介 - 已隐藏 */
.user-bio {
    display: none;
}

/* 统计数据 - 创意卡片设计 */
.user-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    width: auto;
    max-width: 95%;
    padding: 0;
    background: transparent;
    margin-top: 0;
}

.dark-mode .user-stats {
    background: transparent;
}

.user-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 95px;
}

/* 卡片悬停效果 */
.user-stats .stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
}

/* 第一个卡片 - 天数（蓝紫渐变） */
.user-stats .stat-item:first-child {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.4), rgba(139, 92, 246, 0.3));
}

.user-stats .stat-item:first-child:hover {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.5), rgba(139, 92, 246, 0.4));
}

/* 第二个卡片 - 笔数（橙粉渐变） */
.user-stats .stat-item:last-child {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.4), rgba(236, 72, 153, 0.3));
}

.user-stats .stat-item:last-child:hover {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(236, 72, 153, 0.4));
}

/* 深色模式下的卡片 */
.dark-mode .user-stats .stat-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .user-stats .stat-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.12));
}

/* 图标样式 */
.stat-item i {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 1px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 数字样式 - 突出显示 */
.stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

/* 标签样式 */
/* 个人中心头部统计标签 - 仅针对 profile-header 内的标签 */
.profile-header .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.stat-divider {
    display: none;
}

/* 操作按钮 */
.profile-actions {
    position: absolute;
    /* iOS 安全区域适配：确保不与状态栏重叠 - 增加更多安全距离 */
    top: max(25px, calc(env(safe-area-inset-top, 0px) + 20px));
    right: max(15px, env(safe-area-inset-right, 0px));
    display: flex;
    gap: 10px;
    z-index: 2;
}

.profile-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.profile-action-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.25);
}

.dark-mode .profile-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .profile-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* =================================================================
 * 响应式布局 - 移动端优化
 * ================================================================= */

/* 小屏幕设备（手机） */
@media (max-width: 480px) {
    .profile-header {
        min-height: 130px;
    }

    .user-info {
        padding: 12px 15px 10px;
    }

    .user-avatar {
        width: 52px;
        height: 52px;
        border-width: 2.5px;
    }

    .user-name {
        font-size: 1.25rem;
        margin-bottom: 6px;
    }

    .user-stats {
        gap: 8px;
    }

    .user-stats .stat-item {
        padding: 8px 14px;
        min-width: 85px;
        gap: 2px;
    }

    .stat-item i {
        font-size: 1.05rem;
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.6rem;
    }

    .profile-actions {
        /* iOS 安全区域适配 */
        top: max(12px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        gap: 8px;
        margin-top: 8px;
    }

    .profile-action-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* 中等屏幕设备（平板） */
@media (min-width: 481px) and (max-width: 768px) {
    .profile-header {
        min-height: 135px;
    }

    .user-info {
        padding: 14px 18px 12px;
    }

    .user-avatar {
        width: 56px;
        height: 56px;
    }

    .user-name {
        font-size: 1.35rem;
        margin-bottom: 7px;
    }

    .user-stats {
        gap: 10px;
    }

    .user-stats .stat-item {
        padding: 9px 16px;
        min-width: 90px;
    }

    .stat-item i {
        font-size: 1.15rem;
    }

    .stat-number {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .profile-actions {
        /* iOS 安全区域适配 */
        top: max(14px, env(safe-area-inset-top, 0px));
        right: max(14px, env(safe-area-inset-right, 0px));
        margin-top: 9px;
    }
}

/* 大屏幕设备（桌面） */
@media (min-width: 769px) {
    .profile-header {
        min-height: 150px;
        border-radius: 20px;
        margin: 0 0 25px 0;
        /* 桌面端不需要突破padding */
        width: 100%;
    }

    .user-info {
        padding: 16px 30px 14px;
    }

    .user-avatar {
        width: 64px;
        height: 64px;
        border-width: 3px;
    }

    .user-name {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .user-stats {
        gap: 12px;
    }

    .user-stats .stat-item {
        padding: 11px 20px;
        min-width: 100px;
    }

    .stat-item i {
        font-size: 1.3rem;
    }

    .stat-number {
        font-size: 1.6rem;
    }

    .stat-label {
        font-size: 0.72rem;
    }

    .profile-actions {
        /* 桌面端使用固定值 */
        top: 18px;
        right: 18px;
        margin-top: 0;
    }

    .profile-action-btn {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}

/* 确保profile-header在hide-header模式下正确显示 */
.container.hide-header #view-profile .profile-header {
    border-radius: 0 !important;
    /* hide-header模式下，view-profile的padding为0，所以不需要负边距 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    /* 确保顶部完全贴合，包含iOS安全区域 */
    padding-top: env(safe-area-inset-top) !important;
}

/* 功能模块区域 */
.profile-modules .card-title,
.profile-settings .card-title {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.dark-mode .profile-modules .card-title,
.dark-mode .profile-settings .card-title {
    border-bottom: 1px solid var(--color-divider);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 响应式 2-3 列 */
    gap: 15px;
}

.module-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.dark-mode .module-item {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
}

.module-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-item:active {
    transform: translateY(1px) scale(0.95); /* 更明显的缩放 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    filter: brightness(0.95); /* 轻微变暗 */
}

.module-item i {
    font-size: 2.2rem; /* 放大图标 */
    color: #007bff; /* 主色调蓝色 */
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.dark-mode .module-item i {
    color: var(--color-brand-500);
}

.module-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 3px;
}

.dark-mode .module-title {
    color: var(--color-text-primary);
}

.module-subtitle {
    font-size: 0.8rem;
    color: #778da9;
}

.dark-mode .module-subtitle {
    color: var(--color-text-secondary);
}

/* 底部扩展功能列表 */
.settings-list {
    list-style: none;
    padding: 0;
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dark-mode .settings-item {
    border-bottom: 1px solid var(--color-divider);
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item:hover {
    background-color: #f5f7fa;
    transform: translateX(5px);
}

.settings-item:active {
    background-color: #e0e0e0; /* 点击时背景色变深 */
    transform: translateX(2px) scale(0.98); /* 轻微缩放和位移 */
    filter: brightness(0.98); /* 轻微变暗 */
}

.dark-mode .settings-item:hover {
    background-color: var(--color-bg-elev-1);
}

.dark-mode .settings-item:active {
    background-color: var(--color-bg-elev-2);
    transform: translateX(2px) scale(0.98);
    filter: brightness(0.98);
}

.settings-item i:first-child {
    font-size: 1.2rem;
    color: #007bff; /* 主色调蓝色 */
    margin-right: 15px;
    width: 25px;
    text-align: center;
}

.dark-mode .settings-item i:first-child {
    color: var(--color-brand-500);
}

.settings-item span {
    flex-grow: 1;
    font-size: 1rem;
    color: #333333;
}

.dark-mode .settings-item span {
    color: var(--color-text-primary);
}

.settings-item i:last-child {
    font-size: 0.9rem;
    color: #999999;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .profile-header {
        padding: 20px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
    }

    .user-name {
        font-size: 1.4rem;
    }

    .module-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 10px;
    }

    .module-item {
        padding: 12px;
    }

    .module-item i {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .module-title {
        font-size: 1rem;
    }

    .module-subtitle {
        font-size: 0.75rem;
    }

    .settings-item {
        padding: 12px 0;
    }

    .settings-item i:first-child {
        font-size: 1.1rem;
        margin-right: 10px;
    }

    .settings-item span {
        font-size: 0.9rem;
    }
    
    /* 暗黑模式下的小屏幕调整 */
    .dark-mode .fab {
        border: 2px solid #1b263b;
    }
    
    .dark-mode .fab:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(255, 140, 0, 0.3), 0 0 10px rgba(255, 149, 0, 0.4);
    }
    
    .dark-mode .fab::before {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }
}

.dark-mode .container {
    background: var(--color-bg-app);
}

.dark-mode .app-header {
    background: var(--color-bg-surface-1);
    border-bottom: 1px solid var(--color-divider);
}

.dark-mode .header-btn {
    color: #ffd700;
}

.dark-mode .date-display {
    color: var(--color-text-primary);
}

.dark-mode .card {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
}

/* 深色模式模块标题头部渐变 (v2) */
.dark-mode .card-title,
.dark-mode #view-stats .stats-title,
.dark-mode #view-tobacco .stats-title {
    background: linear-gradient(135deg, #394240 0%, #2E3836 100%);
    border-bottom: none; /* 移除原有的边框，确保渐变效果干净 */
}

/* 深色模式模块标题字体颜色 */
.dark-mode .card-title,
.dark-mode .card-title i,
.dark-mode #view-stats .stats-title,
.dark-mode #view-stats .stats-title i,
.dark-mode #view-tobacco .stats-title,
.dark-mode #view-tobacco .stats-title i {
    color: #EAEAEA !important;
}

.dark-mode .input-row input:focus {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
    background: var(--color-bg-elev-1);
}

.dark-mode .input-row input {
    background: var(--color-bg-surface-1);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.dark-mode .record-item {
    border-bottom-color: var(--color-divider);
}

/* 当显示"查看更多"提示时，隐藏最后一条记录的下划线（暗黑模式） */
.dark-mode #view-records .income-list .record-item:last-child {
    border-bottom: none;
}

.dark-mode .record-item-wrapper {
    background: var(--color-bg-surface-2);
}

.dark-mode .detail-item {
    border-bottom-color: var(--color-divider);
}

.dark-mode .detail-item-wrapper {
    background: var(--color-bg-surface-2);
}

.dark-mode .record-name {
    color: var(--color-text-primary);
}

.dark-mode .total-income {
    background: var(--color-bg-elev-1);
    border: 1px solid var(--color-border);
}

.dark-mode .total-income.dark-positive-bg {
    background: #2C3B3B; /* 深灰绿色 */
}

.dark-mode .total-income.dark-negative-bg {
    background: #402C2C; /* 深灰红色 */
}

.dark-mode .debt-name {
    color: var(--color-text-primary);
}

.dark-mode .debt-result-static {
    color: var(--color-success);
}

.dark-mode .debt-expression {
    color: var(--color-text-secondary);
}

.dark-mode .tab-bar {
    background: var(--color-bg-elev-1);
    border-top: 1px solid var(--color-divider);
}

.dark-mode .tab-item {
    color: var(--color-text-tertiary);
}

.dark-mode .tab-item.active {
    color: var(--color-brand-500);
}

.dark-mode .stats-card {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
}

.dark-mode .stats-title {
    color: var(--color-text-primary);
}

.dark-mode .stats-period input {
    background: var(--color-bg-surface-1);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

/* 深色模式下的日期显示按钮 */
.dark-mode .date-display-btn {
    background: var(--color-bg-surface-1);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.dark-mode .date-display-btn:hover {
    background: var(--color-bg-surface-2);
    border-color: #60a5fa;
}

.dark-mode .stat-box {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
}

.dark-mode .stats-chart-container {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
}

.dark-mode .chart-modal {
    background-color: var(--color-bg-app);
}

.dark-mode .close-btn {
    background: var(--color-bg-elev-2);
    color: var(--color-text-primary);
}

.dark-mode .expense-item-name {
    color: var(--color-text-primary);
}

.dark-mode .expense-item-amount {
    color: var(--color-text-secondary);
}

.dark-mode .expense-detail-list li {
    color: var(--color-text-tertiary);
}

/* Light & Dark Mode Modal Styles */
.dark-mode .modal-content {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
}

.dark-mode .modal-title {
    color: var(--color-text-primary);
}

.dark-mode .modal-input {
    background: var(--color-bg-surface-1);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.dark-mode .modal-input:focus {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.amount-input-group {
    display: flex;
    align-items: center; /* 强制垂直居中对齐 */
    margin-bottom: 10px;
}

.amount-input-group .modal-input {
    flex-grow: 1;
    margin-bottom: 0; /* 移除输入框自身的下边距，由父容器控制 */
    height: 38px; /* 设定与按钮视觉协调的高度 */
    padding: 6px 12px; /* 重新调整内边距 */
    box-sizing: border-box; /* 确保高度计算包含边框和内边距 */
}

.modal-input-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.modal-btn-add,
.modal-btn-remove {
    width: 32px; /* 缩小按钮尺寸 */
    height: 32px; /* 缩小按钮尺寸 */
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem; /* 相应调整字体大小 */
    font-weight: bold;
    color: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; /* 修复移动端点击时的灰色方框问题 */
    line-height: 1; /* 确保符号垂直居中 */
    padding-bottom: 2px; /* 微调符号位置以达到视觉居中 */
}

.modal-btn-add {
    background: linear-gradient(135deg, #2ecc71, #28a745);
}

.modal-btn-remove {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.modal-btn-add:hover,
.modal-btn-remove:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* =================================================================
 *         语音识别动画样式
 * ================================================================= */
#voice-animation-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;
    pointer-events: none; /* 默认不拦截点击事件 */
    opacity: 1;
    transition: opacity 0.3s ease;
}

#voice-animation-overlay.voice-overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

#voice-animation-container {
    width: 100%;
    height: 150px; /* 动画区域高度 */
    margin-bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 20px); /* 定位在tab bar上方 */
}

#voice-canvas {
    width: 100%;
    height: 100%;
}

#voice-text-output {
    position: absolute;
    bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 80px);
    font-size: 22px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes shake-horizontal {
    0%, 100% { transform: translateX(-50%) translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-50%) translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(-50%) translateX(5px); }
}

#voice-snackbar {
    position: fixed;
    bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 20px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #2C2C2C; /* 深灰色背景 */
    color: white;
    padding: 12px 18px;
    border-radius: 25px; /* 圆角 */
    transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
    z-index: 1600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#voice-snackbar.shake {
    animation: shake-horizontal 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

.snackbar-icon {
    width: 22px;
    height: 22px;
    background-color: #e74c3c; /* 红色背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.snackbar-text {
    font-size: 15px;
}


#voice-snackbar.snackbar-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* =================================================================
 *         模块头部样式优化 (任务需求)
 *         说明: 由于不能修改 HTML 结构，以下样式直接应用于现有的
 *         .card-title 类，在概念上将其视为 .card__header。
 * ================================================================= */

:root {
  /*
    当前激活的是 [天空蓝主题]。
    如果需要换回 [木质主题]，请用下面的两行代码替换当前的即可。
    木质主题:
    --header-gradient-start: #f5f1e8;
    --header-gradient-end: #e6d9c1;
  */

  /* --- [天空蓝主题] --- */
  --header-gradient-start: #f0f8ff;
  --header-gradient-end: #e3f2ff; /* 微调: 将右侧颜色调得更浅，使渐变更柔和 */
}

/* 将 .card-title 样式重置并作为头部容器 (.card__header) */
.card-title,
#view-stats .stats-title,
#view-tobacco .stats-title {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* 覆盖原有样式 */
  border-bottom: none !important; /* 强制移除原有边框 */
  padding-bottom: 0 !important;   /* 强制移除原有内边距 */
  
  /* 1. 缩小标题区内部的垂直空隙 */
  margin: 0 !important;
  line-height: 1.3 !important;
  
  /* 3. 应用从右到左的暖色系渐变 */
  background: linear-gradient(to left, var(--header-gradient-end), var(--header-gradient-start));
  
  /* 关键步骤:
     通过负 margin 将头部区域拉伸至 .card 边缘，以抵消 .card 的 padding。
     这使得渐变背景可以填满整个卡片宽度。 */
  margin-left: -20px !important;
  margin-right: -20px !important;
  margin-top: -20px !important;
  
  /* 关键步骤 (反馈修改):
     再次减少垂直 padding，使其最紧凑。 */
  padding: 8px 20px 8px 20px !important; /* 上 | 左右 | 下 */

  /* 恢复与下方内容的间距 */
  margin-bottom: 15px !important;

  position: relative;

  /* --- 新增字体样式 --- */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Hiragino Sans GB', 'MiSans', 'OPPO Sans', 'HarmonyOS Sans SC', 'Alibaba PuHuiTi 2.0', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum', 'lnum'; /* 开启等宽数字特性 */
  font-size: 1.0rem !important; /* 调整字体大小以适应更紧凑的头部 */
}

/* 反馈修改: 移除分割线 */
/*
.card-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e0e0e0;
}
*/

/* 确保标题文字颜色在渐变背景下清晰可读 */
.card-title, .card-title i,
#view-stats .stats-title, #view-stats .stats-title i,
#view-tobacco .stats-title, #view-tobacco .stats-title i {
    color: #2c3e50 !important; /* 使用更深、更清晰的颜色 */
}


/* =================================================================
 *         任务优化: 调整债务记录模块布局
 *         说明: 减少头部区域与第一条记录之间的垂直间距。
 * ================================================================= */
#view-debts .card-title {
    margin-bottom: 2px !important;
}


/* =================================================================
 *         任务优化: 调整【我的】页面【更多设置】模块布局
 *         说明: 减少头部区域与第一条记录之间的垂直间距。
 * ================================================================= */
.profile-settings .card-title {
    margin-bottom: 2px !important;
}

.settings-list .settings-item:first-child {
    padding-top: 8px;
}


/* =================================================================
 *         任务优化: 统一调整模块间距 (v4 - 统计页最终修正)
 *         说明: 缩小【记账】和【统计】标签页中模块标题与内容之间的垂直间距。
 * ================================================================= */
#view-records .card .card-title {
    margin-bottom: 2px !important; /* 记账页间距 */
}

/* 减小记录项的垂直内边距 */
#view-records .record-item-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* 针对【统计】模块的特别优化 (最终修正) */
#view-stats .stats-title {
    margin-bottom: 0 !important; /* 移除标题的底部外边距，由父容器的gap统一控制 */
}

#view-stats .stats-header {
    gap: 12px; /* 设置标题和日期选择器之间的间距 */
    margin-bottom: 12px; /* 设置日期选择器与下方内容的间距 */
}

#view-stats .stats-summary {
    margin-top: 0; /* 移除顶部外边距，完全由上方元素控制间距 */
    gap: 8px; /* 减小统计框之间的间距 */
}

/* 减小统计框的内边距 */
#view-stats .stat-box {
    padding: 10px;
}

/* =================================================================
 *         任务优化: TitleBadge 集成样式
 * ================================================================= */
.income-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    gap: 12px;
    min-width: 0; /* 防止 flex item 溢出 */
}

.amount {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    flex-shrink: 0; /* 防止金额收缩 */
    white-space: nowrap;
}

.amount.in {
    color: #08a66c;
}

.amount.out {
    color: #d83c3c;
}

/* 通用信息模态框样式 */
.modal-message {
    white-space: pre-wrap;
    text-align: center;
    color: #333333;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dark-mode .modal-message {
    color: #e0e1dd;
}

/* =================================================================
 *         深色模式重构 (v3.0) - 颜色体系
 *         说明: 新增语义化颜色变量，统一深色模式基调。
 *         此部分仅定义变量，后续步骤将逐步替换硬编码值。
 * ================================================================= */
.dark-mode {
  /* 背景与表面 */
  --color-bg-app: #121212;
  --color-bg-surface-1: #161617;
  --color-bg-surface-2: #1A1B1E;
  --color-bg-elev-1: #222329;
  --color-bg-elev-2: #2A2B32;

  /* 文本 */
  --color-text-primary: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.68);
  --color-text-tertiary: rgba(255, 255, 255, 0.48);
  --color-text-disabled: rgba(255, 255, 255, 0.32);
  --color-text-inverse: #0E0E10;

  /* 分隔/描边/蒙层 */
  --color-divider: #26262B;
  --color-border: #2C2C31;
  --color-overlay: rgba(0, 0, 0, 0.28);

  /* 品牌 */
  --color-brand-500: var(--brand-500, #3B82F6);
  --color-brand-600: var(--brand-600, #2563EB);
  --color-brand-700: var(--brand-700, #1D4ED8);
  --color-accent: var(--color-brand-500);
  --color-link: #9CC7FF;

  /* 状态色 */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #60A5FA;

  /* 头部渐变 (现代 + 回退) */
  --header-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand-500) 88%, white 12%) 0%,
    color-mix(in srgb, var(--color-brand-600) 70%, #1A1B1E 30%) 60%,
    #1A1B1E 100%
  );
}

@supports not (color-mix(in srgb, #000 50%, #fff 50%)) {
  .dark-mode {
    --header-gradient: linear-gradient(180deg, #4C8DF6 0%, #3465E6 60%, #1A1B1E 100%);
  }
}

/* =================================================================
 *         金额显示样式重构 (Outline Chip)
 * ================================================================= */

/* Light Mode & Default */
:root, :root[data-theme="light"]{
  --amt-pos-fg: #10b981;
  --amt-pos-bg: rgba(16,185,129,.10);
  --amt-pos-bd: rgba(16,185,129,.38);

  --amt-neg-fg: #ef4444;
  --amt-neg-bg: rgba(239,68,68,.10);
  --amt-neg-bd: rgba(239,68,68,.42);

  --amt-payable-fg: #f59e0b;
  --amt-payable-bg: rgba(245,158,11,.12);
  --amt-payable-bd: rgba(245,158,11,.40);

  --amt-neutral-fg: #3b82f6;
  --amt-neutral-bg: rgba(59,130,246,.10);
  --amt-neutral-bd: rgba(59,130,246,.36);

  --amt-chip-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
}

/* Dark Mode */
.dark-mode, :root[data-theme="dark"]{
  --amt-pos-fg: #34d399;
  --amt-pos-bg: rgba(52,211,153,.18);
  --amt-pos-bd: rgba(52,211,153,.46);

  --amt-neg-fg: #f87171;
  --amt-neg-bg: rgba(248,113,113,.20);
  --amt-neg-bd: rgba(248,113,113,.50);

  --amt-payable-fg: #fbbf24;
  --amt-payable-bg: rgba(251,191,36,.22);
  --amt-payable-bd: rgba(251,191,36,.52);

  --amt-neutral-fg: #93c5fd;
  --amt-neutral-bg: rgba(147,197,253,.18);
  --amt-neutral-bd: rgba(147,197,253,.46);

  --amt-chip-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

/* New Amount Chip Style */
.amt-chip{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:4px 10px; border-radius:9999px;
  border:1px solid transparent; line-height:1;
  font-weight:600;
  font-variant-numeric: tabular-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  white-space:nowrap; box-shadow:var(--amt-chip-shadow);
  background-clip: padding-box;
}

/* Variants: ghost for lists, solid for summaries */
.amt-chip.ghost.pos{   color:var(--amt-pos-fg);   background:var(--amt-pos-bg);   border-color:var(--amt-pos-bd); }
.amt-chip.ghost.neg{   color:var(--amt-neg-fg);   background:var(--amt-neg-bg);   border-color:var(--amt-neg-bd); }
.amt-chip.ghost.pay{   color:var(--amt-payable-fg); background:var(--amt-payable-bg); border-color:var(--amt-payable-bd); }
.amt-chip.ghost.neutral{ color:var(--amt-neutral-fg); background:var(--amt-neutral-bg); border-color:var(--amt-neutral-bd); }

/* Solid variants with fallback for color-mix */
@supports (background: color-mix(in srgb, #000 1%, transparent)) {
  .amt-chip.solid.pos{   color:#083b2b; background:color-mix(in srgb, var(--amt-pos-fg) 18%, transparent); border-color:var(--amt-pos-bd); }
  .amt-chip.solid.neg{   color:#3f0a0a; background:color-mix(in srgb, var(--amt-neg-fg) 18%, transparent); border-color:var(--amt-neg-bd); }
  .amt-chip.solid.pay{   color:#3c2603; background:color-mix(in srgb, var(--amt-payable-fg) 20%, transparent); border-color:var(--amt-payable-bd); }
}

@supports not (background: color-mix(in srgb, #000 1%, transparent)) {
  .amt-chip.solid.pos{   color:var(--amt-pos-fg);   background:var(--amt-pos-bg);   border-color:var(--amt-pos-bd); }
  .amt-chip.solid.neg{   color:var(--amt-neg-fg);   background:var(--amt-neg-bg);   border-color:var(--amt-neg-bd); }
  .amt-chip.solid.pay{   color:var(--amt-payable-fg); background:var(--amt-payable-bg); border-color:var(--amt-payable-bd); }
}

/* Dark mode solid variants */
.dark-mode .amt-chip.solid.pos { color: #d1fae5; }
.dark-mode .amt-chip.solid.neg { color: #fee2e2; }
.dark-mode .amt-chip.solid.pay { color: #fef3c7; }


/* Sizes */
.amt-chip.sm{ padding:3px 8px; font-size:0.95rem; }
.amt-chip.lg{ padding:6px 12px; font-size:1.08rem; }

/* Text details */
.amt-chip .sign{ opacity:.95; }
.amt-chip .cur{ font-size:.85em; opacity:.9; transform: translateY(-0.5px); display: inline-block; }

/* Compact mode */
.amt-chip.compact{ padding:2px 6px; }

/* Helper for right-aligned columns */
.amount-col{ text-align:right; }

/* =================================================================
 *         分类标签样式
 * ================================================================= */
.category-tag-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* 居中显示 */
    min-width: 0;
}

.category-tag {
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.dark-mode .category-tag {
    background-color: var(--color-bg-elev-1);
    color: var(--color-text-secondary);
}

.category-tag:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

.dark-mode .category-tag:hover {
    background-color: var(--color-bg-elev-2);
}

.category-input {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.85rem;
    width: 100px;
    text-align: center;
    background-color: #fff;
    color: #333;
}

.dark-mode .category-input {
    background-color: var(--color-bg-surface-1);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* =================================================================
 * 【我的】标签页隐藏顶部导航栏
 * 当显示 profile 视图时，隐藏 app-header 并调整布局
 * ================================================================= */
.container.hide-header .app-header {
    display: none !important;
}

/* 修复移动端 container 和布局宽度问题 - 仅在移动设备上应用 */
@media (max-width: 768px) {
    .container.hide-header {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 确保 main-content 在隐藏 header 时宽度不变 */
    .container.hide-header .main-content {
        padding: 0 15px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 确保 profile 视图占满全部可用空间，不会变窄 */
    .container.hide-header #view-profile {
        margin: 0 !important;
        /* 移除所有padding，让profile-header可以全宽显示 */
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* profile视图下，其他内容需要恢复15px的左右padding */
    .container.hide-header #view-profile > .card:not(.profile-header) {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: calc(100% - 30px) !important;
    }

    /* 确保 profile 视图内的卡片宽度正常 */
    .container.hide-header #view-profile .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 确保 profile-header 宽度正常 - 修复：保持全屏宽度消除左右空白 */
    .container.hide-header #view-profile .profile-header {
        /* 突破 main-content 的 15px padding，实现真正的全屏宽度 */
        width: calc(100% + 30px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* 确保 profile-modules 和 profile-settings 宽度正常 */
    .container.hide-header #view-profile .profile-modules,
    .container.hide-header #view-profile .profile-settings {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =================================================================
 * 【电脑端】修复【我的】标签页宽度问题
 * 确保电脑端【我的】标签页和其他标签页保持相同的480px居中布局
 * 问题原因：移动端样式中设置的 padding: 0 15px 导致宽度计算错误
 * 解决方案：在电脑端重置这些样式，让容器保持正常的480px宽度
 * 注意：仅在电脑端生效，不影响移动端
 * ================================================================= */
@media (min-width: 769px) {
    /* 电脑端：重置 container 宽度，移除移动端的 max-width 和 width 设置 */
    .container.hide-header {
        max-width: 480px !important;
        width: auto !important;
    }

    /* 电脑端：重置 main-content 的 padding 和宽度设置 */
    .container.hide-header .main-content {
        padding: 0 15px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* 电脑端：profile 视图保持正常宽度 */
    .container.hide-header #view-profile {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 电脑端：profile 视图下，其他内容保持 15px 的左右padding */
    .container.hide-header #view-profile > .card:not(.profile-header) {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: calc(100% - 30px) !important;
    }

    /* 电脑端：确保 profile 视图内的卡片宽度正常 */
    .container.hide-header #view-profile .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 电脑端：确保 profile-header 在 480px 容器内全宽显示 */
    .container.hide-header #view-profile .profile-header {
        /* 突破 main-content 的 15px padding，在 480px 容器内实现全宽 */
        width: calc(100% + 30px) !important;
        max-width: none !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* 电脑端：确保 profile-modules 和 profile-settings 宽度正常 */
    .container.hide-header #view-profile .profile-modules,
    .container.hide-header #view-profile .profile-settings {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =================================================================
 *         移动端友好的进度提示样式
 * ================================================================= */
.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.progress-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 25px;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1);
    animation: progressPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes progressPopIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.progress-icon {
    text-align: center;
    margin-bottom: 20px;
    font-size: 3rem;
    animation: progressRotate 1.5s linear infinite;
}

@keyframes progressRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.progress-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333333;
    text-align: center;
    margin-bottom: 8px;
}

.progress-message {
    font-size: 0.9rem;
    color: #666666;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #1abc9c);
    border-radius: 4px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: progressShimmer 1.5s infinite;
}

@keyframes progressShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.progress-bar.indeterminate {
    width: 40% !important;
    animation: progressIndeterminate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background: linear-gradient(90deg, #3498db, #1abc9c, #3498db);
    background-size: 200% 100%;
}

@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.progress-percent {
    font-size: 0.85rem;
    color: #778da9;
    text-align: center;
}

.progress-warning {
    background: #fff3cd;
    color: #856404;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 15px;
    line-height: 1.5;
    border: 1px solid #ffeaa7;
}

.progress-warning i {
    margin-right: 8px;
    color: #f39c12;
}

/* 深色模式下的进度提示样式 */
.dark-mode .progress-container {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
}

.dark-mode .progress-title {
    color: var(--color-text-primary);
}

.dark-mode .progress-message {
    color: var(--color-text-secondary);
}

.dark-mode .progress-bar-wrapper {
    background: var(--color-bg-elev-1);
}

.dark-mode .progress-percent {
    color: var(--color-text-tertiary);
}

.dark-mode .progress-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

/* 成功状态 */
.progress-container.success .progress-icon {
    animation: none;
    color: #28a745;
}

.progress-container.success .progress-bar {
    background: linear-gradient(90deg, #28a745, #20c997);
}

/* 错误状态 */
.progress-container.error .progress-icon {
    animation: none;
    color: #dc3545;
}

.progress-container.error .progress-title {
    color: #dc3545;
}

/* 移动端优化 */
@media (max-width: 480px) {
    .progress-container {
        padding: 25px 20px;
        width: 90%;
    }
    
    .progress-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .progress-title {
        font-size: 1.1rem;
    }
    
    .progress-message {
        font-size: 0.85rem;
    }
}