/**
██   ██ ██    ██ ██████  ██  ██████ ███    ███ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ████  ████ ██      
███████ ██    ██ ██   ██ ██ ██      ██ ████ ██ ███████ 
██   ██ ██    ██ ██   ██ ██ ██      ██  ██  ██      ██ 
██   ██  ██████  ██████  ██  ██████ ██      ██ ███████ 
            ===========================================
 * @Sign
================================
        Keep calm and get rich.
                    Is the best huudi.
 */
/* 基础样式重置与公共样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --qjcv-primary: #ff6b6b;
    --qjcv-secondary: #4ecdc4;
    --qjcv-accent: #ffe66d;
    --qjcv-text: #292f36;
    --qjcv-light: #a53f04;
    --qjcv-dark: #a9424e;
    --qjcv-border-radius: 12px;
    --qjcv-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --qjcv-doodle-bg: #baa939;
}

body {
    font-family: 'Comic Sans MS', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--qjcv-text);
    background-color: var(--qjcv-light);
}

.qjcv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

/* 顶部涂鸦装饰区域 */
.qjcv-doodle-header {
    position: relative;
    height: 80px;
    background-color: var(--qjcv-doodle-bg);
    overflow: hidden;
}

.qjcv-doodle-cloud {
    position: absolute;
    width: 100px;
    height: 60px;
    border-radius: 50px;
    background-color: #6ae29d;
    opacity: 0.8;
}

.qjcv-doodle-cloud:before,
.qjcv-doodle-cloud:after {
    content: '';
    position: absolute;
    background-color: #6ae29d;
    border-radius: 50%;
}

.qjcv-doodle-cloud:before {
    width: 50px;
    height: 50px;
    top: -20px;
    left: 15px;
}

.qjcv-doodle-cloud:after {
    width: 60px;
    height: 60px;
    top: -10px;
    right: 15px;
}

.qjcv-doodle-cloud-left {
    top: 10px;
    left: 5%;
    animation: float-left 8s ease-in-out infinite;
}

.qjcv-doodle-cloud-right {
    top: 25px;
    right: 5%;
    animation: float-right 10s ease-in-out infinite;
}

@keyframes float-left {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(20px) translateY(-5px); }
}

@keyframes float-right {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-20px) translateY(-8px); }
}

.qjcv-doodle-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, var(--qjcv-accent) 2px, transparent 2px),
        radial-gradient(circle, var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(circle, var(--qjcv-secondary) 3px, transparent 3px);
    background-size: 100px 100px;
    background-position: 
        10px 20px,
        50px 70px,
        80px 30px;
    background-repeat: repeat;
    opacity: 0.3;
}

/* 页头主要内容区域 */
.qjcv-header {
    background-color: #6ae29d;
    position: relative;
    box-shadow: var(--qjcv-shadow);
    z-index: 10;
}

/* Logo区域样式 */
.qjcv-logo-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.qjcv-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--qjcv-text);
}

.qjcv-logo-doodle {
    width: 50px;
    height: 50px;
    background-color: var(--qjcv-primary);
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    border: 3px solid var(--qjcv-dark);
}

.qjcv-logo-doodle:before,
.qjcv-logo-doodle:after {
    content: '';
    position: absolute;
    background-color: #6ae29d;
    border-radius: 50%;
}

.qjcv-logo-doodle:before {
    width: 15px;
    height: 15px;
    top: 10px;
    left: 10px;
}

.qjcv-logo-doodle:after {
    width: 10px;
    height: 10px;
    top: 25px;
    right: 12px;
}

.qjcv-site-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    position: relative;
    text-shadow: 2px 2px 0 var(--qjcv-accent);
    letter-spacing: 1px;
}

.qjcv-site-url {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: var(--qjcv-light);
    padding: 5px 12px;
    border-radius: 20px;
    border: 2px dashed var(--qjcv-secondary);
    transition: all 0.3s ease;
}

.qjcv-site-url:hover {
    background-color: var(--qjcv-accent);
    transform: scale(1.05);
}

.qjcv-url-text {
    font-size: 14px;
    color: var(--qjcv-dark);
}

.qjcv-copy-icon {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-color: var(--qjcv-secondary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

/* 搜索区域样式 */
.qjcv-search-wrapper {
    margin: 20px 0;
}

.qjcv-search-form {
    position: relative;
}

.qjcv-search-input-wrap {
    display: flex;
    position: relative;
    z-index: 1;
}

.qjcv-search-input-wrap:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    z-index: -1;
}

.qjcv-search-input {
    flex: 1;
    border: 3px solid var(--qjcv-primary);
    border-right: none;
    border-radius: var(--qjcv-border-radius) 0 0 var(--qjcv-border-radius);
    padding: 12px 15px;
    font-size: 16px;
    background-color: transparent;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.qjcv-search-input:focus {
    outline: none;
    background-color: #6ae29d;
}

.qjcv-search-btn {
    border: 3px solid var(--qjcv-primary);
    background-color: var(--qjcv-primary);
    border-radius: 0 var(--qjcv-border-radius) var(--qjcv-border-radius) 0;
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.qjcv-search-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.2) 25%, 
        rgba(255,255,255,0.2) 50%, transparent 50%, transparent 75%, 
        rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.2));
    background-size: 10px 10px;
    animation: move-background 2s linear infinite;
    opacity: 0.3;
}

@keyframes move-background {
    0% { background-position: 0 0; }
    100% { background-position: 10px 0; }
}

.qjcv-search-btn:hover {
    background-color: var(--qjcv-accent);
    border-color: var(--qjcv-accent);
}

.qjcv-search-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
    background-color: #6ae29d;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-search-text {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

/* 热搜标签区域 */
.qjcv-hot-search {
    display: flex;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.qjcv-hot-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--qjcv-dark);
    margin-right: 10px;
    position: relative;
    padding-left: 20px;
}

.qjcv-hot-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--qjcv-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qjcv-hot-item {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    color: var(--qjcv-text);
    background-color: #6ae29d;
    border: 2px solid var(--qjcv-secondary);
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.qjcv-hot-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

/* 导航菜单区域 */
.qjcv-nav {
    background-color: var(--qjcv-dark);
    border-top: 4px dashed var(--qjcv-light);
    position: relative;
}

.qjcv-nav:before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 12px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-accent) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-accent) 25%, transparent 25%);
    background-size: 12px 12px;
    background-position: 0 0;
    opacity: 0.4;
}

.qjcv-nav-scroller {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qjcv-nav-scroller::-webkit-scrollbar {
    display: none;
}

.qjcv-nav-list {
    display: flex;
    padding: 0 5px;
}

.qjcv-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.qjcv-nav-item:hover {
    background-color: rgba(255,255,255,0.1);
}

.qjcv-nav-item.qjcv-active {
    color: var(--qjcv-accent);
}

.qjcv-nav-item.qjcv-active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 3px;
    background-color: var(--qjcv-accent);
    border-radius: 3px 3px 0 0;
}

.qjcv-nav-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background-color: currentColor;
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-home {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* 移动端菜单切换按钮 */
.qjcv-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.qjcv-menu-icon {
    width: 24px;
    height: 3px;
    background-color: #6ae29d;
    position: relative;
    transition: all 0.3s ease;
}

.qjcv-menu-icon:before,
.qjcv-menu-icon:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 3px;
    background-color: #6ae29d;
    transition: all 0.3s ease;
}

.qjcv-menu-icon:before {
    top: -8px;
}

.qjcv-menu-icon:after {
    bottom: -8px;
}

.qjcv-menu-active .qjcv-menu-icon {
    background-color: transparent;
}

.qjcv-menu-active .qjcv-menu-icon:before {
    transform: rotate(45deg);
    top: 0;
}

.qjcv-menu-active .qjcv-menu-icon:after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* 子分类菜单 */
.qjcv-submenu {
    display: none;
    background-color: rgba(255,255,255,0.97);
    border-bottom: 4px dashed var(--qjcv-secondary);
    padding: 15px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.qjcv-submenu-group {
    margin-bottom: 15px;
}

.qjcv-submenu-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--qjcv-dark);
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 4px solid var(--qjcv-primary);
}

.qjcv-submenu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qjcv-submenu-item {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--qjcv-light);
    border-radius: 15px;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.qjcv-submenu-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-submenu-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
}

/* 手绘分隔线 */
.qjcv-doodle-divider {
    height: 20px;
    background-image: 
        linear-gradient(90deg, var(--qjcv-primary) 50%, transparent 50%),
        linear-gradient(90deg, var(--qjcv-secondary) 50%, transparent 50%);
    background-size: 20px 8px, 20px 8px;
    background-position: 0 0, 0 10px;
    opacity: 0.5;
    position: relative;
}

.qjcv-doodle-divider:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: radial-gradient(circle at center, var(--qjcv-accent) 2px, transparent 2px);
    background-size: 20px 10px;
    background-position: center;
}

/* 响应式样式 */
@media (max-width: 992px) {
    .qjcv-logo-area {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qjcv-site-url {
        margin-top: 10px;
        align-self: flex-start;
    }
    
    .qjcv-menu-toggle {
        display: flex;
    }
    
    .qjcv-nav-list {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .qjcv-search-wrapper {
        margin: 15px 0;
    }
    
    .qjcv-nav-item {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .qjcv-submenu {
        padding: 10px 0;
    }
    
    .qjcv-submenu-group {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .qjcv-doodle-header {
        height: 60px;
    }
    
    .qjcv-site-name {
        font-size: 20px;
    }
    
    .qjcv-search-input {
        padding: 8px 12px;
    }
    
    .qjcv-search-btn {
        padding: 0 12px;
    }
    
    .qjcv-hot-search {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qjcv-hot-label {
        margin-bottom: 5px;
    }
    
    .qjcv-hot-list {
        width: 100%;
    }
}

/* 视频列表页样式 -  */

/* 视频列表容器 */
.qjcv-video-container {
    padding: 30px 0;
    background-color: var(--qjcv-light);
    position: relative;
}

.qjcv-video-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(var(--qjcv-secondary) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 25px 25px;
    opacity: 0.05;
    pointer-events: none;
}

/* 分类标题区域 */
.qjcv-category-header {
    margin-bottom: 25px;
    position: relative;
}

.qjcv-category-title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}

.qjcv-category-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--qjcv-dark);
    margin: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.qjcv-category-title:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

.qjcv-search-icon-title {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-color: var(--qjcv-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-category-doodle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 30px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-accent) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-accent) 25%, transparent 25%);
    background-size: 10px 10px;
    opacity: 0.6;
    border-radius: 15px;
}

.qjcv-search-doodle {
    background-image: 
        linear-gradient(45deg, var(--qjcv-primary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-primary) 25%, transparent 25%);
}

/* 子分类导航 */
.qjcv-subcategory-nav {
    margin-bottom: 15px;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

.qjcv-subcategory-nav:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: 
        linear-gradient(90deg, var(--qjcv-primary) 25%, var(--qjcv-secondary) 25%, var(--qjcv-secondary) 50%, 
                        var(--qjcv-accent) 50%, var(--qjcv-accent) 75%, var(--qjcv-primary) 75%);
    background-size: 20px 5px;
}

.qjcv-subcategory-scroll {
    display: flex;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qjcv-subcategory-scroll::-webkit-scrollbar {
    display: none;
}

.qjcv-subcategory-item {
    display: inline-block;
    padding: 5px 15px;
    margin-right: 10px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 2px dashed transparent;
}

.qjcv-subcategory-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-subcategory-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
    border-color: var(--qjcv-accent);
}

/* 筛选选项 */
.qjcv-filter-options {
    padding: 10px 15px;
    background-color: rgba(255,255,255,0.7);
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 20px;
    border: 2px dashed var(--qjcv-secondary);
}

.qjcv-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.qjcv-filter-label {
    font-weight: bold;
    color: var(--qjcv-dark);
    margin-right: 10px;
    font-size: 14px;
}

.qjcv-filter-item {
    display: inline-block;
    padding: 3px 12px;
    margin: 5px;
    border-radius: 15px;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #6ae29d;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.qjcv-filter-item:hover {
    background-color: var(--qjcv-accent);
    transform: scale(1.05);
}

.qjcv-filter-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
}

/* 视频列表网格 */
.qjcv-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* 视频卡片 */
.qjcv-video-card {
    position: relative;
    transition: all 0.3s ease;
}

.qjcv-video-card:hover {
    transform: translateY(-5px);
}

.qjcv-video-doodle-frame {
    position: relative;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    box-shadow: var(--qjcv-shadow);
    transition: all 0.3s ease;
}

.qjcv-video-card:hover .qjcv-video-doodle-frame {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.qjcv-video-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.qjcv-corner-tl {
    top: 0;
    left: 0;
    border-top: 3px solid var(--qjcv-primary);
    border-left: 3px solid var(--qjcv-primary);
    border-top-left-radius: var(--qjcv-border-radius);
}

.qjcv-corner-tr {
    top: 0;
    right: 0;
    border-top: 3px solid var(--qjcv-secondary);
    border-right: 3px solid var(--qjcv-secondary);
    border-top-right-radius: var(--qjcv-border-radius);
}

.qjcv-corner-bl {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid var(--qjcv-secondary);
    border-left: 3px solid var(--qjcv-secondary);
    border-bottom-left-radius: var(--qjcv-border-radius);
}

.qjcv-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid var(--qjcv-primary);
    border-right: 3px solid var(--qjcv-primary);
    border-bottom-right-radius: var(--qjcv-border-radius);
}

.qjcv-video-link {
    display: block;
    text-decoration: none;
    color: var(--qjcv-text);
}

.qjcv-video-thumb {
    position: relative;
    padding-top: 100%; /* 1:1 正方形比例 */
    overflow: hidden;
    border-radius: var(--qjcv-border-radius) var(--qjcv-border-radius) 0 0;
}

.qjcv-video-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.qjcv-video-card:hover .qjcv-video-thumb img {
    transform: scale(1.1);
}

.qjcv-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--qjcv-primary);
}

.qjcv-video-card:hover .qjcv-play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.qjcv-play-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--qjcv-primary);
    margin-left: 4px;
}

.qjcv-video-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 2;
}

.qjcv-video-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: var(--qjcv-primary);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 2;
}

.qjcv-video-info {
    padding: 12px;
}

.qjcv-video-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 2.8em;
}

.qjcv-video-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
}

.qjcv-video-category {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--qjcv-light);
    border-radius: 10px;
    color: var(--qjcv-secondary);
    font-weight: bold;
}

/* 空状态 */
.qjcv-empty-state {
    text-align: center;
    padding: 50px 20px;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin: 20px 0;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

.qjcv-empty-doodle {
    margin: 0 auto 20px;
    width: 100px;
    height: 100px;
    background-color: var(--qjcv-light);
    border-radius: 50%;
    position: relative;
}

.qjcv-empty-doodle:before {
    content: '';
    position: absolute;
    top: 30px;
    left: 25px;
    width: 50px;
    height: 5px;
    border-radius: 5px;
    background-color: var(--qjcv-primary);
}

.qjcv-empty-doodle:after {
    content: '';
    position: absolute;
    top: 50px;
    left: 35px;
    width: 30px;
    height: 30px;
    border-radius: 15px 15px 30px 30px;
    border: 5px solid var(--qjcv-primary);
    border-top: none;
}

.qjcv-empty-text {
    font-size: 20px;
    color: var(--qjcv-dark);
    margin-bottom: 10px;
}

.qjcv-empty-tips {
    font-size: 14px;
    color: #777;
}

.qjcv-back-home {
    color: var(--qjcv-primary);
    text-decoration: none;
    font-weight: bold;
}

.qjcv-back-home:hover {
    text-decoration: underline;
}

/* 分页样式 */
.qjcv-paging-container {
    margin: 30px 0;
}

.qjcv-paging-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.qjcv-paging-doodle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 20px;
    background-image: 
        radial-gradient(circle, var(--qjcv-accent) 3px, transparent 3px);
    background-size: 10px 10px;
    opacity: 0.5;
}

.qjcv-paging-doodle-left {
    left: 0;
}

.qjcv-paging-doodle-right {
    right: 0;
}

.qjcv-paging-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}

.qjcv-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    padding: 8px 12px;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid var(--qjcv-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.qjcv-page-btn:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-page-btn.qjcv-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.qjcv-page-numbers {
    display: flex;
    align-items: center;
    margin: 0 10px;
    flex-wrap: wrap;
}

.qjcv-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: #6ae29d;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid var(--qjcv-light);
}

.qjcv-page-num:hover {
    background-color: var(--qjcv-accent);
}

.qjcv-page-num.qjcv-page-current {
    background-color: var(--qjcv-primary);
    color: white;
    border-color: var(--qjcv-primary);
}

.qjcv-page-goto {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.qjcv-goto-input-wrap {
    position: relative;
    margin-right: 10px;
}

.qjcv-goto-input {
    width: 60px;
    height: 36px;
    padding: 5px 10px;
    border: none;
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    font-size: 14px;
    text-align: center;
}

.qjcv-goto-input:focus {
    outline: none;
}

.qjcv-goto-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--qjcv-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.qjcv-goto-input:focus ~ .qjcv-goto-line {
    transform: scaleX(1);
}

.qjcv-goto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 15px;
    background-color: var(--qjcv-primary);
    border: none;
    border-radius: var(--qjcv-border-radius);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qjcv-goto-btn:hover {
    background-color: var(--qjcv-secondary);
}

.qjcv-page-info {
    font-size: 14px;
    color: #777;
}

.qjcv-page-total,
.qjcv-page-current {
    color: var(--qjcv-primary);
    font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-video-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .qjcv-category-title {
        font-size: 20px;
    }
    
    .qjcv-filter-options {
        margin-top: 15px;
    }
    
    .qjcv-filter-item {
        margin: 0 5px 5px 0;
    }
    
    .qjcv-paging-doodle {
        display: none;
    }
    
    /* 确保视频封面在平板上也是1:1比例 */
    .qjcv-video-thumb {
        padding-top: 100%;
    }
}

@media (max-width: 576px) {
    .qjcv-video-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }
    
    .qjcv-video-card:hover {
        transform: none;
    }
    
    .qjcv-video-title {
        font-size: 14px;
    }
    
    .qjcv-video-meta {
        flex-direction: column;
    }
    
    .qjcv-video-category {
        margin-bottom: 5px;
    }
    
    .qjcv-page-btn {
        padding: 5px 8px;
        margin: 0 2px;
    }
    
    .qjcv-page-num {
        width: 30px;
        height: 30px;
        margin: 0 2px;
    }
}

/* 底部UI样式 -  */

/* 页脚主容器 */
.qjcv-footer {
    position: relative;
    margin-top: 50px;
    background-color: var(--qjcv-dark);
    color: white;
    overflow: hidden;
}

/* 顶部波浪装饰 */
.qjcv-footer-wave {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: 
        radial-gradient(circle at 30% 5px, var(--qjcv-primary) 20px, transparent 20px),
        radial-gradient(circle at 70% 5px, var(--qjcv-secondary) 20px, transparent 20px),
        radial-gradient(circle at 10% 5px, var(--qjcv-accent) 15px, transparent 15px),
        radial-gradient(circle at 50% 5px, var(--qjcv-accent) 15px, transparent 15px),
        radial-gradient(circle at 90% 5px, var(--qjcv-primary) 15px, transparent 15px);
    background-size: 200px 30px;
    background-repeat: repeat-x;
}

/* 主要内容区域 */
.qjcv-footer-content {
    position: relative;
    padding: 50px 0 30px;
    z-index: 1;
}

.qjcv-footer-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, var(--qjcv-accent) 1px, transparent 1px),
        radial-gradient(circle, var(--qjcv-primary) 1px, transparent 1px);
    background-size: 30px 30px, 20px 20px;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

/* 页脚网格布局 */
.qjcv-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* 网站信息区域 */
.qjcv-footer-about {
    padding-right: 20px;
}

.qjcv-site-logo {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.qjcv-site-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: white;
    text-shadow: 2px 2px 0 var(--qjcv-primary);
}

.qjcv-site-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}

.qjcv-site-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qjcv-stat-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

.qjcv-stat-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-color: var(--qjcv-secondary);
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-calendar {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.qjcv-icon-email {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* 页脚标题样式 */
.qjcv-footer-title {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    font-size: 18px;
    color: white;
    position: relative;
    padding-bottom: 10px;
}

.qjcv-footer-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

.qjcv-title-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-color: var(--qjcv-primary);
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-compass {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
}

.qjcv-icon-fire {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
}

.qjcv-icon-link {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}

/* 导航区域 */
.qjcv-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.qjcv-nav-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.qjcv-nav-item:hover {
    color: var(--qjcv-accent);
    transform: translateX(5px);
}

.qjcv-nav-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background-color: var(--qjcv-primary);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.qjcv-nav-item:hover .qjcv-nav-dot {
    background-color: var(--qjcv-accent);
    transform: scale(1.3);
}

/* 热门搜索标签 */
.qjcv-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qjcv-hot-tag {
    display: inline-block;
    padding: 5px 12px;
    font-size: 13px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 15px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px dashed rgba(255,255,255,0.2);
}

.qjcv-hot-tag:hover {
    background-color: var(--qjcv-primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    border-color: var(--qjcv-primary);
}

/* 友情链接区域 */
.qjcv-links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qjcv-link-item {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    background-color: rgba(255,255,255,0.05);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.qjcv-link-item:hover {
    background-color: var(--qjcv-secondary);
    color: white;
}

/* 免责声明区域 */
.qjcv-footer-disclaimer {
    padding: 20px;
    background-color: rgba(255,255,255,0.05);
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 30px;
    position: relative;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.qjcv-disclaimer-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    background-color: var(--qjcv-accent);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-disclaimer-content {
    flex: 1;
}

.qjcv-disclaimer-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--qjcv-accent);
}

.qjcv-disclaimer-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* 版权信息区域 */
.qjcv-footer-copyright {
    padding: 20px 0;
    background-color: rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.qjcv-copyright-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.qjcv-copyright-text {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}

.qjcv-footer-doodle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 20px;
    opacity: 0.3;
}

.qjcv-doodle-left {
    left: 0;
    background-image: 
        linear-gradient(45deg, var(--qjcv-primary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-primary) 25%, transparent 25%);
    background-size: 12px 12px;
}

.qjcv-doodle-right {
    right: 0;
    background-image: 
        linear-gradient(45deg, var(--qjcv-secondary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-secondary) 25%, transparent 25%);
    background-size: 12px 12px;
}

/* 回到顶部按钮 */
.qjcv-back-to-top {
    position: fixed;
    bottom: -60px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--qjcv-primary);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 999;
    transition: all 0.5s ease;
    opacity: 0;
}

.qjcv-back-to-top.qjcv-visible {
    bottom: 30px;
    opacity: 1;
}

.qjcv-rocket-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: #6ae29d;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2.5c0,0,4.5,2.04,4.5,10.5c0,2.49-1.04,5.57-1.6,7H9.1c-0.56-1.43-1.6-4.51-1.6-7C7.5,4.54,12,2.5,12,2.5z M14,11c0-1.1-0.9-2-2-2s-2,0.9-2,2s0.9,2,2,2S14,12.1,14,11z M7.69,20L7,22h10l-0.7-2H7.69z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2.5c0,0,4.5,2.04,4.5,10.5c0,2.49-1.04,5.57-1.6,7H9.1c-0.56-1.43-1.6-4.51-1.6-7C7.5,4.54,12,2.5,12,2.5z M14,11c0-1.1-0.9-2-2-2s-2,0.9-2,2s0.9,2,2,2S14,12.1,14,11z M7.69,20L7,22h10l-0.7-2H7.69z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
}

.qjcv-rocket-fire {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--qjcv-accent);
    border-radius: 50% 50% 0 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.qjcv-back-to-top:hover .qjcv-rocket-fire {
    height: 25px;
    opacity: 1;
    animation: flicker 0.5s infinite alternate;
}

@keyframes flicker {
    0% { opacity: 0.5; transform: translateX(-50%) scale(0.8); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* 统计代码区域 */
.qjcv-statistics {
    display: none;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-footer-wave {
        background-size: 150px 30px;
    }
    
    .qjcv-footer-grid {
        gap: 40px 20px;
    }
    
    .qjcv-nav-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    .qjcv-footer-content {
        padding: 40px 0 20px;
    }
    
    .qjcv-footer-disclaimer {
        flex-direction: column;
    }
    
    .qjcv-disclaimer-icon {
        margin-bottom: 15px;
    }
    
    .qjcv-footer-doodle {
        width: 50px;
    }
    
    .qjcv-back-to-top {
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 576px) {
    .qjcv-footer-grid {
        grid-template-columns: 1fr;
    }
    
    .qjcv-footer-wave {
        height: 20px;
        background-size: 100px 20px;
    }
}

/* 视频详情页样式 -  */

/* 详情页主容器 */
.qjcv-detail-container {
    padding: 30px 0 50px;
    background-color: var(--qjcv-light);
    position: relative;
}

.qjcv-detail-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(var(--qjcv-secondary) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 25px 25px;
    opacity: 0.05;
    pointer-events: none;
}

/* 面包屑导航 */
.qjcv-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 10px 15px;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    box-shadow: var(--qjcv-shadow);
    position: relative;
}

.qjcv-breadcrumb:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: 
        linear-gradient(90deg, var(--qjcv-primary) 25%, var(--qjcv-secondary) 25%, var(--qjcv-secondary) 50%, 
                        var(--qjcv-accent) 50%, var(--qjcv-accent) 75%, var(--qjcv-primary) 75%);
    background-size: 20px 5px;
    border-radius: var(--qjcv-border-radius) var(--qjcv-border-radius) 0 0;
}

.qjcv-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.qjcv-breadcrumb-item:hover {
    color: var(--qjcv-primary);
}

.qjcv-breadcrumb-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: currentColor;
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-breadcrumb-separator {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    position: relative;
}

.qjcv-breadcrumb-separator:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--qjcv-secondary);
    border-right: 2px solid var(--qjcv-secondary);
    transform: translate(-50%, -50%) rotate(45deg);
}

.qjcv-breadcrumb-current {
    color: var(--qjcv-primary);
    font-weight: bold;
}

/* 详情卡片 */
.qjcv-detail-card {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

.qjcv-detail-doodle-top {
    height: 15px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-primary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-primary) 25%, transparent 25%);
    background-size: 15px 15px;
    opacity: 0.6;
}

.qjcv-detail-doodle-bottom {
    height: 15px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-secondary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-secondary) 25%, transparent 25%);
    background-size: 15px 15px;
    opacity: 0.6;
}

.qjcv-detail-main {
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
}

/* 封面区域 */
.qjcv-detail-cover {
    width: 300px;
    margin-right: 30px;
    position: relative;
}

.qjcv-cover-frame {
    position: relative;
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    box-shadow: var(--qjcv-shadow);
    padding: 5px;
    background-color: #6ae29d;
    border: 2px dashed var(--qjcv-primary);
    /* 添加1:1比例约束 */
    width: 100%;
    height: 0;
    padding-top: 100%;
}

.qjcv-cover-frame img {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: block;
    border-radius: calc(var(--qjcv-border-radius) - 5px);
    object-fit: cover;
}

.qjcv-cover-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
}

.qjcv-detail-badges {
    position: absolute;
    top: 20px;
    left: -5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qjcv-badge {
    display: inline-block;
    padding: 5px 12px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 0 15px 15px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    position: relative;
}

.qjcv-badge:before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 0 5px 0 0;
    z-index: -1;
}

.qjcv-badge-type {
    background-color: var(--qjcv-primary);
}

.qjcv-badge-status {
    background-color: var(--qjcv-secondary);
}

.qjcv-play-now {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--qjcv-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(255,107,107,0.5);
    transition: all 0.3s ease;
    z-index: 2;
}

.qjcv-play-now:hover {
    transform: translateX(-50%) scale(1.05);
    background-color: var(--qjcv-secondary);
    box-shadow: 0 6px 15px rgba(78,205,196,0.5);
}

.qjcv-play-now-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent white;
    margin-right: 10px;
}

/* 详情信息区域 */
.qjcv-detail-info {
    flex: 1;
    min-width: 300px;
}

.qjcv-detail-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: var(--qjcv-dark);
    position: relative;
    display: inline-block;
}

.qjcv-detail-title:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

/* 数据指标 */
.qjcv-detail-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.qjcv-metric-item {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    font-size: 14px;
}

.qjcv-metric-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background-color: var(--qjcv-primary);
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-eye {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.qjcv-icon-star {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.qjcv-metric-value {
    font-weight: bold;
    color: var(--qjcv-dark);
}

/* 详细属性 */
.qjcv-detail-attrs {
    margin-bottom: 25px;
}

.qjcv-attr-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.qjcv-attr-label {
    font-weight: bold;
    color: var(--qjcv-dark);
    margin-right: 10px;
    flex-shrink: 0;
    width: 60px;
}

.qjcv-attr-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qjcv-attr-link {
    display: inline-block;
    padding: 3px 10px;
    background-color: var(--qjcv-light);
    border-radius: 15px;
    color: var(--qjcv-text);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px dashed transparent;
}

.qjcv-attr-link:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
    border-color: var(--qjcv-secondary);
}

/* 简介区域 */
.qjcv-detail-desc {
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
}

.qjcv-desc-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.qjcv-desc-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-color: var(--qjcv-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m1.1-2H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM11 7h6v2h-6V7zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2zM7 7h2v2H7V7zm0 4h2v2H7v-2zm0 4h2v2H7v-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m1.1-2H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM11 7h6v2h-6V7zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2zM7 7h2v2H7V7zm0 4h2v2H7v-2zm0 4h2v2H7v-2z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-desc-title {
    font-weight: bold;
    color: var(--qjcv-dark);
    font-size: 16px;
}

.qjcv-desc-content {
    position: relative;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.qjcv-desc-content.qjcv-collapsed {
    max-height: 100px;
}

.qjcv-desc-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 0), var(--qjcv-light) 90%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.qjcv-desc-content.qjcv-collapsed .qjcv-desc-mask {
    opacity: 1;
}

.qjcv-desc-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--qjcv-text);
}

.qjcv-desc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 15px;
    background-color: #6ae29d;
    border: 2px dashed var(--qjcv-secondary);
    color: var(--qjcv-secondary);
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    align-self: center;
    position: relative;
    z-index: 2;
}

.qjcv-desc-toggle:hover {
    background-color: var(--qjcv-secondary);
    color: white;
}

.qjcv-toggle-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.qjcv-desc-content:not(.qjcv-collapsed) + .qjcv-desc-toggle .qjcv-toggle-icon {
    transform: rotate(-135deg);
}

/* 选集区域 */
.qjcv-episodes-section {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.qjcv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.qjcv-section-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--qjcv-dark);
}

.qjcv-section-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-color: var(--qjcv-primary);
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-video {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E");
}

.qjcv-icon-recommend {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.qjcv-section-doodle {
    width: 100px;
    height: 15px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-accent) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-accent) 25%, transparent 25%);
    background-size: 10px 10px;
    opacity: 0.5;
}

/* 播放源切换 */
.qjcv-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px dashed var(--qjcv-secondary);
    padding-bottom: 15px;
}

.qjcv-tab-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-text);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.qjcv-tab-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-tab-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
}

.qjcv-tab-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

/* 剧集列表 */
.qjcv-episodes-wrap {
    position: relative;
}

.qjcv-episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 10px;
    max-height: 240px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.qjcv-episodes-grid.qjcv-show-all {
    max-height: 2000px;
}

.qjcv-episode-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.qjcv-episode-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.qjcv-episode-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
    border-color: var(--qjcv-dark);
}

.qjcv-episodes-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 20px;
    background-color: #6ae29d;
    border: 2px dashed var(--qjcv-secondary);
    color: var(--qjcv-secondary);
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    align-self: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.qjcv-episodes-more:hover {
    background-color: var(--qjcv-secondary);
    color: white;
}

.qjcv-more-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.qjcv-episodes-more.qjcv-expanded .qjcv-more-icon {
    transform: rotate(-135deg);
}

/* 推荐区域 */
.qjcv-related-section {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-detail-main {
        flex-direction: column;
    }
    
    .qjcv-detail-cover {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .qjcv-source-tabs {
        overflow-x: auto;
        white-space: nowrap;
        display: block;
        padding-bottom: 15px;
    }
    
    .qjcv-tab-item {
        display: inline-flex;
        margin-right: 10px;
    }
    
    .qjcv-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    }
}

@media (max-width: 576px) {
    .qjcv-detail-card {
        margin-bottom: 20px;
    }
    
    .qjcv-detail-main {
        padding: 15px;
    }
    
    .qjcv-detail-title {
        font-size: 22px;
    }
    
    .qjcv-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: 8px;
    }
    
    .qjcv-episode-item {
        height: 32px;
        font-size: 12px;
    }
}

/* 视频播放页样式 -  */

/* 播放页主容器 */
.qjcv-player-container {
    padding: 30px 0 50px;
    background-color: var(--qjcv-light);
    position: relative;
}

.qjcv-player-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(var(--qjcv-secondary) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 25px 25px;
    opacity: 0.05;
    pointer-events: none;
}

/* 播放器标题 */
.qjcv-player-title-wrap {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 20px;
    box-shadow: var(--qjcv-shadow);
    padding: 15px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.qjcv-player-title-wrap:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: 
        linear-gradient(45deg, var(--qjcv-primary) 25%, transparent 25%),
        linear-gradient(-45deg, var(--qjcv-primary) 25%, transparent 25%);
    background-size: 10px 10px;
    border-radius: var(--qjcv-border-radius) var(--qjcv-border-radius) 0 0;
}

.qjcv-player-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.qjcv-title-text {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    color: var(--qjcv-dark);
}

.qjcv-title-badge {
    display: inline-block;
    padding: 3px 10px;
    background-color: var(--qjcv-primary);
    color: white;
    font-size: 14px;
    border-radius: 15px;
    margin-left: 10px;
}

.qjcv-player-source {
    color: #666;
    font-size: 14px;
    background-color: var(--qjcv-light);
    padding: 5px 12px;
    border-radius: 15px;
    border: 2px dashed var(--qjcv-secondary);
}

/* 播放器区域 */
.qjcv-player-wrapper {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 20px;
    box-shadow: var(--qjcv-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.qjcv-player-doodle {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 1;
}

.qjcv-doodle-tl {
    top: 0;
    left: 0;
    border-top: 5px solid var(--qjcv-primary);
    border-left: 5px solid var(--qjcv-primary);
    border-top-left-radius: var(--qjcv-border-radius);
    animation: pulse 2s infinite alternate;
}

.qjcv-doodle-tr {
    top: 0;
    right: 0;
    border-top: 5px solid var(--qjcv-secondary);
    border-right: 5px solid var(--qjcv-secondary);
    border-top-right-radius: var(--qjcv-border-radius);
    animation: pulse 3s infinite alternate;
}

.qjcv-doodle-bl {
    bottom: 0;
    left: 0;
    border-bottom: 5px solid var(--qjcv-secondary);
    border-left: 5px solid var(--qjcv-secondary);
    border-bottom-left-radius: var(--qjcv-border-radius);
    animation: pulse 2.5s infinite alternate;
}

.qjcv-doodle-br {
    bottom: 0;
    right: 0;
    border-bottom: 5px solid var(--qjcv-primary);
    border-right: 5px solid var(--qjcv-primary);
    border-bottom-right-radius: var(--qjcv-border-radius);
    animation: pulse 3.5s infinite alternate;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}

.qjcv-player-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    background-color: #000;
    border-radius: calc(var(--qjcv-border-radius) - 10px);
    overflow: hidden;
}

.qjcv-player-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 播放器控制区 */
.qjcv-player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 15px;
}

.qjcv-control-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-dark);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid transparent;
}

.qjcv-control-btn:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-btn-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background-color: var(--qjcv-primary);
    mask-size: cover;
    -webkit-mask-size: cover;
    transition: background-color 0.3s ease;
}

.qjcv-btn-info:hover .qjcv-btn-icon {
    background-color: var(--qjcv-dark);
}

.qjcv-icon-info {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'/%3E%3C/svg%3E");
}

.qjcv-icon-share {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}

.qjcv-icon-report {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z'/%3E%3C/svg%3E");
}

.qjcv-icon-collect {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z'/%3E%3C/svg%3E");
}

.qjcv-btn-icon.qjcv-active {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    background-color: var(--qjcv-secondary);
}

/* 信息卡片 */
.qjcv-play-info-card {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    overflow: hidden;
    position: relative;
}

.qjcv-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: var(--qjcv-primary);
    color: white;
}

.qjcv-info-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.qjcv-info-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-color: #6ae29d;
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-movie {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
}

.qjcv-info-collapse {
    cursor: pointer;
    padding: 5px;
}

.qjcv-collapse-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
}

.qjcv-collapse-icon:before,
.qjcv-collapse-icon:after {
    content: '';
    position: absolute;
    background-color: #6ae29d;
    transition: transform 0.3s ease;
}

.qjcv-collapse-icon:before {
    top: 50%;
    left: 0;
    width: 14px;
    height: 2px;
    transform: translateY(-50%);
}

.qjcv-collapse-icon:after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 14px;
    transform: translateX(-50%);
}

.qjcv-info-collapse.qjcv-collapsed .qjcv-collapse-icon:after {
    transform: translateX(-50%) rotate(90deg);
}

.qjcv-info-content {
    padding: 20px;
    transition: max-height 0.5s ease, padding 0.5s ease;
    max-height: 1000px;
    overflow: hidden;
}

.qjcv-info-content.qjcv-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* 基本信息区域 */
.qjcv-info-basics {
    display: block;
    margin-bottom: 20px;
}

.qjcv-info-poster {
    width: 120px;
    height: 170px;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    box-shadow: var(--qjcv-shadow);
    position: relative;
}

.qjcv-info-poster:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 2px var(--qjcv-primary);
    border-radius: var(--qjcv-border-radius);
    pointer-events: none;
    z-index: 1;
}

.qjcv-info-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qjcv-info-details {
    flex: 1;
}

.qjcv-info-name {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 15px 0;
    color: var(--qjcv-dark);
}

.qjcv-info-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.qjcv-info-meta {
    font-size: 14px;
}

.qjcv-meta-item {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
}

.qjcv-meta-label {
    font-weight: bold;
    color: var(--qjcv-dark);
    margin-right: 8px;
}

.qjcv-meta-values {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.qjcv-meta-link {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--qjcv-light);
    border-radius: 12px;
    color: var(--qjcv-text);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.qjcv-meta-link:hover {
    background-color: var(--qjcv-accent);
    color: var(--qjcv-dark);
}

/* 简介区域 */
.qjcv-info-desc {
    position: relative;
}

.qjcv-desc-text {
    font-size: 14px;
    line-height: 1.6;
    max-height: 80px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.qjcv-desc-text.qjcv-expanded {
    max-height: 1000px;
}

.qjcv-desc-more {
    display: inline-block;
    margin-top: 10px;
    color: var(--qjcv-primary);
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    padding-right: 15px;
}

.qjcv-desc-more:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.3s ease;
}

.qjcv-desc-text.qjcv-expanded + .qjcv-desc-more:after {
    transform: translateY(-25%) rotate(-135deg);
}

.qjcv-desc-more:hover {
    color: var(--qjcv-secondary);
    text-decoration: underline;
}

/* 提示消息 */
.qjcv-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--qjcv-dark);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.qjcv-toast.qjcv-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-player-title-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qjcv-player-source {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .qjcv-info-basics {
        flex-direction: column;
    }
    
    .qjcv-info-poster {
        margin: 0 auto 20px;
    }
    
    .qjcv-player-controls {
        gap: 10px;
    }
    
    .qjcv-control-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .qjcv-player-wrapper {
        padding: 10px;
    }
    
    .qjcv-player-doodle {
        width: 30px;
        height: 30px;
    }
    
    .qjcv-info-header {
        padding: 10px 15px;
    }
    
    .qjcv-info-title {
        font-size: 16px;
    }
}

/* 首页样式 */

/* 首页主容器 */
.qjcv-home-container {
    padding: 30px 0 50px;
    background-color: var(--qjcv-light);
    position: relative;
}

.qjcv-home-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(var(--qjcv-secondary) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 25px 25px;
    opacity: 0.05;
    pointer-events: none;
}

/* 英雄区域 - 轮播图和推荐卡片 */
.qjcv-hero-section {
    display: flex;
    margin-bottom: 30px;
    gap: 20px;
}

/* 轮播图容器 */
.qjcv-carousel-container {
    flex: 2;
    position: relative;
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    box-shadow: var(--qjcv-shadow);
}

.qjcv-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: var(--qjcv-dark);
}

.qjcv-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
}

.qjcv-carousel-slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.qjcv-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
}

.qjcv-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.qjcv-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.qjcv-slide-link:hover .qjcv-slide-image img {
    transform: scale(1.05);
}

.qjcv-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.qjcv-slide-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.qjcv-slide-meta {
    display: flex;
    gap: 10px;
}

.qjcv-slide-badge {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--qjcv-primary);
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
}

.qjcv-badge-accent {
    background-color: var(--qjcv-accent);
    color: var(--qjcv-dark);
}

/* 轮播导航点 */
.qjcv-carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.qjcv-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.qjcv-dot.qjcv-active {
    background-color: var(--qjcv-primary);
    transform: scale(1.2);
}

/* 轮播箭头 */
.qjcv-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.qjcv-carousel-arrow:hover {
    background-color: var(--qjcv-primary);
    opacity: 1;
}

.qjcv-arrow-prev {
    left: 15px;
}

.qjcv-arrow-next {
    right: 15px;
}

.qjcv-arrow-icon {
    width: 12px;
    height: 12px;
    border-top: 3px solid white;
    border-right: 3px solid white;
}

.qjcv-arrow-prev .qjcv-arrow-icon {
    transform: rotate(-135deg);
    margin-left: 5px;
}

.qjcv-arrow-next .qjcv-arrow-icon {
    transform: rotate(45deg);
    margin-right: 5px;
}

/* 右侧推荐卡片 */
.qjcv-featured-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qjcv-featured-card {
    flex: 1;
    position: relative;
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    box-shadow: var(--qjcv-shadow);
    transition: transform 0.3s ease;
    background-color: #6ae29d;
    border: 3px solid var(--qjcv-light);
}

.qjcv-featured-card:hover {
    transform: translateY(-5px);
    border-color: var(--qjcv-primary);
}

.qjcv-featured-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--qjcv-text);
}

.qjcv-featured-image {
    width: 100%;
    height: 120px;
}

.qjcv-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qjcv-featured-content {
    padding: 15px;
    position: relative;
}

.qjcv-featured-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.qjcv-featured-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.qjcv-featured-badge {
    position: absolute;
    top: 0;
    right: 15px;
    transform: translateY(-50%);
    background-color: var(--qjcv-accent);
    color: var(--qjcv-dark);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 快捷分类导航 */
.qjcv-quick-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.qjcv-quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 15px 10px;
    text-decoration: none;
    color: var(--qjcv-text);
    transition: all 0.3s ease;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

.qjcv-quick-nav-item:hover {
    transform: translateY(-5px);
    color: var(--qjcv-primary);
}

.qjcv-quick-nav-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--qjcv-primary);
    opacity: 0.6;
    transition: height 0.3s ease;
}

.qjcv-quick-nav-item:hover:before {
    height: 100%;
    opacity: 0.1;
}

.qjcv-quick-nav-icon {
    width: 40px;
    height: 40px;
    background-color: var(--qjcv-primary);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.qjcv-quick-nav-item:hover .qjcv-quick-nav-icon {
    transform: scale(1.1);
}

.qjcv-icon-cat-1 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E");
}

.qjcv-icon-cat-2 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
}

.qjcv-icon-cat-3 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2.5-3.5l7-4.5-7-4.5v9z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2.5-3.5l7-4.5-7-4.5v9z'/%3E%3C/svg%3E");
}

.qjcv-icon-cat-4 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3C/svg%3E");
}

.qjcv-quick-nav-text {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* 内容区域 */
.qjcv-home-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

/* 主要内容 */
.qjcv-home-main {
    grid-column: 1;
}

/* 分类视频列表 */
.qjcv-category-section {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

/* 分类标题 */
.qjcv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.qjcv-section-title {
    display: flex;
    align-items: center;
}

.qjcv-title-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-color: var(--qjcv-primary);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.qjcv-title-text {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: var(--qjcv-dark);
    position: relative;
    padding-bottom: 5px;
}

.qjcv-title-text:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

.qjcv-section-more {
    display: flex;
    align-items: center;
}

.qjcv-more-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.qjcv-more-link:hover {
    background-color: var(--qjcv-secondary);
    color: white;
}

.qjcv-more-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.qjcv-more-link:hover .qjcv-more-icon {
    transform: rotate(45deg) translateX(2px);
}

/* 子分类导航 */
.qjcv-subcat-nav {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed var(--qjcv-light);
}

.qjcv-subcat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qjcv-subcat-item {
    display: inline-block;
    padding: 5px 15px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.qjcv-subcat-item:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-subcat-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
}

/* 分类间装饰元素 */
.qjcv-section-divider {
    height: 30px;
    position: relative;
    margin-bottom: 30px;
}

.qjcv-divider-doodle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 5px;
    background-image: 
        linear-gradient(90deg, var(--qjcv-primary) 25%, var(--qjcv-secondary) 25%, var(--qjcv-secondary) 50%, 
                        var(--qjcv-accent) 50%, var(--qjcv-accent) 75%, var(--qjcv-primary) 75%);
    background-size: 40px 5px;
    border-radius: 5px;
}

/* 最新更新区域 */
.qjcv-latest-section {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
}

.qjcv-icon-latest {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.04 4.55l-1.42 1.42C16.07 4.74 14.12 4 12 4c-1.83 0-3.53.55-4.95 1.48l1.46 1.46C9.53 6.35 10.73 6 12 6c3.87 0 7 3.13 7 7 0 1.27-.35 2.47-.94 3.49l1.45 1.45C20.45 16.53 21 14.83 21 13c0-2.12-.74-4.07-1.97-5.61l1.42-1.42-1.41-1.42zM15 1H9v2h6V1zm-4 8.44l2 2V8h-2v1.44zM3.02 4L1.75 5.27 4.5 8.03C3.55 9.45 3 11.16 3 13c0 4.97 4.02 9 9 9 1.84 0 3.55-.55 4.98-1.5l2.5 2.5 1.27-1.27-7.71-7.71L3.02 4zM12 20c-3.87 0-7-3.13-7-7 0-1.28.35-2.48.95-3.52l9.56 9.56c-1.03.61-2.23.96-3.51.96z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.04 4.55l-1.42 1.42C16.07 4.74 14.12 4 12 4c-1.83 0-3.53.55-4.95 1.48l1.46 1.46C9.53 6.35 10.73 6 12 6c3.87 0 7 3.13 7 7 0 1.27-.35 2.47-.94 3.49l1.45 1.45C20.45 16.53 21 14.83 21 13c0-2.12-.74-4.07-1.97-5.61l1.42-1.42-1.41-1.42zM15 1H9v2h6V1zm-4 8.44l2 2V8h-2v1.44zM3.02 4L1.75 5.27 4.5 8.03C3.55 9.45 3 11.16 3 13c0 4.97 4.02 9 9 9 1.84 0 3.55-.55 4.98-1.5l2.5 2.5 1.27-1.27-7.71-7.71L3.02 4zM12 20c-3.87 0-7-3.13-7-7 0-1.28.35-2.48.95-3.52l9.56 9.56c-1.03.61-2.23.96-3.51.96z'/%3E%3C/svg%3E");
}

.qjcv-latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.qjcv-latest-item {
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
}

.qjcv-latest-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.qjcv-latest-item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed transparent;
    border-radius: var(--qjcv-border-radius);
    top: 0;
    left: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
}

.qjcv-latest-item:hover:before {
    border-color: var(--qjcv-primary);
}

.qjcv-latest-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--qjcv-text);
}

.qjcv-latest-image {
    width: 100%;
    position: relative;
    padding-top: 100%; /* 1:1 正方形比例 */
    overflow: hidden;
}

.qjcv-latest-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qjcv-latest-info {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.qjcv-latest-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
}

.qjcv-latest-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.qjcv-latest-type {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--qjcv-primary);
    color: white;
    border-radius: 10px;
    font-size: 12px;
}

/* 侧边栏 */
.qjcv-home-sidebar {
    grid-column: 2;
}

/* 排行榜部件 */
.qjcv-ranking-widget {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
}

.qjcv-widget-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.qjcv-widget-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--qjcv-dark);
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.qjcv-widget-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

.qjcv-widget-tabs {
    display: flex;
    border-bottom: 2px dashed var(--qjcv-light);
    padding-bottom: 10px;
}

.qjcv-tab-item {
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 15px;
    background-color: var(--qjcv-light);
    color: var(--qjcv-text);
    transition: all 0.3s ease;
    margin-right: 10px;
}

.qjcv-tab-item:hover {
    background-color: var(--qjcv-accent);
}

.qjcv-tab-item.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
}

/* 排行列表 */
.qjcv-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qjcv-ranking-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--qjcv-border-radius);
    background-color: var(--qjcv-light);
    transition: all 0.3s ease;
}

.qjcv-ranking-item:hover {
    background-color: rgba(var(--qjcv-primary-rgb), 0.1);
    transform: translateX(5px);
}

.qjcv-rank-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    background-color: #999;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 12px;
}

.qjcv-rank-1 {
    background-color: #FF6B6B;
}

.qjcv-rank-2 {
    background-color: #4ECDC4;
}

.qjcv-rank-3 {
    background-color: #FFE66D;
    color: var(--qjcv-dark);
}

.qjcv-rank-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--qjcv-text);
    flex: 1;
}

.qjcv-rank-image {
    width: 40px;
    height: 50px;
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.qjcv-rank-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qjcv-rank-info {
    flex: 1;
}

.qjcv-rank-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.qjcv-rank-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.qjcv-rank-type {
    display: inline-block;
    padding: 1px 6px;
    background-color: var(--qjcv-secondary);
    color: white;
    border-radius: 10px;
    font-size: 10px;
}

.qjcv-rank-hits {
    font-size: 10px;
}

/* 标签云部件 */
.qjcv-tags-widget {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: var(--qjcv-shadow);
}

.qjcv-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qjcv-tag-item {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--qjcv-light);
    border-radius: 15px;
    color: var(--qjcv-text);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.qjcv-tag-item:hover {
    background-color: var(--qjcv-primary);
    color: white;
    transform: translateY(-3px);
}

/* 网站公告部件 */
.qjcv-notice-widget {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    box-shadow: var(--qjcv-shadow);
    position: relative;
    overflow: hidden;
}

.qjcv-notice-content {
    display: flex;
}

.qjcv-notice-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background-color: var(--qjcv-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72A6.873 6.873 0 0 0 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72A6.873 6.873 0 0 0 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-right: 15px;
}

.qjcv-notice-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--qjcv-text);
}

.qjcv-notice-text p {
    margin: 0 0 8px 0;
}

.qjcv-notice-text p:last-child {
    margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-hero-section {
        flex-direction: column;
    }
    
    .qjcv-carousel-wrapper {
        height: 300px;
    }
    
    .qjcv-featured-cards {
        flex-direction: row;
        margin-top: 20px;
    }
    
    .qjcv-home-content {
        grid-template-columns: 1fr;
    }
    
    .qjcv-home-sidebar {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .qjcv-featured-cards {
        flex-direction: column;
    }
    
    .qjcv-quick-nav {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .qjcv-latest-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 576px) {
    .qjcv-carousel-wrapper {
        height: 200px;
    }
    
    .qjcv-slide-title {
        font-size: 18px;
    }
    
    .qjcv-quick-nav-item {
        padding: 10px 5px;
    }
    
    .qjcv-quick-nav-icon {
        width: 30px;
        height: 30px;
    }
    
    .qjcv-quick-nav-text {
        font-size: 14px;
    }
    
    .qjcv-latest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* 确保小屏幕设备上图片比例保持1:1 */
    .qjcv-latest-image {
        padding-top: 100%;
    }
}

/* 搜索页样式 */

/* 搜索页主容器 */
.qjcv-search-page-container {
    padding: 30px 0 50px;
    background-color: var(--qjcv-light);
    position: relative;
}

.qjcv-search-page-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--qjcv-primary) 1px, transparent 1px),
        radial-gradient(var(--qjcv-secondary) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 25px 25px;
    opacity: 0.05;
    pointer-events: none;
}

/* 搜索结果头部区域 */
.qjcv-search-header {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    box-shadow: var(--qjcv-shadow);
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* 搜索关键词展示 */
.qjcv-search-keyword-area {
    display: flex;
    align-items: center;
    flex: 1;
}

.qjcv-search-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: var(--qjcv-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    border: 3px dashed var(--qjcv-primary);
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.qjcv-search-big-icon {
    width: 36px;
    height: 36px;
    background-color: var(--qjcv-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    animation: pulse 2s infinite alternate;
}

.qjcv-search-keyword-text {
    flex: 1;
}

.qjcv-search-for-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.qjcv-search-keyword {
    font-size: 24px;
    font-weight: bold;
    color: var(--qjcv-primary);
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.qjcv-search-keyword:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--qjcv-primary);
    border-radius: 3px;
}

.qjcv-search-stats {
    font-size: 14px;
    color: #666;
    padding: 5px 15px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    margin-left: 20px;
}

.qjcv-search-count {
    font-weight: bold;
    color: var(--qjcv-secondary);
    font-size: 16px;
}

/* 搜索装饰元素 */
.qjcv-search-doodles {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    overflow: hidden;
}

.qjcv-doodle {
    position: absolute;
    opacity: 0.3;
}

.qjcv-doodle-1 {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-color: var(--qjcv-primary);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: rotate(20deg);
    animation: float 3s ease-in-out infinite alternate;
}

.qjcv-doodle-2 {
    bottom: 15px;
    right: 40px;
    width: 30px;
    height: 30px;
    background-color: var(--qjcv-secondary);
    border-radius: 50%;
    animation: float 4s ease-in-out infinite alternate;
}

.qjcv-doodle-3 {
    top: 50%;
    right: 30px;
    width: 20px;
    height: 20px;
    background-color: var(--qjcv-accent);
    transform: rotate(45deg);
    animation: float 5s ease-in-out infinite alternate;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0); }
    100% { transform: translateY(-10px) rotate(10deg); }
}

/* 搜索筛选选项 */
.qjcv-search-filters {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    box-shadow: var(--qjcv-shadow);
    padding: 15px 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.qjcv-search-filters:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: 
        linear-gradient(90deg, var(--qjcv-primary) 25%, var(--qjcv-secondary) 25%, var(--qjcv-secondary) 50%, 
                        var(--qjcv-accent) 50%, var(--qjcv-accent) 75%, var(--qjcv-primary) 75%);
    background-size: 20px 5px;
}

.qjcv-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.qjcv-filter-sort {
    display: flex;
    align-items: center;
}

.qjcv-filter-label {
    font-weight: bold;
    color: var(--qjcv-dark);
    margin-right: 10px;
}

.qjcv-filter-options {
    display: flex;
    gap: 10px;
}

.qjcv-filter-option {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-text);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.qjcv-filter-option:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-2px);
}

.qjcv-filter-option.qjcv-active {
    background-color: var(--qjcv-primary);
    color: white;
    border-color: var(--qjcv-accent);
}

.qjcv-filter-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: currentColor;
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-time {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.qjcv-icon-hot {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");
}

.qjcv-icon-star {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

/* 搜索结果内容区域 */
.qjcv-search-results {
    margin-bottom: 30px;
}

/* 搜索结果网格 */
.qjcv-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

/* 搜索项目 */
.qjcv-search-item {
    position: relative;
    transition: all 0.3s ease;
}

.qjcv-search-item:hover {
    transform: translateY(-8px);
}

.qjcv-search-item-doodle {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: var(--qjcv-accent);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.qjcv-search-item:hover .qjcv-search-item-doodle {
    opacity: 0.7;
    animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

/* 搜索页空状态 */
.qjcv-search-empty-state {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    box-shadow: var(--qjcv-shadow);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qjcv-empty-character {
    width: 120px;
    height: 120px;
    background-color: var(--qjcv-light);
    border-radius: 50%;
    position: relative;
    margin-bottom: 20px;
    border: 3px dashed var(--qjcv-primary);
}

.qjcv-empty-face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.qjcv-empty-eyes {
    position: absolute;
    width: 60%;
    height: 20px;
    top: 40px;
    left: 20%;
}

.qjcv-empty-eyes:before,
.qjcv-empty-eyes:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--qjcv-primary);
    top: 0;
}

.qjcv-empty-eyes:before {
    left: 10px;
}

.qjcv-empty-eyes:after {
    right: 10px;
}

.qjcv-empty-mouth {
    position: absolute;
    width: 70px;
    height: 30px;
    border-radius: 0 0 100px 100px;
    border: 3px solid var(--qjcv-primary);
    border-top: none;
    bottom: 30px;
    left: calc(50% - 35px);
}

.qjcv-empty-content {
    max-width: 500px;
    margin: 0 auto;
}

.qjcv-empty-title {
    font-size: 24px;
    color: var(--qjcv-primary);
    margin: 0 0 10px 0;
}

.qjcv-empty-desc {
    font-size: 16px;
    color: #666;
    margin: 0 0 20px 0;
}

.qjcv-empty-suggestions {
    background-color: var(--qjcv-light);
    border-radius: var(--qjcv-border-radius);
    padding: 15px;
    margin-top: 20px;
}

.qjcv-suggestion-title {
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--qjcv-dark);
}

.qjcv-suggestion-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.qjcv-suggestion-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background-color: #6ae29d;
    border-radius: 20px;
    text-decoration: none;
    color: var(--qjcv-dark);
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.qjcv-suggestion-link:hover {
    background-color: var(--qjcv-accent);
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.qjcv-suggestion-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-color: var(--qjcv-primary);
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-icon-back {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}

.qjcv-icon-retry {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 9h7V2l-2.35 2.35z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 9h7V2l-2.35 2.35z'/%3E%3C/svg%3E");
}

.qjcv-empty-doodles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.qjcv-empty-doodle {
    position: absolute;
    opacity: 0.3;
}

.qjcv-empty-doodle-1 {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border: 3px solid var(--qjcv-primary);
    border-radius: 50%;
    transform: rotate(20deg);
}

.qjcv-empty-doodle-2 {
    bottom: 30px;
    right: 40px;
    width: 30px;
    height: 30px;
    background-color: var(--qjcv-secondary);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.qjcv-empty-doodle-3 {
    top: 40px;
    right: 60px;
    width: 25px;
    height: 25px;
    background-color: var(--qjcv-accent);
    border-radius: 5px;
    transform: rotate(45deg);
}

/* 相关推荐区域 */
.qjcv-related-searches {
    background-color: #6ae29d;
    border-radius: var(--qjcv-border-radius);
    box-shadow: var(--qjcv-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.qjcv-related-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.qjcv-related-icon {
    width: 24px;
    height: 24px;
    background-color: var(--qjcv-primary);
    margin-right: 10px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
}

.qjcv-related-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: var(--qjcv-dark);
}

.qjcv-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.qjcv-related-link {
    text-decoration: none;
}

.qjcv-related-bubble {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--qjcv-light);
    border-radius: 20px;
    color: var(--qjcv-text);
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
}

.qjcv-related-bubble:before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10px;
    width: 10px;
    height: 10px;
    background-color: var(--qjcv-light);
    transform: rotate(45deg);
    z-index: -1;
    transition: all 0.3s ease;
}

.qjcv-related-link:hover .qjcv-related-bubble {
    background-color: var(--qjcv-accent);
    transform: translateY(-5px);
}

.qjcv-related-link:hover .qjcv-related-bubble:before {
    background-color: var(--qjcv-accent);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .qjcv-search-keyword-area {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qjcv-search-icon-wrapper {
        margin-bottom: 15px;
    }
    
    .qjcv-search-stats {
        margin-left: 0;
        margin-top: 10px;
    }
    
    .qjcv-search-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .qjcv-search-header {
        flex-direction: column;
    }
    
    .qjcv-search-doodles {
        display: none;
    }
    
    .qjcv-filter-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .qjcv-filter-sort {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .qjcv-filter-label {
        margin-bottom: 5px;
    }
    
    .qjcv-search-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .qjcv-search-keyword {
        font-size: 18px;
    }
    
    .qjcv-search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .qjcv-empty-character {
        width: 80px;
        height: 80px;
    }
    
    .qjcv-empty-title {
        font-size: 20px;
    }
    
    .qjcv-suggestion-list {
        flex-direction: column;
        gap: 10px;
    }
}

/* 添加懒加载背景图片样式 */
.lazy-load {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.3s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  border-radius: inherit;
}

.lazy-load.loaded {
  opacity: 1;
}

.qjcv-video-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  z-index: 0; /* 确保图片层级低于按钮 */
}

/* 修复视频封面容器样式 */
.qjcv-video-thumb,
.qjcv-info-poster,
.qjcv-cover-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}