/* ============================================================
   求学通设计系统 v2.0
   基于 React 设计系统移植 — Teal + Amber 品牌色
   覆盖原有 zhongzhi-pro 样式
   ============================================================ */

/* ====== 设计令牌 ====== */
:root {
  /* 品牌主色 — Teal */
  --primary: #0d9488 !important;
  --primary-dark: #0f766e !important;
  --primary-darker: #115e59 !important;
  --primary-light: #14b8a6 !important;
  --primary-lighter: #ccfbf1 !important;
  --primary-50: #f0fdfa !important;
  --primary-100: #ccfbf1 !important;
  --theme-color: #0d9488 !important;
  --theme-color-dark: #0f766e !important;
  --theme-color-darker: #115e59 !important;
  --theme-color-light: rgba(13, 148, 136, 0.06) !important;
  --theme-color-hover: rgba(13, 148, 136, 0.10) !important;
  --theme-focus-ring: rgba(13, 148, 136, 0.18) !important;

  /* 强调色 — Amber */
  --cta: #f59e0b !important;
  --cta-hover: #d97706 !important;
  --accent: #f59e0b !important;
  --accent-light: #fbbf24 !important;
  --accent-dark: #d97706 !important;

  /* 基础色 */
  --bg: #faf9f7 !important;
  --bg-body: #faf9f7 !important;
  --bg-card: #ffffff !important;
  --bg-hover: #f5f4f0 !important;
  --bg-muted: #f0eee9 !important;
  --surface: #ffffff !important;
  --card: #ffffff !important;
  --card-bg: #ffffff !important;

  /* 文字色 */
  --title: #36322d !important;
  --text-primary: #36322d !important;
  --text: #4b5563 !important;
  --text-secondary: #6b655c !important;
  --text-muted: #918a7e !important;
  --text-light: #b8b2a8 !important;
  --muted: #918a7e !important;
  --fg: #36322d !important;
  --fg-muted: #6b655c !important;

  /* 边框色 */
  --border: #e2ddd5 !important;
  --border-light: #ede9e3 !important;
  --border-default: #e2ddd5 !important;
  --border-dark: #d1ccc3 !important;

  /* 状态色 */
  --success: #16a34a !important;
  --success-light: #dcfce7 !important;
  --color-success: #16a34a !important;
  --warning: #ea580c !important;
  --warning-light: #ffedd5 !important;
  --color-warning: #ea580c !important;
  --danger: #dc2626 !important;
  --danger-light: #fee2e2 !important;
  --color-danger: #dc2626 !important;
  --info: #0d9488 !important;
  --info-light: #ccfbf1 !important;
  --color-info: #0d9488 !important;

  /* 圆角 */
  --radius: 12px !important;
  --radius-sm: 8px !important;
  --radius-lg: 16px !important;
  --radius-xl: 20px !important;
  --radius-full: 9999px !important;
  --border-radius-md: 8px !important;
  --border-radius-lg: 12px !important;
  --border-radius-xl: 16px !important;

  /* 阴影 */
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06) !important;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06) !important;
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.06) !important;

  /* 学校类型色 */
  --type-zhigao: #8b5cf6;
  --type-zhigao-bg: rgba(139, 92, 246, 0.08);
  --type-zhongzhuan: #14b8a6;
  --type-zhongzhuan-bg: rgba(59, 130, 246, 0.08);
  --type-jigong: #f97316;
  --type-jigong-bg: rgba(249, 115, 22, 0.08);
  --type-dazhuan: #06b6d4;
  --type-dazhuan-bg: rgba(6, 182, 212, 0.08);
  --type-benke: #0d9488;
  --type-benke-bg: rgba(13, 148, 136, 0.08);
  --type-fudu: #ec4899;
  --type-fudu-bg: rgba(236, 72, 153, 0.08);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-sans: var(--font);
}

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

body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.6 !important;
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ====== 容器 ====== */
.container { max-width: 1280px !important; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* ====== 导航栏 — 毛玻璃现代风 ====== */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(250, 249, 247, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.nav-logo {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -0.5px !important;
}

.nav-logo svg { filter: drop-shadow(0 2px 4px rgba(13,148,136,0.3)); }

.nav-links {
  display: flex !important;
  gap: 4px !important;
  background: var(--bg-muted) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.nav-links a {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  position: relative !important;
}

.nav-links a:hover {
  color: var(--primary) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.nav-links a.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.3) !important;
}

.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ====== 按钮 ====== */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 20px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.btn-primary:hover { background: var(--primary-dark) !important; color: #fff !important; }

.btn-cta, .btn-accent {
  background: var(--cta) !important;
  color: #fff !important;
}
.btn-cta:hover, .btn-accent:hover { background: var(--cta-hover) !important; color: #fff !important; }

.btn-outline {
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  background: transparent !important;
}
.btn-outline:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-50) !important;
}

/* ====== 面包屑 ====== */
.breadcrumb {
  padding: 16px 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.breadcrumb a { color: var(--text) !important; }
.breadcrumb a:hover { color: var(--primary) !important; }
.breadcrumb span { margin: 0 6px; }

/* ====== Hero 区域 ====== */
.hero {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg) 50%, #fffbeb 100%) !important;
  padding: 64px 0 !important;
  text-align: center !important;
}

@media (min-width: 1024px) { .hero { padding: 96px 0 !important; } }

.hero h1 {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--title) !important;
}

@media (min-width: 640px) { .hero h1 { font-size: 48px !important; } }
@media (min-width: 1024px) { .hero h1 { font-size: 56px !important; } }

.hero h1 .highlight, .hero h1 strong { color: var(--primary) !important; }

.hero .subtitle, .hero p {
  font-size: 18px !important;
  color: var(--text-muted) !important;
  max-width: 640px !important;
  margin: 24px auto 0 !important;
}

@media (min-width: 640px) { .hero .subtitle { font-size: 20px !important; } }

/* ====== 搜索栏 ====== */
.search-wrap {
  max-width: 640px !important;
  margin: 32px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 8px 8px 24px !important;
  transition: all 0.2s !important;
}

.search-wrap:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.1) !important;
}

.search-wrap input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 15px !important;
  color: var(--text) !important;
  padding: 10px 0 !important;
}

.search-wrap input::placeholder { color: var(--text-light) !important; }

.search-wrap button {
  padding: 10px 24px !important;
  font-size: 14px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.search-wrap button:hover { background: var(--primary-dark) !important; }

/* ====== 统计数字 ====== */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 48px auto !important;
  max-width: 800px !important;
}

.stat-card {
  text-align: center !important;
  padding: 24px 16px !important;
}

.stat-num {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  line-height: 1 !important;
}

.stat-label {
  margin-top: 8px !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
}

/* ====== 章节标题 ====== */
.section-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--title) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

@media (min-width: 640px) { .section-title { font-size: 32px !important; } }

.section-subtitle {
  text-align: center !important;
  font-size: 16px !important;
  color: var(--text-muted) !important;
  margin-bottom: 40px !important;
}

/* ====== 学校卡片 ====== */
.school-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.school-card, .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
}

.school-card:hover, .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(13, 148, 136, 0.3) !important;
}

/* ====== 学校列表项 ====== */
.school-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.school-item:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(4px) !important;
}

/* ====== Badge / 标签 ====== */
.badge, .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid transparent !important;
}

.badge-primary, .tag-primary {
  background: var(--primary-50) !important;
  color: var(--primary) !important;
}

.badge-cta, .tag-accent {
  background: #fffbeb !important;
  color: var(--cta) !important;
}

.badge-success { background: var(--success-light) !important; color: var(--success) !important; }
.badge-danger { background: var(--danger-light) !important; color: var(--danger) !important; }

/* 学校类型标签 */
.tag-zhigao { background: rgba(139,92,246,0.08) !important; color: #6d28d9 !important; }
.tag-zhongzhuan { background: rgba(20,184,166,0.08) !important; color: #0f766e !important; }
.tag-jigong { background: rgba(249,115,22,0.08) !important; color: #c2410c !important; }
.tag-dazhuan { background: rgba(6,182,212,0.08) !important; color: #0e7490 !important; }
.tag-benke { background: rgba(13,148,136,0.08) !important; color: #0f766e !important; }
.tag-fudu { background: rgba(236,72,153,0.08) !important; color: #be185d !important; }

/* ====== 页脚 ====== */
.footer {
  background: #1f2937 !important;
  color: #d1d5db !important;
  padding: 48px 0 24px !important;
  margin-top: 64px !important;
}

.footer a { color: #9ca3af !important; }
.footer a:hover { color: var(--primary-light) !important; }

/* ====== 升学路径卡片 ====== */
.path-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  transition: all 0.3s !important;
}

.path-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(13, 148, 136, 0.5) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ====== 省份网格 ====== */
.province-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
}

.province-grid a {
  padding: 10px !important;
  text-align: center !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background: var(--bg-card) !important;
  transition: all 0.2s !important;
}

.province-grid a:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-50) !important;
}

/* ====== 新闻卡片 ====== */
.news-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

.news-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  transition: all 0.2s !important;
}

.news-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ====== 筛选栏 ====== */
.filter-bar {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 16px 0 !important;
}

.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.filter-chip:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.filter-chip.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ====== 分页 ====== */
.pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 40px 0 !important;
}

.pagination a, .pagination span {
  padding: 8px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background: var(--bg-card) !important;
  transition: all 0.2s !important;
}

.pagination a:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.pagination .current {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ====== CTA Banner ====== */
.cta-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-radius: var(--radius-xl) !important;
  padding: 48px !important;
  text-align: center !important;
  color: #fff !important;
  margin: 48px 0 !important;
}

.cta-banner h2 { font-size: 28px !important; font-weight: 700 !important; color: #fff !important; }
.cta-banner p { margin-top: 12px !important; font-size: 16px !important; opacity: 0.9 !important; }

.cta-banner .btn {
  margin-top: 24px !important;
  background: var(--cta) !important;
  color: #fff !important;
  padding: 12px 32px !important;
  font-size: 16px !important;
}

/* ====== 学校详情页 ====== */
.school-detail-header {
  background: linear-gradient(135deg, var(--primary-50), var(--bg)) !important;
  padding: 32px 0 !important;
}

.school-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 32px !important;
}

@media (max-width: 768px) {
  .school-info-grid { grid-template-columns: 1fr !important; }
}

.sidebar-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  position: sticky !important;
  top: 80px !important;
}

/* ====== 移动端适配 ====== */
@media (max-width: 768px) {
  .nav-links, .nav-actions .btn-outline { display: none !important; }
  .hamburger { display: flex !important; }

  .hero h1 { font-size: 28px !important; }
  .hero .subtitle { font-size: 16px !important; margin-bottom: 28px !important; }
  .hero { padding: 48px 0 40px !important; }

  .search-wrap button { padding: 12px 20px !important; font-size: 14px !important; }
  .search-wrap input { padding: 12px 0 !important; font-size: 14px !important; }

  .stats-grid, .school-grid, .major-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat-num { font-size: 28px !important; }
  .stat-card { padding: 16px 8px !important; }

  .province-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .news-grid { grid-template-columns: 1fr !important; }

  .cta-banner { padding: 32px 24px !important; }
  .cta-banner h2 { font-size: 22px !important; }

  .section-title { font-size: 24px !important; }

  .school-item { flex-direction: column !important; align-items: flex-start !important; }
}

/* ====== 移动端导航面板 ====== */
.mobile-nav-panel {
  display: none !important;
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--bg-card) !important;
  z-index: 100 !important;
  flex-direction: column !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

.mobile-nav-panel.active { display: flex !important; }

.mobile-nav-panel a {
  display: block !important;
  padding: 14px 0 !important;
  font-size: 17px !important;
  color: var(--title) !important;
  border-bottom: 1px solid var(--border-light) !important;
  transition: color 0.2s !important;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a.mobile-active {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ====== 汉堡菜单 ====== */
.hamburger {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  z-index: 101 !important;
}

.hamburger span {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--title) !important;
  border-radius: 2px !important;
  transition: all 0.3s !important;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ====== 专业卡片 ====== */
.major-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.major-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  transition: all 0.2s !important;
}

.major-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ====== 空状态 ====== */
.empty-state {
  text-align: center !important;
  padding: 64px 20px !important;
  color: var(--text-muted) !important;
}

.empty-state h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}

/* =====+ 加载状态 ====== */
.loading {
  text-align: center !important;
  padding: 48px !important;
  color: var(--text-muted) !important;
}

/* ====== 通用工具类 ====== */
.text-center { text-align: center !important; }
.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.mt-4 { margin-top: 16px !important; }
.mt-8 { margin-top: 32px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-8 { margin-bottom: 32px !important; }
.hidden { display: none !important; }
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.gap-2 { gap: 8px !important; }
.gap-4 { gap: 16px !important; }