:root {
      --main: #dc2626;
      --accent: #fb923c;
      --bg: #141013;
      --text: #fef2f2;
      --card-bg: #1f1a1e;
      --shadow: 0 12px 30px rgba(0,0,0,0.7);
    }
    * { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
    body { background: var(--bg); color: var(--text); }
    .navbar-dark { background: linear-gradient(145deg, #1e161b, #120e11); }
    .navbar-brand { font-weight: 900; font-size: 1.7rem; color: var(--text) !important; letter-spacing: -0.5px; }
    .navbar-brand i { color: var(--accent); margin-right: 6px; }
    .nav-link { color: rgba(254,242,242,0.8) !important; font-weight: 500; }
    .nav-link:hover { color: var(--accent) !important; }

    /* 拟物厚重感 */
    .hero-tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 2rem 0; }
    .hero-tag-cloud span {
      background: #241c21; padding: 8px 20px; border-radius: 50px; font-weight: 600;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.5);
      color: #fff2f2;
    }
    .hero-title { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 900; text-shadow: 0 10px 20px rgba(0,0,0,0.8); }
    .section-title { font-size: 2.2rem; font-weight: 800; border-left: 8px solid var(--main); padding-left: 18px; margin: 2rem 0 1.5rem; }
    .movie-card {
      background: var(--card-bg); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 30px rgba(0,0,0,0.6);
      transition: transform 0.25s ease, box-shadow 0.3s; cursor: pointer; border: 1px solid #3a2c33;
      position: relative; height: 100%;
    }
    .movie-card:hover { transform: scale(1.03) translateY(-6px); box-shadow: 0 28px 45px rgba(220,38,38,0.25); }
    .movie-poster { position: relative; overflow: hidden; }
    .movie-poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; transition: transform 0.3s; }
    .movie-card:hover .movie-poster img { transform: scale(1.05); }
    .movie-overlay {
      position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 70%);
      opacity: 0; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px;
    }
    .movie-card:hover .movie-overlay { opacity: 1; }
    .movie-overlay p { margin: 0; font-size: 0.8rem; color: #fbd3d3; }
    .badge-hd { position: absolute; top: 8px; left: 8px; background: #000000aa; backdrop-filter: blur(4px); padding: 2px 10px; border-radius: 30px; font-size: 0.75rem; font-weight: 700; color: #fff; border: 1px solid #666; }
    .badge-4k { position: absolute; top: 8px; right: 8px; background: #dc2626dd; color: white; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; }

    .rank-number { font-size: 2.5rem; font-weight: 900; color: var(--accent); text-shadow: 0 5px 10px #000; }
    .card-title { font-weight: 700; margin-top: 8px; }

    /* 侧边详情栏 */
    .detail-panel {
      position: fixed; top: 0; right: -420px; width: min(400px, 90vw); height: 100%; background: #1f181c; z-index: 1050;
      transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: -20px 0 40px rgba(0,0,0,0.7); padding: 30px 22px; overflow-y: auto;
      border-left: 4px solid var(--main);
    }
    .detail-panel.active { right: 0; }
    .detail-panel img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
    .detail-close { position: absolute; top: 12px; right: 16px; font-size: 2rem; color: #ccc; cursor: pointer; z-index: 9; }
    .detail-close:hover { color: var(--accent); }

    /* 时间线 */
    .timeline { list-style: none; padding-left: 20px; border-left: 3px solid var(--accent); }
    .timeline li { margin: 20px 0; position: relative; }
    .timeline li::before { content: "▹"; color: var(--main); font-weight: 900; position: absolute; left: -26px; }

    /* 数字滚动动画 */
    .stat-number { font-size: 3.5rem; font-weight: 900; color: var(--accent); }

    /* 底部友链 */
    .friend-links a { color: #ccc; margin: 0 12px; text-decoration: none; }
    .friend-links a:hover { color: var(--accent); }

    /* 分类入口 */
    .category-chip { background: #221c20; padding: 10px 22px; border-radius: 60px; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.1); transition: 0.15s; }
    .category-chip:hover { background: var(--main); color: #fff; transform: translateY(-2px); }

    /* 渐显占位 */
    .lazy-fade { background: #2e2228; position: relative; overflow: hidden; }
    .lazy-fade img { opacity: 0; transition: opacity 0.5s; }
    .lazy-fade img.loaded { opacity: 1; }
    .placeholder-glow { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #41333b, transparent); animation: shimmer 1.5s infinite; }
    @keyframes shimmer { 0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} }

    .btn-watch { background: var(--main); border: none; font-weight: 600; padding: 6px 14px; border-radius: 30px; color: white; }

/* --- 子页面追加 --- */
/* 页面级微调：复用站点变量，仅补充榜单特有样式 */
    .rank-hero {
      padding: 2.5rem 0 1.5rem;
      border-bottom: 1px solid rgba(220,38,38,0.25);
    }
.rank-hero .lead {
      color: rgba(254,242,242,0.7);
      font-weight: 400;
      letter-spacing: 0.2px;
    }
.ranking-section {
      margin-top: 2rem;
    }
.ranking-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1.5rem;
      border-left: 5px solid var(--main);
      padding-left: 1rem;
    }
.ranking-header h2 {
      font-size: 1.9rem;
      font-weight: 800;
      margin: 0;
      color: var(--text);
      letter-spacing: -0.3px;
    }
.ranking-header span {
      color: var(--accent);
      font-weight: 600;
      font-size: 0.95rem;
      background: rgba(251,146,60,0.12);
      padding: 0.25rem 0.8rem;
      border-radius: 30px;
    }
.rank-item {
      background: var(--card-bg);
      border-radius: 18px;
      padding: 1rem 1.2rem;
      margin-bottom: 0.8rem;
      display: flex;
      align-items: center;
      gap: 1.2rem;
      transition: transform 0.2s ease, border-color 0.2s;
      border: 1px solid rgba(255,255,255,0.04);
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
.rank-item:hover {
      transform: translateY(-2px);
      border-color: rgba(220,38,38,0.35);
    }
.rank-info {
      flex: 1;
    }
.rank-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.15rem;
      letter-spacing: -0.2px;
    }
.rank-meta {
      font-size: 0.9rem;
      color: rgba(254,242,242,0.6);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
.rank-meta i {
      color: var(--accent);
      width: 16px;
      font-size: 0.8rem;
    }
.rank-tag {
      background: rgba(220,38,38,0.2);
      color: #fecaca;
      padding: 0.15rem 0.6rem;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 8px;
    }
.score-badge {
      background: rgba(251,146,60,0.18);
      color: var(--accent);
      font-weight: 700;
      padding: 0.2rem 0.7rem;
      border-radius: 30px;
      font-size: 0.9rem;
      letter-spacing: 0.3px;
    }
.rank-poster {
      width: 70px;
      height: 95px;
      object-fit: cover;
      border-radius: 12px;
      background: #2a2227;
      box-shadow: 0 6px 14px rgba(0,0,0,0.5);
    }
.category-chip.active, .category-chip:hover {
      background: var(--main);
      border-color: var(--main);
      color: #fff;
    }
.rank-note {
      background: rgba(220,38,38,0.08);
      border-left: 4px solid var(--main);
      padding: 1rem 1.2rem;
      border-radius: 0 16px 16px 0;
      margin: 2.5rem 0 1rem;
      color: rgba(254,242,242,0.75);
      font-size: 0.95rem;
    }
.timeline-badge {
      background: var(--accent);
      color: #141013;
      font-weight: 700;
      padding: 0.1rem 0.7rem;
      border-radius: 40px;
      font-size: 0.75rem;
    }
.footer-rank-link a {
      color: rgba(254,242,242,0.7);
      margin: 0 0.5rem;
      text-decoration: none;
    }
.footer-rank-link a:hover {
      color: var(--accent);
    }
/* 确保没有白底组件泄漏 */
    .card, .card-body, .form-control, .list-group-item { background: transparent; color: var(--text); }

/* --- 子页面追加 --- */
.guide-hero {
            background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(20, 16, 19, 0.9) 100%), var(--bg);
            padding: 80px 0 60px;
            text-align: center;
            border-bottom: 1px solid rgba(251, 146, 60, 0.2);
        }
.guide-hero h1 {
            font-size: 2.8rem;
            font-weight: 900;
            color: var(--text);
            margin-bottom: 20px;
        }
.guide-hero h1 span {
            color: var(--accent);
        }
.guide-hero p {
            color: rgba(254, 242, 242, 0.8);
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
            line-height: 1.7;
        }
.guide-section {
            padding: 60px 0;
            border-bottom: 1px solid rgba(251, 146, 60, 0.1);
        }
.guide-section:last-child {
            border-bottom: none;
        }
.guide-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 30px;
            height: 100%;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
            border: 1px solid rgba(251, 146, 60, 0.1);
        }
.guide-card:hover {
            transform: translateY(-5px);
        }
.guide-card .icon-box {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--main), var(--accent));
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.3rem;
            color: #fff;
        }
.guide-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 12px;
        }
.guide-card p {
            color: rgba(254, 242, 242, 0.7);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
        }
.guide-card ul {
            padding-left: 20px;
            margin-bottom: 0;
        }
.guide-card ul li {
            color: rgba(254, 242, 242, 0.7);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 5px;
        }
.step-container {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
.step-item {
            flex: 1;
            min-width: 250px;
            text-align: center;
            padding: 30px 20px;
        }
.step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--main), var(--accent));
            color: #fff;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 1.1rem;
        }
.faq-item {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 20px 25px;
            margin-bottom: 15px;
            border-left: 3px solid var(--main);
        }
.faq-item h4 {
            color: var(--text);
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 10px;
        }
.faq-item p {
            color: rgba(254, 242, 242, 0.7);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 0;
        }
.tip-box {
            background: rgba(251, 146, 60, 0.08);
            border: 1px solid rgba(251, 146, 60, 0.3);
            border-radius: 10px;
            padding: 15px 20px;
            margin-top: 20px;
        }
.tip-box p {
            color: var(--accent);
            margin-bottom: 0;
            font-size: 0.95rem;
        }
.tip-box i {
            margin-right: 8px;
        }
.guide-hero h1 {
                font-size: 2rem;
            }
.guide-card {
                margin-bottom: 20px;
            }