/* --- 通用页面样式 --- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止页面出现滚动条 */
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 微信页面背景 (示例: 蓝紫色渐变) */
  background: linear-gradient(120deg, #d7e3f4, #e6eaf5, #d7e3f4);
  background-size: 400% 400%;
  animation: gradientShift 30s ease infinite;
  color: #2c3e50;
  padding: 20px;
}

/* 背景动画 */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- 容器与内容样式 --- */
.container {
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  max-width: 960px;
  width: 100%;
  backdrop-filter: blur(12px);
  /* 为iframe模式添加滚动支持 */
  overflow-y: auto;
  max-height: calc(100vh - 40px);
}

h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #2a4d69;
}

/* --- 通知样式 --- */
/* 重要提示 */
.notice-important {
  background-color: #f8d7da;
  border: 2px solid #f5c6cb;
  color: #721c24;
  padding: 20px 25px;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 25px auto;
  max-width: 850px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 198, 203, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(245, 198, 203, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 198, 203, 0); }
}

/* 普通提示 */
.notice {
  margin-bottom: 30px;
  font-size: 1rem;
  color: #34495e;
}

/* --- 按钮与链接通用样式 --- */
.btn-container,
.other-container,
.link-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
}

.btn,
.other-btn,
.link {
  padding: 12px 24px;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn:hover,
.other-btn:hover,
.link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  filter: brightness(1.08);
}

/* --- 具体按钮样式 --- */
/* 微信联系按钮 (紫蓝系) */
.btn-1 { background: linear-gradient(135deg, #c8d9f0, #9db5e3); }
.btn-2 { background: linear-gradient(135deg, #b2c9ec, #86a5dc); }
.btn-3 { background: linear-gradient(135deg, #9db5e3, #6c8dcf); }
.btn-4 { background: linear-gradient(135deg, #86a5dc, #5474b8); }
.btn-5 { background: linear-gradient(135deg, #6c8dcf, #3f5a9d); }
.btn-6 { background: linear-gradient(135deg, #5474b8, #2e3d73); }
.other-wecom { background: linear-gradient(135deg, #5a8db3, #3f6d91); }

/* 其他联系按钮 (青绿系及特殊色) */
.other-qq { background: linear-gradient(135deg, #c2e7e0, #86c7b3); color: #fff; }
.other-telegram { background: linear-gradient(135deg, #a3e1d3, #5cbfaa); }
.other-wechat { background: linear-gradient(135deg, #8ed1b2, #4fa889); }
.other-phone { background: linear-gradient(135deg, #72b39d, #3c8a71); }
/* 新增钉钉联系按钮样式 (蓝色系) */
.other-dingtalk { background: linear-gradient(135deg, #52c4ff, #1890ff); }

/* --- 友情链接样式 --- */
.links-section {
  text-align: left;
  margin-top: 30px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #2a4d69;
  font-size: 1rem;
  border-left: 4px solid #2a4d69;
  padding-left: 10px;
}

.link-group.gw a { background: linear-gradient(135deg, #9db5e3, #6c8dcf); }
.link-group.kf a { background: linear-gradient(135deg, #bda5d8, #8b6fb5); }
.link-group.zy a { background: linear-gradient(135deg, #8ed1b2, #4fa889); }

/* --- 响应式设计 --- */
@media (max-width: 768px) {
  .container {
    padding: 20px 15px;
    max-height: calc(100vh - 40px); /* 移动端也保持最大高度 */
  }

  h1 { font-size: 1.6rem; }

  .notice-important {
    font-size: 1.05rem;
    padding: 15px 20px;
    margin: 20px auto;
  }

  .notice {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .btn,
  .other-btn,
  .link {
    font-size: 0.95rem;
    padding: 10px 16px;
  }

  .link-group {
    justify-content: space-around;
  }
}

/* --- Iframe 嵌入样式 --- */
/* 注意：如果页面是作为 iframe 嵌入，html, body, .container 的高度和溢出设置尤为重要 */
iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- 底部信息样式 --- */
.footer-text {
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 0.9em;
}

.footer-link {
  color: #2c3e50;
  text-decoration: none;
  transition: color 300ms ease;
}

.footer-link:hover {
  color: #3498db;
  text-decoration: underline;
}