/* 护眼模式样式 - 温和的米黄色背景，减少眼睛疲劳 */
.dark-mode {
    --background-color: #f5f5dc;
    --card-color: #fffef5;
    --text-color: #333333;
    --text-secondary-color: #666666;
    --border-color: #e8e4d4;
    --primary-color: #4a9c6d;
    --primary-light: #5fb87f;
    --secondary-color: #7b68b0;
    --accent-color: #e8a838;
    --success-color: #4caf50;
    --danger-color: #e57373;
    --warning-color: #ffb74d;
}

/* 护眼模式特定覆盖 */
.dark-mode body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* 淡化图片滤镜，让整体更柔和 */
.dark-mode img {
    filter: sepia(10%) saturate(90%);
}

.dark-mode video {
    filter: sepia(10%) saturate(90%);
}

/* 护眼模式下的元素样式 */
.dark-mode .app-header {
    background-color: var(--card-color);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .app-header .header-title,
.dark-mode .header-back {
    color: var(--text-color);
}

.dark-mode .app-tabbar {
    background-color: var(--card-color);
    border-top-color: var(--border-color);
}

.dark-mode .app-tabbar-item {
    color: var(--text-secondary-color);
}

.dark-mode .app-tabbar-item.active {
    color: var(--primary-color);
}

.dark-mode .app-tabbar-icon,
.dark-mode .app-tabbar-label {
    color: var(--text-secondary-color);
}

.dark-mode .app-tabbar-item.active .app-tabbar-icon,
.dark-mode .app-tabbar-item.active .app-tabbar-label {
    color: var(--primary-color);
}

.dark-mode .post-card,
.dark-mode .moment-card {
    background-color: var(--card-color);
    border-color: var(--border-color);
}

.dark-mode .moment-content {
    color: var(--text-color);
}

.dark-mode .moment-time {
    color: var(--text-secondary-color);
}

.dark-mode .moment-actions {
    border-top-color: var(--border-color);
}

.dark-mode .moment-action-btn,
.dark-mode .moment-action {
    color: var(--text-secondary-color);
}

.dark-mode .moment-action-btn.liked,
.dark-mode .moment-action.liked {
    color: var(--danger-color);
}

.dark-mode .comment-list-item {
    background-color: var(--card-color);
    border-color: var(--border-color);
}

.dark-mode .comment-content {
    color: var(--text-color);
}

.dark-mode .comment-time {
    color: var(--text-secondary-color);
}

.dark-mode .form-input {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .form-input:focus {
    border-color: var(--primary-color);
}

.dark-mode .form-input::placeholder {
    color: var(--text-secondary-color);
}

.dark-mode .modal-container {
    background-color: var(--card-color);
}

.dark-mode .modal-header {
    border-bottom-color: var(--border-color);
}

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

.dark-mode .modal-close {
    color: var(--text-secondary-color);
}

.dark-mode .auth-btn {
    background-color: var(--primary-color);
    color: #fff;
}

.dark-mode .auth-btn:disabled {
    background-color: var(--border-color);
}

.dark-mode .share-card-preview {
    background-color: var(--background-color);
}

.dark-mode .share-card-text {
    color: var(--text-color);
}

.dark-mode .share-action-label {
    color: var(--text-secondary-color);
}

.dark-mode .share-extra-actions {
    border-top-color: var(--border-color);
}

.dark-mode .share-extra-action {
    color: var(--text-secondary-color);
}

.dark-mode .comment-post-preview {
    background-color: var(--background-color);
    border-bottom-color: var(--border-color);
}

.dark-mode .comment-post-content {
    color: var(--text-color);
}

.dark-mode .comment-item {
    background-color: var(--card-color);
    border-bottom-color: var(--border-color);
}

.dark-mode .comment-content {
    color: var(--text-color);
}

.dark-mode .comment-time {
    color: var(--text-secondary-color);
}

.dark-mode .comment-action-btn {
    color: var(--text-secondary-color);
}

.dark-mode .comment-replies {
    background-color: var(--background-color);
}

.dark-mode .comment-textarea {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .comment-textarea::placeholder {
    color: var(--text-secondary-color);
}

.dark-mode .repost-preview-card {
    background-color: var(--background-color);
}

.dark-mode .repost-content {
    color: var(--text-color);
}

.dark-mode .repost-textarea {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .repost-textarea::placeholder {
    color: var(--text-secondary-color);
}

.dark-mode .publish-textarea {
    background-color: var(--card-color);
    color: var(--text-color);
}

.dark-mode .publish-textarea::placeholder {
    color: var(--text-secondary-color);
}

.dark-mode .publish-toolbar {
    border-top-color: var(--border-color);
}

.dark-mode .publish-tool-btn {
    color: var(--text-secondary-color);
}

.dark-mode .emoji-picker {
    background-color: var(--card-color);
    border-top-color: var(--border-color);
}

.dark-mode .emoji-tab {
    background-color: var(--background-color);
}

.dark-mode .emoji-tab.active {
    background-color: var(--primary-color);
}

.dark-mode .emoji-item:active {
    background-color: var(--border-color);
}

.dark-mode .circle-card {
    background-color: var(--card-color);
}

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

.dark-mode .circle-desc {
    color: var(--text-secondary-color);
}

.dark-mode .circle-stats {
    color: var(--text-secondary-color);
}

.dark-mode .circle-join-btn {
    background-color: var(--primary-color);
    color: #fff;
}

.dark-mode .circle-join-btn.joined {
    background-color: var(--border-color);
    color: var(--text-secondary-color);
}

.dark-mode .report-reason-item {
    background-color: var(--background-color);
}

.dark-mode .report-reason-item:hover {
    background-color: var(--border-color);
}

.dark-mode .skeleton-card {
    background-color: var(--card-color);
}

.dark-mode .skeleton-line,
.dark-mode .skeleton-avatar,
.dark-mode .skeleton-image,
.dark-mode .skeleton-action {
    background: linear-gradient(90deg, #e8e4d4 25%, #ddd9c4 50%, #e8e4d4 75%);
}

.dark-mode .skeleton-user-card {
    background-color: var(--card-color);
}

.dark-mode .skeleton-comment {
    border-bottom-color: var(--border-color);
}

.dark-mode .skeleton-header {
    background-color: var(--card-color);
    border-bottom-color: var(--border-color);
}

/* 护眼模式下的滚动条样式 */
.dark-mode ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--background-color);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary-color);
}

/* 护眼模式下的链接颜色 */
.dark-mode a {
    color: var(--primary-color);
}

/* 护眼模式下的按钮hover效果 */
.dark-mode .auth-btn:hover:not(:disabled) {
    background-color: var(--primary-light);
}

/* 护眼模式下的checkbox和radio */
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    accent-color: var(--primary-color);
}

/* 护眼模式通用元素覆盖 */
.dark-mode .settings-menu,
.dark-mode .hot-tabs,
.dark-mode .follow-tabs {
    background-color: var(--card-color);
}

.dark-mode .settings-item,
.dark-mode .hot-tab-item,
.dark-mode .follow-tab-item {
    color: var(--text-color);
}

.dark-mode .settings-item:hover,
.dark-mode .hot-tab-item:hover,
.dark-mode .follow-tab-item:hover {
    background-color: var(--background-color);
}

.dark-mode .hot-tab-item.active,
.dark-mode .follow-tab-item.active {
    color: var(--primary-color);
}

/* 护眼模式头像和徽章 */
.dark-mode .avatar {
    border-color: var(--border-color);
}

.dark-mode .online-badge {
    border-color: var(--card-color);
}

/* 护眼模式收藏页面 */
.dark-mode .favorites-header,
.dark-mode .fans-header {
    background: linear-gradient(135deg, #4a9c6d, #3d8b5f);
}

/* 护眼模式热门页面 */
.dark-mode .hot-header {
    background: linear-gradient(135deg, #5fb87f, #4a9c6d);
}

/* 护眼模式输入框 */
.dark-mode textarea {
    background-color: var(--card-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* 护眼模式下拉菜单 */
.dark-mode .dropdown-menu,
.dark-mode .moment-dropdown {
    background-color: var(--card-color);
    border-color: var(--border-color);
}

.dark-mode .dropdown-item,
.dark-mode .moment-dropdown-item {
    color: var(--text-color);
}

.dark-mode .dropdown-item:hover,
.dark-mode .moment-dropdown-item:hover {
    background-color: var(--background-color);
}