/* 主题变量：紫白主色 + 辅助灰蓝 */
:root{
  --primary: #800080;          /* 主紫：按规范 #800080 */
  --primary-600:#5f32d4;       /* 深紫（悬停） */
  --bg: #F5F5DC;               /* 米白底：按规范 #F5F5DC */
  --card: #ffffff;             /* 卡片白 */
  --text: #222;                /* 主文本 */
  --muted: #6b7280;            /* 次文本 */
  --line: #CCCCCC;             /* 分割线：按规范浅灰 #CCCCCC */
  --shadow: 0 6px 24px rgba(111,62,240,0.12);
}

/* CSS Reset（简化）与全局排版 */
*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);

  /* 页面纵向弹性布局：让页脚自然贴底 */
  display:flex;               /* 启用弹性布局 */
  flex-direction:column;      /* 从上到下排列：header/main/footer */
  min-height:100vh;           /* 页面最小高度为视口高度 */

  /* 丝绸质感的柔光渐变背景（接近示例图的淡紫-淡蓝） */
  background:
    radial-gradient(1000px circle at 12% 20%, rgba(255,240,250,0.9), rgba(255,240,250,0) 60%), /* 左上淡粉光晕 */
    radial-gradient(900px circle at 85% 25%, rgba(220,230,255,0.9), rgba(220,230,255,0) 55%),   /* 右上淡蓝光晕 */
    linear-gradient(115deg, #f3e9ff 0%, #eddcff 30%, #e7d7ff 50%, #dee9ff 80%, #eae4f8 100%);   /* 主体浅紫到浅蓝色带 */
  background-attachment: fixed; /* 固定背景，滚动更显丝绸流动感 */
}

/* 容器与通用布局 */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.section{padding:56px 0}
.section-title{
  font-size:28px;font-weight:800;margin:0 0 16px;color:#1f1147;
  letter-spacing:0.2px;
}
/* 颜色一致性：按钮/链接等使用规范色，浅蓝用于强调背景或交互态 */
:root{
  --blue-light: #87CEEB;       /* 浅蓝 */
  --white: #FFFFFF;            /* 白色 */
}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}

/* 顶部导航（粘性） */
.navbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;
  box-shadow:0 2px 10px rgba(20,10,60,0.03);
}
.logo{width:32px;height:32px}
.site-name{margin-left:10px;font-weight:800;color:#3c248a}
.nav-left{display:flex;align-items:center}
.nav-center{display:flex;gap:12px;flex-wrap:wrap}
.nav-link{
  padding:8px 10px;border-radius:10px;color:#3d2b85;text-decoration:none;font-weight:600
}
.nav-link:hover{background:#f3f0ff}
.nav-link.active{background:#ebe4ff;color:#2c1a7b}
.nav-right{display:flex;align-items:center;gap:12px}
.hidden{display:none !important}

/* 徽章与图标按钮 */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer
}
.icon-btn:hover{background:#f7f4ff}
.badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#ef4444;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center
}

/* 头像按钮（文字头像） */
.avatar{
  width:40px;height:40px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:#4930a9;font-weight:800
}
.avatar-initials{font-size:12px}

/* 通用按钮风格 */
.btn{
  height:36px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:#2d1c72;font-weight:700;cursor:pointer
}
.btn.primary{background:var(--primary);border-color:transparent;color:#fff}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{
  background:transparent;border-color:#dcd1ff;color:#3c248a
}
.btn.ghost:hover{background:#f3f0ff}

/* 无障碍：键盘焦点可见性 */
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.nav-link:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.cards-nav:focus-visible,.carousel-btn:focus-visible,.tab:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* 跳过到正文链接 */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:10px;width:auto;height:auto;background:#fff;border:2px solid var(--primary);border-radius:10px;padding:6px 10px;z-index:200}

/* Hero 区：视差背景与前景 */
.hero{
  position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden
}
.hero-bg{
  position:absolute;inset:0;background-image:var(--bg-url);
  background-size:cover;background-position:center;transform:translateY(0);will-change:transform;
  filter:saturate(105%) contrast(102%);
}
.hero-fore{position:relative;text-align:center;padding:48px 16px}

/* 主内容区占满剩余空间，使页脚贴底 */
main{flex:1}
.greeting{margin:0 0 8px;font-size:40px;line-height:1.15;font-weight:800;color:#12063a}
#greeting-text{font-weight:800} /* 文案加粗（需求） */
.caret{display:inline-block;margin-left:4px;color:#6f3ef0;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.subtitle{margin:0 0 16px;color:var(--muted);font-weight:600}

/* 卡片与分割 */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px;
  box-shadow:var(--shadow)
}

/* 轮播组件 */
.carousel{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.carousel-track{display:flex;width:100%;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.slide{min-width:100%;position:relative;height:280px;background:#efeaff;display:block;color:inherit;text-decoration:none}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .slide-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,6,58,0) 40%,rgba(18,6,58,.55) 100%)}
.slide h3{position:absolute;left:16px;bottom:14px;margin:0;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,.3)}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:999px;border:none;
  background:rgba(255,255,255,.85);cursor:pointer;color:#2c1a7b;font-weight:800
}
.carousel-btn:hover{background:#fff}
.carousel-btn.prev{left:10px}.carousel-btn.next{right:10px}
.carousel-dots{display:flex;gap:8px;justify-content:center;padding:10px}
.dot{width:8px;height:8px;border-radius:999px;background:#d4c8ff;cursor:pointer;border:none}
.dot.active{background:#6f3ef0}

/* 新闻卡片（横向滚动） */
.cards-wrap{position:relative}
.cards-container{
  display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px;
}
.card-news{
  flex:0 0 280px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;
  box-shadow:var(--shadow)
}
.card-news h4{margin:2px 0 6px;font-size:16px}
.card-news p{margin:0;color:var(--muted);font-size:13px}
.cards-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:36px;height:36px;border-radius:999px;border:none;
  background:rgba(255,255,255,.9);cursor:pointer;color:#2c1a7b;font-weight:800
}
.cards-nav.prev{left:-10px}.cards-nav.next{right:-10px}
.cards-nav:hover{background:#fff}

/* 回到顶部按钮（首页） */
.backtop{
  position:fixed;right:16px;bottom:20px;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);
  display:none;align-items:center;justify-content:center;color:#2d1c72;font-weight:800;z-index:1200
}
.backtop.show{display:flex}
.backtop:hover{background:#f7f4ff}

/* 页脚 */
.footer{margin-top:48px;padding:20px 0;border-top:1px solid var(--line);background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line)}
.footer .social a:hover{background:#f7f4ff}
.footer-link{color:#3c248a;text-decoration:none;font-weight:700}
.footer-link:hover{text-decoration:underline}
.copy{color:var(--muted);font-size:13px}

/* 减少动态偏好：禁用动画与过渡，避免眩晕 */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .carousel-track{transition:none !important}
  .caret{animation:none !important}
}

/* 移动侧边栏（抽屉）与遮罩 */
.drawer{
  position:fixed;left:0;top:0;bottom:0;width:78%;max-width:320px;
  transform:translateX(-100%);transition:transform .24s ease;
  background:#fff;border-right:1px solid var(--line);box-shadow:var(--shadow);
  z-index:1100;padding:14px;display:flex;flex-direction:column;gap:8px
}
.drawer.open{transform:translateX(0)}
.drawer .drawer-title{font-weight:800;color:#3c248a;margin-bottom:8px}
.drawer a{display:block;padding:10px 8px;border-radius:10px;color:#3d2b85;text-decoration:none;font-weight:700}
.drawer a.active,.drawer a:hover{background:#f3f0ff}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;z-index:1000}
.backdrop.show{display:block}
/* 汉堡按钮（移动端显示） */
.hamburger{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;margin-right:8px
}
.hamburger:hover{background:#f7f4ff}
.hamburger svg{width:22px;height:22px}

/* 响应式：移动端字体缩放、导航换行 */
@media (max-width: 768px){
  /* 在移动端隐藏顶部中部导航，显示汉堡按钮 */
  .nav-center{display:none}
  .hamburger{display:inline-flex}
  .greeting{font-size:30px}
  .slide{height:220px}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* 全局：为 Hero 背景图叠加轻柔紫色滤镜，使所有页面主视觉与全站主色统一 */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0; /* 覆盖整个背景层 */
  background:linear-gradient(90deg, rgba(122,47,143,0.15), rgba(122,47,143,0.05)); /* 轻度紫色渐变罩层 */
  pointer-events:none; /* 不影响交互 */
}

/* 贴底兜底：当某些页面的 main 未设置为 flex:1 或结构略有差异时，也能让页脚贴到底部 */
body > .footer{margin-top:auto}