:root{
    --primary:#059669;
    --accent:#14b8a6;
    --bg:#f0fdfa;
    --text:#134e4a;
    --radius-card:1rem;
    --radius-full:2.5rem;
    --shadow-sm:0 2px 8px rgba(19,78,74,0.04);
    --shadow-hover:0 18px 35px -8px rgba(5,150,105,0.18);
  }
  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.6;
  }
  h1,h2,h3,h4,.brand-font{
    font-family:'Inter',system-ui,sans-serif;
    font-weight:800;
    letter-spacing:-0.02em;
  }
  /* 左侧固定侧栏布局 */
  .app-layout{
    display:flex;
    max-width:1440px;
    margin:0 auto;
  }
  .left-sidebar{
    width:220px;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
    border-right:1px solid rgba(20,184,166,0.15);
    padding:2rem 1.2rem;
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(6px);
    z-index:200;
  }
  .main-col{
    flex:1;
    min-width:0;
    padding:0 2rem 2rem 2rem;
    max-width:1100px;
  }
  /* 侧栏导航 */
  .sidebar-nav a{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.7rem 1rem;
    border-radius:var(--radius-full);
    color:var(--text);
    text-decoration:none;
    font-weight:500;
    margin-bottom:0.3rem;
    transition:background .2s,color .2s;
    font-size:0.95rem;
  }
  .sidebar-nav a i{width:20px;color:var(--primary);}
  .sidebar-nav a:hover{
    background:rgba(5,150,105,0.08);
    color:var(--primary);
  }
  .sidebar-nav .active-link{
    background:var(--primary);
    color:#fff !important;
    box-shadow:var(--shadow-sm);
  }
  .sidebar-nav .active-link i{color:#fff;}
  /* 移动端收起侧栏 —— 用横向滚动代替 */
  @media (max-width: 768px){
    .app-layout{flex-direction:column;}
    .left-sidebar{
      position:relative;
      width:100%;
      height:auto;
      border-right:none;
      border-bottom:1px solid rgba(20,184,166,0.1);
      padding:0.8rem 1rem;
      display:flex;
      flex-wrap:nowrap;
      overflow-x:auto;
      gap:0.2rem;
      backdrop-filter:none;
      background:rgba(255,255,255,0.8);
    }
    .sidebar-nav{
      display:flex;
      flex-wrap:nowrap;
    }
    .sidebar-nav a{
      white-space:nowrap;
      margin-bottom:0;
      margin-right:0.2rem;
      padding:0.5rem 1.2rem;
      background:rgba(5,150,105,0.06);
    }
    .sidebar-nav a i{display:none;}
    .main-col{padding:1rem 1rem 3rem;}
  }
  /* Hero 渐变文字 + 浮动装饰 */
  .hero-wrap{
    padding:4rem 0 2.5rem;
    position:relative;
  }
  .hero-title{
    font-size:clamp(2.5rem,7vw,4.6rem);
    font-weight:900;
    line-height:1.05;
    background:linear-gradient(120deg, var(--primary), var(--accent), var(--primary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:-0.02em;
  }
  .hero-sub{
    font-size:1.2rem;
    color:#3e6b66;
    max-width:600px;
    margin-top:1.2rem;
    font-weight:400;
  }
  .float-deco{
    position:absolute;
    background:var(--accent);
    opacity:0.12;
    border-radius:50%;
    filter:blur(28px);
    z-index:-1;
  }
  .deco-1{width:240px;height:240px;top:-40px;right:5%;}
  .deco-2{width:140px;height:140px;bottom:0;left:-30px;}
  /* 特色标签页 */
  .tab-panel{display:none;}
  .tab-panel.active-tab{display:block;animation:fadeIn .3s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .tab-buttons{
    display:flex;gap:0.5rem;flex-wrap:wrap;margin:1.5rem 0 1rem;
  }
  .tab-btn{
    border:none;background:rgba(5,150,105,0.06);color:var(--text);
    padding:0.5rem 1.4rem;border-radius:var(--radius-full);font-weight:500;
    transition:all .2s;border:1px solid transparent;
  }
  .tab-btn.active{
    background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);
  }
  /* 卡片 */
  .card-custom{
    background:#fff;
    border:none;
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;
    overflow:hidden;
  }
  .card-custom:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
  }
  .waterfall-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
    gap:1.2rem;
    margin-top:1.5rem;
  }
  /* 时间线 */
  .timeline{
    position:relative;
    padding-left:1.8rem;
    border-left:2px dashed var(--accent);
    margin-top:1.8rem;
  }
  .timeline-item{
    position:relative;
    padding-bottom:2rem;
  }
  .timeline-dot{
    position:absolute;
    left:-2.35rem;
    width:1rem;height:1rem;
    background:var(--primary);
    border-radius:50%;
    border:3px solid white;
    box-shadow:0 0 0 2px var(--accent);
  }
  .timeline-year{
    font-size:2rem;
    font-weight:800;
    color:var(--primary);
    opacity:0.5;
    line-height:1;
  }
  /* 阅读进度条 */
  .progress-scroll{
    position:fixed;
    top:0;left:0;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    width:0%;
    z-index:9999;
    border-radius:0 2px 2px 0;
  }
  /* 回到顶部 */
  #back-to-top{
    position:fixed;
    bottom:1.6rem;right:1.6rem;
    width:48px;height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    border:none;
    font-size:1.3rem;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .2s;
    box-shadow:var(--shadow-hover);
    z-index:300;
  }
  #back-to-top.visible{opacity:1;pointer-events:auto;}
  #back-to-top:hover{transform:scale(1.08);}
  /* 长文区 & FAQ */
  .section-title{
    font-weight:800;
    font-size:1.8rem;
    margin-bottom:1rem;
    letter-spacing:-0.01em;
  }
  .badge-soft{
    background:rgba(20,184,166,0.08);
    color:var(--primary);
    font-weight:600;
    border-radius:100px;
  }
  /* 友链 */
  .friend-links{
    background:rgba(255,255,255,0.5);
    border-radius:var(--radius-card);
    padding:1.5rem;
    margin-top:2rem;
    border:1px solid rgba(20,184,166,0.15);
  }
  footer{
    padding:2rem 0 1rem;
    color:#3e6b66;
    border-top:1px solid rgba(20,184,166,0.1);
    margin-top:2.5rem;
  }
  /* 时间线卡片、CTA */
  .cta-box{
    background:linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%);
    border:1px solid rgba(20,184,166,0.3);
    border-radius:2rem;
    padding:2.2rem;
    margin-top:2rem;
    text-align:center;
  }

/* --- 子页面追加 --- */
/* 本页专属补充样式 */
        .about-hero {
            background: linear-gradient(135deg, rgba(5,150,105,0.08) 0%, rgba(20,184,166,0.04) 100%);
            border: 1px solid rgba(5,150,105,0.15);
            border-radius: var(--radius-card);
            padding: 3rem 2rem;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }
.about-hero h1 {
            font-weight: 800;
            color: var(--text);
            font-size: 2.2rem;
            line-height: 1.3;
            margin-bottom: 1rem;
        }
.about-hero p {
            color: rgba(19,78,74,0.75);
            font-size: 1.05rem;
            max-width: 720px;
            line-height: 1.8;
        }
.about-section {
            margin-bottom: 3.5rem;
        }
.about-section h2 {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.6rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
.about-section h2 i {
            color: var(--accent);
            font-size: 1.3rem;
        }
.about-section h3 {
            font-weight: 600;
            color: var(--text);
            font-size: 1.15rem;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
        }
.about-section p {
            color: rgba(19,78,74,0.8);
            line-height: 1.85;
            font-size: 0.98rem;
            margin-bottom: 1rem;
        }
.about-section ul {
            padding-left: 1.2rem;
            color: rgba(19,78,74,0.8);
            line-height: 1.9;
            font-size: 0.98rem;
        }
.about-section ul li {
            margin-bottom: 0.4rem;
        }
.about-highlight {
            background: rgba(5,150,105,0.06);
            border-left: 4px solid var(--primary);
            padding: 1.2rem 1.5rem;
            border-radius: 0 0.75rem 0.75rem 0;
            margin: 1.5rem 0;
        }
.about-highlight p {
            margin-bottom: 0;
        }
.stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin: 1.5rem 0;
        }
.stat-item {
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(5,150,105,0.12);
            border-radius: var(--radius-card);
            padding: 1.2rem;
            text-align: center;
        }
.stat-item .num {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            display: block;
        }
.stat-item .label {
            font-size: 0.85rem;
            color: rgba(19,78,74,0.65);
            margin-top: 0.3rem;
        }
.about-cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            border-radius: var(--radius-full);
            padding: 2.5rem 3rem;
            color: #fff;
            text-align: center;
            margin: 3rem 0 1rem;
        }
.about-cta h3 {
            color: #fff;
            font-weight: 700;
            font-size: 1.4rem;
            margin-bottom: 0.6rem;
        }
.about-cta p {
            color: rgba(255,255,255,0.85);
            margin-bottom: 1.2rem;
        }
.about-cta .btn-custom {
            background: #fff;
            color: var(--primary);
            border: none;
            padding: 0.6rem 2rem;
            border-radius: var(--radius-full);
            font-weight: 600;
            font-size: 0.95rem;
            display: inline-block;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
.about-cta .btn-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
.about-hero {
                padding: 2rem 1.2rem;
            }
.about-hero h1 {
                font-size: 1.7rem;
            }
.about-cta {
                padding: 2rem 1.5rem;
                border-radius: var(--radius-card);
            }