/* ============================================================
   京玉文化交流周 H5 公共样式（common.css）
   配色规范（延续小程序）：
     主渐变  linear-gradient(90deg,#57d05c,#00BCD4)
     文字青  #00a8c6   强青 #00BCD4
     主标题  #1f2329   正文 #3c434d
     辅助    #5a6470   次要 #8a94a6
     描边    rgba(0,188,212,.18)
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#3c434d;
  font-size:15px;
  line-height:1.7;
  background:
    radial-gradient(1200px 600px at 15% -5%, rgba(87,208,92,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 20%, rgba(0,188,212,.16), transparent 55%),
    radial-gradient(900px 600px at 50% 115%, rgba(87,208,92,.10), transparent 60%),
    linear-gradient(180deg,#f6fbf3 0%,#eef7f4 45%,#eaf4f7 100%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* 页面容器（移动端优先，大屏居中） */
.page{max-width:640px;margin:0 auto;padding:0 0 30px;min-height:100vh;}

/* ===== 顶部导航栏（默认隐藏，下滑超过自身高度后滑入显示） ===== */
.topbar{
  position:fixed;top:0;left:50%;z-index:100;
  width:100%;max-width:640px;
  display:flex;align-items:center;justify-content:space-between;
  height:52px;padding:0 10px;
  background:linear-gradient(90deg,#57d05c,#00BCD4);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:0 3px 14px rgba(0,188,212,.35);
  color:#fff;
  transform:translate(-50%,-110%);
  transition:transform .3s ease;
}
.topbar.show{transform:translate(-50%,0);}
.topbar-side{width:44px;height:44px;line-height:44px;text-align:center;font-size:26px;color:#fff;display:block;}
.topbar-back{font-size:34px;font-weight:300;}
.topbar-home{
  width:34px;height:34px;margin:0 2px;flex:none;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,transform .15s ease;
}
.topbar-home svg{width:19px;height:19px;display:block;}
.topbar-home:active{background:rgba(255,255,255,.42);transform:scale(.90);}
.topbar-title{
  flex:1;text-align:center;font-size:17px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;
  letter-spacing:.5px;
}

/* ===== 页头横幅图 ===== */
.hero-img{width:100%;display:block;}

/* ===== 卡片 ===== */
.card{
  position:relative;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,188,212,.18);
  border-radius:14px;
  box-shadow:0 4px 16px rgba(31,35,41,.05);
  padding:20px 18px;
  margin:14px 14px 0;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#57d05c,#00BCD4);
}
.card-title{font-size:17px;font-weight:600;color:#1f2329;letter-spacing:.5px;margin-bottom:10px;}
.card-sub{font-size:13px;color:#8a94a6;margin-bottom:6px;}

/* ===== 区块标题 ===== */
.section-title{
  display:flex;align-items:center;
  font-size:15px;font-weight:600;color:#1f2329;
  margin:20px 18px 4px;
}
.section-title::before{
  content:'';width:4px;height:15px;border-radius:3px;margin-right:8px;
  background:linear-gradient(180deg,#57d05c,#00BCD4);
}

/* ===== 胶囊 / 标签 ===== */
.pill{
  display:inline-block;
  font-size:12px;color:#00a8c6;
  background:rgba(0,188,212,.10);
  border:1px solid rgba(0,188,212,.22);
  border-radius:20px;padding:2px 12px;
}
.pill-gray{color:#5a6470;background:rgba(90,100,112,.08);border-color:rgba(90,100,112,.16);}

/* ===== 绿青渐变按钮 ===== */
.btn-grad{
  display:block;width:100%;text-align:center;
  padding:12px 0;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(90deg,#57d05c,#00BCD4);
  color:#fff;font-size:16px;font-weight:600;letter-spacing:1px;
  box-shadow:0 6px 16px rgba(0,188,212,.28);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-grad:active{transform:scale(.97);box-shadow:0 3px 10px rgba(0,188,212,.25);}
.btn-grad:disabled{opacity:.6;}

/* ===== 虚线分隔 ===== */
.divider-dashed{border:none;border-top:1px dashed rgba(0,188,212,.22);margin:12px 0;}

/* ===== 图标行 ===== */
.icon-row{display:flex;align-items:flex-start;font-size:14px;color:#3c434d;margin-top:8px;}
.icon-row .ic{color:#00a8c6;margin-right:6px;flex:none;line-height:1.5;}
.icon-row .ic-gray{color:#8a94a6;}

/* ===== 底部 ===== */
.footer{margin:28px 18px 10px;text-align:center;color:#8a94a6;font-size:12px;}
.footer-line{width:44px;height:3px;border-radius:3px;margin:0 auto 12px;background:linear-gradient(90deg,#57d05c,#00BCD4);}
.footer-name{color:#5a6470;font-size:13px;margin-bottom:4px;}
.footer-meta{line-height:1.8;}

/* ===== 通用工具 ===== */
.mt6{margin-top:6px;}.mt10{margin-top:10px;}.mt14{margin-top:14px;}
.tc{text-align:center;}
.text-main{color:#1f2329;font-weight:600;}
.text-cyan{color:#00a8c6;}

/* ===== Toast ===== */
#toast{
  position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);
  background:rgba(31,35,41,.85);color:#fff;font-size:14px;
  padding:10px 18px;border-radius:10px;z-index:999;
  display:none;max-width:70%;text-align:center;line-height:1.6;
}