html,
body {
    height: 100%;
    margin: 0;
}
html {
    --plyr-color-main: #ff0000;
}
* {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent; /* 未来标准 */
}
/* 全局移除焦点样式 */
*:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 为输入类元素单独处理 */
input:focus, textarea:focus, select:focus {
    box-shadow: none;
}

/* 为按钮添加替代焦点样式 */
button:focus {
    /* background-color: #f0f0f0; */
    transform: scale(1.05);
}
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #333;
    color: #fff;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make the container take full height */
}

.container-patch {
    padding: 80px 0 0 0 !important;
}

/* 顶部功能区 */
.header-area {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: transform 0.3s ease-out;
    background-color: #ff3b30CC; /* Keep background color consistent */
    
    border-radius: 0px 0px 8px 8px;
    backdrop-filter: blur(3px); /* 高斯模糊效果 */
    -webkit-backdrop-filter: blur(3px); /* Safari兼容性 */
}

.header-area.hidden {
    transform: translateY(-100%);
}

/* 搜索栏样式 */
.search-bar {
    padding: 15px;
    display: flex;
    align-items: center;
}

.search-bar input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    border: none;
    border-radius: 8px 0px 0px 8px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    /* 提示字符颜色 */
    &::placeholder {
        color: rgba(255, 255, 255, 0.7); /* 设置为稍浅的白色，以便与输入文本区分 */
    }

    /* 关闭聚焦边框 */
    &:focus {
        outline: none;
    }
}

.search-bar button {
    padding: 8px 15px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.search-bar .search-btn {
    border-radius: 0px 8px 8px 0px;
}

/* 胶囊栏样式 */
.capsule-bar {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.capsule {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.capsule .arrow-down {
    font-size: 12px;
}

.popup-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 66.67vh;
    background-color: #fff;
    color: #333;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 999;
    overflow-y: auto; /* 允许纵向滚动 */
}

.popup-card.show {
    transform: translateY(0);
}

/* 可滚动内容区域 */
.scrollable-content {
    padding-top: 130px; /* Adjust based on header height */
    padding-bottom: 70px;
    flex-grow: 1; /* Allow it to take up remaining space */
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Add gap between capsule bar and content grid */
}

.scrollable-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/* 内容网格样式 */
.content-grid {
    --grid-gap: 5px; /* 定义网格间距变量 */
    padding: 5px; /* 减小内边距 */
    border-radius: 8px;
    display: grid;
    /* 横向最小为3，最大不限：结合固定最小宽度和动态计算，确保至少3列并允许更多 */
    grid-template-columns: repeat(auto-fit, minmax(min(250px, calc( (100% - (2 * var(--grid-gap))) / 2 )), 1fr));
    gap: var(--grid-gap); /* 使用变量定义的间距 */
    justify-items: center;
}

.grid-item {
    min-height: 100px;
    color: #333;
    border-radius: 8px;
    text-align: center;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    position: relative; /* 允许子元素绝对定位 */
    overflow: hidden; /* 隐藏超出部分 */
}

.grid-item img {
    width: 100%; /* 图片宽度填充父容器 */
    height: auto; /* 高度自适应 */
    display: block; /* 移除图片底部空白 */
    /* border-radius: 4px; */
}

.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* 蒙版高度 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);

}

.item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #fff; /* 标题颜色 */
    text-align: left; /* 标题左对齐 */
    z-index: 1; /* 确保标题在蒙版之上 */
}

.item-title h4 {
    margin: 0;
    font-size: 16px;
    display: -webkit-box; /* 使文本可以按行截断 */
    -webkit-line-clamp: 2; /* 限制为两行 */
    -webkit-box-orient: vertical;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/* 页码导航样式 */
.pagination {
    background-color: #ff3b30CC; /* 半透明背景 */
    padding: 10px;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    position: fixed; /* 悬浮 */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transition: transform 0.3s ease-out;
    backdrop-filter: blur(3px); /* 高斯模糊效果 */
    -webkit-backdrop-filter: blur(3px); /* Safari兼容性 */
    width: 100%; /* 确保宽度占满 */
    box-sizing: border-box; /* 包含padding在内的宽度 */
}

.pagination .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pagination .page-link.active {
    background-color: #ff3b30;
    border-color: #ff3b30;
}

.pagination .page-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
}

.pagination .page-ellipsis {
    color: #fff;
    font-size: 16px;
    padding: 0 5px;
}

.pagination.hidden {
    transform: translateY(100%);
}

/* 遮罩层样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
    z-index: 998; /* 确保在弹出卡片下方但在其他内容上方 */
    display: none; /* 初始隐藏 */
}

/* Player.html Specific Styles */

/* 视频播放区域 */
.video-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 20px;
}

.plyr  {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 视频上方的渐变遮罩、标题和发布时间 */
.video-overlay {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.video-overlay.hidden {
    opacity: 0;
}

.video-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    color: #fff;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.publish-time {
    width: 120px; /* 你可以根据实际需要调整宽度 */
    color: #eee;
    font-size: 0.9em;
    pointer-events: all;
    text-align: right;
    flex-shrink: 0;
    margin-left: 16px;
    align-self: flex-start;
}

.avatar {
    width: 40px; /* 调整头像大小 */
    vertical-align: middle;
    margin-right: 10px;
}

/* 可展开容器的通用样式 */
.collapsible-container {
    background-color: #444;
    border-radius: 8px;
    margin: 10px 0;
    padding: 10px 10px 0 10px;
    /* overflow is managed by content */
}

.collapsible-container .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
}

.collapsible-container .header::after {
    content: '\f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #fff;
    transition: transform 0.3s ease;
}

.collapsible-container.expanded .header::after {
    transform: rotate(180deg);
}

.collapsible-container .content {
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    max-height: 0px; /* Initial fixed height */
}

.collapsible-container.expanded .content {
    /* max-height is set by JS to content.scrollHeight */
    padding:  0 0 10px 0;
}
/*信息*/
.author-info {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 10px; 
}



.author-info {
    margin: 10px 0;
    background-color: #444;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    max-height: 300px;
    display: flex;
}

.author-info p {
    margin: 0;
    line-height: 1.6;
    color: #ddd;
}

/* 气泡标签选中与未选中样式（适配单选/多选） */
.genre-checkbox input[type="checkbox"],
.genre-checkbox input[type="radio"] {
    display: none;
}
.genre-checkbox {
    background-color: #111; /* 未选中黑色 */
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.genre-checkbox input[type="checkbox"]:checked + span,
.genre-checkbox input[type="radio"]:checked + span {
    background-color: #fff; /* 选中为白色 */
    color: #ff3b30; /* 选中时文字为主题色 */
}
.genre-checkbox input[type="checkbox"]:checked,
.genre-checkbox input[type="radio"]:checked {
    background-color: #fff;
    color: #ff3b30;
}
.genre-checkbox input[type="checkbox"]:focus + span,
.genre-checkbox input[type="radio"]:focus + span {
    outline: 2px solid #ff3b30;
}
/* 去除图标，纯色气泡 */
.genre-checkbox::before,
.genre-checkbox::after {
    display: none !important;
}

/* 气泡标签具体样式 */
.bubble-tags {
    /* border-top: 1px solid #555; */
}
.bubble-tags .tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bubble-tags .tag {
    background-color: #ff3b30;
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap; /* 防止标签文本换行 */
    text-decoration: none;
}

/* 视频列表区域 */
.video-lists {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 各个列表之间的间距 */
    margin-bottom: 20px;
}

.video-lists .list-section {
    flex: 1 1 calc(50% - 10px); /* 各占一半宽度，减去一半的gap */
    background-color: #444;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
}

.video-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
    gap: 5px; /* 添加小间距 */
}

.video-list-header .list-title-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    padding: 0 5px 10px 5px; /* 留出下边框空间 */
    cursor: pointer;
    border-bottom: 3px solid transparent; /* 未激活时透明 */
    transition: color 0.3s, border-color 0.3s;
    flex: 1; /* 让按钮平均分配容器宽度 */
    text-align: center; /* 文字居中 */
}

.video-list-header .list-title-btn:hover {
    color: #fff;
}

.video-list-header .list-title-btn.active {
    color: #fff;
    font-weight: bold;
    border-bottom-color: #ff3b30; /* 激活时高亮 */
}

@media (max-width: 768px) {
    .video-lists .list-section {
        flex: 1 1 100%; /* 小屏幕上每个列表占满宽度 */
    }
}