:root {
  --mp-primary: #16a34a;
  --mp-accent: #84cc16;
  --mp-bg: #f7fee7;
  --mp-text: #1a2e05;
  --mp-muted: #4d7c0f;
  --mp-border: #b8d98c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--mp-bg);
  color: var(--mp-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  scroll-behavior: smooth;
}
h1,h2,h3,h4 { font-weight: 800; letter-spacing: -0.02em; }
/* 几何色块背景 */
.bg-shapes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-shapes::before, .bg-shapes::after { content: ''; position: absolute; opacity: 0.25; }
.bg-shapes::before { width: 220px; height: 220px; background: var(--mp-accent); border-radius: 50%; top: 10%; left: 5%; }
.bg-shapes::after { width: 180px; height: 180px; background: var(--mp-primary); clip-path: polygon(0 0, 100% 0, 50% 100%); bottom: 10%; right: 8%; }
.bg-shapes span { position: absolute; display: block; background: var(--mp-primary); opacity: 0.15; }
.bg-shapes .sq { width: 90px; height: 90px; top: 60%; left: 15%; border-radius: 12px; }
.bg-shapes .tr { width: 0; height: 0; border-left: 55px solid transparent; border-right: 55px solid transparent; border-bottom: 90px solid var(--mp-accent); top: 20%; right: 20%; opacity: 0.2; }

/* 导航栏吸顶+背景变化 */
.navbar-custom {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(247, 254, 231, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all 0.25s ease;
}
.navbar-custom.scrolled {
  background: rgba(247, 254, 231, 0.95);
  border-bottom: 1px solid var(--mp-border);
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.06);
}
.navbar-custom .navbar-brand {
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--mp-primary);
  letter-spacing: -0.02em;
}
.navbar-custom .nav-link {
  font-weight: 500;
  color: var(--mp-text);
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.navbar-custom .nav-link:hover { color: var(--mp-primary); }

/* 通用容器 */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.hero {
  padding: 6rem 1.5rem 4rem;
  text-align: center;
}
.hero h1 {
  font-size: clamp(3rem, 10vw, 4.2rem);
  font-weight: 900;
  color: var(--mp-text);
  line-height: 1.1;
  max-width: 800px;
  margin: 0 auto 1rem;
}
.hero .lead {
  font-size: 1.25rem;
  color: var(--mp-muted);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-weight: 400;
}
.btn-custom {
  background: var(--mp-primary);
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 60px;
  margin: 0.3rem;
  transition: 0.2s;
}
.btn-outline-custom {
  background: transparent;
  border: 2px solid var(--mp-primary);
  color: var(--mp-primary);
  font-weight: 600;
  padding: 0.7rem 2rem;
  border-radius: 60px;
  margin: 0.3rem;
}
.btn-outline-custom:hover { background: var(--mp-primary); color: white; }

/* 编号清单 (使用说明) */
.steps-list { list-style: none; counter-reset: step-counter; padding: 0; margin-top: 2rem; }
.steps-list li { counter-increment: step-counter; position: relative; padding: 0 0 1.8rem 3.5rem; border-bottom: 1px solid var(--mp-border); margin-bottom: 1.2rem; }
.steps-list li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; background: var(--mp-primary); color: white; font-weight: 700; font-family: monospace; font-size: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* 对比表格 */
.compare-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.5); border: 2px solid var(--mp-border); border-radius: 24px; overflow: hidden; }
.compare-table th, .compare-table td { padding: 1rem; text-align: center; border-bottom: 1px solid var(--mp-border); }
.compare-table thead th { background: var(--mp-primary); color: white; font-weight: 700; }
.compare-table td:first-child { font-weight: 600; text-align: left; }

/* 数据等宽字体 */
.mono { font-family: 'SF Mono', 'Fira Code', monospace; }

/* 特色网格 (通用) */
.feature-card { border: 2px solid var(--mp-border); border-radius: 24px; padding: 2rem 1.5rem; height: 100%; background: rgba(255,255,255,0.4); }
.feature-card i { font-size: 2rem; color: var(--mp-primary); margin-bottom: 1rem; }

/* 海报 hover 播放按钮 */
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.poster-card { position: relative; overflow: hidden; border-radius: 16px; border: 2px solid var(--mp-border); background: #e2f0cf; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.poster-card .play-icon { position: absolute; inset: 0; background: rgba(22, 163, 74, 0.55); display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: white; opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px); }
.poster-card:hover .play-icon { opacity: 1; }

/* 滚动动画 */
.reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* FAQ手风琴 */
.faq-item { border-bottom: 2px solid var(--mp-border); padding: 1.2rem 0; }
.faq-item summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--mp-primary); transition: transform 0.2s; }
details[open] summary i { transform: rotate(45deg); }

/* 友链区 */
.friend-links { border-top: 2px solid var(--mp-border); border-bottom: 2px solid var(--mp-border); padding: 2.5rem 1.5rem; margin: 4rem 0; text-align: center; }
.friend-links .flink { font-weight: 600; color: var(--mp-primary); text-decoration: underline; }

footer { background: #eaf6d4; padding: 2rem 1.5rem; text-align: center; color: var(--mp-text); border-top: 2px solid var(--mp-border); }

/* 导航折叠 */
.navbar-toggler { border: none; }

/* 小间隔 */
hr { opacity: 0.3; }

/* --- 子页面追加 --- */
/* 覆盖 Bootstrap 组件为本站配色 (安全起见) */
    .card, .card-body, .card-header, .card-footer {
      background: #ffffff;
      color: var(--mp-text);
      border-color: var(--mp-border);
    }
.form-control, .form-select {
      background: #ffffff;
      color: var(--mp-text);
      border-color: var(--mp-border);
    }
.form-control::placeholder { color: rgba(26, 46, 5, 0.5); }
.nav-link.active {
      font-weight: 700;
      color: var(--mp-primary) !important;
    }
.about-hero {
      padding: 5rem 0 3rem;
      background: linear-gradient(135deg, #f0f9e8 0%, #d9f2c4 100%);
      border-bottom: 1px solid var(--mp-border);
    }
.about-hero h1 {
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--mp-text);
      letter-spacing: -0.02em;
    }
.about-hero .lead {
      color: var(--mp-muted);
      font-size: 1.2rem;
      max-width: 720px;
    }
.about-section {
      padding: 4rem 0;
      border-bottom: 1px solid var(--mp-border);
    }
.about-section:last-of-type { border-bottom: none; }
.about-section h2 {
      font-size: 1.9rem;
      font-weight: 800;
      color: var(--mp-text);
      margin-bottom: 1.5rem;
      position: relative;
      padding-left: 1.2rem;
    }
.about-section h2::before {
      content: '';
      position: absolute;
      left: 0; top: 0.3rem;
      width: 5px; height: 80%;
      background: var(--mp-primary);
      border-radius: 4px;
    }
.about-section p {
      color: var(--mp-text);
      line-height: 1.9;
      font-size: 1.05rem;
    }
.about-section .muted-text { color: var(--mp-muted); }
.value-card {
      background: #ffffff;
      border: 1px solid var(--mp-border);
      border-radius: 16px;
      padding: 2rem 1.5rem;
      height: 100%;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
.value-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.08);
    }
.value-card .icon-circle {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: var(--mp-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: var(--mp-primary);
      margin-bottom: 1.2rem;
    }
.value-card h4 {
      font-weight: 700;
      color: var(--mp-text);
      font-size: 1.2rem;
    }
.value-card p { font-size: 0.95rem; }
.timeline {
      position: relative;
      padding-left: 2rem;
    }
.timeline::before {
      content: '';
      position: absolute;
      left: 8px; top: 0;
      width: 2px; height: 100%;
      background: var(--mp-border);
    }
.timeline-item {
      position: relative;
      margin-bottom: 2.5rem;
    }
.timeline-item::before {
      content: '';
      position: absolute;
      left: -2rem; top: 6px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--mp-primary);
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 2px var(--mp-primary);
    }
.timeline-item h5 {
      font-weight: 700;
      color: var(--mp-text);
      margin-bottom: 0.4rem;
    }
.timeline-item .timeline-date {
      font-size: 0.85rem;
      color: var(--mp-primary);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
.timeline-item p { font-size: 0.95rem; }
.about-quote {
      background: var(--mp-bg);
      border-left: 4px solid var(--mp-primary);
      padding: 1.5rem 2rem;
      border-radius: 0 12px 12px 0;
      margin: 2rem 0;
    }
.about-quote p {
      font-style: italic;
      font-size: 1.15rem;
      color: var(--mp-text);
      margin-bottom: 0.5rem;
    }
.about-quote cite {
      color: var(--mp-muted);
      font-size: 0.9rem;
      font-style: normal;
    }

/* --- 子页面追加 --- */
/* 排行榜卡片微调 */
    .rank-card {
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(4px);
      border: 1px solid var(--mp-border);
      border-radius: 1.2rem;
      padding: 1.2rem 1.5rem;
      transition: transform .2s ease, box-shadow .2s;
      box-shadow: 0 4px 12px rgba(26, 46, 5, 0.06);
    }
.rank-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(22, 163, 74, 0.12);
      border-color: var(--mp-accent);
    }
.rank-badge {
      background: var(--mp-primary);
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
      width: 2.2rem;
      height: 2.2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 0.75rem;
      flex-shrink: 0;
    }
.rank-badge.top-1 { background: #eab308; }
/* 冠军金 */
    .rank-badge.top-2 { background: #94a3b8; }
/* 亚军银 */
    .rank-badge.top-3 { background: #b45309; }
/* 季军铜 */
    .rank-title {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--mp-text);
      margin-bottom: 0.2rem;
    }
.rank-desc {
      color: var(--mp-muted);
      font-size: 0.9rem;
    }
.rank-tag {
      background: var(--mp-accent);
      color: #1a2e05;
      font-weight: 600;
      font-size: 0.75rem;
      padding: 0.2rem 0.8rem;
      border-radius: 30px;
      display: inline-block;
      margin-right: 0.4rem;
      letter-spacing: 0.3px;
    }
.trend-up { color: var(--mp-primary); font-weight: 600; }
.trend-down { color: #b91c1c; font-weight: 600; }
.list-separator {
      border-top: 2px dashed var(--mp-border);
      margin: 2rem 0;
    }
/* 小标题统一用品牌色 */
    .section-subhead {
      color: var(--mp-primary);
      font-weight: 700;
      letter-spacing: -0.01em;
      border-left: 6px solid var(--mp-accent);
      padding-left: 0.9rem;
    }
.ranking-cat-icon {
      color: var(--mp-primary);
      margin-right: 0.4rem;
    }

/* --- 子页面追加 --- */
.privacy-section {
            padding: 80px 0;
        }
.privacy-card {
            background: rgba(255,255,255,0.7);
            border: 1px solid var(--mp-border);
            border-radius: 16px;
            padding: 28px 32px;
            margin-bottom: 24px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
.privacy-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(22,163,74,0.1);
        }
.privacy-card h3 {
            color: var(--mp-primary);
            font-weight: 700;
            font-size: 1.35rem;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
.privacy-card h3 i {
            color: var(--mp-accent);
            font-size: 1.2rem;
        }
.privacy-card p, .privacy-card li {
            color: var(--mp-text);
            font-size: 0.95rem;
            line-height: 1.8;
        }
.privacy-card ul, .privacy-card ol {
            padding-left: 20px;
            margin-bottom: 0;
        }
.privacy-card ul li, .privacy-card ol li {
            margin-bottom: 8px;
        }
.privacy-highlight {
            background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(132,204,22,0.08));
            border-left: 4px solid var(--mp-primary);
            padding: 16px 20px;
            border-radius: 0 12px 12px 0;
            margin: 20px 0;
        }
.privacy-highlight p {
            margin: 0;
            font-size: 0.95rem;
            color: var(--mp-text);
        }
.contact-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
.contact-info a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--mp-primary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }
.contact-info a:hover {
            color: var(--mp-accent);
        }
.last-updated {
            text-align: center;
            color: var(--mp-muted);
            font-size: 0.9rem;
            margin-top: 40px;
        }