:root {
            --bg: #f3f6f6;
            --surface: #ffffff;
            --text: #2c3e3e;
            --text-light: #5a6c6c;
            --text-muted: #7a8a8a;
            --primary: #11999e;
            --primary-dark: #0d7a7e;
            --primary-light: #30e3ca;
            --accent: #30e3ca;
            --dark: #40514e;
            --dark-light: #4d6360;
            --border: #e2e8e8;
            --shadow-sm: 0 1px 3px rgba(64, 81, 78, 0.06);
            --shadow: 0 2px 8px rgba(64, 81, 78, 0.08);
            --shadow-md: 0 4px 16px rgba(64, 81, 78, 0.10);
            --shadow-lg: 0 8px 32px rgba(64, 81, 78, 0.12);
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --font-xs: 0.75rem;
            --font-sm: 0.85rem;
            --font-base: 0.95rem;
            --font-md: 1.05rem;
            --font-lg: 1.2rem;
            --font-xl: 1.5rem;
            --font-2xl: 1.8rem;
            --font-3xl: 2.2rem;
            --max-width: 1280px;
            --nav-height: 60px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--nav-height);
            font-size: 16px;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 1.3rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(17, 153, 158, 0.45);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
            z-index: 9999;
        }
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .back-to-top:hover {
            box-shadow: 0 6px 24px rgba(17, 153, 158, 0.65);
            transform: scale(1.05);
        }
        @media (max-width: 600px) {
            .back-to-top {
                bottom: 20px;
                right: 16px;
                width: 38px;
                height: 38px;
                font-size: 1.1rem;
            }
        }
        .top-nav {
            width: 100%;
            background: var(--dark);
            position: sticky;
            top: 0;
            z-index: 1000;
            height: var(--nav-height);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }
        .top-nav-inner {
            max-width: var(--max-width);
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            gap: 16px;
        }
        .top-nav h1 {
            font-size: var(--font-xl);
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 1px;
            white-space: nowrap;
            flex-shrink: 0;
            margin: 0;
        }
        .top-nav h1 span {
            color: var(--primary-light);
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
            list-style: none;
        }
        .nav-links a {
            color: #d0d8d8;
            text-decoration: none;
            font-size: var(--font-sm);
            padding: 8px 13px;
            border-radius: 20px;
            transition: var(--transition);
            white-space: nowrap;
            font-weight: 500;
        }
        .nav-links a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }
        .nav-user {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #e0e8e8;
            font-size: var(--font-sm);
            cursor: pointer;
            padding: 6px 14px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: var(--transition);
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.04);
        }
        .nav-user:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--primary-light);
        }
        .nav-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: var(--font-xs);
            flex-shrink: 0;
        }
        .nav-hamburger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            flex-direction: column;
            gap: 5px;
            z-index: 1001;
        }
        .nav-hamburger span {
            display: block;
            width: 24px;
            height: 2.5px;
            background: #fff;
            border-radius: 2px;
            transition: var(--transition);
        }
        #nav-toggle {
            display: none;
        }
        @media (max-width: 860px) {
            .nav-hamburger {
                display: flex;
            }
            .nav-links {
                position: fixed;
                top: var(--nav-height);
                left: 0;
                right: 0;
                background: var(--dark);
                flex-direction: column;
                padding: 12px 20px;
                gap: 2px;
                transform: translateY(-120%);
                opacity: 0;
                transition: var(--transition);
                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
                z-index: 999;
            }
            #nav-toggle:checked ~ .nav-links {
                transform: translateY(0);
                opacity: 1;
            }
            .nav-links a {
                display: block;
                padding: 12px 16px;
                border-radius: var(--radius-sm);
                font-size: var(--font-base);
            }
        }
        .main-container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 16px;
        }
        .banner-section {
            margin: 20px 0 0;
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            aspect-ratio: 21/9;
            min-height: 280px;
            max-height: 460px;
            background: var(--dark);
        }
        .banner-slides {
            display: flex;
            width: 400%;
            height: 100%;
            animation: bannerSlide 20s ease-in-out infinite;
        }
        .banner-slide {
            width: 25%;
            height: 100%;
            position: relative;
            flex-shrink: 0;
        }
        .banner-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .banner-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(64,81,78,0.85) 0%, rgba(64,81,78,0.3) 40%, rgba(64,81,78,0.05) 100%);
            display: flex;
            align-items: flex-end;
            padding: 32px 36px;
        }
        .banner-overlay .banner-text {
            color: #fff;
            max-width: 600px;
        }
        .banner-overlay .banner-tag {
            display: inline-block;
            background: var(--primary-light);
            color: var(--dark);
            padding: 5px 14px;
            border-radius: 20px;
            font-weight: 700;
            font-size: var(--font-xs);
            margin-bottom: 10px;
        }
        .banner-overlay h2 {
            font-size: var(--font-3xl);
            font-weight: 700;
            margin-bottom: 6px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .banner-overlay p {
            font-size: var(--font-base);
            opacity: 0.9;
            text-shadow: 0 1px 4px rgba(0,0,0,0.3);
        }
        @keyframes bannerSlide {
            0%,20% { transform: translateX(0); }
            25%,45% { transform: translateX(-25%); }
            50%,70% { transform: translateX(-50%); }
            75%,95% { transform: translateX(-75%); }
            100% { transform: translateX(0); }
        }
        @media (max-width:640px) {
            .banner-section { aspect-ratio:16/10; min-height:200px; }
            .banner-overlay { padding:18px 16px; }
            .banner-overlay h2 { font-size:var(--font-xl); }
        }
        .section { margin: 32px 0; }
        .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
        .section-title { font-size:var(--font-2xl); font-weight:700; color:var(--dark); position:relative; padding-left:16px; }
        .section-title::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:26px; background:var(--primary-light); border-radius:3px; }
        .section-more { color:var(--primary); text-decoration:none; font-size:var(--font-sm); font-weight:600; transition:var(--transition); padding:6px 14px; border-radius:20px; border:1px solid var(--primary); white-space:nowrap; }
        .section-more:hover { background:var(--primary); color:#fff; }
        .card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
        .card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
        @media (max-width:1024px) { .card-grid-4 { grid-template-columns:repeat(3,1fr); } }
        @media (max-width:680px) { .card-grid-4 { grid-template-columns:repeat(2,1fr); gap:10px; } .card-grid-2 { grid-template-columns:1fr; gap:12px; } }
        .movie-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); display:flex; flex-direction:column; cursor:pointer; border:1px solid transparent; }
        .movie-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--primary-light); }
        .movie-card-img-wrap { position:relative; width:100%; aspect-ratio:2/3; overflow:hidden; background:#e8ecec; flex-shrink:0; }
        .movie-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
        .movie-card:hover .movie-card-img-wrap img { transform:scale(1.06); }
        .movie-card-badge { position:absolute; top:8px; left:8px; background:var(--primary); color:#fff; font-size:var(--font-xs); padding:3px 10px; border-radius:12px; font-weight:600; z-index:2; }
        .movie-card-badge.hot { background:#e74c3c; }
        .movie-card-badge.new { background:var(--primary-light); color:var(--dark); }
        .movie-card-info { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:4px; }
        .movie-card-info h3 { font-size:var(--font-base); font-weight:700; color:var(--dark); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .movie-card-info .meta-row { font-size:var(--font-xs); color:var(--text-muted); display:flex; flex-wrap:wrap; gap:4px 8px; }
        .movie-card-info .meta-row span { background:#f0f4f4; padding:2px 8px; border-radius:4px; white-space:nowrap; }
        .movie-card-info .meta-detail { font-size:var(--font-xs); color:var(--text-light); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .movie-card-info .site-tag { display:inline-block; font-size:var(--font-xs); background:#f0f4f4; padding:2px 8px; border-radius:4px; color:var(--primary); align-self:flex-start; margin-top:2px; }
        .star-card { background:var(--surface); border-radius:var(--radius); padding:18px 16px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); border:1px solid transparent; }
        .star-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-light); }
        .star-card img { width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 10px; border:3px solid var(--primary-light); }
        .star-card h3 { font-size:var(--font-base); font-weight:700; color:var(--dark); }
        .star-card .star-role { font-size:var(--font-xs); color:var(--primary); font-weight:600; }
        .star-card .star-works { font-size:var(--font-xs); color:var(--text-muted); margin-top:4px; }
        .plot-card { background:var(--surface); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:var(--transition); border-left:4px solid var(--primary-light); display:flex; flex-direction:column; gap:8px; }
        .plot-card:hover { box-shadow:var(--shadow-md); border-left-color:var(--primary); }
        .plot-card h3 { font-size:var(--font-md); font-weight:700; color:var(--dark); }
        .plot-card .plot-genre { font-size:var(--font-xs); color:var(--primary); font-weight:600; }
        .plot-card p { font-size:var(--font-sm); color:var(--text-light); line-height:1.7; }
        .detail-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; gap:16px; padding:16px; transition:var(--transition); border:1px solid transparent; }
        .detail-card:hover { box-shadow:var(--shadow-md); border-color:var(--primary-light); }
        .detail-card img { width:120px; height:170px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
        .detail-card-content { flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center; }
        .detail-card-content h3 { font-size:var(--font-md); font-weight:700; color:var(--dark); }
        .detail-card-content .detail-meta { font-size:var(--font-xs); color:var(--text-muted); display:flex; flex-wrap:wrap; gap:4px 10px; }
        .detail-card-content .detail-meta span { background:#f0f4f4; padding:2px 8px; border-radius:4px; }
        .layout-split { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
        .side-col { position:sticky; top:calc(var(--nav-height) + 20px); }
        @media (max-width:1024px) { .layout-split { grid-template-columns:1fr 280px; } }
        @media (max-width:768px) { .layout-split { grid-template-columns:1fr; } .side-col { position:static; } }
        .sidebar-card { background:var(--surface); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:16px; border:1px solid var(--border); }
        .sidebar-card h3 { font-size:var(--font-md); font-weight:700; color:var(--dark); margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--primary-light); }
        .stat-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0f3f3; font-size:var(--font-sm); }
        .stat-val { font-weight:700; color:var(--primary); font-size:var(--font-md); }
        .update-time { font-size:var(--font-xs); color:var(--text-muted); margin-top:8px; text-align:right; }
        .rank-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
        .rank-list li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); background:#fafcfc; transition:var(--transition); cursor:pointer; font-size:var(--font-sm); font-weight:500; }
        .rank-list li:hover { background:#f0f6f6; }
        .rank-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-xs); flex-shrink:0; color:#fff; background:var(--primary); }
        .rank-num.top1 { background:#e74c3c; }
        .rank-num.top2 { background:#f39c12; }
        .rank-num.top3 { background:#e67e22; }
        .comment-card { background:var(--surface); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:var(--transition); display:flex; gap:14px; align-items:flex-start; }
        .comment-card:hover { box-shadow:var(--shadow); border-color:#d0e0e0; }
        .comment-body { flex:1; min-width:0; }
        .comment-body .comment-user { font-weight:700; font-size:var(--font-sm); color:var(--dark); }
        .comment-body .comment-time { font-size:var(--font-xs); color:var(--text-muted); margin-left:8px; }
        .comment-body p { font-size:var(--font-sm); color:var(--text-light); line-height:1.7; margin-top:4px; }
        .platform-intro { background:linear-gradient(135deg, var(--dark) 0%, #2c3e3e 100%); color:#e8f0f0; border-radius:var(--radius-lg); padding:36px 32px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow-lg); }
        .platform-intro img { width:180px; height:120px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }
        .platform-intro-text { flex:1; min-width:200px; }
        .platform-intro-text h2 { font-size:var(--font-xl); margin-bottom:8px; color:#fff; }
        .platform-intro-text p { font-size:var(--font-sm); line-height:1.8; opacity:0.9; }
        .app-download-section { background:var(--surface); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); text-align:center; }
        .app-download-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:700px; margin:0 auto; }
        .app-download-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; border-radius:var(--radius); text-decoration:none; font-weight:700; font-size:var(--font-sm); transition:var(--transition); border:2px solid var(--border); background:#fafcfc; color:var(--dark); white-space:nowrap; }
        .app-download-btn:hover { border-color:var(--primary); background:#f0fafa; transform:translateY(-2px); box-shadow:var(--shadow-md); }
        .app-download-btn .app-icon { flex-shrink:0; }
        .bottom-nav { width:100%; background:var(--dark); color:#c0cccc; padding:36px 20px 20px; margin-top:40px; border-top:4px solid var(--primary-light); }
        .bottom-nav-inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
        .bottom-nav h4 { color:#fff; font-size:var(--font-base); margin-bottom:10px; }
        .bottom-nav a { color:#b0bdbd; text-decoration:none; font-size:var(--font-sm); display:block; padding:4px 0; transition:var(--transition); }
        .bottom-nav a:hover { color:var(--primary-light); }
        .copyright { grid-column:1/-1; text-align:center; font-size:var(--font-xs); color:#889595; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1); margin-top:8px; }
        @media (max-width:640px) { .bottom-nav-inner { grid-template-columns:1fr 1fr; } .app-download-grid { grid-template-columns:repeat(2,1fr); } .platform-intro { flex-direction:column; } }