:root{
  --primary:#0891b2;
  --accent:#0ea5e9;
  --bg:#ecfeff;
  --text:#083344;
  --border:#083344;
  --shadow:6px 6px 0px 0px #083344;
  --white:#ffffff;
}
*{box-sizing:border-box;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Noto Sans SC',sans-serif;
  font-weight:400;
  line-height:1.8;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.font-serif{
  font-family:'Source Serif SC','Noto Serif SC',serif;
  font-weight:900;
  color:var(--text);
}
/* 阅读进度条 */
.progress-bar-top{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  z-index:9999;transition:width 0.1s ease-out;
}
/* 浮动光斑 */
.glow-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:0.55;z-index:0;}
/* 全直角风格 */
.no-radius{border-radius:0 !important;}
.card,.btn,.navbar,.progress-bar-top,.sharp-card{border-radius:0;}
/* 硬阴影 */
.hard-shadow{box-shadow:var(--shadow);}
.hard-shadow-sm{box-shadow:4px 4px 0px 0px var(--border);}
.hover-lift{transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}
.hover-lift:hover{transform:scale(1.02);border-color:var(--accent);box-shadow:8px 8px 0px 0px var(--primary);}
/* 导航 */
.navbar-custom{
  background:var(--bg);
  border-bottom:3px solid var(--border);
  z-index:1000;
  padding:12px 0;
}
.navbar-brand{
  font-family:'Source Serif SC',serif;
  font-weight:900;
  font-size:1.6rem;
  color:var(--text) !important;
  letter-spacing:1px;
}
.navbar-custom .nav-link{
  color:var(--text);
  font-weight:600;
  margin:0 8px;
  position:relative;
  border-bottom:2px solid transparent;
  transition:all 0.2s;
}
.navbar-custom .nav-link:hover{
  border-bottom-color:var(--primary);
  color:var(--primary);
}
.navbar-toggler{border:2px solid var(--border);border-radius:0;outline:none;}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--accent);}
/* Hero */
.hero-section{
  padding:120px 0 100px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #e0f2fe 100%);
  border-bottom:3px solid var(--border);
}
.gradient-text{
  background:linear-gradient(120deg, var(--primary), var(--accent), var(--text));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.hero-subtitle{font-size:1.2rem;max-width:600px;}
/* 时间线 */
.timeline-section{position:relative;padding:80px 0;}
.timeline-container{position:relative;max-width:1100px;margin:0 auto;}
.timeline-container::before{
  content:'';
  position:absolute;
  left:50%;top:0;bottom:0;
  width:4px;background:var(--border);
  transform:translateX(-50%);
}
.timeline-step{position:relative;width:50%;padding:20px 40px;}
.timeline-step.left{left:0;text-align:right;}
.timeline-step.right{left:50%;text-align:left;}
.timeline-step .step-num{
  display:inline-block;
  background:var(--primary);color:#fff;
  font-weight:900;padding:6px 18px;
  border:2px solid var(--border);
  box-shadow:3px 3px 0px var(--border);
  font-size:1.1rem;
  margin-bottom:10px;
}
.timeline-step .step-card{
  background:var(--white);
  border:3px solid var(--border);
  padding:20px;
  transition:transform 0.3s, box-shadow 0.3s;
}
.timeline-step .step-card:hover{transform:scale(1.03);box-shadow:var(--shadow);}
@media (max-width:768px){
  .timeline-container::before{left:20px;}
  .timeline-step{width:100%;left:0 !important;text-align:left;padding-left:60px;padding-right:20px;}
  .timeline-step.left{text-align:left;}
  .hero-section{padding:100px 0 80px;}
}
/* 特色卡片 */
.feature-grid .feature-card{
  background:var(--white);
  border:3px solid var(--border);
  padding:30px 20px;
  transition:all 0.3s ease;
  opacity:0;
  transform:translateY(30px);
}
.feature-grid .feature-card.visible{opacity:1;transform:translateY(0);}
.feature-grid .feature-card:nth-child(1){transition-delay:0.1s;}
.feature-grid .feature-card:nth-child(2){transition-delay:0.25s;}
.feature-grid .feature-card:nth-child(3){transition-delay:0.4s;}
.feature-grid .feature-card:nth-child(4){transition-delay:0.55s;}
.feature-card .icon-box{
  width:60px;height:60px;
  background:var(--bg);
  border:3px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;
  font-size:1.6rem;color:var(--primary);
}
/* 对比表格 */
.compare-table{
  width:100%;border-collapse:collapse;
  border:3px solid var(--border);
  background:var(--white);
}
.compare-table th,.compare-table td{
  padding:15px 20px;border:2px solid var(--border);
  text-align:center;font-weight:500;
}
.compare-table th{background:var(--primary);color:#fff;font-weight:800;font-family:'Source Serif SC',serif;}
.compare-table td:first-child{font-weight:700;text-align:left;}
.compare-table .yes{color:var(--primary);font-weight:900;font-size:1.2rem;}
.compare-table .no{color:#dc2626;font-weight:900;}
/* 长文介绍 */
.long-intro{
  background:var(--white);
  border:3px solid var(--border);
  padding:50px 40px;
  margin-top:40px;
  box-shadow:var(--shadow);
}
.intro-list{counter-reset:step;list-style:none;padding-left:0;}
.intro-list li{
  counter-increment:step;
  position:relative;
  padding:15px 0 15px 55px;
  font-size:1.05rem;
  border-bottom:2px dashed var(--border);
}
.intro-list li:last-child{border-bottom:none;}
.intro-list li::before{
  content:counter(step);
  position:absolute;left:0;top:12px;
  width:38px;height:38px;
  background:var(--bg);
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.1rem;
  color:var(--primary);
  box-shadow:2px 2px 0px var(--border);
}
/* FAQ */
.faq-item{
  background:var(--white);
  border:3px solid var(--border);
  margin-bottom:20px;
  padding:0;
  overflow:hidden;
}
.faq-q{
  padding:18px 25px;
  font-weight:700;font-size:1.1rem;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg);
  transition:background 0.2s;
  font-family:'Source Serif SC',serif;
  border-bottom:3px solid transparent;
}
.faq-q:hover{background:#cffafe;}
.faq-q i{transition:transform 0.3s;font-size:1.2rem;}
.faq-a{
  padding:0 25px;max-height:0;overflow:hidden;
  transition:max-height 0.4s ease, padding 0.4s ease;
  background:var(--white);
}
.faq-a.show{max-height:300px;padding:20px 25px;}
/* CTA */
.cta-section{
  background:var(--text);
  color:var(--bg);
  padding:80px 0;
  border-top:4px solid var(--border);
  position:relative;
  overflow:hidden;
}
.cta-section h2{color:var(--bg);}
.cta-btn{
  background:var(--primary);
  color:#fff;
  border:3px solid var(--bg);
  padding:14px 40px;
  font-weight:800;
  font-size:1.2rem;
  text-decoration:none;
  transition:all 0.3s;
  box-shadow:6px 6px 0px rgba(0,0,0,0.3);
  display:inline-block;
}
.cta-btn:hover{
  background:var(--accent);
  transform:translate(-2px,-2px);
  color:#fff;
  box-shadow:10px 10px 0px rgba(0,0,0,0.3);
}
/* 页脚 */
.footer-custom{
  background:var(--text);
  color:#cbd5e1;
  padding:60px 0 20px;
  border-top:3px solid var(--primary);
}
.footer-custom a{color:#e0f2fe;text-decoration:none;}
.footer-custom a:hover{color:var(--accent);}
/* 友情链接 */
.friend-links{
  background:var(--bg);
  border:3px solid var(--border);
  padding:30px;
  margin:60px 0;
}
.friend-links .links-row{
  display:flex;flex-wrap:wrap;gap:10px 30px;
  font-size:0.95rem;
}
.friend-links a{
  color:var(--primary);text-decoration:none;
  border-bottom:1px dashed var(--primary);
  padding-bottom:2px;
}
/* 滚动显现 */
.fade-up{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease, transform 0.7s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.delay-1{transition-delay:0.15s;}
.delay-2{transition-delay:0.3s;}
.delay-3{transition-delay:0.45s;}
.delay-4{transition-delay:0.6s;}
/* 卡片错落 */
.stagger-card{opacity:0;transform:translateY(30px) scale(0.98);transition:opacity 0.6s, transform 0.6s;}
.stagger-card.visible{opacity:1;transform:translateY(0) scale(1);}
/* 小节标题 */
.section-title{
  font-size:2.5rem;
  margin-bottom:20px;
  position:relative;
  display:inline-block;
}
.section-title::after{
  content:'';
  position:absolute;left:0;bottom:-8px;
  width:100%;height:5px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
@media(max-width:768px){
  .section-title{font-size:2rem;}
}

@keyframes float{
      0%,100%{transform:translateY(0) rotate(0deg);}
      50%{transform:translateY(-20px) rotate(10deg);}
    }

/* --- 子页面追加 --- */
.about-hero {
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden;
        }
.about-hero h1 {
            font-size: 2.6rem;
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 20px;
        }
.about-hero .lead {
            font-size: 1.15rem;
            max-width: 780px;
            margin: 0 auto 30px;
            opacity: 0.9;
        }
.about-section {
            padding: 70px 0;
        }
.about-section .section-tag {
            display: inline-block;
            background: var(--primary);
            color: var(--white);
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 20px;
            border: 2px solid var(--border);
            box-shadow: 3px 3px 0 0 var(--border);
        }
.about-section h2 {
            font-size: 1.9rem;
            font-weight: 800;
            margin-bottom: 24px;
            line-height: 1.3;
        }
.about-section p {
            font-size: 1.02rem;
            line-height: 1.9;
            opacity: 0.92;
            margin-bottom: 18px;
        }
.about-section .highlight-box {
            background: rgba(8, 145, 178, 0.08);
            border-left: 4px solid var(--primary);
            padding: 20px 24px;
            border-radius: 0 12px 12px 0;
            margin: 30px 0;
            font-weight: 500;
        }
.values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
            margin-top: 35px;
        }
.value-item {
            background: var(--card-bg, var(--white));
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 28px 22px;
            box-shadow: var(--shadow-sm, 4px 4px 0 0 var(--border));
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
.value-item:hover {
            transform: translateY(-4px);
            box-shadow: 7px 7px 0 0 var(--border);
        }
.value-item i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 16px;
            display: inline-block;
        }
.value-item h3 {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
.value-item p {
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 0;
            opacity: 0.85;
        }
.stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin: 40px 0 20px;
            justify-content: center;
        }
.stat-item {
            text-align: center;
            min-width: 130px;
        }
.stat-item .number {
            font-size: 2.4rem;
            font-weight: 900;
            color: var(--primary);
            line-height: 1;
        }
.stat-item .label {
            font-size: 0.9rem;
            opacity: 0.75;
            margin-top: 6px;
            font-weight: 500;
        }
.timeline-simple {
            position: relative;
            padding-left: 30px;
            margin: 30px 0;
        }
.timeline-simple::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, var(--primary), var(--accent));
            border-radius: 3px;
        }
.timeline-simple .tl-item {
            position: relative;
            margin-bottom: 32px;
        }
.timeline-simple .tl-item::before {
            content: '';
            position: absolute;
            left: -26px;
            top: 6px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent);
            border: 3px solid var(--white);
            box-shadow: 0 0 0 2px var(--border);
        }
.timeline-simple .tl-year {
            font-weight: 800;
            color: var(--primary);
            font-size: 1.05rem;
            margin-bottom: 4px;
        }
.timeline-simple .tl-text {
            font-size: 0.95rem;
            line-height: 1.7;
            opacity: 0.88;
        }
.cta-about {
            background: var(--primary);
            color: var(--white);
            padding: 55px 0;
            text-align: center;
            border-top: 3px solid var(--border);
            border-bottom: 3px solid var(--border);
        }
.cta-about h2 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 14px;
            color: var(--white);
        }
.cta-about p {
            opacity: 0.9;
            margin-bottom: 28px;
            font-size: 1.05rem;
        }
.about-hero h1 { font-size: 1.9rem; }
.about-section h2 { font-size: 1.5rem; }
.about-section { padding: 50px 0; }
.values-grid { grid-template-columns: 1fr 1fr; }
.stats-row { gap: 20px; }
.values-grid { grid-template-columns: 1fr; }

/* --- 子页面追加 --- */
/* 确保任何可能遗漏的bootstrap组件也能与深色/浅色协调，但主要依靠站点css类 */
    .disclaimer-page .card, 
    .disclaimer-page .card-body {
      background: var(--bg, #ecfeff);
      color: var(--text, #083344);
      border-color: var(--border, #083344);
    }
.disclaimer-page .list-group-item {
      background: var(--bg, #ecfeff);
      color: var(--text, #083344);
      border-color: var(--border, #083344);
    }
.disclaimer-page .form-control {
      background: rgba(255,255,255,0.5);
      color: var(--text, #083344);
      border-color: var(--border, #083344);
    }
.disclaimer-page .accordion-item,
    .disclaimer-page .accordion-button {
      background: var(--bg, #ecfeff);
      color: var(--text, #083344);
      border-color: var(--border, #083344);
    }
/* 针对导航高亮当前页 */
    .navbar-custom .nav-link.active {
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-color: var(--accent, #0ea5e9);
    }
/* 小标题均带品牌名，个性化 */
    .disclaimer-title {
      border-left: 8px solid var(--primary, #0891b2);
      padding-left: 1rem;
    }

/* --- 子页面追加 --- */
/* 热榜页面专属样式 */
        .ranking-hero {
            background: linear-gradient(135deg, #0891b2 0%, #0ea5e9 100%);
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden;
        }
.ranking-hero .container {
            position: relative;
            z-index: 2;
        }
.ranking-hero h1 {
            color: #fff;
            font-size: 2.8rem;
            font-weight: 900;
            margin-bottom: 15px;
            text-shadow: 3px 3px 0 rgba(8, 51, 68, 0.3);
        }
.ranking-hero p {
            color: rgba(255,255,255,0.9);
            font-size: 1.1rem;
            max-width: 600px;
        }
.rank-tabs {
            background: var(--bg);
            padding: 30px 0;
            border-bottom: 2px solid var(--border);
        }
.rank-tab-item {
            display: inline-block;
            padding: 10px 25px;
            background: var(--white);
            border: 2px solid var(--border);
            box-shadow: 4px 4px 0 0 var(--border);
            margin-right: 15px;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
.rank-tab-item:hover, .rank-tab-item.active {
            background: var(--primary);
            color: #fff;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 0 var(--border);
        }
.rank-section {
            padding: 60px 0;
        }
.rank-card {
            background: var(--white);
            border: 2px solid var(--border);
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
            position: relative;
        }
.rank-card:hover {
            transform: translate(-3px, -3px);
        }
.rank-number {
            position: absolute;
            top: -15px;
            left: -15px;
            width: 45px;
            height: 45px;
            background: var(--primary);
            color: #fff;
            font-size: 1.3rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
            box-shadow: 3px 3px 0 0 var(--border);
            z-index: 1;
        }
.rank-number.top-1 {
            background: #f59e0b;
        }
.rank-number.top-2 {
            background: #94a3b8;
        }
.rank-number.top-3 {
            background: #d97706;
        }
.rank-card h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 10px;
            padding-left: 40px;
        }
.rank-card .rank-tags {
            margin-bottom: 10px;
            padding-left: 40px;
        }
.rank-tag {
            display: inline-block;
            background: var(--bg);
            color: var(--primary);
            padding: 3px 12px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-right: 8px;
            border: 1px solid var(--border);
        }
.rank-card p {
            color: var(--text);
            opacity: 0.8;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
            padding-left: 40px;
        }
.rank-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-left: 40px;
            border-top: 1px dashed var(--border);
            padding-top: 15px;
        }
.rank-meta span {
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 600;
        }
.rank-meta i {
            color: var(--primary);
            margin-right: 5px;
        }
.trend-up {
            color: #059669;
        }
.trend-down {
            color: #dc2626;
        }
.ranking-footer-note {
            background: var(--white);
            border: 2px solid var(--border);
            box-shadow: var(--shadow);
            padding: 30px;
            margin-top: 50px;
        }
.ranking-footer-note h4 {
            color: var(--text);
            font-weight: 800;
            margin-bottom: 15px;
        }
.ranking-footer-note p {
            color: var(--text);
            opacity: 0.8;
            line-height: 1.8;
            margin-bottom: 10px;
        }
.ranking-hero h1 {
                font-size: 2rem;
            }
.rank-tab-item {
                display: block;
                margin-bottom: 10px;
                text-align: center;
            }
.rank-card h3, .rank-card p, .rank-meta {
                padding-left: 35px;
            }

/* --- 子页面追加 --- */
.guide-hero { padding: 4rem 0 2rem; }
.guide-section { margin-bottom: 3rem; }
.guide-section h2 { margin-bottom: 1.2rem; }
.guide-card { background: var(--white); border: 2px solid var(--border); border-radius: 0; box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; transition: transform .2s ease; }
.guide-card:hover { transform: translateY(-3px); }
.guide-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .8rem; color: var(--primary); }
.guide-card p, .guide-card li { font-size: .95rem; line-height: 1.7; }
.guide-card ul, .guide-card ol { padding-left: 1.2rem; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--primary); color: var(--white); font-weight: 700; border-radius: 50%; margin-right: 8px; font-size: .85rem; }
.shortcut-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.shortcut-table th { background: var(--primary); color: var(--white); padding: .6rem .8rem; text-align: left; font-size: .9rem; border: 1px solid var(--border); }
.shortcut-table td { padding: .5rem .8rem; border: 1px solid var(--border); font-size: .9rem; background: var(--white); color: var(--text); }
.shortcut-table tr:nth-child(even) td { background: var(--bg); }
.tip-box { background: var(--bg); border-left: 4px solid var(--accent); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.tip-box p { margin-bottom: 0; font-size: .9rem; }
.faq-mini-item { margin-bottom: 1rem; }
.faq-mini-item h4 { font-size: 1rem; font-weight: 700; color: var(--text); }
.faq-mini-item p { font-size: .9rem; margin-bottom: .3rem; }
.current-nav { font-weight: 700; color: var(--primary) !important; border-bottom: 2px solid var(--primary); }
.guide-sidebar { background: var(--white); border: 2px solid var(--border); box-shadow: var(--shadow-sm); padding: 1.2rem; }
.guide-sidebar a { display: block; padding: .5rem .8rem; color: var(--text); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.guide-sidebar a:hover { border-left-color: var(--primary); color: var(--primary); }
.guide-hero { padding: 2rem 0 1rem; }
.guide-card { padding: 1rem; }