:root{
        --main:#e50914;
        --accent:#f5c518;
        --bg:#0b0b0f;
        --text:#f5f5f7;
        --font-title:'Noto Serif SC', 'Songti SC', 'SimSun', serif;
        --font-body:'Noto Sans SC', 'Inter', 'PingFang SC', sans-serif;
    }
    *{ margin:0; padding:0; box-sizing:border-box;}
    body{
        background-color: var(--bg);
        color: var(--text);
        font-family: var(--font-body);
        line-height: 1.75;
        overflow-x: hidden;
    }
    h1,h2,h3,h4,h5,.brand-font{
        font-family: var(--font-title);
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    a{ color: inherit; text-decoration: none; }
    .navbar{
        background: rgba(11,11,15,0.85);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid #2a2a35;
        z-index: 1030;
    }
    .navbar .nav-link{
        color: var(--text);
        font-weight: 400;
        margin: 0 0.5rem;
        padding: 0.5rem 0.2rem;
        border-bottom: 2px solid transparent;
        transition: 0.2s;
    }
    .navbar .nav-link:hover, .navbar .nav-link.active{
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
    .navbar-brand{
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--text) !important;
        letter-spacing: 2px;
    }
    .navbar-brand i{
        color: var(--main);
        margin-right: 6px;
    }
    .btn-outline-light{
        border-color: #4a4a5a;
        color: var(--text);
    }
    .btn-outline-light:hover{
        background: #2a2a35;
        color: #fff;
    }
    .section-title{
        font-size: 1.8rem;
        font-weight: 600;
        margin: 2.5rem 0 1.2rem;
        border-left: 6px solid var(--main);
        padding-left: 1.2rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-title i{
        color: var(--accent);
        font-size: 1.5rem;
    }
    .hero-tags{
        display: flex;
        flex-wrap: wrap;
        gap: 12px 18px;
        justify-content: center;
        padding: 1.2rem 0;
        border-block: 1px solid #2a2a35;
        margin: 1rem 0 2.5rem;
    }
    .hero-tags span{
        background: transparent;
        border: 1px solid #3a3a4a;
        color: #c0c0d0;
        padding: 0.25rem 1rem;
        border-radius: 50px;
        font-size: 0.9rem;
        letter-spacing: 1px;
        transition: 0.2s;
    }
    .hero-tags span:hover{
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 10px rgba(245,197,24,0.2);
    }
    .card-movie{
        background: #131320;
        border: 1px solid #2c2c3a;
        border-radius: 0; 
        box-shadow: none; 
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        overflow: hidden;
        height: 100%;
        width: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s, box-shadow 0.3s;
    }
    .card-movie-inner{
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }
    .card-movie.flipped .card-movie-inner{
        transform: rotateY(180deg);
    }
    .card-face{
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        top:0; left:0;
        border-radius: 0;
        border: 1px solid #2c2c3a;
        background: #141420;
    }
    .card-face-back{
        transform: rotateY(180deg);
        background: #1a1a2a;
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.6rem;
        font-size: 0.9rem;
        overflow-y: auto;
        border: 1px solid var(--accent);
    }
    .card-face-back .badge{
        font-size: 0.7rem;
        background: #333;
    }
    .card-movie img{
        width: 100%;
        aspect-ratio: 2/3;
        object-fit: cover;
        display: block;
        background: #222;
    }
    .card-movie .card-body{
        padding: 0.8rem 0.6rem 0.9rem;
        background: #141420;
    }
    .card-movie .card-title{
        font-size: 0.98rem;
        font-weight: 500;
        margin-bottom: 0.3rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
    }
    .card-movie .card-text{
        font-size: 0.8rem;
        color: #aaa;
    }
    .rank-badge{
        display: inline-block;
        background: #333;
        color: #fff;
        font-weight: 700;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        margin-right: 8px;
        font-size: 0.9rem;
    }
    .rank-gold{ background: #f5c518; color: #000; }
    .rank-silver{ background: #b0b0b0; color: #000; }
    .rank-bronze{ background: #cd7f32; color: #fff; }
    .movie-list-item{
        display: flex;
        align-items: center;
        background: transparent;
        border-bottom: 1px dashed #3a3a4a;
        padding: 0.7rem 0.2rem;
        font-size: 0.95rem;
    }
    .movie-list-item i{
        width: 24px;
        color: var(--accent);
    }
    .movie-list-item .rank-badge{
        flex-shrink: 0;
    }
    .pill-tabs{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0.5rem 0 1.5rem;
    }
    .pill-tabs .btn-pill{
        background: transparent;
        border: 1px solid #4a4a5a;
        color: #ccc;
        border-radius: 30px;
        padding: 0.3rem 1.2rem;
        font-size: 0.85rem;
        transition: 0.2s;
    }
    .pill-tabs .btn-pill.active, .pill-tabs .btn-pill:hover{
        background: var(--main);
        border-color: var(--main);
        color: #fff;
    }
    .timeline{
        border-left: 2px solid #333;
        margin-left: 1rem;
        padding-left: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
    }
    .timeline-item{
        position: relative;
    }
    .timeline-item::before{
        content: '';
        position: absolute;
        left: -2rem;
        top: 0.35rem;
        width: 12px;
        height: 12px;
        background: var(--main);
        border-radius: 50%;
        border: 2px solid var(--bg);
    }
    .footer-links{
        border-top: 1px solid #2a2a35;
        padding: 2rem 0;
        margin-top: 4rem;
        background: #0e0e14;
    }
    .friend-links a{
        margin: 0 0.8rem;
        color: #aab;
        font-size: 0.9rem;
    }
    .friend-links a:hover{ color: var(--accent); }
    .faq-item{
        background: #10101a;
        border: 1px solid #2a2a35;
        margin-bottom: 1rem;
        padding: 1rem 1.5rem;
    }
    .faq-item summary{
        font-weight: 500;
        cursor: pointer;
        list-style: none;
    }
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item summary::before{
        content: '❓ ';
        color: var(--accent);
    }
    .tag-cloud{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 1.2rem;
    }
    .tag-cloud span{
        background: #1a1a2a;
        border: 1px solid #333;
        padding: 0.2rem 1rem;
        border-radius: 30px;
        font-size: 0.8rem;
        color: #bbb;
    }
    .hero-bg{
        position: relative;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzBiMGYwZiIvPjxwYXRoIGQ9Ik0xMDAgMjAwIEMyMDAgMTAwIDQwMCAzMDAgNTAwIDE1MCBWMjUwIEw1MDAgMjUwIEMzMDAgNDAwIDEwMCAxMDAgMTAwIDIwMCBaIiBmaWxsPSIjMjAyMDI4IiBvcGFjaXR5PSIwLjQiLz48L3N2Zz4=');
        background-size: cover;
        background-position: center;
        height: 30vh;
        min-height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-attachment: fixed;
        border-bottom: 1px solid #2a2a35;
    }
    .hero-content h1{
        font-size: 2.5rem;
        text-shadow: 0 2px 20px rgba(0,0,0,0.7);
    }
    @media (max-width: 768px){
        .section-title{ font-size: 1.4rem; }
        .navbar-brand{ font-size: 1.2rem; }
    }
    .number-count{
        font-weight: 700;
        color: var(--accent);
    }
    .btn-ghost{
        border: 1px solid #3a3a4a;
        background: transparent;
        color: #ccc;
        padding: 0.4rem 1.5rem;
        border-radius: 30px;
    }
    .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
    .gold-medal{
        color: var(--accent);
    }

/* --- 子页面追加 --- */
/* 确保 Bootstrap 组件与深色主题融合（覆盖白底） */
        .topic-hero {
            background: linear-gradient(145deg, rgba(229,9,20,.15) 0%, rgba(11,11,15,.9) 100%);
            border-bottom: 1px solid rgba(245,197,24,.25);
        }
.topic-card {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 18px;
            transition: transform .25s ease, border-color .25s;
        }
.topic-card:hover {
            border-color: var(--accent);
            transform: translateY(-4px);
        }
.topic-card .card-title {
            color: var(--text);
            font-family: var(--font-title);
            letter-spacing: .02em;
        }
.topic-card p {
            color: rgba(245,245,247,.8);
        }
.tag-chip {
            background: rgba(245,197,24,.12);
            color: var(--accent);
            border-radius: 30px;
            padding: .2rem .8rem;
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: .03em;
            display: inline-block;
        }
.insight-list li {
            background: rgba(0,0,0,.25);
            border-left: 3px solid var(--main);
            margin-bottom: .8rem;
            padding: .6rem 1rem;
            border-radius: 0 8px 8px 0;
            color: var(--text);
        }
.editor-pick {
            border: 1px solid rgba(245,197,24,.3);
            background: rgba(245,197,24,.04);
        }
/* 导航高亮当前页 */
        .navbar .nav-link.active-topic {
            color: var(--accent) !important;
            font-weight: 700;
        }
/* 小标题统一加品牌点缀 */
        .section-title span.brand-dot {
            color: var(--accent);
        }

/* --- 子页面追加 --- */
/* 关于页专属样式 */
        .about-hero { position: relative; padding: 100px 0 80px; overflow: hidden; }
.about-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.about-hero .container { position: relative; z-index: 1; }
.about-section { padding: 70px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.about-section:last-child { border-bottom: none; }
.about-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 30px; transition: transform .3s ease, box-shadow .3s ease; }
.about-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.about-card i { font-size: 2rem; color: var(--accent); margin-bottom: 15px; }
.about-card h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--text); }
.about-card p { color: rgba(245,245,247,.7); font-size: .95rem; line-height: 1.7; }
.about-stats { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; margin: 50px 0; }
.about-stat { text-align: center; }
.about-stat .number-count { font-size: 3rem; color: var(--accent); }
.about-stat p { color: rgba(245,245,247,.7); margin-top: 5px; }
.about-quote { border-left: 3px solid var(--accent); padding: 20px 30px; margin: 30px 0; font-style: italic; color: rgba(245,245,247,.8); }
.timeline-item h4 { font-size: 1.1rem; color: var(--text); }
.timeline-item p { color: rgba(245,245,247,.6); }

/* --- 子页面追加 --- */
/* 确保 Bootstrap 组件不破坏深色风格（若有使用 .card 等） */
        .card, .card-body, .card-title, .card-text, .card-header, .card-footer,
        .form-control, .form-select, .form-label, .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: transparent !important;
            color: var(--text) !important;
            border-color: rgba(255,255,255,.1) !important;
        }
.accordion-button:not(.collapsed) {
            background: rgba(255,255,255,.05) !important;
            color: var(--accent) !important;
        }
.accordion-button::after {
            filter: invert(1);
        }
/* 确保本页文本颜色正常 */
        body {
            background-color: var(--bg);
            color: var(--text);
        }
.disclaimer-section {
            padding: 3rem 0;
        }
.disclaimer-title {
            font-family: var(--font-title);
            color: var(--accent);
            border-left: 4px solid var(--main);
            padding-left: 1rem;
            margin-top: 2.5rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }
.disclaimer-list {
            list-style: none;
            padding-left: 0;
        }
.disclaimer-list li {
            padding: .5rem 0 .5rem 1.5rem;
            position: relative;
            border-bottom: 1px dashed rgba(255,255,255,.08);
        }
.disclaimer-list li::before {
            content: "▸";
            color: var(--main);
            position: absolute;
            left: 0;
            font-weight: bold;
        }
.highlight-word {
            color: var(--accent);
            font-weight: 600;
        }
.back-home-link {
            margin-top: 2rem;
            font-size: .95rem;
        }
.back-home-link a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px dotted var(--accent);
        }
.back-home-link a:hover {
            color: var(--main);
        }