* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.caoge-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background-color: #f5f7fa;
    color: #303133;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

.caoge-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.caoge-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.caoge-logo a {
    text-decoration: none;
    color: #409EFF;
}

.caoge-logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
}

.caoge-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.caoge-nav-item {
    padding: 6px 12px;
    font-size: 16px;
    text-decoration: none;
    color: #606266;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.caoge-nav-item:hover {
    background: #ecf5ff;
    color: #409EFF;
}

.caoge-nav-item.active {
    background: #409EFF;
    color: #fff;
}

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

.user-name {
    color: #606266;
    font-size: 16px;
}

.logout-btn {
    padding: 4px 12px;
    font-size: 16px;
    text-decoration: none;
    color: #f56c6c;
    border: 1px solid #f56c6c;
    border-radius: 6px;
    transition: all 0.3s;
    white-space: nowrap;
}

.logout-btn:hover {
    background: #f56c6c;
    color: #fff;
}

.caoge-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.page-header {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
}

.page-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 8px;
}

.page-date-info {
    color: #909399;
    font-size: 14px;
}

.date-divider {
    margin: 0 8px;
}

.section-title {
    font-size: 18px;
    color: #303133;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #409EFF;
}

.quick-entry-section,
.stats-section {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
}

.quick-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.quick-card {
    background: #f8f9fc;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: #303133;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 16px;
}

.quick-card:hover {
    border-color: #409EFF;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    transform: translateY(-2px);
}

.quick-card.placeholder-card {
    opacity: 0.6;
    cursor: default;
}

.quick-card.placeholder-card:hover {
    border-color: #e4e7ed;
    box-shadow: none;
    transform: none;
}

.quick-icon {
    font-size: 36px;
}

.quick-info {
    flex: 1;
}

.quick-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.quick-desc {
    font-size: 12px;
    color: #909399;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stat-card {
    background: #f8f9fc;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #409EFF;
    margin-bottom: 8px;
}

.stat-label {
    color: #909399;
    font-size: 14px;
}

.stat-todo .stat-value {
    color: #f56c6c;
}

.stat-total .stat-value {
    color: #409EFF;
}

.stat-upcoming .stat-value {
    color: #e6a23c;
}

.stat-monthly .stat-values {
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
    font-size: 14px;
}

.stat-sub.income {
    color: #67c23a;
}

.stat-sub.expense {
    color: #f56c6c;
}

.balance {
    font-size: 28px !important;
}

.upcoming-list {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e4e7ed;
}

.list-title {
    font-size: 16px;
    margin-bottom: 12px;
    color: #303133;
}

.upcoming-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upcoming-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fc;
    border-radius: 6px;
}

.event-content {
    flex: 1;
    color: #303133;
}

.event-time {
    color: #909399;
    font-size: 13px;
}

.expired-badge {
    background: #f56c6c;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.days-badge {
    background: #e6a23c;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.toolbar {
    background: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #409EFF;
    color: #fff;
}

.btn-primary:hover {
    background: #66b1ff;
}

.btn-default {
    background: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
}

.btn-default:hover {
    color: #409EFF;
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.btn-warning {
    background: #e6a23c;
    color: #fff;
}

.btn-warning:hover {
    background: #ebb563;
}

.btn-info {
    background: #909399;
    color: #fff;
}

.btn-info:hover {
    background: #a6a9ad;
}

.btn-danger {
    background: #f56c6c;
    color: #fff;
}

.btn-danger:hover {
    background: #f78989;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    width: 200px;
}

.search-input:focus {
    outline: none;
    border-color: #409EFF;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

.filter-select:focus {
    outline: none;
    border-color: #409EFF;
}

.table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.data-table {
    width: 100%;
    font-weight:500;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 10px 10px;
    text-align:center;
    border-bottom: 1px solid #ebeef5;
    font-size: 14px;
}

/* 记事本表格：行列用线区分 */
#reminderTable th,
#reminderTable td {
    border: 1px solid #e4e7ed;
}

.data-table th {
    background: #fafafa;
    font-weight: 600;
    color: #606266;
}

.data-table tr:hover {
    background: #f5f7fa;
}

.col-remaining {
    width: 80px;
    text-align: center;
}

.col-category {
    width: 100px;
}

.col-event-no {
    width: 90px;
}

.event-no-cell {
    font-family: monospace;
    font-size: 14px;
    text-align: 400;
    color: #606266;
}

.account-cell {
    position: relative;
    padding-right: 8px;
}

.account-copy-btn {
    margin-left: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    vertical-align: middle;
    opacity: 0.7;
}

.account-copy-btn:hover {
    opacity: 1;
}

.import-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    line-height: 1.5;
}

.col-content {
    width: 300px;
    max-width: 300px;
}

.col-event-content {
    text-align: left;
    width: 300px;
    max-width: 300px;
}

.col-expire {
    width: 120px;
}

.col-platform {
    width: 160px;
}

.col-platform-cell {
    width: 160px;
    text-align: left;
}

.col-link {
    width: 80px;
}

.col-account {
    width: 160px;
}

.col-password {
    width: 140px;
}

.col-importance {
    width: 120px;
    text-align: center;
}

.col-action {
    width: 120px;
    text-align: center;
}

/* 记事本列表：有关联邮件通知的红点标记 */
.notify-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ff4d4f;
    position: absolute;
    top: 8px;
    right: 8px;
}

.col-id {
    width: 60px;
    text-align: center;
}

.col-level1 {
    width: 100px;
}

.col-level2 {
    width: 120px;
}

.col-date {
    width: 120px;
}

.col-amount {
    width: 120px;
    text-align: right;
}

.col-desc {
    min-width: 200px;
}

.remaining-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.remaining-badge.expired {
    background: #fbeaea;
    color: #b30000;   /* 过期：深红 */
}

.remaining-badge.zero {
    background: #fef0f0;
    color: #f56c6c;   /* 0天：红色 */
}

.remaining-badge.urgent {
    background: #f6efe2;
    color: red;   /* 1-7天：红色 */
}

.remaining-badge.warning {
    background: #ecf5ff;
    color: #409eff;   /* 8-30天：蓝色 */
}

.remaining-badge.safe {
    background: #f0f9eb;
    color: #67c23a;   /* 30天以上：绿色 */
}

.link-btn {
    color: #409EFF;
    text-decoration: none;
    cursor: pointer;
}

.link-btn:hover {
    text-decoration: underline;
}

.password-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pwd-display {
    font-family: monospace;
}

.pwd-actions {
    display: flex;
    gap: 2px;
}

.pwd-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
}

.btn-copy,
.btn-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #909399;
}

.btn-copy:hover,
.btn-toggle:hover {
    color: #409EFF;
}

.btn-edit,
.btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 13px;
    color: #409EFF;
}

.btn-edit:hover {
    text-decoration: underline;
}

.btn-delete {
    color: #f56c6c;
}

.btn-delete:hover {
    text-decoration: underline;
}

.importance-stars {
    color: #e6a23c;
}

.amount-positive {
    color: #67c23a;
    font-weight: bold;
}

.amount-negative {
    color: #f56c6c;
    font-weight: bold;
}

.pagination-container {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination-btn {
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-btn.active {
    background: #409EFF;
    color: #fff;
    border-color: #409EFF;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: #fff;
    border-radius: 8px;
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal.modal-small {
    width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e4e7ed;
}

.modal-header h3 {
    font-size: 18px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #909399;
}

.modal-close:hover {
    color: #303133;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    flex: 1;
}

.form-group.full-width {
    flex: 1 0 100%;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #606266;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #409EFF;
}

.input-with-copy {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-with-copy input {
    flex: 1;
}

.copy-btn,
.toggle-pwd {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
    color: #909399;
}

.copy-btn:hover,
.toggle-pwd:hover {
    color: #409EFF;
}

.radio-group {
    display: flex;
    gap: 24px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.amount-hint {
    display: block;
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}

.pwd-tip {
    margin-bottom: 16px;
    color: #606266;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.nav-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.nav-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* 卡片左上角批量删除复选框：默认隐藏，进入管理模式（.nav-manage-on）后显示 */
.nav-check-wrap {
    position: absolute;
    top: 4px;
    left: 5px;
    z-index: 5;
    cursor: pointer;
    line-height: 1;
    display: none;
}
.nav-manage-on .nav-check-wrap {
    display: block;
}
.nav-check-wrap .nav-check {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #f56c6c;
}

/* 网页一键导入（书签）弹窗预览区 */
.bookmark-preview {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8f9fb;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
}
.bookmark-preview-stats {
    font-size: 13px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 6px;
}
.bookmark-preview-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #606266;
    line-height: 1.8;
}
.bookmark-preview-more {
    color: #909399;
}

.nav-link {
    display: block;
    padding: 12px 8px;
    text-decoration: none;
    color: #303133;
    text-align: center;
}

.nav-icon-wrap {
    width: 32px;
    height: 32px;
    margin: 0 auto 6px;
    border-radius: 6px;
    background: #ecf5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nav-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.nav-icon-text {
    font-size: 14px;
    color: #409EFF;
    font-weight: bold;
}

.nav-title {
    font-size: 13px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.nav-url {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

.icon-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.icon-upload-row input[type="url"] {
    flex: 1;
    min-width: 200px;
}

.icon-upload-hint {
    font-size: 12px;
    color: #999;
}

.icon-upload-preview {
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    display: inline-block;
    background: #fafafa;
}

.form-hint {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}

/* 卡片编辑/删除按钮：默认隐藏，进入管理模式后显示 */
.nav-actions {
    display: none;
    justify-content: flex-end;
    padding: 4px 6px;
    border-top: 1px solid #f0f0f0;
    gap: 4px;
}
.nav-manage-on .nav-actions {
    display: flex;
}

.nav-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: #909399;
    padding: 2px 4px;
}

.nav-actions button:hover {
    color: #409EFF;
}

/* 窄屏自适应降列：卡片一行10个在桌面端生效，小屏按宽度递减 */
@media (max-width: 1500px) {
    .nav-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 1200px) {
    .nav-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px) {
    .nav-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .nav-grid { grid-template-columns: repeat(2, 1fr); }
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #909399;
}

.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 6px;
    color: #fff;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s;
    max-width: 90vw;
    word-wrap: break-word;
    word-break: break-all;
}

.toast.show {
    opacity: 1;
}

.toast.success {
    background: #67c23a;
}

.toast.error {
    background: #fff;
    color: #e53935;
    border: 2px solid #e53935;
    font-size: 22px;
    font-weight: bold;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.4);
    padding: 16px 32px;
    text-align: center;
}

.toast.info {
    background: #909399;
}

.ledger-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.ledger-stats .stat-card {
    padding: 12px 16px !important;
}

.ledger-stats .stat-value {
    font-size: 22px !important;
    margin-bottom: 4px !important;
}

.ledger-stats .stat-label {
    font-size: 12px !important;
}

.stat-income .stat-value {
    color: #67c23a;
}

.stat-expense .stat-value {
    color: #f56c6c;
}

.stat-balance .stat-value {
    color: #409EFF;
}

@media (max-width: 1200px) {
    .nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .quick-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid:not(.ledger-stats) {
        grid-template-columns: 1fr;
    }
    .nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .caoge-header-inner {
        height: auto;
        padding: 12px 16px;
    }
    .caoge-main {
        padding: 16px;
    }
    .page-header {
        padding: 16px;
        margin-bottom: 16px;
    }
    .table-container {
        overflow-x: auto;
    }
    .search-input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .quick-cards {
        grid-template-columns: 1fr;
    }
    .ledger-stats {
        grid-template-columns: 1fr !important;
    }
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar-left,
    .toolbar-right {
        flex-direction: column;
        align-items: stretch;
    }
    .btn {
        width: 100%;
        text-align: center;
    }
    .caoge-nav {
        width: 100%;
        justify-content: center;
    }
    .caoge-nav-item {
        padding: 6px 10px;
        font-size: 14px;
    }
    .user-name {
        display: none;
    }
    .caoge-main {
        padding: 12px;
    }
    .page-header {
        padding: 12px;
    }
    .page-title {
        font-size: 18px;
    }
    .modal {
        width: 95vw;
        max-width: 100%;
        margin: 10px;
    }
    .modal.modal-small {
        width: 95vw;
    }
    .data-table {
        font-size: 12px;
        min-width: 600px;
    }
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
    .toast {
        top: 60px;
        width: 90vw;
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .nav-grid {
        grid-template-columns: 1fr;
    }
    .caoge-nav-item {
        padding: 6px 8px;
        font-size: 13px;
        gap: 2px;
    }
    .caoge-logo-text {
        font-size: 14px;
    }
}

/* ============ 账本 v1.3：子统计卡 / 月历 / 分类管理 ============ */
.ledger-sub-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.sub-stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #ebeef5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.sub-stat-title {
    font-size: 13px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #606266;
    padding: 2px 0;
}
.sub-stat-row b {
    font-size: 13px;
    color: #303133;
    font-weight: 600;
}
.sub-stock {
    border-top: 3px solid #722ed1;
}
.sub-stock .sub-stat-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #722ed1;
    display: inline-block;
}
.sub-estate {
    border-top: 3px solid #e6a23c;
}
.sub-estate .sub-stat-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e6a23c;
    display: inline-block;
}
.col-pay {
    min-width: 110px;
    white-space: nowrap;
}
/* 月历 */
.calendar-section {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.calendar-title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
}
.calendar-title em {
    font-style: normal;
    color: #409EFF;
    margin-left: 4px;
}
.calendar-legend {
    font-size: 12px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-income {
    background: #67c23a;
}
.legend-expense {
    background: #f56c6c;
}
.calendar-hint {
    color: #909399;
    margin-left: 6px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-weekday {
    text-align: center;
    font-size: 12px;
    color: #909399;
    padding: 4px 0;
    font-weight: 600;
}
.calendar-cell {
    border: 1px solid #f0f2f5;
    border-radius: 6px;
    min-height: 58px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    overflow: hidden;
    position: relative;
}
.calendar-cell:hover {
    border-color: #409EFF;
    box-shadow: 0 0 0 1px #409EFF;
}
.calendar-cell.active {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.35);
    background: #ecf5ff;
}
.calendar-cell-empty {
    background: #fafafa;
}
.calendar-empty {
    background: transparent;
    border: none;
    cursor: default;
    min-height: 0;
}
.calendar-day-num {
    display: block;
    font-size: 12px;
    color: #606266;
    font-weight: 600;
    margin-bottom: 2px;
}
.calendar-income,
.calendar-expense {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-income {
    color: #67c23a;
}
.calendar-expense {
    color: #f56c6c;
}
/* 分类管理按钮 */
.btn-edit-ledgercat {
    background: #ecf5ff;
    color: #409EFF;
    border: 1px solid #d9ecff;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
}
.btn-edit-ledgercat:hover {
    background: #d9ecff;
}
.btn-delete-ledgercat {
    background: #fef0f0;
    color: #f56c6c;
    border: 1px solid #fde2e2;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}
.btn-delete-ledgercat:hover {
    background: #fde2e2;
}
.modal.modal-medium {
    width: 560px;
    max-width: 94vw;
}

@media (max-width: 768px) {
    .ledger-sub-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .calendar-cell {
        min-height: 46px;
        padding: 3px;
    }
    .calendar-hint {
        display: none;
    }
    .calendar-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================= 账本 v1.4：现金流游戏四区布局 ================= */
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #409EFF;
    color: #fff;
    transition: opacity .15s;
}
.btn-sm:hover { opacity: .85; }
.btn-sm.btn-plain { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
.btn-sm.btn-plain:hover { border-color: #409EFF; color: #409EFF; opacity: 1; }
.btn-sm.btn-warn { background: #e6a23c; }
.btn-sm.btn-green { background: #67c23a; }

/* 顶部月份行 */
.cf-monthbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cf-monthbar label { font-size: 13px; color: #909399; }

/* 顶部双现金卡 */
.cf-cashbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.cf-cash-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(31,45,61,.06);
}
.cf-cash-card.cash-net { border-left: 4px solid #409EFF; }
.cf-cash-card.cash-hand { border-left: 4px solid #67c23a; }
.cf-cash-label { font-size: 13px; color: #909399; margin-bottom: 6px; }
.cf-cash-value { font-size: 26px; font-weight: 700; color: #303133; line-height: 1.2; }
.cf-cash-value.negative { color: #f56c6c; }
.cf-cash-value.positive { color: #67c23a; }
.cf-cash-sub { font-size: 12px; color: #909399; margin-top: 6px; }
.cf-cash-edit {
    margin-top: 10px;
    font-size: 12px;
    color: #409EFF;
    background: none;
    border: 1px solid #409EFF;
    border-radius: 6px;
    padding: 3px 12px;
    cursor: pointer;
}
.cf-cash-edit:hover { background: #ecf5ff; }

/* 2x2 四区域 */
.cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cf-panel {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(31,45,61,.06);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}
.cf-panel.panel-income { border-top: 4px solid #67c23a; }
.cf-panel.panel-expense { border-top: 4px solid #f56c6c; }
.cf-panel.panel-assets { border-top: 4px solid #409EFF; }
.cf-panel.panel-liab,
.cf-panel.panel-liabilities { border-top: 4px solid #e6a23c; }
.cf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
}
.cf-panel-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cf-panel-title { font-size: 15px; font-weight: 700; color: #303133; }
.cf-panel-total { font-size: 15px; font-weight: 700; }
.panel-income .cf-panel-total { color: #67c23a; }
.panel-expense .cf-panel-total { color: #f56c6c; }
.panel-assets .cf-panel-total { color: #409EFF; }
.panel-liab .cf-panel-total,
.panel-liabilities .cf-panel-total { color: #e6a23c; }
.cf-panel-toggle {
    font-size: 12px;
    color: #909399;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 2px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.cf-panel-toggle:hover { color: #409EFF; border-color: #409EFF; }
.cf-panel-body {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
    max-height: 320px;
}
.cf-panel.cf-panel-expanded .cf-panel-body { max-height: 640px; }
.cf-panel-foot {
    padding: 10px 16px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cf-panel-tip { font-size: 11px; color: #c0c4cc; padding: 0 16px 8px; }
.cf-panel-foot-right { justify-content: flex-end; padding: 6px 16px; }
/* 顶部弹出选择菜单 */
.cf-popover {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 120px;
    overflow: hidden;
}
.cf-popover-item {
    padding: 8px 16px;
    font-size: 13px;
    color: #303133;
    cursor: pointer;
    transition: background 0.15s;
}
.cf-popover-item:hover { background: #f5f7fa; color: #409eff; }
/* 支出表上传图片按钮 */
.cf-upload-btn { margin-right: 6px; white-space: nowrap; }

/* 记录行 */
.cf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px dashed #f2f3f5;
}
.cf-row:hover { background: #f8fafc; }
.cf-row-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-row-name { font-size: 13px; color: #303133; font-weight: 600; }
.cf-row-cat { font-size: 12px; color: #909399; }
.cf-row-date { font-size: 11px; color: #c0c4cc; }
.cf-row-tag {
    font-size: 11px;
    background: #ecf5ff;
    color: #409EFF;
    border-radius: 4px;
    padding: 1px 6px;
}
.cf-row-fixed { background: #fdf6ec; }
.cf-row-fixed .cf-row-tag { background: #fdf0db; color: #e6a23c; }
.cf-row-loan-fixed .cf-row-tag { background: #fff1e0; color: #e6a23c; }
.cf-row-loan-fixed .cf-row-date { color: #b88230; font-weight: 600; }
.cf-row-loan-fixed .cf-row-period { color: #909399; font-size: 12px; }
/* 借贷还款方式标签 */
.cf-repay-method {
    font-size: 11px;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.cf-repay-interest { background: #ecf5ff; color: #409EFF; }
.cf-repay-principal { background: #f0f9eb; color: #67c23a; }
.cf-row-tag-cleared { background: #f0f0f0; color: #909399; text-decoration: line-through; }
.cf-row-cleared .cf-row-name,
.cf-row-cleared .cf-row-cat,
.cf-row-cleared .cf-row-amount {
    text-decoration: line-through;
    color: #c0c4cc !important;
}
.cf-row-amount { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cf-row-ops { display: flex; gap: 6px; white-space: nowrap; }
.cf-op {
    font-size: 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: #409EFF;
    padding: 0;
}
.cf-op:hover { text-decoration: underline; }
.cf-op-del { color: #f56c6c; }
.cf-op-clear { color: #e6a23c; }
.cf-op-loan-del { color: #f56c6c; }
.cf-op-loan-settle { color: #e6a23c; }
.cf-empty { text-align: center; color: #c0c4cc; font-size: 13px; padding: 28px 10px; }

/* 月固定表格 */
.cf-monthly-off td { opacity: .55; }
.m-type { font-size: 12px; border-radius: 4px; padding: 1px 6px; }
.m-type-in { background: #f0f9eb; color: #67c23a; }
.m-type-out { background: #fef0f0; color: #f56c6c; }
.m-state { font-size: 12px; border-radius: 4px; padding: 1px 6px; }
.m-state-on { background: #f0f9eb; color: #67c23a; }
.m-state-off { background: #f4f4f5; color: #909399; }

/* 月固定表单联排 */
.monthly-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 20px 18px;
}
.monthly-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.monthly-form .form-field.span2 { grid-column: span 2; }
.monthly-form .form-field label { font-size: 12px; color: #909399; }
.monthly-form .form-field input,
.monthly-form .form-field select {
    height: 34px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.monthly-form .form-field input:focus,
.monthly-form .form-field select:focus { border-color: #409EFF; }
.monthly-form-actions { display: flex; gap: 8px; padding: 0 20px 16px; }
.monthly-form-actions .btn-sm { flex: 1; }

/* 移动端：四区变单列 */
@media (max-width: 768px) {
    .cf-grid {
        grid-template-columns: 1fr;
    }
    .cf-cashbar {
        grid-template-columns: 1fr;
    }
    .monthly-form {
        grid-template-columns: 1fr;
    }
    .monthly-form .form-field.span2 { grid-column: span 1; }
    .cf-row-ops { flex-wrap: wrap; }
}

/* ================= 账本 v1.5：借贷 / 收支清除 ================= */
.modal-large {
    width: 900px;
    max-width: 96vw;
}

.cf-cleared-box {
    border-top: 1px dashed #e4e7ed;
    background: #fafafa;
    padding: 4px 0;
}
.cf-cleared-title {
    font-size: 11px;
    color: #c0c4cc;
    padding: 6px 16px 2px;
}
.cf-cleared-btn {
    margin-left: auto;
}

.loan-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 16px 4px;
}
.loan-form select,
.loan-form input {
    height: 34px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}
.loan-form select:focus,
.loan-form input:focus { border-color: #409EFF; }
.loan-form .btn-sm { height: 34px; align-self: end; }
/* 借贷表单标签化字段 */
.loan-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.loan-field > span {
    font-size: 11px;
    color: #909399;
    line-height: 1.3;
}
.loan-field-btn { justify-content: flex-end; }
/* 等额本息时隐藏月本金/月利息（由 JS 切换 loan-form 的 data-method 控制） */
.loan-form[data-method="等额本息"] .loan-principal-interest { display: none; }
.loan-principal-interest { display: flex; }
.loan-field input[readonly] {
    background: #f5f7fa;
    color: #303133;
    font-weight: 600;
}
.loan-tip {
    font-size: 11px;
    color: #909399;
    background: #f5f7fa;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 10px 16px;
}

@media (max-width: 768px) {
    .loan-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================= 账本 v1.5.1：筛选/搜索/折叠/标题/现金组件 ================= */
.cf-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 30px;
}
.cf-search input {
    width: 230px;
    height: 30px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.cf-search input:focus { border-color: #409EFF; }

/* 账本搜索框靠右 */
.ledger-search-right {
    margin-left: auto;
    margin-right: 30px;
}
.ledger-search-right input {
    height: 35px;
    width: 260px;
}

.cf-monthbar .filter-select {
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    background: #fff;
    color: #303133;
    outline: none;
    box-sizing: border-box;
}
.cf-monthbar .filter-select:focus { border-color: #409EFF; }

.cf-cash-components {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    word-break: break-all;
}
.cf-cash-components .cf-comp-name {
    color: #909399;
}
.cf-cash-components .cf-comp-colon {
    color: #909399;
    margin-right: 1px;
}
.cf-cash-components .cf-comp-val {
    color: #f56c6c;
}
.cf-cash-components .cf-comp-sep {
    margin: 0 8px;
    color: #dcdfe6;
}

.cf-row-title { color: #303133; }

.cf-cleared-btn-orange {
    color: #e6a23c !important;
    border-color: #e6a23c !important;
    background: #fdf6ec !important;
}
.cf-cleared-btn-orange .cf-clear-count { color: #e6a23c; }

.cf-monthly-btn {
    background: #67c23a !important;
    color: #fff !important;
    border-color: #67c23a !important;
}
.cf-monthly-btn:hover { opacity: .85 !important; }

.modal.modal-monthly {
    width: 640px;
    height: 460px;
    max-width: 96vw;
    max-height: 94vh;
}
.modal.modal-monthly .modal-body {
    overflow-y: auto;
    height: calc(100% - 120px);
}

.cash-comp-note {
    font-size: 12px;
    color: #909399;
    background: #f5f7fa;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .cf-search input { width: 140px; }
}

/* ============ v1.5.2 ============ */

/* 收入表头：成本（金额上方） */
.cf-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #fafafa;
    border-bottom: 1px solid #ebeef5;
    font-size: 12px;
    color: #909399;
    font-weight: 600;
}
.cf-list-head-name { flex: 1; }
.cf-list-head-cost { white-space: nowrap; }
.cf-list-head-ops { width: 124px; }

/* 批量删除：复选框 + 面板头按钮 */
.cf-panel-head-ops { display: flex; align-items: center; gap: 8px; }
.cf-batch-del { font-size: 12px; padding: 2px 8px; }
.cf-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; }
.cf-checkbox input { margin: 0; cursor: pointer; }
.cf-check-all-wrap { flex-shrink: 0; width: 22px; }

/* 分类管理筛选栏 */
.manage-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}
.manage-cat-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.manage-cat-filters select {
    padding: 6px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: #303133;
}
.manage-cat-filters input {
    width: 180px;
    padding: 6px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
}

/* 借贷弹窗加宽 */
.modal.modal-loan {
    width: 1080px;
    max-width: 97vw;
}
.modal.modal-loan .data-table {
    font-size: 12px;
}
.modal.modal-loan .data-table th,
.modal.modal-loan .data-table td {
    padding: 7px 8px;
    white-space: nowrap;
}

/* 负债表借贷项：第二行还款进度 */
.cf-loan-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 16px 10px 16px;
    font-size: 12px;
    color: #e6a23c;
    background: #fdf6ec;
    border-bottom: 1px dashed #f2f3f5;
}
.cf-loan-progress span {
    white-space: nowrap;
}
.cf-row-loan + .cf-loan-progress {
    margin-top: -1px;
}
.cf-row-loan .cf-row-info { flex-wrap: wrap; }

/* ================= 报销记账 v1.10 ================= */
.text-right { text-align: right !important; }
.empty-td {
    text-align: center;
    color: #909399;
    padding: 30px 10px !important;
}
.total-row td {
    font-weight: 700;
    color: #303133;
    background: #f5f7fa;
    border-top: 2px solid #e6a23c;
}
.btn-success {
    background: #67c23a;
    color: #fff;
}
.btn-success:hover { background: #85ce61; }

/* 报销表格纸张 */
.reimburse-sheet {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(31, 45, 61, .06);
    padding: 18px 20px;
    margin-top: 16px;
}
/* 历史记录 / 发票管理 加宽弹窗 */
.modal.modal-wide {
    width: 980px;
    max-width: 96vw;
    max-height: 92vh;
}
.modal.modal-wide .modal-body {
    overflow-y: auto;
    max-height: calc(92vh - 130px);
}
.reimburse-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #303133;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 2px solid #303133;
    margin-bottom: 12px;
}
.reimburse-sheet .table-container {
    box-shadow: none;
    border: none;
    max-height: 560px;
    overflow-y: auto;
}
.reimburse-sheet .data-table th {
    background: #f5f7fa;
    font-size: 13px;
}
.reimburse-sheet .data-table td {
    font-size: 14px;
    padding: 9px 12px;
}
.reimburse-sheet-foot {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px dashed #dcdfe6;
}
.reimburse-foot-hint {
    font-size: 12px;
    color: #909399;
}
.reimburse-page .toolbar { margin-top: 4px; }
.reimburse-page .search-input { height: 35px; box-sizing: border-box; }

/* 历史详情 */
.reimburse-history-detail .table-container {
    max-height: 420px;
    overflow-y: auto;
}

/* ================= 打印样式（事件ID 列隐藏，工具栏/按钮不打印） ================= */
@media print {
    .caoge-header,
    .page-header,
    .toolbar,
    .no-print,
    .reimburse-sheet-foot,
    .reimburse-print-hide {
        display: none !important;
    }
    .reimburse-sheet {
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    .reimburse-sheet .table-container {
        max-height: none;
        overflow: visible;
    }
    .reimburse-sheet .data-table th,
    .reimburse-sheet .data-table td {
        border: 1px solid #000;
    }
    .caoge-main { padding: 0; }
    body { background: #fff; }
}

/* ===== PNP阴阳球频道 ===== */
.pnp-page .pnp-iframe-wrap { width: 100%; margin-top: 6px; }
#pnpFrame { display: block; width: 100%; height: calc(100vh - 200px); min-height: 1000px; border: 1px solid #d9d9d9; border-radius: 10px; background: #0b101c; }