:root {
  /* 定义颜色变量 */
  --primary-color: #333; /* 深灰色 - 展开主要颜色 */
  --primary-hover: #FFA500; /* 深橘色 - 展开悬停状态 */
  --success-color: #FF69B4; /* 深粉色 - 成功/展开状态 */
  --success-hover: #FFB6C1; /* 浅粉色 - 成功状态悬停 */
  --light-gray: #f5f5f5;   /* 浅灰色 - 背景色 */
  --border-color: #ddd;    /* 浅灰色 - 边框色 */
  --text-dark: #333;       /* 深灰色 - 主要文字 */
  --text-medium: #666;     /* 中灰色 - 次要文字 */
  --white: #ffffff;        /* 纯白色 - 卡片背景 */
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--light-gray); /* 浅灰色背景 */
}

/* 共享卡片样式 */
.card, .announcement {
  background-color: var(--white); /* 白色背景 */
  border: 1px solid var(--border-color); /* 浅灰色边框 */
  border-radius: 8px;
  padding: 15px;
}

.header {
  background-color: var(--white); /* 白色背景 */
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border-color); /* 浅灰色边框 */
}

.notice {
  background-color: var(--light-gray); /* 浅灰色背景 */
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.notice h2 {
  color: var(--text-dark); /* 深灰色文字 */
  font-size: 16px;
  margin: 10px 0;
  font-weight: normal;
}

.btn-refresh {
  text-decoration: none;
  font-size: 18px;
  color: var(--text-dark); /* 深灰色图标 */
}

.section {
  margin: 20px;
}

.grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  min-width: 200px;
  min-height: 80px;
  text-decoration: none;
  color: var(--text-dark); /* 深灰色文字 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 浅黑色阴影 */
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.card-content h3 {
  font-weight: bold;
  font-size: 1.1em;
  margin: 0;
  line-height: 1.2;
  color: var(--text-dark); /* 深灰色标题 */
}

.card-content p {
  font-size: 0.9em;
  color: var(--text-medium); /* 中灰色副标题 */
  margin: 0;
  line-height: 1.4;
}

/* 公告栏样式 */
.announcement h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text-dark); /* 深灰色标题 */
}

.announcement-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.announcement-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee; /* 极浅灰色分隔线 */
}

.announcement-list li:last-child {
  border-bottom: none;
}

/* 折叠功能样式 */
.section-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.toggle-icon {
  font-size: 14px;
  transition: 
    transform 0.3s ease, 
    color 0.3s ease; /* 合并过渡效果 */
}

.grid.collapsed {
  display: none;
}

/* 变量颜色管理 */
.section.collapsible .section-header,
.section > h2 {
  color: var(--primary-color);
}

.section.collapsible .toggle-icon {
  color: var(--primary-color);
}

.section.collapsible .section-header:hover,
.section.collapsible .section-header:hover .toggle-icon {
  color: var(--primary-hover);
}

.section.collapsible.expanded .section-header,
.section.collapsible.expanded .toggle-icon {
  color: var(--success-color);
}

.section.collapsible.expanded .section-header:hover,
.section.collapsible.expanded .section-header:hover .toggle-icon {
  color: var(--success-hover);
}

/* 折叠图标动画 */
.section.collapsible.expanded .toggle-icon {
  transform: rotate(90deg);
}

/* 限制卡片最大宽度，避免电脑端被拉太长 */
.card {
  max-width: 260px;
}

/* 默认：电脑端左对齐 */
.grid {
  justify-content: flex-start;
}

/* 手机端居中 */
@media (max-width: 600px) {
  .grid {
    justify-content: center;
  }
}