/*!
 * pages.css — 子页面统一样式
 * 设计令牌与首页（Tailwind 编译产物 style.css）保持一致：
 * 同色板 / 同学号层级 / 同卡片圆角与阴影 / 同容器宽度 / 同导航行为
 */
:root {
  --brand: 214 60.9% 25.7%;
  --brand-dark: 222 47% 11%;
  --brand-light: 212 55.6% 40%;
  --accent: 36 90.7% 51.8%;
  --success: 145 63% 49%;
  --info: 190 80% 45%;
  --danger: 6 78% 57%;
  --background: 210 17% 98%;
  --foreground: 210 29% 24%;
  --card: 0 0% 100%;
  --muted: 210 14% 96%;
  --muted-foreground: 184 6% 48%;
  --border: 0 0% 91%;
  --shadow-card: 0 2px 12px #00000014;
  --shadow-hover: 0 8px 24px #0000001f;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: hsl(var(--brand)); text-decoration: none; }
a:hover:not(.inline-flex):not(.group):not(.btn) { text-decoration: underline; }
/* 实心/描边 CTA 按钮、.btn 组件（与首页一致）悬停不加下划线 */
a.inline-flex:hover,
a.btn:hover { text-decoration: none; }

/* ===== 顶部导航：与首页一致的固定导航与滚动加深 ===== */
/* 与首页完全同一套机制：初始透明浮在 Hero 上，滚动后加深 */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease;
}
header.scrolled {
  background: rgba(12, 68, 124, .95) !important;
  backdrop-filter: blur(8px);
}

/* 移动端菜单：与首页同一套 #main-nav + .nav-toggle 机制，由 main.js 切换 .open */
@media (max-width: 767px) {
  #main-nav {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(10, 46, 82, .98);
    flex-direction: column;
    padding: 1rem;
    gap: .5rem;
    z-index: 40;
    overflow-y: auto;
  }
  #main-nav.open { display: flex; }
  #main-nav a { color: #fff; padding: .75rem 1rem; border-radius: .375rem; width: 100%; }
  #main-nav a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
}

.nav {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  flex-wrap: wrap;
}
@media (min-width: 768px) { .nav { padding: 0 1.5rem; min-height: 4.5rem; } }
@media (min-width: 1024px) { .nav { padding: 0 2rem; flex-wrap: nowrap; } }

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand img { height: 2rem; width: auto; filter: brightness(0) invert(1); }
@media (min-width: 768px) { .brand img { height: 2.5rem; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-sub { font-size: .5625rem; font-weight: 400; color: rgba(255, 255, 255, .6); letter-spacing: .04em; }

.nav-links {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  font-size: .875rem;
}
.nav-links a {
  padding: .5rem .75rem;
  border-radius: .375rem;
  color: rgba(255, 255, 255, .88);
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.nav-links a.active {
  color: hsl(var(--accent));
  background: rgba(255, 255, 255, .1);
  font-weight: 600;
}

.nav-side { display: flex; align-items: center; gap: .875rem; flex-shrink: 0; }
.nav-tel { color: #fff; font-size: .875rem; font-weight: 500; }
.nav-tel:hover { color: hsl(var(--accent)); text-decoration: none; }
.nav-cta {
  color: #fff;
  background: hsl(var(--brand-light) / .5);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: .475rem .9rem;
  border-radius: .375rem;
  font-size: .875rem;
  white-space: nowrap;
}
.nav-cta:hover { background: hsl(var(--brand-light) / .8); color: #fff; text-decoration: none; }
@media (max-width: 1023px) { .nav-tel { display: none; } }
@media (max-width: 767px) { .nav-side { display: none; } }

/* ===== Hero：与首页 from-brand-dark via-brand to-brand-light 同源的深海军蓝 ===== */
.hero {
  background: linear-gradient(135deg, #0A2E52 0%, #0C447C 55%, #16457F 100%);
  padding: 3rem 1rem 3.5rem;
  text-align: center;
}
@media (min-width: 768px) { .hero { padding: 4rem 1.5rem 4.5rem; } }
.hero h1 {
  max-width: 56rem;
  margin: 0 auto .75rem;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.35;
  font-weight: 600;
}
.hero p {
  max-width: 48rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
}
@media (min-width: 768px) { .hero p { font-size: 1rem; } }

/* ===== 顶部面包屑：与首页层级感一致 ===== */
.crumb-bar {
  max-width: 80rem;
  margin: 1.25rem auto .25rem;
  padding: 0 1.25rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .crumb-bar { padding: 0 2rem; } }
.crumb-bar a { color: hsl(var(--muted-foreground)); }
.crumb-bar a:hover { color: hsl(var(--brand)); }

/* ===== 卡片图标位：对齐首页 w-14 h-14 rounded-xl bg-*/10 ===== */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: hsl(var(--brand) / .1);
  color: hsl(var(--brand));
  margin-bottom: .875rem;
  flex-shrink: 0;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }

/* 语义配色：与首页 danger/10、success/10、info/10、accent/10 的多色图标一致 */
.ci-wifi, .ci-layers, .ci-users { background: hsl(var(--info) / .12); color: hsl(var(--info)); }
.ci-shield-check, .ci-lock, .ci-scale { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.ci-database, .ci-file-text, .ci-circle-check-big { background: hsl(var(--brand) / .1); color: hsl(var(--brand)); }
.ci-wrench, .ci-clipboard-check { background: hsl(var(--danger) / .12); color: hsl(var(--danger)); }
.ci-circle-dollar-sign { background: hsl(var(--accent) / .16); color: hsl(var(--accent)); }

/* ===== 主体：与首页 max-w-7xl + py-16 md:py-24 完全同尺度 ===== */
main {
  background: hsl(var(--background));
  padding: 2.5rem 1rem 4rem;
}
main > * {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { main { padding: 4rem 1.5rem 6rem; } }
@media (min-width: 1024px) { main { padding: 4rem 2rem 6rem; } }

/* 提示与公式块按阅读宽度收窄，避免过宽 */
main > .note, main > .formula { max-width: 64rem; }

/* ===== 标题层级：与首页 text-2xl md:text-3xl lg:text-4xl 完全同尺度 ===== */
h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: center;
  margin: 3.5rem 0 1.25rem;
}
h2:first-of-type { margin-top: .5rem; }
/* 区块导语：对齐首页 max-w-3xl 居中弱化说明 */
main > h2 + p {
  text-align: center;
  color: hsl(var(--muted-foreground));
  max-width: 48rem;
  margin: 0 auto 2rem;
  font-size: 1rem;
}
h3 {
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 1.5rem 0 .5rem;
}
p { margin: 0 0 .875rem; font-size: .9375rem; }
@media (min-width: 768px) { p { font-size: 1rem; } }

ul, ol { margin: 0 0 1rem; padding-left: 1.375rem; font-size: .9375rem; }
@media (min-width: 768px) { ul, ol { font-size: 1rem; } }
li { margin-bottom: .375rem; }

/* ===== 卡片与栅格：对齐首页 rounded-2xl / p-6 md:p-8 / shadow-hover ===== */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease;
}
@media (min-width: 768px) { .card { padding: 2rem; } }
.card:hover { box-shadow: var(--shadow-hover); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* 与首页 grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 一致 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
/* 双卡片栅格：桌面端保持两列，避免第三个空位 */
.grid > .card:nth-child(2):last-child { grid-column: auto; }
.grid:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 56rem; }

/* ===== 表格 ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  background: hsl(var(--card));
}
th, td {
  border: 1px solid hsl(var(--border));
  padding: .625rem .75rem;
  text-align: left;
  vertical-align: top;
}
th { background: hsl(var(--muted)); font-weight: 600; }

/* ===== 组件 ===== */
.note {
  background: hsl(36 90% 96%);
  border-left: 4px solid hsl(var(--accent));
  border-radius: .5rem;
  padding: .875rem 1rem;
  font-size: .875rem;
  margin: 0 0 1rem;
}
.warn {
  background: hsl(6 78% 97%);
  border-left: 4px solid hsl(var(--danger));
}
.formula {
  background: hsl(var(--muted));
  border: 1px dashed hsl(212 30% 78%);
  border-radius: .625rem;
  padding: .875rem 1rem;
  font-size: .9375rem;
  margin: 0 0 1rem;
}
.qa {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  margin-bottom: .875rem;
  box-shadow: var(--shadow-card);
}
.qa h3 { margin: 0 0 .5rem; }
.qa p:last-child { margin-bottom: 0; }

.term { font-weight: 600; color: hsl(var(--brand)); font-size: 1rem; margin-bottom: .375rem; }

.toc {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  padding: .875rem 1rem;
  margin-bottom: 1rem;
  font-size: .875rem;
}
.toc a { margin-right: .75rem; display: inline-block; margin-bottom: .375rem; }

.cities { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; margin-bottom: 1rem; }
.cities a {
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .3125rem .75rem;
  background: hsl(var(--card));
}
.cities a:hover { background: hsl(var(--muted)); text-decoration: none; }

.stat {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat b { display: block; font-size: 1.5rem; color: hsl(var(--brand)); line-height: 1.3; }
.stat span { font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/* ===== CTA ===== */
.cta {
  margin-top: 2rem;
  background: linear-gradient(135deg, #0f172a 0%, #1a3a6b 100%);
  color: #fff;
  border-radius: 1rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.cta a {
  display: inline-block;
  margin-top: .875rem;
  background: hsl(var(--accent));
  color: #1e2a38;
  font-weight: 600;
  font-size: .9375rem;
  padding: .75rem 1.75rem;
  border-radius: .625rem;
}
.cta a:hover { text-decoration: none; filter: brightness(1.05); }

.related {
  margin-top: 1.75rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}
.related a { margin-right: .875rem; display: inline-block; margin-bottom: .5rem; }

/* ===== 页脚 ===== */
footer {
  background: hsl(var(--brand-dark));
  color: rgba(255, 255, 255, .72);
  padding: 2.5rem 1.25rem;
  margin-top: 3rem;
  font-size: .8125rem;
  text-align: center;
}
footer a { color: rgba(255, 255, 255, .85); }

/* ===== 站点地图页专用（仅作用于显式 class，不影响其他 section） ===== */
.sitemap-section {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.sitemap-section > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .5rem;
  font-size: .875rem;
}
.sitemap-section > ul > li { margin: 0; }