.icon-import-section {
    margin: 8px 0 18px;
    padding: 14px 18px 18px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.icon-import-title {
    font-size: 1rem;
    font-weight: 700;
    color: #FFD700;
    text-align: left;
    text-align: left;
}

.icon-import-options {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    text-align: left;
}

.icon-import-option {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 10px;
    cursor: pointer;
    /* 移除transform和box-shadow过渡以提升性能 */
    transition: border-color 0.3s ease;
}

.icon-import-option:hover {
    /* 移除transform和box-shadow以提升性能 */
    border-color: rgba(255, 215, 0, 0.6);
}

.icon-import-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #FFD700;
    background: transparent;
    position: relative;
    top: 5px;
    margin-right: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.icon-import-option input[type="radio"]::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #FFD700;
    transform: scale(0);
    transition: opacity 0.2s ease;
}

.icon-import-option input[type="radio"]:checked::after {
    transform: scale(1);
}

.icon-option-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    gap: 4px;
    text-align: left;
}

.icon-option-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #00ff99;
}

.icon-option-desc {
    font-size: 0.92rem;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 500;
}

.icon-import-tip {
    font-size: 0.95rem;
    color: #f2f2f2;
    text-align: left;
    margin: 6px 0 0;
    font-weight: 500;
    display: block;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

/* 全局upload-trigger-btn样式已被#editCardModal .upload-trigger-btn覆盖 */

/* 伪元素样式已删除，避免与霓虹边框冲突 */


/* 文字和图标样式已删除，使用默认样式 */

/* 网络图片URL输入框文字居中 */
#defaultIconUrlInput,
#logoImageUrlInput,
#bgImageUrlInput,
#cardImageUrlInput {
    text-align: center !important;
}

#navigationSortModal {
    background: transparent !important;
}

#navigationSortModal .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-sort-buttons {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.nav-sort-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 72px;
    height: 72px;
    cursor: pointer;
}

.nav-sort-btn i {
    font-size: 3.4rem !important;
    background: linear-gradient(135deg, #ff1a1a, #ff3b3b, #ff6ec4, #3dff8c, #3dffe6, #ff1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 16px rgba(255, 40, 40, 0.75), 0 0 20px rgba(61, 255, 140, 0.55);
}

@media (min-width: 1024px) {
    .nav-sort-buttons {
        gap: 6px;
    }
    .nav-sort-btn {
        width: 108px;
        height: 108px;
    }
    .nav-sort-btn i {
        font-size: 5.1rem !important;
    }
}

/* 强制设置单独项目编辑界面按钮位置 - 最高优先级 */
#editCardModal .modal-buttons {
    transform: translateY(-5px) !important;
    margin-bottom: -5px !important;
    position: relative !important;
}

#editCardModal .modal-buttons button {
    transform: scale(0.9025) !important;
}


/* 单独项目编辑界面内边距减少以降低高度，去掉底部内边距 */
#editCardModal .modal-content {
    padding: 15px 15px 0 15px !important;
}

/* 单独项目编辑界面所有输入框改为霓虹彩色边框 */
#editCardModal input[type="text"],
#editCardModal input[type="url"], 
#editCardModal input[type="file"],
#editCardModal input:not([type="radio"]):not([type="hidden"]) {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding-top: 9px !important;
}

/* 单独项目编辑界面输入框占位符文字改为黑色 */
#editCardModal input[type="text"]::placeholder,
#editCardModal input[type="url"]::placeholder,
#editCardModal input[type="file"]::placeholder,
#editCardModal input:not([type="radio"]):not([type="hidden"])::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 单独项目编辑界面选择文件按钮霓虹彩色边框 */
#editCardModal .upload-trigger-btn {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    width: 100% !important;
    margin: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transform: translateY(1px) !important;
}

/* 编辑Logo样式界面选择文件按钮霓虹彩色边框 */
#editLogoModal .upload-trigger-btn {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    width: 100% !important;
    margin: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transform: translateY(1px) !important;
}

/* 编辑Logo样式界面 - 强制控制元素显示状态 */
#editLogoModal:has(#logoUploadUrl:checked) .upload-trigger-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

#editLogoModal:has(#logoUploadUrl:checked) #logoImageUrlInput {
    display: block !important;
    visibility: visible !important;
}

#editLogoModal:has(#logoUploadLocal:checked) .upload-trigger-btn {
    display: flex !important;
    visibility: visible !important;
    height: 40px !important;
}

#editLogoModal:has(#logoUploadLocal:checked) #logoImageUrlInput {
    display: none !important;
}

/* 网络图片URL输入框霓虹彩色边框 - 最高优先级 */
#editCardModal #cardImageUrlInput {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    z-index: 1 !important;
    text-align: center !important;
    padding-top: 9px !important;
}

/* 网络图片模式强制隐藏选择文件按钮容器 */
#editCardModal input[id="cardUploadUrl"]:checked ~ #imageUploadContainer {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 网络图片模式强制显示URL输入框 */
#editCardModal input[id="cardUploadUrl"]:checked ~ #cardImageUrlInput {
    display: block !important;
}

/* 本地图片模式强制显示选择文件按钮容器 */
#editCardModal input[id="cardUploadLocal"]:checked ~ #imageUploadContainer {
    display: block !important;
    height: 40px !important;
}

/* 本地图片模式强制隐藏URL输入框 */
#editCardModal input[id="cardUploadLocal"]:checked ~ #cardImageUrlInput {
    display: none !important;
}

#editCardModal #cardImageUrlInput:focus {
    outline: none !important;
}

canvas {
    will-change: transform;
    transform: translateZ(0);
}

/* 未登录用户模式 - 隐藏所有编辑按钮 */
body.guest-mode .edit-btn,
body.guest-mode .admin-edit-btn,
body.guest-mode .add-section-btn,
body.guest-mode .nav-actions-bottom,
body.guest-mode .edit-scroll-btn,
body.guest-mode .edit-copyright-btn,
body.guest-mode .edit-contact-btn,
body.guest-mode .edit-logo-btn,
body.guest-mode .edit-default-icon-btn,
body.guest-mode .section-edit-btn,
body.guest-mode .mobile-cards-btn,
body.guest-mode .navigation-sort-btn {
    display: none !important;
}

/* 允许在 guest-mode 下退出登录，避免分享页无法退出 */
body.guest-mode #userInfoContainer,
body.guest-mode #logoutBtn {
    display: flex !important;
}

:root {
    --scroll-text-size: clamp(1.0rem, 1.6vw, 1.2rem);
    --section-title-size: clamp(1.0rem, 1.8vw, 1.3rem);
    --card-text-size: clamp(0.8rem, 1.4vw, 1.0rem);
    --copyright-color: #FF6B00;
    --copyright-size: 0.9rem;
    /* 颜色变量定义 */
    --color-0: #FFD700;
    --color-1: #FF6B00;
    --color-2: #27F527;
    --color-3: #FF0000;
    --color-4: #05FFF8;
    --color-5: #FF05FB;
    
    /* 暗黑主题（默认） */
    --bg-color: #333333;
    --text-color: #e0e0e0;
    --card-bg: rgba(42, 42, 42, 0.1);
    --modal-bg: rgb(30, 30, 30);
    --border-color: rgba(255, 215, 0, 0.3);
}


/* 默认项目图标，隐藏右上角的删除按钮 */
#defaultIconRemovePreviewBtn {
    display: none !important;
}

/* 背景图片预览样式表 */
.image-preview[src=""] {
    display: none !important;
}

.image-preview:not([src=""]) {
    display: block !important;
}

/* html动画背景iframe样式 - 硬件加速优化 */
.bg-webpage-iframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: -2;
    pointer-events: none;

    /* 硬件加速优化 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    will-change: transform;

    /* 性能优化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* 确保背景覆盖整个视口 */
    min-width: 100%;
    min-height: 100%;
}

/* 视频背景样式 - 平衡显示和防探测 */
.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    pointer-events: none !important;

    /* 正常显示视频但防止交互 */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    /* 防止任何用户交互 */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;

    /* 禁用所有可能的控制 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* 硬件加速优化 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    will-change: transform;

    /* 性能优化 */
    image-rendering: -webkit-optimize-contrast;
}

/* 额外的CSS规则确保视频完全隐藏 */
video.bg-video::-webkit-media-controls {
    display: none !important;
}

video.bg-video::-webkit-media-controls-panel {
    display: none !important;
}

video.bg-video::-webkit-media-controls-play-button {
    display: none !important;
}

video.bg-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

video.bg-video::-webkit-media-controls-timeline {
    display: none !important;
}

video.bg-video::-webkit-media-controls-current-time-display {
    display: none !important;
}

video.bg-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

video.bg-video::-webkit-media-controls-timeline-container {
    display: none !important;
}

video.bg-video::-webkit-media-controls-mute-button {
    display: none !important;
}

video.bg-video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
}

video.bg-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video.bg-video::-webkit-media-controls-volume-slider {
    display: none !important;
}

video.bg-video::-webkit-media-controls-volume-slider-container {
    display: none !important;
}

video.bg-video::-webkit-media-controls-volume-slider-thumb {
    display: none !important;
}

/* 视频预览容器 */
.video-preview-container {
    width: 100%;
    height: 120px;
    /* 从80px进一步降低到60px */
    border: 2px solid #FFD700;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    /* 背景视频的ui高度 */
    overflow: hidden;
    position: relative;
    background: rgba(30, 30, 30, 0.5);
}

.video-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.video-preview-container.has-video .remove-preview-btn {
    display: flex;
}

/* 确保内容在背景之上 */
.container {
    position: relative;
    z-index: 1;
}

/* html动画输入框的显示控制 */
#bgWebpageUrlInput {
    display: none;
}

/* 基础样式与背景效果 */
html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
}

body {
    background-color: var(--bg-color);
    /* 移除 background-attachment: fixed 以提升性能 */
    /* 背景图片现在通过独立的 div 元素实现，使用硬件加速 */
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 主题切换按钮样式 */
.theme-toggle-btn {
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    top: -3.5px !important;
}

.theme-toggle-btn i {
    color: #FFD700 !important;
    font-size: 20px !important;
    background: transparent !important;
    /* 移除transform过渡以提升性能 */
    transition: color 0.3s ease;
}

/* 详情页开关按钮样式 */
.card-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

}

.theme-toggle-btn:hover i {
    /* 移除transform以提升性能 */
    color: #FFA500;
}

/* 导出模式下隐藏所有编辑元素 */
body.export-mode .edit-btn,
body.export-mode .admin-edit-btn,
body.export-mode .edit-contact-btn,
body.export-mode .edit-scroll-btn,
body.export-mode .edit-copyright-btn,
body.export-mode .section-edit-btn,
body.export-mode .mobile-cards-btn,
body.export-mode .navigation-sort-btn,
body.export-mode .add-section-btn,
body.export-mode .add-card-btn,
body.export-mode .edit-default-icon-btn,
body.export-mode .edit-logo-btn {
    display: none !important;
}

/* 未登录状态下隐藏所有编辑元素（但保留登录按钮和主题切换按钮） */
body.not-logged-in .admin-edit-btn,
body.not-logged-in .edit-contact-btn,
body.not-logged-in .edit-scroll-btn,
body.not-logged-in .edit-copyright-btn,
body.not-logged-in .section-edit-btn,
body.not-logged-in .mobile-cards-btn,
body.not-logged-in .navigation-sort-btn,
body.not-logged-in .add-section-btn,
body.not-logged-in .add-card-btn,
body.not-logged-in .edit-default-icon-btn,
body.not-logged-in .edit-logo-btn {
    display: none !important;
}

/* 编辑模式下强制启用所有编辑按钮交互（替代 JS 循环设置） */
body.edit-mode-active .add-card-btn,
body.edit-mode-active .admin-edit-btn,
body.edit-mode-active .section-edit-btn,
body.edit-mode-active .mobile-cards-btn,
body.edit-mode-active .navigation-sort-btn,
body.edit-mode-active #sharePageBtn,
body.edit-mode-active #exportJsonBtn,
body.edit-mode-active #importLegacyBtn,
body.edit-mode-active #clearDataBtn {
pointer-events: auto !important;
opacity: 1 !important;
}

body.edit-mode-active #editCopyrightBtn,
body.edit-mode-active #editDefaultIconBtn,
body.edit-mode-active #editLogoBtn,
body.edit-mode-active #editContactBtn,
body.edit-mode-active #addSectionBtn {
display: block !important;
pointer-events: auto !important;
    pointer-events: auto !important;
}

body.edit-mode-active .nav-actions-bottom {
    display: flex !important;
}

/* 未登录状态下确保登录按钮和主题切换按钮显示 */
body.not-logged-in .auth-btn,
body.not-logged-in .theme-toggle-btn {
    display: flex !important;
}

/* 导出模式下显示主题切换按钮并往上移动1px */
body.export-mode .theme-toggle-btn {
    display: flex !important;
    position: relative;
    top: -2.5px !important;
}

/* 导出模式下隐藏"添加项目"文字 */
body.export-mode .nav-card-container:has(.add-card-btn) .nav-card-text {
    display: none !important;
}

/* 标题样式 */
.page-title {
    font-size: var(--scroll-text-size);
    font-weight: 900;
    margin: 0;
    line-height: 1;
    text-align: center;
    background: none!important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

@media (max-width: 768px) {
    .page-title {
        font-size: calc(var(--scroll-text-size) * 0.53);
    }
}

/* 霓虹变色文字样式 - 添加硬件加速优化 */
.page-title.neon-mode {
    /* 完全覆盖默认背景，确保霓虹颜色正确显示，去掉所有蓝色和青色 */
    background: linear-gradient(90deg, 
        #ff0080, #ff2000, #ff4000, #ff6000, #ff8000, #ffa000, #ffc000, 
        #ffe000, #ffff00, #e0ff00, #c0ff00, #a0ff00, #80ff00, #60ff00, #40ff00, 
        #20ff00, #00ff80, #00ff60, #00ff40, #00ff20, #00ff00, #20ff00, #40ff00, 
        #60ff00, #80ff00, #a0ff00, #c0ff00, #e0ff00, #ffff00, #ffc000, #ffa000, 
        #ff8000, #ff6000, #ff4000, #ff2000, #ff0080, #ff00a0, #ff00c0, #ff00e0, 
        #ff00ff, #ff20ff, #ff40ff, #ff60ff, #ff80ff, #ffa0ff, #ffc0ff, #ffe0ff, 
        #ffff00, #ffc000, #ffa000, #ff8000, #ff6000, #ff4000, #ff2000, #ff0080, 
        #ff0060, #ff0040, #ff0020, #ff4000, #ff6000, #ff8000, #ffa000, #ffc000, 
        #ffe000, #ffff00, #e0ff00, #c0ff00, #a0ff00, #80ff00, #60ff00, #40ff00, 
        #20ff00, #00ff00, #20ff00, #40ff00, #60ff00, #80ff00, #a0ff00, #c0ff00, 
        #e0ff00, #ffff00, #ffc000, #ffa000, #ff8000, #ff6000, #ff4000, #ff2000, #ff0080);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: neon-color 3s linear infinite;
    /* 硬件加速优化 - 创建合成层并提示浏览器优化 */
    will-change: background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* 强制 GPU 加速 */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

/* 滚动标题容器 */
.scroll-container {
    display: -webkit-box;
    display: -ms-flexbox;
    overflow: hidden;
    white-space: nowrap;
    margin: -10px 0 10px 0;
    position: relative;
    border: 4px solid transparent;
    border-radius: 40px; /* 滚动文字圆角大小调这里 */
    transform: translateZ(0);
    will-change: transform;
    transition: border-color 0.5s ease;
    background: transparent;
    padding: 10px 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: flex;
    justify-content: center !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center !important;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.nav-card-container.sorting-active {
    animation: shake 0.7s infinite ease-in-out;
}

@supports (display: grid) {
    .scroll-container {
        display: grid;
        place-items: center;
    }

    .scroll-container.marquee-mode {
        justify-items: start;
        align-items: center;
    }

    .scroll-container.marquee-mode .scroll-content {
        justify-self: start;
    }
}

.scroll-content {
    display: -webkit-box;
    display: -ms-flexbox;
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    animation: none;
    user-select: none;
    will-change: transform;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
}

.scroll-container.marquee-mode .scroll-content {
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
}

.scroll-container.marquee-mode {
    justify-content: flex-start !important;
    align-items: center !important;
}

.scroll-content.marquee-mode {
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
}

.scroll-container:not(.scroll-ready) .scroll-content {
    opacity: 0;
    transform: translateX(100%);
}

.scroll-container.scroll-ready .scroll-content {
    opacity: 1;
    transform: none;
}

/* 滚动动画定义 */
@keyframes scroll-left {
    0% {
        transform: translateX(var(--scroll-left-start, 100vw));
    }

    100% {
        transform: translateX(var(--scroll-left-end, -100%));
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(var(--scroll-right-start, -100%));
    }

    100% {
        transform: translateX(var(--scroll-right-end, 100vw));
    }
}

/* 霓虹变色动画 - 使用背景位置移动实现流动效果 */
@keyframes neon-color {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}




/* 滚动文字编辑按钮 */
.edit-scroll-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    /* 改为透明 */
    color: white;
    border: none;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: none !important;
}

.edit-scroll-btn i {
    font-size: 12px;
    color: white !important;
}

/* 导航区域样式 */
.nav-section {
    margin-bottom: 30px;
}

/* 渲染性能优化 - 使用CSS类替代内联样式 */
.nav-section-animated {
    transition: transform 0.3s ease;
    will-change: transform;
}

/* .nav-section-move-up 类已被移除，导航不再自动移动 */

/* 减少布局抖动的优化 */
.nav-card-container {
    contain: layout style paint;
    will-change: transform;
}

.nav-card-container img {
    contain: layout style paint;
}

/* 使用transform替代margin/padding变化 */
.nav-section {
    transform: translateZ(0); /* 启用硬件加速 */
    backface-visibility: hidden;
}

/* 优化滚动性能 */
.scroll-container {
    contain: layout style paint;
    will-change: transform;
}

/* 减少重绘的通用优化 */
.nav-button {
    contain: layout style;
    transform: translateZ(0);
}

.nav-button:hover {
    will-change: transform;
}

/* 图片加载优化 */
img[data-src] {
    content-visibility: auto;
    contain-intrinsic-size: 48px 48px;
}

/* 字体加载优化 */
@font-face {
    font-family: 'system-ui-fallback';
    src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('sans-serif');
    font-display: swap;
}

/* 关键字体预加载优化 */
.critical-text {
    font-family: 'system-ui-fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-display: swap;
}

/* 减少字体渲染阻塞 */
body {
    font-family: 'system-ui-fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-display: swap;
}

/* 图标字体优化 */
.fa, .fas, .far, .fab {
    font-display: swap;
}

/* 预连接字体资源 */
@supports (font-display: swap) {
    * {
        font-display: swap;
    }
}

/* 虚拟滚动容器样式 */
.virtual-scroll-container {
    overflow-y: auto;
    height: 100%;
    contain: strict;
    will-change: scroll-position;
}

.virtual-scroll-spacer-top,
.virtual-scroll-spacer-bottom {
    width: 100%;
    pointer-events: none;
    contain: layout style paint;
}

/* 虚拟滚动项目样式 */
.virtual-scroll-item {
    contain: layout style paint;
    will-change: transform;
}

/* 性能优化的通用样式 */
.performance-optimized {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 0 100px;
}

/* 减少重绘的动画优化 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px) translateX(5px);
}
to {
opacity: 1;
transform: translateY(0) translateX(5px);
}
}

.fade-in-optimized {
animation: fadeIn 0.3s ease-out;
will-change: opacity, transform;
    will-change: opacity, transform;
}

/* 滚动条优化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 支持Firefox的滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.nav-section {
    background: var(--card-bg);
    /* 导航背景的透明度调这里 */
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: none;
    /* 去掉边框 */
    position: relative;
    display: block !important;
    height: auto !important;
    /* 移除导航背景过渡效果，避免刷新时透明度闪现 */
}

.nav-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    transform: translateX(-10px);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
}

.nav-section-header .triangle-icon {
    color: #10B981;
    margin-right: 8px;
}

/* 导航标题 */
.nav-section-title {
    font-weight: bold !important;
    font-size: var(--section-title-size) !important;
    background: linear-gradient(90deg, #ff3300 0%, #ffff33 50%, #33ff33 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block !important;
}

/* 导航按钮网格 */
.nav-buttons-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 电脑上每排显示7个项目 */
    gap: 15px;
}

/* 项目容器 */
.nav-card-container {
    display: grid;
    grid-template-rows: auto auto;
    gap: 5px;
    position: relative;
    user-select: none;
}

/* 正方形项目样式 - 优化硬件加速 */
.nav-button {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    width: 100%;
    /* 确保宽度为 100%，与 padding-bottom 配合创建正方形 */
    border-radius: 0 !important;
    /* 强制覆盖所有圆角设置 */
    color: white;
    text-decoration: none;
    transition: none;
    overflow: hidden;
    box-shadow: none !important;
    cursor: pointer;
    transform: translateZ(0);
    /* 强制硬件加速 */
    will-change: transform;
    /* 提示浏览器优化 */
    background: rgba(10, 10, 10, 0.6);
    border: none !important;
    /* 移除边框，避免显示黑色边框 */
    box-sizing: border-box !important;
    aspect-ratio: 1/1;
    /* 明确指定宽高比，确保是标准正方形 */
}

/* 项目扫光效果 */
.nav-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: marquee 3s linear infinite;
    pointer-events: none;
    transform-origin: left center;
    z-index: 2;
    /* 确保扫光效果显示在内容之上 */
}

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

    100% {
        transform: translateX(200%);
    }
}

.nav-button-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    /* 电脑端项目边框大小 */
    /* 使用内阴影创建边框变色效果，只让图标周围的边框区域变色 */
    background: rgba(10, 10, 10, 0.6);
    /* 设置背景色，确保内阴影显示在正确的背景上，而不是透过显示 */
    box-shadow: inset 0 0 0 7px var(--color-0);
    /* 默认使用第一个颜色，避免显示黑色边框 */
    transition: none;
    z-index: 1;
    /* 确保内容在扫光效果之下 */
    overflow: hidden;
    /* 隐藏超出部分 */
    /* 注意：内阴影会显示在这个元素的背景上，覆盖图标周围的空白区域 */
    box-sizing: border-box;
    /* 确保 padding 包含在尺寸计算内 */
}

/* 图标样式 - 添加尺寸和比例 */
.nav-button img {
    width: 100%;
    /* 与原文件一致，图标填满容器 */
    height: 100%;
    /* 与原文件一致，图标填满容器 */
    object-fit: contain;
    /* contain 模式会自动留出 padding 区域，显示背景色（变色的边框） */
    cursor: pointer;
    aspect-ratio: 1/1;
    /* 保持正方形比例 */
    background: transparent !important;
    /* 移除图标背景色，让内阴影显示在 .nav-button-content 的背景上 */
    padding: 0;
    margin: 0;
    display: block;
    box-sizing: border-box;
    /* 确保背景色完全覆盖 */
    object-position: center;
    /* 确保图标居中显示 */
    position: relative;
    z-index: 2;
    /* 图标显示在内阴影之上 */
}

/* 图片加载失败样式 */
.default-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 滚动文字输入框霓虹边框样式 */
#scrollTextInput {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    text-align: center !important;
    font-weight: bold !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 9px !important;
    font-size: 1.4rem !important;
}

/* 版权文字输入框霓虹边框样式 */
#copyrightTextInput {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    text-align: center !important;
    font-weight: bold !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.4rem !important;
    line-height: 40px !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

/* 项目容器中的备注文字 - 桌面端样式 */
.nav-card-container .nav-card-text,
.nav-card-container > .nav-card-text {
    font-size: var(--card-text-size) !important;
    font-weight: bold !important;
    display: inline-block !important;
    /* 渐变色样式 - 最高优先级 */
    background: linear-gradient(90deg, #ff69b4, #ffff00, #00ff00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    /* 布局样式 */
    text-align: center !important;
    /* 文本自动换行处理 */
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* 联系我们按钮容器 - 使用Grid布局确保稳定性 */
.contact-container {
    display: grid;
    grid-template-columns: 500px auto;  /* 增加到500px，确保数字完整显示 */
    /* 左侧计数器，右侧按钮组 */
    align-items: center;
    margin: 5px 0;
    position: relative;
    width: 100%;
    min-height: 40px;
    /* gap: 10px; 移除gap，使用固定宽度控制 */
}

/* 移动端进一步优化 */
@media (max-width: 768px) {
    .contact-container {
        position: relative;  /* 定位基准 */
        min-height: 40px;
    }

    /* 计数器作为背景占满整个容器 */
    .counter-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;  /* 占满整个宽度，可以往右伸展 */
        bottom: 0;
        z-index: 1;  /* 计数器在下层 */
        display: flex;
        align-items: center;
        justify-content: flex-start;  /* 计数器靠左显示 */
    }

    /* 按钮组固定在容器右侧 */
    .right-buttons {
        position: absolute;
        top: 0;
        right: -10px;  /* 减少向右移动距离 */
        bottom: 0;
        z-index: 2;  /* 按钮在上层 */
        display: flex;
        align-items: center;
        justify-content: flex-start;  /* 改为靠左对齐 */
        padding-left: 10px;  /* 设置左边距 */
        padding-right: 10px;  /* 保持原有右边距 */
    }

    /* 手机端用户信息容器重新设计 - 简化布局 */
    .right-buttons .user-info-container {
        position: absolute !important;
        left: 10px !important;  /* 距离屏幕左边框10px */
        top: 50% !important;
        transform: translateY(calc(-50% - 1px)) !important;  /* 向上移动1px（从-0.5px改为-1px） */
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;  /* 用户名和退出按钮之间5px间距 */
        z-index: 3 !important;
        max-width: calc(100vw - 120px) !important;  /* 确保不超出屏幕 */
    }

    .contact-container #authBtn {
        transform: translateX(-1.5px) translateY(1px) scale(0.812);
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    /* 移除用户名和退出按钮的通用transform，让它们使用各自的样式 */

    .contact-container #authBtn:focus,
    .contact-container #authBtn:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .contact-container #logoutBtn:focus,
    .contact-container #logoutBtn:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #editDefaultIconBtn,
    #editLogoBtn,
    #editContactBtn,
    #editCopyrightBtn,
    #editScrollBtn,
    .add-card-btn {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    .section-edit-btn,
    .admin-edit-btn {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    .contact-link,
    .contact-link * {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    #sharePageBtn,
    #exportJsonBtn,
    #importLegacyBtn,
    #clearDataBtn {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    #editDefaultIconBtn:focus,
    #editDefaultIconBtn:active,
    #editLogoBtn:focus,
    #editLogoBtn:active,
    #editContactBtn:focus,
    #editContactBtn:active,
    #editCopyrightBtn:focus,
    #editCopyrightBtn:active,
    #editScrollBtn:focus,
    #editScrollBtn:active,
    .add-card-btn:focus,
    .add-card-btn:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .section-edit-btn:focus,
    .section-edit-btn:active,
    .admin-edit-btn:focus,
    .admin-edit-btn:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .contact-link:focus,
    .contact-link:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #sharePageBtn:focus,
    #sharePageBtn:active,
    #exportJsonBtn:focus,
    #exportJsonBtn:active,
    #importLegacyBtn:focus,
    #importLegacyBtn:active,
    #clearDataBtn:focus,
    #clearDataBtn:active {
        outline: none !important;
        box-shadow: none !important;
        color: #00FF00 !important;
        border-color: #FFD700 !important;
        -webkit-text-fill-color: #00FF00 !important;
    }

    #sharePageBtn:focus .button-text,
    #sharePageBtn:active .button-text,
    #exportJsonBtn:focus .button-text,
    #exportJsonBtn:active .button-text,
    #importLegacyBtn:focus .button-text,
    #importLegacyBtn:active .button-text,
    #clearDataBtn:focus .button-text,
    #clearDataBtn:active .button-text {
        color: #00FF00 !important;
        -webkit-text-fill-color: #00FF00 !important;
    }

    .contact-container #userNameDisplay > span:first-child {
        display: none !important;
    }

    .contact-container #userNameDisplay {
        max-width: 162px !important;  /* 9个字符的宽度: 18px * 9 = 162px (适应中文字符) */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
        font-size: 18px !important;  /* 简化字体大小 */
        transform: translateY(-4px) !important;  /* 往上移动1.5px: 从-2.5px调整为-4px */
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;  /* 强制定位 */
        top: -1px !important;  /* 往上移动1.5px: 从+0.5px调整为-1px */
    }

    /* 电脑端用户名额外向上移动2px - 增强优先级 */
    @media (min-width: 769px) {
        /* 电脑端用户名显示元素 - 向下移动3px */
        body .right-buttons #userNameDisplay,
        body #userInfoContainer #userNameDisplay,
        body .user-info-container #userNameDisplay {
            transform: translateY(1px) !important;  /* 向下移动3px：从-7px改为+1px（总共向下8px）*/
            position: relative !important;
            top: 0px !important;  /* 从-2px改为0px（向下2px）*/
        }
        
        /* 电脑端用户名样式调整 - 使用更高优先级 */
        body .right-buttons .user-name,
        body #userInfoContainer .user-name,
        body .user-info-container .user-name {
            padding: 0 !important;  /* 移除可能影响垂直位置的padding */
            margin: 0 !important;
            position: relative !important;
            top: -1px !important;  /* 从-4px改为-1px（向下3px）*/
            transform: translateY(1px) !important;  /* 从-2px改为+1px（向下3px）*/
        }
        
        /* 电脑端用户信息容器整体调整 */
        body .right-buttons .user-info-container,
        body #userInfoContainer {
            top: -1px !important;  /* 从-4px改为-1px（向下3px）*/
        }
    }

    .contact-container #logoutBtn {
        font-size: 13.6px !important;  /* 缩小15%: 16px * 0.85 = 13.6px */
        transform: translateX(-4px) scale(0.85) !important;  /* 缩小15% */
        -webkit-tap-highlight-color: transparent !important;
        tap-highlight-color: transparent !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        position: relative !important;
        top: 0px !important;  /* 垂直居中，不移动 */
        align-self: center !important;  /* 在flex容器中垂直居中 */
        display: flex !important;  /* 强制使用flex布局 */
        align-items: center !important;  /* 内部元素垂直居中 */
        justify-content: center !important;  /* 内部元素水平居中 */
        height: auto !important;  /* 不继承父容器高度 */
    }
    
    /* 手机端退出按钮内部span样式 - 强制向上移动并缩小字体 */
    .contact-container #logoutBtn span {
        transform: translateY(-4.5px) !important;  /* 强制向上移动4.5px（从-4px改为-4.5px） */
        display: inline-block !important;
        line-height: 1 !important;
        font-size: 17.85px !important;  /* 缩小15%: 21px * 0.85 = 17.85px */
    }
    
    /* 手机端覆盖 .logout-btn 类的 top 属性 */
    .contact-container .logout-btn {
        top: 0px !important;  /* 垂直居中，覆盖全局的 top: -3px */
        height: auto !important;  /* 不继承父容器高度 */
    }

    body.share-mobile-logged-in #counter {
        display: none !important;
    }

    body.share-mobile-logged-out-delay #counter {
        display: none !important;
    }

    .contact-text {
        font-size: 0.6rem;  /* 手机端文字更小 */
    }
}

/* 左侧计数器区域 */
.counter-container {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 右侧按钮组 */
.right-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    /* 消除按钮之间的间隙 */
    justify-content: flex-end;
    /* 改为flex-end，让所有按钮靠右显示 */
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: auto;
    /* 在grid布局中让按钮组靠右 */
}

/* 电脑端用户信息容器样式 - 确保靠左对齐 */
.right-buttons .user-info-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;  /* 设置用户名和退出按钮之间的间距 */
    order: -1;  /* 将用户信息容器置于最前面 */
    justify-content: flex-start;  /* 靠左对齐 */
}

/* 编辑按钮紧贴飞机图标 - 完全消除间隙 */
.right-buttons .edit-logo-btn,
.right-buttons .edit-default-icon-btn,
.right-buttons .edit-contact-btn,
.right-buttons .theme-toggle-btn {
    margin: 0;
    /* 完全移除所有边距 */
    padding: 0;
    /* 完全移除内边距 */
    width: 24px;
    /* 固定宽度 */
    height: 24px;
    /* 固定高度 */
    min-width: 24px;
    /* 固定最小宽度 */
    min-height: 24px;
    /* 固定最小高度 */
    position: relative;
    top: -2px;
}

.right-buttons .edit-default-icon-btn,
.right-buttons .edit-logo-btn,
.right-buttons .edit-contact-btn {
    top: -3.5px;
}

/* 联系我们链接与编辑按钮保持一格距离 */
.right-buttons .contact-link {
    margin: 0;
    /* 完全移除所有边距 */
    padding: 0;
    /* 完全移除内边距 */
    gap: 0;
}

    /* 消除图标和文字之间的间隙 */
    margin-left: auto !important;
    /* 自动占用左侧空间，让联系我们靠右显示 */
}

/* 联系我们文字进一步缩小 */
.contact-text {
    font-size: 0.7rem;
    /* 进一步减小字体大小 */
    font-weight: bold;
    background: linear-gradient(90deg, #ff3300, #33ff33, #ffff33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 浏览量计数器样式 */
.counter {
    position: relative;
    top: -4px;
    line-height: 1.2;
    background: linear-gradient(90deg, #ffff00, #00ff00, #ffa500, #ff69b4, #9900ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 兼容性处理：如果渐变色不生效，使用金色文字 */
    color: #FFD700;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    padding: 0 8px;
    font-size: 1.3rem;
    font-weight: bold;
    white-space: nowrap;
    /* 移除overflow限制，改为使用更宽的容器 */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* max-width: 100%; 移除这个，让它在固定容器内显示 */
    min-width: 60px;  /* 保持最小宽度 */
    /* 固定最小宽度，防止数字变化时布局抖动 */
    text-align: center;
    /* 居中对齐数字 */
    /* width: 100%; 移除这个设置 */
    box-sizing: border-box;
    /* 确保在所有浏览器中都有足够的宽度 */
    display: inline-block;
    /* 防止布局问题 */
    letter-spacing: 0.5px;
    /* 稍微增加字符间距，提高可读性 */
}

/* 用户信息容器样式 */
.user-info-container {
    position: relative;
    top: -2px;
    display: flex !important;
    align-items: center !important;
    gap: 0;
    line-height: 1.1;
    max-width: 50vw;
    overflow: visible;
}

/* 登录按钮样式 - 仅适用于页面顶部的登录按钮，不影响模态框内的按钮 */
#authBtn.auth-btn {
    display: none; /* 默认隐藏，只在未登录时显示 */
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    left: 12px;
    top: -4px;
    /* 往右移动登录按钮12px，往上移动3.5px */
}
#authBtn.auth-btn span {
    transform: translateX(8px);
    /* 向右移动8px，使文字靠近主题切换按钮 */
    font-size: 23px;
    /* 稍微加大文字大小 */
    font-weight: 700;
    /* 保持粗体 */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    position: relative;
    top: -1px;
    background: linear-gradient(90deg, #ff69b4, #ffff00, #00ff00);
    /* 粉色→黄色→绿色的渐变色 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 让渐变色显示出来 */
}

@media (max-width: 768px) {
    #authBtn.auth-btn {
        top: -4.5px;
    }
}

/* 退出按钮样式 */
.logout-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 50px;
    /* 确保按钮有足够的宽度显示文字 */
    position: relative;
    left: -4.5px;
    top: -3px;
    /* 往左移动按钮3px，往上移动2.5px */
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.logout-btn span,
#logoutBtn span {
    transform: translateX(0px) !important;  /* 移除向右移动，避免干扰整体定位 */
    /* 向右移动8px，使文字靠近主题切换按钮 */
    font-size: 21px;
    /* 改为像素单位确保在所有浏览器中大小一致 */
    font-weight: 700;
    /* 保持粗体 */
    display: block;
    line-height: 1;
    background: linear-gradient(90deg, #ff69b4, #ffff00, #00ff00);
    /* 使用与登录按钮相同的渐变色 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 让渐变色显示出来 */
}

/* 用户名显示样式 */
.user-name {
    font-size: 23px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    background: linear-gradient(90deg, #ff69b4, #ffff00, #00ff00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    overflow: visible;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 3px 0;
}

/* 手机端用户名样式重写 - 覆盖通用样式 */
@media (max-width: 768px) {
    .contact-container .user-name {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(255, 215, 0, 0.2);
    border: none;
    flex-shrink: 0;
    line-height: 1;
}

/* 联系文字样式优化 */
.contact-text {
    font-size: 0.8rem;
    /* 进一步减小字体大小 */
    font-weight: bold;
    background: linear-gradient(90deg, #ff3300, #33ff33, #ffff33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 编辑按钮样式优化 */
.edit-contact-btn,
.edit-default-icon-btn,
.edit-logo-btn {
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 联系我们编辑按钮 */
.edit-contact-btn,
.edit-default-icon-btn,
.edit-logo-btn {
    background: transparent;
    /* 改为透明 */
    color: white;
    border: none;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}


/* 扩展选择器-包含所有编辑按钮类 */
.section-edit-btn i,
.edit-contact-btn i,
.edit-default-icon-btn i,
.edit-logo-btn i,
.edit-scroll-btn i,
.edit-copyright-btn i,
.admin-edit-btn i,
.section-edit-btn i,
.mobile-cards-btn i,
.navigation-sort-btn i {
color: #FFD700 !important;
/* 强制把所有编辑按钮改为金黄色 */
font-size: 20px !important;
/* 强制把所有编辑按钮改为20px大小 */
background: transparent !important;
/* 强制把所有编辑按钮的背景改为透明 */
}

.theme-toggle-btn i,
.edit-default-icon-btn i,
.edit-logo-btn i,
.edit-contact-btn i {
position: relative;
top: -2px;
}

/* 联系我们按钮 */
.contact-link {
/* 其他属性不变 */
color: rgba(255, 215, 0, 0.2);
/* 背景完全透明 */
border: none;
    /* 背景完全透明 */
    border: none;
}

/* 纸飞机图标 */
.contact-icon {
    font-size: 1.3rem;
    color: #10B981;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -5px;
}
.contact-icon::before {
    line-height: 1;
}

/* 联系文字 */
.contact-text {
    font-size: 1.3rem;
    /* 联系我们的字体大小 */
    font-weight: bold;
    background: linear-gradient(90deg, #ff3300, #33ff33, #ffff33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    transform: translateY(-5px);
    /* 往上移动一点点 */
}

/* 项目编辑按钮 */
.admin-edit-btn {
    position: absolute;
    top: 4px;
    right: 8px;
    background: transparent;
    /* 改为透明背景 */
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 10;
    box-shadow: none !important;
}

.section-edit-btn {
    margin-left: -2px;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.mobile-cards-btn,
.navigation-sort-btn {
    margin-left: -5px;
    background: transparent;
    color: #FFD700;
    border: none;
}

/* 详情页开关按钮样式 */
.card-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-page-toggle {
    display: inline-block;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #00ff00;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    font-size: 20px;
    position: relative;
    top: 0.5px;
}

/* 添加项目跟底部三个按钮的样式 */
.add-card-btn,
.add-section-btn {
    font-weight: 700;
    /* 字体加粗到700 */
    background: transparent !important;
    /* 将背景色改为透明 */
    color: #FFD700 !important;
    /* 固定文字颜色为金色 */

    /* 固定边框的颜色 */
    border: 3px solid #FFD700 !important;
    /* 金色实线边框（#FFD700为标准金色代码） */
    padding: 8px 6.3px;
    /* 可调节添加项目的按钮高度跟底部三按钮之间的距离 */
    height: 38px !important;
    /* 固定高度确保所有按钮高度一致 */
    box-sizing: border-box !important;
    /* 确保padding和border包含在高度计算内 */
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    align-items: center;
    display: inline-flex;
    gap: 1px;
    justify-content: center;
    transition: none;
    /* 移除过渡效果（如之前未移除） */
    line-height: 1;
    /* 确保行高不影响高度 */
    position: relative;
    /* 为伪元素定位做准备 */
    overflow: hidden;
    /* 隐藏超出部分 */
    /* 霓虹跑马灯效果 */
    box-shadow: 
        0 0 5px rgba(255, 215, 0, 0.5),
        0 0 10px rgba(255, 215, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 0 5px rgba(255, 215, 0, 0.1);
    /* 基础发光效果 */
}

/* 添加项目按钮 - 移除霓虹动画 */
.add-card-btn::before,
.add-section-btn::before {
    display: none;
}

.add-card-btn,
.add-section-btn {
    animation: none;
}

/* 导航项目中的添加项目按钮 - 与普通项目完全相同 */
.nav-button.add-card-btn {
    /* 完全覆盖通用 .add-card-btn 的样式，确保导航项目按钮使用项目样式 */
    /* 移除所有通用样式的影响，特别是 box-shadow */
    border: none !important;
    /* 移除边框，避免显示黑色边框 */
    background: transparent !important;
    /* 设置为透明，去掉红色半透明背景外的黑色边框 */
    color: white !important;
    padding: 0 !important;
    padding-bottom: 100% !important;
    /* 与普通项目完全相同的高度 */
    height: 0 !important;
    /* 重置高度，让padding-bottom生效 */
    border-radius: 0 !important;
    /* 与普通项目相同的圆角 */
    font-weight: normal !important;
    /* 覆盖通用样式的字体加粗 */
    display: block !important;
    /* 覆盖通用样式的 inline-flex */
    box-sizing: border-box !important;
    /* 确保边框包含在高度计算内 */
    position: relative !important;
    /* 为伪元素定位做准备 */
    overflow: hidden !important;
    /* 与普通项目相同 */
    animation: none !important;
    /* 移除动画 */
    margin: 0 !important;
    width: 100% !important;
    font-size: inherit !important;
    /* 移除通用样式的字体大小 */
    align-items: stretch !important;
    /* 移除通用样式的 align-items */
    justify-content: stretch !important;
    /* 移除通用样式的 justify-content */
    gap: 0 !important;
    /* 移除通用样式的 gap */
    line-height: normal !important;
    /* 移除通用样式的行高 */
    cursor: pointer !important;
    text-decoration: none !important;
    transition: none !important;
    /* 与普通项目相同的过渡效果 */
    transform: translateZ(0) !important;
    /* 硬件加速 */
    will-change: transform !important;
    /* 内阴影放在最底层，与普通项目的内阴影位置一致 */
    box-shadow: none !important;
    /* 移除内阴影 */
}

/* 启用添加项目按钮的扫光效果 - 与普通项目一致 */
.nav-button.add-card-btn::after {
    display: block !important;
    /* 启用扫光效果，与普通项目一致 */
}

/* 移除导航项目添加按钮的霓虹跑马灯边框 */
.nav-button.add-card-btn::before {
    display: none;
}


.nav-button.add-card-btn .nav-button-content {
    padding: 6px !important;
    /* 与普通项目相同的内边距 */
    position: absolute !important;
    /* 保持绝对定位以确保居中 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1;
    /* 与普通项目一致，内阴影显示在第2层 */
    background: transparent !important;
    /* 移除红色背景 */
    box-shadow: none !important;
    /* 移除内阴影，移到最底层 */
    transition: none !important;
    /* 与普通项目相同的过渡效果 */
    overflow: hidden !important;
    /* 与普通项目一致，隐藏超出部分 */
    box-sizing: border-box !important;
    /* 与普通项目一致，确保 padding 包含在尺寸计算内 */
}

/* 使用伪元素创建红色半透明背景，只显示在 padding 区域 */
.nav-button.add-card-btn .nav-button-content::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: transparent !important;
    /* 去掉红色半透明背景 */
    z-index: -1;
    /* 显示在内容之下 */
    pointer-events: none;
}

.nav-button.add-card-btn .nav-button-content i {
    font-size: 2rem !important;
    /* 恢复为原始大小 */
    display: inline-block !important;
    /* 与普通项目的图标显示方式一致 */
    background: linear-gradient(90deg, #ff6600, #ffcc00, #33ff33, #3366ff) !important;
    /* 使用版权文字的默认渐变色 */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -moz-background-clip: text !important;
    color: transparent !important;
    /* 设置为透明，让背景渐变显示 */
    -webkit-text-fill-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    /* 图标显示在内阴影之上 */
    box-sizing: border-box !important;
    /* 确保尺寸计算正确 */
}

@media (max-width: 768px) {
    .nav-button.add-card-btn .nav-button-content i {
        font-size: 1.5rem !important;
    }
}

/* 火龙动画样式已删除 */

/* 底部操作按钮区域中的按钮 */
.nav-actions-bottom .add-section-btn,
.nav-actions-bottom #addSectionBtn,
.nav-actions-bottom #clearDataBtn,
.nav-actions-bottom #loadDataBtn {
    color: #00FF00 !important;
    border: 2px solid #FFD700 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    /* 移除固定的min-width，让JavaScript控制 */
}

@media (min-width: 768px) {
    .nav-actions-bottom .add-section-btn,
    .nav-actions-bottom #addSectionBtn,
    .nav-actions-bottom #clearDataBtn,
    .nav-actions-bottom #loadDataBtn,
    .nav-actions-bottom #sharePageBtn,
    .nav-actions-bottom #exportJsonBtn,
    .nav-actions-bottom #importLegacyBtn {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 12px 8px !important;
        font-size: 1.05rem !important;
        text-indent: -3px !important;
        gap: 3px !important;
        border-radius: 8px !important;
        /* 移除固定的min-width，让JavaScript控制 */
    }
    
}

.nav-actions-bottom #addSectionBtn:hover,
.nav-actions-bottom #clearDataBtn:hover,
.nav-actions-bottom #loadDataBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* 针对导入按钮的特殊样式，确保不发生位移变换 */
.nav-actions-bottom #importLegacyBtn {
    transition: background 0.3s ease, color 0.3s ease !important;
    -webkit-transition: background 0.3s ease, color 0.3s ease !important;
    -moz-transition: background 0.3s ease, color 0.3s ease !important;
    -ms-transition: background 0.3s ease, color 0.3s ease !important;
    -o-transition: background 0.3s ease, color 0.3s ease !important;
}

/* 强制覆盖所有可能的transform规则 */
.nav-actions-bottom #importLegacyBtn:hover,
.nav-actions-bottom #importLegacyBtn:active,
#importLegacyModal .modal-buttons #importLegacyBtn:hover,
#importLegacyModal .modal-buttons #importLegacyBtn:active {
    /* 使用!important和多个前缀确保样式被应用 */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    
    /* 确保变换原点居中 */
    transform-origin: center center !important;
    -webkit-transform-origin: center center !important;
    -moz-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    -o-transform-origin: center center !important;
    
    /* 移除所有过渡效果 */
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    
    /* 通过动画关键帧覆盖transform */
    animation: noTransform 0.01s !important;
    -webkit-animation: noTransform 0.01s !important;
    -moz-animation: noTransform 0.01s !important;
    -ms-animation: noTransform 0.01s !important;
    -o-animation: noTransform 0.01s !important;
}

/* 此部分已合并到上面的修改中，因此删除重复代码 */

/* 定义一个不执行任何变换的关键帧动画 */
@keyframes noTransform {
    0%, 100% { transform: none; }
}
@-webkit-keyframes noTransform {
    0%, 100% { -webkit-transform: none; }
}
@-moz-keyframes noTransform {
    0%, 100% { -moz-transform: none; }
}
@-ms-keyframes noTransform {
    0%, 100% { -ms-transform: none; }
}
@-o-keyframes noTransform {
    0%, 100% { -o-transform: none; }
}

/* 底部操作按钮区域 */
.nav-actions-bottom {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 5px 20px 0 20px;
    margin-top: -10px;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

.nav-actions-bottom .add-section-btn {
    background: #1a1a1a;
    color: white;
    border: none;
    padding: 5px 13px;
    border-radius: 0;
    font-size: 0.68rem;
    line-height: 1.2;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-actions-bottom .add-section-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: #00FF00 !important;
    color: #000000 !important;
}

/* 清空数据按钮特殊样式 */
.nav-actions-bottom #clearDataBtn {
    background: #1a1a1a;  /* 改为暗黑色背景 */
    color: white;
}

/* 全部重置按钮图标向右移动 */
.nav-actions-bottom #clearDataBtn div i {
    position: relative !important;
    left: 1.5px !important;
}

.nav-actions-bottom #clearDataBtn:hover {
    background: #FFD700 !important;
    color: #000000 !important;
}

.nav-actions-bottom #clearDataBtn:hover div i,
.nav-actions-bottom #clearDataBtn:hover .button-text,
.nav-actions-bottom #clearDataBtn:hover .button-text:after {
    color: #000000 !important;
}

/* 确保清空数据按钮不受通用规则影响 */
.nav-actions-bottom #clearDataBtn i {
    margin-right: 0;
}

/* 中间三个按钮的样式 */
.nav-actions-bottom #sharePageBtn,
.nav-actions-bottom #exportJsonBtn,
.nav-actions-bottom #importLegacyBtn {
    background: #1a1a1a;
    color: white;
    gap: 0;
}

.nav-actions-bottom #sharePageBtn:hover {
    background: #FFD700 !important;
    color: #000000 !important;
}

.nav-actions-bottom #sharePageBtn:hover div i,
.nav-actions-bottom #sharePageBtn:hover .button-text,
.nav-actions-bottom #sharePageBtn:hover .button-text:after {
    color: #000000 !important;
}

.nav-actions-bottom #exportJsonBtn:hover,
.nav-actions-bottom #importLegacyBtn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 导入数据按钮悬停效果，无上浮效果 */
.nav-actions-bottom #importLegacyBtn:hover {
    background: #FFD700 !important;
    color: #000000 !important;
    /* 移除transform上浮效果 */
    transform: none !important;
}

}

/* 确保中间三个按钮的图标显示 */
.nav-actions-bottom #sharePageBtn i,
.nav-actions-bottom #exportJsonBtn i,
.nav-actions-bottom #importLegacyBtn i {
    margin-right: 0 !important;
    margin-left: 0 !important;
    color: inherit !important;
}

/* 桌面端按钮样式 */
@media (min-width: 769px) {
    /* 恢复按钮正常宽度和形状 */
    .nav-actions-bottom .export-container {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 15px !important;
    }
    
    .nav-actions-bottom .export-container button {
        min-width: 120px !important;
        height: 40px !important;
        border-radius: 8px !important;
        padding: 0 15px !important;
        background-color: #1a1a1a !important;  /* 暗黑色背景 */
        color: white !important;
        border: 2px solid #FFD700 !important;
        transition: all 0.3s ease !important;
    }
    
    /* 桌面端按钮鼠标悬停效果 */
    .nav-actions-bottom .export-container button:hover {
        background-color: #FFD700 !important;
        color: #000000 !important;
    }
    
    /* 导入按钮悬停效果，但无上浮效果 */
    .nav-actions-bottom #importLegacyBtn:hover {
        background-color: #FFD700 !important;
        color: #000000 !important;
        transform: none !important;  /* 确保无上浮效果 */
    }
    
    .nav-actions-bottom .export-container button:hover div i {
        color: #000000 !important;
    }
    
    .nav-actions-bottom .export-container button:hover .button-text:after {
        color: #000000 !important;
    }
    
    /* 按钮内容水平布局 */
    .nav-actions-bottom .export-container button div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        transform: none !important;
    }
    
    .nav-actions-bottom .export-container button div i {
        display: inline-block !important;
        margin-right: 3px !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
        font-size: 1.1rem !important;
        color: #FFD700 !important;
        margin-left: -2px !important; /* 图标向左移动2px */
        position: relative !important;
        left: -2px !important; /* 使用相对定位向左移动图标 */
    }
    
    /* 桌面端隐藏换行 */
    .nav-actions-bottom .export-container button .button-text br {
        display: none !important;
    }
    
    /* 桌面端文字横向显示 */
    .nav-actions-bottom #sharePageBtn .button-text:after { content: "分享主页" !important; }
    .nav-actions-bottom #exportJsonBtn .button-text:after { content: "导出数据" !important; }
    .nav-actions-bottom #importLegacyBtn .button-text:after { content: "导入数据" !important; }
    .nav-actions-bottom #clearDataBtn .button-text:after { content: "全部重置" !important; }
    
    /* 隐藏原始文字 */
    .nav-actions-bottom .export-container button .button-text {
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    /* 显示伪元素文字 */
    .nav-actions-bottom .export-container button .button-text:after {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        color: #FFD700 !important;
        margin-left: 3px !important; /* 调整伪元素文字与图标的距离为3px */
    }
}

@media (max-width: 768px) {
    .nav-actions-bottom {
        width: 100% !important;
    }
    
    /* 移动端按钮容器样式 */
    .nav-actions-bottom .export-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 移动端按钮样式 */
    .nav-actions-bottom .export-container button {
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 5px !important;
        min-height: 60px !important;
        font-size: 1.05rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        background-color: #1a1a1a !important;  /* 暗黑色背景 */
        border: 2px solid #FFD700 !important;
        color: #00FF00 !important;  /* 改为亮绿色文字 */
    }
    
    /* 移动端导入按钮悬停效果，无上浮效果 */
    .nav-actions-bottom #importLegacyBtn:hover {
        background-color: #FFD700 !important;
        color: #000000 !important;
        transform: none !important;  /* 确保无上浮效果 */
    }
    
    /* 移动端按钮内容垂直居中 */
    .nav-actions-bottom .export-container button div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* 移动端图标样式 */
    .nav-actions-bottom .export-container button div i {
        display: block !important;
        margin: 0 auto 5px auto !important;
        font-size: 1.1rem !important;
        color: #FFD700 !important;
    }
    
    /* 移动端文字样式 */
    .nav-actions-bottom .export-container button .button-text {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        color: white !important;  /* 白色文字 */
        font-size: 1.05rem !important;
    }

    /* 这里的样式已经被上面的移动端按钮样式替代 */
    
    /* 确保所有按钮内的span元素完全垂直居中 */
    .nav-actions-bottom .export-container button span {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: auto !important;
        padding: 0 !important;
    }
    
    /* 调整图标和文字间距 */
    .nav-actions-bottom .export-container button span i {
        margin-bottom: 5px !important;
        font-size: 1.1rem !important;
    }

    .nav-actions-bottom #clearDataBtn i {
        margin-right: 0 !important;
    }
    
    /* 确保所有底部按钮尺寸一致，特别是全部重置按钮 */
    .nav-actions-bottom .export-container button,
    .nav-actions-bottom #clearDataBtn,
    .nav-actions-bottom #sharePageBtn,
    .nav-actions-bottom #exportJsonBtn,
    .nav-actions-bottom #importLegacyBtn {
        width: 100% !important;
        height: auto !important;
        min-height: 60px !important;
        box-sizing: border-box !important;
    }
}

/* 提示消息 */
.toast-notification {
    position: fixed;
    top: 5px;
    left: 50%;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 99999;
    /* 提高z-index确保在所有元素之上显示 */
    opacity: 0;
    transition: none;
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    will-change: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    font-size: 1rem;
}

.toast-notification .toast-icon {
    display: inline-block;
    font-size: 1.2rem;
    margin-right: 0;
    font-weight: bold;
    transform: translateY(0.5px);
}

.toast-notification .toast-message {
    flex: none;
    text-align: center;
    display: inline-block;
    margin-left: 0;
    white-space: nowrap;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-notification.error {
    background: rgba(220, 38, 38, 0.9);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.toast-notification.warning {
    background: rgba(245, 158, 11, 0.9);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.toast-notification.info {
    background: rgba(59, 130, 246, 0.9);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

@media (max-width: 768px) {
    .toast-notification .toast-message {
        white-space: nowrap !important;
    }
}

/* 自定义模态框 */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    /* 轻微半透明黑色背景遮罩 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    display: none;
    /* 防止触摸滚动传播 */
    touch-action: none;
    overscroll-behavior: contain;
}

.custom-modal.show {
    display: flex;
}

/* 新增选择实例模态框的特殊样式，确保显示在最上层 */
#selectInstanceModal {
    z-index: 3000;
}

/* 确认对话框样式，确保显示在最上层并居中 */
#confirmModal {
    z-index: 3000;
}

/* 确认对话框内容区域 - 优化布局和视觉效果 */
#confirmModal .modal-content {
    padding: 35px 30px 25px 30px !important;
    min-height: auto !important;
    max-width: 510px !important;
    width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    /* 更圆润的边角 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.3) !important;
    /* 增强阴影效果 */
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%) !important;
    /* 渐变背景 */
}

/* 确认对话框标题样式 - 优化显示 */
#confirmModal .modal-title {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #ff3300, #ffff33, #33ff33) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    /* 使用渐变色标题 */
    letter-spacing: 0.5px !important;
    /* 增加字间距 */
}

/* 确认对话框文字样式 - 优化显示，允许换行 */
#confirmModal .modal-content p {
    font-size: 1rem !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    /* 柔和的白色 */
    font-weight: 500 !important;
    line-height: 1.6 !important;
    /* 增加行高提高可读性 */
    white-space: normal !important;
    /* 允许换行 */
    word-wrap: break-word !important;
    /* 允许单词内换行 */
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.03) !important;
    /* 轻微背景色 */
    border-radius: 8px !important;
    /* 圆角 */
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    /* 淡金色边框 */
}

/* 确认对话框按钮区域 - 优化布局 */
#confirmModal .modal-buttons {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    gap: 15px !important;
    display: flex !important;
    justify-content: center !important;
    /* 居中显示按钮 */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 确认对话框按钮样式 - 优化外观 */
#confirmModal .modal-buttons .cancel,
#confirmModal .modal-buttons .save {
    border-width: 2px !important;
    padding: 12px 28px !important;
    /* 增加按钮内边距 */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    /* 更圆润的按钮 */
    transition: all 0.3s ease !important;
    /* 平滑过渡效果 */
    min-width: 100px !important;
    /* 统一按钮最小宽度 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    /* 按钮阴影 */
}

/* 取消按钮悬停效果 */
#confirmModal .modal-buttons .cancel:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #FFA500 !important;
    /* 移除transform和box-shadow以提升性能 */
}

/* 确认按钮悬停效果 */
#confirmModal .modal-buttons .save:hover {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
}

/* 按钮点击效果 */
#confirmModal .modal-buttons .cancel:active,
#confirmModal .modal-buttons .save:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 实例列表项样式 */
#selectInstanceModal .instance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #333333;
    border: 2px solid #FFD700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#selectInstanceModal .instance-item:hover {
    background: #3a3a3a;
    border-color: #FFA500;
}

#selectInstanceModal .instance-text {
    flex: 1;
    color: #ffd700;
    font-weight: 600;
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    display: flex;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
}

#selectInstanceModal .instance-delete-btn {
    background: transparent;
    border: none;
    color: #ff0000;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px !important;
}

#selectInstanceModal .instance-delete-btn:hover {
    color: #ff4444;
    /* 移除transform以提升性能 */
}

#selectInstanceModal .instance-delete-btn:active {
    transform: scale(0.95);
}

.modal-content {
    background: var(--modal-bg);
    padding: 5px;
    /* 背景视频编辑界面的ui高度 */
    border-radius: 8px;
    width: 94.5%;
    max-width: 525px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
    border: 3px solid #FFD700;
    /* 防止模态框内容滚动传播 */
    touch-action: pan-y;
    overscroll-behavior: contain;
    transition: background 0.3s ease;
}

/* 网页背景和联系人链接编辑界面 - 统一弹窗高度（与视频背景模式一致） */
#editContactModal .modal-content {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 60px;
}

/* 网页背景和联系人链接编辑界面 - 视频预览容器减少底部边距，统一高度 */
#editContactModal .video-preview-container {
    margin-bottom: 10px !important;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    border: 2px solid #FFD700;
    background: var(--card-bg);
    color: var(--text-color);
    box-sizing: border-box;
    /* 移除过渡效果，避免导航透明度刷新时的过渡 */
}

/* 输入框 focus 状态保持金色边框（排除滑块） */
.modal-content input:not([type="range"]):focus,
.modal-content textarea:focus,
.modal-content select:focus {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

/* 滑块不应该有边框 */
.modal-content input[type="range"] {
    border: none !important;
}

.modal-content input[type="range"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 滚动动画效果选择框背景色设置为暗黑主题背景色 */
#animationSelect {
    background: #1a1a1a !important;
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    border-radius: 4px !important;
    padding: 8px !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#animationSelect:focus {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#animationSelect:active {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#animationSelect:hover {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
}

#animationSelect::-ms-expand {
    display: none;
}

#animationSelect option {
    text-align: center !important;
    background: #1a1a1a !important;
    text-align-last: center !important;
}

#scrollNeonGradientSelect {
    background: #1a1a1a !important;
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    border-radius: 4px !important;
    padding: 8px !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#scrollNeonGradientSelect:focus {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#scrollNeonGradientSelect:active {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#scrollNeonGradientSelect:hover {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
}

/* 当选择默认颜色时，使用 text-indent 让文本稍微左移 */
#scrollNeonGradientSelect.has-default-selected {
    text-indent: 5px !important;
}

#scrollNeonGradientSelect::-ms-expand {
    display: none;
}

#scrollNeonGradientSelect option {
    text-align: center !important;
    text-align-last: center !important;
    background: #1a1a1a !important;
}

/* 确保渐变色选择框显示的文本居中（除了默认颜色选项） */
#scrollNeonGradientSelect:not(.has-default-selected) {
    text-indent: 0 !important;
}

/* 默认颜色选项文本稍微左移 */
#scrollNeonGradientSelect option.default-color-option {
    text-indent: -8px !important;
    padding-left: 8px !important;
}

.modal-title {
    color: white;
    margin-bottom: 5px;
    font-size: 1.1rem;
    text-align: center;
    background: linear-gradient(90deg, #ff3300, #ffff33, #33ff33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    /* 所有模态框标题纵向居中 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
    transform: translateY(3px) !important;
    /* 使用transform向下移动以实现完美居中 */
}

#editLogoModal .modal-title::before,
#editLogoModal .modal-title::after {
    content: none !important;
}

/* 编辑Logo样式界面 - 标题横向纵向居中 */
#editLogoModal .modal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* 网页背景和联系人链接编辑界面 - 标题横向纵向居中 */
#editContactModal .modal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}

#editContactModal .modal-title::before,
#editContactModal .modal-title::after {
    content: none !important;
}

/* 编辑默认项目图标界面 - 标题纵向居中 */
#editDefaultIconModal .modal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* 编辑项目界面 - 标题纵向居中 */
#editCardModal .modal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* 编辑滚动文字界面文字加粗 */
#editScrollModal label,
#editScrollModal .text-size-value,
#editScrollModal input[type="text"],
#editScrollModal select,
#editScrollModal select option,
#editScrollModal button,
#editScrollModal div {
    font-weight: 600 !important;
}

/* 编辑Logo样式界面文字加粗 */
#editLogoModal label,
#editLogoModal .text-size-value,
#editLogoModal input[type="text"],
#editLogoModal input[type="number"],
#editLogoModal select,
#editLogoModal select option,
#editLogoModal button,
#editLogoModal div,
#editLogoModal span {
    font-weight: 600 !important;
}

/* 编辑版权信息界面文字加粗 */
#editCopyrightModal label,
#editCopyrightModal .text-size-value,
#editCopyrightModal input[type="text"],
#editCopyrightModal input[type="color"],
#editCopyrightModal button,
#editCopyrightModal div,
#editCopyrightModal span,
#editCopyrightModal p {
    font-weight: 600 !important;
}

/* 版权文字输入框占位符样式 */
#copyrightTextInput::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* 版权文字输入框focus状态 */
#copyrightTextInput:focus {
    outline: none !important;
}


/* 编辑导航标题界面文字加粗 */
#editSectionModal label,
#editSectionModal .text-size-value,
#editSectionModal input[type="text"],
#editSectionModal input[type="number"],
#editSectionModal button,
#editSectionModal div,
#editSectionModal span {
    font-weight: 600 !important;
}

/* 编辑导航标题输入框霓虹边框样式 */
#editSectionTitle {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    text-align: center !important;
    font-weight: bold !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.4rem !important;
    line-height: 40px !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

/* 编辑导航标题输入框占位符样式 */
#editSectionTitle::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* 编辑导航标题输入框focus状态 */
#editSectionTitle:focus {
    outline: none !important;
}

/* 编辑滚动文字输入框文字居中和颜色 */

/* 编辑滚动文字输入框占位符样式 */
#scrollTextInput::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* 编辑滚动文字输入框focus状态 */
#scrollTextInput:focus {
    outline: none !important;
}


/* 编辑项目界面文字加粗 */
#editCardModal label,
#editCardModal .text-size-value,
#editCardModal input[type="text"],
#editCardModal input[type="url"],
#editCardModal button,
#editCardModal div,
#editCardModal span {
    font-weight: 600 !important;
}

/* 编辑项目：统一按钮基础样式 */
#editCardModal .modal-buttons button {
    color: #FFD700 !important;
    border: 2px solid #FFD700 !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* 编辑项目：按钮hover效果 */
#editCardModal .modal-buttons button:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
}

#editCardModal .modal-buttons #deleteCardBtn {
    color: #00FF00 !important;
    border-color: #00FF00 !important;
}

#editCardModal .modal-buttons #deleteCardBtn:hover {
    color: #000000 !important;
    border-color: #FFD700 !important;
}

/* 编辑默认项目图标界面文字加粗 */
#editDefaultIconModal label,
#editDefaultIconModal input[type="text"],
#editDefaultIconModal button,
#editDefaultIconModal div,
#editDefaultIconModal span {
    font-weight: 600 !important;
}

/* 网页背景和联系人链接界面文字加粗 */
#editContactModal label,
#editContactModal .text-size-value,
#editContactModal input[type="text"],
#editContactModal input[type="url"],
#editContactModal input[type="file"],
#editContactModal input[type="radio"],
#editContactModal button,
#editContactModal div,
#editContactModal span,
#editContactModal select,
#editContactModal select option {
    font-weight: 600 !important;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

/* 覆盖全局modal-buttons规则 - 专门针对editCardModal */
#editCardModal .modal-buttons {
    margin-top: 15px !important;
    transform: translateY(-5px) !important;
    margin-bottom: -5px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* 网页背景和联系人链接编辑界面 - 按钮固定在底部右侧 */
#editContactModal .modal-buttons {
    position: absolute;
    bottom: 10px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* 网页背景和联系人链接编辑界面 - 按钮减小7% */
#editContactModal .modal-buttons button {
    padding: 9.3px 14.88px !important;
    font-size: 0.9765rem !important;
    min-width: 74.4px !important;
}

/* 确保加载数据界面的按钮容器不受通用规则影响 */
#selectInstanceModalButtons {
    justify-content: flex-end !important;
    display: flex !important;
    gap: 10px !important;
}

/* 加载数据界面按钮布局：两个按钮都靠右 */
#selectInstanceModal .modal-buttons,
#selectInstanceModal > .modal-content > .modal-buttons,
#selectInstanceModalButtons,
.instance-modal-buttons {
    justify-content: flex-end !important;
    display: flex !important;
    gap: 10px !important;
    position: relative !important;
}

/* 确保按钮正确布局 - 两个按钮都靠右 */
#selectInstanceModalButtons .cancel,
#selectInstanceModalButtons #cancelSelectBtn {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    order: 1 !important;
}

#selectInstanceModalButtons .delete-btn,
#selectInstanceModalButtons .restore-default-btn {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    order: 2 !important;
}

#selectInstanceModalButtons #deleteAllInstancesBtn {
    order: 3 !important;
}

#selectInstanceModalButtons #restoreDefaultBtn,
#restoreDefaultBtn {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    order: 2 !important;
}

/* Logo编辑模态框按钮居中 */
#editLogoModal .modal-buttons {
    justify-content: center !important;
}

/* Logo编辑弹窗按钮hover效果 */
#editLogoModal .modal-buttons .cancel:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    /* 移除transform和box-shadow以提升性能 */
}

#editLogoModal .modal-buttons .save:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    /* 移除transform和box-shadow以提升性能 */
}

#editLogoModal .modal-buttons #resetLogoBtn:hover {
    border-color: #FFD700 !important;
}

/* 滚动文字编辑弹窗按钮hover效果 */
#editScrollModal .modal-buttons .cancel:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    /* 移除transform和box-shadow以提升性能 */
}

#editScrollModal .modal-buttons .save:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    /* 移除transform和box-shadow以提升性能 */
}

#editScrollModal .modal-buttons .reset-btn:hover {
    border-color: #FFD700 !important;
}

/* 版权信息编辑弹窗按钮hover效果 */
#editCopyrightModal .modal-buttons .cancel:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
}

#editCopyrightModal .modal-buttons .save:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.5) !important;
}

/* 网页背景和联系人链接编辑弹窗按钮hover效果 */
#editContactModal .modal-buttons .cancel:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
}

#editContactModal .modal-buttons .save:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.5) !important;
}

#editContactModal .modal-buttons .reset-btn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
}

#editContactModal .modal-buttons #clearBackgroundBtn:hover {
    border-color: #FFD700 !important;
}

/* 加载数据界面按钮hover效果 */
#selectInstanceModal .cancel:hover,
#selectInstanceModal #cancelSelectBtn:hover,
#selectInstanceModal .instance-modal-buttons .cancel:hover,
#selectInstanceModal .instance-modal-buttons #cancelSelectBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

#selectInstanceModal .reset-btn:hover,
#selectInstanceModal #restoreDefaultBtn:hover,
#selectInstanceModal .instance-modal-buttons .reset-btn:hover,
#selectInstanceModal .instance-modal-buttons #restoreDefaultBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* 所有恢复默认按钮hover效果 - 向上浮起2px */
.modal-buttons .reset-btn:hover,
#editSectionModal .modal-buttons .reset-btn:hover,
#editLogoModal .modal-buttons .reset-btn:hover,
#editScrollModal .modal-buttons .reset-btn:hover,
#editCopyrightModal .modal-buttons .reset-btn:hover,
#editContactModal .modal-buttons .reset-btn:hover {
    /* 移除transform以提升性能 */
    border-color: #FFD700 !important;
}


.modal-buttons button {
    padding: 8px 15px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

/* 确保加载数据界面的按钮不受通用规则影响 */
#selectInstanceModalButtons button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* 确保实例删除按钮不影响底部按钮 */
#selectInstanceModal .instance-delete-btn {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}

.modal-buttons .save {
    background: #1a1a1a;
    color: #FFD700;
    border: 2px solid #FFD700;
}

.modal-buttons .reset-default {
    background: #1a1a1a;
    color: #FFD700;
    border: 2px solid #FFD700;
}

.modal-buttons .cancel {
    background: #1a1a1a;
    color: #FFD700;
    border: 2px solid #FFD700;
}

#importLegacyModal .modal-buttons button {
    transition: all 0.25s ease;
}

#importLegacyModal .modal-buttons button:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.35);
}

#importLegacyModal input[type="file"] {
    width: 70% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* 导入模态框文件选择按钮往上移动 */
#importLegacyModal::file-selector-button {
    transform: translateY(-2px) !important;
}

/* 导入模态框文件输入框文字往上移动 */
#importLegacyModal input[type="file"] {
    transform: translateY(-2px) !important;
}

/* 移动端禁止导入数据按钮的悬停效果和上浮 */
@media (max-width: 768px) {
    #importLegacyBtn:hover {
        background: inherit !important;
        color: inherit !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* 禁止导入说明文字换行并居中 */
    #importLegacyModal p {
        white-space: nowrap !important;
        text-align: center !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100% !important;
        left: calc(50% - 6px) !important;
        transform: translateX(-50%) translateY(-8px) !important;
        position: relative !important;
    }
}

/* 针对不同浏览器的文件选择按钮 */
#importLegacyModal input[type="file"]::-webkit-file-upload-button {
    transform: translateY(-2px) !important;
    margin-top: -2px !important;
    position: relative !important;
    top: -2px !important;
}

#importLegacyModal input[type="file"]::-moz-file-upload-button {
    transform: translateY(-2px) !important;
    margin-top: -2px !important;
    position: relative !important;
    top: -2px !important;
}

#cancelAddCardCountBtn {
    font-weight: 600 !important;
    transform: translateX(-20px) !important;
}

.delete-btn {
    background: #1a1a1a !important;
    color: #00FF00 !important;
    border: 2px solid #00FF00 !important;
}

.reset-btn {
    background: #1a1a1a !important;
    color: #00FF00 !important;
    border: 2px solid #00FF00 !important;
}

.reset-btn:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
}

/* 确保实例删除按钮不影响底部按钮 */
#selectInstanceModal .instance-delete-btn {
    margin-left: 0 !important;
    margin-right: 5px !important;
    flex: 0 0 auto !important;
}

/* 确保按钮样式 */
#selectInstanceModalButtons #restoreDefaultBtn,
#selectInstanceModalButtons #cancelSelectBtn {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* 图片预览样式 */
.image-preview-container {
    width: 221px !important;
    height: 221px !important;
    border: 2px solid #FFD700 !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 7px auto 7px auto !important;
    overflow: hidden !important;
    position: relative !important;
    background: rgba(30, 30, 30, 0.5) !important;
    align-self: center !important;
}

/* 编辑项目预览框上方距离 */
#editCardModal #imagePreviewContainer {
    margin-top: 5px !important;
    margin-bottom: 7px !important;
    transform: translateY(-6px) !important;
}

/* Logo预览框上移 */
#logoPreviewContainer {
    margin-top: -5px !important;
    transform: translateY(-7px) !important;
}

/* Logo预览框高度减少一倍 */
#editLogoModal #logoPreviewContainer {
    height: 85px !important;
}

/* 默认项目预览框 - 正方形 */
#defaultIconPreviewContainer {
    width: 200px !important;
    height: 200px !important;
    margin: -5px auto 15px auto !important;
    transform: translateY(-5px) !important;
    aspect-ratio: 1/1 !important;
}

/* 默认项目图标预览框圆角增强 */
#editDefaultIconModal #defaultIconPreviewContainer {
    border-radius: 8px !important;
    overflow: hidden !important;
}
#editDefaultIconModal #defaultIconPreviewContainer .image-preview {
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* 背景图片预览框 - 宽度100%，高度增加30% */
#bgImagePreviewContainer {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    margin-top: 15px !important;
    transform: translateY(0) !important;
    max-height: calc(100vw * 9 / 16 * 1.3) !important;
}

/* 网页背景和联系人链接编辑界面 - 本地和网络图片输入框下移7px并统一高度 */
#editContactModal #bgImageUpload,
#editContactModal #bgImageUrlInput {
    margin-top: 17px !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

/* 网页背景和联系人链接编辑界面 - html动画和联系链接输入框统一高度并纵向居中 */
#editContactModal #bgWebpageUrlInput,
#editContactModal #contactLinkInput {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
    margin-top: 10px !important;
}

/* 确保本地图片输入框默认隐藏，只在需要时通过JavaScript显示 */
#editContactModal #bgImageUpload {
    display: none !important;
    padding: 8px 10px !important;
    line-height: 24px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* file类型input的文字部分样式调整 - 让"选择文件"按钮文字垂直居中 */
#editContactModal #bgImageUpload::file-selector-button {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    transform: translateY(-2px) !important;
}

.image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-preview-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.remove-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 10;
    display: none;
}

.image-preview-container.has-image .remove-preview-btn {
    display: flex;
}

/* 导出模式下隐藏拖拽相关的视觉效果 */
body.export-mode .nav-card-container {
    cursor: default !important;
}

body.export-mode .nav-card-container[draggable] {
    cursor: default !important;
}

.copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    width: 100%;
    margin-top: 12px;
    padding-bottom: 25px !important;  /* 底部留15px间距 */
    margin-bottom: 0 !important;  /* 版权文字下方无空白 */
    font-size: var(--copyright-size);
    font-weight: 700;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
}

@media (max-width: 768px) {
    .copyright {
        font-size: calc(var(--copyright-size) * 0.7);
        padding: 0 36px;
    }

    #copyrightText {
        white-space: nowrap !important;
        max-width: calc(100% - 40px);
    }
    
    .edit-copyright-btn {
        margin-left: 2px !important;
    }
}

/* 版权文字渐变色支持 */
#copyrightText {
    display: inline-block !important;
    line-height: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    /* 基础样式，会被内联样式覆盖 */
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    /* 不设置默认颜色，让内联样式控制 */
    /* color 和 -webkit-text-fill-color 由内联样式控制 */
    /* 确保文字可见 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 版权编辑按钮 */
.edit-copyright-btn {
    position: relative;
    background: transparent;
    /* 改为透明 */
    color: white;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    z-index: 1;
    box-shadow: none !important;
    margin-left: 2px;
    vertical-align: middle !important;
    flex-shrink: 0;
    padding: 0;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0);
}

@media (min-width: 769px) {
    .edit-copyright-btn {
        transform: translateY(1px);
    }
}

.edit-copyright-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* 主容器样式 */
.container {
    min-height: 0;
}

/* 文字大小控制容器 */
.text-size-container {
    margin-top: 15px;
}

.text-size-value {
    color: white;
    text-align: center;
    margin-top: 5px;
    font-size: 0.85rem;
}

/* 版权颜色预览框 - 圆形（现代设计） */
#colorPreview {
    width: 60px;
    height: 60px;
    border: 2px solid #FFD700;
    border-radius: 50%;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#colorPreview:hover {
    border-color: #FFA500;
}

/* 背景颜色预览框 - 圆形（现代设计） */
#bgColorPreview {
    width: 60px;
    height: 60px;
    border: 2px solid #FFD700;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: border-color 0.2s ease;
}

#bgColorPreview:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 编辑版权信息界面 - 颜色预览框和文字颜色标签横向居中 */
#editCopyrightModal .copyright-color-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#editCopyrightModal .copyright-color-container label {
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    width: 100% !important;
    height: auto !important;
}

/* 特别针对"颜色类型"标签 */
#editCopyrightModal .copyright-color-container > label[for="copyrightColorType"],
#editCopyrightModal label[for="copyrightColorType"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    height: auto !important;
    vertical-align: middle !important;
    margin-top: -10px !important;
    transform: translateY(-7px) !important;
    position: relative !important;
}

/* 确保版权编辑弹窗中的颜色类型按钮横向显示 */
#editCopyrightModal .icon-upload-options {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 渐变色下拉列表暗黑主题样式 */
#copyrightGradientSelect {
    background-color: #1a1a1a !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #FFD700 !important;
    outline: none !important;
    text-align: center !important;
    text-align-last: center !important;
    padding: 8px 0 !important;
    direction: ltr !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#copyrightGradientSelect:focus {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#copyrightGradientSelect:active {
    border: 2px solid #FFD700 !important;
    outline: none !important;
}

#copyrightGradientSelect option {
    background-color: #1a1a1a !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-align-last: center !important;
}

#editCopyrightModal .icon-upload-options label {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
}

/* 视频提示文字纵向居中并向上移动 */
.video-tip-text {
    line-height: 1.5 !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    color: #00FF00 !important;
}

#editContactModal .video-tip-text {
    margin-top: 47px !important;
    transform: translateY(10px) !important;
    height: auto !important;
    min-height: 30px !important;
    max-height: 60px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.04rem !important;
}

/* 图标上传模态框样式 */
.icon-upload-options {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
    margin-bottom: 15px;
    align-items: stretch;
}

.icon-upload-choice,
.icon-option-wrapper {
    display: flex;
    align-items: center;
    flex: 1 1 0;
}

.icon-upload-choice input[type="radio"] {
    display: none;
}

.icon-upload-choice label,
.icon-option-btn {
    width: 100%;
    padding: 10px 0;
    border: 2px solid #FFD700;
    border-radius: 0;
    background: transparent;
    color: #FFD700;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.icon-upload-choice input[type="radio"]:checked+label {
    color: #00FFAA;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35);
}

.icon-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
}

.icon-option-btn:hover,
.icon-option-btn:focus-visible {
    color: #00FFAA;
}

.icon-option-btn i {
    font-size: 1rem;
}

.card-sort-modal-content {
    max-width: 360px;
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.card-sort-hint {
    color: #FFD700;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.card-sort-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.card-sort-middle-row {
    display: flex;
    gap: 20px;
}

.card-sort-btn {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 2px solid #FFD700;
    background: rgba(0, 0, 0, 0.4);
    color: #FFD700;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}

.card-sort-btn:active {
    transform: scale(0.92);
    background: #FFD700;
    color: #000;
}

.card-sort-info {
    color: #00FF88;
    margin-bottom: 12px;
    font-weight: 600;
}

#cardSortModal .modal-buttons .cancel {
    background: transparent !important;
    border: 2px solid #FFD700;
    color: #FFD700;
    box-shadow: none !important;
}

@media (max-width: 600px) {
    .icon-upload-options {
        display: flex;
        flex-wrap: nowrap;
    }
    .card-sort-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

/* 提升选中态优先级：在具体弹窗内保持选中后文字为黑色 */
#editLogoModal .icon-upload-options input[type="radio"]:checked+label,
#editDefaultIconModal .icon-upload-options input[type="radio"]:checked+label,
#editContactModal .icon-upload-options input[type="radio"]:checked+label {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    border-color: #FFD700 !important;
}

/* 网页背景和联系方式界面标签按钮悬停效果 */
#editContactModal .icon-upload-options label:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    border-color: #FFD700 !important;
}

/* 网页背景和联系人链接编辑界面 - 按钮组上移并纵向居中 */
#editContactModal .icon-upload-options {
    margin-top: -10px !important;
    transform: translateY(-5px) !important;
    align-items: center !important;
    display: flex !important;
}

/* 电脑端减少按钮宽度并增加间距 */
@media (min-width: 769px) {
    #editContactModal .icon-upload-options {
        gap: 8px !important;
    }
    #editContactModal .icon-upload-options label {
        flex: 0.85 !important;
    }
}

/* 手机端缩小标签按钮5% */
@media (max-width: 768px) {
    #editContactModal .icon-upload-options label {
        transform: scale(0.95) !important;
        font-size: 0.65rem !important;
        padding: 3px 1px !important;
    }
}

/* 编辑Logo样式界面 - 按钮组上移并纵向居中 */
#editLogoModal .icon-upload-options {
    margin-top: -2px !important;
    transform: translateY(-1px) !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
}

#editLogoModal .icon-upload-options input[type="radio"] {
    display: none !important;
}

#editLogoModal .icon-upload-options label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFD700 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    flex: 0 0 28% !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
#editLogoModal .icon-upload-options label:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    border-color: #FFD700 !important;
}

/* 编辑默认项目图标界面 - 按钮组上移并纵向居中 */
#editDefaultIconModal .icon-upload-options {
    margin-top: -2px !important;
    transform: translateY(-1px) !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
}

#editDefaultIconModal .icon-upload-options input[type="radio"] {
    display: none !important;
}

#editDefaultIconModal .icon-upload-options label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFD700 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    flex: 0 0 28% !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    padding-left: 18px !important;
    padding-right: 14px !important;
}
#editDefaultIconModal .icon-upload-options label:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    border-color: #FFD700 !important;
}

#editContactModal .icon-upload-options label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-align: center !important;
    text-align-last: center !important;
}

/* 网页背景和联系人链接界面：视频提示文字横纵向居中 */
#editContactModal .video-tip-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 48px !important;
    min-height: 32px !important;
    line-height: 1.2 !important;
}

/* 统一覆盖浏览器自动填充(autofill)导致的白底问题，保持深色主题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill:active,
select:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
    box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
    border-color: #FFD700 !important;
    transition: background-color 9999s ease-out, color 9999s ease-out !important;
    transition-delay: 9999s !important;
}
/* 网页背景和联系人链接编辑界面 - 横屏视频和竖屏视频标签横向纵向居中 */
#editContactModal #bgVideoUploadContainer > div:first-child > div > label:first-of-type {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -10px !important;
    transform: translateY(-13px) !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* 网页背景和联系人链接编辑界面 - 竖屏视频标签也纵向居中 */
#editContactModal #bgVideoUploadContainer > div:first-child > div:last-child > label:first-of-type {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -10px !important;
    transform: translateY(-13px) !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* 导出按钮样式 */
.export-container {
    text-align: center;
    margin: 0 !important;
    /* 移除所有边距，避免影响按钮对齐 */
    padding: 0 !important;
    /* 移除内边距 */
    display: flex;
    gap: 15px;
    align-items: center;
    /* 确保按钮垂直对齐 */
    align-self: center;
    /* 确保容器本身也与其他元素对齐 */
}

/* 添加项目数量选择按钮样式 */
.count-option {
    color: #FFD700 !important;
    border: 3px solid #FFD700 !important;
    /* 将虚线边框(dashed)改为实线边框(solid)并使用金色 */
    padding: 15px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 80px;
    background: #000000 !important
        /* 添加透明背景 */
}


.count-option:hover {
    background: #8D07FA !important;
    /* 鼠标选择项目数量的背景色 */
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

/* 覆盖：数量按钮使用与 reset-btn 一致的绿色方案 */
.count-option.reset-btn {
    background: #1a1a1a !important;
    color: #00FF00 !important;
    border-color: #FFD700 !important;
}
.count-option.reset-btn:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
}

/* 指定"选择添加项目数量"弹窗的取消按钮为金色字体 */
#addCardCountModal .modal-buttons #cancelAddCardCountBtn {
    color: #FFD700 !important;
    border: 3px solid #FFD700 !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    border-radius: 8px !important;
}
#addCardCountModal .modal-buttons #cancelAddCardCountBtn:hover {
    color: #1a1a1a !important;
    background: #00FF00 !important;
    border-color: #FFD700 !important;
    border-width: 3px !important;
}

/* 添加导航按钮：暗黑色背景 + 绿色字体 */
#addCardCountModal .modal-buttons #addSectionBtn {
    background: #1a1a1a !important;
    color: #00FF00 !important;
    border: 2px solid #00FF00 !important;
}

/* 添加导航按钮悬停效果：绿色背景 + 黑色文字 */
#addCardCountModal .modal-buttons #addSectionBtn:hover {
    background: #00FF00 !important;
    color: #1a1a1a !important;
    border-color: #00FF00 !important;
}

/* 统一"编辑导航标题"弹窗按钮（除恢复默认）为金色边框+绿色悬停方案 */
#editSectionModal .modal-buttons button:not(#resetSectionDefaultsBtn) {
    color: #FFD700 !important;
    border: 2px solid #FFD700 !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
}
#editSectionModal .modal-buttons button:not(#resetSectionDefaultsBtn):hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

#editSectionModal .modal-buttons #resetSectionDefaultsBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* 编辑导航标题：为"恢复默认"按钮增加圆角 */
#editSectionModal .modal-buttons #resetSectionDefaultsBtn {
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
}

/* 编辑导航标题：统一按钮内文字居中 */
#editSectionModal .modal-buttons button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    height: auto !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

/* 修复编辑导航标题模态框按钮间距（并居中显示4个按钮） */
#editSectionModal .modal-buttons {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 编辑默认项目图标：统一按钮风格与居中（除恢复默认外） */
#editDefaultIconModal .modal-buttons button:not(#resetDefaultIconBtn) {
    color: #FFD700 !important;
    border: 2px solid #FFD700 !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}
#editDefaultIconModal .modal-buttons button:not(#resetDefaultIconBtn):hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}
/* 编辑默认项目图标：为"恢复默认"按钮增加圆角并居中 */
#editDefaultIconModal .modal-buttons #resetDefaultIconBtn {
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}
#editDefaultIconModal .modal-buttons #resetDefaultIconBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}
/* 编辑默认项目图标：统一三个按钮在按钮内横纵向居中 */
#editDefaultIconModal .modal-buttons button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 36px !important;
    vertical-align: middle !important;
}

/* 选择添加项目数量：按钮横纵向居中 */
#addCardCountModal .modal-buttons button,
#addCardCountModal .count-options .count-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

#addCardCountModal .modal-buttons button,
#addCardCountModal .count-options .count-option {
    font-weight: 500 !important;
}

/* 保持按钮文本完美居中，移除向下偏移 */
.count-options {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0 20px 0;
    flex-wrap: wrap;
    gap: 10px;
    transform: translateY(-5px);
}

/* 项目颜色类 - 优化：只让图标周围的边框区域变色，提升性能 */
/* 使用内阴影创建边框效果，只让 padding 区域（图标周围的边框）变色 */
/* padding 6px，内阴影 7px，稍微大于 padding，确保完全覆盖图标周围的空白区域 */
:root.color-0 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-0) !important;
}

:root.color-1 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-1) !important;
}

:root.color-2 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-2) !important;
}

:root.color-3 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-3) !important;
}

:root.color-4 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-4) !important;
}

:root.color-5 .nav-button-content {
    box-shadow: inset 0 0 0 7px var(--color-5) !important;
}

/* 添加项目按钮也应用相同的边框变色效果 */
:root.color-0 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-0) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-0 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

:root.color-1 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-1) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-1 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

:root.color-2 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-2) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-2 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

:root.color-3 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-3) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-3 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

:root.color-4 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-4) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-4 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

:root.color-5 .nav-button.add-card-btn .nav-button-content {
    box-shadow: inset 0 0 0 5px var(--color-5) !important;
    background: transparent !important;
    /* 移除红色背景 */
}

:root.color-5 .nav-button.add-card-btn .nav-button-content::before {
    background: transparent !important;
    /* 去掉红色半透明背景 */
}

/* 确保 .nav-button 的背景色永远不变，只通过内阴影实现边框变色 */
:root.color-0 .nav-button,
:root.color-1 .nav-button,
:root.color-2 .nav-button,
:root.color-3 .nav-button,
:root.color-4 .nav-button,
:root.color-5 .nav-button {
    background: rgba(10, 10, 10, 0.6) !important;
    /* 强制保持默认背景色，不随颜色类变化 */
}

/* 恢复阴影效果，与原文件一致 */
:root.color-0 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(213, 234, 21, 0.7) !important;
}

:root.color-1 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.7) !important;
}

:root.color-2 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(21, 234, 85, 0.7) !important;
}

:root.color-3 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(234, 76, 37, 0.7) !important;
}

:root.color-4 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(19, 199, 219, 0.7) !important;
}

:root.color-5 .nav-button {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(234, 37, 234, 0.7) !important;
}

/* 确保添加项目按钮的内阴影不被颜色类的外阴影覆盖 */
:root.color-0 .nav-button.add-card-btn,
:root.color-1 .nav-button.add-card-btn,
:root.color-2 .nav-button.add-card-btn,
:root.color-3 .nav-button.add-card-btn,
:root.color-4 .nav-button.add-card-btn,
:root.color-5 .nav-button.add-card-btn {
    box-shadow: none !important;
    /* 移除内阴影 */
    background: transparent !important;
    /* 设置为透明，去掉红色半透明背景外的黑色边框 */
}

/* 滚动容器颜色类 */
:root:not([class*="scroll-color-"]) .scroll-container {
    border-color: var(--color-0);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(213, 234, 21, 0.7);
}

:root.scroll-color-0 .scroll-container {
    border-color: var(--color-0);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(213, 234, 21, 0.7);
}

:root.scroll-color-1 .scroll-container {
    border-color: var(--color-1);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.7);
}

:root.scroll-color-2 .scroll-container {
    border-color: var(--color-2);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(21, 234, 85, 0.7);
}

:root.scroll-color-3 .scroll-container {
    border-color: var(--color-3);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(234, 76, 37, 0.7);
}

:root.scroll-color-4 .scroll-container {
    border-color: var(--color-4);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(19, 199, 219, 0.7);
}

:root.scroll-color-5 .scroll-container {
    border-color: var(--color-5);
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(234, 37, 234, 0.7);
}

/* html动画删除按钮：垃圾桶图标调整 */
.delete-webpage-bg-btn {
    position: absolute;
    top: 100px;
    /* 视频动画删除按钮调整 */
    right: 15px;
    /* 视频动画删除按钮调整 */
    background: transparent;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.delete-webpage-bg-btn:hover {
    background: transparent;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .nav-buttons-grid {
        grid-template-columns: repeat(var(--mobile-cards-per-row, 3), 1fr);
        /* 手机上每排显示项目数量 - 使用CSS变量 */
    }
}

/* 手机端样式 */
@media (max-width: 768px) {
    .nav-section-title {
        font-size: clamp(1.4rem, 3vw, 1.6rem) !important;  /* 直接影响手机上导航字体大小 */
  
    }

    .nav-card-container .nav-card-text,
    .nav-card-container > .nav-card-text {
        font-size: clamp(1.0rem, 2.5vw, 1.2rem) !important;  /* 直接影响手机上项目字体大小 */

    }

    .nav-button-content {
        padding: 5px;
        /* 直接影响手机上的项目边框大小 */
        box-shadow: inset 0 0 0 6px var(--color-0);
        /* 手机端默认使用第一个颜色，避免显示黑色边框 */
    }

    /* 手机上边框变色区域：padding 5px，内阴影 6px，稍微大于 padding，确保完全覆盖 */
    :root.color-0 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-0) !important;
    }

    :root.color-1 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-1) !important;
    }

    :root.color-2 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-2) !important;
    }

    :root.color-3 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-3) !important;
    }

    :root.color-4 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-4) !important;
    }

    :root.color-5 .nav-button-content {
        box-shadow: inset 0 0 0 6px var(--color-5) !important;
    }

    /* 手机端添加项目按钮也使用相同的设置 */
    .nav-button.add-card-btn .nav-button-content {
        padding: 5px !important;
        /* 覆盖桌面端的 6px，使用手机端的 5px */
        box-shadow: inset 0 0 0 5px rgba(10, 10, 10, 0.6) !important;
        /* 手机端默认内阴影 */
        background: transparent !important;
        /* 移除红色背景 */
    }

    /* 手机端红色半透明背景，只显示在 padding 区域 */
    .nav-button.add-card-btn .nav-button-content::before {
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
    }

    /* 手机端添加项目按钮的颜色类内阴影 */
    :root.color-0 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-0) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-0 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    :root.color-1 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-1) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-1 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    :root.color-2 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-2) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-2 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    :root.color-3 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-3) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-3 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    :root.color-4 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-4) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-4 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    :root.color-5 .nav-button.add-card-btn .nav-button-content {
        box-shadow: inset 0 0 0 5px var(--color-5) !important;
        background: transparent !important;
        /* 移除红色背景 */
    }

    :root.color-5 .nav-button.add-card-btn .nav-button-content::before {
        background: transparent !important;
        /* 去掉红色半透明背景 */
    }

    .counter {
        font-size: 1.2rem !important;
        /* 手机端固定浏览量字号为 1.2rem，覆盖导出时的内联样式 */
        padding: 0 5px;
    }

    .contact-text {
        font-size: 1.2rem !important;
        /* 手机端固定联系我们字号为 1.2rem，覆盖导出时的内联样式 */
    }

    /* 手机端隐藏浏览量/联系我们文字大小控制 */
    .counter-contact-text-size-container {
        display: none !important;
    }

    /* 手机端底部操作按钮区域 - 确保4个按钮显示为一排，减少间距 */
    .nav-actions-bottom {
        flex-wrap: nowrap !important;
        /* 禁止换行，确保按钮在一排显示 */
        gap: 3px !important;
        /* 按钮间距设置为3px */
        justify-content: center !important;
        padding: 0 5px !important;
        /* 添加左右内边距，避免按钮贴边 */
    }

    /* 手机端导出容器 - 设置间距为3px，确保按钮紧密排列 */
    .nav-actions-bottom .export-container {
        gap: 3px !important;
        /* 设置export-container内部的按钮间距为3px */
        display: flex !important;
        flex-wrap: nowrap !important;
        /* 确保内部按钮不换行 */
    }

    /* 手机端底部按钮 - 适当缩小字体和padding以适应一排显示 */
    .nav-actions-bottom .add-section-btn,
    .nav-actions-bottom #addSectionBtn,
    .nav-actions-bottom #saveDataBtn,
    .nav-actions-bottom #loadDataBtn {
        font-size: 0.72rem !important;
        /* 进一步减小字体 */
        padding: 6px 4px !important;
        /* 进一步减少左右内边距 */
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        line-height: 1.1 !important;
        flex: 1 1 0 !important;
    }

    /* 手机端特定4个按钮向下移动1px */
    .nav-actions-bottom #sharePageBtn,
    .nav-actions-bottom #exportJsonBtn,
    .nav-actions-bottom #importLegacyBtn,
    .nav-actions-bottom #clearDataBtn {
        font-size: 0.72rem !important;
        padding: 6px 4px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        line-height: 1.1 !important;
        flex: 1 1 0 !important;
        transform: none !important;
        /* 让按钮平均分配空间 */
        min-width: 0 !important;
        /* 允许按钮缩小 */
        white-space: nowrap !important;
        /* 确保按钮文字横向显示，不换行 */
        overflow: hidden !important;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis !important;
        /* 如果文字太长，显示省略号 */
    }

    .nav-actions-bottom #sharePageBtn:active,
    .nav-actions-bottom #exportJsonBtn:active,
    .nav-actions-bottom #importLegacyBtn:active,
    .nav-actions-bottom #clearDataBtn:active {
        transform: none !important;
        border-color: #FFD700 !important;
        box-shadow: inherit !important;
    }

    .nav-actions-bottom .button-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nav-actions-bottom #sharePageBtn .button-text,
    .nav-actions-bottom #exportJsonBtn .button-text,
    .nav-actions-bottom #importLegacyBtn .button-text,
    .nav-actions-bottom #clearDataBtn .button-text {
        display: none !important;
    }

    .nav-actions-bottom #sharePageBtn > div,
    .nav-actions-bottom #exportJsonBtn > div,
    .nav-actions-bottom #importLegacyBtn > div,
    .nav-actions-bottom #clearDataBtn > div {
        display: none !important;
    }

    .nav-actions-bottom #sharePageBtn,
    .nav-actions-bottom #exportJsonBtn,
    .nav-actions-bottom #importLegacyBtn,
    .nav-actions-bottom #clearDataBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        position: relative;
    }

    .nav-actions-bottom #sharePageBtn::after,
    .nav-actions-bottom #exportJsonBtn::after,
    .nav-actions-bottom #importLegacyBtn::after,
    .nav-actions-bottom #clearDataBtn::after {
        display: inline-block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        line-height: 1;
        font-size: 1.5em;
    }

    .nav-actions-bottom #sharePageBtn::after {
        content: '分享';
    }

    .nav-actions-bottom #exportJsonBtn::after {
        content: '导出';
    }

    .nav-actions-bottom #importLegacyBtn::after {
        content: '导入';
    }

    .nav-actions-bottom #clearDataBtn::after {
        content: '重置';
    }

    /* 确保按钮文字不换行 */
    .nav-actions-bottom .add-section-btn i,
    .nav-actions-bottom #addSectionBtn i,
    .nav-actions-bottom #saveDataBtn i,
    .nav-actions-bottom #clearDataBtn i,
    .nav-actions-bottom #loadDataBtn i {
        margin-right: 2px !important;
        /* 进一步减少图标和文字之间的间距 */
        flex-shrink: 0 !important;
        /* 防止图标被压缩 */
    }

    /* 手机上隐藏底部四个按钮的图标，仅保留文字 */
    .nav-actions-bottom #addSectionBtn i,
    .nav-actions-bottom #saveDataBtn i,
    .nav-actions-bottom #clearDataBtn i,
    .nav-actions-bottom #loadDataBtn i {
        display: none !important;
    }

    /* 同时隐藏当前底部显示的四个操作按钮图标（分享/导出/导入/重置），以及任何 SVG 图标 */
    .nav-actions-bottom #sharePageBtn i,
    .nav-actions-bottom #exportJsonBtn i,
    .nav-actions-bottom #importLegacyBtn i,
    .nav-actions-bottom #clearDataBtn i,
    .nav-actions-bottom button i,
    .nav-actions-bottom button svg,
    .nav-actions-bottom button .fa,
    .nav-actions-bottom button .fas,
    .nav-actions-bottom button .far {
        display: none !important;
    }

    /* 兜底：同时将图标尺寸压缩为0，隐藏伪元素，避免其他样式干扰 */
    .nav-actions-bottom button i,
    .nav-actions-bottom button svg {
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
    }
    .nav-actions-bottom button i::before,
    .nav-actions-bottom button .fa::before,
    .nav-actions-bottom button .fas::before,
    .nav-actions-bottom button .far::before {
        content: '' !important;
        display: none !important;
    }

    /* 中间三个按钮的图标贴紧文字 */
    .nav-actions-bottom #sharePageBtn i,
    .nav-actions-bottom #exportJsonBtn i,
    .nav-actions-bottom #importLegacyBtn i {
        margin-right: 0 !important;
    }

    /* 手机端编辑滚动文字模态框 - 高度降低5%并居中显示，往上移动 */
    #editScrollModal .modal-content {
        transform: scaleY(0.95) translateY(-10px) !important;
        /* 高度降低5%（保留95%）并往上移动10px */
        transform-origin: center center !important;
        /* 从中心缩放，确保居中 */
        max-height: 95vh !important;
        /* 限制最大高度为视口高度的95% */
        margin: auto !important;
        /* 确保水平居中 */
        align-self: center !important;
        /* 确保垂直居中 */
    }

    /* 手机端编辑logo界面模态框 - 高度降低10%（再降低5%） */
    #editLogoModal .modal-content {
        transform: scaleY(0.9) !important;
        /* 高度降低10%（保留90%） */
        transform-origin: center center !important;
        /* 从中心缩放，确保居中 */
    }

    /* 手机端加载数据界面 - 实例文本显示优化 */
    #selectInstanceModal .instance-item {
        padding: 10px 8px !important;
        gap: 8px !important;
    }

    #selectInstanceModal .instance-text {
        margin-left: 36px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.95rem !important;
        display: block !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #selectInstanceModal .instance-delete-btn {
        flex-shrink: 0 !important;
        padding: 5px 8px !important;
        font-size: 14px !important;
        min-width: 32px !important;
    }


}

/* 移动端触摸优化 */
.nav-button,
.scroll-container,
.contact-link {
    touch-action: manipulation;
}


/* 震动动画 - 不缩小，只震动 */
@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-3px, -2px) rotate(-1deg); }
    20% { transform: translate(3px, 2px) rotate(1deg); }
    30% { transform: translate(-2px, 3px) rotate(-1deg); }
    40% { transform: translate(2px, -3px) rotate(1deg); }
    50% { transform: translate(-3px, 2px) rotate(-1deg); }
    60% { transform: translate(3px, -2px) rotate(1deg); }
    70% { transform: translate(-2px, -3px) rotate(-1deg); }
    80% { transform: translate(2px, 3px) rotate(1deg); }
    90% { transform: translate(-3px, -2px) rotate(-1deg); }
}

/* 拖拽时的项目样式 */
.nav-card-container.dragging {
    opacity: 0.4 !important;
    transition: none !important;
    animation: shake 0.9s infinite !important;
    will-change: transform !important;
}

/* 滑块样式 - 金色主题 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    background: transparent;
    border-radius: 4px;
    outline: none;
    margin: 10px 0;
    /* 修复滑块交互问题 */
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1000 !important;
    /* 增加点击区域 */
    padding: 15px 0 !important;
    margin: -5px 0 !important;
    /* 删除边框 */
    border: none;
}

/* Webkit浏览器（Chrome, Safari, Edge）滑块轨道 */
input[type="range"]::-webkit-slider-track {
    width: 100%;
    height: 7px;
    background: transparent;
    border-radius: 4px;
    /* 删除边框 */
    border: none;
}

/* Webkit浏览器滑块进度填充 - 只有滑过的部分显示金色 */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 7px;
    /* 滑块滑过的金色区域：从0到进度值是金色，进度值之后是透明 */
    background: linear-gradient(to right, 
        #FFD700 0%, 
        #FFD700 var(--slider-progress, 0%), 
        rgba(0, 0, 0, 0) var(--slider-progress, 0%), 
        rgba(0, 0, 0, 0) 100%);
    border-radius: 4px;
    /* 删除边框 */
    border: none;
}

/* Webkit浏览器滑块滑块 */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #FFD700;
    border-radius: 50%;
    /* 删除边框 */
    border: none;
    cursor: grab !important;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    margin-top: -6px;
    /*滑块的垂直位置调整 */
    /* 修复滑块交互问题 */
    pointer-events: auto !important;
    z-index: 1001 !important;
    /* 移除transform和box-shadow过渡以提升性能 */
    transition: border-color 0.2s ease !important;
}

/* Firefox浏览器滑块轨道 - 未滑过的部分完全透明 */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 7px;
    /* 未滑过的部分完全透明 */
    background: transparent;
    border-radius: 4px;
    /* 删除边框 */
    border: none;
}

/* Firefox浏览器滑块滑过区域 - 只有滑过的部分显示金色 */
input[type="range"]::-moz-range-progress {
    background: #FFD700;
    height: 7px;
    border-radius: 4px;
    /* 删除边框 */
    border: none;
}

/* Firefox浏览器滑块滑块 */
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #FFD700;
    border-radius: 50%;
    /* 删除边框 */
    border: none;
    cursor: grab !important;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    /* 修复滑块交互问题 */
    pointer-events: auto !important;
    z-index: 1001 !important;
    /* 移除transform和box-shadow过渡以提升性能 */
    transition: border-color 0.2s ease !important;
}

/* 滑块悬停效果 */
input[type="range"]:hover::-webkit-slider-thumb {
    background: #FFED4E;
    /* 删除边框颜色 */
    border: none;
    transform: scale(1.1);
    cursor: grab !important;
}

input[type="range"]:hover::-moz-range-thumb {
    background: #FFED4E;
    /* 删除边框颜色 */
    border: none;
    transform: scale(1.1);
    cursor: grab !important;
}

/* 滑块激活效果 */
input[type="range"]:active::-webkit-slider-thumb {
    background: #FFC400;
    /* 删除边框颜色 */
    border: none;
    transform: scale(1.2);
    cursor: grabbing !important;
}

input[type="range"]:active::-moz-range-thumb {
    background: #FFC400;
    /* 删除边框颜色 */
    border: none;
    transform: scale(1.2);
    cursor: grabbing !important;
}

/* 背景颜色类型选择按钮样式 */
.bg-color-type-options {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    margin-top: -8px !important;
    transform: translateY(-2px) !important;
}

.bg-color-type-options input[type="radio"] {
    display: none !important;
}

.bg-color-type-options label {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    text-align: center !important;
    padding: 10px 24px !important;
    border: 2px solid #FFD700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: #1a1a1a !important;
    color: #FFD700 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.bg-color-type-options label:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3) !important;
}

.bg-color-type-options input[type="radio"]:checked + label {
    background: rgba(255, 215, 0, 0.3) !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), inset 0 0 8px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* 编辑背景颜色界面中的类型选择按钮 */
#editContactModal .bg-color-type-options {
    margin-bottom: 15px !important;
    margin-top: -8px !important;
    transform: translateY(-2px) !important;
}

/* 背景渐变色选择框样式 */
#bgColorGradientSelect {
    background-color: #1a1a1a !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    outline: none !important;
    text-align: center !important;
    text-align-last: center !important;
    padding: 8px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    direction: ltr !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-indent: 0 !important;
    /* 强制居中，即使窗口大小改变 */
    display: block !important;
    margin: 0 auto !important;
}

#bgColorGradientSelect:focus {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    outline: none !important;
}

#bgColorGradientSelect:active {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
    outline: none !important;
}

#bgColorGradientSelect:hover {
    border: 2px solid #FFD700 !important;
    border-color: #FFD700 !important;
}

#bgColorGradientSelect::-ms-expand {
    display: none;
}

/* 隐藏详情页开关旁边的文本 */
.detail-page-toggle-wrapper > span:not(.slider) {
    display: none;
}


#bgColorGradientSelect option {
    background-color: #1a1a1a !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-align-last: center !important;
    direction: ltr !important;
    padding: 8px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    /* 尝试使用伪元素来强制居中 */
    display: block !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    #bgColorGradientSelect,
    #bgColorGradientSelect option {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
}

/* 针对不同浏览器的特殊处理 */
@-moz-document url-prefix() {
    #bgColorGradientSelect option {
        text-align: center !important;
        padding-left: 0 !important;
    }
}

/* Webkit浏览器（Chrome, Safari）的特殊处理 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #bgColorGradientSelect option {
        text-align: center !important;
        text-align-last: center !important;
    }
}

/* 编辑默认项目图标界面网络图片URL输入框霓虹彩色边框 - 仅针对默认图标界面 */
#editDefaultIconModal #defaultIconUrlInput {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    padding-top: 9px !important;
}

/* 编辑默认项目图标界面网络图片URL输入框占位符文字改为黑色 */
#editDefaultIconModal #defaultIconUrlInput::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 编辑默认项目图标界面网络图片URL输入框focus状态 */
#editDefaultIconModal #defaultIconUrlInput:focus {
    outline: none !important;
}

#editDefaultIconModal input[type="file"] {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

/* 编辑默认项目图标界面输入框占位符文字改为黑色 */
#editDefaultIconModal input[type="text"]::placeholder,
#editDefaultIconModal input[type="url"]::placeholder,
#editDefaultIconModal input[type="file"]::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 编辑默认项目图标界面选择文件按钮霓虹彩色边框 */
#editDefaultIconModal .upload-trigger-btn {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    width: 100% !important;
    margin: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transform: translateY(1px) !important;
}

/* 编辑默认项目图标界面 - 强制控制元素显示状态 */
#editDefaultIconModal:has(#uploadUrl:checked) .upload-trigger-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

#editDefaultIconModal:has(#uploadUrl:checked) #defaultIconUrlInput {
    display: block !important;
    visibility: visible !important;
}

#editDefaultIconModal:has(#uploadLocal:checked) .upload-trigger-btn {
    display: flex !important;
    visibility: visible !important;
    height: 40px !important;
}

#editDefaultIconModal:has(#uploadLocal:checked) #defaultIconUrlInput {
    display: none !important;
}

/* 修复添加项目数量选择弹窗按钮间距 */
#addCardCountModal .modal-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

#addCardCountModal .modal-buttons button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* 添加导航按钮向右移动3px */
#addCardCountModal #addSectionBtn {
    position: relative !important;
    left: 3px !important;
    transform: translateX(3px) !important;
}

/* 添加导航按钮悬停效果：亮绿色背景+黑色文字 */
#addCardCountModal #addSectionBtn:hover {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #FFD700 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 添加导航按钮点击态：绿色背景+黑色文字 */
#addCardCountModal #addSectionBtn.clicked {
    background: #00FF00 !important;
    color: #000000 !important;
    border-color: #00FF00 !important;
}
}

/* 移动端：让 1/3/6/9 四个按钮在一排显示并减小间距 */
@media (max-width: 480px) {
    #addCardCountModal .count-options {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        padding: 0 4px !important;
    }

    #addCardCountModal .count-options .count-option {
        flex: 1 1 22% !important;
        max-width: 22% !important;
        min-width: 0 !important;
        padding: 8px 0 !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }
}

/* file input 按钮垂直居中 */
#editDefaultIconModal #defaultIconUpload::file-selector-button {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    transform: translateY(-2px) !important;
}

/* 编辑Logo样式界面网络图片URL输入框霓虹彩色边框 - 仅针对Logo界面 */
#editLogoModal #logoImageUrlInput {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    padding-top: 9px !important;
}

/* 编辑Logo样式界面网络图片URL输入框占位符文字改为黑色 */
#editLogoModal #logoImageUrlInput::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* 编辑Logo样式界面网络图片URL输入框focus状态 */
#editLogoModal #logoImageUrlInput:focus {
    outline: none !important;
}

#editLogoModal input[type="file"] {
    border: 2px solid transparent !important;
    background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e) !important;
    background-size: 400% 400% !important;
    background-clip: padding-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
}

/* Logo file input 按钮垂直居中 */
#editLogoModal #logoImageUpload::file-selector-button {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* 编辑项目 file input 按钮纵向居中 */
#editCardModal #editImage::file-selector-button {
    height: 100% !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}



/* 默认项目预览框 - 正方形 */
#defaultIconPreviewContainer {
    width: 200px;
    height: 200px;
    margin: -5px auto 15px auto !important;
    aspect-ratio: 1/1;
    transform: translateY(-5px) !important;
}

/* Logo预览框上移 */
#logoPreviewContainer {
    margin-top: -5px !important;
    transform: translateY(-5px) !important;
}

/* 确保上传选项和输入框区域有固定间距 */
#editDefaultIconModal .icon-upload-options {
    margin: -2px 0 10px 0 !important;
    width: 100% !important;
}

#editLogoModal .icon-upload-options {
    margin: -2px 0 10px 0 !important;
    width: 100% !important;
}

/* 输入框隐藏时不影响布局 */
#editDefaultIconModal input[style*="display: none"],
#editLogoModal input[style*="display: none"] {
    height: 40px !important;
    min-height: 40px !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
}

/* 移除之前添加的模态框内容统一高度规则（回滚布局变化） */
/* #editDefaultIconModal .modal-content,
#editLogoModal .modal-content {
    min-height: 450px !important;
    max-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
} */

/* 移除统一预览容器margin规则（如果导致变化） */
/* #editDefaultIconModal #defaultIconPreviewContainer,
#editLogoModal #logoPreviewContainer {
    margin: 0 auto 15px auto !important;
    transform: none !important;
} */

/* 移除上传选项固定间距规则（如果影响布局） */
/* #editDefaultIconModal .icon-upload-options,
#editLogoModal .icon-upload-options {
    margin: 10px 0 !important;
    width: 100% !important;
} */

/* 优化输入框隐藏处理：使用固定高度容器占位，避免布局跳动 */
#editDefaultIconModal #defaultIconUpload,
#editLogoModal #logoImageUpload,
#editLogoModal #logoImageUrlInput {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
    display: block !important; /* 始终显示，但通过JS控制visibility */
}

/* 隐藏输入时不占用空间，但保持高度占位（通过JS切换class） */
/* 注意：实际隐藏仍由JS的style.display控制，此处确保可见时一致 */
#editDefaultIconModal input[style*="display: none"],
#editLogoModal input[style*="display: none"] {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 图片相关输入框圆角与配色（文件选择与URL文本） - 排除已有霓虹边框的输入框 */
#editDefaultIconModal #defaultIconUpload,
#editLogoModal #logoImageUpload,
#editContactModal #bgImageUpload,
#editContactModal #bgImageUrlInput,
#editCardModal #editImage {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    border: 2px solid #FFD700 !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
}
#editDefaultIconModal #defaultIconUpload:focus,
#editLogoModal #logoImageUpload:focus,
#editContactModal #bgImageUpload:focus,
#editContactModal #bgImageUrlInput:focus,
#editCardModal #editImage:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15) !important;
    border-color: #FFD700 !important;
}

/* 输入隐藏类 - 保持空间但不可见 */
.input-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* 保持原始height, margin, padding 不变 */
}

/* 导出模式选择弹窗样式 */
.export-mode-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.export-mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    background: rgba(42, 42, 42, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.export-mode-option:hover {
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(42, 42, 42, 0.8);
}

.export-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.export-mode-option label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    text-align: center;
}

.option-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #FFD700;
    margin-bottom: 6px;
    text-align: center;
}

.option-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    text-align: center;
}

/* 不带Base64选项的提示文字在未选中时显示为金色 */
.export-mode-option:nth-child(2) .option-desc {
    color: #FFD700;
}

/* 带Base64选项的提示文字在未选中时显示为金色 */
.export-mode-option:nth-child(1) .option-desc {
    color: #FFD700;
}

.export-mode-option input[type="radio"]:checked + label .option-title {
    color: #00FF00;
}

.export-mode-option input[type="radio"]:checked + label {
    color: rgba(255, 255, 255, 0.9);
}

.export-mode-option input[type="radio"]:checked + .export-mode-option {
    border-color: #00FF00;
    background: rgba(0, 255, 0, 0.1);
}

/* 由于radio按钮被隐藏，我们需要通过父级类来实现选中状态 */
.export-mode-option.selected {
    border-color: #00FF00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
}

.export-mode-option.selected .option-title {
    color: #00FF00 !important;
}

.export-mode-option.selected .option-desc {
    color: #00FF00 !important;
}

.export-mode-option.selected label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.export-mode-option input[type="radio"]:checked ~ .export-mode-option {
    border-color: #00FF00;
    background: rgba(0, 255, 0, 0.1);
}

/* 移动端计数器优化 - 删除冲突设置 */

/* 导出模式选择弹窗按钮悬停效果 */
#exportModeModal .modal-buttons .cancel:hover,
#exportModeModal .modal-buttons .save:hover {
    transform: translateY(-2px);
    background: #00FF00;
    color: #000000;
    border-color: #00FF00;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.4);
    transition: all 0.3s ease;
}

/* 确保按钮有基本的边框样式以便悬停时显示 */
#exportModeModal .modal-buttons .cancel,
#exportModeModal .modal-buttons .save {
    border: 2px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    min-width: 100px;
}

/* 分享主页弹窗按钮hover效果 */
.share-modal-btn:hover,
.share-modal-btn#goToUserCenterBtn:hover,
.share-modal-btn#closePagesModal:hover {
    background: #2a2a2a !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;


/* ========== 电脑端用户名位置强制调整 - 最高优先级 ========== */
@media (min-width: 769px) {
    /* 使用多重选择器和!important确保最高优先级 */
    body .right-buttons #userNameDisplay,
    body #userInfoContainer #userNameDisplay,
    body .user-info-container #userNameDisplay,
    #userNameDisplay {
        transform: translateY(3px) !important;
        position: relative !important;
        top: 0px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    
    body .right-buttons .user-name,
    body #userInfoContainer .user-name,
    body .user-info-container .user-name,
    .user-name {
        transform: translateY(3px) !important;
        position: relative !important;
        top: 0px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    
    body .right-buttons .user-info-container,
    body #userInfoContainer,
    .user-info-container {
        transform: translateY(3px) !important;
        position: relative !important;
        top: 0px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
}