/* ============================================================
   MILAN CSS v1.0 - 基于 cn-app-milan.com 设计
   绿色主题体育资讯模板
   ============================================================ */

/* CSS Variables */
:root {
    --ml-primary: #8bc34a;
    --ml-primary-dark: #6ea034;
    --ml-primary-darker: #57a54f;
    --ml-dark: #292929;
    --ml-dark-2: #2d3033;
    --ml-dark-3: #464646;
    --ml-text: #6c7279;
    --ml-text-dark: #2d3033;
    --ml-text-light: #a0a0a0;
    --ml-bg: #ffffff;
    --ml-bg-soft: #f7f7f7;
    --ml-bg-muted: #f1f1f1;
    --ml-border: #dedede;
    --ml-border-light: #e0e0e0;
    --ml-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --ml-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --ml-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --ml-radius: 5px;
    --ml-radius-lg: 10px;
    --ml-transition: 0.3s ease;
    --ml-font: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ========== MIP 框架覆盖 ========== */
body { color: var(--ml-text) !important; background: var(--ml-bg) !important; line-height: 1.6 !important; font-family: var(--ml-font) !important; font-size: 14px !important; -webkit-font-smoothing: antialiased; }
img { width: auto !important; height: auto !important; max-width: 100% !important; margin: 0 !important; }
a { color: var(--ml-primary); transition: color 0.2s ease; text-decoration: none; }
a:hover { color: var(--ml-primary-dark); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 0.5rem 0 !important; line-height: 1.3; font-weight: 700; color: var(--ml-text-dark); }
p { margin: 0 0 1rem 0 !important; line-height: 1.7; }
ul,ol { margin: 0 0 1rem 0 !important; padding-left: 1.5rem !important; }
.container { width: 100% !important; max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; }

/* ========== Header ========== */
.ml-header { z-index: 1030; background: rgba(41,41,41,0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); height: 80px; display: flex; align-items: center; transition: all var(--ml-transition); }
.ml-header.scrolled { background: rgba(41,41,41,0.95) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.ml-header .container { display: flex; align-items: center; justify-content: space-between; }
.ml-logo { display: flex; align-items: center; }
.ml-logo img { height: 50px !important; width: auto !important; border-radius: 8px; }
.ml-logo-bg { background: var(--ml-primary); padding: 6px 12px; border-radius: 8px; display: inline-block; }
.ml-nav { display: flex; align-items: center; gap: 0; }
.ml-nav a { color: var(--ml-text-light) !important; font-size: 13px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px !important; transition: color 0.2s; text-decoration: none !important; }
.ml-nav a:hover, .ml-nav a.active { color: var(--ml-primary) !important; }
.ml-nav .btn-ml { background: var(--ml-primary); color: #fff !important; border-radius: var(--ml-radius); padding: 8px 20px !important; margin-left: 10px; font-weight: 600; }
.ml-nav .btn-ml:hover { background: var(--ml-primary-dark); }
.ml-mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 8px; }
.ml-mobile-nav { background: rgba(41,41,41,0.95); padding: 15px 0; position: relative; z-index: 1029; }
.ml-mobile-nav a { display: block; color: var(--ml-text-light) !important; padding: 10px 20px !important; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ml-mobile-nav a:hover { color: var(--ml-primary) !important; background: rgba(255,255,255,0.03); }

/* ========== Hero Section ========== */
.ml-hero { min-height: 750px; position: relative !important; background-size: cover !important; background-position: center !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 !important; }
.ml-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 1; }
.ml-hero .container { position: relative !important; z-index: 2; max-width: 800px !important; }
.ml-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 700 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem !important; }
.ml-hero p { color: rgba(255,255,255,0.68) !important; font-size: 1rem !important; line-height: 1.6; margin-bottom: 2rem !important; }
.ml-hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.ml-btn { display: inline-block; padding: 15px 40px; font-size: 14px; font-weight: 600; border-radius: var(--ml-radius); text-transform: uppercase; letter-spacing: 2px; transition: all var(--ml-transition); text-decoration: none !important; cursor: pointer; border: none; }
.ml-btn-primary { background: var(--ml-primary); color: #fff !important; border: 1px solid var(--ml-primary); }
.ml-btn-primary:hover { background: var(--ml-primary-dark); }
.ml-btn-outline { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,0.5); }
.ml-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* ========== Intro Section ========== */
.ml-intro { background: var(--ml-primary) !important; padding: 100px 0 !important; text-align: center !important; }
.ml-intro h3 { font-size: 2rem !important; font-weight: 300 !important; color: #fff !important; margin-bottom: 1.5rem !important; }
.ml-intro p { color: #fff !important; max-width: 700px; margin: 0 auto 2rem auto !important; font-size: 0.95rem; }
.ml-intro .ml-btn { background: #fff; color: var(--ml-primary) !important; border: 1px solid #fff; }
.ml-intro .ml-btn:hover { background: transparent; color: #fff !important; }

/* ========== Services Section ========== */
.ml-services { padding: 100px 0 !important; background: #fff !important; }
.ml-section-title { text-align: center; margin-bottom: 60px !important; }
.ml-section-title h2 { font-size: 2rem !important; font-weight: 700 !important; color: var(--ml-text-dark) !important; text-transform: uppercase; letter-spacing: 2px; }
.ml-section-title p { color: var(--ml-text); font-size: 0.9rem; margin-top: 0.5rem !important; }
.ml-service-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); padding: 30px 30px 20px; text-align: center; margin-bottom: 30px; transition: all var(--ml-transition); }
.ml-service-card:hover { box-shadow: var(--ml-shadow-md); transform: translateY(-5px); }
.ml-service-icon { width: 90px; height: 93px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #d6d6d6; border-radius: 50%; }
.ml-service-icon i { font-size: 28px; color: var(--ml-primary); }
.ml-service-icon .icon-emoji { font-size: 2rem; }
.ml-service-card h5 { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase; color: var(--ml-text-dark) !important; margin-bottom: 0.5rem !important; letter-spacing: 1px; }
.ml-service-card p { font-size: 13px; color: var(--ml-text); margin-bottom: 0 !important; }

/* ========== About Section ========== */
.ml-about { padding: 100px 0 !important; background: var(--ml-bg-soft) !important; }
.ml-about-img { border-radius: var(--ml-radius-lg); overflow: hidden; box-shadow: var(--ml-shadow-lg); }
.ml-about-img mip-img { display: block; width: 100% !important; height: auto !important; }
.ml-about h2 { font-size: 2rem !important; font-weight: 700 !important; color: var(--ml-text-dark) !important; text-transform: uppercase; margin-bottom: 1.5rem !important; }
.ml-about p { color: var(--ml-text); margin-bottom: 1rem !important; }
.ml-about-features { list-style: none !important; padding: 0 !important; margin: 1.5rem 0 !important; }
.ml-about-features li { padding: 8px 0 !important; font-size: 14px; color: var(--ml-text-dark); }
.ml-about-features li i { color: var(--ml-primary); margin-right: 8px; }

/* ========== News Section ========== */
.ml-news { padding: 100px 0 !important; background: #fff !important; }
.ml-news-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); overflow: hidden; margin-bottom: 30px; transition: all var(--ml-transition); }
.ml-news-card:hover { box-shadow: var(--ml-shadow-md); transform: translateY(-3px); }
.ml-news-card-img { height: 200px; overflow: hidden; position: relative; }
.ml-news-card-img mip-img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform 0.4s; }
.ml-news-card:hover .ml-news-card-img mip-img { transform: scale(1.05); }
.ml-news-card-body { padding: 20px; }
.ml-news-card-body h3 { font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; line-height: 1.4; }
.ml-news-card-body h3 a { color: var(--ml-text-dark) !important; }
.ml-news-card-body h3 a:hover { color: var(--ml-primary) !important; }
.ml-news-card-body .desc { font-size: 13px; color: var(--ml-text); margin-bottom: 0.75rem !important; line-height: 1.6; }
.ml-news-card-body .meta { font-size: 12px; color: var(--ml-text-light); }
.ml-news-card-body .meta i { margin-right: 4px; }

/* ========== Testimonials ========== */
.ml-testimonials { background: var(--ml-dark-3) !important; padding: 100px 0 !important; text-align: center !important; }
.ml-testimonial { max-width: 700px; margin: 0 auto; padding: 0 20px; }
.ml-testimonial blockquote { border: none; padding: 0; margin: 0 0 2rem 0; }
.ml-testimonial p { color: #fff !important; font-size: 1rem; letter-spacing: 1px; line-height: 1.8; font-style: italic; }
.ml-testimonial cite { color: var(--ml-primary) !important; font-size: 0.9rem; font-weight: 600; }
.ml-testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2rem; }
.ml-testimonial-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; }
.ml-testimonial-dots span.active { background: var(--ml-primary); }

/* ========== FAQ Section ========== */
.ml-faq { padding: 100px 0 !important; background: var(--ml-bg-soft) !important; }
.ml-faq-container { max-width: 880px; margin: 0 auto !important; }
.ml-faq-item { border-bottom: 1px solid #eee; padding: 1rem 0.5rem !important; }
.ml-faq-item h3 { font-size: 1rem !important; font-weight: 600 !important; color: var(--ml-text-dark) !important; margin-bottom: 0.5rem !important; cursor: pointer; }
.ml-faq-item h3 i { color: var(--ml-primary); margin-right: 8px; }
.ml-faq-item p { font-size: 14px; color: #444; margin-bottom: 0 !important; }

/* ========== CTA Section ========== */
.ml-cta { background: var(--ml-primary) !important; padding: 80px 0 !important; text-align: center !important; }
.ml-cta h2 { color: #fff !important; font-size: 2rem !important; text-transform: uppercase; margin-bottom: 1rem !important; }
.ml-cta p { color: rgba(255,255,255,0.85) !important; margin-bottom: 2rem !important; }
.ml-cta .ml-btn { background: #fff; color: var(--ml-primary) !important; }
.ml-cta .ml-btn:hover { background: var(--ml-dark); color: #fff !important; }

/* ========== Footer ========== */
.ml-footer { background: var(--ml-dark) !important; color: var(--ml-text-light) !important; position: relative; background-size: cover; background-position: center; }
.ml-footer-overlay { position: absolute; inset: 0; background: rgba(41,41,41,0.92); }
.ml-footer .container { position: relative; z-index: 2; }
.ml-footer-top { padding: 60px 0 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ml-footer-logo { height: 45px !important; width: auto !important; margin-bottom: 1rem; border-radius: 8px; }
.ml-footer h5 { color: #fff !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.2rem !important; }
.ml-footer p { font-size: 13px; color: var(--ml-text-light) !important; }
.ml-footer-links { list-style: none !important; padding: 0 !important; }
.ml-footer-links li { margin-bottom: 8px; }
.ml-footer-links a { color: var(--ml-text-light) !important; font-size: 13px; text-decoration: none !important; }
.ml-footer-links a:hover { color: var(--ml-primary) !important; }
.ml-footer-contact li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.ml-footer-contact i { color: var(--ml-primary); margin-top: 3px; }
.ml-footer-bottom { padding: 20px 0; text-align: center; font-size: 12px; }
.ml-footer-social { display: flex; gap: 10px; margin-top: 1rem; }
.ml-footer-social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ml-dark-3); color: var(--ml-text-light) !important; border-radius: 50%; font-size: 14px; transition: all 0.2s; }
.ml-footer-social a:hover { background: var(--ml-primary); border-color: var(--ml-primary); color: #fff !important; }

/* ========== Article Detail ========== */
.ml-detail { padding: 40px 0 60px; background: var(--ml-bg-soft) !important; }
.ml-detail-title { font-size: 1.75rem !important; font-weight: 700 !important; color: var(--ml-text-dark) !important; margin-bottom: 0.75rem !important; line-height: 1.3; }
.ml-detail-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 13px; color: var(--ml-text); margin-bottom: 1.5rem !important; padding-bottom: 1rem !important; border-bottom: 1px solid var(--ml-border); }
.ml-detail-meta i { color: var(--ml-primary); margin-right: 5px; }
.ml-detail-body { background: #fff; border-radius: var(--ml-radius-lg); padding: 2rem; box-shadow: var(--ml-shadow-sm); margin-bottom: 2rem; }
.ml-detail-body h2 { font-size: 1.3rem !important; font-weight: 700 !important; color: var(--ml-text-dark) !important; margin: 1.5rem 0 0.75rem !important; }
.ml-detail-body h3 { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--ml-text-dark) !important; margin: 1.25rem 0 0.5rem !important; }
.ml-detail-body p { margin-bottom: 1rem !important; line-height: 1.8; }
.ml-detail-body mip-img { border-radius: var(--ml-radius); margin: 1rem 0; }
.ml-detail-nav { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.ml-detail-nav a { color: var(--ml-primary) !important; font-size: 14px; }

/* Related */
.ml-related { margin-bottom: 2rem; }
.ml-related h3 { font-size: 1.2rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ml-primary); display: inline-block; }
.ml-related-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); overflow: hidden; transition: all var(--ml-transition); }
.ml-related-card:hover { box-shadow: var(--ml-shadow-md); transform: translateY(-3px); }
.ml-related-card-img { height: 140px; overflow: hidden; position: relative; }
.ml-related-card-img mip-img { position: absolute; width: 100% !important; height: 100% !important; object-fit: cover; }
.ml-related-card-body { padding: 12px; }
.ml-related-card-body h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.ml-related-card-body h4 a { color: var(--ml-text-dark) !important; }
.ml-related-card-body h4 a:hover { color: var(--ml-primary) !important; }

/* Sidebar */
.ml-sidebar-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); padding: 20px; margin-bottom: 20px; }
.ml-sidebar-card h5 { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase; color: var(--ml-text-dark) !important; margin-bottom: 1rem !important; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ml-primary); }
.ml-sidebar-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ml-sidebar-list li { padding: 8px 0 !important; border-bottom: 1px solid var(--ml-bg-soft); }
.ml-sidebar-list li:last-child { border-bottom: none; }
.ml-sidebar-list li a { color: var(--ml-text) !important; font-size: 13px; display: flex; justify-content: space-between; }
.ml-sidebar-list li a:hover { color: var(--ml-primary) !important; }

/* Article List */
.ml-list { padding: 40px 0 60px; background: var(--ml-bg-soft) !important; }
.ml-list-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); overflow: hidden; margin-bottom: 20px; transition: all var(--ml-transition); }
.ml-list-card:hover { box-shadow: var(--ml-shadow-md); }
.ml-list-card-img { height: 200px; overflow: hidden; position: relative; }
.ml-list-card-img mip-img { position: absolute; width: 100% !important; height: 100% !important; object-fit: cover; }
.ml-list-card-body { padding: 20px; }
.ml-list-card-body h3 { font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; }
.ml-list-card-body h3 a { color: var(--ml-text-dark) !important; }
.ml-list-card-body h3 a:hover { color: var(--ml-primary) !important; }

/* Search */
.ml-search { padding: 40px 0 60px; background: var(--ml-bg-soft) !important; }
.ml-search-box { background: #fff; padding: 30px; border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-sm); margin-bottom: 2rem; }
.ml-search-box input { width: 100%; padding: 12px 20px; border: 1px solid var(--ml-border-light); border-radius: var(--ml-radius); font-size: 14px; color: var(--ml-text); }
.ml-search-box .ml-btn { margin-top: 10px; }

/* 404 */
.ml-404 { padding: 120px 0; background: var(--ml-bg-soft) !important; min-height: 60vh; display: flex; align-items: center; }
.ml-404 h1 { font-size: 6rem !important; font-weight: 700 !important; color: var(--ml-primary); }

/* GoTop */
.ml-gotop { width: 40px; height: 40px; background: var(--ml-primary) !important; color: #fff !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--ml-shadow-md); cursor: pointer; }

/* Pagination */
.ml-pagination { display: flex; justify-content: center; gap: 4px; margin: 2rem 0; }
.ml-pagination a, .ml-pagination span { padding: 6px 12px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); color: var(--ml-text); font-size: 13px; text-decoration: none; }
.ml-pagination a:hover { background: var(--ml-primary); color: #fff; border-color: var(--ml-primary); }

/* ========== Responsive ========== */
@media (max-width: 991.98px) {
    .ml-hero { min-height: 500px; }
    .ml-nav { display: none; }
    .ml-mobile-toggle { display: block; }
    .ml-services, .ml-about, .ml-news, .ml-faq, .ml-testimonials { padding: 60px 0 !important; }
}
@media (max-width: 767.98px) {
    .ml-hero { min-height: 400px; }
    .ml-hero h1 { font-size: 1.5rem !important; letter-spacing: 1px; }
    .ml-detail-title { font-size: 1.3rem !important; }
    .ml-detail-body { padding: 1.25rem; }
    .ml-intro { padding: 60px 0 !important; }
    .ml-intro h3 { font-size: 1.5rem !important; }
}
@media (max-width: 575.98px) {
    .ml-header { height: 70px; }
    .ml-footer-contact li { flex-direction: column; }
}