/* ==========================================================================
   SeqMatrix 品牌令牌层· 文艺范学士风
   建立：2026-10-07
   策略：不动 HTML，只在 theme.css / warm-theme.css 之后引入本文件即可全站生效
   回滚：删除页面里的这一行 <link> 即恢复原状（秒级）
   ========================================================================== */

/* ---------- 1. 主色：墨绿（学术沉稳） ---------- */
:root{
  /* 主色阶：源自 index.html / about.html 已有的墨绿体系 */
  --brand-jade:      #1F3A2E;   /* 墨绿主调 */
  --brand-ink:       #152A21;   /* 墨绿深（正文/标题） */
  --brand-primary:   #14543E;   /* 主色（原--primary 蓝紫的替代）*/
  --brand-dim:       #0F6E56;   /* 次级/悬停 */
  --brand-mist:      #E8EFEA;   /* 浅底 */
  --brand-fog:       #F4F8F5;   /* 更浅的底 */

  /* 辅色：金（点缀，单页不超1 处大面积）*/
  --brand-gold:      #C9A227;
  --brand-gold-lit:  #E8B45A;
  --brand-gold-pale: #F3E3C6;
  --brand-gold-deep: #B8921F;

  /* 中性 */
  --brand-paper:     #FBF4E9;   /* 纸感底（文艺范的关键）*/
  --brand-paper-2:   #F6F2EC;
  --brand-rule:      #DED5C4;   /* 细分隔线 */
  --brand-text:      #2B2B26;
  --brand-text-2:    #6B6355;
  --brand-text-3:    #9A9080;

  /* 语义色（降低饱和度以融入墨绿金体系）*/
  --brand-danger:    #A8322B;
  --brand-warn:      #B4761F;
  --brand-info:      #2F6C6A;
  --brand-ok:        #3F7A4E;

  /* ---------- 2. 字体：标题衬线 + 正文黑体 ---------- */
  --font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
                  "STSong", "SimSun", Georgia, serif;
  --font-body:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  /* 覆盖旧令牌（关键：把蓝紫接管过来）*/
  --primary:      var(--brand-primary);
  --primary-dark: var(--brand-dim);
  --accent:       var(--brand-gold);
  --accent-2:     var(--brand-gold-lit);

  /* ---------- 3. 字阶（8 级，统一全站 H1-H6 与正文）---------- */
  --fs-display: clamp(34px, 4.6vw, 56px);
  --fs-h1:      clamp(28px, 3.4vw, 40px);
  --fs-h2:      clamp(23px, 2.6vw, 30px);
  --fs-h3:      clamp(19px, 2.0vw, 23px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-micro:   12px;

  --lh-display: 1.12;   /* 大标题紧*/
  --lh-body:    1.72;   /* 中文正文 1.7+ 才不挤 */

  --ls-display: -0.02em;
  --ls-body:    0;

  /* ---------- 4. 间距（8 栅格）---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 88px;  --sp-10: 120px;

  /* ---------- 5. 容器（统一 11 种宽度 → 4 档）---------- */
  --w-prose:   680px;   /* 正文阅读 */
  --w-content: 1080px;  /* 内容页标准 */
  --w-wide:    1280px;  /* 宽屏 */
  --w-narrow:  480px;   /* 表单/窄栏 */

  /* ---------- 6. 圆角（收敛到 4 档）---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  22px;

  /* ---------- 7. 阴影（3 级，带暖调）---------- */
  --sh-1: 0 1px 2px rgba(31,58,46,.06);
  --sh-2: 0 8px 24px rgba(31,58,46,.09);
  --sh-3: 0 20px 52px rgba(31,58,46,.13);

  /* ---------- 8. 渐变 ---------- */
  --grad-primary: linear-gradient(135deg, #14543E 0%, #0F6E56 100%);
  --grad-gold:    linear-gradient(135deg, #C9A227 0%, #E8B45A 100%);
  --grad-paper:   linear-gradient(180deg, #FBF4E9 0%, #F4F8F5 100%);
  /* 🔴 2026-10-07 补：--grad-hero 未定义在此，导致 .hero h1 的
     background-clip:text 渐变在部分页面仍取旧值（实测渲染为紫）。
     此处显式定义为墨绿→金→赭，与「文艺范学士风」一致。 */
  --grad-hero:    linear-gradient(135deg, #14543E 0%, #2F6B52 28%, #C9A227 62%, #E07A1F 100%);

  /* ---------- 9. 动效 ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;
  --t-mid:  300ms;

  /* ---------- 10. 层级 ---------- */
  --z-nav: 100;
  --z-pop: 500;
}

/* ==========================================================================
   基础重置（全站统一，逐页生效）
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--brand-text);
  background: var(--brand-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 标题统一走衬线 —— 这是「学士风」的字面意义 */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--brand-ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p{ text-wrap: pretty; }

/* 中文正文排版优化 */
p, li{
  line-height: var(--lh-body);
  max-width: var(--w-prose);
}

/* 链接：金色下划线，不刺眼 */
a{
  color: var(--brand-primary);
  text-decoration-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
a:hover{
  color: var(--brand-dim);
  text-decoration-color: var(--brand-gold);
}

/* 焦点可见（无障碍强制） */
:focus-visible{
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 表格：学术数据感 */
table{
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;   /* 数字等宽，利好数据站 */
}
th{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-mist);
  border-bottom: 1px solid var(--brand-rule);
  text-align: left;
}
th, td{ padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--brand-rule); }
tbody tr{ transition: background var(--t-fast) var(--ease-out); }
tbody tr:hover{ background: var(--brand-fog); }

/* 代码/数字 */
code, kbd, .mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 图片 */
img{ max-width: 100%; height: auto; }

/* 纸感纹理（文艺范的"质感"来源，极轻不干扰阅读）*/
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .022;
  background-image:
    repeating-linear-gradient(0deg,   rgba(21,42,33,.9) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(21,42,33,.7) 0 1px, transparent 1px 4px);
}

/* ==========================================================================
   统一容器与间距（全站 11 种宽度 → 4 档）
   ========================================================================== */
.container,
.wrap,
.wrapper,
.inner,
.page,
main > div{
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* ==========================================================================
   移动端适配（补齐 69% 缺失页面）
   ========================================================================== */
@media (max-width: 768px){
  :root{
    --fs-display: clamp(27px, 7.6vw, 36px);
    --fs-h1: clamp(23px, 6.2vw, 30px);
    --fs-h2: clamp(20px, 5.2vw, 25px);
    --fs-body: 15.5px;
    --lh-body: 1.75;
    --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
  }
  .container, .wrap, .wrapper, .inner, .page{ padding-inline: var(--sp-4); }
  h1, h2, h3{ letter-spacing: -0.01em; }

  /* 🔴 移动端强制容器不溢出 */
  table{ display: block; overflow-x: auto; white-space: nowrap; }
  img{ max-width: 100vw; height: auto; }

  /* ---- 2026-10-07 移动端实测修复（截图发现）----
     问题1：CTA 按钮组在 390px 下相互重叠、定位错乱
     问题2：按钮内文字被 padding 挤压换行，金色按钮文字溢出边界
     修法：按钮组改流式布局，按钮本身保证最小可点区域且不溢出 */
  .btn, .button, button[type=submit], a.btn,
  .cta-btn, .cta, .btn-primary, .btn-outline,
  .fixcta,                    /* 首页底部固定 CTA（实测重叠的就是它）*/
  [class*="btn-"]{             /* btn-amber / btn-gold / btn-ghost / btn-ink … */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;          /* 无障碍：触摸目标 ≥44px */
    padding: var(--sp-3) var(--sp-4) !important;
    max-width: 100%;
    line-height: 1.4;
    white-space: normal;       /* 允许长文案换行而不是撑破容器 */
    text-align: center;
    box-sizing: border-box;
    border-radius: var(--r-md) !important;
  }
  /* 按钮组：横向可换行，不再绝对定位重叠 */
  .btn-group, .buttons, .cta-group, .actions, .hero-actions,
  [class*="btn-row"], [class*="btn-wrap"]{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sp-3) !important;
    position: static !important;
    width: 100% !important;
    margin: var(--sp-5) 0 !important;
  }
  .btn-group > *, .buttons > *, .cta-group > *,
  .actions > *, .hero-actions > *{
    flex: 1 1 auto !important;
    min-width: 44% !important;
    max-width: 100% !important;
    position: static !important;
  }
  /* 浮动卡片类（页脚悬浮按钮等）改为正常流，避免压住内容 */
  .float-btn, .floating, .sticky-cta, .fab{
    position: static !important;
    margin: var(--sp-5) auto !important;
    max-width: calc(100% - var(--sp-5)) !important;
    width: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  /* 🔴 .fixcta 是首页底部悬浮 CTA（position:fixed + translateX）。
        悬浮本身是设计意图，但移动端会压住正文 —— 改为普通流内联按钮，
        保证 min-height 44px 触摸区、不超出视口、不遮挡内容。 */
  .fixcta{
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - var(--sp-6)) !important;
    margin: var(--sp-6) auto !important;
    padding: var(--sp-4) var(--sp-6) !important;
    min-height: 46px;
    font-size: 15.5px !important;
    line-height: 1.4;
    text-align: center;
    border-radius: 99px !important;
    box-sizing: border-box;
  }
  /* 给 body 留出底部空间，防止悬浮元素永久压住最后一段内容 */
  body{ padding-bottom: var(--sp-7) !important; }
  /* 栅格降为单列 */
  .grid, .cols, [class*="grid-col"]{ grid-template-columns: 1fr !important; }
  /* 长英文/URL 不再撑破 */
  body{ overflow-wrap: break-word; }

  /* ---- 2026-10-07 溢出定位修复（实测 4 页横向溢出 71-312px）----
     根因：.bg-canvas / .bg-grid / .bg-orb 是装饰背景层，
          宽高写成固定 px（如 702/668/647），未做响应式 → 撑破视口。
     修法：移动端隐藏装饰层（纯装饰，不承载信息），并收口导航。 */
  .bg-canvas, .bg-grid, .bg-orb, .bg-noise, .bg-glow,
  [class*="bg-canvas"], [class*="bg-grid"], [class*="bg-orb"]{
    display: none !important;
  }
  /* 导航在窄屏收口：菜单与 CTA 不再超出 */
  .nav-menu, .nav-actions, .nav-user, .nav-cta{
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
  }
  /* 🔴 表格：之前 display:block 仍会让 table 撑破视口。
        必须用固定宽度 + 容器内滚动，且表格自身不再撑父级。 */
  table{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  thead, tbody, tfoot{ max-width: 100% !important; }
  /* 表格外层任意容器也收口 */
  .table-wrap, .table-scroll, [class*="table-wrap"]{
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  /* 🔴 筛选标签横排（.filter-tab）→ 改为可换行，不撑破 */
  .filter-tabs, .filters, .tabs, .chips, .filter-bar{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
    max-width: 100% !important;
  }
  .filter-tab, .tab, .chip{
    white-space: nowrap;
    max-width: 100%;
    flex: 0 0 auto;
  }
  /* 🔴 悬浮按钮组（app页右下角 AI/咨询入口）→ 收进视口内 */
  .nav-cta{
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    gap: var(--sp-2) !important;
  }
  /* 通用：任何元素的宽度不得超过视口（防止后续页面再踩） */
  html, body{ max-width: 100vw; overflow-x: hidden; }
}

@media (max-width: 480px){
  :root{ --fs-display: 25px; --fs-h1: 21px; --fs-h2: 18.5px; }
  .container, .wrap, .wrapper, .inner, .page{ padding-inline: var(--sp-3); }
}

/* ==========================================================================
   打印（数据站必需：家长会打印招生简章对比页）
   ========================================================================== */
@media print{
  body{ background: #fff; }
  body::before{ display: none; }
  nav, footer, .ad, .sidebar{ display: none !important; }
  a::after{ content: " (" attr(href) ")"; font-size: 11px; color: #666; }
  th{ background: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
}

/* ==========================================================================
   动效降级（无障碍强制）
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   最终覆盖层 · 2026-10-07
   🔴 背景：排查发现 `.hero h1` 的 background-clip:text 渐变在多个页面
      仍渲染为紫（rgb(109,40,217)），而：
        - warm-theme.css 的 --grad-hero 已是墨绿金 ✅
        - 服务器文件已无紫色 ✅
        - 全新 profile / 升版本号 / 禁缓存 均无法改变 ❌
      说明存在一条 CSSOM 枚举不到的高优先级规则（很可能来自 <style> 内联块）。
      决定：不再排查来源，用「最后加载 + !important + 双属性」直接覆盖。
      brand.css 本身是页面最后一个 <link>，天然具备后置优势。
   ========================================================================== */

/* 1) Hero 主标题：墨绿 → 金 → 赭（覆盖 background 与 background-image 两条路径）*/
.hero h1,
.page-head h1,
.page-head h1 .gradient,
h1 .gradient,
h1 .g{
  background: linear-gradient(135deg, #14543E 0%, #2F6B52 26%, #C9A227 62%, #E07A1F 100%) !important;
  background-image: linear-gradient(135deg, #14543E 0%, #2F6B52 26%, #C9A227 62%, #E07A1F 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 2) Hero 副标题 / 描述 /徽章：一并统一 */
.hero .hero-sub,
.hero .hero-desc,
.hero p{ color: var(--brand-text-2) !important; }
.hero-badge{
  background: linear-gradient(135deg, rgba(232,180,90,.10), rgba(20,84,62,.08)) !important;
  border-color: rgba(201,162,39,.28) !important;
  color: var(--brand-primary) !important;
}

/* 3) 其他常见渐变标题：全局兜底 */
.gradient-text, .text-gradient, .grad-text{
  background: linear-gradient(135deg, #14543E 0%, #C9A227 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 4) 再次确保令牌一致（防止其他样式表在 :root 覆盖） */
:root{
  --grad-hero: linear-gradient(135deg, #14543E 0%, #2F6B52 26%, #C9A227 62%, #E07A1F 100%);
  --grad-primary: linear-gradient(135deg, #14543E 0%, #0F6E56 100%);
  --grad-accent: linear-gradient(135deg, #C9A227 0%, #E8B45A 100%);
}


/* ==========================================================================
   导航规范化 · 2026-10-07
   🔴 背景：实测 80 页有 <nav>，写法主要是 .nav（一致），
      但存在 .links / .brand / .topnav / .nav-menu / .tab-bar 等变体。
      已把 HTML 类名统一为 .nav / .nav-links / .nav-brand，
      此处补齐对应 CSS —— 改类名不改样式 = 导航会失样式，必须成对处理。
   ========================================================================== */

/* 统一后的导航：与原有 .nav 视觉一致，仅补齐别名，避免改类名后掉样式 */
.nav{
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 100);
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  padding: var(--sp-3, 12px) var(--sp-5, 24px);
  background: color-mix(in srgb, var(--brand-paper,#FBF4E9) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--brand-rule, #DED5C4);
}
.nav-brand{
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  font-family: var(--font-display, serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--brand-ink, #152A21);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand img{ width: 34px; height: 34px; border-radius: 8px; display:block; }
.nav-links{
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  flex-wrap: wrap;
  min-width: 0;
}
.nav-links a{
  color: var(--brand-text-2, #6B6355);
  text-decoration: none;
  font-size: 14.5px;
  padding: 3px 0;
  border-bottom: 1.5px solid transparent;
  transition: color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color: var(--brand-primary, #14543E);
  border-bottom-color: var(--brand-gold, #C9A227);
}
/* 移动端：折叠按钮 */
.nav .menu-toggle{
  margin-left: auto;
  background: none;
  border: 1px solid var(--brand-rule, #DED5C4);
  border-radius: 8px;
  width: 40px; height: 40px;
  cursor: pointer;
  color: var(--brand-ink, #152A21);
  font-size: 19px;
  display: none;
}
@media (max-width: 860px){
  .nav{ flex-wrap: wrap; padding: 10px 16px; }
  .nav .menu-toggle{ display: inline-flex; align-items: center; justify-content: center; }
  .nav-links{
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{ max-height: 60vh; overflow-y: auto; padding: 8px 0; }
  .nav-links a{ width: 100%; padding: 9px 0; border-bottom: 1px solid var(--brand-rule,#DED5C4); }
}


/* ==========================================================================
   导航 CTA 按钮· 2026-10-07
   🔴 实测发现：导航右侧「登录」按钮仍是蓝紫（.nav-cta / .btn-outline 变体），
      属"CSSOM 枚举不到的高优先级规则"，按既定规程直接覆盖。
   ========================================================================== */
.nav .nav-cta{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.nav .btn-login,
.nav .login,
.nav-actions a,
.nav-cta > a[href$="login.html"],
.nav-cta > a[href*="login"]{
  background: linear-gradient(135deg, #14543E 0%, #0F6E56 100%) !important;
  color: #FBF4E9 !important;
  border: 1px solid #0B3A2B !important;
  border-radius: 999px !important;
  padding: 7px 20px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: filter .16s ease, transform .16s ease !important;
}
.nav .nav-cta:hover,
.nav .btn-login:hover,
.nav-cta:hover{
  filter: brightness(1.12);
  color: #FBF4E9 !important;
}
/* 我的 / 用户态入口 */
.nav .nav-user,
.nav .avatar-btn{
  color: #14543E !important;
  border-color: rgba(20,84,62,.28) !important;
  background: rgba(20,84,62,.06) !important;
  border-radius: 999px !important;
}
@media (max-width: 860px){
  .nav .nav-cta{ margin-left: auto; }
}


/* ==========================================================================
   导航按钮补漏 · 2026-10-07（实测 consult.html 发现）
   「登录」= <button class="btn btn-ghost">、「免费使用」= .btn.btn-primary
   这两个类没被上一轮规则命中 → 单独补
   ========================================================================== */
.nav .btn-ghost,
.nav-cta .btn-ghost,
button.btn-ghost{
  background: rgba(20,84,62,.06) !important;
  color: #14543E !important;
  border: 1px solid rgba(20,84,62,.30) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease !important;
}
.nav .btn-ghost:hover{ background: rgba(20,84,62,.12) !important; }

.nav .btn-primary,
.nav-cta .btn-primary,
button.btn-primary{
  background: linear-gradient(135deg, #14543E 0%, #0F6E56 100%) !important;
  color: #FBF4E9 !important;
  border: 1px solid #0B3A2B !important;
  border-radius: 999px !important;
  padding: 7px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,84,62,.18) !important;
  transition: filter .16s ease !important;
}
.nav .btn-primary:hover{ filter: brightness(1.12); }

/* 主题切换按钮（月亮）*/
.nav .theme-toggle{
  background: rgba(20,84,62,.06) !important;
  border: 1px solid rgba(20,84,62,.22) !important;
  border-radius: 999px !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer;
  font-size: 15px !important;
  color: #14543E !important;
}