/* ============================================================
   大理大学交叉科学中心 - 全站公共样式表
   严格遵循首页示意图设计规范，禁止私自修改配色/版式
   ============================================================ */

/* ---------- CSS变量 / 色彩体系 ---------- */
:root {
  --nav-bg: #4A5957;           /* 顶部导航深灰墨绿色 */
  --nav-active-bg: #D4C8A8;    /* 导航激活按钮浅米色 */
  --nav-active-text: #4A5957;  /* 激活按钮文字色（墨绿） */
  --nav-text: #FFFFFF;         /* 导航文字白色 */
  --news-panel-bg: #f3efe0;    /* 新闻区域浅米色面板 */
  --section-bg: #F0EEDF;       /* 浅米色板块背景 */
  --body-bg: #FFFFFF;          /* 页面主体纯白 */
  --text-dark: #2C1810;        /* 正文深棕黑色 */
  --text-light: #666666;       /* 辅助文字 */
  --border-light: #DDDDDD;     /* 分割线浅灰 */
  --card-border: rgba(212,175,55,0.2); /* 机构卡片金色边框 */
  --accent: #D4AF37;           /* 金色点缀 */
  --white: #FFFFFF;
  --max-width: 1200px;         /* 内容最大宽度 */
  --font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Helvetica Neue', sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --radius: 6px;
  --transition: all 0.25s ease;
}

/* ---------- 全局重置 ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dark);
  background: var(--body-bg);
  min-width: 320px;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- 公共容器 ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 页面标题栏（浅米色背景） ---------- */
.page-title-bar {
  background: var(--section-bg);
  padding: 36px 0;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.page-title-bar h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 2px;
}

/* ---------- 公共内容区块 ---------- */
.section {
  padding: 60px 0;
}
.section-sm {
  padding: 40px 0;
}
.section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--nav-active-bg);
  display: inline-block;
}
.section-title-center {
  text-align: center;
}
.section-title-center .section-title {
  display: inline-block;
}

/* ---------- 卡片组件 ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.card-desc {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.btn-primary {
  background: var(--nav-bg);
  color: var(--white);
}
.btn-primary:hover {
  background: #3D4D4D;
}
.btn-outline {
  background: transparent;
  color: var(--nav-bg);
  border: 1px solid var(--nav-bg);
}
.btn-outline:hover {
  background: var(--nav-bg);
  color: var(--white);
}

/* ---------- 表单 ---------- */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-family);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  outline: none;
  transition: var(--transition);
  background: var(--white);
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--nav-bg);
  box-shadow: 0 0 0 2px rgba(74,89,87,0.12);
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.form-error {
  color: #C0392B;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}
.form-group.error .form-error {
  display: block;
}
.form-group.error input,
.form-group.error textarea {
  border-color: #C0392B;
}
.form-success {
  background: #E8F5E9;
  color: #2E7D32;
  padding: 14px;
  border-radius: var(--radius);
  margin-top: 16px;
  display: none;
  font-size: 14px;
}

/* ---------- 分页 ---------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-light);
  background: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-dark);
  transition: var(--transition);
}
.pagination button:hover {
  border-color: var(--nav-bg);
  color: var(--nav-bg);
}
.pagination button.active {
  background: var(--nav-bg);
  color: var(--white);
  border-color: var(--nav-bg);
}

/* ---------- 响应式 / 移动端 ---------- */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  .section {
    padding: 40px 0;
  }
  .page-title-bar {
    padding: 24px 0;
  }
  .page-title-bar h1 {
    font-size: 22px;
  }
  .section-title {
    font-size: 20px;
  }
}