/**
 * pages.css - 页面特定样式
 * 包含: 作品明细模态框、任务搜索、任务详情、已接取任务卡片等
 */

/* ============================================================
   统一标签样式配置 - 全局通用
   ============================================================ */

/* 融合标签 - 蓝色渐变 */
.tag-fusion,
.badge-fusion,
.platform-fusion {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* 端原生标签 - 粉红色渐变 */
.tag-native,
.badge-native,
.platform-native {
    background: linear-gradient(135deg, #f472b6, #ec4899) !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

/* 麦芽标签 - 绿色渐变 */
.tag-maiya,
.badge-maiya {
    background: linear-gradient(135deg, #84fab0, #8fd3f4) !important;
    color: #065f46 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(132, 250, 176, 0.3);
}

/* 独家自制标签 - 紫色渐变 */
.tag-exclusive,
.badge-exclusive {
    background: linear-gradient(135deg, #f093fb, #f5576c) !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 独家标签 - 深紫色渐变 */
.tag-only,
.badge-only {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 非独家标签 - 灰色 */
.tag-shared,
.badge-shared {
    background: #e5e7eb !important;
    color: #4b5563 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 无任务标签 - 深灰色 */
.tag-no-task {
    background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 小尺寸标签变体 */
.tag-sm {
    font-size: 10px !important;
    padding: 2px 8px !important;
}

/* 端/融 单字标识（用于短剧热度等） */
.dual-name-badge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.dual-name-badge.native {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}
.dual-name-badge.fusion {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* 剧场标签通用样式 */
.meta-tag.theater {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: #f0f4ff;
    color: #667eea;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}
.meta-tag.theater .theater-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* ============================================================
   作品明细模态框
   ============================================================ */
.video-modal {
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
}
.video-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.video-modal-header .header-info h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.video-modal-header .header-info p {
    margin: 6px 0 0 0;
    opacity: 0.85;
    font-size: 14px;
}
.video-modal-header .close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-modal-header .close-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}
.video-modal-header .close-btn i { font-size: 20px; }
.video-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f8fafc;
}
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.video-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf1;
    transition: all 0.3s ease;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: #667eea;
}
.video-rank {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.video-rank.gold { background: linear-gradient(135deg, #f5af19 0%, #f12711 100%); box-shadow: 0 4px 12px rgba(245, 175, 25, 0.5); }
.video-rank.silver { background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%); }
.video-rank.bronze { background: linear-gradient(135deg, #cd7f32 0%, #8B4513 100%); }
.video-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.video-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.video-id-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f0e6fa 0%, #e4d4f4 100%);
    border-radius: 20px;
    width: fit-content;
    transition: all 0.2s;
}
.video-id-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: scale(1.02);
}
.video-id-link i { font-size: 16px; }
.douyin-id {
    color: #95a5a6;
    font-size: 13px;
    margin-left: 4px;
}
.video-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.stat-item {
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: #f8fafc;
}
.stat-item.primary { background: linear-gradient(135deg, #fff5eb 0%, #ffe8d4 100%); }
.stat-item.success { background: linear-gradient(135deg, #e8faf0 0%, #d4f4e2 100%); }
.stat-item.info { background: linear-gradient(135deg, #e8f4fd 0%, #d4e8f7 100%); }
.stat-label {
    display: block;
    font-size: 11px;
    color: #8c9bab;
    margin-bottom: 4px;
}
.stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
}
.stat-item.primary .stat-value { color: #e67e22; }
.stat-item.success .stat-value { color: #27ae60; }
.stat-item.info .stat-value { color: #3498db; }
.prev-hour-data {
    background: linear-gradient(135deg, #fff8e7 0%, #fff3d4 100%);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #8c6d3f;
    display: flex;
    align-items: center;
    gap: 4px;
}
.prev-hour-data.hot {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    animation: pulse-video-hot 2s infinite;
}
@keyframes pulse-video-hot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.15); }
}
.prev-hour-data i {
    color: #e67e22;
    font-size: 14px;
}
.prev-hour-data.hot i {
    color: #dc2626;
    animation: bounce-icon 0.6s infinite;
}
@keyframes bounce-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.prev-hour-data .prev-value {
    font-weight: 600;
    color: #e67e22;
}
.prev-hour-data.hot .prev-value {
    color: #dc2626;
    font-weight: 700;
}
.prev-hour-data .prev-value.income {
    color: #27ae60;
}
.video-footer {
    font-size: 12px;
    color: #95a5a6;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e8ecf1;
}
.video-footer > div {
    display: flex;
    align-items: center;
    gap: 4px;
}
.video-footer .sync-time {
    color: #3498db;
}
.video-footer .sync-time i {
    font-size: 12px;
}

/* ============================================================
   任务搜索结果 - V2 重设计版
   ============================================================ */

/* 搜索结果头部 - 简洁风格 */
.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.search-result-header .result-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.search-result-header .count-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}
.search-result-header .count-text {
    font-size: 14px;
    color: var(--text-secondary);
}
.search-result-header .preload-status span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--bg);
    color: var(--text-secondary);
}
.search-result-header .preload-status .loaded {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* 搜索结果网格 */
.search-result-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
}

/* 任务卡片 V2 */
.search-task-card-v2 {
    background: var(--bg-card);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
}
.search-task-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
.search-task-card-v2.accepted {
    border-color: rgba(16, 185, 129, 0.4);
}
.search-task-card-v2.accepted:hover {
    border-color: #10b981;
}

/* 状态飘带 */
.search-task-card-v2 .status-ribbon {
    position: absolute;
    top: 16px;
    right: -32px;
    padding: 6px 40px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    transform: rotate(45deg);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-ribbon.success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 2px 12px rgba(39, 174, 96, 0.4);
}
.status-ribbon.processing {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 2px 12px rgba(243, 156, 18, 0.4);
    animation: pulse-ribbon 1.5s infinite;
}
@keyframes pulse-ribbon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* 卡片主体 */
.search-task-card-v2 .card-main {
    display: flex;
    gap: 20px;
    padding: 24px 24px 16px;
    cursor: pointer;
}

/* 封面区域 V2 */
.card-cover-v2 {
    width: 100px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-cover-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.search-task-card-v2:hover .card-cover-v2 img {
    transform: scale(1.05);
}
.card-cover-v2 .cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-cover-v2 .cover-placeholder i {
    font-size: 36px;
    color: white;
    opacity: 0.9;
}

/* 等级徽章 V2 */
.level-badge-v2 {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}
.level-badge-v2.SSS { background: linear-gradient(135deg, #ff1744, #d50000); box-shadow: 0 3px 12px rgba(255, 23, 68, 0.5); }
.level-badge-v2.SS { background: linear-gradient(135deg, #ff4757, #ff1744); box-shadow: 0 3px 12px rgba(255, 71, 87, 0.5); }
.level-badge-v2.S { background: linear-gradient(135deg, #ff6348, #ff4757); box-shadow: 0 3px 12px rgba(255, 99, 72, 0.4); }
.level-badge-v2.A { background: linear-gradient(135deg, #3742fa, #5352ed); box-shadow: 0 3px 12px rgba(55, 66, 250, 0.4); }
.level-badge-v2.B { background: linear-gradient(135deg, #57606f, #747d8c); }
.level-badge-v2.C { background: linear-gradient(135deg, #95a5a6, #bdc3c7); }

/* 平台标签 V2 */
.platform-tag-v2 {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.platform-tag-v2.native { 
    background: linear-gradient(135deg, #ff6b6b, #ee5a24); 
}
.platform-tag-v2.fusion { 
    background: linear-gradient(135deg, #11998e, #38ef7d); 
}

/* 星广联投标识 V2 */
.xingguang-icon-v2 {
    position: absolute;
    bottom: 8px;
    right: 8px;
    height: 18px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 内容区域 V2 */
.card-content-v2 {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 任务标题 V2 */
.task-title-v2 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 任务信息行 - 剧场和时间 */
.task-info-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.theater-info-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e4d4f4 100%);
    border-radius: 24px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}
.theater-icon-v2 {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.theater-name {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
}
.time-info-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #f57c00;
    border: 1px solid rgba(245, 124, 0, 0.2);
}
.time-info-v2 i {
    font-size: 16px;
}

/* 分成比例区域 V2 */
.rate-info-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(145deg, #fafbfc 0%, #f0f2f5 100%);
    border-radius: 12px;
    border: 1px solid #e8ecf1;
}
.rate-info-v2.loading-rates {
    color: #95a5a6;
    font-size: 13px;
    justify-content: center;
}
.rate-item-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-width: 80px;
}
.rate-item-v2 .rate-label {
    font-size: 10px;
    color: #95a5a6;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
}
.rate-item-v2 .rate-value {
    font-size: 18px;
    font-weight: 800;
}
.rate-item-v2 .rate-value.cps { color: #e67e22; }
.rate-item-v2 .rate-value.xg { color: #9b59b6; }
.rate-item-v2 .rate-value.ad { color: #3498db; }

/* 标签行 V2 */
.tags-row-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-v2 {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tag-v2.reserve {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    color: #c2185b;
}
.tag-v2.super {
    background: linear-gradient(135deg, #fff9c4, #ffeb3b);
    color: #f57f17;
    animation: shine-super 2s infinite;
}
@keyframes shine-super {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.4); }
    50% { box-shadow: 0 0 8px 2px rgba(255, 235, 59, 0.6); }
}
.tag-v2.normal {
    background: #f0f4ff;
    color: #5c6bc0;
}

/* 卡片操作区域 V2 */
.card-actions-v2 {
    display: flex;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid #f0f2f5;
    background: linear-gradient(to top, #fafbfc, white);
}
.card-actions-v2 button,
.card-actions-v2 span {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-detail {
    background: white;
    border: 2px solid #e8ecf1;
    color: #667eea;
}
.btn-detail:hover {
    background: #f0f4ff;
    border-color: #667eea;
    transform: translateY(-2px);
}
.btn-accept-v2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
}
.btn-accept-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.45);
}
.btn-retry {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(243, 156, 18, 0.35);
}
.btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(243, 156, 18, 0.45);
}
.accepted-text {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(46, 204, 113, 0.15));
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: #27ae60;
    cursor: default;
}
.accepted-text i {
    color: #27ae60;
}

/* 响应式 */
@media (max-width: 1000px) {
    .search-result-grid-v2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .search-task-card-v2 .card-main { flex-direction: column; align-items: center; text-align: center; }
    .task-info-row { justify-content: center; }
    .rate-info-v2 { justify-content: center; }
    .tags-row-v2 { justify-content: center; }
}

/* ============================================================
   旧版任务搜索结果 (保留兼容)
   ============================================================ */
.search-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    padding: 4px;
}
.search-task-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf1;
    display: flex;
    gap: 16px;
}
.search-task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: var(--primary);
}
.search-task-card .card-cover {
    width: 90px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
}
.search-task-card .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-task-card .card-cover .cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-task-card .card-cover .cover-placeholder i {
    font-size: 32px;
    color: white;
    opacity: 0.9;
}
.search-task-card .cover-badges {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.search-task-card .level-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    align-self: flex-start;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.search-task-card .level-badge.SSS { background: linear-gradient(135deg, #ff1744, #d50000); }
.search-task-card .level-badge.SS { background: linear-gradient(135deg, #ff4757, #ff1744); }
.search-task-card .level-badge.S { background: linear-gradient(135deg, #ff6348, #ff4757); }
.search-task-card .level-badge.A { background: linear-gradient(135deg, #3742fa, #5352ed); }
.search-task-card .level-badge.B { background: linear-gradient(135deg, #57606f, #747d8c); }
.search-task-card .platform-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    align-self: flex-start;
}
.search-task-card .platform-badge.native { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
.search-task-card .platform-badge.mini { background: linear-gradient(135deg, #07c160, #1aad19); }
.search-task-card .cover-bottom {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.search-task-card .cover-bottom img {
    height: 16px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.search-task-card .card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.search-task-card .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-task-card .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.search-task-card .card-tags .tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.search-task-card .card-tags .tag.pay { background: #e3f2fd; color: #1565c0; }
.search-task-card .card-tags .tag.hot { background: #fff3e0; color: #e65100; }
.search-task-card .card-tags .tag.super { background: linear-gradient(135deg, #ffeb3b, #ffc107); color: #f57f17; }
.search-task-card .card-tags .tag.reserve { background: #fce4ec; color: #c2185b; }
.search-task-card .card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.search-task-card .card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.search-task-card .accepted-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.4);
}
.search-task-card .preload-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.5);
    z-index: 5;
}
.search-task-card.cached {
    border-color: rgba(243, 156, 18, 0.3);
}
.search-task-card.cached:hover {
    border-color: rgba(243, 156, 18, 0.6);
}
@media (max-width: 900px) {
    .search-result-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   任务详情模态框
   ============================================================ */
.task-detail-modal {
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.task-detail-header {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}
.task-detail-header .bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.2);
}
.task-detail-header .header-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    padding: 24px 32px;
    gap: 24px;
    align-items: flex-end;
}
.task-detail-header .cover-img {
    width: 120px;
    height: 160px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border: 3px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.task-detail-header .header-info {
    flex: 1;
    color: white;
    min-width: 0;
}
.task-detail-header .header-info h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.3;
}
.task-detail-header .header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.task-detail-header .header-badges .badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}
/* 充值分成 - 橙色渐变 */
.task-detail-header .header-badges .badge.settle-badge.recharge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
/* 广告分成 - 蓝色渐变 */
.task-detail-header .header-badges .badge.settle-badge.ad {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}
/* 纯广告分成 - 紫色渐变 */
.task-detail-header .header-badges .badge.settle-badge.pure-ad {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
/* 兼容旧样式 */
.task-detail-header .header-badges .badge.settle-badge.mixed {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.task-detail-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;  /* 确保在最上层 */
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}
.task-detail-header .close-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}
.task-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    background: #f8f9fa;
}
.detail-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.detail-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-section h4 i {
    color: var(--primary);
}
.rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.rate-item {
    background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.rate-item .label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.rate-item .value {
    font-size: 24px;
    font-weight: 700;
    color: #e67e22;
}
.rate-item.xg .value { color: #9b59b6; }
.rate-item.joint .value { color: #27ae60; }
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 12px;
}
.info-item > i {
    font-size: 20px;
    color: var(--primary);
}
.info-item.theater-info .theater-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
}
.info-item .info-content .label {
    font-size: 11px;
    color: var(--text-secondary);
}
.info-item .info-content .value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tags-container .tag {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: #e3f2fd;
    color: #1565c0;
}
.task-detail-footer {
    padding: 20px 32px;
    background: white;
    border-top: 1px solid #e8ecf1;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
.task-detail-footer .btn {
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}
.task-detail-footer .btn-accept {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}
.task-detail-footer .btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
.task-detail-footer .btn-accepted {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    cursor: default;
}
.task-detail-footer .accepted-info-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.accepted-info-footer .accepted-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
}
.accepted-info-footer .accepted-badge.success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}
.accepted-info-footer .accepted-badge.processing {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}
.accepted-info-footer .accepted-account {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f5eef8, #ebdef0);
    border-radius: 8px;
    color: #8e44ad;
    font-size: 14px;
}
.accepted-info-footer .accepted-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7f8c8d;
    font-size: 13px;
}

/* ============================================================
   已接取任务卡片
   ============================================================ */
.accepted-task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    padding: 4px;
}
.accepted-task-card {
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}
.accepted-task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-color: #667eea;
}
.task-status-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.task-status-corner.pending {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}
.task-status-corner.processing {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    animation: pulse 1.5s infinite;
}
.task-status-corner.success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
}
.task-status-corner.failed {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.task-card-body {
    display: flex;
    padding: 16px;
    gap: 16px;
}
.accepted-task-card .task-cover {
    flex-shrink: 0;
    width: 90px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.accepted-task-card .task-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accepted-task-card .task-cover .cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.accepted-task-card .task-cover .cover-placeholder i {
    font-size: 32px;
    color: #bbb;
}
.task-info-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-info-area .task-name {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 80px;
}
.task-theater-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.task-theater-row .theater-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    border: 1px solid #e0e0e0;
}
.task-theater-row .platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 6px;
    font-size: 12px;
    color: #1976d2;
}
.task-id-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #7f8c8d;
}
.task-id-row .id-label {
    color: #95a5a6;
}
.task-id-row .id-value {
    font-family: 'Monaco', 'Consolas', monospace;
    color: #667eea;
    background: #f0f4ff;
    padding: 2px 6px;
    border-radius: 4px;
}
.task-time-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #7f8c8d;
}
.task-time-row .time-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.task-time-row .time-item i {
    color: #3498db;
}
.task-account-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8e44ad;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f5eef8 0%, #ebdef0 100%);
    border-radius: 6px;
    width: fit-content;
}
.task-account-row i {
    color: #9b59b6;
}
/* 多账号显示样式 */
.task-accounts-row {
    margin-top: 8px;
}
.task-accounts-row .accounts-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8e44ad;
    margin-bottom: 6px;
}
.task-accounts-row .accounts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.task-accounts-row .account-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 4px;
    background: linear-gradient(135deg, #f5eef8 0%, #ebdef0 100%);
    border-radius: 20px;
    font-size: 12px;
    color: #8e44ad;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.task-accounts-row .account-chip.success {
    background: linear-gradient(135deg, #e8f8f0 0%, #d5f5e3 100%);
    color: #27ae60;
    border-color: rgba(39, 174, 96, 0.2);
}
.task-accounts-row .account-chip.processing {
    background: linear-gradient(135deg, #fef9e7 0%, #fcf3cf 100%);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.2);
}
.task-accounts-row .account-chip.failed {
    background: linear-gradient(135deg, #fdedec 0%, #fadbd8 100%);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.2);
}
.task-accounts-row .account-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.task-accounts-row .account-avatar-icon {
    font-size: 20px;
    color: inherit;
    opacity: 0.7;
}
.task-accounts-row .account-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-accounts-row .status-icon {
    font-size: 14px;
    margin-left: 2px;
}
.task-accounts-row .status-icon.success { color: #27ae60; }
.task-accounts-row .status-icon.processing { color: #f39c12; }
.task-accounts-row .status-icon.failed { color: #e74c3c; }
.task-card-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: auto;
}
.task-card-actions .action-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
}
.task-card-actions .action-btn.retry {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
}
.task-card-actions .action-btn.retry:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}
.task-card-actions .action-btn.view {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.task-card-actions .action-btn.view:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.task-card-actions .action-btn.delete {
    background: #fff;
    color: #e74c3c;
    border: 1px solid #fce4e4;
}
.task-card-actions .action-btn.delete:hover {
    background: #fce4e4;
}

/* ============================================================
   任务列表 - 行式布局
   ============================================================ */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}
.task-row {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    align-items: flex-start;
}
.task-row:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    border-color: #667eea;
}
.task-row-cover {
    position: relative;
    flex-shrink: 0;
}
.task-row-cover img {
    width: 80px;
    height: 106px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.task-row-cover .cover-placeholder {
    width: 80px;
    height: 106px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-row-cover .cover-placeholder i {
    font-size: 28px;
    color: #bdc3c7;
}
.task-status-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.task-status-badge.pending { background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%); }
.task-status-badge.processing { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); }
.task-status-badge.success { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.task-status-badge.failed { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }

.task-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.task-title-row .task-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
}
.task-title-row .theater-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    font-size: 12px;
    color: #667eea;
    font-weight: 500;
}
.task-title-row .theater-tag .theater-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
}
.task-title-row .platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
    font-size: 12px;
    color: #10b981;
    font-weight: 500;
}
/* 关联的端原生/融合名称行 */
.task-related-row {
    display: flex;
    align-items: center;
    margin-top: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 8px;
    border-left: 3px solid #667eea;
}
.task-related-row .related-name {
    font-size: 14px;
    font-weight: 500;
}
.task-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #7f8c8d;
}
.task-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.task-meta-row .meta-item i {
    font-size: 14px;
    color: #95a5a6;
}
.task-accounts-section {
    margin-top: 4px;
}
.task-accounts-section .accounts-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #667eea;
    font-weight: 500;
    margin-bottom: 8px;
}
.task-accounts-section .accounts-header i {
    font-size: 16px;
}
.accounts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.accounts-chips .account-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}
.accounts-chips .account-chip.success {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(39, 174, 96, 0.15) 100%);
    border-color: #2ecc71;
    color: #27ae60;
}
.accounts-chips .account-chip.processing {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(230, 126, 34, 0.15) 100%);
    border-color: #f39c12;
    color: #e67e22;
}
.accounts-chips .account-chip.failed {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(192, 57, 43, 0.15) 100%);
    border-color: #e74c3c;
    color: #c0392b;
}
.accounts-chips .chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.accounts-chips .chip-avatar-icon {
    font-size: 22px;
    color: #95a5a6;
}
.accounts-chips .chip-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.accounts-chips .chip-status {
    font-size: 14px;
}
.accounts-chips .chip-status.success { color: #27ae60; }
.accounts-chips .chip-status.processing { color: #f39c12; }
.accounts-chips .chip-status.failed { color: #e74c3c; }

.task-row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.task-row-actions .action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    min-width: 80px;
}
.task-row-actions .action-btn.accept {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}
.task-row-actions .action-btn.accept:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}
.task-row-actions .action-btn.retry {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
}
.task-row-actions .action-btn.retry:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}
.task-row-actions .action-btn.view {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.task-row-actions .action-btn.view:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.task-row-actions .action-btn.delete {
    background: #fff;
    color: #e74c3c;
    border: 1px solid #fce4e4;
}
.task-row-actions .action-btn.delete:hover {
    background: #fce4e4;
}

/* ============================================================
   任务搜索列表 (旧版兼容)
   ============================================================ */
.task-search-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: none;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.task-search-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.task-cover {
    position: relative;
    flex-shrink: 0;
}
.task-cover img {
    width: 100px;
    height: 133px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.task-cover .cover-placeholder {
    width: 100px;
    height: 133px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-cover .cover-placeholder i {
    font-size: 36px;
    color: #bdc3c7;
}
.task-cover .cover-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}
.task-cover .task-level {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}
.task-level.level-SSS { background: linear-gradient(135deg, #ff1744, #d50000); }
.task-level.level-SS { background: linear-gradient(135deg, #ff4757, #ff1744); }
.task-level.level-S { background: linear-gradient(135deg, #ff6348, #ff4757); }
.task-level.level-A { background: linear-gradient(135deg, #3742fa, #5352ed); }
.task-level.level-A\+ { background: linear-gradient(135deg, #1e90ff, #3742fa); }
.task-level.level-B { background: linear-gradient(135deg, #57606f, #747d8c); }
.task-level.level-C { background: linear-gradient(135deg, #a4b0be, #dfe4ea); color: #2f3542; }
.task-cover .platform-icon {
    align-self: flex-start;
    width: 48px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.task-cover .platform-badge.mini-program {
    align-self: flex-start;
    background: linear-gradient(135deg, #07c160, #1aad19);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.task-cover .cover-bottom-badges {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.task-cover .xingguang-icon {
    height: 18px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.task-cover .ronghe-icon {
    height: 18px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.task-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.task-tags .tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.task-tags .tag.pay-type {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    border: 1px solid rgba(21, 101, 192, 0.2);
}
.task-tags .tag.hot {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e65100;
    border: 1px solid rgba(230, 81, 0, 0.2);
}
.task-tags .tag.reserve {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    color: #c2185b;
    border: 1px solid rgba(194, 24, 91, 0.2);
}
.task-tags .tag.super-rate {
    background: linear-gradient(135deg, #ffeb3b, #ffc107);
    color: #f57f17;
    border: 1px solid rgba(245, 127, 23, 0.3);
}
.task-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a2e;
    line-height: 1.4;
}
.task-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border-radius: 10px;
    border: 1px solid #eee;
}
.task-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #8e99a4;
}
.task-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-meta i {
    font-size: 16px;
    color: #a0aec0;
}
.task-accepted-status {
    margin-top: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #155724;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.task-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.task-actions .btn {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}
.task-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.4);
}
.task-actions .btn.btn-success {
    background: linear-gradient(135deg, #34a853, #2e7d32);
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

/* ============================================================
   剧单列表样式
   ============================================================ */
.judan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.judan-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}
.judan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: #667eea;
}

.judan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.judan-date {
    font-size: 13px;
    color: #888;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 20px;
}
.judan-status {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}
.judan-status.status-active {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
}
.judan-status.status-reserve {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
}
.judan-status.status-pending {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}
.judan-status.status-delay {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
}
.judan-status.status-ended {
    background: #e0e0e0;
    color: #666;
}
.judan-status.status-paused {
    background: linear-gradient(135deg, #9e9e9e, #757575);
    color: white;
}

/* 碧海剧单特殊样式 */
.bihai-list .judan-row {
    border-left: 4px solid #11998e;
}
.bihai-list .judan-row:hover {
    border-left-color: #38ef7d;
}
.meta-tag.xingtu {
    background: #6366f1;
    color: white;
}
.meta-tag.episodes {
    background: #f0f9ff;
    color: #0369a1;
}

/* 昶飞剧单特殊样式 */
.changfei-list .judan-row {
    border-left: 4px solid #f093fb;
}
.changfei-list .judan-row:hover {
    border-left-color: #f5576c;
}
.meta-tag.native {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

/* 麦芽剧单特殊样式 - 卡片布局 */
.maiya-list {
    background: transparent !important;
    gap: 12px !important;
}
.maiya-list .judan-row {
    border-left: 4px solid #84fab0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.maiya-list .judan-row:hover {
    border-left-color: #8fd3f4;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.maiya-list .judan-row.today-highlight {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, #fffbeb, white);
}
/* 融合/端原生标签 - 已移至顶部统一配置 */

/* 麦芽剧单剧名样式 */
.maiya-drama-name {
    cursor: pointer;
    transition: color 0.2s;
}
.maiya-drama-name:hover {
    color: var(--primary) !important;
}
.maiya-drama-name.native {
    color: #db2777;
}
.maiya-drama-name.native:hover {
    color: #be185d !important;
}
/* 端原生行缩进对齐 */
.maiya-native-row {
    margin-top: 4px;
    padding-left: 0;
}
.maiya-list .source-tag + .judan-title {
    margin-left: 0;
}
/* 没有来源标签时的对齐 */
.maiya-native-row .judan-title {
    margin-left: 0;
}
/* 麦芽剧目行底色突出显示 */
.maiya-source-row {
    background: linear-gradient(to right, #f0fdf4, #fff) !important;
    border-left: 4px solid #22c55e !important;
}
.maiya-row .judan-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.maiya-row .drama-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.maiya-row .judan-row-subtitle {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}
.maiya-row .judan-row-source {
    flex: 0 0 60px;
    text-align: right;
}
.source-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}
.source-maiya {
    background: linear-gradient(135deg, #84fab0, #8fd3f4);
    color: #065f46;
}
.source-partner {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    color: #9a3412;
}
/* 麦芽剧单徽章样式 */
.badge-exclusive {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
}
.badge-only {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}
.badge-shared {
    background: #e5e7eb;
    color: #4b5563;
}
.badge-rating {
    background: linear-gradient(135deg, #ffd93d, #ff9500);
    color: #333;
    font-weight: 700;
}
.badge-charge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}
/* badge-fusion 已移至顶部统一配置 */
.badge-both {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.judan-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.judan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.judan-meta .meta-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.judan-meta .meta-tag.theater {
    background: #f0f4ff;
    color: #667eea;
}
.judan-meta .meta-tag.type {
    background: #fff0f6;
    color: #eb2f96;
}
.judan-meta .meta-tag.pay {
    background: #f6ffed;
    color: #52c41a;
}

.judan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.judan-tags .tag {
    font-size: 11px;
    padding: 3px 8px;
    background: #f5f5f5;
    color: #666;
    border-radius: 4px;
}

.judan-info {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.judan-info .info-item {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
}
.judan-info .info-item.level {
    color: #faad14;
}
.judan-info .info-item i {
    font-size: 14px;
}

.judan-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
}

.judan-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.judan-actions .btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* ============================================================
   剧单列表 - 行显示模式
   ============================================================ */
.judan-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e8ecf1;
    border-radius: 12px;
    overflow: hidden;
}

.judan-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    transition: all 0.2s ease;
}

.judan-row:hover {
    background: #f8fafc;
}

.judan-row-time {
    flex: 0 0 90px;
    text-align: center;
}

.judan-row-time .date {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.judan-row-time .time {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* 排名数字样式 */
.judan-row-time .rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    background: #f0f0f0;
    color: #666;
}

.judan-row-time .rank-num.top-1 {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
}

.judan-row-time .rank-num.top-2 {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #fff;
    box-shadow: 0 2px 10px rgba(192, 192, 192, 0.5);
}

.judan-row-time .rank-num.top-3 {
    background: linear-gradient(135deg, #cd7f32, #b06020);
    color: #fff;
    box-shadow: 0 2px 10px rgba(205, 127, 50, 0.5);
}

.judan-row-main {
    flex: 1;
    min-width: 0;
}

.judan-row-main .title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.judan-row-main .judan-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.judan-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.judan-row-meta .meta-tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.judan-row-meta .meta-tag.source {
    background: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
}

.judan-row-meta .meta-tag.theater,
.drama-meta .meta-tag.theater {
    background: #f0f4ff;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

.judan-row-meta .meta-tag.theater:hover,
.drama-meta .meta-tag.theater:hover {
    background: #667eea;
    color: white;
}

.judan-row-meta .meta-tag.type {
    background: #fff0f6;
    color: #eb2f96;
}

.judan-row-meta .meta-tag.pay {
    background: #f6ffed;
    color: #52c41a;
}

.judan-row-meta .meta-tag.level {
    background: #fffbe6;
    color: #faad14;
}

.judan-row-meta .meta-tag.gender {
    background: #f9f0ff;
    color: #722ed1;
}

.judan-row-meta .meta-tag.tag {
    background: #f5f5f5;
    color: #666;
}

/* 首周剧标签 - 亮色高亮显示 */
.judan-row-meta .meta-tag.first-week,
.meta-tag.first-week {
    background: linear-gradient(135deg, #fef08a, #fde047) !important;
    color: #854d0e !important;
    font-weight: 700;
    border: 1px solid #facc15;
    animation: first-week-pulse 2s ease-in-out infinite;
}
@keyframes first-week-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 4px rgba(250, 204, 21, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 8px rgba(250, 204, 21, 0.8); }
}

.judan-row-actions {
    flex: 0 0 auto;
}

.judan-row-actions .btn {
    padding: 8px 12px;
    font-size: 16px;
}

/* 抖音作品快捷筛选样式 */
.new-old-badge.all { background: #f3f4f6; color: #374151; border: none !important; box-shadow: none !important; }
.new-old-badge.all.active { background: #3b82f6; color: #ffffff; border: none !important; box-shadow: none !important; }
.new-old-badge.normal { background: #ecfdf5; color: #059669; border: none !important; box-shadow: none !important; }
.new-old-badge.normal.active { background: #10b981; color: #ffffff; border: none !important; box-shadow: none !important; }
.new-old-badge.reviewing { background: #fffbeb; color: #d97706; border: none !important; box-shadow: none !important; }
.new-old-badge.reviewing.active { background: #f59e0b; color: #ffffff; border: none !important; box-shadow: none !important; }
.new-old-badge.rejected { background: #fef2f2; color: #dc2626; border: none !important; box-shadow: none !important; }
.new-old-badge.rejected.active { background: #ef4444; color: #ffffff; border: none !important; box-shadow: none !important; }

.douyin-work-meta-row .meta-item.status.deleted {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border: 1px solid #e5e7eb !important;
}
.douyin-work-meta-row .meta-item.status.deleted i {
    color: #9ca3af !important;
}

/* 新剧/老剧标签样式 */
.new-old-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 首发新剧 - 最高权重，金色闪烁 */
.new-old-badge.first-new-drama {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #333;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.6);
    animation: pulse-gold 1.5s infinite;
    border: 1px solid rgba(255, 140, 0, 0.5);
}

/* 新剧 - 红色醒目 */
.new-old-badge.new-drama {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    animation: pulse-new 2s infinite;
}

/* 次新剧 - 蓝色 */
.new-old-badge.sub-new-drama {
    background: linear-gradient(135deg, #4facfe, #00c6fb);
    color: white;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4);
}

/* 老剧 - 灰色 */
.new-old-badge.old-drama {
    background: linear-gradient(135deg, #a0a0a0, #787878);
    color: white;
}

@keyframes pulse-gold {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 12px rgba(255, 215, 0, 0.6); }
    50% { transform: scale(1.08); box-shadow: 0 4px 20px rgba(255, 215, 0, 0.8); }
}

@keyframes pulse-new {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 可点击的标签 */
.new-old-badge.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-old-badge.clickable:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* 激活状态 - 选中的筛选标签 */
.new-old-badge.active {
    outline: 3px solid #333;
    outline-offset: 2px;
}

/* 清除筛选按钮 */
.clear-filter {
    cursor: pointer;
    color: #999;
    font-size: 18px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

/* 麦芽剧目筛选按钮 - 绿色 */
.new-old-badge.maiya-badge {
    background: linear-gradient(135deg, #84fab0, #38ef7d);
    color: #1a5f4e;
    box-shadow: 0 2px 8px rgba(132, 250, 176, 0.4);
}
.new-old-badge.maiya-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(132, 250, 176, 0.6);
}

/* 合作剧目筛选按钮 - 橙色 */
.new-old-badge.partner-badge {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    color: #8b4513;
    box-shadow: 0 2px 8px rgba(252, 182, 159, 0.4);
}
.new-old-badge.partner-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(252, 182, 159, 0.6);
}

.clear-filter:hover {
    color: #ff4d4f;
}

/* 投稿状态样式调整（行模式） */
.judan-row .judan-status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 500;
}

/* 收费集数标签 */
.pay-episode-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffd93d, #ff9500);
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pay-episode-badge i {
    font-size: 14px;
}

/* 红果标签 */
.hongguo-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff6b35, #f54b10);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
}

.hongguo-badge i {
    font-size: 14px;
}

/* ============================================================
   任务搜索页面 - 紧凑列表布局
   ============================================================ */
.task-search-page {
    padding: 0;
}

/* 搜索区域 - 简洁风格 */
.search-hero {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid var(--border);
}
.search-hero::before {
    display: none;
}
.search-hero-content {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.search-hero-content h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-hero-content h1 i {
    color: var(--primary);
}
.search-hero-content p {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}
.search-form {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.search-input-wrap {
    flex: 1;
    position: relative;
}
.search-input-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-secondary);
}
.search-input-wrap input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s;
}
.search-input-wrap input::placeholder {
    color: var(--text-secondary);
}
.search-input-wrap input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-select {
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    min-width: 120px;
}
.search-select:focus {
    outline: none;
    border-color: var(--primary);
}
.search-select option {
    background: var(--bg-card);
    color: var(--text);
}
.search-btn {
    padding: 12px 24px;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.search-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}
.search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 结果统计条 */
.result-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.result-count {
    font-size: 14px;
    color: #64748b;
}
.result-count strong {
    color: #667eea;
    font-size: 18px;
    font-weight: 700;
}
.preload-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
    padding: 6px 14px;
    background: #f1f5f9;
    border-radius: 20px;
}
.preload-status.done {
    color: #10b981;
    background: #ecfdf5;
}

/* 紧凑任务列表 */
.task-list-compact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}
.task-row-compact {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    align-items: center;
    transition: all 0.2s;
}
.task-row-compact:hover {
    background: #f8fafc;
}
.task-row-compact.accepted {
    border-left: 4px solid #10b981;
    padding-left: 16px;
}

/* 缩略图 */
.task-thumb {
    width: 70px;
    height: 93px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.task-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.task-thumb .thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-thumb .thumb-placeholder i {
    font-size: 24px;
    color: white;
    opacity: 0.85;
}
.task-thumb .level-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    color: white;
}
.level-tag.SSS { background: linear-gradient(135deg, #ff1744, #d50000); }
.level-tag.SS { background: linear-gradient(135deg, #ff4757, #ff1744); }
.level-tag.S { background: linear-gradient(135deg, #ff6348, #ff4757); }
.level-tag.A { background: linear-gradient(135deg, #3742fa, #5352ed); }
.level-tag.B { background: linear-gradient(135deg, #57606f, #747d8c); }

/* 任务主信息 */
.task-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.task-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.platform-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.platform-tag.native { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
.platform-tag.fusion { background: linear-gradient(135deg, #10b981, #059669); }

/* 分成类型标签 - 醒目渐变样式（类似融合标签） */
.settle-type-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
/* 充值分成 - 橙色渐变 */
.settle-type-tag.recharge { 
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
/* 广告分成 - 蓝色渐变 */
.settle-type-tag.ad { 
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}
/* 纯广告分成 - 紫色渐变（类似融合标签） */
.settle-type-tag.pure-ad { 
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
/* 兼容旧的mixed样式 */
.settle-type-tag.mixed { 
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.task-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
}
.meta-theater {
    display: flex;
    align-items: center;
    gap: 6px;
}
.theater-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.meta-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
}

/* 分成比例 */
.task-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
}
.task-rates.loading {
    color: #94a3b8;
}
.task-rates .rate {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
}
.task-rates .rate b {
    font-weight: 700;
}
.task-rates .rate.cps b { color: #f59e0b; }
.task-rates .rate.xg b { color: #8b5cf6; }
.task-rates .rate.ad b { color: #3b82f6; }

/* 小标签 */
.task-tags-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mini-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    background: #f1f5f9;
    color: #64748b;
}
.mini-tag.reserve {
    background: #fce7f3;
    color: #db2777;
}
.mini-tag.super {
    background: #fef3c7;
    color: #d97706;
}
/* 首周剧标签 - 亮色高亮显示 */
.mini-tag.first-week {
    background: linear-gradient(135deg, #fef08a, #fde047);
    color: #854d0e;
    font-weight: 700;
    border: 1px solid #facc15;
    animation: first-week-glow 2s ease-in-out infinite;
}
@keyframes first-week-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(250, 204, 21, 0.4); }
    50% { box-shadow: 0 0 8px rgba(250, 204, 21, 0.8); }
}

/* 操作按钮 */
.task-ops {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.op-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.op-btn.accept {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
.op-btn.accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.45);
}
.op-btn.retry {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}
.op-btn.detail {
    background: #f1f5f9;
    color: #64748b;
    padding: 10px 12px;
}
.op-btn.detail:hover {
    background: #e2e8f0;
    color: #475569;
}
.op-status {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
}
.op-status.done {
    background: #ecfdf5;
    color: #10b981;
}
.op-status.pending {
    background: #fef3c7;
    color: #d97706;
}

/* 空状态 */
.search-empty {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
}
.search-empty i {
    font-size: 72px;
    color: #cbd5e1;
    margin-bottom: 20px;
    display: block;
}
.search-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px;
}
.search-empty p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

/* 响应式 */
@media (max-width: 900px) {
    .search-form { flex-direction: column; }
    .task-row-compact { grid-template-columns: 60px 1fr; }
    .task-thumb { width: 60px; height: 80px; }
    .task-ops { grid-column: 1 / -1; justify-content: flex-end; margin-top: 8px; }
}

/* ============================================================
   短剧热度卡片样式 - 单栏列表样式
   ============================================================ */
.drama-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drama-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.drama-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* 卡片头部 - 左侧排名+基本信息 */
.drama-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    width: 440px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.03) 100%);
    border-right: 1px solid var(--border);
}

.drama-rank {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.drama-rank.top1 {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.drama-rank.top2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.drama-rank.top3 {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

.drama-title-wrap {
    flex: 1;
    min-width: 0;
}

.drama-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.drama-meta .meta-item {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg);
    color: var(--text-secondary);
}

.drama-meta .meta-item.paid {
    background: rgba(255, 193, 7, 0.15);
    color: #f59e0b;
}

.drama-meta .meta-item.free {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* 播放量核心指标 - 横向布局 */
.drama-play-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    width: 100px;
    flex-shrink: 0;
    background: var(--bg);
    border-right: 1px solid var(--border);
}

.play-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.play-main .play-label {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
}

.play-main .play-value {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: -0.3px;
}

.play-diff {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* 播放增幅分段显示 */
.drama-play-diff-section {
    display: flex;
    gap: 32px;
    padding: 12px 32px;
    width: 340px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    background: var(--bg);
    border-right: 1px solid var(--border);
}

.drama-play-diff-section .diff-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.drama-play-diff-section .diff-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.drama-play-diff-section .diff-value {
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}

.drama-play-diff-section .diff-value.up {
    color: #dc2626;
}

/* 醒目数据框 */
.drama-highlight-data {
    margin-left: auto;
    flex-shrink: 0;
}

.highlight-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    min-width: 90px;
}

.highlight-box .hl-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.highlight-box .hl-value {
    font-size: 18px;
    font-weight: 700;
}

/* 播放增幅 - 红色 */
.highlight-box.diff {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
}
.highlight-box.diff .hl-value {
    color: #ef4444;
}

/* 付费集点赞 - 橙色 */
.highlight-box.paid {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
}
.highlight-box.paid .hl-value {
    color: #f59e0b;
}

/* 王牌收益 - 蓝色 */
.highlight-box.wangpai {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
}
.highlight-box.wangpai .hl-value {
    color: #3b82f6;
}

/* 团队收益 - 紫色 */
.highlight-box.team {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
}
.highlight-box.team .hl-value {
    color: #8b5cf6;
}

/* 互动数据行 - 横向紧凑 */
.drama-stats-row {
    display: flex;
    gap: 24px;
    padding: 12px 28px;
    width: 280px;
    flex-shrink: 0;
    justify-content: center;
    background: transparent;
    border-right: 1px solid var(--border);
    align-items: center;
}

.drama-stats-row.compact {
    padding: 8px 16px;
    gap: 12px;
}

.drama-stats-row .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 50px;
}

.drama-stats-row .stat-item:hover {
    background: var(--bg);
}

.drama-stats-row .stat-item i {
    font-size: 16px;
}

.drama-stats-row .stat-item .stat-label {
    font-size: 10px;
    color: var(--text-secondary);
}

.drama-stats-row .stat-item .stat-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.drama-stats-row .stat-item .stat-val.highlight {
    color: #f59e0b;
}

/* 付费集数据区 - 横向 */
.drama-paid-section {
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(217, 119, 6, 0.03) 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 170px;
    flex-shrink: 0;
}

.drama-paid-section .section-title {
    font-size: 10px;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.drama-paid-section .drama-stats-row {
    padding: 0;
    border: none;
    gap: 10px;
}

/* 收益数据区 - 横向 */
.drama-revenue-section {
    display: flex;
    gap: 28px;
    padding: 12px 28px;
    width: 300px;
    flex-shrink: 0;
    justify-content: center;
    background: transparent;
    align-items: center;
    border-right: 1px solid var(--border);
}

.revenue-item {
    text-align: center;
    min-width: 60px;
}

.revenue-item .rev-label {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.revenue-item .rev-value {
    font-size: 14px;
    font-weight: 700;
}

.revenue-item .rev-value.team {
    color: #8b5cf6;
}

.revenue-item .rev-value.wangpai {
    color: #3b82f6;
}

.revenue-item .rev-value.up {
    color: #10b981;
}

.revenue-item .rev-value.down {
    color: #ef4444;
}

/* 卡片底部 - 同步时间 */
.drama-card-footer {
    padding: 12px 16px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100px;
    flex-shrink: 0;
}

/* 响应式 - 小屏幕时转为垂直布局 */
@media (max-width: 1200px) {
    .drama-card {
        flex-direction: column;
    }
    
    .drama-card-header {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
    }
    
    .drama-play-stats {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
        justify-content: space-between;
    }
    
    .drama-play-diff-section {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
        justify-content: space-around;
    }
    
    .drama-stats-row {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
        justify-content: space-around;
    }
    
    .drama-paid-section {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
    }
    
    .drama-revenue-section {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: auto;
        justify-content: space-around;
    }
    
    .drama-card-footer {
        margin-left: 0;
        width: auto;
    }
}

/* ============================================================
   碧海一键下载弹窗样式
   ============================================================ */
.bihai-modal {
    width: 820px;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.25);
}
.bihai-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bihai-modal-header .modal-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bihai-modal-body {
    padding: 16px 18px 4px 18px;
    overflow: auto;
}
.bihai-filter {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.bihai-filter .filter-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    min-height: 120px;
    justify-content: center;
}
.bihai-filter .filter-col label {
    font-size: 13px;
    color: var(--text-secondary);
}
.bihai-filter .filter-col input,
.bihai-filter .filter-col select {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 600;
    background: white;
    height: 44px;
}
.bihai-filter .filter-col .hint {
    font-size: 12px;
    color: var(--text-secondary);
}
.bihai-filter .filter-col.ratio-inline .ratio-inline-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bihai-filter .filter-col.ratio-inline input {
    width: 120px;
    min-width: 100px;
}
.bihai-filter .filter-col.ratio-inline span {
    font-weight: 700;
    color: var(--text);
}
.bihai-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px 8px 4px;
    margin: 0 4px 8px 4px;
    border-bottom: 1px dashed var(--border);
}
.bihai-toolbar .stat {
    font-size: 14px;
    color: var(--text);
}
.bihai-toolbar strong {
    color: #4f46e5;
    font-size: 16px;
}
.bihai-toolbar .toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 12px;
}
.bihai-toolbar .check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}
.bihai-error {
    color: var(--danger);
    margin-bottom: 10px;
}
.bihai-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
}
.bihai-loading i {
    font-size: 32px;
    color: var(--primary);
}
.bihai-card-list {
    max-height: 50vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px;
}
.bihai-card-list .empty {
    text-align: center;
    color: var(--text-secondary);
}
.bihai-card {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border: 1px solid #eee;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    align-items: flex-start;
    transition: all 0.2s ease;
}
.bihai-card:hover {
    border-color: #e0e7ff;
    box-shadow: 0 10px 30px rgba(79,70,229,0.08);
}
.bihai-card .card-left {
    width: 28px;
    display: flex;
    justify-content: center;
}
.bihai-card .card-main {
    flex: 1;
    min-width: 0;
}
.bihai-card .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    color: #111;
}
.bihai-card .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid transparent;
}
.bihai-card .pill.rating {
    background: #fff7ed;
    color: #d97706;
    border-color: #fed7aa;
}
.bihai-card .pill.status {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.bihai-card .pill.channel {
    background: #e0f7f4;
    color: #0f766e;
    border-color: #b7f2e8;
}
.bihai-card .pill.tags {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}
.bihai-card .card-meta {
    margin-top: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 单行充值记录列表样式 */
.recharge-list {
    max-height: 50vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0; /* 将 gap 设为 0，避免 header 与首行之间出现可见空白 */
    padding: 0; /* 移除容器 padding，靠各行自身内边距控制间距 */
}
.recharge-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.15s ease;
}
.recharge-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: #e6eafc;
}
.recharge-row .col {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 14px;
    min-width: 0;
}
.recharge-row .col.right {
    margin-left: auto;
    text-align: right;
    min-width: 160px;
}
.recharge-row .muted {
    color: #666;
    font-size: 13px;
}

/* header row for list */
.recharge-header {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 16px;
}
.recharge-header .col {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* clickable links inside recharge list (视频ID / 推广ID / 视频名称) */
.recharge-list a.link {
    text-decoration: none;
    color: var(--primary, #2563eb);
    cursor: pointer;
}
.recharge-list a.link:hover {
    text-decoration: underline;
    color: #1e40af;
}

/* reduce spacing between stats and the list header to avoid visible gap */
.stats-grid {
    margin-bottom: 8px;
}

/* Page-specific fixes for 碧海充值记录，避免统计区与列表出现空白/重叠 */
.bihai-records-page .stats-grid {
    margin-bottom: 8px !important;
}
.bihai-records-page .card-header {
    position: relative;
    z-index: 2;
}
.bihai-records-page .recharge-list {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
}
.bihai-records-page .recharge-list .recharge-row:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* 为数据行之间添加一致间距（但不影响 header） */
.bihai-records-page .recharge-list .recharge-row:not(.recharge-header) {
    margin-top: 8px;
}

/* 确保卡片头部为不透明背景，覆盖列表内容 */
.bihai-records-page .card-header {
    background: var(--card);
    position: relative;
    z-index: 5;
}

/* 右侧一行布局的查询统计（放在 card-header 右侧） */
.recharge-right-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
}
.recharge-right-stats .stat-card.small-card {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    min-width: 120px;
    justify-content: center;
}
.recharge-right-stats .stat-value {
    font-size: 14px;
}
.recharge-right-stats .stat-label {
    font-size: 12px;
}

/* 行内统计样式（标题旁） */
.recharge-inline-stats {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
}
.recharge-inline-stats strong {
    font-weight: 700;
    color: var(--text);
}

/* 通用模态框关闭按钮美化 */
.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f6fa;
    color: #4b5563;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.modal-close:hover {
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.modal-close:active {
    transform: translateY(1px);
}

/* ============================================================
   抖音作品卡片样式
   ============================================================ */

.douyin-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 20px;
    padding: 20px;
}

.douyin-work-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf1;
    display: flex;
    gap: 16px;
}

.douyin-work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: var(--primary);
}

/* 封面图 */
.douyin-work-cover {
    width: 100px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #f0f0f0;
}

.douyin-work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.douyin-work-cover .cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
}

/* 作品信息 */
.douyin-work-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.douyin-work-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.douyin-work-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.douyin-work-id {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.douyin-work-id i {
    font-size: 14px;
}

/* 元信息 */
.douyin-work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
}

.douyin-work-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

.douyin-work-meta .meta-item i {
    font-size: 14px;
}

.douyin-work-meta .meta-item.status {
    padding: 3px 8px;
    border-radius: 6px;
    background: #f0f0f0;
    color: var(--text-primary);
}

.douyin-work-meta .meta-item.status.deleted {
    background: #6b7280;
    color: #ffffff;
}
.douyin-work-meta .meta-item.status.deleted i {
    color: #ffffff;
}

.douyin-work-meta .meta-item.status.private {
    background: #fef3c7;
    color: #d97706;
}

/* 数据统计 */
.douyin-work-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
}

.douyin-work-stats .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.douyin-work-stats .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.douyin-work-stats .stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 操作按钮 */
.douyin-work-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.douyin-work-actions .sync-time {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.douyin-work-actions .sync-time i {
    font-size: 12px;
}

/* ============================================================
   抖音作品列表 - 单行列表样式（参考任务管理页面）
   ============================================================ */
.douyin-works-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}
.douyin-works-batch-bar {
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 6px;
}
.douyin-work-row-select {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}
.douyin-work-row {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    align-items: flex-start;
}
.douyin-work-row-cover {
    position: relative;
    flex-shrink: 0;
}
.douyin-work-row-cover img {
    width: 80px;
    height: 106px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.douyin-work-row-cover .cover-placeholder {
    width: 80px;
    height: 106px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.douyin-work-row-cover .cover-placeholder i {
    font-size: 28px;
    color: #bdc3c7;
}
.douyin-work-row:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    border-color: #667eea;
}
.douyin-work-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.douyin-work-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.douyin-work-title-row .douyin-work-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.douyin-work-title-row .douyin-work-id-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 12px;
    font-size: 12px;
    color: #667eea;
    font-weight: 500;
}
.douyin-work-title-row .douyin-work-id-tag i {
    font-size: 14px;
}

/* 充值金额标签 - 明显色显示 */
.douyin-work-title-row .recharge-amount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.douyin-work-title-row .recharge-amount-badge i {
    font-size: 14px;
    margin: 0;
}

.douyin-work-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #7f8c8d;
}
.douyin-work-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.douyin-work-meta-row .meta-item i {
    font-size: 14px;
    color: #95a5a6;
}
.douyin-work-meta-row .meta-item.status {
    padding: 3px 8px;
    border-radius: 6px;
    background: #f0f0f0;
    color: var(--text-primary);
}
.douyin-work-meta-row .meta-item.status.deleted {
    background: #e5e7eb;
    color: #6b7280;
}
.douyin-work-meta-row .meta-item.status.deleted i {
    color: #6b7280;
}
.douyin-work-meta-row .meta-item.status.private {
    background: #fef3c7;
    color: #d97706;
}
.douyin-work-meta-row .meta-item.status.normal {
    background: #d1fae5;
    color: #10b981;
}
.douyin-work-meta-row .meta-item.status.normal i {
    color: #10b981;
}
.douyin-work-meta-row .meta-item.status.review-rejected {
    background: #1f2937;
    color: #ffffff;
}
.douyin-work-meta-row .meta-item.status.review-rejected i {
    color: #ffffff;
}
.douyin-work-meta-row .meta-item.status.review-pending-yellow {
    background: #fef3c7;
    color: #d97706;
}
.douyin-work-meta-row .meta-item.status.review-pending-yellow i {
    color: #d97706;
}
.douyin-work-meta-row .meta-item.status.review-restricted {
    background: #fee2e2;
    color: #dc2626;
}
.douyin-work-meta-row .meta-item.status.review-restricted i {
    color: #dc2626;
}
.douyin-work-meta-row .meta-item.review-reason {
    color: #dc2626;
    font-size: 11px;
    margin-left: 8px;
    padding: 2px 6px;
    background: #fee2e2;
    border-radius: 4px;
}
.douyin-work-meta-row .meta-item.review-reason i {
    color: #dc2626;
    font-size: 12px;
    margin-right: 4px;
}
.douyin-work-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 8px 0;
}
.douyin-work-stats-row .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.douyin-work-stats-row .stat-item i {
    font-size: 16px;
}
.douyin-work-stats-row .stat-label {
    color: #7f8c8d;
}
.douyin-work-stats-row .stat-value {
    font-weight: 600;
    color: #2c3e50;
}
.douyin-work-stats-row .stat-item {
    position: relative;
}
.play-increase-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.increase-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: #fee2e2;
    color: #dc2626;
}
.increase-badge.positive {
    background: #fee2e2;
    color: #dc2626;
}
.increase-badge.negative {
    background: #fee2e2;
    color: #dc2626;
}
.douyin-work-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.douyin-work-row-actions .action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.douyin-work-row-actions .action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.douyin-work-row-actions .sync-time {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.douyin-work-row-actions .sync-time i {
    font-size: 12px;
}

.douyin-work-row-actions .action-btn.private {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.douyin-work-row-actions .action-btn.private:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.douyin-work-row-actions .action-btn.public {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.douyin-work-row-actions .action-btn.public:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.douyin-work-row-actions .action-btn.delete {
    background: #fff;
    color: #e74c3c;
    border: 1px solid #fce4e4;
}

.douyin-work-row-actions .action-btn.delete:hover {
    background: #fce4e4;
    color: #c0392b;
}

/* 响应式 */
@media (max-width: 768px) {
    .douyin-works-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 16px;
    }
    
    .douyin-work-card {
        padding: 16px;
    }
    
    .douyin-work-cover {
        width: 80px;
        height: 112px;
    }
    
    .douyin-work-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .douyin-work-row {
        padding: 12px 16px;
    }
    
    .douyin-work-stats-row {
        gap: 12px;
    }
}