/**
 * 视频频道视觉主题 v20261105c
 * 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:root body.video-list-page,
html:root 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;
}
/* 主容器与页面包裹层让位给页面渐变，内容区改由纯白承载面承担 */
.video-list-main,
.video-detail-main,
.video-list-page .page-wrapper,
.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{
    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{
    padding: 12px;
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-media);
}
.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{
    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{
    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{
    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%);
}
/* ============================================================
   响应式
   ============================================================ */
/* 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;
    }
}
/* ============================================================
   v20261105c：列表页层次调整（仅 body.video-list-page）
   1) main.video-list-main：白 → 近白(#fcfcfd) → 白 的极淡纵向渐变；
      不是灰底，55% 处最深处与纯白仅差 2 个色阶
   2) div.video-layout：纯白 #fff 承载卡，background-image: none，
      无投影；发丝线 1px rgba(15,23,42,.06) + 16px 内边距 + 原 10px 圆角，
      从 main 的淡渐变上浮起来
   3) .video-main-col / .video-side-card 统一同一发丝线，边界一致
   4) 列表页的页面级颗粒覆盖层（body::after）关闭，保证承载面为纯白无底纹
   ============================================================ */
.video-list-page .video-list-main {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 55%, #ffffff 100%);
}
.video-list-page .video-layout {
    background: #ffffff;
    background-image: none;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--v-radius-card, 10px);
    padding: var(--v-space-3);
}
.video-list-page .video-main-col {
    background: var(--v-surface, #fff);
    border-color: rgba(15, 23, 42, 0.06);
}
.video-list-page .video-side-card {
    border-color: rgba(15, 23, 42, 0.06);
}
body.video-list-page::after {
    display: none;
}
/* ≤640：窄屏不再叠两层发丝线，避免内外边距吃掉阅读宽度
   - layout 单层承载，内边距收到 12px
   - main-col 去掉第二层卡片（透明、无边框、无内边距），
     阅读宽度 324px（改前 316px），侧栏卡宽 324px（改前 350px）
   - 侧栏卡仍保留发丝线，与 layout 外框一致 */
@media (max-width: 640px) {
    .video-list-page .video-layout {
        padding: var(--v-space-2);
    }
    .video-list-page .video-main-col {
        background: transparent;
        border: 0;
        padding: 0;
        border-radius: 0;
    }
}