/* ================================================================
   社区门户 - 现代化移动端样式 v2
   设计语言：卡片化 / 渐变色 / 微动效 / 各社区视觉差异
   ================================================================ */

/* ====== Reset & Base ====== */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:#f4f6f8;
  color:#1a1a1a;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}


/* ====== HERO 头部（全屏沉浸式）====== */
.hero{
  position:relative;
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:60px 20px 50px;
  overflow:hidden;
  background:linear-gradient(var(--grad));
}

/* --- 动态装饰层 --- */
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

.deco-circle{
  position:absolute;border-radius:50%;opacity:.12;background:#fff;
  animation:float 8s ease-in-out infinite;
}
.c1{width:200px;height:200px;top:-40px;right:-30px;animation-delay:0s;}
.c2{width:140px;height:140px;bottom:40px;left:-30px;animation-delay:-3s;opacity:.08;}
.c3{width:80px;height:80px;top:45%;right:15%;animation-delay:-5s;opacity:.1;}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(12px,-18px) scale(1.05);}
  66%{transform:translate(-10px,12px) scale(.95);}
}

/* 波浪纹理 */
.deco-wave{
  position:absolute;bottom:0;left:-10%;right:-10%;height:80px;
  background:repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(255,255,255,.06) 40px,rgba(255,255,255,.06) 80px);
  transform:skewY(-2deg);
}
/* 叶子纹理 */
.deco-leaf::before,.deco-leaf::after{
  content:'';position:absolute;border-radius:50% 0;background:rgba(255,255,255,.07);
}
.deco-leaf::before{width:180px;height:180px;top:-30px;right:-20px;transform:rotate(25deg);}
.deco-leaf::after{width:120px;height:120px;bottom:20px;left:-20px;transform:rotate(-15deg);border-radius:0 50%;}
/* 科技网格 */
.deco-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:30px 30px;
}
/* 墨韵 */
.deco-ink::before{
  content:'';position:absolute;width:220px;height:220px;border-radius:50%;
  top:-60px;right:-40px;
  background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);
}
.deco-ink::after{
  content:'';position:absolute;width:150px;height:150px;border-radius:50%;
  bottom:10px;left:-30px;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
}
/* 花朵 */
.deco-flower::before{
  content:'✿';position:absolute;font-size:160px;opacity:.06;color:#fff;
  top:-20px;right:-10px;transform:rotate(-15deg);
}
.deco-flower::after{
  content:'✿';position:absolute;font-size:100px;opacity:.04;color:#fff;
  bottom:20px;left:-20px;transform:rotate(20deg);
}
/* 桥梁线条 */
.deco-bridge::before{
  content:'';position:absolute;top:35%;left:-5%;right:-5%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:rotate(-3deg);
}
.deco-bridge::after{
  content:'';position:absolute;top:55%;left:-10%;right:-10%;height:1px;
  background:linear-gradient(90deg,transparent 8%,rgba(255,255,255,.08) 50%,transparent 92%);
}
/* 家园圆点 */
.deco-home::before{
  content:'';position:absolute;width:200px;height:200px;top:-50px;right:-30px;
  border:2px solid rgba(255,255,255,.07);border-radius:50%;
}
.deco-home::after{
  content:'';position:absolute;width:130px;height:130px;bottom:30px;left:-20px;
  border:2px solid rgba(255,255,255,.05);border-radius:50%;
}

/* 光效扫过 */
.hero-shine{
  position:absolute;top:-50%;left:-60%;width:80%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
  transform:rotate(15deg);
  animation:shine 6s ease-in-out infinite;
}
@keyframes shine{
  0%{transform:translateX(-100%) rotate(15deg);}
  40%,100%{transform:translateX(150%) rotate(15deg);}
}

/* Hero 内容 */
.hero-inner{position:relative;z-index:2;}

.hero-badge{
  font-size:52px;line-height:1;margin-bottom:6px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));
  animation:bounceIn .8s ease-out both;
}
@keyframes bounceIn{
  0%{transform:scale(0) rotate(-10deg);opacity:0;}
  60%{transform:scale(1.15) rotate(3deg);}
  100%{transform:scale(1) rotate(0);opacity:1;}
}

.hero h1{
  font-size:26px;font-weight:800;letter-spacing:3px;text-shadow:0 3px 10px rgba(0,0,0,.2);
  margin-bottom:8px;
}
.slogan{
  font-size:14px;opacity:.93;font-weight:400;letter-spacing:1.5px;margin:0;
}
.hero-desc{
  margin-top:10px;font-size:13px;opacity:.75;letter-spacing:.5px;
}

/* 特色标签 pills */
.tag-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px;}
.tag-pill{
  display:inline-block;padding:5px 14px;border-radius:20px;
  font-size:11.5px;font-weight:600;letter-spacing:.5px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);
  animation:fadeInUp .6s ease-out both;
}
.tag-pill:nth-child(2){animation-delay:.1s;}
.tag-pill:nth-child(3){animation-delay:.2s;}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

/* 波浪分割线 SVG */
.hero-wave{
  position:absolute;bottom:-1px;left:0;width:100%;height:48px;
  z-index:3;display:block;
}


/* ====== 主内容 ====== */
.home{padding:8px 14px 20px;max-width:600px;margin:0 auto;}


/* ----- 区块头部 ----- */
.sec{margin-bottom:22px;}
.sec-hd{
  display:flex;align-items:center;font-size:17px;font-weight:700;
  color:#1a1a1a;margin:14px 4px 14px;gap:6px;
}
.sec-hd .bar{
  display:inline-block;width:4px;height:18px;border-radius:3px;vertical-align:-3px;flex-shrink:0;
}
.more{
  margin-left:auto;font-size:13px;font-weight:500;color:var(--theme);white-space:nowrap;
}


/* ====== 活动报名区块 ====== */
.act-sec{margin-bottom:24px;}

.act-scroll{
  display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;padding:2px 2px 12px;
  scrollbar-width:none; /* Firefox */
}
.act-scroll::-webkit-scrollbar{display:none;} /* Chrome/Safari */

.act-card{
  flex:0 0 200px;border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07);
  transition:transform .2s,box-shadow .2s;scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.act-card:active{transform:scale(.97);box-shadow:0 1px 6px rgba(0,0,0,.1);}

.act-cover-wrap{position:relative;width:100%;height:120px;overflow:hidden;background:#eee;}
.act-cover{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.act-card:hover .act-cover{transform:scale(1.05);}
.act-cover-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:36px;
}
.no-img .act-cover-placeholder{display:flex!important;}
.no-img img{display:none!important;}

.act-status{
  position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:12px;
  font-size:10.5px;font-weight:700;color:#fff;backdrop-filter:blur(4px);
}
.status-active{background:rgba(46,125,50,.88);}
.status-soon{background:rgba(21,101,192,.88);}
.status-ended{background:rgba(120,120,120,.82);}

.act-info{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;}
.act-title{
  font-size:14px;font-weight:700;color:#1a1a1a;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:8px;
}
.act-meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
.act-meta-item{
  font-size:11px;color:#888;background:#f5f7fa;padding:2px 7px;border-radius:8px;
}

/* 无活动时的 CTA 卡片 */
.act-empty-cta{
  display:flex;align-items:center;gap:14px;padding:18px 16px;
  background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .15s;
}
.act-empty-cta:active{transform:scale(.98);}
.act-empty-icon{font-size:36px;flex-shrink:0;}
.act-empty-cta strong{display:block;font-size:15px;color:#1a1a1a;}
.act-empty-cta small{font-size:12px;color:#999;}
.act-arrow{font-size:28px;color:#ccc;flex-shrink:0;}


/* ====== 社区动态（文章流）===== */
.empty-state{text-align:center;padding:48px 0;color:#aaa;}
.empty-state .empty-icon{font-size:44px;margin-bottom:10px;display:block;}
.empty-state p{font-size:14px;}

.news-feed{display:flex;flex-direction:column;gap:10px;}

.news-card{
  display:flex;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 8px rgba(0,0,0,.05);
  transition:transform .15s,box-shadow .15s;position:relative;
}
.news-card:active{transform:scale(.99);box-shadow:0 2px 12px rgba(0,0,0,.08);}

.news-thumb-wrap{
  width:112px;height:112px;flex-shrink:0;overflow:hidden;
}
.news-thumb{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.news-card:hover .news-thumb{transform:scale(1.06);}

.news-body{
  flex:1;min-width:0;padding:12px 12px 12px 0;display:flex;flex-direction:column;
  justify-content:center;
}
.news-title{
  font-size:15px;font-weight:700;color:#1a1a1a;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:6px;
}
.news-desc{
  font-size:12.5px;color:#777;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:8px;
}
.news-meta{
  display:flex;gap:10px;font-size:11.5px;color:#aab3bf;
}
.news-go{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:22px;color:#dde2e8;font-weight:300;
}


/* ====== 便民服务网格 ====== */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.cell{
  background:#fff;border-radius:16px;padding:16px 4px 13px;
  text-decoration:none;color:#333;display:flex;flex-direction:column;
  align-items:center;box-shadow:0 1px 6px rgba(0,0,0,.05);
  transition:transform .15s,box-shadow .15s;
}
.cell:active{transform:scale(.93);box-shadow:0 2px 10px rgba(0,0,0,.1);}

.ico{
  position:relative;width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;font-style:normal;font-weight:700;
  overflow:hidden;margin-bottom:8px;box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;}
.lbl{font-size:12px;text-align:center;line-height:1.3;color:#555;font-weight:500;}


/* ====== 底部 ====== */
.ft{
  text-align:center;padding:32px 20px 36px;
  background:linear-gradient(to bottom,#f4f6f8,#eef0f2);
  border-top:1px solid #eaecef;
}
.ft-inner{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ft-logo{font-size:15px;font-weight:700;color:#444;}
.ft-txt{font-size:12px;color:#aab3bf;}


/* ====== 文章列表页（list.ejs 共用）====== */
.list-wrap{padding:12px;background:#f4f6f8;min-height:100vh;}
.list-head{padding:16px 4px;font-size:18px;font-weight:700;color:#1a1a1a;}
.item{
  display:flex;background:#fff;margin-bottom:10px;border-radius:14px;
  overflow:hidden;text-decoration:none;color:#333;
  box-shadow:0 1px 4px rgba(0,0,0,.05);transition:transform .1s;
}
.item:active{transform:scale(.99);}
.item img{width:108px;height:82px;object-fit:cover;background:#eee;flex-shrink:0;}
.item .t{flex:1;padding:12px 14px;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.item .t h3{margin:0 0 7px;font-size:15px;color:#1a1a1a;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;}
.item .t .m{color:#999;font-size:12px;margin-top:4px;}


/* ====== 详情页 ====== */
.detail{background:#fff;min-height:100vh;}
.detail .dh{padding:20px 18px;color:#fff;position:relative;overflow:hidden;}
.detail .dh h1{margin:0;font-size:20px;line-height:1.42;position:relative;z-index:1;}
.detail .meta{padding:10px 18px;color:#999;font-size:12px;border-bottom:1px solid #f0f0f0;}
.detail .content{padding:18px;line-height:1.9;font-size:16px;word-wrap:break-word;overflow-x:hidden;color:#333;}
.detail .content img{max-width:100%!important;height:auto!important;display:block;margin:14px auto;border-radius:8px;}
.detail .content p{margin:0 0 16px;}
.detail .back{
  display:block;text-align:center;padding:18px;color:#666;text-decoration:none;
  border-top:1px solid #eee;margin-top:16px;font-size:14px;
}
.form-intro{
  background:#f7f9fb;border-left:3px solid var(--theme);
  padding:14px 16px;margin:14px 14px 0;border-radius:10px;
  font-size:14px;color:#55606e;line-height:1.7;
}


/* ====== 活动详情 + 报名表单 ====== */
.act-meta{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;background:#fff;
  font-size:12px;color:#788;border-bottom:1px solid #f5f5f5;
}
.act-meta span{background:#f2f5f8;padding:5px 11px;border-radius:20px;}
.act-cover-full{width:100%;max-height:260px;object-fit:cover;display:block;background:#eee;}
.signup-box{
  margin:18px 14px;background:#fff;border:1px solid #eef1f4;
  border-top:3px solid var(--theme);border-radius:16px;
  padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.signup-box h3{margin:0 0 16px;font-size:17px;color:#1a1a1a;}


/* ====== 表单通用 ====== */
.frm{padding:18px;background:#fff;max-width:560px;margin:0 auto;}
.fld{margin-bottom:18px;}
.fld label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:7px;}
.fld .req{color:#e53935;margin-left:3px;}
.fld textarea,.fld input{
  width:100%;padding:12px 14px;border:1.5px solid #e0e4e8;border-radius:11px;
  font-size:14.5px;box-sizing:border-box;font-family:inherit;
  transition:border-color .2s;
}
.fld textarea:focus,.fld input:focus{border-color:var(--theme);outline:none;}
.fld textarea{resize:vertical;min-height:90px;}
.submit{
  width:100%;padding:14px;border:none;border-radius:12px;color:#fff;
  font-size:17px;font-weight:700;margin-top:8px;cursor:pointer;
  background:linear-gradient(135deg,var(--theme),var(--theme-dark));
  box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .1s,box-shadow .15s;
}
.submit:active{transform:scale(.98);box-shadow:0 2px 8px rgba(0,0,0,.18);}


/* ====== 占位/空页 ====== */
.ph{padding:90px 20px;text-align:center;color:#888;min-height:100vh;}
.ph .big{font-size:52px;margin-bottom:14px;}
.ph h2{color:#555;font-size:18px;margin:0 0 8px;}
.ph p{font-size:14px;line-height:1.7;}


/* ================================================================
   后台管理（不动）
   ================================================================ */
.adm-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f6f8;color:#222;}
.adm-login{max-width:360px;margin:80px auto;background:#fff;padding:28px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.adm-login h2{margin:0 0 18px;text-align:center;color:#1b5e20;}
.adm-login input,.adm-form input,.adm-form textarea,.adm-form select{width:100%;padding:10px 12px;margin-bottom:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;box-sizing:border-box;}
.adm-login button,.adm-form button,.btn{background:#1b5e20;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:14px;cursor:pointer;}
.adm-bar{background:#1b5e20;color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;}
.adm-bar a{color:#fff;text-decoration:none;font-size:13px;margin-left:12px;}
.adm-wrap{max-width:960px;margin:18px auto;padding:0 14px;}
.adm-card{background:#fff;border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.adm-card h3{margin:0 0 12px;font-size:16px;}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.adm-site{background:#fff;border-radius:10px;padding:16px;border:1px solid #eee;text-decoration:none;color:#333;display:block;}
.adm-site b{color:#1b5e20;font-size:15px;}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;}
.adm-table th,.adm-table td{padding:8px 10px;border-bottom:1px solid #f0f0f0;text-align:left;}
.adm-table th{color:#888;font-weight:600;}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:#eee;color:#555;margin-right:4px;}
.row-actions a{margin-right:8px;color:#1565c0;text-decoration:none;font-size:13px;}
.adm-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.adm-nav-item{border:1px solid #eee;border-radius:8px;padding:10px;text-align:center;font-size:13px;}
.adm-nav-item .x{color:#c00;font-size:12px;display:block;margin-top:6px;}