/**
 * 视频频道视觉主题 v20261104b
 * 1. 页面大背景：按视口固定的一层极淡暖白渐变 + 顶部极弱暖光，不随 5000+px 长文档拉伸
 * 2. 内容区：纯白承载面（纯白卡片 + 发丝线，无投影），与背景共用同一张纸的观感
 * 3. 排版：统一 8 / 12 / 16 / 24 间距基数，标题 > 描述 > 标签与时间 三级层级
 * 4. 侧栏四块统一头部与卡片规格；榜单产品卡两列参数对齐、价格弱化
 * 5. 只做轻微 hover 反馈，不位移、不发光；品牌色沿用橙系
 * 仅在 video-list-page / video-detail-page 生效，不影响 www 主站
 */

/* ============================================================
   设计变量
   ============================================================ */
body.video-list-page,
body.video-detail-page {
    --v-surface: #ffffff;
    --v-surface-soft: #fdfaf6;
    --v-line: rgba(15, 23, 42, 0.05);
    --v-line-soft: rgba(15, 23, 42, 0.04);
    --v-shadow-panel: none;
    --v-shadow-hover: none;
    /* 中性细颗粒：feTurbulence 灰噪，约 3% 像素生成 0.4 灰点，其余保持纯白，绝不整片拉灰 */
    --v-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='1 1 1 1 0.4 0.4 0.4 0.4'/%3E%3CfeFuncG type='table' tableValues='1 1 1 1 0.4 0.4 0.4 0.4'/%3E%3CfeFuncB type='table' tableValues='1 1 1 1 0.4 0.4 0.4 0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    --v-text-1: #0f172a;
    --v-text-2: #475569;
    --v-text-3: #64748b;
    --v-text-4: #94a3b8;
    --v-accent: #c2410c;
    --v-accent-soft: rgba(234, 88, 12, 0.055);
    --v-accent-line: rgba(194, 65, 12, 0.24);
    --v-space-1: 8px;
    --v-space-2: 12px;
    --v-space-3: 16px;
    --v-space-4: 24px;
    --v-space-5: 32px;
    --v-radius-card: 10px;
    --v-radius-media: 8px;
}

/* ============================================================
   页面大背景：固定在视口的一层极淡暖白，不再随长文档拉伸
   - background-attachment: fixed → 渐变始终只占一屏，滚动时纹丝不动
   - 线性渐变只保留 2 个 stop（白 → 极浅暖米白），消除中段色带
   - 顶部再用 3 stop 的极弱径向暖光（alpha 0.032 / 0.012）
   ============================================================ */
html:not(.io-dark-mode) body.video-list-page,
html:not(.io-dark-mode) body.video-detail-page {
    background-color: #fffdfb;
    background-image:
        radial-gradient(1300px 760px at 50% -6%, rgba(234, 88, 12, 0.032) 0%, rgba(234, 88, 12, 0.012) 52%, rgba(234, 88, 12, 0) 78%),
        linear-gradient(180deg, #ffffff 0%, #fdf9f4 100%);
    background-attachment: fixed, fixed;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

/* 磨砂颗粒：固定覆盖整屏，不随滚动移动，白底不被拉灰；深色模式关闭 */
body.video-list-page::after,
body.video-detail-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: var(--v-grain);
    background-size: 220px 220px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.09;
}

html.io-dark-mode body.video-list-page::after,
html.io-dark-mode body.video-detail-page::after {
    display: none;
}

html.io-dark-mode body.video-list-page,
html.io-dark-mode body.video-detail-page {
    --v-surface: var(--c-bg-card, #1a2e47);
    --v-surface-soft: rgba(255, 255, 255, 0.04);
    --v-line: rgba(185, 203, 226, 0.14);
    --v-line-soft: rgba(185, 203, 226, 0.09);
    --v-shadow-panel: none;
    --v-shadow-hover: none;
    --v-text-1: #e2e8f0;
    --v-text-2: #cbd5e1;
    --v-text-3: #94a3b8;
    --v-text-4: #7f93ad;
    --v-accent: #fb923c;
    --v-accent-soft: rgba(251, 146, 60, 0.14);
    --v-accent-line: rgba(251, 146, 60, 0.3);
    background-color: var(--c-bg, #0b1220);
    background-image: none;
}

/* 主容器与页面包裹层让位给页面渐变，内容区改由纯白承载面承担 */
.video-list-main,
.video-detail-main,
.video-list-page .page-wrapper,
.video-detail-page .page-wrapper,
html.io-dark-mode .video-list-main,
html.io-dark-mode .video-detail-main,
html.io-dark-mode .video-list-page .page-wrapper,
html.io-dark-mode .video-detail-page .page-wrapper {
    background: transparent;
}

/* ============================================================
   纯白承载面：发丝线 + 极淡柔和阴影，不用重投影
   ============================================================ */
.video-main-col {
    padding: var(--v-space-4);
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow-panel);
}

/* ============================================================
   列表信息流：间距统一 24 / 12 节奏
   ============================================================ */
.video-feed-item,
html.io-dark-mode .video-feed-item {
    padding: var(--v-space-4) 0;
    background: var(--v-surface);
    border-bottom: 1px solid var(--v-line-soft);
}

.video-feed-item:first-child {
    padding-top: 0;
}

.video-feed-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.video-feed-title {
    margin: 0 0 var(--v-space-2);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--v-text-1);
}

.video-feed-title a {
    color: inherit;
}

.video-feed-title a:hover {
    color: var(--v-accent);
}

.video-feed-media,
.video-feed-media--lazy,
.video-feed-fallback,
.video-player-fallback {
    border-radius: var(--v-radius-media);
    background-color: #fbf8f4;
}

.video-feed-media {
    background-image: linear-gradient(135deg, #fcfaf7 0%, #f7f1e9 100%);
}

.video-feed-play-cover {
    background-color: #fbf8f4;
}

.video-feed-media--lazy .video-feed-play-icon {
    width: clamp(46px, 4.2vw, 56px);
    height: clamp(33px, 3vw, 40px);
    border-radius: var(--v-radius-media);
    background: rgba(15, 23, 42, 0.6);
}

.video-feed-media--lazy .video-feed-play:hover .video-feed-play-icon,
.video-feed-media--lazy .video-feed-play:focus .video-feed-play-icon {
    background: rgba(15, 23, 42, 0.76);
    transform: none;
}

/* 封面只做轻微提亮，不做缩放 */
.video-feed-fallback img {
    transition: filter 0.2s ease;
}

.video-feed-fallback:hover img {
    transform: none;
    filter: brightness(1.04);
    opacity: 1;
}

.video-feed-desc {
    margin: var(--v-space-2) 0 0;
    font-size: 0.9375rem;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: var(--v-text-2);
}

.video-feed-desc a,
.video-feed-desc-toggle {
    color: var(--v-accent);
}

.video-feed-desc-toggle {
    margin-top: var(--v-space-1);
    font-size: 0.8125rem;
}

.video-feed-tags {
    gap: 0 14px;
    margin-top: var(--v-space-2);
    max-height: 1.7em;
}

.video-feed-tags span {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--v-text-3);
}

.video-feed-actions {
    gap: var(--v-space-3);
    margin-top: var(--v-space-2);
    font-size: 0.75rem;
    color: var(--v-text-3);
}

.video-feed-actions i {
    opacity: 0.65;
}

/* 分页 */
.video-pagination {
    margin-top: var(--v-space-4);
}

.video-page-btn,
.video-page-num {
    border-color: var(--v-line);
    color: var(--v-text-2);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.video-page-btn:hover,
.video-page-num:hover {
    border-color: var(--v-accent-line);
    color: var(--v-accent);
}

.video-page-num.is-current {
    background: var(--v-accent);
    border-color: var(--v-accent);
}

.video-empty {
    color: var(--v-text-3);
}

/* ============================================================
   右侧公共栏：四块统一头部，卡片规格与主列一致
   ============================================================ */
.video-sidebar {
    gap: var(--v-space-3);
}

.video-side-card {
    padding: var(--v-space-3);
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow-panel);
}

.video-side-head {
    align-items: center;
    margin-bottom: var(--v-space-2);
}

.video-side-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--v-text-1);
}

.video-side-more {
    font-size: 0.75rem;
    color: var(--v-text-3);
}

.video-side-more:hover {
    color: var(--v-accent);
}

.video-side-empty {
    font-size: 0.8125rem;
    color: var(--v-text-3);
}

/* 热门视频 */
.video-side-hot-list {
    gap: var(--v-space-2);
}

.video-side-hot-cover {
    border-radius: 6px;
}

.video-side-hot-cover img {
    transition: filter 0.2s ease;
}

.video-side-hot:hover .video-side-hot-cover img {
    transform: none;
    filter: brightness(1.05);
}

.video-side-hot-title {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--v-text-1);
}

.video-side-hot:hover .video-side-hot-title {
    color: var(--v-accent);
}

.video-side-hot-meta {
    font-size: 0.75rem;
    color: var(--v-text-3);
}

/* 最新资讯 */
.video-side-news-list {
    gap: var(--v-space-2);
}

.video-side-news-title {
    font-size: 0.875rem;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--v-text-2);
}

.video-side-news:hover .video-side-news-title {
    color: var(--v-accent);
}

.video-side-news-date {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--v-text-3);
}

/* 月度榜单：产品卡两列参数对齐，价格不抢标题 */
.video-side-rank-list {
    gap: var(--v-space-2);
}

.video-side-product,
html.io-dark-mode .video-side-product {
    padding: 12px;
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-media);
}

.video-side-product:hover,
html.io-dark-mode .video-side-product:hover {
    border-color: var(--v-accent-line);
}

.video-side-product-title {
    margin: 0 0 var(--v-space-1);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--v-text-1);
}

.video-side-product-title a:hover {
    color: var(--v-accent);
}

.video-side-product-specs {
    gap: var(--v-space-2);
    margin-bottom: var(--v-space-1);
}

.video-side-product-col {
    gap: 2px;
}

.video-side-product-row {
    font-size: 0.6875rem;
    line-height: 1.75;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.video-side-product-label {
    color: var(--v-text-3);
}

.video-side-product-value {
    color: var(--v-text-2);
}

.video-side-product-foot,
html.io-dark-mode .video-side-product-foot {
    padding-top: var(--v-space-1);
    border-top: 1px solid var(--v-line-soft);
}

.video-side-product-btn {
    padding: 5px 10px;
    border: 1px solid var(--v-line);
    background: var(--v-surface);
    color: var(--v-text-2);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.video-side-product-btn:hover {
    border-color: var(--v-accent-line);
    background: var(--v-surface);
    color: var(--v-accent);
}

.video-side-product-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-text-2);
}

.video-side-product-currency {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--v-text-3);
}

.video-side-product-price em {
    font-size: 0.6875rem;
    color: var(--v-text-4);
}

/* 需要帮助 */
.video-side-help .video-side-title {
    margin: 0 0 var(--v-space-2);
}

.video-side-help-desc {
    margin: 0 0 var(--v-space-2);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--v-text-2);
}

.video-side-btn {
    background: var(--v-surface);
    border-color: var(--v-line);
    color: var(--v-text-2);
}

.video-side-btn:hover {
    border-color: var(--v-accent-line);
    color: var(--v-accent);
}

.video-side-btn--primary {
    background: linear-gradient(180deg, var(--c-action, #ea580c) 0%, var(--c-action-hover, #c2410c) 100%);
    border-color: transparent;
    color: #fff;
}

.video-side-btn--primary:hover {
    color: #fff;
}

/* ============================================================
   详情页
   ============================================================ */
.video-detail-player-wrap {
    border-radius: var(--v-radius-media);
    box-shadow: var(--v-shadow-panel);
}

.video-detail-body {
    padding: var(--v-space-4) 0 0;
}

.video-detail-title {
    margin: 0 0 var(--v-space-1);
    color: var(--v-text-1);
}

.video-detail-meta {
    gap: var(--v-space-3);
    margin-bottom: var(--v-space-3);
    font-size: 0.75rem;
    color: var(--v-text-3);
}

.video-detail-meta i {
    opacity: 0.65;
}

.video-detail-badge {
    padding: 2px 8px;
    font-size: 0.6875rem;
    background: var(--v-accent-soft);
    color: var(--v-accent);
}

.video-detail-badge a {
    color: inherit;
    text-decoration: none;
}

.video-detail-desc-box,
html.io-dark-mode .video-detail-desc-box {
    padding: var(--v-space-3);
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius-media);
    background: var(--v-surface-soft);
}

.video-detail-desc {
    color: var(--v-text-2);
}

.video-detail-desc a,
.video-detail-desc-toggle {
    color: var(--v-accent);
}

.video-tags {
    gap: 0 14px;
    margin-top: var(--v-space-2);
    max-height: 1.7em;
}

.video-tag,
html.io-dark-mode .video-tag {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--v-text-3);
    background: none;
    border: 0;
}

/* 评论 */
.video-comments {
    margin-top: var(--v-space-4);
    padding-top: var(--v-space-4);
    border-top: 1px solid var(--v-line-soft);
}

.video-comments-head {
    margin-bottom: var(--v-space-2);
}

.video-comments-title {
    font-size: 1rem;
    color: var(--v-text-1);
}

.video-comments-count {
    font-size: 0.8125rem;
    color: var(--v-text-3);
}

.video-comment-form {
    border-color: var(--v-line);
    border-radius: var(--v-radius-media);
    background: var(--v-surface);
}

.video-comment-form:focus-within {
    border-color: var(--v-accent-line);
}

.video-comment-textarea {
    color: var(--v-text-1);
}

.video-comment-form-actions {
    border-top-color: var(--v-line-soft);
}

.video-comment-hint {
    color: var(--v-text-3);
}

.video-comment-submit {
    border-color: transparent;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--c-action, #ea580c) 0%, var(--c-action-hover, #c2410c) 100%);
}

/* 深色模式下的封面占位 */
html.io-dark-mode .video-feed-media,
html.io-dark-mode .video-feed-media--lazy,
html.io-dark-mode .video-feed-play-cover {
    background-color: #0b1220;
    background-image: none;
}

/* ============================================================
   响应式
   ============================================================ */
/* 1024 档：侧栏下沉到列表之后，两列排布 */
@media (max-width: 1080px) {
    .video-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--v-space-3);
    }
    .video-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--v-space-3);
    }
}

@media (max-width: 640px) {
    /* 移动端也保留侧栏，顺序在视频列表之后 */
    .video-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--v-space-3);
    }
    .video-main-col {
        padding: var(--v-space-3);
        border-radius: var(--v-radius-media);
    }
    .video-feed-item {
        padding: 20px 0;
    }
    .video-feed-media,
    .video-feed-media--lazy,
    .video-feed-fallback,
    .video-player-fallback {
        border-radius: var(--v-radius-media);
    }
    .video-feed-title {
        font-size: 1rem;
        line-height: 1.5;
    }
    .video-feed-desc-toggle {
        font-size: 0.8125rem;
    }
    /* 移动端显示页面标题，避免只剩内容没有上下文 */
    .video-page-crumb {
        margin-bottom: var(--v-space-2);
    }
    .video-breadcrumb-title {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
        font-size: 0.875rem;
        color: var(--v-text-3);
    }
    .video-detail-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}