* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #EFEEE0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1D2123;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(250, 205, 102, 0.3);
    border-top: 3px solid #FACD66;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.failure {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1D2123;
    padding: 32px;
}

.error-message {
    color: #FACD66;
    font-size: 16px;
    text-align: center;
    max-width: 600px;
}

.dashboard {
    background-color: #000000;
    min-height: 100vh;
    overflow-y: auto;
    padding-bottom: 32px;
}

.dashboard-container {
    max-width: 100%;
}

/* Top chart */

.top-chart {
    aspect-ratio: 3/4;
    margin: 2px 0 0 0;
    border-radius: 0;
    overflow: visible; /* 允许显示 slogan-container 和遮罩层 */
    position: relative;
    background-color: #000000;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* 不需要额外的padding-bottom，遮罩层在容器内部 */
}

/* Top chart gradient mask overlay */
.top-chart-gradient-mask {
    position: absolute;
    top: calc(100vw * 4/3 + 2px - 80px); /* top-chart高度 + margin-top */
    left: 0;
    right: 0;
    height: 80px; /* 150px高度的遮罩层 */
    background: linear-gradient(to top,
        rgba(0, 0, 0, 1) 0%,        /* 在遮罩层底部 - 完全不透明黑色 */
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.1) 90%,
        rgba(0, 0, 0, 0) 100%        /* 向上150px完全透明 */
    );
    z-index: 3; /* Above slides but below slogan-container */
    pointer-events: none; /* Allow clicks to pass through to slides */
}



.top-chart-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.top-chart-slides {
    display: flex;
    height: 100%;
    position: relative;
}

.top-chart-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.top-chart-slide.active {
    opacity: 1;
    z-index: 2;
}


/******top-slige-content and top-chart-content share styles*/

.top-chart-slide-content {
    position: absolute;
    bottom: 50px; /* Moved down further to give more image space and avoid dots */
    left: 20px;
    right: 20px;
    z-index: 2;
    max-width: 720px;
}


.top-chart-main-title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    opacity: 0.9;
}

.top-chart-title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-chart-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-chart-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-chart-video-id {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 20px;
    font-weight: normal;
}





/* ========================================
   SLOGAN SECTION
   ======================================== */
.slogan-container {
    position: relative;
    width: 100vw;
    height: 120px; /* 增加高度，为下方文字信息预留更多空间 */
    margin-left: calc(-50vw + 50%);
    z-index: 4; /* Above gradient mask */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.slogan-controls {
    position: absolute;
    top: 36%;
    left: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 5px; /* 设置元素间距为10px */
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 10px; /* 减少padding至80% */
    border-radius: 15px; /* 稍微减小圆角，适应新尺寸 */
    backdrop-filter: blur(5px);
    height: 36px; /* 减少高度至80% */
    box-sizing: border-box;
    width: 150px; /* 设置固定宽度为原来的75% */
    max-width: 80vw; /* 限制最大宽度为视窗宽度的80% */
}

.slogan-basic-controls {
    display: flex;
    align-items: center;
    gap: 5px; /* 设置间距为10px */
}

.slogan-play-button,
.slogan-favorites-button {
    width: 36px; /* 减少至80% */
    height: 36px; /* 减少至80% */
    border-radius: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
}

.slogan-play-button:hover,
.slogan-favorites-button:hover {
    transform: scale(1.25);
}

.slogan-play-button img,
.slogan-favorites-button img {
    width: 20px; /* 减少至80% */
    height: 20px; /* 减少至80% */
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* 白色滤镜 */
}

.slogan-text {
    color: rgba(255, 255, 255, 0.988);
    font-size: 16px;
    font-weight: 600;
    margin-left: 2px;
    white-space: nowrap;
}



/* 宽屏幕样式 - 元素垂直居中 */
@media (min-width: 769px) {
    

    .slogan-controls {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        z-index: 4;
        bottom: auto;
    }
}

  
/*** Responsive styles for slogan section ***/
@media (max-width: 768px) {
    .slogan-container {
        height: 100px; /* 移动端增加高度，为文字预留空间 */
    }

    .slogan-controls {
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        padding: 5px 5px; /* 进一步减少padding至80% */
        gap: 5px; /* 设置元素间距为10px */
        height: 32px; /* 减少高度至80% */
        box-sizing: border-box;
        border-radius: 14px; /* 匹配新的尺寸 */
        width: 120px; /* 平板端宽度为桌面端的75% */
        max-width: 80vw; /* 保持宽度限制 */
    }

    .slogan-play-button,
    .slogan-favorites-button {
        width: 32px; /* 减少至80% */
        height: 32px; /* 减少至80% */
    }

    .slogan-play-button img,
    .slogan-favorites-button img {
        width: 16px; /* 减少至80% */
        height: 16px; /* 减少至80% */
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* 白色滤镜 */
    }

    .slogan-text {
        font-size: 14px;
        margin-left: 2px;
    }

    .slogan-logo {
        font-size: 48px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .slogan-title {
        font-size: 22px;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .slogan-main-title {
        font-size: 18px;
        margin: 8px 0;
        line-height: 1.5;
    }
}




/* Container with floating title */
#container1,
#container2,
#container3 {
    position: relative;
    margin-top: 60px; /* 增加容器间距，为标题预留充足空间 */
    padding-top: 40px; /* 为标题预留充足空间，避免遮挡卡片 */
}

/* 第一个容器特殊处理，紧贴slogan-container底端，但要给标题留空间 */
#container1 {
    margin-top: 30px; /* 稍微减少间距，保持与slogan-container的合理距离 */
}

/* Section title - now visible */
.section-title {
    position: absolute;
    top: 5px; /* 向下移动15px，给标题更多空间 */
    left: 20px;
    right: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #EFEEE0;
    padding: 10px 0;
    z-index: 2;
    background: transparent; /* 取消背景填充 */
    border-radius: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Container height to fit cards perfectly */
#container1 .video-list,
#container2 .video-list,
#container3 .video-list {
    height: 280px; /* 280px to fit 3:4 cards (210px * 4/3) */
}

/* Responsive container spacing */
@media (max-width: 768px) {
    .section-title {
        font-size: 16px; /* Reduced title size for tablet */
         /* 适当的padding */
        height: 30px; /* 合理的标题高度 */
        top: 5px; /* 标题位于容器内部，不使用负边距 */
    }

    #container1,
    #container2,
    #container3 {
        margin-top: 40px; /* 减少容器间距，但保持标题不被遮挡 */
        padding-top: 45px; /* 为标题预留足够空间 */
    }

    #container1 {
        margin-top: 30px; /* 第一个容器与slogan的间距可以更紧凑一些 */
    }

    #container1 .video-list,
    #container2 .video-list,
    #container3 .video-list {
        height: 260px; /* 匹配tablet卡片高度 (195px * 4/3) */
    }

    .culture-item {
        width: 195px; /* Tablet卡片宽度195px，保持3:4比例(195x260) */
        border-radius: 10px; /* Tablet端稍小的圆角 */
    }

    .culture-thumbnail {
        border-radius: 10px; /* Tablet端缩略图圆角 */
    }
}



.video-list {
    display: flex;
    gap: 8px; /* 设置卡片左右之间间隔8px */
    padding: 0 10px; /* 左右添加16px内边距，避免卡片贴边 */
    overflow-x: auto;
    scroll-behavior: smooth;
    align-items: stretch;
}


.video-list::-webkit-scrollbar {
    height: 0px;
    width: 0px;
    display: none;
}

.video-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}



.video-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.culture-item {
    width: 210px;
    aspect-ratio: 3/4; /* 3:4比例，210x280 */
    border-radius: 8px; /* 添加卡片倒圆角 */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 防止卡片被压缩 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}


.culture-thumbnail {
    width: 117.65%; /* 100% / 0.85 = 117.65% - 放大以显示85%的中心区域 */
    height: 117.65%; /* 保持正方形缩放，确保3:4比例 */
    border-radius: 8px; /* 添加缩略图倒圆角 */
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中对齐，确保显示中心85%区域 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; /* 优化性能 */
}

/* 缩略图hover放大效果，但被卡片容器剪裁 */
.culture-item:hover .culture-thumbnail {
    transform: translate(-50%, -50%) scale(1.1); /* 基于原有117.65%再放大10%，保持居中 */
}

/* Text overlay container positioned at bottom of card */
.culture-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 20px 8px 8px 8px;
    z-index: 2;
}

/* 直接在卡片内的文字信息悬浮样式 */
.culture-item .item-title,
.culture-item .item-id {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.culture-item .item-title {
    bottom: 25px; /* 为item-id留出空间 */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75); /* 与ID信息颜色保持一致 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 与ID阴影保持一致 */
    font-weight: 500;
}

.culture-item .item-id {
    bottom: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hidden {
    display: none !important;
}



@media (max-width: 768px) {
    .top-chart {
        margin: 1px 0 0 0;
    }

    .top-chart-main-title {
        font-size: 16px;
    }

    .top-chart-title {
        font-size: 18px;
    }

    .top-chart-description {
        font-size: 14px;
        -webkit-line-clamp: 2;
        line-clamp: 1;
    }

    .top-chart-video-id {
        font-size: 12px;
        margin-left: 16px;
    }

  
    .item-title {
        font-size: 12px; /* Slightly smaller title on mobile */
    }

    .item-id {
        font-size: 12px; /* Slightly smaller ID on mobile */
    }

  }







/* ========================================
   INFO BUTTON STYLES
   ======================================== */

.icon-item.info-button {
    position: absolute;
    top: 36%;
    left: 190px; /* 调整位置：20px左边距 + 150px控制栏宽度 + 20px间距 */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 36px; /* 与控制栏高度一致：36px */
    height: 36px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease; /* 分离transition属性，避免冲突 */
    backdrop-filter: blur(10px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    transform: scale(1); /* 明确设置初始transform状态 */
}

.info-button:hover {
    transform: scale(1.1); /* 只使用scale变换，避免位置移动 */
    background: rgba(255, 255, 255, 0.8);
}

.info-button:active {
    transform: scale(0.95); /* 点击时的反馈，轻微缩小 */
    background: rgba(255, 255, 255, 0.9);
}

.info-icon {
    width: 18px; /* 匹配36px按钮的图标尺寸 */
    height: 18px;
    filter: brightness(0) saturate(100%) invert(29%) sepia(89%) saturate(1585%) hue-rotate(3deg) brightness(97%) contrast(92%);
    transition: filter 0.3s ease;
}

.info-button:hover .info-icon {
    filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(1585%) hue-rotate(3deg) brightness(87%) contrast(92%);
}

/* Info文字样式 */
.info-text {
    position: absolute;
    top: calc(50% - 50px); /* 位于info-button上方：50% - info按钮高度(36px) - 间距(9px) */
    left: 32px; /* 与控制按钮容器左对齐，距页面左侧20px */
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none; /* 不影响鼠标交互 */
    z-index: 10; /* 确保在遮罩层之上（slogan-container z-index: 4） */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 响应式调整 - 平板端 */
@media (max-width: 768px) {
    .icon-item.info-button {
        top: 50%;
        left: 155px; /* 调整位置：20px左边距 + 120px控制栏宽度 + 15px间距 */
        width: 32px; /* 与控制栏高度一致：32px */
        height: 32px;
        margin-top: -16px; /* 高度的一半，实现垂直居中，避免transform冲突 */
        transform: scale(1); /* 明确设置初始transform状态，只用于scale效果 */
    }

    .info-icon {
        width: 16px; /* 匹配32px按钮的图标尺寸 */
        height: 16px;
    }

    .info-button:hover {
        background: rgba(255, 255, 255, 0.8);
    }

    .info-button:active {
        background: rgba(255, 255, 255, 0.9);
    }

    .info-text {
        top: calc(50% - 41px); /* 小屏幕调整：50% - info按钮高度(32px) - 间距(9px) */
        left: 20px; /* 保持与控制按钮容器左对齐，距页面左侧20px */
        font-size: 14px;
        z-index: 10; /* 确保在遮罩层之上 */
    }
}