/* =========================================
   1. 基础重置与全局样式 (Base & Reset)
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #f9fafb; 
    color: #111827; 
    line-height: 1.5; 
}
a { text-decoration: none; color: inherit; transition: color 0.2s; }
button, input, select { font-family: inherit; outline: none; border: none; }
ul { list-style: none; }
.hidden { display: none !important; }

/* =========================================
   2. 布局与工具类 (Utilities)
========================================= */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.flex { display: flex; } 
.items-center { align-items: center; } 
.justify-between { justify-content: space-between; } 
.justify-center { justify-content: center; }
.grid { display: grid; } 
.text-center { text-align: center; } 
.relative { position: relative; } 
.absolute { position: absolute; }
.w-full { width: 100%; } 
.h-full { height: 100%; } 
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================
   3. 颜色与背景 (Colors & Backgrounds)
========================================= */
.bg-white { background-color: #ffffff; } 
.bg-gray-50 { background-color: #f9fafb; } 
.bg-gray-100 { background-color: #f3f4f6; } 
.bg-gray-900 { background-color: #111827; }

.text-white { color: #ffffff; } 
.text-gray-400 { color: #9ca3af; } 
.text-gray-500 { color: #6b7280; } 
.text-gray-600 { color: #4b5563; } 
.text-gray-700 { color: #374151; } 
.text-gray-900 { color: #111827; } 
.text-purple-600 { color: #9333ea; }
.hover-text-purple-600:hover { color: #9333ea; }

.grad-header { background: linear-gradient(to right, #9333ea, #db2777); }
.grad-hero { background: linear-gradient(to right, #9333ea, #db2777, #dc2626); }

/* =========================================
   4. 头部与导航 (Header & Navbar) - 4栏等分对齐版
========================================= */
/* 头部样式 */
        .header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .header-top { padding: 0.5rem 0; color: #fff; font-size: 0.875rem; font-weight: 500; }
        .navbar { height: 4rem; display: flex; justify-content: space-between; align-items: center; }
        .desktop-nav { display: flex; align-items: center; gap: 2rem; }
        .nav-links { display: flex; gap: 2rem; font-weight: 500; color: #374151; }
        .desktop-search { display: flex; align-items: center; }
        .search-input-wrapper { position: relative; }
        .search-input { width: 16rem; padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; }
        .search-input:focus { border-color: #9333ea; box-shadow: 0 0 0 2px rgba(147,51,234,0.2); }
        .search-icon { position: absolute; left: 0.75rem; top: 0.625rem; width: 1.25rem; height: 1.25rem; color: #9ca3af; }
        .btn-primary { padding: 0.5rem 1rem; background-color: #9333ea; color: #fff; border-radius: 0.5rem; cursor: pointer; transition: 0.2s; white-space: nowrap;}
        
        .user-actions { display: flex; align-items: center; gap: 1rem; }
        .mobile-menu-btn { display: none; padding: 0.5rem; color: #374151; cursor: pointer; }
        .icon-close { display: none; }
        
        .mobile-menu { display: none; border-top: 1px solid #e5e7eb; padding: 1rem 0; }
        #mobile-menu-toggle:checked ~ .mobile-menu { display: block; }
        #mobile-menu-toggle:checked ~ .navbar .user-actions .mobile-menu-btn .icon-burger { display: none; }
        #mobile-menu-toggle:checked ~ .navbar .user-actions .mobile-menu-btn .icon-close { display: block; }
        
        .mobile-search-form { display: flex; align-items: center; margin-bottom: 1rem; }
        .mobile-search-input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; }
        .mobile-nav-links a { display: block; padding: 0.5rem 0; font-weight: 500; color: #374151; }

/* 4.5 移动端菜单控制 */
.mobile-menu-btn { display: none; padding: 0.5rem; color: #374151; cursor: pointer; }
.icon-close { display: none; }
.mobile-menu { display: none; border-top: 1px solid #e5e7eb; padding: 1rem 0; }
#mobile-menu-toggle:checked ~ .mobile-menu { display: block; }
#mobile-menu-toggle:checked ~ .navbar .user-actions .mobile-menu-btn .icon-burger { display: none; }
#mobile-menu-toggle:checked ~ .navbar .user-actions .mobile-menu-btn .icon-close { display: block; }
.mobile-search-form { display: flex; align-items: center; margin-bottom: 1rem; gap: 0.5rem; }
.mobile-search-input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid #d1d5db; border-radius: 0.5rem; }
.mobile-nav-links a { display: block; padding: 0.5rem 0; font-weight: 500; color: #374151; }

/* =========================================
   5. 首页独有样式 (Index Page)
========================================= */
.hero-section { padding: 4rem 1rem; text-align: center; color: #fff; }
.hero-title { font-size: 3.75rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; }
.hero-desc { font-size: 1.25rem; color: #f3e8ff; max-width: 48rem; margin: 0 auto 2rem; }
.hero-btns { display: flex; justify-content: center; gap: 1rem; }
.btn-white { padding: 0.75rem 2rem; background: #fff; color: #9333ea; border-radius: 0.5rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: 0.2s; }
.btn-outline { padding: 0.75rem 2rem; border: 2px solid #fff; color: #fff; border-radius: 0.5rem; font-weight: 600; display: inline-flex; justify-content: center; transition: 0.2s; }
.btn-outline:hover { background: #fff; color: #9333ea; }

.feature-box { text-align: center; }
.feature-icon-wrapper { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

/* =========================================
   6. 公共网格与卡片 (Cards & Grids)
========================================= */
.section { padding: 4rem 0; }
.section-title { font-size: 1.875rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.section-desc { font-size: 1.125rem; color: #4b5563; margin-bottom: 3rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.card { background: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: 0.3s transform, 0.3s box-shadow; cursor: pointer; display: flex; flex-direction: column;}
.card:hover { transform: translateY(-0.25rem); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.card-img-wrapper { position: relative; padding-top: 56.25%; overflow: hidden; background: #000; width: 100%;}
.card-img-vertical { padding-top: 133%; }
.card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s transform; }
.card:hover .card-img { transform: scale(1.05); }
.card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: 0.3s opacity; display: flex; align-items: center; justify-content: center; }
.card:hover .card-overlay { opacity: 1; }
.play-icon { width: 3rem; height: 3rem; color: #fff; opacity: 0; transition: 0.3s opacity; }
.card:hover .play-icon { opacity: 1; }

.badge-top-left { position: absolute; top: 1rem; left: 1rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; color: #fff; z-index: 10; }
.badge-korea { background: #ef4444; } .badge-japan { background: #3b82f6; } .badge-new { background: #10b981; }
.badge-bottom-right { position: absolute; bottom: 1rem; right: 1rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: rgba(0,0,0,0.7); color: #fff; z-index: 10;}

.card-body { padding: 1.5rem; display: flex; flex-direction: column;}
.card-title { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem; transition: 0.2s color; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.card:hover .card-title { color: #9333ea; }
.card-desc, .card-text { font-size: 0.875rem; color: #4b5563; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: #6b7280; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { padding: 0.25rem 0.5rem; background: #f3f4f6; color: #4b5563; font-size: 0.75rem; border-radius: 9999px; }

/* 热门视频底栏浮雕效果 */
.card-info-bottom { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%); display: flex; align-items: flex-end; padding: 1rem; pointer-events: none; }
.card-info-content { color: #ffffff; width: 100%; transform: translateY(0); transition: transform 0.3s ease; }
.card:hover .card-info-content { transform: translateY(-4px); }
.card-info-title { font-weight: 500; font-size: 1rem; margin-bottom: 0.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.card-info-meta { display: flex; gap: 0.75rem; font-size: 0.75rem; color: #d1d5db; }

/* =========================================
   7. 列表页独有样式 (List Page)
========================================= */
.page-header { background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); padding: 2rem 0; text-align: center; }
.page-title { font-size: 1.875rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.page-desc { font-size: 1.125rem; color: #4b5563; }
.page-count { margin-top: 1rem; font-size: 0.875rem; color: #6b7280; }

.filter-bar { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 72px; z-index: 40; padding: 1rem 0; }
.filter-controls { display: flex; align-items: center; gap: 1rem; }
.filter-group { display: flex; align-items: center; gap: 0.5rem; }
.filter-icon { width: 1.25rem; height: 1.25rem; color: #9ca3af; }

.select-box { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 2.25rem 0.5rem 0.75rem; font-size: 0.875rem; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%236b7280" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 0.5rem center / 1rem; appearance: none; cursor: pointer; min-width: 7.5rem; color: #111827; }
.select-box:focus { border-color: #9333ea; box-shadow: 0 0 0 2px rgba(147,51,234,0.2); outline: none; }

.view-controls { display: flex; align-items: center; gap: 0.5rem; }
.view-toggle { padding: 0.5rem; border-radius: 0.5rem; color: #9ca3af; cursor: pointer; display: flex; transition: 0.2s; }
.view-toggle:hover { color: #6b7280; }
.view-icon { width: 1.25rem; height: 1.25rem; }

/* 纯 CSS 网格/列表切换控制 */
#view-grid:checked ~ .filter-bar .btn-grid { background: #f3e8ff; color: #9333ea; }
#view-list:checked ~ .filter-bar .btn-list { background: #f3e8ff; color: #9333ea; }

.video-wrapper { display: grid; gap: 1.5rem; padding: 2rem 0; transition: 0.3s all; }

/* 状态 1: 网格视图 (Grid) */
#view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(4, 1fr); }
#view-grid:checked ~ .video-wrapper .card { flex-direction: column; }
#view-grid:checked ~ .video-wrapper .card-img-wrapper { width: 100%; padding-top: 56.25%; }
#view-grid:checked ~ .video-wrapper .card-body { padding: 1rem; display: flex; flex-direction: column; }
#view-grid:checked ~ .video-wrapper .card-title { font-size: 1rem; margin-bottom: 0.5rem; -webkit-line-clamp: 2; }
#view-grid:checked ~ .video-wrapper .card-desc { font-size: 0.875rem; margin-bottom: 0.75rem; -webkit-line-clamp: 2; }
#view-grid:checked ~ .video-wrapper .card-tags { display: none; }
#view-grid:checked ~ .video-wrapper .card-meta { justify-content: space-between; font-size: 0.875rem; }

/* 状态 2: 列表视图 (List) */
#view-list:checked ~ .video-wrapper { grid-template-columns: 1fr; }
#view-list:checked ~ .video-wrapper .card { flex-direction: row; }
#view-list:checked ~ .video-wrapper .card-img-wrapper { width: 16rem; flex-shrink: 0; padding-top: 0; }
#view-list:checked ~ .video-wrapper .card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
#view-list:checked ~ .video-wrapper .card-title { font-size: 1.25rem; margin-bottom: 0.5rem; -webkit-line-clamp: 2; }
#view-list:checked ~ .video-wrapper .card-desc { font-size: 1rem; margin-bottom: 1rem; -webkit-line-clamp: 3; }
#view-list:checked ~ .video-wrapper .card-tags { display: flex; margin-top: 1rem; }
#view-list:checked ~ .video-wrapper .card-meta { justify-content: flex-start; gap: 1.5rem; font-size: 0.875rem; }

/* =========================================
   8. 播放详情页独有样式 (Detail Page)
========================================= */
.player-wrapper { background: #000; }
.player-container { position: relative; max-width: 1280px; margin: 0 auto; padding-top: 56.25%; background: #000; }
.player-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

.main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2rem 1rem; max-width: 1280px; margin: 0 auto; }
.box-panel { background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); padding: 1.5rem; margin-bottom: 1.5rem; }
.video-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }
.video-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: #4b5563; margin-bottom: 1rem; align-items: center; }

.action-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.action-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #f3f4f6; color: #4b5563; border-radius: 0.5rem; font-weight: 500; cursor: pointer; transition: 0.2s; border: none; }
.action-btn:hover { background: #e5e7eb; }
.action-icon { width: 1rem; height: 1rem; }

.divider { border-top: 1px solid #e5e7eb; margin: 1.5rem 0; padding-top: 1.5rem; }
.section-subtitle { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; }
.desc-text { color: #374151; line-height: 1.6; margin-bottom: 1rem; }
.tags-wrapper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-btn { padding: 0.25rem 0.75rem; background: #f3e8ff; color: #9333ea; font-size: 0.875rem; border-radius: 9999px; cursor: pointer; transition: 0.2s; }
.tag-btn:hover { background: #e9d5ff; }

.comment-empty { text-align: center; padding: 2rem 0; color: #6b7280; }
.comment-empty p { margin-bottom: 1rem; }

.related-item { display: flex; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; transition: 0.2s; }
.related-item:hover { background: #f9fafb; }
.related-img-wrap { width: 8rem; position: relative; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; }
.related-img-wrap::before { content: ""; display: block; padding-top: 56.25%; }
.related-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.related-duration { position: absolute; bottom: 0.25rem; right: 0.25rem; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.625rem; padding: 0.125rem 0.25rem; border-radius: 0.25rem; z-index: 10;}
.related-info { flex: 1; min-width: 0; }
.related-title { font-size: 0.875rem; font-weight: 500; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.25rem; }
.related-item:hover .related-title { color: #9333ea; }
.related-stats { font-size: 0.75rem; color: #6b7280; }

/* =========================================
   9. 公共底部 (Footer)
========================================= */
.footer { background: #111827; color: #fff; padding: 3rem 0 0; margin-top: 4rem;}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; }
.footer-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: #9ca3af; transition: 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1f2937; padding: 1.5rem 0; color: #6b7280; font-size: 0.875rem; text-align: center; }

/* =========================================
   10. 响应式断点 (Media Queries)
========================================= */
@media (max-width: 1150px) {
    .desktop-nav { gap: 1rem; }
    .desktop-nav a { font-size: 0.875rem; }
    .search-input { width: 12rem; }
}

@media (max-width: 1024px) {
    .grid-4, #view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(3, 1fr); }
    .hero-title { font-size: 3rem; }
    .main-layout { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
    /* 隐藏桌面端头部组件，显示移动端汉堡菜单 */
    .desktop-nav { display: none !important; }
    .desktop-search { display: none !important; }
    .desktop-auth { display: none !important; }
    .mobile-menu-btn { display: block; }
    
    .section { padding: 2rem 0; }
    .hero-section { padding: 3rem 1rem; }
    .hero-title { font-size: 2.25rem; }
    .hero-desc { font-size: 1rem; }
    .hero-btns { flex-direction: column; width: 100%; }
    .hero-btns a { width: 100%; }
    
    .grid-3 { grid-template-columns: 1fr; gap: 1.5rem; }
    .grid-4, #view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    
    .section-desc { margin-bottom: 2rem; font-size: 1rem; }
    .flex-mobile-col { flex-direction: column; align-items: flex-start !important; gap: 0.5rem; }
    .footer-bottom .flex { flex-direction: column; gap: 1rem; }
    
    /* 列表页筛选条移动端排版 */
    .filter-bar .container { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .filter-bar .flex { width: 100%; justify-content: space-between; }
    .filter-controls { width: 100%; }
}

@media (max-width: 640px) {
    .grid-4, #view-grid:checked ~ .video-wrapper { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .card-meta, #view-grid:checked ~ .video-wrapper .card-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    
    /* 列表页：手机端列表视图优化 */
    #view-list:checked ~ .video-wrapper .card-img-wrapper { width: 8rem; }
    #view-list:checked ~ .video-wrapper .card-body { padding: 0.75rem; }
    #view-list:checked ~ .video-wrapper .card-title { font-size: 1rem; margin-bottom: 0.25rem; }
    #view-list:checked ~ .video-wrapper .card-desc { display: none; }
    #view-list:checked ~ .video-wrapper .card-tags { display: none; }
    #view-list:checked ~ .video-wrapper .card-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.75rem; }

    /* 详情页：按钮排列与右侧图片收缩 */
    .action-btns { justify-content: space-between; gap: 0.5rem; }
    .action-btn { flex: 1; font-size: 0.875rem; padding: 0.5rem; }
    .related-img-wrap { width: 6rem; }
}

/* 列表页特有样式 */
        .page-header { background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); padding: 2rem 0; text-align: center; }
        .page-title { font-size: 1.875rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
        .page-desc { font-size: 1.125rem; color: #4b5563; }
        .page-count { margin-top: 1rem; font-size: 0.875rem; color: #6b7280; }
        
        /* 精确对齐的筛选与视图控制条 */
        .filter-bar { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 72px; z-index: 40; padding: 1rem 0; }
        .filter-controls { display: flex; align-items: center; gap: 1rem; }
        .filter-group { display: flex; align-items: center; gap: 0.5rem; }
        .filter-icon { width: 1.25rem; height: 1.25rem; color: #9ca3af; }
        
        .select-box { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: 0.875rem; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%236b7280" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 0.5rem center / 1rem; appearance: none; cursor: pointer; min-width: 7.5rem; color: #111827; }
        .select-box:focus { border-color: #9333ea; box-shadow: 0 0 0 2px rgba(147,51,234,0.2); outline: none; }
        
        .view-controls { display: flex; align-items: center; gap: 0.5rem; }
        .view-toggle { padding: 0.5rem; border-radius: 0.5rem; color: #9ca3af; cursor: pointer; display: flex; transition: 0.2s; }
        .view-toggle:hover { color: #6b7280; }
        .view-icon { width: 1.25rem; height: 1.25rem; }
        
        /* 纯 CSS 核心黑科技：响应网格/列表切换 */
        #view-grid:checked ~ .filter-bar .btn-grid { background: #f3e8ff; color: #9333ea; }
        #view-list:checked ~ .filter-bar .btn-list { background: #f3e8ff; color: #9333ea; }
        
        .video-wrapper { display: grid; gap: 1.5rem; padding: 2rem 0; transition: 0.3s all; }
        .card { background: #fff; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: 0.3s transform, 0.3s box-shadow; display: flex; cursor: pointer; }
        .card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: translateY(-0.25rem); }
        .card-img-wrapper { position: relative; overflow: hidden; background: #000; }
        .card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s transform; }
        .card:hover .card-img { transform: scale(1.05); }
        .card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
        .card:hover .card-overlay { opacity: 1; }
        .play-icon { width: 2.5rem; height: 2.5rem; color: #fff; }
        
        .badge-top-left { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; color: #fff; }
        .badge-bottom-right { position: absolute; bottom: 0.5rem; right: 0.5rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; background: rgba(0,0,0,0.7); color: #fff; }
        .badge-korea { background: #ef4444; } .badge-japan { background: #3b82f6; }
        
        .card-title { font-weight: 600; color: #111827; transition: 0.2s color; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
        .card:hover .card-title { color: #9333ea; }
        .card-desc { color: #4b5563; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
        .card-meta { display: flex; color: #6b7280; align-items: center; }
        .card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .tag { padding: 0.25rem 0.5rem; background: #f3f4f6; color: #4b5563; font-size: 0.75rem; border-radius: 9999px; }

        /* 状态 1: 网格视图 (Grid) */
        #view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(4, 1fr); }
        #view-grid:checked ~ .video-wrapper .card { flex-direction: column; }
        #view-grid:checked ~ .video-wrapper .card-img-wrapper { width: 100%; padding-top: 56.25%; }
        #view-grid:checked ~ .video-wrapper .card-body { padding: 1rem; display: flex; flex-direction: column; }
        #view-grid:checked ~ .video-wrapper .card-title { font-size: 1rem; margin-bottom: 0.5rem; -webkit-line-clamp: 2; }
        #view-grid:checked ~ .video-wrapper .card-desc { font-size: 0.875rem; margin-bottom: 0.75rem; -webkit-line-clamp: 2; }
        #view-grid:checked ~ .video-wrapper .card-tags { display: none; }
        #view-grid:checked ~ .video-wrapper .card-meta { justify-content: space-between; font-size: 0.875rem; }

        /* 状态 2: 列表视图 (List) */
        #view-list:checked ~ .video-wrapper { grid-template-columns: 1fr; }
        #view-list:checked ~ .video-wrapper .card { flex-direction: row; }
        #view-list:checked ~ .video-wrapper .card-img-wrapper { width: 16rem; flex-shrink: 0; padding-top: 0; }
        #view-list:checked ~ .video-wrapper .card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
        #view-list:checked ~ .video-wrapper .card-title { font-size: 1.25rem; margin-bottom: 0.5rem; -webkit-line-clamp: 2; }
        #view-list:checked ~ .video-wrapper .card-desc { font-size: 1rem; margin-bottom: 1rem; -webkit-line-clamp: 3; }
        #view-list:checked ~ .video-wrapper .card-tags { display: flex; margin-top: 1rem; }
        #view-list:checked ~ .video-wrapper .card-meta { justify-content: flex-start; gap: 1.5rem; font-size: 0.875rem; }

        /* 尾部复用 */
        .footer { background: #111827; color: #fff; padding: 2rem 0 0; margin-top: 4rem;}
        .footer-bottom { border-top: 1px solid #1f2937; padding: 1.5rem 0; color: #6b7280; font-size: 0.875rem; text-align: center; }

        /* ======== 响应式设计 (Media Queries) ======== */
        @media (max-width: 1024px) {
            #view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 768px) {
            .desktop-nav { display: none !important; }
            .desktop-search { display: none !important; }
            .mobile-menu-btn { display: block; }
            
            #view-grid:checked ~ .video-wrapper { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
            .filter-bar .container { flex-direction: column; align-items: flex-start; gap: 1rem; }
            .filter-bar .flex { width: 100%; justify-content: space-between; }
            .filter-controls { width: 100%; }
        }
        @media (max-width: 640px) {
            #view-grid:checked ~ .video-wrapper { grid-template-columns: 1fr; }
            #view-grid:checked ~ .video-wrapper .card-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
            
            /* 手机端的列表视图缩减图片宽度 */
            #view-list:checked ~ .video-wrapper .card-img-wrapper { width: 8rem; }
            #view-list:checked ~ .video-wrapper .card-body { padding: 0.75rem; }
            #view-list:checked ~ .video-wrapper .card-title { font-size: 1rem; margin-bottom: 0.25rem; }
            #view-list:checked ~ .video-wrapper .card-desc { display: none; }
            #view-list:checked ~ .video-wrapper .card-tags { display: none; }
            #view-list:checked ~ .video-wrapper .card-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.75rem; }
        }
        /*分页*/
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 3rem;
            margin-bottom: 2rem;
            width: 100%;
        }
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }
        .pagination .page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            height: 2.5rem;
            padding: 0 0.75rem;
            border-radius: 0.5rem;
            background-color: #f3f4f6;
            color: #4b5563;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .pagination .page-link:hover:not(.disabled):not(.dots) {
            background-color: #e5e7eb;
            color: #111827;
        }
        .pagination .page-link.active {
            background-color: #9333ea;
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2);
        }
        .pagination .page-link.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .pagination .page-link.dots {
            background-color: transparent;
            color: #9ca3af;
            cursor: default;
            padding: 0 0.25rem;
            min-width: auto;
        }
        .pagination svg {
            width: 1.25rem;
            height: 1.25rem;
        }
        .pagination .prev svg { margin-right: 0.25rem; }
        .pagination .next svg { margin-left: 0.25rem; }
        @media screen and (max-width: 768px) {
    .grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}