* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    overflow: hidden;
    background: #111418;
    color: #e8edf2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.app-shell {
    display: grid;
    grid-template-columns: 136px 1fr;
    height: 100vh;
    min-width: 0;
}

body.player-mode .app-shell {
    grid-template-columns: 1fr;
}

body.player-mode .site-nav {
    display: none;
}

body.player-mode .app-footer {
    display: none;
}

body.player-mode .page-content {
    padding-top: 0;
}

.site-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 81px 12px 14px;
    background: #101216;
    border-right: 1px solid #20242b;
    overflow-y: auto;
}

/* 统一Logo基础样式：所有Logo共用此规则，改一处全局生效 */
.logo {
    display: block;
    width: 112px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f2ec;
}

.logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-nav nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-link {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #c7ced8;
    text-align: left;
    font-size: 14px;
}

.nav-link:hover,
.nav-link.active {
    color: #ff4b35;
    background: rgba(255, 75, 53, 0.12);
}

.parse-card {
    margin-top: auto;
    padding: 12px;
    border-radius: 14px;
    background: #171b21;
    border: 1px solid #242a33;
}

.parse-card h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 13px;
}

.parse-card input,
.search-bar input {
    width: 100%;
    border: 0;
    outline: none;
    background: #22272e;
    color: #fff;
}

.parse-card input {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.parse-card button {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 0;
    border-radius: 999px;
    background: #ff4b35;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.main-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: #15191e;
}

.page-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 67px;
    scrollbar-gutter: stable;
}

body.player-mode .page-content {
    overflow: hidden;
}

.app-footer {
    flex: 0 0 auto;
    padding: 12px 28px 16px;
    border-top: 1px solid #20242b;
    background: #15191e;
    color: #707985;
    font-size: 11px;
    text-align: center;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 67px;
    /* 统一padding：左侧12px与侧边栏对齐，右侧28px保持视觉平衡 */
    padding: 14px 28px 12px 12px;
    background: rgba(21, 25, 30, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #20242b;
}

/* 顶部栏Logo：继承.logo基础样式，仅控制显示/隐藏状态 */
.topbar-brand {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    flex-shrink: 0;
}

.topbar-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.player-mode .topbar-brand {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 移除player模式下topbar的对齐方式改变，保持space-between确保观看记录按钮位置不变 */
/* body.player-mode .topbar {
    justify-content: flex-start;
} */

.search-wrap {
    position: relative;
    width: min(520px, 48vw);
}

.search-bar {
    display: flex;
    width: 100%;
    height: 36px;
    overflow: hidden;
    border-radius: 4px;
    background: #22272e;
}

.search-bar input {
    flex: 1;
    padding: 0 14px;
}

.search-bar button {
    width: 46px;
    border: 0;
    background: #22272e;
    color: #b7c0cc;
    font-size: 18px;
}

.search-suggest-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #2a313b;
    border-radius: 10px;
    background: #171b21;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.search-suggest-panel button,
.suggest-empty {
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c7ced8;
    text-align: left;
    font-size: 13px;
}

.search-suggest-panel button:hover {
    color: #fff;
    background: rgba(255, 75, 53, 0.14);
}

.suggest-empty {
    color: #8d98a7;
}

.ghost-btn,
.section-title button {
    border: 0;
    background: transparent;
    color: #c7ced8;
}

.page-error {
    margin: 14px 28px 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 75, 53, 0.35);
    border-radius: 10px;
    background: rgba(255, 75, 53, 0.12);
    color: #ffd6cf;
    font-size: 14px;
}

body.player-mode .page-error {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 80;
    width: min(560px, calc(100vw - 32px));
    margin: 0;
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.page-view:not(.settings-page):not(.category-page) {
    padding: 26px 28px 48px;
}

/* V4: 首页轮播图样式 */
.hero-banner-slider {
    position: relative;
    width: 100%;
    height: clamp(300px, 34vw, 470px);
    margin-bottom: 24px;
    border-radius: 10px;
    overflow: hidden;
    background: #171b21;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.banner-slides {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    contain: paint;
    transition: transform 0.5s ease-in-out;
}

.banner-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    background-size: cover !important;
    background-position: center 32% !important;
    background-repeat: no-repeat !important;
}

.banner-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.2) 34%, rgba(0, 0, 0, 0.02) 100%);
    pointer-events: none;
}

.banner-info-card {
    position: absolute;
    left: 34px;
    bottom: 34px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    max-width: 360px;
    color: #fff;
}

.banner-info-poster {
    width: 92px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.banner-info-body {
    min-width: 0;
    padding-bottom: 4px;
}

.banner-info-body h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.banner-info-body span {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 75, 53, 0.9);
    font-size: 12px;
    font-weight: 600;
}

.banner-info-body p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.banner-overlay {
    position: absolute;
    left: 28px;
    bottom: 26px;
    max-width: 42%;
    padding: 0;
    background: transparent;
    color: white;
    z-index: 2;
}

.banner-overlay h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.banner-overlay p {
    font-size: 13px;
    opacity: 0.92;
    max-width: 100%;
}

.banner-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-dot.active {
    background: #ff4b35;
    transform: scale(1.2);
}

.banner-prev,
.banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 20px;
    padding: 12px 16px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 4px;
}

.hero-banner-slider:hover .banner-prev,
.hero-banner-slider:hover .banner-next {
    opacity: 1;
}

.banner-prev:hover,
.banner-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.banner-prev {
    left: 12px;
}

.banner-next {
    right: 12px;
}

/* 自动轮播动画 */
@keyframes bannerSlideIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

.banner-slide.active {
    animation: bannerSlideIn 0.6s ease-out;
}

.hero-banner {
    display: flex;
    align-items: flex-end;
    min-height: 350px;
    padding: 44px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(16, 18, 22, 0.72), rgba(16, 18, 22, 0.14)),
        radial-gradient(circle at 72% 36%, rgba(255, 75, 53, 0.28), transparent 28%),
        linear-gradient(135deg, #2e353f, #171b21 62%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.hero-banner span {
    color: #ff4b35;
    font-size: 14px;
    font-weight: 800;
}

.hero-banner h1 {
    margin-top: 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.1;
}

.hero-banner p {
    margin-top: 12px;
    color: #c4ccd7;
    font-size: 15px;
}

.content-section {
    margin-top: 30px;
}

.section-title,
.sort-bar,
.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.section-title h2,
.result-heading,
.sort-bar strong {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.result-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid #242a33;
}

.result-heading em {
    color: #ff4b35;
    font-style: normal;
}

/* ===== 设置页（Settings Page） ===== */
.settings-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.settings-header {
    margin-bottom: 32px;
}

.settings-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 75, 53, 0.12);
    color: #ff4b35;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.settings-header h1 {
    margin-top: 12px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.settings-header p {
    margin-top: 6px;
    color: #8d98a7;
    font-size: 14px;
}

/* 设置卡片组 */
.settings-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 单张设置卡片 */
.settings-card {
    display: flex;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid #242a33;
    border-radius: 14px;
    background: #171b21;
    transition: border-color 0.2s;
}

.settings-card:hover {
    border-color: #313844;
}

.settings-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #1f252d;
    color: #ff4b35;
    font-size: 20px;
    border: 1px solid #2a303b;
}

.settings-card-body {
    flex: 1;
    min-width: 0;
}

.settings-card-title {
    color: #e8edf2;
    font-size: 16px;
    font-weight: 700;
}

.settings-card-desc {
    margin-top: 4px;
    color: #8d98a7;
    font-size: 13px;
    line-height: 1.6;
}

/* 输入行（地址解析） */
.settings-card-input-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.settings-card-input-row input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #2b323d;
    border-radius: 8px;
    background: #1a1f26;
    color: #e8edf2;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.settings-card-input-row input::placeholder {
    color: #5a6472;
}

.settings-card-input-row input:focus {
    border-color: #ff4b35;
}

.settings-card-input-row button {
    flex-shrink: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: #ff4b35;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-card-input-row button:hover {
    background: #e63e2a;
}

/* 元数据行（缓存） */
.settings-card-meta {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.settings-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-meta-label {
    color: #8d98a7;
    font-size: 12px;
}

.settings-meta-item strong {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.settings-meta-text {
    color: #aeb7c3;
    font-size: 13px;
}

/* 操作按钮行 */
.settings-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.settings-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #2a303b;
    border-radius: 8px;
    background: #1a1f26;
    color: #e8edf2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.settings-btn:hover {
    background: #242a33;
    border-color: #3b4452;
}

.settings-btn-danger {
    border-color: #3a1f1e;
    background: #2a1211;
    color: #e55a4e;
}

.settings-btn-danger:hover {
    background: #3f1a18;
    border-color: #5a2a27;
}

.settings-btn-file {
    cursor: pointer;
}

.settings-btn-file + input[type="file"] {
    display: none;
}

/* 下拉选择框 */
.settings-select {
    padding: 8px 12px;
    border: 1px solid #2a303b;
    border-radius: 8px;
    background: #1a1f26;
    color: #e8edf2;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.settings-select:focus {
    border-color: #ff4b35;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .settings-card {
        flex-direction: column;
        gap: 12px;
    }
    .settings-card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .settings-card-meta {
        gap: 16px;
    }
}

.home-task-status {
    margin: 14px 0 22px;
}

.home-task-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #29313d;
    border-radius: 12px;
    background: rgba(23, 27, 33, 0.88);
    color: #9aa4b2;
    font-size: 13px;
}

.home-task-status-card strong {
    color: #e8edf2;
}

.home-task-status-card.ok {
    border-color: rgba(46, 204, 113, 0.35);
}

.home-task-status-card.bad {
    border-color: rgba(255, 75, 53, 0.52);
}

.home-task-status-card.pending {
    border-color: rgba(255, 193, 7, 0.38);
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

.home-load-more {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 160px;
    height: 36px;
    border: 1px solid #333c4a;
    border-radius: 999px;
    background: #1c2128;
    color: #e8edf2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.home-load-more:hover {
    background: rgba(255, 75, 53, 0.12);
    border-color: #ff4b35;
    color: #ff4b35;
}

.carousel-shell {
    position: relative;
}

.poster-carousel {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.poster-carousel::-webkit-scrollbar {
    display: none;
}

.poster-carousel .poster-card {
    flex: 0 0 calc((100% - 98px) / 8);
    scroll-snap-align: start;
}

.carousel-arrow {
    position: absolute;
    top: 38%;
    z-index: 5;
    width: 34px;
    height: 54px;
    border: 0;
    border-radius: 10px;
    background: rgba(15, 20, 28, 0.82);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.18s ease, background 0.18s ease;
}

.carousel-shell:hover .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    background: rgba(255, 78, 64, 0.92);
}

.carousel-prev {
    left: 8px;
}

.carousel-next {
    right: 8px;
}

@media (max-width: 1280px) {
    .poster-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .poster-carousel .poster-card {
        flex-basis: calc((100% - 70px) / 6);
    }
}

@media (max-width: 980px) {
    .poster-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .poster-carousel .poster-card {
        flex-basis: calc((100% - 42px) / 4);
    }
}

.search-results,
.asset-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1280px) {
    .search-results {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .search-results {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===== 个人中心（Profile Page） ===== */
.profile-page {
    padding: 28px 24px;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.profile-header h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.profile-stats {
    display: flex;
    gap: 20px;
    color: #9aa4b2;
    font-size: 14px;
}

.profile-stats strong {
    color: #e8edf2;
    font-size: 18px;
    margin-right: 4px;
}

.profile-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1a1f26;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #242a33;
}

/* 页签导航 */
.profile-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    background: #1a1f26;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #242a33;
}

.profile-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #9aa4b2;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-tab:hover {
    color: #e8edf2;
    background: rgba(255, 255, 255, 0.05);
}

.profile-tab.active {
    color: #fff;
    background: #2c333d;
}

/* 页面内容容器 */
.profile-content {
    min-height: 200px;
}

.profile-tab-pane {
    display: none;
}

.profile-tab-pane.active {
    display: block;
}

.profile-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.profile-count {
    color: #9aa4b2;
    font-size: 13px;
}

.danger-btn-sm {
    padding: 5px 12px;
    border: 1px solid #3a1f1e;
    border-radius: 6px;
    background: #2a1211;
    color: #e55a4e;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.danger-btn-sm:hover {
    background: #3f1a18;
    border-color: #5a2a27;
}

/* 个人中心筛选栏（M4 3.1） */
.profile-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.profile-filter-select,
.profile-filter-input {
    padding: 9px 12px;
    border: 1px solid #242a33;
    border-radius: 8px;
    background: #1a1f26;
    color: #e8edf2;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.profile-filter-input {
    flex: 1;
    min-width: 180px;
}

.profile-filter-select:focus,
.profile-filter-input:focus {
    border-color: #3b82f6;
}

.profile-filter-input::placeholder {
    color: #5a6472;
}

.profile-filter-reset {
    padding: 9px 16px;
    border: 1px solid #242a33;
    border-radius: 8px;
    background: #20262f;
    color: #c2cad6;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-filter-reset:hover {
    background: #2a313c;
    color: #fff;
}

.profile-filter-count {
    margin-left: auto;
    color: #7f8a99;
    font-size: 13px;
    white-space: nowrap;
}

/* 观看统计卡（M4 3.4） */
.profile-stat-card {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: #161b22;
    border: 1px solid #242a33;
    border-radius: 12px;
}

.profile-stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.profile-stat-card-title {
    color: #e8edf2;
    font-size: 15px;
    font-weight: 600;
}

.profile-stat-card-range {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9aa4b2;
    font-size: 13px;
}

.profile-stat-card-range select {
    padding: 5px 10px;
    border: 1px solid #242a33;
    border-radius: 7px;
    background: #1a1f26;
    color: #e8edf2;
    font-size: 13px;
    outline: none;
}

.profile-stat-card-metrics {
    display: flex;
    gap: 28px;
}

.stat-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-num {
    color: #3b82f6;
    font-size: 26px;
    font-weight: 700;
}

.stat-unit {
    color: #9aa4b2;
    font-size: 13px;
}

/* toast（M4 3.3 快捷键视觉反馈） */
.toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    padding: 10px 16px;
    background: rgba(20, 24, 30, 0.95);
    color: #e8edf2;
    font-size: 14px;
    border: 1px solid #2c333d;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* 快捷键帮助面板（M4 3.3） */
.shortcut-help {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}

.shortcut-help.hidden {
    display: none;
}

.shortcut-help-card {
    background: #161b22;
    border: 1px solid #2c333d;
    border-radius: 14px;
    padding: 24px 28px;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.shortcut-help-card h3 {
    margin: 0 0 14px;
    color: #e8edf2;
    font-size: 17px;
}

.shortcut-help-card ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcut-help-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c2cad6;
    font-size: 14px;
}

.shortcut-help-card kbd {
    display: inline-block;
    min-width: 28px;
    padding: 3px 8px;
    text-align: center;
    background: #1a1f26;
    border: 1px solid #2c333d;
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #e8edf2;
    font-family: inherit;
    font-size: 13px;
}

.shortcut-help-card > button {
    width: 100%;
    padding: 9px;
    border: 1px solid #2c333d;
    border-radius: 8px;
    background: #20262f;
    color: #c2cad6;
    font-size: 14px;
    cursor: pointer;
}

.shortcut-help-card > button:hover {
    background: #2a313c;
    color: #fff;
}

/* 播放器倍速菜单（M4 3.5） */
.speed-item {
    position: relative;
}

.speed-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: rgba(20, 24, 30, 0.97);
    border: 1px solid #2c333d;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.speed-menu.hidden {
    display: none;
}

.speed-menu button {
    padding: 7px 18px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #c2cad6;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.speed-menu button:hover {
    background: #2c333d;
    color: #fff;
}

/* 个人中心卡片网格 */
.profile-content .asset-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

/* 个人中心卡片 */
.profile-card {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    background: #171b21;
    border: 1px solid #1f252d;
    transition: transform 0.18s, border-color 0.18s;
}

.profile-card:hover {
    transform: translateY(-2px);
    border-color: #313844;
}

.profile-card-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1f26;
}

.profile-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-card-placeholder {
    background: linear-gradient(135deg, #1a1f26, #242a33);
}

/* 进度条覆盖 */
.profile-card-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
}

.profile-card-progress-fill {
    height: 100%;
    background: #ff4b35;
    border-radius: 0 2px 0 0;
    transition: width 0.3s;
}

/* 集数徽章 */
.profile-card-ep-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffd966;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* 卡片文字区 */
.profile-card-body {
    padding: 10px 10px 12px;
}

.profile-card-title {
    color: #e8edf2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card-progress-text {
    margin-top: 4px;
    color: #8d98a7;
    font-size: 12px;
}

@media (max-width: 1280px) {
    .profile-content .asset-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .profile-content .asset-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.assets-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

/* V4: 资产筛选栏样式 */
.assets-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 14px 18px;
    background: #171b21;
    border: 1px solid #1f252d;
    border-radius: 12px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
}

.filter-group select,
.filter-search input {
    padding: 7px 12px;
    border: 1px solid #2d3748;
    border-radius: 6px;
    background: #0f1216;
    color: #e5e7eb;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
}

.filter-group select:focus,
.filter-search input:focus {
    border-color: #3b82f6;
}

.filter-search input {
    width: 200px;
}

.filter-results {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

#filterResultCount {
    font-size: 13px;
    color: #9ca3af;
}

.filter-reset-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-reset-btn:hover {
    background: #dc2626;
    color: white;
}

/* V4: 批量管理模式按钮 */
.batch-mode-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.batch-mode-btn:hover {
    background: #3b82f6;
    color: white;
}

/* V4: 批量操作栏 */
.batch-actions-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 12px 18px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    flex-wrap: wrap;
}

.batch-actions-bar label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #e5e7eb;
    cursor: pointer;
}

.batch-actions-bar span {
    font-size: 13px;
    color: #9ca3af;
}

.batch-actions-bar strong {
    color: #3b82f6;
}

.batch-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.batch-delete {
    background: transparent;
    border-color: #dc2626;
    color: #dc2626;
}

.batch-delete:hover {
    background: #dc2626;
    color: white;
}

.batch-move {
    background: transparent;
    border-color: #059669;
    color: #059669;
}

.batch-move:hover {
    background: #059669;
    color: white;
}

.batch-cancel {
    background: transparent;
    border-color: #6b7280;
    color: #9ca3af;
}

.batch-cancel:hover {
    background: #6b7280;
    color: white;
}

/* V4: 批量选择模式下的资产卡片 */
.asset-card.batch-mode {
    position: relative;
    padding-left: 40px;
}

.asset-card.batch-mode::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #4b5563;
    border-radius: 4px;
    background: #0f1216;
    cursor: pointer;
}

.asset-card.batch-mode.selected::before {
    background: #3b82f6;
    border-color: #3b82f6;
}

.asset-card.batch-mode.selected::after {
    content: '✓';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* M4 3.2：profile 卡片批量选择态（复用 .asset-card.batch-mode 逻辑，profile 卡片用 .profile-card） */
.profile-card.batch-mode {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
}

.profile-card.batch-mode::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #4b5563;
    border-radius: 4px;
    background: #0f1216;
    cursor: pointer;
}

.profile-card.batch-mode.selected::before {
    background: #3b82f6;
    border-color: #3b82f6;
}

.profile-card.batch-mode.selected::after {
    content: '✓';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* M4 3.2：批量操作栏相对定位 + 片单下拉 */
.batch-actions-bar { position: relative; }

.batch-playlist-menu {
    position: absolute;
    top: 100%;
    left: 12px;
    margin-top: 6px;
    min-width: 220px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.batch-playlist-menu.hidden { display: none; }

.batch-playlist-item {
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 13px;
    cursor: pointer;
}

.batch-playlist-item:hover { background: #334155; }

.batch-playlist-new {
    color: #3b82f6;
    border-top: 1px solid #334155;
    margin-top: 4px;
    padding-top: 10px;
}

.assets-summary div,
.asset-card {
    border: 1px solid #1f252d;
    border-radius: 12px;
    background: #171b21;
}

.assets-summary div {
    padding: 18px;
}

.assets-summary strong {
    display: block;
    color: #fff;
    font-size: 30px;
}

.assets-summary span,
.asset-info span {
    color: #8d98a7;
    font-size: 12px;
}

.asset-card {
    display: flex;
    gap: 14px;
    min-height: 112px;
    padding: 12px;
    transition: transform 0.18s, background 0.18s, border-color 0.18s;
}

.asset-card:hover {
    transform: translateY(-2px);
    background: #1b2027;
    border-color: #313844;
}

.asset-cover {
    width: 66px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    background: #242a33;
    flex-shrink: 0;
}

.asset-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.asset-info strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
}

/* V4: 首页海报卡片样式（用于热门推荐和最新更新） */
.poster-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
    background: #171b21;
}

.poster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.poster-card .poster-img {
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #1f252d;
    position: relative;
}

.poster-card .poster-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.poster-card:hover .poster-img img {
    transform: scale(1.05);
}

.poster-card .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 14px;
    background: linear-gradient(135deg, #1f252d, #171b21);
}

.home-skeleton-card {
    pointer-events: none;
}

.home-skeleton-img,
.home-skeleton-line {
    background: linear-gradient(90deg, #202630 0%, #2b3340 45%, #202630 90%);
    background-size: 220% 100%;
    animation: homeSkeletonPulse 1.2s ease-in-out infinite;
}

.home-skeleton-line {
    height: 12px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.home-skeleton-title {
    width: 82%;
}

.home-skeleton-meta {
    width: 48%;
}

@keyframes homeSkeletonPulse {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

.poster-card .poster-info {
    padding: 12px;
}

.poster-card .poster-info h3 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poster-card .poster-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.4;
}

/* ===== 分类页（Category Page） ===== */
.category-page {
    padding: 28px 24px 48px;
}

.category-header {
    margin-bottom: 24px;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 75, 53, 0.12);
    color: #ff4b35;
    font-size: 13px;
    font-weight: 800;
}

.category-header h1 {
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.category-search {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    max-width: 400px;
}

.category-search input {
    flex: 1;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #333c4a;
    background: #1a1e26;
    color: #e8edf2;
    font-size: 14px;
    outline: none;
}

.category-search input:focus {
    border-color: #ff4b35;
}

.search-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    background: #ff4b35;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.search-btn:hover {
    background: #ff6b55;
}

/* 筛选栏（标签式） */
.category-filters {
    margin-bottom: 16px;
    border: 1px solid #242a33;
    border-radius: 10px;
    background: #161a1f;
    padding: 4px 0;
}

.filter-group {
    display: flex;
    align-items: flex-start;
    padding: 6px 14px;
    gap: 10px;
    border-bottom: 1px solid #1f252d;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-label {
    flex-shrink: 0;
    width: 44px;
    color: #8d98a7;
    font-size: 13px;
    font-weight: 600;
    line-height: 30px;
    text-align: right;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: transparent;
    color: #b0b9c5;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.filter-tag:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e8edf2;
}

.filter-tag.active {
    background: rgba(255, 75, 53, 0.12);
    color: #ff4b35;
    border-color: rgba(255, 75, 53, 0.25);
    font-weight: 600;
}

/* 海报标记 */
.poster-note {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffd966;
    font-size: 11px;
    font-weight: 600;
}

/* 分页 */
.category-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 8px 14px;
    border: 1px solid #242a33;
    border-radius: 8px;
    background: #1a1f26;
    color: #c4ccd7;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s;
}

.page-btn:hover {
    background: #242a33;
    border-color: #3b4452;
    color: #fff;
}

.page-btn-active {
    background: #ff4b35;
    border-color: #ff4b35;
    color: #fff;
    font-weight: 700;
}

.page-btn-active:hover {
    background: #e63e2a;
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #5a6472;
    font-size: 14px;
    letter-spacing: 2px;
}

/* 分类页海报图片 */
.poster-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #1f252d;
}

.poster-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.poster-card:hover .poster-img-wrap img {
    transform: scale(1.05);
}

.poster-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1f252d, #171b21);
}

.update-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

/* 豆瓣评分标签 */
.score-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: rgba(255, 215, 0, 0.12);
    color: #ffd966;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* V4: 热榜样式 */
.ranking-grid {
    margin-top: 8px;
}

.ranking-grid-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .ranking-grid-inner {
        grid-template-columns: 1fr;
    }

    /* 移动端轮播图适配 */
    .hero-banner-slider {
        height: clamp(210px, 52vw, 300px);
        border-radius: 8px;
    }
    .banner-slide {
        background-position: center 32% !important;
    }
    .banner-info-card {
        left: 16px;
        bottom: 18px;
        gap: 10px;
        max-width: calc(100% - 32px);
    }
    .banner-info-poster {
        width: 62px;
        border-radius: 6px;
    }
    .banner-info-body h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }
    .banner-info-body span {
        margin-bottom: 6px;
        padding: 3px 7px;
        font-size: 11px;
    }
    .banner-info-body p {
        font-size: 12px;
    }
    .banner-overlay {
        left: 16px;
        bottom: 16px;
        max-width: 68%;
        padding: 0;
    }
    .banner-overlay h3 {
        font-size: 16px;
    }
    .banner-overlay p {
        font-size: 12px;
        max-width: 100%;
    }
    .banner-prev,
    .banner-next {
        padding: 8px 10px;
        font-size: 14px;
    }
}

.ranking-category {
    background: #171b21;
    border: 1px solid #1f252d;
    border-radius: 10px;
    padding: 16px;
}

.ranking-category-title {
    font-size: 16px;
    font-weight: 600;
    color: #f0f2f5;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1f252d;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.ranking-item:hover {
    background: #1f252d;
}

.ranking-num {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
}

.ranking-num.rank-1 { color: #ff4b35; font-size: 15px; }
.ranking-num.rank-2 { color: #f59e0b; font-size: 14px; }
.ranking-num.rank-3 { color: #60a5fa; font-size: 14px; }

.ranking-title {
    font-size: 13px;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ranking-item:hover .ranking-title {
    color: #fff;
}

.search-results {
    margin-top: 22px;
}

/* 搜索结果显示为海报卡片风格（与首页poster-card一致） */
.search-result-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: #171b21;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-result-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.search-result-cover-wrap {
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #1f252d;
    position: relative;
}

.search-result-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.search-result-item:hover .search-result-cover-wrap img {
    transform: scale(1.05);
}

.search-result-ep-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #ff4b35;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-info {
    padding: 10px 12px 12px;
}

.search-result-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* 无封面时的占位 */
.search-result-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 14px;
    background: linear-gradient(135deg, #1f252d, #171b21);
}

.home-card,
.library-item {
    display: flex;
    gap: 14px;
    padding: 10px;
    border-radius: 10px;
    background: #171b21;
    border: 1px solid #1f252d;
    transition: transform 0.18s, background 0.18s, border-color 0.18s;
}

.home-card:hover,
.library-item:hover {
    transform: translateY(-2px);
    background: #1b2027;
    border-color: #313844;
}

.home-card img,
.library-cover {
    width: 88px;
    height: 118px;
    object-fit: cover;
    border-radius: 8px;
    background: #242a33;
    flex-shrink: 0;
}

.home-card div,
.library-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.home-card strong,
.library-title {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.home-card span,
.library-sub,
.empty-tip,
.search-empty,
.search-loading,
.search-error {
    color: #8d98a7;
    font-size: 12px;
}

.search-error {
    color: #ff6553;
}

.landscape-list,
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landscape-list button,
.tag-list button {
    min-width: 92px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #22272e;
    color: #dce5ef;
}

.landscape-list button:hover,
.tag-list button:hover {
    background: #ff4b35;
    color: #fff;
}

.series-detail {
    padding: 4px 0 0;
}

.series-main {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 28px;
    align-items: start;
    padding-bottom: 26px;
    border-bottom: 1px solid #242a33;
}

.series-text h2 {
    border-left: 4px solid #ff4b35;
    padding-left: 12px;
    color: #fff;
    font-size: 28px;
}

.series-text p {
    margin-top: 10px;
    color: #aeb7c4;
    line-height: 1.7;
}

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.detail-tags span {
    padding: 5px 10px;
    border-radius: 6px;
    background: #2a3039;
    color: #dce5ef;
    font-size: 12px;
    font-weight: 700;
}

.detail-meta {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    color: #c8d1dc;
}

.detail-meta div {
    display: flex;
    gap: 4px;
    min-width: 0;
}

.detail-meta dt {
    flex: 0 0 auto;
    color: #8d98a7;
    font-weight: 800;
}

.detail-meta dd {
    min-width: 0;
    color: #dce5ef;
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.watchlist-actions,
.playlist-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.watchlist-actions span,
.playlist-actions span {
    color: #8d98a7;
    font-size: 13px;
}

.playlist-actions select {
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid #2b323c;
    border-radius: 999px;
    background: #1b2027;
    color: #dce5ef;
}

.playlist-detail-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #2b323c;
    border-radius: 12px;
    background: #171b21;
}

.playlist-detail-card strong {
    display: block;
    color: #fff;
}

.playlist-detail-card span {
    color: #8d98a7;
    font-size: 12px;
}

.watchlist-btn {
    padding: 8px 14px;
    border: 1px solid #2b323c;
    border-radius: 999px;
    background: #1b2027;
    color: #cbd3dd;
    font-weight: 700;
}

.watchlist-btn.active {
    border-color: #ff4b35;
    background: rgba(255, 75, 53, 0.15);
    color: #ff4b35;
}

.series-desc {
    max-width: 920px;
}

.cover {
    width: 180px;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    background: #242a33;
}

.favorite-btn,
.btn-primary,
.sort-btn,
.library-delete,
.episode-nav button {
    border: 0;
    border-radius: 999px;
    background: #ff4b35;
    color: #fff;
    font-weight: 700;
}

.favorite-btn,
.btn-primary {
    margin-top: 18px;
    padding: 10px 22px;
}

.sort-btn,
.library-delete,
.episode-nav button {
    padding: 7px 12px;
    background: #22272e;
    color: #cbd3dd;
}

.episode-list {
    display: grid;
    grid-template-columns: repeat(10, minmax(52px, 1fr));
    gap: 10px;
}

.episode-btn {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: #1c2128;
    color: #d5dce6;
}

.episode-btn:hover,
.episode-btn.active {
    background: #ff4b35;
    color: #fff;
}

.episode-btn:disabled,
.episode-btn.pending {
    cursor: not-allowed;
    opacity: 0.48;
    filter: saturate(0.35);
}

.episode-btn:disabled:hover,
.episode-btn.pending:hover {
    background: #1c2128;
    color: #d5dce6;
    transform: none;
}

/* M2/P3: 下一集高亮（B6 连续流） */
.episode-btn.next-to-watch {
    border: 1px solid #ffb020;
    background: rgba(255, 176, 32, 0.16);
    color: #ffd479;
    font-weight: 600;
}
.series-detail {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(21, 25, 33, 0.96), rgba(10, 12, 16, 0.98));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.series-detail .series-main {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: radial-gradient(circle at top left, rgba(255, 75, 53, 0.12), transparent 34%), #11151d;
}

.series-detail .sort-bar {
    justify-content: flex-start;
    margin: 18px 0 12px;
}

.episode-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.episode-heading-actions .sort-btn {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    box-shadow: none;
}

.episode-heading-actions .sort-btn .handle-btn-icon {
    margin-right: 10px;
    color: #8c7dff;
    font-size: 16px;
}

#episodeList.episode-list {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: #0d1016;
}

#episodeList .episode-btn {
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: #171b23;
    color: #e8edf2;
    font-weight: 800;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#episodeList .episode-btn:hover,
#episodeList .episode-btn.active {
    border-color: #ff4b35;
    background: linear-gradient(135deg, #ff4b35, #e63e2a);
    color: #fff;
    transform: translateY(-1px);
}

#episodeList .episode-btn:disabled:hover,
#episodeList .episode-btn.pending:hover {
    border-color: rgba(255, 255, 255, 0.06);
    background: #171b23;
    color: #e8edf2;
    transform: none;
}

.recommendations-block {
    border-top: 1px solid #242a33;
    padding-top: 24px;
}

body.player-mode .page-view.player-page {
    padding: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #0a0c10;
}

.player-layout {
    display: grid;
    grid-template-columns: 1fr 0;
    height: 100%;
    min-width: 0;
    transition: grid-template-columns 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2);
}

.player-layout.episodes-open {
    grid-template-columns: 1fr 320px;
}

/* 保留旧类名兼容 */
.player-layout.episodes-indented {
    grid-template-columns: 1fr 0;
}

.player-side {
    order: 2;
    overflow: hidden;
    overflow-y: auto;
    min-width: 0;
    background: #0f1219;
    border-left: 1px solid #1e2633;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 侧边面板通用样式 */
.player-side .panel {
    padding: 16px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid #1a202c;
}

.player-side .player-episode-panel {
    padding-left: 18px;
    padding-right: 38px;
}

/* 面板隐藏时透明，打开时可见 */
.player-layout:not(.episodes-open) .player-episode-panel,
.player-layout:not(.episodes-open) #singlePlayInfo,
.player-layout:not(.episodes-open) #libraryPanel {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.player-layout.episodes-open .player-episode-panel,
.player-layout.episodes-open #singlePlayInfo,
.player-layout.episodes-open #libraryPanel {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.player-side .panel:last-child {
    border-bottom: none;
}

.player-side .panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.player-side .panel-title-row h3 {
    color: #e8edf2;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 选集面板头部 */
.player-episode-panel .panel-title-row {
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 12px;
}

.player-episode-title-row > div {
    min-width: 0;
}

.player-episode-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.player-episode-heading-actions h3 {
    min-width: 0;
    margin: 0;
}

.player-episode-kicker {
    display: block;
    margin-bottom: 4px;
    color: #ff6b57;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

@font-face {
    font-family: 'rrys-iconfont';
    src: url('/static/fonts/rrys-iconfont.woff') format('woff'),
         url('/static/fonts/rrys-iconfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'rrys-iconfont' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: revert;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-next::before { content: "\e91b"; }
.icon-left::before { content: "\e966"; }
.icon-sort::before { content: "\e968"; }

.module-player-handle-items {
    display: flex;
    align-items: center;
    border-top: 1px solid #25252b;
    background: #16161a;
}

.module-player-handle-item {
    display: inline-block;
    position: relative;
    border-left: 3px solid #25252b;
    font-size: 0;
}

.module-player-handle-item:first-child {
    border-left: 0;
}

.handle-btn {
    display: inline-block;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.handle-btn:hover:not(:disabled) {
    color: #e50914;
}

.handle-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.handle-btn-icon {
    display: inline-block;
    margin-right: 10px;
    color: currentColor;
    font-size: 16px;
}

.handle-btn-icon i {
    vertical-align: -1px;
}

.episode-nav-btn.prev .icon-next {
    transform: scaleX(-1);
}

.handle-btn-name {
    display: inline-block;
}

.player-sort-btn {
    color: #fff;
}

.player-sort-btn .handle-btn-icon {
    color: #8c7dff;
}

.player-episode-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.player-episode-summary {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7f8da3;
    font-size: 12px;
    line-height: 1.4;
}

.player-panel-sort-btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
}

.player-panel-sort-btn .handle-btn-icon,
.player-sort-btn .handle-btn-icon {
    color: #8c7dff;
}

.player-panel-sort-btn .handle-btn-icon {
    margin-right: 10px;
    font-size: 16px;
}

/* 剧集网格 */
.player-side .episode-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    flex: 1;
    overflow-y: auto;
    padding: 2px 2px 8px;
    align-content: start;
}

.player-episode-list .episode-btn {
    min-height: 36px;
    padding: 6px 4px;
    text-align: center;
    background: rgba(24, 30, 42, 0.86);
    border: 1px solid rgba(63, 75, 96, 0.58);
    border-radius: 7px;
    color: #b8c7dd;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
}

.player-episode-list .episode-btn:hover {
    background: #1f2a3d;
    border-color: #ff4b35;
    color: #fff;
    transform: translateY(-1px);
}

.player-episode-list .episode-btn.active {
    background: linear-gradient(135deg, #ff4b35, #e63e2a);
    border-color: #ff4b35;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 75, 53, 0.3);
}

.player-episode-list .episode-btn.active::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 8px;
    border: 1px solid rgba(255, 75, 53, 0.4);
    pointer-events: none;
}

/* 当前播放剧集 - 非点击样式（类似rrys.lv） */
.player-episode-list .episode-btn-active-now {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 11px;
    background: linear-gradient(135deg, rgba(255, 75, 53, 0.96), rgba(221, 47, 30, 0.94));
    border: 1px solid rgba(255, 126, 103, 0.7);
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(255, 75, 53, 0.22);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.player-episode-list .episode-btn-active-now::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.player-episode-list .episode-btn-active-now .playing-indicator {
    justify-self: start;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    font-size: 10px;
    font-weight: 800;
    opacity: 0.95;
    letter-spacing: 0.08em;
}

.player-episode-list .episode-btn-active-now .ep-title {
    justify-self: end;
    font-size: 13px;
    font-weight: 900;
}

/* 单集播放面板 */
#singlePlayInfo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#singlePlayInfo h3 {
    color: #e8edf2;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

#singlePlayInfo .btn-primary.btn-block {
    width: 100%;
    margin-top: 0;
    padding: 12px;
    font-size: 14px;
    border-radius: 10px;
}

/* 播放历史面板 */
.library-panel .panel-title-row h3 {
    font-size: 14px;
    color: #9aaec3;
}

.library-panel .panel-title-row div {
    display: flex;
    gap: 6px;
}

.library-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.player-area {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    background: #0a0c10;
    position: relative;
    overflow: visible;  /* 允许 ArtPlayer 控件显示 */
    order: 1;
}

/* 选集按钮 — 底栏内联，在下一集右侧 */
.episode-float-toggle-btn {
    /* 继承 handle-btn 样式，无需额外定位 */
}

.episode-float-toggle-btn .handle-btn-icon {
    font-style: normal;
}

.player-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 16px 20px 32px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

.player-header h2 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.player-header p {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.video-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: visible;  /* 允许 ArtPlayer 控件显示 */
    background: radial-gradient(circle at center, #171b23 0%, #050608 72%);
}

.video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
    outline: 0;
}

.video-wrapper video:focus,
.video-wrapper video:focus-visible {
    outline: 0;
}

/* ArtPlayer 容器样式 */
.artplayer-container {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    z-index: 1;
}

.artplayer-container .art-video-player {
    width: 100% !important;
    height: 100% !important;
}

.artplayer-container .art-video {
    object-fit: contain;
    background: #000;
}

/* 隐藏 ArtPlayer 的顶部状态指示器（避免覆盖我们的 player-header） */
.art-video-player .art-top {
    display: none !important;
}

/* 隐藏 ArtPlayer 的快进/快退时间提示 */
.art-video-player .art-notice {
    display: none !important;
}

/* 隐藏 ArtPlayer 的快进/快退指示器 */
.art-video-player .art-controls-progress .art-progress-tip {
    display: none !important;
}

/* 修复 ArtPlayer 进度条展开时横向位移问题 */
.art-video-player .art-controls-progress {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transform: translateX(0) !important;
    transition: none !important;
}

.art-video-player .art-controls-progress:hover,
.art-video-player .art-controls-progress:active,
.art-video-player .art-controls-progress.art-control-progress-hover {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateX(0) !important;
}

.art-video-player .art-controls-progress .art-progress {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transform: translateX(0) !important;
    transition: height 0.15s ease, top 0.15s ease !important;
}

.art-video-player .art-controls-progress:hover .art-progress,
.art-video-player .art-controls-progress:active .art-progress,
.art-video-player .art-controls-progress.art-control-progress-hover .art-progress {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateX(0) !important;
}

/* 确保 ArtPlayer 控件在最上层（高于 loading-overlay z-index:6） */
.art-video-player .art-bottom {
    z-index: 10 !important;
}

/* ArtPlayer 网页全屏样式（参考 rrys.lv） */
.art-video-player.art-fullscreen-web {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483647 !important;
}

.art-video-player.art-fullscreen-web .art-bottom {
    position: absolute !important;
    inset: 0 !important;
    z-index: 60 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.art-video-player.art-fullscreen-web .art-bottom .art-controls,
.art-video-player.art-fullscreen-web .art-bottom .art-progress {
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.art-video-player.art-fullscreen-web .art-controls .art-control,
.art-video-player.art-fullscreen-web .art-controls .art-control .art-icon,
.art-video-player.art-fullscreen-web .art-progress * {
    pointer-events: auto !important;
}

.art-video-player.art-fullscreen-web .art-state {
    pointer-events: auto !important;
}

.art-video-player.art-fullscreen-web .art-settings,
.art-video-player.art-fullscreen-web .art-info,
.art-video-player.art-fullscreen-web .art-contextmenus {
    z-index: 120 !important;
    pointer-events: auto !important;
}

/* ArtPlayer 主题色调整（与人人视频一致） */
.art-video-player .art-progress-played {
    background: #e50914 !important;
}

.art-video-player .art-control-volume .art-volume-slider-value {
    background: #e50914 !important;
}

.art-video-player .art-controls .art-control-active {
    color: #e50914 !important;
}

.player-controls {
    display: none;
}

.player-controls-progress {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
}

.player-time {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.player-seekbar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
}

.player-seekbar-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    pointer-events: none;
}

.player-seekbar-buffered,
.player-seekbar-played {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: inherit;
    width: 0%;
}

.player-seekbar-buffered {
    background: rgba(255, 255, 255, 0.22);
}

.player-seekbar-played {
    background: linear-gradient(90deg, #ff5b45 0%, #ff7e61 100%);
}

.player-seekbar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    color: transparent;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.player-seekbar:focus,
.player-seekbar:focus-visible {
    outline: none;
    box-shadow: none;
}

.player-seekbar::-webkit-slider-runnable-track {
    height: 20px;
    border: 0;
    background: transparent;
    color: transparent;
}

.player-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    margin-top: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.player-seekbar::-moz-range-track {
    height: 20px;
    border: 0;
    background: transparent;
    color: transparent;
}

.player-seekbar::-moz-range-progress {
    height: 20px;
    border: 0;
    background: transparent;
}

.player-seekbar::-moz-focus-outer {
    border: 0;
}

.player-seekbar::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.player-seekbar::-ms-track {
    height: 20px;
    border: 0;
    color: transparent;
    background: transparent;
}

.player-controls-main,
.replica-handle-bar,
.replica-handle-left,
.replica-handle-right,
.handle-btn.replica-handle-btn,
.replica-handle-btn .handle-btn-icon,
.replica-play-btn,
.replica-volume-btn,
.replica-icon-prev,
.replica-icon-volume,
.rrys-icon {
    display: none !important;
}

.player-controls-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.replica-handle-bar {
    min-height: 28px;
}

.replica-handle-left,
.player-controls-right.replica-handle-right {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.player-controls-right.replica-handle-right {
    margin-left: auto;
}

.handle-btn.replica-handle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.handle-btn.replica-handle-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.handle-btn.replica-handle-btn:focus,
.handle-btn.replica-handle-btn:focus-visible,
.handle-btn.replica-handle-btn:active,
.handle-btn.replica-handle-btn::-moz-focus-inner {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.replica-handle-bar .handle-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
}

.replica-play-btn .handle-btn-icon {
    width: 14px;
    height: 14px;
}

.replica-play-btn .rrys-icon,
.replica-volume-btn .rrys-icon,
.replica-handle-btn .icon-next,
.replica-handle-btn .icon-fullscreen {
    font-size: 12px;
    color: inherit;
}

.replica-play-btn .rrys-icon::before {
    content: "\e901";
}

.replica-play-btn.is-paused .rrys-icon::before {
    content: "\e91b";
    transform: rotate(180deg);
}

.replica-icon-prev {
    position: relative;
    width: 12px;
    height: 12px;
}

.replica-icon-prev::before,
.replica-icon-prev::after {
    content: '';
    position: absolute;
}

.replica-icon-prev::before {
    left: 1px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid currentColor;
}

.replica-icon-prev::after {
    left: 0;
    top: 2px;
    width: 1.5px;
    height: 8px;
    background: currentColor;
}

.replica-volume-wrap {
    gap: 5px;
}

.replica-icon-volume {
    position: relative;
    width: 12px;
    height: 12px;
}

.replica-icon-volume::before,
.replica-icon-volume::after {
    content: '';
    position: absolute;
}

.replica-icon-volume::before {
    left: 0;
    top: 3px;
    width: 3px;
    height: 6px;
    background: currentColor;
}

.replica-icon-volume::after {
    left: 3px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
}

.replica-volume-btn .replica-icon-volume {
    overflow: visible;
}

.replica-volume-btn .replica-icon-volume::marker {
    content: '';
}

.replica-volume-btn .replica-icon-volume .replica-icon-wave,
.replica-volume-btn .replica-icon-volume .replica-icon-wave::after {
    content: '';
    position: absolute;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    border-radius: 0 6px 0 0;
    transform: rotate(45deg);
}

.replica-volume-btn .replica-icon-volume .replica-icon-wave {
    right: -1px;
    top: 4px;
    width: 3px;
    height: 3px;
}

.replica-volume-btn .replica-icon-volume .replica-icon-wave::after {
    right: -4px;
    top: -4px;
    width: 6px;
    height: 6px;
}

.replica-volume-btn.is-muted .replica-icon-volume .replica-icon-wave,
.replica-volume-btn.is-muted .replica-icon-volume .replica-icon-wave::after {
    opacity: 0;
}

.replica-volume-btn.is-muted::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
}

.volume-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 52px;
    height: 16px;
}

.player-control-btn:disabled {
    opacity: 0.22;
    cursor: not-allowed;
}

.player-volume-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 132px;
}

.volume-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 64px;
    height: 20px;
}

.volume-slider-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.volume-slider-fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%);
    pointer-events: none;
}

.volume-slider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
    height: 20px;
    border: 0;
    background: transparent;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    margin-top: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.volume-slider::-moz-range-track {
    height: 20px;
    border: 0;
    background: transparent;
}

.volume-slider::-moz-range-progress {
    height: 20px;
    border: 0;
    background: transparent;
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* 视频底部控制栏渐变 */
.video-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.18) 58%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.video-wrapper.show-controls::after {
    opacity: 1;
}

.status-bar {
    display: none;
}

.status-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#statusBarTitle {
    color: #eef2f7;
    font-weight: 700;
}

#statusBarMeta {
    color: #73849a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    min-width: 0;
}

.compact-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.episode-nav {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
    gap: 12px;
    min-height: 42px;
    padding: 8px 10px 8px 12px;
    background: #0f1219;
    border-top: 1px solid #25252b;
    box-shadow: none;
}

.episode-nav .compact-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

.episode-nav .compact-status .status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.episode-nav .compact-status .status-item:first-child {
    margin-left: 0;
}

.episode-nav .compact-status .progress-bar {
    width: 80px;
}

.episode-nav .nav-buttons {
    gap: 0;
    flex-shrink: 0;
    min-height: 22px;
}

.episode-nav .nav-buttons .module-player-handle-item:first-child .handle-btn {
    color: #fff;
}

.episode-nav .nav-buttons .handle-btn:disabled {
    opacity: 0.32;
}

.episode-nav .module-player-handle-items .handle-btn {
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
}

.episode-nav .module-player-handle-items .module-player-handle-item:first-child .handle-btn {
    color: #fff;
}

.episode-nav .module-player-handle-items .handle-btn-icon {
    color: currentColor;
    font-size: 16px;
}

.episode-nav .module-player-handle-items .player-sort-btn .handle-btn-icon {
    color: #8c7dff;
}

.episode-nav .module-player-handle-items .handle-btn:hover:not(:disabled) {
    background: transparent !important;
    color: #fff;
    transform: none !important;
}

.episode-nav button:focus,
.episode-nav button:focus-visible {
    outline: 0;
    box-shadow: none;
}

.episode-nav button:hover:not(:disabled) {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.episode-nav button:disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.status-item .label {
    color: #6b7a8f;
    white-space: nowrap;
    font-size: 12px;
}

.progress-inline {
    max-width: 260px;
}

.progress-bar {
    width: 100px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #1a202c;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff4b35, #ff6b4a);
    border-radius: 999px;
    transition: width 0.3s ease;
}

#downloadSpeed {
    color: #4ade80;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#readySegments {
    color: #e8edf2;
    font-weight: 600;
}

#progressText {
    color: #8fa1b7;
    white-space: nowrap;
}

.next-episode-tip,
.loading-overlay {
    position: absolute;
    z-index: 5;
}

.next-episode-tip {
    right: 24px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(15, 18, 25, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 75, 53, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.next-episode-tip span {
    color: #e8edf2;
    font-size: 14px;
    font-weight: 600;
}

.next-episode-tip button {
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    background: #ff4b35;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.next-episode-tip button:hover {
    background: #e63e2a;
}

.next-episode-tip #nextEpisodeCountdown {
    color: #8d98a7;
    font-size: 13px;
    font-weight: 400;
}

.next-episode-tip .cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #a0aab4;
}

.next-episode-tip .cancel-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #e8edf2;
}

.loading-overlay {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
    z-index: 6;
}

.loading-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.loading-overlay p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    letter-spacing: 0.02em;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 75, 53, 0.15);
    border-top-color: #ff4b35;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============ M3: 直达与桥接（B3 直达播放 / B5 角标回流 / B7 降级反馈） ============ */

/* P4 卡片「直接播放」按钮：常驻可见，点击直达观看上下文起播 */
.poster-card,
.search-result-item,
.home-card {
    position: relative;
}
/* 播放键锚定到海报图本身，以下图容器须为定位上下文，按钮才能居中于图片正中 */
.poster-img,
.poster-img-wrap,
.search-result-cover-wrap,
.home-card > img,
.home-card > .poster-img-placeholder {
    position: relative;
}
/* P4 卡片「直接播放」按钮：海报中央悬浮播放键，悬停浮现，触屏常驻 */
.card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.82);
    z-index: 3;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(12, 14, 18, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.poster-card:hover .card-play-btn,
.search-result-item:hover .card-play-btn,
.home-card:hover .card-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) {
    .card-play-btn { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
}
.card-play-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}
.card-play-btn:hover {
    background: rgba(255, 75, 53, 0.92);
}

/* B5 用户状态角标（在追 / 看过 / 看到第X集 / 已收藏） */
.update-badge.user-state-badge { margin-left: 0; }
.user-state-badge.watching { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.user-state-badge.done { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.user-state-badge.ep { background: rgba(250, 204, 21, 0.16); color: #facc15; }
.user-state-badge.fav { background: rgba(168, 85, 247, 0.18); color: #c084fc; }

/* P5 统一空/错/离线状态模板 */
.home-empty {
    padding: 20px;
    text-align: center;
    color: #8d98a7;
    font-size: 13px;
}
.state-box {
    padding: 28px 16px;
    text-align: center;
    color: #8d98a7;
    font-size: 13px;
}
.state-box.state-error,
.state-box.state-offline {
    color: #ff9b90;
}
.state-box .state-icon { font-size: 22px; margin-bottom: 6px; }
.state-box p { margin: 0; }
.state-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    border: 3px solid rgba(255, 75, 53, 0.18);
    border-top-color: #ff4b35;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.state-retry {
    margin-top: 12px;
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    background: #ff4b35;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.state-retry:hover { background: #e63e2a; }

/* P5 卡片内联错误态（解析失败时替换卡片内容，提供重试） */
.card-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 2 / 3;
    padding: 12px;
    text-align: center;
    background: #1a1f26;
}
.card-error-msg { color: #ff9b90; font-size: 12px; margin: 0; }
.card-retry-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 8px;
    background: #ff4b35;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/* P5 全局离线条 */
.offline-banner {
    margin: 10px 28px 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #fde68a;
    font-size: 13px;
    text-align: center;
}

.library-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel {
    padding: 14px;
    border-radius: 12px;
    background: #171b21;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #2c333d;
    border-radius: 999px;
}

@media (orientation: portrait), (max-width: 900px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-shell {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    .site-nav {
        position: sticky;
        top: 67px;
        z-index: 50;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        overflow-x: auto;
    }

    .logo {
        flex: 0 0 auto;
        /* 尺寸已在下方统一设置（.logo { width: 86px; height: 32px; }） */
    }

    .site-nav nav {
        flex-direction: row;
        flex: 1 0 auto;
    }

    .nav-link {
        width: auto;
        white-space: nowrap;
    }

    .parse-card {
        display: none;
    }

    .parse-form {
        flex-direction: column;
    }

    .parse-page {
        padding-top: 18px;
    }

    .parse-hero {
        min-height: auto;
        padding: 26px 18px 28px;
    }

    .parse-form button {
        min-height: 44px;
    }

    .main-stage {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .page-content {
        overflow-x: hidden;
        overflow-y: visible;
        padding-top: 67px;
    }

    .main-stage {
        overflow-x: hidden;
    }

    .topbar {
        padding: 10px 14px;
    }

    /* 统一移动端Logo尺寸：改一处全局生效 */
    .logo {
        width: 86px;
        height: 32px;  /* 按比例缩小：42 * (86/112) ≈ 32px */
    }

    .search-bar {
        width: 100%;
    }

    .ghost-btn {
        display: none;
    }

    .page-view {
        padding: 18px 14px 36px;
    }

    .hero-banner {
        min-height: 240px;
        padding: 26px;
    }

    .poster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-card {
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .home-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .series-main {
        grid-template-columns: 1fr;
    }

    .cover {
        width: 140px;
        height: 186px;
    }

    .episode-list {
        grid-template-columns: repeat(5, 1fr);
    }

    .player-page {
        height: auto;
        padding: 0;
    }

    .player-layout,
    .player-layout.episodes-open {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
    }

    .player-side {
        order: unset;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #1e2633;
        overflow: visible;
        max-height: none;
    }

    .player-layout .player-episode-panel,
    .player-layout #singlePlayInfo,
    .player-layout #libraryPanel {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .player-side .episode-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .video-wrapper {
        height: 56vw;
        min-height: 230px;
    }

    .player-controls {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px;
        border-radius: 14px;
    }

    .player-controls-progress {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 8px;
    }

    .player-controls-main,
    .player-controls-left,
    .player-controls-right,
    .status-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .player-controls-left,
    .player-controls-right,
    .status-summary,
    .status-item,
    .progress-inline {
        width: 100%;
    }

    .player-volume-wrap {
        min-width: 0;
    }

    .volume-slider,
    .progress-bar {
        width: 100%;
        max-width: none;
    }

    .compact-status {
        gap: 10px;
    }

    .episode-nav {
        justify-content: space-between;
    }

    #statusBarMeta {
        white-space: normal;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .site-nav {
        padding-top: 8px;
    }

    .logo img {
        height: 34px;
    }

    .parse-card {
        display: none;
    }

    .topbar {
        padding: 8px 20px;
    }

    .player-page {
        height: calc(100vh - 53px);
    }

    .player-layout {
        grid-template-columns: 240px 1fr;
    }

    .player-header,
    .status-bar {
        padding: 8px 14px;
    }
}

/* ===== 页签切换组件 ===== */
.tab-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #1a1f26;
    border: 1px solid #242a33;
}

.tab-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9aa4b2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #e8edf2;
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    color: #fff;
    background: #ff4b35;
}

/* ===== 每日更新标题页签 ===== */
.home-daily-section {
    margin-top: 0 !important;
}

.home-tab-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.home-tab-title strong {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.plain-tabs.tab-switch {
    background: transparent;
    border: none;
    gap: 4px;
    padding: 0;
}

.plain-tabs .tab-btn {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #8d98a7;
    background: transparent;
}

.plain-tabs .tab-btn:hover {
    color: #e8edf2;
    background: rgba(255,255,255,0.06);
}

.plain-tabs .tab-btn.active {
    color: #fff;
    background: #ff4b35;
}

/* M11: 本地详情弹窗 */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
.detail-overlay.hidden { display: none; }

.detail-modal {
    background: #1a1e26;
    border-radius: 12px;
    max-width: 750px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.detail-close {
    position: sticky;
    top: 8px;
    right: 8px;
    float: right;
    z-index: 1;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}
.detail-close:hover { background: rgba(255,75,53,0.7); }

.detail-hero {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #1e2430 0%, #252d3a 100%);
    border-radius: 12px 12px 0 0;
}
.detail-hero img {
    width: 180px;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.detail-hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-hero-info h2 {
    font-size: 20px;
    color: #e8edf2;
    margin: 0;
    line-height: 1.3;
}
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #8d98a7;
    font-size: 13px;
}
.detail-desc {
    color: #a0aab4;
    font-size: 13px;
    line-height: 1.6;
    margin: 4px 0;
    max-height: 80px;
    overflow-y: auto;
}
.detail-eps {
    color: #8d98a7;
    font-size: 12px;
}

.detail-episodes {
    padding: 16px 20px 24px;
}
.detail-episodes h3 {
    color: #e8edf2;
    font-size: 15px;
    margin: 0 0 12px;
}
.episode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}
.ep-btn {
    background: #252d3a;
    border: 1px solid #333c4a;
    color: #c0c8d4;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    min-width: 42px;
    text-align: center;
    transition: all 0.15s;
}
.ep-btn:hover {
    background: #ff4b35;
    border-color: #ff4b35;
    color: #fff;
}

.detail-similar {
    padding: 0 20px 20px;
}

.detail-similar h3 {
    color: #e8edf2;
    font-size: 15px;
    margin: 0 0 12px;
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}