/* ====================================
   西梅故事 - 作者专区全新设计
   现代化、橙色主题、全新布局
   ==================================== */

/* ==================== 整体布局 ==================== */
body.author-zone {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%) !important;
}

.author-layout {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    gap: 30px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 30px 20px 80px !important;
    min-height: calc(100vh - 200px) !important;
}

/* ==================== 侧边栏 - 全新设计 ==================== */
.author-sidebar {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 25px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f0f0f0 !important;
    position: sticky !important;
    top: 100px !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
}

.sidebar-content {
    display: flex !important;
    flex-direction: column !important;
}

.menu-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 20px !important;
    margin: 20px 0 12px 0 !important;
}

.menu-title:first-child {
    margin-top: 0 !important;
}

.sidebar-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

.sidebar-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
    position: relative !important;
}

.sidebar-menu a i {
    font-size: 18px !important;
    width: 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.sidebar-menu a:hover {
    background: linear-gradient(to right, #fff5f0 0%, transparent 100%) !important;
    color: #ff6600 !important;
    border-left-color: #ff6600 !important;
}

.sidebar-menu a:hover i {
    transform: scale(1.1) !important;
}

.sidebar-menu a.active {
    background: linear-gradient(to right, #fff5f0 0%, #ffe8d9 100%) !important;
    color: #ff6600 !important;
    border-left-color: #ff6600 !important;
}

.sidebar-menu a.active::after {
    content: '' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background: #ff6600 !important;
    border-radius: 50% !important;
}

/* ==================== 主内容区域 - 全新设计 ==================== */
.author-content {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: auto !important;
}

/* ==================== 内容区块 ==================== */
.content-section {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f0f0f0 !important;
}

/* 工作台内容区域特殊样式 */
#dashboard-content,
#dashboard-content.content-section,
div#dashboard-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* 强制覆盖任何可能的白色背景 */
.author-content #dashboard-content,
.author-content #dashboard-content.content-section {
    background: transparent !important;
}

.section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #f5f5f5 !important;
}

.section-header h2,
.section-header h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.section-header h2::before,
.section-header h3::before {
    content: '' !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(to bottom, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 2px !important;
}

/* ==================== 统计卡片 ==================== */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

.stat-card {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 2px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100px !important;
    height: 100px !important;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.05) 0%, transparent 100%) !important;
    border-radius: 0 0 0 100% !important;
}

.stat-card:hover {
    transform: translateY(-5px) !important;
    border-color: #ffe8d9 !important;
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.15) !important;
}

.stat-card .stat-icon {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

.stat-card .stat-icon i {
    font-size: 24px !important;
    color: #fff !important;
}

.stat-card .stat-label {
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.stat-card .stat-value {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    line-height: 1 !important;
}

/* ==================== 按钮样式 ==================== */
.btn,
button.btn,
a.btn {
    padding: 12px 28px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.35) !important;
}

.btn-secondary {
    background: #fff !important;
    color: #ff6600 !important;
    border: 2px solid #ff6600 !important;
}

.btn-secondary:hover {
    background: #fff5f0 !important;
    transform: translateY(-2px) !important;
}

/* ==================== 作品卡片 ==================== */
.books-grid,
.works-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

.book-card,
.work-item {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 2px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.book-card:hover,
.work-item:hover {
    transform: none !important;
    border-color: #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.book-card .book-cover,
.work-item .work-cover {
    width: 100% !important;
    height: 180px !important;
    background: #f5f5f5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 15px !important;
}

.book-card .book-cover img,
.work-item .work-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.book-card .book-title,
.work-item .work-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.book-card .book-stats,
.work-item .work-stats {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f5f5f5 !important;
}

/* ==================== 表格样式 ==================== */
.data-table,
table.data-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.data-table thead th {
    background: #f8f8f8 !important;
    color: #666 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border: none !important;
}

.data-table thead th:first-child {
    border-radius: 10px 0 0 10px !important;
}

.data-table thead th:last-child {
    border-radius: 0 10px 10px 0 !important;
}

.data-table tbody tr {
    background: #fff !important;
    transition: all 0.3s ease !important;
}

.data-table tbody tr:hover {
    background: #f9fafb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.data-table tbody td {
    padding: 16px !important;
    border: none !important;
    border-top: 1px solid #f5f5f5 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.data-table tbody td:first-child {
    border-left: 1px solid #f5f5f5 !important;
    border-radius: 10px 0 0 10px !important;
}

.data-table tbody td:last-child {
    border-right: 1px solid #f5f5f5 !important;
    border-radius: 0 10px 10px 0 !important;
}

/* ==================== 表单样式 ==================== */
.form-group {
    margin-bottom: 20px !important;
}

.form-group label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #f8f8f8 !important;
    transition: all 0.3s ease !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none !important;
    border-color: #ff6600 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1) !important;
}

/* ==================== 工作台 - 欢迎区域 ==================== */
.dashboard-welcome,
div.dashboard-welcome,
#dashboard-content .dashboard-welcome {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}


.welcome-header,
.dashboard-welcome .welcome-header,
#dashboard-content .welcome-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
    padding: 20px 24px !important;
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.welcome-icon-weather,
.welcome-header .welcome-icon-weather {
    display: none !important;
}

.welcome-icon-weather i,
.welcome-header .welcome-icon-weather i {
    display: none !important;
}

.welcome-text,
.welcome-header .welcome-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    visibility: visible !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.welcome-text h2,
.welcome-header .welcome-text h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    line-height: 1.4 !important;
}

.welcome-text .welcome-description,
.welcome-header .welcome-text p,
.welcome-header .welcome-text .welcome-description {
    font-size: 12px !important;
    color: #999 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.welcome-stats,
.welcome-header .welcome-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    visibility: visible !important;
}

.welcome-stats .stats-item,
.welcome-header .welcome-stats .stats-item {
    text-align: left !important;
    padding: 0 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid #f0f0f0 !important;
    min-width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    visibility: visible !important;
    box-shadow: none !important;
}

.welcome-stats .stats-item:last-child {
    border-right: none !important;
}

.welcome-stats .stats-item:first-child {
    padding-left: 0 !important;
}

.welcome-stats .stats-title,
.welcome-header .welcome-stats .stats-title {
    font-size: 11px !important;
    color: #999 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.welcome-stats .stats-value,
.welcome-header .welcome-stats .stats-value {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* ==================== 工作台 - 我的作品 ==================== */
.create-new-container {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f0f0f0 !important;
}

.create-new-container h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 25px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #f5f5f5 !important;
}

.create-new-container h3::before {
    content: '' !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(to bottom, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 2px !important;
    margin-right: 12px !important;
}

.create-new-container .view-all {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ff6600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.create-new-container .view-all:hover {
    color: #ff8833 !important;
    transform: translateX(3px) !important;
}

/* ==================== 工作台 - 我的小说列表 - 全新渐变卡片设计 ==================== */
.dashboard-books-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 工作台书籍卡片 - 与作品管理统一的全新设计 - 强制覆盖 */
body .dashboard-books-list .novel-card,
body .dashboard-books-list .novel-card.dashboard-book,
.author-content .dashboard-books-list .novel-card,
.author-content .dashboard-books-list .novel-card.dashboard-book {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 320px !important;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

body .dashboard-books-list .novel-card::before,
body .dashboard-books-list .novel-card.dashboard-book::before,
.author-content .dashboard-books-list .novel-card::before,
.author-content .dashboard-books-list .novel-card.dashboard-book::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #ff6600 0%, #ff8833 50%, #ffaa66 100%) !important;
    z-index: 1 !important;
    transition: height 0.3s ease !important;
}

body .dashboard-books-list .novel-card:hover,
body .dashboard-books-list .novel-card.dashboard-book:hover,
.author-content .dashboard-books-list .novel-card:hover,
.author-content .dashboard-books-list .novel-card.dashboard-book:hover {
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

body .dashboard-books-list .novel-card:hover::before,
body .dashboard-books-list .novel-card.dashboard-book:hover::before,
.author-content .dashboard-books-list .novel-card:hover::before,
.author-content .dashboard-books-list .novel-card.dashboard-book:hover::before {
    height: 4px !important;
    opacity: 1 !important;
}

/* 工作台封面 - 横幅样式 - 强制覆盖旧样式 */
body .dashboard-books-list .novel-card .novel-cover,
body .dashboard-books-list .novel-card.dashboard-book .novel-cover,
.author-content .dashboard-books-list .novel-card .novel-cover,
.author-content .dashboard-books-list .novel-card.dashboard-book .novel-cover {
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

body .dashboard-books-list .novel-card .novel-cover::after,
body .dashboard-books-list .novel-card.dashboard-book .novel-cover::after,
.author-content .dashboard-books-list .novel-card .novel-cover::after,
.author-content .dashboard-books-list .novel-card.dashboard-book .novel-cover::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body .dashboard-books-list .novel-card .novel-cover .cover-placeholder,
body .dashboard-books-list .novel-card.dashboard-book .novel-cover .cover-placeholder,
.author-content .dashboard-books-list .novel-card .novel-cover .cover-placeholder,
.author-content .dashboard-books-list .novel-card.dashboard-book .novel-cover .cover-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 0 !important;
    line-height: 0 !important;
    border-radius: 0 !important;
}

body .dashboard-books-list .novel-card .novel-cover .cover-placeholder img,
body .dashboard-books-list .novel-card.dashboard-book .novel-cover .cover-placeholder img,
.author-content .dashboard-books-list .novel-card .novel-cover .cover-placeholder img,
.author-content .dashboard-books-list .novel-card.dashboard-book .novel-cover .cover-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.4s ease !important;
    border: none !important;
    filter: brightness(0.95) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
}

body .dashboard-books-list .novel-card:hover .novel-cover .cover-placeholder img,
body .dashboard-books-list .novel-card.dashboard-book:hover .novel-cover .cover-placeholder img,
.author-content .dashboard-books-list .novel-card:hover .novel-cover .cover-placeholder img,
.author-content .dashboard-books-list .novel-card.dashboard-book:hover .novel-cover .cover-placeholder img {
    transform: scale(1) !important;
    filter: brightness(0.95) !important;
}

/* 工作台内容区 - 强制覆盖 */
body .dashboard-books-list .novel-card .novel-content,
body .dashboard-books-list .novel-card.dashboard-book .novel-content,
.author-content .dashboard-books-list .novel-card .novel-content,
.author-content .dashboard-books-list .novel-card.dashboard-book .novel-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 30px !important;
    justify-content: space-between !important;
    min-height: auto !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
}

/* ==================== 创建新书提示 ==================== */
.create-new-prompt {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border: 2px dashed #ff6600 !important;
    border-radius: 24px !important;
    padding: 60px 30px !important;
    text-align: center !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 8px 24px rgba(255, 102, 0, 0.08) !important;
}

.create-new-prompt:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(255, 102, 0, 0.25) !important;
    background: linear-gradient(135deg, #ffe8d9 0%, #ffd4b3 100%) !important;
}

.create-new-prompt .create-book-link {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
}

.create-new-prompt .prompt-icon {
    width: 100px !important;
    height: 100px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 28px rgba(255, 102, 0, 0.35) !important;
    transition: transform 0.3s ease !important;
}

.create-new-prompt:hover .prompt-icon {
    transform: rotate(360deg) scale(1.1) !important;
}

.create-new-prompt .prompt-icon i {
    font-size: 45px !important;
    color: #fff !important;
}

.create-new-prompt .prompt-content h4 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    margin: 0 0 10px 0 !important;
}

.create-new-prompt .prompt-desc {
    font-size: 15px !important;
    color: #666 !important;
    font-weight: 600 !important;
}

/* ==================== 快捷操作 ==================== */
.quick-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

.quick-action-btn {
    padding: 18px 20px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1200px) {
    .author-layout {
        grid-template-columns: 240px 1fr !important;
        gap: 20px !important;
    }
    
    .welcome-header {
        gap: 14px !important;
    }
    
    .welcome-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .author-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 15px 60px !important;
    }
    
    .author-sidebar {
        position: static !important;
        max-height: none !important;
        border-radius: 16px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .welcome-header {
        padding: 18px 20px !important;
    }
    
    .welcome-stats {
        grid-template-columns: 1fr !important;
        gap: 12px 0 !important;
    }
    
    .welcome-stats .stats-item {
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 8px 0 !important;
    }
    
    .welcome-stats .stats-item:last-child {
        border-bottom: none !important;
    }
    
    .welcome-stats .stats-item {
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    .dashboard-books-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .author-layout {
        padding: 15px 10px 50px !important;
    }
    
    .content-section {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    
    .section-header h2,
    .section-header h3 {
        font-size: 18px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .books-grid,
    .works-grid {
        grid-template-columns: 1fr !important;
    }
    
    .dashboard-welcome {
        border-radius: 16px !important;
    }
    
    .welcome-header {
        padding: 16px 18px !important;
        gap: 12px !important;
    }
    
    .welcome-text h2 {
        font-size: 15px !important;
    }
    
    .welcome-text .welcome-description {
        font-size: 12px !important;
    }
    
    .welcome-stats {
        grid-template-columns: 1fr !important;
        gap: 10px 0 !important;
    }
    
    .welcome-stats .stats-item {
        padding: 6px 0 !important;
    }
    
    .welcome-stats .stats-value {
        font-size: 18px !important;
    }
    
    .welcome-stats .stats-item {
        padding: 15px 20px !important;
        min-width: 110px !important;
    }
    
    .welcome-stats .stats-value {
        font-size: 20px !important;
    }
    
    .create-new-container {
        padding: 20px !important;
    }
    
    .create-new-container h3 {
        font-size: 18px !important;
    }
    
    .dashboard-books-list {
        grid-template-columns: 1fr !important;
    }
    
    .create-new-prompt {
        padding: 30px 20px !important;
    }
    
    .create-new-prompt .prompt-icon {
        width: 70px !important;
        height: 70px !important;
    }
    
    .create-new-prompt .prompt-icon i {
        font-size: 35px !important;
    }
}

/* ==================== 作品管理界面 - 全新橙色主题 ==================== */
#novels-content,
div#novels-content,
#novels-content.content-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 权益说明 - 隐藏，合并到标题区域 */
#novels-content > p,
div#novels-content > p {
    display: none !important;
}

/* 作品管理 - 标题区域整合设计 */
#novels-content .section-header,
div#novels-content .section-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    display: block !important;
    overflow: visible !important;
}

#novels-content .section-header::before {
    content: '作品达到2万字后可申请签约，享有广告分成等收益权益' !important;
    display: block !important;
    color: #999 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    padding: 0 0 12px 0 !important;
    background: transparent !important;
    margin: 0 !important;
    border-bottom: none !important;
}

#novels-content .section-header h2,
#novels-content .section-header .section-title {
    margin: 0 !important;
    color: #1a1a1a !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
}

#novels-content .section-header h2::before,
#novels-content .section-header .section-title::before {
    display: none !important;
}

#novels-content .section-header .header-actions {
    display: inline-block !important;
    vertical-align: middle !important;
    float: right !important;
    padding: 0 !important;
}

/* 确保section-header内容正确流动 */
#novels-content .section-header {
    display: flow-root !important;
}

#novels-content .section-header .header-actions .header-btn,
#novels-content .section-header .header-actions .primary-btn {
    padding: 10px 24px !important;
    background: #ff6600 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: opacity 0.2s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#novels-content .section-header .header-actions .header-btn:hover,
#novels-content .section-header .header-actions .primary-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #ff6600 !important;
    opacity: 0.9 !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    #novels-content .section-header h2 {
        display: block !important;
        float: none !important;
        padding: 15px 20px !important;
    }
    
    #novels-content .section-header .header-actions {
        display: block !important;
        float: none !important;
        padding: 0 20px 20px 20px !important;
        text-align: center !important;
    }
    
    #novels-content .section-header::before {
        padding: 0 0 10px 0 !important;
        font-size: 11px !important;
    }
    
    #novels-content .section-header h2,
    #novels-content .section-header .section-title {
        font-size: 18px !important;
        padding: 0 !important;
    }
    
    #novels-content .section-header .header-actions {
        padding: 0 !important;
    }
}

/* 作品列表容器 - 强制覆盖 */
#novels-content .section-content,
div#novels-content .section-content,
.section-content {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 空状态 */
#novels-content .empty-state,
.empty-state {
    text-align: center !important;
    padding: 80px 40px !important;
    background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%) !important;
    border-radius: 16px !important;
    border: 2px dashed #e0e0e0 !important;
}

.empty-state p {
    font-size: 16px !important;
    color: #999 !important;
    margin-bottom: 25px !important;
}

.empty-state .primary-btn {
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

.empty-state .primary-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.35) !important;
}

/* ========== 作品列表 - 全新渐变卡片设计 ========== */
.novels-list,
#novels-content .novels-list,
div.novels-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 作品卡片 - 渐变边框 + 立体效果 */
.novels-list .novel-card,
.novel-card,
div.novel-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 320px !important;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

.novels-list .novel-card::before,
.novel-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #ff6600 0%, #ff8833 50%, #ffaa66 100%) !important;
    z-index: 1 !important;
    transition: height 0.3s ease !important;
}

.novels-list .novel-card:hover,
.novel-card:hover,
div.novel-card:hover {
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.novels-list .novel-card:hover::before,
.novel-card:hover::before {
    height: 4px !important;
    opacity: 1 !important;
}

/* 书籍封面 - 顶部横幅样式 */
.novels-list .novel-card .novel-cover,
.novel-card .novel-cover,
div.novel-card .novel-cover {
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

/* 封面渐变遮罩 */
.novels-list .novel-card .novel-cover::after,
.novel-card .novel-cover::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.novels-list .novel-card .novel-cover .cover-placeholder,
.novel-card .novel-cover .cover-placeholder,
.novel-cover .cover-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 0 !important;
}

.novels-list .novel-card .novel-cover .cover-placeholder img,
.novel-card .novel-cover .cover-placeholder img,
.novel-cover .cover-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.4s ease !important;
    border: none !important;
    filter: brightness(0.95) !important;
}

.novels-list .novel-card:hover .novel-cover .cover-placeholder img,
.novel-card:hover .novel-cover .cover-placeholder img {
    transform: scale(1) !important;
    filter: brightness(0.95) !important;
}

/* 书籍内容区 - 下方信息区 */
.novels-list .novel-card .novel-content,
.novel-card .novel-content,
div.novel-card .novel-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 25px !important;
    justify-content: space-between !important;
    min-height: auto !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 顶部信息区域 */
.novels-list .novel-card .novel-header,
.novel-card .novel-header,
div.novel-card .novel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
}

.novels-list .novel-card .novel-info-top,
.novel-card .novel-info-top,
div.novel-card .novel-info-top {
    flex: 1 !important;
    min-width: 0 !important;
}

/* 书名 - 大标题样式 */
.novels-list .novel-card .novel-title,
.novel-card .novel-title,
div.novel-card .novel-title,
.novel-card h3.novel-title,
h3.novel-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    position: relative !important;
    display: inline-block !important;
}

.novels-list .novel-card .novel-title::after,
.novel-card .novel-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #ff6600 0%, #ff8833 100%) !important;
    transition: width 0.3s ease !important;
    border-radius: 2px !important;
}

.novels-list .novel-card:hover .novel-title,
.novel-card:hover .novel-title,
div.novel-card:hover h3.novel-title {
    color: #1a1a1a !important;
    transform: none !important;
}

.novels-list .novel-card:hover .novel-title::after,
.novel-card:hover .novel-title::after {
    width: 40px !important;
}

/* 作者和分类 - 标签样式 */
.novels-list .novel-card .update-status,
.novel-card .update-status,
div.novel-card .update-status {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.novels-list .novel-card .update-status::before,
.novel-card .update-status::before {
    content: '✍️' !important;
    font-size: 14px !important;
}

/* 创建时间 - 徽章样式 */
.novels-list .novel-card .novel-create-time,
.novel-card .novel-create-time,
div.novel-card .novel-create-time {
    font-size: 11px !important;
    color: #999 !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
    padding: 5px 12px !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
}

/* 底部区域 */
.novels-list .novel-card .novel-bottom,
.novel-card .novel-bottom,
div.novel-card .novel-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: auto !important;
    padding-top: 18px !important;
    border-top: 2px solid transparent !important;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, #ff6600 0%, #ffaa66 100%) border-box !important;
    border-image: linear-gradient(90deg, #ff6600 0%, transparent 50%, #ff6600 100%) 1 !important;
}

/* 统计信息 - 数据卡片样式 */
.novels-list .novel-card .novel-stats,
.novel-card .novel-stats,
div.novel-card .novel-stats {
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 50%, #fff5f0 100%) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 102, 0, 0.1) !important;
}

/* 操作按钮区域 - 网格布局 */
.novels-list .novel-card .novel-actions-bottom,
.novel-card .novel-actions-bottom,
div.novel-card .novel-actions-bottom {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* 操作按钮样式 - 玻璃拟态设计 */
.novels-list .novel-card .novel-action-inline,
.novel-card .novel-action-inline,
div.novel-card .novel-action-inline,
.novel-action-inline,
button.novel-action-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid rgba(255, 102, 0, 0.2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    color: #ff6600 !important;
    box-shadow: 
        0 3px 10px rgba(255, 102, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    white-space: nowrap !important;
    text-align: center !important;
    flex: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    min-height: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

.novels-list .novel-card .novel-action-inline::before,
.novel-card .novel-action-inline::before,
button.novel-action-inline::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
}

.novels-list .novel-card .novel-action-inline:hover::before,
.novel-card .novel-action-inline:hover::before,
button.novel-action-inline:hover::before {
    left: 100% !important;
}

.novels-list .novel-card .novel-action-inline:hover,
.novel-card .novel-action-inline:hover,
button.novel-action-inline:hover {
    background: rgba(255, 245, 240, 0.8) !important;
    border-color: #e0e0e0 !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.novels-list .novel-card .novel-action-inline i,
.novel-card .novel-action-inline i,
button.novel-action-inline i {
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

.novels-list .novel-card .novel-action-inline:hover i,
.novel-card .novel-action-inline:hover i,
button.novel-action-inline:hover i {
    transform: none !important;
}

/* 新建章节按钮 - 主要按钮，橙色渐变 */
.novels-list .novel-card .novel-action-inline.create-chapter,
.novel-card .novel-action-inline.create-chapter,
button.novel-action-inline.create-chapter {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 50%, #ff6600 100%) !important;
    background-size: 200% 100% !important;
    color: #fff !important;
    border: 2px solid #ff6600 !important;
    box-shadow: 
        0 6px 20px rgba(255, 102, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.novels-list .novel-card .novel-action-inline.create-chapter::before,
.novel-card .novel-action-inline.create-chapter::before,
button.novel-action-inline.create-chapter::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
}

.novels-list .novel-card .novel-action-inline.create-chapter:hover,
.novel-card .novel-action-inline.create-chapter:hover,
button.novel-action-inline.create-chapter:hover {
    background-position: right center !important;
    border-color: #ff6600 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

/* 禁用状态 */
.novels-list .novel-card .novel-action-inline.disabled,
.novel-card .novel-action-inline.disabled,
button.novel-action-inline.disabled,
.novel-action-inline.disabled,
.novel-action-inline:disabled,
button.novel-action-inline:disabled {
    background: #f5f5f5 !important;
    color: #bbb !important;
    border-color: #e0e0e0 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

.novels-list .novel-card .novel-action-inline.disabled:hover,
.novel-card .novel-action-inline.disabled:hover,
button.novel-action-inline.disabled:hover,
.novel-action-inline:disabled:hover {
    background: #f5f5f5 !important;
    color: #bbb !important;
    border-color: #e0e0e0 !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* 冻结状态标识 */
.status-frozen,
span.status-frozen {
    color: #dc3545 !important;
    font-weight: 700 !important;
}

/* 隐藏旧版右侧操作按钮 */
.novels-list .novel-card .novel-actions,
.novel-card .novel-actions {
    display: none !important;
}

/* ==================== 数据中心界面 - 全新橙色主题 ==================== */

/* 数据中心容器 - 强制覆盖 */
body #data-content,
body #data-content.content-section,
#data-content,
#data-content.content-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 数据分析内容区 - 强制覆盖 */
body .data-analytics-content,
#data-content .data-analytics-content,
.data-analytics-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 页面头部 - 强制覆盖 */
body #data-content .section-header,
#data-content .section-header,
.section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
}

.header-title-group h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
}

.data-update-info {
    display: flex !important;
    gap: 20px !important;
    font-size: 13px !important;
    color: #666 !important;
}

.update-frequency,
.last-update {
    padding: 6px 14px !important;
    background: #f5f5f5 !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

.month-select {
    padding: 8px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.month-select:hover {
    background: #f5f5f5 !important;
    border-color: #999 !important;
}

/* ========== 数据概览卡片 - 全新设计 ========== */
body .data-summary,
#data-content .data-summary,
.data-analytics-content .data-summary,
.data-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 25px !important;
}

body .data-card,
#data-content .data-card,
.data-analytics-content .data-card,
.data-summary .data-card,
.data-card {
    position: relative !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body .data-card::before,
#data-content .data-card::before,
.data-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
    transition: all 0.3s ease !important;
}

body .data-card:hover,
#data-content .data-card:hover,
.data-card:hover {
    transform: translateY(-4px) !important;
    border-color: #667eea !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15) !important;
}

body .data-card:hover::before,
#data-content .data-card:hover::before,
.data-card:hover::before {
    height: 4px !important;
}

/* 主要卡片 - 绿色主题 */
body .data-card.primary,
#data-content .data-card.primary,
.data-summary .data-card.primary,
.data-card.primary {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15) !important;
}

body .data-card.primary::before,
#data-content .data-card.primary::before,
.data-card.primary::before {
    height: 4px !important;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
}

body .data-card.primary:hover,
#data-content .data-card.primary:hover,
.data-card.primary:hover {
    transform: translateY(-4px) !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2) !important;
}

body .data-card.primary:hover::before,
#data-content .data-card.primary:hover::before,
.data-card.primary:hover::before {
    height: 4px !important;
}

body .data-title,
#data-content .data-title,
.data-card .data-title,
.data-title {
    font-size: 12px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body .data-card.primary .data-title,
#data-content .data-card.primary .data-title,
.data-card.primary .data-title {
    color: #10b981 !important;
    font-weight: 700 !important;
}

body .data-value,
#data-content .data-value,
.data-card .data-value,
.data-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    font-family: 'Arial', sans-serif !important;
}

body .data-card.primary .data-value,
#data-content .data-card.primary .data-value,
.data-card.primary .data-value {
    color: #10b981 !important;
}

body .data-desc,
#data-content .data-desc,
.data-card .data-desc,
.data-desc {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.data-trend {
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

.data-trend.up {
    color: #10b981 !important;
    background: #d1fae5 !important;
}

.data-trend.down {
    color: #ef4444 !important;
    background: #fee2e2 !important;
}

.data-trend.no-change {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
}

/* 不同位置卡片的颜色主题 */
.data-summary .data-card:nth-child(2)::before {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important;
}

.data-summary .data-card:nth-child(2):hover {
    border-color: #f59e0b !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15) !important;
}

.data-summary .data-card:nth-child(3)::before {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
}

.data-summary .data-card:nth-child(3):hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15) !important;
}

.data-summary .data-card:nth-child(4)::before {
    background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.data-summary .data-card:nth-child(4):hover {
    border-color: #8b5cf6 !important;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15) !important;
}

/* ========== 趋势图表区域 ========== */
.chart-container,
.reading-trend-chart {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    min-height: 480px !important;
}

.chart-container:hover,
.reading-trend-chart:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.chart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.chart-header h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.chart-header h4::before {
    display: none !important;
}

.chart-controls {
    display: flex !important;
    gap: 10px !important;
}

.chart-btn {
    padding: 8px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.chart-btn:hover {
    border-color: #999 !important;
    color: #333 !important;
    background: #f5f5f5 !important;
}

.chart-btn.active {
    background: #667eea !important;
    color: #fff !important;
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
}

/* 图表区域 */
.trend-chart,
.chart-area {
    min-height: 300px !important;
    position: relative !important;
}

.chart-grid {
    display: flex !important;
    gap: 15px !important;
    min-height: 300px !important;
}

.y-axis {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
}

.y-label {
    font-size: 13px !important;
    color: #999 !important;
    font-weight: 600 !important;
    text-align: right !important;
    padding-right: 10px !important;
}

.chart-plot {
    flex: 1 !important;
    position: relative !important;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    padding: 15px !important;
}

.grid-lines {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    pointer-events: none !important;
}

.grid-line {
    height: 1px !important;
    background: #e8e8e8 !important;
}

.x-axis {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 15px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    color: #999 !important;
    font-weight: 600 !important;
}

/* SVG图表线条 */
.trend-line-container svg {
    width: 100% !important;
    height: 100% !important;
}

.trend-line-container path {
    stroke: #ff6600 !important;
    stroke-width: 3 !important;
    fill: none !important;
}

.trend-line-container circle {
    fill: #fff !important;
    stroke: #ff6600 !important;
    stroke-width: 3 !important;
}

/* ========== 作品排行榜 ========== */
.works-ranking {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.works-ranking:hover {
    border-color: #ffe8d9 !important;
    box-shadow: 0 8px 32px rgba(255, 102, 0, 0.12) !important;
}

.works-ranking h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.works-ranking h4::before {
    content: '🏆' !important;
    font-size: 24px !important;
}

.ranking-table {
    width: 100% !important;
}

.ranking-header {
    display: grid !important;
    grid-template-columns: 60px 1fr 120px 100px !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ff6600 !important;
    margin-bottom: 12px !important;
}

.ranking-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ranking-item {
    display: grid !important;
    grid-template-columns: 60px 1fr 120px 100px !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid #f5f5f5 !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    align-items: center !important;
}

.ranking-item:hover {
    border-color: #ff6600 !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.1) !important;
}

.rank-number {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-align: center !important;
}

.ranking-item:nth-child(1) .rank-number {
    color: #fbbf24 !important;
}

.ranking-item:nth-child(2) .rank-number {
    color: #94a3b8 !important;
}

.ranking-item:nth-child(3) .rank-number {
    color: #fb923c !important;
}

.work-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.reads-count {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ff6600 !important;
    text-align: center !important;
}

.trend-indicator {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.trend-up {
    color: #10b981 !important;
}

.trend-down {
    color: #ef4444 !important;
}

.empty-ranking {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
}

.empty-ranking p {
    font-size: 16px !important;
    margin: 0 !important;
}

/* 头像和通知按钮 - 橙色主题 */
.user-avatar,
.main-header .user-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
    border: 2px solid #fff !important;
}

.user-avatar:hover,
.main-header .user-avatar:hover {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4) !important;
    background: linear-gradient(135deg, #ff7711 0%, #ff9944 100%) !important;
}

.user-avatar img,
.main-header .user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* 通知按钮 */
.notification-btn,
.main-header .notification-btn {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
    border: 2px solid #fff !important;
}

.notification-btn:hover,
.main-header .notification-btn:hover {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4) !important;
    background: linear-gradient(135deg, #ff7711 0%, #ff9944 100%) !important;
}

.notification-btn:active,
.main-header .notification-btn:active {
    transform: scale(1.02) !important;
}

.notification-btn i,
.main-header .notification-btn i {
    font-size: 18px !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.notification-btn:hover i,
.main-header .notification-btn:hover i {
    transform: rotate(15deg) scale(1.1) !important;
}

/* 通知红点 */
.notification-badge,
.notification-btn .notification-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #ff3333 0%, #ff0000 100%) !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: notification-pulse 2s infinite !important;
    min-width: 20px !important;
    z-index: 100 !important;
    line-height: 1 !important;
    text-align: center !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4) !important;
}

@keyframes notification-pulse {
    0%, 100% {
        transform: scale(1) !important;
        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4) !important;
    }
    50% {
        transform: scale(1.15) !important;
        box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6) !important;
    }
}

/* 用户区域容器 */
.user-area,
.main-header .user-area {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* 用户名和会员标识 */
.user-name,
.user-info .user-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* 会员徽章样式已统一到header.css，确保尺寸一致 */
.user-toolbar .member-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
}

.user-toolbar .member-badge .member-icon {
    font-size: 13px !important;
}

.user-toolbar .member-badge .member-text {
    font-size: 12px !important;
}

/* 通知面板 */
.notification-panel {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #f0f0f0 !important;
}

.notification-header {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border-bottom: 1px solid #ffe8d9 !important;
    border-radius: 16px 16px 0 0 !important;
}

.notification-header h3 {
    color: #ff6600 !important;
    font-weight: 700 !important;
}

.notification-item:hover {
    background: linear-gradient(135deg, #fff5f0 0%, rgba(255, 232, 217, 0.5) 100%) !important;
    border-left-color: #ff6600 !important;
}

.notification-item.unread {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border-left-color: #ff6600 !important;
}

.notification-item.unread::after {
    background: #ff6600 !important;
}

/* 滚动条样式 */
.author-sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.author-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.author-sidebar::-webkit-scrollbar-thumb {
    background: #e0e0e0 !important;
    border-radius: 3px !important;
}

.author-sidebar::-webkit-scrollbar-thumb:hover {
    background: #ff6600 !important;
}

/* ==================== 收益分析界面 - 收益概览卡片 ==================== */

/* 收益概览卡片容器 - 水平排列 */
html body #income-content .income-summary,
html body .income-analytics-content .income-summary,
html .income-analytics-content .income-summary,
body #income-content .income-summary,
#income-content .income-analytics-content .income-summary,
.income-analytics-content .income-summary,
body .income-summary,
#income-content .income-summary,
.income-summary {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
}

/* 收益卡片重新设计 */
html body #income-content .income-card,
html body .income-analytics-content .income-card,
html .income-analytics-content .income-card,
body #income-content .income-card,
#income-content .income-analytics-content .income-card,
.income-analytics-content .income-card,
body .income-card,
#income-content .income-card,
.income-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    flex: 1 !important;
    min-width: 200px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 收益卡片悬停效果 */
html body #income-content .income-card:hover,
html body .income-analytics-content .income-card:hover,
html .income-analytics-content .income-card:hover,
body #income-content .income-card:hover,
#income-content .income-analytics-content .income-card:hover,
.income-analytics-content .income-card:hover,
body .income-card:hover,
#income-content .income-card:hover,
.income-card:hover {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 收益标题 */
html body #income-content .income-title,
html body .income-analytics-content .income-title,
html .income-analytics-content .income-title,
body #income-content .income-title,
#income-content .income-analytics-content .income-title,
.income-analytics-content .income-title,
body .income-title,
#income-content .income-title,
.income-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    flex: 1 !important;
}

/* 当标题在头部容器外时，恢复居中 */
html body #income-content .income-card > .income-title,
html .income-card > .income-title,
body #income-content .income-card > .income-title,
#income-content .income-card > .income-title,
.income-card > .income-title {
    text-align: center !important;
    margin-bottom: 12px !important;
    flex: none !important;
}

/* 收益数值 */
html body #income-content .income-value,
html body .income-analytics-content .income-value,
html .income-analytics-content .income-value,
body #income-content .income-value,
#income-content .income-analytics-content .income-value,
.income-analytics-content .income-value,
body .income-value,
#income-content .income-value,
.income-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* 钱包卡片特殊样式 */
html body #income-content .wallet-card,
html body .income-analytics-content .wallet-card,
html .income-analytics-content .wallet-card,
body #income-content .wallet-card,
#income-content .income-analytics-content .wallet-card,
.income-analytics-content .wallet-card,
body .wallet-card,
#income-content .wallet-card,
.wallet-card {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #1a1a1a !important;
}

/* 钱包卡片内容 */
html body #income-content .wallet-card .income-title,
html body #income-content .wallet-card .income-value,
html .wallet-card .income-title,
html .wallet-card .income-value,
#income-content .wallet-card .income-title,
#income-content .wallet-card .income-value,
.wallet-card .income-title,
.wallet-card .income-value {
    color: #ff6600 !important;
}

/* 钱包头部 */
html body #income-content .wallet-header,
html body .wallet-header,
html .wallet-header,
body #income-content .wallet-header,
#income-content .wallet-header,
.wallet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

/* 钱包按钮 */
html body #income-content .wallet-actions,
html body .wallet-actions,
html .wallet-actions,
body #income-content .wallet-actions,
#income-content .wallet-actions,
.wallet-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 16px !important;
    justify-content: center !important;
}

html body #income-content .wallet-btn,
html body .wallet-btn,
html .wallet-btn,
body #income-content .wallet-btn,
#income-content .wallet-btn,
.wallet-btn {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    color: #666 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

html body #income-content .wallet-btn:hover,
html body .wallet-btn:hover,
html .wallet-btn:hover,
body #income-content .wallet-btn:hover,
#income-content .wallet-btn:hover,
.wallet-btn:hover {
    background: #ff6600 !important;
    color: white !important;
    border-color: #ff6600 !important;
    transform: none !important;
}

/* 趋势标签 */
html body #income-content .income-trend,
html body .income-trend,
html .income-trend,
body #income-content .income-trend,
#income-content .income-trend,
.income-trend {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #f5f5f5 !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

/* 描述文字 */
html body #income-content .income-desc,
html body .income-desc,
html .income-desc,
body #income-content .income-desc,
#income-content .income-desc,
.income-desc {
    font-size: 12px !important;
    color: #999 !important;
    text-align: center !important;
    margin-top: 4px !important;
}

/* 结算状态 */
html body #income-content .settlement-status,
html body .settlement-status,
html .settlement-status,
body #income-content .settlement-status,
#income-content .settlement-status,
.settlement-status {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    font-weight: 600 !important;
    border: 1px solid #fde047 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 收益头部 */
html body #income-content .income-header,
html body .income-header,
html .income-header,
body #income-content .income-header,
#income-content .income-header,
.income-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 收益概览响应式适配 */
@media (max-width: 1024px) {
    html body #income-content .income-summary,
    html .income-summary,
    body #income-content .income-summary,
    #income-content .income-summary,
    .income-summary {
        gap: 12px !important;
    }
    
    html body #income-content .income-card,
    html .income-card,
    body #income-content .income-card,
    #income-content .income-card,
    .income-card {
        min-width: 180px !important;
        padding: 20px 16px !important;
    }
    
    html body #income-content .income-value,
    html .income-value,
    body #income-content .income-value,
    #income-content .income-value,
    .income-value {
        font-size: 24px !important;
    }
}

@media (max-width: 768px) {
    html body #income-content .income-summary,
    html .income-summary,
    body #income-content .income-summary,
    #income-content .income-summary,
    .income-summary {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    html body #income-content .income-card,
    html .income-card,
    body #income-content .income-card,
    #income-content .income-card,
    .income-card {
        min-width: unset !important;
        flex: unset !important;
    }
}

/* ==================== 收益分析界面 - 全新橙色主题 ==================== */

/* 收益来源分析容器 - 强制覆盖 */
body .income-source-analysis,
#income-content .income-source-analysis,
.income-source-analysis {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
    border-radius: 0 !important;
}

/* 收益分析标题区域 */
body .income-source-analysis .section-title,
#income-content .section-title,
.income-source-analysis .section-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body .income-source-analysis .section-title::before,
#income-content .section-title::before,
.income-source-analysis .section-title::before {
    content: '' !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%) !important;
    margin-right: 12px !important;
    border-radius: 2px !important;
}

/* 收益分析主容器 */
body .source-analysis-container,
#income-content .source-analysis-container,
.source-analysis-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    min-height: auto !important;
}

/* 左侧图表区域 */
body .source-charts-section,
#income-content .source-charts-section,
.source-charts-section {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

body .source-charts-section:hover,
#income-content .source-charts-section:hover,
.source-charts-section:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 图表头部 */
body .chart-header,
#income-content .chart-header,
.source-charts-section .chart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

body .chart-header h4,
#income-content .chart-header h4,
.source-charts-section .chart-header h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body .chart-header h4::before,
#income-content .chart-header h4::before,
.source-charts-section .chart-header h4::before {
    display: none !important;
}

/* 期间选择器 */
body .chart-period-selector .period-select,
#income-content .chart-period-selector .period-select,
.chart-period-selector .period-select {
    padding: 8px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #666 !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

body .chart-period-selector .period-select:focus,
body .chart-period-selector .period-select:hover,
#income-content .chart-period-selector .period-select:focus,
#income-content .chart-period-selector .period-select:hover,
.chart-period-selector .period-select:focus,
.chart-period-selector .period-select:hover {
    outline: none !important;
    border-color: #999 !important;
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* 图表容器 */
body .chart-content,
#income-content .chart-content,
.source-charts-section .chart-content {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    min-height: 280px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 右侧收益详情区域 */
body .source-details-section,
#income-content .source-details-section,
.source-details-section {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

body .source-details-section:hover,
#income-content .source-details-section:hover,
.source-details-section:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body .source-details-section h4,
#income-content .source-details-section h4,
.source-details-section h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body .source-details-section h4::before,
#income-content .source-details-section h4::before,
.source-details-section h4::before {
    display: none !important;
}

/* 收益项目列表 - 强制水平排列 */
html body #income-content .source-items,
html body .income-source-analysis .source-items,
html body #income-content .source-details-section .source-items,
html .source-details-section .source-items,
html body .source-items,
html #income-content .source-items,
html .source-items,
body #income-content .source-items,
body .income-source-analysis .source-items,
#income-content .source-details-section .source-items,
.source-details-section .source-items,
body .source-items,
#income-content .source-items,
.source-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    flex: 1 !important;
}

/* 收益项目卡片 - 强制垂直布局 */
html body #income-content .source-item,
html body .income-source-analysis .source-item,
html body #income-content .source-details-section .source-item,
html .source-details-section .source-item,
html body .source-item,
html #income-content .source-item,
html .source-item,
body #income-content .source-item,
body .income-source-analysis .source-item,
#income-content .source-details-section .source-item,
.source-details-section .source-item,
body .source-item,
#income-content .source-item,
.source-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
    gap: 10px !important;
    min-height: 200px !important;
}

html body #income-content .source-item:hover,
html body .income-source-analysis .source-item:hover,
html body #income-content .source-details-section .source-item:hover,
html .source-details-section .source-item:hover,
html body .source-item:hover,
html #income-content .source-item:hover,
html .source-item:hover,
body #income-content .source-item:hover,
body .income-source-analysis .source-item:hover,
#income-content .source-details-section .source-item:hover,
.source-details-section .source-item:hover,
body .source-item:hover,
#income-content .source-item:hover,
.source-item:hover {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 收益项目信息区域 */
body .source-info,
#income-content .source-info,
.source-item .source-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

body .source-content,
#income-content .source-content,
.source-item .source-content {
    width: 100% !important;
    text-align: center !important;
}

body .source-stats,
#income-content .source-stats,
.source-item .source-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: auto !important;
}

/* 收益项目图标 */
body .source-icon,
#income-content .source-icon,
.source-item .source-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: white !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 12px !important;
}

body .source-icon.reading,
#income-content .source-icon.reading,
.source-item .source-icon.reading,
body .source-icon.ads,
#income-content .source-icon.ads,
.source-item .source-icon.ads,
body .source-icon.reward,
#income-content .source-icon.reward,
.source-item .source-icon.reward,
body .source-icon.bonus,
#income-content .source-icon.bonus,
.source-item .source-icon.bonus {
    background: #f8f8f8 !important;
    color: #666 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 收益项目内容 */
body .source-name,
#income-content .source-name,
.source-item .source-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

body .source-desc,
#income-content .source-desc,
.source-item .source-desc {
    font-size: 11px !important;
    color: #999 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* 收益统计 */
body .source-amount,
#income-content .source-amount,
.source-item .source-amount {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    line-height: 1 !important;
}

body .source-percentage,
#income-content .source-percentage,
.source-item .source-percentage {
    font-size: 11px !important;
    color: #666 !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

/* 趋势图表区域 */
body .income-trend-section,
#income-content .income-trend-section,
.income-trend-section {
    flex: 1 !important;
}

body .income-trend-section h4,
#income-content .income-trend-section h4,
.income-trend-section h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body .income-trend-section h4::before,
#income-content .income-trend-section h4::before,
.income-trend-section h4::before {
    display: none !important;
}

body .trend-chart-container,
#income-content .trend-chart-container,
.trend-chart-container {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border: 2px solid #ffe8d9 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    min-height: 200px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 空状态和加载状态 */
body .chart-empty-state,
body .trend-empty-state,
body .chart-loading,
#income-content .chart-empty-state,
#income-content .trend-empty-state,
#income-content .chart-loading,
.chart-empty-state,
.trend-empty-state,
.chart-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 14px !important;
    min-height: 200px !important;
}

body .chart-empty-state i,
body .trend-empty-state i,
#income-content .chart-empty-state i,
#income-content .trend-empty-state i,
.chart-empty-state i,
.trend-empty-state i {
    font-size: 32px !important;
    margin-bottom: 8px !important;
    opacity: 0.5 !important;
}

/* 收益分析响应式设计 */
@media (max-width: 1024px) {
    body .source-analysis-container,
    #income-content .source-analysis-container,
    .source-analysis-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    body .source-charts-section,
    #income-content .source-charts-section,
    .source-charts-section {
        order: 2 !important;
    }
    
    body .source-details-section,
    #income-content .source-details-section,
    .source-details-section {
        order: 1 !important;
    }
    
    body .chart-content,
    #income-content .chart-content,
    .source-charts-section .chart-content {
        min-height: 240px !important;
    }
}

@media (max-width: 768px) {
    body .income-source-analysis .section-title,
    #income-content .section-title,
    .income-source-analysis .section-title {
        padding: 14px 18px !important;
        font-size: 18px !important;
    }
    
    body .source-charts-section,
    body .source-details-section,
    #income-content .source-charts-section,
    #income-content .source-details-section,
    .source-charts-section,
    .source-details-section {
        padding: 16px !important;
    }
    
    body .source-items,
    #income-content .source-items,
    .source-items {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    body .source-item,
    #income-content .source-item,
    .source-item {
        padding: 18px !important;
        min-height: 180px !important;
    }
    
    body .source-icon,
    #income-content .source-icon,
    .source-item .source-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    body .chart-content,
    body .trend-chart-container,
    #income-content .chart-content,
    #income-content .trend-chart-container,
    .source-charts-section .chart-content,
    .trend-chart-container {
        min-height: 200px !important;
    }
    
    body .source-name,
    #income-content .source-name,
    .source-item .source-name {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    body .source-desc,
    #income-content .source-desc,
    .source-item .source-desc {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    body .source-amount,
    #income-content .source-amount,
    .source-item .source-amount {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }
}

/* ==================== 推广奖励界面 - 全新设计 ==================== */

/* 推广奖励整体容器 */
html body #invite-rewards-content,
body #invite-rewards-content,
#invite-rewards-content {
    padding: 25px 40px !important;
    background: #fafafa !important;
}

/* 推广奖励内容区 */
html body .invite-rewards-content,
body .invite-rewards-content,
.invite-rewards-content {
    background: transparent !important;
}

/* 邀请概览区域 */
html body .invite-overview-section,
body .invite-overview-section,
.invite-overview-section {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid #f0f0f0 !important;
}

/* 概览布局 */
html body .overview-layout,
body .overview-layout,
.overview-layout {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* 邀请码区域 */
html body .invite-code-area,
body .invite-code-area,
.invite-code-area {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border: 2px solid #ffe8d9 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    text-align: center !important;
}

html body .invite-code-area h4,
body .invite-code-area h4,
.invite-code-area h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

html body .code-value,
body .code-value,
.code-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    margin: 15px 0 20px 0 !important;
    letter-spacing: 2px !important;
    font-family: 'Monaco', 'Menlo', monospace !important;
    background: white !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    border: 2px solid #ff6600 !important;
}

html body .code-actions,
body .code-actions,
.code-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

html body .copy-btn,
html body .share-btn,
body .copy-btn,
body .share-btn,
.copy-btn,
.share-btn {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html body .copy-btn:hover,
html body .share-btn:hover,
body .copy-btn:hover,
body .share-btn:hover,
.copy-btn:hover,
.share-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3) !important;
}

/* 统计数据区域 */
html body .stats-grid,
body .stats-grid,
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

html body .stat-item,
body .stat-item,
.stat-item {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%) !important;
    border: 2px solid #e8edff !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

html body .stat-item:hover,
body .stat-item:hover,
.stat-item:hover {
    transform: translateY(-3px) !important;
    border-color: #ff6600 !important;
    box-shadow: 0 8px 25px rgba(255, 102, 0, 0.15) !important;
}

html body .stat-value,
body .stat-value,
.stat-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
    display: block !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

html body .stat-label,
body .stat-label,
.stat-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

/* 邀请说明区域 */
html body .invite-description,
body .invite-description,
.invite-description {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid #f0f0f0 !important;
}

html body .invite-description h5,
body .invite-description h5,
.invite-description h5 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html body .invite-description h5::before,
body .invite-description h5::before,
.invite-description h5::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 2px !important;
}

html body .intro-content p,
body .intro-content p,
.intro-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    margin-bottom: 15px !important;
}

html body .section-title,
body .intro-content .section-title,
.intro-content .section-title {
    color: #ff6600 !important;
    font-weight: 700 !important;
}

html body .highlight-brand,
body .highlight-brand,
.highlight-brand {
    color: #ff6600 !important;
    font-weight: 700 !important;
}

html body .highlight-reward,
body .highlight-reward,
.highlight-reward {
    color: #ff6600 !important;
    font-weight: 700 !important;
    background: rgba(255, 102, 0, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

html body .reward-list,
body .reward-list,
.reward-list {
    background: rgba(255, 102, 0, 0.05) !important;
    border-left: 4px solid #ff6600 !important;
    padding: 15px 20px !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 15px 0 !important;
}

html body .reward-list li,
body .reward-list li,
.reward-list li {
    font-size: 14px !important;
    color: #555 !important;
    margin-bottom: 8px !important;
    padding-left: 0 !important;
}

html body .reward-type,
body .reward-type,
.reward-type {
    color: #ff6600 !important;
    font-weight: 700 !important;
    background: rgba(255, 102, 0, 0.1) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

/* 邀请记录区域 */
html body .invite-records-section,
body .invite-records-section,
.invite-records-section {
    background: white !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid #f0f0f0 !important;
}

html body .invite-records-section h4,
body .invite-records-section h4,
.invite-records-section h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html body .invite-records-section h4::before,
body .invite-records-section h4::before,
.invite-records-section h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 2px !important;
}

/* 邀请表格 */
html body .invite-table,
body .invite-table,
.invite-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid #f0f0f0 !important;
}

html body .invite-table thead th,
body .invite-table thead th,
.invite-table thead th {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    color: #333 !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    border-bottom: 2px solid #ffe8d9 !important;
}

html body .invite-table tbody td,
body .invite-table tbody td,
.invite-table tbody td {
    padding: 15px 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #555 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

html body .invite-table tbody tr:hover,
body .invite-table tbody tr:hover,
.invite-table tbody tr:hover {
    background: rgba(255, 102, 0, 0.05) !important;
}

/* 空状态 */
html body .empty-invite-records,
body .empty-invite-records,
.empty-invite-records {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
}

html body .empty-invite-records p,
body .empty-invite-records p,
.empty-invite-records p {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

html body .empty-invite-records small,
body .empty-invite-records small,
.empty-invite-records small {
    font-size: 14px !important;
    color: #ccc !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    html body .overview-layout,
    body .overview-layout,
    .overview-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    html body .stats-grid,
    body .stats-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 768px) {
    html body #invite-rewards-content,
    body #invite-rewards-content,
    #invite-rewards-content {
        padding: 20px 15px !important;
    }
    
    html body .invite-overview-section,
    html body .invite-description,
    html body .invite-records-section,
    body .invite-overview-section,
    body .invite-description,
    body .invite-records-section,
    .invite-overview-section,
    .invite-description,
    .invite-records-section {
        padding: 20px !important;
    }
    
    html body .stats-grid,
    body .stats-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    html body .code-value,
    body .code-value,
    .code-value {
        font-size: 24px !important;
    }
    
    html body .stat-value,
    body .stat-value,
    .stat-value {
        font-size: 28px !important;
    }
}

/* ==================== 个人设置界面 - 全新设计 ==================== */

/* 个人设置整体容器 */
html body #settings-content,
body #settings-content,
#settings-content {
    padding: 25px 40px !important;
    background: #fafafa !important;
}

/* 设置容器 */
html body .settings-container,
body .settings-container,
.settings-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 设置卡片 */
html body .settings-card,
body .settings-card,
.settings-card {
    background: white !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

html body .settings-card:hover,
body .settings-card:hover,
.settings-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 102, 0, 0.12) !important;
    border-color: #ffe8d9 !important;
}

/* 卡片头部 */
html body .settings-card-header,
body .settings-card-header,
.settings-card-header {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    padding: 20px 25px !important;
    border-bottom: 2px solid #ffe8d9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

html body .settings-card-header h3,
body .settings-card-header h3,
.settings-card-header h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html body .settings-card-header h3::before,
body .settings-card-header h3::before,
.settings-card-header h3::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    border-radius: 2px !important;
}

/* 会员升级按钮 */
html body .member-upgrade-btn,
body .member-upgrade-btn,
.member-upgrade-btn {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

html body .member-upgrade-btn:hover,
body .member-upgrade-btn:hover,
.member-upgrade-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

/* 卡片内容 */
html body .settings-card-content,
body .settings-card-content,
.settings-card-content {
    padding: 25px !important;
}

/* 信息项 */
html body .info-item,
body .info-item,
.info-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 60px !important;
}

html body .info-item:last-child,
body .info-item:last-child,
.info-item:last-child {
    border-bottom: none !important;
}

/* 标签 */
html body .item-label,
body .item-label,
.item-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555 !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
}

/* 内容 */
html body .item-content,
body .item-content,
.item-content {
    flex: 1 !important;
    font-size: 14px !important;
    color: #333 !important;
    margin: 0 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* 用户头像 */
html body .user-avatar,
body .user-avatar,
.user-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
}

html body .user-avatar img,
body .user-avatar img,
.user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 操作按钮 */
html body .item-action,
body .item-action,
.item-action {
    flex-shrink: 0 !important;
}

html body .change-link,
body .change-link,
.change-link {
    color: #ff6600 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border: 1px solid #ff6600 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

html body .change-link:hover,
body .change-link:hover,
.change-link:hover {
    background: #ff6600 !important;
    color: white !important;
    transform: scale(1.05) !important;
}

/* 会员状态显示 */
html body .member-status-display,
body .member-status-display,
.member-status-display {
    margin: 0 !important;
}

/* 会员信息卡片 - 不设置display，由JavaScript控制 */
html body #settings-content .member-info,
body #settings-content .member-info,
#settings-content .member-info {
    align-items: center !important;
    gap: 15px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%) !important;
    border-radius: 12px !important;
    border: 2px solid #e8edff !important;
    /* 不设置display属性，让JavaScript控制 */
}

/* 当元素被JavaScript设为flex时，确保正确显示 */
html body #settings-content .member-info[style*="flex"],
body #settings-content .member-info[style*="flex"],
#settings-content .member-info[style*="flex"] {
    display: flex !important;
}

/* 当元素被JavaScript设为none时，确保隐藏 */
html body #settings-content .member-info[style*="none"],
body #settings-content .member-info[style*="none"],
#settings-content .member-info[style*="none"] {
    display: none !important;
}

html body .member-info.no-member,
body .member-info.no-member,
.member-info.no-member {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    border-color: #ffe8d9 !important;
}

/* 仅应用于作者专区设置页面的会员信息卡片，不影响头部工具栏 */
html body .member-info .member-icon,
body .member-info .member-icon,
.member-info .member-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
}

html body .member-info.no-member .member-icon,
body .member-info.no-member .member-icon,
.member-info.no-member .member-icon {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
}

html body .member-details,
body .member-details,
.member-details {
    flex: 1 !important;
}

html body .member-type,
body .member-type,
.member-type {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 4px !important;
}

html body .member-description,
body .member-description,
.member-description {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* 会员操作按钮 */
html body .member-action,
body .member-action,
.member-action {
    flex-shrink: 0 !important;
}

html body .upgrade-link,
body .upgrade-link,
.upgrade-link {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

html body .upgrade-link:hover,
body .upgrade-link:hover,
.upgrade-link:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

html body .renew-link,
body .renew-link,
.renew-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

html body .renew-link:hover,
body .renew-link:hover,
.renew-link:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* 会员到期时间和剩余天数 */
html body .member-expire,
body .member-expire,
.member-expire {
    font-size: 12px !important;
    color: #666 !important;
    margin: 4px 0 !important;
}

html body .member-days-left,
body .member-days-left,
.member-days-left {
    font-size: 12px !important;
    color: #ff6600 !important;
    font-weight: 600 !important;
    margin: 4px 0 !important;
}

/* 会员特权列表 */
html body .member-privileges,
body .member-privileges,
.member-privileges {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 2px solid #f0f0f0 !important;
}

html body .member-privileges h4,
body .member-privileges h4,
.member-privileges h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

html body .privilege-list,
body .privilege-list,
.privilege-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

html body .privilege-item,
body .privilege-item,
.privilege-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #555 !important;
}

html body .privilege-icon,
body .privilege-icon,
.privilege-icon {
    color: #52c41a !important;
    font-size: 16px !important;
}

/* 实名认证区域 */
html body .cert-info,
body .cert-info,
.cert-info {
    text-align: center !important;
    padding: 30px 20px !important;
}

html body .cert-info p,
body .cert-info p,
.cert-info p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

html body .cert-btn,
body .cert-btn,
.cert-btn {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

html body .cert-btn:hover,
body .cert-btn:hover,
.cert-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3) !important;
}

/* 安全设置特殊样式 */
html body .settings-card:last-child,
body .settings-card:last-child,
.settings-card:last-child {
    grid-column: 1 / -1 !important;
}

/* 注销账号特殊样式 */
html body .info-item .item-content:has-text("注销账号"),
body .info-item .item-content:has-text("注销账号"),
.info-item .item-content:has-text("注销账号") {
    color: #dc3545 !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    html body .settings-container,
    body .settings-container,
    .settings-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    html body #settings-content,
    body #settings-content,
    #settings-content {
        padding: 20px 25px !important;
    }
}

@media (max-width: 768px) {
    html body #settings-content,
    body #settings-content,
    #settings-content {
        padding: 15px 20px !important;
    }
    
    html body .settings-card-header,
    body .settings-card-header,
    .settings-card-header {
        padding: 15px 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    html body .settings-card-content,
    body .settings-card-content,
    .settings-card-content {
        padding: 20px !important;
    }
    
    html body .info-item,
    body .info-item,
    .info-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 0 !important;
        min-height: auto !important;
    }
    
    html body .item-label,
    body .item-label,
    .item-label {
        min-width: unset !important;
        width: 100% !important;
    }
    
    html body .item-content,
    body .item-content,
    .item-content {
        margin: 0 !important;
        width: 100% !important;
    }
    
    html body .member-info,
    body .member-info,
    .member-info {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;
    }
}

/* ==================== 提现弹窗 - 现代化设计 ==================== */

/* 提现方式选择弹窗 */
.withdrawal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    animation: fadeIn 0.3s ease !important;
    cursor: pointer !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.withdrawal-modal-content {
    background: white !important;
    border-radius: 20px !important;
    max-width: 500px !important;
    width: 90% !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: slideUp 0.3s ease !important;
    overflow: hidden !important;
    cursor: auto !important;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.withdrawal-modal-header {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    padding: 25px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #ffe8d9 !important;
}

.withdrawal-modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
}

.withdrawal-modal-close {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: rgba(255, 102, 0, 0.1) !important;
    color: #ff6600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.withdrawal-modal-close:hover {
    background: #ff6600 !important;
    color: white !important;
    transform: scale(1.1) !important;
}

.withdrawal-modal-body {
    padding: 30px !important;
}

.withdrawal-method-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.withdrawal-method-item {
    display: flex !important;
    align-items: center !important;
    padding: 20px !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.withdrawal-method-item:hover {
    border-color: #ff6600 !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.15) !important;
}

.method-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: white !important;
    margin-right: 18px !important;
    flex-shrink: 0 !important;
}

.method-icon.alipay-icon {
    background: linear-gradient(135deg, #1677ff 0%, #0D5FCD 100%) !important;
}

.method-icon.bank-icon {
    background: linear-gradient(135deg, #52c41a 0%, #3A9914 100%) !important;
}

.method-info {
    flex: 1 !important;
}

.method-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 5px 0 !important;
}

.method-desc {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
}

.method-arrow {
    color: #999 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.withdrawal-method-item:hover .method-arrow {
    color: #ff6600 !important;
    transform: translateX(3px) !important;
}

.withdrawal-balance-info {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%) !important;
    border: 2px solid #e8edff !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 600 !important;
}

.withdrawal-balance-info i {
    margin-right: 8px !important;
    color: #ff6600 !important;
}

.balance-amount {
    color: #ff6600 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    margin-left: 5px !important;
}

/* 提现记录弹窗 */
.withdrawal-history-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    animation: fadeIn 0.3s ease !important;
    cursor: pointer !important;
}

.withdrawal-history-modal-content {
    background: white !important;
    border-radius: 20px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    animation: slideUp 0.3s ease !important;
    overflow: hidden !important;
    cursor: auto !important;
}

.withdrawal-history-modal-header {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    padding: 25px 30px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #ffe8d9 !important;
    flex-shrink: 0 !important;
}

.withdrawal-history-modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.withdrawal-history-modal-title i {
    color: #ff6600 !important;
}

.withdrawal-history-modal-close {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: rgba(255, 102, 0, 0.1) !important;
    color: #ff6600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.withdrawal-history-modal-close:hover {
    background: #ff6600 !important;
    color: white !important;
    transform: scale(1.1) !important;
}

.withdrawal-history-modal-body {
    padding: 25px 30px !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.withdrawal-records-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* 加载和空状态 */
.withdrawal-loading,
.withdrawal-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
}

.withdrawal-loading i,
.withdrawal-empty-state i {
    font-size: 56px !important;
    margin-bottom: 16px !important;
    color: #ddd !important;
    display: block !important;
}

.withdrawal-loading p,
.withdrawal-empty-state p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #999 !important;
}

.withdrawal-empty-state.error-state i {
    color: #ff4d4f !important;
}

.withdrawal-empty-state.error-state p {
    color: #ff4d4f !important;
}

/* 提现记录项 */
.withdrawal-record-item {
    background: white !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
}

.withdrawal-record-item:hover {
    border-color: #ffe8d9 !important;
    background: linear-gradient(135deg, #fffbf7 0%, #ffffff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.1) !important;
}

.record-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.record-amount {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ff6600 !important;
}

.record-status {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.record-status.status-pending {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
}

.record-status.status-approved,
.record-status.status-completed {
    background: rgba(40, 167, 69, 0.15) !important;
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
}

.record-status.status-rejected {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

.record-status.status-processing {
    background: rgba(23, 162, 184, 0.15) !important;
    color: #17a2b8 !important;
    border: 1px solid #17a2b8 !important;
}

.record-info {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}

.record-info i {
    color: #ff6600 !important;
    margin-right: 6px !important;
}

.record-date {
    font-size: 13px !important;
    color: #999 !important;
}

.record-date i {
    margin-right: 6px !important;
    color: #bbb !important;
}

.record-reject-reason {
    margin-top: 12px !important;
    padding: 12px !important;
    background: rgba(220, 53, 69, 0.05) !important;
    border-left: 3px solid #dc3545 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #dc3545 !important;
}

.record-reject-reason i {
    margin-right: 6px !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .withdrawal-modal-content,
    .withdrawal-history-modal-content {
        width: 95% !important;
        margin: 10px !important;
    }
    
    .withdrawal-modal-header,
    .withdrawal-history-modal-header {
        padding: 20px !important;
    }
    
    .withdrawal-modal-body,
    .withdrawal-history-modal-body {
        padding: 20px !important;
    }
    
    .withdrawal-method-item {
        padding: 15px !important;
    }
    
    .method-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    
    .method-name {
        font-size: 16px !important;
    }
    
    .method-desc {
        font-size: 12px !important;
    }
    
    .withdrawal-record-item {
        padding: 15px !important;
    }
    
    .record-amount {
        font-size: 20px !important;
    }
}

/* ==================== 结算记录界面 - 橙色主题覆盖 ==================== */

/* 结算记录表格样式 */
body .settlement-records,
#settlement-content .settlement-records,
.settlement-records {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

body .settlement-records:hover,
#settlement-content .settlement-records:hover,
.settlement-records:hover {
    border-color: #ffe8d9 !important;
    box-shadow: 0 8px 32px rgba(255, 102, 0, 0.12) !important;
}

/* 结算记录标题 */
body .settlement-records .section-title,
#settlement-content .section-title,
.settlement-records .section-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body .settlement-records .section-title::before,
#settlement-content .section-title::before,
.settlement-records .section-title::before {
    content: '' !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    margin-right: 12px !important;
    border-radius: 2px !important;
}

/* 结算记录金额单元格 */
body .settlement-records .amount-cell,
body .settlement-records tbody .amount-cell,
#settlement-content .amount-cell,
.settlement-records .amount-cell,
.settlement-records tbody .amount-cell {
    font-weight: 700 !important;
    color: #ff6600 !important;
    font-size: 15px !important;
}

/* 结算记录日期单元格 */
body .settlement-date-cell,
#settlement-content .settlement-date-cell,
.settlement-date-cell {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
}

/* 结算记录方式单元格 */
body .settlement-method-cell,
#settlement-content .settlement-method-cell,
.settlement-method-cell {
    font-weight: 500 !important;
    color: #666 !important;
    font-size: 13px !important;
}

/* 钱包卡片橙色主题覆盖 */
body .wallet-card,
#settlement-content .wallet-card,
.wallet-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

body .wallet-card::before,
#settlement-content .wallet-card::before,
.wallet-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #ff6600 0%, #ff8833 50%, #ffaa00 100%) !important;
}

body .wallet-card:hover,
#settlement-content .wallet-card:hover,
.wallet-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}