/* ========== CSS变量 ========== */
:root{
  --deep-green:#1a5c4c;--green-mid:#2d8b7a;--green-light:#3da88e;
  --gold:#c9a84c;--gold-light:#e8d48b;--gold-pale:#f5ecd0;
  --mint:#b8ddd4;--mint-light:#daf0ea;--mint-pale:#eef8f5;
  --cream:#f5f0e0;--ink:#1a2e3a;--ink-light:#3a5a6a;
  --white:#ffffff;--shadow:0 4px 24px rgba(26,92,76,0.12);--radius:8px;
}

/* ========== 容器 ========== */
.container{width:1200px;margin:0 auto}

/* ========== 头部 ========== */
.site-header{position:relative;top:0;left:0;right:0;z-index:1000;background:var(--deep-green)}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 40px}
.logo-area{display:flex;align-items:center;gap:12px}
.logo-area img{height:40px}
.logo-text{font-family:'Noto Serif SC',serif;font-size:16px;font-weight:700;color:var(--white);letter-spacing:2px}
.logo-text span{display:block;font-size:10px;font-weight:400;opacity:0.8;letter-spacing:1px;margin-top:2px}

.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{padding:8px 16px;font-size:14px;color:rgba(255,255,255,0.9);border-radius:4px;transition:all .3s;position:relative;letter-spacing:1px}
.main-nav a:hover,.main-nav a.n-active{color:var(--gold-light);background:rgba(255,255,255,0.08)}
.main-nav a::after{content:'';position:absolute;bottom:4px;left:50%;width:0;height:2px;background:var(--gold);transition:all .3s;transform:translateX(-50%)}
.main-nav a:hover::after,.main-nav a.n-active::after{width:60%}
.nav-dropdown{position:relative}
.nav-dropdown .dropdown-menu{position:absolute;top:100%;left:0;min-width:150px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s;z-index:100}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:10px 18px;color:var(--ink);font-size:13px}
.dropdown-menu a:hover{background:var(--mint-light);color:var(--deep-green)}
.dropdown-menu a::after{display:none}
.header-login{margin-left:12px;padding:8px 24px;background:var(--gold);color:var(--deep-green);border-radius:20px;font-size:13px;font-weight:600;transition:all .3s;letter-spacing:1px}
.header-login:hover{background:var(--gold-light);transform:translateY(-1px)}

/* ========== 底部 ========== */
.site-footer{background:var(--ink);color:rgba(255,255,255,0.7);padding:50px 40px 24px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-brand h3{font-family:'Noto Serif SC',serif;font-size:18px;color:var(--white);margin-bottom:10px;letter-spacing:2px}
.footer-brand p{font-size:13px;line-height:1.8;opacity:0.7}
.footer-col h4{font-size:14px;color:var(--white);margin-bottom:14px;letter-spacing:1px}
.footer-col a{display:block;font-size:13px;padding:5px 0;opacity:0.6;transition:all .3s}
.footer-col a:hover{opacity:1;color:var(--gold-light);transform:translateX(4px)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12px;opacity:0.5}

/* ========== 面包屑 ========== */
.breadcrumb{display:flex;align-items:center;padding:15px 0;font-size:14px;color:var(--ink-light)}
.breadcrumb img{width:18px;height:18px;margin-right:8px}
.breadcrumb a{color:var(--ink-light)}
.breadcrumb a:hover{color:var(--deep-green)}
.breadcrumb span{margin:0 5px;color:#999}

/* ========== 页面Banner ========== */
.page-banner{padding:48px 40px 56px;text-align:center;background:linear-gradient(135deg,#1a5c4c 0%,#2d8b7a 40%,#1a5c4c 100%);background-size:200% 200%;animation:bannerGrad 8s ease infinite;position:relative;overflow:hidden}
@keyframes bannerGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.page-banner::before{content:'';position:absolute;top:-60px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.04);animation:bannerFloat 6s ease-in-out infinite}
.page-banner::after{content:'';position:absolute;bottom:-80px;left:-30px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,0.03);animation:bannerFloat 8s ease-in-out infinite reverse}
@keyframes bannerFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}
.page-banner .banner-deco{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;height:320px;border:1px solid rgba(255,255,255,0.06);border-radius:50%;pointer-events:none}
.page-banner .banner-deco::before{content:'';position:absolute;inset:30px;border:1px solid rgba(255,255,255,0.04);border-radius:50%}
.page-banner h2{font-family:'Noto Serif SC',serif;font-size:26px;font-weight:700;color:var(--white);letter-spacing:6px;position:relative;animation:bannerUp .6s ease both}
.page-banner h2::after{content:'';display:block;width:40px;height:3px;background:var(--gold);border-radius:2px;margin:12px auto 0;animation:bannerUp .6s ease .15s both}
.page-banner h2 .en{display:block;font-family:'Noto Sans SC',sans-serif;font-size:11px;font-weight:400;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:3px;margin-top:10px;animation:bannerUp .6s ease .3s both}
@keyframes bannerUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ========== 搜索栏 ========== */
.search-bar{display:flex;align-items:center;padding:20px 0}
.search-bar input{flex:1;height:40px;padding:0 15px;border:1.5px solid var(--mint);border-radius:6px 0 0 6px;font-size:14px;outline:none}
.search-bar input:focus{border-color:var(--green-mid)}
.search-bar button{height:40px;padding:0 25px;background:var(--deep-green);color:var(--white);border:none;border-radius:0 6px 6px 0;font-size:14px;cursor:pointer;transition:background .3s;letter-spacing:2px}
.search-bar button:hover{background:var(--green-mid)}

/* ========== 卡片网格 ========== */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0}
.card-item{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:all .4s}
.card-item:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(26,92,76,0.15)}
.card-item .card-img{position:relative;width:100%;height:180px;overflow:hidden}
.card-item .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card-item:hover .card-img img{transform:scale(1.05)}
.card-item .card-img .card-tag{position:absolute;bottom:0;left:0;padding:3px 10px;background:rgba(26,92,76,0.85);color:var(--white);font-size:12px;border-radius:0 6px 0 0}
.card-item .card-info{padding:15px}
.card-item .card-info h3{font-size:16px;color:var(--ink);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-item .card-info p{font-size:13px;color:var(--ink-light);line-height:1.5}

/* ========== 分页 ========== */
.pagination{display:flex;justify-content:center;align-items:center;padding:30px 0;gap:8px}
.pagination a{display:inline-block;padding:8px 16px;border:1.5px solid var(--mint);border-radius:6px;color:var(--ink-light);font-size:14px;transition:all .3s}
.pagination a:hover,.pagination a.active{background:var(--deep-green);border-color:var(--deep-green);color:var(--white)}

/* ========== Tab导航 ========== */
.tab-nav{display:flex;border-bottom:2px solid var(--mint-light);margin-bottom:20px}
.tab-nav a{padding:12px 25px;font-size:15px;color:var(--ink-light);position:relative;letter-spacing:1px}
.tab-nav a:hover,.tab-nav a.active{color:var(--deep-green)}
.tab-nav a.active::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--deep-green)}

/* ========== 筛选区域 ========== */
.filter-section{padding:12px 0;border-bottom:1px dashed var(--mint)}
.filter-section .filter-label{float:left;font-size:14px;color:var(--ink);font-weight:bold;line-height:30px;margin-right:15px}
.filter-section .filter-options{overflow:hidden}
.filter-section .filter-options span{display:inline-block;padding:5px 14px;margin:0 6px 6px 0;border-radius:20px;font-size:13px;color:var(--ink-light);cursor:pointer;transition:all .3s;border:1.5px solid var(--mint)}
.filter-section .filter-options span:hover,.filter-section .filter-options span.active{background:var(--deep-green);color:var(--white);border-color:var(--deep-green)}

/* ========== 板块标题(子页) ========== */
.section-header{display:flex;align-items:center;justify-content:space-between;padding:25px 0 18px}
.section-header h2{font-family:'Noto Serif SC',serif;font-size:22px;color:var(--deep-green);font-weight:700;position:relative;padding-left:14px;letter-spacing:2px}
.section-header h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--gold);border-radius:2px}
.section-header .more-link{display:flex;align-items:center;color:#999;font-size:13px}
.section-header .more-link:hover{color:var(--deep-green)}
.section-header .more-link img{width:16px;height:16px;margin-left:4px}

/* ========== 页面主内容区 ========== */
.page-body{padding:30px 0 40px;min-height:60vh}
.page-body .tab-nav{margin-bottom:24px}
.page-body .breadcrumb{padding:0 0 18px}

/* ========== 占位图 ========== */
.pl-img{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:100%;height:100%;background:linear-gradient(135deg,var(--green-mid),var(--deep-green))}
.pl-img .pl-icon{font-size:40px;opacity:0.35}
.pl-img .pl-txt{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:2px}
.pl-img-sm .pl-icon{font-size:28px}
.pl-img-sm .pl-txt{font-size:11px}
.pl-avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,var(--deep-green),var(--green-mid));border-radius:6px}
.pl-avatar span{font-family:'Noto Serif SC',serif;font-size:18px;font-weight:700;color:rgba(255,255,255,0.6)}