:root {
      --main-color: #2563eb;
      --accent-color: #06b6d4;
      --bg-color: #f4f8ff;
      --text-color: #0f1e3d;
      --card-shadow: 0 12px 30px rgba(37, 99, 235, 0.12), 0 4px 10px rgba(0,0,0,0.05);
      --hover-shadow: 0 22px 45px rgba(37, 99, 235, 0.25), 0 8px 18px rgba(0,0,0,0.08);
      --radius-card: 1.2rem;
      --font-head: 'Inter', sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    /* 拟物厚重风格，投影明显 */
    .card-movie {
      background: #ffffff;
      border-radius: var(--radius-card);
      box-shadow: var(--card-shadow);
      overflow: hidden;
      transition: all 0.25s ease-in-out;
      border: none;
      position: relative;
      margin-bottom: 1.8rem;
    }

    .card-movie:hover {
      transform: translateY(-8px);
      box-shadow: var(--hover-shadow);
    }

    .card-movie .poster-wrapper {
      position: relative;
      overflow: hidden;
      aspect-ratio: 2 / 3;
      background: #dbeafe;
    }

    .card-movie img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s;
    }

    .card-movie:hover img {
      transform: scale(1.04);
    }

    .corner-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(6, 182, 212, 0.92);
      color: white;
      font-weight: 700;
      font-size: 0.7rem;
      padding: 0.3rem 0.8rem;
      border-radius: 30px;
      backdrop-filter: blur(2px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      z-index: 2;
      letter-spacing: 0.5px;
    }

    .card-body-movie {
      padding: 1rem 1rem 1.2rem;
    }

    .movie-title {
      font-weight: 800;
      font-size: 1.1rem;
      line-height: 1.2;
      margin-bottom: 0.4rem;
      color: var(--text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .movie-meta {
      font-size: 0.8rem;
      color: #64748b;
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .movie-score {
      font-family: 'Courier New', monospace;
      font-weight: 800;
      color: var(--main-color);
      background: rgba(37, 99, 235, 0.1);
      padding: 0.1rem 0.5rem;
      border-radius: 30px;
      font-size: 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .card-movie .fa-star {
      color: #fbbf24;
      font-size: 0.7rem;
    }

    /* 左侧分类栏 */
    .category-sidebar {
      background: #ffffff;
      border-radius: 1.8rem;
      box-shadow: var(--card-shadow);
      padding: 1.5rem 1rem;
      position: sticky;
      top: 80px;
      z-index: 10;
    }

    .category-sidebar h5 {
      font-weight: 800;
      color: var(--text-color);
      margin-bottom: 1.2rem;
      border-left: 5px solid var(--accent-color);
      padding-left: 0.8rem;
    }

    .category-sidebar .list-group-item {
      border: none;
      background: transparent;
      color: #334155;
      font-weight: 500;
      padding: 0.7rem 1rem;
      border-radius: 50px;
      cursor: pointer;
      transition: 0.2s;
    }

    .category-sidebar .list-group-item:hover {
      background: rgba(37, 99, 235, 0.08);
      color: var(--main-color);
      font-weight: 600;
    }

    .category-sidebar .list-group-item.active {
      background: var(--main-color);
      color: white;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

    /* Hero 背景视差 */
    .hero-parallax {
      background-image: url("{随机图片}");
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      position: relative;
      min-height: 75vh;
      display: flex;
      align-items: flex-end;
      padding: 4rem 0 3rem;
      border-radius: 0 0 3rem 3rem;
      box-shadow: inset 0 -40px 80px rgba(15, 30, 61, 0.6);
      isolation: isolate;
    }

    .hero-parallax::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15,30,61,0.25) 0%, rgba(15,30,61,0.85) 100%);
      z-index: -1;
    }

    .hero-title {
      font-weight: 900;
      font-size: clamp(2.2rem, 8vw, 5rem);
      color: white;
      text-shadow: 0 6px 20px rgba(0,0,0,0.5);
      letter-spacing: 0.02em;
      max-width: 800px;
      line-height: 1.2;
    }

    .hero-sub {
      color: rgba(255,255,255,0.9);
      font-weight: 400;
      font-size: 1.3rem;
      max-width: 600px;
      border-left: 4px solid var(--accent-color);
      padding-left: 1rem;
      margin-top: 1rem;
    }

    /* 数字滚动 */
    .stat-number {
      font-family: 'Courier New', monospace;
      font-weight: 800;
      font-size: 2.2rem;
      color: var(--main-color);
    }

    /* 按钮光泽 */
    .btn-gloss {
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, var(--main-color), #1e4fbf);
      border: none;
      color: white;
      font-weight: 600;
      box-shadow: 0 8px 20px rgba(37,99,235,0.35);
      transition: all 0.3s;
      z-index: 1;
    }

    .btn-gloss::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
      transform: skewX(-20deg);
      transition: left 0.5s;
      z-index: 0;
    }

    .btn-gloss:hover::after {
      left: 120%;
    }

    .btn-gloss:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(37,99,235,0.5);
    }

    /* 区块标题 */
    .section-title {
      font-weight: 900;
      font-size: 2rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .section-title i {
      color: var(--accent-color);
      font-size: 1.8rem;
    }

    .section-title .title-underline {
      flex: 1;
      height: 4px;
      background: linear-gradient(90deg, var(--main-color), transparent);
      border-radius: 4px;
      margin-left: 1rem;
    }

    /* 步骤条 */
    .step-list {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      background: white;
      border-radius: 2rem;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      margin: 2rem 0;
    }

    .step-item {
      flex: 1 1 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-weight: 600;
    }

    .step-num {
      width: 60px;
      height: 60px;
      background: var(--main-color);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      font-weight: 900;
      margin-bottom: 1rem;
      box-shadow: 0 8px 18px rgba(37,99,235,0.4);
    }

    /* 友链 */
    .friend-links {
      background: white;
      border-radius: 2rem;
      padding: 1.5rem 2rem;
      box-shadow: var(--card-shadow);
      margin: 3rem 0 2rem;
    }

    /* 弹窗样式 */
    .custom-modal {
      background: rgba(15, 30, 61, 0.7);
      backdrop-filter: blur(6px);
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 1050;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }

    .custom-modal.show {
      opacity: 1;
      visibility: visible;
    }

    .modal-card {
      background: white;
      max-width: 800px;
      width: 100%;
      border-radius: 1.8rem;
      box-shadow: 0 40px 80px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: row;
      overflow: hidden;
      transform: scale(0.9);
      transition: 0.3s;
      max-height: 90vh;
    }

    .custom-modal.show .modal-card {
      transform: scale(1);
    }

    .modal-left {
      width: 40%;
      background: #dbeafe;
    }
    .modal-left img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .modal-right {
      padding: 1.8rem;
      width: 60%;
      overflow-y: auto;
    }

    .close-modal {
      background: transparent;
      border: none;
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      color: #64748b;
      transition: 0.2s;
    }

    .close-modal:hover {
      color: var(--main-color);
    }

    .data-font {
      font-family: 'Courier New', monospace;
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .modal-card {
        flex-direction: column;
        max-height: 90vh;
      }
      .modal-left, .modal-right {
        width: 100%;
      }
      .modal-left {
        max-height: 250px;
      }
      .category-sidebar {
        position: static;
        margin-bottom: 2rem;
      }
    }

    /* navbar 品牌修正 */
    .navbar-brand {
      font-weight: 900;
      font-size: 1.7rem;
      letter-spacing: 0.02em;
    }

    .navbar {
      background: rgba(255,255,255,0.9) !important;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }

/* --- 子页面追加 --- */
/* 本页专属样式 - 关于页特有 */
        .about-hero {
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(6,182,212,0.08) 100%);
            border-radius: var(--radius-card);
            padding: 3rem 2rem;
            margin-bottom: 3rem;
            border: 1px solid rgba(37,99,235,0.1);
        }
.about-section {
            background: #ffffff;
            border-radius: var(--radius-card);
            padding: 2.5rem 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
            transition: box-shadow 0.3s ease;
        }
.about-section:hover {
            box-shadow: var(--hover-shadow);
        }
.about-section h2 {
            color: var(--text-color);
            font-weight: 700;
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.8rem;
            border-bottom: 3px solid var(--main-color);
            display: inline-block;
        }
.about-section h2 i {
            color: var(--main-color);
            margin-right: 0.5rem;
        }
.about-section p {
            color: var(--text-color);
            opacity: 0.85;
            line-height: 1.8;
            margin-bottom: 1rem;
        }
.about-section strong {
            color: var(--main-color);
            font-weight: 600;
        }
.feature-card {
            background: var(--bg-color);
            border-radius: calc(var(--radius-card) * 0.8);
            padding: 1.5rem;
            height: 100%;
            border: 1px solid rgba(37,99,235,0.08);
            transition: all 0.3s ease;
        }
.feature-card:hover {
            border-color: var(--main-color);
            transform: translateY(-4px);
            box-shadow: var(--card-shadow);
        }
.feature-card i {
            font-size: 2rem;
            color: var(--main-color);
            margin-bottom: 1rem;
        }
.feature-card h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }
.feature-card p {
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.75;
            margin-bottom: 0;
            line-height: 1.6;
        }
.timeline-item {
            position: relative;
            padding-left: 2rem;
            padding-bottom: 1.5rem;
            border-left: 2px solid rgba(37,99,235,0.2);
        }
.timeline-item::before {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 0.25rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background: var(--main-color);
        }
.timeline-item h4 {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.3rem;
        }
.timeline-item p {
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.75;
            margin-bottom: 0;
            line-height: 1.6;
        }
.tip-card {
            background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(6,182,212,0.05));
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: calc(var(--radius-card) * 0.8);
            padding: 1.5rem;
            height: 100%;
            transition: all 0.3s ease;
        }
.tip-card:hover {
            border-color: var(--main-color);
            box-shadow: var(--card-shadow);
        }
.tip-card .step-num {
            background: var(--main-color);
            color: #fff;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 0.8rem;
        }
.tip-card h4 {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }
.tip-card p {
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: 0;
            line-height: 1.6;
        }
.stat-badge {
            background: var(--bg-color);
            border-radius: 1rem;
            padding: 1.5rem 1rem;
            text-align: center;
            border: 1px solid rgba(37,99,235,0.08);
        }
.stat-badge .stat-number {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--main-color);
            display: block;
        }
.stat-badge span:last-child {
            font-size: 0.85rem;
            color: var(--text-color);
            opacity: 0.7;
            display: block;
            margin-top: 0.3rem;
        }
.about-hero {
                padding: 2rem 1rem;
            }
.about-section {
                padding: 1.5rem 1rem;
            }
.about-section h2 {
                font-size: 1.3rem;
            }

/* --- 子页面追加 --- */
.disclaimer-page { padding: 4rem 0 5rem; }
.disclaimer-hero { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(6,182,212,.06)); border-radius: var(--radius-card); padding: 2.5rem 2rem; margin-bottom: 2.5rem; border: 1px solid rgba(37,99,235,.12); }
.disclaimer-hero h1 { font-size: 2.2rem; font-weight: 800; color: var(--text-color); margin-bottom: .8rem; }
.disclaimer-hero p { color: #5a6a8a; font-size: 1.05rem; max-width: 800px; }
.disclaimer-section { background: #fff; border-radius: var(--radius-card); padding: 2rem 2.2rem; margin-bottom: 1.8rem; box-shadow: var(--card-shadow); border: 1px solid rgba(37,99,235,.08); }
.disclaimer-section h2 { font-size: 1.4rem; font-weight: 700; color: var(--main-color); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.disclaimer-section h2 i { font-size: 1.2rem; }
.disclaimer-section p { color: #3a4a6a; line-height: 1.8; margin-bottom: 1rem; font-size: .98rem; }
.disclaimer-section ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.disclaimer-section ul li { color: #3a4a6a; line-height: 1.8; margin-bottom: .5rem; font-size: .98rem; }
.disclaimer-section strong { color: var(--text-color); font-weight: 600; }
.disclaimer-update { background: #f0f6ff; border-radius: 12px; padding: 1.2rem 1.5rem; margin-top: 1.5rem; border-left: 4px solid var(--main-color); }
.disclaimer-update p { margin: 0; color: #4a5a7a; font-size: .95rem; }
.disclaimer-hero h1 { font-size: 1.7rem; }
.disclaimer-section { padding: 1.5rem; }
.disclaimer-section h2 { font-size: 1.2rem; }

/* --- 子页面追加 --- */
/* 本页专属样式 */
    .doc-hero {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(6, 182, 212, 0.06) 100%);
      border-radius: var(--radius-card);
      padding: 3rem 2rem;
      margin-bottom: 3rem;
      border: 1px solid rgba(37, 99, 235, 0.15);
    }
.doc-cat-chip {
      display: inline-block;
      padding: 0.35rem 1rem;
      border-radius: 50px;
      background: rgba(37, 99, 235, 0.1);
      color: var(--main-color);
      font-size: 0.85rem;
      font-weight: 600;
      margin: 0.2rem 0.3rem;
      border: 1px solid rgba(37, 99, 235, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }
.doc-cat-chip:hover {
      background: var(--main-color);
      color: #fff;
    }
.doc-cat-chip.active {
      background: var(--main-color);
      color: #fff;
    }
.doc-feature-item {
      padding: 1.5rem;
      border-radius: var(--radius-card);
      background: #fff;
      box-shadow: var(--card-shadow);
      height: 100%;
      transition: box-shadow 0.3s ease;
    }
.doc-feature-item:hover {
      box-shadow: var(--hover-shadow);
    }
.doc-feature-icon {
      font-size: 2rem;
      color: var(--main-color);
      margin-bottom: 0.8rem;
    }
.doc-quote {
      border-left: 4px solid var(--accent-color);
      padding-left: 1.2rem;
      font-style: italic;
      color: var(--text-color);
      opacity: 0.85;
    }
.doc-spec-list li {
      margin-bottom: 0.6rem;
      position: relative;
      padding-left: 1.6rem;
    }
.doc-spec-list li::before {
      content: "\f058";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 0;
      color: var(--main-color);
      font-size: 0.9rem;
    }
.doc-update-tag {
      background: rgba(6, 182, 212, 0.1);
      color: var(--accent-color);
      padding: 0.2rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      border: 1px solid rgba(6, 182, 212, 0.25);
    }

/* --- 子页面追加 --- */
/* 页面专属补充样式 */
        .privacy-hero {
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(6,182,212,0.06) 100%);
            border-radius: var(--radius-card);
            padding: 3rem 2rem;
            margin-bottom: 2.5rem;
            border: 1px solid rgba(37,99,235,0.1);
        }
.privacy-section {
            background: #ffffff;
            border-radius: var(--radius-card);
            padding: 2rem 2.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--card-shadow);
            transition: box-shadow 0.3s ease;
        }
.privacy-section:hover {
            box-shadow: var(--hover-shadow);
        }
.privacy-section h2 {
            color: var(--main-color);
            font-weight: 700;
            font-size: 1.35rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
.privacy-section h2 i {
            color: var(--accent-color);
            font-size: 1.1rem;
        }
.privacy-section h3 {
            color: var(--text-color);
            font-weight: 600;
            font-size: 1.05rem;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
        }
.privacy-section p {
            color: var(--text-color);
            opacity: 0.85;
            line-height: 1.8;
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }
.privacy-section ul {
            padding-left: 1.2rem;
            margin-bottom: 1rem;
        }
.privacy-section li {
            color: var(--text-color);
            opacity: 0.85;
            line-height: 1.8;
            font-size: 0.95rem;
            margin-bottom: 0.4rem;
        }
.privacy-badge {
            display: inline-block;
            background: rgba(37,99,235,0.08);
            color: var(--main-color);
            border: 1px solid rgba(37,99,235,0.15);
            border-radius: 50px;
            padding: 0.2rem 0.9rem;
            font-size: 0.8rem;
            font-weight: 500;
            margin-right: 0.5rem;
            margin-bottom: 0.4rem;
        }
.last-updated {
            color: var(--text-color);
            opacity: 0.6;
            font-size: 0.85rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(37,99,235,0.1);
        }
.contact-card {
            background: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, rgba(6,182,212,0.05) 100%);
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: var(--radius-card);
            padding: 1.5rem 2rem;
            margin-top: 2rem;
        }
.contact-card h3 {
            color: var(--main-color);
            font-weight: 600;
            margin-bottom: 1rem;
        }
.contact-card a {
            color: var(--main-color);
            text-decoration: none;
            font-weight: 500;
        }
.contact-card a:hover {
            color: var(--accent-color);
        }
.privacy-section {
                padding: 1.5rem;
            }
.privacy-hero {
                padding: 2rem 1.2rem;
            }

/* --- Bootstrap 组件配色适配(程序自动补,避免白底黑字) --- */
.accordion-item { background:rgba(0,0,0,.03) !important; color:#0f1e3d !important; border-color:rgba(0,0,0,.12) !important; }
.accordion-button { background:rgba(0,0,0,.03) !important; color:#0f1e3d !important; }
.accordion-body { background:transparent !important; color:#0f1e3d !important; }
.accordion-header { background:transparent !important; }