/* =============================================================================
 * @ANCHOR:main-css — 全站样式（由 index.html 内联样式迁移，路径 css/main.css）
 * 检索：@ANCHOR:root | @ANCHOR:navbar | @ANCHOR:home | @ANCHOR:projects |
 *       @ANCHOR:about-ai | @ANCHOR:achievements | @ANCHOR:contact | @ANCHOR:modals
 * 响应式：css/responsive.css（断点 sm 640 · md 1024 · lg 1280）
 * ============================================================================= */

/*
 * 样式分区（全文检索以下标题即可跳转）：
 *  :root / body — 全局变量与 Tab 弥散光
 *  .navbar — 顶栏
 *  #home — 首页（含 .home-layout、个人介绍 intro-hero）
 *  #projects — 作品集布局与侧栏
 *  #about-ai — 关于AI 时间轴与缩略图
 *  #achievements — 行业成果页
 *  #contact — 联系方式页
 *  #about-ai-ppt-modal — 关于AI PPT 全屏预览弹窗
 *  css/responsive.css — 响应式 / 移动端 3D 简化 / prefers-reduced-motion
 */
:root {

  --primary: #045afe;
  --primary-light: #ffffff;
  /*
   * 灰度色板（10 级 · 纯中性无偏色 · #1A1A1A → #FAFAFA）
   */
  --gray-1: #1a1a1a;
  --gray-2: #333333;
  --gray-3: #5c5c5c;
  --gray-4: #888888;
  --gray-5: #aaaaaa;
  --gray-6: #cccccc;
  --gray-7: #e7e7e7;
  --gray-8: #f3f3f3;
  --gray-9: #f7f7f7;
  --gray-10: #fafafa;

  /*
   * 语义色（映射灰度 · 勿直接写 hex）
   * text-primary 标题主文本 · text-secondary 正文说明 · text-tertiary 辅助信息
   * text-placeholder 占位 · text-on-accent 主色/荧光绿底上的固定深字
   * bg-page 页面底 · bg-card 卡片底 · bg-hover 悬停底 · bg-placeholder 图片占位
   * border-primary 主边框/分割线 · border-secondary 次边框
   */
  --text-primary: var(--gray-1);
  --text-secondary: var(--gray-3);
  --text-tertiary: var(--gray-4);
  --text-placeholder: var(--gray-5);
  --text-on-accent: var(--gray-1);
  --text-secondary-dark: #a0a0a0;
  --bg-page: var(--gray-10);
  --bg-card: #ffffff;
  --bg-hover: var(--gray-8);
  --bg-placeholder: var(--gray-6);
  --border-primary: var(--gray-7);
  --border-secondary: var(--gray-8);
  --border-subtle: rgba(255, 255, 255, 0.5);
  --border-accent-hover: #dbeafe;
  --primary-subtle-bg: #eef2ff;
  --primary-subtle-bg-hover: #f3f4ff;
  --primary-subtle-bg-muted: #eef2f7;
  --primary-subtle-bg-tag: #e8f0fe;
  --text-inverse: #ffffff;
  --bg-inverse: #000000;
  --bg-card-dark: #1e1e1e;

  /* 作品集暗黑强调色：No.2 等与 --primary 联动；No.6 在 body[data-projects-active="6"] 下改为 pf-greenblue */
  --pf-green: #00e134;
  --pf-greenblue: #42d2f3;
  /* 作品集 No.2 / No.6 暗色模式：body.projects-dark-mode 内 --text-secondary 指向 --text-secondary-dark */
  /*
   * 字重（Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700）
   */
  --fontweight-light: 300;
  --fontweight-regular: 400;
  --fontweight-medium: 500;
  --fontweight-semibold: 600;
  --fontweight-bold: 700;

  /*
   * 行高（标题 tight · 正文 base · 描述 loose）
   */
  --line-height-tight: 1.3;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /*
   * 间距（4px 基准）
   */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /*
   * 字号尺度（就近取档，区间近似取大；勿写裸 px/rem）
   * 6xs 12 · md 14 · xl 16 · 1xl 18 · 2xl 20 · 3xl 24 · 4xl 28 · 5xl 36 · 6xl 48 · bg 72
   */
  --fontsize-6xs: 12px;
  --fontsize-md: 14px;
  --fontsize-xl: 16px;
  --fontsize-1xl: 18px;
  --fontsize-2xl: 20px;
  --fontsize-3xl: 24px;
  --fontsize-4xl: 28px;
  --fontsize-5xl: 36px;
  --fontsize-6xl: 44px;
  --fontsize-bg: 72px;
  /* 旧版顶栏浅蓝线性渐变（已由全页弥散光替代，变量保留便于查阅） */
  --page-gradient-start: #E2EFFF;
  --page-gradient-end: #ffffff;
  --primary-subtle-border: var(--page-gradient-start);
  --page-gradient-height: 600px;

  /* 全站 Tab 顶部弥散光（原 #home ::before；多层 radial + blur + mask） */
  --page-diffused-height: 310px;
  --page-diffused-blur: 70px;
  --page-diffused-glow-image:
    radial-gradient(circle at 20% 30%, rgba(255, 209, 231, 0.3) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(214, 224, 255, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(220, 206, 255, 0.2) 0%, transparent 62%);
  --page-diffused-mask: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);

  /*
   * 作品集暗黑模式 · 单独可调弥散光（默认沿用浅色光晕；在此重写为深色 radial-gradient）
   * 选择器：#projects.project-dark[data-active-project="2|6"].tab-section.active::before
   */
  --projects-dark-p2-diffused-glow: 
  radial-gradient(circle at 20% 30%, rgba(0, 147, 59, 0.2) 0%, transparent 15%),
  radial-gradient(circle at 80% 20%, rgba(9, 75, 149, 0.2) 0%, transparent 60%),
  radial-gradient(circle at 50% 50%, rgba(192, 108, 255, 0.1) 0%, transparent 62%);
  /* 原 No.5 金融中台暗色顶光，现用于 No.6 ATP 大模型暗黑 Tab */
  --projects-dark-p6-diffused-glow: 
  radial-gradient(circle at 20% 30%, rgba(107, 255, 166, 0.2) 0%, transparent 60%),
  radial-gradient(circle at 80% 20%, rgba(108, 140, 255, 0.2) 0%, transparent 60%),
  radial-gradient(circle at 50% 50%, rgba(192, 108, 255, 0.1) 0%, transparent 62%);

  /* 项目成果展示字号 */
  --project-result-title-size: var(--fontsize-4xl);

  /*
   * 圆角尺度（sm 4 · md 6 · lg 8 · xl 12 · 2xl 16 · round 胶囊）
   * sm 小标签/代码块 · md 按钮/输入/Tab · lg 图标/头像/时间线子块
   * xl 卡片 · 2xl Hero/照片/弹窗 · round Pill/徽章
   */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-round: 999px;

  /*
   * 阴影尺度
   * 1 默认卡片（轻外阴影 + 顶部内高光）· 2 悬停卡片（品牌蓝光晕 + 轻外阴影）
   * 3 头像框/悬浮数据卡 · 4 弹窗/重要浮层
   */
  --shadow-1:
    0 2px 10px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-2:
    0 10px 36px rgba(4, 90, 254, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* 固定顶栏总高度（60px 内栏 + 1px 底边），若改导航高度请同步修改 */
  --navbar-fixed-height: 61px;
  /* 右侧面包屑 position:fixed 的 top：顶栏高度 + 与导航栏间距（首页 / 作品集共用） */
  --sidebar-fixed-top: calc(var(--navbar-fixed-height) + var(--space-10));

  /*
   * 行业发声 .voice-card-media：统一尺寸与占位色（改此处全局生效）
   * 卡片顺序：每个 <article> 带 vcard-1 … vcard-12，调顺序可改 DOM 或用 CSS grid order 指向对应 .vcard-n
   * 单张换图：改 data-src / src="image/hycg/hycg_hy_n.webp"（n 为 1–12）；进入行业成果 Tab 后加载，避免隐藏页签内解码失败
   * 标题：<a class="voice-card-title" href="…" target="_blank">…</a>（两行省略；悬停卡片时主题蓝）
   */
  --voice-card-media-width: 240px;
  --voice-card-media-aspect-ratio: 4 / 3;
  --voice-card-media-radius: var(--radius-md);
  --voice-card-media-placeholder-bg: var(--border-secondary);
  --voice-card-media-object-fit: cover;
  --voice-card-media-object-position: center;
  /* 与 .voice-card-footer 顶部分隔线一致（行业发声 vcard-1～12 共用） */
  --voice-card-footer-border-color: var(--border-primary);

  /* 我的设计哲学：手风琴标题字号（仅此一处修改即可全局生效） */
  --philosophy-details-title-size: var(--fontsize-2xl);
  /* 手风琴分隔线：与行业发声卡片底栏分隔线同色 */
  --philosophy-divider-color: var(--voice-card-footer-border-color);
  /* 设计哲学右侧 media：圆角与比例（仅此修改即可全局生效） */
  --philosophy-media-border-radius: var(--radius-2xl);
  --philosophy-media-aspect-ratio: 16 / 9;
  /* 仅作用于 .phil-details-body 外间距（不改内部行高/字距） */
  --philosophy-body-margin-block-start: var(--space-3);
  --philosophy-body-margin-block-end: var(--space-10);
  /* 设计哲学外层大盒：与首页 .home-block.card 白卡一致 */
  --philosophy-shell-bg: var(--bg-card);
  --philosophy-shell-radius: var(--radius-xl);
  --philosophy-shell-padding: var(--space-6);
  /* 右侧 media 配图：image/hycg/hyfs-zx-1.webp～hyfs-zx-3.webp，与三条手风琴一一对应（脚本切换） */
  --philosophy-media-bg: var(--border-secondary);

  /* 联系方式页：区块背景、白卡片；右侧展示图为 image/lxw/lxw-1.png（150×150） */
  --contact-page-bg: var(--gray-9);
  --contact-card-bg: var(--bg-card);
  --contact-placeholder-bg: var(--border-secondary);
  --contact-media-radius: var(--radius-2xl);

  /*
   * 中文字体栈（PingFang SC → Noto Sans SC → Microsoft YaHei）
   * macOS：优先 PingFang；Windows / 其它：优先 Noto Sans，回退雅黑
   * 实际顺序由 html[data-os] 选择器切换 --font-sans
   */
  --font-sans-mac: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-sans-win: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-sans: var(--font-sans-mac);
}

html[data-os="windows"],
html[data-os="other"] {
  --font-sans: var(--font-sans-win);
}

html[data-os="mac"] {
  --font-sans: var(--font-sans-mac);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: var(--navbar-fixed-height);
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--navbar-fixed-height);
  background-color: var(--bg-page);
  background-image: none;
  color: var(--text-primary);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-base);
}

body.projects-dark-mode {
  --primary: var(--pf-green);
  --primary-light: rgba(0, 225, 52, 0.14);
  --text-primary: var(--text-inverse);
  --text-secondary: var(--text-secondary-dark);
  --bg-page: var(--bg-inverse);
  --bg-card: var(--bg-card-dark);
  background: var(--bg-page);
  background-image: none;
}


/* 描述性正文：行高 loose */
.section-subtitle,
.intro-hero-desc,
.advantage-desc,
.experience-item-meta,
.home-list,
.edu-meta,
#about-ai .chaptitlec,
#home-ability .ability-cell-desc,
#home-portfolio-catalog .portfolio-catalog-subtitle,
.projects-main .project-panel-content,
.project-sub-link,
.achievements-page .ach-muted,
.achievements-page .hycg_xiangqing,
.achievements-page .voice-card-excerpt,
.achievements-page .voice-card-meta,
.achievements-page .phil-details-body,
.contact-page-lead,
.contact-deflist dd,
.contact-tool-label,
.footer,
.project-p7-highlight-ol {
  line-height: var(--line-height-loose);
}

/* 标题：行高 tight */
.section-title,
.home-block-header h3,
.advantage-title,
.intro-hero-title,
.experience-item-title,
.projects-title,
.project-panel-title,
#project-result-title,
#project-result-dynamic > .project-panel-title,
.achievements-page .ach-block-title,
.achievements-page .honor-kicker,
#about-ai .chaptitleb,
#home-ability .ability-header,
#home-ability .ability-cell-title,
#home-portfolio-catalog .portfolio-catalog-title,
.project-p7-highlight-title,
.achievements-page .voice-card-title,
.contact-deflist dt {
  line-height: var(--line-height-tight);
}

/* No.6 ATP 暗黑：强调色改为青蓝（改 --pf-greenblue 即可全局替换） */
body.projects-dark-mode[data-projects-active="6"] {
  --primary: var(--pf-greenblue);
  --primary-light: rgba(66, 210, 243, 0.14);
}

/* 各 Tab 顶部弥散光：与首页 #home::before 同一套变量，替代原 body 浅蓝线性渐变 */
#home.tab-section.active,
#projects.tab-section.active,
#achievements.tab-section.active,
#contact.tab-section.active,
#about-ai.tab-section.active {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--navbar-fixed-height));
}

#home.tab-section.active::before,
#projects.tab-section.active::before,
#achievements.tab-section.active::before,
#contact.tab-section.active::before,
#about-ai.tab-section.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: var(--page-diffused-height);
  transform: translateX(-50%) translateZ(0);
  z-index: 0;
  pointer-events: none;
  background: var(--page-diffused-glow-image);
  filter: blur(var(--page-diffused-blur));
  -webkit-mask-image: var(--page-diffused-mask);
  mask-image: var(--page-diffused-mask);
}

/* 作品集 · 暗黑 · 项目2：覆盖上方 ::before 的 background（编辑 --projects-dark-p2-diffused-glow） */
#projects.project-dark[data-active-project="2"].tab-section.active::before {
  background: var(--projects-dark-p2-diffused-glow);
}

/* 作品集 · 暗黑 · 项目6 ATP：覆盖上方 ::before 的 background（编辑 --projects-dark-p6-diffused-glow） */
#projects.project-dark[data-active-project="6"].tab-section.active::before {
  background: var(--projects-dark-p6-diffused-glow);
}

#home.tab-section.active > *,
#projects.tab-section.active > *,
#achievements.tab-section.active > *,
#contact.tab-section.active > *,
#about-ai.tab-section.active > * {
  position: relative;
  z-index: 1;
}

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

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

/* 顶部导航栏：固定在视口顶部；主内容用 body padding-top 预留 --navbar-fixed-height */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-primary);
}

.navbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0px 0px 0px 31px;
  height: 60px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.navbar-brand img {
  display: block;
  height: 26px;
  width: auto;
}

/* 作品集 No.2 / No.6：暗色顶栏使用 sy_logo_dark */
.navbar-inner .navbar-logo--dark {
  display: none;
}

body.projects-dark-mode .navbar-inner .navbar-logo--default {
  display: none;
}

body.projects-dark-mode .navbar-inner .navbar-logo--dark {
  display: block;
}

.navbar-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6em;
  align-items: center;
  gap: 0;
}

.navbar-nav a {
  justify-self: center;
  width: auto;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--line-height-tight);
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-semibold);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-nav a:hover:not(.active) {
  color: var(--text-primary);
  background: var(--bg-hover);
  font-weight: var(--fontweight-semibold);
}

.navbar-nav a.active {
  color: var(--primary);
  background: var(--primary-subtle-bg);
  font-weight: var(--fontweight-semibold);
}

.navbar-nav a.active:hover {
  color: var(--primary);
  background: var(--primary-subtle-bg);
}

/* 作品集 No.2 / No.6：body.projects-dark-mode 时顶栏同步暗色（与 #projects.project-dark 一致） */
body.projects-dark-mode .navbar {
  background: rgba(6, 9, 8, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 225, 52, 0.28);
}

body.projects-dark-mode .navbar-nav a {
  color: var(--text-secondary);
}

body.projects-dark-mode .navbar-nav a:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(0, 225, 52, 0.1);
}

body.projects-dark-mode .navbar-nav a.active {
  color: var(--primary);
  background: rgba(17, 51, 25, 0.75);
}

body.projects-dark-mode .navbar-nav a.active:hover {
  color: var(--primary);
  background: rgba(17, 51, 25, 0.75);
}

body.projects-dark-mode[data-projects-active="6"] .navbar {
  border-bottom-color: rgba(66, 210, 243, 0.28);
}

body.projects-dark-mode[data-projects-active="6"] .navbar-nav a:hover:not(.active) {
  background: rgba(66, 210, 243, 0.1);
}

/* 页面通用布局 */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

/* 关于AI：弥散光由上层 #about-ai.tab-section.active::before 统一提供 */
/* 关于AI：PPT 缩略图默认描边与首页 .home-block.card 一致；悬停描边为主题色 --primary */
#about-ai {
  --about-ai-thumb-border: var(--border-subtle);
  --about-ai-thumb-border-hover: var(--primary);
}

#about-ai.about-ai-section {
  max-width: none;
  width: 100%;
  padding: 0;
}

#about-ai .achievements-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* 与行业成果页 .achievements-page .ach-block-title 一致 */
#about-ai .achievements-page .ach-block-title {
  text-align: center;
  line-height: var(--line-height-tight);
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  margin: 0 0 2.5rem;
  letter-spacing: 0.02em;
}

/* 可复用：从左向右划变 + 120%→100% 缩放（结构：.text-reveal-lr > .text-reveal-lr__inner） */
.text-reveal-lr {
  overflow: hidden;
  --text-reveal-wipe-duration: 1s;
  --text-reveal-scale-duration: 0.88s;
  --text-reveal-scale-delay: 0.14s;
  --text-reveal-scale-from: 1.2;
}

.text-reveal-lr__inner {
  display: inline-block;
  max-width: 100%;
  transform-origin: left center;
}

.text-reveal-lr.is-reveal-pending .text-reveal-lr__inner {
  clip-path: inset(0 100% 0 0);
  opacity: 0.5;
  transform: scale(var(--text-reveal-scale-from));
}

.text-reveal-lr.is-reveal-play .text-reveal-lr__inner {
  animation:
    text-reveal-lr-wipe var(--text-reveal-wipe-duration) cubic-bezier(0.16, 1, 0.3, 1) both,
    text-reveal-lr-scale var(--text-reveal-scale-duration) cubic-bezier(0.22, 1, 0.36, 1)
      var(--text-reveal-scale-delay) both;
}

.text-reveal-lr.is-reveal-done .text-reveal-lr__inner {
  clip-path: none;
  opacity: 1;
  transform: none;
}

/* 三列时间轴 + 文案 + PPT；章节行用 .about-ai-cell-chapter-lead 使大圆与 chaptitlea 同排居中对齐 */
#about-ai .about-ai-grid {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(200px, 34%);
  column-gap: var(--space-5);
  row-gap: var(--space-8);
  align-items: start;
  position: relative;
}

#about-ai .about-ai-grid::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 37px;
  bottom: 37px;
  width: 1px;
  transform: translateX(-50%);
  background: var(--primary);
  z-index: 0;
  border-radius: var(--radius-sm);
}

/* 关于AI：网格区快速渐入（h2 主标题在网格外，不参与）；缓出曲线同 .contact-tools */
#about-ai.tab-section.active .about-ai-grid {
  animation: about-ai-grid-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#about-ai .about-ai-cell-timeline {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  align-self: start;
}

/* 章节行：大圆与 chaptitlea 同网格行，align-self: center 使二者水平并排时垂直居中对齐 */
#about-ai .about-ai-cell-chapter-lead {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

#about-ai .about-ai-cell-chapter-lead .about-ai-cell-timeline--chapter {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

#about-ai .about-ai-cell-chapter-lead .chaptitlea {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

#about-ai .about-ai-cell-chapter-lead .about-ai-tags {
  grid-column: 2;
  grid-row: 2;
}

/* 独立章节时间轴格（若存在）仍用 translate 与首行中线对齐 */
#about-ai .about-ai-cell-timeline--chapter .about-ai-dot--chapter {
  transform: translateY(calc((var(--fontsize-6xl) * var(--line-height-tight) - 30px) / 2));
}

#about-ai .about-ai-cell-chapter-lead .about-ai-cell-timeline--chapter .about-ai-dot--chapter {
  transform: none;
}

/* 小圆几何中心与 .chaptitleb 首行文字中线对齐 */
#about-ai .about-ai-cell-timeline--item .about-ai-dot--item {
  transform: translateY(calc((var(--fontsize-4xl) * var(--line-height-tight) - 16px) / 2));
}

#about-ai .about-ai-cell-thumb:not(.about-ai-cell-thumb--empty) {
  align-self: center;
}

#about-ai .about-ai-cell-thumb--empty {
  align-self: center;
}

#about-ai .about-ai-dot {
  flex-shrink: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

#about-ai .about-ai-dot--chapter {
  width: 30px;
  height: 30px;
  background: var(--primary);
  border: none;
}

#about-ai .about-ai-dot--item {
  width: 16px;
  height: 16px;
  background: var(--bg-page);
  border: 1px solid var(--primary);
}

#about-ai .about-ai-cell-copy {
  text-align: left;
  min-width: 0;
}

#about-ai .chaptitlea {
  font-size: var(--fontsize-6xl);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 0.65rem;
  background: linear-gradient(90deg, #045afe 0%, #ec23d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#about-ai .about-ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

#about-ai .about-ai-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-round);
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 1px solid var(--border-primary);
}

#about-ai .chaptitleb {
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 0.35rem;
}

#about-ai .chaptitlec {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin: 0;
}

#about-ai .about-ai-accent {
  color: var(--primary);
  font-weight: var(--fontweight-semibold);
}

#about-ai .about-ai-cell-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

#about-ai .about-ai-cell-thumb--empty {
  pointer-events: none;
}

#about-ai .about-ai-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-xl);
  background: var(--border-secondary);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--about-ai-thumb-border);
  position: relative;
  overflow: hidden;
}

#about-ai .about-ai-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  background-color: var(--bg-card);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: var(--thumb-bg, none);
}

/* 缩略图 CSS 回退：JS 未写入 --thumb-bg 时仍能显示（与 ABOUT_AI_THUMB_BG 一致） */
#about-ai .about-ai-thumb[data-about-ai-slide="c1-1"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_1.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c1-2"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_5.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c1-3"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_9.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-1"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_10.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-2"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_12.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-3"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_13.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-4"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_14.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-5"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_15.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-6"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_16.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-7"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_17.webp"));
}

#about-ai .about-ai-thumb[data-about-ai-slide="c2-8"]::after {
  background-image: var(--thumb-bg, url("../image/ai/ai_20.webp"));
}

img.lazy-pending {
  background: var(--border-secondary, var(--gray-7));
}

img.lazy-error {
  object-fit: contain;
  opacity: 0.45;
}

.project-image-placeholder--error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--border-subtle, var(--gray-8));
}

#about-ai .about-ai-thumb:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px) scale(1.03);
  border-color: var(--about-ai-thumb-border-hover);
}

#about-ai .about-ai-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

#about-ai .about-ai-thumb.is-pressed {
  transform: scale(0.98);
}

/* 关于AI：PPT 缩略图悬停时跟随光标的轻提示（鼠标右侧） */
#about-ai-thumb-cursor-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  padding: 0.28rem 0.5rem;
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-medium);
  line-height: var(--line-height-tight);
  color: #f9fafb;
  background: rgba(15, 23, 42, 0.92);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  transform: translateY(-50%);
}

#about-ai-thumb-cursor-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ========== 关于AI：PPT 二级全屏预览弹窗（Keynote 式） ========== */
.about-ai-ppt-modal {
  --about-ai-ppt-thumb-w: clamp(35px, 22vw, 160px);
  --about-ai-ppt-panel-h: 88vh;
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
}

.about-ai-ppt-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* 遮罩仅覆盖面板上方区域，避免 Safari 与 panel 叠层合成导致预览发灰/发白 */
.about-ai-ppt-modal__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - var(--about-ai-ppt-panel-h));
  z-index: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.28s ease;
  cursor: pointer;
}

.about-ai-ppt-modal.is-open .about-ai-ppt-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.about-ai-ppt-modal__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: var(--about-ai-ppt-panel-h);
  max-height: var(--about-ai-ppt-panel-h);
  background: #000000;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-4);
}

.about-ai-ppt-modal.is-open .about-ai-ppt-modal__panel {
  transform: translate3d(0, 0, 0);
}

.about-ai-ppt-modal__header {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.65rem 1rem 0.5rem;
  min-height: 2.75rem;
  background: transparent;
  box-shadow: none;
}

.about-ai-ppt-modal__title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.about-ai-ppt-modal__close {
  appearance: none;
  border: 1px solid var(--text-inverse);
  color: var(--text-inverse);
  background: transparent;
  border-radius: var(--radius-round);
  padding: 0.4rem 1.15rem;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-medium);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-ai-ppt-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.about-ai-ppt-modal__close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.about-ai-ppt-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-4);
  padding: 0 1rem 1rem 1rem;
}

.about-ai-ppt-modal__rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: calc(var(--about-ai-ppt-thumb-w) + 1.25rem);
  max-width: 42vw;
}

.about-ai-ppt-modal__rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0.25rem 0.35rem 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.about-ai-ppt-modal__rail-scroll::-webkit-scrollbar {
  width: 6px;
}

.about-ai-ppt-modal__rail-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-round);
}

.about-ai-ppt-modal__thumb {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  width: var(--about-ai-ppt-thumb-w);
  padding: 0.4rem 0.45rem 0.45rem;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-ai-ppt-modal__thumb-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-color: #e8eaef;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.about-ai-ppt-modal__thumb.is-active {
  background: var(--primary);
  color: var(--text-inverse);
}

.about-ai-ppt-modal__thumb.is-active .about-ai-ppt-modal__thumb-visual {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.about-ai-ppt-modal__thumb-label {
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-tight);
}

.about-ai-ppt-modal__preview {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0 0.25rem 0.25rem;
}

.about-ai-ppt-modal__preview-frame {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  background-color: #ffffff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.about-ai-ppt-modal__preview-img-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.section-title {
  font-size: var(--fontsize-4xl);
  margin-bottom: var(--space-6);
  font-weight: var(--fontweight-bold);
  line-height: var(--line-height-tight);
  display: inline-block;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 48px;
  height: 3px;
  background: var(--primary);
  border-radius: var(--radius-sm);
}

.section-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--fontsize-xl);
  line-height: var(--line-height-loose);
}

.navbar-nav a,
.section-subtitle,
.intro-hero-desc,
.intro-meta-label,
.intro-meta-value,
.home-list,
.experience-item-meta,
.edu-logo-circle,
.edu-meta,
.home-sidebar-title,
.home-sidebar-link,
.projects-main .project-panel-content,
.project-image-placeholder,
#projects.project-dark .project-main-link,
#projects.project-dark .project-sub-link,
.project-sub-link,
.achievements-page .ach-muted,
.achievements-page .hycg_xiangqing,
.achievements-page .voice-card-excerpt,
.achievements-page .voice-card-meta,
.achievements-page .phil-details-body,
.contact-page-lead,
.contact-deflist dd,
.contact-tool-label,
.footer {
  font-weight: var(--fontweight-regular);
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 1.2rem 1.5rem;
  box-shadow: var(--shadow-1);
}

/* 正文卡片可悬停上浮；右侧面包屑 .home-sidebar-inner 排除（与 projects-sidebar-inner 同为静止描边） */
#home .card:not(.home-sidebar-inner) {
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-subtle);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#home .card:not(.home-sidebar-inner):hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  border-color: var(--border-accent-hover);
}

#home .home-sidebar-inner.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-1);
  transition: none;
}

#home .home-sidebar-inner.card:hover {
  box-shadow: var(--shadow-1);
  transform: none;
  border-color: var(--border-subtle);
}

/* 首页整体布局：左内容 + 右侧面包屑 */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: var(--space-8);
  align-items: flex-start;
}

.home-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.home-block {
  padding: 2.5rem 1.6rem;
}
.home-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:0px 0px 30px 0px;
}

  

.home-block-header h3 {
  font-size: var(--fontsize-4xl);
  line-height: var(--line-height-tight);
}

/* 首页 · 优势亮点：标题 + 996px 三列网格；单卡继承 #home .card 白底与悬停 */
.home-advantages-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-advantages-section > .home-block.home-advantages-heading {
  padding-bottom: 0;
  margin-bottom: 0;
}

.advantages-grid.style-3 {
  width: 100%;
  max-width: 996px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.advantage-card.card {
  position: relative;
  padding-top: calc(1.35rem + 5px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.advantage-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  pointer-events: none;
  z-index: 3;
}

.advantage-card--accent-purple::before {
  background: linear-gradient(90deg, #5856d6 0%, #7b79e8 100%);
}

.advantage-card--accent-blue::before {
  background: linear-gradient(90deg, #00c7be 0%, #00e5d8 100%);
}

.advantage-card--accent-pink::before {
  background: linear-gradient(90deg, #00d395 0%, #00f0aa 100%);
}

.advantage-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 2;
}

/* 大号背景数字：渐变字色 + 水印层次（仅配色与层次，不动交互） */
.advantages-grid.style-3 .advantage-number {
  position: absolute;
  /* top: 1.35rem; */
  right: 1.35rem;
  font-size: var(--fontsize-bg);
  font-weight: var(--fontweight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  margin: 0;
  padding: 0;
  opacity: 0.15;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  z-index: 0;
}

.advantages-grid.style-3 > article:nth-child(1) .advantage-number {
  background-image: linear-gradient(90deg, #5856d6 0%, #7b79e8 100%);
}

.advantages-grid.style-3 > article:nth-child(2) .advantage-number {
  background-image: linear-gradient(90deg, #00c7be 0%, #00e5d8 100%);
}

.advantages-grid.style-3 > article:nth-child(3) .advantage-number {
  background-image: linear-gradient(90deg, #00d395 0%, #00f0aa 100%);
}

.advantage-icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 玻璃反光扫过（::before 不与卡片顶部彩条冲突） */
.advantage-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    transparent 28%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 72%
  );
  transform: rotate(45deg);
  animation: icon-shimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes icon-shimmer {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }

  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* 三张卡片反光错峰，避免完全同步 */
.advantages-grid.style-3 > article:nth-child(1) .advantage-icon::before {
  animation-delay: 0s;
}

.advantages-grid.style-3 > article:nth-child(2) .advantage-icon::before {
  animation-delay: 1s;
}

.advantages-grid.style-3 > article:nth-child(3) .advantage-icon::before {
  animation-delay: 2s;
}

.advantage-icon svg {
  width: 32px;
  height: 32px;
  display: block;
  position: relative;
  z-index: 1;
}

/* 渐变底色（紫 / 青绿 / 翠绿，与顶条一致） */
.icon-gradient-purple {
  background: linear-gradient(135deg, #2d01ff 0%, #7b79e8 100%);
}

.icon-gradient-blue {
  background: linear-gradient(135deg, #00c7be 0%, #00e5d8 100%);
}

.icon-gradient-pink {
  background: linear-gradient(135deg, #00d395 0%, #00f0aa 100%);
}

.advantage-card:hover .advantage-icon {
  transform: scale(1.1) rotate(-5deg);
}

.advantage-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.advantage-title {
  margin: 24px 0 24px;
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

.advantage-desc {
  margin: 0 0 0.85rem;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  text-align: justify;
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
  flex: 1;
}

.advantage-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.advantage-tags span {
  flex-shrink: 0;
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-tight);
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.advantages-grid.style-3 > article:nth-child(1) .advantage-tags span {
  background: #eef0ff;
  color: #5856d6;
}

.advantages-grid.style-3 > article:nth-child(2) .advantage-tags span {
  background: #e6faf9;
  color: #009e96;
}

.advantages-grid.style-3 > article:nth-child(3) .advantage-tags span {
  background: #e8fcf3;
  color: #00a376;
}



/* 个人介绍 · Hero（紫 / 青 / 绿主题；右侧为占位无真实照片） */
#home-intro.intro-hero {
  --intro-purple: #5856d6;
  --intro-cyan: #00c7be;
  --intro-green: #00d395;
  /* 与 .home-block 下边距一致，供右侧照片贴底抵消用 */
  --intro-hero-pad-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

#home-intro.intro-hero.card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(230, 240, 255, 0.9) 40%,
    rgba(240, 236, 255, 0.85) 100%
  );
  border-radius: var(--radius-2xl);
}

.intro-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
  gap: var(--space-8);
  align-items: stretch;
}

.intro-hero-left {
  min-width: 0;
}

.intro-hero-greeting {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-semibold);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-secondary);
  margin:0px 0px 10px 4px;
}

/* 姓名 */
.intro-hero-name {
  margin: 0 0 30px 0px;
  font-size: var(--fontsize-6xl);
  font-weight: var(--fontweight-bold);
  letter-spacing: -0.04em;
  line-height: var(--line-height-tight);
   background-color: var(--primary);
  /* background: linear-gradient(95deg, #045AFE 3%, #05d8c0 28%, #00c7be 56%, #00d395 100%); */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro-hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0 0 10px 0px;
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
}

.intro-title-main {
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
}

.intro-title-divider {
  color: rgba(88, 86, 214, 0.45);
  font-weight: var(--fontweight-medium);
}

.intro-title-sub {
  font-weight: var(--fontweight-semibold);
  color: var(--text-on-accent);
}

.intro-hero-desc {
  margin: 0 0 1rem;
  font-size: var(--fontsize-xl);
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
  max-width: 34rem;
}

   



.intro-hero-meta {
  display: grid;
 
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.intro-meta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding:10px 20px 10px 15px;
 
}

.intro-meta-icon {
  display: flex;
  padding: 10px 30px 30px 0px;
  width: 35px;
  height: 35px;
  font-size: var(--fontsize-4xl);
  line-height: var(--line-height-tight);
  flex-shrink: 0;
}
   /* 卡片的字 */
.intro-meta-label {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

.intro-meta-value {
  font-size: var(--fontsize-1xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-base);
}

.intro-hero-right {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 右侧整块贴卡片底边（抵消 .home-block 下边距），参考设计稿人物底部与卡底对齐 */
#home-intro.intro-hero .intro-hero-right {
  margin-bottom: calc(-1 * var(--intro-hero-pad-bottom, 2rem));
}

.intro-hero-photo-wrapper {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
}

/* 照片区域：与外侧 4:5 框一致，图片等比铺满并居中裁剪 */
.intro-hero-photo-placeholder {
  width: 100%;
  height: 110%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
}

.intro-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.intro-float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(88, 86, 214, 0.16);
  box-shadow: var(--shadow-3);
  animation: intro-float-y 5s ease-in-out infinite;
}

.intro-float-card.card-1 {
  left: -20%;
  top: 5%;
  animation-delay: 0s;
}

.intro-float-card.card-2 {
  right: -26%;
  bottom: 12%;
  animation-delay: 1.6s;
}

.float-card-icon {
  font-size: var(--fontsize-3xl);
  line-height: var(--line-height-tight);
}

.float-card-number {
  font-size: var(--fontsize-1xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

.float-card-label {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
}

.intro-float-badge {
  position: absolute;
  top: 65%;
  left: -33%;
  z-index: 10;
  padding:10px 20px 10px 20px;
  border-radius: var(--radius-round);
  font-size: var(--fontsize-1xl);
  font-weight: var(--fontweight-bold);
  background: linear-gradient(90deg, rgba(102, 83, 253, 0.95), rgba(29, 151, 254, 0.95));
  color: #fff;
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  animation: intro-float-y-badge 4.6s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes intro-float-y {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes intro-float-y-badge {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}



/* 列表样式 */
.home-list {
  margin-left: 1.0rem;
  margin-right: 2rem;
  font-size: var(--fontsize-md);
  color: var(--text-secondary);
  list-style: none;
  padding-left: 0;
}

.home-list li {
  margin-bottom: var(--space-4);
}

/* 公司经历：五段分区；竖条与 #home .home-block-header::before 同左（距卡片内容区左缘 22.4px） */
#home-experience .home-experience-blocks {
  margin-left: 19px;
  margin-right: 2rem;
  font-size: var(--fontsize-md);
  color: var(--text-secondary);
}

#home-experience .experience-block {
  display: flex;
  align-items: stretch;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
  border-radius: 0px;
  transition: background-color 0.25s ease;
}

#home-experience .experience-block:hover {
  background-color: var(--bg-page);
}

#home-experience .experience-block:last-child {
  margin-bottom: 0;
}

#home-experience .experience-block__bar {
  position: relative;
  overflow: hidden;
  flex: 0 0 4px;
  width: 4px;
  align-self: stretch;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #2f5fff 0%, #6b8aff 100%);
}

/* Hover：自上而下 #000 覆盖竖条（充电感），离开时高度收回 */
#home-experience .experience-block__bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-radius: var(--radius-sm);
  background: #00d395;
  z-index: 1;
  pointer-events: none;
  transition: height 0.38s cubic-bezier(0.33, 0.9, 0.32, 1);
}

#home-experience .experience-block:hover .experience-block__bar::after {
  height: 100%;
}

#home-experience .experience-block__body {
  flex: 1;
  min-width: 0;
  transition: transform 0.38s cubic-bezier(0.33, 0.9, 0.32, 1);
}

#home-experience .experience-block:hover .experience-block__body {
  transform: translateX(8px);
}


.experience-item-title {
  font-weight: var(--fontweight-semibold);
  font-size: var(--fontsize-2xl);
  color: var(--text-primary);
}

.experience-item-meta {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-loose);
}

.experience-item-meta strong {
  color: var(--text-primary);
  font-weight: var(--fontweight-semibold);
}

.experience-item-paragraph {
  padding: var(--space-2) 0;
}

.experience-item-paragraph--indent {
  padding: 0 22px;
  text-align: justify;
}

/* 学历证书 */
.edu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--fontsize-1xl);
}

/* 校徽圆点距卡片内容区左缘 30px（与 .home-block 内边距之后的内容起点对齐） */
#home-education .edu-list {
  padding-left: 50px;
}

.edu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.edu-logo-circle {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-round);
  background: var(--bg-card);
  /* background: linear-gradient(135deg, #045AFE 0%, #00AEFF 100%); */
  /* box-shadow:
    0 10px 32px rgba(12, 10, 144, 0.38),
    inset 0 -4px 12px rgba(0, 0, 0, 0.14),
    inset 0 4px 12px rgba(255, 255, 255, 0.26); */

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontsize-5xl);
  color: var(--text-inverse);
}

.edu-school {
  font-weight: var(--fontweight-semibold);
  font-size: var(--fontsize-3xl);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.edu-meta {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
}

/* 学历背景与职业证书之间的分割线（宽度与 .home-block-header 一致，通栏） */
#home-education .home-edu-divider {
  display: block;
  width: 100%;
  height: 0;
  margin: 30px 0 30px 0;
  border: none;
  border-top: 1px solid var(--border-primary);
  box-sizing: border-box;
}

#home-education .edu-list--cert {
  padding-left: 50px;
}

#home-education .edu-list--cert .edu-item {
  width: 100%;
  box-sizing: border-box;
  padding-right: var(--space-10);
}

#home-education .edu-list--cert .edu-item > div:last-child {
  flex: 1;
  min-width: 0;
}

#home-education .edu-logo-circle--cert {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, #6960fd 0%, #248bf7 100%);
  overflow: hidden;
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-inverse);
  line-height: var(--line-height-tight);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

#home-education .edu-cert-line {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--fontsize-2xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-base);
}

#home-education .edu-cert-line + .edu-cert-line {
  margin-top: var(--space-2);
}

#home-education .edu-cert-preview-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-placeholder);
  cursor: pointer;
  line-height: var(--line-height-tight);
  -webkit-font-smoothing: antialiased;
  transition: color 0.22s ease, transform 0.22s ease;
}

#home-education .edu-cert-preview-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

#home-education .edu-cert-preview-btn:hover,
#home-education .edu-cert-preview-btn:focus-visible {
  color: var(--primary);
}

#home-education .edu-cert-preview-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

#home-education .edu-cert-preview-btn:active {
  transform: scale(0.92);
}

/* 证书预览二级页 */
.cert-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.cert-preview-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cert-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000000;
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: pointer;
}

.cert-preview-modal.is-open .cert-preview-modal__backdrop {
  opacity: 0.7;
}

.cert-preview-modal__stage {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 64px));
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.32s ease,
    transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

.cert-preview-modal.is-open .cert-preview-modal__stage {
  opacity: 1;
  transform: scale(1);
}

.cert-preview-modal__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(646px, calc(100vw - 40px));
  aspect-ratio: 1113 / 808;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  transform-origin: center center;
  will-change: transform, filter, box-shadow;
  transition:
    transform 0.62s cubic-bezier(0.34, 1.08, 0.64, 1),
    box-shadow 0.62s cubic-bezier(0.34, 1.08, 0.64, 1),
    filter 0.62s ease;
}

.cert-preview-modal__card.is-front {
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
  box-shadow: var(--shadow-4);
  cursor: default;
  filter: none;
}

.cert-preview-modal__card.is-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #045afe 0%, #ec23d7 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.cert-preview-modal__card.is-back {
  transform: translate(calc(-40% + 140px), calc(-40% + 130px)) scale(0.72);
  z-index: 1;
  box-shadow: var(--shadow-3);
  cursor: pointer;
}

.cert-preview-modal__card.is-swapping-to-front {
  z-index: 3;
}

.cert-preview-modal__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.62s ease, transform 0.62s cubic-bezier(0.34, 1.08, 0.64, 1);
}

.cert-preview-modal__card.is-back .cert-preview-modal__card-img {
  filter: blur(16px) saturate(118%) brightness(1.04);
  transform: scale(1.08);
  transform-origin: center;
}

.cert-preview-modal__card.is-front .cert-preview-modal__card-img {
  filter: none;
  transform: none;
}

.cert-preview-modal__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter: blur(24px) saturate(165%) brightness(1.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.62s ease;
}

.cert-preview-modal__card.is-back .cert-preview-modal__glass {
  opacity: 1;
}



/* 小标题行（外部荣誉 / 内部荣誉） */
.home-subtitle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0.45rem 0;
}

.home-subtitle-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: var(--primary);
}

.home-subtitle-text {
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-medium);
}

/* 能力模型（#home-ability）：上下轴条 + 浅灰主框 + 2×2 白卡（对齐设计稿） */
#home-ability .ability-model {
  margin-top: var(--space-8);
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

#home-ability .ability-axis-top,
#home-ability .ability-axis-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-secondary);
  background:var(--bg-page);
  border: 1.5px dashed var(--border-primary);
  border-radius: var(--radius-xl);
  box-sizing:border-box；
}

#home-ability .ability-axis-top {
  margin-bottom: var(--space-6);
}

#home-ability .ability-axis-bottom {
  margin-top: var(--space-6);
}

#home-ability .ability-frame {
  border: 1.5px dashed var(--border-primary);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--bg-page);
}

#home-ability .ability-header {
  text-align: center;
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color:var(--text-on-accent);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
  white-space: normal;
}

#home-ability .ability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

#home-ability .ability-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem;
  min-height: 0;
  position: relative;
  text-align: left;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); */
}

#home-ability .ability-dim {
  position: static;
  display: block;
  margin: 0 0 0.4rem 0;
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-semibold);
  color: var(--primary);
  opacity: 1;
  pointer-events: auto;
}

#home-ability .ability-cell-title {
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
}

#home-ability .ability-cell-desc {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-3);
  max-width: 100%;
}

#home-ability .ability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#home-ability .ability-tag {
  background: var(--primary-subtle-bg);
  color: var(--primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-subtle-border);
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-tight);
  padding: 0.32rem 0.55rem;
  white-space: nowrap;
}

/* 作品目录（#home-portfolio-catalog）：能力维度矩阵表 */
#home-portfolio-catalog .portfolio-catalog-intro {
  text-align: center;
  margin-bottom: var(--space-5);
}

#home-portfolio-catalog .portfolio-catalog-title {
  text-align: center;
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-on-accent);
  margin: 0 0 0.5rem;
  line-height: var(--line-height-tight);
}

#home-portfolio-catalog .portfolio-catalog-subtitle {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  margin: 0 auto;
  max-width: 100%;
}

#home-portfolio-catalog .portfolio-matrix-wrap {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#home-portfolio-catalog .portfolio-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

#home-portfolio-catalog .portfolio-matrix thead th {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  background: var(--gray-10);
  text-align: center;
  vertical-align: middle;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--border-primary);
  line-height: var(--line-height-base);
}

#home-portfolio-catalog .portfolio-matrix thead th:first-child {
  text-align: left;
  padding-left: 1.25rem;
  width: 18%;
}

#home-portfolio-catalog .portfolio-matrix tbody tr {
  background: var(--bg-card);
  transition: background-color 0.2s ease;
}

#home-portfolio-catalog .portfolio-matrix tbody tr:hover,
#home-portfolio-catalog .portfolio-matrix tbody tr:hover th,
#home-portfolio-catalog .portfolio-matrix tbody tr:hover td {
  background: var(--bg-page);
}

#home-portfolio-catalog .portfolio-matrix tbody tr:hover .portfolio-matrix-project {
  color: var(--primary);
}

#home-portfolio-catalog .portfolio-matrix tbody th {
  text-align: left;
  vertical-align: middle;
  padding: 0.85rem 0.75rem 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-primary);
}

#home-portfolio-catalog .portfolio-matrix-project {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-primary);
  line-height: var(--line-height-base);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

#home-portfolio-catalog .portfolio-matrix-project:hover,
#home-portfolio-catalog .portfolio-matrix-project:focus-visible {
  color: var(--primary);
  outline: none;
}

#home-portfolio-catalog .portfolio-matrix tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--border-primary);
}

#home-portfolio-catalog .portfolio-matrix tbody tr:last-child th,
#home-portfolio-catalog .portfolio-matrix tbody tr:last-child td {
  border-bottom: none;
}

/* iconfont Symbol：path 默认 #333，改为 currentColor 后由容器设色 */
#icon-zhengque path,
#icon-yanjing path {
  fill: currentColor;
}

#home-portfolio-catalog .portfolio-matrix-check {
  display: inline-block;
  width: 23px;
  height: 23px;
  vertical-align: middle;
  color: var(--primary);
}

.project-p7-icon-slot .project-p7-icon-svg {
  display: block;
  width: 24px;
  height: 24px;
  color: inherit;
}

/* 右侧面包屑导航 */
.home-sidebar {
  position: relative;
  width: 100px;
}

.home-sidebar-inner {
  position: fixed;
  top: var(--sidebar-fixed-top);
  right: max(10px, calc((100vw - 1120px) / 2 - 30px));
  z-index: 80;
  padding: 0.7rem;
  width: max-content;
}

.home-sidebar-title {
  font-size: var(--fontsize-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.home-sidebar-link {
  display: block;
  width: 5.5em; /* 约 5 个中文字符宽度 */
  text-align: center;
  white-space: nowrap;
  border: none;
  padding: 0.45rem 0.4rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-lg);
  background: transparent;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.home-sidebar-link:hover:not(.active) {
  background: transparent;
  color: var(--text-secondary);
}

.home-sidebar-link.active {
  background: var(--primary-subtle-bg);
  color: var(--primary);
  font-weight: var(--fontweight-semibold);
}

.home-sidebar-link.active:hover {
  background: var(--primary-subtle-bg);
  color: var(--primary);
}

/* 作品集部分 */
.projects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--space-8);
  align-items: flex-start;
}

.projects-main {
  padding: 0.2rem;
}

/* 作品集卡片：样式 */
.project-card.project-panel-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  border: none;
  padding: 1.2rem 1.5rem;
  margin-bottom: 0;
}

/* 作品集局部 token（渐变卡片等；与全局 --primary 随 Tab 变化） */
#projects {
  --primary-lighter: rgba(47, 95, 255, 0.08);
  --bg-secondary: var(--bg-card);
}

#projects.project-dark {
  --primary-lighter: rgba(0, 225, 52, 0.14);
  --bg-secondary: #060908;
  /* 左侧内容区卡片悬停：与浅色「上浮 + 强阴影」同构，配色适配荧光绿暗色件 */
  --projects-dark-card-shadow-hover: 0 22px 40px -10px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 225, 52, 0.2),
    0 12px 28px rgba(0, 225, 52, 0.08);
  --projects-dark-card-border-hover: rgba(0, 225, 52, 0.48);
  --projects-dark-card-highlight-shadow-hover: 0 26px 50px -12px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(0, 225, 52, 0.38),
    0 16px 36px rgba(0, 225, 52, 0.14);
}

/* No.6：卡片悬停/高亮描边等与青蓝强调一致（背景等仍沿用 project-dark 默认） */
#projects.project-dark[data-active-project="6"] {
  --primary-lighter: rgba(66, 210, 243, 0.14);
  --projects-dark-card-shadow-hover: 0 22px 40px -10px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(66, 210, 243, 0.2),
    0 12px 28px rgba(66, 210, 243, 0.08);
  --projects-dark-card-border-hover: rgba(66, 210, 243, 0.48);
  --projects-dark-card-highlight-shadow-hover: 0 26px 50px -12px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(66, 210, 243, 0.38),
    0 16px 36px rgba(66, 210, 243, 0.14);
}

/* 关键成果 · 高亮卡片（浅色：主色浅晕 → 白；深色：墨绿 → 近黑，参考设计图） */
.project-card.project-panel-card.project-card-highlight {
  backdrop-filter: none;
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--bg-secondary) 100%);
  /* border: 1px solid rgba(47, 95, 255, 0.14); */
  box-shadow: var(--shadow-1);
}

/* 作品集内容区卡片：浅色下悬停（不含 No.3 胶囊横幅；右侧侧栏仅静止样式、无交互） */
/* 普通磨砂卡：实心白底 + 首页同款阴影（与高亮渐变卡分开写，避免盖住关键成果渐变） */
#projects:not(.project-dark)
  .project-detail-stack
  .project-card.project-panel-card:not(.project-3-award-banner):not(.project-card-highlight) {
  background: var(--bg-card);
  backdrop-filter: none;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#projects:not(.project-dark)
  .project-detail-stack
  .project-card.project-panel-card:not(.project-3-award-banner):not(.project-card-highlight):hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  border-color: var(--border-accent-hover);
}

/* 关键成果高亮卡：保留原有渐变与描边，仅叠加同款位移与悬停阴影 */
#projects:not(.project-dark)
  .project-detail-stack
  .project-card.project-panel-card.project-card-highlight:not(.project-3-award-banner) {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#projects:not(.project-dark)
  .project-detail-stack
  .project-card.project-panel-card.project-card-highlight:not(.project-3-award-banner):hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  border-color: var(--border-accent-hover);
}

/* No.3 获奖横幅：渐变描边 + 浅底 + 左侧奖杯圆标（对齐 award-banner.style-2） */
.project-3-award-banner.project-card.project-panel-card {
  padding: 0;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  text-align: left;
}

.project-3-award-banner .award-banner.style-2,
.project-3-award-banner .award-banner.style-3 {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1rem 1.35rem;
  border-radius: var(--radius-xl);
  box-sizing: border-box;
  border: 1px solid transparent;
  background:
    linear-gradient(
      90deg,
      rgba(249, 246, 255, 0.97) 0%,
      var(--bg-card) 38%,
      var(--bg-card) 62%,
      rgba(237, 244, 255, 0.97) 100%
    )
      padding-box,
    linear-gradient(
      102deg,
      #ff6b85 0%,
      #ffa94d 26%,
      #5cb3ff 72%,
      #7b6dff 100%
    )
      border-box;
  box-shadow: 0 4px 22px rgba(91, 114, 180, 0.12);
}

.project-3-award-banner .award-banner.style-3 .award-icon--sample {
  background: linear-gradient(160deg, #ffe082 0%, #ffb300 52%, #ff8f00 100%);
  box-shadow: none;
  font-size: var(--fontsize-3xl);
}

.project-3-award-banner .award-banner.style-3 .award-sample-link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: inherit;
  transition: color 0.2s ease;
}

.project-3-award-banner .award-banner.style-3 .award-sample-link:hover,
.project-3-award-banner .award-banner.style-3 .award-sample-link:focus-visible,
.project-3-award-banner .award-banner.style-3 .award-sample-link:active {
  color: var(--primary);
}

.project-3-award-banner .award-banner.style-3 .award-sample-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.project-3-award-banner .award-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fontsize-4xl);
  line-height: var(--line-height-tight);
  background: linear-gradient(160deg, #ffe082 0%, #ffb300 52%, #ff8f00 100%);
  box-shadow:
    0 4px 18px rgba(255, 167, 38, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.38) inset;
}

.project-3-award-banner .award-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

.project-3-award-banner .award-label {
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.project-3-award-banner .award-text {
  margin: 0;
  font-size: var(--fontsize-1xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-base);
}


.project-detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.project-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.project-card-row .project-card.project-panel-card {
  min-width: 0;
}

.project-card-row.project-card-row--single {
  grid-template-columns: 1fr;
}

/* No.1～No.4：左「我的角色」: 右侧策略/挑战等 = 1 : 2（No.5 见下条；No.6、No.7 仍为默认 1:1） */
#projects[data-active-project="1"] .project-card-row:not(.project-card-row--single),
#projects[data-active-project="2"] .project-card-row:not(.project-card-row--single),
#projects[data-active-project="3"] .project-card-row:not(.project-card-row--single),
#projects[data-active-project="4"] .project-card-row:not(.project-card-row--single) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* No.5：双列宽占比单独收紧左侧「我的角色」列 */
#projects[data-active-project="5"] .project-card-row:not(.project-card-row--single) {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
}

/* No.5：关键成果 → 核心挑战（全宽）→ 我的角色|核心行动 */
#projects[data-active-project="5"] .project-detail-stack > .project-intro-card {
  order: 1;
}

#projects[data-active-project="5"] .project-detail-stack > .project-key-results-card {
  order: 2;
}

#projects[data-active-project="5"] .project-detail-stack > .project-dimensions-card {
  order: 3;
}

#projects[data-active-project="5"] .project-detail-stack > #project-role {
  order: 4;
}

/* No.7 智慧医疗电商：我的角色 → 能力卡片区（无项目介绍 / 无关键成果卡） */
#projects[data-active-project="7"] .project-detail-stack > #project-role {
  order: 1;
}

#projects[data-active-project="7"] .project-detail-stack > .project-dimensions-card {
  order: 2;
}

/* No.7：无关键成果卡，仅保留我的角色 + 能力区 */
#projects[data-active-project="7"] #project-card-dimensions.project-dimensions-card {
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
}

.project-p7-highlight-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
  width: 100%;
  align-items: stretch;
  min-height: 0;
}

.project-p7-highlight-left {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
  min-width: 0;
  min-height: 0;
}

.project-p7-highlight-tall {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.project-p7-highlight-tall > .project-p7-highlight-card,
.project-p7-highlight-left > .project-p7-highlight-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-p7-highlight-card {
  min-width: 0;
}

.project-p7-highlight-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* 标题行内所有图标（主题蓝 / 橙 / 绿等）统一上移 2px，与文字对齐 */
.project-p7-highlight-head .project-p7-icon-slot {
  transform: translateY(-2px);
}

.project-p7-icon-slot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: block;
  background-color: var(--p7-icon-color, var(--border-secondary));
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* 项目 7：iconfont Symbol（项目 5157065）与 SVG mask 二选一 */
.project-p7-icon-slot:has(.project-p7-icon-svg) {
  background-color: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  color: var(--p7-icon-color, var(--primary));
}

.project-p7-highlight-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.project-p7-highlight-card .project-panel-content {
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
}

.project-p7-highlight-ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

.project-p7-highlight-ol li + li {
  margin-top: var(--space-8);
}



.projects-title {
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-tight);
  margin: 0px 0 40px 24px;
 
}

.project-panel {
  margin-bottom: var(--space-5);
}

.project-result-panel {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.project-result-panel #project-result-dynamic {
  width: 100%;
}

.project-panel-title {
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
}

/* 项目成果总标题与各小节标题（No.7 多段）：覆盖 .project-panel-title 的字号与外边距 */
#project-result-title,
#project-result-dynamic > .project-panel-title {
  font-size: var(--project-result-title-size);
  line-height: var(--line-height-tight);
  margin: 4rem 0 1.75rem;
}

#project-result-dynamic > .project-panel-title:not(:first-child) {
  margin-top: var(--space-10);
}
 
.projects-main .project-panel-content {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  text-align: justify;
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
}

#projects-key-results-content .project-key-results-score,
#projects-key-results-content .project-key-results-highlight,
.project-p7-highlight-card .project-key-results-highlight {
  color: var(--primary);
  font-weight: var(--fontweight-semibold);
}

#projects-key-results-content .project-key-results-highlight--green {
  color: var(--pf-green);
  font-weight: var(--fontweight-semibold);
}

#projects-key-results-content .project-key-results-highlight--greenblue {
  color: var(--pf-greenblue);
  font-weight: var(--fontweight-semibold);
}

.project-result-box {
  min-height: 360px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--bg-page);
  padding: 1rem;
}

.project-result-item {
  margin-bottom: var(--space-2);
}

.project-dimensions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

#projects-key-results-content .project-key-results-em {
  font-weight: var(--fontweight-semibold);
}

.project-image-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* PPT间距 */
  gap: var(--space-5);
}

#projects-result-content {
  position: relative;
}

.project-image-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--border-secondary);
  border-radius: 0px;
  overflow: hidden;
  display: block;
}

.project-image-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 竖长成果图（如 zpj_xm7_xt_4）按图片原始比例完整展示，不裁切 */
.project-image-placeholder.project-image-placeholder--full-height {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: transparent;
}

.project-image-placeholder.project-image-placeholder--full-height img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

.project-load-more {
  align-self: center;
  margin-top: var(--space-3);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fontsize-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 作品集 No.2 / No.6 暗色：查看更多 */
#projects.project-dark #projects-load-more {
  color: var(--text-secondary-dark);
  border-color: var(--text-secondary-dark);
  background-color: var(--bg-inverse);
}

#projects.project-dark #projects-load-more:hover {
  color: var(--text-secondary-dark);
  border-color: var(--text-secondary-dark);
  background-color: var(--bg-inverse);
}

.back-to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: var(--radius-round);
  background: #000000;
  color: var(--text-secondary-dark);
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-2);
}

@supports not (aspect-ratio: 16 / 9) {
  .project-image-placeholder {
    height: 0;
    padding-bottom: 56.25%;
  }

  .project-image-placeholder span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.projects-sidebar {
  position: relative;
  width: 228px;
}

.projects-sidebar-inner {
  position: fixed;
  top: var(--sidebar-fixed-top);
  right: max(10px, calc((100vw - 1120px) / 2 - 30px));
  z-index: 80;
  padding: 0.7rem;
  width: max-content;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 右侧 projects-sidebar-inner：与左侧「项目介绍」等同款静止描边 + 阴影（不加 transition / :hover） */
#projects:not(.project-dark) .projects-sidebar-inner.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-1);
}

#projects.project-dark .projects-sidebar-inner.card {
  background: rgba(88, 88, 88, 0.1);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(154, 154, 154, 0.3);
  box-shadow: none;
}

#projects.project-dark .projects-title,
#projects.project-dark .project-panel-title,
#projects.project-dark .project-sub-link.active {
  color: var(--primary);
}

/* 暗黑 No.2 / No.6：仅当前项绿色强调条；未选行为灰阶（对齐参考图二） */
#projects.project-dark .project-main-link.active {
  width: 204px;
  min-width: 204px;
  max-width: 204px;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  background: #113319;
  color: var(--primary);
  overflow: hidden;
  font-weight: var(--fontweight-semibold);
}

#projects.project-dark .project-main-link.active .project-crumb-index {
  background: var(--primary);
  color: var(--text-on-accent);
  font-weight: var(--fontweight-bold);
}

#projects.project-dark .project-main-link.active .project-crumb-title {
  color: var(--primary);
  font-weight: var(--fontweight-semibold);
}

#projects.project-dark .project-main-link.active .project-crumb-tag {
  background: #10411b;
  color: var(--primary);
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
}

#projects.project-dark .projects-main .project-panel-content,
#projects.project-dark .project-sub-link:not(.active) {
  color: var(--text-secondary);
}

#projects.project-dark .project-main-link:not(.active) .project-crumb-title {
  color: var(--text-secondary);
  font-weight: var(--fontweight-regular);
}

#projects.project-dark .project-main-link:not(.active) .project-crumb-index {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-weight: var(--fontweight-regular);
}

#projects.project-dark .project-main-link:not(.active) .project-crumb-tag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
}

#projects.project-dark .project-main-link:not(.active):hover {
  background: #122717;
  color: var(--text-secondary);
}

#projects.project-dark .project-main-link:not(.active):hover .project-crumb-index {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}

#projects.project-dark .project-main-link:not(.active):hover .project-crumb-title {
  color: var(--text-secondary);
}

#projects.project-dark .project-main-link:not(.active):hover .project-crumb-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

#projects.project-dark .project-sub-link:not(.active):hover {
  color: var(--text-secondary);
  background: #122717;
}

#projects.project-dark #project-result,
#projects.project-dark #project-result::before,
#projects.project-dark .project-result-box,
#projects.project-dark .project-image-placeholder {
  background: #000000;
}
 /* 暗黑模式卡片 */
#projects.project-dark .project-card.project-panel-card {
  background: rgba(88, 88, 88, 0.1);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(154, 154, 154, 0.3);
  box-shadow: none;
}

#projects.project-dark .project-card.project-panel-card.project-card-highlight {
  background: linear-gradient(135deg, rgba(17, 51, 25, 0.95) 0%, var(--bg-secondary) 100%);
  border-color: rgba(0, 225, 52, 0.22);
  backdrop-filter: none;
  box-shadow: var(--shadow-4);
}

#projects.project-dark[data-active-project="6"] .project-card.project-panel-card.project-card-highlight {
  border-color: rgba(66, 210, 243, 0.22);
}

/* 暗黑 No.2 / No.6：左侧「项目介绍 / 关键成果 / 我的角色 / 核心策略 / 核心行动…」与浅色同款交互，仅配色随暗色主题 */
#projects.project-dark
  .project-detail-stack
  .project-card.project-panel-card:not(.project-3-award-banner):not(.project-card-highlight) {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#projects.project-dark
  .project-detail-stack
  .project-card.project-panel-card:not(.project-3-award-banner):not(.project-card-highlight):hover {
  transform: translateY(-3px);
  box-shadow: var(--projects-dark-card-shadow-hover);
  border-color: var(--projects-dark-card-border-hover);
}

#projects.project-dark
  .project-detail-stack
  .project-card.project-panel-card.project-card-highlight:not(.project-3-award-banner) {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#projects.project-dark
  .project-detail-stack
  .project-card.project-panel-card.project-card-highlight:not(.project-3-award-banner):hover {
  transform: translateY(-3px);
  box-shadow: var(--projects-dark-card-highlight-shadow-hover);
  border-color: rgba(0, 225, 52, 0.58);
}

#projects.project-dark[data-active-project="6"]
  .project-detail-stack
  .project-card.project-panel-card.project-card-highlight:not(.project-3-award-banner):hover {
  border-color: rgba(66, 210, 243, 0.58);
}

.project-breadcrumb-item {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-xl);
  width: 100%;
  box-sizing: border-box;
}

/* 选中项：整条仅随一级行内容宽度（不拉满侧栏） */
.project-breadcrumb-item:has(.project-main-link.active) {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  background: transparent;
  padding: 0;
}

#projects.project-dark .project-breadcrumb-item:has(.project-main-link.active) {
  background: transparent;
  padding: 0;
}

.project-breadcrumb-item.expanded {
  background: var(--bg-card);
  padding: 0.35rem 0.4rem 0.45rem;
}

#projects.project-dark .project-breadcrumb-item.expanded {
  background: transparent;
  padding: 0;
}

.project-main-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: none;
  font-size: var(--fontsize-md);
  color: var(--text-primary);
  font-weight: var(--fontweight-regular);
  cursor: pointer;
  padding: 0 0.45rem;
  min-height: 40px;
  border-radius: var(--radius-lg);
  transition: background 0.15s ease, color 0.15s ease;
}

.project-main-link:not(.active) .project-crumb-title {
  color: var(--text-secondary);
  font-weight: var(--fontweight-regular);
}

.project-main-link:not(.active) .project-crumb-index {
  font-weight: var(--fontweight-regular);
}

.project-main-link:not(.active) .project-crumb-tag {
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
}

.project-crumb-index {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-lg);
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-tight);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--primary-subtle-bg-muted);
  color: var(--text-primary);
}

.project-crumb-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-crumb-tag {
  flex: 0 0 auto;
  max-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  padding: 0.18rem 0.38rem;
  border-radius: var(--radius-md);
  background: var(--primary-subtle-bg-muted);
  color: var(--text-secondary);
}

.project-main-link.active {
  width: 204px;
  min-width: 204px;
  max-width: 204px;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 0.45rem;
  background: var(--primary-subtle-bg);
  color: var(--text-primary);
  overflow: hidden;
  font-weight: var(--fontweight-semibold);
}

.project-main-link.active .project-crumb-index {
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: var(--fontweight-bold);
}

.project-main-link.active .project-crumb-title {
  color: #2f5fff;
  font-weight: var(--fontweight-semibold);
}

.project-main-link.active .project-crumb-tag {
  background: var(--primary-subtle-bg-tag);
  color: var(--primary);
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
}

.project-main-link:not(.active):hover {
  background: var(--primary-subtle-bg-hover);
  color: var(--text-primary);
}

.project-sub-links {
  /* 与一级标题左缘对齐 + 二级整体右移 3px */
  padding-left: calc(32px + 0.45rem + 5px);
  margin-top: var(--space-3);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
}

.project-breadcrumb-item.expanded .project-sub-links {
  display: flex;
}

.project-sub-link {
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  padding: 0.12rem 0.25rem;
  line-height: var(--line-height-loose);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.project-sub-link:hover {
  background: var(--primary-subtle-bg-hover);
  color: var(--text-primary);
}

.project-sub-link.active {
  background: transparent;
  color: var(--primary);
  font-weight: var(--fontweight-regular);
}

/* 行业成果（线框：荣誉 / 行业发声 / 设计哲学） */
.achievements-page {
  max-width: 1120px;
  margin: 0 auto;
}

.achievements-page .ach-block + .ach-block {
  margin-top: var(--space-16);
  padding-top: 0.5rem;
}

.achievements-page .ach-block-title {
  text-align: center;
  line-height: var(--line-height-tight);
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  margin: 0 0 40px;
  letter-spacing: 0.02em;
}

.achievements-page .honor-item {
  margin-bottom: 0;
}

.achievements-page .honor-item-title {
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-base);
  margin: 0 0 0.45rem;
}

.achievements-page .honor-item-lead {
  font-size: var(--fontsize-1xl);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-base);
  margin: 0 0 1.1rem;
}

.achievements-page .honor-outside-heading {
  text-align: left;
  margin: 0 0 0.85rem;
  width: 100%;
  max-width: 1120px;
}

.achievements-page .honor-outside-heading .honor-item-title {
  margin-bottom: var(--space-1);
}

.achievements-page .honor-outside-heading .honor-item-lead {
  margin-bottom: 0;
}

.achievements-page .honor-outside-heading--with-icon {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-5);
}

.achievements-page .honor-outside-heading-copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* 荣誉卡片：与首页 .home-block.card（继承 .card）一致 — 白底、圆角、柔影、无描边；间距对齐 .home-main gap */
.achievements-page .honor-section-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  border: none;
  padding: 1.4rem 0.5rem 1.4rem 1.6rem;
}

.achievements-page .honor-section-card + .honor-section-card {
  margin-top: var(--space-5);
}

/* 工信卡片距离上面的间距 */
.achievements-page .honor-section-card + .honor-outside-heading {
  margin-top: var(--space-12);
}

.achievements-page .honor-row {
  display: grid;
  grid-template-columns: 1fr 2.7fr;
  gap: var(--space-6);
  align-items: stretch;
  min-width: 0;
}

.achievements-page .honor-col-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.achievements-page .honor-text-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.achievements-page .honor-text-top--solo {
  display: block;
  
}

.achievements-page .honor-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: var(--radius-lg);
  background: var(--bg-placeholder);
}

.achievements-page .honor-icon.honor-icon--with-heading {
  width: auto;
  height: 63px;
  align-self: flex-start;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.achievements-page .honor-icon.honor-icon--with-heading img {
  display: block;
  height: 60px;
  width: auto;
  border-radius: var(--radius-lg);
}

.achievements-page .honor-kicker {
  font-size: var(--fontsize-3xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
  padding-top: 0;
}

.achievements-page .hycg_xiangqing {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  text-align: justify;
  line-height: var(--line-height-loose);
  margin: 0.55rem 0 0.75rem;
  width: 100%;
 
  color: var(--text-secondary);
  
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.achievements-page .ach-link-more {
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
  color: var(--primary);
}

.achievements-page .ach-link-more:hover {
  text-decoration: underline;
color: var(--primary);
}

.achievements-page .honor-gallery-shell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.achievements-page .honor-gallery-viewport {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.achievements-page .honor-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.achievements-page .honor-gallery-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-5);
  width: max-content;
  min-width: min-content;
  padding: 1.25rem 0;
}

.achievements-page .honor-gallery-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--fontsize-3xl);
  line-height: var(--line-height-tight);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.25s ease, transform 0.2s ease;
}

.achievements-page .honor-gallery-btn--prev {
  padding-bottom: var(--space-1);
  box-sizing: border-box;
}

.achievements-page .honor-gallery-btn--next[data-mode="forward"] {
  padding-bottom: var(--space-1);
  box-sizing: border-box;
}

.achievements-page .honor-gallery-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(47, 95, 255, 0.06);
}

.achievements-page .honor-gallery-btn:disabled,
.achievements-page .honor-gallery-btn.is-disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.achievements-page .honor-gallery-btn--next[data-mode="back"] {
  font-size: var(--fontsize-6xs);
}

/* 荣誉图集缩略图高度（与线框红框大致对齐）；宽度按 16:9 随高度变化 */
.achievements-page .ach-honor-thumb-wrap {
  flex: 0 0 auto;
  height: 200px;
  width: calc(200px * 1920 / 1080);
  position: relative;
  z-index: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievements-page .ach-honor-thumb-wrap:hover {
  z-index: 4;
}

/* 整块 16:9 灰底矩形 + 图一起缩放；内层不再单独 transform，避免只在框内放大 */
.achievements-page .ach-honor-thumb {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  background: var(--border-secondary);
  overflow: hidden;
  position: relative;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.achievements-page .ach-honor-thumb-wrap:hover .ach-honor-thumb {
  transform: scale(1.2);
}

/* 换图请改子节点 <img class="ach-honor-thumb-img" src="你的地址">（建议 16:9） */
.achievements-page .ach-honor-thumb-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.achievements-page .ach-honor-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.achievements-page .voice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.achievements-page .voice-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-subtle);
  padding: 1.4rem 1.5rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievements-page .voice-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  border-color: var(--border-accent-hover);
}

.achievements-page .voice-card-media {
  position: relative;
  width: var(--voice-card-media-width);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--voice-card-media-aspect-ratio);
  border-radius: var(--voice-card-media-radius);
  background-color: var(--voice-card-media-placeholder-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.achievements-page .voice-card-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: var(--voice-card-media-object-fit);
  object-position: var(--voice-card-media-object-position);
}

.achievements-page .voice-card-title {
  margin: 0;
  min-width: 0;
  width: 100%;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.achievements-page .voice-card:hover .voice-card-title,
.achievements-page .voice-card-title:hover {
  color: var(--primary);
}

.achievements-page .voice-card-title:focus-visible {
  color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.achievements-page .voice-card-excerpt {
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  text-align: justify;
  color:var(--text-secondary);
  line-height: var(--line-height-loose);
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 与摘要同行带 ach-muted 时：最多 4行，超出末尾省略号 */
.achievements-page .voice-card-excerpt.ach-muted {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievements-page .voice-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--voice-card-footer-border-color);
}

.achievements-page .voice-card-meta {
  font-size: var(--fontsize-6xs);
  min-width: 0;
  line-height: var(--line-height-loose);
}

/* 设计哲学大盒：与首页白卡一致（投影 / 圆角 / 内边距） */
.achievements-page .philosophy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: stretch;
  background: var(--philosophy-shell-bg);
  border-radius: var(--philosophy-shell-radius);
  box-shadow: var(--shadow-1);
  border: none;
  padding: var(--philosophy-shell-padding);
  overflow-x: clip;
  max-width: 100%;
}

.achievements-page .philosophy-accordion {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* 去掉顶线、去掉最后一项底边线；仅保留第 2、第 3 根（即第 1、2 项下方的分隔线） */
.achievements-page .phil-details {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  border-bottom: none;
  min-width: 0;
  max-width: 100%;
}

.achievements-page .phil-details:nth-child(1),
.achievements-page .phil-details:nth-child(2) {
  border-bottom: 1px solid var(--philosophy-divider-color);
}

.achievements-page .phil-details summary {
  
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  font-size: var(--philosophy-details-title-size);
  font-weight: var(--fontweight-semibold);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  user-select: none;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.achievements-page .phil-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0.35rem;
  font-size: var(--fontsize-4xl);
}

.achievements-page .phil-details summary::-webkit-details-marker {
  display: none;
}

.achievements-page .phil-details summary::marker {
  content: "";
}

/* 折叠：chevron 朝下；展开：chevron 朝上 */
.achievements-page .phil-details summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-secondary-dark);
  border-bottom: 2px solid var(--text-secondary-dark);
  transform: rotate(45deg);
  margin-top: 0.35em;
  margin-left: auto;
  transition: transform 0.22s ease;
}

.achievements-page .phil-details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.35em;
}

.achievements-page .phil-details:first-child summary {
  padding-top: 0;
}

.achievements-page .phil-details:last-child summary {
  padding-bottom: 0;
}

.achievements-page .phil-details-body {
  padding: 0 0.25rem 0 0;
  margin-top: var(--philosophy-body-margin-block-start);
  margin-bottom: var(--philosophy-body-margin-block-end);
  font-size: var(--fontsize-md);
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
  font-weight: var(--fontweight-regular);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.achievements-page .phil-details:last-child .phil-details-body {
  margin-bottom: 0;
}

.achievements-page .philosophy-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--philosophy-media-aspect-ratio);
  border-radius: var(--philosophy-media-border-radius);
  background-color: var(--philosophy-media-bg);
  align-self: start;
  overflow: hidden;
}

.achievements-page .philosophy-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 联系方式：主卡片与首页 .home-block.card 一致 */
.contact-page {
  margin: 0 -1.5rem;
  padding: 0rem 2rem 1.5rem 2.75rem;
  border-radius: 0;
}

.contact-page-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.contact-page-title {
  font-size: var(--fontsize-4xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-base);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.contact-page-lead {
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 36rem;
}

.contact-shell {
  background: var(--contact-card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  border: none;
  padding: 1.6rem 15rem 1.6rem 15rem;
  max-width: 100%;
}

.contact-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: var(--space-5);
  align-items: center;
}

.contact-media {
  margin: 0;
  padding: 0;
  border-radius: var(--contact-media-radius);
  background: var(--contact-placeholder-bg);
  overflow: hidden;
}

.contact-page .contact-media--square {
  width: 150px;
  height: 150px;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  justify-self: end;
}

.contact-page .contact-media--square .contact-media-img {
  display: block;
  width: 150px;
  height: 150px;
  max-width: 150px;
  object-fit: cover;
}

.contact-context-label {
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-bold);
  letter-spacing: 0.14em;
  color: var(--text-primary);
  line-height: var(--line-height-base);
  margin: 0 0 1.1rem;
}

.contact-deflist {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-deflist-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.contact-deflist-row--email {
  align-items: center;
}

.contact-deflist dt {
  margin: 0;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}

.contact-deflist dd {
  margin: 0;
  font-size: var(--fontsize-xl);
  font-weight: var(--fontweight-regular);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  color: var(--text-primary);
}

.contact-email-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.contact-email-text {
  word-break: break-all;
}

.contact-copy-btn {
  flex-shrink: 0;
  font-size: var(--fontsize-6xs);
  font-weight: var(--fontweight-regular);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.contact-copy-btn:hover {
  background: var(--bg-hover);
  border-color: var(--gray-6);
}

.contact-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.25rem, 3.2vw, 2.25rem);
  margin-top: var(--space-8);
  padding-top: 0.25rem;
}

.contact-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  min-width: 4.5rem;
}

.contact-tool-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--contact-media-radius);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.contact-tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contact-tool-label {
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-regular);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  text-align: center;
  white-space: nowrap;
}

@keyframes contact-tools-item-in {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes about-ai-grid-in {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-reveal-lr-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes text-reveal-lr-scale {
  0% {
    opacity: 0.5;
    transform: scale(1.2);
  }

  42% {
    opacity: 0.88;
    transform: scale(1.03);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 仅在联系 Tab 可见时播放，避免 display:none 时动画在后台跑完 */
#contact.tab-section.active .contact-tools .contact-tool {
  animation: contact-tools-item-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(1) {
  animation-delay: 0s;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(2) {
  animation-delay: 0.1s;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(3) {
  animation-delay: 0.2s;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(4) {
  animation-delay: 0.3s;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(5) {
  animation-delay: 0.4s;
}

#contact.tab-section.active .contact-tools .contact-tool:nth-child(6) {
  animation-delay: 0.5s;
}


.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fontsize-md);
  line-height: var(--line-height-base);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  font-size: var(--fontsize-md);
  line-height: var(--line-height-base);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  resize: vertical;
  min-height: 42px;
}

.form-textarea {
  min-height: 110px;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, #4f46e5, #22c55e);
  color: #fff;
  font-size: var(--fontsize-md);
  font-weight: var(--fontweight-medium);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  box-shadow: var(--shadow-2);
}

.btn-primary:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

.footer {
  text-align: center;
  font-size: var(--fontsize-6xs);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  padding: 1.5rem 1rem 2rem;
}

/* 响应式 */