/* ============================================================
   中原科技学院·新生入学指南 —— 共享设计系统样式表
   材质感 UI：毛玻璃 + 弥散光影 + Mesh Gradient 背景
   双主题：html[data-theme="dark"]（默认） / html[data-theme="light"]
   断点：768px；完全离线，仅系统字体
   ============================================================ */

/* ----------------------------------------------------------
   一、CSS 变量（双主题）
   ---------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  /* 深色主题（默认）：深石墨底，禁止纯黑。整体氛围 = 石墨底 + 青色微光 */
  --bg: #0f172a;                                   /* slate-900 深石墨底色 */
  --text: #e2e8f0;                                 /* 主文字 */
  --text-dim: #94a3b8;                             /* 次级文字 */
  --text-faint: #64748b;                           /* 弱化文字 */

  /* 暗黑半透明玻璃卡片：石墨色玻璃 + blur(12px) */
  --card-bg: rgba(15, 23, 42, 0.60);               /* 半透明石墨玻璃卡片底 */
  --card-bg-strong: rgba(15, 23, 42, 0.60);        /* 更实的玻璃（导航/下拉） */
  --menu-bg: rgba(8, 15, 34, 0.96);                /* 移动端下拉菜单：接近实底，浮在正文上时保证可读（部分浏览器嵌套 backdrop-filter 失效） */
  --card-border: rgba(255, 255, 255, 0.10);        /* 1px 细化微光边框 */
  --card-hover-bg: rgba(30, 41, 59, 0.62);         /* hover 微微提亮（slate-800 基底） */

  /* 光影：柔和青色微发光 + 顶部微高光 */
  --shadow: 0 8px 30px rgba(6, 182, 212, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-hover: 0 14px 44px rgba(6, 182, 212, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* hover 青色边缘发光：边框转青 + 20px 柔光（全站交互件统一发光语言） */
  --hover-border: rgba(6, 182, 212, 0.30);
  --hover-glow: 0 0 20px rgba(6, 182, 212, 0.15);

  /* 动效缓动曲线（全站统一，放在默认块保证双主题均可用） */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* 指数出缓：卡片 hover / reveal 进场 */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* 四次方出缓：颜色/背景等柔和收尾 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 近似弹簧 stiffness:300/damping:30，轻微过冲 */

  /* 强调色：青到蓝渐变，呼应校徽蓝 */
  --accent: #22d3ee;
  --accent-2: #3b82f6;
  --accent-3: #8b5cf6;
  --grad: linear-gradient(135deg, #22d3ee, #3b82f6);
  --accent-soft: rgba(34, 211, 238, 0.12);         /* 强调色淡底 */
  --accent-border: rgba(34, 211, 238, 0.35);

  /* Mesh Gradient 光斑透明度（深色略降饱和观感：石墨底 + 青色微光） */
  --mesh-a1: 0.13;  /* 青 */
  --mesh-a2: 0.11;  /* 蓝 */
  --mesh-a3: 0.09;  /* 紫 */
  --mesh-a4: 0.08;  /* 副蓝 */

  /* 圆角与间距 */
  --radius: 1rem;          /* 普通卡片 */
  --radius-lg: 1.5rem;     /* 大卡片/大区块 */
  --radius-pill: 999px;    /* 胶囊 */

  /* 表格斑马纹 */
  --row-alt: rgba(255, 255, 255, 0.03);
}

html[data-theme="light"] {
  /* 浅色主题：暖米白底，禁止纯白 */
  --bg: #f8f9fa;
  --text: #1e293b;
  --text-dim: #55637a;
  --text-faint: #7c8aa0;

  --card-bg: rgba(255, 255, 255, 0.62);
  --card-bg-strong: rgba(255, 255, 255, 0.72);
  --menu-bg: rgba(248, 250, 252, 0.97);            /* 移动端下拉菜单：接近实底，保证可读 */
  --card-border: rgba(15, 23, 42, 0.07);           /* 同步细化边框 */
  --card-hover-bg: rgba(255, 255, 255, 0.80);

  /* 浅色主题：细腻弥散阴影 + 顶部 inset 微高光（玻璃材质规范双主题均需保留） */
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  --shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);

  /* hover 青色边缘发光：浅色主题发光透明度减半 */
  --hover-border: rgba(6, 182, 212, 0.30);
  --hover-glow: 0 0 20px rgba(6, 182, 212, 0.075);

  --accent: #0891b2;
  --accent-2: #2563eb;
  --accent-3: #7c3aed;
  --grad: linear-gradient(135deg, #06b6d4, #3b82f6);
  --accent-soft: rgba(34, 211, 238, 0.14);
  --accent-border: rgba(8, 145, 178, 0.30);

  /* 浅色主题光斑透明度减半 */
  --mesh-a1: 0.08;
  --mesh-a2: 0.07;
  --mesh-a3: 0.06;
  --mesh-a4: 0.05;

  --row-alt: rgba(15, 23, 42, 0.025);
}

/* ----------------------------------------------------------
   二、Reset 与基础排版
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* 系统字体栈：含苹方与微软雅黑，完全离线 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Helvetica Neue",
    Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 背景 Mesh Gradient：3~4 个大半径光斑，固定层，不干扰前景
   （无 JS 时的兜底方案；main.js 创建 .mesh-layer 后本层退场） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px circle at 12% 8%,  rgba(34, 211, 238, var(--mesh-a1)), transparent 60%),
    radial-gradient(800px circle at 88% 18%, rgba(59, 130, 246, var(--mesh-a2)), transparent 60%),
    radial-gradient(1000px circle at 80% 85%, rgba(139, 92, 246, var(--mesh-a3)), transparent 62%),
    radial-gradient(700px circle at 8% 75%,  rgba(59, 130, 246, var(--mesh-a4)), transparent 58%);
  transition: opacity 0.3s ease;
}

/* main.js 注入 .mesh-layer 后给 body 加 .mesh-in-layer：
   关闭 body::before 旧 Mesh，body 只保留纯底色 */
body.mesh-in-layer::before {
  content: none;
}

/* 微视差背景层：由 main.js 创建（div.mesh-layer），滚动时以 0.06 倍速位移。
   背景写在这里而非 JS 内联，保证浅/深主题切换（data-theme 变量）依然生效 */
.mesh-layer {
  position: fixed;
  inset: -10% 0;            /* 上下各留 10% 出血，供视差位移不露图层边缘 */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px circle at 12% 8%,  rgba(34, 211, 238, var(--mesh-a1)), transparent 60%),
    radial-gradient(800px circle at 88% 18%, rgba(59, 130, 246, var(--mesh-a2)), transparent 60%),
    radial-gradient(1000px circle at 80% 85%, rgba(139, 92, 246, var(--mesh-a3)), transparent 62%),
    radial-gradient(700px circle at 8% 75%,  rgba(59, 130, 246, var(--mesh-a4)), transparent 58%);
  transition: opacity 0.3s ease;
  backface-visibility: hidden;
  will-change: transform;   /* 单一固定合成层，常驻可接受 */
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

ul,
ol {
  list-style-position: inside;
}

/* 标题排版 */
h1,
h2,
h3 {
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.25rem); }

p { color: var(--text-dim); }

::selection {
  background: rgba(34, 211, 238, 0.3);
}

/* ----------------------------------------------------------
   三、布局容器与区块
   ---------------------------------------------------------- */
/* 页面主容器：1100px 居中 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* 大区块：留出透气呼吸感 */
.section {
  padding: 4rem 0;
}

/* 区块标题：左侧青蓝渐变小标记 */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.section-title::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 1.6em;
  border-radius: var(--radius-pill);
  background: var(--grad);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}

/* ----------------------------------------------------------
   四、玻璃材质基底（多组件共享）
   ---------------------------------------------------------- */
.glass-card,
.entry-card,
.stat-card,
.faq-item,
.lm-card,
.link-tile,
.cd-box,
.timeline-stage,
.table-wrap,
.check-list,
.tip {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(12px);  /* Safari 前缀 */
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  /* hover 反馈：位移/发光用 expo，颜色类用 quart，统一 0.3s */
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart);
}

/* ----------------------------------------------------------
   五、导航栏（sticky 毛玻璃）
   ---------------------------------------------------------- */
.nav-glass {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card-bg-strong);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

/* 品牌区 */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
}

.nav-brand em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.85em;
}

.nav-logo { font-size: 1.3rem; }

/* 链接组（桌面横排） */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-links a {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  color: var(--text-dim);
  transition: color 0.3s var(--ease-out-quart), background 0.3s var(--ease-out-quart),
    box-shadow 0.3s var(--ease-out-expo);
}

.nav-links a:hover {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: var(--hover-glow);   /* 统一青色边缘发光语言 */
}

/* 当前页高亮（JS 依据 body[data-page] 添加） */
.nav-links a.active {
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}

/* 导航右侧按钮组（主题切换 + 汉堡） */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 主题切换与汉堡按钮：小玻璃圆钮 */
#themeToggle,
#navToggle {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  /* 小圆钮按压反馈：位移用弹簧曲线，轻微过冲 */
  transition: transform 0.45s var(--ease-spring), box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart);
}

#themeToggle:hover,
#navToggle:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--shadow), var(--hover-glow);
  background: var(--card-hover-bg);
  border-color: var(--hover-border);
}

#themeToggle:active,
#navToggle:active {
  transform: translate3d(0, 0, 0) scale(0.92);  /* 按压回缩 */
}

/* 汉堡按钮默认（桌面）隐藏 */
#navToggle { display: none; }

/* ----------------------------------------------------------
   六、通用按钮 / 徽章
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  /* 按钮位移用弹簧曲线（0.45s 轻微过冲），发光/颜色仍用 0.3s */
  transition: transform 0.45s var(--ease-spring), box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart);
}

/* 按钮按压：弹簧回缩反馈 */
.btn:active {
  transform: translate3d(0, 0, 0) scale(0.96);
}

/* 主按钮：青蓝渐变 + 微发光 */
.btn-primary {
  background: var(--grad);
  color: #f0fdff;
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.28);
}

.btn-primary:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 14px 34px rgba(34, 211, 238, 0.40), var(--hover-glow);
}

/* 幽灵按钮：玻璃描边 */
.btn-ghost {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--card-border);
  color: var(--text);
}

.btn-ghost:hover {
  transform: translate3d(0, -3px, 0);
  border-color: var(--hover-border);
  box-shadow: var(--shadow), var(--hover-glow);
}

/* 小徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

/* ----------------------------------------------------------
   七、玻璃卡片与响应式网格
   ---------------------------------------------------------- */
.glass-card {
  padding: 1.25rem;  /* 移动端内边距 */
}

.glass-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);  /* 弥散阴影 + 青色边缘发光 */
  background: var(--card-hover-bg);
  border-color: var(--hover-border);
}

/* 响应式网格：桌面多列，移动端单列（见 768px 断点） */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.25rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ----------------------------------------------------------
   八、首页：Hero / 倒计时 / 时间轴 / 入口卡片
   ---------------------------------------------------------- */
/* 大标题区 */
.hero {
  padding: 5.5rem 0 4rem;
  text-align: center;
}

.hero h1 {
  margin: 1rem 0 0.75rem;
}

.hero p {
  max-width: 40em;
  margin: 0 auto;
}

/* Hero 顶部小徽章 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 青蓝渐变文字 */
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 倒计时：数字盒横排 */
.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0 0.75rem;
}

.cd-box {
  min-width: 5.2rem;
  padding: 1rem 0.75rem;
  text-align: center;
}

.cd-box:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  border-color: var(--hover-border);
}

/* 倒计时大数字：渐变 + 等宽数字 */
.cd-num {
  display: block;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cd-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* 倒计时备注/过期欢迎语 */
#cdNote {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* 时间轴：桌面横向三列 */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* 每个阶段：玻璃卡片 + 顶部渐变条 */
.timeline-stage {
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.timeline-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0.85;
}

.timeline-stage:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  border-color: var(--hover-border);
}

.timeline-stage h3 {
  margin-bottom: 0.9rem;
}

/* 阶段内条目：左侧发光圆点 + 细线 */
.timeline-item {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.4rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.88em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: calc(0.88em + 0.55rem);
  bottom: -0.55em;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-border), transparent);
}

/* 入口卡片：整块可点的导流卡 */
.entry-card {
  display: block;
  padding: 1.25rem;
  position: relative;
}

.entry-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  background: var(--card-hover-bg);
  border-color: var(--hover-border);
}

.entry-card h3 { margin: 0.4rem 0 0.3rem; }

.entry-card p {
  font-size: 0.9rem;
}

/* 入口卡片右上角箭头提示 */
.entry-card::after {
  content: "→";
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  color: var(--accent);
  font-weight: 700;
  opacity: 0.55;
  transition: transform 0.45s var(--ease-spring), opacity 0.3s var(--ease-out-quart);
}

.entry-card:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

/* ----------------------------------------------------------
   九、数据统计卡片
   ---------------------------------------------------------- */
.stat-card {
  padding: 1.25rem;
  text-align: center;
}

.stat-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  border-color: var(--hover-border);
}

/* 大号渐变数字（JS 滚动到 data-target） */
.stat-num {
  display: block;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stat-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* ----------------------------------------------------------
   十、FAQ 手风琴
   ---------------------------------------------------------- */
.faq-item {
  overflow: hidden;
  margin-bottom: 0.9rem;
}

.faq-item:hover {
  border-color: var(--hover-border);
  box-shadow: var(--shadow), var(--hover-glow);  /* 统一青色边缘发光 */
}

/* 问题行：整行按钮 */
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.25rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* +/- 展开指示 */
.faq-q::after {
  content: "+";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  transition: transform 0.45s var(--ease-spring);  /* 展开指示：弹簧旋转 */
}

.faq-item.open .faq-q::after {
  content: "−";
  transform: rotate(180deg);
}

/* 答案：默认收起，.open 平滑展开（max-height 过渡） */
.faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  /* FAQ 展开：弹簧曲线 0.45s（max-height 过冲会被内容高度自然截断，无副作用） */
  transition: max-height 0.45s var(--ease-spring), padding 0.45s var(--ease-spring);
}

.faq-item.open .faq-a {
  max-height: 30rem;
  padding: 0 1.25rem 1.15rem;
}

/* ----------------------------------------------------------
   十一、校园地标页
   ---------------------------------------------------------- */
/* 筛选条 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

/* 筛选按钮：玻璃胶囊 */
.filter-btn {
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  color: var(--text-dim);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  /* 筛选切换：位移弹簧 0.45s，其余 0.3s */
  transition: transform 0.45s var(--ease-spring), box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart),
    border-color 0.3s var(--ease-out-quart);
}

.filter-btn:hover {
  transform: translate3d(0, -2px, 0);
  color: var(--text);
  box-shadow: var(--shadow), var(--hover-glow);
  border-color: var(--hover-border);
}

.filter-btn:active {
  transform: translate3d(0, 0, 0) scale(0.94);  /* 按压回缩 */
}

.filter-btn.active {
  background: var(--grad);
  color: #f0fdff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.30);
}

/* 地标卡片 */
.lm-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lm-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  background: var(--card-hover-bg);
  border-color: var(--hover-border);
}

/* 图片占位：4/3 比例，青蓝紫柔和渐变底，居中相机 emoji + data-label 文字 */
.img-ph {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background:
    radial-gradient(120% 100% at 15% 10%, rgba(34, 211, 238, 0.28), transparent 55%),
    radial-gradient(120% 110% at 85% 20%, rgba(59, 130, 246, 0.26), transparent 58%),
    radial-gradient(130% 120% at 60% 95%, rgba(139, 92, 246, 0.24), transparent 60%),
    linear-gradient(160deg, rgba(59, 130, 246, 0.10), rgba(139, 92, 246, 0.08));
  border-bottom: 1px solid var(--card-border);
}

.img-ph::before {
  content: "📷";
  font-size: 1.8rem;
  opacity: 0.85;
}

.img-ph::after {
  content: attr(data-label);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* 地标卡片正文区 */
.lm-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.lm-body h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lm-body p {
  font-size: 0.92rem;
}

/* 小分类标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  vertical-align: middle;
}

/* 新生贴士条：左侧渐变竖线 + 💡 */
.tip {
  margin-top: auto;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  box-shadow: none;
}

.tip::before {
  content: "💡 ";
}

/* ----------------------------------------------------------
   十二、新生导航页：链接砖 / 清单 / 表格
   ---------------------------------------------------------- */
/* 大链接按钮：图标 + 名称 + 用途，整块可点，手机易点 */
.link-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  min-height: 4.5rem;   /* 保证手机可点面积 */
}

.link-tile:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-hover), var(--hover-glow);
  background: var(--card-hover-bg);
  border-color: var(--hover-border);
}

/* 链接砖图标 */
.lt-icon {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 0.8rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

/* 链接砖文字区：名称 + 一句话用途 */
.lt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lt-text strong {
  font-size: 0.98rem;
  color: var(--text);
}

.lt-text small {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* 待办清单容器 */
.check-list {
  padding: 1.25rem;
}

/* 清单条目：label 包裹 input + span */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-radius: 0.7rem;
  cursor: pointer;
  transition: background 0.3s var(--ease-out-quart);
}

.check-item:hover {
  background: var(--accent-soft);
}

.check-item:not(:last-child) {
  border-bottom: 1px dashed var(--card-border);
}

/* 自定义复选框 */
.check-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.4rem;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
  cursor: pointer;
  position: relative;
  /* 勾选反馈：弹簧缩放 + 颜色柔和过渡 */
  transition: background 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart),
    box-shadow 0.3s var(--ease-out-expo), transform 0.45s var(--ease-spring);
}

.check-item input[type="checkbox"]:active {
  transform: scale(0.85);   /* 按压回缩，松开由弹簧弹回 */
}

.check-item input[type="checkbox"]:hover {
  border-color: var(--accent-border);
}

.check-item input[type="checkbox"]:checked {
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* 勾选对号 */
.check-item input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #f0fdff;
}

/* 勾选后文字划线弱化 */
.check-item input[type="checkbox"]:checked + span,
.check-item input[type="checkbox"]:checked ~ span {
  text-decoration: line-through;
  color: var(--text-faint);
}

/* 进度条轨道 */
.progress-bar {
  height: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
  margin: 0.75rem 0 0.4rem;
}

/* 进度条填充（JS 设置 width，id 为 checkProgress） */
#checkProgress {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: var(--grad);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
  transition: width 0.45s var(--ease-spring);  /* 进度变化：弹簧推进（过冲被轨道 overflow 裁剪） */
}

/* 进度文字（JS 写入"已完成 x/y"） */
#checkText {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* 表格横向滚动容器（玻璃卡片化） */
.table-wrap {
  overflow-x: auto;
  padding: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  width: 100%;
  min-width: 560px;      /* 移动端触发横向滚动 */
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table-wrap th,
.table-wrap td {
  padding: 0.8rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--card-border);
}

.table-wrap th {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-border);
}

.table-wrap tbody tr:nth-child(even) {
  background: var(--row-alt);
}

.table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.table-wrap tbody tr {
  transition: background 0.25s var(--ease-out-quart);
}

.table-wrap tbody tr:hover {
  background: var(--accent-soft);
}

/* ----------------------------------------------------------
   十三、页脚
   ---------------------------------------------------------- */
.footer {
  margin-top: 4rem;
  padding: 2.5rem 0 2rem;
  text-align: center;
  background: var(--card-bg-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-border);
  font-size: 0.88rem;
  color: var(--text-dim);
}

.footer p { margin: 0.3rem 0; }

.footer-brand {
  font-weight: 700;
  color: var(--text);
}

.footer-disclaimer {
  max-width: 44em;
  margin: 0.5rem auto !important;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.footer-icp {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ----------------------------------------------------------
   十四、进场动画（配合 JS IntersectionObserver）
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);      /* translate3d 触发 GPU 合成 */
  backface-visibility: hidden;             /* 避免动画期间文字闪烁 */
  /* will-change 仅在动画期间存在：.visible 稳定后由 main.js 置回 auto，防合成层常驻内存 */
  will-change: transform, opacity;
  /* reveal 进场 0.7s：位移 expo、透明度 quart；交错延迟由 JS 写 transition-delay */
  transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------------------
   十四·附、便当盒网格（Bento Grid）：新增布局类，页面作者可直接使用
   用法：容器加 .bento-grid，子项按需加 .bento-2x / .bento-tall / .bento-wide
   ---------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 桌面 4 列基准 */
  grid-auto-rows: minmax(9rem, auto);      /* 行基准高度：内容多时自动撑高 */
  grid-auto-flow: dense;                   /* 自动回填空洞，排布更紧凑 */
  gap: 1.25rem;
}

.bento-2x   { grid-column: span 2; }       /* 跨 2 列 */
.bento-tall { grid-row: span 2; }          /* 跨 2 行 */
.bento-wide { grid-column: 1 / -1; }       /* 跨满整行 */

/* 768px 以下：便当盒退化为单列流式 */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-2x,
  .bento-wide { grid-column: auto; }
  .bento-tall { grid-row: auto; }
}

/* ----------------------------------------------------------
   十四·附二、吸附滚动：仅触屏设备（pointer: coarse）启用；
   桌面端跑自定义惯性滚动，不开 CSS snap 以免相互拉扯
   ---------------------------------------------------------- */
@media (pointer: coarse) {
  html { scroll-snap-type: y proximity; }
  .section { scroll-snap-align: start; }
}

/* 尊重系统"减少动态效果"设置：
   撤销 reveal 位移（直接归位），仅保留不透明度渐变；
   惯性滚动与视差由 main.js 检测同一 media query 后停用 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal {
    transform: none !important;                     /* 撤销位移动画 */
    will-change: auto;
    transition: opacity 0.4s ease !important;       /* 仅保留透明度渐变 */
    transition-duration: 0.4s !important;
  }
}

/* ----------------------------------------------------------
   十五、响应式（断点 768px：移动端）
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* 区块间距略收紧但仍保留呼吸感 */
  .section { padding: 3rem 0; }
  .hero { padding: 3.5rem 0 3rem; }

  /* 网格与时间轴全部单列 */
  .grid-2,
  .grid-3,
  .grid-4,
  .timeline {
    grid-template-columns: 1fr;
  }

  /* 显示汉堡按钮 */
  #navToggle { display: inline-flex; }

  /* 移动端菜单：默认收起，.nav-open 展开为玻璃下拉面板 */
  .nav-links {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    /* 用接近实底的背景：下拉悬浮在正文之上，嵌套 backdrop-filter 在部分浏览器不生效，半透明会导致文字透叠 */
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-hover);
    /* 收起态 */
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    pointer-events: none;
    /* 下拉展开：位移弹簧微过冲，透明度柔和跟随 */
    transition: opacity 0.3s var(--ease-out-quart), transform 0.45s var(--ease-spring);
  }

  .nav-links a {
    padding: 0.75rem 1rem;   /* 手机易点 */
  }

  .nav-links.nav-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  /* 倒计时：手机上固定一行四格，防止"秒"盒换行独占一行 */
  .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
  .cd-box { min-width: 0; padding: 0.8rem 0.25rem; }
  .cd-num { font-size: clamp(1.4rem, 7vw, 2rem); }
}

/* 桌面端：卡片内边距加大到 2rem，大卡片用大圆角 */
@media (min-width: 769px) {
  .glass-card,
  .entry-card,
  .stat-card,
  .timeline-stage,
  .check-list {
    padding: 2rem;
  }

  .glass-card,
  .entry-card,
  .timeline-stage,
  .lm-card,
  .check-list,
  .table-wrap {
    border-radius: var(--radius-lg);
  }

  .lm-body { padding: 1.4rem 1.6rem 1.6rem; }

  .section { padding: 5rem 0; }
}