/* ==========================================
   通用样式 - 图片自适应
   ==========================================
   确保图片在不同容器中正确缩放
   包含过渡效果实现平滑缩放
   ========================================== */
.img-kk {
    display: inline-block;
    height: auto;
    padding: 0px;
    max-width:100%;
    line-height: 1.42857143;
    transition: var(--transition-default);
    width:700px;
}
div.right_box{
    float:right;
    width:500px;
}



/* ==========================================
   组件样式 - 内容容器
   ==========================================
   通用内容区块容器样式
   包含背景、边框和交互效果
   ========================================== */
div.normal_box{
    float: left;
    margin: var(--spacing-md);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    width: auto;
    background: var(--light-accent);
    box-shadow: var(--shadow-light);
    transition: var(--transition-default);
    border: 2px solid transparent;
}
div.normal_box:hover{
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
    background-color: var(--light-accent);
}


/* ==========================================
   组件样式 - 链接按钮
   ==========================================
   视频展示页面专用链接按钮样式
   复用common.css中的基础按钮样式
   ========================================== */

/* ==========================================
   用户信息展示区域样式
   ==========================================
   B站用户信息卡片样式定义
   包含头像、用户名、粉丝数等展示
   ========================================== */
.bilibili-user-info {
    margin-bottom: var(--spacing-lg);
}

.user-card,
#bilibili-user-card {
    background: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-light);
    transition: var(--transition-default);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-card:hover,
#bilibili-user-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
    background-color: var(--light-accent);
}

.user-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.user-avatar {
    height: 80px;
    border-radius: var(--border-radius-md);
    margin-right: var(--spacing-md);
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-name {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
}

.user-fans {
    color: var(--light-text);
    font-size: 0.9rem;
}

.user-sign {
    color: var(--light-text);
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

.user-stats {
    display: flex;
    gap: var(--spacing-md);
    color: var(--light-text);
    font-size: 0.9rem;
}

/* ==========================================
   视频展示区域样式
   ==========================================
   B站嵌入式视频展示区域的样式定义
   包含视频容器、播放器和标题样式
   ========================================== */
/* 视频展示区域容器 */
.video-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 允许视频自然换行 */
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: space-between; /* 均匀分布视频 */
}

/* 视频包装容器 */
.video-wrapper {
    flex: 0 0 calc(20% - var(--spacing-md)); /* 每个视频占20%宽度，考虑间距 */
    margin-bottom: var(--spacing-lg);
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition-default);
    border: 2px solid transparent;
}

.video-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
    background-color: var(--light-accent);
}

/* B站播放器容器 */
.bilibili-player-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9宽高比 */
    overflow: hidden;
}

.bilibili-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 视频标题样式 */
.video-title {
    padding: var(--spacing-sm);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

/* 加载和错误状态样式 */
.loading, .error {
    width: 100%;
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--light-text);
}

.error {
    color: var(--danger-color);
}

/* 用户统计信息样式 */
.user-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.user-stats span::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

.user-stats span:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z'/%3E%3C/svg%3E");
}

.user-stats span:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%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");
}

.user-stats span:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.user-stats span:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

/* 本地视频响应式样式 */
.local-video-container {
    width: 100%;
    max-width: 1200px;
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition-default);
    background-color: var(--card-bg-color);
    border: 2px solid transparent;
}

.local-video-container:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
    background-color: var(--light-accent);
}

.responsive-video {
    width: 100%;
    height: auto;
    max-height: 600px;
    display: block;
}

/* 响应式调整 - 1200px断点 */
@media (max-width: 1200px) {
    /* 左右分栏调整 */
    div.left_box {
        width: 60%;
    }
    div.right_box {
        width: 40%;
    }
    
    /* 视频网格布局调整 */
    .video-wrapper {
        flex: 0 0 calc(25% - var(--spacing-md)); /* 每个视频占25%宽度 */
    }
    
    /* 视频高度调整 */
    .responsive-video {
        max-height: 500px;
    }
}
/* 响应式调整 - 768px断点 */
@media (max-width: 768px) {
    /* 左右分栏调整 */
    div.left_box, div.right_box {
        float: none;
        width: 100%;
        margin-bottom: var(--spacing-md);
    }
    
    /* 用户信息区域调整 */
    .user-header {
        flex-direction: column;
        text-align: center;
    }
    
    .user-avatar {
        margin-right: 0;
        margin-bottom: var(--spacing-sm);
    }
    
    /* 视频网格布局调整 */
    .video-wrapper {
        flex: 0 0 calc(50% - var(--spacing-md)); /* 每个视频占50%宽度 */
    }
    
    /* 视频容器调整 */
    .bilibili-player-container {
        padding-bottom: 75%; /* 调整高度比例 */
    }
    
    /* 视频高度调整 */
    .responsive-video {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .video-container {
        flex-direction: column; /* 移动端改为纵向排列 */
    }
    
    .video-wrapper {
        flex: 0 0 100%; /* 占满宽度 */
        width: 100%;
    }
    
    /* 移动端隐藏除第一个以外的所有视频 */
    .video-wrapper:not(:first-child) {
        display: none;
    }
    
    .bilibili-player-container iframe {
        height: 250px;
    }
    
    .responsive-video {
        max-height: 300px;
    }
    
    .local-video-container {
        margin: var(--spacing-sm) 0;
        box-shadow: var(--shadow-light);
    }
}

/* 夜间模式样式 - 统一管理 */
/* 保持图标不变，但遵循common.css中的文本颜色规范 */
body.dark-theme .user-stats span:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%3E%3Cpath d='M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z'/%3E%3C/svg%3E");
}

body.dark-theme .user-stats span:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%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");
}

body.dark-theme .user-stats span:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

body.dark-theme .user-stats span:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}