/* 深色主题现代化样式 - 项目审核系统 */

/* 全局样式重置和基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 深色主题配色方案 */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: #1e1e1e;
    --bg-hover: #2d2d2d;
    --bg-active: #3a3a3a;
    
    /* 文字颜色 */
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #808080;
    --text-accent: #667eea;
    
    /* 边框和分割线 */
    --border-primary: #333333;
    --border-secondary: #404040;
    --border-accent: #667eea;
    
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    --gradient-accent: linear-gradient(135deg, #667eea 0%, #5a6fd8 100%);
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

body {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 主容器 */
.container {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: none;
}

/* main元素样式 */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 16px); /* 减去容器的padding */
    max-height: calc(100vh - 16px);
    overflow: hidden;
    min-height: 0;
}

/* 搜索区域 */
.search-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 10002;
    gap: var(--spacing-sm);
    padding: 4px 0;
}

/* 顶部Logo区域 */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--spacing-md);
}

.header-logo-img {
    height: 40px;
    width: auto;
    max-height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* 右侧操作区域 */
.header-right-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* 系统反馈按钮（独立按钮） */
.system-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    height: 36px;
    box-sizing: border-box;
    line-height: 1;
}

.system-feedback-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.system-feedback-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-primary);
    transition: stroke 0.3s ease;
}

.system-feedback-btn:hover svg {
    stroke: var(--text-accent);
}

.system-feedback-btn .btn-text {
    display: none;
}

/* 用户信息与空间使用包装容器（包边容器） */
.user-info-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    height: 36px;
    line-height: 1;
}

.user-info-wrapper:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-md);
}

/* 右侧用户信息区域容器 */
.user-info-wrapper > .user-info-container,
.user-info-wrapper > .user-storage-progress {
    display: flex;
    align-items: center;
}

/* 右侧区域（账户信息+空间进度条） */
.user-info-wrapper > .user-info-container {
    margin-left: 0;
    margin-right: 0;
}

.user-info-wrapper > .user-storage-progress {
    margin-left: 0;
    margin-right: 0;
    border: none; /* 移除内部边框，因为外层容器已有边框 */
    background: transparent; /* 移除内部背景，因为外层容器已有背景 */
    padding: 0; /* 移除内部padding，因为外层容器已有padding */
    box-shadow: none; /* 移除内部阴影 */
}

/* 中央搜索控制区域（保留用于兼容性） */
.search-controls-center {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10003;
}

/* 左侧搜索控制区域 */
.search-controls-left {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex: 1;
    z-index: 10003;
    padding: 8px;
    background: transparent;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
    justify-content: center; /* 搜索框居中 */
    margin: 0 auto;
}

.search-controls-left:hover {
    border: none;
    box-shadow: none;
}

/* 搜索输入容器 */
.search-input-container {
    position: relative;
    display: inline-block;
    z-index: 10003;
    flex: 1;
    min-width: 0;
}

#searchInput {
    padding: 10px 16px;
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    width: 100%;
    min-width: 180px;
    max-width: 700px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-card);
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#searchInput:hover {
    border-color: var(--border-secondary);
    background: var(--bg-tertiary);
}

#searchInput:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    background: var(--bg-tertiary);
    transform: translateY(-1px);
}

#searchInput::placeholder {
    color: var(--text-muted);
}

/* 自动补全下拉列表 */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10004;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocomplete-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border-bottom: 1px solid var(--border-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    color: var(--text-primary);
}

.autocomplete-item:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--bg-hover);
    color: var(--text-accent);
    transform: translateX(4px);
    border-left: 3px solid var(--border-accent);
}

.autocomplete-item .highlight {
    background: rgba(102, 126, 234, 0.2);
    color: var(--text-accent);
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 0;
    text-shadow: none;
    outline: none;
    box-shadow: none;
}

/* 用户信息容器样式 */
.user-info-container {
    display: flex;
    align-items: center;
    z-index: 10;
    gap: var(--spacing-xs);
    order: 998; /* 在空间进度条之前 */
}

/* 用户空间进度条容器（独立显示在页面最右侧） */
.user-storage-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    max-width: 200px;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    order: 999; /* 确保在最右侧 */
    flex-shrink: 0; /* 防止被压缩 */
}

/* 空间进度条hover效果（仅在独立显示时生效） */
.search-section > .user-storage-progress:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

/* 在包装容器内的空间进度条不显示hover效果（由外层容器统一处理） */
.user-info-wrapper > .user-storage-progress:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* 空间信息文本 */
.storage-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.storage-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    line-height: 1.3;
}

/* 进度条容器 */
.storage-progress-bar-container {
    width: 100%;
}

.storage-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 进度条填充 */
.storage-progress-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* 进度条填充动画效果 */
.storage-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: progressShine 2s infinite;
}

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

.user-info-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.user-info-content:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
}

.user-info-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    line-height: 1.2;
}

/* 角色徽章样式 */
.user-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.user-role-badge .role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.user-role-badge .role-text {
    line-height: 1;
}

/* 普通用户样式 */
.user-role-badge.role-user {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.3) 100%);
    color: #5dade2;
    border: 1px solid rgba(52, 152, 219, 0.4);
    box-shadow: 0 1px 3px rgba(52, 152, 219, 0.2);
}

.user-role-badge.role-user .role-icon {
    color: #5dade2;
}

/* 管理员样式 */
.user-role-badge.role-admin {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2) 0%, rgba(243, 156, 18, 0.3) 100%);
    color: #f7dc6f;
    border: 1px solid rgba(243, 156, 18, 0.4);
    box-shadow: 0 1px 3px rgba(243, 156, 18, 0.2);
}

.user-role-badge.role-admin .role-icon {
    color: #f7dc6f;
}

/* 超级管理员样式 */
.user-role-badge.role-superadmin {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.25) 0%, rgba(231, 76, 60, 0.35) 100%);
    color: #ec7063;
    border: 1px solid rgba(231, 76, 60, 0.5);
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3), 0 0 8px rgba(231, 76, 60, 0.15);
}

.user-role-badge.role-superadmin .role-icon {
    color: #ec7063;
}

.admin-link {
    font-size: 11px;
    color: var(--text-accent);
    text-decoration: none;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-link:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.logout-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    color: var(--text-accent);
    transform: scale(1.05);
}

.logout-btn:active {
    transform: scale(0.95);
    background: var(--bg-active);
}

/* 图标按钮样式（搜索和刷新按钮） */
.icon-btn {
    padding: 10px;
    background: var(--gradient-primary);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.icon-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

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

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

/* 搜索文字按钮样式 */
.search-text-btn {
    padding: 10px 20px;
    background: var(--gradient-primary);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    height: 36px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

.search-text-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.search-text-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* 旧按钮样式已移除，改用.icon-btn */

/* 内容区域 */
.content-area {
    display: flex;
    gap: var(--spacing-lg);
    flex: 1;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    margin-top: 0;
}

.folder-list-container, .folder-content-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-primary);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    transition: all 0.3s ease;
    z-index: 1;
}

.folder-list-container:hover, .folder-content-container:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-lg);
}

.folder-list-container {
    max-width: 400px;
}

/* 文件夹列表头部容器 */
.folder-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-primary);
}

/* 文件夹选项卡容器 */
.folder-tabs-container {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--spacing-xs);
    flex-shrink: 0;
}

.folder-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.folder-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.folder-tab.active {
    background: rgba(102, 126, 234, 0.2);
    color: var(--text-primary);
    font-weight: 500;
}

.folder-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px 2px 0 0;
}

.folder-tab .tab-icon {
    font-size: 14px;
    line-height: 1;
}

.folder-tab .tab-text {
    font-size: 13px;
    line-height: 1.4;
}

.folder-list-container h2, .folder-content-container h2 {
    margin-bottom: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border-bottom: 2px solid var(--border-accent);
    padding-bottom: var(--spacing-sm);
    position: relative;
    flex-shrink: 0;
    flex: 1;
}

/* 创建项目文件夹按钮 */
.create-project-folder-btn {
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.create-project-folder-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.create-project-folder-btn:active {
    transform: scale(0.95);
}

.create-project-folder-btn svg {
    width: 18px;
    height: 18px;
}

/* 文件夹内容头部样式 */
.folder-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

.folder-content-header h2 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* 文件夹内容控制区域 */
.folder-content-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/* 显示模式切换容器 */
.view-mode-container {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 2px;
    border: 1px solid var(--border-primary);
}

/* 显示模式切换按钮 */
.view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.view-mode-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.view-mode-btn.active {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.view-mode-btn.active:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.view-mode-btn svg {
    transition: all 0.3s ease;
}

.view-mode-btn:hover svg {
    transform: scale(1.1);
}

/* 版本过滤开关容器 */
.version-filter-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: transparent;
    padding: 0;
    border: none;
    transition: all 0.3s ease;
}

.version-filter-container:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

.version-filter-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.version-filter-container:hover .version-filter-label {
    color: var(--text-accent);
}

/* 版本过滤开关样式 */
.version-filter-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.version-filter-switch input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.version-filter-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.version-filter-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.version-filter-switch input:checked + .version-filter-slider {
    background: var(--gradient-primary);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.version-filter-switch input:checked + .version-filter-slider:before {
    transform: translateX(26px);
    background: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.version-filter-switch:hover .version-filter-slider {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.version-filter-switch input:focus + .version-filter-slider {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.folder-list-container h2::after, .folder-content-container h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 1px;
}

/* 文件夹列表 */
.folder-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border-primary);
}

.folder-list li {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    margin: 2px 4px;
    color: var(--text-primary);
    position: relative;
}

.folder-list li:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--border-accent);
}

.folder-list li.active {
    background: var(--gradient-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

/* 空状态提示样式 */
.folder-list li.empty {
    border: none;
    margin: 0;
    padding: 0;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.folder-list li.empty:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
    border-left: none;
}

/* 我的项目：创建图标提示 */
.folder-list li.empty-create-hint {
    position: relative;
    flex-direction: column;
}

.folder-list li.empty-create-hint .empty-create-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
    opacity: 0.4;
    color: var(--text-secondary);
    pointer-events: none;
}

.folder-list li.empty-create-hint .empty-create-icon svg {
    width: 120px;
    height: 120px;
    stroke: var(--text-secondary);
    fill: none;
}

.folder-list li.empty-create-hint .empty-create-text {
    font-size: 14px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-top: 8px;
}

/* 外部项目：文字提示 */
.folder-list li.empty-external-hint {
    color: var(--text-muted);
    font-size: 14px;
    padding: 60px 20px;
}

/* 文件夹内容 */
.folder-content {
    flex: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-primary);
    position: relative;
    height: 100%;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--text-accent) var(--bg-tertiary);
    scroll-behavior: smooth;
}

.folder-content .placeholder {
    text-align: center;
    color: var(--text-muted);
    margin-top: 60px;
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0.8;
}

/* 缩略图视图样式 */
.folder-content.thumbnail-view {
    padding: var(--spacing-lg);
}

/* 缩略图网格容器 */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: var(--spacing-md);
    align-content: start;
}

/* 缩略图项容器 */
.thumbnail-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    min-height: 200px;
}

.thumbnail-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-accent);
}

/* 缩略图预览区域 */
.thumbnail-preview {
    width: 100%;
    height: 120px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 缩略图图片 */
.thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail-item:hover .thumbnail-preview img {
    transform: scale(1.05);
}

/* 缩略图视频预览 */
.thumbnail-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* 缩略图文件类型图标 */
.thumbnail-file-icon {
    font-size: 48px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.thumbnail-file-icon.video {
    color: #e74c3c;
}

.thumbnail-file-icon.image {
    color: #3498db;
}

.thumbnail-file-icon.folder {
    color: #f39c12;
}

/* 缩略图播放按钮覆盖层 */
.thumbnail-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.thumbnail-item:hover .thumbnail-play-overlay {
    opacity: 1;
}

/* 缩略图信息区域 */
.thumbnail-info {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 缩略图文件名 */
.thumbnail-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 缩略图文件详情 */
.thumbnail-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

/* 时间与状态同行 */
.thumbnail-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.thumbnail-size {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.thumbnail-date {
    font-size: 10px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 缩略图状态标记占位符（在时间行最右侧） */
.thumbnail-status-placeholder {
    margin-left: auto;
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* 缩略图状态标记（实心圆圈，位于时间行右侧） */
.thumbnail-status-marker {
    position: static;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    box-sizing: border-box;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.thumbnail-status-marker:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

/* 缩略图文字徽标（替代圆点） */
.thumbnail-status-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    min-width: 52px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    white-space: nowrap;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 不同状态的颜色 */
.thumbnail-status-marker[data-status="pending"] {
    background-color: #f39c12; /* 黄色 - 待审核 */
}

.thumbnail-status-marker[data-status="feedback"] {
    background-color: #e74c3c; /* 红色 - 已反馈 */
}

.thumbnail-status-marker[data-status="approved"] {
    background-color: #27ae60; /* 绿色 - 已通过 */
}

/* 向后兼容旧的类名 */
.thumbnail-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    backdrop-filter: blur(4px);
    z-index: 10;
    min-width: 50px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* 缩略图文件夹样式 */
.thumbnail-item.folder {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
}

.thumbnail-item.folder:hover {
    background: var(--bg-active);
    border-color: var(--text-accent);
}

.thumbnail-item.folder .thumbnail-preview {
    background: var(--gradient-secondary);
}

/* 缩略图加载状态 */
.thumbnail-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-primary);
    border-top: 2px solid var(--text-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .folder-content.thumbnail-view {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .thumbnail-preview {
        height: 100px;
    }
    
    .thumbnail-info {
        padding: var(--spacing-sm);
    }
    
    .thumbnail-name {
        font-size: 11px;
    }
    
    .thumbnail-size,
    .thumbnail-date {
        font-size: 9px;
    }
}

/* 面包屑导航 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px 16px;
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.back-btn {
    padding: 8px 16px;
    background: var(--gradient-secondary);
    color: var(--text-primary);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.back-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: var(--bg-active);
}

.current-path {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.empty-folder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0.8;
}

.content-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-sm);
    margin: 3px 0;
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    color: var(--text-primary);
    min-height: 50px;
}

.content-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--border-accent);
}

.content-item.active {
    background: var(--gradient-primary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    border-left: 3px solid var(--border-accent);
}

.content-item.active:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
}

.content-item .icon {
    margin-right: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* 列表模式缩略图容器 */
.content-item .icon.list-thumbnail-container {
    width: 50px;
    height: 50px;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
}

/* 列表模式缩略图预览区域 */
.list-thumbnail-preview {
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    /* 确保图片在容器内正确适配 */
    box-sizing: border-box;
    /* 确保内容不会溢出 */
    min-width: 0;
    min-height: 0;
}

/* 列表模式缩略图图片 */
.list-thumbnail-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    margin: auto;
    /* 确保图片不会超出容器 */
    box-sizing: border-box;
}

/* 列表模式缩略图加载动画 */
.list-thumbnail-preview .thumbnail-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.list-thumbnail-preview .thumbnail-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--text-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* 列表模式缩略图文件类型图标 */
.list-thumbnail-preview .thumbnail-file-icon {
    font-size: 24px;
    color: var(--text-secondary);
    opacity: 0.6;
    position: absolute;
    z-index: 1;
}

.list-thumbnail-preview .thumbnail-file-icon.video {
    color: #e74c3c;
}

.list-thumbnail-preview .thumbnail-file-icon.image {
    color: #3498db;
}

/* 列表模式缩略图播放按钮覆盖层 */
.list-thumbnail-preview .thumbnail-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    opacity: 0.8;
    z-index: 3;
    pointer-events: none;
}

.content-item:hover .list-thumbnail-preview .thumbnail-play-overlay {
    opacity: 1;
}

.content-item.folder .icon {
    color: #f39c12;
}

.content-item.video .icon {
    color: #e74c3c;
}

.content-item.rar .icon,
.content-item.zip .icon,
.content-item.archive .icon {
    color: #f39c12;
}

.content-item .name {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}

/* 文件信息容器 - 默认三列布局 */
.content-item .file-info {
    display: grid;
    grid-template-columns: 110px 80px 80px;
    gap: 12px;
    align-items: center;
    margin-left: 20px;
    width: 306px;
    flex-shrink: 0;
}

/* 当版本过滤开启时，使用四列布局 */
.content-item .file-info.version-filter-enabled {
    grid-template-columns: 110px 80px 16px 80px;
    width: 334px;
}

/* 上传时间样式 - 固定宽度 */
.content-item .upload-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.06);
    border: 1px solid rgba(128, 128, 128, 0.1);
    width: 110px;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* 文件大小样式 - 固定宽度 */
.content-item .file-size {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    background: transparent;
    padding: 4px 6px;
    border-radius: 0;
    border: none;
    white-space: nowrap;
    width: 80px;
    text-align: center;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

/* 添加过渡动画 */
.content-item .upload-time,
.content-item .file-size {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 鼠标悬停时的文件信息样式 */
.content-item:hover .upload-time {
    color: var(--text-secondary);
    background: rgba(128, 128, 128, 0.12);
    border-color: rgba(128, 128, 128, 0.2);
    transform: translateY(-1px);
}

.content-item:hover .file-size {
    background: transparent;
    border: none;
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: none;
}

/* 文件状态标记样式 - 固定宽度 */
.file-status-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    transition: all 0.3s ease;
    width: 80px;
    height: 24px;
    text-align: center;
    box-sizing: border-box;
}

.file-status-marker:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 状态占位符样式 - 与状态标记保持相同的尺寸，确保布局稳定 */
.status-placeholder {
    width: 80px;
    height: 24px;
    display: block;
    box-sizing: border-box;
}

/* 多版本图标样式 - 列表模式 */
.multi-version-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: help;
}

.multi-version-icon:hover {
    opacity: 1;
    color: var(--text-primary);
    transform: scale(1.1);
}

.multi-version-icon svg {
    width: 100%;
    height: 100%;
}

/* 多版本图标占位符 - 保持布局一致 */
.multi-version-placeholder {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* 缩略图多版本徽章 - 显示在右上角 */
.thumbnail-multi-version-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    cursor: help;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.thumbnail-multi-version-badge:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.thumbnail-multi-version-badge svg {
    width: 14px;
    height: 14px;
}

/* 右键菜单分割线 */
.context-menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 4px 0;
    opacity: 0.5;
}

/* +号图标样式 */
.plus-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.5);
    z-index: 100;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0.7;
}

.plus-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: rgba(102, 126, 234, 0.5);
    border-color: rgba(102, 126, 234, 0.8);
    opacity: 1;
}

.plus-icon:active {
    transform: scale(0.95);
}

.plus-icon span {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    opacity: 0.8;
}

/* 视频模态框 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);
}

/* 图片预览模态框背景半透明，凸显图片效果 */
#imagePreviewModal {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
}

/* 系统反馈模态框背景模糊效果 */
#systemFeedbackModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* 系统反馈提交成功窗口背景模糊效果 */
#systemFeedbackSuccessModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* 上传模态框背景模糊效果，降低不透明度 */
#uploadModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}

/* 重命名文件对话框背景模糊效果，降低不透明度 */
#renameFileModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    margin: 2% auto;
    padding: 0;
    width: 95%;
    max-width: 1400px;
    height: 90vh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
}

/* 视频模态框占据更多空间 */
.video-modal-content {
    width: 99%;
    height: 98vh;
    margin: 0.5% auto;
    max-width: none;
    border-radius: var(--radius-lg);
}

/* 图片模态框占据更多空间，与视频预览保持一致 */
.image-modal-content {
    width: 99%;
    height: 98vh;
    margin: 0.5% auto;
    max-width: none;
    border-radius: var(--radius-lg);
}

/* 模态框缩放动画 */
@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 视频模态框动画 - 激活状态 */
#videoModal .video-modal-content.modal-zoom-in {
    animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 图片模态框动画 - 激活状态 */
#imageModal .image-modal-content.modal-zoom-in {
    animation: modalZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 模态框背景淡入动画 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 模态框背景激活状态 */
#videoModal.modal-show,
#imageModal.modal-show {
    animation: modalFadeIn 0.3s ease-out forwards;
}

/* 新的视频布局容器 */
.video-layout-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    gap: 0;
}

/* 左侧视频主区域 */
.video-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
}

/* 右侧功能区域 */
.video-sidebar-area {
    width: 380px;
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 反馈输入区域 */
.feedback-input-section {
    flex: 0 0 auto;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
    padding: var(--spacing-md);
}

/* 侧边栏标签切换 */
.sidebar-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: var(--spacing-xs);
}

.sidebar-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: -2px;
}

.sidebar-tab:hover {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.1);
}

.sidebar-tab.active {
    color: var(--text-accent);
    border-bottom-color: var(--border-accent);
    font-weight: 600;
}

.sidebar-tab .tab-icon {
    font-size: 16px;
}

.sidebar-tab .tab-text {
    font-size: 13px;
}

/* 标签内容区域 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* 文件属性标签内容区域 - 设置高度限制以支持滚动 */
.tab-content#videoPropertiesContent.active,
.tab-content#imagePropertiesContent.active {
    display: block;
    max-height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 文件属性容器 */
.file-properties-container {
    padding: var(--spacing-sm);
    /* 确保滚动条在右侧显示 */
    padding-right: var(--spacing-xs);
}

.property-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.file-properties-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* 文件属性项 */
.file-property-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.file-property-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-accent);
    margin-bottom: var(--spacing-xs);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-secondary);
}

.file-property-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.file-property-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 80px;
    flex-shrink: 0;
}

.file-property-value {
    font-size: 13px;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    text-align: right;
    word-break: break-all;
    flex: 1;
    margin-left: var(--spacing-md);
}

.file-property-value.highlight {
    color: var(--text-accent);
    font-weight: 600;
}

.file-property-value.muted {
    color: var(--text-muted);
    font-size: 11px;
}

/* 文件属性特殊样式 */
.file-property-item.file-name {
    padding: var(--spacing-sm) 0;
    flex-direction: column;
    align-items: flex-start;
}

.file-property-item.file-name .file-property-label {
    margin-bottom: 4px;
}

.file-property-item.file-name .file-property-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
}

.file-property-item.file-size .file-property-value {
    color: var(--text-accent);
    font-weight: 500;
}

.file-property-item.file-time .file-property-value {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 文件属性容器滚动条样式 - 深色不明显 */
.tab-content#videoPropertiesContent.active::-webkit-scrollbar,
.tab-content#imagePropertiesContent.active::-webkit-scrollbar,
.file-properties-container::-webkit-scrollbar {
    width: 6px;
}

.tab-content#videoPropertiesContent.active::-webkit-scrollbar-track,
.tab-content#imagePropertiesContent.active::-webkit-scrollbar-track,
.file-properties-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.tab-content#videoPropertiesContent.active::-webkit-scrollbar-thumb,
.tab-content#imagePropertiesContent.active::-webkit-scrollbar-thumb,
.file-properties-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.tab-content#videoPropertiesContent.active::-webkit-scrollbar-thumb:hover,
.tab-content#imagePropertiesContent.active::-webkit-scrollbar-thumb:hover,
.file-properties-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Firefox 滚动条样式 */
.tab-content#videoPropertiesContent.active,
.tab-content#imagePropertiesContent.active,
.file-properties-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
}

/* 历史反馈区域 */
.feedback-history-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 新的图片布局容器 */
.image-layout-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    gap: 0;
}

/* 左侧图片主区域 */
.image-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #000;
}

.single-image-area {
    flex: 1;
    display: flex;
    height: 100%;
}

.compare-image-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: minmax(0, 1fr) min-content;
    gap: 6px;
    padding: 6px;
    background: #000;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.compare-image-section {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(220, 53, 69, 0.5);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}

.compare-image-section .image-label {
    position: absolute;
    top: 12px;
    left: 16px;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    z-index: 10;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.compare-image-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 0;
}

.compare-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.image-sync-control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: transparent;
}

.image-compare-controls {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    min-height: fit-content;
}

/* 对比模式下图片名称居中显示 */
.compare-image-container .compare-image-name {
    position: absolute;
    top: 15px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-10px);
    text-align: center;
    max-width: calc(100% - 30px);
}

.compare-image-container .compare-image-name.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.image-zoom-info.compare {
    bottom: 15px;
    right: 15px;
    left: auto;
    min-width: auto;
    max-width: 80px;
    padding: 4px 8px;
    font-size: 11px;
}

.select-image-btn {
    background: var(--gradient-secondary) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    padding: 8px 16px;
}

.select-image-btn:hover {
    background: var(--bg-active) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 右侧图片功能区域 */
.image-sidebar-area {
    width: 380px;
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 保持原有的媒体容器样式用于向后兼容 */
.media-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.media-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feedback-history-area {
    width: 350px;
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--text-primary);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    background: var(--bg-card);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-primary);
}

.close:hover {
    color: #ff6b6b;
    background: var(--bg-hover);
    transform: scale(1.1);
    border-color: #ff6b6b;
}

/* 隐藏视频和图片预览弹窗的关闭按钮 */
#videoModal .close,
#imageModal .close,
#imagePreviewModal .close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

/* 视频容器 */
.video-container {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 视频模态框中的视频容器不需要圆角 */
.video-modal-content .video-container {
    border-radius: 0;
}

/* 图片模态框中的图片容器不需要圆角 */
.image-modal-content .image-container {
    border-radius: 0;
}

/* 图片容器 */
.image-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.image-container:active {
    cursor: grabbing;
}

/* 图片容器中的图片 */
.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 原有的反馈输入区域样式（用于图片模态框） */
.feedback-input-area {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
    padding: var(--spacing-md);
    flex-shrink: 0;
}

/* 新的反馈输入区域样式（用于视频模态框） */
.feedback-input-section .feedback-input-container {
    max-width: 100%;
}

.feedback-input-section .timestamp-display {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
}

.feedback-input-section .input-group {
    margin-bottom: 0;
}

.feedback-input-section textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    outline: none;
    transition: all 0.3s ease;
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    min-height: 70px;
    max-height: 100px;
}

.feedback-input-section textarea:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: var(--bg-hover);
}

.feedback-input-section .input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
}

.feedback-input-section .btn {
    padding: 6px 14px;
    font-size: 12px;
    min-width: 70px;
}

.feedback-input-container {
    max-width: 100%;
}

.timestamp-display {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding: 10px 16px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
}

.timestamp-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-right: var(--spacing-sm);
}

.timestamp-value {
    color: var(--text-accent);
    font-size: 13px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.feedback-input-area .input-group {
    margin-bottom: 0;
}

.feedback-input-area textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    outline: none;
    transition: all 0.3s ease;
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    max-height: 120px;
}

.feedback-input-area textarea:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: var(--bg-hover);
}

.feedback-input-area textarea::placeholder {
    color: var(--text-muted);
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
}

.char-count {
    color: var(--text-muted);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.feedback-input-area .btn {
    padding: 8px 16px;
    font-size: 12px;
    min-width: 80px;
}

/* 提交留言进度条样式 */
.upload-progress-container {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(5px);
}

.upload-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.upload-progress-text {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 11px;
}

.upload-progress-percent {
    color: var(--text-accent);
    font-weight: 500;
    font-size: 12px;
    opacity: 0.8;
}

.upload-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid rgba(102, 126, 234, 0.08);
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.6), rgba(90, 111, 216, 0.7));
    border-radius: 2px;
    transition: width 0.2s ease-out;
    width: 0%;
    box-shadow: 0 0 4px rgba(102, 126, 234, 0.3);
}

.upload-progress-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

.upload-progress-speed {
    color: var(--text-muted);
    font-size: 10px;
    opacity: 0.6;
}

/* 视频播放器样式 */
.video-preview-modal {
    backdrop-filter: blur(8px);
}

.video-player-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.video-player-container input[type="range"]::-webkit-slider-track {
    background: rgba(255, 255, 255, 0.3);
    height: 4px;
    border-radius: 2px;
}

.video-player-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--text-accent);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-player-container input[type="range"]::-webkit-slider-thumb:hover {
    background: #ffffff;
    transform: scale(1.2);
}

.video-player-container input[type="range"]::-moz-range-track {
    background: rgba(255, 255, 255, 0.3);
    height: 4px;
    border-radius: 2px;
    border: none;
}

.video-player-container input[type="range"]::-moz-range-thumb {
    background: var(--text-accent);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.video-player-container input[type="range"]::-moz-range-thumb:hover {
    background: #ffffff;
    transform: scale(1.2);
}

/* 视频控制栏动画 */
.video-controls-container {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 全屏状态下的样式调整 */
.video-player-container:fullscreen {
    background: #000;
    width: 100vw !important;
    height: 100vh !important;
}

.video-player-container:fullscreen .video-controls-container {
    padding: 30px 20px 20px;
}

.video-player-container:fullscreen video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain;
}

/* 视频容器响应式调整 */
.video-preview-content {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 确保视频在不同比例下都能正确显示 */
.video-player-container video {
    display: block;
    margin: 0 auto;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .video-preview-content {
        width: 95vw !important;
        height: auto !important;
        margin: 5% auto !important;
    }
    
    .video-player-container {
        min-height: 200px !important;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .video-preview-content {
        width: 98vw !important;
        margin: 2% auto !important;
    }
    
    .video-controls-container {
        padding: 15px 10px 10px !important;
    }
    
    .video-player-container input[type="range"] {
        width: 60px !important;
    }
}

/* 媒体上传区域样式 */
.media-upload-section {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-secondary);
}

.media-upload-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.media-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.media-upload-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
}

.media-upload-btn .btn-icon {
    font-size: 14px;
}

.paste-hint {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

/* 回复媒体上传样式 - 与正常留言保持一致 */
.reply-media-upload-section {
    margin-top: 8px;
    padding: 6px 0;
}

.reply-media-upload-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reply-media-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.reply-media-upload-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
}

.reply-media-upload-btn .btn-icon {
    font-size: 14px;
}

.reply-media-upload-btn .btn-text {
    font-size: 12px;
}

/* 回复媒体预览容器样式 - 与正常留言保持一致 */
.reply-media-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    min-height: 0;
}

.reply-media-preview-item {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: transform 0.2s ease;
    background: var(--bg-tertiary);
}

.reply-media-preview-item:hover {
    transform: scale(1.05);
}

.reply-media-element {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.reply-media-element img,
.reply-media-element video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reply-media-element video {
    pointer-events: none; /* 防止在预览中播放 */
}

.reply-media-type-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.reply-media-file-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    font-size: 9px;
    padding: 4px 6px;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
    max-height: 30px;
    overflow: hidden;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.reply-media-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.reply-media-remove-btn:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

/* 媒体预览容器样式 */
.media-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    min-height: 0;
}

.media-preview-item {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: transform 0.2s ease;
    background: var(--bg-tertiary);
}

.media-preview-item:hover {
    transform: scale(1.05);
}

.media-preview-item img,
.media-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-preview-item video {
    pointer-events: none; /* 防止在预览中播放 */
}

.media-type-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

.media-size-info {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
}

.media-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
}

.media-control-btn {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.media-control-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.media-control-btn.remove-btn {
    background: #ff4757;
}

.media-control-btn.remove-btn:hover {
    background: #ff3838;
}

/* 图片预览容器样式（向后兼容） */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    min-height: 0;
}

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-card);
}

.image-preview-item:hover {
    border-color: var(--border-accent);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-preview-item .remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-preview-item .remove-btn:hover {
    background: #ff5252;
    transform: scale(1.1);
}

/* 图片预览弹窗 */
.image-preview-modal {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    top: 0;
    transform: none;
}

.image-preview-container-large {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: auto;
    padding: 0;
    box-sizing: border-box;
}

.image-preview-container-large img {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    display: block;
    margin: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none; /* 防止移动端触摸滚动 */
}

.image-preview-container-large img:active {
    cursor: grabbing;
}

/* 当图片被放大时，显示可拖拽的鼠标样式 */
.image-preview-container-large img[style*="scale"] {
    cursor: grab;
}

/* 投屏按钮遮罩层 - 已移除 */

/* 视频名称显示 */
.video-name-display {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: calc(100% - 30px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    text-align: center;
}

.video-name-display.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.video-name-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    text-align: center;
}

/* 对比模式下的视频名称显示调整 */
.compare-video-name {
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    font-size: 11px;
    padding: 6px 10px;
    max-width: calc(100% - 20px);
    text-align: center;
}

/* 对比模式下标题显示时的样式 */
.compare-video-name.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 对比模式下视频容器悬停时显示标题 */
.compare-video-section:hover .video-name-display {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 视频容器悬停时显示名称 */
.video-container:hover .video-name-display {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 当标题被手动隐藏时，禁用hover效果 */
.video-container.title-manually-hidden:hover .video-name-display {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-10px) !important;
}

/* 确保视频名称在全屏时也能正确显示 */
.video-container:fullscreen .video-name-display,
.video-container:-webkit-full-screen .video-name-display,
.video-container:-moz-full-screen .video-name-display,
.video-container:-ms-fullscreen .video-name-display {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* AB区间信息显示面板样式 */
.ab-info-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    z-index: 15;
    min-width: 180px;
    opacity: 0;
    transform: translateX(20px) translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    display: none;
}

.ab-info-panel.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
    pointer-events: auto;
    display: block;
}

.ab-info-panel-compare {
    top: 50px;
    right: 10px;
    min-width: 160px;
}

.ab-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ab-info-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ab-info-close-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    line-height: 1;
    opacity: 0.8;
}

.ab-info-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: scale(1.1);
}

.ab-info-content {
    padding: 10px 12px;
}

.ab-point-info,
.ab-duration-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ab-duration-info {
    margin-bottom: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ab-point-label,
.ab-duration-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ab-point-time,
.ab-duration-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    min-width: 45px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ab-duration-time {
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

/* AB区间信息面板动画效果 */
@keyframes abInfoPulse {
    0% {
        box-shadow: var(--shadow-lg);
    }
    50% {
        box-shadow: var(--shadow-lg), 0 0 20px rgba(102, 126, 234, 0.4);
    }
    100% {
        box-shadow: var(--shadow-lg);
    }
}

.ab-info-panel.active {
    animation: abInfoPulse 2s ease-in-out infinite;
}

#videoPlayer {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
    -webkit-media-controls: none;
    -webkit-media-controls-panel: none;
    -webkit-media-controls-play-button: none;
    -webkit-media-controls-timeline: none;
    -webkit-media-controls-current-time-display: none;
    -webkit-media-controls-time-remaining-display: none;
    -webkit-media-controls-mute-button: none;
    -webkit-media-controls-volume-slider: none;
    -webkit-media-controls-fullscreen-button: none;
    -webkit-media-controls-download-button: none;
    -webkit-media-controls-cast-button: none;
    -webkit-media-controls-overlay-play-button: none;
    -webkit-media-controls-overlay-enclosure: none;
    pointer-events: auto;
}

/* 全屏时的视频适配 */
#videoPlayer:fullscreen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* 全屏时的视频容器适配 */
.video-container:fullscreen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

/* 全屏时的视频容器适配（兼容性） */
.video-container:-webkit-full-screen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

.video-container:-moz-full-screen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

.video-container:-ms-fullscreen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
}

/* 固定的视频控制栏 */
.video-controls-bar {
    background: var(--bg-card);
    border-top: 1px solid var(--border-primary);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    overflow: visible; /* 确保标记不被截断 */
}

/* 保留原有的自定义控制栏样式用于其他地方 */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 16px 20px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-container:hover .custom-controls {
    opacity: 1;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 播放/暂停按钮固定尺寸，避免切换时位移 */
#playPauseBtn,
#playPauseBtn1,
#playPauseBtn2 {
    min-width: 40px;
    width: 40px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#playPauseBtn:hover,
#playPauseBtn1:hover,
#playPauseBtn2:hover {
    transform: scale(1.05);
}

.time-display {
    color: var(--text-primary);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 40px;
    text-align: center;
}

/* 进度条 */
.progress-container {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: visible; /* 允许标记向上溢出 */
}

/* 视频播放器进度条 - 确保标记不被截断 */
.video-controls-bar .progress-bar,
.video-individual-controls .progress-bar {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: visible !important;
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: visible;
    position: relative;
}

.progress {
    height: 100%;
    background: var(--gradient-primary);
    width: 0%;
    transition: width 0.1s ease;
    border-radius: 3px;
}

/* 反馈标记容器 */
.feedback-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* 反馈标记 - 圆形用户标识 */
.feedback-marker {
    position: absolute;
    top: -20px; /* 调整：标记缩小后，位置更靠近进度条 */
    width: 18px; /* 修改：从24px缩小到18px */
    height: 18px; /* 修改：从24px缩小到18px */
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-9px); /* 调整：从-12px改为-9px（18px的一半） */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.9); /* 调整：从2px改为1.5px */
    box-shadow: 0 0 0 1.5px rgba(102, 126, 234, 0.3); /* 调整：从2px改为1.5px */
}

.feedback-marker::before {
    content: attr(data-user-initial);
    color: #ffffff;
    font-size: 9px; /* 调整：从11px缩小到9px */
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    text-align: center;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.feedback-marker:hover {
    transform: translateX(-9px) scale(1.15); /* 调整：从-12px改为-9px */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5); /* 调整：从3px改为2px */
}

.feedback-marker:active {
    transform: translateX(-9px) scale(1.05); /* 调整：从-12px改为-9px */
}

/* 反馈标记工具提示 - 使用动态HTML元素 */
.feedback-tooltip {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 0;
    border-radius: 8px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    min-width: 320px;
    max-width: 400px;
    line-height: 1.5;
    overflow: hidden; /* 确保子元素的圆角正确显示 */
}

.feedback-marker:hover .feedback-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* 图片信息提示 */
.tooltip-images {
    padding: 8px 14px;
    background: rgba(50, 115, 220, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: #7bb3ff;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
}

/* 头部区域：时间和用户名 */
.tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 如果头部是第一个元素（没有图片信息），添加顶部圆角 */
.tooltip-header:first-child {
    border-radius: 8px 8px 0 0;
}

/* 如果头部是最后一个元素（没有内容），添加底部圆角并移除下边框 */
.tooltip-header:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* 如果头部既是第一个又是最后一个（只有时间和用户名），添加所有圆角 */
.tooltip-header:first-child:last-child {
    border-radius: 8px;
}

/* 如果有图片信息，头部区域有上边框分隔 */
.tooltip-images + .tooltip-header {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0; /* 覆盖第一个元素的圆角 */
}

/* 时间显示 */
.tooltip-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* 用户名显示 */
.tooltip-user {
    font-size: 12px;
    color: #7bb3ff;
    font-weight: 600;
    white-space: nowrap;
    flex: 1;
    text-align: right;
}

/* 反馈内容 */
.tooltip-content {
    padding: 12px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-radius: 0 0 8px 8px;
}

/* 不同类型的反馈标记颜色 */
.feedback-marker.has-content {
    background: linear-gradient(135deg, #48c774 0%, #3a9d5d 100%);
    box-shadow: 0 0 0 2px rgba(72, 199, 116, 0.3);
}

.feedback-marker.has-content:hover {
    box-shadow: 0 0 0 3px rgba(72, 199, 116, 0.5);
}

.feedback-marker.has-images {
    background: linear-gradient(135deg, #3273dc 0%, #2366d1 100%);
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.3);
}

.feedback-marker.has-images:hover {
    box-shadow: 0 0 0 3px rgba(50, 115, 220, 0.5);
}

.feedback-marker.has-both {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.3);
}

.feedback-marker.has-both:hover {
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5);
}

/* 倍速控制 */
.speed-control-container {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}

.speed-selector {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    min-width: 50px;
    text-align: center;
}

.speed-selector:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
}

.speed-selector:focus {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}

.speed-selector option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 8px;
}

/* 音量控制 */
.volume-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 文件列表按钮 */
.file-list-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.file-list-btn svg {
    transition: all 0.3s ease;
}

.file-list-btn:hover svg {
    transform: scale(1.1);
}

/* 对比按钮 */
.compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(76, 175, 80, 0.2) !important;
    border: 1px solid rgba(76, 175, 80, 0.5) !important;
    color: #4caf50 !important;
    transition: all 0.3s ease;
}

.compare-btn:hover {
    background: rgba(76, 175, 80, 0.3) !important;
    border-color: #4caf50 !important;
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

.compare-btn svg {
    transition: all 0.3s ease;
}

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

/* 视频对比模式样式 */
.compare-video-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 4px;
    padding: 4px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.compare-video-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(150, 150, 150, 0.4);
    border-radius: var(--radius-md);
    margin: 4px;
    overflow: visible; /* 确保标记不被截断 */
    min-height: 0;
    height: 100%;
}

.video-label {
    position: absolute;
    top: 10px;
    left: 15px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.compare-video-section .video-container {
    flex: 1;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.compare-video-section video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* 独立视频控制栏 */
.video-individual-controls {
    background: var(--bg-card);
    border-top: 1px solid var(--border-primary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    overflow: visible; /* 确保标记不被截断 */
}

.video-individual-controls .control-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.video-individual-controls .time-display {
    font-size: 11px;
    min-width: 35px;
}

.video-individual-controls .progress-container {
    flex: 1;
    height: 4px;
}

.video-individual-controls .volume-container {
    gap: 4px;
}

.video-individual-controls .volume-slider {
    width: 50px;
    height: 3px;
}

/* 视频同步链接控制 */
.video-sync-control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: transparent;
}

.sync-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-secondary);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.sync-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.sync-toggle-btn.active {
    border-color: var(--border-accent);
    background: var(--gradient-accent);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.sync-toggle-btn.active svg {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.sync-toggle-btn:not(.active) {
    opacity: 0.6;
}

.sync-toggle-btn:not(.active):hover {
    opacity: 0.8;
}

/* 整体进度控制区域 */
.master-progress-area {
    grid-column: 1 / -1;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px 24px 16px;
    margin-bottom: 8px;
    backdrop-filter: blur(10px);
}

.master-progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.master-time-display {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 40px;
    text-align: center;
    font-family: "Consolas", "Microsoft YaHei", monospace;
}

.master-progress-bar-container {
    flex: 1;
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.master-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-secondary);
}

.master-progress-bar:hover {
    height: 8px;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.master-progress {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: 3px;
    transition: width 0.1s ease;
    position: relative;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

.master-progress-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
}

.master-progress-bar:hover .master-progress-handle {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

.master-progress-handle:hover {
    background: var(--border-accent);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
}

.master-progress-tooltip {
    position: absolute;
    bottom: 25px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translateX(-50%);
    white-space: nowrap;
    border: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-md);
    font-family: "Consolas", "Microsoft YaHei", monospace;
}

.master-progress-bar:hover .master-progress-tooltip {
    opacity: 1;
}

/* 拖拽状态样式 */
.master-progress-bar.dragging {
    height: 10px;
}

.master-progress-bar.dragging .master-progress-handle {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
    background: var(--border-accent);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.8);
}

.master-progress-bar.dragging .master-progress-tooltip {
    opacity: 1;
    background: var(--border-accent);
    color: var(--text-primary);
    font-weight: bold;
}

/* 整体进度条右侧控制按钮区域 */
.master-progress-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.master-progress-controls .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-secondary);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.master-progress-controls .control-btn:hover {
    background: var(--bg-active);
    border-color: var(--border-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.master-progress-controls .control-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 按钮提示文字 */
.control-btn-hint {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    pointer-events: none;
}

.master-progress-controls .control-btn:hover .control-btn-hint {
    color: var(--text-secondary);
}

/* 同步播放按钮样式 */
.master-progress-controls .unified-play-btn {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
}

.master-progress-controls .unified-play-btn:hover {
    background: var(--gradient-primary) !important;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

/* 退出对比按钮样式 */
.master-progress-controls .exit-compare-btn {
    background: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #dc3545 !important;
}

.master-progress-controls .exit-compare-btn:hover {
    background: rgba(220, 53, 69, 0.3) !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

/* 选择对比视频按钮样式 */
.master-progress-controls .select-video-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

.master-progress-controls .select-video-btn:hover {
    background: var(--bg-active) !important;
    border-color: var(--border-accent) !important;
}

/* 文件列表按钮样式 */
.master-progress-controls .file-list-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

.master-progress-controls .file-list-btn:hover {
    background: var(--bg-active) !important;
    border-color: var(--border-accent) !important;
}

/* 对比模式下右侧面板的调整 */
.video-layout-container.compare-mode .video-sidebar-area {
    width: 380px;
}

.video-layout-container.compare-mode .feedback-input-section textarea {
    min-height: 60px;
    max-height: 80px;
    font-size: 12px;
}

.video-layout-container.compare-mode .feedback-input-section .btn {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 60px;
}

/* 文件列表模态窗口 */
.file-list-modal {
    max-width: 600px;
    max-height: 70vh;
    padding: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 文件列表头部 */
.file-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: var(--bg-hover);
    border-bottom: 2px solid var(--border-primary);
    flex-shrink: 0;
}

.file-list-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.file-list-close {
    position: static;
    width: 32px;
    height: 32px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.file-list-close:hover {
    color: #ff6b6b;
    background: var(--bg-tertiary);
    transform: scale(1.1);
}

/* 文件列表内容区域 */
.file-list-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
}

/* 文件列表容器 */
.file-list-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 文件列表项 */
.file-list-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.file-list-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.file-list-item.active {
    background: var(--gradient-primary);
    border-color: var(--text-accent);
    box-shadow: var(--shadow-md);
}

.file-list-item.active .file-list-name {
    color: var(--text-primary);
    font-weight: 600;
}

.file-list-empty {
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* 文件列表图标 */
.file-list-icon {
    margin-right: 8px;
    font-size: 16px;
    flex-shrink: 0;
}

/* 文件列表名称 */
.file-list-name {
    flex: 1;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.3;
}

/* 文件列表内容滚动条 */
.file-list-content::-webkit-scrollbar {
    width: 8px;
}

.file-list-content::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.file-list-content::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
    border: 1px solid var(--border-primary);
}

.file-list-content::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-accent);
}

.volume-slider {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--text-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--text-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
}

/* 隐藏所有浏览器默认视频控件 */
video::-webkit-media-controls {
    display: none !important;
}

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

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

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

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

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

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

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

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

video::-webkit-media-controls-download-button {
    display: none !important;
}

video::-webkit-media-controls-cast-button {
    display: none !important;
}

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

video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

video::-internal-media-controls-download-button {
    display: none !important;
}

video::-internal-media-controls-cast-button {
    display: none !important;
}

#videoPlayer {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 全局隐藏所有可能的下载和投屏按钮 */
*[aria-label*="下载"], *[aria-label*="Download"],
*[aria-label*="投屏"], *[aria-label*="Cast"],
*[title*="下载"], *[title*="Download"],
*[title*="投屏"], *[title*="Cast"],
.download-button, .cast-button,
.media-controls-download-button,
.media-controls-cast-button,
[class*="download"], [class*="cast"],
[class*="Download"], [class*="Cast"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

#imageViewer {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: contain;
    box-shadow: var(--shadow-xl);
    cursor: grab;
    transition: transform 0.1s ease-out;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#imageViewer:active {
    cursor: grabbing;
}

#imageViewer.dragging {
    cursor: grabbing;
}

/* 图片缩放和平移状态样式 */
.image-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

/* 图片模态框中的图片容器不需要圆角，充分利用空间 */
.image-modal-content .image-container {
    border-radius: 0;
}

.image-container.dragging {
    cursor: grabbing;
}

/* 图片交互提示 */
.image-interaction-hint {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.image-interaction-hint.show {
    opacity: 1;
}

.image-interaction-hint::before {
    content: "🖱️ 滚轮缩放 | 左键拖拽 | 右键重置";
}

/* 缩放反馈显示 */
.scale-feedback {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 600;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scale-feedback.show {
    opacity: 1;
}

/* 历史反馈记录区域 */
.feedback-history-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 20px;
    background: var(--bg-card);
    position: relative;
    z-index: 10006;
    overflow: visible;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    position: relative;
}

.feedback-history-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.feedback-history-header h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin: 0;
}

/* 反馈头部控制区域 */
.feedback-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10006;
}

/* 反馈排序按钮 - 与版本选择器按钮样式保持一致 */
.feedback-sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.feedback-sort-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.feedback-sort-btn .sort-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.feedback-sort-btn:active .sort-icon {
    transform: rotate(180deg);
}

.feedback-sort-btn .sort-text {
    font-size: 12px;
    font-weight: 500;
}

.btn-small {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 60px;
}

.feedback-history-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.empty-feedback {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.feedback-item {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: var(--spacing-sm);
    transition: all 0.3s ease;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

.feedback-item.clickable {
    cursor: pointer;
}

.feedback-item.clickable:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
}

.feedback-item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
    row-gap: 6px;
}

/* 当内容过多时，时间信息换行显示 */
.feedback-item-header .feedback-time {
    flex-shrink: 0;
    margin-left: auto;
}

/* 反馈头部左侧内容区域 */
.feedback-item-header > span:not(.feedback-time) {
    flex-shrink: 0;
    white-space: nowrap;
}

.feedback-timestamp {
    color: var(--text-accent);
    font-size: 12px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.feedback-author {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0.3;
    white-space: nowrap;
}

.feedback-author.admin-author {
    color: var(--text-accent);
    opacity: 0.3;
    font-weight: 600;
}

.feedback-time {
    color: var(--text-muted);
    font-size: 11px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-left: auto;
}

.feedback-content {
    color: var(--text-primary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 4px 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* 历史反馈中的媒体文件显示 */
.feedback-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.feedback-media-item {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
}

.feedback-media-item:hover {
    transform: scale(1.05);
}

.feedback-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feedback-video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.feedback-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-type-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

/* 回复中的媒体显示样式 - 与正常留言保持一致 */
.reply-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.reply-media-item {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
}

.reply-media-item:hover {
    transform: scale(1.05);
}

.reply-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reply-video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.reply-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reply-media-item .reply-media-type-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 历史反馈中的图片显示（向后兼容） */
.feedback-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.feedback-images.legacy-images {
    border-top: 1px dashed var(--border-secondary);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.feedback-image-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-card);
}

.feedback-image-item:hover {
    border-color: var(--border-accent);
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.feedback-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feedback-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--spacing-sm);
    gap: 8px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    width: 100%;
}

/* AB区间标签在操作区中的样式 - 高亮显示 */
.feedback-actions .ab-interval-tag {
    margin: 0;
    margin-right: auto;
    flex-shrink: 1;
    flex-grow: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.25) 0%, rgba(155, 89, 182, 0.15) 100%);
    border: 2px solid #9B59B6;
    border-radius: 6px;
    color: #9B59B6;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3), 0 0 12px rgba(155, 89, 182, 0.15);
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    min-width: 0;
}

/* AB区间标签悬停效果 */
.feedback-actions .ab-interval-tag:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.35) 0%, rgba(155, 89, 182, 0.25) 100%);
    border-color: #8E44AD;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4), 0 0 16px rgba(155, 89, 182, 0.2);
    transform: translateY(-1px);
}

/* AB区间标签内部内容 - 只显示播放图标 */
.feedback-actions .ab-interval-tag .ab-interval-play-btn {
    white-space: nowrap;
    overflow: visible;
    padding: 4px 6px;
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid #9B59B6;
    border-radius: 4px;
    color: #9B59B6;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    line-height: 1;
}

.feedback-actions .ab-interval-tag .ab-interval-play-btn:hover {
    background: rgba(155, 89, 182, 0.35);
    border-color: #8E44AD;
    transform: scale(1.1);
}

/* 操作区右侧按钮组 - 与AB区间标签同一行显示 */
.feedback-actions .btn-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    order: 2;
}

/* 移除换行逻辑，保持同一行显示 */
.feedback-actions:has(.ab-interval-tag) .btn-group {
    flex-basis: auto;
    justify-content: flex-end;
    margin-top: 0;
    margin-left: auto;
}

/* 兼容不支持:has()的浏览器 */
.feedback-actions.with-ab-interval .btn-group {
    flex-basis: auto;
    justify-content: flex-end;
    margin-top: 0;
    margin-left: auto;
}

.feedback-item:hover .feedback-actions {
    opacity: 1;
}

.feedback-actions .btn {
    padding: 4px 8px;
    font-size: 10px;
    min-width: 50px;
    opacity: 0.5;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-secondary);
    transition: all 0.3s ease;
}

.feedback-actions .btn:hover {
    opacity: 1;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-accent);
    transform: scale(1.05);
}

/* 回复功能样式 */
.feedback-replies {
    margin-top: var(--spacing-sm);
    margin-left: 20px;
    padding-left: 12px;
}

.feedback-reply-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
    position: relative;
}

.feedback-reply-item::before {
    display: none;
}

.feedback-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

.feedback-reply-author {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0.3;
    white-space: nowrap;
}

.feedback-reply-author.admin-author {
    color: var(--text-accent);
    opacity: 0.3;
    font-weight: 600;
}

.feedback-reply-time {
    color: var(--text-muted);
    font-size: 10px;
}

.feedback-reply-content {
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
    word-wrap: break-word;
}

.feedback-reply-target {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    margin-bottom: 4px;
    padding: 2px 6px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--color-accent);
}

.feedback-reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.feedback-reply-item:hover .feedback-reply-actions {
    opacity: 1;
}

.feedback-reply-actions .btn {
    padding: 2px 6px;
    font-size: 9px;
    min-width: 40px;
    opacity: 0.5;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-secondary);
    transition: all 0.3s ease;
}

.feedback-reply-actions .btn:hover {
    opacity: 1;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-accent);
    transform: scale(1.05);
}

.reply-input-section {
    margin-top: var(--spacing-sm);
    padding: 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-secondary);
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transform-origin: top center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.reply-input-section.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    max-height: 1000px;
}

.reply-input-wrapper {
    margin-bottom: 8px;
}

.reply-input-wrapper textarea {
    width: 100%;
    min-height: 60px;
    padding: 6px 8px;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    resize: vertical;
    background: var(--bg-card);
    color: var(--text-primary);
}

.reply-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.reply-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.reply-char-count {
    font-size: 10px;
    color: var(--text-muted);
}

.reply-actions {
    display: flex;
    gap: 6px;
}

.reply-actions .btn {
    padding: 4px 12px;
    font-size: 11px;
}

.btn-reply {
    background: var(--color-accent);
    color: white;
    border: 1px solid var(--color-accent);
}

.btn-reply:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn-reply:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    border-color: var(--border-secondary);
    cursor: not-allowed;
}

.btn-cancel-reply {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-secondary);
}

.btn-cancel-reply:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-accent);
}

/* 右键菜单样式 */
.context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    z-index: 2000;
    min-width: 200px;
    padding: 8px 0;
    display: none;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    /* 确保菜单定位准确 */
    transform: translateZ(0);
    will-change: transform;
    /* 防止菜单被裁剪 */
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: visible;
}

.context-menu.show {
    display: block;
    animation: contextMenuFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
}

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

.context-menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-accent);
    transform: translateX(3px);
    border-left: 3px solid var(--border-accent);
}

.context-menu-item .menu-icon {
    margin-right: 12px;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.context-menu-item .menu-text {
    flex: 1;
    font-weight: 500;
}

.context-menu-separator {
    height: 1px;
    background: var(--border-primary);
    margin: 4px 0;
    opacity: 0.5;
}

/* 文件上传对话框样式 */
.upload-modal {
    max-width: 520px;
    max-height: calc(85vh + 30px);
    padding: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.upload-modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.upload-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.upload-modal-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 选项卡样式 */
.upload-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.upload-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.upload-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.upload-tab.active {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.upload-tab .tab-icon {
    font-size: 14px;
    line-height: 1;
}

.upload-tab .tab-text {
    font-size: 13px;
}

/* 选项卡内容区域 */
.upload-tab-content {
    position: relative;
    min-height: 100px;
    flex-shrink: 0; /* 防止被压缩，确保预览文件名区域始终可见 */
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.tab-pane.active {
    display: block;
}

/* 自动重命名设置 */
.auto-rename-settings {
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    flex-shrink: 0; /* 防止被压缩，确保设置区域完整显示 */
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.auto-rename-settings .input-group {
    margin-bottom: 0;
}

.auto-rename-settings .input-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.auto-rename-settings .input-group input,
.auto-rename-settings .input-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    outline: none;
    transition: all 0.2s ease;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.auto-rename-settings .input-group input:focus,
.auto-rename-settings .input-group select:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    background: var(--bg-card);
}

.auto-rename-settings input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.auto-rename-settings select {
    cursor: pointer;
}

.preview-filename {
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    flex-shrink: 0; /* 防止被压缩，确保预览文件名区域始终可见 */
    min-height: 60px; /* 设置最小高度，确保有足够空间显示内容 */
}

.preview-filename label {
    display: block;
    color: var(--text-accent);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 6px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.filename-preview {
    color: var(--text-primary);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    word-break: break-all;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    line-height: 1.4;
    min-height: 32px; /* 设置最小高度，确保文件名有足够显示空间 */
    display: block; /* 确保作为块级元素显示 */
}

/* 直接上传信息 */
.direct-upload-info {
    padding: 20px;
    text-align: center;
    background: var(--bg-hover);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.direct-upload-info p {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin: 0;
}

.file-upload-area {
    margin-bottom: 0;
    min-height: 100px;
    flex-shrink: 1; /* 允许收缩，但优先保证上方内容完整显示 */
}

.upload-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.upload-modal-footer .btn {
    padding: 8px 20px;
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

/* ==================== 文件夹上传模态框 ==================== */
.folder-upload-modal {
    background: var(--panel-bg);
    border-radius: 16px;
    width: 760px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 28px 84px rgba(0, 0, 0, 0.65),
        0 12px 36px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: 2px solid rgba(102, 126, 234, 0.18);
    outline-offset: -1px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    backdrop-filter: saturate(1.25) blur(2px);
    animation: modalPop 160ms cubic-bezier(.2,.9,.2,1.2);
    overflow: hidden; /* 确保内容不会溢出 */
}

.modal#folderUploadModal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

@keyframes modalPop {
    from { transform: translateY(6px) scale(0.985); opacity: .85; }
    to   { transform: translateY(0)    scale(1);     opacity: 1; }
}
.folder-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.folder-upload-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.2px;
    flex: 1;
}

/* 最小化按钮 */
.folder-upload-minimize-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 12px;
}

.folder-upload-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.folder-upload-minimize-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.08);
}

.folder-upload-minimize-btn svg {
    width: 16px;
    height: 16px;
}

/* 窗口最小化动画 */
.folder-upload-modal.minimizing {
    animation: modalMinimize 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes modalMinimize {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    to {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
}

/* 最小化后的上传进度提示框 */
.folder-upload-minimized-progress {
    position: fixed;
    top: 20px;
    right: auto;
    z-index: 10000;
    /* 位置将通过JavaScript动态计算 */
    background: var(--panel-bg);
    border-radius: var(--radius-md); /* 与user-info-wrapper相同的圆角 */
    padding: 6px 12px; /* 与user-info-wrapper相同的padding */
    min-width: 200px; /* 最小宽度，允许自适应 */
    width: auto; /* 宽度自适应内容 */
    height: 36px; /* 与user-info-wrapper相同的高度 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    cursor: pointer;
    transition: all 0.2s ease;
    animation: minimizedProgressPop 0.3s cubic-bezier(0.2, 0.9, 0.2, 1.2);
}

@keyframes minimizedProgressPop {
    from {
        transform: translateY(-10px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.folder-upload-minimized-progress:hover {
    /* 移除缩放动画，只保留阴影和边框变化 */
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(102, 126, 234, 0.2) inset;
    border-color: rgba(102, 126, 234, 0.3);
}

.minimized-progress-content {
    display: flex;
    flex-direction: row; /* 改为横向布局，与用户信息平行 */
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.minimized-progress-bar-container {
    flex: 1; /* 进度条占据剩余空间 */
    min-width: 0; /* 允许flex收缩 */
}

.minimized-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.minimized-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 更平滑的过渡，减少闪烁 */
    position: relative;
    overflow: hidden;
}

.minimized-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: progressShine 2s infinite;
}

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

/* 完成状态 - 半透明绿色底框，白色文字，宽度自适应，文字居中 */
.folder-upload-minimized-progress.completed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(69, 160, 73, 0.3) 100%);
    border: 1px solid rgba(76, 175, 80, 0.4);
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.2);
    width: auto; /* 完成时宽度自适应文字 */
    min-width: auto; /* 移除最小宽度限制 */
    padding: 6px 16px; /* 适当的内边距，让文字更精致 */
    justify-content: center; /* 文字居中显示 */
}

.folder-upload-minimized-progress.completed .minimized-progress-content {
    justify-content: center; /* 内容居中 */
    width: 100%;
    gap: 0; /* 完成时移除间距 */
}

.folder-upload-minimized-progress.completed .minimized-progress-info {
    justify-content: center; /* 信息区域居中 */
    width: 100%;
}

.folder-upload-minimized-progress.completed .minimized-progress-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
    width: 100% !important;
}

.minimized-progress-info {
    display: flex;
    flex-direction: row; /* 横向布局 */
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* 防止收缩 */
}

.minimized-progress-speed {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap; /* 防止换行 */
}

.minimized-progress-status {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap; /* 防止换行 */
}

.folder-upload-minimized-progress.completed .minimized-progress-status {
    color: #ffffff; /* 完成时文字为白色 */
    font-weight: 600;
}

.folder-upload-minimized-progress.completed .minimized-progress-speed {
    display: none;
}

.folder-upload-minimized-progress.completed .minimized-progress-bar-container {
    flex: 0 0 auto; /* 完成时进度条不占据空间，只显示文字 */
    width: 0;
    overflow: hidden;
}

.folder-upload-body {
    padding: 20px 24px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1; /* 允许body区域伸缩 */
    min-height: 0; /* 防止内容溢出 */
}

.folder-upload-body::-webkit-scrollbar {
    width: 6px;
}

.folder-upload-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.folder-upload-summary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
    margin-left: 8px;
    word-break: break-all;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.25));
    border: 1px solid rgba(102,126,234,0.25);
}

.existing-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.existing-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.existing-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.existing-content-list {
    max-height: 180px;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
}

.existing-content-list::-webkit-scrollbar {
    width: 6px;
}

.existing-content-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.existing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    transition: background 0.2s ease;
}

.existing-item + .existing-item {
    margin-top: 6px;
}

.existing-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.existing-item .item-type {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.empty-existing {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 20px 0;
}

.folder-select-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#folderSelectBtn {
    align-self: flex-start;
    box-shadow: 0 6px 14px rgba(102, 126, 234, 0.25);
}
#folderSelectBtn:hover {
    filter: brightness(1.05);
}

.selected-folder-info {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    margin-bottom: 0;
}

.selected-folder-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.selected-folder-info .folder-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(118,75,162,0.2));
    border: 1px solid rgba(102,126,234,0.25);
}

.selected-folder-info ul {
    margin: 8px 0 0 0;
    padding-left: 0;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
}

.selected-folder-info li {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    padding-left: 14px;
}

.selected-folder-info ul::-webkit-scrollbar {
    width: 6px;
}

.selected-folder-info ul::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.selected-folder-info li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: translateY(-50%);
    opacity: 0.9;
}

/* 不支持文件列表样式 */
.unsupported-files-info {
    margin-top: 28px;
    margin-bottom: 0;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    max-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.unsupported-files-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #e74c3c;
}

.unsupported-files-icon {
    font-size: 16px;
}

.unsupported-files-title {
    flex: 1;
}

.unsupported-files-count {
    font-size: 12px;
    color: rgba(231, 76, 60, 0.8);
    font-weight: 500;
}

.unsupported-files-list {
    margin: 0;
    padding-left: 0;
    max-height: 120px;
    overflow-y: auto;
    list-style: none;
    flex: 1;
}

.unsupported-files-list li {
    font-size: 12px;
    color: rgba(231, 76, 60, 0.9);
    margin-bottom: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    padding-left: 14px;
}

.unsupported-files-list::-webkit-scrollbar {
    width: 6px;
}

.unsupported-files-list::-webkit-scrollbar-thumb {
    background: rgba(231, 76, 60, 0.3);
    border-radius: 3px;
}

.unsupported-files-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e74c3c;
    transform: translateY(-50%);
    opacity: 0.8;
}

.folder-progress {
    margin-top: 4px;
}

.folder-upload-footer {
    padding: 12px 24px 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto; /* 确保按钮区域在底部 */
    flex-shrink: 0; /* 防止按钮区域被压缩 */
}

/* Footer中的最小化按钮 - 绿色样式 */
.folder-upload-minimize-btn-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(76, 175, 80, 0.3);
    transition: all 0.2s ease;
}

.folder-upload-minimize-btn-footer:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    box-shadow: 0 8px 18px rgba(76, 175, 80, 0.4);
    transform: translateY(-1px);
}

.folder-upload-minimize-btn-footer:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}

.folder-upload-minimize-btn-footer .btn-text {
    display: inline;
}

.folder-upload-footer .btn {
    min-width: 120px;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(102, 126, 234, 0.22);
}

/* 上传进度区域样式 */
.upload-progress-section {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 10px;
}

.upload-progress-section.folder-progress {
    display: none !important; /* 默认折叠状态 */
    margin: 0 !important;
    padding: 0 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: none !important;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.03)) !important;
    backdrop-filter: blur(6px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
    box-shadow: 
        0 -1px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    gap: 10px !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.3s ease, padding 0.3s ease;
}

/* 展开状态 */
.upload-progress-section.folder-progress.show {
    display: flex !important;
    opacity: 1;
    max-height: 200px; /* 足够大的值以容纳内容 */
    padding: 12px 24px !important;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

.progress-text #uploadStatusText {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.progress-text #uploadPercentage {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-accent);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 文件夹上传进度文本样式优化 */
.upload-progress-section.folder-progress .progress-text {
    margin-bottom: 2px;
}

.upload-progress-section.folder-progress .progress-text #folderUploadStatusText {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}

.upload-progress-section.folder-progress .progress-text #folderUploadPercentage {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-accent);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid rgba(102, 126, 234, 0.25);
    letter-spacing: 0.2px;
}

.progress-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 文件夹上传进度详情样式优化 */
.upload-progress-section.folder-progress .progress-details {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 0;
}

.upload-progress-section.folder-progress .progress-details span {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.progress-bar-container {
    width: 100%;
    margin: 8px 0;
}

/* 上传进度条样式 - 使用更具体的选择器避免冲突 */
.progress-bar-container .progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 文件夹上传进度条容器优化 */
.upload-progress-section.folder-progress .progress-bar-container {
    margin: 6px 0 6px 0;
}

.upload-progress-section.folder-progress .progress-bar-container .progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.25),
        0 1px 1px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--text-accent), #4CAF50);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
    position: relative;
    overflow: hidden;
}

/* 文件夹上传进度条填充优化 */
.upload-progress-section.folder-progress .progress-fill {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #4CAF50 100%);
    border-radius: 4px;
    box-shadow: 
        0 0 8px rgba(102, 126, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: progressShine 2s infinite;
}

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

.upload-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.upload-file-info #currentUploadFile {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
}

.upload-file-info #uploadFileCount {
    font-weight: 500;
    color: var(--text-primary);
}

/* 文件夹上传文件信息样式优化 */
.upload-progress-section.folder-progress .upload-file-info {
    font-size: 11px;
    margin-top: 0;
    padding-top: 6px;
    border-top: none;
}

.upload-progress-section.folder-progress .upload-file-info #folderUploadCurrentFile {
    color: var(--text-secondary);
    font-weight: 400;
}

.upload-progress-section.folder-progress .upload-file-info #folderUploadFileCount {
    font-weight: 500;
    color: var(--text-accent);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
    padding: 1px 8px;
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.file-drop-zone {
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
    background: var(--bg-tertiary);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.file-drop-zone:hover {
    border-color: var(--border-accent);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.file-drop-zone.drag-over {
    border-color: var(--text-accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.drop-zone-content {
    pointer-events: none;
}

.drop-icon {
    font-size: 24px;
    margin-bottom: 6px;
    color: var(--text-accent);
}

.file-drop-zone p {
    color: var(--text-primary);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-bottom: 4px;
    font-weight: 500;
}

.file-types {
    color: var(--text-muted);
    font-size: 10px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.file-size-limit {
    color: var(--text-accent);
    font-size: 11px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    margin-top: 6px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.file-size-limit::before {
    content: "📦";
    font-size: 12px;
}

.selected-files {
    margin-top: 15px;
    /* 移除高度限制和滚动条，让文件列表自然扩展，使用整个面板的大滚动条 */
}

.selected-file-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.selected-file-item:last-child {
    margin-bottom: 0;
}

.selected-file-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    transform: translateX(3px);
}

.file-icon {
    margin-right: 12px;
    font-size: 18px;
}

.file-icon.video {
    color: #e74c3c;
}

.file-icon.image {
    color: #3498db;
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    color: var(--text-primary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    color: var(--text-muted);
    font-size: 11px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-top: 2px;
}

.file-remove {
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.file-remove:hover {
    background: #ff5252;
    transform: scale(1.1);
}

/* 文件夹命名对话框背景样式 - 更亮的模糊效果 */
/* 文件夹命名对话框背景模糊效果 */
#folderNameModal {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 文件夹命名对话框容器样式 */
#folderNameModal .modal-content {
    max-width: 550px;
    width: auto;
    min-width: 450px;
    height: auto;
    margin: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.folder-name-modal {
    min-width: 450px;
    max-width: 550px;
    width: 100%;
    padding: 24px 30px 28px 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid #3498db;
    text-align: left;
}

.folder-name-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #3498db;
}

.folder-name-icon {
    font-size: 40px;
    margin-bottom: 8px;
    display: block;
}

.folder-name-modal h3 {
    margin: 0;
    color: #3498db;
    font-size: 18px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.folder-name-content {
    margin-bottom: 20px;
}

.folder-name-modal .input-group {
    margin: 0;
}

.folder-name-modal .input-group label {
    margin: 0 0 12px 0;
    font-size: 14px;
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.folder-name-modal .input-group input {
    padding: 12px 16px;
    font-size: 15px;
    width: 100%;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    box-sizing: border-box;
}

.folder-name-modal .input-group input:focus {
    outline: none;
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    box-shadow: 
        0 0 0 3px rgba(52, 152, 219, 0.15),
        0 4px 12px rgba(52, 152, 219, 0.1);
}

.folder-name-modal .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.folder-name-modal .modal-buttons {
    margin-top: 12px;
    margin-bottom: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
    display: flex;
    justify-content: flex-end;
}

.folder-name-modal .modal-buttons .btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 90px;
    cursor: pointer;
}

.folder-name-modal .modal-buttons .btn-primary {
    background: #3498db;
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.folder-name-modal .modal-buttons .btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.folder-name-modal .modal-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.folder-name-modal .modal-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* 重命名文件/文件夹对话框样式 */
#renameFileModal .modal-content {
    margin: 0;
    padding: 0;
    width: auto;
    min-width: 500px;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rename-file-modal {
    min-width: 500px;
    max-width: 90vw;
    width: auto;
    padding: 24px 30px 28px 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid #3498db;
    text-align: left;
}

.rename-file-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #3498db;
}

.rename-file-modal h3 {
    margin: 0;
    color: #3498db;
    font-size: 18px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.rename-file-content {
    margin-bottom: 20px;
}

.rename-file-modal .input-group {
    margin: 0;
}

.rename-file-modal .input-group label {
    margin: 0 0 12px 0;
    font-size: 14px;
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.rename-file-modal .input-group input {
    padding: 12px 16px;
    font-size: 15px;
    width: 100%;
    min-width: 400px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    box-sizing: border-box;
    overflow: visible;
}

.rename-file-modal .input-group input:focus {
    outline: none;
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    box-shadow: 
        0 0 0 3px rgba(52, 152, 219, 0.15),
        0 4px 12px rgba(52, 152, 219, 0.1);
}

.rename-file-modal .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.rename-file-modal .modal-buttons {
    margin-top: 12px;
    margin-bottom: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
    display: flex;
    justify-content: flex-end;
}

.rename-file-modal .modal-buttons .btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 90px;
    cursor: pointer;
}

.rename-file-modal .modal-buttons .btn-primary {
    background: #3498db;
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.rename-file-modal .modal-buttons .btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.rename-file-modal .modal-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.rename-file-modal .modal-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* 文件夹命名对话框响应式样式 */
@media (max-width: 768px) {
    #folderNameModal .modal-content {
        min-width: 90vw;
        max-width: 90vw;
    }
    
    .folder-name-modal {
        min-width: auto;
        max-width: 100%;
        padding: 20px;
    }
    
    #renameFileModal .modal-content {
        min-width: 90vw;
        max-width: 90vw;
    }
    
    .rename-file-modal {
        min-width: auto;
        max-width: 100%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #folderNameModal .modal-content {
        min-width: 95vw;
        max-width: 95vw;
    }
    
    .folder-name-modal {
        padding: 16px;
    }
    
    .folder-name-modal h3 {
        font-size: 16px;
    }
    
    #renameFileModal .modal-content {
        min-width: 95vw;
        max-width: 95vw;
    }
    
    .rename-file-modal {
        padding: 16px;
    }
    
    .rename-file-modal h3 {
        font-size: 16px;
    }
    
    .folder-name-icon {
        font-size: 32px;
    }
}

/* 删除反馈确认对话框样式 */
#deleteFeedbackModal .modal-content {
    margin: 0;
    padding: 0;
    width: 400px;
    height: 260px;
    max-width: 400px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.delete-feedback-modal {
    width: 100%;
    height: 100%;
    padding: 24px 30px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(231, 76, 60, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    position: relative;
}

/* 警告图标 */
.delete-feedback-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.15);
    border-radius: 50%;
    color: #e74c3c;
    flex-shrink: 0;
}

.delete-feedback-icon svg {
    width: 48px;
    height: 48px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.delete-feedback-modal h3 {
    margin: 0 0 12px 0;
    color: #e74c3c;
    font-size: 20px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    flex-shrink: 0;
}

.delete-feedback-modal p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    flex-shrink: 0;
    padding: 0 10px;
}

.delete-feedback-modal .modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
}

.delete-feedback-modal .modal-buttons .btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    min-width: 100px;
    cursor: pointer;
}

.delete-feedback-modal .modal-buttons .btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.delete-feedback-modal .modal-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.5);
}

.delete-feedback-modal .modal-buttons .btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.delete-feedback-modal .modal-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}

.delete-feedback-modal .modal-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

/* 删除反馈确认对话框响应式样式 */
@media (max-width: 768px) {
    #deleteFeedbackModal .modal-content {
        width: 90vw;
        max-width: 400px;
        height: auto;
        min-height: 260px;
        max-height: 90vh;
    }
    
    .delete-feedback-modal {
        padding: 20px;
    }
    
    .delete-feedback-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }
    
    .delete-feedback-icon svg {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    #deleteFeedbackModal .modal-content {
        width: 95vw;
        max-width: 400px;
        height: auto;
        min-height: 240px;
        max-height: 90vh;
    }
    
    .delete-feedback-modal {
        padding: 20px 16px 16px;
    }
    
    .delete-feedback-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }
    
    .delete-feedback-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .delete-feedback-modal h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .delete-feedback-modal p {
        font-size: 13px;
        padding: 0 5px;
    }
    
    .delete-feedback-modal .modal-buttons {
        margin-top: 16px;
        gap: 10px;
    }
    
    .delete-feedback-modal .modal-buttons .btn {
        padding: 9px 20px;
        font-size: 13px;
        min-width: 90px;
    }
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    outline: none;
    transition: all 0.3s ease;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.input-group input:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: var(--bg-hover);
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
    flex-shrink: 0;
}

/* 删除文件对话框的按钮区域 */
.delete-file-modal .modal-buttons {
    margin-top: 12px;
    margin-bottom: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 80px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

/* 删除文件确认对话框样式 */
#deleteFileModal {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#deleteFileModal .modal-content {
    margin: 0;
    padding: 0;
    width: auto;
    min-width: 450px;
    max-width: 650px;
    height: auto;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.delete-file-modal {
    min-width: 450px;
    max-width: 650px;
    width: 100%;
    padding: 24px 30px 28px 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid #e74c3c;
    text-align: left;
}

.delete-file-header {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e74c3c;
}

.delete-file-icon {
    font-size: 40px;
    margin-bottom: 8px;
    display: block;
}

.delete-file-modal h3 {
    margin: 0;
    color: #e74c3c;
    font-size: 18px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.delete-file-content {
    margin-bottom: 15px;
}

.delete-file-warning {
    margin: 0 0 15px 0;
    color: #e74c3c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    text-align: center;
    padding: 12px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.delete-file-warning strong {
    font-size: 16px;
    font-weight: 700;
}

.delete-file-info {
    margin: 12px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.delete-file-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    word-break: break-all;
}

.delete-file-note {
    margin: 12px 0 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.delete-file-list {
    margin: 8px 0 0 20px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.delete-file-list li {
    margin-bottom: 4px;
}

.delete-file-list li::marker {
    color: #e74c3c;
}

/* 删除文件对话框响应式样式 */
@media (max-width: 768px) {
    #deleteFileModal .modal-content {
        min-width: 90vw;
        max-width: 90vw;
    }
    
    .delete-file-modal {
        min-width: auto;
        max-width: 100%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #deleteFileModal .modal-content {
        min-width: 95vw;
        max-width: 95vw;
    }
    
    .delete-file-modal {
        padding: 16px;
    }
    
    .delete-file-modal h3 {
        font-size: 16px;
    }
    
    .delete-file-warning {
        font-size: 14px;
        padding: 10px;
    }
}

/* 文件夹属性对话框背景样式 - 模糊效果 */
#folderPropertiesModal {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#folderPropertiesModal .modal-content {
    margin: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 文件夹属性对话框样式 */
.folder-properties-modal {
    min-width: 450px;
    max-width: 600px;
    width: 100%;
    padding: 20px 30px 20px 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--border-accent);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.folder-properties-header {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-accent);
    position: relative;
    flex-shrink: 0;
}

.folder-properties-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.folder-properties-header .close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.folder-properties-header .close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.folder-properties-content {
    margin-bottom: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.property-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    transition: all 0.3s ease;
}

.property-item:last-child {
    margin-bottom: 0;
}

.property-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
}

.property-label {
    min-width: 80px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin-right: 12px;
}

.property-value {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    word-break: break-all;
    line-height: 1.5;
}

.loading-size {
    color: var(--text-accent);
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.folder-properties-modal .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .folder-properties-modal {
        min-width: auto;
        max-width: 100%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #folderPropertiesModal .modal-content {
        min-width: 95vw;
        max-width: 95vw;
    }
    
    .folder-properties-modal {
        padding: 16px;
    }
    
    .folder-properties-header h3 {
        font-size: 16px;
    }
    
    .property-item {
        flex-direction: column;
    }
    
    .property-label {
        min-width: auto;
        margin-bottom: 8px;
        margin-right: 0;
    }
}

/* 滚动条美化 */
.folder-list::-webkit-scrollbar,
.folder-content::-webkit-scrollbar,
.feedback-history-list::-webkit-scrollbar,
.autocomplete-dropdown::-webkit-scrollbar,
.upload-modal::-webkit-scrollbar {
    width: 8px;
}

.folder-list::-webkit-scrollbar-track,
.folder-content::-webkit-scrollbar-track,
.feedback-history-list::-webkit-scrollbar-track,
.autocomplete-dropdown::-webkit-scrollbar-track,
.upload-modal::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin: 2px;
}

.folder-list::-webkit-scrollbar-thumb,
.folder-content::-webkit-scrollbar-thumb,
.feedback-history-list::-webkit-scrollbar-thumb,
.autocomplete-dropdown::-webkit-scrollbar-thumb,
.upload-modal::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
    border: 1px solid var(--border-primary);
}

.folder-list::-webkit-scrollbar-thumb:hover,
.folder-content::-webkit-scrollbar-thumb:hover,
.feedback-history-list::-webkit-scrollbar-thumb:hover,
.autocomplete-dropdown::-webkit-scrollbar-thumb:hover,
.upload-modal::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-accent);
    box-shadow: var(--shadow-sm);
}

.folder-list::-webkit-scrollbar-thumb:active,
.folder-content::-webkit-scrollbar-thumb:active,
.feedback-history-list::-webkit-scrollbar-thumb:active,
.autocomplete-dropdown::-webkit-scrollbar-thumb:active,
.upload-modal::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #4a5bc8 0%, #5a3190 100%);
}

.folder-list,
.folder-content,
.upload-modal {
    scrollbar-width: thin;
    scrollbar-color: var(--text-accent) var(--bg-tertiary);
    scroll-behavior: smooth;
}

.folder-list:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-md);
}

.folder-list:hover {
    box-shadow: var(--shadow-sm);
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.folder-list-container, .folder-content-container {
    animation: fadeIn 0.6s ease-out;
}

/* 加载状态 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    border-top-color: var(--text-accent);
    animation: spin 1s ease-in-out infinite;
}

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

/* 提示消息动画 */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* 视频放大状态下的样式调整 */
.video-layout-container.expanded .video-sidebar-area {
    display: none !important;
}

.video-layout-container.expanded .video-main-area {
    width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* 移动端视频布局调整 */
    .video-layout-container {
        flex-direction: column;
    }
    
    .video-sidebar-area {
        width: 100%;
        height: 250px;
        border-left: none;
        border-top: 1px solid var(--border-primary);
    }
    
    .feedback-input-section {
        padding: var(--spacing-sm);
    }
    
    .feedback-input-section textarea {
        min-height: 60px;
        max-height: 80px;
        font-size: 12px;
    }
    
    .video-controls-bar {
        padding: 8px 12px;
        gap: 8px;
    }
    
    .video-controls-bar .control-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .video-controls-bar .time-display {
        font-size: 11px;
        min-width: 35px;
    }

    .container {
        padding: var(--spacing-sm);
        margin: 10px;
        border-radius: var(--radius-lg);
    }
    
    .search-section {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        position: static;
    }
    
    .header-logo {
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
    }
    
    .header-logo-img {
        height: 35px;
        max-height: 40px;
    }
    
    /* 移动端搜索控制区域 */
    .search-controls-center {
        position: static;
        transform: none;
        left: auto;
        margin-bottom: var(--spacing-xs);
    }
    
    /* 移动端左侧搜索控制区域 */
    .search-controls-left {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
        padding: var(--spacing-sm);
    }
    
    .folder-list-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    .home-btn {
        width: 100%;
        min-width: auto;
    }
    
    .search-controls-left #searchInput {
        max-width: 100%;
        width: 100%;
    }
    
    /* 移动端用户信息适配 */
    .user-info-container {
        width: 100%;
        max-width: 350px;
        margin-left: 0;
        justify-content: center;
    }
    
    .user-dropdown-btn {
        padding: 6px 10px;
        gap: 6px;
    }
    
    .user-avatar {
        width: 22px;
        height: 22px;
    }
    
    .user-info-main {
        gap: 5px;
    }
    
    .user-name {
        font-size: 11px;
    }
    
    .user-role-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    
    .user-role-badge .role-icon {
        width: 11px;
        height: 11px;
    }
    
    .user-dropdown-menu {
        min-width: 180px;
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-8px) scale(0.95);
    }
    
    .user-dropdown-menu.show {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    
    .admin-link {
        font-size: 12px;
        padding: 3px 8px;
    }
    
    .logout-btn {
        width: 28px;
        height: 28px;
    }
    
    #searchInput {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
    }
    
    .search-controls-left #searchInput {
        max-width: 100%;
    }
    
    .search-controls-left #searchBtn {
        width: 100%;
        padding: 10px;
    }
    
    .content-area {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .folder-list-container {
        max-width: 100%;
    }
    
    .folder-list-container h2, .folder-content-container h2 {
        font-size: 1.1rem;
    }
    
    .modal-content {
        width: 95%;
        margin: 5% auto;
        height: 95vh;
    }
    
    .close {
        top: 15px;
        right: 20px;
        font-size: 28px;
        width: 36px;
        height: 36px;
    }
    
    /* 移动端反馈布局调整 */
    .media-container {
        flex-direction: column;
    }
    
    .feedback-history-area {
        width: 100%;
        height: 200px;
        border-left: none;
        border-top: 1px solid var(--border-primary);
    }
    
    .feedback-history-list {
        max-height: 150px;
    }
    
    .feedback-input-area {
        padding: var(--spacing-sm);
    }
    
    .feedback-input-area textarea {
        min-height: 60px;
        max-height: 80px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        margin: 1% auto;
        height: 98vh;
    }
    
    .feedback-history-area {
        height: 150px;
    }
    
    .feedback-history-list {
        max-height: 100px;
    }
    
    .feedback-input-area {
        padding: 6px;
    }
    
    .feedback-input-area textarea {
        min-height: 50px;
        max-height: 70px;
        font-size: 13px;
    }
    
    .timestamp-display {
        padding: 6px 10px;
    }
    
    .timestamp-label, .timestamp-value {
        font-size: 11px;
    }
    
    /* 移动端上传模态框优化 */
    .upload-modal {
        max-width: 95vw;
        max-height: calc(95vh + 30px);
        margin: 2.5vh auto;
    }
    
    .upload-modal-header {
        padding: 12px 14px;
    }
    
    .upload-modal-header h3 {
        font-size: 14px;
    }
    
    .upload-modal-content {
        padding: 14px;
        gap: 10px;
    }
    
    .upload-tabs {
        padding: 3px;
        gap: 4px;
    }
    
    .upload-tab {
        padding: 7px 10px;
        font-size: 11px;
    }
    
    .upload-tab .tab-icon {
        font-size: 11px;
    }
    
    .upload-tab .tab-text {
        font-size: 11px;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .auto-rename-settings {
        padding: 10px;
    }
    
    .auto-rename-settings .input-group label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .auto-rename-settings .input-group input,
    .auto-rename-settings .input-group select {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    .upload-modal .file-drop-zone {
        padding: 10px 12px;
    }
    
    .upload-modal .drop-icon {
        font-size: 20px;
        margin-bottom: 4px;
    }
    
    .upload-modal .file-drop-zone p {
        font-size: 11px;
    }
    
    .upload-modal .file-types {
        font-size: 9px;
    }
    
    .upload-modal .file-size-limit {
        font-size: 10px;
        margin-top: 4px;
    }
    
    .upload-modal .file-size-limit::before {
        font-size: 11px;
    }
    
    .upload-modal-footer {
        padding: 10px 14px;
        gap: 8px;
    }
    
    .upload-modal-footer .btn {
        padding: 6px 14px;
        font-size: 11px;
    }
}

/* ==================== 视频帮助按钮样式 ==================== */

/* 帮助按钮容器 */
.video-help-button {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.video-help-button:hover {
    opacity: 0.8;
}

/* ==================== 图片帮助按钮样式 ==================== */

/* 图片帮助按钮容器 */
.image-help-button {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.image-help-button:hover {
    opacity: 0.8;
}

/* ==================== 图片名称显示样式 ==================== */

/* 图片名称显示 */
.image-name-display {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: calc(100% - 30px);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.image-name-display.show {
    opacity: 1;
    transform: translateY(0);
}

.image-name-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

/* 对比模式下图片名称文本居中 */
.compare-image-name .image-name-text {
    text-align: center;
}

/* 图片容器悬停时显示名称 */
.image-container:hover .image-name-display {
    opacity: 1;
    transform: translateY(0);
}

/* 对比模式下图片容器悬停时显示名称（保持居中） */
.compare-image-container:hover .compare-image-name {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 当图片标题被手动隐藏时，禁用hover效果 */
.image-container.title-manually-hidden:hover .image-name-display {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
}

/* ==================== 图片缩放信息显示样式 ==================== */

/* 缩放信息显示 */
.image-zoom-info {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    min-width: 50px;
    text-align: center;
}

.image-zoom-info.show {
    opacity: 1;
    transform: translateY(0);
}

/* 图片容器悬停时显示缩放信息 */
.image-container:hover .image-zoom-info {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== 图片文件列表按钮样式 ==================== */

/* 图片文件列表按钮容器 */
.image-file-list-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 1000;
    opacity: 0.3;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.image-file-list-button:hover {
    opacity: 0.8;
}

/* 图片文件列表按钮样式 */
.image-file-list-button .control-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    backdrop-filter: blur(10px);
}

.image-file-list-button .control-btn:hover {
    background: rgba(102, 126, 234, 0.8);
    border-color: var(--border-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.image-file-list-button .control-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* 图片容器悬停时显示文件列表按钮 */
.image-container:hover .image-file-list-button {
    opacity: 1;
}

/* ==================== 图片交互提示和反馈样式 ==================== */

/* 图片交互提示 */
.image-interaction-hint {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    z-index: 200;
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    text-align: center;
    white-space: nowrap;
}

.image-interaction-hint.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.image-interaction-hint::before {
    content: "🖱️ 滚轮缩放 | 拖拽移动 | 右键重置";
}

/* 缩放反馈显示 */
.scale-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 700;
    z-index: 300;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    min-width: 60px;
    text-align: center;
}

.scale-feedback.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 帮助按钮样式 */
.help-btn {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.help-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    transform: scale(1.1);
}

.help-btn svg {
    width: 16px;
    height: 16px;
}

/* ==================== 快捷键帮助弹窗样式 ==================== */

/* 快捷键帮助弹窗 */
.shortcut-help-modal {
    max-width: 1200px;
    width: 90vw;
    max-height: 85vh;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* 快捷键帮助头部 */
.shortcut-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.shortcut-help-header h3 {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}

.shortcut-help-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcut-help-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* 快捷键帮助内容 */
.shortcut-help-content {
    padding: var(--spacing-lg);
    max-height: calc(85vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) transparent;
}

.shortcut-help-content::-webkit-scrollbar {
    width: 6px;
}

.shortcut-help-content::-webkit-scrollbar-track {
    background: transparent;
}

.shortcut-help-content::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 3px;
}

.shortcut-help-content::-webkit-scrollbar-thumb:hover {
    background: var(--border-accent);
}

/* 多列网格布局 */
.shortcut-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    align-items: start;
}

/* 快捷键列 */
.shortcut-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* 快捷键分组 */
.shortcut-section {
    margin-bottom: 0;
}

.shortcut-section:last-child {
    margin-bottom: 0;
}

.shortcut-section h4 {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-accent);
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-primary);
}

/* 快捷键列表 */
.shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 快捷键项目 */
.shortcut-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.shortcut-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    transform: translateX(2px);
}

/* 快捷键按键样式 */
.shortcut-key {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: #2a2a2a;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #404040;
    min-width: 50px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 快捷键描述样式 */
.shortcut-desc {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .shortcut-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .shortcut-help-modal {
        max-width: 95vw;
        width: 95vw;
        max-height: 90vh;
        margin: 5vh auto;
    }
    
    .shortcut-grid-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .shortcut-help-header {
        padding: var(--spacing-md);
    }
    
    .shortcut-help-header h3 {
        font-size: 16px;
    }
    
    .shortcut-help-content {
        padding: var(--spacing-md);
        max-height: calc(90vh - 80px);
    }
    
    .shortcut-section {
        margin-bottom: var(--spacing-md);
    }
    
    .shortcut-section h4 {
        font-size: 13px;
    }
    
    .shortcut-item {
        padding: 6px 10px;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .shortcut-key {
        font-size: 11px;
        min-width: 50px;
    }
    
    .shortcut-desc {
        font-size: 12px;
    }
    
    .video-help-button {
        top: 8px;
        right: 8px;
        opacity: 0.5;
    }
    
    .help-btn {
        width: 28px;
        height: 28px;
    }
    
    .help-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .shortcut-help-modal {
        max-width: 98vw;
        width: 98vw;
        max-height: 95vh;
        margin: 2.5vh auto;
    }
    
    .shortcut-help-header {
        padding: var(--spacing-sm);
    }
    
    .shortcut-help-content {
        padding: var(--spacing-sm);
        max-height: calc(95vh - 60px);
    }
    
    .shortcut-section h4 {
        font-size: 12px;
    }
    
    .shortcut-key {
        font-size: 10px;
        padding: 3px 8px;
        min-width: 45px;
    }
    
    .shortcut-desc {
        font-size: 11px;
    }
}

/* ==================== 标签系统样式 ==================== */

/* 标签下拉菜单 */
.tag-dropdown {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 150px;
    max-width: 200px;
    backdrop-filter: blur(10px);
    animation: tagDropdownFadeIn 0.2s ease-out;
}

@keyframes tagDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-dropdown-content {
    padding: var(--spacing-xs);
}

.tag-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 14px;
    color: var(--text-primary);
}

.tag-dropdown-item:hover,
.tag-dropdown-item.selected {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tag-dropdown-item.selected {
    background: var(--bg-active);
    border-left: 3px solid var(--text-accent);
}

.tag-dropdown-icon {
    font-weight: bold;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

.tag-dropdown-name {
    flex: 1;
    font-weight: 500;
}

/* 反馈内容中的标签样式 */
.feedback-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 12px;
    margin: 0 2px;
    border: 1px solid currentColor;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    transition: all 0.2s ease;
}

.feedback-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* AB区间标签样式 */
.feedback-tag.ab-interval-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #9B59B6;
    background-color: rgba(155, 89, 182, 0.1);
    border: 1px solid rgba(155, 89, 182, 0.3);
}

/* AB区间播放按钮样式 */
.ab-interval-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid rgba(155, 89, 182, 0.4);
    border-radius: 4px;
    color: #9B59B6;
    font-size: 11px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ab-interval-play-btn:hover {
    background: rgba(155, 89, 182, 0.3);
    border-color: rgba(155, 89, 182, 0.6);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(155, 89, 182, 0.3);
}

.ab-interval-play-btn:active {
    transform: scale(0.98);
}

/* 标签下拉菜单中禁用的AB区间选项 */
.tag-dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tag-dropdown-item.disabled:hover {
    background: transparent;
}

.tag-dropdown-hint {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
    font-style: italic;
}

/* 标签筛选器 */
.tag-filter-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    width: 100%;
}

.tag-filter-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    width: 100%;
}

.tag-filter-row-first {
    flex-wrap: nowrap;
}

.tag-filter-row-other {
    margin-top: var(--spacing-xs);
    padding-left: 0;
}

.tag-filter-row-single {
    flex-wrap: wrap;
    margin-top: 0;
    padding-left: 0;
}

.tag-filter-row-label {
    flex-wrap: nowrap;
    margin-top: 0;
    padding-left: 0;
    width: 100%;
}

.tag-filter-row-buttons {
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
    padding-left: 0;
    width: 100%;
}

.tag-filter-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    margin: 0;
    flex-shrink: 0;
}

.tag-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}

.tag-filter-buttons-first {
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.tag-filter-buttons-other {
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
}

.tag-filter-buttons-single {
    flex-wrap: wrap;
    flex: 1;
    padding-left: 0;
}

.tag-filter-buttons-all {
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
}

.tag-filter-btn {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
}

.tag-filter-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.tag-filter-btn.active {
    background: var(--text-accent);
    border-color: var(--text-accent);
    color: white !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.tag-filter-btn.active:hover {
    background: var(--text-accent);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

/* 标签特定颜色样式 */
.tag-filter-btn[data-filter="compose"] {
    border-color: #4A90E2;
}

.tag-filter-btn[data-filter="compose"]:hover,
.tag-filter-btn[data-filter="compose"].active {
    background: #4A90E2;
    border-color: #4A90E2;
    color: white !important;
}

.tag-filter-btn[data-filter="post"] {
    border-color: #9B59B6;
}

.tag-filter-btn[data-filter="post"]:hover,
.tag-filter-btn[data-filter="post"].active {
    background: #9B59B6;
    border-color: #9B59B6;
    color: white !important;
}

.tag-filter-btn[data-filter="action"] {
    border-color: #F39C12;
}

.tag-filter-btn[data-filter="action"]:hover,
.tag-filter-btn[data-filter="action"].active {
    background: #F39C12;
    border-color: #F39C12;
    color: white !important;
}

.tag-filter-btn[data-filter="terrain"] {
    border-color: #27AE60;
}

.tag-filter-btn[data-filter="terrain"]:hover,
.tag-filter-btn[data-filter="terrain"].active {
    background: #27AE60;
    border-color: #27AE60;
    color: white !important;
}

/* 单视频预览模式标签放大样式 */
#singleVideoArea .tag-filter-container,
.video-main-area .tag-filter-container {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

#singleVideoArea .tag-filter-label,
.video-main-area .tag-filter-label {
    font-size: 12px;
    margin-bottom: 0;
}

#singleVideoArea .tag-filter-buttons,
.video-main-area .tag-filter-buttons {
    gap: 6px;
}

#singleVideoArea .tag-filter-btn,
.video-main-area .tag-filter-btn {
    font-size: 11px;
    padding: 4px 8px;
    min-height: 24px;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

#singleVideoArea .tag-filter-btn:hover,
.video-main-area .tag-filter-btn:hover {
    transform: translateY(-2px);
}

#singleVideoArea .tag-filter-btn.active,
.video-main-area .tag-filter-btn.active {
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

#singleVideoArea .tag-filter-btn.active:hover,
.video-main-area .tag-filter-btn.active:hover {
    box-shadow: 0 6px 12px rgba(102, 126, 234, 0.5);
}

/* 标签按钮响应式优化 */
@media (max-width: 320px) {
    .tag-filter-btn {
        padding: 1px 3px;
        font-size: 8px;
        min-height: 16px;
    }
    
    .tag-filter-buttons {
        gap: 2px;
    }
}

/* 输入框中的标签提示 */
.tag-input-hint {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
    pointer-events: none;
    line-height: 1.2;
    text-align: center;
}

.feedback-input-wrapper:focus-within .tag-input-hint {
    opacity: 1;
    transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tag-filter-container {
        gap: var(--spacing-xs);
        padding: 6px 0;
    }
    
    .tag-filter-label {
        font-size: 10px;
        margin-right: 4px;
    }
    
    .tag-filter-buttons {
        gap: 4px;
    }
    
    .tag-filter-btn {
        font-size: 9px;
        padding: 2px 5px;
        min-height: 18px;
    }
    
    /* 单视频预览模式在响应式下保持较小尺寸 */
    #singleVideoArea .tag-filter-label,
    .video-main-area .tag-filter-label {
        font-size: 11px;
    }
    
    #singleVideoArea .tag-filter-btn,
    .video-main-area .tag-filter-btn {
        font-size: 10px;
        padding: 3px 6px;
        min-height: 22px;
    }
    
    #singleVideoArea .tag-filter-buttons,
    .video-main-area .tag-filter-buttons {
        gap: 5px;
    }
    
    .tag-dropdown {
        min-width: 120px;
        max-width: 150px;
    }
    
    .tag-dropdown-item {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 12px;
    }
    
    .feedback-tag {
        font-size: 11px;
        padding: 1px 4px;
    }
}

@media (max-width: 480px) {
    .tag-filter-container {
        gap: 4px;
        padding: 4px 0;
    }
    
    .tag-filter-label {
        font-size: 9px;
        margin-right: 2px;
    }
    
    .tag-filter-buttons {
        gap: 3px;
    }
    
    .tag-filter-btn {
        font-size: 8px;
        padding: 1px 4px;
        min-height: 16px;
    }
    
    /* 单视频预览模式在小屏幕下保持较小尺寸 */
    #singleVideoArea .tag-filter-label,
    .video-main-area .tag-filter-label {
        font-size: 10px;
    }
    
    #singleVideoArea .tag-filter-btn,
    .video-main-area .tag-filter-btn {
        font-size: 9px;
        padding: 2px 5px;
        min-height: 20px;
    }
    
    #singleVideoArea .tag-filter-buttons,
    .video-main-area .tag-filter-buttons {
        gap: 4px;
    }
    
    .tag-dropdown-item {
        font-size: 11px;
    }
    
    .feedback-tag {
        font-size: 10px;
    }
}

/* 单视频播放器锁定状态样式 */
.video-main-area.locked {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.video-main-area.locked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    pointer-events: none;
    border-radius: var(--radius-md);
}

.video-main-area.locked::after {
    content: '🔒 对比模式已激活';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 14px;
    font-weight: bold;
    z-index: 1001;
    pointer-events: none;
    border: 2px solid var(--border-accent);
    box-shadow: var(--shadow-lg);
}

#singleVideoArea.locked {
    position: relative;
    opacity: 0.6;
}

#singleVideoArea.locked .video-controls-bar {
    pointer-events: none;
    opacity: 0.5;
}

#singleVideoArea.locked .video-container {
    pointer-events: none;
}

/* 用户下拉菜单样式 */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    box-shadow: none;
}

.user-dropdown-btn:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

.user-dropdown-btn:active {
    transform: none;
    box-shadow: none;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 2px;
    width: 10px;
    height: 10px;
}

.user-dropdown-btn:hover .dropdown-arrow {
    transform: translateY(2px) rotate(180deg);
    color: var(--text-primary);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border-bottom: 1px solid var(--border-primary);
    position: relative;
}

.dropdown-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.dropdown-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.25) 100%);
    color: var(--text-primary);
    transform: translateX(2px);
}

.dropdown-item:active {
    transform: translateX(0);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(102, 126, 234, 0.35) 100%);
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dropdown-item:hover svg {
    color: var(--text-primary);
    transform: scale(1.1);
}

.admin-link-dropdown {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.admin-link-dropdown:hover {
    color: inherit;
}

/* 邀请码模态框样式 */
.invite-code-modal {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.invite-code-content {
    max-width: 480px;
    width: 90%;
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--bg-card) 0%, #1f1f1f 100%);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    max-height: 90vh;
    height: auto;
}

.invite-code-header {
    padding: 24px 28px 20px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invite-code-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    letter-spacing: 0.3px;
}

.invite-code-close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    padding: 0;
}

.invite-code-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.invite-code-body {
    padding: 24px 28px;
    flex: 0 0 auto;
    min-height: 0;
}

.invite-code-input-group {
    margin-bottom: 16px;
}

.invite-code-input-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.invite-code-input-group input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.invite-code-input-group input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.15),
        0 4px 12px rgba(102, 126, 234, 0.1);
}

.invite-code-input-group input::placeholder {
    color: var(--text-muted);
    letter-spacing: 0;
}

/* 权限显示区域 */
.invite-code-permissions {
    margin-top: 20px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    animation: fadeIn 0.3s ease;
    flex: 0 0 auto;
}

/* 权限加载状态 */
.permissions-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 权限为空提示 */
.permissions-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.empty-icon {
    font-size: 18px;
}

.empty-text {
    font-size: 13px;
    color: var(--text-secondary);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.permissions-header {
    margin-bottom: 12px;
}

.permissions-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.permissions-content {
    max-height: 300px;
    overflow-y: auto;
    flex: 0 0 auto;
}

.permissions-content::-webkit-scrollbar {
    width: 6px;
}

.permissions-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.permissions-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.permissions-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.permission-group-item {
    margin-bottom: 16px;
}

.permission-group-item:last-child {
    margin-bottom: 0;
}

.permission-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.group-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.group-type {
    padding: 2px 8px;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 4px;
    color: #667eea;
    font-size: 11px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.permission-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.permission-folder {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
}

.permission-badge.permission-none {
    background: rgba(128, 128, 128, 0.2);
    color: #999;
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.permission-badge.permission-read {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.permission-badge.permission-write {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.permission-badge.permission-write-download {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* 邀请码类型信息样式 */
.invite-code-type-info {
    padding: 16px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    margin-bottom: 12px;
    animation: fadeIn 0.3s ease;
}

.invite-code-type-info:last-child {
    margin-bottom: 0;
}

.type-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.type-icon {
    font-size: 20px;
    line-height: 1;
}

.type-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.type-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    margin-top: 8px;
}

.tip-icon {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 1px;
}

.tip-text {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    flex: 1;
}

.invite-code-footer {
    padding: 20px 28px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

/* 成功提示弹窗样式 */
.success-toast-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.success-toast-content {
    max-width: 420px;
    width: 90%;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--bg-card) 0%, #1f1f1f 100%);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.success-toast-body {
    padding: 40px 32px 32px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.success-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 24px rgba(16, 185, 129, 0.3),
        0 0 0 8px rgba(16, 185, 129, 0.1);
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
    animation: ripple 1s ease-out infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.success-icon {
    width: 48px;
    height: 48px;
    color: #ffffff;
    stroke-width: 3;
    position: relative;
    z-index: 1;
    animation: checkmark 0.6s ease-out 0.2s both;
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.success-icon path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.success-message {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
    margin: 0;
    animation: fadeInUp 0.5s ease 0.3s both;
}

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

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

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

/* 警告提示弹窗样式 */
.warning-toast-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.warning-toast-content {
    max-width: 420px;
    width: 90%;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--bg-card) 0%, #1f1f1f 100%);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 193, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.warning-toast-body {
    padding: 40px 32px 32px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.warning-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 24px rgba(255, 152, 0, 0.3),
        0 0 0 8px rgba(255, 152, 0, 0.1);
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.warning-icon-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.2);
    animation: ripple 1s ease-out infinite;
}

.warning-icon {
    width: 48px;
    height: 48px;
    color: #ffffff;
    stroke-width: 3;
    position: relative;
    z-index: 1;
    animation: warningPulse 0.6s ease-out 0.2s both;
}

@keyframes warningPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.warning-message {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
    margin: 0;
    animation: fadeInUp 0.5s ease 0.3s both;
}

.warning-detail {
    color: var(--text-secondary);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
    margin: 0;
    margin-top: 8px;
    animation: fadeInUp 0.5s ease 0.4s both;
}

.warning-toast-footer {
    padding: 20px 32px 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.warning-toast-footer .btn {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    min-width: 120px;
}

.warning-toast-footer .btn-warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.warning-toast-footer .btn-warning:hover {
    background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
    transform: translateY(-1px);
}

.warning-toast-footer .btn-warning:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.success-toast-footer {
    padding: 20px 32px 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.success-toast-footer .btn {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    min-width: 120px;
}

.success-toast-footer .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.success-toast-footer .btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a3f8f 100%);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.success-toast-footer .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.invite-code-footer .btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.invite-code-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.invite-code-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.invite-code-footer .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.invite-code-footer .btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a3f92 100%);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

/* 文件夹标记选择对话框样式 */
.folder-marker-modal {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.folder-marker-content {
    max-width: 700px;
    width: 90%;
    height: auto;
    max-height: 85vh;
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--bg-card) 0%, #1f1f1f 100%);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.folder-marker-header {
    padding: 28px 36px 20px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.folder-marker-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    letter-spacing: 0.3px;
}

.folder-marker-close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.folder-marker-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.folder-marker-body {
    padding: 24px 36px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(85vh - 180px);
}

.marker-section {
    margin-bottom: 32px;
}

.marker-section:last-child {
    margin-bottom: 0;
}

.marker-section-title {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    letter-spacing: 0.2px;
}

.marker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 12px;
    max-width: 100%;
}

/* 文字标记专用网格布局 - 2行显示 */
#textMarkers.marker-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.marker-item {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.marker-item:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-color: var(--border-accent);
}

.marker-item.selected {
    border-color: var(--border-accent);
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.2),
        0 4px 16px rgba(102, 126, 234, 0.3);
    transform: scale(1.1);
}

/* 正方形颜色块 */
.marker-item.square {
    border-radius: 6px;
}

/* 圆形颜色块 */
.marker-item.circle {
    border-radius: 50%;
}

/* 图形标记 */
.marker-item.shape {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    font-size: 24px;
    color: var(--text-primary);
}

.marker-item.shape:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
}

/* 清除标记 */
.marker-item.clear-marker {
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.3);
}

.marker-item.clear-marker:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.5);
}

.marker-clear-icon {
    color: #e74c3c;
    font-size: 20px;
    font-weight: bold;
}

.folder-marker-footer {
    padding: 20px 36px 32px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 文件夹列表项中的标记显示 */
.folder-list li {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.folder-marker-display {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
}

.folder-marker-display.square {
    border-radius: 3px;
}

.folder-marker-display.circle {
    border-radius: 50%;
}

.folder-marker-display.shape {
    background: transparent;
    border: none;
    font-size: 16px;
}

/* 滚动条样式 */
.folder-marker-body::-webkit-scrollbar {
    width: 8px;
}

.folder-marker-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.folder-marker-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.folder-marker-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 文字标记样式 */
.marker-item.text-marker {
    background: transparent;
    border: none;
    padding: 8px 12px;
    min-width: 60px;
    width: auto;
    height: auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-item.text-marker .text-marker-content {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

/* 预设文字标记配色 - 优化显示效果（无底框，仅文字） */
.marker-item.text-marker[data-text-type="urgent"] .text-marker-content {
    color: #ff6666;
}

.marker-item.text-marker[data-text-type="overdue"] .text-marker-content {
    color: #ff9944;
}

.marker-item.text-marker[data-text-type="rush"] .text-marker-content {
    color: #ff7777;
}

.marker-item.text-marker[data-text-type="waiting"] .text-marker-content {
    color: #ffcc44;
}

.marker-item.text-marker[data-text-type="poor"] .text-marker-content {
    color: #ff8844;
}

.marker-item.text-marker[data-text-type="excellent"] .text-marker-content {
    color: #33ee88;
}

.marker-item.text-marker[data-text-type="good"] .text-marker-content {
    color: #55ff99;
}

.marker-item.text-marker[data-text-type="completed"] .text-marker-content {
    color: #44dd88;
}

.marker-item.text-marker[data-text-type="ok"] .text-marker-content {
    color: #66ffaa;
}

/* 自定义文字标记按钮容器 */
.custom-text-marker-btn-container {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.custom-text-marker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
}

.custom-text-marker-btn .btn-icon {
    font-size: 16px;
}

/* 自定义文字标记输入对话框样式 */
.custom-text-marker-modal {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.custom-text-marker-content {
    max-width: 500px;
    width: 90%;
    height: auto;
    max-height: 85vh;
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--bg-card) 0%, #1f1f1f 100%);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.custom-text-marker-header {
    padding: 28px 36px 20px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-text-marker-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    letter-spacing: 0.3px;
}

.custom-text-marker-close {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.custom-text-marker-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.custom-text-marker-body {
    padding: 24px 36px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(85vh - 180px);
}

.text-marker-settings {
    margin-bottom: 24px;
}

.setting-group {
    margin-bottom: 16px;
}

.setting-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.setting-group input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    transition: all 0.3s ease;
}

.setting-group input[type="text"]:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.15),
        0 4px 12px rgba(102, 126, 234, 0.1);
}

.setting-group input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

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

.setting-row .setting-group {
    flex: 1;
    margin-bottom: 0;
}

.setting-group label input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.setting-group label input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.setting-group label input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.setting-group label input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.setting-group input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 8px;
}

.setting-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: all 0.2s ease;
}

.setting-group input[type="range"]::-webkit-slider-thumb:hover {
    background: #5568d3;
    transform: scale(1.1);
}

.setting-group input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: all 0.2s ease;
}

.setting-group input[type="range"]::-moz-range-thumb:hover {
    background: #5568d3;
    transform: scale(1.1);
}

.setting-group label span {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

#strokeWidthValue {
    color: #667eea;
    font-weight: 600;
    margin-left: 4px;
}

.text-marker-preview-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.text-marker-preview-section label {
    display: block;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.text-marker-preview {
    min-height: 60px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-marker-preview-text {
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

.custom-text-marker-footer {
    padding: 20px 36px 32px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 文件夹列表中的文字标记显示 - 无底框，仅文字 */
.folder-marker-display.text {
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    height: auto;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.2px;
}

/* 预设文字标记在列表中的样式 - 仅文字显示 */
.folder-marker-display.text[data-text-type="urgent"] {
    color: #ff6666;
}

.folder-marker-display.text[data-text-type="overdue"] {
    color: #ff9944;
}

.folder-marker-display.text[data-text-type="rush"] {
    color: #ff7777;
}

.folder-marker-display.text[data-text-type="waiting"] {
    color: #ffcc44;
}

.folder-marker-display.text[data-text-type="poor"] {
    color: #ff8844;
}

.folder-marker-display.text[data-text-type="excellent"] {
    color: #33ee88;
}

.folder-marker-display.text[data-text-type="good"] {
    color: #55ff99;
}

.folder-marker-display.text[data-text-type="completed"] {
    color: #44dd88;
}

.folder-marker-display.text[data-text-type="ok"] {
    color: #66ffaa;
}

/* 外部项目"new"标识样式 */
.folder-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    min-width: 40px;
    text-align: center;
}

/* 右侧标识容器样式 */
.folder-right-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* 置顶图标样式 */
.folder-pin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    cursor: default;
    flex-shrink: 0;
}

.folder-list li:hover .folder-pin-icon {
    opacity: 1;
}

/* ==================== 版本选择器样式 ==================== */

/* 版本选择器容器 */
.version-selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    position: relative;
    z-index: 10006;
}

/* 版本选择器按钮 */
.version-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-selector-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.version-selector-btn svg {
    transition: transform 0.2s ease;
}

.version-selector-btn:active svg {
    transform: rotate(180deg);
}

/* 版本选择器下拉菜单 */
.version-selector-dropdown {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10005;
    min-width: 200px;
    max-width: 280px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.version-selector-dropdown.show {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 版本选择器列表 */
.version-selector-list {
    padding: 4px;
}

/* 版本选择器项 */
.version-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
}

.version-selector-item:hover {
    background: var(--bg-hover);
}

/* 版本复选框 */
.version-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--border-accent);
}

/* 版本标签 */
.version-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
}

/* 版本徽章 */
.version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.version-name {
    flex: 1;
    color: var(--text-primary);
}

.version-count {
    color: var(--text-muted);
    font-size: 11px;
}


/* ==================== 版本分组显示样式 ==================== */

/* 版本反馈组 */
.version-feedback-group {
    margin-bottom: 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}

/* 版本反馈组标题 */
.version-feedback-header {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-left: 3px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-feedback-header:hover {
    background: var(--bg-hover);
}

/* 版本切换按钮 */
.version-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    padding: 0;
}

.version-toggle-btn svg.version-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.version-badge-header {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

/* ==================== 系统反馈样式 ==================== */

/* 系统反馈弹窗 */
.system-feedback-modal {
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.system-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.system-feedback-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.system-feedback-close {
    font-size: 28px;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.system-feedback-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    transform: rotate(90deg);
}

.system-feedback-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.system-feedback-body::-webkit-scrollbar {
    width: 6px;
}

.system-feedback-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.feedback-tip {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.feedback-tip p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.system-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.system-feedback-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.system-feedback-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.system-feedback-form .required {
    color: #f44336;
    margin-left: 2px;
}

.system-feedback-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
    outline: none;
    transition: all 0.3s ease;
}

.system-feedback-form textarea:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.system-feedback-form textarea::placeholder {
    color: var(--text-muted);
}

.char-count-container {
    display: flex;
    justify-content: flex-end;
}

.system-feedback-form .char-count {
    font-size: 12px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.system-feedback-form .media-upload-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.system-feedback-form .media-upload-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.system-feedback-form .media-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.system-feedback-form .media-upload-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    transform: translateY(-1px);
}

/* 确保系统反馈按钮始终显示 */
#addSystemFeedbackImageBtn,
#addSystemFeedbackVideoBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 系统反馈提交进度条（单行显示，不影响按钮） */
.system-feedback-submit-progress {
    width: 100%;
    margin-bottom: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(5px);
}

.system-feedback-progress-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    overflow: hidden;
}

.system-feedback-progress-bar-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.system-feedback-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.08);
}

.system-feedback-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.6), rgba(90, 111, 216, 0.7));
    border-radius: 2px;
    transition: width 0.2s ease-out;
    width: 0%;
    box-shadow: 0 0 4px rgba(102, 126, 234, 0.3);
}

.system-feedback-progress-percent {
    color: var(--text-accent);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
}

.system-feedback-progress-size {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    min-width: 90px;
    text-align: right;
}

.system-feedback-progress-speed {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}

.system-feedback-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.system-feedback-preview-item {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    overflow: hidden;
}

.system-feedback-preview-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.preview-thumbnail-container {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.preview-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-image-placeholder,
.thumbnail-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.preview-file-info {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    flex: 1;
}

.preview-file-name {
    font-size: 12px;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.preview-file-size {
    font-size: 11px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.preview-item-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
}

.preview-item-remove:hover {
    background: rgba(244, 67, 54, 0.9);
    transform: scale(1.1);
}

.upload-hint {
    margin-top: 8px;
}

.upload-hint .hint-text {
    font-size: 12px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    line-height: 1.5;
}

.system-feedback-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
    flex-shrink: 0;
}

/* 系统反馈底部按钮固定大小，防止提交时改变 */
.system-feedback-footer .btn {
    min-height: 38px;
    height: 38px;
    min-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* 确保"提交反馈"和"提交中"按钮宽度一致 */
#submitSystemFeedbackBtn {
    min-width: 100px;
    width: auto;
}

/* 系统反馈成功弹窗 */
.system-feedback-success-modal {
    z-index: 10001;
}

.system-feedback-success-content {
    max-width: 450px;
    width: 90%;
    padding: 40px;
    text-align: center;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.system-feedback-success-content.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.success-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.success-icon-container {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(102, 126, 234, 0.2));
    border-radius: 50%;
    animation: successPulse 0.6s ease-out;
    flex-shrink: 0;
}

@keyframes successPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon {
    width: 40px;
    height: 40px;
    color: #4caf50;
    animation: successCheck 0.6s ease-out 0.2s both;
}

@keyframes successCheck {
    0% {
        stroke-dasharray: 0, 100;
        opacity: 0;
    }
    100% {
        stroke-dasharray: 100, 0;
        opacity: 1;
    }
}

.success-animation h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    animation: fadeInUp 0.4s ease-out 0.3s both;
}

.success-message {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    animation: fadeInUp 0.4s ease-out 0.4s both;
}

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

.success-animation .btn {
    margin-top: 12px;
    animation: fadeInUp 0.4s ease-out 0.5s both;
    padding: 10px 24px;
}

.version-count-header {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: normal;
}

/* 版本反馈组内容 */
.version-feedback-content {
    padding: 8px;
    max-height: none;
    overflow: visible;
}

.version-feedback-content .feedback-item {
    margin-bottom: 8px;
}

.version-feedback-content .feedback-item:last-child {
    margin-bottom: 0;
}

/* 反馈项中的版本标签 */
.feedback-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    margin-right: 8px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 退出登录确认弹窗 */
.logout-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-confirm-modal.show {
    display: flex;
}

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

.logout-confirm-content {
    width: 420px;
    height: 270px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    border: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
}

.logout-confirm-content.show {
    animation: slideUpFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    50% {
        transform: scale(1.02) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.logout-confirm-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px 10px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(192, 57, 43, 0.1) 100%);
    border-bottom: 1px solid var(--border-primary);
    gap: 8px;
    flex-shrink: 0;
}

.logout-icon-container {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.2));
    border-radius: 50%;
    animation: logoutIconPulse 0.6s ease-out;
    position: relative;
}

.logout-icon-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.3));
    animation: logoutIconRipple 1.5s ease-out infinite;
}

@keyframes logoutIconPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes logoutIconRipple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.logout-icon {
    width: 24px;
    height: 24px;
    color: #e74c3c;
    animation: logoutIconDraw 0.6s ease-out 0.2s both;
    position: relative;
    z-index: 1;
}

@keyframes logoutIconDraw {
    0% {
        stroke-dasharray: 0, 100;
        opacity: 0;
        transform: rotate(-90deg);
    }
    100% {
        stroke-dasharray: 100, 0;
        opacity: 1;
        transform: rotate(0deg);
    }
}

.logout-confirm-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.logout-confirm-body {
    padding: 12px 24px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.logout-message {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
}

.logout-hint {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.logout-confirm-footer {
    display: flex;
    gap: 12px;
    padding: 10px 24px 12px;
    justify-content: center;
    flex-shrink: 0;
}

.logout-cancel-btn,
.logout-confirm-btn {
    min-width: 90px;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.logout-cancel-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.logout-cancel-btn:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.logout-cancel-btn:active {
    transform: translateY(0);
}

.logout-confirm-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.logout-confirm-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.logout-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.logout-confirm-btn:hover::before {
    width: 300px;
    height: 300px;
}

.logout-confirm-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.logout-confirm-btn:active::before {
    width: 0;
    height: 0;
}

/* 关闭动画 */
.logout-confirm-modal.closing {
    animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logout-confirm-content.closing {
    animation: slideDownFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

@keyframes slideDownFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* 退出项目确认对话框样式 */
.leave-project-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.leave-project-modal.show {
    display: flex;
}

.leave-project-content {
    width: 450px;
    height: 450px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    border: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
}

.leave-project-content.show {
    animation: slideUpFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.leave-project-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px 12px;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(192, 57, 43, 0.1) 100%);
    border-bottom: 1px solid var(--border-primary);
    gap: 12px;
    flex-shrink: 0;
}

.leave-project-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.2));
    border-radius: 50%;
    animation: leaveProjectIconPulse 0.6s ease-out;
    position: relative;
    color: #e74c3c;
}

.leave-project-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.3));
    animation: leaveProjectIconRipple 1.5s ease-out infinite;
}

@keyframes leaveProjectIconPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes leaveProjectIconRipple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.leave-project-icon svg {
    width: 32px;
    height: 32px;
    animation: leaveProjectIconDraw 0.6s ease-out 0.2s both;
    position: relative;
    z-index: 1;
    stroke: currentColor;
}

@keyframes leaveProjectIconDraw {
    0% {
        stroke-dasharray: 0, 100;
        opacity: 0;
        transform: rotate(-90deg);
    }
    100% {
        stroke-dasharray: 100, 0;
        opacity: 1;
        transform: rotate(0deg);
    }
}

.leave-project-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.leave-project-body {
    padding: 20px 24px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    gap: 8px;
}

.leave-project-message {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
}

.leave-project-hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.leave-project-folder-name {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-accent);
    margin: 8px 0 0 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.leave-project-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    justify-content: center;
    flex-shrink: 0;
    border-top: 1px solid var(--border-primary);
}

.leave-project-cancel-btn,
.leave-project-confirm-btn {
    min-width: 100px;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.leave-project-cancel-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.leave-project-cancel-btn:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.leave-project-cancel-btn:active {
    transform: translateY(0);
}

.leave-project-confirm-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.leave-project-confirm-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.leave-project-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.leave-project-confirm-btn:hover::before {
    width: 300px;
    height: 300px;
}

.leave-project-confirm-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.leave-project-confirm-btn:active::before {
    width: 0;
    height: 0;
}

/* 关闭动画 */
.leave-project-modal.closing {
    animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.leave-project-content.closing {
    animation: slideDownFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 分组权限项目相关样式 */
.leave-project-message.leave-project-warning {
    color: #e74c3c;
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 16px 0;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
    word-wrap: break-word;
    word-break: normal;
    line-height: 1.5;
    min-width: 0;
    width: 100%;
    text-align: left;
}

.leave-project-hint-group {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.08);
    border-radius: var(--radius-md);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    text-align: left;
    flex-shrink: 0;
}

.affected-projects-container {
    background: rgba(231, 76, 60, 0.05);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 0;
    text-align: left;
    flex-shrink: 0;
}

.current-project-name {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
}

.current-project-name strong {
    color: #e74c3c;
}

.affected-projects-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    max-height: 280px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    padding-right: 4px;
}

/* 受影响项目列表滚动条样式 */
.affected-projects-list::-webkit-scrollbar {
    width: 6px;
}

.affected-projects-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.affected-projects-list::-webkit-scrollbar-thumb {
    background: rgba(231, 76, 60, 0.5);
    border-radius: 3px;
}

.affected-projects-list::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 76, 60, 0.7);
}

.affected-projects-list li {
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 14px;
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(231, 76, 60, 0.3);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    flex: 0 0 auto;
    min-width: 60px;
    text-align: center;
    font-weight: 500;
}

.no-affected-projects {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
    padding: 8px 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.group-info-container {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    text-align: left;
    flex-shrink: 0;
}

.group-info-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    font-weight: 500;
}

.groups-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

/* 分组列表滚动条样式 */
.groups-list::-webkit-scrollbar {
    width: 6px;
}

.groups-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.groups-list::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.5);
    border-radius: 3px;
}

.groups-list::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.7);
}

.group-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.group-info-item .group-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.group-info-item .group-type {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: rgba(102, 126, 234, 0.15);
    border-radius: var(--radius-sm);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 分组权限项目对话框需要更大的宽度和高度 */
.leave-project-content.group-project {
    width: 600px;
    min-height: 600px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.leave-project-body.group-project {
    text-align: left;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 分组项目弹窗body滚动条样式 */
.leave-project-body.group-project::-webkit-scrollbar {
    width: 8px;
}

.leave-project-body.group-project::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.leave-project-body.group-project::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 4px;
}

.leave-project-body.group-project::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.6);
}

/* ==================== 画笔工具样式 ==================== */

/* 画笔工具菜单 */
.drawing-tool-menu {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.drawing-tool-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.drawing-tool-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawing-tool-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

/* 线条粗细选择 */
.drawing-tool-stroke-width {
    display: flex;
    gap: 4px;
}

.stroke-width-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stroke-width-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.stroke-width-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.stroke-width-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

/* 颜色选择 */
.drawing-tool-colors {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.color-btn {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.color-btn:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.color-btn.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
    transform: scale(1.1);
}

/* 工具按钮 */
.drawing-tool-tools {
    display: flex;
    gap: 4px;
}

.tool-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.tool-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.tool-btn svg {
    width: 16px;
    height: 16px;
}

/* 文字选项按钮（描边和加粗） */
.text-option-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.text-option-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.text-option-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.text-option-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* 完成按钮 */
.drawing-complete-btn {
    padding: 8px;
    width: 32px;
    height: 32px;
    background: #667eea;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawing-complete-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.drawing-complete-btn:hover {
    background: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* 截图选择遮罩 */
.screenshot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1500;
    cursor: crosshair;
}

.screenshot-selection {
    position: absolute;
    border: 2px dashed #667eea;
    background: transparent;
    display: none;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    z-index: 1700;
    box-sizing: border-box;
}

.screenshot-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    pointer-events: none;
    white-space: nowrap;
}

/* 绘制画布 */
.drawing-canvas {
    position: absolute;
    border: 2px solid var(--border-accent);
    cursor: crosshair;
    background: transparent;
}

/* 画笔按钮样式 */
.drawing-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.drawing-btn:hover {
    background: rgba(102, 126, 234, 0.8);
    transform: scale(1.05);
}

.drawing-btn svg {
    width: 16px;
    height: 16px;
}

/* 冲突处理对话框样式 */
.conflict-resolution-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.conflict-resolution-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-resolution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.conflict-resolution-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    line-height: 1;
}

.conflict-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.conflict-resolution-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.conflict-message {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-message strong {
    color: var(--text-accent);
    font-weight: bold;
}

.conflict-list {
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-primary);
}

.conflict-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    word-break: break-all;
}

.conflict-item:last-child {
    margin-bottom: 0;
}

.conflict-path {
    color: var(--text-primary);
}

.conflict-more {
    padding: 8px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-question {
    margin: 16px 0 0 0;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-resolution-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-primary);
    justify-content: flex-end;
}

.conflict-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-btn.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #ffffff;
}

.conflict-btn.btn-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.conflict-btn.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.conflict-btn.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.conflict-btn:active {
    transform: translateY(0);
}

/* ==================== 转存模态框样式 ==================== */

/* 转存模态框 */
.transfer-file-modal {
    max-width: 600px;
    max-height: 80vh;
    padding: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-file-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transfer-file-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-file-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    line-height: 1;
}

.transfer-file-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.transfer-file-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 转存源信息 */
.transfer-file-info {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.transfer-source-info {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.info-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* 转存目标区域 */
.transfer-target-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transfer-target-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 转存文件夹树 */
.transfer-folder-tree {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    padding: 8px;
    min-width: 0;
}

.transfer-loading,
.transfer-empty,
.transfer-error {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-error {
    color: #e74c3c;
}

.transfer-folder-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100%;
    width: max-content;
}

.transfer-folder-item {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 36px;
    margin-bottom: 2px;
    transition: all 0.2s ease;
    min-width: 100%;
    width: max-content;
}

.transfer-folder-item:hover {
    background: var(--bg-hover);
}

/* 文件夹内容区域 */
.transfer-folder-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-right: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 36px;
    position: relative;
    background: transparent;
    min-width: 100%;
    width: max-content;
    white-space: nowrap !important;
}

.transfer-folder-item input[type="radio"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--text-accent);
}

.transfer-folder-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-folder-icon {
    font-size: 16px;
}

.transfer-folder-name {
    flex: 0 1 auto;
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
}

.transfer-folder-expand {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-folder-expand:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.transfer-folder-expand:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.transfer-folder-children {
    width: max-content;
    min-width: 100%;
    margin-top: 0;
    padding-left: 0;
    position: relative;
}

.transfer-folder-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-folder-error {
    padding: 12px;
    color: #e74c3c;
    font-size: 12px;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 冲突处理区域 */
.transfer-conflict-section {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.transfer-conflict-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: block;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-conflict-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conflict-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.conflict-option:hover {
    background: var(--bg-hover);
}

.conflict-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--text-accent);
}

.conflict-option span {
    flex: 1;
}

/* 转存进度区域 */
.transfer-progress-section {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.transfer-progress-info {
    margin-bottom: 12px;
}

.transfer-file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

.transfer-size-info {
    font-size: 12px;
    color: var(--text-muted);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 转存模态框底部 */
.transfer-file-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.transfer-file-footer .btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    border: none;
}

.transfer-file-footer .btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
}

.transfer-file-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.transfer-file-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.transfer-file-footer .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.transfer-file-footer .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-accent);
}