/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #0c1016;
    min-width: 320px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: transparent;
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}

/* 颜色变量 */
:root {
    --primary-color: #1890ff;
    --secondary-color: #722ed1;
    --accent-color: #ff4d4f;
    --text-color: #f0f0f0;
    --text-secondary: #a0a0a0;
    --bg-color: #0c1016;
    --bg-secondary: #161b22;
    --bg-card: #1c222b;
    --border-color: #30363d;
    --gradient-primary: linear-gradient(135deg, #1890ff, #722ed1);
    --gradient-secondary: linear-gradient(135deg, #722ed1, #ff4d4f);
}

/* 头部样式 */
.header {
    background-color: rgba(12, 16, 22, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold;
}

.logo-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    fill: var(--primary-color);
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--text-color);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

.main-nav a:hover {
    color: var(--primary-color);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    border-radius: 20px;
    padding: 5px 15px;
    width: 250px;
    border: 1px solid var(--border-color);
}

.search-box input {
    flex: 1;
    padding: 8px 0;
    color: var(--text-color);
}

.search-box input::placeholder {
    color: var(--text-secondary);
}

.search-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0a0a0'%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") no-repeat center;
    display: inline-block;
}

.user-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-login {
    color: var(--text-color);
    border: 1px solid var(--primary-color);
}

.btn-login:hover {
    background-color: rgba(24, 144, 255, 0.1);
}

.btn-register {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-register:hover {
    background-color: #40a9ff;
}

/* 轮播图样式 */
.banner {
    padding: 30px 0;
}

.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.slider {
    position: relative;
    height: 500px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 100px 50px 50px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
}

.slide-content h2 {
    font-size: 32px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.slide-content p {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-block;
}

.btn-primary:hover {
    box-shadow: 0 0 20px rgba(24, 144, 255, 0.5);
    transform: translateY(-2px);
}

.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.prev-btn, .next-btn {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prev-btn:hover, .next-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-icon, .next-icon {
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center;
    display: inline-block;
}

.next-icon {
    transform: rotate(180deg);
}

.slider-dots {
    display: flex;
    gap: 10px;
    margin: 0 20px;
}

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

.dot.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* 主要内容区域样式 */
.section {
    padding: 40px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.section-header h1, .section-header h2 {
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

.section-header h1::after, .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
}

.more-link {
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.more-link:hover {
    color: var(--primary-color);
}

.arrow-icon {
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0a0a0'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
    display: inline-block;
    transition: transform 0.3s ease;
}

.more-link:hover .arrow-icon {
    transform: translateX(3px);
}

/* 电影卡片网格 */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.movie-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.movie-poster {
    position: relative;
    padding-top: 150%;
    overflow: hidden;
}

.movie-poster img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.movie-card:hover .movie-poster img {
    transform: scale(1.05);
}

.movie-rating {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 77, 79, 0.9);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.movie-quality {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(24, 144, 255, 0.9);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.movie-info {
    padding: 12px;
}

.movie-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.movie-meta span {
    color: var(--text-secondary);
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
}

/* 分类网格 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.category-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 150px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.category-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-item:hover img {
    transform: scale(1.05);
}

.category-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
}

.category-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.category-info p {
    font-size: 14px;
    opacity: 0.8;
}

/* 排行榜样式 */
.ranking-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.ranking-column {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ranking-header {
    padding: 15px 20px;
    background: var(--gradient-primary);
}

.ranking-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.ranking-list {
    padding: 10px;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.ranking-number {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}

.ranking-item:nth-child(1) .ranking-number {
    background-color: #f5c518;
    color: #000;
}

.ranking-item:nth-child(2) .ranking-number {
    background-color: #c0c0c0;
    color: #000;
}

.ranking-item:nth-child(3) .ranking-number {
    background-color: #cd7f32;
    color: #000;
}

.ranking-item img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.ranking-info {
    flex: 1;
}

.ranking-info h4 {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
}

.ranking-score {
    color: #f5c518;
}

/* APP下载区域 */
.app-download {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    margin: 40px 0;
    overflow: hidden;
}

.app-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.app-info {
    padding: 40px;
}

.app-info h2 {
    color: var(--text-color);
    font-size: 28px;
    margin-bottom: 10px;
}

.app-info p {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 20px;
}

.app-features {
    margin-bottom: 30px;
}

.app-features li {
    color: var(--text-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.feature-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231890ff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
    display: inline-block;
}

.app-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-app {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
}

.android {
    background-color: #3ddc84;
    color: #000;
}

.ios {
    background-color: #000;
    color: #fff;
}

.android-icon, .ios-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: inline-block;
}

.android-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z'/%3E%3C/svg%3E") no-repeat center;
}

.ios-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") no-repeat center;
}

.qr-code {
    text-align: center;
}

.qr-code img {
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
    border-radius: 6px;
    padding: 5px;
    background-color: #fff;
}

.qr-code p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.app-image {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-image img {
    max-height: 400px;
    object-fit: contain;
}

/* 文章卡片 */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.article-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.article-image {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}

.article-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.05);
}

.article-content {
    padding: 20px;
}

.article-title {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-excerpt {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
}

/* 页脚样式 */
.footer {
    background-color: var(--bg-secondary);
    padding: 60px 0 30px;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo a {
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.slogan {
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.footer-nav-column h3 {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
}

.footer-nav-column ul li {
    margin-bottom: 10px;
}

.footer-nav-column ul li a {
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-nav-column ul li a:hover {
    color: var(--primary-color);
}

.social-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: var(--bg-color);
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}

.weixin-icon, .weibo-icon, .douyin-icon, .bilibili-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: inline-block;
}

.weixin-icon {
    background: url("data:image/svg+xml,%3Csvg t='1608614509636' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4449' width='200' height='200'%3E%3Cpath d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z' p-id='4450' fill='%23a0a0a0'%3E%3C/path%3E%3Cpath d='M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 5 0 9-4.1 9-9.1 0-2.3-0.9-4.4-1.4-6.6-3.5-12.7-7.9-26.9-11.9-41.4-0.5-2-0.9-3.9-0.9-5.9 0-6.3 2.9-11.9 7.3-15.1z m-233.1-40.3c-19.8 0-35.9-16.1-35.9-35.9 0-19.8 16.1-35.9 35.9-35.9s35.9 16.1 35.9 35.9c0 19.9-16.1 35.9-35.9 35.9z m179.9 0c-19.8 0-35.9-16.1-35.9-35.9 0-19.8 16.1-35.9 35.9-35.9s35.9 16.1 35.9 35.9c-0.1 19.9-16.2 35.9-35.9 35.9z' p-id='4451' fill='%23a0a0a0'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

.weibo-icon {
    background: url("data:image/svg+xml,%3Csvg t='1608614593133' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='5113' width='200' height='200'%3E%3Cpath d='M457.3 543c-68.1-17.7-145 16.2-174.6 76.2-30.1 61.2-1 129.1 67.8 151.3 71.2 23 155.2-12.2 184.4-78.3 28.7-64.6-7.2-131-77.6-149.2z m-67 175.9c-13.8 22.1-43.5 31.7-65.8 21.6-22-10-28.5-35.7-14.6-57.2 13.7-21.4 42.3-31 64.4-21.7 22.4 9.5 29.6 35 16 57.3z m45.5-58.5c-5 8.6-16.1 12.7-24.7 9.1-8.5-3.5-11.2-13.1-6.4-21.5 5-8.4 15.6-12.4 24.1-9.1 8.7 3.2 11.8 12.9 7 21.5zM785.3 443.5c15 4.8 31-3.4 35.9-18.3 11.8-36.6 4.4-78.4-23.2-109-27.6-30.6-68.4-42.3-106-34.3-15.4 3.3-25.2 18.4-21.9 33.8 3.3 15.3 18.4 25.2 33.8 21.8 18.4-3.9 38.3 1.8 51.9 16.7 13.5 15 17.2 35.4 11.3 53.3-4.9 15.1 3.2 31.1 18.2 36z' p-id='5114' fill='%23a0a0a0'%3E%3C/path%3E%3Cpath d='M885.1 237.5c-56.7-62.9-140.4-86.9-217.7-70.5-17.9 3.8-29.3 21.4-25.4 39.3 3.8 17.9 21.4 29.3 39.3 25.5 55-11.7 114.4 5.4 154.8 50.1 40.3 44.7 51.2 105.7 34 159.1-5.6 17.4 3.9 36 21.3 41.7 17.4 5.6 36-3.9 41.6-21.2v-0.1c24.1-75.4 8.9-161.1-47.9-223.9zM729 499c-12.2-3.6-20.5-6.1-14.1-22.1 13.8-34.7 15.2-64.7 0.3-86-28-40.1-104.8-37.9-192.8-1.1 0 0-27.6 12.1-20.6-9.8 13.5-43.5 11.5-79.9-9.6-101-47.7-47.8-174.6 1.8-283.5 110.6C127.3 471.1 80 557.5 80 632.2 80 775.1 263.2 862 442.5 862c235 0 391.3-136.5 391.3-245 0-65.5-55.2-102.6-104.8-118zM443 810.8c-143 14.1-266.5-50.5-275.8-144.5-9.3-93.9 99.2-181.5 242.2-195.6 143-14.2 266.5 50.5 275.8 144.4C694.4 709 586 796.6 443 810.8z' p-id='5115' fill='%23a0a0a0'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

.douyin-icon {
    background: url("data:image/svg+xml,%3Csvg t='1608614631030' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='5769' width='200' height='200'%3E%3Cpath d='M937.4 423.9c-84 0-165.7-27.3-232.9-77.8v352.3c0 179.9-138.6 325.6-309.6 325.6S85.3 878.3 85.3 698.4c0-179.9 138.6-325.6 309.6-325.6h0.7v157.7h-0.7c-90.3 0-163.5 75.1-163.5 167.9 0 92.7 73.2 167.9 163.5 167.9s163.5-75.1 163.5-167.9V0H716c0 92.1 74.8 166.8 166.8 166.8h54.7v257.1h-0.1z' p-id='5770' fill='%23a0a0a0'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

.bilibili-icon {
    background: url("data:image/svg+xml,%3Csvg t='1608614659664' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6433' width='200' height='200'%3E%3Cpath d='M306.005333 117.632L444.330667 256h135.296l138.368-138.325333a42.666667 42.666667 0 0 1 60.373333 60.373333L700.330667 256H789.333333A149.333333 149.333333 0 0 1 938.666667 405.333333v341.333334a149.333333 149.333333 0 0 1-149.333334 149.333333h-554.666666A149.333333 149.333333 0 0 1 85.333333 746.666667v-341.333334A149.333333 149.333333 0 0 1 234.666667 256h88.96L245.632 177.962667a42.666667 42.666667 0 0 1 60.373333-60.373334zM789.333333 341.333333h-554.666666a64 64 0 0 0-63.701334 57.856L170.666667 405.333333v341.333334a64 64 0 0 0 57.856 63.701333L234.666667 810.666667h554.666666a64 64 0 0 0 63.701334-57.856L853.333333 746.666667v-341.333334A64 64 0 0 0 789.333333 341.333333zM341.333333 469.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666666-42.666667z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z' p-id='6434' fill='%23a0a0a0'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

.footer-middle {
    margin-bottom: 30px;
}

.friendly-links h3 {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
}

.friendly-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.friendly-links ul li a, .friendly-links a {
    color: var(--text-secondary);
    font-size: 14px;
}

.friendly-links ul li a:hover, .friendly-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.copyright, .icp, .disclaimer {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 10px;
}

.icp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.icp a {
    display: flex;
    align-items: center;
}

.icp img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    display: inline-block;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .header .container {
        height: auto;
        padding: 15px;
        flex-wrap: wrap;
    }

    .logo {
        margin-bottom: 10px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-nav li {
        margin: 5px 10px;
    }

    .search-box {
        width: 200px;
    }

    .slider {
        height: 400px;
    }

    .slide-content h2 {
        font-size: 24px;
    }

    .slide-content p {
        font-size: 16px;
    }

    .app-content {
        grid-template-columns: 1fr;
    }

    .app-image {
        display: none;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .ranking-container {
        grid-template-columns: 1fr;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header .container {
        padding: 10px;
    }

    .logo a {
        font-size: 20px;
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }

    .search-box {
        width: 150px;
    }

    .user-actions {
        gap: 5px;
    }

    .btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .slider {
        height: 300px;
    }

    .slide-content {
        padding: 80px 20px 30px;
    }

    .slide-content h2 {
        font-size: 20px;
    }

    .slide-content p {
        font-size: 14px;
    }

    .btn-primary {
        padding: 8px 16px;
    }

    .section-header h1, .section-header h2 {
        font-size: 20px;
    }

    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .movie-title {
        font-size: 14px;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .app-info h2 {
        font-size: 24px;
    }

    .app-info p {
        font-size: 16px;
    }

    .app-buttons {
        flex-direction: column;
    }

    .article-title {
        font-size: 16px;
    }
}