/* =========================================
   1. 源列表样式 (Left Panel)
   ========================================= */

.list {
    list-style: none;
    padding: 0 4px; /* 列表整体左右留点缝隙 */
}

.source-item {
    padding: 10px 12px; /* 增加内边距，更易点击 */
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 6px; /* 条目间距 */
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid transparent; /* 预留边框位置避免抖动 */
    background-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 悬停效果：轻微提亮 */
.source-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* 选中状态：深色背景 + 蓝色左边框指示条 */
.source-item.active {
    background-color: #111827; /* 深蓝灰色背景 */
    border: 1px solid #1f2937;  /* 微弱的边框 */
    border-left: 3px solid #3b82f6; /* 核心：左侧蓝色高亮条 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.source-title {
    font-size: 13px; /* 稍微加大一点 */
    font-weight: 600;
    color: #e5e7eb;
    line-height: 1.4;
}

.source-url {
    font-size: 11px;
    color: #6b7280;
    word-break: break-all;
    opacity: 0.8;
}

/* 底部元数据行（路径、标签等） */
.source-target {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* 动作按钮容器（隐藏在右下角，悬停显示，或者常驻） */
.source-actions {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    opacity: 0.4; /* 默认半透明 */
    transition: opacity 0.2s;
}

.source-item:hover .source-actions,
.source-item.active .source-actions {
    opacity: 1; /* 选中或悬停时完全显示 */
}


/* =========================================
   2. Item 列表样式 (Right Panel)
   ========================================= */

.item {
    padding: 10px 12px;
    border-radius: 8px; /* 更圆润 */
    margin-bottom: 8px;
    background-color: #0f172a; /* 比背景稍亮 */
    border: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.item:hover {
    border-color: #3b82f6;
    background-color: #162032;
    transform: translateY(-1px); /* 轻微上浮感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.item-title {
    font-size: 12px;
    font-weight: 500;
    color: #bfdbfe; /* 浅蓝色文字 */
    line-height: 1.5;
}

.item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 两端对齐 */
    font-size: 11px;
    color: #94a3b8;
}

/* =========================================
   3. 通用标签样式 (Badges)
   ========================================= */

/* 下载器标签 (qBittorrent / SimpleHttp) */
.tag-downloader {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* qBittorrent 风格：绿色 */
.tag-downloader.qb {
    background-color: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* SimpleHttp 风格：紫色 */
.tag-downloader.http {
    background-color: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Aria2 风格：粉色/红色 */
.tag-downloader.aria {
    background-color: rgba(236, 72, 153, 0.1);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

/* 状态标签 (Pushed / Unpushed) */
.item-state {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.item-state.unpushed {
    background-color: rgba(249, 115, 22, 0.15);
    color: #fb923c; /* 橙色文字 */
}

.item-state.pushed {
    background-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af; /* 灰色文字 */
}

/* 高亮命中规则关键词 */
.highlight {
    color: #facc15; /* 黄色 */
    background-color: rgba(250, 204, 21, 0.1);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: bold;
}

/* [新增] 字幕类型标签样式 */
.tag-subtitle {
    background-color: #f59e0b; /* 橙色背景 */
    border-color: #d97706;     /* 深橙色边框 */
    color: #ffffff;            /* 白色文字 */
    margin-right: 6px;         /* 右侧留白 */
}