:root{--primary-color:#007bff;--secondary-color:#6c757d;--success-color:#28a745;--danger-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--light-color:#f8f9fa;--dark-color:#343a40}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:#f5f5f5;padding-top:70px}
#mainNav{transition:all 0.3s ease}
#mainNav .navbar-brand{font-size:1.5rem;font-weight:bold}
#mainNav .nav-link{transition:color 0.3s ease}
#mainNav .nav-link:hover{color:var(--primary-color) !important}
.card{border:none;border-radius:8px;transition:transform 0.3s ease,box-shadow 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.card-img-top{border-radius:8px 8px 0 0;transition:opacity 0.3s ease}
.card:hover .card-img-top{opacity:0.9}
.video-duration{background-color:#00000080;border-radius:4px;bottom:5px;color:#fff !important;font-size:.8rem;font-weight:normal;line-height:1;padding:2px 6px;position:absolute;right:6px;z-index:1}
.card-title{font-size:0.95rem;line-height:1.4;height:2.8em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.badge{font-weight:500;padding:0.35em 0.65em}
.pagination{margin-top:2rem}
.pagination .page-link{color:var(--primary-color);border-radius:4px;margin:0 2px}
.pagination .page-item.active .page-link{background-color:var(--primary-color);border-color:var(--primary-color);color:#ffffff !important}
#searchModal .modal-content{border-radius:12px}
#searchModal .form-control{border-radius:8px 0 0 8px;padding:0.75rem 1rem}
#searchModal .btn{border-radius:0 8px 8px 0}
.list-group-item{border-radius:8px;margin-bottom:0.5rem;transition:background-color 0.3s ease}
.list-group-item:hover{background-color:#f8f9fa}
#videoPlayer{border-radius:8px;overflow:hidden}
.breadcrumb{background-color:transparent;padding:0.5rem 0}
.breadcrumb-item + .breadcrumb-item::before{content:"›";font-size:1.2rem}
@media (max-width:768px){body{padding-top:60px}
#mainNav .navbar-brand{font-size:1.2rem}
.card-title{font-size:0.9rem}
}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(0,123,255,0.3);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}
}body.light-theme,[data-bs-theme="light"]{background-color:#f5f5f5;color:#212529}
body.light-theme,body.light-theme *,[data-bs-theme="light"],[data-bs-theme="light"] *{color:#212529}
body.light-theme a,[data-bs-theme="light"] a{color:#212529}
body.light-theme a:hover,[data-bs-theme="light"] a:hover{color:#000000}
body.light-theme .card,[data-bs-theme="light"] .card{background-color:#ffffff;color:#212529}
body.light-theme .list-group-item,[data-bs-theme="light"] .list-group-item{background-color:#ffffff;color:#212529;border-color:#dee2e6}
body.light-theme .list-group-item:hover,[data-bs-theme="light"] .list-group-item:hover{background-color:#f8f9fa}
body.dark-theme,[data-bs-theme="dark"]{background-color:#1a1a1a;color:#f8f9fa}
body.dark-theme,body.dark-theme *,[data-bs-theme="dark"],[data-bs-theme="dark"] *{color:#f8f9fa}
body.dark-theme a,[data-bs-theme="dark"] a{color:#f8f9fa}
body.dark-theme a:hover,[data-bs-theme="dark"] a:hover{color:#ffffff}
body.dark-theme .card,[data-bs-theme="dark"] .card{background-color:#2a2a2a;color:#f8f9fa;border-color:#3a3a3a}
body.dark-theme .card:hover,[data-bs-theme="dark"] .card:hover{box-shadow:0 10px 20px rgba(255,255,255,0.05)}
body.dark-theme .card-title,body.dark-theme .card-title a,[data-bs-theme="dark"] .card-title,[data-bs-theme="dark"] .card-title a{color:#f8f9fa !important}
body.dark-theme .card-text,[data-bs-theme="dark"] .card-text{color:#f8f9fa}
body.dark-theme .list-group-item,[data-bs-theme="dark"] .list-group-item{background-color:#2a2a2a;color:#f8f9fa;border-color:#3a3a3a}
body.dark-theme .list-group-item:hover,[data-bs-theme="dark"] .list-group-item:hover{background-color:#3a3a3a}
body.dark-theme .modal-content,[data-bs-theme="dark"] .modal-content{background-color:#2a2a2a;color:#f8f9fa;border-color:#3a3a3a}
body.dark-theme .modal-header,[data-bs-theme="dark"] .modal-header{border-bottom-color:#3a3a3a}
body.dark-theme .form-control,[data-bs-theme="dark"] .form-control{background-color:#3a3a3a;color:#f8f9fa;border-color:#4a4a4a}
body.dark-theme .form-control:focus,[data-bs-theme="dark"] .form-control:focus{background-color:#3a3a3a;color:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 0.25rem rgba(0,123,255,0.25)}
body.dark-theme .form-control::placeholder,[data-bs-theme="dark"] .form-control::placeholder{color:#adb5bd}
body.dark-theme .btn-outline-secondary,[data-bs-theme="dark"] .btn-outline-secondary{color:#f8f9fa;border-color:#4a4a4a}
body.dark-theme .btn-outline-secondary:hover,[data-bs-theme="dark"] .btn-outline-secondary:hover{background-color:#3a3a3a;border-color:#4a4a4a;color:#ffffff}
body.dark-theme .btn-outline-primary,[data-bs-theme="dark"] .btn-outline-primary{color:#f8f9fa;border-color:#6ea8fe}
body.dark-theme .btn-outline-primary:hover,[data-bs-theme="dark"] .btn-outline-primary:hover{background-color:#6ea8fe;border-color:#6ea8fe;color:#000}
body.dark-theme .breadcrumb-item,body.dark-theme .breadcrumb-item a,[data-bs-theme="dark"] .breadcrumb-item,[data-bs-theme="dark"] .breadcrumb-item a{color:#f8f9fa}
body.dark-theme .breadcrumb-item.active,[data-bs-theme="dark"] .breadcrumb-item.active{color:#f8f9fa}
body.dark-theme .text-muted,[data-bs-theme="dark"] .text-muted{color:#adb5bd !important}
body.dark-theme .text-dark,[data-bs-theme="dark"] .text-dark{color:#f8f9fa !important}
body.dark-theme .bg-light,[data-bs-theme="dark"] .bg-light{background-color:#2a2a2a !important}
body.dark-theme .border,[data-bs-theme="dark"] .border{border-color:#3a3a3a !important}
body.dark-theme .sidebar,[data-bs-theme="dark"] .sidebar{background-color:#212529;color:#f8f9fa}
body.dark-theme .sidebar .list-group-item-action,[data-bs-theme="dark"] .sidebar .list-group-item-action{color:#f8f9fa}
body.dark-theme .sidebar .list-group-item-action:hover,[data-bs-theme="dark"] .sidebar .list-group-item-action:hover{background-color:#2a2a2a}
body.dark-theme .category-modal-content,[data-bs-theme="dark"] .category-modal-content{background-color:#212529;color:#f8f9fa}
body.dark-theme .category-modal-content a,[data-bs-theme="dark"] .category-modal-content a{color:#f8f9fa;background-color:#2a2a2a !important}
body.dark-theme .category-modal-content a:hover,[data-bs-theme="dark"] .category-modal-content a:hover{background-color:#3a3a3a !important}
body.dark-theme .btn-close,[data-bs-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
body.dark-theme .dropdown-menu,[data-bs-theme="dark"] .dropdown-menu{background-color:#2a2a2a;border-color:#3a3a3a}
body.dark-theme .dropdown-item,[data-bs-theme="dark"] .dropdown-item{color:#f8f9fa}
body.dark-theme .dropdown-item:hover,body.dark-theme .dropdown-item:focus,[data-bs-theme="dark"] .dropdown-item:hover,[data-bs-theme="dark"] .dropdown-item:focus{background-color:#3a3a3a;color:#ffffff}
body.dark-theme .alert-info,[data-bs-theme="dark"] .alert-info{background-color:#1f4d5c;border-color:#2a6478;color:#f8f9fa}
body.dark-theme .badge,[data-bs-theme="dark"] .badge{background-color:#3a3a3a;color:#f8f9fa}
img[loading="lazy"]{background-color:#f0f0f0}
body.dark-theme img[loading="lazy"],[data-bs-theme="dark"] img[loading="lazy"]{background-color:#3a3a3a}
body.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item),[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item){color:#f8f9fa}
body.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover,[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover{color:#ffffff}
body,.card,.list-group-item,.modal-content,.form-control,.btn,.navbar,.dropdown-menu,.alert{transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease}
body.dark-theme h1,body.dark-theme h2,body.dark-theme h3,body.dark-theme h4,body.dark-theme h5,body.dark-theme h6,[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6{color:#f8f9fa}
body.dark-theme footer.bg-dark,[data-bs-theme="dark"] footer.bg-dark{background-color:#0d1117 !important}
body.dark-theme .btn-group .btn.active,[data-bs-theme="dark"] .btn-group .btn.active{background-color:#0d6efd;border-color:#0d6efd;color:#fff}
body.dark-theme .pagination .page-link,[data-bs-theme="dark"] .pagination .page-link{background-color:#2a2a2a;border-color:#3a3a3a;color:#f8f9fa}
body.dark-theme .pagination .page-link:hover,[data-bs-theme="dark"] .pagination .page-link:hover{background-color:#3a3a3a;border-color:#4a4a4a;color:#ffffff}
body.dark-theme .pagination .page-item.active .page-link,[data-bs-theme="dark"] .pagination .page-item.active .page-link{background-color:#0d6efd;border-color:#0d6efd;color:#ffffff !important}
body.dark-theme .pagination .page-item.disabled .page-link,[data-bs-theme="dark"] .pagination .page-item.disabled .page-link{background-color:#1a1a1a;border-color:#2a2a2a;color:#6c757d}
body.dark-theme .input-group-text,[data-bs-theme="dark"] .input-group-text{background-color:#3a3a3a;border-color:#4a4a4a;color:#f8f9fa}
body.dark-theme .table,[data-bs-theme="dark"] .table{color:#f8f9fa}
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > *,[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{background-color:rgba(255,255,255,0.05)}
body.dark-theme .card:hover,[data-bs-theme="dark"] .card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,255,255,0.1)}
body.light-theme .card:hover{transform:translateY(-2px)}
.card a img{transition:transform 0.3s ease,opacity 0.3s ease}
.card a:hover img{transform:scale(1.05);opacity:0.9}
body.dark-theme .form-control:focus,[data-bs-theme="dark"] .form-control:focus{box-shadow:0 0 0 0.25rem rgba(13,110,253,0.25)}
#themeToggle{}
#themeToggle:hover{}
#themeToggle i{}
body.dark-theme .back-to-top,[data-bs-theme="dark"] .back-to-top{background-color:#ffc107;color:#000}
body.dark-theme .back-to-top:hover,[data-bs-theme="dark"] .back-to-top:hover{background-color:#ffca2c}
.video-player-container{width:100%;max-width:1320px;margin:0 auto}
.player-box{width:100%;position:relative;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden}
.video-player{width:100%;height:auto;aspect-ratio:16 / 9;background:#000;border-radius:8px}
.player-skeleton{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;z-index:1;pointer-events:none}
.player-skeleton svg{width:48px;height:48px;color:rgba(255,255,255,0.8);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
@keyframes loading{0%{background-position:200% 0}
100%{background-position:-200% 0}
}.player-box iframe[src] ~ .player-skeleton{opacity:1;transition:opacity 0.3s ease}
.video-skeleton{width:100%;height:auto;aspect-ratio:16 / 9;border-radius:8px;position:relative;overflow:hidden;background-color:#e0e0e0;transition:opacity 0.3s ease;opacity:0.9}
.video-skeleton::after{content:'';position:absolute;top:0;left:-150%;height:100%;width:150%;background:linear-gradient(
        90deg,rgba(224,224,224,0) 0%,rgba(245,245,245,0.8) 50%,rgba(224,224,224,0) 100%
    );animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{left:-150%}
100%{left:100%}
}.narrow-center-box{max-width:1320px;margin:0 auto;padding:0 15px}
@media (min-width:768px){.narrow-center-box{padding:0 30px}
}.info-tags-container{line-height:1.8;word-break:break-word;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:10px;margin-bottom:10px}
.info-tags-container h2{width:100%;margin-bottom:0.5rem}
.tag-icon{font-size:1rem;margin-right:4px;margin-top:2px}
.tag-btn{transition:all 0.2s ease-in-out}
.tag-btn:hover{opacity:0.85;transform:scale(1.03)}
.share-section{display:block}
.share-url-group input{font-size:14px}
.share-section .btn-sm{min-width:90px}
.video-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.75);color:#fff;padding:2px 6px;border-radius:3px;font-size:0.75rem;font-weight:500}
.video-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;font-size:0.9rem;color:#333}
.video-title:hover{color:#007bff}
body.dark-mode .video-title{color:#f8f9fa !important}
body.dark-mode .video-title:hover{color:#ffffff !important}
body.dark-mode .info-tags-container h2{color:#f8f9fa}
body.dark-mode .video-skeleton{background-color:#2a2a2a}
body.dark-mode .video-skeleton::after{background:linear-gradient(
        90deg,rgba(42,42,42,0) 0%,rgba(60,60,60,0.8) 50%,rgba(42,42,42,0) 100%
    )}
body.dark-mode .player-skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#1a1a1a 50%,#2a2a2a 75%);background-size:200% 100%}
body.dark-mode .player-box{background:#1a1a1a}
.letter-link{color:#fff;font-weight:bold;padding:4px 8px;border-radius:4px;transition:all 0.3s ease}
.letter-link:hover{color:#ffc107;background:rgba(255,193,7,0.1)}
.tag-item{transition:all 0.3s ease}
.tag-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.back-to-top{position:fixed;bottom:30px;right:20px;padding:10px 20px;border-radius:8px;font-weight:bold;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:all 0.3s ease}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.4)}
body.dark-mode .letter-link{color:#f8f9fa}
body.dark-mode .letter-link:hover{color:#ffc107;background:rgba(255,193,7,0.15)}
body.dark-mode .tag-group h2{color:#f8f9fa;border-bottom-color:#444}
body.dark-mode .tag-item{background:#2a2a2a;color:#f8f9fa;border-color:#444}
body.dark-mode .tag-item:hover{background:#3a3a3a;border-color:#ffc107}
.video-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.8);color:#fff;padding:2px 6px;border-radius:3px;font-size:12px;font-weight:bold}
.video-title{display:block;color:#333;font-size:14px;line-height:1.4;transition:color 0.3s ease}
.video-title:hover{color:#ffc107}
.btn-outline-secondary{border-color:#6c757d;color:#6c757d;transition:all 0.3s ease}
.btn-outline-secondary:hover{background-color:#6c757d;color:#fff}
.btn-outline-secondary.disabled{opacity:0.5;pointer-events:none;cursor:not-allowed}
.btn-outline-primary:disabled,.btn-outline-primary.disabled{opacity:0.6;cursor:not-allowed;pointer-events:none}
.btn-outline-primary:disabled:hover,.btn-outline-primary.disabled:hover{background-color:transparent;border-color:#0d6efd;color:#0d6efd}
body.dark-theme .btn-outline-primary:disabled:hover,[data-bs-theme="dark"] .btn-outline-primary:disabled:hover,body.dark-theme .btn-outline-primary.disabled:hover,[data-bs-theme="dark"] .btn-outline-primary.disabled:hover{background-color:transparent;border-color:#6ea8fe;color:#f8f9fa}
.input-group{width:auto}
.input-group .form-control{text-align:center}
body.dark-mode .video-title{color:#f8f9fa}
body.dark-mode .video-title:hover{color:#ffc107}
body.dark-mode .btn-outline-secondary{border-color:#6c757d;color:#f8f9fa}
body.dark-mode .btn-outline-secondary:hover{background-color:#6c757d;color:#fff}
body.dark-mode .form-control{background-color:#2a2a2a;border-color:#444;color:#f8f9fa}
body.dark-mode .form-control::placeholder{color:#888}
@media (max-width:767px){.narrow-center-box{padding:0 10px}
.info-tags-container{font-size:0.9rem}
.tag-btn{font-size:0.75rem;padding:0.25rem 0.5rem}
}.card-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.9rem;line-height:1.4;margin:0 auto;max-height:2.8em;overflow:hidden;padding:0 6px;text-align:center;text-overflow:ellipsis}
.skeleton-card{background:#fff;border-radius:8px;overflow:hidden}
body.dark-theme .skeleton-card,[data-bs-theme="dark"] .skeleton-card{background:#2a2a2a}
.skeleton-title{height:32px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;width:200px}
body.dark-theme .skeleton-title,[data-bs-theme="dark"] .skeleton-title{background:linear-gradient(90deg,#2a2a2a 25%,#1a1a1a 50%,#2a2a2a 75%);background-size:200% 100%}
.skeleton-img{width:100%;aspect-ratio:16 / 9;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px}
body.dark-theme .skeleton-img,[data-bs-theme="dark"] .skeleton-img{background:linear-gradient(90deg,#2a2a2a 25%,#1a1a1a 50%,#2a2a2a 75%);background-size:200% 100%}
.skeleton-text{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;width:80%;margin:0 auto}
body.dark-theme .skeleton-text,[data-bs-theme="dark"] .skeleton-text{background:linear-gradient(90deg,#2a2a2a 25%,#1a1a1a 50%,#2a2a2a 75%);background-size:200% 100%}
@keyframes skeleton-loading{0%{background-position:200% 0}
100%{background-position:-200% 0}
}.nav-icon i{font-size:0.8em}
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1040;display:none}
.sidebar-overlay.show{display:block}
.sidebar{position:fixed;top:0;left:-300px;width:300px;height:100%;background:white;z-index:1050;transition:left 0.3s ease;overflow-y:auto}
.sidebar.show{left:0}
.dark-theme .sidebar{background:#212529;color:white}
.category-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1050;justify-content:center;align-items:center}
.category-modal.show{display:flex}
.category-modal-content{background:white;border-radius:8px;padding:2rem;max-width:800px;width:90%;max-height:80vh;overflow-y:auto}
.dark-theme .category-modal-content{background:#212529;color:white}


/* SVG Icon Styles */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.icon-lg {
  width: 1.25em;
  height: 1.25em;
}

.icon-xl {
  width: 1.5em;
  height: 1.5em;
}

/* 与Bootstrap图标类兼容 */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Bootstrap颜色工具类支持 - SVG需要使用fill而不是color */
.bi.text-primary,
svg.text-primary {
  fill: #0d6efd !important;
}

.bi.text-secondary,
svg.text-secondary {
  fill: #6c757d !important;
}

.bi.text-success,
svg.text-success {
  fill: #198754 !important;
}

.bi.text-danger,
svg.text-danger {
  fill: #dc3545 !important;
}

.bi.text-warning,
svg.text-warning {
  fill: #ffc107 !important;
}

.bi.text-info,
svg.text-info {
  fill: #0dcaf0 !important;
}

.bi.text-light,
svg.text-light {
  fill: #f8f9fa !important;
}

.bi.text-dark,
svg.text-dark {
  fill: #212529 !important;
}

/* 主题颜色继承 - 确保SVG图标在不同主题下显示正确颜色 */
body.light-theme .bi,
body.light-theme svg.icon,
[data-bs-theme="light"] .bi,
[data-bs-theme="light"] svg.icon {
  fill: #212529;
}

body.dark-theme .bi,
body.dark-theme svg.icon,
[data-bs-theme="dark"] .bi,
[data-bs-theme="dark"] svg.icon {
  fill: #f8f9fa;
}

/* 按钮内的图标应该继承按钮的颜色 */
.btn .bi,
.btn svg.icon {
  fill: currentColor;
}

/* 链接内的图标应该继承链接的颜色 */
a .bi,
a svg.icon {
  fill: currentColor;
}