/* style.css - www.色萝网站17c (iczhen.com) */
/* 全局重置与基础 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#f0f4f8;color:#1a2a3a;line-height:1.7;transition:background .4s,color .4s;overflow-x:hidden}
a{text-decoration:none;color:inherit;transition:color .3s}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* 自定义属性 */
:root{--primary:#2a7a4e;--primary-dark:#1e5a38;--primary-light:#4caf7a;--bg:#f0f4f8;--card-bg:rgba(255,255,255,0.75);--text:#1a2a3a;--text-light:#555;--shadow:0 8px 32px rgba(0,0,0,0.08);--radius:16px;--transition:0.4s cubic-bezier(0.23,1,0.32,1)}
body.dark-mode{--primary:#3d9b6e;--primary-dark:#2a7a4e;--primary-light:#5fc48e;--bg:#121a22;--card-bg:rgba(30,40,50,0.8);--text:#e0e8f0;--text-light:#aab;--shadow:0 8px 32px rgba(0,0,0,0.4)}

/* 滚动条 */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}

/* 头部导航 */
header{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:0.8rem 2.5rem;background:rgba(42,122,78,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 2px 20px rgba(0,0,0,0.15);transition:background .4s}
body.dark-mode header{background:rgba(26,40,50,0.92)}
.logo{font-weight:700;font-size:1.6rem;letter-spacing:1px;background:linear-gradient(135deg,#fff,#c8e6c9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
nav{display:flex;gap:1.8rem;flex-wrap:wrap}
nav a{font-size:0.95rem;font-weight:500;position:relative;padding:0.3rem 0;color:rgba(255,255,255,0.9);transition:color .3s}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#fff;transition:width .3s}
nav a:hover{color:#fff}
nav a:hover::after{width:100%}
.search-box{display:flex;align-items:center;gap:0.5rem;margin-left:1rem}
.search-box input{padding:0.4rem 0.8rem;border:none;border-radius:30px;background:rgba(255,255,255,0.2);color:#fff;outline:none;width:130px;transition:width .3s,background .3s;font-size:0.85rem}
.search-box input::placeholder{color:rgba(255,255,255,0.6)}
.search-box input:focus{width:180px;background:rgba(255,255,255,0.3)}
.search-box button{background:rgba(255,255,255,0.15);border:none;color:#fff;padding:0.4rem 0.8rem;border-radius:30px;cursor:pointer;font-size:0.9rem;transition:background .3s;backdrop-filter:blur(4px)}
.search-box button:hover{background:rgba(255,255,255,0.3)}
.dark-toggle{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:0.2rem 0.5rem;transition:transform .3s}
.dark-toggle:hover{transform:rotate(20deg)}

/* 移动端导航适配 */
@media(max-width:768px){
  header{flex-wrap:wrap;padding:0.6rem 1rem}
  nav{order:3;width:100%;justify-content:center;gap:1rem;margin-top:0.5rem}
  .search-box{order:2;margin-left:auto}
  .search-box input{width:100px}
}

/* Hero 区域 - 渐变Banner */
.hero{position:relative;padding:5rem 2rem 6rem;text-align:center;background:linear-gradient(135deg,#1e5a38 0%,#2a7a4e 40%,#4caf7a 70%,#81c784 100%);color:#fff;overflow:hidden}
.hero::before{content:'';position:absolute;top:-30%;left:-20%;width:70%;height:140%;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);pointer-events:none;animation:heroGlow 8s ease-in-out infinite alternate}
@keyframes heroGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10%,10%) scale(1.2)}}
.hero h1{font-size:3rem;font-weight:800;margin-bottom:1.2rem;text-shadow:0 4px 20px rgba(0,0,0,0.2);animation:fadeUp 0.8s ease-out}
.hero p{font-size:1.2rem;max-width:780px;margin:0 auto;opacity:0.92;line-height:1.8;animation:fadeUp 0.8s 0.2s ease-out both}
@media(max-width:768px){
  .hero{padding:3rem 1.2rem 4rem}
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
}

/* 通用section */
.section{padding:4rem 2rem;max-width:1200px;margin:0 auto;animation:fadeUp 0.6s ease-out}
.section h2{font-size:2rem;color:var(--primary);margin-bottom:2rem;position:relative;display:inline-block;padding-bottom:0.6rem}
.section h2::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:2px}
.section h3{font-size:1.3rem;color:var(--primary-dark);margin-top:1.8rem;margin-bottom:0.8rem}
.section p{color:var(--text-light);margin-bottom:1rem}
@media(max-width:768px){
  .section{padding:2.5rem 1rem}
  .section h2{font-size:1.6rem}
}

/* 网格卡片 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.card{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:2rem 1.8rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.2);transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),box-shadow 0.4s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light));opacity:0;transition:opacity .4s}
.card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
.card:hover::before{opacity:1}
.card h3{font-size:1.3rem;color:var(--primary);margin-bottom:0.8rem}
.card p{color:var(--text-light);font-size:0.95rem;line-height:1.7}
@media(max-width:768px){
  .grid{gap:1.2rem}
  .card{padding:1.5rem}
}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(0,0,0,0.08);padding:1.2rem 0;transition:background .3s;border-radius:8px;padding-left:1rem;padding-right:1rem}
body.dark-mode .faq-item{border-color:rgba(255,255,255,0.08)}
.faq-question{font-weight:600;font-size:1.05rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text);transition:color .3s}
.faq-question::after{content:'+';font-size:1.3rem;color:var(--primary);transition:transform .3s}
.faq-item.active .faq-question{color:var(--primary)}
.faq-item.active .faq-question::after{content:'−';transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s ease,opacity 0.4s;opacity:0;padding-top:0;color:var(--text-light)}
.faq-item.active .faq-answer{max-height:300px;opacity:1;padding-top:0.8rem}

/* 文章列表 */
.article-list article{background:var(--card-bg);backdrop-filter:blur(10px);border-radius:var(--radius);padding:1.5rem 2rem;margin-bottom:1.5rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.15);transition:transform .3s,box-shadow .3s}
.article-list article:hover{transform:translateX(6px);box-shadow:0 12px 36px rgba(0,0,0,0.08)}
.article-list article h3{font-size:1.15rem;color:var(--primary-dark);margin-bottom:0.3rem}
.article-list article time{color:var(--text-light);font-size:0.85rem}
.article-list article p{margin:0.5rem 0;color:var(--text-light)}
.article-list article a{color:var(--primary);font-weight:500;transition:color .3s}
.article-list article a:hover{color:var(--primary-light)}

/* 页脚 */
.footer{background:#1a2a3a;color:#b0b8c0;padding:2.5rem 2rem;text-align:center;margin-top:3rem;border-top:4px solid var(--primary)}
body.dark-mode .footer{background:#0d151c}
.footer a{color:#9aa3ad;margin:0 0.6rem;transition:color .3s}
.footer a:hover{color:#fff}
.footer p{margin:0.3rem 0;font-size:0.9rem}

/* 返回顶部 */
.back-to-top{position:fixed;bottom:2.5rem;right:2.5rem;background:var(--primary);color:#fff;padding:0.7rem 1.2rem;border-radius:40px;cursor:pointer;font-size:0.95rem;box-shadow:0 4px 20px rgba(42,122,78,0.4);transition:all .4s cubic-bezier(0.23,1,0.32,1);opacity:0;transform:translateY(20px) scale(0.8);pointer-events:none;z-index:999;border:none;backdrop-filter:blur(8px)}
.back-to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.back-to-top:hover{background:var(--primary-dark);transform:translateY(-4px) scale(1.05);box-shadow:0 8px 30px rgba(42,122,78,0.5)}
body.dark-mode .back-to-top{background:var(--primary-dark);box-shadow:0 4px 20px rgba(0,0,0,0.5)}

/* 联系与地图区域 */
#contact p, #sitemap li, #friend-links p{background:var(--card-bg);backdrop-filter:blur(10px);padding:0.8rem 1.2rem;border-radius:12px;margin-bottom:0.6rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.1);transition:transform .3s}
#contact p:hover, #sitemap li:hover{transform:translateX(4px)}
#sitemap ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.8rem}
#sitemap li a{font-weight:500;color:var(--primary);transition:color .3s}
#sitemap li a:hover{color:var(--primary-light)}

/* 使用教程 */
#howto ol{padding-left:1.5rem;margin:1rem 0}
#howto ol li{margin-bottom:0.8rem;line-height:1.8;color:var(--text-light)}
#howto ol li strong{color:var(--primary)}

/* 动画 */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.section,.card,.article-list article,.faq-item,.hero h1,.hero p{animation:fadeUp 0.7s ease-out both}
.section:nth-child(2){animation-delay:0.1s}
.section:nth-child(3){animation-delay:0.2s}
.section:nth-child(4){animation-delay:0.3s}
.section:nth-child(5){animation-delay:0.4s}
.section:nth-child(6){animation-delay:0.5s}
.section:nth-child(7){animation-delay:0.6s}
.section:nth-child(8){animation-delay:0.7s}
.section:nth-child(9){animation-delay:0.8s}
.card:nth-child(1){animation-delay:0.1s}
.card:nth-child(2){animation-delay:0.2s}
.card:nth-child(3){animation-delay:0.3s}

/* 响应式增强 */
@media(max-width:600px){
  header{padding:0.5rem 0.8rem}
  .logo{font-size:1.2rem}
  nav{gap:0.6rem;font-size:0.85rem}
  .search-box input{width:80px;font-size:0.8rem}
  .search-box input:focus{width:110px}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:0.95rem}
  .section{padding:2rem 0.8rem}
  .grid{grid-template-columns:1fr}
  .card{padding:1.2rem}
  .back-to-top{bottom:1.2rem;right:1.2rem;padding:0.5rem 1rem;font-size:0.85rem}
  .footer{padding:1.5rem 1rem;font-size:0.85rem}
  #sitemap ul{grid-template-columns:repeat(2,1fr)}
}

/* 暗色模式微调 */
body.dark-mode .card{border-color:rgba(255,255,255,0.06)}
body.dark-mode .article-list article{border-color:rgba(255,255,255,0.06)}
body.dark-mode #contact p,body.dark-mode #sitemap li,body.dark-mode #friend-links p{border-color:rgba(255,255,255,0.06)}
body.dark-mode .faq-item{border-color:rgba(255,255,255,0.06)}
body.dark-mode .section h2::after{background:linear-gradient(90deg,var(--primary-light),#81c784)}