:root{
    --primary:#2563eb;
    --accent:#06b6d4;
    --bg:#f4f8ff;
    --text:#0f1e3d;
    --radius-lg:24px;
    --radius-md:18px;
    --shadow-soft:0 8px 30px rgba(37,99,235,0.10);
    --shadow-hover:0 16px 40px rgba(37,99,235,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    line-height:1.7;
    overflow-x:hidden;
}
.font-title{
    font-family:'ZCOOL KuaiLe','Inter',sans-serif;
    letter-spacing:1px;
}
/* Navbar */
.navbar-dl{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:rgba(244,248,255,0.85);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(37,99,235,0.1);
    transition:all 0.4s ease;
}
.navbar-dl.scrolled{
    background:rgba(255,255,255,0.95);
    box-shadow:0 4px 24px rgba(0,0,0,0.06);
}
.navbar-dl .navbar-brand{
    font-family:'ZCOOL KuaiLe',cursive;
    font-size:1.6rem;
    font-weight:700;
    color:var(--primary);
}
.navbar-dl .nav-link{
    font-weight:500;
    color:var(--text);
    padding:0.5rem 1rem;
    border-radius:20px;
    transition:all 0.2s;
}
.navbar-dl .nav-link:hover{
    color:var(--primary);
    background:rgba(37,99,235,0.08);
}
.navbar-toggler{
    border:none;
    font-size:1.4rem;
}
/* Hero Tag Cloud */
.hero-section{
    padding:130px 0 60px;
    position:relative;
    background:linear-gradient(135deg,#ffffff 0%,#f0f7ff 100%);
}
.tag-cloud{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:30px;
    perspective:800px;
}
.tag-item{
    display:inline-block;
    padding:8px 20px;
    background:white;
    border-radius:30px;
    font-size:0.9rem;
    font-weight:500;
    color:var(--primary);
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(37,99,235,0.1);
    animation:floatTag 6s ease-in-out infinite;
    transition:all 0.3s;
}
.tag-item:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:var(--shadow-hover);
}
@keyframes floatTag{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}
/* Section common */
.section-padding{padding:70px 0;}
.section-title{
    font-family:'ZCOOL KuaiLe',sans-serif;
    font-size:2.2rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
    position:relative;
    display:inline-block;
}
.section-title::after{
    content:'';
    display:block;
    width:60px;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    border-radius:2px;
    margin-top:8px;
}
.section-subtitle{
    color:#64748b;
    font-size:1rem;
    margin-bottom:30px;
}
/* Movie Cards */
.movie-card{
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    cursor:pointer;
    border:none;
    margin-bottom:25px;
}
.movie-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}
.movie-poster{
    position:relative;
    overflow:hidden;
    aspect-ratio:2/3;
    background:#e2e8f0;
}
.movie-poster img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
}
.movie-card:hover .movie-poster img{
    transform:scale(1.06);
}
.episode-badge{
    position:absolute;
    top:10px;
    left:10px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:white;
    font-size:0.75rem;
    font-weight:600;
    padding:4px 12px;
    border-radius:20px;
    box-shadow:0 4px 12px rgba(37,99,235,0.3);
    z-index:2;
}
.rating-badge{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(255,255,255,0.95);
    color:#f59e0b;
    font-size:0.8rem;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    display:flex;
    align-items:center;
    gap:4px;
    z-index:2;
}
.movie-info{
    padding:15px;
}
.movie-title{
    font-weight:700;
    font-size:1.05rem;
    color:var(--text);
    margin-bottom:5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.movie-meta{
    font-size:0.85rem;
    color:#64748b;
    display:flex;
    justify-content:space-between;
}
/* Rank List */
.rank-list{
    background:white;
    border-radius:var(--radius-lg);
    padding:25px;
    box-shadow:var(--shadow-soft);
}
.rank-item{
    display:flex;
    align-items:center;
    padding:12px 0;
    border-bottom:1px dashed #e2e8f0;
    transition:all 0.3s;
}
.rank-item:last-child{border-bottom:none;}
.rank-item:hover{
    background:#f8faff;
    padding-left:10px;
}
.rank-num{
    font-family:'ZCOOL KuaiLe',sans-serif;
    font-size:1.5rem;
    font-weight:700;
    color:var(--primary);
    width:50px;
    text-align:center;
}
.rank-info{
    flex:1;
}
.rank-title{
    font-weight:600;
    color:var(--text);
    font-size:0.95rem;
}
.rank-meta{
    font-size:0.8rem;
    color:#94a3b8;
}
.rank-rating{
    color:#f59e0b;
    font-weight:600;
    font-size:0.9rem;
}
/* Category Pills */
.category-pill{
    display:inline-block;
    padding:10px 25px;
    border-radius:30px;
    background:white;
    color:var(--text);
    font-weight:500;
    box-shadow:var(--shadow-soft);
    margin:5px;
    cursor:pointer;
    transition:all 0.3s;
    border:2px solid transparent;
}
.category-pill:hover,.category-pill.active{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}
/* Icon List */
.icon-list-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    color:#475569;
}
.icon-list-item i{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,0.1);
    color:var(--primary);
    border-radius:10px;
    font-size:0.9rem;
}
/* Accordion */
.accordion-dl .accordion-item{
    border:none;
    margin-bottom:12px;
    border-radius:var(--radius-md) !important;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.accordion-dl .accordion-button{
    background:white;
    color:var(--text);
    font-weight:600;
    padding:18px 20px;
}
.accordion-dl .accordion-button:not(.collapsed){
    background:#f0f7ff;
    color:var(--primary);
    box-shadow:none;
}
.accordion-dl .accordion-body{
    background:white;
    padding:20px;
}
/* Side Drawer */
.drawer-overlay{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(15,30,61,0.5);
    backdrop-filter:blur(4px);
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
}
.drawer-overlay.active{
    opacity:1;
    visibility:visible;
}
.drawer-panel{
    position:fixed;
    top:0;right:-480px;
    width:100%;
    max-width:460px;
    height:100vh;
    background:white;
    z-index:2001;
    overflow-y:auto;
    transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow:-10px 0 40px rgba(0,0,0,0.1);
}
.drawer-panel.active{
    right:0;
}
.drawer-close{
    position:absolute;
    top:15px;right:15px;
    width:36px;height:36px;
    border-radius:50%;
    background:#f1f5f9;
    border:none;
    font-size:1.2rem;
    color:var(--text);
    cursor:pointer;
    z-index:10;
}
/* Reveal Animation */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible{
    opacity:1;
    transform:translateY(0);
}
/* Footer */
.footer-dl{
    background:#0f1e3d;
    color:#cbd5e1;
    padding:50px 0 20px;
}
.footer-dl a{
    color:#94a3b8;
    text-decoration:none;
    transition:all 0.2s;
}
.footer-dl a:hover{
    color:white;
}
.friend-links{
    background:#1e2a4a;
    border-radius:16px;
    padding:25px;
    margin-bottom:30px;
}
/* Responsive */
@media (max-width:768px){
    .hero-section{padding:100px 0 40px;}
    .section-title{font-size:1.8rem;}
    .movie-info{padding:12px;}
}
/* Floating animation */
@keyframes pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.05);}
}
.hot-tag{
    animation:pulse 2s infinite;
}

/* --- 子页面追加 --- */
/* 页面专属样式 - 关于我们 */
        .about-hero {
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(6,182,212,0.06) 100%);
            padding: 80px 0 50px;
            border-bottom: 1px solid rgba(37,99,235,0.1);
        }
.about-hero .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(37,99,235,0.08);
            color: var(--primary);
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
.about-hero h1 {
            font-size: 2.6rem;
            font-weight: 800;
            color: var(--text);
            line-height: 1.3;
            margin-bottom: 20px;
        }
.about-hero h1 .highlight {
            color: var(--primary);
            position: relative;
        }
.about-hero p.lead {
            font-size: 1.15rem;
            color: #5a6a85;
            max-width: 720px;
            margin: 0 auto;
            line-height: 1.8;
        }
.about-stats {
            margin-top: 40px;
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
        }
.stat-item {
            text-align: center;
        }
.stat-item .stat-num {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary);
            font-family: 'Inter', sans-serif;
        }
.stat-item .stat-label {
            font-size: 0.9rem;
            color: #6b7a99;
            margin-top: 4px;
        }
.about-section {
            padding: 70px 0;
        }
.about-section.alt {
            background: rgba(37,99,235,0.03);
        }
.about-card {
            background: #ffffff;
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: var(--shadow-soft);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            height: 100%;
            border: 1px solid rgba(37,99,235,0.06);
        }
.about-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px);
        }
.about-card .card-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: #fff;
            margin-bottom: 18px;
        }
.about-card h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 12px;
        }
.about-card p {
            color: #5a6a85;
            line-height: 1.7;
            font-size: 0.95rem;
        }
.timeline {
            position: relative;
            padding-left: 30px;
        }
.timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
            opacity: 0.3;
        }
.timeline-item {
            position: relative;
            margin-bottom: 32px;
        }
.timeline-item::before {
            content: '';
            position: absolute;
            left: -26px;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary);
            border: 2px solid #fff;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
        }
.timeline-item .timeline-date {
            font-size: 0.85rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 6px;
        }
.timeline-item h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }
.timeline-item p {
            color: #5a6a85;
            line-height: 1.6;
            font-size: 0.95rem;
        }
.value-box {
            background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(6,182,212,0.04));
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: var(--radius-lg);
            padding: 24px;
            margin-bottom: 20px;
        }
.value-box h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
.value-box p {
            color: #5a6a85;
            line-height: 1.7;
            font-size: 0.95rem;
        }
.feature-tag {
            display: inline-block;
            background: rgba(37,99,235,0.08);
            color: var(--primary);
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-right: 8px;
            margin-bottom: 8px;
        }
.contact-box {
            background: #ffffff;
            border-radius: var(--radius-lg);
            padding: 40px;
            text-align: center;
            box-shadow: var(--shadow-soft);
            border: 1px solid rgba(37,99,235,0.06);
        }
.contact-box h3 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
        }
.contact-box p {
            color: #5a6a85;
            margin-bottom: 24px;
        }
.contact-btn {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: #fff;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            font-size: 0.95rem;
        }
.contact-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37,99,235,0.25);
            color: #fff;
        }
.about-hero h1 {
                font-size: 2rem;
            }
.about-hero {
                padding: 50px 0 30px;
            }
.about-section {
                padding: 50px 0;
            }
.about-card {
                padding: 24px;
            }
.about-stats {
                gap: 24px;
            }
.stat-item .stat-num {
                font-size: 1.8rem;
            }

/* --- 子页面追加 --- */
/* 本页专属补充样式 */
        .guide-hero {
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(6,182,212,0.06) 100%);
            border-bottom: 1px solid rgba(37,99,235,0.1);
        }
.guide-section {
            padding: 3rem 0;
            border-bottom: 1px solid rgba(37,99,235,0.06);
        }
.guide-section:last-of-type {
            border-bottom: none;
        }
.guide-card {
            background: #ffffff;
            border-radius: var(--radius-md);
            padding: 1.8rem;
            height: 100%;
            box-shadow: var(--shadow-soft);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(37,99,235,0.08);
        }
.guide-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
.guide-card-icon {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 1rem;
            display: inline-block;
            width: 56px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            background: rgba(37,99,235,0.1);
            border-radius: 14px;
        }
.guide-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.8rem;
        }
.guide-card p {
            font-size: 0.92rem;
            line-height: 1.7;
            color: #4a5b7d;
            margin-bottom: 0;
        }
.guide-steps {
            counter-reset: step-counter;
            list-style: none;
            padding: 0;
            margin: 0;
        }
.guide-steps li {
            counter-increment: step-counter;
            position: relative;
            padding: 0.6rem 0 0.6rem 3.2rem;
            font-size: 0.95rem;
            color: #3a4a6b;
            border-bottom: 1px dashed rgba(37,99,235,0.12);
        }
.guide-steps li:last-child {
            border-bottom: none;
        }
.guide-steps li::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0.6rem;
            width: 32px;
            height: 32px;
            background: var(--primary);
            color: #fff;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.faq-item {
            background: #ffffff;
            border-radius: var(--radius-md);
            padding: 1.5rem 1.8rem;
            margin-bottom: 1rem;
            box-shadow: var(--shadow-soft);
            border: 1px solid rgba(37,99,235,0.08);
            transition: box-shadow 0.3s ease;
        }
.faq-item:hover {
            box-shadow: var(--shadow-hover);
        }
.faq-item h4 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
.faq-item h4 i {
            color: var(--primary);
            font-size: 0.9rem;
        }
.faq-item p {
            font-size: 0.92rem;
            line-height: 1.7;
            color: #4a5b7d;
            margin: 0;
            padding-left: 1.6rem;
        }
.quality-badge {
            display: inline-block;
            padding: 0.25rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
.quality-hd { background: rgba(37,99,235,0.12); color: var(--primary); }
.quality-fhd { background: rgba(6,182,212,0.12); color: #0891b2; }
.quality-uhd { background: rgba(16,185,129,0.12); color: #059669; }
.quality-mobile { background: rgba(245,158,11,0.12); color: #d97706; }
.tip-box {
            background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(6,182,212,0.04) 100%);
            border-left: 4px solid var(--primary);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            padding: 1.2rem 1.5rem;
            margin-top: 1.5rem;
        }
.tip-box p {
            margin: 0;
            font-size: 0.92rem;
            color: #3a4a6b;
        }
.tip-box i {
            color: var(--primary);
            margin-right: 0.5rem;
        }
.guide-card {
                padding: 1.4rem;
                margin-bottom: 1rem;
            }
.faq-item {
                padding: 1.2rem 1.2rem;
            }
.guide-section {
                padding: 2.5rem 0;
            }

/* --- 子页面追加 --- */
/* 在站点CSS基础上仅补充本页细节，保证完全统一 */
        .disclaimer-section {
            padding-top: 60px;
            padding-bottom: 80px;
        }
.disclaimer-panel {
            background: #ffffff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            padding: 2.5rem;
            margin-bottom: 2rem;
            transition: box-shadow .25s;
        }
.disclaimer-panel:hover {
            box-shadow: var(--shadow-hover);
        }
.disclaimer-panel h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 1.6rem;
            color: var(--text);
            border-left: 4px solid var(--primary);
            padding-left: 1rem;
            margin-bottom: 1.5rem;
            letter-spacing: -0.01em;
        }
.disclaimer-panel h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 1.3rem;
            color: var(--text);
            margin-top: 1.8rem;
            margin-bottom: 0.8rem;
        }
.disclaimer-panel p, .disclaimer-panel li {
            color: #2a3a5e;
            line-height: 1.75;
            font-size: 0.98rem;
        }
.disclaimer-panel ul, .disclaimer-panel ol {
            padding-left: 1.3rem;
        }
.disclaimer-panel a {
            color: var(--primary);
            text-decoration: none;
            border-bottom: 1px dotted var(--primary);
        }
.disclaimer-panel a:hover {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
.highlight-box {
            background: rgba(6, 182, 212, 0.06);
            border-left: 4px solid var(--accent);
            border-radius: 0 14px 14px 0;
            padding: 1.25rem 1.5rem;
            margin: 1.8rem 0;
        }
.highlight-box p {
            margin-bottom: 0.3rem;
        }
.footer-link {
            font-size: 0.9rem;
        }
/* 覆盖Bootstrap组件默认白底，以防万一 */
        .card, .card-body, .list-group-item, .accordion-item {
            background: transparent !important;
            color: inherit !important;
            border-color: transparent !important;
        }
.form-control, .form-select {
            background: rgba(0,0,0,0.03);
            border: 1px solid #dce7f5;
            color: var(--text);
        }
.form-control:focus {
            background: #fff;
            color: var(--text);
            border-color: var(--primary);
        }

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