/* ===========================================================
   蜀黍家教育官网 v3 — 设计系统（在 main.css 之后加载，做增强与覆盖）
   设计语言 = 「稳舰·深蓝秩序」的骨架配色 × 「云图」的卡片质感
   主色不变：深蓝 #0A2540 / 警蓝 #1A56DB / 警徽金 #D4A843
   卡片语言：16px 圆角 + 柔和双层阴影 + 悬停上浮 + 图标圆角方块 + 胶囊标签
   =========================================================== */

/* ---------- 1. 令牌增强 ---------- */
:root {
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(10, 37, 64, .04), 0 6px 18px -8px rgba(10, 37, 64, .10);
  --sh-2: 0 2px 6px rgba(10, 37, 64, .06), 0 18px 38px -16px rgba(10, 37, 64, .18);
  --sh-3: 0 4px 10px rgba(10, 37, 64, .07), 0 28px 60px -22px rgba(10, 37, 64, .24);
  --edge: #C7D9EE;
  --line: var(--gray-200);
  /* main.css 未定义的中间灰阶，补齐（页面里有用到） */
  --gray-400: #AEACA4;
  --gray-800: #2B3644;

  --ease: cubic-bezier(.22, .8, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --maxw: 1240px;

  --t: .26s var(--ease);
}

/* ---------- 2. 基础排版与可访问性 ---------- */
body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-900);
  background: #fff;
}
:focus-visible {
  outline: 2.5px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: 6px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
  font-size: 14px;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
img { transition: transform .5s var(--ease); }

/* 通用图片容器 */
.cover, .photo, .thumb, .pic, .cov, .covimg { overflow: hidden; }
.cover img, .photo img, .thumb img, .pic img, .cov img, .covimg img, .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- 3. 顶部信息条：已按需求整体移除 ---------- */

/* ---------- 4. 导航 ---------- */
.nav {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(10, 37, 64, .07);
  box-shadow: 0 1px 0 rgba(10, 37, 64, .02);
}
.nav .wrap { height: 72px; gap: 10px; }
.nav .logo { font-size: 18px; font-weight: 600; color: var(--navy-800); gap: 10px; margin-right: 26px; }
.nav .logo img { height: 36px; width: auto; display: block; }
.nav .menu { gap: 4px; }
.nav .menu a {
  padding: 10px 15px; border-radius: var(--r-sm);
  font-size: 15px; color: var(--gray-700); font-weight: 400;
}
.nav .menu a:hover { color: var(--navy-600); background: var(--navy-50); }
.nav .menu a.active { color: var(--navy-700); font-weight: 600; background: transparent; }
.nav .menu a.active::after {
  left: 15px; right: 15px; bottom: 3px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--navy-500), var(--gold-500));
}
.nav .cta {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #fff; font-size: 14.5px; font-weight: 500; padding: 11px 24px;
  box-shadow: 0 8px 18px -10px rgba(186, 117, 23, .85);
}
.nav .cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(186, 117, 23, .9); }

/* 901–1024px：导航为 8 项（含「选岗」），此区间默认尺寸放不下 —— 实测 901/950px 下
   8 个菜单项会全部折成两行（高度 40→70px），故在此收紧内边距与间距。
   测算：8 项 15px 字号 + 15px 内边距需 628px，而 901px 视口下菜单可用宽度仅 564px。 */
@media (min-width: 901px) and (max-width: 1024px) {
  .nav .wrap { gap: 8px; }
  .nav .logo { margin-right: 12px; }
  .nav .menu { gap: 2px; }
  .nav .menu a { padding: 10px 10px; font-size: 14.5px; }
  .nav .menu a.active::after { left: 10px; right: 10px; }
  .nav .cta { padding: 10px 16px; font-size: 13.5px; }
}

/* ---------- 5. 区块与标题 ---------- */
.section { padding: 76px 0; }
.section.tight { padding: 56px 0; }
.section.soft { background: linear-gradient(180deg, #F8FAFD, #F3F7FC); }
.sec-head { margin-bottom: 30px; align-items: flex-end; }
.sec-head h2 {
  font-size: 28px; font-weight: 600; letter-spacing: .2px; color: var(--navy-800);
  padding-left: 18px;
}
.sec-head h2::before {
  width: 5px; height: 26px; border-radius: 3px;
  background: linear-gradient(180deg, var(--navy-500), var(--gold-500));
}
.sec-head .more {
  font-size: 14px; color: var(--navy-600); display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid transparent;
  transition: var(--t);
}
.sec-head .more:hover {
  color: var(--navy-700); background: #fff; border-color: var(--edge); box-shadow: var(--sh-1);
}
.sec-sub { font-size: 14px; color: var(--gray-500); margin-top: 8px; padding-left: 18px; }

/* ---------- 6. 首页 Hero：左赛道 + 右轮播（带照片） ---------- */
.hero {
  background:
    radial-gradient(1200px 420px at 88% -10%, rgba(26, 86, 219, .38), transparent 62%),
    linear-gradient(165deg, #062A4E 0%, #04213E 55%, #041B33 100%);
  padding: 38px 0 42px;
}
.hero .wrap { grid-template-columns: 316px 1fr; gap: 24px; }

.lanes {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  padding: 16px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; justify-content: center;
}
.lanes h3 {
  font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: .4px;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 0 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.lanes h3::before { width: 3px; height: 16px; }
.lanes a:last-child { margin-bottom: 0; }
.lanes a {
  padding: 13px 15px; border-radius: var(--r-sm); margin-bottom: 8px;
  font-size: 14.5px; color: #E2ECFA; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .05);
}
.lanes a:hover {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  border-color: rgba(212, 168, 67, .5);
  transform: translateX(5px);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8);
}
.lanes a .arw { color: var(--gold-500); opacity: .7; font-size: 17px; }
.lanes a:hover .arw { opacity: 1; }

/* 轮播：照片 + 轻遮罩（左侧与底部稍深，保证文字可读；右侧基本不做压暗，让图片露出来） */
.carousel {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  min-height: 356px; box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .85);
  border: 1px solid rgba(255, 255, 255, .12);
}
.carousel .slide {
  padding: 34px 40px 38px;
  background-size: cover; background-position: center;
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s var(--ease-out);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; isolation: isolate;
}
.carousel .slide::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 27, 51, 0) 40%, rgba(4, 27, 51, .58) 100%),
    linear-gradient(100deg, rgba(4, 27, 51, .60) 0%, rgba(4, 33, 62, .28) 48%, rgba(6, 42, 78, 0) 100%);
}
.carousel .slide.on { opacity: 1; }
/* 「整图轮播」：图片本身就是设计稿（选岗系统海报等），压在它上面的暗色遮罩会毁掉浅色排版 →
   整张关掉 ::before（2026-10-13 非哥换图后新增）。文案类轮播照旧走上面的遮罩。 */
.carousel .slide.plain::before { display: none; }
a.slide { color: #fff; text-decoration: none; }
a.slide:focus-visible { outline-offset: -4px; }
.carousel .slide h3 { font-size: 30px; font-weight: 600; line-height: 1.34; letter-spacing: .3px; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.carousel .slide p { font-size: 15px; color: rgba(255, 255, 255, .84); margin-top: 12px; max-width: 560px; }
.carousel .dots { right: 30px; bottom: 28px; gap: 9px; }
.carousel .dots i { width: 9px; height: 9px; background: rgba(255, 255, 255, .42); }
.carousel .dots i.on { width: 28px; background: var(--gold-500); }

/* ---------- 7. 招考资讯（频道卡更高，每卡 8 条） ---------- */
.news-grid { grid-template-columns: 1fr 320px; gap: 26px; align-items: stretch; }
.news-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.ncard {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 16px;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column; min-height: 346px;
}
.ncard::before { height: 3px; background: linear-gradient(90deg, var(--navy-500), var(--gold-500)); }
.ncard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--edge); }
.ncard > .ch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--gray-100);
}
.ncard .chip {
  font-size: 13px; font-weight: 600; padding: 5px 13px; margin-bottom: 0;
  background: var(--navy-100); color: var(--navy-700); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.ncard .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); display: block; }
.ncard .more {
  font-size: 12.5px; color: var(--navy-600); font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--navy-50);
  border: 1px solid var(--navy-100); transition: var(--t); white-space: nowrap;
}
.ncard .more:hover { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
.ncard ul { flex: 1; }
.ncard ul li { margin-bottom: 0; border-bottom: 1px dashed var(--gray-100); }
.ncard ul li:last-child { border-bottom: 0; }
.ncard ul li a {
  font-size: 13.4px; color: var(--gray-700); padding: 8px 0; display: flex; gap: 8px;
  align-items: center; line-height: 1.5;
}
.ncard ul li a .tt {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ncard ul li a::before { margin-top: 0; background: var(--navy-200); }
.ncard ul li a:hover { color: var(--navy-600); }
.ncard ul li a:hover::before { background: var(--gold-500); }
.ncard ul li a .tm { margin-left: auto; font-size: 11.5px; color: var(--gray-500); flex-shrink: 0; padding-top: 0; }

/* 右侧考试日历 */
.latest {
  background: linear-gradient(170deg, #08264A, #04213E);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); padding: 22px 16px 18px;
  color: #fff; box-shadow: var(--sh-2);
  position: sticky; top: 88px;
  display: flex; flex-direction: column;
}
.latest h4 {
  color: #fff; border-bottom-color: rgba(255, 255, 255, .14); font-size: 15.5px;
}
.latest h4::before { background: var(--gold-500); }
.latest .cal-tabs {
  margin: 12px 0 16px !important; gap: 4px; flex-wrap: nowrap;
  display: flex; justify-content: space-between;
}
.latest .cal-tabs button {
  padding: 5px 8px; font-size: 12px; color: rgba(226, 236, 250, .8);
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12);
  flex: 1 1 auto; text-align: center; white-space: nowrap;
}
.latest .cal-tabs button[data-nav]:hover { color: #fff; }
.latest .cal-tabs button:hover:not(.on) { color: #fff; border-color: rgba(212, 168, 67, .6); background: rgba(255, 255, 255, .1); }
.latest .cal-tabs button.on {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #fff; border-color: transparent;
}
.latest .timeline::before { background: rgba(255, 255, 255, .16); }
.latest .tl-item::before { background: #0A2540; border-color: var(--gold-500); }
.latest .tl-item .d { color: var(--gold-500); }
.latest .tl-item .n { color: rgba(255, 255, 255, .94); }
.latest .tl-item .t { color: rgba(181, 212, 244, .72); }
.latest .tl-item .st { background: rgba(212, 168, 67, .18); color: var(--gold-500); border: 1px solid rgba(212, 168, 67, .3); }
/* 日历卡高度由左侧资讯卡撑出的行高决定：底部与左侧卡片下沿严格对齐，内容多时卡内滚动 */
.home-cal { max-height: none; flex: 1 1 auto; min-height: 0; }
.home-cal::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }

/* ---------- 8. 课程推荐（考试类型标签变小） ---------- */
.course-grid { gap: 22px; }
.ccard {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.ccard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--edge); }
.ccard .cover { height: 168px; position: relative; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); }
.ccard .cover img { width: 100%; height: 100%; object-fit: cover; }
.ccard:hover .cover img { transform: scale(1.05); }
.ccard .cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 33, 62, .05) 0%, rgba(4, 33, 62, .55) 100%);
}
.ccard .cover .corner {
  top: 12px; right: 12px; z-index: 2; font-size: 12px; padding: 3px 11px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8);
}
.ccard .cover .corner.new { background: linear-gradient(135deg, var(--navy-500), var(--navy-600)); }
.ccard .body { padding: 17px 18px 18px; display: flex; flex-direction: column; flex: 1; }
/* 考试类型标签：小号 */
.ccard .seg-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ccard .seg-tags span {
  font-size: 10.5px; line-height: 1.5; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy-600);
  border: 1px solid var(--navy-100); white-space: nowrap;
}
.ccard .body h4 { font-size: 16px; font-weight: 600; color: var(--navy-800); margin-bottom: 7px; line-height: 1.45; }
.ccard .body .meta {
  font-size: 12.5px; color: var(--gray-500); margin-bottom: 12px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 课程卡不再展示价格与「查看详情」按钮（整卡可点） */
.ccard .body .pts { margin: 0; }
.ccard .body .pts li {
  font-size: 12.5px; color: var(--gray-600); line-height: 1.75; display: flex; gap: 7px;
}
.ccard .body .pts li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500);
  margin-top: 8px; flex-shrink: 0;
}

/* ---------- 9. 常见问题 ---------- */
.faq-list { gap: 0 40px; }
.faq-list li { border-bottom: 1px dashed var(--line); }
.faq-list li a { padding: 17px 6px; gap: 13px; }
.faq-list li .no {
  width: 26px; height: 26px; border-radius: 9px; font-size: 12.5px;
  background: var(--navy-100); color: var(--navy-600); font-weight: 600;
}
.faq-list li .tt { font-size: 14.5px; color: var(--gray-800); }
.faq-list li .dt { font-size: 12.5px; color: var(--gray-500); }
.faq-list li a:hover { padding-left: 12px; }
.faq-list li a:hover .no { background: var(--navy-600); color: #fff; }
.faq-list li a::after {
  content: '\203A'; color: var(--navy-200); font-size: 17px; transition: var(--t);
}
.faq-list li a:hover::after { color: var(--gold-500); transform: translateX(3px); }

/* 常见问题：左两列（每列 5 条）+ 右侧 1 张广告卡；广告卡高度跟随左列 */
/* min-height 让「按考试类型筛选」切换时区块高度保持稳定：
   各赛道问题条数不同（4~10 条），若不锁高度，切换时下方内容会上下抖动，广告卡也会被压扁。
   316px = 10 条（默认「全部」）的自然高度。 */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: stretch; min-height: 316px; }
.faq-wrap .faq-list { gap: 0 34px; align-content: start; }
.ad-col { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.ad-card { flex: 1 1 auto; }
.ad-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 214px; padding: 22px; border-radius: var(--r-lg); overflow: hidden;
  background-size: cover; background-position: center; isolation: isolate;
  color: #fff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--sh-2);
  transition: transform var(--t), box-shadow var(--t);
}
.ad-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 27, 51, .22) 0%, rgba(4, 27, 51, .86) 62%, rgba(4, 27, 51, .95) 100%);
}
.ad-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.ad-card .ad-tag {
  position: absolute; top: 16px; left: 16px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff;
  font-size: 12px; font-weight: 500; padding: 3px 11px; border-radius: var(--r-pill);
  box-shadow: 0 8px 18px -10px rgba(186, 117, 23, .9);
}
.ad-card h4 { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.42; letter-spacing: .2px; }
.ad-card p { color: rgba(226, 236, 250, .82); font-size: 13px; margin-top: 7px; }
.ad-card .ad-cta {
  margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--gold-500);
  display: inline-flex; align-items: center; gap: 4px; transition: gap .2s;
}
.ad-card:hover .ad-cta { gap: 9px; }

/* ---------- 10. 备考资料 ---------- */
.res-grid { gap: 22px; }
.res-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff;
  box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
.res-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--edge); }
.res-card .cover { height: 152px; background: linear-gradient(135deg, var(--navy-100), var(--navy-200)); position: relative; }
.res-card:hover .cover img { transform: scale(1.05); }
.res-card .cover .kind {
  position: absolute; left: 12px; top: 12px;
  font-size: 11.5px; padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(4, 33, 62, .62); color: #fff; backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
}
.res-card .body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.res-tags { gap: 6px; margin-bottom: 10px; }
.res-tags .res-tag {
  font-size: 10.5px; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy-600); border: 1px solid var(--navy-100);
}
.res-card .body h4 { font-size: 15.5px; font-weight: 600; color: var(--navy-800); line-height: 1.5; margin-bottom: 8px; }
.res-card .body p { font-size: 12.8px; color: var(--gray-500); min-height: 42px; margin-bottom: 13px; }
.res-card .body .dl {
  margin-top: auto; font-size: 13px; font-weight: 500; color: var(--navy-600);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- 11. 深色章节 A：师资（与下面的「智能学习系统」连成一条连续深色带） ---------- */
.teachers-sec {
  background:
    radial-gradient(900px 380px at 12% 0%, rgba(26, 86, 219, .32), transparent 60%),
    linear-gradient(160deg, #062A4E, #04213E);
  padding: 78px 0 54px;
}
.teachers-sec .sec-head h2 { color: #fff; }
.teachers-sec .sec-head .more { color: var(--gold-500); border-color: rgba(212, 168, 67, .3); }
.teachers-sec .sec-head .more:hover { background: rgba(212, 168, 67, .12); color: var(--gold-500); border-color: rgba(212, 168, 67, .55); }
.teachers-sec .sec-sub { color: rgba(181, 212, 244, .8); }
.teacher-grid { gap: 22px; }
.tcard {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-lg); padding: 26px 20px 24px; text-align: center;
  transition: transform var(--t), background var(--t), border-color var(--t);
  backdrop-filter: blur(4px);
}
.tcard:hover {
  background: rgba(255, 255, 255, .1); transform: translateY(-5px);
  border-color: rgba(212, 168, 67, .48); box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .8);
}
.tcard .ava {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden;
  border: 2px solid rgba(212, 168, 67, .5); padding: 0; background: var(--navy-700);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9);
}
.tcard .ava img { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover .ava img { transform: scale(1.06); }
.tcard h4 { color: #fff; font-size: 17px; font-weight: 600; }
.tcard .role { color: var(--gold-500); font-size: 13px; margin-top: 6px; }
.tcard .desc { color: rgba(181, 212, 244, .78); font-size: 12.8px; margin-top: 11px; line-height: 1.65; min-height: 42px; }

/* ---------- 12. 深色章节 B：智能学习系统（紧接师资，靠色值衔接成一条深色带） ---------- */
.sys-sec {
  position: relative;
  background:
    radial-gradient(760px 320px at 88% 100%, rgba(212, 168, 67, .16), transparent 62%),
    linear-gradient(160deg, #04213E, #041B33);
  padding: 54px 0 74px;
}
/* 内收金色细线：暗示「同一条深色章节里的下一节」，而不是两块深色硬拼 */
.sys-sec::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(880px, calc(100% - 96px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, .36) 50%, transparent);
}
.sys-sec .sec-head h2 { color: #fff; }
.sys-sec .sec-sub { color: rgba(181, 212, 244, .78); }
/* 窄屏下「进入题库 ›」不要被标题挤成两行 */
.sys-sec .sec-head .more { white-space: nowrap; flex: 0 0 auto; }

/* 6 张备考工具卡：一张一个强调色。
   去掉大配图改走「渐变图标块 + 彩色顶条 + 右上角光晕 + 能力标签」，
   一屏能看全 6 个工具，也避免 6 张卡配图风格不统一显得杂。 */
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scard {
  --ac: #4C8DFF; --ac-d: #2463D6; --ac-l: #A8C8FF;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 20px 20px 18px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  color: #fff; transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.scard::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ac), transparent 80%);
}
.scard::after {
  content: ''; position: absolute; right: -52px; top: -60px; width: 166px; height: 166px; border-radius: 50%;
  background: radial-gradient(circle, var(--ac), transparent 68%);
  opacity: .24; pointer-events: none; transition: opacity var(--t), transform .5s var(--ease-out);
}
.scard:hover {
  transform: translateY(-4px); background: rgba(255, 255, 255, .09);
  border-color: var(--ac); box-shadow: 0 26px 52px -26px rgba(0, 0, 0, .9);
}
.scard:hover::after { opacity: .36; transform: scale(1.24); }
.scard .ico {
  position: relative; z-index: 1; margin: 0; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--ac), var(--ac-d));
  box-shadow: 0 10px 20px -10px var(--ac);
}
.scard .ico svg { width: 23px; height: 23px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scard h4 { position: relative; z-index: 1; font-size: 16.5px; font-weight: 600; margin: 14px 0 7px; }
.scard p { position: relative; z-index: 1; font-size: 13px; color: rgba(181, 212, 244, .82); line-height: 1.68; }
.scard .tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.scard .tags span {
  font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(210, 230, 252, .92);
}
.scard .go {
  position: relative; z-index: 1; margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ac-l);
}
.scard .go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform var(--t); }
.scard:hover .go svg { transform: translateX(3px); }

/* 6 张卡的强调色：①机考 ②模考大赛 ③行测题库 ④申论批改 ⑤公安选岗 ⑥国省考选岗 */
.scard.ac-blue   { --ac: #4C8DFF; --ac-d: #2463D6; --ac-l: #A8C8FF; }
.scard.ac-gold   { --ac: #E0B558; --ac-d: #B8862A; --ac-l: #F0D08C; }
.scard.ac-teal   { --ac: #2FC7BE; --ac-d: #158C86; --ac-l: #8FE3DD; }
.scard.ac-violet { --ac: #A48BF2; --ac-d: #6E52D6; --ac-l: #CBBDFA; }
.scard.ac-orange { --ac: #F0A03C; --ac-d: #C1711A; --ac-l: #F8CA8C; }
.scard.ac-green  { --ac: #3FC58F; --ac-d: #1E8F62; --ac-l: #96E3C2; }


/* ---------- 13. 联系我们 ---------- */
.contact-sec { background: linear-gradient(180deg, #F8FAFD, #EEF4FB); padding: 72px 0; }
.contact-info h2 { font-size: 27px; }
.contact-info .items .it b { font-weight: 600; }
.qr-row { gap: 28px; }
.qr-box .frame { width: 176px; height: 176px; border-radius: var(--r-lg); border-color: var(--edge); box-shadow: var(--sh-1); }
.qr-box .cap { font-size: 13.5px; }

/* ---------- 14. 页脚 ---------- */
.footer { background: linear-gradient(180deg, #041B33, #02121F); }
.footer h5 { font-size: 15px; }
.footer li a:hover { color: var(--gold-500); }

/* 三栏：品牌 / 菜单（两列） / 社交二维码 */
.footer .cols { grid-template-columns: 1.55fr 1.1fr 1.35fr; gap: 44px; align-items: start; }
.footer .logo { display: block; margin-bottom: 16px; }
.footer .logo img { height: 34px; width: auto; display: block; }
.footer .f-brand .about { max-width: 340px; }
.footer .f-menu ul.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* 社交卡片：悬停弹出二维码 */
.footer .social-row { display: flex; gap: 14px; }
.footer .sc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer .sc-tile {
  width: 76px; height: 76px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: all .28s var(--ease-out); cursor: pointer;
}
.footer .sc-tile svg { width: 24px; height: 24px; display: block; }
.footer .sc-tile span { font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .2px; }
.footer .sc:hover .sc-tile { background: rgba(255,255,255,.13); border-color: rgba(212,168,67,.45); transform: translateY(-2px); }
.footer .sc-lb { font-size: 12px; color: rgba(181,212,244,.7); }
.footer .sc-pop {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 6px) scale(.96);
  /* width:max-content 必须显式声明：absolute 元素 shrink-to-fit 宽度会被包含块（.sc 仅 76px）压住，
     导致 150×150 的二维码被压成 80.5×150 竖长条（2026-10-12 修） */
  width: max-content; max-width: 92vw;
  background: #fff; border-radius: 12px; padding: 10px 10px 8px;
  box-shadow: 0 18px 40px -12px rgba(2,18,31,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all .26s var(--ease-out); z-index: 30;
}
.footer .sc-pop::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #fff;
}
.footer .sc-pop img { width: 150px; height: 150px; display: block; border-radius: 8px; }
.footer .sc-pop p { margin: 7px 0 0; font-size: 11.5px; color: var(--navy-700); text-align: center; white-space: nowrap; }
.footer .sc:hover .sc-pop, .footer .sc:focus-within .sc-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.footer .sc-tile:focus { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* 底部版权行 */
.footer .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.footer .bottom a { color: inherit; transition: color .2s; }
.footer .bottom a:hover { color: var(--gold-500); }
.footer .bottom a.police { display: inline-flex; align-items: center; gap: 4px; }
.footer .bottom a.police img { width: 16px; height: 16px; display: block; }

/* 页脚响应式（必须放在基础规则之后，否则被 main.css 的媒体查询压回 4 列） */
@media (max-width: 1180px) {
  .footer .cols { grid-template-columns: 1.55fr 1.05fr 1.4fr; gap: 30px; }
}
@media (max-width: 1024px) {
  .footer .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer .f-brand { grid-column: 1 / -1; }
  .footer .f-brand .about { max-width: none; }
}
@media (max-width: 720px) {
  .footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .footer .sc-pop { left: 0; transform: translate(0, 6px) scale(.96); }
  .footer .sc:hover .sc-pop, .footer .sc:focus-within .sc-pop { transform: translate(0, 0) scale(1); }
  .footer .sc-pop::after { left: 38px; margin-left: 0; }
  .footer .bottom { font-size: 12px; line-height: 1.9; }
}

/* ---------- 15. 内页头图 ---------- */
.page-hero {
  background:
    radial-gradient(900px 300px at 84% -30%, rgba(26, 86, 219, .42), transparent 62%),
    linear-gradient(160deg, #062A4E, #04213E);
  padding: 30px 0 32px; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; right: -60px; bottom: -110px; width: 340px; height: 340px;
  border-radius: 50%; border: 1px solid rgba(212, 168, 67, .16);
}
.page-hero h1 { font-size: 34px; }
.page-hero p { font-size: 15px; max-width: 720px; }
.page-hero .crumb { font-size: 13px; margin-bottom: 10px; }
/* .hero-stats 已按需求从全部内页移除 */

/* ---------- 16. 筛选栏（考试类型 + 地区） ---------- */
.filter-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--sh-1); margin-bottom: 28px;
}
.filter-row { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--gray-100); }
.filter-row:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-row:first-child { padding-top: 0; }
.filter-row > .fl {
  flex-shrink: 0; width: 76px; font-size: 13.5px; color: var(--gray-500);
  padding-top: 5px; font-weight: 500;
}
.filter-row > .fv { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.chip-btn {
  padding: 6px 15px; border-radius: var(--r-pill); font-size: 13px;
  color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200);
  transition: var(--t); white-space: nowrap;
}
.chip-btn:hover { border-color: var(--navy-500); color: var(--navy-600); background: #fff; }
.chip-btn.on {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  color: #fff; border-color: transparent; box-shadow: 0 8px 18px -12px rgba(26, 86, 219, .9);
}
/* 省份：可折叠 */
.prov-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.prov-grid.collapsed .prov-chip:nth-child(n+13) { display: none; }
.prov-chip {
  padding: 5px 12px; border-radius: var(--r-xs); font-size: 12.5px;
  color: var(--gray-600); background: #fff; border: 1px solid var(--gray-200);
  transition: var(--t);
}
.prov-chip:hover { border-color: var(--navy-500); color: var(--navy-600); }
.prov-chip.on { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.filter-more {
  align-self: flex-start; flex: 0 0 auto; white-space: nowrap;
  font-size: 12.5px; color: var(--navy-600); padding: 6px 10px; border-radius: var(--r-xs);
  background: var(--navy-50); border: 1px solid var(--navy-100); transition: var(--t);
}
.filter-more:hover { background: var(--navy-100); }
.filter-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); flex-wrap: wrap;
}
.filter-foot .cnt { font-size: 13px; color: var(--gray-500); }
.filter-foot .cnt b { color: var(--navy-600); font-variant-numeric: tabular-nums; }
.filter-foot .reset {
  font-size: 13px; color: var(--gray-500); padding: 7px 16px;
  border: 1px solid var(--gray-200); border-radius: var(--r-pill); background: #fff; transition: var(--t);
}
.filter-foot .reset:hover { border-color: var(--navy-500); color: var(--navy-600); }

/* ---------- 17. 列表页条目（资讯列表） ---------- */
.list-page .item {
  gap: 22px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--sh-1); margin-bottom: 16px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.list-page .item:hover { padding-left: 24px; transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--edge); }

/* 左侧日期块：列表不依赖缩略图，用日期建立视觉锚点 */
.list-page .item .dcol {
  width: 84px; flex-shrink: 0; align-self: stretch; min-height: 92px;
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-600));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background var(--t), box-shadow var(--t);
}
.list-page .item .dcol .d { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.list-page .item .dcol .m { font-size: 11.5px; color: rgba(181,212,244,.85); letter-spacing: .5px; }
.list-page .item .dcol.ph { background: linear-gradient(165deg, #8C9BB0, #6E7E94); }
.list-page .item .dcol.ph .d { font-size: 20px; font-weight: 500; }
.list-page .item .dcol.ph .m { font-size: 10.5px; }
.list-page .item:hover .dcol { background: linear-gradient(165deg, var(--gold-600), var(--gold-500)); box-shadow: 0 10px 20px -12px rgba(186,117,23,.85); }
.list-page .item:hover .dcol .m { color: rgba(255,255,255,.9); }
.list-page .item .body { min-width: 0; display: flex; flex-direction: column; }
.list-page .item h4 { font-size: 17.5px; font-weight: 600; color: var(--navy-800); margin-bottom: 9px; line-height: 1.5; }
.list-page .item p { font-size: 13.8px; color: var(--gray-500); line-height: 1.7; margin-bottom: 12px; }
.list-page .item .meta { margin-top: auto; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.list-page .item .meta .mv { font-size: 12.5px; color: var(--gray-500); display: inline-flex; align-items: center; gap: 5px; }
.list-page .item:hover h4 { color: var(--navy-600); }
.m-tag {
  font-size: 11px; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy-600); border: 1px solid var(--navy-100);
}
.m-tag.st-upcoming { background: #FFF4E5; color: #B4770B; border-color: #F7E2BE; }
.m-tag.st-ongoing { background: #E7F5EC; color: #1D9E75; border-color: #CDEBD9; }
.m-tag.st-ended { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
.tag-top { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; }

/* ---------- 18. 分页 ---------- */
.pager { gap: 9px; margin-top: 38px; }
.pager a, .pager span {
  min-width: 42px; height: 42px; border-radius: var(--r-sm); font-size: 14px;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700);
}
.pager a:hover { border-color: var(--navy-500); color: var(--navy-600); background: var(--navy-50); }
.pager .on { background: var(--navy-600); border-color: var(--navy-600); color: #fff; font-weight: 500; }

/* ---------- 19. 师资页（分组 / 全部科目不分组织排列） ---------- */
.teacher-subject-tabs { gap: 10px; margin-bottom: 28px; }
.teacher-subject-tabs button {
  padding: 10px 24px; border-radius: var(--r-pill); font-size: 14px;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-600); transition: var(--t);
}
.teacher-subject-tabs button:hover:not(.on) { border-color: var(--navy-500); color: var(--navy-600); background: var(--navy-50); }
.teacher-subject-tabs button.on {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500));
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -14px rgba(26, 86, 219, .95);
}
.subject-group { margin-bottom: 46px; }
.subject-group .group-head { border-bottom: 1px solid var(--line); padding-bottom: 13px; margin-bottom: 20px; }
.subject-group .group-head h3 { font-size: 19px; font-weight: 600; color: var(--navy-800); gap: 10px; }
.subject-group .group-head h3::before { width: 4px; height: 19px; background: linear-gradient(180deg, var(--navy-500), var(--gold-500)); }
.subject-group .group-head .cnt {
  font-size: 12.5px; color: var(--navy-600); background: var(--navy-50);
  border: 1px solid var(--navy-100); padding: 2px 11px; border-radius: var(--r-pill);
}
/* 全部科目：不分组、平铺 */
#flatAllWrap .teacher-grid { margin-bottom: 0; }
.tcard-lg {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 20px; text-align: center; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.tcard-lg:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--edge); }
.tcard-lg .ava {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 15px; overflow: hidden;
  border: 2px solid var(--navy-100); background: var(--navy-100);
}
.tcard-lg .ava img { width: 100%; height: 100%; object-fit: cover; }
.tcard-lg:hover .ava img { transform: scale(1.06); }
.tcard-lg h4 { font-size: 17px; font-weight: 600; color: var(--navy-800); }
.tcard-lg .role { font-size: 13px; color: var(--gold-600); margin-top: 6px; font-weight: 500; }
.tcard-lg .desc { font-size: 12.8px; color: var(--gray-600); margin-top: 11px; line-height: 1.65; min-height: 42px; }
.tcard-lg .subj {
  display: inline-block; margin-top: 13px; font-size: 11.5px; padding: 2px 10px;
  border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy-600); border: 1px solid var(--navy-100);
}

/* ---------- 20. 校区页 ---------- */
.dir-menu { border-radius: var(--r-lg); padding: 18px 14px; box-shadow: var(--sh-2); }
.dir-menu button { border-radius: var(--r-sm); padding: 13px 14px; }
.dir-menu button.on { background: linear-gradient(135deg, var(--navy-600), var(--navy-500)); }
.campus-grid { gap: 22px; }
.campus-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff;
  box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.campus-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--edge); }
.campus-card .photo { height: 158px; position: relative; background: linear-gradient(135deg, var(--navy-100), var(--navy-200)); overflow: hidden; }
.campus-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.campus-card:hover .photo img { transform: scale(1.06); }
.campus-card .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 33, 62, 0) 40%, rgba(4, 33, 62, .55) 100%);
}
.campus-card .photo .flag {
  left: 12px; top: 12px; z-index: 2; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); font-size: 11.5px; padding: 3px 11px;
}
.campus-card .body { padding: 17px 18px 18px; }
.campus-card .body h4 { font-size: 16.5px; font-weight: 600; color: var(--navy-800); margin-bottom: 9px; }
.campus-card .body .addr { font-size: 12.8px; color: var(--gray-500); min-height: 40px; }
.campus-card .body .tel { font-size: 13px; color: var(--navy-600); display: flex; align-items: center; gap: 6px; }
.campus-card .body .tel svg { width: 14px; height: 14px; stroke: var(--navy-500); fill: none; stroke-width: 1.8; }
.campus-card .body .go { margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--navy-600); display: inline-flex; gap: 5px; }

/* ---------- 21. 详情页 / 文章 ---------- */
.article { max-width: 840px; }
.article h1 { font-size: 30px; font-weight: 600; color: var(--navy-800); line-height: 1.42; }
.article .meta { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.article .content { font-size: 16px; line-height: 2; color: var(--gray-700); }
.article .content h2 {
  font-size: 20px; color: var(--navy-800); margin: 32px 0 14px; padding-left: 13px;
  border-left: 4px solid var(--gold-500); line-height: 1.35;
}
.article .content img, .article .content video, .article .content iframe { border-radius: var(--r-md); }
.article .att-item { border-radius: var(--r-md); background: var(--gray-50); border-color: var(--line); padding: 14px 18px; }
.article .att-item:hover { background: #fff; border-color: var(--navy-500); box-shadow: var(--sh-1); }
.apply-info { border-radius: var(--r-lg); background: linear-gradient(180deg, #F8FAFD, #F2F7FD); border-color: var(--line); }
.art-tags .a-tag { border-radius: var(--r-pill); padding: 4px 13px; }
.article .side-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 20px;
  box-shadow: var(--sh-1); position: sticky; top: 96px;
}
.article .side-card h5 { font-size: 15px; font-weight: 600; color: var(--navy-800); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-100); }
.article .side-card li { padding: 10px 0; border-bottom: 1px dashed var(--gray-100); }
.article .side-card li:last-child { border-bottom: 0; }
.article .side-card li a { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; display: block; }
.article .side-card li a:hover { color: var(--navy-600); }

/* 师资详情 */
.teacher-detail { grid-template-columns: 320px 1fr; gap: 40px; }
.teacher-detail .side { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 30px 26px; }
.teacher-detail .side .ava { width: 132px; height: 132px; overflow: hidden; border: 2px solid var(--navy-100); }
.teacher-detail .side .ava img { width: 100%; height: 100%; object-fit: cover; }
.teacher-detail .side .tags span { border-radius: var(--r-pill); }

/* 课程卡网格（列表页） */
.course-list-grid { gap: 24px; }

/* 题库入口 */
.bank-grid { gap: 24px; }
.bank-card {
  border-radius: var(--r-xl); padding: 38px 34px; position: relative; overflow: hidden;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(26, 86, 219, .35), transparent 60%),
    linear-gradient(155deg, #062A4E, #041B33);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--sh-2);
  transition: transform var(--t), box-shadow var(--t);
}
.bank-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.bank-card .bc-ico {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(212, 168, 67, .24), rgba(26, 86, 219, .3));
  border: 1px solid rgba(212, 168, 67, .3);
  display: flex; align-items: center; justify-content: center;
}
.bank-card .bc-ico svg { width: 26px; height: 26px; stroke: var(--gold-500); fill: none; stroke-width: 1.8; }
.bank-card .shot { height: 150px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, .12); }
.bank-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.bank-card .feats { margin-top: 6px; }
.bank-card .feats li { font-size: 13.5px; color: rgba(181, 212, 244, .85); line-height: 1.9; display: flex; gap: 8px; }
.bank-card .feats li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); margin-top: 10px; flex-shrink: 0; }
.bank-card.alt {
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(212, 168, 67, .22), transparent 60%),
    linear-gradient(155deg, #0C447C, #08264A);
}

/* 关于我们 */
.about-block { gap: 52px; margin-bottom: 60px; }
.about-block .txt h2 { font-size: 25px; font-weight: 600; color: var(--navy-800); margin-bottom: 16px; }
.about-block .pic {
  height: 320px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2);
  background: linear-gradient(135deg, var(--navy-100), var(--navy-200)); position: relative;
}
.about-block .pic img { width: 100%; height: 100%; object-fit: cover; }
.stat-row { gap: 22px; }
.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 22px; text-align: left; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.stat-card .n {
  font-size: 34px; font-weight: 700; color: var(--navy-700); letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-card .n span { font-size: 16px; color: var(--gold-600); margin-left: 2px; }
.stat-card .l { font-size: 13.5px; color: var(--gray-600); margin-top: 9px; }
.stat-card .bar { height: 6px; border-radius: 4px; background: var(--gray-100); margin-top: 14px; overflow: hidden; }
.stat-card .bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--navy-500), var(--gold-500));
  width: 0; transition: width 1.1s var(--ease-out);
}
/* 优势卡 */
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.adv-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.adv-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--edge); }
.adv-card .ico {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--navy-50), var(--navy-100));
  border: 1px solid var(--navy-100);
  display: flex; align-items: center; justify-content: center;
}
.adv-card .ico svg { width: 23px; height: 23px; stroke: var(--navy-600); fill: none; stroke-width: 1.8; }
.adv-card h4 { font-size: 16.5px; font-weight: 600; color: var(--navy-800); margin-bottom: 9px; }
.adv-card p { font-size: 13.5px; color: var(--gray-600); line-height: 1.8; }

/* 时间轴（日历页） */
.cal-page { gap: 30px; }
.cal-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 30px 10px; box-shadow: var(--sh-1);
}
.cal-lane { font-size: 17px; font-weight: 600; color: var(--navy-800); }
.timeline::before { background: var(--gray-200); width: 2px; }
.tl-item::before { border-width: 2.5px; }
.tl-item .d { color: var(--navy-600); font-weight: 600; font-size: 13px; }
.tl-item .n { font-size: 15px; color: var(--navy-800); font-weight: 600; }
.tl-item .t { font-size: 13.2px; }
.tl-item .st { border: 1px solid rgba(186, 117, 23, .25); }

/* 底部咨询块 */
.consult-box {
  background:
    radial-gradient(520px 260px at 92% 10%, rgba(26, 86, 219, .35), transparent 62%),
    linear-gradient(155deg, #062A4E, #041B33);
  border-radius: var(--r-xl); padding: 44px 42px; box-shadow: var(--sh-3);
}
.consult-box .qr-box .frame { border-radius: var(--r-lg); }

/* 相关课程小卡 */
.mini-course { gap: 20px; }
.mc { border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--sh-1); }
.mc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--edge); }
.mc .cov { width: 104px; height: 104px; border-radius: var(--r-sm); overflow: hidden; }
.mc .cov img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 22. 回到顶部 + 进场动画 ---------- */
.totop {
  position: fixed; right: 26px; bottom: 104px; z-index: 120;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--navy-700), var(--navy-500));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -14px rgba(10, 37, 64, .85);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(10, 37, 64, .9); }
.totop svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.2; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- 23. 响应式 ---------- */
@media (max-width: 1180px) {
  .news-grid { grid-template-columns: 1fr; }
  .latest { position: static; }
  .home-cal { max-height: 420px; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; }
  .faq-wrap .faq-list { gap: 0 22px; }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .lanes h3 { grid-column: 1 / -1; }
  .lanes a { margin-bottom: 0; }
  .faq-wrap { grid-template-columns: 1fr; gap: 26px; min-height: 0; }
  .ad-col { position: static; }
  .ad-card { min-height: 200px; }
  .news-cards { grid-template-columns: repeat(2, 1fr); }
  .ncard { min-height: auto; }
  .course-grid, .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .sys-grid { grid-template-columns: 1fr; }
  .campus-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr !important; }
  .article .side-card { position: static; }
}
@media (max-width: 720px) {
  .section { padding: 52px 0; }
  .sec-head h2 { font-size: 22px; }
  .news-cards, .course-grid, .teacher-grid, .campus-grid, .faq-list, .course-list-grid, .res-grid, .adv-grid { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .ad-col { position: static; }
  .lanes { grid-template-columns: repeat(2, 1fr); }
  .page-hero h1 { font-size: 26px; }
  .carousel .slide h3 { font-size: 22px; }
  .carousel { min-height: 300px; }
  .carousel .slide { padding: 24px 22px 28px; }
  .list-page .item { flex-direction: row; gap: 14px; padding: 18px; }
  .list-page .item .dcol { width: 62px; min-height: 70px; }
  .list-page .item .dcol .d { font-size: 21px; }
  .list-page .item .dcol .m { font-size: 10.5px; }
  .filter-row > .fl { width: 100%; padding-top: 0; }
  .filter-row { flex-direction: column; gap: 8px; }
  .totop { right: 16px; bottom: 88px; }
  .article h1 { font-size: 23px; }
  .stat-card .n { font-size: 28px; }
  /* 联系区二维码：桌面为 176px×2 + gap28 = 380px 固定宽，窄屏会撑破容器
     （375px 实测整页横向溢出 29px）。这里缩放；min-width:0 防止 grid 项按
     内容最小宽度顶开列宽。 */
  .contact-grid > * { min-width: 0; }
  .qr-row { gap: 18px; }
  .qr-box .frame { width: 150px; height: 150px; }
}

/* ---------- 24. 移动端菜单（.menu.open） ---------- */
.nav-toggle { display: none; font-size: 21px; color: var(--navy-800); line-height: 1; padding: 8px 12px; border-radius: var(--r-sm); transition: var(--t); }
.nav-toggle:hover { background: var(--navy-50); }
@media (max-width: 900px) {
  .nav .menu { display: none; }
  /* 窄屏导航顺序：LOGO … [立即咨询] [☰]
     坑1：DOM 里 .cta 排在 .nav-toggle 之后，若把 margin-left:auto 给 toggle，
          CTA 会被挤出容器右边界（375px 实测被裁切）→ 用 order 把 CTA 排到汉堡左侧。
     坑2：main.css 的 @media(max-width:640px){.nav .cta{...}} 从未生效——
          v3.css 后加载，其非媒体规则 padding:11px 24px 压过 main.css 的媒体查询规则。
          故 CTA 的窄屏尺寸必须在这里显式重写。 */
  .nav .cta { margin-left: auto; order: 1; padding: 9px 16px; font-size: 13.5px; }
  .nav-toggle { display: block; margin-left: 0; order: 2; }
  .nav .menu.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 72px;
    background: #fff; padding: 12px 16px 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 40px -22px rgba(10, 37, 64, .35);
    animation: navDrop .26s var(--ease-out);
  }
  .nav .menu.open a { padding: 13px 14px; font-size: 15.5px; }
  .nav .menu.open a.active { background: var(--navy-50); }
  .nav .menu.open a.active::after { display: none; }
}
/* 极窄屏（iPhone SE 320~400px）：进一步收紧，保证 LOGO / CTA / 汉堡三者都完整可见。
   实测 320px 视口下导航固有宽度曾达 404px（溢出 84px），收紧后回落到约 270px。 */
@media (max-width: 400px) {
  .nav .wrap { gap: 6px; }
  .nav .logo { margin-right: 0; }
  .nav .logo img { height: 30px; }
  .nav .cta { padding: 8px 12px; font-size: 12.5px; }
  .nav-toggle { padding: 8px 10px; font-size: 19px; }
  /* 320~400px：两个二维码横排放不下 → 允许换行，避免撑破容器 */
  .qr-row { flex-wrap: wrap; gap: 14px; }
  .qr-box .frame { width: 132px; height: 132px; }
}

@keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- 26. 窄屏横向溢出修复（2026-10-04 部署验收实测发现） ----------
   两类共性根因：
   ① 【分层坑】v3.css 的非媒体规则会压过 main.css 里的媒体查询规则
      （同特异性 → 后加载者胜），导致 main.css 写的「窄屏单列 / 缩小」静默失效。
      例：.teacher-detail 在 v3.css 写死「320px 1fr」，main.css 的「≤1024 单列」
      从未生效 → 375px 下整页横向溢出 113px。故覆盖必须写在 v3.css 的媒体查询里。
   ② 【grid/flex min-width】子项默认 min-width:auto，长内容会把轨道顶开，
      需显式 minmax(0,1fr) 或 min-width:0。
   ⚠️ 本节有意放在文件末尾：同特异性下最后出现的规则胜出。 */

/* 师资详情：桌面为「320px 侧栏 + 内容」两列，窄屏必须单列 */
@media (max-width: 1024px) {
  .teacher-detail { grid-template-columns: 1fr; gap: 28px; }
  .teacher-detail .side { position: static; }
}

/* 首页资讯区：单列时轨道用 minmax(0,1fr)（裸 1fr 会被 320px 侧栏的
   min-content 撑开，320px 视口实测溢出 19px）；侧栏日历赛道按钮改换行。 */
@media (max-width: 1180px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .latest .cal-tabs { flex-wrap: wrap; }
}

/* 列表分页器：页码多时不换行会撑破容器（资讯页 375px 实测溢出 38px） */
.pager { flex-wrap: wrap; }

/* 问答列表：grid 轨道必须写 minmax(0,1fr) —— 裸 1fr 的最小宽度是 min-content，
   会被 .tt 的 nowrap 长标题撑开（首页/联系页 320px 实测溢出 39px）。 */
.faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-list li .tt { min-width: 0; }

@media (max-width: 720px) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* 页脚社交二维码悬浮弹窗：原 left:0 使最右那张的弹窗越出页面右边界
     （320px 实测溢出 39px，全站 13 个页面都命中）。改为与触发块右对齐。 */
  .footer .sc-pop { left: auto; right: 0; transform: translate(0, 6px) scale(.96); }
  .footer .sc:hover .sc-pop, .footer .sc:focus-within .sc-pop { transform: translate(0, 0) scale(1); }
  .footer .sc-pop img { width: 130px; height: 130px; }
  .footer .social-row { flex-wrap: wrap; }
}

/* ---------- 25. 打印 ---------- */
@media print {
  .nav, .totop, .sample-note, .footer { display: none !important; }
}

/* ---------- 26. 首页「备考工具」6 卡列数兜底（必须放最后） ----------
   ⚠️ 本文件前面（第 19 节附近）与 main.css 都有一条
   `@media (max-width:1024px){ .sys-grid{ grid-template-columns:1fr } }`，
   同特异性下「后加载者胜」。6 张卡若在平板被压成单列会拉出一长条，
   所以这条覆盖必须写在 v3.css 的**最末尾**才生效（已实际踩过）。 */
@media (max-width: 1024px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sys-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 27. 考试日历 · 「更新跑马灯」（2026-10-10 新增） ----------
   ⚠️ 覆盖类规则，按本文件铁律一律放最末尾（同特异性下后加载者胜）。
   用途：把 crawl.py 自动抓取产生的 updates 流水滚动出来，让考生一眼看到「日历刚才更新了什么」。
   无缝滚动的实现关键：轨道内容必须整份复制两遍，配合 translateX(-50%) 才能首尾相接不跳。 */
.tk {
  position: relative; display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 9px 12px; overflow: hidden;
  background: linear-gradient(100deg, #0A2540, #0C447C 60%, #0A2540);
  border: 1px solid rgba(212, 168, 67, .28);
}
.tk-lb {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #F0D08C; letter-spacing: .02em; white-space: nowrap;
}
.tk-lb i {
  width: 7px; height: 7px; border-radius: 50%; background: #3FC58F;
  box-shadow: 0 0 0 3px rgba(63, 197, 143, .18); animation: tkPulse 2s infinite;
}
.tk-vp {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 26px), transparent);
}
.tk-track {
  display: inline-flex; gap: 34px; white-space: nowrap; will-change: transform;
  animation: tkRoll 46s linear infinite;
}
.tk:hover .tk-track { animation-play-state: paused; }
.tk-it { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(214, 232, 252, .88); }
.tk-it b { color: #F5D48A; font-weight: 600; }
.tk-it .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(212, 168, 67, .7); flex: 0 0 auto; }
.tk-it .when { color: rgba(181, 212, 244, .6); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tk-empty { font-size: 12.5px; color: rgba(181, 212, 244, .62); }
@keyframes tkRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ⚠️ 2026-10-13 非哥报「跑马灯不跑了」→ 根因就在下面这一行（现已删除）：
   原先这里是 `@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }`，
   只要系统/浏览器开了「减少动态效果」（Windows 辅助功能或 chrome://flags），整条跑马灯就被冻死。
   实测对照：reducedMotion=no-preference → 正常滚动；=reduce → animation:none、纹丝不动。
   本跑马灯是**信息型**动效（滚动的是「日历刚才更新了什么」），停住 = 内容看不全，
   所以这里**刻意不再跟随 reduced-motion**；页面其它装饰性动效仍保留各自的 reduced-motion 降级。
   ⚠️ 不要为了「规范」把它加回来 —— 加回来 = 非哥那里又不跑了。 */
@media (max-width: 720px) { .tk-track { animation-duration: 34s; } }
/* 首页日历栏很窄，字号再收一档 */
.latest .tk { padding: 8px 10px; }
.latest .tk-track { gap: 26px; }
.latest .tk-it { font-size: 12px; }
/* 浅色底版本（子页面正文区用） */
.tk.on-light { background: linear-gradient(100deg, #F2F8FE, #E6F1FB); border-color: rgba(26, 86, 219, .16); }
.tk.on-light .tk-lb { color: #0C447C; }
.tk.on-light .tk-it { color: #374151; }
.tk.on-light .tk-it b { color: #0C447C; }
.tk.on-light .tk-it .dot { background: rgba(12, 68, 124, .5); }
.tk.on-light .tk-it .when { color: #888780; }
.tk.on-light .tk-empty { color: #888780; }


/* ---------- 28. 备考工具卡 · 写实大图版（2026-10-10 非哥拍板改版） ----------
   ⚠️ 对应非哥要求：「一张卡一张图，图要写实 / 高端办公风，
      文字直接压在图上，图下面不要再有文字」。
   第 6 节的老注释记录了上一版为什么去掉大配图 ——「6 张卡配图风格不统一显得杂」；
   本次 6 张图由同一套提示词一次生成（assets/img/sys/sys-*.jpg），风格统一，该问题已解决。
   ⚠️ 覆盖类规则，按本文件铁律一律放本文件最末尾（同特异性下后加载者胜）。 */
.scard.scard-img {
  --ac: #D4A843; --ac-l: #F0D08C;
  padding: 0; display: block;
  aspect-ratio: 16 / 10;
  background: #0B1B2E;
  border-color: rgba(255, 255, 255, .14);
}
/* 关掉旧版的彩色顶条与右上角光晕（新版整卡即是一张图） */
.scard.scard-img::before,
.scard.scard-img::after { content: none; }
.sc-bg {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.scard.scard-img:hover .sc-bg { transform: scale(1.05); }
/* 底部渐变压暗：保证压在图上的白色文字在任何底图上都读得清 */
.sc-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 18, 32, 0) 32%, rgba(6, 18, 32, .58) 64%, rgba(6, 18, 32, .93) 100%);
  transition: background var(--t);
}
.scard.scard-img:hover .sc-veil {
  background: linear-gradient(180deg,
    rgba(6, 18, 32, 0) 22%, rgba(6, 18, 32, .64) 58%, rgba(6, 18, 32, .95) 100%);
}
/* 左上编号角标 */
.sc-no {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  color: #0A2540; background: rgba(212, 168, 67, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
/* 压在图片上的文字块（图下方不再有任何文字） */
.sc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px 14px; }
.scard.scard-img .sc-body h4 {
  margin: 0 0 6px; font-size: 15.5px; font-weight: 600; line-height: 1.42;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.scard.scard-img .sc-body .go {
  margin: 0; padding: 0; font-size: 12.5px; font-weight: 500;
  color: #F0D08C; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.scard.scard-img .sc-body .go svg { width: 13px; height: 13px; }
@media (max-width: 1024px) { .scard.scard-img .sc-body h4 { font-size: 15px; } }


/* ---------- 29. 备考工具子页面 · 3 列小卡（2026-10-10 改版） ----------
   ⚠️ 对应非哥要求：「子页面卡片也有点大，6 个系统可以两行显示」。
      由 2 列大卡（4 条要点 + 图 150px）改为 3 列小卡（2 条要点 + 图 112px）。
   ⚠️ 底色沿用本页既有的深色卡，**不要改成白卡** —— 本页主体是浅底，深色卡是对比设计。
   ⚠️ 覆盖类规则，放本文件最末尾（同特异性下后加载者胜）。
      另外 bank.html 页内 <style> 的 `.bank-card .btn{margin-top:22px}` 优先级更高，
      已同步改为 14px，否则小卡里按钮会离上文太远。 */
.bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bank-card { padding: 14px 14px 16px; border-radius: var(--r-lg); }
.bank-card .shot { height: 112px; margin-bottom: 13px; border-radius: 10px; }
.bank-card h3 { font-size: 15.5px; margin-bottom: 7px; line-height: 1.45; }
.bank-card p { font-size: 12.5px; margin-bottom: 12px; line-height: 1.68; }
.bank-card .feats li { font-size: 12.5px; line-height: 1.85; }
.bank-card .btn { margin-top: 14px; }
/* 「为什么用智能系统备考」通栏卡：跨整行 + 4 条要点两列排，避免第 3 行落单一张显得空 */
.bank-card.alt { grid-column: 1 / -1; }
.bank-card.alt .bc-ico { margin-bottom: 14px; }
.bank-card.alt h3 { font-size: 18px; }
.bank-card.alt .feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
@media (max-width: 1024px) { .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bank-grid { grid-template-columns: minmax(0, 1fr); }
  .bank-card.alt .feats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 30. 首页「招考资讯 · 考试日历」两列下沿对齐（2026-10-10 非哥反馈「又超出来了」） ----------
   实测根因（1440 / 1360 / 1280 / 1200 四档完全一致，错位量恒为 +37px）：
     `.news-grid{align-items:stretch}` 会把 `.latest` 拉到行高；而**行高是由 `.home-cal` 的无上限内容
     决定的**（第 8 节把 `.home-cal` 的 max-height 改成了 none）。日历条目撑出的卡高比左列 6 张资讯卡
     的**实际内容**高 37px → `.latest` 下沿比左列最后一张卡低 37px，看着就像「深色卡凸出来了」。
   ⚠️ 只比对容器高度**永远查不出这个问题**：`.latest` 与 `.news-cards` 容器高度其实都是 747px 完全相同，
     错位在「左列最后一张 `.ncard` 的下沿」。复算脚本见 `_shots/cal_overflow_probe.js`（看 gapLatestVsLastNcard）。
   修法：
     ① 恢复 `.home-cal` 高度上限 → 日历条目再多也是**卡内滚动**，不再无限撑高行高；
     ② `.news-cards` 改 align-content: stretch（覆盖 main.css 的 start）→ 左列填满行高，双保险；
     ③ 底部「查看完整日历」用 auto margin 钉在卡片底边，余量留在列表与链接之间。
   ⚠️ 覆盖类规则，按本文件铁律一律放本文件最末尾（同特异性下后加载者胜）。

   🔴 2026-10-12 §32 之后：上限由 460 → **445**，原因见下（这不是随手调的，有实测依据）：
     §32 给这块卡加了「年度徽标 + 上一场考试折叠块」，折叠态实高 **52.14px**。
     实测 `.latest` 卡内余量只有 **+2px**（卡 710 / 内容 708）—— 右边一长，整行立刻被顶高。
     用 `_shots/_hc_knob.js` 扫了 max-height 对行高的影响（1440px）：
       460 → 行高 718.89、两列下沿差 **4.45px**（破） ｜ 452 → 710.89、差 0.45px（还差一口）
       451 → 710、差 0（临界）                        ｜ 445 → 710、差 0（✔ 取它，留 6px 余量）
     即阈值 = 451.11px = 左列行高 710 − 其余内容 258.89。取 445 而非 451，是给字体渲染差异留安全垫。
     ⚠️ 内容只有 6 条节点（≈372px）时 max-height 根本不吃紧，所以 460→445 **对日历列表本身零视觉影响**，
        变化只体现在「列表与『查看完整日历』之间的余量」。
     🧪 回归断言已进 `_shots/_home_cal_probe.js`（断言「两列下沿差 ≤1px」）—— 以后谁再往这块卡里加东西，
        它会把这次的坑当场抓出来。 */
.home-cal { max-height: 445px; }
.news-cards { align-content: stretch; }
.latest .more { margin-top: auto; }

/* ≤1180px 已是单列堆叠，「两列下沿对齐」不成立，沿用窄屏既有高度（必须在此重声明：
   上面那条非媒体规则会压过第 23 节媒体查询里的 420px） */
@media (max-width: 1180px) {
  .home-cal { max-height: 420px; }
}

/* ===========================================================
   §31 · 2027 国考职位表「状态标签」（跨页共享组件）· 2026-10-12
   -----------------------------------------------------------
   出现位置共 4 处、跨 3 个文件：
     · index.html  首页「国省考报考选岗系统」卡（.sc-flag）
     · bank.html   题库页同系统卡
     · xuangang.html 选岗页「入口卡」与「选考试卡」（2 处）
   原来这 4 处各写一份内联 style，尺寸/颜色都不一致（#C53030 vs #D92D20、
   11px vs 11.5px）。这个标签是全站同一条状态信息，必须长一个样 → 收拢到这里。
   **2026-10-12 二次改版**：实心红 → 暖金（含深底变体）；脉冲扩散环 → 玻璃光划过。

   ⚠️ **文案不在本文件**。文案唯一真相源 = data/site.json 的 `gk2027_tag`，
      由各页脚本注入到 [data-site="gk2027_tag"] / [data-gk-tag] 元素上。
      改状态（如 10-14 改成「已更新」）只改那个 json，不用碰本文件或任何页面。

   ⚠️ 选岗页 xuangang.html 的**页内 `<style>`**（特异性 0,2,0 > 本文件 0,1,0）
      里**只允许写「定位」**（`.xg-lane .gk-flag` 紧跟考试名 / `.xg-syscard .gk-flag`
      贴头部右端），**外观一律回到本文件**。
      2026-10-12 之前两边各写一份完整外观，改一次要同步两处、极易走样 —— 已收拢。
   ⚠️ 底色分两类，样式也因此分两套：
      · **浅底**：选岗页入口卡 / 考试卡（白卡）→ 基座 `.gk-flag`
      · **深底**：首页系统卡（写实图 + 近黑遮罩）/ 题库页 .bank-card（#062A4E→#041B33）
        → 变体 `.sc-body .gk-flag` / `.bank-card .gk-flag`
      新增使用位置前，先判断它压在什么底色上，别拿浅底样式往深底上贴。

   ⚠️ 字体用 MiSans（小米黑体）的**子集**，不是完整字体：
      完整字重 7.8MB，本站出口带宽硬上限只有 3.4Mbps，直传会把首屏拖垮。
      子集 14.1KB，只含「考试名 + 标签文案」用到的 153 个字。
      🔴 改了标签文案、且新文案里有子集没有的字 → 必须重跑
         `python site/_tools/make_misans_subset.py`
         否则新字渲染成 □ 豆腐块。
      🔴 重跑字体后**必须同时改这里字体 URL 的 `?v=`，并把各页
         <link href="assets/css/v3.css?v=…"> 一起 bump**。
         原因：字体文件名固定，而 `woff2` 命中 nginx 的 `expires 7d` 强缓存；
         只换文件、不改任何 URL 的话，老访客 7 天内仍读旧子集 → 新字照样是 □。
   =========================================================== */
@font-face{
  font-family:"MiSans";
  /* 2026-10-13：2027 国考公告发布 → 标签改为「…公告已发布 · 职位表待更新」，
     子集补入「告 / 待」二字 → 字体字节变了 → URL 带版本号，配合各页 v3.css?v= 一起破缓存。 */
  src:url("../fonts/misans-semibold.subset.woff2?v=20261013c") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;   /* 字体没到之前先用回退字渲染，绝不让文字「隐形」 */
}
/* 【基座 = 浅底场景】选岗页入口卡 / 考试卡、以及所有浅色卡片上。
   材质 = 暖金纸：浅金渐变底 + 淡金描边 + 深金棕字 + 左侧一枚小金点。

   🔴 为什么是金色、不是红色（非哥 2026-10-12 指出「太扎眼」后重做）：
      本站的「标记色」语言本来就是**金色** —— 首页序号徽标 .sc-no 是金底、
      栏目条 ::before 是金条、.contact .dot 金点、.latest h4::before 金条……
      十余处全是金色。红色在这套体系里是外来户，实心红底 + 红光晕 +
      扩散环三件事叠在一起，视觉重量直接盖过了它旁边的「国考」二字。
      改用金色 = 与全站同族 → 既降噪、又不丢辨识度。 */
.gk-flag{
  position:relative; display:inline-flex; align-items:center; gap:6px; width:max-content;
  flex:0 0 auto;                       /* 在 .nm 等 flex 行里不被压缩 */
  /* ⚠️ 回退栈必须**写全**，不能写 `font-family:"MiSans", inherit` ——
     `inherit` 关键字只能作为整个属性值，混在字体列表里会让**整条声明作废**
     （已实测：字号/颜色都生效、只有字体静默退回继承值，很难发现）。
     回退栈与 main.css 的 body 保持一致，字体没加载时观感不跳。 */
  font-family:"MiSans", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.3px; line-height:1.6;
  padding:5px 13px 5px 12px; border-radius:999px; white-space:nowrap;
  overflow:hidden;                     /* 必须：裁掉划过的高光带，否则它溢出胶囊外 */
  isolation:isolate;                   /* 让 ::after 的 z-index:-1 只在本标签内生效 */
  background:linear-gradient(135deg, #F8EBCB 0%, #EEDCA8 100%);
  border:1px solid #E8D2A0;
  color:#7C5810;
  box-shadow:0 1px 2px rgba(124,88,16,.07);
}
/* 左侧小金点 —— 标签的「活气」来源，颜色与站内金点同源 */
.gk-flag::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg, #E0B44E, #BE9028);
}

/* 【深底变体】首页六大系统卡（压在写实图上）+ 题库页深色卡。
   ⚠️ 这两处底色是**近黑的藏青**（首页 .sc-veil 收到 rgba(6,18,32,.93)，
      题库 .bank-card 是 #062A4E→#041B33）—— 浅金纸底压上去会像贴了张白纸条，
      和底色割裂。所以改成「半透明金 + 玻璃虚化」：既融进底色，又保留金色血统。 */
.sc-body .gk-flag,
.bank-card .gk-flag{
  background:linear-gradient(135deg, rgba(236,201,124,.30), rgba(212,168,67,.14));
  border-color:rgba(236,206,136,.60);
  color:#FBF0D4;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.60),
             inset 0 1px 0 rgba(255,255,255,.16);   /* 顶边内高光 → 玻璃厚度感 */
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.sc-body .gk-flag::before,
.bank-card .gk-flag::before{ background:linear-gradient(135deg, #F2D48A, #CE9F33); }

/* 首页卡片里标签下面还要留一行间距（原来是内联的 margin-bottom:7px）。
   ⚠️ 必须配 display:flex —— .gk-flag 是 inline-flex，**行内级元素的垂直 margin 不生效**，
      只写 margin-bottom 的话「立即进入」会紧贴在标签右侧同一行上（实测如此）。 */
.sc-flag.gk-flag{ display:flex; margin:0 0 7px; }

/* ---------------------------------------------------------------
   动效：「玻璃光」斜向划过。
   （非哥 2026-10-12 否掉了原来的脉冲扩散环 —— 缩放外扩太闹；改为一道柔光掠过。）

   ⚠️ 只动 transform（走合成层），**不碰 box-shadow / width / filter** ——
      后三者每一帧都要重绘整个标签，移动端掉帧。
   ⚠️ 周期 5.6s 里 **58% 的时间光带停在标签外**，是「偶尔掠过一次」，
      不是持续闪烁，不会抢走主 CTA 的注意力。
   ⚠️ skewX 让光带是斜的（像真玻璃反光）；top/bottom 各 -40% 保证斜边够高。 */
.gk-flag::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:0; width:42%;
  /* 🔑 z-index:-1 把光带压到**文字下方**（配合父级 isolation:isolate 限定作用域）。
     为什么这么做：第一版让光带盖在文字上，结果扫过时把字洗白、看着发虚；
     一旦为保可读性把峰值调低，光带又弱到看不见 —— 两头堵。
     放到文字下方后，它只给「标签底色」加一道反光，字永远清晰，
     于是可以放心用高亮峰值（.90）。观感 = 标签表面有层玻璃斜着反光。 */
  z-index:-1;
  background:linear-gradient(100deg,
    rgba(255,255,255,0)   0%,  rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.72) 47%, rgba(255,255,255,.90) 50%,
    rgba(255,255,255,.72) 53%, rgba(255,255,255,.18) 70%,
    rgba(255,255,255,0)  100%);
  transform:translateX(-160%) skewX(-16deg);
  animation:gkFlagSheen 5.6s cubic-bezier(.45,0,.25,1) infinite;
  pointer-events:none;
}
@keyframes gkFlagSheen{
  0%, 58%  { transform:translateX(-160%) skewX(-16deg); }
  84%, 100%{ transform:translateX(340%) skewX(-16deg); }
}
/* ♿ 无障碍硬要求（不是可选项）：系统开了「减少动态效果」就停止动效。
   前庭功能敏感人群会因持续的位移动效产生眩晕不适。 */
@media (prefers-reduced-motion: reduce){
  .gk-flag::after{ animation:none; opacity:0; }
}

/* ==========================================================================
   扫码咨询弹层（2026-10-12）
   非哥指令：导航「立即咨询」与全站其它咨询入口不再跳「联系我们」页，
             改为**点击就地弹出二维码**；底部两个二维码合并成一个。
   定位不用 CSS，由 assets/js/layout.js 的 qrpOpen() 按触发元素算（fixed 跟随按钮）。
   ========================================================================== */
.qrp{
  position:fixed; z-index:1200; width:232px; padding:16px 16px 14px;
  background:#fff; border:1px solid var(--edge); border-radius:18px;
  box-shadow:0 24px 56px -20px rgba(4,33,62,.48), 0 2px 8px -4px rgba(4,33,62,.18);
  text-align:center;
  opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.34,1.4,.5,1);
}
.qrp.on{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.qrp[hidden]{ display:none; }
.qrp-img{ display:block; width:178px; height:178px; margin:0 auto; object-fit:contain; }
.qrp-t{ margin-top:11px; font-size:14px; font-weight:600; color:var(--navy-800); letter-spacing:.2px; }
.qrp-s{ margin-top:4px; font-size:11.8px; color:var(--gray-500); line-height:1.65; }
.qrp-arw{
  position:absolute; top:-7px; left:50%; width:14px; height:14px; background:#fff;
  transform:rotate(45deg); border-left:1px solid var(--edge); border-top:1px solid var(--edge);
}
.qrp.below .qrp-arw{
  top:auto; bottom:-7px; border:none;
  border-right:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
@media (max-width:640px){
  .qrp{ width:238px; }
  .qrp-img{ width:182px; height:182px; }
  .qrp-arw{ display:none; }   /* 窄屏是固定居中弹出，没有可指向的锚点 */
}
@media (prefers-reduced-motion: reduce){
  .qrp{ transition:none; }
}

/* ===========================================================
   §32 · 首页「考试日历」深底卡：年度徽标 + 上一场考试折叠（2026-10-12 · 同步需求②）
   -----------------------------------------------------------
   需求②原本只在 calendar.html / calendar-lane.html 落地（那两页是**浅底白卡**配色）。
   首页这块是**深底渐变卡**（§29 `.latest` = linear-gradient(170deg,#08264A,#04213E)），
   直接套浅底那套（#FDF3DD 底 / #7A4B00 字）会糊成一片 → 这里做深底变体。
   数据口径与 calendar.html **完全一致**（同一份 data/calendar.json，同一套前端推导）：
     · 徽标 = 年度（该赛道最后一个节点的年份）+ 状态（节点日期 × 今天 → 未开始/进行中/已结束）
     · 上一场 = cycles[lane].prev（label / headline / extra / note / nodes[] / src / cred）
   🔑 状态与年度**都不写死** —— 纯靠「节点日期 × 今天」推导，时间一过自动变，永不失真。

   ⚠️ 高度预算（看完再改）：`.latest` 的卡高由**左列 6 张资讯卡撑出的行高**决定，
      改造前实测卡内余量只有 **+2px**（卡 710 / 内容 708）。
      所以新增的「徽标 + 折叠块」必须从 `.home-cal` 的 max-height 里**等量扣回来**，
      否则整行被顶高 → §30 的「两列下沿对齐」当场被打歪。扣减量见 §30 那条的实测注释。
   ⚠️ 徽标是挂在 `.latest h4`（flex 行）里的 span：**不要给它加初始 class**
      （空徽标一旦带上 `.cal-badge` 就会渲染成一枚空心药丸）。脚本只在该显示时才挂 class。 */
.latest .cal-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; line-height:1; padding:4px 10px;
  border-radius:var(--r-pill); border:1px solid; white-space:nowrap;
}
.latest .cal-badge i{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
.latest .cal-badge.is-pre { color:#F5C86B; background:rgba(212,168,67,.16); border-color:rgba(212,168,67,.42); }
.latest .cal-badge.is-run { color:#6FE3BE; background:rgba(22,160,133,.20); border-color:rgba(111,205,180,.44); }
.latest .cal-badge.is-done{ color:rgba(226,236,250,.72); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }

/* 上一场考试：默认折叠，点开看完整时间线（深底弱化块） */
.latest .cal-prev{
  margin-top:12px; border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md,10px); background:rgba(255,255,255,.05); overflow:hidden;
}
.latest .cal-prev > summary{
  list-style:none; cursor:pointer; padding:8px 12px;
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:rgba(226,236,250,.82);
}
.latest .cal-prev > summary::-webkit-details-marker{ display:none; }
.latest .cal-prev > summary:hover{ background:rgba(255,255,255,.07); }
.latest .cal-prev > summary .pv-lb{
  font-size:11px; color:rgba(226,236,250,.72); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); padding:1px 8px;
}
.latest .cal-prev > summary b{ color:#F5C86B; font-weight:600; }
.latest .cal-prev > summary .pv-arrow{ margin-left:auto; color:rgba(226,236,250,.6); transition:transform var(--t,.25s); }
.latest .cal-prev[open] > summary .pv-arrow{ transform:rotate(180deg); }
.latest .cal-prev .pv-body{ padding:2px 12px 12px; }
.latest .cal-prev .pv-note{ font-size:12px; color:rgba(181,212,244,.7); line-height:1.75; margin:0 0 10px; }
.latest .cal-prev .pv-rows{
  background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md,10px); padding:8px 12px 0;
  max-height:240px; overflow-y:auto;   /* 展开不无限撑高卡片（否则整行被顶高） */
}
.latest .cal-prev .pv-rows::-webkit-scrollbar{ width:5px; }
.latest .cal-prev .pv-rows::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:3px; }
.latest .cal-prev .pv-rows .tl-item{ opacity:.85; }
/* 已结束节点整体弱化（与 calendar.html 的 .tl-item.done 同语义，这里是深底版） */
.latest .cal-prev .tl-item.done::before{ background:#0B2947; border-color:rgba(255,255,255,.22); }
.latest .cal-prev .tl-item.done .d{ color:rgba(226,236,250,.5); }
.latest .cal-prev .tl-item.done .n{ color:rgba(226,236,250,.72); }
.latest .cal-prev .tl-item.done .t{ color:rgba(181,212,244,.5); }
.latest .cal-prev .tl-item.done .st{ background:rgba(255,255,255,.08); color:rgba(226,236,250,.6); border-color:rgba(255,255,255,.14); }
.latest .cal-prev .pv-src{ font-size:11.5px; color:rgba(181,212,244,.55); margin-top:8px; }


/* ===========================================================
   §33 · 校区卡片（2026-10-13 非哥要求整块重做：简约、高级）
   ---------------------------------------------------------------
   非哥原话：「这些卡片做的都不行……做的简约高级一些，里面不要有太多的
   没用的东西，就写校区名字和地点即可。字体可以用小米黑体……写上业务范围、
   地址电话、老师、二维码。二维码也是鼠标移上去或者点击弹出对应的二维码。
   点击进入有下级教学点的页面，各校区的卡片也要保持一样大小和设计。」

   设计口径（新前缀 .cc- ，与旧 .camp-* 彻底切割，旧样式已删）：
     ① 一张卡 = 白底 + 1px 浅边框 + 18px 圆角；**无顶部色条、无配图、无角标**；
     ② 信息只分三层：校区名（主，MiSans）→ 地址/教学点数（次）→ 元信息（业务范围、老师电话）；
     ③ 二维码**不占版面** —— 收进左下角一枚轻按钮，点开弹该校区**专属**码
        （由 layout.js 的 QRP 读取触发元素上的 data-qr-img）；
     ④ 整卡都是 <a> → campus-detail.html（警校驻点看详情 / 市级看教学点清单），
        所以二维码触发元素必须是 <span>（<button> 嵌在 <a> 里不合法）。
   ⚠️ 高度统一：grid 同行天然等高；跨行靠「校名 2 行截断 + 地址 2 行截断 + 元信息单行省略
      + 底栏 margin-top:auto 钉底」四条一起兜住（非哥要的「一样大小」）。
   ============================================================ */
/* 校区页专用 MiSans 子集（757 字 / 80.3 KB / 786 字形）。
   与 xuangang 那份（88 字 / 7.4 KB）**刻意分开**：那份只够考名+标签，硬要覆盖
   校区名会把首屏字集撑到 100KB+；分开后各页只下载自己需要的。
   生成：`python site/_tools/make_misans_campus_subset.py`（自动从数据+页面提取字符） */
@font-face{
  font-family:"MiSansCampus";
  src:url("../fonts/misans-campus.subset.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

.cc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }

.cc-card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  padding:22px 22px 18px; background:#fff;
  border:1px solid #E8ECF2; border-radius:18px;
  text-decoration:none; color:inherit;
  transition:border-color .3s cubic-bezier(.22,.7,.3,1),
             box-shadow .3s cubic-bezier(.22,.7,.3,1),
             transform .3s cubic-bezier(.22,.7,.3,1);
}
.cc-card:hover{ transform:translateY(-2px); border-color:#D3DDEA;
  box-shadow:0 14px 34px -20px rgba(10,37,64,.30); }
.cc-card:focus-visible{ outline:2px solid var(--navy-500); outline-offset:2px; }

/* 顶行：类别标签 + 城市 */
.cc-top{ display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.cc-tag{ font-size:11px; font-weight:600; letter-spacing:.3px; padding:3px 9px;
  border-radius:7px; white-space:nowrap; }
.cc-tag.lk{ color:#8A5A10; background:#FBF3E2; }
.cc-tag.ct{ color:#175E97; background:#EAF2FB; }
.cc-loc{ margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  font-size:12px; color:#93A0AF; white-space:nowrap; }
.cc-loc svg{ width:12px; height:12px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }

/* 校区名（主）。字体 = 小米黑体（非哥 2026-10-13：「字体可以用小米黑体」），
   回退链末端兜系统黑体；MiSansCampus 没到时先按回退字渲染，不会隐形。 */
.cc-name{
  font-family:"MiSansCampus","MiSans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:600; font-size:18px; line-height:1.42; letter-spacing:-.2px;
  color:#0A2540; margin:0 0 9px; min-height:2.84em;   /* = 2 行 × 1.42 → 短校名也占满两行，跨省分组也等高 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 地址 / 教学点数（次） */
.cc-addr{ display:flex; gap:6px; font-size:12.8px; line-height:1.62; color:#6D7B8C;
  margin:0 0 16px; min-height:3.24em; }   /* = 2 行 × 1.62，同上，保证「含 N 个教学点」这类单行文案也占两行位 */
.cc-addr svg{ width:13px; height:13px; flex:0 0 auto; margin-top:3px;
  fill:none; stroke:#A8B4C1; stroke-width:2; }
.cc-addr span{ min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 元信息（业务范围 / 老师电话）
   🔴 grid-template-columns:minmax(0,1fr) 不能省 —— 默认 auto 列会按**max-content**撑开，
      而 .cc-row 是 flex + 子项 nowrap，于是「覆盖教学点 张家口（桥西区）、怀来县…」这类
      长文案会把整列顶到 600px+，横向溢出卡片（2026-10-13 实测 campuses.html 溢出 192px）。 */
.cc-meta{ display:grid; grid-template-columns:minmax(0,1fr); gap:7px;
  padding-top:15px; border-top:1px solid #EEF2F7; margin-bottom:16px; }
.cc-row{ display:flex; gap:8px; font-size:12.6px; line-height:1.6; color:#5C6B7D; }
.cc-row .k{ flex:0 0 auto; color:#9AA7B6; }
.cc-row .v{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 底栏：扫码咨询（弹码） + 进入下级页。
   margin-top:auto = 把底栏钉在卡片底边 —— 卡片被 grid 拉高时，多出来的空间全部
   落在元信息与底栏之间，底栏始终贴底（这是「各卡等高且底栏齐平」的关键一条）。 */
.cc-foot{ margin-top:auto; display:flex; align-items:center; gap:10px;
  padding-top:14px; border-top:1px solid #EEF2F7; }
.cc-qr{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12.6px; font-weight:600; color:#175E97; white-space:nowrap;
  padding:7px 13px; border-radius:9px; background:#F2F7FC; border:1px solid #E2EDF8;
  transition:background .22s, border-color .22s; }
.cc-qr:hover{ background:#E8F1FA; border-color:#CFE2F4; }
.cc-qr svg{ width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; }
.cc-go{ margin-left:auto; display:inline-flex; align-items:center; gap:3px;
  font-size:12.8px; font-weight:600; color:#8A5A10; white-space:nowrap; }
.cc-go::after{ content:'›'; font-size:15px; line-height:1; }
.cc-card:hover .cc-go{ color:#B8801A; }

@media (max-width:1024px){ .cc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
@media (max-width:720px){
  .cc-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .cc-card{ padding:18px 18px 15px; }
}

/* ============================================================
   §34 考试日历 · 「待更新」节点状态（2026-10-13 加）
   为什么：calendar.json 的 events[].status 是**静态预测值**。预计日期已过、官方又还没发公告时，
          原先直接照显「预计」→ 页面上出现「2026-10-01 浙江公告发布 · 预计」这种自相矛盾的展示。
          现在前端按「日期 × 今天」派生：已发布照显；预计且日期已过 → 「待更新」。
   配色：中性灰，与「预计」（金色）明确区分，一眼看出这条是"过期待刷新"而不是"未来安排"。
   ============================================================ */
.tl-item .st.is-stale{ background:#F1F4F8; color:#6B7A8D; border:1px solid #E1E7EF; }


/* ============================================================
   §35 备考工具卡 · 方案A（2026-10-13 非哥拍板采用）
   方案来源：卡片改版 v3 预览页的「方案 A · 玻璃深卡」。
   卡面 = 半透明白 10% → 4.2% 叠在深底上 —— 只把背景提亮一档，**绝不用纯白**
          （纯白压在深蓝上是「贴上去」的，很刺眼）；配 1px 浅描边 + 顶部内高光，
          悬停整体提亮并上浮 4px。
   结构 = 彩色圆角图标徽章 + 右上角编号 + 标题 + 说明 + 渐变分隔线 + 文字动作。
   两处落地：
     · 首页 .sys-sec 是深底 → 用 .gk-card（玻璃深卡，一行一卡上图下的深色章节）
     · 题库页是白底      → 用 .gk-card.lite（同结构浅色版：白面 + 浅描边 + 顶部内高光）
   ⚠️ 类名一律 gk- 前缀。本文件历史上踩过「短类名跨区块撞车」（.sc 把数字包成白块看不见）。
   ⚠️ 覆盖类规则，按本文件铁律放在末尾。
   ============================================================ */

/* ---------- 卡体 ---------- */
.gk-card{
  position: relative; display: flex; flex-direction: column; min-height: 196px;
  padding: 19px 19px 17px; border-radius: 18px;
  background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.042));
  border: 1px solid rgba(255,255,255,.105);
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  color: #EAF2FB; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .26s cubic-bezier(.2,.8,.3,1), background .26s, border-color .26s, box-shadow .26s;
}
a.gk-card{ display: flex; }                        /* 整卡可点（首页） */
.gk-card:hover{
  transform: translateY(-4px);
  background: linear-gradient(158deg, rgba(255,255,255,.145), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 30px 56px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.gk-card:hover .gk-arw{ transform: translateX(4px); }

/* ---------- 浅色版（白底页面：题库页） ---------- */
.gk-card.lite{
  background: linear-gradient(158deg, #FFFFFF, #F4F8FC);
  border-color: rgba(9,39,68,.10);
  box-shadow: 0 18px 38px -26px rgba(9,39,68,.30), inset 0 1px 0 #fff;
  color: #0C2B4A;
}
.gk-card.lite:hover{
  background: linear-gradient(158deg, #FFFFFF, #EDF4FA);
  border-color: rgba(9,39,68,.18);
  box-shadow: 0 26px 50px -28px rgba(9,39,68,.36), inset 0 1px 0 #fff;
}

/* ---------- 顶部：彩色圆角图标 + 右上角编号 ---------- */
.gk-top{ display: flex; align-items: flex-start; gap: 12px; }
.gk-ib{ width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.gk-ib svg{ width: 22px; height: 22px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gk-no{ margin-left: auto; margin-top: 5px; font-size: 12px; font-weight: 900; letter-spacing: .6px;
  color: rgba(201,168,92,.62); font-variant-numeric: tabular-nums; }
.gk-card.lite .gk-no{ color: rgba(176,138,52,.72); }

/* ---------- 中部：标题 + 说明 ---------- */
.gk-mid{ flex: 1; margin-top: 15px; }
.gk-ct{ font-size: 16.5px; font-weight: 700; line-height: 1.34; letter-spacing: .2px;
  color: #EAF2FB; margin: 0; }
.gk-card.lite .gk-ct{ color: #0C2B4A; }
.gk-cd{ font-size: 12.5px; line-height: 1.55; color: #7E93AD; margin-top: 7px; }
.gk-card.lite .gk-cd{ color: #5D7391; }
/* 状态标签（05 卡）：沿用 §31 的 .gk-flag，这里只补一下与标题的间距 */
.gk-mid .gk-flag{ margin-top: 10px; }

/* ---------- 要点列表（题库页保留原有内容） ---------- */
.gk-card .feats{ margin-top: 11px; display: flex; flex-direction: column; gap: 1px; }
.gk-card .feats li{ font-size: 12.5px; line-height: 1.85; display: flex; gap: 8px; color: #7E93AD; }
.gk-card .feats li::before{ content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #C6A14E; margin-top: 8px; flex: none; }
.gk-card.lite .feats li{ color: #5D7391; }

/* ---------- 渐变分隔线（左实右虚，比整条实线轻） ---------- */
.gk-dv{ height: 1px; margin: 15px 0 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0)); }
.gk-card.lite .gk-dv{ background: linear-gradient(90deg, rgba(9,39,68,.10), rgba(9,39,68,0)); }

/* ---------- 动作（文字 + 箭头，不是按钮） ---------- */
.gk-act{ display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12.5px; font-weight: 500; color: #8FC4F0; text-decoration: none; }
.gk-card.lite .gk-act{ color: #2F6FA8; }
a.gk-card:hover .gk-act, .gk-card:hover .gk-act{ color: #BFE0FF; }
.gk-card.lite:hover .gk-act{ color: #1F5C93; }
.gk-arw{ width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .26s cubic-bezier(.2,.8,.3,1); }

/* ---------- 状态标签在同一张玻璃卡里的深底变体 ----------
   ⚠️ §31 的深底变体选择器是 `.sc-body .gk-flag, .bank-card .gk-flag`，
      换成 .gk-card 后那两条都命不中了 → 这里补上，否则浅金纸底压在深玻璃上
      会像贴了张白纸条。浅色卡（.lite）用 §31 默认的浅金变体即可。 */
.gk-card:not(.lite) .gk-flag{
  background: linear-gradient(135deg, rgba(236,201,124,.30), rgba(212,168,67,.14));
  border-color: rgba(236,206,136,.60);
  color: #FBF0D4;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.gk-card:not(.lite) .gk-flag::before{ background: linear-gradient(135deg, #F2D48A, #CE9F33); }

/* ---------- 题库页「为什么用智能系统备考」通栏卡 ---------- */
.gk-card.alt{ grid-column: 1 / -1; }
.gk-card.alt .feats{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 28px; }

@media (max-width: 640px){
  .gk-card.alt .feats{ grid-template-columns: minmax(0,1fr); }
}

/* ==========================================================================
   §36 · 导航角标「2027 国考报考选岗」· 2026-10-13
   非哥：导航「选岗」上加一个角标提示「2027 国考报考选岗」，加一点动效。

   【为什么角标只写「2027国考」而不写全称】
   导航项「选岗」净宽只有约 60px。角标是绝对定位、允许溢出项外的 ——
   实测写满「2027国考报考选岗」8 字（9.5px 字号）= 约 96px 宽，向右会压住
   紧邻的「题库」。所以：角标 = 短标签「2027国考」，完整说法走悬浮气泡 .nav-tip。

   【三条站内既有约束（不遵守就出事）】
   ① 类名一律 `nav-` 前缀 —— v3.css 历史上被两个人改过，短类名跨区块撞过车
      （`.sc` 曾把数字包成白块）。导航区已经有 .nav / .nav-toggle，沿用同族。
   ② 本站的「标记色」语言是**金色**（非哥 2026-10-12 明确否过红色：太扎眼）。
      所以角标 = 金色胶囊 + 左侧小金点，与 §31 的 .gk-flag 同族。
   ③ 只动 transform / opacity（走合成层）。不碰 box-shadow / filter / width ——
      后三者每帧重绘，移动端掉帧。
   ========================================================================== */

/* 承载角标的导航项：角标要能溢出到项外，且 hover 底色不裁它 */
.nav .menu a.has-badge{ overflow: visible; }

/* 角标本体 —— 与 .gk-flag 同族、但小一号：它在导航里，
   视觉重量不能盖过导航文字本身。 */
.nav-badge{
  position: absolute; top: -7px; right: -3px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px 3px 6px; border-radius: 999px; white-space: nowrap;
  font-size: 9.5px; font-weight: 600; letter-spacing: .25px; line-height: 1;
  color: #5A3D06;
  background: linear-gradient(135deg, #FDF1CB 0%, #F5DE9E 46%, #E3B94C 100%);
  box-shadow: 0 3px 9px -3px rgba(150,105,20,.55),
              inset 0 0 0 1px rgba(255,255,255,.55),
              inset 0 1px 0 rgba(255,255,255,.85);
  isolation: isolate;          /* 让 ::after 的 z-index:-1 只在本标签内生效 */
  overflow: hidden;            /* 必须：裁掉划过的高光带，否则它溢出胶囊外 */
  pointer-events: none;        /* 角标不吃点击，点击要落到整个导航项上 */
  transform-origin: 50% 100%;
  animation: navBadgeFloat 3.4s ease-in-out infinite;
}
/* 左侧小金点 —— 与 .gk-flag::before 同款，让「这是同类标签」一眼成立 */
.nav-badge::before{
  content: ""; flex: 0 0 auto; width: 4.5px; height: 4.5px; border-radius: 50%;
  background: linear-gradient(135deg, #E0B44E, #BE9028);
  box-shadow: 0 0 0 1.5px rgba(224,180,78,.30);
}
/* 玻璃光：斜向掠过（沿用 §31 的手法 —— 光带压在文字下方，字永远清晰） */
.nav-badge::after{
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 46%;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(255,255,255,0)   0%, rgba(255,255,255,.34) 32%,
    rgba(255,255,255,.92) 50%, rgba(255,255,255,.34) 68%,
    rgba(255,255,255,0)  100%);
  transform: translateX(-170%) skewX(-16deg);
  animation: navBadgeSheen 4.6s cubic-bezier(.45,0,.25,1) infinite;
}
/* 光带在 62% 之前一直停在标签外 → 是「偶尔掠过一次」，不是持续闪烁。
   比 §31 的 5.6s 稍快一点：导航体量小，慢周期会让动效几乎看不见。 */
@keyframes navBadgeSheen{
  0%, 62%  { transform: translateX(-170%) skewX(-16deg); }
  88%, 100%{ transform: translateX(330%)  skewX(-16deg); }
}
/* 呼吸浮动：幅度只有 1.5px —— 它的作用不是「让人盯着看」，
   而是让角标在静止的导航条里显得「活着」。 */
@keyframes navBadgeFloat{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-1.5px); }
}

/* 悬停导航项：角标加一圈金色光晕。
   ⚠️ **不能用 transform 放大** —— .nav-badge 上跑着 navBadgeFloat 动画，
      动画运行期间动画里的 transform 优先级高于普通声明，写了也不生效
      （要生效就得 animation:none，那又会从动画中间态瞬跳一下）。
      改用外圈光晕，零冲突、也更好看（像被点亮）。 */
.nav .menu a.has-badge:hover .nav-badge{
  box-shadow: 0 5px 15px -3px rgba(150,105,20,.62),
              inset 0 0 0 1px rgba(255,255,255,.62),
              inset 0 1px 0 rgba(255,255,255,.9),
              0 0 0 3.5px rgba(232,190,84,.22);
}

/* ---------- 悬浮气泡：承载完整文案「2027 国考报考选岗」 ----------
   ⚠️ 垂直位置是算好的，别随手改：
      a 底边在 nav 内约 58.4px，nav 底边 73px（= a.bottom + 14.6）。
      取 `calc(100% + 18px)` → 气泡顶 ≈ 76.4px，指向上的三角（top:-4.5px）
      顶点 ≈ 71.9px，正好抵住导航下沿 —— 气泡整体落在导航外、三角搭在边框上，
      是「从导航里长出来」的样子。第一版用 +7px，气泡有 7.6px 压在导航底边上，
      把小三角顶进了导航条内部（实测 tip.top=65.4 vs nav.bottom=73）。 */
.nav-tip{
  position: absolute; top: calc(100% + 18px); left: 50%; z-index: 4;
  transform: translate(-50%, -6px);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 13px 9px; border-radius: 11px; width: max-content;
  font-size: 12px; font-weight: 600; letter-spacing: .3px; line-height: 1.5;
  white-space: nowrap; color: #FBF0D4; text-align: center;
  background: linear-gradient(160deg, rgba(11,42,73,.97), rgba(6,25,46,.97));
  border: 1px solid rgba(236,206,136,.34);
  box-shadow: 0 18px 38px -16px rgba(4,22,44,.72), inset 0 1px 0 rgba(255,255,255,.12);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.3,1), visibility .2s;
  pointer-events: none;
}
.nav .menu a.has-badge:hover .nav-tip,
.nav .menu a.has-badge:focus-visible .nav-tip{
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-tip em{ font-style: normal; }
.nav-tip i{ font-style: normal; font-size: 11px; font-weight: 500; color: #9FB6CE; }
/* 指向上的小三角 */
.nav-tip u{
  position: absolute; top: -4.5px; left: 50%; margin-left: -5px;
  width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px 0 0 0;
  background: rgba(11,42,73,.97);
  border-left: 1px solid rgba(236,206,136,.34);
  border-top: 1px solid rgba(236,206,136,.34);
}

/* ♿ 无障碍硬要求：系统开了「减少动态效果」就停掉浮动与流光。 */
@media (prefers-reduced-motion: reduce){
  .nav-badge{ animation: none; }
  .nav-badge::after{ animation: none; opacity: 0; }
}

/* ---------- 窄屏折叠菜单（≤900px）：角标改随文字排布 ----------
   折叠菜单里每一项是整行、文字左对齐，角标若还绝对定位到右上角，
   会跑到离文字很远的地方。改成**跟随文字的行内小金标**。 */
@media (max-width: 900px){
  .nav .menu.open .nav-badge{
    position: static; margin-left: 8px; vertical-align: 1.5px;
    animation: none; transform: none; font-size: 10px; padding: 3px 7px;
  }
  /* 移动端没有 hover，气泡没有意义，直接不出 */
  .nav .menu.open .nav-tip{ display: none; }
}
/* 901–1024px：这一段导航本来就吃紧（见 §4 的注释），角标再往外溢会压到邻项，
   所以收一档、内收一点。 */
@media (min-width: 901px) and (max-width: 1024px){
  .nav .menu a.has-badge .nav-badge{ font-size: 9px; padding: 3px 6px; right: -3px; top: -6px; }
}

/* ============================================================
   §37 校区卡「无子页面」态（2026-10-13 非哥拍板）
   「除非有分校区或者多个教学点，要不然不用子页面」→
   kind='liankao' 的警校驻点不再链 campus-detail.html：
   campuses.html 的 .cc-card 与 lane.html 的 .campus-card 都降级为 <div class="… is-static">。
   ⚠️ 必须显式关掉 hover 上浮/阴影/指针 —— 否则卡看起来还能点，点下去没反应，比不给入口更糟。
   ⚠️ 卡片本体样式一个字都没改（非哥：「各校区的卡片保持一样大小和设计」）。
   ============================================================ */
.cc-card.is-static,
.campus-card.is-static{ cursor: default; }
.cc-card.is-static:hover{ transform: none; box-shadow: none; border-color: #E8ECF2; }
.campus-card.is-static:hover{ transform: none; box-shadow: var(--sh-1); border-color: var(--line); }
.campus-card.is-static:hover .photo img{ transform: none; }