:root {
            --bg-primary: #e8ffe8;
            --bg-secondary: #a6fff2;
            --accent-light: #74f9ff;
            --accent: #00e0ff;
            --text-dark: #1a3c2a;
            --text-medium: #2d5a3d;
            --text-light: #4a7a5a;
            --white: #ffffff;
            --card-shadow: 0 4px 20px rgba(0, 180, 200, 0.12);
            --card-hover-shadow: 0 8px 32px rgba(0, 200, 220, 0.2);
            --border-subtle: rgba(0, 180, 200, 0.18);
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
            --font-stack: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 80px; }
        body {
            font-family: var(--font-stack);
            background-color: #f0faf5;
            color: var(--text-dark);
            line-height: 1.6;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }
        .top-nav { width:100%; background:var(--white); border-bottom:2px solid var(--accent-light); position:sticky; top:0; z-index:1000; box-shadow:0 2px 16px rgba(0,180,200,0.1); padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }
        .top-nav .site-name h1 { font-size:1.55rem; font-weight:700; color:#007a8a; letter-spacing:1px; white-space:nowrap; margin:0; }
        .top-nav .nav-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; list-style:none; }
        .top-nav .nav-links a { text-decoration:none; color:var(--text-medium); font-weight:500; font-size:0.9rem; padding:7px 13px; border-radius:20px; transition:var(--transition); white-space:nowrap; }
        .top-nav .nav-links a:hover, .top-nav .nav-links a:focus { background:var(--accent-light); color:#005f6b; }
        .top-nav .user-status { display:flex; align-items:center; gap:8px; white-space:nowrap; font-weight:500; color:var(--text-medium); font-size:0.9rem; cursor:pointer; padding:7px 15px; border-radius:20px; background:var(--bg-primary); transition:var(--transition); }
        .top-nav .user-status:hover { background:var(--bg-secondary); }
        .user-status .avatar-dot { width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; }
        .banner-section { width:100%; background:linear-gradient(180deg, #d4fce8 0%, #e8ffe8 40%, #c8faf5 100%); padding:28px 5% 20px; display:flex; justify-content:center; }
        .banner-section img { width:100%; max-width:1200px; height:auto; max-height:380px; border-radius:var(--radius-lg); object-fit:cover; box-shadow:var(--card-shadow); display:block; }
        .platform-intro-top { text-align:center; padding:28px 5% 10px; max-width:900px; margin:0 auto; color:var(--text-medium); font-size:1rem; line-height:1.7; }
        .platform-intro-top strong { color:#007a8a; font-size:1.15rem; }
        .main-layout { display:flex; gap:28px; padding:10px 5% 40px; max-width:1400px; margin:0 auto; align-items:flex-start; }
        .main-content { flex:1 1 65%; min-width:0; }
        .sidebar-right { flex:0 0 32%; min-width:300px; max-width:420px; position:sticky; top:90px; align-self:flex-start; max-height:calc(100vh - 110px); overflow-y:auto; display:flex; flex-direction:column; gap:18px; padding-right:4px; }
        .sidebar-right::-webkit-scrollbar { width:5px; }
        .sidebar-right::-webkit-scrollbar-thumb { background:var(--accent-light); border-radius:10px; }
        .section-title { font-size:1.45rem; font-weight:700; color:#005f6b; margin:32px 0 16px; padding-left:16px; border-left:5px solid var(--accent); letter-spacing:0.5px; }
        .section-title:first-child { margin-top:0; }
        .hot-movies-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; margin-bottom:10px; }
        .movie-card { background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--card-shadow); transition:var(--transition); border:1px solid var(--border-subtle); display:flex; flex-direction:column; }
        .movie-card:hover { transform:translateY(-5px); box-shadow:var(--card-hover-shadow); border-color:var(--accent); }
        .movie-card img { width:100%; height:210px; object-fit:cover; display:block; background:#e0f5f0; }
        .movie-card .card-info { padding:10px 11px 12px; flex:1; display:flex; flex-direction:column; gap:3px; }
        .movie-card .card-info .movie-title { font-weight:700; font-size:0.95rem; color:#005f6b; line-height:1.3; }
        .movie-card .card-info span { font-size:0.72rem; color:var(--text-light); line-height:1.4; display:block; }
        .movie-card .card-info .movie-type { display:inline-block; background:var(--bg-secondary); color:#005f6b; padding:3px 9px; border-radius:12px; font-size:0.7rem; font-weight:600; margin-top:4px; align-self:flex-start; }
        .week-rank-list { display:flex; gap:14px; flex-wrap:wrap; list-style:none; }
        .week-rank-list li { background:var(--white); border-radius:var(--radius-md); padding:12px 18px; box-shadow:var(--card-shadow); border-left:4px solid var(--accent); font-weight:600; font-size:0.9rem; color:var(--text-medium); transition:var(--transition); cursor:pointer; flex:1 1 140px; min-width:130px; text-align:center; }
        .week-rank-list li:hover { background:var(--bg-secondary); border-left-color:#009fb5; transform:translateX(3px); }
        .week-rank-list li .rank-badge { display:inline-block; background:var(--accent); color:#fff; border-radius:50%; width:26px; height:26px; line-height:26px; font-size:0.8rem; font-weight:700; margin-right:6px; text-align:center; }
        .stars-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
        .star-card { background:var(--white); border-radius:var(--radius-md); padding:16px; text-align:center; box-shadow:var(--card-shadow); border:1px solid var(--border-subtle); transition:var(--transition); }
        .star-card:hover { transform:translateY(-4px); box-shadow:var(--card-hover-shadow); }
        .star-card img { width:90px; height:90px; border-radius:50%; object-fit:cover; margin-bottom:10px; border:3px solid var(--accent-light); background:#e8faf5; }
        .star-card .star-name { font-weight:700; font-size:0.95rem; color:#005f6b; }
        .star-card .star-role { font-size:0.75rem; color:var(--text-light); margin-top:2px; }
        .hot-stars-recommend { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
        .hot-stars-recommend .hs-tag { background:var(--bg-secondary); color:#005f6b; padding:8px 16px; border-radius:20px; font-weight:600; font-size:0.85rem; cursor:pointer; transition:var(--transition); }
        .hot-stars-recommend .hs-tag:hover { background:var(--accent); color:#fff; }
        .plot-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
        .plot-card { background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--card-shadow); border:1px solid var(--border-subtle); transition:var(--transition); display:flex; gap:14px; padding:14px; align-items:flex-start; }
        .plot-card:hover { box-shadow:var(--card-hover-shadow); border-color:var(--accent); }
        .plot-card img { width:110px; height:150px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:#e0f5f0; }
        .plot-card .plot-text { flex:1; font-size:0.85rem; color:var(--text-medium); line-height:1.6; }
        .plot-card .plot-text strong { color:#005f6b; font-size:0.95rem; display:block; margin-bottom:4px; }
        .sidebar-card { background:var(--white); border-radius:var(--radius-lg); padding:20px 18px; box-shadow:var(--card-shadow); border:1px solid var(--border-subtle); }
        .sidebar-card h3 { font-size:1.1rem; font-weight:700; color:#005f6b; margin-bottom:12px; border-bottom:2px solid var(--accent-light); padding-bottom:8px; }
        .sidebar-right .detail-grid { display:grid; grid-template-columns:1fr; gap:14px; }
        .detail-card { background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--card-shadow); border:1px solid var(--border-subtle); transition:var(--transition); display:flex; gap:12px; padding:12px; align-items:flex-start; }
        .detail-card:hover { box-shadow:var(--card-hover-shadow); border-color:var(--accent); }
        .detail-card img { width:90px; height:120px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:#e0f5f0; }
        .detail-card .detail-text { flex:1; font-size:0.82rem; color:var(--text-medium); line-height:1.6; }
        .detail-card .detail-text strong { color:#005f6b; font-size:0.9rem; display:block; margin-bottom:4px; }
        .sidebar-right .comment-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
        .sidebar-right .comment-list li { background:#fafffe; border-radius:var(--radius-md); padding:12px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.03); border-left:4px solid var(--accent-light); font-size:0.82rem; color:var(--text-medium); line-height:1.7; transition:var(--transition); }
        .sidebar-right .comment-list li:hover { border-left-color:var(--accent); background:#f0fdf8; }
        .sidebar-right .comment-list li .comment-author { font-weight:700; color:#007a8a; font-size:0.8rem; margin-bottom:4px; display:block; }
        .total-read-count { font-size:2.8rem; font-weight:800; color:#007a8a; text-align:center; letter-spacing:1px; }
        .update-time { text-align:center; font-size:0.78rem; color:var(--text-light); margin-top:6px; }
        .stat-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--border-subtle); font-size:0.9rem; }
        .stat-row:last-child { border-bottom:none; }
        .stat-row .stat-label { color:var(--text-light); }
        .stat-row .stat-value { font-weight:700; color:#007a8a; font-size:1.1rem; }
        .app-download-section { background:var(--bg-primary); padding:40px 5%; text-align:center; border-top:2px solid var(--accent-light); }
        .app-download-section h2 { color:#005f6b; margin-bottom:8px; font-size:1.5rem; }
        .app-download-section .app-subtitle { color:var(--text-light); margin-bottom:20px; font-size:0.9rem; }
        .download-buttons { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
        .download-btn { display:inline-flex; align-items:center; gap:10px; background:var(--white); border:2px solid var(--accent); border-radius:30px; padding:12px 22px; text-decoration:none; color:#005f6b; font-weight:600; transition:var(--transition); box-shadow:var(--card-shadow); cursor:pointer; font-size:0.9rem; }
        .download-btn:hover { background:var(--accent); color:#fff; transform:translateY(-3px); box-shadow:var(--card-hover-shadow); }
        .download-btn .app-icon { flex-shrink:0; }
        .bottom-nav { width:100%; background:#1a3c2a; color:#d0f0e8; padding:28px 5%; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-start; font-size:0.85rem; line-height:1.8; }
        .bottom-nav a { color:#a6fff2; text-decoration:none; transition:var(--transition); font-weight:500; }
        .bottom-nav a:hover { color:#fff; text-decoration:underline; }
        .bottom-nav .footer-col { flex:1 1 160px; min-width:140px; }
        .bottom-nav .footer-col strong { display:block; color:#74f9ff; font-size:1rem; margin-bottom:6px; }
        .bottom-nav .brand-mobile-link { text-align:center; width:100%; padding-top:14px; border-top:1px solid rgba(255,255,255,0.2); margin-top:8px; font-size:0.9rem; }
        .bottom-nav .brand-mobile-link a { font-weight:700; font-size:1rem; color:#74f9ff; }
        .friend-links-area { background:var(--white); border-radius:var(--radius-lg); padding:16px 20px; margin:20px 5%; box-shadow:var(--card-shadow); display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
        .friend-links-area span { font-size:0.9rem; color:#005f6b; font-weight:600; }
        @media (max-width:1200px) { .hot-movies-grid { grid-template-columns:repeat(4, 1fr); } .stars-grid { grid-template-columns:repeat(3, 1fr); } .main-layout { flex-direction:column; } .sidebar-right { flex:1 1 auto; max-width:100%; position:static; max-height:none; overflow-y:visible; display:grid; grid-template-columns:1fr; gap:18px; } .sidebar-right .detail-grid { grid-template-columns:1fr; } }
        @media (max-width:768px) { .hot-movies-grid { grid-template-columns:repeat(2, 1fr); gap:10px; } .movie-card img { height:160px; } .stars-grid { grid-template-columns:repeat(2, 1fr); } .plot-grid { grid-template-columns:1fr; } .top-nav { flex-wrap:wrap; height:auto; padding:10px 4%; gap:8px; justify-content:center; } .top-nav .nav-links { gap:4px; } .top-nav .nav-links a { font-size:0.75rem; padding:5px 9px; } .top-nav .site-name h1 { font-size:1.2rem; } .banner-section img { max-height:200px; } .sidebar-right { grid-template-columns:1fr; } .week-rank-list { flex-direction:column; } .download-buttons { flex-direction:column; align-items:center; } .bottom-nav { flex-direction:column; text-align:center; } }
        @media (max-width:480px) { .hot-movies-grid { grid-template-columns:repeat(2, 1fr); gap:8px; } .movie-card img { height:130px; } .movie-card .card-info { padding:7px 8px 9px; } .movie-card .card-info .movie-title { font-size:0.8rem; } .movie-card .card-info span { font-size:0.65rem; } .stars-grid { grid-template-columns:repeat(2, 1fr); gap:10px; } .star-card img { width:65px; height:65px; } .plot-card { flex-direction:column; align-items:center; text-align:center; } .plot-card img { width:100%; height:160px; } .detail-card { flex-direction:column; align-items:center; text-align:center; } .detail-card img { width:100%; height:150px; } .section-title { font-size:1.15rem; } }