/* ==========================================
  通用样式 - 图片自适应
  ==========================================
  确保图片在不同容器中正确缩放
  包含过渡效果实现平滑缩放
  ========================================== */
.img-kk {
   display: inline-block;
   height: auto;
   padding: 0;
   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: var(--font-size-2xl);
   color: var(--text-color);
}

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

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

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

/* ==========================================
  视频展示区域样式
  ==========================================
  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: var(--font-size-14px);
   font-weight: var(--font-weight-medium);
}

/* 加载和错误状态样式 */
.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");
}


@media (max-width: 600px) {
    .video-wrapper {
        flex: 0 0 100%;
    }
}

@media (max-width: 1800px) {
    /* 1800px: 超大屏限制,无特殊调整 */
}

@media (max-width: 900px) {
    /* 900px: 平板宽度,无特殊调整 */
}