*{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft YaHei;}
body{background:#f0f7ff;color:#333;}
header{background:#347abc;padding:20px;text-align:center;font-size:24px;color:#fff;}
nav{position:sticky;top:0;z-index:99;padding:12px;background:#26547c;}
nav ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:5px;}
nav a{color:#fff;padding:8px 16px;cursor:pointer;border-radius:4px;text-decoration:none;transition:0.3s;}
nav a:hover{background:#62a8e5;}
.wrap{max-width:1200px;margin:30px auto;padding:0 15px;}
.box{display:none;animation:fade .4s;}
.box.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.text-box{background:#ffffff;padding:25px;border-radius:10px;box-shadow:0 2px 12px #cce0f5;margin-bottom:30px;}
.text-box h2{color:#347abc;margin-bottom:12px;}
.plant-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;}
.item{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #ddd;cursor:pointer;transition:0.3s;}
.item:hover{transform:translateY(-6px);}
.item img{width:100%;height:170px;object-fit:cover;}
.item h3{text-align:center;padding:12px;color:#347abc;}
.detail{display:flex;gap:30px;flex-wrap:wrap;align-items:center;background:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 12px #ddd;margin-bottom:25px;}
.bigimg{width:320px;height:320px;object-fit:cover;border-radius:8px;}
.word{flex:1;min-width:280px;}
.word h2{color:#347abc;margin-bottom:12px;}
.img-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;}
.img-group img{width:100%;height:160px;object-fit:cover;border-radius:6px;transition:0.3s;}
.img-group img:hover{transform:scale(1.05);}
footer{background:#26547c;color:#fff;text-align:center;padding:15px;margin-top:50px;}
@media(max-width:700px){
    .detail{justify-content:center;text-align:center;}
    .bigimg{width:100%;max-width:320px;height:auto;}
}