:root {
      --brand-primary: #dc2626;
      --brand-accent: #fb923c;
      --brand-bg: #141013;
      --brand-text: #fef2f2;
      --shadow-heavy: 0 12px 28px rgba(0,0,0,0.7), 0 4px 12px rgba(220,38,38,0.2);
      --card-radius: 0.75rem;
    }
    body {
      background-color: var(--brand-bg);
      color: var(--brand-text);
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: 0.01em;
    }
    h1,h2,h3,h4,h5 {
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .navbar {
      background: linear-gradient(180deg, rgba(20,16,19,0.95) 0%, rgba(20,16,19,0.85) 80%);
      backdrop-filter: blur(10px);
      border-bottom: 2px solid #dc262644;
      box-shadow: 0 4px 30px rgba(0,0,0,0.5);
      padding: 0.8rem 0;
      font-weight: 600;
    }
    .navbar-brand {
      font-size: 1.9rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 20px #dc2626aa, 0 0 10px #fb923c;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: -0.5px;
    }
    .navbar-brand i {
      color: var(--brand-accent);
      font-size: 2rem;
    }
    .nav-link {
      color: rgba(254,242,242,0.85);
      font-weight: 500;
      margin: 0 0.4rem;
      border-radius: 30px;
      transition: all 0.2s;
    }
    .nav-link:hover {
      color: #fff;
      background: #dc2626aa;
      transform: translateY(-2px);
    }
    .hero-typewriter {
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: radial-gradient(circle at 30% 20%, #fb923c33, transparent 70%);
      padding: 2.5rem 1rem;
    }
    .typewriter-line {
      font-size: calc(1.8rem + 1.2vw);
      font-weight: 900;
      color: #fff;
      text-shadow: 0 0 25px #dc2626, 0 0 45px #fb923c;
      border-right: 3px solid var(--brand-accent);
      white-space: nowrap;
      overflow: hidden;
      width: 14ch;
      animation: typing 3s steps(14) forwards, blink-caret 0.75s step-end infinite;
      margin-bottom: 0.5rem;
    }
    @keyframes typing { from { width: 0 } to { width: 14ch } }
    @keyframes blink-caret { 50% { border-color: transparent } }
    .btn-glow {
      background: linear-gradient(145deg, var(--brand-primary), #b91c1c);
      border: none;
      color: white;
      font-weight: 700;
      padding: 0.6rem 1.8rem;
      border-radius: 40px;
      box-shadow: 0 4px 20px #dc2626;
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: 0.3s ease;
    }
    .btn-glow::before {
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 60%; height: 100%;
      background: linear-gradient(120deg, transparent, #ffffff88, transparent);
      transform: skewX(-25deg);
      transition: 0.7s;
    }
    .btn-glow:hover::before { left: 130% }
    .btn-glow:hover { transform: translateY(-3px); box-shadow: 0 8px 30px #fb923c; }
    .section-title {
      font-size: 2rem;
      font-weight: 800;
      border-left: 8px solid var(--brand-primary);
      padding-left: 1.2rem;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
      margin-bottom: 2rem;
    }
    .card-film {
      background: #1f1a1f;
      border-radius: var(--card-radius);
      box-shadow: var(--shadow-heavy);
      border: 1px solid #fb923c33;
      transition: 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
      height: 100%;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transform-style: preserve-3d;
    }
    .card-film:hover { transform: translateY(-10px) rotateY(0.5deg); box-shadow: 0 20px 30px rgba(220,38,38,0.3), 0 8px 15px black; }
    .card-film .poster-wrapper {
      position: relative;
      overflow: hidden;
      background: #2a232a;
    }
    .poster-wrapper img {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      display: block;
      background: #241f24;
      transition: transform 0.6s, opacity 0.6s;
      opacity: 0.9;
    }
    .card-film:hover .poster-wrapper img { transform: scale(1.06); opacity: 1; }
    .badge-ep {
      position: absolute;
      top: 8px;
      left: 8px;
      background: #dc2626dd;
      color: white;
      font-weight: 700;
      font-size: 0.75rem;
      padding: 0.2rem 0.7rem;
      border-radius: 20px;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 10px black;
      letter-spacing: 0.3px;
      z-index: 5;
    }
    .rating-stars {
      color: #fb923c;
      font-size: 0.85rem;
      margin-bottom: 0.2rem;
    }
    .film-meta {
      padding: 0.9rem 1rem 1rem;
    }
    .film-title {
      font-weight: 700;
      font-size: 1.15rem;
      margin-bottom: 4px;
      color: white;
      line-height: 1.3;
    }
    .film-tags {
      font-size: 0.75rem;
      color: #fde0c0;
      opacity: 0.8;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .rank-number {
      font-weight: 900;
      font-size: 1.8rem;
      background: linear-gradient(145deg, var(--brand-primary), var(--brand-accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 6px;
    }
    .section-scroll {
      display: flex;
      overflow-x: auto;
      gap: 1rem;
      padding-bottom: 0.5rem;
      scroll-snap-type: x mandatory;
    }
    .section-scroll > * { scroll-snap-align: start; min-width: 160px; max-width: 160px; }
    .card-film.landscape { max-width: 180px; }
    .footer {
      background: #1a141a;
      border-top: 2px solid #dc2626;
      padding: 2.5rem 0 1.5rem;
      margin-top: 4rem;
    }
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .friend-links {
      background: #1e181e;
      padding: 1.2rem;
      border-radius: 50px;
      margin: 1.5rem 0;
      text-align: center;
    }
    .step-guide {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      justify-content: center;
      margin: 2rem 0;
    }
    .step-item {
      background: #251e25;
      border-radius: 40px;
      padding: 1rem 2rem;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      font-weight: 600;
      border: 1px solid #fb923c33;
      flex: 1 1 150px;
    }
    /* flip card */
    .flip-card { perspective: 1200px; }
    .flip-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    .card-film.flipped .flip-inner { transform: rotateY(180deg); }
    .flip-front, .flip-back {
      backface-visibility: hidden;
      width: 100%;
    }
    .flip-back {
      position: absolute;
      top: 0; left: 0;
      transform: rotateY(180deg);
      background: #221b22;
      height: 100%;
      padding: 1.2rem;
      border-radius: var(--card-radius);
      overflow-y: auto;
      box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    }

/* --- 子页面追加 --- */
.doc-hero { padding: 60px 0 40px; text-align: center; }
.doc-hero h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; }
.doc-hero h1 span { color: var(--brand-primary); }
.doc-hero p { font-size: 1.1rem; color: rgba(254,242,242,.7); max-width: 700px; margin: 0 auto; line-height: 1.8; }
.doc-category { padding: 30px 0 10px; }
.doc-category h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.doc-category h2 i { color: var(--brand-primary); }
.doc-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--card-radius); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; margin-bottom: 24px; }
.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-heavy); }
.doc-card .card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.doc-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.doc-card:hover .card-img-wrap img { transform: scale(1.05); }
.doc-card .card-body { padding: 18px; }
.doc-card .card-body h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.doc-card .card-body p { font-size: .9rem; color: rgba(254,242,242,.65); line-height: 1.6; margin-bottom: 10px; }
.doc-card .badge-ep { margin-right: 6px; }
.doc-card .rating-stars { color: var(--brand-accent); font-size: .85rem; }
.doc-feature { background: linear-gradient(135deg, rgba(220,38,38,.15) 0%, rgba(251,146,60,.1) 100%); border: 1px solid rgba(220,38,38,.3); border-radius: var(--card-radius); padding: 40px 30px; margin: 50px 0; }
.doc-feature h2 { font-size: 1.8rem; font-weight: 800; text-align: center; margin-bottom: 30px; }
.doc-feature h2 span { color: var(--brand-primary); }
.doc-feature .feature-item { text-align: center; padding: 20px; }
.doc-feature .feature-item i { font-size: 2.5rem; color: var(--brand-accent); margin-bottom: 15px; }
.doc-feature .feature-item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.doc-feature .feature-item p { font-size: .9rem; color: rgba(254,242,242,.7); line-height: 1.6; }
.doc-guide { padding: 30px 0 50px; }
.doc-guide h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.doc-guide h2 i { color: var(--brand-primary); }
.step-item:hover { transform: translateY(-4px); }
.step-item .step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin: 0 auto 12px; }
.step-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.step-item p { font-size: .85rem; color: rgba(254,242,242,.65); line-height: 1.5; margin: 0; }
.doc-tips { background: rgba(255,255,255,.03); border-left: 4px solid var(--brand-primary); border-radius: 0 var(--card-radius) var(--card-radius) 0; padding: 20px 24px; margin: 30px 0; }
.doc-tips h4 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.doc-tips p { font-size: .9rem; color: rgba(254,242,242,.7); line-height: 1.7; margin: 0; }

/* --- 子页面追加 --- */
/* 排行榜页面专用微调 —— 整体延续 :root 变量，仅针对榜单布局做补充 */
        .rank-hero {
            padding: 3rem 0 2rem;
            border-bottom: 1px solid rgba(220,38,38,0.2);
        }
.rank-hero h1 {
            font-size: 2.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }
.rank-hero .lead {
            color: var(--brand-text);
            opacity: 0.85;
            max-width: 640px;
        }
.rank-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem 1.2rem;
            padding: 0.5rem 0 1rem;
            border-bottom: 1px solid rgba(220,38,38,0.15);
            margin-bottom: 2rem;
        }
.rank-tabs a {
            color: var(--brand-text);
            opacity: 0.7;
            font-weight: 500;
            text-decoration: none;
            padding: 0.35rem 0.9rem;
            border-radius: 30px;
            background: rgba(220,38,38,0.08);
            border: 1px solid transparent;
            transition: all 0.2s ease;
        }
.rank-tabs a:hover, .rank-tabs a.active {
            opacity: 1;
            background: rgba(220,38,38,0.25);
            border-color: var(--brand-primary);
            color: var(--brand-text);
        }
.rank-list {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }
.rank-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: rgba(255,255,255,0.03);
            padding: 0.8rem 1rem;
            border-radius: var(--card-radius);
            border-left: 4px solid var(--brand-primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }
.rank-item:hover {
            transform: translateX(6px);
            background: rgba(220,38,38,0.06);
        }
.rank-info {
            flex: 1;
        }
.rank-title {
            font-weight: 700;
            font-size: 1.15rem;
            margin-bottom: 0.2rem;
        }
.rank-desc {
            font-size: 0.9rem;
            opacity: 0.7;
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
.rank-desc i {
            margin-right: 0.25rem;
        }
.rating-stars i {
            color: var(--brand-accent);
        }
.rank-badge {
            background: var(--brand-primary);
            color: white;
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            margin-left: 0.5rem;
            font-weight: 600;
        }
.section-title i {
            color: var(--brand-accent);
            margin-right: 0.4rem;
        }

/* --- 子页面追加 --- */
/* 确保 Bootstrap 组件不破坏深色风格 */
    .card, .card-body, .form-control, .list-group-item, .accordion-item, .accordion-button, .accordion-body {
      background: var(--card-bg, #1c181c);
      color: var(--brand-text, #fef2f2);
      border-color: var(--border-color, #3a2a2a);
    }
.form-control::placeholder { color: rgba(255,255,255,0.4); }
.accordion-button:not(.collapsed) {
      background: var(--brand-primary, #dc2626);
      color: #fff;
    }
/* 本页增强 */
    .about-hero {
      background: radial-gradient(circle at 20% 30%, rgba(220,38,38,0.15), transparent 60%);
      border-bottom: 1px solid rgba(220,38,38,0.2);
    }
.about-section-title {
      border-left: 4px solid var(--brand-primary);
      padding-left: 1rem;
      margin: 2.5rem 0 1.5rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
.feature-icon {
      width: 48px; height: 48px;
      background: rgba(220,38,38,0.15);
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-accent);
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }
.timeline-card {
      background: rgba(0,0,0,0.2);
      border: 1px solid rgba(220,38,38,0.15);
      border-radius: var(--card-radius);
      padding: 1.5rem;
      height: 100%;
      transition: transform .2s;
    }
.timeline-card:hover { transform: translateY(-4px); }
.badge-calendar {
      background: var(--brand-primary);
      color: #fff;
      font-weight: 600;
      padding: 0.25rem 0.9rem;
      border-radius: 30px;
      font-size: 0.8rem;
      display: inline-block;
      margin-bottom: 0.75rem;
    }
.footnote {
      color: rgba(254,242,242,0.6);
      font-size: 0.9rem;
    }

/* --- 子页面追加 --- */
.disclaimer-wrap { padding: 4rem 0 5rem; }
.disclaimer-hero { text-align: center; padding: 3rem 0 2.5rem; }
.disclaimer-hero h1 { font-size: 2.6rem; font-weight: 800; color: var(--brand-text); margin-bottom: 0.8rem; }
.disclaimer-hero h1 span { color: var(--brand-primary); }
.disclaimer-hero p { color: rgba(254,242,242,0.7); max-width: 680px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; }
.disclaimer-section { background: rgba(20,16,19,0.6); border: 1px solid rgba(220,38,38,0.15); border-radius: var(--card-radius); padding: 2rem 2.2rem; margin-bottom: 1.8rem; transition: border-color 0.3s ease; }
.disclaimer-section:hover { border-color: rgba(220,38,38,0.4); }
.disclaimer-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.6rem; }
.disclaimer-section h2 i { color: var(--brand-primary); font-size: 1.1rem; }
.disclaimer-section p, .disclaimer-section li { color: rgba(254,242,242,0.85); line-height: 1.9; font-size: 0.98rem; }
.disclaimer-section ul, .disclaimer-section ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.disclaimer-section li { margin-bottom: 0.45rem; }
.disclaimer-section strong { color: var(--brand-text); }
.disclaimer-highlight { background: rgba(220,38,38,0.08); border-left: 3px solid var(--brand-primary); padding: 1rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.2rem 0; }
.disclaimer-highlight p { margin: 0; }
.disclaimer-date { text-align: center; color: rgba(254,242,242,0.5); font-size: 0.9rem; margin-top: 2.5rem; }
.disclaimer-wrap { padding: 2.5rem 0 3.5rem; }
.disclaimer-hero h1 { font-size: 1.9rem; }
.disclaimer-section { padding: 1.4rem 1.2rem; }
.disclaimer-section h2 { font-size: 1.15rem; }

/* --- 子页面追加 --- */
/* 确保所有 Bootstrap 卡片、表单等组件与站点暗色主题匹配 */
        .card, .card-body, .card-header, .card-footer,
        .form-control, .form-select, .input-group-text,
        .table, .list-group-item, .accordion-item, .accordion-button, .accordion-body,
        .modal-content, .modal-header, .modal-body, .dropdown-menu, .dropdown-item,
        .nav-link, .navbar, .navbar-brand, .btn-light, .btn-outline-* {
            background-color: #1e181c; /* 深色背景，接近站点 --brand-bg 的加深版 */
            color: var(--brand-text);
            border-color: #3a2e34;
        }
.list-group-item {
            background-color: #1e181c;
            border-color: #3a2e34;
        }
background: linear-gradient(145deg, rgba(20,16,19,0.9), rgba(30,24,28,0.95)), url(' {随机图片}
.privacy-hero h1 {
            font-weight: 800;
            color: var(--brand-text);
            text-shadow: 0 4px 12px rgba(0,0,0,0.7);
        }
.privacy-section {
            background: rgba(20,16,19,0.6);
            border-radius: var(--card-radius);
            padding: 2rem 1.5rem;
            box-shadow: var(--shadow-heavy);
            margin-bottom: 2rem;
            border-left: 4px solid var(--brand-primary);
        }
.privacy-section h2 {
            color: var(--brand-accent);
            font-weight: 700;
            font-size: 1.6rem;
            margin-bottom: 1.2rem;
            border-bottom: 2px solid rgba(220,38,38,0.3);
            padding-bottom: 0.5rem;
        }
.privacy-section h3 {
            color: var(--brand-text);
            font-weight: 600;
            margin-top: 1.5rem;
            font-size: 1.2rem;
        }
.privacy-section p, .privacy-section li {
            color: rgba(254, 242, 242, 0.85);
            line-height: 1.8;
        }
.privacy-section ul {
            padding-left: 1.2rem;
        }
.privacy-section a {
            color: var(--brand-accent);
        }
.footer a {
            color: var(--brand-text);
            text-decoration: none;
        }
.footer a:hover {
            color: var(--brand-accent);
        }
.friend-links a {
            margin-right: 1rem;
        }
.active-page {
            color: var(--brand-accent) !important;
            font-weight: 600;
        }
.nav-link i {
            margin-right: 4px;
        }

/* --- Bootstrap 组件配色适配(程序自动补,避免白底黑字) --- */
.accordion-header { background:transparent !important; }