/* ========================================
   收藏功能样式
   ======================================== */
/* 父容器设置 flex 布局，实现多行排列 */
#fav-list {
    margin-top: 16px;
    /* 设置顶部外边距为16px，与上方元素保持间距 */
    flex-wrap: wrap;
    /* 允许子元素在容器宽度不足时换行显示 */
    display: grid;
    /* 使用CSS网格布局模型 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 创建2列等宽网格，每列最小宽度为0，最大为1fr */
    gap: 10px;
    /* 设置网格项之间的间距为10px */
    position: relative;
    /* 相对定位，用于子元素的绝对定位参考 */
}

.fav-card {
    cursor: pointer;
    /* 鼠标悬停时显示指针形状，表示可点击 */
    padding: 5px;
    /* 内边距5px，内部元素与边框保持间距 */
    border-radius: 8px;
    /* 边框圆角8px，使卡片边角圆润 */
    border: 1px solid #d4d7dd;
    /* 1px宽边框，颜色#d4d7dd */
    background-color: #ffffff;
    /* 背景色白色 */
    background: var(--BoxItemBackground-color);
    /* 使用CSS变量定义的背景颜色 */
    position: relative;
    /* 相对定位，作为子元素绝对定位的参考 */
    /* flex: 0 0 25%; */
    /* 已注释：设置弹性项尺寸，不放大不缩小，基础尺寸25% */
    /* max-width: 25%; */
    /* 已注释：最大宽度25% */
}

/* 鼠标悬停卡片动画 */
.fav-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* 鼠标悬停时添加阴影效果，水平偏移0，垂直偏移2px，模糊半径8px，颜色rgba(0,0,0,0.08) */
    transform: translateY(-2px);
    /* 鼠标悬停时向上移动2px，产生浮动效果 */
}

#fav-add-card {
    border: 1px dashed rgb(188, 220, 255);
    /* 1px宽虚线边框，颜色为浅蓝色rgb(188,220,255) */
    display: flex;
    /* 使用弹性盒布局模型 */
    flex-direction: row;
    /* 设置弹性子元素水平方向排列 */
    align-items: center;
    /* 垂直居中对齐弹性子元素 */
    justify-content: center;
    /* 水平居中对齐弹性子元素 */
    background: #ffffff;
    /* 背景色设置为白色 */
}

/* 链接容器设置 flex，让图标和文字垂直居中 */
.fav-link {
    box-sizing: border-box;
    /* 设置盒模型为border-box，宽度和高度包含边框和内边距 */
    display: flex;
    /* 使用弹性盒布局模型 */
    position: relative;
    /* 相对定位，作为子元素绝对定位的参考 */
    flex-direction: row;
    /* 弹性子元素水平方向排列 */
    justify-content: center;
    /* 水平居中对齐弹性子元素 */
    align-items: center;
    /* 垂直居中对齐弹性子元素 */
}

/* 图标样式，控制尺寸 */
.fav-icon {
    display: block;
    /* 将元素显示为块级元素，独占一行 */
    width: auto;
    /* 宽度自动调整 */
    height: 90%;
    /* 高度为父元素的90% */
    width: 32px;
    /* 固定宽度为32px */
    height: 32px;
    /* 固定高度为32px */
    position: relative;
    /* 相对定位，作为子元素绝对定位的参考 */
    object-fit: cover;
    /* 图片保持比例并覆盖整个容器，可能会裁剪 */
    border-radius: 6px;
    /* 边框圆角6px */
    flex-shrink: 0;
    /* 弹性布局中不允许缩小 */
}

.fav-context {
    padding-left: 7px;
    /* 左侧内边距7px，与图标保持间距 */
    flex: 1;
    /* 弹性布局中占比1，占据剩余空间 */
    min-width: 0;
    /* 最小宽度0，防止内容溢出容器 */
}

.fav-title {
    font-weight: bold;
    /* 设置字体粗细为粗体 */
    text-overflow: ellipsis;
    /* 当文本溢出时显示省略号 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    word-break: break-all;
    /* 允许在单词内换行 */
    white-space: nowrap;
    /* 禁止文本换行 */
    color: var(--Body-font-color);
    /* 使用CSS变量定义的字体颜色 */
    -webkit-line-clamp: 1;
    /* 限制文本显示行数为1行（WebKit浏览器） */
    line-clamp: 1;
    /* 限制文本显示行数为1行 */
    display: -webkit-box;
    /* 将元素显示为弹性伸缩盒子模型（WebKit浏览器） */
    -webkit-box-orient: vertical;
    /* 设置弹性盒子的排列方向为垂直（WebKit浏览器） */
}

.fav-desc {
    text-overflow: ellipsis;
    /* 文本溢出时显示省略号 */
    transition: .3s;
    /* 设置过渡效果持续时间为0.3秒 */
    font-size: 12px;
    /* 字体大小为12px */
    overflow-wrap: break-word;
    /* 允许在单词内换行以防止溢出 */
    display: -webkit-box;
    /* 使用WebKit弹性盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置WebKit弹性盒子垂直排列 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    -webkit-line-clamp: 1;
    /* WebKit浏览器限制显示1行文本 */
    line-clamp: 1;
    /* 限制显示1行文本 */
    line-height: 1.4;
    /* 行高为1.4倍字体大小 */
    color: #888;
    /* 字体颜色为#888（灰色） */
    /* white-space: nowrap; */
    /* 已注释：禁止文本换行 */
}

/* 分类标签栏样式 - 人性化设计 */
.fav-category-tabs {
    display: flex;
    /* 使用弹性盒布局模型 */
    flex-wrap: wrap;
    /* 允许子元素在容器宽度不足时换行 */
    gap: 10px;
    /* 设置子元素之间的间距为10px */
    margin: 16px 0;
    /* 上下外边距16px，左右外边距0 */
    padding: 16px;
    /* 内边距16px，内部元素与边框保持间距 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /* 设置135度角的渐变背景，从#f8f9fa到#e9ecef */
    border: 1px solid #dee2e6;
    /* 1px宽的边框，颜色为#dee2e6 */
    border-radius: 12px;
    /* 边框圆角12px，使容器边角圆润 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* 添加阴影效果，水平偏移0，垂直偏移2px，模糊半径8px，颜色透明度0.06 */
    position: relative;
    /* 相对定位，作为子元素绝对定位的参考 */
}

.fav-category-tabs::before {
    content: '🏷️ 分类：';
    /* 伪元素内容，显示分类标签文字和图标 */
    position: absolute;
    /* 绝对定位，脱离文档流 */
    top: -12px;
    /* 距离父元素顶部-12px，向上偏移超出容器 */
    left: 16px;
    /* 距离父元素左侧16px */
    background: #ffffff;
    /* 背景色白色，覆盖父元素边框 */
    padding: 0 8px;
    /* 左右内边距8px，上下0，使文字居中 */
    font-size: 12px;
    /* 字体大小12px */
    color: #6c757d;
    /* 字体颜色#6c757d（灰色） */
    font-weight: 600;
    /* 字体粗细600（半粗体） */
}

.fav-category-tab {
    background: #ffffff;
    /* 背景色设置为白色 */
    border: 1px solid #dee2e6;
    /* 1px宽边框，颜色#dee2e6 */
    border-radius: 25px;
    /* 边框圆角25px，使按钮呈椭圆形 */
    padding: 8px 18px;
    /* 上下内边距8px，左右内边距18px */
    font-size: 14px;
    /* 字体大小14px */
    color: #6c757d;
    /* 字体颜色#6c757d（灰色） */
    cursor: pointer;
    /* 鼠标悬停时显示指针形状，表示可点击 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 所有属性变化时应用0.3秒过渡效果，使用自定义缓动函数 */
    white-space: nowrap;
    /* 禁止文本换行 */
    outline: none;
    /* 移除元素获得焦点时的默认轮廓线 */
    font-weight: 500;
    /* 字体粗细500（中等） */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    /* 添加阴影效果，水平偏移0，垂直偏移1px，模糊半径3px，颜色透明度0.08 */
}

.fav-category-tab:hover {
    background: #f8f9fa;
    /* 鼠标悬停时背景色变为#f8f9fa（浅灰色） */
    border-color: #007bff;
    /* 鼠标悬停时边框颜色变为#007bff（蓝色） */
    color: #495057;
    /* 鼠标悬停时字体颜色变为#495057（深灰色） */
    transform: translateY(-1px);
    /* 鼠标悬停时向上移动1px，产生上浮效果 */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    /* 鼠标悬停时添加阴影，水平偏移0，垂直偏移2px，模糊半径8px，颜色为蓝色带0.15透明度 */
}

.fav-category-tab.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    /* 激活状态下的背景为135度蓝色渐变，从#007bff到#0056b3 */
    border-color: #007bff;
    /* 激活状态下边框颜色为#007bff（蓝色） */
    color: #ffffff;
    /* 激活状态下字体颜色为白色 */
    box-shadow: 0 3px 12px rgba(0, 123, 255, 0.3);
    /* 激活状态下添加阴影，水平偏移0，垂直偏移3px，模糊半径12px，蓝色带0.3透明度 */
    transform: translateY(-1px);
    /* 激活状态时向上移动1px，产生选中效果 */
}

.fav-category-tab.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    /* 激活状态下鼠标悬停时，背景为135度深蓝色渐变，从#0056b3到#004085 */
    transform: translateY(-1px);
    /* 激活状态下鼠标悬停时保持向上移动1px的效果 */
}

/* 分类标签样式 - 完全隐藏，但保留tooltip功能 */
.fav-category-tag {
    position: absolute;
    /* 绝对定位，脱离文档流 */
    width: 1px;
    /* 设置宽度为1px */
    height: 1px;
    /* 设置高度为1px */
    overflow: hidden;
    /* 隐藏溢出内容 */
    clip: rect(0, 0, 0, 0);
    /* 使用clip属性裁剪元素，使其不可见 */
    white-space: nowrap;
    /* 禁止文本换行 */
    border: 0;
    /* 无边框 */
    margin: 0;
    /* 外边距为0 */
    padding: 0;
    /* 内边距为0 */
    opacity: 0;
    /* 完全透明 */
    pointer-events: none;
    /* 元素不响应鼠标事件 */
    /* 完全隐藏但保持在DOM中，用于屏幕阅读器可访问性 */
}



/* 只在“全部”分类下显示tooltip */
body:not(.specific-category-active) .fav-card[data-category]:hover::before {
    content: '分类: ' attr(data-category) !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: opacity 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    font-weight: normal !important;
    pointer-events: none !important;
    margin-bottom: 0 !important;
}

/* 只在“全部”分类下显示小箭头 */
body:not(.specific-category-active) .fav-card[data-category]:hover::after {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid rgba(0, 0, 0, 0.9) !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
    margin-bottom: 0 !important;
}



.fav-card.editing {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
}

.fav-card.editing:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #ddd;
}

/* 删除按钮 */
.fav-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #ff6b6b;
    font-size: 14px;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    opacity: 0.3;
    /* 默认低透明度，不明显 */
    visibility: visible;
}

/* 编辑模式下且鼠标移入卡片时显示清楚 */
.fav-card.editing:hover .fav-remove {
    opacity: 1;
}

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

/* 编辑按钮样式 */
.fav-edit {
    position: absolute;
    top: 4px;
    right: 28px;
    /* 位于删除按钮左侧 */
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #4caf50;
    /* 绿色背景 */
    font-size: 12px;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    opacity: 0.3;
    /* 默认低透明度，不明显 */
    visibility: visible;
}

/* 编辑模式下且鼠标移入卡片时显示清楚 */
.fav-card.editing:hover .fav-edit {
    opacity: 1;
}

.fav-edit:hover {
    background: #45a049;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.fav-edit:active {
    transform: scale(0.95);
}

/* 拖拽手柄样式 */
.fav-drag-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    cursor: grab;
    width: 20px;
    height: 20px;
    color: #666;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    z-index: 2;
    user-select: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fav-card.editing .fav-drag-handle {
    opacity: 1;
    visibility: visible;
}

.fav-drag-handle:hover {
    background: #e3f2fd;
    color: #2196f3;
    transform: scale(1.05);
}

.fav-drag-handle:active {
    cursor: grabbing;
    background: #2196f3;
    color: white;
    transform: scale(0.95);
}


/* 分类选择器样式 */
.fav-form-select {
    background: #ffffff;
    border: 1px solid #d4d7dd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    min-width: 120px;
    outline: none;
    transition: all 0.3s ease;
}

.fav-form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.fav-form-select option {
    padding: 6px 12px;
}

.fav-item.selected {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.fav-item {
    transition: all 0.3s ease;
}

.fav-item:hover {
    background: #f5f5f5;
}

/* 分享控件 */
#share-controls {
    margin-bottom: 15px;
    border-radius: 8px;
}

.fav-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 编辑模式下调整链接位置，避免与拖拽手柄重叠 */
/* .fav-card[data-index] .fav-link {
      margin-left: 20px;
  } */

/* 我的收藏容器 */
#my-fav-box {
    display: none;
}

.my-fav-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.my-fav-box-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.my-fav-box-title-icon {
    margin-right: 10px;
}

.my-fav-box-actions {
    display: flex;
    gap: 10px;
}

.my-fav-box-btn {
    background: #f0f4ff;
    color: #3273dc;
    border: 1px solid #d4d7dd;
    border-radius: 8px;
    padding: 4px 16px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.my-fav-box-btn:hover {
    background: #e1e8ff;
    border-color: #3273dc;
}

/* 导入按钮下拉菜单样式 */
.fav-import-dropdown {
    position: relative;
    display: inline-block;
}

.fav-import-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #d4d7dd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 120px;
    overflow: hidden;
    margin-top: 5px;
}

.fav-import-dropdown:hover .fav-import-menu {
    display: block;
}

.fav-import-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.2s ease;
}

.fav-import-option:hover {
    background: #f0f4ff;
}

.fav-import-option:first-child {
    border-bottom: 1px solid #eee;
}

/* 收藏卡片 */
.fav-card {
    transition: all 0.3s ease;
}

.fav-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #3385ff;
}

#fav-add-card:hover {
    background: #f0f4ff;
    border-color: #3385ff;
}

/* 链接容器 */
.fav-link {
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 编辑模式下的特殊样式 */
.fav-card[data-index] {
    cursor: default;
}

.fav-card[data-index]:active {
    transform: none;
}

/* 只在编辑模式下禁用链接点击 */
.fav-card[data-index] .fav-link {
    pointer-events: auto;
}

/* 编辑模式下禁用链接点击 */
.fav-card[data-index].editing .fav-link {
    pointer-events: none;
}

/* 收藏分组标签 */
.fav-groups-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.fav-group-tab {
    background: #f0f4ff;
    color: #3273dc;
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.fav-group-tab:hover {
    background: #e1e8ff;
}

.fav-group-tab.active {
    background: #3385ff;
    color: white;
}

/* 弹窗样式 */
#fav-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.fav-form-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.fav-form-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.fav-form-group {
    margin-bottom: 16px;
}

.fav-form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #555;
}

.fav-form-label.required::after {
    content: ' *';
    color: #ff4444;
}

#fav-form-url {
    width: 69%;
}

.fav-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.fav-form-input:focus {
    outline: none;
    border-color: #3385ff;
    box-shadow: 0 0 0 2px rgba(51, 133, 255, 0.1);
}

.fav-form-input.error {
    border-color: #ff4444;
}

.fav-form-help {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    line-height: 1.4;
}

.fav-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.auto-get-btn {
    width: 30%;
    background: #3385ff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.auto-get-btn:hover {
    background: #2968cc;
}

/* 选择站点弹窗 */
#select-site-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.select-site-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.select-site-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* 搜索栏 */
.site-modal-search-bar {
    margin-bottom: 16px;
}

.site-modal-search-bar input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.site-modal-search-bar input:focus {
    outline: none;
    border-color: #3385ff;
    box-shadow: 0 0 0 2px rgba(51, 133, 255, 0.1);
}

/* 操作栏 */
.site-modal-actions {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
}

.btn-outline {
    background: transparent;
    color: #3385ff;
    border: 1px solid #3385ff;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #3385ff;
    color: white;
}

/* Tab样式 */
.site-modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.site-modal-tab-btn {
    background: #f0f4ff;
    color: #3273dc;
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-width: 80px;
}

.site-modal-tab-btn:hover {
    background: #e1e8ff;
}

.site-modal-tab-btn.active {
    background: #3385ff;
    color: white;
}

/* Tab内容 */
.site-modal-tab-content {
    position: relative;
}

.site-modal-tab-panel {
    display: none;
}

.site-modal-tab-panel.active {
    display: block;
}

/* 分组标题样式 */
.site-modal-group-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 12px 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f4ff 100%);
    border-radius: 8px;
    color: #3273dc;
    border-left: 4px solid #3385ff;
}

/* 卡片列表 */
.site-modal-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* 站点卡片样式优化 */
.site-modal-card {
    border: 2px solid #e8f4ff;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.site-modal-card:hover {
    border-color: #3273dc;
    box-shadow: 0 4px 12px rgba(50, 115, 220, 0.15);
    transform: translateY(-2px);
}

/* 选中状态样式 */
.site-modal-card.selected {
    border-color: #3385ff;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f4ff 100%);
    box-shadow: 0 4px 12px rgba(50, 115, 220, 0.2);
}

.site-modal-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3385ff, #4c8bf5);
}

/* 已收藏状态样式 */
.site-modal-card.collected {
    border-color: #e0e0e0;
    background: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
}

.site-modal-card.collected:hover {
    border-color: #e0e0e0;
    box-shadow: none;
    transform: none;
}

/* 卡片内容布局 */
.site-modal-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* 复选框样式 */
.site-modal-card-checkbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.site-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3385ff;
}

.site-modal-card.collected .site-checkbox {
    display: none;
}

/* 图标样式 */
.site-modal-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

/* 信息区域 */
.site-modal-card-info {
    flex: 1;
    min-width: 0;
}

.site-modal-card-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-modal-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 状态区域 */
.site-modal-card-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 已收藏标签 */
.site-modal-card-badge {
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .site-modal-tabs {
        flex-wrap: wrap;
    }

    .site-modal-tab-btn {
        font-size: 12px;
        padding: 6px 12px;
        min-width: 60px;
    }

    .site-modal-card-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .site-modal-group-title {
        font-size: 14px;
        margin: 15px 0 8px 0;
        padding: 6px 10px;
    }
}

/* 响应式设计 - 移动设备适配 */
@media screen and (max-width: 768px) {
    #fav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .fav-card {
        padding: 8px;
    }

    .fav-icon {
        width: 28px;
        height: 28px;
    }

    .fav-title {
        font-size: 14px;
    }

    .fav-desc {
        font-size: 11px;
    }

    /* 移动设备上拖拽手柄样式调整 */
    .fav-drag-handle {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 14px;
        top: 6px;
        left: 6px;
    }

    /* 移动设备上删除按钮样式调整 */
    .fav-remove {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 18px;
        top: 6px;
        right: 6px;
    }


    /* 移动设备上按钮样式调整 */
    .my-fav-box-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .my-fav-box-actions {
        gap: 8px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .fav-drag-handle {
        /* 在触摸设备上增大点击区域 */
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
    }

    .fav-remove {
        /* 在触摸设备上增大点击区域 */
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 22px;
    }
}

.site-modal-search-bar {
    margin-bottom: 16px;
    text-align: center;
}

#site-modal-search-input {
    width: 80%;
    padding: 8px 12px;
    border: 1px solid #d4d7dd;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    margin: 0 auto;
    display: block;
}

.site-modal-group-title {
    font-size: 16px;
    font-weight: bold;
    color: #3273dc;
    margin: 20px 0 10px 0;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f4ff 100%);
    border-left: 4px solid #3273dc;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(51, 115, 220, 0.1);
}

.site-modal-group-title:first-child {
    margin-top: 0;
}

.site-modal-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.site-modal-card {
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: 320px;
    flex: 1 1 220px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.site-modal-card.selected {
    border-color: #3385ff;
    background: #eaf3ff;
    box-shadow: 0 2px 8px #3385ff22;
}

.site-modal-card.collected {
    background: #f2f2f2;
    color: #aaa;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.7;
}

.site-modal-card-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #bbb;
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    padding: 2px 8px;
}

.site-modal-card-check {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #3385ff;
    font-size: 18px;
    font-weight: bold;
}

.site-modal-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

.site-modal-card-info {
    flex: 1;
    min-width: 0;
}

.site-modal-card-title {
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-modal-card-desc {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .site-modal-group-title {
        font-size: 14px;
        margin: 15px 0 8px 0;
        padding: 6px 10px;
    }

    .site-modal-card-list {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 15px;
    }
}

/* 站点卡片样式优化 */
.site-modal-card {
    border: 2px solid #e8f4ff;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.site-modal-card:hover {
    border-color: #3273dc;
    box-shadow: 0 4px 12px rgba(50, 115, 220, 0.15);
    transform: translateY(-2px);
}

/* 选中状态样式 */
.site-modal-card.selected {
    border-color: #3273dc;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f4ff 100%);
    box-shadow: 0 4px 12px rgba(50, 115, 220, 0.2);
}

.site-modal-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3273dc, #4c8bf5);
}

/* 已收藏状态样式 */
.site-modal-card.collected {
    border-color: #e0e0e0;
    background: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
}

.site-modal-card.collected:hover {
    border-color: #e0e0e0;
    box-shadow: none;
    transform: none;
}

/* 卡片内容布局 */
.site-modal-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* 图标样式 */
.site-modal-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

/* 信息区域 */
.site-modal-card-info {
    flex: 1;
    min-width: 0;
}

.site-modal-card-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-modal-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 状态区域 */
.site-modal-card-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 已收藏标签 */
.site-modal-card-badge {
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

/* 选中状态勾选 */
.site-modal-card-check {
    width: 24px;
    height: 24px;
    background: #3273dc;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(50, 115, 220, 0.3);
    animation: checkAppear 0.3s ease;
}

@keyframes checkAppear {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 搜索结果相关样式 */
.site-modal-card-match-type {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* 高亮关键词样式 */
.site-modal-card-title mark,
.site-modal-card-desc mark {
    background-color: #ffeb3b !important;
    padding: 1px 2px !important;
    border-radius: 2px !important;
    color: #333 !important;
    font-weight: bold;
}

/* 搜索结果标题样式 */
.site-modal-group-title:has(span:contains("🔍")) {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    border-left-color: #ffc107 !important;
    color: #856404 !important;
}

/* RSS结果相关样式 */
.site-modal-group-title.rss-results-title {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    border-left-color: #2196f3 !important;
    color: #1565c0 !important;
}

/* RSS图标样式 */
.site-modal-card-icon.rss-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

/* RSS徽章样式 */
.site-modal-card-badge.rss-badge {
    background: #2196f3 !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}

/* RSS元数据样式 */
.site-modal-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #666;
}

.site-modal-card-date {
    color: #888;
}

.site-modal-card-source {
    color: #666;
}

/* RSS项目特殊样式 */
.site-modal-card.rss-item {
    border-color: #e3f2fd;
    background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
}

.site-modal-card.rss-item:hover {
    border-color: #2196f3;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.site-modal-card.rss-item.selected {
    border-color: #2196f3;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.site-modal-card.rss-item.selected::before {
    background: linear-gradient(90deg, #2196f3, #42a5f5);
}

/* ========================================
   分组和分享功能样式
   ======================================== */

/* 分组选项卡样式 */
.group-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    overflow-x: auto;
    white-space: nowrap;
}

.group-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f5f5f5;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-size: 13px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.group-tab:hover {
    background: #e8f4ff;
    color: #007bff;
    border-color: #cce7ff;
}

.group-tab.active {
    background: #007bff;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.group-tab.add-group-tab {
    background: #e8f5e8;
    color: #28a745;
    border: 1px dashed #28a745;
}

.group-tab.add-group-tab:hover {
    background: #28a745;
    color: white;
    border: 1px solid #28a745;
}

.group-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.group-name {
    font-weight: 500;
}

.group-count {
    font-size: 11px;
    opacity: 0.8;
}

/* 分享控件样式 */
.share-controls {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #e1bee7;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    text-align: center;
}

.share-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* 选择模式样式 */
.fav-card.selection-mode {
    position: relative;
    padding-left: 35px;
}

.fav-card.selection-mode .selection-checkbox {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}

.fav-card.selection-mode .selection-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff;
}

.fav-card.selection-mode.selected {
    background: #e3f2fd;
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.fav-card.selection-mode .fav-link {
    pointer-events: none;
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #333;
    text-align: center;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.color-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background: #e9ecef;
    color: #333;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
}

/* 分享结果样式 */
.share-result {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.share-url-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-url-container input {
    flex: 1;
    min-width: 0;
}

.share-url-container button {
    flex-shrink: 0;
}

.share-info {
    font-size: 13px;
    color: #666;
    margin: 8px 0 4px 0;
}

.share-preview {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px;
    margin: 16px 0;
    font-size: 13px;
    color: #856404;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .group-tabs {
        padding-bottom: 4px;
    }

    .group-tab {
        font-size: 12px;
        padding: 4px 8px;
    }

    .modal-content {
        margin: 20px;
        width: calc(100vw - 40px);
        padding: 20px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    .share-url-container {
        flex-direction: column;
    }

    .share-url-container button {
        width: 100%;
    }
}

/* 选择模式样式 */
.fav-item.selected {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.fav-item.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: #2196f3;
    color: white;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
}

.share-controls {
    margin-bottom: 15px;
}

.share-controls button {
    transition: all 0.2s ease;
}

.share-controls button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.share-controls button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 分享成功对话框样式 */
.modal {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal>div {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}