/* ==== 设计种子 3970 · 靛蓝紫罗兰 · 极简无阴影 ==== */
    :root{
      --main: #4f46e5;
      --accent: #7c3aed;
      --bg: #f5f3ff;
      --ink: #1e1b4b;
      --line: #c7c3f0;
      --white: #ffffff;
      --soft: #e4e0ff;
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    body{
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      line-height: 1.7;
      letter-spacing: 0.01em;
      overflow-x: hidden;
    }
    h1,h2,h3,.brand-font{
      font-family: 'Trebuchet MS', 'Segoe UI', 'Comic Sans MS', cursive, sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .border-thin{
      border: 1px solid var(--line) !important;
    }
    .bg-soft{ background: var(--soft); }
    .text-main{ color: var(--main); }
    .text-accent{ color: var(--accent); }

    /* 吸顶导航 + 锚点补偿 */
    .sticky-nav{
      position: sticky;
      top: 0;
      z-index: 1024;
      background: rgba(245, 243, 255, 0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .navbar-brand{
      font-size: 1.7rem;
      font-weight: 800;
      letter-spacing: 1px;
      color: var(--main) !important;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .navbar-brand i{
      color: var(--accent);
      font-size: 1.4rem;
    }
    .nav-link-custom{
      color: var(--ink) !important;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border: 1px solid transparent;
      border-radius: 40px;
      transition: all .2s;
    }
    .nav-link-custom:hover{
      border-color: var(--main);
      color: var(--main) !important;
      background: transparent;
    }
    @media (max-width: 991px){
      .nav-link-custom{padding: .4rem .8rem;}
    }

    /* hero 打字机 */
    .typewriter{
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid var(--accent);
      width: 0;
      animation: typing 3s steps(24, end) forwards, blinkCaret .8s step-end infinite;
      animation-iteration-count: 1;
      max-width: 100%;
    }
    @keyframes typing{
      0% { width: 0; }
      100% { width: 100%; }
    }
    @keyframes blinkCaret{
      0%,100% { border-color: var(--accent); }
      50% { border-color: transparent; }
    }
    .hero-split{
      display: flex;
      flex-wrap: wrap;
      min-height: 70vh;
      align-items: center;
    }
    .hero-left, .hero-right{
      flex: 1 1 400px;
      padding: 2rem 3rem;
    }
    .hero-left{
      border-right: 1px solid var(--line);
    }
    .hero-cta .btn-main{
      background: var(--main);
      color: white;
      border: 1px solid var(--main);
      border-radius: 40px;
      padding: 0.8rem 2.2rem;
      font-weight: 600;
      position: relative;
      overflow: hidden;
      transition: background .3s;
    }
    .btn-main::after{
      content: '';
      position: absolute;
      top:0; left:-100%;
      width: 100%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left .5s;
    }
    .btn-main:hover::after{
      left: 100%;
    }
    .btn-main:hover{
      background: var(--accent);
      border-color: var(--accent);
    }

    /* 区块通用 */
    .section-pad{ padding: 4.5rem 0; }
    .anchor-offset{
      scroll-margin-top: 80px;
    }
    .section-title{
      font-size: 2rem;
      margin-bottom: 2rem;
      position: relative;
      display: inline-block;
      padding-bottom: 0.5rem;
    }
    .section-title::after{
      content: '';
      position: absolute;
      left:0; bottom:0;
      width: 60px;
      height: 3px;
      background: var(--accent);
    }
    .card-clean{
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 0;
      transition: transform .2s;
      height: 100%;
      padding: 1.5rem 1.2rem;
    }
    .card-clean:hover{
      transform: translateY(-4px);
      border-color: var(--main);
    }
    .card-clean i{
      font-size: 2rem;
      color: var(--accent);
      margin-bottom: 1rem;
    }
    .step-line{
      display: flex;
      gap: 1.8rem;
      margin-top: 1.5rem;
      flex-wrap: wrap;
    }
    .step-item{
      flex: 1 1 180px;
      border-left: 2px solid var(--main);
      padding-left: 1.2rem;
    }
    .step-item .step-num{
      font-size: 2rem;
      font-weight: 800;
      color: var(--main);
      opacity: 0.4;
      line-height: 1;
    }

    /* 对比表格 */
    .table-compare{
      width: 100%;
      border-collapse: collapse;
    }
    .table-compare th, .table-compare td{
      border: 1px solid var(--line);
      padding: 1rem 1.2rem;
      background: rgba(255,255,255,0.2);
    }
    .table-compare th{
      background: var(--soft);
      font-weight: 700;
    }

    /* FAQ */
    .faq-item{
      border: 1px solid var(--line);
      margin-bottom: 0.8rem;
      padding: 1.2rem 1.5rem;
    }
    .faq-question{
      font-weight: 700;
      font-size: 1.15rem;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    .faq-answer{
      margin-top: 0.5rem;
      color: #333;
    }

    /* 图片懒加载占位渐显 */
    img.lazy{
      background: #e2defc;
      opacity: 0;
      transition: opacity .5s ease;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    img.lazy.loaded{
      opacity: 1;
    }

    /* 回到顶部 */
    #backTop{
      position: fixed;
      bottom: 40px; right: 30px;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--main);
      color: white;
      border: none;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s, visibility .3s, background .2s;
      z-index: 1200;
      cursor: pointer;
    }
    #backTop.show{
      opacity: 1;
      visibility: visible;
    }
    #backTop:hover{
      background: var(--accent);
    }

    /* 友情链接区 */
    .friend-links{
      border-top: 1px solid var(--line);
      padding: 2rem 0 1rem;
    }
    .footer-area{
      border-top: 1px solid var(--line);
      background: transparent;
      padding: 2.5rem 0 2rem;
    }
    .brand-footer{
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--main);
    }

    /* 动效 & 通用 */
    .no-shadow{ box-shadow: none !important; }
    .img-placeholder{
      background: linear-gradient(145deg, #e9e4ff, #d6ceff);
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--main);
      font-size: 3rem;
    }
    /* 双色块左右分屏（hero） */
    .split-bg-left{
      background: var(--white);
    }
    .split-bg-right{
      background: var(--soft);
    }
    @media (max-width: 992px){
      .hero-left, .hero-right{
        flex: 1 1 100%;
        border-right: none;
        padding: 2.5rem 1.5rem;
      }
      .hero-split{ min-height: auto; }
    }

/* --- 子页面追加 --- */
.about-hero { background: linear-gradient(135deg, var(--main) 0%, var(--accent) 100%); color: var(--white); padding: 4rem 0; border-radius: 0 0 2rem 2rem; }
.about-hero h1 { font-weight: 800; font-size: 2.5rem; }
.about-hero p { opacity: .9; }
.about-card { background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.about-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(79,70,229,.12); }
.about-card i { font-size: 2rem; color: var(--main); }
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item::before { content: ''; position: absolute; left: -1.9rem; top: .25rem; width: 14px; height: 14px; border-radius: 50%; background: var(--main); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--main); }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--main); }
.about-quote { background: var(--soft); border-left: 4px solid var(--accent); padding: 1rem 1.5rem; border-radius: .5rem; font-style: italic; }
.team-tag { display: inline-block; background: var(--soft); color: var(--main); padding: .25rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }

/* --- 子页面追加 --- */
.privacy-section {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 1.5rem;
        }
.privacy-section h2 {
            color: var(--main);
            font-weight: 700;
            margin-bottom: 1.2rem;
        }
.privacy-section h3 {
            color: var(--ink);
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
        }
.privacy-section p {
            color: var(--ink);
            line-height: 1.8;
            margin-bottom: 1rem;
        }
.privacy-list {
            padding-left: 1.2rem;
            color: var(--ink);
        }
.privacy-list li {
            margin-bottom: 0.6rem;
            line-height: 1.7;
        }
.update-date {
            color: var(--accent);
            font-weight: 600;
        }
.privacy-highlight {
            background: var(--soft);
            border-left: 4px solid var(--main);
            padding: 1rem 1.2rem;
            margin: 1.5rem 0;
            border-radius: 0 8px 8px 0;
        }
.privacy-highlight p {
            margin-bottom: 0;
            color: var(--ink);
        }
.contact-box {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 1rem;
        }

/* --- 子页面追加 --- */
/* 确保任何bootstrap组件不出现白底黑字 */
    .card, .card-body, .list-group-item, .accordion-item, .accordion-button, .accordion-body {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }
.progress {
      background-color: var(--soft);
      border: 1px solid var(--line);
    }
.progress-bar {
      background: linear-gradient(90deg, var(--main), var(--accent));
    }
.ranking-item {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 1rem;
      transition: transform .2s, box-shadow .2s;
      padding: 1rem 1.25rem;
    }
.ranking-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px rgba(79, 70, 229, 0.08);
    }
.rank-badge {
      background: var(--main);
      color: white;
      font-weight: 700;
      min-width: 2.5rem;
      height: 2.5rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
.rank-badge.top1 { background: linear-gradient(135deg, #f6b73c, #f8d04c); color: #1e1b4b; }
.rank-badge.top2 { background: linear-gradient(135deg, #b0b6c2, #d0d5de); color: #1e1b4b; }
.rank-badge.top3 { background: linear-gradient(135deg, #cb8e5e, #e6b28a); color: #1e1b4b; }
.genre-chip {
      background: var(--soft);
      color: var(--main);
      font-size: .75rem;
      font-weight: 600;
      padding: .2rem .7rem;
      border-radius: 999px;
      display: inline-block;
      margin-right: .4rem;
    }
.section-title i {
      color: var(--accent);
      font-size: 1.8rem;
    }
.sticky-nav .nav-link-custom.active {
      font-weight: 700;
      color: var(--main) !important;
      border-bottom: 3px solid var(--accent);
    }