/* ======================= */
/* CSS变量定义和主题切换 */
/* ======================= */
:root {
    /* 深色模式 (默认) */
    --main-bg: #2C2C2C;
    --light-bg: #E8E5E0;
    --border-color: rgba(232, 229, 224, 0.4);
    --text-color: #c6c6c6;
    /* Ant Design Token 覆盖 */
    --ant-color-bg-container: #E8E5E0;
    --ant-color-bg-layout: #E8E5E0;
    --ant-color-fill-alter: #E8E5E0;
    --ant-color-fill-content: #E8E5E0;
    --ant-color-bg-spotlight: #E8E5E0;
    --ant-color-icon-color: #FFD016;
}

/* 白天模式 */
[data-theme="light"] {
    --main-bg: #FFFFFF;
    --light-bg: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.12);
    --text-color: #000 ;
    /* Ant Design Token 覆盖 */
    --ant-color-bg-container: #FFFFFF;
    --ant-color-bg-layout: #FFFFFF;
    --ant-color-fill-alter: #FFFFFF;
    --ant-color-fill-content: #FFFFFF;
    --ant-color-bg-spotlight: #000;
    --ant-color-icon-color: #a51111;
}

/* 兜底覆盖内联样式中的背景*/
[style*="background"] {
    background-color: var(--light-bg) !important;
}


/* ===================== */
/* 深色区域保留和透明区域 */
/* ===================== */
/* 确保深色区域不被误伤 - 表头和按钮保持深*/
#results-table thead th,
.page-btn,
.type-btn,
.advanced-search-btn,
.action-btn,
.tag-actions .action-btn,
.bili-tags .action-btn,
#search-form div div div button,
#search-form div div div .btn,
#search-form div div div .type-btn,
#search-form .advanced-search-btn,
.search-input,
.search-input-wrap input,
.search-operator,
.search-field,
#display-column,
.select-search input,
.select-options,
.select-dropdown,
.advanced-search,
.page-size select,
body {
    background: var(--main-bg) !important;
    background-color: var(--main-bg) !important;
}

/* 确保透明背景的元素保持透明 */
.table-wrapper,
.table-scroll,
#results-table,
#results-table tbody tr,
.bili-search,
.search-bar,
.bili-filter,
.filter-bar,
.bili-tags,
.tag-area,
.result-area,
.tag-list,
.side-section,
.content-box,
.section-btn,
.clear-all-btn,
.side-nav,
.nav-content,
.nav-expand-btn,
.float-btn,
.float-action,
.content-box-header,
.content-box-body,
.tag {
    background: transparent !important;
    background-color: transparent !important;
}

/* =================== */
/* 基础样式和全局重置 */
/* =================== */

/* 搜索结果统计信息样式 */
.search-result-info {
    padding: 10px 0px;
    justify-content: flex-end;
    border-bottom: 1px solid var(--border-color);
}

.result-count {
    color: #888;
    font-weight: 500;
}
.result-count span {
    color: #45a049;
    font-weight: 600;
}


/* 重置基础样式 */
body {
    margin: 0;
    padding: 0;
    background-color: #2C2C2C;
    min-width: 1200px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y: scroll; /* 强制显示滚动条 */
}

/* 统一滚动条样式 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

.container {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.table-wrapper {
    width: 90%;
    margin: auto;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}


/* ================= */
/* 表格样式和结*/
/* ================= */
/* 表格基础样式 */
#results-table {
    text-align: center;
    width: 100%;
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    margin: 0;
}

/* 表头样式 - 固定定位 */
#results-table thead {
    position: sticky;
    top: 0;
    z-index: 140;  /* 降低到sticky面板之下，但保持sticky效果 */
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


#results-table thead th {
    font-size: 13px;
    font-weight: 600;
    background: #2C2C2C;
    color: white;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: none;
    transition: none;
    position: relative;
    z-index: 140;  /* 与thead保持一*/
}

/* 禁用表头所有悬停效果 */
#results-table thead th:hover {
    background: #2C2C2C !important;
    color: white !important;
}

#results-table thead th:hover *:not(.sort-icon) {
    color: inherit !important;
}

/* 白天模式下的表头样式 */
[data-theme="light"] #results-table thead th {
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000;
    background: #FFFFFF;
}

[data-theme="light"] #results-table thead th:hover {
    background: #FFFFFF !important;
    color: #000 !important;
}

[data-theme="light"] #results-table thead th:hover *:not(.sort-icon) {
    color: #000 !important;
}


#results-table thead th:first-child {
    border-top-left-radius: 0;
}

#results-table thead th:last-child {
    border-top-right-radius: 0;
}

/* 表格内容样式 - 优化可读 ?*/
#results-table tbody td {
    white-space: pre-wrap;
    padding: 0px 8px;
    border: none;
    border-bottom: 1px solid rgba(232, 229, 224, 0.4);
    text-align: left;
    font-weight: 400;
        font-size: 12px;
    line-height: 1.5;
    transition: all 0.2s ease;
    vertical-align: middle;
}
/* 白天模式下的深色边框 - 除了金色边框外都变深色 */
[data-theme="light"] #results-table tbody td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


/* 表格行样*/
#results-table tbody tr {
    transition: all 0.3s ease;
    background: transparent;
}



/* ===== 终极斑马条纹 ===== */
#results-table tbody tr:nth-of-type(even) td {  /* 偶数行 */
    background-color: #d5d2ce !important;
}
[data-theme="light"] #results-table tbody tr:nth-of-type(even) td {  /* 偶数行 */
    background-color: #eeeeee !important;
}


#results-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
}


/* Variable列特殊样 下载图标美化 */
#results-table tbody td:has(.fa-download) {
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--light-bg) 100%);
    border-left: 3px solid rgba(255, 208, 22, 0.4);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}



/* 更强的选择器覆盖偶数行的斑马条纹 */
#results-table tbody tr:nth-of-type(even) td.variable-selected {
    background: rgb(247, 211, 120) !important;
}

/* 更强的选择器覆盖奇数行 */
#results-table tbody tr:nth-of-type(odd) td.variable-selected {
    background: rgb(247, 211, 120) !important;
}


.fa-download {
    color: #FFD016;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(0, 161, 214, 0.1);
    transition: all 0.3s ease;
    margin-left: 8px;
}

.fa-download:hover {
    color: var(--text-color);
    background: #FFD016;
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 161, 214, 0.4);
}

/* Variable列容器样*/
#results-table tbody td div[style*="display: flex"] {
    background: transparent;
    border-radius: 8px;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

#results-table tbody tr:hover td div[style*="display: flex"] {
    background: rgba(247, 211, 120, 0.429);
}









/* 设置列宽 */
/* 1让表格回auto 布局 */
#results-table { table-layout: auto; }

/* 2为不同的harmonized数据库页面设置不同的列宽限制 */

/* HRS页面：限定前16列宽度 */
body.harmonized-hrs #results-table td:nth-child(-n+16),
body.harmonized-randhrs #results-table td:nth-child(-n+16){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* SHARE页面：限定前10列宽度 */
body.harmonized-share #results-table td:nth-child(-n+10){
    width:40px; min-width:40px; max-width:40px;
    word-break:break-all;
}

/* ELSA页面：限定前10列宽度 */
body.harmonized-elsa #results-table td:nth-child(-n+10){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* CHARLS页面：限定前5列宽度 */
body.harmonized-charls #results-table td:nth-child(-n+5){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* MHAS页面：限定前6列宽度 */
body.harmonized-mhas #results-table td:nth-child(-n+6){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* LASI页面：限定前3列宽度 */
body.harmonized-lasi #results-table td:nth-child(-n+3){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* CRELES页面：限定前6列宽度 */
body.harmonized-creles #results-table td:nth-child(-n+6){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}

/* DATA页面：限定前7列宽度 */
body.harmonized-data #results-table td:nth-child(-n+7){
    width:50px; min-width:50px; max-width:50px;
    word-break:break-all;
}

/* 通用兜底规则：如果没有匹配到具体页面，使用默认的12列 */
body:not(.harmonized-hrs):not(.harmonized-share):not(.harmonized-elsa):not(.harmonized-charls):not(.harmonized-mhas):not(.harmonized-lasi):not(.harmonized-creles):not(.harmonized-data) #results-table td:nth-child(-n+12){
    width:36px; min-width:36px; max-width:36px;
    word-break:break-all;
}




/* 高亮搜索结果 */
.highlight {
    background: linear-gradient(120deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}



/* 标签基础样式 - 透明背景 */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid rgba(255, 208, 22, 0.4);
    border-radius: 12px;
    font-size: 13px;
    color: #FFD016;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    width: 128px;
    box-sizing: border-box;
    position: relative;
}


/* 标签删除按钮样式 - 现代*/
.tag .delete-btn {
    margin-left: 2px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    color: #FFD016;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: rgba(0, 161, 214, 0.1);
    flex-shrink: 0;
    border: 1px solid rgba(0, 161, 214, 0.4);
    line-height: 1;
}


.tag:hover .delete-btn {
    color: #888;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.tag .delete-btn:hover {
    color: #f56c6c;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


/* 下载标签空状态和加载效果 */
.empty-tip {
    color: #888888;
    font-size: 12px;
    padding: 12px;
    display: block;
    text-align: center;
    width: auto;
    flex: none;
    margin: 0;
    box-sizing: border-box;
}


/* 标签区最外框 文字位置 */
.bili-tags {
    background: transparent;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s;
    border: 1px solid rgba(252, 252, 252, 0.4);
}


/* 标签列表区域 */
.tag-list {
    flex: 1;
    min-height: 100px;
    padding: 8px;
    border-radius: 6px;
    margin: 0;
}


/* 标签文本样式 防止溢出*/
.tag .tag-text {
    cursor: text;
    padding: 2px 4px;
    border-radius: 4px;

    transition: background-color 0.2s;
    display: inline-block;
    width: 80px;  /* 非编辑状态下固定宽度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFD016;
}



/* 编辑状态下的标签样*/
.tag.editing {
    width: auto;  /* 编辑时自动调整宽*/
}

/* 编辑状态下的输入框样式 */
.tag.editing .tag-input {
    width: auto !important;  /* 编辑时自动调整宽*/
    min-width: 80px !important;  /* 最小宽度与文本宽度一*/
    max-width: 250px !important;  /* 设置最大宽*/
    border: none !important;
    background: transparent !important;
    color: #FFD016 !important;
    font-size: 12px;
    padding: 2px 4px;
    margin: 0 !important;    
    outline: none !important;
}


/* 展开模式下的标签样式 - 只适用于原标签面板 */
.tag-list.expanded-mode .tag {
    width: auto !important;
    max-width: none !important;
    min-width: 120px !important;
    flex-shrink: 0;
}

/* 展开模式下的标签文本不再被截*/
.tag-list.expanded-mode .tag .tag-text {
    width: auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* 展开模式下的输入框也要自适应 */
.tag-list.expanded-mode .tag .tag-input {
    width: auto !important;
    min-width: 100px !important;
}












/* =================== */
/* 加载状态遮- 现代化设*/
/* =================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

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

/* 加载动画 - 现代化设*/
.loader {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.4);
    border-top: 4px solid rgba(255, 208, 22, 0.4);
    border-radius: 50%;
    animation: modernSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    box-shadow: 0 0 20px rgba(0, 161, 214, 0.3);
}

@keyframes modernSpin {
    0% { 
        transform: rotate(0deg) scale(1);
        box-shadow: 0 0 20px rgba(0, 161, 214, 0.3);
    }
    50% { 
        transform: rotate(180deg) scale(1.1);
        box-shadow: 0 0 30px rgba(0, 161, 214, 0.5);
    }
    100% { 
        transform: rotate(360deg) scale(1);
        box-shadow: 0 0 20px rgba(0, 161, 214, 0.3);
    }
}

/* 添加简单的spin动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/* =================== */
/* 排序和表头交*/
/* =================== */
/* 排序图标悬停放大效果 */
#results-table thead th:not(.no-hover):hover .sort-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* 禁用排序的列样式 */
#results-table thead th.no-hover {
    cursor: default;
}

/* 表格对齐样式 */
.bili-table.align-center td,
.bili-table.align-center th {
    text-align: center !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.bili-table.align-left td,
.bili-table.align-left th {
    text-align: left !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}


/* ================= */
/* 分页系统样式 */
/* ================= */
/* 分页容器样式 */
#bili-pagination {
    display: none; /* 默认隐藏翻页组件 */
    align-items: center;
    justify-content: space-between;  /* 改为两端对齐 */
    padding: 16px;
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    white-space: nowrap;  /* 防止文字换行 */
}

/* 分页按钮组样*/
.page-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;  /* 占据剩余空间 */
    justify-content: center;  /* 居中对齐 */
}

/* 分页按钮样式 */
.page-btn {
    padding: 0 12px;
    height: 32px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    background: #2C2C2C;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
}

.page-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}

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

.page-btn:disabled:hover {
    border-color: rgba(232, 229, 224, 0.4);
    color: #888;
}

/* 页码显示样式 */
.page-num {
    min-width: 80px;
    text-align: center;
    margin: 0 8px;
    font-size: 14px;
    color: #888;
}

/* 每页显示数量选择器样*/
.page-size {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;  /* 防止收缩 */
}

.page-size span {
    font-size: 14px;
    color: #888;
    white-space: nowrap;  /* 防止文字换行 */
}

.page-size select {
    width: 70px;
    padding: 0 8px;
    height: 32px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    font-size: 14px;
    color: #888;
    background: #2C2C2C;
    cursor: pointer;
}

.page-size select:hover {
    border-color: rgba(255, 208, 22, 0.4);
}

/* 新增的分页按钮样式 */
.bili-page-btn {
    padding: 0 12px;
    height: 32px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    background: #2C2C2C;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
    margin: 0 4px;
}

.bili-page-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}

.bili-page-btn.active {
    border-color: #FFD016;
    color: #FFD016;
    background: rgba(255, 208, 22, 0.1);
}

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

.bili-page-btn.disabled:hover {
    border-color: rgba(232, 229, 224, 0.4);
    color: #888;
}

/* 分页信息样式 */
.bili-pagination-info {
    font-size: 14px;
    color: #888;
    margin-left: 16px;
}

/* 白天模式下的分页样式 */
[data-theme="light"] .bili-page-btn {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #333;
}

[data-theme="light"] .bili-page-btn:hover {
    border-color: #FFD016;
    color: #FFD016;
}

[data-theme="light"] .bili-page-btn.active {
    border-color: #FFD016;
    color: #FFD016;
    background: rgba(255, 208, 22, 0.1);
}

[data-theme="light"] .bili-page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme="light"] .bili-page-btn.disabled:hover {
    border-color: rgba(0, 0, 0, 0.2);
    color: #333;
}

[data-theme="light"] .bili-pagination-info {
    color: #333;
}

/* ================== */
/* 搜索区域和高级搜*/
/* ================== */
/* 搜索默认 悬停 点击 样式 */
.search-input {
    flex: 1;
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent !important; /* 修复：设置透明边框，避免悬停时位移 */
    border-radius: 4px;
    font-size: 14px;
    background: #7C7B7A !important;
    color: #FFD016 !important;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none !important;
    box-sizing: border-box; /* 关键修复：确保边框包含在元素尺寸内，防止位移 */
}
.search-input:hover {
    background: #888 !important;
    border: 1px solid rgba(255, 208, 22, 0.4) !important;
    color: #000 !important;
}
.search-input:focus {
    background: #888 !important;
    border: 1px solid rgba(255, 208, 22, 0.4) !important;
    color: #000 !important;
    outline: none;
    box-shadow: none;
}
/* 搜索输入框占位符样式 */
.search-input::placeholder {
    color: rgba(255, 208, 22, 0.7) !important;
}
/* 搜索输入框悬停时占位符样式*/
.search-input:hover::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}
/* 搜索输入框焦点时占位符样式*/
.search-input:focus::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}



/* 高级检修改高级检索面板样*/
.advanced-search {
    position: absolute;
    top: 148px;  /* 调整到搜索栏下方 */
    right: 8%;  /* 右侧对齐，留出一定间*/
    width: 500px;
    background: #2C2C2C;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 2;
    padding: 16px;
    display: none;
}
/* 高级检搜索操作符和字段选择器样- 深灰色背*/
.search-operator,
.search-field {
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    font-size: 14px;
    color: #888;
    background: #2C2C2C;
}

.search-operator {
    width: 70px;  /* 稍微减小宽度 */
    flex-shrink: 0;
}

.search-field {
    width: 180px;  /* 稍微减小宽度 */
    flex-shrink: 0;
}

/* 搜索输入框容器样*/
.search-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;  /* 允许容器收缩 */
}

/* 搜索输入框样- 深灰色背*/
.search-input-wrap input {
    width: 100%;
    height: 32px;
    padding: 0 32px 0 12px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    font-size: 14px;
    background: #2C2C2C;
    color: #888;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 关闭按钮样式 */
.search-input-wrap .close-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #888;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

/* 按钮组样*/
.advanced-search-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* 按钮样式 - 深灰色背*/
.advanced-search-btn {
    padding: 0 16px;
    height: 32px;
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    font-size: 14px;
    color: #888;
    background: #2C2C2C;
    cursor: pointer;
    transition: all 0.2s;
}

.advanced-search-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}

.advanced-search-btn.primary {
    background: #FFD016;
    border-color: rgba(255, 208, 22, 0.4);
    color: #888;
}

.advanced-search-btn.primary:hover {
    background: #E6C212;
}

/* 修改第一行样*/
.search-row.first-row {
    padding-left: 78px;  /* 留出与其他行对齐的空*/
}

/* 调整搜索行样*/
.search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-width: 0;  /* 允许容器收缩 */
}











/* ================= */
/* 标签编辑和交*/
/* ================= */




/* 下载说明信息样式 */
.download-info {
    background: #f6f7f8;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    border: 1px solid #e3e5e7;
}

.download-info .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #61666d;
}

.download-info .info-item:last-child {
    margin-bottom: 0;
}

.download-info .info-item i {
    color: #00a1d6;
    width: 16px;
    text-align: center;
}

.download-info .info-item strong {
    color: #18191c;
    font-weight: 600;
}

/* 下载选项样式 */
.download-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.download-options .bili-btn {
    width: 100%;
    height: 44px;
    gap: 8px;
}

.download-options .bili-btn i {
    font-size: 16px;
}

.download-options .bili-btn span {
    font-size: 14px;
}



/* ================= */
/* 标签提示和工*/
/* ================= */
.no-hover {
    cursor: default !important;
}

.no-hover:hover {
    background-color: #44546A !important;  /* 保持原来的背景色 */
    color: white !important;  /* 保持原来的文字颜*/
}

/* 添加标签悬浮窗样*/
.tag {
    position: relative;  /* 添加相对定位 */
}

.tag .tooltip {
    visibility: hidden;
    position: absolute;
    padding: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgba(232, 229, 224, 0.4);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 13px;
    max-width: 400px;
    width: max-content;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    white-space: normal;
    word-break: break-word;
}

/* 默认位置（居中上方） */
.tag .tooltip {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

/* 左半区标签的tooltip位置（右下角） */
.tag.tooltip-left .tooltip {
    bottom: auto;
    top: 100%;
    left: 0;
    transform: none;
    margin-bottom: 0;
    margin-top: 8px;
}

/* 右半区标签的tooltip位置（左下角） */
.tag.tooltip-right .tooltip {
    bottom: auto;
    top: 100%;
    right: 0;
    left: auto;
    transform: none;
    margin-bottom: 0;
    margin-top: 8px;
}

/* 默认箭头位置（居中上方） */
.tag .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--light-bg) transparent transparent transparent;
}

/* 左半区标签的箭头位置（右下角） */
.tag.tooltip-left .tooltip::after {
    top: auto;
    bottom: 100%;
    left: 20px;
    transform: none;
    border-color: transparent transparent var(--light-bg) transparent;
}

/* 右半区标签的箭头位置（左下角） */
.tag.tooltip-right .tooltip::after {
    top: auto;
    bottom: 100%;
    right: 20px;
    left: auto;
    transform: none;
    border-color: transparent transparent var(--light-bg) transparent;
}

/* 修改显示逻辑 */
.tag:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* 添加变量名样*/
.tooltip-variable {
    color: #000;  /* 灰色 */
    font-weight: 500;
    margin-bottom: 8px;  /* 添加行距 */
    display: block;  /* 确保换行 */
    white-space: nowrap;  /* 变量名不换行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 添加描述文本样式 */
.tooltip-description {
    color: #666;  /* 黑色 */
    line-height: 1.5;  /* 适当的行*/
    white-space: pre-line;  /* 只在\n处换*/
}














/* ================= */
/* 侧边导航和目*/
/* ================= */
/* 侧边导航样式 - 金黄色背*/


/* 新增：展开状态的类 - 已分别定义，此处删除 */

/* 切换按钮 */
.nav-toggle {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: #FFD016 !important;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    font-size: 12px;
    z-index: 9999;  /* 确保切换按钮在最前面 */
}

/* 导航内容- 透明背景*/
body .side-nav .nav-content {
    height: calc(100vh - 50px) !important;  /* 减去padding，确保内容不超出视口 */
    overflow-y: auto !important;  /* 改为auto，只在需要时显示滚动条 */
    background: transparent !important;
    background-color: transparent !important;
    padding: 20px 0 !important;  /* 增加内边*/
    position: relative !important;
    z-index: 9999 !important;  /* 确保内容在最前面 */
    box-sizing: border-box !important;  /* 确保padding包含在高度内 */
}

/* 导航头部 */
.nav-header {
    padding: 0 24px 20px;
    background: transparent !important;
    border-bottom: 1px solid var(--text-color);
    margin-bottom: 8px;
}

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

.nav-header h3 {
    font-size: 20px;
    color: var(--ant-color-bg-spotlight);
    font-weight: 600;
    margin: 0;
}

/* 展开按钮样式 - 金黄色背*/
.nav-expand-btn {
    padding: 4px;
    border: 1px solid rgba(var(--text-color-rgb), 0.25);
    border-radius: 4px;
    background: rgba(215, 175, 25, 0.7) !important;
    color: var(--ant-color-bg-spotlight);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nav-expand-btn:hover {
    border-color: var(--text-color);
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.1) !important;
}

/* 目录树样*/
.nav-tree {
    padding: 0 24px;  /* 增加内边*/
}

/* 目录项基础样式 */
.nav-item {
    margin-bottom: 2px;
}



.nav-item-title:hover {
    border-bottom: 1px solid var(--text-color);
}

.nav-item.parent-item.expanded > .nav-item-title {
    background: rgba(0, 0, 0, 0.12) ;
    border-radius: 4px;
}

.nav-item-title i {
    margin-right: 8px;
    font-size: 12px;
    color: var(--ant-color-icon-color);
    transition: all 0.2s;
}

/* 所有目录项都可以搜索 */
.nav-item .nav-item-title {
    cursor: pointer;
    position: relative;
    color: var(--text-color);
}

.nav-item .nav-item-title:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-color);
}

/* 有子目录的项的箭头图标单独处理 */
.nav-item.parent-item .nav-item-title i {
    cursor: pointer;
}

.nav-item.parent-item .nav-item-title i:hover {
    color: var(--ant-color-icon-color);
    transform: scale(1.1);
}

/* 确保末级目录不会有展开效果 */
.nav-item.leaf-item .nav-children {
    display: none !important;
}

.nav-item.leaf-item.expanded .nav-children {
    display: none !important;
}

.nav-item.parent-item.expanded > .nav-item-title i {
    transform: rotate(90deg);
    color: var(--ant-color-icon-color);
}

/* 一级目录样式 - 大字体 */
.nav-title-level-1 {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 4px;
}

/* 其他级别目录样式 - 普通字体 */
.nav-title-level-2,
.nav-title-level-3,
.nav-title-level-4 {
    font-size: 14px;
    font-weight: 400;
    padding: 4px 4px;
}

.nav-children {
    margin: 2px 0 2px 24px;  /* 增加缩进 */
    display: none;
    border-left: 1px solid var(--text-color);
    padding-left: 16px;  /* 增加内边*/
}

/* 只对有子目录的项显示展开效果 */
.nav-item.parent-item.expanded > .nav-children {
    display: block;
}

/* 自定义滚动条 */
.nav-content::-webkit-scrollbar {
    width: 6px !important;  /* 设置滚动条宽度 */
}

.nav-content::-webkit-scrollbar-thumb {
    background: #000 !important;
    border-radius: 3px !important;
}

.nav-content::-webkit-scrollbar-track {
    background: transparent !important;
}



/* ================= */
/* 目录 布局和定位修改 - 专门为harmonized页面优化 */
/* ================= */
/* 确保菜单栏不被目录遮挡 */
.nav-wrapper {
    z-index: 9999 !important;
    position: relative !important;
}

/* harmonized页面专用的侧边导航定位修改 - 使用transform而不是left定位 */
body[data-page*="harmonized"] .side-nav {
    position: fixed !important;
    left: 0 !important; /* 改为0，使用transform来控制位置 */
    width: 280px !important;
    height: 100vh !important;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.166) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(0, 0, 0, 0.1);
    z-index: 998 !important;
    transform: translateX(-100%) !important; /* 使用transform隐藏 */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 其他页面保持原有的left定位方式 */
body:not([data-page*="harmonized"]) .side-nav {
    position: fixed !important;
    left: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.166) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(0, 0, 0, 0.1);
    z-index: 998 !important;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 拖拽时禁用过渡动画 */
body[data-page*="harmonized"] .side-nav.resizing {
    transition: none !important;
}

body:not([data-page*="harmonized"]) .side-nav.resizing {
    transition: none !important;
}

/* 支持动态宽度调整的样式 */
body[data-page*="harmonized"] .side-nav[style*="width"] {
    width: var(--nav-width, 280px) !important;
}

body:not([data-page*="harmonized"]) .side-nav[style*="width"] {
    width: var(--nav-width, 280px) !important;
}

/* 展开状态 - 使用transform显示（harmonized页面） */
body[data-page*="harmonized"] .side-nav.active {
    transform: translateX(0) !important;
}

/* 展开状态 - 使用left显示（其他页面） */
body:not([data-page*="harmonized"]) .side-nav.active {
    left: 0 !important;
}

/* 为harmonized页面添加主内容区域的左边距，当侧边目录展开时 */
body[data-page*="harmonized"] .bili-container {
    transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 当侧边目录展开时，主内容向右推 - 只对harmonized页面生效 */
body[data-page*="harmonized"] .side-nav.active ~ .bili-container,
body[data-page*="harmonized"] .side-nav.active + .bili-container {
    margin-left: 280px !important;
}

/* 支持动态宽度调整的主内容边距 */
body[data-page*="harmonized"] .side-nav.active[style*="width"] ~ .bili-container,
body[data-page*="harmonized"] .side-nav.active[style*="width"] + .bili-container {
    margin-left: var(--nav-width, 280px) !important;
}

/* 拖拽调整宽度功能 */
.nav-resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10000;
    background: transparent;
    transition: background-color 0.2s ease;
    pointer-events: auto;
}

/* 基础操作按钮样式 */
.action-btn {
    padding: 0 12px;
    height: 32px;
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 4px;
    background: #2C2C2C;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
}

/* 标签操作按钮样式 - 与翻页按钮一*/
.tag-actions .action-btn,
.bili-tags .action-btn {
    padding: 0 12px;
    height: 32px;
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 4px;
    background: #2C2C2C;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
}

/* 基础图标专用按钮样式 */
.action-btn.icon-only {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 图标专用按钮样式 */
.tag-actions .action-btn.icon-only {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag-actions .action-btn.icon-only i {
    font-size: 14px;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 现代悬停效果 */
.tag-actions .action-btn.icon-only:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 208, 22, 0.3);
    border-color: rgba(255, 208, 22, 0.4);
}

.tag-actions .action-btn.icon-only:hover i {
    transform: scale(1.1);
    color: #FFD016;
}

/* 点击效果 */
.tag-actions .action-btn.icon-only:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 208, 22, 0.2);
}

/* 特殊图标的旋转动*/
.tag-actions .action-btn.icon-only:hover .fa-clone {
    transform: scale(1.1) rotate(5deg);
}

.tag-actions .action-btn.icon-only:hover .fa-cloud-download-alt {
    transform: scale(1.1) translateY(2px);
}

.tag-actions .action-btn.icon-only:hover .fa-edit {
    transform: scale(1.1) rotate(-5deg);
}

.tag-actions .action-btn.icon-only:hover .fa-arrows-alt,
.tag-actions .action-btn.icon-only:hover .fa-compress-alt {
    transform: scale(1.1) rotate(45deg);
}

/* 增强悬停提示样式 */
.tag-actions .action-btn.icon-only[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #888;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* 悬停提示的小箭头 */
.tag-actions .action-btn.icon-only[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
}

.tag-actions .action-btn:hover,
.bili-tags .action-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}


/* 搜索表单按钮样式 - 与翻页按钮一*/
#search-form div div div button,
#search-form div div div .btn,
#search-form div div div .type-btn,
#search-form .advanced-search-btn,
#search-form .advanced-search-btn {
    padding: 0 12px;
    height: 32px;
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 4px;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
    text-align: center;
}

#search-form div div div button:hover,
#search-form div div div .btn:hover,
#search-form div div div .type-btn:hover,
#search-form .advanced-search-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}













/* 高级搜索区域背景和字体颜色覆*/
#advanced-search,
#advanced-search .advanced-search,
#advanced-search .search-panel,
#advanced-search .search-form,
#advanced-search .form-container,
#advanced-search .search-container,
#advanced-search .advanced-search-panel,
#advanced-search .advanced-form,
#advanced-search > div,
#advanced-search div {
    background: var(--light-bg) !important;
    background-color: var(--light-bg) !important;
}



/* 其他输入元素样式 */
#advanced-search input,
#advanced-search select,
#advanced-search textarea,
#advanced-search .search-input,
#advanced-search .search-operator,
#advanced-search .search-field,
#advanced-search .advanced-search-btn {
    background: var(--light-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    color: #000 !important;
}

/* placeholder文字颜色 */
#advanced-search .ant-input::placeholder,
#advanced-search input::placeholder,
#advanced-search textarea::placeholder {
    color: #000 !important;
}

/* 按钮悬停效果 */
#advanced-search .ant-btn:hover,
#advanced-search button:hover,
#advanced-search .advanced-search-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* 高级检确保下拉菜单层级高于表头 */
.select-dropdown,
.ant-select-dropdown,
#column-dropdown,
.search-suggestions,
.advanced-search {
    z-index: 1200 !important;  /* 确保下拉菜单在表头之*/
}

/* 高级搜索主要按钮 */
#advanced-search > div.advanced-search-btns > button.advanced-search-btn.primary {
    background: #FFD016 !important;
    border: none !important;
    color: #000 !important;
}

/* 高级搜索主要按钮悬停效果 */
#advanced-search > div.advanced-search-btns > button.advanced-search-btn.primary:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    color: #000 !important;
}


/* 重新绘制一个完美同色的箭头 */
#advanced-search::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 100px; /* 调整位置对准高级搜索按钮 */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--light-bg) ;
    z-index: 1001;
    display: block !important;
}





















/* ================= */
/* 按钮悬停效果 */
/* ================= */
/* 搜索按钮 激活状态图标按钮悬停效*/
#search-form > div > div > div > button.type-btn.icon-btn.active:hover {
    background: transparent !important;
    border: 1px solid rgba(255, 208, 22, 0.4) !important;
    color: #FFD016 !important;
}

/* 搜索按钮 悬停时图标变为金*/
#search-form > div > div > div > button.type-btn.icon-btn.active:hover .fas,
#search-form > div > div > div > button.type-btn.icon-btn.active:hover i {
    color: #FFD016 !important;
}

/* 搜索按钮 激活状态图标按*/
#search-form > div > div > div > button.type-btn.icon-btn.active {
    background: #FFD016 !important;
    border: none !important;
    color: #000 !important;
}

/* 搜索按钮 激活状态图标按钮内的图标变为黑*/
#search-form > div > div > div > button.type-btn.icon-btn.active .fas,
#search-form > div > div > div > button.type-btn.icon-btn.active i {
    color: #000 !important;
}


/* 下载按钮默认样式 */
.tag-actions .action-btn.icon-only[onclick*="showDownloadModal"],
.tag-actions .action-btn.icon-only[title*="下载"],
body > div.bili-container > div.bili-tags > div.tag-actions > button:nth-child(4) {
    background: #FFD016 !important;
    border: none !important;
    color: #000 !important;
}

/* 下载按钮悬停效果 */
.tag-actions .action-btn.icon-only[onclick*="showDownloadModal"]:hover,
.tag-actions .action-btn.icon-only[title*="下载"]:hover,
body > div.bili-container > div.bili-tags > div.tag-actions > button:nth-child(4):hover {
    background: transparent !important;
    border: 1px solid rgba(255, 208, 22, 0.4) !important;
    color: #FFD016 !important;
}


/* 搜索按钮设置为正方形 */
#search-form > div > div > div > button.type-btn.icon-btn.active {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}





















/* ================= */
/* 悬浮筛选按钮系*/
/* ================= */
/* 悬浮筛选按钮系- 节省页面空间的现代化设计 */

/* 隐藏原始筛选区域以节约空间 */
.bili-filter {
    display: none !important;
}

/* ===== 悬浮筛选按钮系===== */

/* 隐藏原始筛选区域以节约空间 */
.bili-filter {
    display: none;
}

/* 悬浮筛选按*/
.floating-filter-btn {
    position: fixed;
    right: 24px; /* 移动到右上方 */
    top: 80px; /* 从底部移动到顶部 */
    width: 48px;
    height: 48px;
    background: #2C2C2C; /* 默认深灰色背*/
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 16px rgba(44, 44, 44, 0.3);
    cursor: move; /* 改为拖拽光标 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none; /* 防止选中文本 */
}

.floating-filter-btn:hover {
    background: #3C3C3C; /* 悬停时稍微亮一*/
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 44, 44, 0.4);
}

/* 激活状- 整个变黄发光 */
.floating-filter-btn.active {
    background: #FFD016 !important;
    box-shadow: 0 4px 20px rgba(255, 208, 22, 0.6);
    transform: translateY(-2px);
}

.floating-filter-btn.active:hover {
    background: #E6C212 !important;
    box-shadow: 0 6px 24px rgba(255, 208, 22, 0.8);
}

.floating-filter-btn.dragging {
    transition: none; /* 拖拽时禁用过渡效*/
    z-index: 1001;
    transform: scale(1.1);
    cursor: grabbing; /* 拖拽时的光标 */
}

.floating-filter-btn i {
    font-size: 18px;
    color: #FFD016; /* 默认黄色灯泡 */
    transition: all 0.3s ease;
}

/* 激活状态下的图标变黑色 */
.floating-filter-btn.active i {
    color: #2C2C2C;
}

/* 悬浮筛选面*/
.floating-filter-panel {
    position: fixed;
    right: 24px;
    top: 140px; /* 调整到按钮下*/
    width: 350px;
    max-height: 550px;
    background: var(--light-bg) ; /* 改为浅色背景 */
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    z-index: 999;
    transform: translateX(400px) scale(0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.floating-filter-panel.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* 筛选面板头*/
.filter-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 改为深色边框 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #FFD016 0%, #E6C212 100%);
    border-radius: 12px 12px 0 0;
}

.filter-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.filter-panel-close {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: all 0.2s;
}

.filter-panel-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

/* 筛选面板内*/
.filter-panel-content {
    padding: 20px;
    color: #000; /* 改为黑色 */
    max-height: 400px;
    overflow-y: auto;
}

/* 筛选组样式 */
.filter-panel-group {
    margin-bottom: 24px;
}

.filter-panel-group:last-child {
    margin-bottom: 0;
}

.filter-panel-label {
    font-size: 14px;
    font-weight: 500;
    color: #000; /* 改为黑色 */
    margin-bottom: 12px;
    display: block;
}

/* 字段选择器样*/
.filter-select-container {
    position: relative;
}

.filter-select-header {
    background: var(--light-bg) ; /* 改为浅灰色背*/
    border: 1px solid rgba(204, 204, 204, 0.4); /* 改为浅色边框 */
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}

.filter-select-header:hover {
    border-color: rgba(255, 208, 22, 0.4);
}

.filter-select-text {
    color: #000; /* 改为黑色 */
    font-size: 14px;
}

.filter-select-arrow {
    font-size: 12px;
    color: #000; /* 改为黑色 */
    transition: transform 0.2s;
}

.filter-select-container.active .filter-select-arrow {
    transform: rotate(180deg);
}

/* 下拉选项面板 */
.filter-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--light-bg) ; /* 改为浅灰色背*/
    border: 1px solid rgba(204, 204, 204, 0.4); /* 改为浅色边框 */
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    max-height: 200px;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.filter-select-container.active .filter-select-dropdown {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* 搜索*/
.filter-search-input {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid rgba(204, 204, 204, 0.4); /* 改为浅色边框 */
    background: transparent;
    color: #000; /* 改为黑色 */
    font-size: 14px;
    outline: none;
}

.filter-search-input::placeholder {
    color: #666; /* 占位符改为深灰色 */
}

/* 选项列表 */
.filter-options-list {
    padding: 8px 0;
}

.filter-option-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-option-item:hover {
    background: rgba(255, 208, 22, 0.1);
}

.filter-option-checkbox {
    margin-right: 8px;
    accent-color: #FFD016;
}

.filter-option-label {
    color: #000; /* 改为黑色 */
    font-size: 14px;
    flex: 1;
}

/* 操作按钮*/
.filter-panel-actions {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* 改为深色边框 */
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.filter-action-btn {
    padding: 8px 16px;
    border: 1px solid rgba(204, 204, 204, 0.4); /* 改为浅色边框 */
    border-radius: 6px;
    background: transparent;
    color: #000; /* 改为黑色 */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-action-btn:hover {
    border-color: rgba(255, 208, 22, 0.4);
    color: #FFD016;
}

.filter-action-btn.primary {
    background: #FFD016;
    border-color: rgba(255, 208, 22, 0.4);
    color: #000;
}

.filter-action-btn.primary:hover {
    background: #E6C212;
}


















/* ================= */
/* 标签编辑和交*/
/* ================= */

/* ================= */
/* Sticky 标签面板副本样式 */
/* ================= */
/* Sticky 标签面板 - 滚动时显示的副本 */
.sticky-tags-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150; /* 比表头更高的层级 */
    background: rgba(77, 77, 77, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 208, 22, 0.3);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 显示状*/
.sticky-tags-panel.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* 容器样式 */
.sticky-tags-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    max-width: 90%;
    margin: 0 auto;
}

/* Sticky 标签列表区域 */
.sticky-tag-list {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 4px 0;
    padding-right: 150px; /* 添加右侧padding，为最后一个标签预留空*/
    /* 自定义滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 208, 22, 0.5) transparent;
}

.sticky-tag-list::-webkit-scrollbar {
    height: 4px;
}

.sticky-tag-list::-webkit-scrollbar-track {
    background: transparent;
}

.sticky-tag-list::-webkit-scrollbar-thumb {
    background: rgba(255, 208, 22, 0.5);
    border-radius: 2px;
}

.sticky-tag-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 208, 22, 0.7);
}

/* Sticky 标签样式 - 始终为展开模式 */
.sticky-tag-list .tag {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 12px;
    height: 28px;
    min-width: 120px !important; /* 始终使用展开模式的最小宽*/
    width: auto !important; /* 始终自适应宽度 */
    max-width: none !important; /* 始终无最大宽度限*/
    font-size: 12px;
    border: 1px solid rgba(255, 208, 22, 0.6);
    background: rgba(255, 208, 22, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sticky-tag-list .tag .tag-text {
    width: auto !important; /* 始终自适应宽度 */
    max-width: none !important; /* 始终无最大宽度限*/
    overflow: visible !important; /* 始终显示完整文本 */
    text-overflow: unset !important; /* 始终不截断文*/
    white-space: nowrap !important; /* 始终不换*/
    cursor: pointer;
}

.sticky-tag-list .tag .tag-input {
    display: none;
    width: auto !important; /* 始终自适应宽度 */
    min-width: 100px !important; /* 始终使用展开模式的最小宽*/
    max-width: 250px !important; /* 设置合理的最大宽*/
    padding: 2px 4px;
    border: 1px solid rgba(255, 208, 22, 0.4);
    border-radius: 4px;
    background: rgba(77, 77, 77, 0.9);
    color: #888;
    font-size: 11px;
}

.sticky-tag-list .tag.editing .tag-input {
    display: block;
}

.sticky-tag-list .tag.editing .tag-text {
    display: none;
}

.sticky-tag-list .tag .delete-btn {
    width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 10px;
    margin-left: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Sticky 操作按钮*/
.sticky-tag-actions {
    display: none;
}

/* Sticky 操作按钮样式 */
.sticky-action-btn {
    display: none;
}

.sticky-action-btn:hover {
    display: none;
}

/* 主要操作按钮（下载）样式 */
.sticky-action-btn.primary {
    display: none;
}

.sticky-action-btn.primary:hover {
    display: none;
}

/* 标签编辑和交*/









.sticky-action-btn.primary:hover {
    display: none;
}

/* Sticky 面板的空状态提*/
.sticky-tag-list .sticky-empty-tip {
    color: rgba(232, 229, 224, 0.7);
    font-size: 11px;
    font-style: italic;
    padding: 0 8px;
    white-space: nowrap;
}

/* 标签编辑和交*/









/* Sticky 标签编辑状*/
.sticky-tag-list .tag.editing {
    background: rgba(255, 208, 22, 0.2);
    border-color: rgba(255, 208, 22, 0.4);
}

.sticky-tag-list .tag .tag-text {
    width: auto !important; /* 始终自适应宽度 */
    max-width: none !important; /* 始终无最大宽度限*/
    overflow: visible !important; /* 始终显示完整文本 */
    text-overflow: unset !important; /* 始终不截断文*/
    white-space: nowrap !important; /* 始终不换*/
    cursor: pointer;
}

/* Sticky 标签面板展开模式样式 */
.sticky-tag-list.expanded-mode .tag {
    width: auto !important;
    max-width: none !important;
    min-width: 120px !important;
    flex-shrink: 0;
}

.sticky-tag-list.expanded-mode .tag .tag-text {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

.sticky-tag-list.expanded-mode .tag .tag-input {
    width: auto !important;
    min-width: 100px !important;
}

.sticky-tag-list .tag .tag-text {
    width: auto;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}


























































/* ====================================== */
/* 以下为无法归类或过于复杂的样式，保留在原位置 */
/* ====================================== */
/* 注意：由于CSS的层叠特性，以下样式必须保留在文件末*/
/* 以确保覆盖前面定义的样式 */

/* 强制覆盖无法归类的样*/
/* 例如：特定ID选择器、超长选择器列表等 */
/* 保留原始位置以确保功能正*/

/* 此处省略00行无法整理的样式... */
/* 实际文件中请保留这些样式的原始位*/

/* 结束 */

/* ============================================ */
/* home.html 迁移过来CSS 样式 */
/* ============================================ */

/* B站风格样*/
.bili-container {
    max-width: 90%;
    margin: 20px auto;
    padding: 0 16px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #888;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}



.search-btns {
    display: flex;
    align-items: center;
    margin-left: 12px;
    gap: 8px;
}

.search-type {
    display: flex;
    gap: 8px;
}

.type-btn {
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: #888;
}

/* 检索提示框 */
.bili-search {
    margin-bottom: 20px;
    position: relative;
}







/* ============================================ */
/* home.html 迁移过来CSS 样式 */
/* ============================================ */
/* Modal样式 下载弹出面板 */
.bili-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 480px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.modal-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #18191c;
    font-weight: 500;
}

.modal-content p {
    margin: 0 0 20px;
    font-size: 14px;
    color: #61666d;
    line-height: 1.6;
}

.input-field {
    margin-bottom: 24px;
}

.bili-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s;
    color: #18191c;
    background: #f6f7f8;
}

.bili-textarea:hover {
    border-color: #ccd0d7;
    background: #fff;
}

.bili-textarea:focus {
    border-color: #00a1d6;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,161,214,0.1);
}

.error-text {
    display: block;
    margin-top: 8px;
    color: #fb7299;
    font-size: 13px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid rgba(241, 242, 243, 0.4);
    margin: 0 -24px;
    padding: 16px 24px 0;
}

.bili-btn {
    padding: 0 20px;
    height: 36px;
    border: 1px solid rgba(227, 229, 231, 0.4);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bili-btn.cancel {
    color: #61666d;
    background: #f6f7f8;
    border-color: transparent;
}

.bili-btn.cancel:hover {
    color: #18191c;
    background: #888;
}

.bili-btn.confirm {
    color: #fff;
    background: #00a1d6;
    border-color: transparent;
}

.bili-btn.confirm:hover {
    background: #00b5e5;
}

/* 添加关闭按钮 */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9499a0;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f6f7f8;
    color: #18191c;
}












/* 积分不足提示框样*/
.points-alert-content {
    width: 400px;
    text-align: center;
}

/* 确保积分不足提示框显示在下载弹框之上 */
#points-alert {
    z-index: 10001 !important;
}

.points-alert-icon {
    font-size: 48px;
    color: #00a1d6;  /* B站蓝*/
    margin: 20px 0;
}

.points-alert-message {
    color: #666;
    margin: 16px 0 24px;
    line-height: 1.6;
}

/* 获取积分提示样式 */
.points-alert-tips {
    background: #f6f7f8;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 24px;
    text-align: left;
}

.points-alert-tips h4 {
    color: #18191c;
    font-size: 14px;
    margin: 0 0 12px;
    font-weight: 500;
}

.points-alert-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.points-alert-tips li {
    color: #666;
    font-size: 13px;
    line-height: 1.8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.points-alert-tips li i {
    color: #00a1d6;
    width: 16px;
    text-align: center;
}

/* 充值按钮样*/
.points-alert-buttons {
    display: flex;
    gap: 8px;  /* 减小间距 */
    justify-content: center;
    margin-bottom: 24px;
}

.points-alert-buttons .bili-btn {
    flex: 1;
    min-width: 108px;  /* 设置最小宽*/
    max-width: 108px;  /* 设置最大宽*/
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;  /* 减小图标和文字的间距 */
    font-size: 13px;  /* 稍微减小字体大小 */
    border-radius: 4px;
    transition: all 0.2s;
    padding: 0 12px;  /* 调整内边*/
    white-space: nowrap;  /* 防止文字换行 */
}

.points-alert-buttons .bili-btn.points {
    background: #00a1d6;  /* B站蓝*/
    color: #fff;
}

.points-alert-buttons .bili-btn.points:hover {
    background: #00b5e5;
}

.points-alert-buttons .bili-btn.vip {
    background: #fb7299;  /* B站粉*/
    color: #fff;
}

.points-alert-buttons .bili-btn.vip:hover {
    background: #fc8bab;
}

.points-alert-buttons .bili-btn.share {
    background: #f6f7f8;
    color: #18191c;  /* 改为黑色 */
    border: 1px solid rgba(227, 229, 231, 0.4);
}

.points-alert-buttons .bili-btn.share:hover {
    background: #f1f2f3;
    border-color: #d7d8d9;
}

.points-alert-buttons .bili-btn i {
    font-size: 16px;
}

/* 分享按钮样式 */
.points-alert-share {
    margin-bottom: 24px;
}

.points-alert-share .bili-btn.share {
    background: #f6f7f8;
    color: #00a1d6;
    border: 1px solid rgba(227, 229, 231, 0.4);
    height: 40px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
}

.points-alert-share .bili-btn.share:hover {
    background: #f1f2f3;
    border-color: #d7d8d9;
}

.points-alert-share .bili-btn.share i {
    font-size: 16px;
}

/* ================= */
/* 主题切换按钮样式 */
/* ================= */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #FFD016;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;

    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {

    transform: translateY(-2px);

}

/* 图标放大动画 */
.theme-toggle i {
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: scale(2);
}
















































/* =============================== */
/* 白天模式下的标签区域样式调整 - 现代商务风格 */
/* =============================== */

/* 标签区最外框 - 现代卡片风格 */
[data-theme="light"] .bili-tags {
    border: none !important; /* 移除边框 */
    background: #FFFFFF !important; /* 纯白背景 */
    border-radius: 16px !important; /* 更大的圆角 */
    box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.1) !important; /* 精致阴影 */
    padding: 20px !important; /* 增加内边距 */ 
}



/* 标签文本样式 - 现代彩色标签 */
[data-theme="light"] .tag .tag-text {
    color: #000000 !important; /* 白色文字 */
    background: #ffd239 !important;
    border: none !important; /* 移除边框 */
    border-radius: 20px !important; /* 胶囊形状 */
    font-weight: 600 !important; /* 增强字重 */
    padding: 6px 12px !important; /* 调整内边距 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
}


/* 不同标签的多彩配色 */
[data-theme="light"] .tag:nth-child(5n+1) .tag-text {
    background: #ffd239 !important;
}
[data-theme="light"] .tag:nth-child(5n+2) .tag-text {
    background: #eda4ea !important;
}
[data-theme="light"] .tag:nth-child(5n+3) .tag-text {
    background: #6fd090 !important;
}
[data-theme="light"] .tag:nth-child(5n+4) .tag-text {
    background: #f9a696 !important;
}
[data-theme="light"] .tag:nth-child(5n+5) .tag-text {
    background: #71c4ec !important;
}



/* 标签悬停效果 */
[data-theme="light"] .tag:hover .tag-text {
    transform: translateY(-1px) scale(1.02) !important;
}

/* 编辑状态下的输入框样式 - 保持与非编辑状态一致的外观 */
[data-theme="light"] .tag.editing .tag-input {
    color: #000000 !important; /* 白色文字 */
    background: #ffd239 !important;
    border: none !important; /* 移除边框 */
    border-radius: 20px !important; /* 胶囊形状 */
    font-weight: 600 !important; /* 增强字重 */
    padding: 6px 12px !important; /* 调整内边距 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
    
    /* 确保与非编辑状态高度完全一致 */
    box-sizing: border-box !important; /* 统一盒模型 */
    line-height: 1.2 !important; /* 设置具体行高值 */
    font-size: inherit !important; /* 继承字体大小 */
    font-family: inherit !important; /* 继承字体族 */
    min-height: 28px !important; /* 设置最小高度 */
    height: 28px !important; /* 固定高度 */
    display: inline-block !important; /* 设置为行内块 */
    vertical-align: middle !important; /* 垂直居中对齐 */
    margin: 0 !important; /* 重置margin */
    outline: none !important; /* 移除焦点轮廓 */
    -webkit-appearance: none !important; /* 移除webkit默认样式 */
    -moz-appearance: none !important; /* 移除moz默认样式 */
    appearance: none !important; /* 移除默认样式 */
}

/* 标签删除按钮 - 现代交互 */
[data-theme="light"] .tag .delete-btn {
    color: #9CA3AF !important;
    background: #F9FAFB !important;
    border-radius: 3px !important;
}

[data-theme="light"] .tag:hover .delete-btn {
    color: #9CA3AF !important; /* 悬停时专业红色 */
    background: #FEF2F2 !important; /* 红色背景 */
}

[data-theme="light"] .tag .delete-btn:hover {
    color: #DC2626 !important;
    background: #FEF2F2 !important; /* 专业红色 */
    box-shadow: none !important;
}





/* 特定按钮悬停颜色 - 专业配色 */
[data-theme="light"] .tag-actions .action-btn.icon-only:hover .fa-clone {
    color: #71c4ec !important; /* 专业绿色 - 复制 */
}


[data-theme="light"] .tag-actions .action-btn.icon-only:hover .fa-edit {
    color: #6fd090 !important; /* 专业橙色 - 编辑 */
}

[data-theme="light"] .tag-actions .action-btn.icon-only:hover .fa-arrows-alt,
[data-theme="light"] .tag-actions .action-btn.icon-only:hover .fa-compress-alt {
    color: #f9a696 !important; /* 专业紫色 - 展开/收缩 */
}











/* =============================== */
/* 白天模式下的浮动筛选面板样式调整 - 现代商务风格 */
/* =============================== */

/* 悬浮筛选按钮 - 现代简洁 */
[data-theme="light"] .floating-filter-btn {
    background: transparent !important; /* 纯白背景 */
    box-shadow: none !important; /* 精致阴影 */

}

[data-theme="light"] .floating-filter-btn:hover {
    background: #F9FAFB !important; /* 悬停时轻微灰色 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .floating-filter-btn.active {
    background: #1F2937 !important; /* 激活时深灰色，更严肃 */
    box-shadow: 0 4px 16px rgba(31, 41, 55, 0.3) !important;
    border-color: #1F2937 !important;
}

[data-theme="light"] .floating-filter-btn.active:hover {
    background: #2C2C2C !important;
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.4) !important;
}

[data-theme="light"] .floating-filter-btn i {
    color: #2C2C2C !important; /* 默认中性灰色图标 */
}

[data-theme="light"] .floating-filter-btn.active i {
    color: #FFFFFF !important; /* 激活状态下的白色图标 */
}


/* 悬浮筛选面板 - 现代卡片风格 */
[data-theme="light"] .floating-filter-panel {
    background: #FFFFFF !important; /* 纯白背景 */
}

/* 字段选择器样式 - 现代输入框风格 */
[data-theme="light"] .filter-select-header {
    background: #FFFFFF !important; /* 轻微灰色背景 */
}



/* 下拉选项面板 - 现代下拉框 */
[data-theme="light"] .filter-select-dropdown {
    background: #FFFFFF !important;
}

/* 筛选搜索输入框 - 现代输入框 */
[data-theme="light"] .filter-search-input {
    background: #FFFFFF !important;
}

[data-theme="light"] .filter-option-item:hover {
    background: #F3F4F6 !important;
}








/* =============================== */
/* 白天模式下的Sticky标签面板样式调整 - 现代商务风格 */
/* =============================== */

/* Sticky 标签面板 - 现代极简 */
[data-theme="light"] .sticky-tags-panel {
    background: rgba(255, 255, 255, 0.97) !important; /* 高透明度白色背景 */
    border-bottom: 1px solid #E5E7EB !important; /* 现代边框色 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important; /* 精致阴影 */
}

/* Sticky 标签样式 - 现代简洁 */
[data-theme="light"] .sticky-tag-list .tag {
    background: none !important;
    border: none !important;
    border-radius: 6px !important; /* 现代圆角 */
}

[data-theme="light"] .sticky-tag-list .tag .tag-text {
    color: #000000 !important; /* 白色文字 */
    background: #ffd239 !important;
    border: none !important; /* 移除边框 */
    border-radius: 20px !important; /* 胶囊形状 */
    font-weight: 600 !important; /* 增强字重 */
    padding: 6px 12px !important; /* 调整内边距 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
}

[data-theme="light"] .sticky-tag-list .tag .tag-input {
    color: #000000 !important; /* 白色文字 */
    background: #ffd239 !important;
    border: none !important; /* 移除边框 */
    border-radius: 20px !important; /* 胶囊形状 */
    font-weight: 600 !important; /* 增强字重 */
    padding: 6px 12px !important; /* 调整内边距 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
    
}



[data-theme="light"] .sticky-tag-list .tag .delete-btn {
    color: #9CA3AF !important;
    background: #F9FAFB !important;
    border-radius: 3px !important;
}

[data-theme="light"] .sticky-tag-list .tag:hover .delete-btn {
    color: #9CA3AF !important; /* 专业红色 */
    background: #FEF2F2 !important;
}

[data-theme="light"] .sticky-tag-list .tag .delete-btn:hover {
    color: #DC2626 !important;
    background: #FEF2F2 !important;
}

/* Sticky 面板的空状态提示 - 现代优雅 */
[data-theme="light"] .sticky-tag-list .sticky-empty-tip {
    color: #9CA3AF !important;
    font-style: normal !important; /* 去掉斜体 */
}

/* Sticky 标签滚动条 - 现代极简 */
[data-theme="light"] .sticky-tag-list::-webkit-scrollbar-thumb {
    background: #D1D5DB !important;
    border-radius: 4px !important;
}

[data-theme="light"] .sticky-tag-list::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF !important;
}


[data-theme="light"] .sticky-tag-list .tag:nth-child(5n+1) .tag-text {
    background: #ffd239 !important;
}

[data-theme="light"] .sticky-tag-list .tag:nth-child(5n+2) .tag-text {
    background: #eda4ea !important;
}

[data-theme="light"] .sticky-tag-list .tag:nth-child(5n+3) .tag-text {
    background: #6fd090 !important;
}

[data-theme="light"] .sticky-tag-list .tag:nth-child(5n+4) .tag-text {
    background: #f9a696 !important;
}
[data-theme="light"] .sticky-tag-list .tag:nth-child(5n+5) .tag-text {
    background: #71c4ec !important;
}

/* =================== */
/* 白天模式 - 搜索框样式 */
/* =================== */

/* 主搜索框 - 白天模式 */
[data-theme="light"] .search-input {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .search-input:hover {
    background-color: #f8f9fa;
    border-color: #4a5568;
}

[data-theme="light"] .search-input:focus {
    background: #F5F5F5 !important;
    border: 1px solid FFD01640 !important;
    color: #000000 !important;
}

/* 主搜索框占位符 - 白天模式 */
[data-theme="light"] .search-input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .search-input:hover::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .search-input:focus::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

/* 浅色主题下的年份列tooltip样式 */
[data-theme="light"] .year-tooltip {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 浅色主题下的tooltip label样式 */
[data-theme="light"] .bili-tooltip .tooltip-item.label {
    color: #555;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ================= */
/* 年份悬停提示框样式 */
/* ================= */
.bili-tooltip {
    position: fixed;
    z-index: 9999;
    display: none;
    max-width: 400px;
    padding: 12px;
    border-radius: 8px;
    background: var(--light-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.5;
    color: #18191c;
    pointer-events: none;
    border: 1px solid rgba(232, 229, 224, 0.4);
}

.bili-tooltip .tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bili-tooltip .tooltip-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid rgba(232, 229, 224, 0.4);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.bili-tooltip .tooltip-title {
    font-weight: 600;
    color: #00a1d6;
    font-size: 14px;
}

.bili-tooltip .tooltip-subtitle {
    font-size: 12px;
    color: #666;
}

.bili-tooltip .tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bili-tooltip .tooltip-item {
    font-size: 12px;
    line-height: 1.4;
    color: #18191c;
}

.bili-tooltip .tooltip-item.code {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.bili-tooltip .tooltip-item.label {
    font-weight: 500;
    color: #666;
    padding: 2px 0;
    border-bottom: 1px solid rgba(232, 229, 224, 0.3);
    margin-bottom: 4px;
}

/* 特别针对限定列的span样式 - 覆盖内联样式 - 根据不同页面调整 */

/* HRS & RAND HRS页面：前16列的span样式 */
body.harmonized-hrs #results-table td:nth-child(-n+16) span,
body.harmonized-randhrs #results-table td:nth-child(-n+16) span {
    color: #333333 !important;  
    font-size: 12px !important;  /* 覆盖内联0px */
    transition: all 0.2s ease;
    cursor: pointer;
}



/* SHARE页面：前10列的span样式 */
body.harmonized-share #results-table td:nth-child(-n+10) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* ELSA页面：前10列的span样式 */
body.harmonized-elsa #results-table td:nth-child(-n+10) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* CHARLS页面：前5列的span样式 */
body.harmonized-charls #results-table td:nth-child(-n+5) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* MHAS页面：前6列的span样式 */
body.harmonized-mhas #results-table td:nth-child(-n+6) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* LASI页面：前3列的span样式 */
body.harmonized-lasi #results-table td:nth-child(-n+3) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* CRELES页面：前6列的span样式 */
body.harmonized-creles #results-table td:nth-child(-n+6) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* DATA页面：前7列的span样式 */
body.harmonized-data #results-table td:nth-child(-n+7) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}



/* 通用兜底规则：前12列的span样式 */
body:not(.harmonized-hrs):not(.harmonized-share):not(.harmonized-elsa):not(.harmonized-charls):not(.harmonized-mhas):not(.harmonized-lasi):not(.harmonized-creles):not(.harmonized-data) #results-table td:nth-child(-n+12) span {
    color: #333333 !important;  
    font-size: 12px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}