/* ============================================================
   俺妹夫手游网 - 植物大战僵尸主题样式表
   适用页面：index.html / category.html / category-download.html / article.html
   ============================================================ */

/* ===================== 基础样式 ===================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;
  font-size:15px;line-height:1.75;color:#33421f;
  background-color:#eef6dd;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(124,194,67,.16) 0 3px,transparent 3px),
    radial-gradient(circle at 68% 62%,rgba(124,194,67,.12) 0 3px,transparent 3px),
    linear-gradient(180deg,#f4fae8,#e8f3d3);
  background-size:140px 140px,180px 180px,100% 100%;
  background-attachment:fixed;
}
a{color:#3f7d1e;text-decoration:none;transition:color .15s}
a:hover{color:#ff9f00}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===================== 网站头部 ===================== */
.site-header{
  background:linear-gradient(180deg,#4b8f22,#2f6412);
  border-bottom:4px solid #1d3f0a;
  padding:14px 0;position:relative;overflow:hidden;
}
.site-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% -30%,rgba(255,217,59,.35),transparent 55%);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;position:relative;z-index:2;
}
.logo{display:flex;align-items:center;gap:12px;color:#fff}
.logo-icon{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6bd,#ffc400 60%,#e59600);
  display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:0 0 0 3px #1d3f0a,0 0 18px rgba(255,217,59,.7);
  animation:sunPulse 2.6s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-title{
  font-size:26px;font-weight:900;color:#ffd93b;letter-spacing:2px;
  text-shadow:2px 2px 0 #1d3f0a;
}
.logo-sub{font-size:12px;color:#cbe9a8;letter-spacing:1px}

.search-box{
  display:flex;align-items:center;min-width:330px;
  background:#fffdf3;border:3px solid #1d3f0a;border-radius:999px;
  overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.search-box input{
  flex:1;border:0;outline:none;background:transparent;
  padding:10px 18px;font-size:14px;font-family:inherit;color:#33421f;
}
.search-box button{
  border:0;cursor:pointer;padding:11px 22px;font-size:14px;
  font-family:inherit;font-weight:900;color:#2f6412;
  background:linear-gradient(180deg,#ffe680,#ffc400);
}
.search-box button:hover{background:linear-gradient(180deg,#fff0a8,#ffb300)}

/* ===================== 主导航 ===================== */
.main-nav{
  background:linear-gradient(180deg,#7cc243,#4f9128);
  border-bottom:4px solid #2f6412;
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.main-nav ul{display:flex;flex-wrap:wrap}
.main-nav a{
  display:block;padding:13px 20px;color:#fff;font-weight:700;font-size:15px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  border-right:1px solid rgba(255,255,255,.12);
}
.main-nav a:hover,.main-nav a.active{
  background:linear-gradient(180deg,#ffe680,#ffc400);
  color:#2f6412;text-shadow:none;
}

/* ===================== 主区域 & 通用面板 ===================== */
.main{padding:26px 0 10px}
.section{margin-bottom:34px}
.panel{
  background:#fffdf3;border:3px solid #dbeac0;border-radius:16px;
  padding:18px;box-shadow:0 6px 0 rgba(63,125,30,.10);
}
.panel-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:2px dashed #dfeccc;padding-bottom:12px;margin-bottom:16px;
}
.panel-head h2{font-size:20px;font-weight:900;color:#2f6412}
.panel-sub{font-size:13px;color:#93a382}
.panel-head .more{margin-left:auto;font-size:13px;font-weight:700;color:#7c9a5a}
.panel-head .more:hover{color:#ff9f00}

/* ===================== 面包屑 ===================== */
.breadcrumb{font-size:13px;color:#8a9a74;margin-bottom:16px}
.breadcrumb a{color:#5a8c2c}
.breadcrumb a:hover{color:#ff9f00}
.breadcrumb span{margin:0 6px;color:#bccaa6}

/* ===================== 下载列表（首页 / 下载列表栏目页） ===================== */
.dl-list{display:flex;flex-direction:column;gap:12px}
.dl-item{
  display:flex;align-items:center;gap:14px;
  background:#f7fce9;border:2px solid #e0eecb;border-radius:14px;
  padding:12px 14px;transition:.18s;
}
.dl-item:hover{
  border-color:#a9d46f;background:#fff;transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(63,125,30,.14);
}
.dl-icon{
  width:56px;height:56px;flex:0 0 56px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:27px;
  background:linear-gradient(180deg,#e8f5cf,#cfe9a4);border:2px solid #b6d98a;
}
.dl-info{flex:1;min-width:0}
.dl-info h3{font-size:16px;font-weight:800;color:#2c4a12;margin-bottom:3px}
.dl-info h3 a{color:inherit}
.dl-info h3 a:hover{color:#ff9f00}
.dl-desc{
  font-size:13px;color:#7b8a66;margin:0 0 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:#8a9a74}

/* 版本标签 */
.tag{
  display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;
  font-weight:700;background:#e6f4d3;color:#4d8a1e;border:1px solid #c3e093;
}
.tag.pc{background:#e3efff;color:#2c6dbd;border-color:#b7d3f5}
.tag.android{background:#e6f8e6;color:#2f9e44;border-color:#b4e6b8}
.tag.ios{background:#f0eaff;color:#7048c9;border-color:#d3c4f7}
.tag.mac{background:#f4f4f4;color:#555;border-color:#ddd}
.tag.web{background:#fff2e0;color:#c26a00;border-color:#ffd4a1}

/* 下载按钮 */
.btn-dl{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:999px;font-weight:900;font-size:14px;
  color:#2f6412;background:linear-gradient(180deg,#ffe680,#ffc400);
  border:2px solid #c99000;box-shadow:0 4px 0 #b07d00;transition:.15s;
}
.btn-dl:hover{color:#2f6412;transform:translateY(2px);box-shadow:0 2px 0 #b07d00}
.btn-dl:active{transform:translateY(4px);box-shadow:none}

/* ===================== 下载标签云（标签版栏目页） ===================== */
.dl-tags{display:flex;flex-wrap:wrap;gap:10px}
.dl-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;
  background:#f2f9e4;border:2px solid #d8e9bd;color:#4a7d20;transition:.16s;
}
.dl-tag.c-green{background:#eaf7d9;border-color:#c3e093;color:#4d8a1e}
.dl-tag.c-blue{background:#e6f1ff;border-color:#b7d3f5;color:#2c6dbd}
.dl-tag.c-orange{background:#fff2e0;border-color:#ffd4a1;color:#c26a00}
.dl-tag.c-purple{background:#f2ecff;border-color:#d3c4f7;color:#7048c9}
.dl-tag.c-red{background:#ffeceb;border-color:#ffc2bd;color:#d43b2f}
.dl-tag.c-teal{background:#e4f7f5;border-color:#a9e3dd;color:#0f8a7e}
.dl-tag.c-pink{background:#ffeef5;border-color:#ffc6dd;color:#d4398a}
.dl-tag.c-lime{background:#f6fbe2;border-color:#dcefa5;color:#7a9b13}
.dl-tag.c-gray{background:#f3f5ef;border-color:#d9dfd0;color:#6b7a5c}
.dl-tag:hover{
  background:linear-gradient(180deg,#ffe680,#ffc400);border-color:#c99000;
  color:#2f6412;transform:translateY(-2px);box-shadow:0 5px 0 rgba(176,125,0,.35);
}

/* ===================== 两栏布局 ===================== */
.layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}

/* ===================== 文章列表 ===================== */
.post-list{display:flex;flex-direction:column;gap:16px}
.post-item{
  display:flex;gap:14px;background:#fbfdf5;
  border:2px solid #e6f0d5;border-radius:14px;padding:14px;transition:.2s;
}
.post-item:hover{
  border-color:#a9d46f;background:#fff;transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(63,125,30,.14);
}
.post-thumb{
  width:168px;height:110px;flex:0 0 168px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:44px;
  background:linear-gradient(135deg,#cdea9c,#7cc243);border:2px solid #cbe3a5;
}
.post-body{flex:1;min-width:0;display:flex;flex-direction:column}
.post-title{font-size:17px;font-weight:800;color:#2c4a12;line-height:1.45;margin-bottom:6px}
.post-title a{color:inherit}
.post-title a:hover{color:#ff9f00}
.post-excerpt{
  font-size:13px;color:#7b8a66;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#93a382;margin-top:auto}

/* ===================== 侧边栏 ===================== */
.sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:76px}
.widget{
  background:#fffdf3;border:3px solid #dbeac0;border-radius:16px;
  padding:16px;box-shadow:0 6px 0 rgba(63,125,30,.08);
}
.widget-title{
  display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;
  color:#2f6412;padding-bottom:10px;border-bottom:2px dashed #dfeccc;margin-bottom:12px;
}
.rank-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:14px;
  padding:8px 0;border-bottom:1px dashed #eef4e2;
}
.rank-list li:last-child{border-bottom:0}
.rank-num{
  flex:0 0 22px;height:22px;border-radius:6px;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;margin-top:3px;
  background:#e6f4d3;color:#5a8c2c;
}
.rank-list li:nth-child(1) .rank-num{background:#ffd93b;color:#7a4a00}
.rank-list li:nth-child(2) .rank-num{background:#ffc978;color:#7a4a00}
.rank-list li:nth-child(3) .rank-num{background:#ffe0a3;color:#7a4a00}
.rank-list a{color:#3c4a2c}
.rank-list a:hover{color:#ff9f00}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.tagcloud a{
  padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:#eef6dd;border:1px solid #d5e7b8;color:#5a8c2c;
}
.tagcloud a:hover{background:#ffd93b;border-color:#e0ac00;color:#2f6412}
.about-site{font-size:13px;color:#7b8a66;line-height:1.9}
.about-site strong{color:#3f7d1e}

/* ===================== 分页 ===================== */
.pagination{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:8px;margin-top:26px;
}
.pagination a,.pagination span{
  min-width:42px;height:42px;padding:0 14px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fffdf3;border:2px solid #d8e9bd;color:#4a7d20;
  font-weight:700;font-size:14px;
}
.pagination a:hover{background:#ffd93b;border-color:#c99000;color:#2f6412}
.pagination .current{
  background:linear-gradient(180deg,#ffe680,#ffc400);
  border-color:#c99000;color:#2f6412;
}
.pagination .disabled{opacity:.5;pointer-events:none}

/* ===================== 文章内页 ===================== */
.article{
  background:#fffdf3;border:3px solid #dbeac0;border-radius:16px;
  padding:26px;box-shadow:0 6px 0 rgba(63,125,30,.10);
}
.article h1{font-size:26px;line-height:1.45;color:#2c4a12;margin-bottom:12px}
.article-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:#93a382;
  padding-bottom:14px;border-bottom:2px dashed #dfeccc;margin-bottom:20px;
}
.article-content{font-size:15px;line-height:2;color:#3c4a2c}
.article-content h2{
  font-size:19px;color:#2f6412;margin:26px 0 12px;
  padding-left:12px;border-left:5px solid #ffc400;
}
.article-content h3{font-size:16px;color:#3f7d1e;margin:20px 0 10px}
.article-content p{margin:0 0 14px}
.article-content ul{margin:0 0 14px}
.article-content ul li{padding-left:22px;position:relative;margin-bottom:8px}
.article-content ul li::before{content:"🌱";position:absolute;left:0;font-size:13px}
.article-content blockquote{
  margin:16px 0;padding:14px 18px;background:#f4fae8;
  border-left:5px solid #7cc243;border-radius:0 12px 12px 0;color:#4d6b2f;
}
.article-content table{
  width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;
  border-radius:12px;overflow:hidden;
}
.article-content th{background:#e8f5cf;color:#2f6412;font-weight:800}
.article-content th,.article-content td{border:1px solid #dfeccc;padding:9px 12px;text-align:left}
.article-content tbody tr:nth-child(even){background:#f9fdf2}
.tip{
  background:#fff9e0;border:2px dashed #ffd93b;border-radius:12px;
  padding:12px 16px;margin:16px 0;font-size:14px;color:#7a5a00;
}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;align-items:center}
.article-tags a{
  padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:#eef6dd;border:1px solid #d5e7b8;color:#5a8c2c;
}
.article-tags a:hover{background:#ffd93b;border-color:#e0ac00;color:#2f6412}
.article-nav{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;
  padding-top:18px;border-top:2px dashed #dfeccc;font-size:14px;
}
.article-nav a{
  flex:1 1 260px;padding:10px 14px;border-radius:12px;
  background:#f7fce9;border:2px solid #e6f0d5;color:#3c4a2c;
}
.article-nav a:hover{background:#ffd93b;border-color:#e0ac00;color:#2f6412}
.copyright{
  margin-top:20px;padding:14px 16px;border-radius:12px;font-size:13px;
  background:#f4fae8;border:1px dashed #cbe3a5;color:#6d8253;line-height:1.9;
}

/* ===================== 友情链接 ===================== */
.friend-links{
  background:#fffdf3;border:3px solid #dbeac0;border-radius:16px;
  padding:18px;box-shadow:0 6px 0 rgba(63,125,30,.10);
}
.friend-links ul{display:flex;flex-wrap:wrap;gap:10px}
.friend-links a{
  display:inline-block;padding:6px 14px;border-radius:8px;font-size:13px;
  background:#f2f9e4;border:1px dashed #cbe3a5;color:#5a8c2c;
}
.friend-links a:hover{background:#ffd93b;border-color:#e0ac00;color:#2f6412}

/* ===================== 网站底部 ===================== */
.site-footer{
  margin-top:44px;background:linear-gradient(180deg,#2f6412,#1d3f0a);
  border-top:6px solid #ffc400;color:#c9e5a8;font-size:13px;
}
.footer-nav{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  padding:22px 0 16px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-nav a{color:#d9edbd}
.footer-nav a:hover{color:#ffd93b}
.footer-bottom{padding:16px 0 26px;text-align:center;line-height:2}
.footer-bottom a{color:#ffd93b}
.footer-bottom a:hover{color:#fff}
.footer-slogan{color:#9dc47a}

/* ===================== 响应式 ===================== */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width:760px){
  .search-box{min-width:0;width:100%}
  .logo-title{font-size:22px}
  .dl-item{flex-wrap:wrap}
  .dl-icon{width:46px;height:46px;flex:0 0 46px;font-size:22px}
  .btn-dl{width:100%;justify-content:center}
  .post-item{flex-direction:column}
  .post-thumb{width:100%;flex:0 0 150px;height:150px}
  .main-nav a{padding:11px 14px;font-size:14px}
  .article{padding:18px}
  .article h1{font-size:21px}
  .article-content table{font-size:13px}
  .article-content th,.article-content td{padding:7px 9px}
}


/* ===================== 404 页面 ===================== */
.error-box{
  background:#fffdf3;border:3px solid #dbeac0;border-radius:16px;
  padding:50px 26px 44px;box-shadow:0 6px 0 rgba(63,125,30,.10);
  text-align:center;position:relative;overflow:hidden;
}
.error-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(255,217,59,.28),transparent 60%);
}
.error-emoji{font-size:54px;line-height:1;margin-bottom:4px;position:relative;z-index:2}
.error-code{
  font-size:110px;font-weight:900;line-height:1;letter-spacing:6px;
  color:#7cc243;text-shadow:4px 4px 0 #dbeac0,8px 8px 0 rgba(63,125,30,.10);
  position:relative;z-index:2;
}
.error-code span{color:#ffc400;text-shadow:4px 4px 0 #ffe9a8,8px 8px 0 rgba(176,125,0,.15)}
.error-title{font-size:24px;font-weight:900;color:#2f6412;margin:14px 0 8px;position:relative;z-index:2}
.error-desc{
  font-size:14px;color:#7b8a66;max-width:640px;margin:0 auto 22px;
  position:relative;z-index:2;
}
.error-search{max-width:460px;margin:0 auto 22px;position:relative;z-index:2}
.error-search .search-box{min-width:0;width:100%}
.error-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative;z-index:2}
.btn-home{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 26px;border-radius:999px;font-weight:900;font-size:14px;
  color:#2f6412;background:linear-gradient(180deg,#ffe680,#ffc400);
  border:2px solid #c99000;box-shadow:0 4px 0 #b07d00;transition:.15s;
}
.btn-home:hover{color:#2f6412;transform:translateY(2px);box-shadow:0 2px 0 #b07d00}
.btn-home:active{transform:translateY(4px);box-shadow:none}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 26px;border-radius:999px;font-weight:900;font-size:14px;
  color:#4a7d20;background:#f7fce9;border:2px solid #d8e9bd;transition:.15s;
}
.btn-ghost:hover{color:#2f6412;background:#ffd93b;border-color:#c99000;transform:translateY(2px)}

/* 404 快捷入口卡片 */
.quick-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;
}
.quick-link{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:#f7fce9;border:2px solid #e0eecb;border-radius:14px;transition:.18s;
}
.quick-link:hover{
  border-color:#a9d46f;background:#fff;transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(63,125,30,.14);
}
.quick-link .ql-icon{
  width:46px;height:46px;flex:0 0 46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(180deg,#e8f5cf,#cfe9a4);border:2px solid #b6d98a;
}
.quick-link .ql-title{font-size:15px;font-weight:800;color:#2c4a12;margin-bottom:2px}
.quick-link .ql-desc{font-size:12px;color:#8a9a74;line-height:1.6}