:root {
            --primary: #ff4273;
            --secondary: #ff9d76;
            --bg-warm: #fffde1;
            --accent: #1fffff;
            --text-dark: #1a1a2e;
            --text-mid: #3d3d5c;
            --text-light: #6b6b80;
            --white: #ffffff;
            --card-bg: #ffffff;
            --border: #f0e8d8;
            --shadow-sm: 0 2px 8px rgba(255, 66, 115, 0.06);
            --shadow-md: 0 6px 24px rgba(255, 66, 115, 0.10);
            --shadow-lg: 0 12px 40px rgba(255, 66, 115, 0.14);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
            --font-xs: clamp(0.7rem, 0.9vw, 0.78rem);
            --font-sm: clamp(0.8rem, 1vw, 0.88rem);
            --font-base: clamp(0.9rem, 1.15vw, 1rem);
            --font-md: clamp(1rem, 1.35vw, 1.18rem);
            --font-lg: clamp(1.2rem, 1.7vw, 1.5rem);
            --font-xl: clamp(1.5rem, 2.2vw, 2rem);
            --font-2xl: clamp(1.8rem, 2.8vw, 2.6rem);
            --max-width: 1320px;
            --nav-height: 64px;
        }
        *,
        *::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: #fdfaf3;
            color: var(--text-dark);
            line-height: 1.6;
            min-height: 100vh;
            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(255, 66, 115, 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(255, 66, 115, 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 {
            position: sticky;
            top: 0;
            z-index: 1000;
            width: 100%;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            height: var(--nav-height);
            display: flex;
            align-items: center;
            padding: 0 clamp(12px,3vw,32px);
            gap: clamp(8px,1.5vw,20px);
        }
        .nav-brand {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: var(--primary);
        }
        .nav-brand h1 {
            font-size: var(--font-lg);
            font-weight: 800;
            background: linear-gradient(135deg, #ff4273 0%, #ff6b8a 50%, #ff9d76 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            white-space: nowrap;
            margin: 0;
            line-height: 1.2;
        }
        .nav-brand .brand-dot {
            width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
            flex-shrink: 0; box-shadow: 0 0 12px rgba(31,255,255,0.5);
            animation: dotPulse 2s infinite;
        }
        @keyframes dotPulse { 0%,100% { box-shadow: 0 0 8px rgba(31,255,255,0.4); } 50% { box-shadow: 0 0 20px rgba(31,255,255,0.8); } }
        .nav-links {
            display: flex; align-items: center; gap: clamp(4px,1.2vw,16px); flex: 1; justify-content: center;
            overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap;
        }
        .nav-links::-webkit-scrollbar { display: none; }
        .nav-links a {
            text-decoration: none; color: var(--text-mid); font-size: var(--font-sm); font-weight: 500;
            padding: 7px 13px; border-radius: 20px; transition: var(--transition); white-space: nowrap;
        }
        .nav-links a:hover { color: var(--primary); background: rgba(255,66,115,0.06); }
        .nav-user {
            flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: var(--font-sm);
            color: var(--text-mid); cursor: pointer; padding: 7px 14px; border-radius: 22px;
            background: linear-gradient(135deg, rgba(255,66,115,0.06) 0%, rgba(255,157,118,0.06) 100%);
            transition: var(--transition); white-space: nowrap; border: 1.5px solid transparent;
        }
        .nav-user:hover { border-color: rgba(255,66,115,0.25); background: linear-gradient(135deg, rgba(255,66,115,0.1), rgba(255,157,118,0.1)); }
        .nav-user .avatar-dot {
            width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ff4273, #ff9d76);
            display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0;
        }
        .hero-banner {
            position: relative; width: 100%; min-height: clamp(280px,40vw,480px); overflow: hidden;
            display: flex; align-items: center; justify-content: center; background: #1a1a2e;
        }
        .hero-banner img { position: absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:0.65; filter: brightness(0.5) saturate(1.1); }
        .hero-overlay { position: relative; z-index:2; text-align: center; padding: clamp(20px,5vw,48px) clamp(16px,4vw,40px); max-width:800px; }
        .hero-overlay .hero-tag { display: inline-block; background: var(--accent); color:#0a0a1a; font-weight:700; font-size:var(--font-xs); padding:6px 16px; border-radius:20px; margin-bottom:14px; }
        .hero-overlay h2 { font-size:var(--font-2xl); font-weight:800; color:#fff; margin-bottom:10px; text-shadow:0 3px 18px rgba(0,0,0,0.5); line-height:1.25; }
        .hero-overlay p { font-size:var(--font-md); color:rgba(255,255,255,0.85); margin-bottom:20px; text-shadow:0 1px 6px rgba(0,0,0,0.4); }
        .hero-btn { display:inline-block; padding:12px 30px; background:linear-gradient(135deg,#ff4273,#ff5c85); color:#fff; border-radius:28px; text-decoration:none; font-weight:700; font-size:var(--font-base); transition:var(--transition); box-shadow:0 6px 22px rgba(255,66,115,0.4); }
        .hero-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,66,115,0.55); }
        .container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 clamp(12px,3vw,28px); }
        .section { padding:clamp(28px,4vw,50px) 0; }
        .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(16px,2.5vw,28px); flex-wrap:wrap; gap:12px; }
        .section-header h2 { font-size:var(--font-xl); font-weight:800; color:var(--text-dark); position:relative; padding-left:16px; line-height:1.3; }
        .section-header h2::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:60%; background:linear-gradient(180deg,#ff4273,#ff9d76); border-radius:4px; }
        .section-header .more-link { color:var(--primary); text-decoration:none; font-weight:600; font-size:var(--font-sm); transition:var(--transition); }
        .main-layout { display:grid; grid-template-columns:1fr 340px; gap:clamp(20px,3vw,36px); align-items:start; }
        @media (max-width:1024px) { .main-layout { grid-template-columns:1fr; } .sidebar { order:10; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } }
        .sidebar-card { background:var(--card-bg); border-radius:var(--radius-lg); padding:clamp(16px,2.5vw,22px); box-shadow:var(--shadow-md); border:1px solid var(--border); transition:var(--transition); }
        .sidebar-card h3 { font-size:var(--font-md); font-weight:700; margin-bottom:14px; color:var(--text-dark); display:flex; align-items:center; gap:8px; }
        .update-time { font-size:var(--font-xs); color:var(--text-light); margin-bottom:10px; }
        .stat-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--border); font-size:var(--font-sm); }
        .stat-value { font-weight:700; color:var(--primary); font-size:var(--font-md); }
        .rank-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
        .rank-list li { display:flex; align-items:center; gap:10px; font-size:var(--font-sm); padding:8px 10px; border-radius:var(--radius-sm); background:#fefaf6; transition:var(--transition); cursor:pointer; }
        .rank-list li:hover { background:#fff5ee; }
        .rank-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; color:#fff; }
        .rank-num.top1 { background:#ff4273; } .rank-num.top2 { background:#ff9d76; } .rank-num.top3 { background:#ffb89a; } .rank-num.normal { background:#d5c4b8; }
        .platform-intro { background:linear-gradient(135deg,#fffdf7,#fffde1,#fffef5); border-radius:var(--radius-xl); padding:clamp(20px,3.5vw,36px) clamp(16px,3vw,32px); text-align:center; border:1px solid #f5e8d0; }
        .platform-intro h2 { font-size:var(--font-xl); font-weight:800; margin-bottom:10px; }
        .platform-intro p { font-size:var(--font-base); color:var(--text-mid); max-width:700px; margin:0 auto; line-height:1.7; }
        .movie-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.6vw,18px); }
        @media (max-width:1200px) { .movie-grid { grid-template-columns:repeat(4,1fr); } }
        @media (max-width:768px) { .movie-grid { grid-template-columns:repeat(3,1fr); } }
        @media (max-width:480px) { .movie-grid { grid-template-columns:repeat(2,1fr); } }
        .movie-card { background:var(--card-bg); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); cursor:pointer; border:1px solid transparent; display:flex; flex-direction:column; }
        .movie-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(255,66,115,0.2); }
        .movie-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:#f0e8dd; flex-shrink:0; }
        .movie-info { padding:10px 11px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
        .movie-info .movie-title { font-weight:700; font-size:var(--font-sm); color:var(--text-dark); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .movie-info .movie-meta { font-size:var(--font-xs); color:var(--text-light); display:flex; flex-wrap:wrap; gap:3px 8px; }
        .movie-tag { display:inline-block; font-size:10px; padding:3px 8px; border-radius:10px; background:rgba(255,66,115,0.08); color:var(--primary); font-weight:600; align-self:flex-start; }
        .star-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,20px); }
        @media (max-width:768px) { .star-grid { grid-template-columns:repeat(2,1fr); } }
        .star-card { background:var(--card-bg); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); text-align:center; cursor:pointer; border:1px solid transparent; }
        .star-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(255,157,118,0.3); }
        .star-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f0e8dd; }
        .star-card .star-name { font-weight:700; font-size:var(--font-base); padding:10px 8px 4px; color:var(--text-dark); }
        .star-card .star-role { font-size:var(--font-xs); color:var(--text-light); padding:0 8px 12px; }
        .plot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,20px); }
        @media (max-width:600px) { .plot-grid { grid-template-columns:1fr; } }
        .plot-card { background:var(--card-bg); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); display:flex; border:1px solid var(--border); cursor:pointer; }
        .plot-card:hover { box-shadow:var(--shadow-md); }
        .plot-card img { width:clamp(100px,28%,150px); aspect-ratio:3/4; object-fit:cover; flex-shrink:0; background:#f0e8dd; display:block; }
        .plot-card .plot-content { padding:14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
        .plot-card .plot-content h4 { font-weight:700; font-size:var(--font-base); color:var(--text-dark); }
        .plot-card .plot-content p { font-size:var(--font-xs); color:var(--text-light); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        .detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,22px); }
        @media (max-width:700px) { .detail-grid { grid-template-columns:1fr; } }
        .detail-card { background:var(--card-bg); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); display:flex; border:1px solid var(--border); cursor:pointer; }
        .detail-card:hover { box-shadow:var(--shadow-md); border-color:rgba(255,66,115,0.2); }
        .detail-card img { width:clamp(110px,30%,160px); aspect-ratio:2/3; object-fit:cover; flex-shrink:0; background:#f0e8dd; display:block; }
        .detail-card .detail-content { padding:14px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
        .detail-card .detail-content h4 { font-weight:700; font-size:var(--font-base); color:var(--text-dark); }
        .detail-card .detail-content .detail-meta { font-size:var(--font-xs); color:var(--text-light); display:flex; flex-wrap:wrap; gap:3px 10px; }
        .detail-card .detail-content .detail-desc { font-size:var(--font-xs); color:var(--text-mid); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        .comments-section { background:var(--card-bg); border-radius:var(--radius-xl); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow-md); border:1px solid var(--border); }
        .comment-list { display:flex; flex-direction:column; gap:14px; }
        .comment-item { padding:14px 16px; background:#fefaf6; border-radius:var(--radius-md); border-left:3px solid var(--secondary); transition:var(--transition); }
        .comment-item:hover { background:#fff7f0; border-left-color:var(--primary); }
        .comment-item .comment-user { font-weight:600; font-size:var(--font-sm); color:var(--text-dark); margin-bottom:4px; }
        .comment-item .comment-text { font-size:var(--font-sm); color:var(--text-mid); line-height:1.6; }
        .comment-item .comment-time { font-size:var(--font-xs); color:var(--text-light); margin-top:4px; }
        .app-download { background:linear-gradient(160deg,#1a1a2e,#252540,#1a1a2e); border-radius:var(--radius-xl); padding:clamp(22px,3.5vw,38px) clamp(18px,3vw,32px); color:#fff; text-align:center; box-shadow:var(--shadow-lg); }
        .app-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
        .app-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:26px; text-decoration:none; font-weight:600; font-size:var(--font-sm); transition:var(--transition); white-space:nowrap; border:2px solid transparent; }
        .app-btn.android { background:#3ddc84; color:#0a2a15; } .app-btn.android:hover { background:#2cc974; box-shadow:0 6px 20px rgba(61,220,132,0.4); transform:translateY(-2px); }
        .app-btn.ios { background:#ffffff; color:#1a1a2e; } .app-btn.ios:hover { box-shadow:0 6px 20px rgba(255,255,255,0.35); transform:translateY(-2px); }
        .app-btn.pc { background:#52616b; color:#fff; } .app-btn.pc:hover { background:#3d4a52; box-shadow:0 6px 20px rgba(82,97,107,0.4); transform:translateY(-2px); }
        .app-btn.mac { background:#333; color:#fff; } .app-btn.mac:hover { background:#222; box-shadow:0 6px 20px rgba(80,80,80,0.4); transform:translateY(-2px); }
        .app-icon { width:22px; height:22px; flex-shrink:0; }
        .footer-nav { width:100%; background:#1a1a2e; color:rgba(255,255,255,0.7); padding:clamp(20px,3vw,36px) clamp(12px,3vw,28px); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; font-size:var(--font-sm); }
        .footer-nav a { color:rgba(255,255,255,0.8); text-decoration:none; transition:var(--transition); }
        .footer-nav a:hover { color:var(--accent); }
        .footer-brand { font-weight:700; font-size:var(--font-md); color:#fff; }
        .footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
        .footer-bottom { width:100%; text-align:center; font-size:var(--font-xs); color:rgba(255,255,255,0.45); padding-top:8px; border-top:1px solid rgba(255,255,255,0.08); margin-top:4px; }