/* =========================================================
   Art 列表页样式（黑白灰 + 黄色）
   保留你所有 HTML 结构与类名，不删任何代码
   ========================================================= */

/* 使用全局变量；若未定义，提供兜底值 */
:root{
    --accent-yellow: var(--tab-active-bg, #ff8a00);
    --accent-yellow-2: #ffd257;
    --accent-yellow-dark: #cc8f00;
}

/* 卡片 */
.video-card{
    background: var(--color-bg-card, #1b1b1b);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.18));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    border: 1px solid var(--bg-400, #1a1a1a);
}
.video-card:hover{
    box-shadow: var(--shadow-hover, 0 6px 22px rgba(0,0,0,.3));
    transform: translateY(-2px) scale(1.02);
    background: var(--color-bg-alt, #222222);
    border-color: rgba(255,138,0,.35);
}

/* 图片区域（保留原样式，并增强兜底背景） */
.video-card-image{
    border-radius: 2px;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-300, #252525);
}
.video-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s
    ease, filter .7s
    ease;
    filter: saturate(105%) contrast(1.02);
}

/* 左下角分类角标（黄色） */
.video-card-image .time{
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #151515;
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-yellow-2));
    border-radius: 999px;
    box-shadow: 0 8px 22px -12px rgba(255,138,0,.85);
}

/* 文本区 */
.video-card-body{ padding: 10px 12px 12px; color: var(--text-200, #d6d6d6); }
.video-title{
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.28;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.video-title a{
    color: var(--text-100, #f5f5f5);
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
}
.video-title a:hover{
    color: #fff;
    text-shadow: 0 0 18px rgba(255,138,0,.12);
}

/* 无封面文章卡片（改为黑白灰+黄色） */
.art-fallback-card{
    position:relative;
    display:flex;
    gap:18px;
    padding:20px 22px;
    border-radius:22px;
    background:
            linear-gradient(145deg, rgba(32,32,32,.92), rgba(20,20,20,.92)),
            radial-gradient(60% 100% at 16% 18%, rgba(255,180,0,.18), transparent 65%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.06);
    box-shadow: 0 14px 40px -18px rgba(0,0,0,.78), 0 6px 26px -14px rgba(0,0,0,.55);
    overflow:hidden;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s, border-color .35s;
}
.art-fallback-card::before{
    content:"";
    position:absolute; inset:0;
    background:
            linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
            radial-gradient(circle at 75% 80%, rgba(255,180,0,.18), transparent 60%);
    mix-blend-mode:overlay;
    opacity:.55;
    pointer-events:none;
}
.art-fallback-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 52px -20px rgba(0,0,0,.85), 0 10px 30px -14px rgba(0,0,0,.65);
    border-color: rgba(255,255,255,.14);
}
/* 图标块：黄渐变 */
.art-fallback-card .af-icon{
    flex:0 0 62px;
    height:62px;
    border-radius:18px;
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-yellow-dark));
    display:flex; align-items:center; justify-content:center;
    color:#111;
    font-size:26px;
    box-shadow: 0 12px 34px -14px rgba(255,180,0,.75), 0 6px 20px -10px rgba(255,180,0,.45);
    position:relative; overflow:hidden;
}
.art-fallback-card .af-icon::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 28% 25%, rgba(255,255,255,.45), transparent 70%);
    mix-blend-mode:overlay; opacity:.65;
}
/* 标题与元信息 */
.af-content{flex:1;display:flex;flex-direction:column;min-width:0;}
.af-title{ margin:2px 0 10px; font-size:18px; font-weight:600; line-height:1.35; letter-spacing:.4px; max-height:2.7em; overflow:hidden; }
.af-title a{
    text-decoration:none;
    background: linear-gradient(90deg, #ffffff, #dcdcdc);
    -webkit-background-clip: text;
    color: transparent;
    transition: opacity .3s;
}
.af-title a:hover{ opacity:.86; }

.af-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.af-badge{
    font-size:11px; display:inline-flex; align-items:center; gap:4px;
    padding:5px 10px; border-radius:10px;
    background: rgba(255,255,255,.08); color:#e8e8e8;
    letter-spacing:.3px; line-height:1.1; position:relative;
    backdrop-filter: blur(6px);
}
.af-badge svg{opacity:.9;}
.af-badge.af-time{ background: linear-gradient(145deg, #2a2a2a, #1d1d1d); }
.af-badge.af-chapter{
    background: linear-gradient(135deg, var(--accent-yellow-2), var(--accent-yellow));
    color:#111; font-weight:700;
    box-shadow: 0 4px 14px -6px rgba(255,180,0,.6);
}
.af-badge.af-cat{ background: linear-gradient(145deg, #3a3a3a, #242424); color:#dcdcdc; }

/* 摘要与按钮 */
.af-excerpt{ margin:0 0 12px; font-size:13px; line-height:1.55; color: var(--text-300,#b5b5b5); max-height:3.1em; overflow:hidden; }
.af-actions{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.af-read{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; padding:8px 16px; border-radius:12px;
    text-decoration:none; font-weight:600; letter-spacing:.4px;
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-yellow-dark));
    color:#111;
    box-shadow: 0 10px 30px -14px rgba(255,180,0,.75), 0 6px 16px -8px rgba(255,180,0,.45);
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, filter .25s;
}
.af-read:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px -20px rgba(255,180,0,.85), 0 10px 26px -14px rgba(255,180,0,.45); }
.af-read:active{ transform: translateY(0) scale(.94); filter: brightness(.92); }

/* 动画（保留） */
.art-fallback-card[data-anim="fade"]{ opacity:0; transform:translateY(14px) scale(.95); animation:afFade .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes afFade{
    0%{ opacity:0; transform:translateY(18px) scale(.9); filter:blur(6px); }
    60%{ transform:translateY(-3px) scale(1.02); }
    100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

/* 分页（与主题一致） */
.pagination .page-link{
    background: transparent;
    border-color: var(--bg-400, #1a1a1a);
    color: var(--text-200, #d6d6d6);
}
.pagination .page-link:hover{
    background: rgba(255,138,0,.12);
    color: #fff;
    border-color: var(--accent-yellow);
}
.pagination .active .page-link{
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #111;
    box-shadow: 0 6px 14px -8px rgba(255,180,0,.7);
}

/* 响应式微调 */
@media (max-width:680px){
    .art-fallback-card{ padding:18px; gap:14px; }
    .af-title{ font-size:16px; margin-bottom:8px; }
    .af-excerpt{ font-size:12.5px; max-height:2.9em; }
    .af-read{ padding:7px 14px; font-size:12px; }
}
@media (max-width:420px){
    .af-meta{ gap:6px; }
    .af-badge{ padding:4px 8px; font-size:10.5px; }
    .art-fallback-card{ padding:16px; }
}