:root {
            --color-deep: #625772;
            --color-pink: #f9a1bc;
            --color-cream: #fefaec;
            --color-teal: #a9eee6;
            --color-white: #ffffff;
            --color-dark: #2d2438;
            --color-gray: #6b5e7a;
            --color-light-gray: #f5f2f0;
            --color-border: #e8e0e8;
            --color-shadow: rgba(98,87,114,0.10);
            --color-shadow-lg: rgba(98,87,114,0.16);
            --font-heading: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
            --font-body: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
            --max-width: 1340px;
            --nav-height: 60px;
            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--nav-height) + 16px);
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body {
            font-family: var(--font-body);
            background-color: #faf8f6;
            color: #3a3042;
            line-height: 1.6;
            min-height: 100vh;
            background-image:
                radial-gradient(ellipse at 18% 8%, rgba(169,238,230,0.28) 0%, transparent 55%),
                radial-gradient(ellipse at 78% 28%, rgba(249,161,188,0.14) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 55%, rgba(254,250,236,0.5) 0%, transparent 50%);
            background-attachment: fixed;
        }
        .top-nav { width:100%; background:rgba(255,255,255,0.97); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:1000; height:var(--nav-height); box-shadow:0 1px 8px var(--color-shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
        .top-nav-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 20px; gap:12px; }
        .nav-left { display:flex; align-items:center; gap:6px; flex-shrink:0; }
        .nav-logo-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--color-teal) 0%, #7dd8cf 100%); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(169,238,230,0.4); }
        .nav-logo-icon svg { width:20px; height:20px; }
        .nav-left h1 { font-size:1.25rem; font-weight:700; color:var(--color-deep); letter-spacing:0.5px; white-space:nowrap; font-family:var(--font-heading); }
        .nav-center { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
        .nav-center a { display:inline-block; padding:7px 13px; text-decoration:none; color:var(--color-gray); font-size:0.88rem; font-weight:500; border-radius:20px; transition:var(--transition); white-space:nowrap; letter-spacing:0.3px; }
        .nav-center a:hover, .nav-center a:focus-visible { background:var(--color-teal); color:#1a4a44; outline:none; }
        .nav-center a.nav-hot { background:var(--color-pink); color:#fff; font-weight:600; animation:navPulse 2.5s ease-in-out infinite; }
        @keyframes navPulse { 0%,100% { box-shadow:0 0 0 0 rgba(249,161,188,0.5); } 50% { box-shadow:0 0 0 10px rgba(249,161,188,0); } }
        .nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--color-deep) 0%, #7d6e94 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); box-shadow:0 2px 8px rgba(98,87,114,0.3); flex-shrink:0; }
        .user-avatar:hover { transform:scale(1.08); box-shadow:0 4px 14px rgba(98,87,114,0.4); }
        .login-text { font-size:0.85rem; color:var(--color-deep); font-weight:500; cursor:pointer; white-space:nowrap; transition:var(--transition); }
        .login-text:hover { color:#3a2848; }
        .mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--color-deep); font-size:1.5rem; line-height:1; }
        .banner-section { width:100%; max-width:var(--max-width); margin:20px auto 0; padding:0 20px; }
        .banner-wrapper { position:relative; width:100%; height:400px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 8px 32px var(--color-shadow-lg); background:linear-gradient(135deg, #e8ddd0 0%, #d5c8b8 30%, #c4b5a5 60%, #b8a898 100%); }
        .banner-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }
        .banner-overlay { position:absolute; bottom:0; left:0; right:0; padding:44px 36px; background:linear-gradient(transparent 0%, rgba(45,36,56,0.72) 50%, rgba(30,22,38,0.88) 100%); color:#fff; pointer-events:none; }
        .banner-overlay h2 { font-size:2rem; font-weight:700; margin-bottom:6px; letter-spacing:0.6px; font-family:var(--font-heading); }
        .banner-overlay p { font-size:1rem; opacity:0.9; max-width:550px; line-height:1.5; }
        .banner-badge { display:inline-block; background:var(--color-pink); color:#fff; padding:5px 14px; border-radius:20px; font-size:0.8rem; font-weight:600; margin-bottom:10px; letter-spacing:0.5px; }
        .banner-dots { position:absolute; bottom:16px; right:36px; display:flex; gap:8px; z-index:2; }
        .banner-dots span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:var(--transition); }
        .banner-dots span.active { background:#fff; width:28px; border-radius:10px; }
        .main-layout { max-width:var(--max-width); margin:0 auto; display:flex; gap:24px; padding:24px 20px; }
        .content-main { flex:1; min-width:0; }
        .sidebar-right { width:370px; flex-shrink:0; display:flex; flex-direction:column; gap:18px; }
        .section-block { background:var(--color-white); border-radius:var(--radius-lg); padding:24px; box-shadow:0 2px 12px var(--color-shadow); border:1px solid var(--color-border); margin-bottom:20px; transition:var(--transition); }
        .section-block:hover { box-shadow:0 4px 20px var(--color-shadow-lg); }
        .section-title { font-size:1.3rem; font-weight:700; color:var(--color-deep); margin-bottom:18px; padding-bottom:10px; border-bottom:3px solid var(--color-teal); display:inline-block; letter-spacing:0.4px; font-family:var(--font-heading); }
        .section-title-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
        .section-title-bar .section-title { margin-bottom:0; padding-bottom:0; border-bottom:none; }
        .section-tag { display:inline-block; background:var(--color-cream); color:#8a7050; padding:4px 12px; border-radius:14px; font-size:0.78rem; font-weight:600; letter-spacing:0.4px; }
        .featured-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
        .featured-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; box-shadow:0 4px 18px var(--color-shadow-lg); transition:var(--transition); background:#e8e4e0; aspect-ratio:16/9; display:flex; align-items:flex-end; }
        .featured-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(98,87,114,0.25); }
        .featured-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
        .featured-card-overlay { position:relative; z-index:1; width:100%; padding:24px 20px; background:linear-gradient(transparent 0%, rgba(30,22,38,0.78) 55%, rgba(20,14,28,0.92) 100%); color:#fff; }
        .featured-card-overlay .f-badge { display:inline-block; background:var(--color-pink); color:#fff; padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:600; margin-bottom:6px; letter-spacing:0.4px; }
        .featured-card-overlay h3 { font-size:1.2rem; font-weight:700; letter-spacing:0.4px; font-family:var(--font-heading); margin-bottom:2px; }
        .featured-card-overlay .f-meta { font-size:0.73rem; opacity:0.9; line-height:1.5; }
        .movie-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
        .movie-card { background:var(--color-white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--color-border); transition:var(--transition); cursor:pointer; box-shadow:0 1px 6px var(--color-shadow); display:flex; flex-direction:column; }
        .movie-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(98,87,114,0.2); border-color:var(--color-teal); }
        .movie-card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:#e8e4e0; transition:var(--transition); max-height:360px; }
        .movie-card:hover img { transform:scale(1.04); }
        .movie-card-info { padding:10px 10px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
        .movie-card-info h4 { font-size:0.85rem; font-weight:600; color:var(--color-deep); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--font-heading); }
        .movie-card-info .meta { font-size:0.68rem; color:#8a7e95; line-height:1.4; }
        .movie-card-info .meta span { display:block; }
        .movie-card-info .type-badge { display:inline-block; background:var(--color-teal); color:#1a4a44; padding:2px 8px; border-radius:10px; font-size:0.66rem; font-weight:600; margin-top:4px; align-self:flex-start; }
        .rank-podium { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:16px; }
        .rank-podium-item { text-align:center; background:#fdfcf9; border-radius:var(--radius); padding:16px 10px; border:2px solid transparent; transition:var(--transition); cursor:pointer; position:relative; }
        .rank-podium-item.gold { border-color:#f0c060; background:linear-gradient(180deg, #fffef5 0%, #fef9e7 100%); box-shadow:0 4px 16px rgba(210,160,40,0.2); order:2; }
        .rank-podium-item.silver { border-color:#c8c8c8; background:linear-gradient(180deg, #fdfdfd 0%, #f5f5f5 100%); box-shadow:0 3px 12px rgba(160,160,160,0.18); order:1; }
        .rank-podium-item.bronze { border-color:#d4a878; background:linear-gradient(180deg, #fefaf6 0%, #fdf5ec 100%); box-shadow:0 3px 12px rgba(180,120,70,0.18); order:3; }
        .rank-podium-item:hover { transform:translateY(-5px); box-shadow:0 8px 24px rgba(98,87,114,0.2); }
        .podium-medal { font-size:2rem; display:block; margin-bottom:4px; }
        .podium-rank-num { font-size:1.6rem; font-weight:700; color:var(--color-deep); font-family:var(--font-heading); }
        .rank-podium-item img { width:70px; height:98px; object-fit:cover; border-radius:6px; margin:8px auto; display:block; background:#e8e4e0; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
        .rank-podium-item h5 { font-size:0.9rem; font-weight:600; color:var(--color-deep); }
        .rank-podium-item .rp-meta { font-size:0.7rem; color:#8a7e95; }
        .rank-rest-list { display:flex; flex-direction:column; gap:6px; }
        .rank-rest-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-sm); background:#fdfcf9; transition:var(--transition); cursor:pointer; border:1px solid transparent; }
        .rank-rest-item:hover { background:var(--color-cream); border-color:#e8dcc8; }
        .rank-rest-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; flex-shrink:0; background:#c5bdb5; color:#5a4e40; }
        .rank-rest-item img { width:38px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#e8e4e0; }
        .rank-rest-info h5 { font-size:0.82rem; font-weight:600; color:var(--color-deep); line-height:1.3; }
        .rank-rest-info .rr-meta { font-size:0.68rem; color:#8a7e95; }
        .star-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
        .star-card { text-align:center; background:var(--color-white); border-radius:var(--radius); padding:16px 10px; border:1px solid var(--color-border); transition:var(--transition); cursor:pointer; box-shadow:0 1px 6px var(--color-shadow); }
        .star-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(98,87,114,0.18); border-color:var(--color-pink); }
        .star-card img { width:80px; height:80px; object-fit:cover; border-radius:50%; margin:0 auto 10px; display:block; background:#e8e4e0; border:3px solid var(--color-teal); }
        .star-card h4 { font-size:0.9rem; font-weight:600; color:var(--color-deep); }
        .star-card .s-works { font-size:0.7rem; color:#8a7e95; margin-top:2px; }
        .sidebar-right .section-block { padding:16px; }
        .sidebar-right .section-title { font-size:1.05rem; margin-bottom:12px; }
        .sidebar-right .star-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
        .sidebar-right .star-card { padding:12px 6px; }
        .sidebar-right .star-card img { width:60px; height:60px; border-width:2px; }
        .sidebar-right .star-card h4 { font-size:0.8rem; }
        .sidebar-right .star-card .s-works { font-size:0.65rem; }
        .plot-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
        .plot-card { background:#fdfcf9; border-radius:var(--radius); padding:16px; border:1px solid var(--color-border); transition:var(--transition); cursor:pointer; }
        .plot-card:hover { border-color:var(--color-teal); box-shadow:0 3px 14px var(--color-shadow); }
        .plot-card h4 { color:var(--color-deep); font-weight:600; margin-bottom:6px; font-size:0.95rem; font-family:var(--font-heading); }
        .plot-card p { font-size:0.8rem; color:#6b5e7a; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
        .detail-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
        .detail-card { display:flex; gap:12px; background:#fdfcf9; border-radius:var(--radius); padding:14px; border:1px solid var(--color-border); transition:var(--transition); cursor:pointer; }
        .detail-card:hover { border-color:var(--color-pink); box-shadow:0 3px 14px var(--color-shadow); }
        .detail-card img { width:100px; height:140px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; background:#e8e4e0; }
        .detail-card .d-info h4 { font-size:0.9rem; font-weight:600; color:var(--color-deep); margin-bottom:4px; font-family:var(--font-heading); }
        .detail-card .d-info .d-meta { font-size:0.72rem; color:#8a7e95; line-height:1.5; }
        .sidebar-card { background:var(--color-white); border-radius:var(--radius-lg); padding:20px; box-shadow:0 2px 12px var(--color-shadow); border:1px solid var(--color-border); transition:var(--transition); }
        .sidebar-card:hover { box-shadow:0 4px 20px var(--color-shadow-lg); }
        .sidebar-card h3 { font-size:1.05rem; font-weight:700; color:var(--color-deep); margin-bottom:12px; font-family:var(--font-heading); border-bottom:2px solid var(--color-teal); padding-bottom:8px; }
        .stat-number { font-size:2.2rem; font-weight:700; color:var(--color-deep); letter-spacing:0.5px; }
        .stat-label { font-size:0.8rem; color:#8a7e95; margin-top:2px; }
        .stat-row { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
        .stat-item-box { flex:1; min-width:60px; text-align:center; background:var(--color-cream); border-radius:var(--radius-sm); padding:12px 8px; }
        .stat-item-box .val { font-size:1.4rem; font-weight:700; color:#5a4030; }
        .stat-item-box .lbl { font-size:0.7rem; color:#8a7e95; margin-top:2px; }
        .update-time { font-size:0.72rem; color:#a095a8; margin-top:10px; text-align:right; }
        .sidebar-comment-list { max-height:620px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d5cde0 transparent; }
        .sidebar-comment-list::-webkit-scrollbar { width:5px; }
        .sidebar-comment-list::-webkit-scrollbar-thumb { background:#d5cde0; border-radius:10px; }
        .sidebar-comment-item { padding:10px 0; border-bottom:1px solid #f0e8f0; display:flex; gap:10px; align-items:flex-start; }
        .sidebar-comment-item:last-child { border-bottom:none; }
        .sidebar-comment-item .sc-body { flex:1; }
        .sidebar-comment-item .sc-body .sc-user { font-weight:600; font-size:0.78rem; color:var(--color-deep); }
        .sidebar-comment-item .sc-body .sc-date { font-size:0.68rem; color:#b0a5b8; margin-left:6px; }
        .sidebar-comment-item .sc-body .sc-text { font-size:0.74rem; color:#5a4e62; line-height:1.55; margin-top:3px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
        .download-section { background:linear-gradient(135deg, #fdfcf9 0%, #f8f3ec 50%, #fdfcf9 100%); border-radius:var(--radius-lg); padding:28px 24px; border:2px dashed #e0d5c5; text-align:center; margin-bottom:20px; }
        .download-section h3 { font-size:1.2rem; font-weight:700; color:var(--color-deep); margin-bottom:16px; font-family:var(--font-heading); }
        .download-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
        .download-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:24px; text-decoration:none; font-weight:600; font-size:0.85rem; transition:var(--transition); border:2px solid transparent; cursor:pointer; letter-spacing:0.3px; }
        .download-btn.android { background:#e8f8f0; color:#1a5c3a; border-color:#3ddc84; }
        .download-btn.android:hover { background:#d0f4e2; transform:translateY(-2px); box-shadow:0 4px 14px rgba(61,220,132,0.3); }
        .download-btn.ios { background:#f5f5f5; color:#1a1a1a; border-color:#555; }
        .download-btn.ios:hover { background:#e8e8e8; transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.15); }
        .download-btn.pc { background:#eef3f7; color:#2c3e50; border-color:#52616b; }
        .download-btn.pc:hover { background:#dfe7ef; transform:translateY(-2px); box-shadow:0 4px 14px rgba(82,97,107,0.3); }
        .app-icon { width:22px; height:22px; flex-shrink:0; }
        .bottom-nav { width:100%; background:var(--color-deep); color:#d5cde0; padding:32px 20px 20px; margin-top:20px; border-top:4px solid var(--color-teal); }
        .bottom-nav-inner { max-width:var(--max-width); margin:0 auto; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
        .bottom-nav-col h4 { color:#fff; font-weight:600; margin-bottom:10px; font-size:0.95rem; font-family:var(--font-heading); }
        .bottom-nav-col a { display:block; color:#c5bcd5; text-decoration:none; font-size:0.8rem; padding:3px 0; transition:var(--transition); }
        .bottom-nav-col a:hover { color:var(--color-teal); }
        .bottom-bar { text-align:center; padding-top:20px; margin-top:20px; border-top:1px solid rgba(255,255,255,0.12); font-size:0.75rem; color:#a095b0; max-width:var(--max-width); margin-left:auto; margin-right:auto; }
        .bottom-bar a { color:var(--color-teal); text-decoration:none; font-weight:500; }
        .bottom-bar a:hover { text-decoration:underline; }
        .intro-text { font-size:0.9rem; color:#5a4e62; line-height:1.7; text-align:justify; }
        .intro-highlight { display:inline-block; background:var(--color-teal); color:#1a4a44; padding:2px 8px; border-radius:4px; font-weight:600; font-size:0.82rem; }
        .friend-links-area { background:var(--color-white); border-radius:var(--radius-lg); padding:16px 20px; margin:20px auto; max-width:var(--max-width); box-shadow:0 2px 12px var(--color-shadow); border:1px solid var(--color-border); display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
        .friend-links-area span { font-size:0.9rem; color:var(--color-deep); font-weight:600; }
        @media (max-width:1200px) { .movie-grid { grid-template-columns:repeat(4, 1fr); } .sidebar-right { width:320px; } .featured-row { grid-template-columns:1fr 1fr; } .sidebar-right .star-grid { grid-template-columns:repeat(2, 1fr); } }
        @media (max-width:992px) {
            .main-layout { flex-direction:column; }
            .sidebar-right { width:100%; flex-direction:row; flex-wrap:wrap; gap:14px; }
            .sidebar-right>* { flex:1 1 280px; }
            .sidebar-right .section-block, .sidebar-right .sidebar-card { flex:1 1 280px; }
            .sidebar-right .star-grid { grid-template-columns:repeat(3, 1fr); }
            .movie-grid { grid-template-columns:repeat(4, 1fr); gap:10px; }
            .featured-row { grid-template-columns:1fr 1fr; }
            .star-grid { grid-template-columns:repeat(4, 1fr); }
            .plot-list, .detail-grid { grid-template-columns:1fr 1fr; }
            .banner-wrapper { height:300px; }
            .banner-overlay h2 { font-size:1.5rem; }
            .banner-overlay p { font-size:0.85rem; }
            .nav-center { display:none; }
            .mobile-menu-btn { display:block; }
            .nav-center.mobile-open { display:flex; position:absolute; top:var(--nav-height); left:0; right:0; background:#fff; flex-direction:column; padding:12px 20px; gap:4px; box-shadow:0 8px 20px var(--color-shadow-lg); z-index:999; border-bottom:2px solid var(--color-teal); }
            .nav-center.mobile-open a { width:100%; text-align:center; padding:10px; }
            .rank-podium { grid-template-columns:repeat(3, 1fr); gap:8px; }
        }
        @media (max-width:768px) {
            .movie-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
            .featured-row { grid-template-columns:1fr; gap:10px; }
            .featured-card { aspect-ratio:16/9; }
            .star-grid { grid-template-columns:repeat(3, 1fr); }
            .sidebar-right .star-grid { grid-template-columns:repeat(3, 1fr); }
            .plot-list, .detail-grid { grid-template-columns:1fr; }
            .banner-wrapper { height:240px; border-radius:var(--radius); }
            .banner-overlay { padding:20px 16px; }
            .banner-overlay h2 { font-size:1.2rem; }
            .rank-podium { grid-template-columns:repeat(3, 1fr); gap:6px; }
            .rank-podium-item img { width:50px; height:70px; }
            .rank-podium-item h5 { font-size:0.75rem; }
            .sidebar-right { gap:10px; }
            .sidebar-right>* { flex:1 1 100%; }
        }
        @media (max-width:560px) {
            .movie-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
            .star-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
            .sidebar-right .star-grid { grid-template-columns:repeat(2, 1fr); }
            .banner-wrapper { height:200px; }
            .banner-overlay h2 { font-size:1.05rem; }
            .banner-overlay p { font-size:0.72rem; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
            .section-block { padding:14px; }
            .section-title { font-size:1.05rem; }
            .nav-left h1 { font-size:1rem; }
            .login-text { font-size:0.75rem; }
            .download-btns { flex-direction:column; align-items:center; }
            .bottom-nav-inner { flex-direction:column; gap:16px; }
            .detail-card { flex-direction:column; align-items:center; text-align:center; }
            .detail-card img { width:80px; height:110px; }
            .rank-podium { grid-template-columns:1fr 1fr 1fr; gap:5px; }
            .rank-podium-item { padding:10px 4px; }
            .rank-podium-item img { width:40px; height:56px; }
            .podium-medal { font-size:1.4rem; }
            .featured-card { aspect-ratio:16/9; }
            .featured-card-overlay h3 { font-size:1rem; }
            .featured-card-overlay .f-meta { font-size:0.68rem; }
        }