/* ===== 番剧播放器 (暗色紫青风格 / 与电影院统一) ===== */
:root {
    --xf-primary: #7c5cfc;          /* 主色：紫色 */
    --xf-primary-hover: #9d83ff;
    --xf-primary-soft: rgba(124, 92, 252, 0.18);
    --xf-text: #f0f0f5;
    --xf-text-sub: #8b8ba7;
    --xf-text-mute: #6b6b80;
    --xf-bg: transparent;           /* 网格列表：透明，跟主背景一致 */
    --xf-bg-soft: rgba(255, 255, 255, 0.03);
    --xf-bg-hover: rgba(124, 92, 252, 0.08);
    --xf-border: rgba(255, 255, 255, 0.08);
    --xf-border-soft: rgba(255, 255, 255, 0.05);
    --xf-radius: 8px;
    --xf-score-high: #ff6b35;
    --xf-score-mid: #ffaa35;
    --xf-score-low: #999;
    --xf-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.xifan-player-container {
    display: block;
    height: calc(100vh - 200px);
    min-height: 480px;
    background: var(--xf-bg);
    padding: 0;
}

/* ========== 左侧列表 ========== */
.xifan-anime-list {
    width: 100%;
    overflow-y: auto;
    padding: 0 20px 16px;
    background: var(--xf-bg);
    scroll-behavior: smooth;
}
.xifan-anime-list::-webkit-scrollbar,
.xifan-episode-section::-webkit-scrollbar { width: 6px; }
.xifan-anime-list::-webkit-scrollbar-thumb,
.xifan-episode-section::-webkit-scrollbar-thumb { background: rgba(124, 92, 252, 0.3); border-radius: 3px; }

/* ========== 筛选条（已从列表内移到外部置顶）========== */
.xifan-filter-bar {
    padding: 10px 0 6px;
    background: var(--xf-bg);
    border-bottom: 1px solid var(--xf-border-soft);
    margin-bottom: 0;
    flex-shrink: 0;
    z-index: 5;
}

.xifan-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.xifan-filter-label {
    font-size: 13px;
    color: var(--xf-text-sub);
    min-width: 32px;
    flex-shrink: 0;
    font-weight: 500;
}

.xifan-chip-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.xifan-chip-group.xifan-chip-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.xifan-chip-group.xifan-chip-scroll::-webkit-scrollbar { display: none; }

.xifan-chip {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--xf-border);
    background: var(--xf-bg);
    color: var(--xf-text);
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}
.xifan-chip:hover {
    border-color: var(--xf-primary);
    color: #fff;
    background: var(--xf-primary-soft);
}
.xifan-chip.active {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.6), rgba(94, 234, 212, 0.2));
    border-color: var(--xf-primary);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 0 10px rgba(124, 92, 252, 0.3);
}

/* ========== 网格卡片 ========== */
.xifan-anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px 12px;
    animation: xifanGridIn 0.5s cubic-bezier(.22,.61,.36,1);
}
@keyframes xifanGridIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.xifan-anime-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--xf-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(.22,.61,.36,1), border-color 0.28s, box-shadow 0.28s;
    position: relative;
    /* 进场依次浮现 */
    animation: xifanCardIn 0.45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes xifanCardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 卡片依次浮现错峰 */
.xifan-anime-card:nth-child(1)  { animation-delay: 0.02s; }
.xifan-anime-card:nth-child(2)  { animation-delay: 0.05s; }
.xifan-anime-card:nth-child(3)  { animation-delay: 0.08s; }
.xifan-anime-card:nth-child(4)  { animation-delay: 0.11s; }
.xifan-anime-card:nth-child(5)  { animation-delay: 0.14s; }
.xifan-anime-card:nth-child(6)  { animation-delay: 0.17s; }
.xifan-anime-card:nth-child(7)  { animation-delay: 0.20s; }
.xifan-anime-card:nth-child(8)  { animation-delay: 0.23s; }
.xifan-anime-card:nth-child(n+9) { animation-delay: 0.26s; }
.xifan-anime-card:hover {
    transform: translateY(-6px) scale(1.025);
    border-color: rgba(124, 92, 252, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(124, 92, 252, 0.28);
}
.xifan-anime-card.active {
    border-color: var(--xf-primary);
    box-shadow: 0 0 0 2px var(--xf-primary-soft), 0 0 16px rgba(124, 92, 252, 0.3);
}

.xifan-anime-card .xifan-cover {
    aspect-ratio: 2/3;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    overflow: hidden;
    position: relative;
    border-radius: var(--xf-radius);
}
.xifan-anime-card .xifan-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.xifan-anime-card:hover .xifan-cover::after {
    opacity: 1;
}
.xifan-anime-card .xifan-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}

/* 懒加载图片：加载完成前透明，避免裂图 / 空白边框；完成后淡入 */
img.xifan-lazy { opacity: 0; transition: opacity 0.3s ease; }
img.xifan-lazy.loaded { opacity: 1; }

/* 影院影片详情封面：加载中显示脉动占位，避免显示裂图 */
.xifan-player-overlay .xifan-detail-cover {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
}
.xifan-player-overlay .xifan-detail-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: xifan-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
.xifan-player-overlay .xifan-detail-cover img.xifan-lazy { position: relative; z-index: 1; }

/* 影院卡片封面：加载中给一个占位底，避免突兀空白 */
.cinema-card-poster {
    background: rgba(255,255,255,0.03);
}
.xifan-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    color: #8b8ba7;
    padding: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(124,92,252,0.18), transparent 60%),
        linear-gradient(135deg, rgba(124,92,252,0.12), rgba(94,234,212,0.06));
    line-height: 1.4;
}
.xifan-cover-fallback i {
    font-size: 1.8em;
    color: #b9afff;
    filter: drop-shadow(0 0 8px rgba(124,92,252,0.4));
}
.xifan-anime-card:hover .xifan-cover-fallback {
    color: #cbc3ff;
}
.xifan-anime-card:hover .xifan-cover img {
    transform: scale(1.04);
}

.xifan-anime-card .xifan-score {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    pointer-events: none;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.xifan-anime-card .xifan-score.high { background: rgba(255, 107, 53, 0.92); }
.xifan-anime-card .xifan-score.mid  { background: rgba(255, 170, 53, 0.92); }
.xifan-anime-card .xifan-score.low  { background: rgba(80, 80, 80, 0.85); }

.xifan-anime-card .xifan-info {
    padding: 8px 4px 0;
}
.xifan-anime-card .xifan-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--xf-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.xifan-anime-card .xifan-meta {
    font-size: 11.5px;
    color: var(--xf-text-mute);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 骨架屏 ========== */
.xifan-skeleton-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--xf-radius);
    overflow: hidden;
}
.xifan-skeleton-cover {
    aspect-ratio: 2/3;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: xifan-shimmer 1.5s ease-in-out infinite;
}
.xifan-skeleton-line {
    height: 14px;
    margin: 10px 6px 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f0f0f3 25%, #f8f8fa 50%, #f0f0f3 75%);
    background-size: 200% 100%;
    animation: xifan-shimmer 1.5s ease-in-out infinite;
}
.xifan-skeleton-line:last-child { width: 60%; }
@keyframes xifan-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== 空状态 ========== */
.xifan-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--xf-text-sub);
    text-align: center;
    gap: 8px;
}
.xifan-empty-icon { font-size: 3em; margin-bottom: 4px; }
.xifan-empty-hint { font-size: 13px; color: var(--xf-text-mute); }
.xifan-empty-clear {
    margin-top: 8px;
    padding: 6px 20px;
    border-radius: 14px;
    border: 1px solid var(--xf-primary);
    background: transparent;
    color: var(--xf-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.xifan-empty-clear:hover {
    background: var(--xf-primary);
    color: #fff;
}

/* ========== 右侧详情面板（已废弃：详情改用全屏浮层） ========== */
.xifan-player-panel {
    display: none;
}
.xifan-player-panel.xifan-empty {
    display: none;
}

/* ---- 详情区 ---- */
.xifan-detail {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--xf-border-soft);
    flex-shrink: 0;
}
.xifan-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 0;
    color: var(--xf-text-sub);
    font-size: 13px;
}

.xifan-detail-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.xifan-detail-cover {
    width: 110px;
    aspect-ratio: 2/3;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.xifan-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xifan-detail-info {
    flex: 1;
    min-width: 0;
}
.xifan-detail-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--xf-text);
    margin: 0 0 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.xifan-detail-subtitle {
    font-size: 12.5px;
    color: var(--xf-text-mute);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xifan-detail-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    margin: 6px 0 8px;
}
.xifan-meta-score {
    font-size: 22px;
    font-weight: 700;
    color: var(--xf-score-high);
}
.xifan-meta-score.mid { color: var(--xf-score-mid); }
.xifan-meta-score.low { color: var(--xf-score-low); }
.xifan-meta-divider {
    color: var(--xf-text-mute);
    font-size: 13px;
}
.xifan-meta-text {
    font-size: 12.5px;
    color: var(--xf-text-sub);
    margin-left: 4px;
}

.xifan-detail-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.xifan-tag {
    display: inline-block;
    padding: 2px 10px;
    background: var(--xf-bg-soft);
    border: 1px solid var(--xf-border);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--xf-text-sub);
}

.xifan-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.xifan-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    color: var(--xf-text);
    font-family: inherit;
}
.xifan-btn i { font-size: 12px; }
.xifan-btn-primary {
    background: var(--xf-primary);
    color: #fff;
    border-color: var(--xf-primary);
}
.xifan-btn-primary:hover {
    background: var(--xf-primary-hover);
    border-color: var(--xf-primary-hover);
}
.xifan-btn-ghost {
    background: transparent;
    color: var(--xf-text-sub);
    border-color: var(--xf-border);
}
.xifan-btn-ghost:hover {
    color: var(--xf-primary);
    border-color: var(--xf-primary);
}

.xifan-detail-desc {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--xf-text-sub);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    cursor: pointer;
    transition: -webkit-line-clamp 0.2s;
}
.xifan-detail-desc.expanded {
    -webkit-line-clamp: unset;
}

/* ========== 视频区 ========== */
.xifan-video-wrap {
    position: relative;
    background: #000;
    aspect-ratio: 16/9;
    flex-shrink: 0;
}
.xifan-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.xifan-video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    gap: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}
.xifan-error-icon { font-size: 28px; }
.xifan-error-hint {
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.xifan-spinner {
    width: 24px;
    height: 24px;
    border: 2.5px solid rgba(255,255,255,0.15);
    border-top-color: var(--xf-primary);
    border-radius: 50%;
    animation: xifan-spin 0.7s linear infinite;
}
@keyframes xifan-spin { to { transform: rotate(360deg); } }

.xifan-retry-btn {
    padding: 4px 16px;
    border-radius: 14px;
    border: 1px solid var(--xf-primary);
    background: transparent;
    color: var(--xf-primary);
    cursor: pointer;
    font-size: 12.5px;
    transition: all 0.15s;
}
.xifan-retry-btn:hover { background: var(--xf-primary); color: #fff; }

/* ========== 来源选择 ========== */
.xifan-source-bar {
    padding: 10px 20px;
    border-top: 1px solid var(--xf-border-soft);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.xifan-source-label {
    font-size: 12.5px;
    color: var(--xf-text-mute);
    margin-right: 4px;
}
.xifan-source-btn {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    background: var(--xf-bg-soft);
    border: 1px solid transparent;
    color: var(--xf-text-sub);
    cursor: pointer;
    transition: all 0.15s;
}
.xifan-source-btn:hover { color: var(--xf-primary); }
.xifan-source-btn.active {
    background: var(--xf-primary-soft);
    border-color: var(--xf-primary);
    color: var(--xf-primary);
    font-weight: 500;
}

/* ========== 剧集列表 ========== */
.xifan-episode-section {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 20px;
    min-height: 0;
}
.xifan-ep-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.xifan-ep-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--xf-text);
}
.xifan-ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
}
.xifan-ep-btn {
    padding: 7px 4px;
    background: var(--xf-bg-soft);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--xf-text);
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    transition: all 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xifan-ep-btn:hover {
    background: var(--xf-primary-soft);
    color: var(--xf-primary);
}
.xifan-ep-btn.active {
    background: var(--xf-primary);
    color: #fff;
    font-weight: 600;
}

/* ========== 播放源（线路）切换 ========== */
.xifan-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 4px;
    max-height: 96px;
    overflow-y: auto;
}
.xifan-source-tabs::-webkit-scrollbar { width: 4px; }
.xifan-source-tabs::-webkit-scrollbar-thumb { background: rgba(124, 92, 252, 0.3); border-radius: 2px; }
.xifan-source-tab {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--xf-text-3, #b8b8c8);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.xifan-source-tab:hover {
    border-color: rgba(124, 92, 252, 0.5);
    color: #a78bfa;
    background: rgba(124, 92, 252, 0.1);
}
.xifan-source-tab.active {
    background: rgba(124, 92, 252, 0.85);
    border-color: rgba(124, 92, 252, 0.9);
    color: #fff;
    font-weight: 600;
}

/* ========== 分页 ========== */
.xifan-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 18px 0 8px;
    flex-wrap: wrap;
}
.xifan-pagination button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--xf-border);
    background: var(--xf-bg);
    color: var(--xf-text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.xifan-pagination button:hover {
    border-color: var(--xf-primary);
    color: var(--xf-primary);
}
.xifan-pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
.xifan-pagination button.xifan-pg-active {
    background: var(--xf-primary);
    border-color: var(--xf-primary);
    color: #fff;
}
.xifan-pagination .xifan-page-info {
    color: var(--xf-text-mute);
    font-size: 12.5px;
    margin: 0 6px;
}

/* ========== 侧栏搜索 ========== */
.xifan-search-wrap { padding: 12px 16px 4px; }
.xifan-search-wrap input {
    width: 100%;
    max-width: 360px;
    padding: 7px 14px;
    border-radius: 14px;
    border: 1px solid var(--xf-border);
    background: var(--xf-bg-soft);
    color: var(--xf-text);
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}
.xifan-search-wrap input:focus {
    border-color: var(--xf-primary);
    background: var(--xf-bg);
    box-shadow: 0 0 0 3px var(--xf-primary-soft);
}
.xifan-search-wrap input::placeholder { color: var(--xf-text-mute); }

/* ========== 侧栏动作按钮（排行榜/同步） ========== */
.xifan-sidebar-actions {
    display: flex;
    gap: 8px;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--xf-border-soft);
    margin-bottom: 4px;
}
.xifan-sidebar-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 14px;
    border: 1px solid var(--xf-border);
    background: var(--xf-bg);
    color: var(--xf-text-sub);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    font-family: inherit;
}
.xifan-sidebar-btn i { font-size: 11px; }
.xifan-sidebar-btn:hover {
    border-color: var(--xf-primary);
    color: var(--xf-primary);
    background: var(--xf-primary-soft);
}
.xifan-sidebar-btn.active {
    background: var(--xf-primary);
    border-color: var(--xf-primary);
    color: #fff;
}
.xifan-sidebar-btn.syncing {
    pointer-events: none;
    opacity: 0.7;
}
.xifan-sidebar-btn.syncing i {
    animation: xifan-spin 0.7s linear infinite;
}

/* ========== 排行榜 ========== */
.xifan-rank-panel {
    flex: 1;
    min-height: 0;
    /* 高度自动跟随侧栏剩余空间，底部止于侧栏内边界（已为音乐控件预留） */
    overflow-y: auto;
    padding: 4px 8px 12px;
}
.xifan-rank-panel::-webkit-scrollbar { width: 4px; }
.xifan-rank-panel::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 2px; }

.xifan-rank-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--xf-text-sub);
    padding: 6px 8px 8px;
    letter-spacing: 0.5px;
}
.xifan-rank-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12.5px;
}
.xifan-rank-item:hover {
    background: var(--xf-bg-soft);
}
.xifan-rank-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--xf-text-mute);
    background: var(--xf-bg-soft);
    border-radius: 4px;
}
.xifan-rank-num.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #fff;
}
.xifan-rank-num.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #9e9e9e);
    color: #fff;
}
.xifan-rank-num.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a86a2a);
    color: #fff;
}
.xifan-rank-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--xf-text);
}
.xifan-rank-score {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--xf-score-high);
}

/* ========== 移动端 ========== */
@media (max-width: 960px) {
    .xifan-player-container {
        flex-direction: column;
        height: auto;
    }
    .xifan-player-panel {
        width: 100%;
        max-height: 60vh;
        border-left: none;
        border-top: 1px solid var(--xf-border);
    }
    .xifan-anime-list {
        max-height: 45vh;
        padding: 0 12px 12px;
    }
    .xifan-anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px 8px;
    }
    .xifan-detail-cover { width: 88px; }
    .xifan-detail-title { font-size: 16px; }
}

/* ============================================================
   全屏浮层播放器 (与电影院统一的暗色+紫青风格)
   ============================================================ */
.xifan-player-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #0d0d18 0%, #14141f 100%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    color: #f0f0f5;
    animation: xifanOverlayIn 0.22s cubic-bezier(.22,.61,.36,1);
}
.xifan-player-overlay.hidden { display: none; }
@keyframes xifanOverlayIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 顶部栏 */
.xifan-player-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(13, 13, 24, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(124, 92, 252, 0.18);
    color: #f0f0f5;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 5;
    min-height: 52px;
}
.xifan-player-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f0f0f5;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.xifan-player-back:hover {
    background: rgba(124, 92, 252, 0.25);
    border-color: rgba(124, 92, 252, 0.5);
    color: #fff;
    box-shadow: 0 0 14px rgba(124, 92, 252, 0.25);
}
.xifan-player-title-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.xifan-player-title-icon {
    color: #5eead4;
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.4));
    flex-shrink: 0;
}
.xifan-player-title {
    font-size: 16px;
    font-weight: 600;
    color: #f0f0f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
}
.xifan-player-subtitle {
    font-size: 12px;
    color: #8b8ba7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.xifan-player-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.xifan-player-epinfo {
    font-size: 12.5px;
    color: #5eead4;
    font-weight: 500;
    white-space: nowrap;
}
.xifan-player-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #cbcbd9;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.xifan-player-topbar-btn:hover {
    background: rgba(124, 92, 252, 0.2);
    border-color: rgba(124, 92, 252, 0.4);
    color: #fff;
}

/* 主体：左侧视频/详情 + 右侧剧集侧栏 */
.xifan-player-body {
    flex: 1;
    display: flex;
    gap: 16px;
    padding: 16px;
    overflow: hidden;
    min-height: 0;
}
.xifan-player-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-width: 0;
    padding-right: 4px;
}
.xifan-player-aside {
    width: 320px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.xifan-player-loading-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #8b8ba7;
    font-size: 14px;
}

/* 视频容器 */
.xifan-player-main .xifan-video-wrap {
    position: relative;
    background: #000;
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(124, 92, 252, 0.18);
}
/* 视频流光边框 */
.xifan-player-main .xifan-video-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124,92,252,0.5), rgba(94,234,212,0.3), rgba(244,114,182,0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.4s;
}
.xifan-player-main .xifan-video-wrap:hover::before {
    opacity: 1;
    animation: xifanBorderFlow 3s linear infinite;
    background-size: 200% 200%;
}
@keyframes xifanBorderFlow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}
.xifan-player-main .xifan-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 视频播放时底部辉光 */
.xifan-player-main .xifan-video-wrap.playing::after {
    content: '';
    position: absolute;
    left: 10%; right: 10%; bottom: 0;
    height: 60px;
    background: radial-gradient(ellipse at 50% 100%, rgba(124,92,252,0.35), transparent 70%);
    pointer-events: none;
    animation: xifanVideoGlow 3s ease-in-out infinite;
}
@keyframes xifanVideoGlow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
}
.xifan-player-main .xifan-video-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.xifan-spinner.xifan-spinner-dark {
    border-color: rgba(124, 92, 252, 0.18);
    border-top-color: #7c5cfc;
}

/* 详情卡（暗色版） */
.xifan-detail-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px 16px;
    flex-shrink: 0;
}
.xifan-player-overlay .xifan-detail-top {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.xifan-player-overlay .xifan-detail-cover {
    width: 110px;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.xifan-player-overlay .xifan-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xifan-player-overlay .xifan-detail-info {
    flex: 1;
    min-width: 0;
}
.xifan-player-overlay .xifan-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #f0f0f5;
    margin: 0 0 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background: linear-gradient(90deg, #f0f0f5, #c4b5fd, #5eead4, #f0f0f5);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: xifanTitleShine 4s linear infinite;
}
@keyframes xifanTitleShine {
    0%   { background-position: 200% 0; }
    100% { background-position: 0 0; }
}
.xifan-player-overlay .xifan-detail-meta {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}
.xifan-player-overlay .xifan-meta-score {
    font-size: 22px;
    font-weight: 700;
    color: #f472b6;
    text-shadow: 0 0 12px rgba(244, 114, 182, 0.3);
}
.xifan-player-overlay .xifan-meta-score.mid { color: #fb923c; text-shadow: 0 0 12px rgba(251, 146, 60, 0.3); }
.xifan-player-overlay .xifan-meta-score.low { color: #8b8ba7; text-shadow: none; }
.xifan-player-overlay .xifan-meta-divider {
    color: #4e4e6a;
    font-size: 13px;
}
.xifan-player-overlay .xifan-meta-text {
    font-size: 12.5px;
    color: #8b8ba7;
    margin-left: 4px;
}
.xifan-player-overlay .xifan-detail-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.xifan-player-overlay .xifan-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(124, 92, 252, 0.12);
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: 12px;
    font-size: 11.5px;
    color: #b9afff;
}
.xifan-player-overlay .xifan-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.xifan-player-overlay .xifan-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 18px;
    font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #f0f0f5;
    font-family: inherit;
}
.xifan-player-overlay .xifan-btn i { font-size: 12px; }
.xifan-player-overlay .xifan-btn-primary {
    position: relative;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.4), rgba(94, 234, 212, 0.15));
    border-color: rgba(124, 92, 252, 0.55);
    color: #fff;
    box-shadow: 0 0 16px rgba(124, 92, 252, 0.25);
}
.xifan-player-overlay .xifan-btn-primary::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    border: 1px solid rgba(124, 92, 252, 0.5);
    animation: xifanBtnPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes xifanBtnPulse {
    0%   { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(1.18); opacity: 0; }
}
.xifan-player-overlay .xifan-btn-primary:hover {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.55), rgba(94, 234, 212, 0.25));
    box-shadow: 0 0 22px rgba(124, 92, 252, 0.4);
    transform: translateY(-1px);
}
.xifan-player-overlay .xifan-btn-primary:hover::after {
    animation: none;
}
.xifan-player-overlay .xifan-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: #cbcbd9;
    border-color: rgba(255, 255, 255, 0.1);
}
.xifan-player-overlay .xifan-btn-ghost:hover {
    background: rgba(124, 92, 252, 0.15);
    border-color: rgba(124, 92, 252, 0.4);
    color: #fff;
}
.xifan-player-overlay .xifan-detail-desc {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    line-height: 1.75;
    color: #b5b5c8;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    cursor: pointer;
}
.xifan-player-overlay .xifan-detail-desc.expanded {
    -webkit-line-clamp: unset;
}

/* 右侧：来源 / 剧集 */
.xifan-aside-block {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.xifan-aside-block:last-child { border-bottom: none; }
.xifan-aside-block.xifan-ep-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 8px;
}
.xifan-aside-label {
    font-size: 12px;
    font-weight: 600;
    color: #8b8ba7;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xifan-aside-label i { color: #5eead4; font-size: 11px; }

.xifan-source-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.xifan-player-overlay .xifan-source-btn {
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbcbd9;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.xifan-player-overlay .xifan-source-btn:hover {
    background: rgba(94, 234, 212, 0.1);
    border-color: rgba(94, 234, 212, 0.3);
    color: #5eead4;
}
.xifan-player-overlay .xifan-source-btn.active {
    background: rgba(94, 234, 212, 0.18);
    border-color: rgba(94, 234, 212, 0.5);
    color: #5eead4;
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.2);
    font-weight: 500;
}

.xifan-player-overlay .xifan-ep-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 6px;
    padding-right: 2px;
    align-content: start;
}
.xifan-player-overlay .xifan-ep-grid::-webkit-scrollbar { width: 4px; }
.xifan-player-overlay .xifan-ep-grid::-webkit-scrollbar-thumb { background: rgba(124, 92, 252, 0.3); border-radius: 2px; }
.xifan-player-overlay .xifan-ep-btn {
    padding: 7px 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    color: #cbcbd9;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    transition: all 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
}
.xifan-player-overlay .xifan-ep-btn:hover {
    background: rgba(124, 92, 252, 0.18);
    border-color: rgba(124, 92, 252, 0.5);
    color: #fff;
    box-shadow: 0 0 12px rgba(124, 92, 252, 0.25);
    transform: translateY(-1px);
}
.xifan-player-overlay .xifan-ep-btn.active {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.4), rgba(94, 234, 212, 0.15));
    border-color: rgba(124, 92, 252, 0.7);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(124, 92, 252, 0.3);
}
.xifan-ep-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #4e4e6a;
    font-size: 12px;
    padding: 30px 10px;
}
.xifan-retry-btn {
    padding: 5px 18px;
    border-radius: 14px;
    border: 1px solid #7c5cfc;
    background: transparent;
    color: #b9afff;
    cursor: pointer;
    font-size: 12.5px;
    transition: all 0.2s;
    margin-top: 4px;
    font-family: inherit;
}
.xifan-retry-btn:hover {
    background: #7c5cfc;
    color: #fff;
}

/* 浮层移动端 */
@media (max-width: 960px) {
    .xifan-player-body {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }
    .xifan-player-aside {
        width: 100%;
        max-height: 40vh;
    }
    .xifan-player-title { font-size: 14px; max-width: 50vw; }
    .xifan-player-subtitle { display: none; }
    .xifan-player-overlay .xifan-detail-cover { width: 88px; }
    .xifan-player-overlay .xifan-detail-title { font-size: 17px; }
}

/* ============================================================
   同步弹窗 (暗色紫青风格)
   ============================================================ */
.xifan-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 14, 0.78);
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: xifanOverlayIn 0.18s ease-out;
}
.xifan-modal-overlay.xifan-modal-leaving {
    animation: xifanOverlayOut 0.16s ease-in forwards;
}
@keyframes xifanOverlayOut {
    to { opacity: 0; transform: scale(0.98); }
}
.xifan-modal-box {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, #14141f 0%, #1a1a26 100%);
    border: 1px solid rgba(124, 92, 252, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(124, 92, 252, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: xifanModalIn 0.22s cubic-bezier(.22,.61,.36,1);
}
@keyframes xifanModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.xifan-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(124, 92, 252, 0.18);
    background: rgba(124, 92, 252, 0.05);
}
.xifan-modal-icon {
    color: #5eead4;
    font-size: 18px;
    filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.4));
}
.xifan-modal-icon.xifan-spin { animation: xifan-spin 1s linear infinite; }
.xifan-modal-title {
    font-size: 15.5px;
    font-weight: 600;
    color: #f0f0f5;
}
.xifan-modal-body {
    padding: 18px 20px 6px;
    color: #cbcbd9;
    font-size: 13.5px;
    line-height: 1.7;
}
.xifan-modal-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.xifan-modal-row i {
    color: #5eead4;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}
.xifan-modal-row b { color: #fff; }
.xifan-modal-row code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #5eead4;
    font-family: 'Courier New', monospace;
}
.xifan-modal-row.xifan-modal-warn i { color: #fbbf24; }
.xifan-modal-row.xifan-modal-warn { color: #fbbf24; }
.xifan-modal-row.xifan-modal-ok i { color: #4ade80; }
.xifan-modal-row.xifan-modal-ok { color: #c8e6c9; }
.xifan-modal-row.xifan-modal-err i { color: #f87171; }
.xifan-modal-row.xifan-modal-err { color: #fca5a5; }

.xifan-modal-progress {
    padding: 4px 20px 14px;
}
.xifan-modal-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.xifan-modal-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c5cfc 0%, #5eead4 100%);
    box-shadow: 0 0 10px rgba(124, 92, 252, 0.5);
    transition: width 0.4s cubic-bezier(.22,.61,.36,1);
    border-radius: 3px;
}
.xifan-modal-progress-text {
    margin-top: 8px;
    font-size: 12px;
    color: #8b8ba7;
    text-align: center;
    font-family: 'Courier New', monospace;
}

.xifan-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 6, 14, 0.3);
}
.xifan-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #f0f0f5;
    font-family: inherit;
}
.xifan-modal-btn-cancel {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbcbd9;
}
.xifan-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.xifan-modal-btn-confirm {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.5), rgba(94, 234, 212, 0.25));
    border-color: rgba(124, 92, 252, 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(124, 92, 252, 0.3);
}
.xifan-modal-btn-confirm:hover {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.7), rgba(94, 234, 212, 0.4));
    box-shadow: 0 0 22px rgba(124, 92, 252, 0.5);
    transform: translateY(-1px);
}
.xifan-modal-btn i { font-size: 12px; }

/* ----- 同步弹窗：状态徽章 ----- */
.xifan-modal-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    border: 1px solid transparent;
}
.xifan-modal-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.xifan-modal-status.is-running {
    color: #5eead4;
    background: rgba(94, 234, 212, 0.1);
    border-color: rgba(94, 234, 212, 0.3);
}
.xifan-modal-status.is-running .xifan-modal-status-dot {
    background: #5eead4;
    box-shadow: 0 0 8px #5eead4;
    animation: xifan-pulse 1.4s ease-in-out infinite;
}
.xifan-modal-status.is-ok {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.35);
}
.xifan-modal-status.is-ok .xifan-modal-status-dot {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}
.xifan-modal-status.is-err {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
}
.xifan-modal-status.is-err .xifan-modal-status-dot {
    background: #f87171;
    box-shadow: 0 0 8px #f87171;
}
@keyframes xifan-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

/* ----- 同步弹窗：标题区关闭按钮 ----- */
.xifan-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #8b8ba7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: all 0.18s;
    font-size: 12px;
    flex-shrink: 0;
}
.xifan-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ----- 同步弹窗：图标状态色 ----- */
.xifan-modal-icon.is-ok  { color: #4ade80; filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.4)); }
.xifan-modal-icon.is-err { color: #f87171; filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.4)); }

/* ----- 同步弹窗：状态行 ----- */
.xifan-sync-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.18);
    color: #cbcbd9;
    font-size: 13px;
    line-height: 1.5;
}
.xifan-sync-status i { color: #5eead4; font-size: 15px; flex-shrink: 0; }
.xifan-sync-status span { flex: 1; }

/* ----- 同步弹窗：指标卡（三栏） ----- */
.xifan-sync-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 12px;
}
.xifan-sync-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 10px 10px;
    text-align: center;
    position: relative;
    transition: all 0.25s;
    overflow: hidden;
}
.xifan-sync-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(124, 92, 252, 0.08), transparent 60%);
    pointer-events: none;
}
.xifan-sync-stat-label {
    font-size: 11.5px;
    color: #8b8ba7;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    letter-spacing: 0.2px;
}
.xifan-sync-stat-label i { font-size: 10.5px; color: #7c5cfc; }
.xifan-sync-stat-value {
    font-family: 'Courier New', monospace;
    font-size: 19px;
    font-weight: 700;
    color: #f0f0f5;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(124, 92, 252, 0.3);
}
.xifan-sync-stat-unit {
    font-size: 11px;
    font-weight: 500;
    color: #8b8ba7;
    margin-left: 2px;
    text-shadow: none;
}
.xifan-sync-stat.highlight {
    border-color: rgba(94, 234, 212, 0.35);
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.08), rgba(124, 92, 252, 0.04));
}
.xifan-sync-stat.highlight .xifan-sync-stat-label i { color: #5eead4; }
.xifan-sync-stat.highlight .xifan-sync-stat-value { color: #5eead4; text-shadow: 0 0 12px rgba(94, 234, 212, 0.4); }

/* ----- 同步弹窗：进度条 + 百分比 ----- */
.xifan-modal-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #8b8ba7;
}
.xifan-modal-progress-percent {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #5eead4;
    text-shadow: 0 0 8px rgba(94, 234, 212, 0.3);
}
.xifan-modal-progress-text {
    margin: 0;
    text-align: right;
    color: #cbcbd9;
    flex: 1;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* ----- 同步弹窗：错误/成功详情卡 ----- */
.xifan-modal-err-block {
    flex: 1;
    min-width: 0;
}
.xifan-modal-err-title {
    color: #fff;
    font-size: 13.5px;
    margin-bottom: 4px;
}
.xifan-modal-err-desc {
    font-size: 12.5px;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 6px;
    color: #cbcbd9;
}
.xifan-modal-err-list {
    margin: 6px 0 8px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.7;
    color: #fca5a5;
}
.xifan-modal-row.xifan-modal-ok .xifan-modal-err-list { color: #c8e6c9; }
.xifan-modal-err-list li { margin-bottom: 2px; }
.xifan-modal-err-list code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    color: #5eead4;
    font-family: 'Courier New', monospace;
    word-break: break-all;
}
.xifan-modal-err-snippet {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #6b6b80;
    line-height: 1.5;
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
}


/* ============================================================
   子标签页：全部/历史/收藏
   ============================================================ */
.xifan-sub-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--xf-border-soft);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.xifan-sub-tab {
    padding: 6px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--xf-text-sub);
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.xifan-sub-tab:hover {
    border-color: rgba(124,92,252,0.35);
    color: #fff;
    background: rgba(124,92,252,0.08);
}
.xifan-sub-tab.active {
    background: linear-gradient(135deg, rgba(124,92,252,0.4), rgba(94,234,212,0.12));
    border-color: rgba(124,92,252,0.6);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 0 12px rgba(124,92,252,0.2);
}
.xifan-sub-tab i { font-size: 11px; }

/* 历史/收藏卡片 */
.xifan-history-list,
.xifan-fav-list {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xifan-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.xifan-history-card:hover {
    background: rgba(124,92,252,0.08);
    border-color: rgba(124,92,252,0.25);
    transform: translateX(2px);
}
.xifan-history-cover {
    width: 48px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xifan-history-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xifan-history-info {
    flex: 1;
    min-width: 0;
}
.xifan-history-name {
    font-size: 13.5px;
    font-weight: 500;
    color: #f0f0f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xifan-history-ep {
    font-size: 11.5px;
    color: #8b8ba7;
    margin-top: 3px;
}
.xifan-history-arrow {
    color: #4e4e6a;
    flex-shrink: 0;
    transition: color 0.2s;
}
.xifan-history-card:hover .xifan-history-arrow {
    color: #7c5cfc;
}
.xifan-fav-remove-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #8b8ba7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    font-size: 12px;
}
.xifan-fav-remove-btn:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}

/* 收藏按钮状态 */
.xifan-fav-toggle.favorited {
    border-color: rgba(244,114,182,0.5) !important;
    background: rgba(244,114,182,0.12) !important;
    color: #f472b6 !important;
}
.xifan-fav-toggle.favorited:hover {
    background: rgba(244,114,182,0.2) !important;
    box-shadow: 0 0 14px rgba(244,114,182,0.2);
}

/* ============================================================
   番剧卡片扫光特效
   ============================================================ */
.xifan-anime-card {
    position: relative;
    overflow: hidden;
}
.xifan-anime-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(124,92,252,0.06), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s;
}
.xifan-anime-card:hover::after {
    left: 150%;
}
.xifan-anime-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xf-radius);
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(124,92,252,0.15) 0%, transparent 70%);
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}
.xifan-anime-card:hover::before {
    opacity: 1;
}

/* 番剧列表容器整体氛围光 */
.xifan-anime-list::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(124,92,252,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    animation: xifanAmbient 8s ease-in-out infinite;
}
@keyframes xifanAmbient {
    0%, 100% { transform: translate(0,0); opacity: 0.6; }
    50% { transform: translate(30px,-20px); opacity: 1; }
}

/* ============================================================
   强制隐藏外部扩展注入的 "希饭动漫" 标题横幅
.xifan-header-banner,
.xifan-site-title,
.xifan-site-header,
.xifan-banner,
.xifan-hero,
.xifan-title-bar,
.xifan-topbar,
.xifan-header,
.xifan-acg-header,
.xifan-brand,
[class*="xifan"][class*="header"]:not([class*="player"]):not([class*="topbar"]),
[class*="xifan"][class*="title"]:not([class*="detail"]):not([class*="player"]):not([class*="card"]),
#xifanHeader,
#xifanSiteTitle,
#xifanBanner {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   图片懒加载占位与加载态
   ============================================================ */
/* 所有懒加载图片：加载完成前透明，避免显示裂图/空白边框 */
img.xifan-lazy {
    opacity: 0;
    transition: opacity 0.25s ease;
}
/* 加载完成后显示 */
img.xifan-lazy.loaded,
img.xifan-lazy[src]:not([data-src]) {
    opacity: 1;
}
/* 详情页封面：加载中显示微微脉动的占位背景 */
.xifan-player-overlay .xifan-detail-cover {
    position: relative;
    overflow: hidden;
}
.xifan-player-overlay .xifan-detail-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.02) 100%
    );
    background-size: 200% 100%;
    animation: xifanShimmer 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.xifan-player-overlay .xifan-detail-cover img.xifan-lazy {
    position: relative;
    z-index: 2;
}
.xifan-player-overlay .xifan-detail-cover img.xifan-lazy.loaded + .xifan-detail-cover::before,
.xifan-player-overlay .xifan-detail-cover:has(img.xifan-lazy.loaded)::before,
.xifan-player-overlay .xifan-detail-cover:has(img[src]:not([data-src]))::before {
    animation: none;
    opacity: 0;
}
@keyframes xifanShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* 番剧封面卡片加载态：显示脉动背景 */
.xifan-cover img.xifan-lazy {
    position: relative;
    z-index: 2;
}
/* cinema-card 封面加载态 */
.cinema-card-poster img.xifan-lazy {
    position: relative;
    z-index: 2;
}